<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
<style type="text/css">
#thtabcontainer { width: 600px; height: 449px; background-image: url(http://funkyimg.com/i/2nWXB.png); position: absolute; }
.nameplayer { position: absolute; left: 10px; top: 26px; width: 147px; height: 21px; }
.photoplayer { position: absolute; left: 41px; top: 83px; width: 122px; height: 122px; border: 1px solid#284; }
.power1player { position: absolute; left: 41px; top: 225px; width: 122px; height: 18px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px; }
.powersplayer { position: absolute; left: 41px; top: 245px; 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;}
.infoplayerimg { 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);}
.infoplayer { position: absolute; left: 40px; top: 40px; width: 260px; border: 0px solid#284; font: 12px calibri; letter-spacing: 1px;}
.titleplayer { position: absolute; left: -40px; top: 200px; width: 386px; height: 99px; border: 2px solid#284; font: 12px calibri; letter-spacing: 1px; 
overflow: auto;}
.giftplayer { position: absolute; left: 0px; top: 50px; width: 386px; height: 340px; border: 2px solid#284; font: 12px calibri; letter-spacing: 1px;}
.prizeplayer { position: absolute; left: 0px; top: 50px; width: 386px; height: 340px; border: 2px solid#284; font: 12px calibri; letter-spacing: 1px;}



.tabs { position: relative; height: 500px; width: 500px; clear: both; }
.tab label { display: block; width: 10px; height: 60px; background: none; color: #030303; padding: 5px;   text-transform: uppercase; letter-spacing: 1px; text-align: center; font: 10px calibri; position: absolute; left: -37px; top: 75px; border-radius: 10px 0 0px 10px; }
.tab [type=radio] { display: none; }

[type=radio]:checked ~ label { background: #DBDF8A; color: #FFF; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; opacity: 1; filter: alpha(opacity=100); }
.thcontent { width: 389px; height: 390px; position: absolute; top: 35px; left: 147px; float: right; right: 12px; bottom: 12px; text-align: justify; opacity: 0; filter: alpha(opacity=0); border: 2px 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 style="width: 630px; height: 450px;">
<div id="thtabcontainer">
<div class="nameplayer">
ИМЯ ФАМИЛИЯ</div>
<div class="photoplayer">
<img src="http://placehold.it/122x122">
</div>
<div class="power1player">
<b><i>Способность, А</i></b></div>
<div class="powersplayer">
<i>Способность, ?<br>
Способность, ?</i></div>
<div class="tabs">
  <div class="tab">
     <input type="radio" id="tab-1" name="tab-group-1" checked>
     <label for="tab-1">I</label><div class="thcontent">
<div class="musicplayer">
<object type='application/x-shockwave-flash' data='http://flash-mp3-player.net/medias/player_mp3_mini.swf' width='245px' height='12px'> 
<param name='movie' value='http://flash-mp3-player.net/medias/player_mp3_mini.swf'>
<param name='bgcolor' value='#c4bda0'>
<param name='FlashVars' value='mp3=https://cs3-5v4.vk-cdn.net/p14/197c546d0d80f0.mp3'></object></div>
<div class="infoplayerimg"><div class="infoplayer">
описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажаописание персонажа описание персонажа описание персонажа описание персонажа описание персонажа описание персонажа
<div class="titleplayer">
<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"> 

</div></div> </div> </div>
<div class="tab">
     <input type="radio" id="tab-2" name="tab-group-1">
     <label for="tab-2" style="margin-top: 80px;">II</label><div class="thcontent">

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

</div>

  </div>
 <div class="tab">
     <input type="radio" id="tab-3" name="tab-group-1">
     <label for="tab-3" style="margin-top: 160px;">III</label><div class="thcontent">
<div class="prizeplayer">
<div style="width: 180px; height: 65px; float: left;  background: #fff; border-radius: 10px; margin-right: 3px; margin-bottom: 3px; padding: 3px;"><img style="float: left; margin-right: 5px;" src="http://funkyimg.com/i/2gi59.png">текст текст текст<div style="text-align: right; font-size: 10px;"><i>подпись автора</i></div>
 

</div>



     </div>
 </div>

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