Guildwork Recruite

WidgetHTML.html

<div class="recruite">
  <div class="class pld h">
      <h3>Paladin</h3><div class="indicator"></div>
  </div>
  
  <div class="class drk h">
    <h3>Dark Knight</h3><div class="indicator"></div>
  </div>
  
  <div class="class war m">
    <h3>Warrior</h3><div class="indicator"></div>
  </div>
  
  <div class="class whm l">
    <h3>White Mage</h3><div class="indicator"></div>
  </div>
  
  <div class="class ast m">
    <h3>Astrologian</h3><div class="indicator"></div>
  </div>
  
  <div class="class sch m">
    <h3>Scholar</h3><div class="indicator"></div>
  </div>
  
  <div class="class brd h">
    <h3>Bard</h3><div class="indicator"></div>
  </div>
  
  <div class="class blm h">
    <h3>Black Mage</h3><div class="indicator"></div>
  </div>
  
  <div class="class drg h">
    <h3>Dragoon</h3><div class="indicator"></div>
  </div>
  
  <div class="class mnk l">
    <h3>Monk</h3><div class="indicator"></div>
  </div>

  <div class="class nin h">
    <h3>Ninja</h3><div class="indicator"></div>
  </div>

  <div class="class smn h">
    <h3>Summoner</h3><div class="indicator"></div>
  </div>

  <div class="class mch h">
    <h3>Machinist</h3><div class="indicator"></div>
  </div>

<!-- (c) Equilibrium 2015, Saeris Epas -->
  <div class="legend">
  <div class="h"><div class="indicator paused"></div> <span> = High Demand</span></div>
  <div class="m"><div class="indicator paused"></div> <span> = Medium Demand</span></div>
  <div class="l"><div class="indicator paused"></div> <span> = Low Demand</span></div>
</div>

<p style="clear:both;text-align:center;font-size:11px">T13 & 3.0 primals experience required. Please check our <a href=http://eq.guildwork.com/_/introduction>introduction</a> page & <a href=http://eq.guildwork.com/forum/threads/54355c82002aa82d91649628-faq-equilibriums-recruitment-and-you?page=1#54355c82002aa82d91649627>FAQ</a> before applying.</p>

WidgetStyle.css

.recruite h3 {margin:0; padding:0; font-size:14px;}
.recruite .class {
    background: #0e0e0e url(https://cdn.guildwork.net/files/529f138ec16e4d36f91342f4/558dde7f002aa826379de9ea.png
) no-repeat right top;
    height:35px;
    padding:3px 4px;
    -webkit-transition: all 0.6s ease; /* Firefox */
    -moz-transition: all 0.6s ease; /* WebKit */
    -o-transition: all 0.6s ease; /* Opera */
    transition: all 0.6s ease; /* Standard */
  clear:both;
  border-bottom:solid 5px #330D0D;
  max-width:300px;
  margin: 0 auto;
}
.class.pld {background-position:0 0}
.class.drk {background-position:0px -30px}
.class.war {background-position:0px -60px}
.class.whm {background-position:0px -90px}
.class.ast {background-position:0px -120px}
.class.sch {background-position:0px -150px}
.class.brd {background-position:0px -180px}
.class.blm {background-position:0px -210px}
.class.drg {background-position:0px -240px}
.class.mnk {background-position:0px -270px}
.class.nin {background-position:0px -300px}
.class.smn {background-position:0px -330px}
.class.mch {background-position:0px -360px}

.recruite .class h3 {margin:0; float: left; margin-left: 50px; color:#ddd; text-shadow:1px 2px 5px #111, 0 0 8px #000, 0 0 10px #000; text-transform:uppercase; line-height: 24px;}

.indicator {margin:5px 0px 0px 30px;width: 12px;height: 12px;
  border-radius: 80%;
}
.l .indicator {
    background-color: #940;
    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
    -webkit-animation: blinkRed 3s infinite;
    -moz-animation: blinkRed 3s infinite;
    -ms-animation: blinkRed 3s infinite;
    -o-animation: blinkRed 3s infinite;
    animation: blinkRed 3s infinite;
}

.m .indicator {
    background-color: #A90;
    box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
    -webkit-animation: blinkYellow 3s infinite;
    -moz-animation: blinkYellow 3s infinite;
    -ms-animation: blinkYellow 3s infinite;
    -o-animation: blinkYellow 3s infinite;
    animation: blinkYellow 3s infinite;
}

.h .indicator {
    background-color: #690;
    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
  
    -webkit-animation: blinkGreen 3s infinite;
  -moz-animation: blinkGreen 3s infinite;
  -ms-animation: blinkGreen 3s infinite;
  -o-animation: blinkGreen 3s infinite;
  animation: blinkGreen 3s infinite;
}


@-webkit-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 1) 0 2px 0;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 1) 0 2px 0;}
    to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0,1) 0 2px 0;}
    to { background-color: #F00; }
}
@-o-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0,1) 0 2px 0;}
    to { background-color: #F00; }
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 1) 0 2px 0;}
    to { background-color: #F00; }
}



@-webkit-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-moz-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-ms-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-o-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}



@-webkit-keyframes blinkGreen {
    from { background-color: #15FF00; }
    50% { background-color: #89ED6D; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #068002 0 -1px 9px, #0DFF00 0 2px 0; }
    to { background-color: #15FF00; }
}
@-moz-keyframes blinkGreen {
    from { background-color: #15FF00; }
    50% { background-color: #89ED6D; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #068002 0 -1px 9px, #0DFF00 0 2px 0; }
    to { background-color: #9F0; }
}
@-ms-keyframes blinkGreen {
    from { background-color: #15FF00; }
    50% { background-color: #89ED6D; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #068002 0 -1px 9px, #0DFF00 0 2px 0; }
    to { background-color: #15FF00; }
}
@-o-keyframes blinkGreen {
    from { background-color: #15FF00; }
    50% { background-color: #89ED6D; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #068002 0 -1px 9px, #0DFF00 0 2px 0; }
    to { background-color: #15FF00; }
}
@keyframes blinkGreen {
    from { background-color: #15FF00; }
    50% { background-color: #89ED6D; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #068002 0 -1px 9px, #0DFF00 0 2px 0; }
    to { background-color: #15FF00; }
}

.paused{
    -webkit-animation-play-state:paused !important;
    -moz-animation-play-state:paused !important;
    -o-animation-play-state:paused !important; 
    animation-play-state:paused !important;
}

.legend {  width: 280px;  margin: 0 auto;}
.legend .indicator{ margin: 5px; float: left}
.legend span {font-size:10px}
.legend > div {float:left}