<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Oswald|Oranienbaum' rel='stylesheet' type='text/css'>
<style type="text/css">
#clean { width: 350px; height: 250px; position: relative; overflow: auto; }

#clean .bandit { -WEBKIT-TRANSITION: 1.5S ALL EASE-IN-OUT; -MOZ-TRANSITION: 1.5S ALL EASE-IN-OUT; O-TRANSITION: 1.5S ALL EASE-IN-OUT; position: absolute; top: 190px; left: 50px; opacity: 1; }

#clean:hover .bandit { -WEBKIT-TRANSITION: 1.5S ALL EASE-IN-OUT; -MOZ-TRANSITION: 1.5S ALL EASE-IN-OUT; O-TRANSITION: 1.5S ALL EASE-IN-OUT; top: 220px; left: 50px; opacity: 0.9; overflow: hidden;}

#clean .down {  opacity: 0; -webkit-transition: 1.5s all ease-in-out; -moz-transition: 1.5s all ease-in-out; o-transition: 1.5s all ease-in-out; top: 5px; position: absolute; left: 50px; }

#clean:hover .down { opacity: 1; -webkit-transition: 1.5s all ease-in-out; -moz-transition: 1.5s all ease-in-out; o-transition: 1.5s all ease-in-out; top: 15px; left: 50px; }

.band { width: 160px; padding-top: 4px; padding-bottom: 2px; background-color: #efefef; color: #472e4f; font-family:georgia;, sans; text-transform: uppercase; font-size: 9px; text-align: center; letter-spacing: 2pt; border-bottom: 3px solid #f6f6f6; }

.horses { width: 160px; padding-top: 3px; padding-bottom: 5px; background-color: #fff; font-family: calibri; color: #6d6d6d; text-transform: uppercase; text-align: center; font-size: 8px; letter-spacing: 1pt; }

.namebg { width: 355px; padding-top: 15px; padding-bottom: 15px; background-color: #fff; opacity: 0.85; }
.name { font-family: georgia; text-transform: lowercase; font-size: 25px; text-align: center;  padding-bottom: 5px; font-weight: bold; }
.nameinfo { font-family: cousine, sans;; font-size: 8px; color: #6d6d6d; text-transform: uppercase; text-align: center; letter-spacing: 2pt; }

.border { width: 450px; padding: 20px; background-color: #EFE8E2; border: 5px double #64262D; }
.infobox { width: 339px; height: 184px; background-color: #fff; background: rgba(255,255,255, 0.9); border: 3px solid #EFE8E2; padding: 5px; }
.appbox { width: 370px;padding: 15px; text-align: justify; background-color: #ffffff; border: 25px solid #FAF3ED; }

</style>

<center><div class="border">
<div style="width: 450px; background-image: url(http://funkyimg.com/i/2AhrF.png); height: 300px;">
<div id="clean">
<div class="down">
<div class="infobox">
<table cellpadding="2" cellspacing="2"><tr><td><div class="band"><a href="http://theywantsrevenge.rusff.ru/viewtopic.php?id=5">cюжет</a></div>
<div class="horses">ознакомьтесь с сюжетом нашего проекта </div></td>
<td><div class="band"><a href="http://theywantsrevenge.rusff.ru/viewtopic.php?id=6">занятые внешности</a></div>
<div class="horses">не забудьте отметить свою внешность</div></div></tr>

<tr><td><div class="band"><a href="http://theywantsrevenge.rusff.ru/viewtopic.php?id=11">список персонажей</a></div>
<div class="horses">займите свою роль</div></td>
<td><div class="band"><a href="http://theywantsrevenge.rusff.ru/viewtopic.php?id=20">личное звание</a></div>
<div class="horses">не забудьте заполнить лз</div></div></tr>

<tr><td><div class="band"><a href="http://theywantsrevenge.rusff.ru/viewtopic.php?id=25">выяснение отношений</a></div>
<div class="horses">самое время завязать новые знакомства</div></td>
<td><div class="band"><a href="http://theywantsrevenge.rusff.ru/viewtopic.php?id=7">занятость</a></div>
<div class="horses">укажите профессию вашего персонажа</div></div></tr></table>

</div></div>

<div class="bandit">
<div class="namebg"><div class="name"><MEMBERGOUPcolor>ВЫ ПРИНЯТЫ ГРЕГОРИЕМ ГОЙЛОМ</MEMBERGOUPcolor></div>
<div class="nameinfo">21.12.2017</div>
</div>

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

<div class="appbox">

Жизнь — так, как она есть, — не борьба между Плохим и Хорошим, но между Плохим и Ужасным. И человеческий выбор на сегодняшний день лежит не между Добром и Злом, а скорее между Злом и Ужасом. Человеческая задача сегодня сводится к тому, чтобы остаться добрым в царстве Зла, а не стать самому его, Зла, носителем.

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