Application

<link href='http://fonts.googleapis.com/css?family=Playfair+Display|Lekton' rel='stylesheet' type='text/css'><style type="text/css">::-webkit-scrollbar { height: 12px; width: 10px; background-color: #fff;}::-webkit-scrollbar-thumb { background: #090C13; }::-webkit-scrollbar-corner { background: #090C13; }::-webkit-scrollbar-track { background: #fff; }#thtabcontainer { width: 500px; padding: 20px; background: #FCFAFF; }.thtabname { width: 200px; height: 250px; background: #090C13; text-align: right; padding: 20px; font-family: playfair display; text-transform: uppercase; color: #FCFAFF; font-size: 28px; line-height: 30px; letter-spacing: 0px; font-style: italic; word-spacing: 3px; }.thtabimage img { width: 260px; height: 250px; }.thtabtopper { width: 450px; height: 16px; margin-top: 10px; line-height: 16px; font-family: lekton; font-size: 8px; opacity: 0.6; filter: alpha(opacity=60); text-transform: uppercase; letter-spacing: 2px; word-spacing: 4px; color: #090C13; border-top: 3px double #090C13; border-bottom: 3px double #090C13; }.tabs { position: relative; height: 460px; width: 450px; clear: both; margin: 25px 0; }.tab { float: left; }.tab label { display: block; background: #090C13; color: #ccc; height: 12px; width: 12px; font: 8px/12px lekton; padding: 10px; -webkit-border-radius: 20px; margin: 10px; position: relative; left: 125px; }.tab [type=radio] { display: none; }[type=radio]:checked ~ label { background: #F2770F; color: #090C13; border-bottom: 0px; z-index: 2; }[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }.thcontent { position: absolute; top: 60px; left: 0; background: #fff; right: 0; bottom: 0; padding: 0px; border: 0px; text-align: justify; }[type=radio]:checked ~ label { background: #F2770F; color: #090C13; border-bottom: 0px; z-index: 2; }[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }.thfirsttab { text-align: center; width: 250px; margin-top: 100px; margin-left: 105px; margin-right: 105px; font-family: times new roman; font-size: 12px; font-style: italic; line-height: 16px; border-bottom: 1px solid #090C13; color: #090C13; padding-bottom: 20px; }.thfirsttabcredit { font-family: lekton; font-size: 8px; text-transform: uppercase; text-align: center; line-height: 9px; padding-top: 20px; letter-spacing: 2px; word-spacing: 4px; color: #606060; }.thapptable { width: 350px; margin-left: 50px; margin-right: 50px; margin-top: 100px; letter-spacing: 1px; word-spacing: 3px; line-height: 18px; }.thapprow { display: block; text-align: center; font-family: lekton; font-size: 8px; height: 16px; line-height: 16px; background: #090C13; color: #F2770F; text-transform: uppercase; }.thapprow:hover { color: #090C13; background: #F2770F; }.thappcol { display: block; text-align: center; font-family: lekton; font-size: 8px; height: 16px; line-height: 16px; color: #090C13; text-transform: uppercase; }.thappcontent { width: 410px; height: 360px; overflow: auto; font-family: times new roman; padding: 20px; font-size: 11px; line-height: 12px; color: #090C13; }.thoocabout { font-family: times new roman; font-size: 11px; line-height: 12px; padding: 5px; }</style><center><div id="thtabcontainer"><div class="thtabtopper">introducing the character</div><table width="460px" cellspacing="5px" cellpadding="0px" style="margin-bottom:-20px;"><tr><td class="thtabname" width="200px" valign="bottom">//FIRST LAST</td><td class="thtabimage" width="260px"><img src="IMAGE GOES HERE 260 X 250"></td></tr></table><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">I</label><div class="thcontent"><div class="thfirsttab">4 A 6 LINES OF LYRICS HERE!!!</div><div class="thfirsttabcredit">EIGENSCHAP - EIGENSCHAP</div></div></div><div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">II</label><div class="thcontent"><table class="thapptable" width="350px" cellspacing="1px" cellpadding="0px"><tr><td class="thapprow" colspan="2">first middle last</td></tr><tr><td width="100px" class="thapprow">NICKNAME</TD><td width="250px" class="thappcol">NICKNAME HERE!!</TD></tr><tr><td width="100px" class="thapprow">BIRTH PLACE</TD><td width="250px" class="thappcol">PLACE OF BIRTH HERE!!</TD></tr><tr><td width="100px" class="thapprow">AGE</TD><td width="250px" class="thappcol">AGE HERE!</TD></tr><tr><td width="100px" class="thapprow">FAMILY</TD><td width="250px" class="thappcol">FAMILY HERE!!</TD></tr><tr><td width="100px" class="thapprow">LOVE</TD><td width="250px" class="thappcol">LOVE HERE!!</TD></tr><tr><td colspan="2" class="thappcol" style="color: #FCFAFF;" bgcolor="MAFFIA: #752F2F COPS: #1C5675 CITIZENS: #000000">MAFFIA/COPS/CITIZENS</td></tr></table></div></div><div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3">III</label><div class="thcontent"><div class="thappcontent">
[center][size=18][font=Courier New]PERSONALITY[/font][/size][/center]
schrijf hier iets over je personage zijn persoonlijkheid.

[center][size=18][font=Courier New]HISTORY[/font][/size][/center]
Schrijf hier iets over de geschiedenis van je personage!

</div></div></div><div class="tab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4">IV</label><div class="thcontent"><table class="thapptable" width="350px" cellspacing="1px" cellpadding="0px"><tr><td colspan="2" class="thapprow">YOUR NAME!!!!!!</td></tr><tr><td class="thappcol" width="175px">CONTACT!!!!!</td><td class="thappcol" width="175px">FACE CLAIM!!!!!</TD></tr><tr><td class="thoocabout" colspan="2"></td></tr></table></div></div></div></div><div style="font-size: 7px; text-transform: uppercase; font-family: georgia; letter-spacing: 1px; word-spacing: 3px;"><a href="http://shine.b1.jcink.com/index.php?showtopic=3546">THEONS</a> @ SHINE</div>
</center>