Код:
<!--HTML-->
<div class="postcolor"><br><br><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css">
<style type="text/css">

.cronoviccontainer {
 margin: 15px auto; 
 height: auto;
 width:auto;
 text-align:justify;
 }

.cronovictabs {
 margin: 0px auto; 
 position: relative;
 width: 450px; 
 height:550px;
 padding:10px;
}

.cronovictab {
display:block; 
}

/* position your tab labels in here - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */
.cronovictab label {
 display: block; /* this lets you fix the label dimensions */
 width: 70px;
 padding:4px;
 background: #f7e1e4;
 text-align:center;
 border: 0px solid #ccc;
 margin:5px;
 color:#1e1e1e;
 position: relative;
 font-size:10px;
 text-transform:uppercase;
 border-bottom:1px solid #601004;
 font-family:oswald;
 text-align:center;
 left:-80px;
 top: 145px;
 z-index:5;
  
 }

.cronovictab input[type=radio]:checked ~ label{
 background: #75151e;
 text-shadow: 0px 1px 0px #9fcfdd;
 z-index: 2;
}

.cronovictab input[type=radio] {
 display: none; /* DON'T EDIT */
}

/* if you want tab transitions they go here */
.cronoviccontent {
   position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
background: #d8d8d8;
 padding:20px;
 font-family:times new roman;
 font-size:13px;
 letter-spacing:1px;
 text-align:justify;
 overflow:auto;
 border-bottom:5px solid #601004;
 
 }

/* if you want tab transitions they also go here */
.cronovictab input[type=radio]:checked ~ label~.cronoviccontent {
 z-index: 1;
}

.cronoviccontent h1{
 margin:0;
 text-transform:uppercase;
 font-family:oswald;
 font-size:30px;
 color:#601004;
 text-shadow: 2px 2px 0px #dbd8d8;
 background-color:#f3f3f3;
 padding:25px;
  
}

.cronoviccontent h2{
 margin:0;
  font-family:oswald;
 font-size:10px;
font-weight:500;
line-height:180%;
}

.cronoviccontent h3{
 margin:0;
 text-transform:uppercase;
 font-family:oswald;
 font-size:15px; 
 color:#1e1e1e;
 border-bottom: 1px solid #1e1e1e;
padding:6px;
}

.loveinitself {
  font-size:9px;
 font-family:oswald;
  letter-spacing:1px;
}

.loveinitself a {
 text-decoration:none;
 font-weight:500;
 font-family:oswald;
 font-size:10px;
 color:#601004;
 text-shadow: 0px 1px 0px #eaeaea;
  -moz-transition:all 0.4s ease-in-out; 
  -webkit-transition:all 0.4s ease-in-out;
  
}


.loveinitself a:hover{
   color:#601004;
  letter-spacing:2px;
}


.cronoviccontent::-webkit-scrollbar { width: 2px; background: #f3f3f3f; } 
.cronoviccontent::-webkit-scrollbar-thumb { background: #601004; } 
.cronoviccontent::-webkit-scrollbar-corner { background: #caa0aa; }


</style>

<div class='postcolor'> <center><div style="width: 500px; padding: 2px; background-color: #eeeeee; border: 20px solid #201e1f;">

<div style="width: 500px; font-family: georgia; font-size: 30px; text-transform: lowercase;  background-color: #601004; color: #ffffff; font-style: italic; line-height: 90%; text-shadow: 1px 1px 0px #1a1b26;">хронология</div>
<p>
<br>
<div style="width: 480px; color: #601004 ; text-align: center; text-transform: uppercase; font-size: 9px; font-family: verdana; height: 10px; border-top: 1px solid #8F4C5B; border-bottom: #8F4C5B 1px solid; margin-bottom: 13px; padding-top: 3px; padding-bottom: 5px;">the hunger games: resonance</div>



<div class="cronoviccontainer">

<div class="cronovictabs">




<div class="cronovictab">
<input type="radio" id="cronovictab-1" name="cronovictab-group-1">
<label for="cronovictab-1">общая хронология</label>
<div class="cronoviccontent">
<center><b>Общая хронология</b></center> <br>

<b>5997</b> — образование Панема <br>
<b>5998</b> — рождение Кориолана Сноу <br>
<b>6002</b> — Начало Темных Дней <br>
<b>6010</b> — Окончание Темных дней и восстания; уничтожение Дистрикта 13; Treaty of Treason; 1 Голодные Игры <br>
<b>6034</b> — Первая Квартальная бойня: выбор трибутов населением <br>
<b>6035</b> — рождение Альмы Койн<br>
<b>6041</b> — рождение Хеймитча Эбернати<br>
<b>23.06.6039</b> — рождение Хелен Джексон<br>
<b>04.10.6048</b> — рождение Эффи Тринкет<br>
<b>05.03.6052</b> — рождение Цинны<br>
<b>6053</b> — рождение Цецилии Джонсон<br>
<b>20.06.6053</b> — рождение Крессиды<br>
<b>6058</b> — Вторая Квартальная бойня: в два раза больше трибутов. Победа Хеймитча Эбернати<br>
<b>6059</b> — рождение Финника Одэйра<br>
<b>6062</b> — рождение Джоанны Мэйсон<br>
<b>19.09.6062</b> — рождение Энни Креста<br>
<b>05.01.6064</b> — рождение Гейла Хоторна<br>
<b>08.05.6066</b> — рождение Китнисс Эвердин<br>
<b>6066</b> — рождение Мадж Андерси, Пита Мелларка и Делли Картрайт; Цецилия Джонсон становится победители в 58-х Голодных Играх<br>
<b>15.01.6068</b> — рождение Рори Хоторна<br>
<b>26.05.6069</b> — рождение Примроуз Эвердин<br>
<b>6072</b> — Финник Одэйр побеждает в 65-х Голодных Играх<br>
<b>31.03.6072</b> — рождение Вика Хоторна<br>
<b>28.01.6077</b> — взрыв в шахтах убивает отца Китнисс и отца Гейла<br>
<b>30.01.6077</b> — рождение Пози Хоторн<br>
<b>15.10.6077</b> — The ocean calms<br>
<b>6077</b> — Энни Креста побеждает в 70-х Голодных Играх<br>
<b>6081</b> — 74-е Голодные Игры. 21 октября — 7 ноября, 18 дней.<br>
<b>6082</b> — 75-е Голодные Игры. 21 октября — 23 октября, 3 дня. Китнисс уничтожает арену посередине игр. Она, Финник и Бити Литье спасены, но Пит и Джоанна в плену Капитолия<br>
<b>23.10.6082</b> — уничтожение Дистрикта 12<br>
<b>03.01.6083</b> — Спасение победителей из плена Капитолия<br>
<b>09.01.6083</b> — Совещание о необходимости привлечения Китнисс к труду в качестве Сойки<br>
<b>05.02.6083</b> — Первый выход Пита в общество после лечения в больнице тринадцатого<br>
<b>12.02.6083</b> — Свадьба Финника и Энни и бомбежка тринадцатого<br>

</div>
</div>
<div class="cronovictab">
<input type="radio" id="cronovictab-2" name="cronovictab-group-1" checked="">
<label for="cronovictab-2">хронология эпизодов</label>
<div class="cronoviccontent">
<center><b> Хронология эпизодов</b> </center><br>
15.10.6061 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=88 ">First time</a> <br>
14.10.6072 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=160 ">Wish me good luck</a> <br>
12.11.6072 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=156 ">Salvaged</a> <br>
21.12.6072 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=159 ">Welcome to the cage</a> <br>
15.10.6077 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=86 ">The ocean calms</a> <br>
15.10.6077 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=63 ">А! О, мой бог. Ты выглядишь ужа... эээ... хорошо. Хорошо выглядишь!</a> <br>
22.10.6077 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=131">Here comes the sun destined to die</a> <br>
15.04.6079 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=147 ">Танцы на битом стекле</a> <br>
15.10.6081 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=146 ">The Reaping</a> <br>
18.10.6081 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=115">Favor</a><br>
09.11.6081 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=77">Not idyll </a> <br>
06.10.6082 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=128">Those who fear are lost </a> <br>
13.04.6082 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=109">Advent </a> <br>
20.10.6082 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=163">В разговоре с незнакомыми людьми люди истиннее </a> <br>
17.02.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=149 ">Держись, не давай им маленькой победы</a> <br>
30.10.6082 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=93 ">We need to go back</a> <br>
13.12.6082 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=104 ">Hello!</a> <br>
21.01.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=123 ">Искренность или холодный расчет?</a> <br>
26.01.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=73">Когда сон становится явью</a> <br>
07.02.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=157">Helping hand</a> <br>
10.02.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=105 ">Secrets </a> <br>
12.02.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=97">Part 1.1 Wedding [C]</a> <br>
12.02.6083 - <a href="http://thgresonance.rusff.me/viewtopic.php?id=117">L’essentiel est invisible pour les yeux</a> <br>


</div>
</div>

<div class="cronovictab">
<input type="radio" id="cronovictab-3" name="cronovictab-group-1" checked="">
<label for="cronovictab-3">Голодные Игры</label>
<div class="cronoviccontent">
<center><b> Голодные Игры</b> </center><br>
<b>15 октября</b> — Жатва<br>
<b>16 октября</b> — путешествие в Капитолий, церемония открытия Игр<br>
<b>17-19 октября</b> — тренировки и оценивание<br>
<b>20 октября</b> — интервью<br>
<b>21 октября</b> — начало Игр<br><br>
Игры длятся в среднем 20 дней и заканчиваются в ноябре. Квартальные бойни длятся столько же, плюс-минус 5 дней.<br>
Тур победителей длится 12 дней, и проводится 1-11 апреля, за полгода до Жатвы. После 74-х игр Тур из-за волнений провели практически сразу после Игр.<br>


</div>
</div>

</div>

<div style="margin: 0px auto; font-family:oswald;width: 300px; text-align: center; font-size: 10px;color:#000000 ;">Общая хронология составлена игроком Rory Hawthorne<br>
</div>

</div>  </div>