Square (20x20)	Round (20x20)	Large (48x48)

<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:20px; padding-left:20px;}

.burglar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/burglar-sq.png) no-repeat; height:20px; padding-left:26px; }
.captain {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/captain-sq.png) no-repeat; height:20px; padding-left:26px; }
.champion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/champion-sq.png) no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/guardian-sq.png) no-repeat; height:20px; padding-left:26px; }
.hunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hunter-sq.png) no-repeat; height:20px; padding-left:26px; }
.loremaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lore-master-sq.png) no-repeat; height:20px; padding-left:26px; }
.minstrel {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minstrel-sq.png) no-repeat; height:20px; padding-left:26px; }
.runekeeper {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rune-keeper-sq.png) no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/warden-sq.png) no-repeat; height:20px; padding-left:26px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td class="burglar">Burglar</td><td class="check">
</td></tr><tr><td class="captain">Captain</td><td class="check">
</td></tr><tr><td class="champion">Champion</td><td class="check">
</td></tr><tr><td class="guardian">Guardian</td><td class="check">
</td></tr><tr><td class="hunter">Hunter</td><td class="check">
</td></tr><tr><td class="loremaster">Lore-master</td><td class="check">
</td></tr><tr><td class="minstrel">Minstrel</td><td class="check">
</td></tr><tr><td class="runekeeper">Rune-keeper</td><td class="check">
</td></tr><tr><td class="warden">Warden</td><td class="check">
</td></tr>
</tbody></table>
</center>

<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:20px; padding-left:20px;}
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up-round.png) center center no-repeat; height:20px; padding-left:20px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down-round.png) center center no-repeat; height:20px; padding-left:20px;}

.burglar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/burglar-round.png) no-repeat; height:20px; padding-left:26px; }
.captain {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/captain-round.png) no-repeat; height:20px; padding-left:26px; }
.champion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/champion-round.png) no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/guardian-round.png) no-repeat; height:20px; padding-left:26px; }
.hunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hunter-round.png) no-repeat; height:20px; padding-left:26px; }
.loremaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lore-master-round.png) no-repeat; height:20px; padding-left:26px; }
.minstrel {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minstrel-round.png) no-repeat; height:20px; padding-left:26px; }
.runekeeper {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rune-keeper-round.png) no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/warden-round.png) no-repeat; height:20px; padding-left:26px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td class="burglar">Burglar</td><td class="up">
</td></tr><tr><td class="captain">Captain</td><td class="up">
</td></tr><tr><td class="champion">Champion</td><td class="up">
</td></tr><tr><td class="guardian">Guardian</td><td class="up">
</td></tr><tr><td class="hunter">Hunter</td><td class="up">
</td></tr><tr><td class="loremaster">Lore-master</td><td class="up">
</td></tr><tr><td class="minstrel">Minstrel</td><td class="up">
</td></tr><tr><td class="runekeeper">Rune-keeper</td><td class="up">
</td></tr><tr><td class="warden">Warden</td><td class="down">
</td></tr>
</tbody></table>
</center>

<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:18px;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:20px; padding-left:20px;}
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up-big.png) center center no-repeat; height:48px; padding-left:50px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down-big.png) center center no-repeat; height:48px; padding-left:50px;}

.burglar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/burglar_icon64.png) no-repeat; height:48px; padding-left:50px; }
.captain {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/captain_icon64.png) no-repeat; height:48px; padding-left:50px; }
.champion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/champion_icon64.png) no-repeat; height:48px; padding-left:50px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/guardian_icon64.png) no-repeat; height:48px; padding-left:50px; }
.hunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hunter_icon64.png) no-repeat; height:48px; padding-left:50px; }
.loremaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lore_master_icon64.png) no-repeat; height:48px; padding-left:50px; }
.minstrel {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minstrel_icon64.png) no-repeat; height:48px; padding-left:50px; }
.runekeeper {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/runekeeper_icon64.png) no-repeat; height:48px; padding-left:50px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/warden_icon64.png) no-repeat; height:48px; padding-left:50px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td class="burglar">Burglar</td><td class="up">
</td></tr><tr><td class="captain">Captain</td><td class="up">
</td></tr><tr><td class="champion">Champion</td><td class="up">
</td></tr><tr><td class="guardian">Guardian</td><td class="up">
</td></tr><tr><td class="hunter">Hunter</td><td class="up">
</td></tr><tr><td class="loremaster">Lore-master</td><td class="up">
</td></tr><tr><td class="minstrel">Minstrel</td><td class="up">
</td></tr><tr><td class="runekeeper">Rune-keeper</td><td class="up">
</td></tr><tr><td class="warden">Warden</td><td class="down">
</td></tr>
</tbody></table>
</center>

• To change the style of the box (background or border), edit the CSS that is in red.
• To change the color of the class name in the table, edit the CSS and change the color from #ffffff for that class to your desired color (in orange).
• To change the class availability from open to closed or up to down, just edit the content box text that is blue.