<!--HTML--><link href='http://fonts.googleapis.com/css?family=Lato:100|VT323' rel='stylesheet' type='text/css' />
<style type="text/css">
#theadcontainer { position: relative; width: 400px; height: 400px; border: 50px solid #000; background-color: #FFF; overflow: hidden; }

#theadcontainer em::-webkit-scrollbar{ width: 9px; height: 10px; }
#theadcontainer em::-webkit-scrollbar-track{  border: 4px solid #FFF; background: #000; }
#theadcontainer em::-webkit-scrollbar-thumb{ height: 10px; width: 8px; border: 0; background: #000; }
#theadcontainer em::-webkit-scrollbar-track-piece {  height: 30px;  width: 30px; }

#theadcontainer img{ position: absolute; top: 0px; right: 0px; width: 400px; height: 400px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
#theadcontainer:hover img { position: absolute; right: 25px; top: 25px; width: 100px; height: 100px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

/* ADJECTIVE HEADERS */
#theadcontainer p { opacity: 0; filter: alpha(opacity=0); font-family: 'VT323', sans-serif; font-size: 12px;
letter-spacing: 1px; color: white; line-height: 25px; font-weight: 400; text-transform: uppercase; position: absolute; left: 25px; top: 14px; height: 100px; width: 245px; overflow: hidden; text-align: right; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
#theadcontainer p span { padding: 6px; background-color: #000; margin-bottom: 1px; }
#theadcontainer:hover p { opacity: 1; filter: alpha(opacity=1); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

/* FIRST MIDDLE LAST */
.theadtitle { margin-top: 90px; padding-top: 20px; height: 200px; overflow: hidden; width: 350px; text-align: center; position: relative; z-index: 9999;  -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;  }
.theadtitle span { display: block; color: #FFF;  font: 100 70px/1 "lato", sans-serif; text-transform: uppercase; margin-top: 6px;  }
.theadtitle span:nth-child(2) {  font-family: times, serif; font-weight: 400; text-transform: uppercase;  line-height: 30px; letter-spacing: 3px; font-size: 7px; color: #000; position: relative; }
.theadtitle span:nth-child(2):before, .theadtitle span:nth-child(2):after { content: ''; width: 100px; height: 1px; background: #FFF;  position: absolute; top: 50%; margin-top: -1px; box-shadow: 0 1px 0 rgba(255,255,255,0.2); }
.theadtitle span:nth-child(2):before { left: 25px; } .theadtitle span:nth-child(2):after { right: 25px; }
.theadtitle span:nth-child(3) { font-size: 60px; line-height: 45px; }
#theadcontainer:hover .theadtitle { opacity:0; filter:alpha(opacity=0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

/* CONTENT AREA */
#theadcontainer em { opacity:0; filter:alpha(opacity=0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
#theadcontainer:hover em { opacity:1; filter:alpha(opacity=1); position: absolute; top: 130px; left: 0px; padding: 20px; width: 360px; height: 230px; overflow: auto; text-align: justify; font-style: normal; font-family: calibri, sans-serif; font-size: 9.5px; line-height: 120%; letter-spacing: 1px; color: #000; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;  }
</style>
<center>
<div id="theadcontainer">

<img src="ВАШЕ ИЗОБРАЖЕНИЕ 400х400">

<p><span>ИМЯ ПЕРСОНАЖА НА РУССКОМ</span><BR>
<span>ВОЗРАСТ</span><BR>
<span>ПРОФЕССИЯ</span><BR>
<span>ОРИЕНТАЦИЯ</span></p>

<div class="theadtitle">
<span>ИМЯ (АНГЛ)</span><span>ВТОРОЕ ИМЯ(АНГЛ)</span><span>ФАМИЛИЯ(АНГЛ)</span>
</div>

<em>
ОПИСАНИЕ ХАРАКТЕРА ВАШЕГО ПЕРСОНАЖА
</em>
</div>
<a style="font-size: 6px; line-height: 10px; opacity: .7; letter-spacing: 3px; font-family: calibri;" href="http://roux.jfbs.net/index.php?showuser=3">N ▲ W</a>
</center>