Код:
[html]
<style>
.commands { width: 650px; height: auto; padding-top: 20px; padding-bottom: 30px; display: ; background: url(http://funkyimg.com/i/2zC5H.png) top no-repeat, url(http://funkyimg.com/i/2zC5J.png) bottom no-repeat, url(http://funkyimg.com/i/2zC5K.png) repeat-y;}
.jay {width:500px;position:relative;top: -10px;left: 235px; color: #000; font: 35px old standard tt; font-weight: 900;
text-transform: lowercase;}
.tm-q {width: 560px; padding: 5px;margin-top: -1px; text-align: right; }
.tm-q span {font: 20px old standard tt; font-weight: 900; letter-spacing: -1px;}
.tm-q span i {color: #79b8c5; float: left;}
.tm-q sub {display: block; font: 10px cousine; text-transform: uppercase; color: #222;
text-align: justify; margin: 10px;}
.xotourlif3 .box { background-color: #c6a36c; border: 1px solid #fff; display: inline-block;width: 185px; height: 250px; margin: 1px;overflow: hidden;}
.xotourlif3 img { width: 100px; height: 100px; padding: 25px; margin: 35px -10px 0 2px; border: solid 15px #c6a36c; border-radius: 50%; }
.xotourlif3 h4 { margin: 14px 0 0 0; color: #fff; font: 15px contrail one; text-transform: uppercase; text-align: center; letter-spacing: 1px; padding: 0;
}
.xotourlif3 h5{ margin: 10px 10px -10px 10px; padding: 0;font: 10px contrail one; text-transform: uppercase;
text-align: center; letter-spacing: 0px; width: 115px;height: 15px; padding: 5px; color: #fff; }
.xotourlif3 .text {background: #fff; margin: 0; overflow: hidden; position: relative; z-index: 200; width: 185px; height: 0px; transition: .8s;
border-top: solid 7px; }
.xotourlif3 .box:hover .text {margin: -248px 0 0 0; height: 240px; }
.xotourlif3 .scroll { margin: 15px 10px 15px 15px; color: #111; font: 11px/16px lato; text-align: justify; padding-right: 10px; height: 190px; overflow: auto; width: 150px; }
.xotourlif3 .scroll::-webkit-scrollbar { width: 5px; background: #eee; border: solid 2px #fff;}
.xotourlif3 .scroll::-webkit-scrollbar-track {background: #eee; border: solid 2px #fff; }
.xotourlif3 .scroll::-webkit-scrollbar-thumb { border: solid #ddd; background: #D5D5D5; border-radius: 8px; }
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<div class="commands">
<div class="jay">центр занятости</div>
<center>
<div style="width: 590px; margin-left: 15px; padding-top:10px; background: #;text-align: justify; font: 11px tahoma; color: #222;
line-height: 110%; ">
<div class="tm-q"><span> Важно знать</span><sub>
текст, текст,текст
</sub></div>
<br><br>
<div class="xotourlif3">
<div class="box">
<img src="http://funkyimg.com/i/2zDEJ.png" style="background:#e5dcd7;">
<h4 style="color:#ACCENT">Правительство</h4>
<div class="text" style="border-color: #453633;">
<div class="scroll">
- мэр (от 40 у.о.)<br>
- заместитель мэра (от 37 у.о.)<br>
- секретари (от 25 у.о.)<br>
- дипломаты (от 24 у.о.)<br>
</div></div>
</div>
<div class="box">
<img src="http://funkyimg.com/i/2zDEM.png" style="background:#e5dcd7;">
<h4 style="color:#ACCENT">Соц.пакет</h4>
<div class="text" style="border-color: #453633;">
<div class="scroll">
<b>ШКОЛА И ДЕТСКИЙ САД</b><br>
- директор (от 35 у.о.)<br>
- секретарь директора (от 23 у.о.)<br>
- заместитель директора (от 25 у.о.)<br>
- учителя старших классов (от 29 у.о.)<br>
- учителя младших / дошкольных классов (от 22 у.о.)<br>
- учителя средних классов (от 25 у.о.)<br>
- психологи (от 25 у.о.)<br>
- логопеды (от 23 у.о.)<br><br>
<b>БОЛЬНИЦА ЛОНДОНА</b><br>
- главный врач (от 37 у.о.)<br>
- заместитель главного врача (от 27 у.о.)<br>
- психотерапевт (от 27 у.о.)<br>
- травматолог (от 27 у.о.)<br>
- терапевт (от 27 у.о.)<br>
- стоматолог (от 27 у.о.)<br>
- гинеколог (от 27 у.о.)<br>
- онколог (от 27 у.о.)<br>
- анестезиолог (от 27 у.о.)<br>
- лаборанты (от 24 у.о.)<br>
- невролог (от 27 у.о.)<br>
- хирург (от 27 у.о.) <br>
- реаниматолог (от 27 у.о.)<br>
- лор (от 27 у.о.)<br>
- медсестры (от 25 у.о.)<br>
- медбратья (от 25 у.о.)<br>
- интерны (от 25 y.o.)<br>
</div></div>
</div>
<div class="box">
<img src="http://funkyimg.com/i/2zDDP.png" style="background:#e5dcd7;">
<h4 style="color:#ACCENT">закон и право</h4>
<div class="text" style="border-color: #453633;">
<div class="scroll">
<b>ГОРОДСКОЙ СУД</b><br>
Судья - <br>
- окружной прокурор (от 32 у.о.)<Br>
- помощники прокурора (от 26 у.о.) <br>
- адвокаты (от 25 у.о.)<br>
- судебные приставы (от 27 у.о.)<br><br>
<b>ПОЛИЦЕЙСКИЙ УЧАСТОК</b><br>
- глава участка (от 35 у.о.)<br>
- капитаны (от 30 у.о.) <br>
- лейтенанты (от 26 у.о.)<br>
- сержанты (от 26 у.о.)<br>
- офицеры (от 25 у.о.)<br>
- детективы (от 25 у.о.)<br>
- помощники детективов (от 22 у.о.)<br>
- эксперты (от 24 у.о.)<br>
- стажеры (от 21 у.о.)<br>
</div></div>
</div>
</div>
<div class="xotourlif3">
<div class="box">
<img src="http://funkyimg.com/i/2zDF3.png" style="background:#e5dcd7;">
<h4 style="color:#ACCENT">развлечения</h4>
<div class="text" style="border-color: #453633;">
<div class="scroll">
</div></div>
</div>
<div class="box">
<img src="http://funkyimg.com/i/2zDEG.png" style="background:#e5dcd7;">
<h4 style="color:#ACCENT">КРИМИНАЛ</h4>
<div class="text" style="border-color: #453633;">
<div class="scroll">
</div></div>
</div>
<div class="box">
<img src="http://funkyimg.com/i/2zDFb.png" style="background:#e5dcd7;">
<h4 style="color:#ACCENT">Прочее</h4>
<div class="text" style="border-color: #453633;">
<div class="scroll">
</div></div>
</div>
</div>
<br> <br> <br> <br> <br> <br> <br> </div></center>