yooo

[dohtml]
<style>
.dark { background-color: #000; width: 500px; color: #fff; font-family: homenaje; text-transform: uppercase; text-align: right; line-height: 120%; font-size: 16px; letter-spacing: 2px; }
.trest::-webkit-scrollbar { width: 2px; }
.trest::-webkit-scrollbar-thumb { background-color: #000; }
.trest::-webkit-scrollbar-track { background-color: #fff; }
.trest { overflow: auto; height: 270px; padding-right: 5px; }
.apptab { float: left; }
.apptabs {position: relative; height: 50px; width: 120px;}
.apptab label {display: block; width: 120px; height: 50px; padding: 30px; font-family: homenaje; font-size: 11px; text-align: center; text-transform: lowercase; position: absolute; top: 0px; left: -190px;color: #fff; z-index: 8; letter-spacing: 1px;}
.apptab [type=radio] { display: none; }
.appcontent {position: absolute; top: 0px; bottom: 0px; left: -10px; right: 0px; background-color: #fff; width: 260px; height: 270px; padding: 30px; line-height: 110%; font-family: arial; font-size: 9px; color: #000; margin-right: 0px; text-align: justify; text-transform: none; }
[type=radio]:checked ~ label { font-style: italic; z-index: 8; text-transform: uppercase; font-size: 13px; color: #fff;}
[type=radio]:checked ~ label ~ .appcontent {z-index: 9;}

</style>

<center>
<div class="dark"><div style="padding: 120px 20px 40px 300px;">LAST, FIRST</div></div>
<div class="apptabs">
<div class="apptab">
<input type="radio" id="apptab-1" name="apptab-group-1" checked>
<label for="apptab-1" style="background-color: #a1dbb2;"><br>general</label>
<div class="appcontent"><div class="trest">
<b>FULL NAME:</b>
[LIST]name as registered[/LIST]<br>
<b>DATE OF BIRTH:</b>
[LIST]mm/dd/yyyy[/LIST]<br>
<b>OCCUPATION:</b>
[LIST]---[/LIST]<br>
<b>YEAR/MAJOR:</b>
[LIST]if applicable[/LIST]<br>
<b>MEMBER GROUP:</b>
[LIST]---[/LIST]<br>
<b>ABILITY:</b>
[LIST]something or n/a[/LIST]<br>
<b>PLAY-BY:</b>
[LIST]---[/LIST]<br><br>

<b>ALIAS:</b>
[LIST]---[/LIST]<br>
<b>TIMEZONE:</b>
[LIST]---[/LIST]<br>
<b>CONTACT INFO:</b>
[LIST]---[/LIST]<br>

</div></div></div>

<div class="apptab">
<input type="radio" id="apptab-2" name="apptab-group-1">
<label for="apptab-2" style="background-color: #faca66; margin-top: 110px;"><br>abilities</label>
<div class="appcontent"><div class="trest">
two or more paragraphs describing your character's ability should go here. this should include any strengths and weaknesses, as well as how extensive their knowledge of the ability they possess is (e.g. did they just discover it? have they known for a while? how well can they control/employ it?). also, where do you think your character will reach in the future concerning their particular ability?<p>
disregard this section completely should your character not be gifted.</div></div></div>

<div class="apptab">
<input type="radio" id="apptab-3" name="apptab-group-1">
<label for="apptab-3" style="background-color: #f45d4c; margin-top: 220px;"><br>biography</label>
<div class="appcontent"><div class="trest">
freestyle here, make sure that it's an accurate representation of your character! or you can do the more traditional approach too (eg. personality & history)!</div></div></div>

</div>
<div style="background-image:url(http://placehold.it/500x120); width: 500px; height: 120px; margin-top: 270px;"></div>
</center>
[/dohtml]