<!--HTML-->
<center><link href='https://fonts.googleapis.com/css?family=Yantramanav' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
<link href="http://allfont.ru/allfont.css?fonts=carolina" rel="stylesheet" type="text/css" />
<link href="http://allfont.ru/allfont.css?fonts=annabelle" rel="stylesheet" type="text/css" />
<link href="http://allfont.ru/allfont.css?fonts=bebas-neue" rel="stylesheet" type="text/css" />

<style>
@import "http://webfonts.ru/import/kobzarks.css";

.tabsa {
  position: relative;
  width: 550px;
  height: 520px;
  background: #957955;
}

.taba {
  float: left;
}

.taba label {
  display: block;
  width: 10px;
  padding: 5px;
  background-image: url(http://funkyimg.com/i/2o1t4.png);  
  margin-top: 0px;
  left: 225px;
}

.taba [type=radio] {
  display: none;
}

.contenta {
  position: absolute;
  top: 50px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 0px;
  opacity: 0; 
 -webkit-transform: scale(0); 
-o-transform: scale(0); 
-moz-transform: scale(0);
 -webkit-transition-duration: .8s; 
-moz-transition-duration: .8s; 
-o-transition-duration: .8s;
}

[type=radio]:checked ~ label {
  background: #69582d;
  border-bottom: 0px solid white;
  color: #fff;
  z-index: 2;
}

[type=radio]:checked ~ label ~ .contenta {
  z-index: 1;
opacity: 1; 
 -webkit-transform: scale(1); 
-o-transform: scale(1); 
-moz-transform: scale(1);
}

.rcfrhv {
  position: relative;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  transition-: 0.6s all ease-in-out;
  -webkit-transition: 0.6s all ease-in-out;
  -moz-transition: 0.6s all ease-in-out;
  -o-transition: 0.6s all ease-in-out;
  -ms-transition: 0.6s all ease-in-out;
  opacity: 0.0;
}

.rc-ov {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.rchv {
  position: relative;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  transition-: 0.6s all ease-in-out;
  -webkit-transition: 0.6s all ease-in-out;
  -moz-transition: 0.6s all ease-in-out;
  -o-transition: 0.6s all ease-in-out;
  -ms-transition: 0.6s all ease-in-out;
  opacity: 0.0;
}

.rc-ov:hover .rchv {
  margin-top: -350px;
  opacity: 1.0;
}

.rc-tx-ov2 ::-webkit-scrollbar {
  width: 5px;
  background: #4b4b4b;
}

.rc-tx-ov2  ::-webkit-scrollbar-thumb {
  background: #4b4b4b;
}

.rc-tx-ov2 ::-webkit-scrollbar-corner {
  background: #4b4b4b;
}

.soultitle { width: 550px; height: 40px; background-image: url(http://funkyimg.com/i/2o1To.png);  margin-top: -25px; }
.soultitletxt { font-family: bebas neue; font-size: 35px; color: #493c1c;  text-shadow: #af997b 1px 1px; }
.soulcontainerimg { margin-right: 30px; }
.soulquote { width: 520px; font-family: annabelle; font-size: 21px; margin-left: -270px; color: #493c1c; } 
.soulquote1 { width: 505px; height: 3px; background-color: #69582d;  margin-left: 3px; margin-bottom: 10px; } 
.soulblock { width: 210px; height: 170px; background-color: #af997b; margin-left: 17px; overflow: auto; }
.soulblock2 { width: 290px; height: 170px; background-color: #af997b; overflow: auto; }
.soulinfo { color: #493c1c; font-family: Bad Scrip; font-size: 12px; }
.soulinfo2 { color: #493c1c; font-family: Bad Scrip; font-size: 12px; text-align: left; margin-left: 4px; padding: 4px; }
.soulinfo3 { color: #493c1c; font-family: Bad Scrip; font-size: 12px; text-align: left; margin-left: 4px; padding: 4px; }
.letter { margin-left: 200px; float: left; font-family: carolina; text-transform: uppercase; font-size: 70px; color: #584924;  line-height: 0%; margin-top: 10px; }

.soulblock::-webkit-scrollbar-thumb {background-color: #af997b; height: auto; border: 1px solid #af997b; }
.soulblock::-webkit-scrollbar-track { background-color: #af997b; height:10px; width:1px; border: 2px solid #af997b;}
.soulblock::-webkit-scrollbar { background-color: #af997b; height: 0px; width:4px; border: 2px solid #af997b;}
.soulblock2:-webkit-scrollbar-thumb {background-color: #af997b; height: auto; border: 1px solid #af997b; }
.soulblock2::-webkit-scrollbar-track { background-color: #af997b; height:10px; width:1px; border: 2px solid #af997b; }
.soulblock2::-webkit-scrollbar { background-color: #af997b; height: 0px; width:4px; border: 2px solid #af997b; }
</style>


<style type="text/css">.rc-frtx-br a { color: #fff; }
.rc-tx-ov2 b { font-family:Arial; font-size: 11px;  color: #000; font-weight: 800; font-style: italic; line-height: 120%; }
.rc-tx-ov2 ha { font-family:Arial; font-size: 15px;  color: #000; font-weight: 800; font-style: italic; line-height: 120%; }
.rc-tx-ov2 ::-webkit-scrollbar {   width: 3px;  background-color: #eaeaea; }
.rc-tx-ov2  ::-webkit-scrollbar-thumb {  width: 3px; background-color: #000; border: 1px solid #000; }
.rc-tx-ov2 ::-webkit-scrollbar-track {  background-color: #777;  border: 0px solid #fff; }
</style>

<div class="tabsa"><div class="taba"><input type="radio" id="taba-1" name="taba-group-1" checked><label for="taba-1"></label><div class="contenta"><div class="rc-frincont"><div class="rc-frov">

<div class="soultitle"><div class="soultitletxt" style="margin-left: -320px;">
NAME SURNAME
</div></div>
<div class="soulcontainerimg" style="margin-top: 15px;"> 
<table>
<tr align="right">
<td><img src="http://funkyimg.com/i/2nYvE.png">
<img src="http://funkyimg.com/i/2nYvE.png">
<img src="http://funkyimg.com/i/2nYvE.png"></td>
</tr>
</table>
</div>
<div class="soulquote"><div class="letter">в</div>аша очень красивая цитата
</div>
<div class="soulquote1" style="margin-top: 15px;">
</div>
<table>
<tr align="auto">
<td width="210">
<div class="soulblock"><div class="soulinfo2" style="margin-top: 0px;">
<b>Имя:</b> 
<br><b>Дата рождения:</b> 
<br><b>Возраст:</b> 
<br><b>Ориентация:</b> 
<br><b>Профессия:</b> 
<br><b>Каста:</b> 
<br><b>Лояльность:</b> 
</div></div></td>
<td width="290">
<div class="soulblock2"><div class="soulinfo3" style="margin-top: 0px;">
кратко о персонаже: 
<br>
</div></td></div></tr></table>
<div class="soulinfo">
комфортный размер поста: ок // вмешательство гм: (не) согласен // связь: аська/вк/скайп
</div>

<div class="rcfrhv"><div class="rc-frhvcont"><div class="rc-frtx-nm"><div class="rc-frtx-br"><a href="http://cttw.jcink.net/index.php?showuser=831">



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

<div class="taba"><input type="radio" id="taba-2" name="taba-group-1"><label for="taba-2"></label> <div class="contenta"> <table cellpadding="0" cellspacing="0"><tr><td><div class="rc-incont "><div class="rc-ov">

<div style="font-size: 13px; text-align: justify; padding: 7px 7px 7px 7px;">
<br><b>Описание персонажа</b>
<br>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

</div></div>


</div></center>