<center>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
<style>
.tabs-wrapper { width: 288px;  } 
.tabs-wrapper > input[type=radio] { display:none; }
label { display: inline; width:72px; height: 40px; line-height: 40px; text-align:center; position: relative; float: left; opacity: 0.4; -moz-transition: ease-in-out all 1s; -webkit-transition: ease-in-out all 1s; font-size: 10px; background-color: #e3dcd0; color: #7d6d5c; font-family: 'PT Sans Narrow', sans-serif; text-transform: uppercase;} 
:checked  + label { opacity: 0.85; color: #e3dcd0; background-color: #7d6d5c; }
.tab-body { position: absolute; opacity: 0; color: #000;   }
.tab-body-wrapper { clear: both; border-top: 3px solid #7d6d5c; }
#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2 , #tab3:checked ~ .tab-body-wrapper #tab-body-3 , #tab4:checked ~ .tab-body-wrapper  #tab-body-4 , #tab5:checked ~ .tab-body-wrapper  #tab-body-5 { position:relative; top:0px; opacity: 1; -moz-transition: ease-in-out all 0.5s; -webkit-transition: ease-in-out all 0.5s }
.box { background-image: url(http://fc00.deviantart.net/fs70/i/2010/302/1/4/tileable_wood_texture_01_by_goodtextures-d31qde8.jpg); width: 400px; height: 500px;  background-size: 500px; auto; border: solid 3px #fafafa; }
.borders { border: 1px solid #fafafa; padding: 50px; margin: 5px; height: 388px; }
.words { background: #e3dcd0; color: #000; width: 268px; height: 320px; padding: 10px; text-align: justify; font-size: 9px; font-family: arial; line-height: 10px; overflow: auto; }
.shipname {font-family: 'Amatic SC', cursive; font-size: 58px; text-transform: lowercase; text-align: center; color: #5a5754; text-shadow: 1px 1px 0px #e3dcd0; padding-top: 250px; }
::-webkit-scrollbar { width: 8px; background-color: #62594b; } ::-webkit-scrollbar-thumb { background-color: #62594b; width: 8px; } ::-webkit-scrollbar-corner { background-color: #62594b; width: 8px; } ::-webkit-scrollbar-track { background-color: #fff; width: 8px; } 
</style>
<div class="box">
<div class="borders">
<div class="tabs-wrapper">
<input type="radio" name="tab" id="tab1" class="tab-head" checked="checked"/>
<label for="tab1">I.</label>
<input type="radio" name="tab" id="tab2" class="tab-head" />
<label for="tab2">II.</label>
<input type="radio" name="tab" id="tab3" class="tab-head" />
<label for="tab3">III.</label>
<input type="radio" name="tab" id="tab4" class="tab-head" />
<label for="tab4">IV.</label>

<div class="tab-body-wrapper">
<div id="tab-body-1" class="tab-body">

<div style="width: 268px; height: 320px; padding: 10px; background-image: url(http://funkyimg.com/i/JXe1.png);">
<div class="shipname">220V</div>
</div>
</div>
<div id="tab-body-2" class="tab-body">
<div class="words">
<center><a href="https://a.tumblr.com/tumblr_na5g85cEss1qaaduao1.mp3" target="_blank"><b>s o u n d t r a c k</b></a><br></center> <br>
Странные. Непонятные. Чудные. Опасные. Кто они? Туристы все так же едут в Бирмингем, вот только их представления о городе и жителях сильно изменились. Это больше не тот радужный город, что все привыкли видеть на картинках. Он потонул под тяжестью странностей, творящихся за каждым углом каждого его дома. Просто однажды утром люди проснулись и поняли, что они больше не будут жить в таком привычном и любимом Бирмингеме. Им придется отправиться в долгий путь примирения, страданий, непонятных и иногда жутких событий. Они не станут прежними. В каждом из них навсегда останется частичка этого жуткого пожара.
И никто не узнает, когда это закончится. И будет ли вообще конец.<br><br>
Сегодня ты взорвал машину одним взгядом, а вчера твой сосед исчез прямо перед твоими глазами. Завтра упадет высотка, а послезавтра сгорит старый склад. И это больше не странно. Не для ненормального Бирмингема. Не здесь.<br> <br>
» внешность/способность придерживается на срок в <b>два дня</b>, продлить срок можно только <b>два раза</b>. <br>
» внешности для нужных мы <b>не придерживаем</b>. <br>
» любые возникшие вопросы можно задавать именно в этой теме. <br>
<center><img src="http://funkyimg.com/i/JXnG.png">
</center> 
</div>
</div>
<div id="tab-body-3" class="tab-body">
<div class="words">
<center><b>придержанные внешности</b></center><br>
<center>до 23.08</center> <br>
<b>a</b>strid berges-frisbey (deviant moon) <br>
<b>k</b>eira knightley (реквием) <br>
<center>до 24.08</center> <br>
<b>a</b>lex turner (evil twin) <br>
<b>x</b>avier dolan (evil twin) <br>
 </div>
</div>
<div id="tab-body-4" class="tab-body">
<div class="words">
<center><b>придержанные способности</b><br></center> <br>
<center>до 23.08</center> <br>
<b>т</b>елекинез (реквием) <br>
<b>я</b>снослышание (deviant moon) <br>
<b>э</b>мпатия (амс) <br>
</div>
</div>
</div>
</div></div></div></div>