<!--HTML--><style type="text/css">
.form_block {width:380px; height:500px; padding:50px; background:#fff; border:1px solid #d0d0d0;}
.form_head {font:20px georgia; font-style:italic; font-weight:bold; padding-top:20px; padding-bottom:50px; padding-left:40px; text-align:left;}
.form_scroll {height:370px; margin-top:30px; padding-right:15px; overflow-y:scroll; font:10px arial; line-height:15px; text-align:justify;}
.leftimg {float:left; margin: 1px 15px 0px 1px;}
.topic_form {font:17px georgia; font-style:italic; margin-top:10px;}

.work_box {width:600px; height:700px;}
ul.claps {position:absolute; margin-top:0px; height:30px; width:100%; margin-left:65px;}

ul.claps li {display:inline-block; margin-left:-4px; transition-duration: 0.7s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;
background:#f9f9f9;
margin-right:3px;
line-height:20px;
padding:6px 0 6px 0;
width:60px;
text-transform:uppercase; 
text-align:center;
color:#fff;
font:7px arial;
font-style:italic;}

html ul.claps li.hover {transition-duration: 0.7s;-moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; background:#ededed;}    
html ul.claps li.active {background:#ededed;}  
html ul.claps li.active a:hover  {background:#ededed;}
.box {position:absolute; margin:30px 0 0 0; width:600px; height:700px;}
</style>


<div class="work_box" id="quo1">
<div class="html-box"><ul class="claps">
<li class="active"><a href="#clap1">character</a></li>
<li><a href="#clap2">info</a></li></ul><div class="box">

<div style="display:block;" id="clap1" class="work-case">
<center><div class=form_block>
<!-- НАЧАЛО РАБОТЫ. ТО, ЧТО СВЕРХУ, НЕ ТРОГАЕМ -->



<!-- ИМЯ НА АНГЛИЙСКОМ -->
<div class=form_head>name surname</div><hr><div class=form_scroll>

<!-- ИЗОБРАЖЕНИЕ 100Х100 -->
<img class="leftimg" style="border: 5px solid #e4e4e4; outline:1px solid #d0d0d0;" src="http://funkyimg.com/i/2hFXs.png">
<!-- ОПИСАНИЕ ПЕРСОНАЖА -->


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam nisl at libero feugiat suscipit. Maecenas ac leo non arcu vehicula facilisis. Quisque bibendum, turpis pharetra ornare posuere, turpis nibh fermentum turpis, vitae vehicula sapien dui et felis. Fusce urna neque, iaculis id metus quis, condimentum accumsan libero. Quisque tincidunt ultrices lacus elementum scelerisque. Curabitur non massa a purus sollicitudin iaculis auctor at enim. In non varius mi. Donec vitae pharetra diam. Sed sit amet lorem mattis, vehicula odio interdum, viverra odio. Mauris quam eros, consequat vitae tortor et, tempus pretium purus. In viverra erat non pellentesque posuere.

Curabitur sit amet sem erat. Ut sit amet iaculis urna. Cras sagittis imperdiet dolor nec volutpat. Morbi placerat turpis vitae pharetra faucibus. Fusce congue maximus varius. Etiam consequat massa eu tincidunt facilisis. Praesent fringilla massa a quam imperdiet, ut vulputate quam mollis. Pellentesque blandit quam vel consectetur blandit. Integer laoreet sagittis venenatis. Nam et elit a lectus maximus ultrices eu sed tortor. Donec magna turpis, consequat eget eros non, condimentum egestas purus. Sed rutrum laoreet nunc a vehicula.

Morbi dictum lacus vitae turpis consequat interdum. Etiam imperdiet, urna ut blandit lobortis, lectus enim euismod diam, non hendrerit nisi massa id erat. Cras vel massa quis dui vehicula vulputate vitae ac ligula. In pulvinar ligula velit, nec posuere nibh mollis nec. In at sapien non neque aliquet commodo ut et ipsum. Sed ac ullamcorper odio. Vestibulum vitae eleifend ex, quis ullamcorper lectus. Ut egestas diam id magna malesuada lobortis. Donec tempor finibus libero, eget efficitur sem ultrices non. Proin ultricies id justo ac viverra. Pellentesque eu pellentesque justo, ut rhoncus quam.

Aenean molestie tempus fermentum. Mauris pulvinar odio ut dolor maximus posuere. Phasellus vitae risus in velit imperdiet suscipit. Vivamus nec libero id felis vulputate ultrices. Pellentesque cursus, massa ac maximus fringilla, magna tellus pellentesque odio, efficitur suscipit est eros et nisl. Proin euismod elit neque, vitae consectetur ex volutpat eget. Sed in nunc eget enim viverra tincidunt id sed magna. Cras malesuada dui in placerat dapibus. Curabitur ut elementum nisl, sit amet faucibus ligula. Vestibulum mattis magna est, eget interdum risus faucibus eget. Proin vel bibendum ex, et vehicula ligula. Integer dolor ex, laoreet ut lorem vel, facilisis dictum libero. Morbi sollicitudin, sapien sed hendrerit condimentum, diam felis mollis nunc, sed ullamcorper lectus lorem vitae lacus.

Pellentesque lacus nisi, pellentesque non lacinia id, lacinia vitae nunc. Phasellus lacinia semper posuere. Vivamus id vehicula tortor, ut iaculis dui. Suspendisse ut porttitor libero. Phasellus et faucibus odio, eu venenatis mauris. Aliquam tristique, lorem eu commodo vulputate, felis nunc varius dui, nec pharetra sem lorem vitae lacus. Vivamus molestie leo eu felis tincidunt, sit amet tincidunt felis mattis. Integer pellentesque molestie tellus, quis tincidunt elit gravida a. In at tortor quam. Praesent sagittis, nisi ac rutrum finibus, tellus nunc hendrerit lacus, lobortis aliquam sem turpis nec risus. Aliquam nec erat et leo mollis commodo a vel quam. Phasellus efficitur luctus eros, in dignissim libero dapibus a. Nam ipsum dui, faucibus a orci nec, pulvinar bibendum metus. In sagittis laoreet purus pharetra tincidunt.


</div></div></center></div><div style="display:none;" id="clap2" class="work-case">
<center><div class=form_block><div class=form_head style="padding:0px 0px 10px 0px;">





<!-- ИЗОБРАЖЕНИЕ 350Х100 -->
<center><img style="border: 5px solid #e4e4e4; outline:1px solid #d0d0d0;" src="http://funkyimg.com/i/2hG1m.png"></center></div>
<hr><div class=form_scroll>

<!-- ИНФОРМАЦИЯ О ПЕРСОНАЖЕ -->
<div class=topic_form>full name</div> имя фамилия

<div class=topic_form>nicknames</div> прозвище/короткое имя

<div class=topic_form>age</div> возраст

<div class=topic_form>birthday</div> число и месяц дня рождения

<div class=topic_form>sexuality</div> ориентация

<div class=topic_form>height, weight</div> рост, вес

<div class=topic_form>hometown</div> родной город

<div class=topic_form>occupation</div> род деятельности

<div class=topic_form>fears</div> страхи

<div class=topic_form>habits</div> привычки

<div class=topic_form>face claim</div> занимаемая внешность

<div class=topic_form>contacts</div> связь с вами





<!-- СПАСИБО ЗА ТЕРПЕНИЕ -->
</div></div></center></div></div></div></div>

[co*de]<!--HT*ML--><style type="text/css">
.work_box {width:600px; height:700px;} .form_scroll {margin-top:30px;}
ul.claps {position:absolute; margin-top:0px; height:30px; width:100%; margin-left:61px;}
ul.claps li {display:inline-block; margin-right:3px; line-height:20px; width:60px; padding:6px 0 6px 0; font:7px arial;}
.box {position:absolute; margin:30px 0 0 0; width:600px; height:700px;} .leftimg {margin: 1px 15px 0px 1px;} .topic_form {margin-top:10px;}
</style>
<div class="work_box" id="quo1">
<div class="html-box"><ul class="claps">
<li class="active"><a href="#clap1">character</a></li>
<li><a href="#clap2">info</a></li></ul><div class="box">

<div style="display:block;" id="clap1" class="work-case">
<center><div class=form_block>
<!-- НАЧАЛО РАБОТЫ. ТО, ЧТО СВЕРХУ, НЕ ТРОГАЕМ -->



<!-- ИМЯ НА АНГЛИЙСКОМ -->
<div class=form_head>name surname</div><hr><div class=form_scroll>

<!-- ИЗОБРАЖЕНИЕ 100Х100 -->
<img class="leftimg" style="border: 5px solid #e4e4e4; outline:1px solid #d0d0d0;" src="АДРЕС ИЗОБРАЖЕНИЯ">
<!-- ОПИСАНИЕ ПЕРСОНАЖА -->


текст описания персонажа


</div></div></center></div><div style="display:none;" id="clap2" class="work-case">
<center><div class=form_block><div class=form_head style="padding:0px 0px 10px 0px;">





<!-- ИЗОБРАЖЕНИЕ 350Х100 -->
<center><img style="border: 5px solid #e4e4e4; outline:1px solid #d0d0d0;" src="АДРЕС ИЗОБРАЖЕНИЯ"></center></div>
<hr><div class=form_scroll>

<!-- ИНФОРМАЦИЯ О ПЕРСОНАЖЕ -->
<div class=topic_form>full name</div> имя фамилия

<div class=topic_form>nicknames</div> прозвище/короткое имя

<div class=topic_form>age</div> возраст

<div class=topic_form>birthday</div> число и месяц дня рождения

<div class=topic_form>sexuality</div> ориентация

<div class=topic_form>height, weight</div> рост, вес

<div class=topic_form>hometown</div> родной город

<div class=topic_form>occupation</div> род деятельности

<div class=topic_form>fears</div> страхи

<div class=topic_form>habits</div> привычки

<div class=topic_form>face claim</div> занимаемая внешность

<div class=topic_form>contacts</div> связь с вами





<!-- СПАСИБО ЗА ТЕРПЕНИЕ -->
</div></div></center></div></div></div></div>[/co*de]