<!--HTML-->
<style type="text/css">
.goldborder {
    background-color: #372314;
    border: 3px solid #372314;
    position: relative;
    width: 500px;
}
.goldhead {
    background-image: url("http://36.media.tumblr.com/8e4db99021d098c205d25f6d8e1f08cb/tumblr_nsdeo5uTKk1r8tbm6o3_500.png");
    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='rules'>● Внешности придерживаются на <b>три</b> дня.<br>
● Внешности для "нужных" не придерживаются.<br>
● Выбранная внешность должна соответствовать полу, расе и - обязательно! - возрасту Вашего персонажа.<br>
● За одним игроком придерживается только одна внешность.<br>
</div>
<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'>A - B - C</div><br>
<div class="style1">Chace Crawford by <a  href="http://helysium.f-rpg.ru/profile.php?id=5">Trivette</a></div>
<div class="style1">Christian Bale by <a  href="http://helysium.f-rpg.ru/profile.php?id=3">Morgan Torn</a></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>
</td>
<td>
<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'>Thomas Davenport by <a  href="http://helysium.f-rpg.ru/profile.php?id=4">Aláia</a></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'>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>
</td>
<td>
<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'>За АМС: <br>
- Chris Pratt<br>
- James Edward Quaintance<br>
- Hannah Snowdon<br>
- Margo Robbie<br>
- Elizabeth Olsen<br>
- Tyler Posey<br>
- Aaron Taylor-Johnson
- Alexandra Park<br>
- Martin Freeman<br>
- Stanley Tucci<br>
- anne hathaway<br> 
-Matthew Gray Gubler за друид
</div></div> 
</div>

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