<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
<style type="text/css">
.stranicafon { width: 660px; height: 431px; background-image: url(http://funkyimg.com/i/2oayT.png);  z-index: 1; }
.photoplayer { position: absolute; margin-left: 26px; margin-top: 44px; width: 258px; height: 344px; border: 0px solid#284;}
.photoplayer1 { position: absolute; width: 258px; height: 344px; border: 0px solid#284; z-index: 2; .9s;-moz-transition-duration: .9s;-webkit-transition-duration: .9s;-o-transition-duration: .9s;  opacity: 0.0; }
.photoplayer1:hover {opacity: 1.00;}
.ipadrs  { position: absolute; width: 255px; top: 313px; height: 31px; background-image: url(http://funkyimg.com/i/2oaEs.png); }
.prizeplayer { position: absolute; width: 258px; height: 100px; top: 20px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px; overflow-x: auto;  white-space: nowrap; text-align: left; }
.giftplayer { position: absolute; width: 258px; top: 170px; height: 100px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px; overflow-x: auto;  white-space: nowrap; text-align: left; }
.titleplayer { position: absolute;  top: 6px; width: 248px; height: 150px; border-bottom: 1px solid#284; font: 12px calibri; letter-spacing: 1px; overflow: auto; }
.nameplayer { position: absolute; margin-top: -18px; width: 258px; height: 15px; border: 0px solid#284;   }
.avaplayer  { position: absolute; width: 100px; height: 120px; border: 3px solid#284; float: left; background: #284; text-align: center; font-family: Megrim; text-transform: uppercase;}
.quoteplayer { position: absolute; margin-left: 107px; height: 125px; width: 145px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px; text-align: right;}
.lvlplayer { position: absolute;  top: 166px; width: 248px; height: 150px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px; overflow: auto;}
.infoplayer { position: absolute; margin-left: 00px; margin-top: 130px; height: 200px; width: 245px; padding: 5px; border: 0px solid#284; font: 12px Segoe Print; letter-spacing: 1px;}
.lable { width: 258px; position: absolute; text-align: center; margin-top: -15px; font-family: Megrim; text-transform: uppercase;}
.lable1 { width: 258px; position: absolute; text-align: center; margin-top: 155px; font-family: Megrim; text-transform: uppercase;}
.power1player { position: absolute; margin-left: 11px; margin-top: 125px; width: 122px; height: 18px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px;  }
.powersplayer { position: absolute; width: 122px; height: 18px; border: 0px solid#284; font: 10px calibri; letter-spacing: 1px; color: #aca5a8; } /*если способности еще не выкупили */
.musicplayer { position: absolute; left: 110px; top: 28px; width: 245px; height: 12px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px;}
.quoteplayerimg { position: absolute; left: 0px; top: 50px; width: 360px; height: 263px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px;background-image: url(http://funkyimg.com/i/2nX8H.png);}




.tabs { position: relative; height: 300px; width: 300px; clear: both; margin-right: -342px;}
.tab label { display: block; width: 30px; height: 25px; background: #fff; color: #030303; padding: 5px;   text-transform: uppercase; letter-spacing: 0.5px; text-align: center; font: 10px calibri; position: absolute; left: 90px; top: 373px; border-radius: 0px 0px 15px 15px; }
.tab [type=radio] { display: none; }
[type=radio]:checked ~ label { background: #DBDF8A;  height: 35px; color: #FFF; border-bottom: 0px solid#000; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; opacity: 1; filter: alpha(opacity=100); }
.thcontent { width: 255px; height: 340px; position: absolute; top: 35px;  float: right; right: 12px; bottom: 10px; text-align: justify; opacity: 0; filter: alpha(opacity=0); border: 0px solid#DBDF8A; }
[type=radio]:checked ~ label { background: #DBDF8A; color: #030303; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }

</style>



<center><div class="stranicafon">
<div class="photoplayer">
<div class="photoplayer1" style="background-image: url(http://placehold.it/258x344)">
<div class="prizeplayer"><img src="http://funkyimg.com/i/2gi59.png" title="альтернативный текст">
</div>
<div class="giftplayer"><img src="http://funkyimg.com/i/2gi59.png" title="за регистрацию"> 
</div>

 <div class="ipadrs"></div>
</div>
<img src="http://placehold.it/258x344"></div>



<div id="thtabcontainer">
<div class="tabs">
<div class="tab">
     <input type="radio" id="tab-1" name="tab-group-1" checked>
     <label for="tab-1"></label><div class="thcontent">
<div class="nameplayer"><i>♫ саундрек персонажа</i></div>
<div class="avaplayer"><img src="http://placehold.it/100x100">
<br>сторона</div>
<div class="quoteplayer"><i>цитата</i></div>
<div class="infoplayer">описание персонажа </div>
</div>
</div>
<div class="tab">
     <input type="radio" id="tab-2" name="tab-group-1">
     <label for="tab-2" style="margin-left: 40px;"></label><div class="thcontent">
<div class="lable">vip</div>
<div class="titleplayer"><center>
<img src="http://funkyimg.com/i/2oh5W.png"> 
 </center>
</div>
<div class="lable1">achievements</div>
<div class="lvlplayer"><center> 
<img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png"> <img src="http://funkyimg.com/i/2giwK.png">   </center>
</div>


</div></div>

<div class="tab">
     <input type="radio" id="tab-3" name="tab-group-1">
     <label for="tab-3" style="margin-left: 80px;"></label><div class="thcontent">на данный момент коллекции недоступны</div></div>

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