Everquest (EQ)

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

.berserker { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqberserker.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.monk { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqmonk.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.rogue { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqrogue.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.warrior { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqwarrior.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.cleric { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqcleric.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.druid { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqdruid.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.shaman { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqshaman.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.enchanter { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqenchanter.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.magician { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqmagician.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.necromancer { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqnecromancer.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.wizard { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqwizard.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.bard { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqbard.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.beastlord { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqbeastlord.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.paladin { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqpaladin.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.ranger { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqranger.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.shadowknight { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqshadowknight.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Fighter
</td></tr><tr><td class="berserker">Berserker</td><td class="closed">
</td></tr><tr><td class="monk">Monk</td><td class="check">
</td></tr><tr><td class="rogue">Rogue</td><td class="check">
</td></tr><tr><td class="warrior">Warrior</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Priest
</td></tr><tr><td class="cleric">Cleric</td><td class="check">
</td></tr><tr><td class="druid">Druid</td><td class="check">
</td></tr><tr><td class="shaman">Shaman</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Mage
</td></tr><tr><td class="enchanter">Enchanter</td><td class="check">
</td></tr><tr><td class="magician">Magician</td><td class="check">
</td></tr><tr><td class="necromancer">Necromancer</td><td class="check">
</td></tr><tr><td class="wizard">Wizard</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Hybrid
</td></tr><tr><td class="bard">Bard</td><td class="check">
</td></tr><tr><td class="beastlord">Beast Lord</td><td class="check">
</td></tr><tr><td class="paladin">Paladin</td><td class="check">
</td></tr><tr><td class="ranger">Ranger</td><td class="check">
</td></tr><tr><td class="shadowknight">Shadow Knight</td><td class="check">
</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 archetype (Class header), edit the CSS in green.
• 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, just edit the content box text that is blue.