<!--HTML-->
<style type="text/css">
.goldborder {
    background-color: #372314;
    border: 3px solid #372314;
    position: relative;
    width: 500px;
}
.goldhead {
    background-image: url("https://38.media.tumblr.com/92ec8efb0b58f7cc3b7f7d17ebfc1d64/tumblr_nl7mtyCoyw1qjouuqo1_500.gif");
    border-bottom: 3px solid #372314;
    height: 200px;
    width: 500px;
}
.gold {
    border-radius: 200px;
    filter: grayscale(100%);
    height: 200px;
    left: 298px;
    position: absolute;
    top: 3px;
    width: 200px;
}
.goldwordsbg {
    height: 170px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 15px;
    transform: scale(0.5);
    transition: all 1s ease-in-out 0s;
    width: 200px;
}
.gold:hover .goldwordsbg {
    left: -280px;
    opacity: 1;
    position: absolute;
    top: 20px;
    transform: scale(1);
    transition: all 1s ease-in-out 0s;
}
.goldwords {
    background-color: #222;
    color: #efefef;
    font-family: arial;
    font-size: 9px;
    height: 26px;
    letter-spacing: 3px;
    line-height: 30px;
    margin-bottom: 6px;
    text-align: center;
    width: 250px;
}
.lavie {
    clear: both;
    height: 405px;
    position: relative;
    width: 480px;
}
.myageagain {
    background-color: #D7D3D0;
    height: 275px;
    overflow: auto;
    padding: 25px;
    position: relative;
    width: 430px;
}

.rules {
    background-color: #D7D3D0;
    height: 80px;
    overflow: auto;
    padding: 25px;
    position: relative;
    width: 430px;
}

.style01 {
  font-family: Open Sans Condensed;
  font-size: 20px; 
  color:#372314;
  text-align: center; 
}

.style1
{  font-family: Raleway;
    font-size: 12px;
    line-height: 100%;
}
.abused {
    float: left;
}
.abused label {
    background-color: #D7D3D0;
    border: medium none;
    color: #222;
    display: block;
    font-family: Garamond;
    font-size: 16px;
    height: 25px;
    left: 12px;
    line-height: 20px;
    margin-right: 10px;
    position: relative;
    text-align: center;
    top: 22px;
    width: 145px;
}
.abused [type="radio"] {
    display: none;
}
.used {
    color: black;
    font-size: 11px;
    height: 325px;
    left: 0;
    line-height: 100%;
    overflow: auto;
    padding: 0;
    position: absolute;
    text-align: justify;
    top: 64px;
    width: 480px;
}
.abused [type="radio"]:checked ~ label {
    background-color: #daf093;
    z-index: 99;
}
.abused [type="radio"]:checked ~ label ~ .used {
    z-index: 98;
}

    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:active { text-decoration: none; }

</style>

<center><div class='goldborder'><div class='goldhead'><div class='gold'><div class='goldwordsbg'></div></div></div><div class='quotes'><br>Наши имена определяют то, какими мы будем, а мы, в свою очередь, определяем то, какими будут наши имена.</div><br>
<div class='lavie'><div class='voggreen'></div>

<div class="abused"><input type="radio" id="abused-1" name="abused-group-1" checked><label for="abused-1">Имена</label>
<div class="used""><div class='myageagain'>
<table><tr><td><div class='style01'>Мужские</div><br><br>
<div class='style01'>A - B - C</div><br>
<div class='style01'>D - E - F</div><br>
<div class='style01'>G - H - I</div><br>
<div class='style01'>J - K - L</div><br>
<div class='style01'>M - N - O</div><br>
<div class="style1"><a  href="http://helysium.f-rpg.ru/profile.php?id=3">Morgan</a> | Морган</div><br>
<div class='style01'>P - Q - R - S</div><br>
<div class='style01'>T - U – V</div><br>
<div class='style01'>W - X - Y - Z</div><br>
William | Уильям
</td>
<td><div class='style01'>Женские</div><br><br>
<div class='style01'>A - B - C</div><br>
<div class='style01'>D - E - F</div><br>
<div class='style01'>G - H - I</div><br>
<div class='style01'>J - K - L</div><br>
<div class='style01'>M - N - O</div><br>
<div class='style01'>P - Q - R - S</div><br>
<div class='style01'>T - U – V</div><br>
<div class='style01'>W - X - Y - Z</div><br>
</td></tr></table> 




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

<div class="abused"><input type="radio" id="abused-2" name="abused-group-1"><label for="abused-2">Фамилии</label><div class="used"><div class='myageagain'>

<table><tr><td><div class='style01'>Мужские</div><br><br>
<div class='style01'>A - B - C</div><br>
<div class='style01'>D - E - F</div><br>
<div class='style01'>G - H - I</div><br>
<div class='style01'>J - K - L</div><br>
<div class='style01'>M - N - O</div><br>
<div class='style01'>P - Q - R - S</div><br>
<div class='style01'>T - U – V</div><br>
<div class="style1"><a  href="http://helysium.f-rpg.ru/profile.php?id=3">Torn</a> | Торн</div><br>
<div class='style01'>W - X - Y - Z</div><br>
</td>
<td><div class='style01'>Женские</div><br><br>
<div class='style01'>A - B - C</div><br>
<div class='style01'>D - E - F</div><br>
<div class='style01'>G - H - I</div><br>
<div class='style01'>J - K - L</div><br>
<div class='style01'>M - N - O</div><br>
<div class='style01'>P - Q - R - S</div><br>
<div class='style01'>T - U – V</div><br>
<div class='style01'>W - X - Y - Z</div><br>
</td></tr></table> 

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

<div class="abused"><input type="radio" id="abused-3" name="abused-group-1"><label for="abused-3">Придержанные</label><div class="used"><div class='myageagain'>.
</div></div> 
</div>

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