<style type="text/css">
 .recruitbx { background: url() center center no-repeat; border: 0px; color: #ddd; font-size: 14px; }
 .recruitbx td { vertical-align: middle; text-align: center; }
 .recruitbx td a { font-weight: bold; }

 .teraclass, .open, .closed, .green, .red {
  background: url(http://www.axiomfiles.com/Files/278466/icons-tera-classes.png) no-repeat;
  height: 25px;
  padding-left: 30px;
 }

 td.archer { background-position: center top; }
 td.beserker { background-position: center -50px; }
 td.lancer { background-position: center -100px; }
 td.mystic { background-position: center -150px; }
 td.priest { background-position: center -200px; }
 td.slayer { background-position: center -250px; }
 td.sorcerer { background-position: center -300px; }
 td.warrior { background-position: center -350px; }

 td.open { background-position: center -400px; }
 td.closed { background-position: center -450px; }
 td.green { background-position: center -500px; }
 td.red { background-position: center -550px; }
</style>
<center><table class="recruitbx">

 <tbody><tr><td class="teraclass archer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Archer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass beserker"></td><td>
 <a class="tooltip" title="10/10 Spots open">Beserker
 </a></td><td class="open">
 
 </td></tr><tr><td class="teraclass lancer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Lancer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass mystic"></td><td>
 <a class="tooltip" title="10/10 Spots open">Mystic
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass priest"></td><td>
 <a class="tooltip" title="10/10 Spots open">Priest
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass slayer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Slayer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass sorcerer"></td><td>
 <a class="tooltip" title="No spots open">Sorcerer
 </a></td><td class="closed">

 </td></tr><tr><td class="teraclass warrior"></td><td>
 <a class="tooltip" title="No spots open">Warrior
 </a></td><td class="closed">

 </td></tr></tbody></table>

Hover Class names<br/>for more information
</center>

• All of the class images and status icons were combined into one image (image sprite method). The images are then targeted using the background-position setting. If you want to add your own status image, then you'll have to add a background-image: url(...) to add it. See the other recruitment status posts for examples.
• Modify the overall text color by changing the CSS in blue.
• Change your recruitment status tooltip (popup) by modifying the title element in orange.
• Change your recruitment status image by changing the class in green next to the matching class. I didn't include an example of the "green" or "red" status icons, but you can mess around with it and pick the one you like best, or add your own.