Код:
<!--HTML-->
<style>
.notebook {
    white-space: nowrap;
    overflow: hidden;
background: transparent;
}

.notebook > input {
    display: none;
}

.notebook > input + label {
    display: inline-block;
    border: 2px dotted #2d2d2d;
    padding: 5px;
    cursor: pointer;
    position: relative;
    color: #6e6e70;
    background: #c9c9c9;
    width: 54px;
    height: 54px;
    text-align: center;
    margin: 0px 5px 0px 5px;
}

.notebook > input + label:not(:last-of-type)  {
   order-right: none;
}

.notebook > input + label:hover {
    color: #6e6e70;
background: rgba(221, 221, 221, 0.68);
}

.notebook > input + label:last-of-type::after {
    display: block;
background: #788ea7;
    width: 700px;
    content: "";
    position: absolute;
    bottom: 0px;
    left: 100%;
}

.notebook > input:checked + label {
    color: #6e6e70;
background: #dddddd;
}

.notebook > input:checked + label:last-of-type::after {
    bottom: 0px;
}

.notebook > div {
    white-space: normal;
    display: none;
    border: none;
    border-top: none;
    margin: 0px;
    padding: 20px;
background: transparent;
text-align: justify;
color: #6e6e70;
}

.notebook > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.notebook > input:nth-of-type(6):checked ~ div:nth-of-type(6) {
    display: block;
}

.clan
{
width: 50px; 
height: 50px; 
background-size: cover;
}
</style>

<div class="text2"; style="padding: 10px 30px 10px 30px; text-align: center">
<br>
- <a href="http://eyeofthestorm.f-rpg.ru/viewtopic.php?id=20#p33">Бронирование Ролей</a></div>
<div class="notebook">
    <input type="radio" name="notebook1" id="notebook1_1"> 
<label for="notebook1_1" style="margin-left: 95px"><img src="http://forumstatic.ru/files/0018/3d/c7/95516.png"></label>
    <input type="radio" name="notebook1" id="notebook1_2">
    <label for="notebook1_2"><img src="http://forumstatic.ru/files/0018/3d/c7/99984.png"></label>
    <input type="radio" name="notebook1" id="notebook1_3">
    <label for="notebook1_3"><img src="http://forumstatic.ru/files/0018/3d/c7/66828.png"></label>
    <input type="radio" name="notebook1" id="notebook1_4">
    <label for="notebook1_4"><img src="http://forumstatic.ru/files/0018/3d/c7/63698.png"></label>
    <input type="radio" name="notebook1" id="notebook1_5">
   <label for="notebook1_5"><img src="http://forumstatic.ru/files/0018/3d/c7/96904.png"></label>
    <input type="radio" name="notebook1" id="notebook1_6">
    <label for="notebook1_6"><img src="http://forumstatic.ru/files/0018/3d/c7/10155.png"></label>
    
<div><table><tbody><tr style="border: 2px double #841511; background-color:#dddddd">
<td style="width: 310px">
<center>
<div class="caps2" style="width: 200px;  background-color: #dddddd;">
<b> КЛАН УЧИХА </b>
</div>

<br><i>Клан, захвативший власть в Конохе. По-сути, является единственным кланом на территории оккупированной деревни, не считая гражданских.</i></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;"> 
Учиха Фугаку - хокаге <br>
Учиха Микото <br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=12"><b>Учиха Саске</b></a> - нукенин <br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=16"><b>Учиха Итачи</b></a> - нукенин. Акацки <br>
Учиха Обито - нукенин. Акацки <br>
Учиха Изуми <br>
Учиха Кагами <br>
Учиха Нака <br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=20"><b>Учиха Исаму</b></a> <br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=25"><b>Учиха Тсую</b></a> <br>
-Свободный слот- <br>
-Свободный слот- <br>
-Свободный слот- <br>
-Свободный слот- <br>
-Свободный слот- <br>
-Свободный слот- <br>
-Свободный слот- <br>
-Свободный слот-
</div></td></tr></tbody></table>

<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd; margin: 10px 0px 7px 0px"><b>КЛАН ХЬЮГА</b></div>
<i>Некогда могущественный клан, обладающий уникальными глазами, был почти весь истреблен в следствии нападения Учиха. Вынуждены были бежать вместе с остальными шиноби деревни.</i><br></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Хьюга Ханаби <br>
Хьюга Хиаши<br>
Хьюга Хината <br>
Хьюга Неджи<br>
<br>
<br>
<br>
<br>
</div></td></tr></tbody></table>

<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd;margin: 10px 0px 7px 0px"><b>КЛАН АБУРАМЕ</b></div><i>Лучшие разведчики, клан Абураме, имеющий под своим контролем специальных жуков, покинул селение вслед за остальными.</i></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Абураме Шиби<br>
Абураме Шино<br>
Абураме Тацума<br>
Абураме Мито<br>
<br>
<br>
<br>
<br>
<br>
</div></td></tr></tbody></table>

<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd;margin: 10px 0px 7px 0px"><b>КЛАН ИНУЗУКА</b></div><i> Немногочисленные шиноби этого клана, оставшиеся в живых, вместе со своими собаками находятся в рядах повстанцев.</i></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Инузука Киба<br>
Инузука Хана<br>
Инузука Цуме<br>
<br>
<br>
<br>
<br>
<br>

 </div></td></tr></tbody></table>

<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd; margin: 10px 0px 7px 0px"><b>КЛАН ХАРУНО</b></div><i> Сакура, присоединившись к своему учителю - Какаши, покинула деревню. Местонахождение её родителей неизвестно.</i>
</center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;"><a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=33"><b>Харуно Сакура</b></a><br>
Харуно Хизаши<br>
Харуно Мебуки <br>
<br>
<br>
<br>
<br>
</div></td></tr></tbody></table>

<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd; margin: 10px 0px 7px 0px"><b>КЛАН НАРА</b></div>
<i>Лучшие тактики и стратеги, незаменимая часть отряда повстанцев.</i></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px; ">Нара Энсуи<br>
Нара Шикаку<br>
Нара Шикамару<br>
Нара Сузаку<br>
<br>
<br>
<br>
<br>
</div></td></tr></tbody></table>


<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd;margin: 10px 0px 7px 0px"><b>КЛАН АКИМИЧИ</b></div> <i>Клан, специализирующийся на ниндзюцу, позволяющих увеличивать размеры их тела или отдельных конечностей. Ударная сила повстанцев.</i></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">
Акимичи Чоуджи<br>
Акимичи Чоуза<br>
<br>
<br>
<br>
<br>
</div></td></tr></tbody></table>

<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px; background-color: #dddddd;margin: 10px 0px 7px 0px"><b>КЛАН ЯМАНАКА</b></div><i> Отличные сенсоры, способные проникать в разум и воспоминания противника. Связной центр отряда повстанцев. </i></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;"><a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=24"><b>Яманака Ино</b></a><br>
Яманака Иноичи<br>
Яманака Фуу<br>
<br>
<br>
<br>
<br>
</div></td></tr></tbody></table>



<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 310px"><center><div class="caps2" style="width: 200px;background-color:#dddddd;margin: 10px 0px 7px 0px"><b>ПРОЧИЕ ПЕРСОНАЖИ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Хатаке Какаши<br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=19"><b>Узумаки Наруто</b></a><br>
Джирайя<br>
Сенджу Тсунаде<br>
Камизуки Изумо<br>
Майто Гай<br>
Митараши Анко<br>
Морино Ибики<br>
Намиаши Райдо<br>
Рок Ли<br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=4"><b>Сай</b></a><br>
Сарутоби Асума<br>
Сарутоби Конохамару<br>
Шизуне<br>
Тентен<br>
Умино Ирука<br>
Ямато<br>
Ямаширо Аоба<br>
Юхи Куренай<br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=13"><b>Мизучи Рена</b></a></div></td></tr></tbody></table>


    </div>


   <div><table><tbody>
<tr style="border: 2px solid #841511; background-color: #dddddd">
<td style="width: 260px">
<center>
<div class="caps3" style="width: 200px; background-color: #dddddd;margin: 10px 0px 7px 0px"><b>СЕМЬЯ КАДЗЕКАГЕ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;"> 
Гаара - кадзекаге, джинчуурики однохвостого<br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=48"><b>Темари</b></a> <br>
Канкуро<br>
</div></td></tr></tbody></table>



<table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 260px"><center><div class="caps2" style="width: 200px;background-color:#dddddd;margin: 10px 0px 7px 0px"><b>ПРОЧИЕ ПЕРСОНАЖИ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Баки<br>
Чиё<br>
Акасуна на Сасори - нукенин. Акацки<br>
Матсури<br>
Маки<br>
Реки<br>
Сари<br>
</div></td></tr></tbody></table>


    </div>


  <div><table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 250px"><center><div class="caps2" style="width: 150px;background-color:#dddddd;margin: 10px 0px 7px 0px"><b>ПРОЧИЕ ПЕРСОНАЖИ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">
<a htref=http://eyeofthestorm.f-rpg.ru/profile.php?id=47><b> Теруми Мей</b></a> - мизукаге<br>
Ао<br>
Чоуджуро<br>
<a htref=http://eyeofthestorm.f-rpg.ru/profile.php?id=14><b>Хозуки Суйгетсу</b></a> - нукенин.<br>
Хошигаке Кисаме - нукенин. Акацки<br>
Суйрен<br>
Джунсай<br>
Куссаку<br>
Тецу<br>
Утаката - джинчурики шестихвостого<br>
</div></td></tr></tbody></table>

    </div>


   <div><table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 250px"><center><div class="caps2" style="width: 200px;background-color:#dddddd;margin: 10px 0px 7px 0px"><b>ПРОЧИЕ ПЕРСОНАЖИ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Эй - четвертый райкаге<br>
Ши<br>
Ацуи<br>
Додай<br>
Даруи<br>
Кей<br>
Каруи<br>
Кира Би - джинчурики восьмихвостого<br>
Мабуи<br>
Омои<br>
Самуи<br>
Сарутоби Асума<br>
Нии Югито - джинчурики двухвостого</div></td></tr></tbody></table>

    </div>


<div><table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 250px"><center><div class="caps2" style="width: 200px;background-color:#dddddd;margin: 10px 0px 7px 0px"><b>ПРОЧИЕ ПЕРСОНАЖИ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Ооноки - тсучикаге<br>
Акацучи<br>
Дейдара - нукенин. Акацки<br>
Гари<br>
Катсучи<br>
Куроцучи<br>
</div></td></tr></tbody></table>


    </div>


<div> <table><tbody><tr style="border: 2px solid #841511; background-color: #dddddd"><td style="width: 250px"><center><div class="caps2" style="width: 200px;background-color:#dddddd;margin: 10px 0px 7px 0px"><b>ПРОЧИЕ ПЕРСОНАЖИ</b></div></center></td><td><div class="text2" style="padding: 10px 30px 10px 30px;">Хидан - нукенин. Акацки<br>
Какузу - нукенин. Акацки<br>
Конан - нукенин. Акацки<br>
Нагато - нукенин. Акацки<br>
Зецу - нукенин. Акацки<br>
Хотару<br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=41"> <b> Орочимару</b></a> - нукенин<br>
Узумаки Карин<br>
Джууго - нукенин. Логово Орочимару<br>
Якуши Кабуто - нукенин. Логово Орочимару<br>
<a href="http://eyeofthestorm.f-rpg.ru/profile.php?id=2"> <b> Юки Наото</b></a> - нукенин<br>
</div></td></tr></tbody></table>

</div>
</div>