<link href="http://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet" type="text/css">
<style type="text/css">
#tabbcontent { width: 450px; padding: 20px; background: #fdf6d9; border-right: 40px solid #fdf6d9; }
.framedimage img { margin-right:-60px; width: 400px; height: 250px; border-right: dashed 1px #9a2881; }
.tabs { position: relative; height: 550px; width: 450px; clear: both; margin: 5px 40px; }
.tab { float: left; }
.tab label { display: block; background: #9a2881; color: #ffffff; height: 8px; width: 50px; font: 10px  calibri; padding: 10px; margin: 5px; position: relative; left: 85px; }
.tab [type=radio] { display: none; }
[type=radio]:checked ~ label { background: #c057a8; color: #ffffff; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .ccontent { z-index: 1; }
.ccontent { position: absolute; top: 60px; left: 0; background: #fdf6d9; right: 0; bottom: 0; padding: 0px; border: 0px; text-align: justify; }
[type=radio]:checked ~ label { background: #c057a8; color: #ffffff; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .ccontent { z-index: 1; }
.tabone { align: center; width: 250px; margin-left: 105px; margin-right: 95px; font-family: times; font-size: 12px; font-style: italic; line-height: 16px;  padding-bottom: 20px; }
.tabonebottom { margin-left: 95px; margin-right: 105px; width: 250px; font-family: arial; font-size: 16px; text-transform: uppercase; text-align: center; line-height: 9px; padding-top: 20px; letter-spacing: 2px; word-spacing: 4px; color: #606060; border-bottom: 1px solid #090C13; color: #9a2881; }
.appcontent { width: 350px; height: 400px; overflow: auto; font-family: arial; letter-spacing:3px; padding: 20px; font-size: 9px; line-height: 10px; color: #000000; border-left: 10px #c057a8 solid;  }
.appbawls {margin-left: 10px; margin-right: 105px; width: 400px; font-family: arial; font-size: 13px; line-height: 100%; letter-spacing: 0px; color: #fff; text-shadow: 1px 1px 0px #222; text-align: center; background-color: #9a2881; border-left: 10px solid #c057a8; padding: 2px; border-right: 0px solid #c057a8; transition-duration: 0.3s;  -moz-transition-duration: 0.3s;  -webkit-transition-duration: 0.3s;  -o-transition-duration: 0.3s; height: 20px}
.appbawls:hover { border-right: 10px solid #c057a8; border-left: 0px solid #c057a8; }
.cazzette { width: 70px; height: 20px; line-height: 20px; text-align: center; font-size: 8px; background-color: #9a2881; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; color: #fff; font-family: calibri; letter-spacing: 2px; }
.cazzette:hover { width: 70px; height: 20px; line-height: 20px; text-align: center; font-size: 8px;background-color: #c057a8; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; color: #ffffff; font-family: calibri; font-style: italic; letter-spacing: 2px; }   
.beam { width: 70px; height: 20px; line-height: 20px; text-align: center; font-size: 8px; background-color: #c057a8; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; color: #ffffff; font-family: calibri; letter-spacing: 2px; }
.beam:hover { width: 70px; height: 20px; line-height: 20px; text-align: center; font-size: 8px; background-color: #9a2881; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; color: #fff; font-family: calibri; font-style: italic; letter-spacing: 2px; }   
</style>
<center>
<div id="tabbcontent">
<center><table>
<tbody><tr><td><div class="cazzette"><a href="ccылка"><span style="color: #ffffff;">гостевая</span></a></div></td>
<td><div class="beam"><a href="ссылка"><span style="color: #ffffff;">вакансии</span></a></div></td>
<td><div class="cazzette"><a href="ссылка"><span style="color: #ffffff;">классы</span></a></div></td>
<td><div class="beam"><a href="ссылка"><span style="color: #ffffff;">правила</span></a></div></td>
<td><div class="cazzette"><a href="ссылка"><span style="color: #ffffff;">нужные, м</span></a></div></td>
<td><div class="beam"><center><a href="ссылка"><span style="color: #ffffff;">нужные, ж</span></a></center></div></td></tr></tbody></table>


<div style="width: 321px; font-family: 'euphoria script'; font-size: 60px; text-align: center; line-height: 40%; text-transform: lowercase; letter-spacing: -2px; color: #9c3284; text-shadow: 1px 1px 0px #000">who is who<img src="http://fc07.deviantart.net/fs71/f/2010/115/c/e/ce19ddabd580b83999098ab44de207b0.gif" /></div>
 <br><br>
<div class="framedimage" width="400px"><br>
<img src="http://i.imgur.com/F8FTlwM.gif">
</div>

<div class="tabs">
<div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">женские</label>
    
    <div class="ccontent">
     <div class="appbawls">
<b>a - b - c</b>
</div>
<div class="tabone">
amber heard » <a href="ccылка на профиль">имя персонажа</a><br>
</div>

   <div class="appbawls">
<b>d - e - f</b>
</div>
<div class="tabone">
answer will go here.
</div>

    <div class="appbawls">
<b>g - h - i</b>
</div>
<div class="tabone">
текст
</div>

     <div class="appbawls">
<b>j - k - l</b>
</div>
<div class="tabone">
текст
</div>

     <div class="appbawls">
<b>m - n - o - p</b>
</div>
<div class="tabone">
текст
</div>

     <div class="appbawls">
<b>q - r - s - t</b>
</div>
<div class="tabone">
текст
</div>

   <div class="appbawls">
<b>u - v - w</b>
</div>
<div class="tabone">
answer will go here.
</div>


   <div class="appbawls">
<b>x - y - z </b>
</div>
<div class="tabone">
answer will go here.
</div>

    </div> 
</div>
  
<div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">мужские</label>
    
    <div class="ccontent">
     <div class="appbawls">
<b>a - b - c</b>
</div>
<div class="tabone">
adam lambert » <a href="ccылка на профиль">имя персонажа</a><br>
</div>

   <div class="appbawls">
<b>d - e - f</b>
</div>
<div class="tabone">
answer will go here.
</div>

    <div class="appbawls">
<b>g - h - i</b>
</div>
<div class="tabone">
текст
</div>

     <div class="appbawls">
<b>j - k - l</b>
</div>
<div class="tabone">
текст
</div>

     <div class="appbawls">
<b>m - n - o - p</b>
</div>
<div class="tabone">
текст
</div>

     <div class="appbawls">
<b>q - r - s - t</b>
</div>
<div class="tabone">
текст
</div>

   <div class="appbawls">
<b>u - v - w</b>
</div>
<div class="tabone">
answer will go here.
</div>


   <div class="appbawls">
<b>x - y - z </b>
</div>
<div class="tabone">
answer will go here.
</div>

    </div> 
</div>

<div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3">в акциях</label>
    
  <div class="ccontent">
<div class="appcontent">
<center><b>Акции:</b></center>
</div>
    </div> 
</div>

     </tr>
</table>
    </div> 
</div>
 
</div>
</div>
</center>