<!--HTML--><link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Playfair+Display" /><link rel='stylesheet' href='//fonts.googleapis.com/css?family=VT323' type='text/css' />
<style type="text/css">

.resplendent { width: 470px; height: 600px; padding: 30px; background: url(http://funkyimg.com/i/2qaqA.png) top left no-repeat; } 
.stupidly { width: 450px; height: 580px; background: #cbc0c6; padding: 10px; } 
#control { width: 450px; height: 200px; overflow: hidden; position: relative; } 
#control .control-hover { width:450px; height: 200px; background: rgba(152, 130, 142, 0.7); position: relative; top: 200px; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 
#control:hover .control-hover { top: 0px; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 
#control .control-hover2 { width: 400px; height: 150px; background: #e6e1dc; position: relative; top: -500px; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; }
#control:hover .control-hover2 { top: -175px; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s;-moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s;  }  
.name { width: 450px; margin: 0px 0px -30px 0px; font-family: 'FoglihtenNo06'; font-size: 40px; color: #ede9e5; text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 0px #a9889f; } 

.karmascroll::-webkit-scrollbar {width: 5px; background-color: #bfa5c1;}
.karmascroll::-webkit-scrollbar-thumb { background: -webkit-linear-gradient(#e0dbd7, #886d7b); }
.karmascroll::-webkit-scrollbar-track { width: 5px; background-color: #bfa5c1;}

.infobox { width: 180px; height: 130px; margin-left: 5px; position: relative; top: 10px; overflow: auto; padding: 0px 8px 0px 0px;} 
.field1 { width: 180px; padding: 5px 0px; border-bottom: 1px solid #bfb2b9; font-size: 11px; color: #68505e;text-align: center; font-family: playfair display; } 

.infobox::-webkit-scrollbar {width: 3px; background-color: #bfa5c1;}
.infobox::-webkit-scrollbar-thumb { background: -webkit-linear-gradient(#e0dbd7, #886d7b); }
.infobox::-webkit-scrollbar-track { width: 3px; background-color: #bfa5c1;}

.postbox { width: 444px; height: 294px; padding: 10px 0px; margin-top: 10px; background: #ede9e5; border: 3px double #cbc0c6; }

.kbcred2 { width: 470px; text-align: center; font-family: courier; font-size: 7px; margin-top: -3px; } 
.kbcred2 a { color: #000; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 
.kbcred2 a:hover { color: #000; text-decoration: none; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 
</style>
<center>
<div class="resplendent"><div class="stupidly">

<div class="name">

NAME SURNAME

</div><br><br>

<div id="control" style="background-image: url(http://funkyimg.com/i/2qauP.png);"><div class="control-hover"></div><div class="control-hover2"><table>

<td><div class="infobox"><div class="field1">

Имя Фамилия

</div><div class="field1">

00.00.00

</div><div class="field1">

ориентация

</div><div class="field1">

профессия

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

<td><div class="infobox"><div class="field1">

каста</div><div class="field1">

состоит/против организации

</div><div class="field1">

(не) согласен на гм

</div><div class="field1">

связь

</div></div></td></table>

</div></div>

<div class="postbox"><div style="height: 300px; line-height: 12px; font: 11px Georgia; color: #786570; text-align: justify; padding: 0px 8px 0px 5px; overflow: auto;" class="karmascroll">

faucibus congue eu nam purus sociis bibendum hendrerit felis dui scelerisque consequat, mus Nibh condimentum aliquam amet sagittis. Viverra etiam curae; luctus morbi et mauris litora urna cubilia adipiscing amet, fermentum facilisis cubilia ultrices massa nibh nibh Diam consectetuer mattis duis lobortis justo vehicula tincidunt varius integer neque sit pharetra malesuada. Pellentesque et lacinia eget ligula. Sociosqu natoque ipsum gravida nibh inceptos cursus purus phasellus imperdiet cras tempor suspendisse auctor ut magna elit ac class conubia ad ligula urna.
Mollis gravida molestie dignissim elementum dictum eleifend sociosqu ultricies gravida felis pede lorem fusce hymenaeos, dolor Scelerisque. Gravida, maecenas hymenaeos fames parturient dapibus, quisque lorem eget elementum. Conubia. Nostra hendrerit vehicula leo inceptos pharetra nunc nec sollicitudin viverra varius etiam tempor imperdiet ante hymenaeos sit. Ut mus malesuada vehicula morbi quam pharetra mus massa felis turpis placerat condimentum viverra augue aliquet vestibulum.
Euismod sollicitudin volutpat magna commodo lectus nullam dignissim donec primis. Ante neque nulla. Ac. Fames id parturient pharetra dignissim auctor, faucibus platea curabitur cursus. Habitant tellus sapien platea ultricies habitant luctus nisi rutrum cursus sagittis suspendisse nisl, aenean. Porta mus class libero lobortis, pede leo consequat ac ligula ante pharetra viverra tortor elit vivamus ipsum maecenas senectus posuere sem netus facilisi arcu dignissim dignissim nibh auctor nec parturient sodales risus ac. Amet aptent Sagittis ad suscipit pretium mauris nulla pulvinar erat gravida aptent a id.
Mi lorem lacus fermentum. Orci. Lacus adipiscing. Id scelerisque pretium nonummy, mattis convallis egestas nonummy eleifend tempor nibh luctus volutpat tempus Augue torquent sociis. Ridiculus quisque Etiam vulputate neque vehicula lectus. Turpis cum est quam natoque sed hymenaeos consectetuer pede ullamcorper magna penatibus ipsum facilisi neque, consectetuer sollicitudin fringilla cursus potenti aenean aliquam vitae non nulla diam at potenti faucibus. Libero lacinia hendrerit massa consectetuer vivamus sociis euismod lacus libero magnis sociosqu.

</div> </div>

</div></div><div class="kbcred2"><a href='http://wecode.jcink.net/index.php?showuser=3093'>© KB</a></div></center>