Код:
<!--HTML-->
<style type="text/css">
#tab-content1::-webkit-scrollbar {width: 5px; background: fff}
#tab-content1::-webkit-scrollbar-thumb {background:fff}
#tab-content1::-webkit-scrollbar-corner {background:fff}
#tab-content2::-webkit-scrollbar {width: 5px; background: fff}
#tab-content2::-webkit-scrollbar-thumb {background:fff}
#tab-content2::-webkit-scrollbar-corner {background:fff}
.pages [type=radio] {
/*position: absolute;
top: -9999px;
left: -9999px; */
display: none;
}
.dcontainer {
width: 450px;
height: 550px;
font-family: 'Kurale', serif;
background: url(http://se.uploads.ru/5xLY6.jpg
);
margin: 0 auto;
padding-left: 20px;
padding-top: 20px;
}
.dimage h2 {
display: none;
color:#cdcdcd;
text-shadow: 1px 1px 0 #3c3b3b;
}
.dimage:hover h2 {
display: inline;
}
.pages {
float: none;
list-style-type: none;
position: relative;
padding: 0;
}
.pages p {
margin: 0;
padding: 0;
}
.pages li{
float: left;
}
.pages label {
display: block;
/*padding: 10px 10px;*/
border-radius: 2px;
/* color: #b2b2b2;
font-size: 20px;
font-weight: normal;
color: #285747;
font-family: Arial;
background: #cdcdcd;
cursor: pointer;*/
width: 210px;
padding: 5px 0 5px 0;
margin: 0 0px 0 0;
text-align: center;
font-size: 13px;
background-color:#cdcdcd;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pages label:hover {
background-color:#cdcdcd;
}
[id^=tab]:checked + label {
top: 0;
background-color:#cdcdcd;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
width: 420px;
height: 500px;
border-radius: 2px;
color:#222;
overflow: auto;
background:#cdcdcd;
z-index: 2;
display: none;
text-align: left;
line-height: 120%;
padding: 5px;
position: absolute;
top: 30px;
left: 0;
text-align: justify;
font-family: Arial;
font-size: 12px;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
</style>
<div class="dcontainer">
<div class="dimage">
<h2> First.Last</h2>
</div>
<ul class="pages">
<li>
<input type="radio" checked name="pages" id="tab1">
<label for="tab1"><p>СЮЖЕТ</p></label></class>
<div id="tab-content1" class="tab-content animated fadeIn">
<div>
<center><img src="http://sa.uploads.ru/jGBQZ.gif"><img src="http://sg.uploads.ru/blsEH.gif"><img src="http://sh.uploads.ru/ebmGf.gif"><br>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="400" height="10" style="STYLES HERE"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#434457" /><param name="FlashVars" value="mp3= http://dl.waix.ru/d4b2bd099.mp3&bgcolor=daadc2" /> </object>
</center><br><br>
<b>З</b>наете, этот мир не управляется законами, написанными на бумаге. Он управляется людьми. Одними в соответствии с законом, другими — нет. От каждого человека зависит, каким будет его мир, как он его сделает. А ещё вам нужна уйма везения, чтобы кто-нибудь другой не превратил вашу жизнь в ад. И всё не так просто, как нас учили в начальной школе, но всё же хорошо иметь твёрдые убеждения и придерживаться их в браке, в преступлении, в войне, везде и всегда. <br>
Знаете, я думаю, что во всём надо знать меру. Да, меру, вот хорошее слово. Тот, кто хочет слишком много, рискует потерять абсолютно всё. Правда, тот, кто слишком мало хочет от жизни, может вообще ничего не получить.<br><br>
<center><b>Тотализатор смерти</b></center><br><br>
<b>Т</b>ы знаешь что это такое? Это довольно интересно и сейчас я тебе расскажу. Вот ты сидишь перед телевизором и смотришь очередную речь политиков и бизнесменов и понимаешь, что ничего сделать против них не можешь. Однако это не так. Ты просто анонимно вносишь на определенный счет деньги - неважно какую сумму. На этот же счет присылают деньги другие люди, а суммы складываются. Своеобразный рейтинг непопулярности. Все это анонимно, никто никогда не узнает кто вносил деньги.<br>
Теперь представь киллера, который изучает эти рейтинги и прикидывает, какую сумму может получить за убийство. За кого-то подано больше денег, но и охрана у него серьезная. А за кого-то денег меньше, но и добраться до него проще.<br>
И что же мы получим? Если такая система заработает и старая система государств не сможет противопоставить ей что-то столь же революционное, то совершенно очевидно, что в первые же месяцы действия такой системы погибнут буквально все публичные политики. И новых не появится: всем будет ясно, что появление на телеэкране означает гарантированную смерть. Не будет политиков, не будет правительства, не будет налогов.<br><br>
<center><b>Новое будущее</b></center><br><br>
<b>Э</b>то было не остановить и людям казалось, что это путь к процветанию. Однако все сложилось иначе. Без правительства страну подмяли под себя различные группировки, как криминальные, так и нет. Теперь практически каждый человек находится в определенной группировке и работает на нее.<br>
</div><br>
</div>
</li>
<li>
<input type="radio" name="pages" id="tab2">
<label for="tab2"><p>ПРИДЕРЖАТЬ РОЛЬ</p></label>
<div id="tab-content2" class="tab-content animated fadeIn">
<center><b>Шаблон (убираем звездочки)</b></center><br>
<center><b><*b>полное имя <*sup>группа<*/sup><*/b> за ...<*br></b></center><br>
<b>Kim Tae Hyun<sup>bts</sup></b> за администрацией<br>
<b>Kim Jae Joong<sup>jyj</sup></b> за администрацией<br>
<b>Park Ji Min<sup>bts</sup></b> за администрацией<br>
<b>min yoongi <sup>bts</sup></b> за мразъю<br>
<b>kim namjoon <sup>bts</sup></b> за мразъю<br>
</div>
</li>
<li>
</div>
</ul>
</div>
