Код:
<!--HTML--><center>

<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style type="text/css">

.igroki1 {
position: relative;  
width: 500px;
height:  470px;
 box-shadow: 0 0 2px; border-top: 1px solid #93695d;  border-bottom: 1px solid #93695d; border-left: solid 4px #93695d; border-right: solid 4px #93695d; border-radius: 5px; padding: 9px; background-color: transparent; "
  border-bottom: 3px solid #1f364f; padding: 10px;background-image:url(http://savepic.su/5405108.jpg);
}

.igroki2 {float: left; padding-left:55px;}

.igroki2 label {display: block;
width: 75px; text-align: center;
font-family: calibri; 
color: #efefef; margin-right: 5px;
 font-family: georgia; font-size: 10px; text-transform: uppercase;
letter-spacing: 1px;
background: #4f3127;
padding: 5px;
border: 0px solid #ccc;
position: relative;
top: 5px;
left: 7px;}

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

.igroki3 {
position: absolute;
top: 55px;
left: 10px;
width: 480px; 
height: 400px;
background: #d7cdab;  border-top: double #302715 3px; border-bottom: double #302715 3px;
padding: 10px;}

[type=radio]:checked ~ label {color: #D7D7D7; border-bottom: 0px solid white; z-index: 2;}

[type=radio]:checked ~ label ~ .igroki3 {
z-index: 1;
}</style><div class="igroki1">
 
<div class="igroki2">
<input type="radio" id="igroki2-1" name="igroki2-group-1" checked="">
<label for="igroki2-1">RESIDENT EVIL</label>
<div class="igroki3">
<div style="padding-top: 10px; width: 480px; font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; height: 380px; overflow: auto; text-align: justify; text-transform: lowercase;"> 

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">A - B - C - D - E </div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

-----

</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">F - G - H - I - J </div><br>
Jessica Sherawat (Джессика Шерават)
<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;">

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">K - L - M - N - O</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;">

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">P - Q - R - S - T</div><br>
Piers Nivans (Пирс Ниванс)
<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">U - V - W - X - Y - Z</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px; text-align: center;"> 

---<br>
</div></div>
</div>
</div>
 
<div class="igroki2">
<input type="radio" id="igroki2-2" name="igroki2-group-1" checked="">
<label for="igroki2-2">ANOTHER FANDOMS</label>
<div class="igroki3">
<div style="padding-top: 10px; width: 480px; font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; height: 380px; overflow: auto; text-align: justify; text-transform: lowercase;"> 

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">A - B - C - D - E </div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

-----

</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">F - G - H - I - J </div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;">

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">K - L - M - N - O</div><br>
<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;">
---

</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">P - Q - R - S - T</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">U - V - W - X - Y - Z</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

Xian Mei (Сянь Мэй)
<br>
</div></div>
</div>
</div>
 
<div class="igroki2">
<input type="radio" id="igroki2-3" name="igroki2-group-1" checked="">
<label for="igroki2-3">DEAD CHARACTERS</label>
<div class="igroki3">
<div style="padding-top: 10px; width: 480px; font-family: arial; color: #121212; font-size: 10px; letter-spacing: 1px; line-height: 90%; height: 380px; overflow: auto; text-align: justify; text-transform: lowercase;"> 

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">A - B - C - D - E </div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

-----

</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">F - G - H - I - J </div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;">

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">K - L - M - N - O</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;">

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">P - Q - R - S - T</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px;"> 

---
</div><br>

<div style="width:480px;background-color:#4c2e24;font-weight:bold;line-height:125%;border-bottom: 4px solid #83735b;font-size:15px;font-family:geneva;color:#FFF;text-shadow: #000 1px 1px 2px;text-transform:uppercase; text-align: center;">U - V - W - X - Y - Z</div><br>

<div style="width: 480px;text-align:justify;text-transform:lowercase; font-family: arial; font-size:10px; color: #000; letter-spacing: 1px; text-align: center;"> 

---<br>
</div></div>
</div>
</div>


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