<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marvel|Oswald|Wire One' rel='stylesheet' type='text/css'>

<style type="text/css"> 
.canonhov { opacity: 0.0; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background: #e2feff; color: black; font-family: Tahoma; text-align: justify; width: 200px; height: 130px; padding: 5px; } 
.canonhov:hover { opacity: .90 }
</style>

<style type="text/css">

#canon-list { width: 410px; padding: 10px; }
#canon-list .canonname { width: 200px; padding: 2px; background-color: #c9f8fc; text-align: center; font-family: georgia; font-size: 13px; color: #20908e; text-shadow: 1px 1px 0px white; font-style: italic; }
.canonquick { width: 200px; height: 5px; background-color: #c9f8fc; text-align: center; font-family: georgia; font-size: 10px; color: #eee; }
#canon-list .canoninfo { width: 200px; font-family: Tahoma; font-size: 11px; line-height: 11px; color: black; text-align: justify; margin-bottom: 5px; }

</style>

<style type="text/css">
.text {background: white; color: black; width:350; height: 80px; padding-left:10px; padding-right:10px; overflow:auto; transition-duration: .9s; -moz-transition-duration: .9s; -webkit-transition-duration: .9s; -o-transition-duration: .9s; opacity: 0.0; }
.text:hover {opacity: 0.9;}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background-color: #d5f0f6; }
::-webkit-scrollbar-thumb { background-color: #2789a1; }
</style>

<center>
<div style="width: 480px; background-color: #43cec3; border-top: 1px solid #18988d; border-left: 1px solid #18988d; border-right: 1px solid #18988d; border-bottom: 1px solid #18988d; color: white; padding: 5px;">
<div style="font-family: verdana; text-transform: uppercase; font-size: 9px; color: white; letter-spacing: 5px; margin-bottom: -10px;">who'd you wanna be tonight?</div>
<div style="font-family: Oswald; font-size: 50px; letter-spacing: 2px; text-align: center; margin-top: -5px;">RUNNING OUT OF TIME
<div style="font-family: verdana; text-transform: uppercase; font-size: 9px; color: #b6b6b6; margin-top: -76px;" class="text"><b>работай, свэггер.</b><br>все очень просто. вы решаете, кем хотите быть <s>вариант с космонавтом не прокатит, ссорь</s>, определяете, к какой большой категории это подходит. и заполняете все по шаблону, строго, красиво, аккуратно, тютелька в тютельку. и имя на английском, а профессия тем более, мы же убьемся в переводчике искать авербандщика, серьезно.</div>
</div>
</center>

<center><div style="width: 480px; height: 600; background-image: url(http://funkyimg.com/i/HE1m.jpg); background-repeat: repeat; border-left: 5px solid #18988d; border-top: 5px solid #18988d; border-right: 5px solid #18988d; border-bottom: 5px solid #18988d; margin-top: 10px; padding: 30px;">
<div style="background-color: #e2fdff; border-left: 3px double #add8dc; border-top-left-radius: 20px; border-top: 3px double #add8dc; border-right: 3px double #add8dc; border-bottom-right-radius: 20px; border-bottom: 3px double #add8dc; padding: 10px;">
<center><div style="font-family: georgia; color: #0e8088; font-style: italic; font-size: 25px; letter-spacing: -2px; text-shadow: 1px 0px 0px black; text-align: center;">— образование —</div></center>
<table border="0" width="70%" align="center" cellpadding: 5px;>
<tr>
<td align="center">профессия</td>
<td align="center" width="10px">—</td>
<td align="center">имя</td>
</tr>
</table>
<center><div style="font-family: georgia; color: #0e8088; font-style: italic; font-size: 25px; letter-spacing: -2px; text-shadow: 1px 0px 0px black; text-align: center;">— политика —</div></center>
<table border="0" width="70%" align="center" cellpadding: 5px;>
<tr>
<td align="center">профессия</td>
<td align="center" width="10px">—</td>
<td align="center">имя</td>
</tr>
</table>
<center><div style="font-family: georgia; color: #0e8088; font-style: italic; font-size: 25px; letter-spacing: -2px; text-shadow: 1px 0px 0px black; text-align: center;">— развлечения —</div></center>
<table border="0" width="70%" align="center" cellpadding: 5px;>
<tr>
<td align="center">профессия</td>
<td align="center" width="10px">—</td>
<td align="center">имя</td>
</tr>
</table>
<center><div style="font-family: georgia; color: #0e8088; font-style: italic; font-size: 25px; letter-spacing: -2px; text-shadow: 1px 0px 0px black; text-align: center;">— обслуживание —</div></center>
<table border="0" width="70%" align="center" cellpadding: 5px;>
<tr>
<td align="center">профессия</td>
<td align="center" width="10px">—</td>
<td align="center">имя</td>
</tr>
</table>
<center><div style="font-family: georgia; color: #0e8088; font-style: italic; font-size: 25px; letter-spacing: -2px; text-shadow: 1px 0px 0px black; text-align: center;">— бизнесс —</div></center>
<table border="0" width="70%" align="center" cellpadding: 5px;>
<tr>
<td align="center">профессия</td>
<td align="center" width="10px">—</td>
<td align="center">имя</td>
</tr>
</table>
<center><div style="font-family: georgia; color: #0e8088; font-style: italic; font-size: 25px; letter-spacing: -2px; text-shadow: 1px 0px 0px black; text-align: center;">— культура —</div></center>
<table border="0" width="70%" align="center" cellpadding: 5px;>
<tr>
<td align="center">профессия</td>
<td align="center" width="10px">—</td>
<td align="center">имя</td>
</tr>
</table>

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