<!--HTML-->

<style type="text/css">.altairs {
    top: 126px;
    left: 20px;
    position: relative;
    width: 450px;
    height: 300px;
}
.topic011 { width: 561px; height: 560px; display: block; background: url(http://funkyimg.com/i/2c5uu.png) top no-repeat;} 

.altair {
float: left;
}

.fonttext {
 width: 73px;
    font-weight: bold;
    color: #d0c5a0;
    font-family: bebas neue;
    font-size: 22px;
    text-align: center; 
}

.altair label {
    display: block;
    width: 40px;
    padding: 7px;
    left: 80px;
    top: -30px;
    color: #72583b;
    position: relative;
    margin-right: 30px;
    font-family: arial;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
}

.altair [type=radio] {
display: none;  
}

.rigel {position: absolute;
top: 40px;
    bottom: 0px;
    right: 0px;
    background-color: rgb(255, 250, 228);
    width: 482px;
     height: 310px;
    border-radius: 30px;
text-align: justify;
font-family: verdana;
font-size: 9px;
    overflow: auto;}
.txth1{      width: 402px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    background-color: #F3E6B8;
    font-family: verdana;
    font-size: 9px;}
.nagrad{     width: 175px;
    margin-right: 260px;
    height: 280px;
    overflow: auto;
    background-color: #F3E6B8;}
.podarki{
         margin-right: 2px;
    margin-left: 6px;
    margin-top: -5px;
    height: 50px;
    overflow: auto;
    background-color: #F3E6B8;}
.plsssh{
   width: 272px;
    margin-left: 200px;
        margin-top: -280px;
    height: 280px;
        overflow: auto;
        background-color: #F3E6B8;}
.infolz{background-color: rgb(243, 230, 184);
    font-weight: bold;
    color: #A79C77;
    font-family: bebas neue;
    font-size: 22px;
    text-align: center;}
.kartinka{
    width: 100px;
    height: 100px;
    margin-left: 413px;
    margin-top: 52px;
    position: absolute;}

.rigel::-webkit-scrollbar { width: 2px; height: 2px; }
.rigel::-webkit-scrollbar-track { background-color: #EBEBE9; }
.rigel::-webkit-scrollbar-thumb { background-color: #DBC19E; }

[type=radio]:checked ~ label {

z-index: 2;
}

[type=radio]:checked ~ label ~ .rigel {
z-index: 1;
}</style>

<div class="topic011">


<br>
<div class="kartinka"><img src="http://placehold.it/100x100" style="width: 100px; border-radius: 100%; "></div>

<center>
<div class="altairs">

<div class="altair">
<input type="radio" id="tab-1" name="tab-group-1" checked="">
<label for="tab-1"><img src="http://funkyimg.com/i/2c7Hn.png"></label>
<div class="rigel"><center>
<div class="txth1">цитата про вашего персонажа<br>
. . . . . .  </div><br> 
<table style="width: 420px;    margin-left: -10px;">
    <tr>
        <td><div class="fonttext">постов</div>
<div style=" width: 73px;
    height: 50px;
    font-size: 26px;
    align-content: center;
font-family: bebas neue;
    padding-top: 20px;
    text-align: -webkit-center; background: url(http://funkyimg.com/i/2c7H9.png);">00</div></td>
 <td><div class="fonttext">наград</div>
<div style="width: 73px;
    height: 50px;
    font-size: 26px;
font-family: bebas neue;
    align-content: center;
    padding-top: 20px;
    text-align: -webkit-center; background: url(http://funkyimg.com/i/2c7H9.png);">00</div></td>
        <td><div class="fonttext">билетов</div>
<div style="width: 73px;
    height: 50px;
    font-size: 26px;
font-family: bebas neue;
    align-content: center;
    padding-top: 20px;
    text-align: -webkit-center; background: url(http://funkyimg.com/i/2c7H9.png);">00</div></td>
 <td><div class="fonttext">эпизодов</div>
<div style="width: 73px;
    height: 50px;
    font-size: 26px;
font-family: bebas neue;
    align-content: center;
    padding-top: 20px;
    text-align: -webkit-center; background: url(http://funkyimg.com/i/2c7H9.png);">00</div></td>
        <td><div class="fonttext">закрытых</div>
<div style="width: 73px;
    height: 50px;
    font-size: 26px;
font-family: bebas neue;
    align-content: center;
    padding-top: 20px;
    text-align: -webkit-center; background: url(http://funkyimg.com/i/2c7H9.png);">00</div></td>
    </tr>
</table>
<table>
    <tr>
        <td><div class="infolz">профессия</div></td>
        <td><div class="infolz">район</div></td>
        <td><div class="infolz">ориентация</div></td>
    </tr>
    <tr>
        <td><div class="infolz">пара/сп</div></td>
        <td><div class="infolz">дата рождения</div></td>
        <td><div class="infolz">знак зодиака</div></td>
    </tr>
  <tr>
        <td><div class="infolz">огурец/помидор</div></td>
        <td><div class="infolz">марвел/диси</div></td>
        <td><div class="infolz">факультет гп</div></td>
    </tr>
</table><div class="podarki"><img src="http://s3.uploads.ru/cNr8D.png" title="первый подарок от амс"> 
</center>
</div></div>






<div class="altair">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2"><img src="http://funkyimg.com/i/2c7Lo.png"></label>
<div class="rigel"> <div style=" 
    text-transform: ;
    font-weight: bold;
    color: #d0c5a0;
    font-family: bebas neue;
    font-size: 22px;
    text-align: center; ">Награды                 и                 плашки</div>
<div class="nagrad"><img src="http://funkyimg.com/i/2c8Am.png" title="за регистрацию"> 
</div>



<div class="plsssh"><img src="http://funkyimg.com/i/2c3Ws.png"> </div>

</div></div>


<div class="altair">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3"><img src="http://funkyimg.com/i/2c7Lp.png"></label>
<div class="rigel">
 <br>
<div style="height: 290px; overflow: auto;      
    width: 480px;"><center>
<div class="fonttext">New York</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div class="fonttext">The Bronx</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div class="fonttext">Queens</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div class="fonttext">Manhattan</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div class="fonttext">Staten Island</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div class="fonttext">Brooklyn</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
</center>

</div></div>


<br>



</div></div></div>
</div></div>