[html]
<style type="text/css">
.inventorybg {
background: #F9F9F9;
background-repeat: repeat;
width: 560px;
height: auto;
padding: 10px;
height: 600px;
border: solid 1px #eaeaea;
margin-left: 45px;
}
.inventorybg2 {
width: 350px;
margin-left: 0px;
background: #F9F9F9;
padding: 20px;
margin-bottom: 10px;
padding-bottom: -30px;
height: 380px;
overflow: scroll;
border: solid 1px #eaeaea;
}
.inventorybg3 {
width: 100%;
background: #404040;
padding: 20px;
margin-bottom: 10px;
}
.inventoryicon {
border: #F9F9F9 8px solid;
margin-right: 0px;
width: 95%;
}
.inventoryname {
font-family: "pt sans";
color: #dedede;
font-size: 25px;
padding: 5px;
width: 300px;
}
.inventoryparty {
background-color: #636363;
border: solid 1px #eaeaea;
margin: 1px;
margin-top: 4px;
font: 10px Muli;
color: #555555;
text-align: center;
text-transform: uppercase;
padding: 5px 0px;
line-height: 10px;
height: 40px;
width: 45px;
}
.inventoryimage {
height: 165px;
width: 315px;
border: double 3px #eaeaea;
padding: 5px;
margin: 5px auto;
}
.inventorybasic {
background: #f0eded;
padding: 10px;
border: #e3e3e3 3px double;
width: 129px;
margin: 5px auto;
text-transform: uppercase;
text-align: center;
font-family: pt sans;
max-width: 129px;
margin-left: 30px;
}
.itemcontainer {
padding: 15px;
background: #f0f0f0;
margin: 0px 0px 5px 0px;
font-size: 10px;
height: auto;
max-height: 70px;
overflow-y: auto;
color: #686868;
border: 1px solid #eaeaea;
}
.staffheading {
font-family: pt sans;
margin: 5px;
font-size: 20px;
}
*{box-sizing:border-box}
.tabs {
margin: 0 auto;
position: relative;
}
section {
display: none;
position: absolute;
top: 0;
left: 110px;
width: 427px;
height: 380px;
overflow-y: scroll;
border: solid 1px #eaeaea;
background: #F9F9F9;
padding: 20px;
}
p {
margin: 0;
}
input {
display: none;
}
label {
display: block;
width: 100px;
padding: 10px;
cursor: pointer;
text-align: center;
font-family: 'pt sans';
font-size: 13px;
border-top: solid 5px #f6f6f6;
color: #eaeaea;
background-color: #404040;
}
input:checked + label {
text-align: center;
font-family: 'pt sans';
font-size: 13px;
border-top: solid 5px #f6f6f6;
color: #eaeaea;
background-color: #404040;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;
}
</style>
<div class="inventorybg">
<div class="inventorybg3">
<table>
<tbody>
<tr>
<td style="width:130px;"><div class="inventoryicon">
<img src="http://sg.uploads.ru/1KXc7.png" style="max-width:100%;">
</div></td>
<td>
<div class="inventoryname">РЭНДОМ ФОРТУНА</div>
<table><tbody><tr>
<td>
<div class="inventoryparty"><img src="http://pldh.net/media/pokexycons/712.png" title="Уильям ♂" style="max-width:100%;" class=""></div>
</td><td>
<div class="inventoryparty">?</div>
</td><td>
<div class="inventoryparty">?</div>
</td><td>
<div class="inventoryparty">?</div>
</td><td>
<div class="inventoryparty">?</div>
</td><td>
<div class="inventoryparty">?</div>
</td></tr></tbody></table>
</td>
</tr></tbody></table></div>
<div id="container">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">ЛИЧНОСТЬ</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">ИСТОРИЯ</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">ПРЕДМЕТЫ</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">ХРАНЕНИЕ</label>
<section id="content1">
<div class="inventoryimage"><img src="http://s5.uploads.ru/vH76t.gif" style="height:150px;width:300px;"></div>
<table><tbody><tr><td><div class="inventorybasic">19 ЛЕТ</div></td><td><div class="inventorybasic">166 см</div></td></tr><tr><td><div class="inventorybasic">ШАЛУР-СИТИ</div></td><td><div class="inventorybasic">SUN&MOON</div></td></tr></tbody></table>
</section>
<section id="content2">
<div class="staffheading">Z-КРИСТАЛЛЫ</div>
<hr>
<table><tbody>
<tr>
<td style="width: 10%;"><img style="max-width:32px;" src="http://cdn.bulbagarden.net/upload/f/f2/Bag_Icium_Z_Sprite.png"></td><td><div class="itemcontainer"><b>АЙСИУМ Z</b> позволяет использовать Арктическую Тюрьму.
</div></td>
</tr>
</tbody></table>
</section>
<section id="content3">
<div class="staffheading">ЕЩЁ НЕ ВСТРЕЧЕНЫ</div>
<hr>
<img src="http://pldh.net/media/pokecons_action/177.gif" title="Нату 10 lvl">
<img src="http://pldh.net/media/pokecons_action/474.gif" title="Поригон-Z 70 lvl">
<img src="http://pldh.net/media/pokexycons/714.png" title="Ноибат 1 lvl">
<img src="http://pokeliga.com/pictures/sprites/miniSM/767.gif" title="Вимпод 1 lvl">
<img src="http://pldh.net/media/pokexycons/570.png" title="Зоруа 1 lvl M">
<img src="http://pldh.net/media/pokecons_action/132.gif" title="Дитто 20 lvl">
<img src="http://pldh.net/media/pokecons_action/045.gif" title="Вайлюмп 15 lvl">
<img src="http://pldh.net/media/pokecons_action/131.gif" title="Лапрас 1 lvl">
<img src="http://pldh.net/media/pokexycons/547.png" title="Вимсикотт 1 lvl">
</section>
<section id="content4">
<div class="staffheading">ОСТРОВ МЕЛЕМЕЛЕ</div>
<hr>
Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6420#p197796">часть первая</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6419#p198011">часть вторая</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6419#p198157">часть третья</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6419#p198170">часть четвёртая</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6419#p200241">часть пятая</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6479#p200248">часть шестая</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6479#p200444">часть седьмая</a>
<br>Неудачное начало: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6479#p206522">часть восьмая</a>
<br>
<br>Странная, странная Алола: <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6422#p206937">часть первая</a>
</section>
</div>
</div>
</div>
</div>
</div>[/html]
