Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

[html]
<style>#grisha-alina {
    width: 580px;
    height: 600px;
    margin: 0 -15px 0 0;
    overflow: hidden;
    position: relative;
    background: url(https://forumstatic.ru/files/0014/4e/8d/17692.jpg) repeat;
    border: 6px double rgb(162, 133, 84);
}
.grisha-mal {
    width: 330px;
    padding: 10px;
    height: 580px;
    float:left;
    background: #57240e url(https://forumstatic.ru/files/0014/4e/8d/17692.jpg);
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
}
.grisha-darkling {
    width: 209px;
    margin-top: 1px;
    padding: 10px;
    height: 578px;
background-color:#6d7947;
float:left;
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
}
.grisha-zoya {
    width: 300px;
    margin: auto;
    height: 550px;
    background-image: url(http://placehold.it/300x550);
    margin-top: 13px;
}
.grisha-info {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0px;
    color: #d9c7a1;
    text-align: center;
    border-bottom: 3px double #d9c7a1;
    margin-top: 210px;
}
.grisha-infon {
    font-family: GoodVibesPro;
    font-size: 4em;
    margin-bottom: -10px;
    text-transform: none;
    line-height: 85%;
}
#grisha-alina:hover .grisha-darkling {
margin-left:-300px;
}
#grisha-alina:hover .grisha-kuya {
margin-top:0px;
  margin-left:0px;
}
.grisha-kuya {
width:573px;
height:600px;
background: #3b1d01 url(https://forumstatic.ru/files/0014/4e/8d/17692.jpg);
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
position:absolute;
margin-top:-600px;
  z-index:3;
}
.grisha-title {
font-family:GoodVibesPro;
color:#6d7947;
text-shadow: -1px -1px 0 #d9c5a0, 1px -1px 0 #d9c5a0, -1px 1px 0 #d9c5a0, 1px 1px 0 #d9c5a0;
text-transform:none;
font-size:5em;
line-height:55%;
text-align:center;
padding-top:30px;
}
.grisha-subtitle {
font-size:9px;
text-transform:uppercase;
letter-spacing:3px;
text-align:center;
background-color:#6d7947;
color:#d9c5a0;
padding-top:3px;
padding-bottom:3px;
display:block;
margin-bottom: 7px;
}
.grisha-text {
    background-color: #8a9761;
    height: 280px;
    padding-top: 4px;
    margin: 7px 20px 0 20px;
}

/*стиль внутренностей*/
span.credit { font: 8pt courier new; text-transform: uppercase; display: block; text-align: center; }
span.credit a { font: 8pt courier new; }
.plotbg { width: 95%; padding: 10px; margin: 0 auto; border: double #dddddd; background: #4D5645; }
.plotbg td { vertical-align: top }
.plotheader { position: relative; width: 100%; height: 60px; }
.plotbg .k1 { margin: 0; padding: 0; font: 7.5pt courier new; text-transform: uppercase; text-align: justify; color: #f9f9f9; width: 356px; }
.plotbg .k2 { margin: 0; padding: 0; font: lighter 58px yanone kaffeesatz; text-transform: uppercase; color: #6d7947; position: absolute; top: -15px; right:0px; text-shadow: 1px 1px #d9c5a0, 2px 2px #505050; }
.plotbg .k3 { margin: 0; padding: 0; margin-bottom: 5px; font: lighter 28px yanone kaffeesatz; text-transform: uppercase; border-bottom: 1px solid #dddddd; color: #6d7947; width: 540px; }
.avbox { position: relative; overflow: hidden; width: 200px; height: 300px; border: 3px solid #dddddd; }
.avcontent { width: inherit; height: inherit; overflow: hidden; position: absolute; top: -300px; background-color: rgba(249, 249, 249, 0.8);  transition: all 0.5s ease-in-out 0.2s; -webkit-transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.5s ease-in-out 0.2s; -o-transition: all 0.5s ease-in-out 0.2s; -ms-transition: all 0.5s ease-in-out 0.2s; }
.avcontent > span { background: #cccccc; padding: 2px 4px; text-align: center; font: 9px verdana; text-transform: uppercase; color: #505050; display: block; margin: 10px 10px 1px 10px; }
.avcontent > p { font: 9px verdana; text-align: justify; line-height: 9px; margin: 10px; color: #505050 }

.roro1 { position: relative;  top: 50px; left: -155px; background-color: rgb(255, 255, 255); width: 80%; opacity: 0.9; font-family: oswald; color: #464646; text-align: center; padding: 5px; font-size: 17px; -webkit-transition: all 3.5s ease; -moz-transition: all 3.5s ease; -o-transition: all 3.5s ease; }
.roro2 { position: relative; top: 50px; left: -155px; background-color: rgb(255, 255, 255); width: 80%; opacity: 0.9; font-family: oswald; color: #464646; text-align: center; padding: 5px; font-size: 17px; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease }
.roro3 { position: relative; top: 50px; left: -155px; background-color: rgb(255, 255, 255); width: 80%; opacity: 0.9; font-family: oswald; color: #464646; text-align: center; padding: 5px; font-size: 17px;  -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
.roro4 { position: relative; top:50px; left: -155px; background-color: rgb(255, 255, 255); width: 80%; opacity: 0.9; font-family: oswald; color: #464646; text-align: center; padding: 5px; font-size: 17px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease;  }
.roro5 { position: relative; top:50px; left: -155px; background-color: rgb(255, 255, 255); width: 80%; opacity: 0.9; font-family: oswald; color: #464646; text-align: center; padding: 5px; font-size: 17px; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;  }

.avcontent:hover .roro1 { position: relative; top:50px; left: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; }
.avcontent:hover .roro2 { position: relative; top:50px; left: 0; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; }
.avcontent:hover .roro3 { position: relative;  top:50px; left: 0; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; }
.avcontent:hover .roro4 { position: relative; top:50px; left: 0; -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
.avcontent:hover .roro5 { position: relative; top:50px; left: 0; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; }

.perv:first-letter {
    color: #6d7947; /*  цвет первой буквы */
   }

.avbox:hover .avcontent { top: 0px; }
.plot-relate { height: 115px; overflow: auto; width:100%; }
.plot-relate > p { font: 9px verdana; text-align: justify; line-height: 9px; margin-right: 5px; color: #f9f9f9}
.plot-relate > img { border: 3px solid #6d7947; float: left; margin: 0px 3px 1px 0px; }
.plot-relate > span { font: 8pt courier new; text-transform: uppercase; background: #6d7947; text-align: left; padding: 4px; display: block; color: #d9c5a0; }
.plot-tabs {
    position: relative;
    min-height: 290px;
    clear: both;
    width: inherit;
}
.plot-tab {
    width: 174px;
    color: #65683f;
    background: #6d7947;
    padding: 2px 0px;
    text-align: center;
    display: inline-block;
}
.plot-tab:last-child { margin: 0px; }
.plot-tab label {text-transform: uppercase;  padding: 4px; color: #2e3d00; font-size: 1.5em; font-family: 'bebas neue';}
.plot-tab [type=radio] { display: none; }
.content { position: absolute;  top: 28px;  left: 0;  background: #f9f9f9; right: 0;  bottom: 0; overflow: auto; padding: 3px 10px 0px 5px;}
.content p { width: auto;  text-align: justify; line-height: 11px; margin: 0px 5px 10px 0px; }
.content p:last-child { margin-bottom: 0px; }
.content .push li {
  position: relative;
  padding: 10px 0 10px 0;
  margin: 0 0 0 -20px;
  cursor: default;
}
.content .push li span b {
  background-image: linear-gradient(#6d7947 50%, #6d7947  50%), linear-gradient(silver 50%, silver 50%);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 2px;
  padding-bottom: 2px;
  transition: .5s  ease-in-out;
}
.cent {
  font-family: "oswald";
  font-variant: small-caps;
  font-weight: bold;
  font-size: 120%;
}
.lef {
  font-variant: normal;
  font-weight: normal;
  font-size: 100%;
}
.lef b{
  font-variant: normal;
  font-weight: bold;
  font-size: 100%;
}
.content .push li:hover span b  {
  background-size: 100% 2px, 100% 2px;
  color: #6d7947;
}
.content .push li:before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4F5151;
  content: "";
  left: -15px;
  transition: .3s ease-in-out;
  top: 10px;
}
.content .push li:after {
  position: absolute;
  border-left: 1px dotted #4F5151;
  width: 1px;
  bottom: 0;
  content: "";
  left: -12px;
  top: 28px;
}
.content .push li:hover:before{
  box-shadow: 0 0 0 10px rgba(0,0,0,0.2)
}
.content .push li:last-child:after {
  content: none;
}
.content .push li:hover {
background-color:  rgba(165, 165 165, 0.8);
}

.rorotab1  {background-color: #6d7947; }
.rorotab2 {
    background-color: #dac8a2;
    border: 1px solid #6d7947;
    font-family: bebas neue;
    padding: 5px;
    color: #6d7947;
    width: 100px;
    text-align: justify;
    margin-bottom: 5px;
    font-size: 1.4em;
}

[type=radio]:checked ~ label {  background: none; color: #d9c5a0; z-index: 2; }
[type=radio]:checked ~ label ~ .content {  z-index: 1; background: #e9d6b2 url(https://forumstatic.ru/files/0014/4e/8d/41771.jpg);
}

.osw {font-family: oswald; }

</style>
<div id="grisha-alina">
<div class="grisha-mal">
<div class="grisha-zoya">

<img src="http://placehold.it/300x550">

</div></div>
<div class="grisha-darkling">
<div class="grisha-info">
<span class="grisha-infon">Name Surname на англ.</span><br>
возраст / деятельность
</div>
</div>
<div class="grisha-kuya">
<div class="grisha-title">Name Surname на англ.</div>
<div class="grisha-subtitle">Имя знаменитости на англ.</div>
<center><img src="http://placehold.it/500x200"></center>
<div class="grisha-text">
<div class="plot-tabs">
<div class="plot-tab">
<input type="radio" id="tab-3" name="tab-group-1" checked>
<label for="tab-3">ОСНОВНАЯ ИНФОРМАЦИЯ</label>     
<div class="content">
<table width="100%"><tr><td width="50%" valign="top">
<ol class="push">
<li><span class="cent"><b>Имя и прозвище</b></span>
<p>Имя и фамилия на русском, прозвища и сокращения, если есть.
<li><span class="cent"><b>Статус крови</b></span>
<p>Чистокровный/полукровка/магглорожденый
<li><span class="cent"><b>Волшебная палочка</b></span>
<p>ОТВЕТ
<li><span class="cent"><b>Боггарт и патронус</b></span>
<p>То, чего ваш герой боится больше всего, а также его защитник (обращаем ваше внимание, что далеко не все владеют этим заклинанием - например, школьники младших курсов и темные маги патронусов не имеют).
<li><span class="cent"><b>Питомец</b></span>
<p>Есть ли у вашего персонажа какие-либо домашние животные? Если нет - ставим прочерк.
<li><span class="cent"><b>Способности, особенности, таланты</b></span>
<p>Не перестарайтесь: нельзя быть анимагом и метаморфом одновременно! И уж точно никакой беспалочковой магии у подростка!
<br>В данном пункте указываются, как магические умения, так и вполне рядовые вроде вышивания крестиком.
</ol>
</td>
<td width="50%" valign="top">
<ol class="push">
<li><span class="cent"><b>Возраст и дата рождения</b></span>
<p>В игре настоящее время, т.е. 2017 год
<li><span class="cent"><b>Лояльность</b></span>
<p>Пожиратели Смерти/Орден Феникса/Нейтралитет
<li><span class="cent"><b>Деятельность</b></span>
<p>Если ваш персонаж не учился в Хогвартсе, а учился в другой волшебной школе или обучался на дому, кратко укажите эту информацию (например, Дурмстранг'73). Если ваш персонаж уже окончил школу, пишите факультет и год окончания (например, Слизерин'67).
Также в этом же пункте вы указываете занятость вашего персонажа и его место работы, если таковое имеется.
<li><span class="cent"><b>Имущество и артефакты</b></span>
<p>Вещи, на которых вы хотели бы заострить внимание: например, метлы, особые книги, а также недвижимость, которая принадлежит вашему герою.
<br>Не стоит приписывать себе целый склад артефактов, но, если у вас все-таки что-то есть, то стоит описать его внешний вид и магические свойства.
</ol>
</td>
</tr></table>

</div>
</div>

<div class="plot-tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">БИОГРАФИЯ И ХАРАКТЕР</label>     
<div class="content">
<div class="rorotab1"><div class="rorotab2">Биография</div></div><p>

Лаконичная биография вашего героя - это ваша визитная карточка. Мы ценим факты, поэтому нам интересно, где ваш персонаж родился, где и как учился, а не какого цвета были занавески у его бабушки. Кстати о родственниках: начать повествование стоит с них - первым делом укажите список ваших известных родственников.

<div class="rorotab1"><div class="rorotab2">Характер</div></div><p>

Не бывает ни ангелов, ни демонов - у всех свой особенный характер, где даже на миллион отрицательных качеств может найтись одно положительное. Поэтому расскажите нам о своем герое, о том, каков он есть.

</div>
</div>

<div class="plot-tab">
<input type="radio" id="tab-1" name="tab-group-1">
<label for="tab-1">ИНФОРМАЦИЯ</label>     
<div class="content">
<div class="rorotab1"><div class="rorotab2">ОБ ИГРОКЕ</div></div>
<ol class="push">
<li><p><span class="lef"><b>Планы на игру: </b>Расскажите о своих планах на игру. Возможно, что у вас есть готовые задумки? Или вы предпочитаете отыгрывать драмы, а не комедии? Это стоит вписать в данный пункт, чтобы АМС и другие игроки сразу представляли, какие их сюжетные идеи вы можете поддержать.</span></li>
<li><p><span class="lef"><b>Связь:</b> Здесь вы можете указать ICQ, QIP, Skype, Mail.ru агент или ваш адрес в одной из социальных сетей.</span></li>
</ol>
<div class="rorotab1"><div class="rorotab2">ПРОБНЫЙ ПОСТ</div></div><p>
Текст Текст

</div>
</div>

</div>

</div>
</div>
</div>
[/html]