Код:

[*code]<!*--HTML--><center>
<style type="text/css">
.yonetoheal {width: 480px; }
.oghoddd {padding: 20px; font-family: georgia; font-size: 35px; font-style: italic; color: #fff; text-align: center; width: 440px; background-color: #D4D9C7; letter-spacing: -2px; text-shadow: 1px 1px 1px #000; }
.fithhhoeri {width: 480px; height: 230px; background-image: url(http://funkyimg.com/i/Ubsm.png); }
.finalhe {padding: 20px; width: 440px; height: 210px; }
#watyoudonk {border: none; width: 260px; height: 188px; padding: 10px;  position: relative; overflow: hidden;}
#watyoudonk .ifeengersi { overflow: hidden; width: 248px; height: 188px; background-color: #fff; -webkit-transform: translate(286px, -100px) rotate(90deg); -moz-transform: translate(286px, -100px) rotate(90deg); -o-transform: translate(286px, -100px) rotate(90deg); -ms-transform: translate(286px, -100px) rotate(90deg); transform: translate(286px, -100px) rotate(90deg); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s  ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; opacity: 0;}
#watyoudonk:hover .ifeengersi {overflow: hidden;  opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px);-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s  ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.fiyoyheco {padding: 10px; width: 228px; height: 168px; }
.myplaiswi {padding: 4px; width: 102px; border-bottom: 5px solid  #ec9239;  border-top: 1px dotted #585D69; font-family: calibri; text-transform: uppercase; font-size: 10px; text-align: center; }
.outgoowi {padding: 10px; width: 58px; font-family: TripSerifCE_Light; font-weight: light; font-style: italic; font-size: 35px; color: #000; background-color: #f4f4f4; text-align: center; text-shadow: 1px 1px #000, 2px 2px #fff; }
.reliaket {padding: 4px; width: 134px; border-bottom: 5px solid  #ec9239;  border-top: 1px dotted #585D69; font-family: calibri; text-transform: uppercase; font-size: 10px; text-align: center; }

.idothknca {width: 228px; font-family: georgia; font-size: 35px; font-style: italic; color: #585D69; text-align: center;  letter-spacing: -3px; text-shadow: 1px 1px 1px #000; margin-top: 15px; }
.accordion { width: 460px;    margin: 0 auto; font-size: 14px; padding: 10px; background:#BAB6AF; border-bottom: 20px solid #585D69; }.accordion ul {list-style: none; margin: 0; padding: 0;   }
.accordion li {margin:0; padding:0; }
.accordion [type=radio], .accordion [type=checkbox] { display:none; }
.accordion label { display:block; font-size: 16px; background: #F7E9CB; color:#000; font-family: TripSerifCE_Light; font-style: italic; text-transform: uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; }
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { background:#8B8B83; color:#FFF; }
.accordion .content { padding: 0 10px;  overflow:hidden;  -webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; border: 1px solid #fff; background-color: #fff;}
.accordion p {  color:#333; margin:0 0 10px; }
.accordion h3 { color:#542437; margin:10px 0;}
.vertical ul li {overflow:hidden; margin:0 0 1px; }
.vertical ul li label { padding:10px; }
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label { border-bottom:0; }
.vertical ul li .content { height:0px; border-top:0;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { height: 200px; border: 1px solid #fff; background-color: #fff; padding: 10px; }
.wohaowhe {padding-right: 5px;height: 200px; overflow: auto; text-align: justify; font-size: 11px; text-transform: lowercase; font-family: arial; line-height: 95%; color: #000; }
@font-face { font-family: 'TripSerifCE_Light'; src: url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.eot'); src: url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.eot?#iefix') format('embedded-opentype'), url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.woff') format('woff'), url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.ttf') format('truetype'), url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.svg') format('svg'); font-weight: normal; font-style: normal; }
</style>
<div class="yonetoheal"><A HREF=""><div class="oghoddd">name surname</div></A><div class="fithhhoeri"><div class="finalhe"><div id="watyoudonk"><div class="ifeengersi"><div class="fiyoyheco"><table cellpadding="0" cellspacing="0"><tr><td><div class="myplaiswi">сокращения от имени</div></td><td><div class="myplaiswi" style="margin-left: 6px;">семейное положение</div></td></tr><tr><td><div class="outgoowi" style="margin-top: 6px;">возраст</div></td><td><div style="margin-left: -25px;margin-top: 6px;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="142" height="27"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#D4D9C7" /><param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/iz3ta9ge8e/Demi_Lovato_-_Fire_Starter.mp3" /></object>
<div class="reliaket" style="margin-top: 6px;">внешность</div>
</div></td></tr><tr><td><div class="myplaiswi" style="margin-top: 6px;">должность</div></td><td><div class="myplaiswi" style="margin-left: 6px; margin-top: 6px;">место работы</div></td></tr></table><div class="idothknca"></div></div></div></div></div></div>

<div class="accordion vertical"> <ul> <li><input type="radio" id="radio-1" name="radio-accordion"><label for="radio-1">ИСТОРИЯ ПЕРСОНАЖА</label><div class="content"><div class="wohaowhe">

Описание биографии и характера персонажа здесь

</div> </div></li>  

<li><input type="radio" id="radio-3" name="radio-accordion" /><label for="radio-3">ПРИМЕР ПОСТА</label><div class="content"><div class="wohaowhe">

Ваш пробный пост здесь


</div></div> </li> <li><input type="radio" id="radio-4" name="radio-accordion" /> <label for="radio-4">ЗАПОЛНЯЕТ ПРИНИМАЮЩИЙ АДМИНИСТРАТОР</label><div class="content"><div class="wohaowhe">

имя куратора и группа, к которой относится участник

</div></div> </li></ul></div></div></center>[/*code]