
<div id="details_gender" style="float: left; margin: 15px;">
    <input type="text" class="form-control input-lg" id="charname" placeholder="${character_name}">
    <br>
    <a href="#" id="random"><img src="${PICPATH}button_random.png" width="220px"/></a>
    <br>
    <br>
    <br>
    <a class="male fadein" href="#"><img src="${WOWICONS}male.png" width="110px"/></a>
    <a class="female fadein" href="#"><img src="${WOWICONS}female.png" width="110px"/></a>
</div>
<div id="details_race" style="float: left; margin: 15px;">
    <a class="male human fadein" href="#"><img src="${WOWICONS}human_male.png"/></a>
    <a class="female human fadein" href="#"><img src="${WOWICONS}human_female.png" /></a>
    <a class="male ork fadein" href="#"><img src="${WOWICONS}ork_male.png" /></a>
    <a class="female ork fadein" href="#"><img src="${WOWICONS}ork_female.png" /></a>
    <br>
    <a class="male dwarf fadein" href="#"><img src="${WOWICONS}dwarf_male.png" /></a>
    <a class="female dwarf fadein" href="#"><img src="${WOWICONS}dwarf_female.png" /></a>
    <a class="male undead fadein" href="#"><img src="${WOWICONS}undead_male.png" /></a>
    <a class="female undead fadein" href="#"><img class="select" src="${WOWICONS}undead_female.png" /></a>
    <br>
    <a class="male nightelf fadein" href="#"><img src="${WOWICONS}nightelf_male.png" /></a>
    <a class="female nightelf fadein" href="#"><img src="${WOWICONS}nightelf_female.png" /></a>
    <a class="male tauren fadein" href="#"><img src="${WOWICONS}tauren_male.png" /></a>
    <a class="female tauren fadein" href="#"><img src="${WOWICONS}tauren_female.png" /></a>
    <br>
    <a class="male gnome fadein" href="#"><img src="${WOWICONS}gnome_male.png" /></a>
    <a class="female gnome fadein" href="#"><img src="${WOWICONS}gnome_female.png" /></a>
    <a class="male troll fadein" href="#"><img src="${WOWICONS}troll_male.png" /></a>
    <a class="female troll fadein" href="#"><img src="${WOWICONS}troll_female.png" /></a>
</div>
<div id="details_class" style="float: left; margin: 15px;">
    <a class="human dwarf nightelf gnome ork undead tauren troll fadein" href="#"><img src="${WOWICONS}warrior.png" /></a>
    <a class="dwarf nightelf ork tauren troll fadein" href="#"><img src="${WOWICONS}hunter.png" /></a>
    <br>
    <a class="dwarf human fadein" href="#"><img src="${WOWICONS}paladin.png" /></a>
    <a class="dwarf human nightelf gnome ork undead troll fadein" href="#"><img src="${WOWICONS}rogue.png" /></a>
    <br>
    <a class="dwarf human nightelf undead troll fadein" href="#"><img src="${WOWICONS}priest.png" /></a>
    <a class="human gnome undead troll fadein" href="#"><img src="${WOWICONS}mage.png" /></a>
    <br> 
    <a class="human gnome ork undead fadein" href="#"><img src="${WOWICONS}warlock.png" /></a>
    <a class="fadein nightelf tauren" href="#"><img src="${WOWICONS}druid.png" /></a>
</div>

<div class="lifecraft link-color" id="details_info" style="float: left; margin-top: 15px; width: 190px; padding: 8px; padding-bottom: 110px; font-size: 14px; background: url(${PICPATH}infotext_background.png) no-repeat;">
    <h3 style="padding-left: 20px;"><img src="${WOWICONS}help_questionmark.png" width="25px"/>&nbsp;&nbsp;Info</h3>
    ${infotext_human}
</div>
