Код:
<!--HTML--><div class='postcolor'><link href='https://fonts.googleapis.com/css?family=Roboto:400,900,900italic' rel='stylesheet' type='text/css'>
<style>@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
.ponygal {width: 500px;
height: 504px;
border: 1px solid #71682f;
font-size: 10px;
padding: 10px;
position: relative;
font-family: roboto;
overflow:hidden;
font-weight: 900;
background-image:url(http://pattern4site.ru/images/opacity/_thumb/77-fon-dlya-sayta.png);}
.ponygaltopl {width: 115px;
height: 115px;
font-size: 10px;
position: absolute;
top: 5px;
left: 5px;
background-color:transparent;}
.ponygaltopl img{border: 1px solid #71682f;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
background-size:cover;
height:105px;}
.ponygaltopr {width: 315px;
height: 35px;
border: 1px solid #71682f;
position: absolute;
top: 5px;
left: 127px;
font-family: "Jeju Gothic",sans-serif;
font-size: 40px;
line-height: 50%;
padding: 35px;
text-align: right;
padding-top: 45px;
color:#f7ff97;
background:url(http://pattern4site.ru/images/opacity/_thumb/5-fon-dlya-sayta.png);
background-color: #d4cdb8;}
.ponygaltopb {width: 507px;
height: 15px;
border: 1px solid #71682f;
font-size: 10px;
position: absolute;
top: 126px;
left: 5px;
background:url(http://funkyimg.com/i/VYSE.png);
background-color:#d4cdb8;}
.ponytabside {position: absolute;
top: 147px;
left: 5px;
width: 115px;
height: 370px;}
.ponytabsidef {float:left;}
.ponytabsidef label {position: absolute;
top: 0px;
left: 0px;
display: block;
width: 105px;
height: 32px;
color:#71682f;
text-align: right;
font-size: 13px;
padding-right: 10px;
overflow: hidden;
line-height: 100%;
background-color: #d4cdb8;
background:url(http://pattern4site.ru/images/texture/_thumb/55-fon-dlya-sayta.png);
border: 1px solid #71682f;
padding-top: 8px;}
.ponytabsidef [type=radio] { display:none;}
[type=radio]:checked ~ label {z-index: 2;}
[type=radio]:checked ~ label ~ .ponytabox {z-index: 2; left:122px;}
.ponytabox {
position: absolute;
font-family: arial;
font-size: 12px;
text-align: justify;
overflow: auto;
top: 0px;
transition-duration: 0.9s;
left: 515px;
width: 365px;
height: 349px;
color: #71682f;
background:transparent;
border: 1px solid #71682f;
padding: 10px;}
.ponylinkboxr {border-bottom: 5px solid #71682f;
padding: 10px;
width: 328px;
margin-top: 10px;
height: 45px;
position: relative;
font-family: roboto;
font-size: 20px;
line-height: 55%;}
.ponylinkboxr img{border: 1px solid #71682f;
padding: 2px;
position: absolute;
top: 0px;
right: 10px;}
.ponylinkboxl {border-bottom: 5px solid #71682f;
padding: 10px;
width: 328px;
margin-top: 10px;
height: 45px;
position: relative;
font-family: roboto;
font-size: 20px;
line-height: 55%;
text-align:right;}
.ponylinkboxl img{border: 1px solid #71682f;
padding: 2px;
position: absolute;
top: 0px;
left: 10px;}
</style>
<center>
<div class="ponygal">
<div class="ponygaltopl"><img src="http://s6.uploads.ru/1cDHP.jpg"></div>
<div class="ponygaltopr"><font style="font-family:Ambassadore;">Имя персонажа</font><br /><font style="font-size:12px; font-family:roboto; color:#71682f;">сокращения и прозвища</font></div>
<div class="ponygaltopb"></div>
<div class="ponytabside">
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-1" name="ponytabsidef-group-1" checked>
<label for="ponytabsidef-1" style="background-color:#d4cdb8;">общая<BR>информация</label>
<div class="ponytabox">
<table>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<style type="text/css">
#beaux-container { width:320px; padding: 15px; height: 310px; background-image:url(http://imgdepo.com/id/i9071727); margin:auto; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; overflow:hidden;}
.beaux-ship { font-family: Cutive Mono; text-align:right; color:#fff; text-transform:uppercase; font-size:9px; letter-spacing:2px; padding:3px; border-right: 8px solid #fff; line-height:101%; margin-right:20px; margin-top:50px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.beaux-shipcont { width:200px; height:190px; padding:10px; background-color:rgba(255,255,255,0.8); text-align:justify; margin:auto; margin-top:400px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; font-family:calibri; font-size:12px; line-height:100%; color:#191919; overflow:auto; }
#beaux-container:hover .beaux-ship { margin-top:20px; }
#beaux-container:hover .beaux-shipcont { margin-top:25px; }
</style>
<div id="beaux-container">
<div class="beaux-ship">КАПСОМ ЗАНЯТОСТЬ КРАТКО<br>
<i>здесь пишем принадлежность к культу</i></div>
<div class="beaux-shipcont">
<b>дата рождения:</b>
<br><b>профессия:</b>
<br><b>характер метки:</b>
<br><b>тип тотема:</b>
<br><b>семейное положение:</b>
<br><b>жизненные цели:</b>
<br><b>прототип внешности:</b>
</div>
</div>
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-2" name="ponytabsidef-group-1">
<label for="ponytabsidef-2" style="margin-top: 47px; background-color:#d4cdb8;">описание</label>
<div class="ponytabox">
<table>
<tr>
<td>
<b>Параметры</b>: тут текст<br>
<b>Палитра</b>: тут текст<br>
</td>
<td>
<b>Описание тотема</b>: тут текст<br>
<b>Особенности</b>: тут текст<br>
</td>
</tr>
</table>
<table>
<tr>
Краткое описание внешности; особенности, шрамы, телосложение, стиль, привычки, образ жизни. Не акцентируйте свои силы на подробном пересчете родинок, лучшим вариантом будет составление лаконичного и понятного образа.
</tr>
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-3" name="ponytabsidef-group-1">
<label for="ponytabsidef-3" style="margin-top: 94px; background-color:#d4cdb8;">характер</label>
<div class="ponytabox">
<table>
<tr>
<td>
<b>Фобии</b>: тут текст<br>
<b>Отрицательные качества</b>: тут текст<br>
</td>
<td>
<b>Предпочтения</b>: тут текст<br>
<b>Положительные качества</b>: тут текст<br>
</td>
</tr>
</table>
<table>
<tr>
Здесь расширенное описание характера - раскрываем указанные качества, пишем причины страхов. Не углубляйтесь в философию и повторения.
</tr>
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-4" name="ponytabsidef-group-1">
<label for="ponytabsidef-4" style="margin-top: 141px; background-color:#d4cdb8;">навыки</label>
<div class="ponytabox">
<table>
Бытовые и боевые, уровень физического развития, раскрытые и нераскрытые таланты, хобби, обязанности и многое другое.
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-5" name="ponytabsidef-group-1">
<label for="ponytabsidef-5" style="margin-top: 188px; background-color:#d4cdb8;">история</label>
<div class="ponytabox">
<table>
Здесь расширенное описание биографии.
Делим на часть до прибытия в Дискордию
<hr>
....а тут пишем часть после прибытия в Дискордию
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-6" name="ponytabsidef-group-1">
<label for="ponytabsidef-6" style="margin-top: 235px; background-color:#d4cdb8;">отношения</label>
<div class="ponytabox">
<table>
<tr><div class="ponylinkboxr">
Имя персонажа
<font style="font-size:15px;"><br /><i>описание</i></font>
<a href='ссылканапрофиль'><img src="http://placehold.it/50x50"></a>
</div></tr>
<tr><div class="ponylinkboxl">
Имя персонажа
<font style="font-size:15px;"><br /><i>описание</i></font>
<a href='ссылканапрофиль'><img src="http://placehold.it/50x50"></a>
</div></tr>
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-7" name="ponytabsidef-group-1">
<label for="ponytabsidef-7" style="margin-top: 282px; background-color:#d4cdb8;">хронология</label>
<div class="ponytabox">
<table>
<tr><div class="ponylinkboxr">
Заголовок
<font style="font-size:15px;"><br />дата
<br /><i>персонажи</i></font>
<a href='ссылканаэпизод'><img src="http://placehold.it/50x50"></a></div></tr>
<tr><div class="ponylinkboxr">
Заголовок
<font style="font-size:15px;"><br />дата
<br /><i>персонажи</i></font>
<a href='ссылканаэпизод'><img src="http://placehold.it/50x50"></a></div></tr>
</table>
</div>
</div>
<div class="ponytabsidef">
<input type="radio" id="ponytabsidef-8" name="ponytabsidef-group-1">
<label for="ponytabsidef-8" style="margin-top: 329px; background-color:#d4cdb8;">об игроке</label>
<div class="ponytabox">
<table>
<b>Контакты:</b> предпочтительна связь вконтакте
<BR><b>Дополнительные персонажи:</b> ваши дополнительные профили
<BR>
Всякие разные примечания.
</table>
</div>
</div>
</div>
</div>
</center>
</div>