Код:
<center>
<style type="text/css">
.work {width: 460px; margin: 0 auto; padding: 20px; background: rgba(96, 127, 129, 0.5); }
.work li {margin:0; padding:0; }
.work [type=radio], .work [type=checkbox] { display:none; }
.work label {display: block; font-size: 12px; color: #405556; font-family: Georgia; text-transform: uppercase; -webkit-transition: all .2s cubic-bezier(0, 1.3, 1, 1);}
.work ul li label:hover, .work [type=radio]:checked ~ label, .work [type=checkbox]:checked ~ label { background: #607F81; color: #FFF; }
.work .content { padding: 0 10px; overflow: hidden; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; border: 1px dotted #C0C5C8; background-color: #DEE0E3;}
.work p { color:#333; margin:0 0 10px; }
.work h3 { color:#542437; margin:10px 0;}
.job ul li {overflow:hidden; margin:0 0 1px; }
.job ul li label { padding:10px; }
.job [type=radio]:checked ~ label, .job [type=checkbox]:checked ~ label { border-bottom:0; }
.job ul li .content { height:0px; border-top:0;}
.job [type=radio]:checked ~ label ~ .content, .job [type=checkbox]:checked ~ label ~ .content {height: 320px; padding: 10px; background-image: url(http://s7.uploads.ru/d/xs2bU.png);}
.forcont { padding-right: 5px; height: 320px; overflow: auto; text-align: justify; font-size: 13px; color: #171717; font-family: Minion Pro;}
@font-face { font-family: 'TripSerifCE_Light'; src: url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.eot'); src: url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.eot?#iefix') format('embedded-opentype'), url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.woff') format('woff'), url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.ttf') format('truetype'), url('http://stripaway.b1.jcink.com/uploads/stripaway/TripSerifCE_Light.svg') format('svg'); font-weight: normal; font-style: normal; }
.contr { text-align: center; font-size: 12px; background-color: rgba(105, 138, 140, 0.55); font-family: serif; color: #EEEEEE; height: 20px;
}
.contr1 {background-color: rgba(105, 138, 140, 0.24); padding: 6px;}
.contr2 { text-align: center; font-size: 13px; background-color: rgba(105, 138, 140, 0.92); font-family: garamond; color: #EEEEEE; height: 25px;
}
</style>
<div class="work job"> <ul> <li><input type="radio" id="radio-1" name="radio-work"><label for="radio-1">HAZE</label><div class="content"><div class="forcont">
<blockquote>
<div class="contr2">отдел общественной безопасности</div>
<div class="contr1">директор:
</br>личный секретарь директора:
</br>специалист по работе с общественностью:
</br>программист:
</br>охрана:
</br>капитаны отрядов:
</br>специалисты:
</br>исполнители:
</div></br><div class="contr2">распределение по отрядам</div><div class="contr1">
<table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="display: block; text-align: center"><strong>12 отряд</strong><br>
<span style="font-style: italic">капитан:</span><br>свободно<br>
<span style="font-style: italic">специалисты:</span><br>свободно х свободно<br>
<span style="font-style: italic">исполнители:</span><br>свободно х свободно</span></p></td>
<td><p><span style="display: block; text-align: center"><strong>13 отряд</strong><br>
<span style="font-style: italic">капитан:</span><br>свободно<br>
<span style="font-style: italic">специалисты:</span><br>свободно х свободно<br>
<span style="font-style: italic">исполнители:</span><br>свободно х свободно</span></p></td>
<td><p><span style="display: block; text-align: center"><strong>14 отряд</strong><br>
<span style="font-style: italic">капитан:</span><br>свободно<br>
<span style="font-style: italic">специалисты:</span><br>свободно х свободно<br>
<span style="font-style: italic">исполнители:</span><br>свободно х свободно</span></p></td>
</tr><tr><td><p><span style="display: block; text-align: center"><strong>15 отряд</strong><br>
<span style="font-style: italic">капитан:</span><br>свободно<br>
<span style="font-style: italic">специалисты:</span><br>свободно х свободно<br
><span style="font-style: italic">исполнители:</span><br>свободно х свободно</span></p></td>
<td><p><span style="display: block; text-align: center"><strong>16 отряд</strong><br>
<span style="font-style: italic">капитан:</span><br>свободно<br>
<span style="font-style: italic">специалисты:</span><br>свободно х свободно<br>
<span style="font-style: italic">исполнители:</span><br>свободно х свободно</span></p></td>
<td><p><span style="display: block; text-align: center"><strong>17 отряд</strong><br>
<span style="font-style: italic">капитан:</span><br>свободно<br>
<span style="font-style: italic">специалисты:</span><br>свободно х свободно<br>
<span style="font-style: italic">исполнители:</span><br>свободно x свободно</span></p></td>
</tr></tbody></table></div></br>
<div class="contr2">академия</div><div class="contr1">
директор:
</br>охрана:
</br>научные работники:
</br>ассистенты в лаборатории:
</br>врачи:
</br>наставники:
</br> студенты:
</br>
</br>академия была основана в 1988 году. она включает в себя научную лабораторию, в которой проводятся различные опыты и эксперименты над вирусом и зараженными людьми. здесь же расположен интернат, для воспитания и обучения несовершеннолетних, которые были инфицированы, отслежены и пойманы мглой. это закрытое заведение окружено парком и расположено на окраине нового орлеана. здание обнесено стенами, предназначенные не только для того, чтобы случайно не пустить кого-то внутрь, но и для того чтобы не выпустить. покинуть академию, как и войти в нее, можно лишь по специальному пропуску. студенты имеют право выходить за стены лишь по специальному разрешению или в сопровождении наставников. однако в выходные и праздничные дни эти строгие правила отходят на второй план, позволяя им выходить в любое удобное время. <br><span style="font-style: italic">студенты выпускаются из академии в возрасте семнадцати лет, и их передают в различные отряды мглы, где они ожидают последующего назначения на вакантные должности. </div>
</blockquote>
</div> </div></li>
<li><input type="radio" id="radio-2" name="radio-work" /><label for="radio-2">город зараженных</label> <div class="content"><div class="forcont">
<blockquote>
<div class="contr2">командование</div><div class="contr1">
командир восстания:
</br>заместитель командира:
</br>глава перехватчиков:
</br>инженеры-механики:
</br>хакеры:
</br>ясновидящие поисковики:
</br>перехватчики зараженных:
</br>
</div></br><div class="contr2">служба охраны</div><div class="contr1">
начальник службы охраны:
</br>охрана периметра: <a href="https://haze.rusff.me/profile.php?id=6">Elsa Kincaid</a>
</br>охрана заключенных:
</br>внутренняя охрана:
</br>охрана оружейных складов:
</br>
</div></br><div class="contr2">госпиталь</div><div class="contr1">
глава госпиталя:
</br>хирург:
</br>инфекционист:
</br>реаниматолог:
</br>поставщик медикаментов:
</br>научные исследователи:
</br></div></blockquote>
</div></div> </li> <li><input type="radio" id="radio-3" name="radio-work" /> <label for="radio-3">муниципалитет</label><div class="content"><div class="forcont">
<div class="contr2">мэрия</div>
<div class="contr1">
мэр:
</br>помощник мэра:
</br>вице-мэр:
</br>министр финансов:
</br>министр культуры:
</br>министр транспорта:
</br>начальник службы безопасности:
</br>прокурор:
</br>пресс-секретарь:
</br>служащие:
</br>адвокат:
</br>юрист:
</br>секретарь:
</br>стажер:
</br>программист:
</br>охранник:
</br>водитель:
</br></div><br>
<div class="contr2">суд</div>
<div class="contr1">
председатель:
</br>судья:
</br>прокурор:
</br>помощник прокурора:
</br>архивариус:
</br>секретарь в прокуратуре:
</br>адвокат:
</br>начальник службы безопасности:
</br>служащие:
</br>стажер:
</br>программист:
</br>охранник:
</br></div>
</div></div> </li><li><input type="radio" id="radio-4" name="radio-work" /><label for="radio-4">органы правопорядка</label> <div class="content"><div class="forcont">
<div class="contr2">офис шерифа</div>
<div class="contr1">
шериф:</br>
заместитель шерифа:</br>
инспектор:</br>
помощник инспектора:</br>
капитан:</br>
лейтенант:</br>
детектив:</br>
служащие:</br>
технический специалист:</br>
стажер:</br>
</div></br>
<div class="contr2">департамент патруля и правопорядка</div>
<div class="contr1">
капитан:
</br>лейтенант:
</br>детектив:
</br>служащие:
</br>технический специалист:
</br>патрульный:
</br>стажер:</div></br>
<div class="contr2">департамент расследований и национальной безопасности </div>
<div class="contr1">
капитан:</br>
лейтенант:</br>
детектив:</br>
служащие:</br>
технический специалист:</br>
стажер:</br>
переводчик:</br>
кинолог:</br>
следователь:</br>
сапер:</br>
водолазная команда:</br>
авиационная команда:</br>
</div></br>
<div class="contr2">Экспертно-криминалистическая лаборатория</div>
<div class="contr1">судмедэксперт:</br>
криминалист:</br>
лаборант:</br>
программист:</br>
</div>
</div></div> </li>
<li><input type="radio" id="radio-5" name="radio-work" /><label for="radio-5">медицинский центр</label> <div class="content"><div class="forcont">
<div class="contr2">ST.CHARLES GENERAL HOSPITAL</div>
<div class="contr">больница</div>
<div class="contr1">главный врач:
</br>зам. главного врача по лечебной работе:
</br>терапевт:
</br>акушер-гинеколог:
</br>педиатр:
</br>стоматолог:
</br>врачей-рентгенологов:
</br>инфекционист:
</br>лаборант:
</br>хирург:
</br>невролог:
</br>кардиолог:
</br>психиатр:
</br>анестезиолог:
</br>старшая медицинская сестра:
</br>фельдшер:
</br>медицинская сестра:
</br>санитар:
</br>интерн:
</br>водитель скорой помощи:
</br>охрана:
</br></div><br>
<div class="contr2">WALGREEN</div>
<div class="contr">аптека</div>
<div class="contr1">владелец:
</br>заведующий аптекой:
</br>фармацевт:
</br>провизор-технолог:
</br>провизор-аналитик:
</br>оптик:</div>
</div></div></li>
<li><input type="radio" id="radio-6" name="radio-work" /><label for="radio-6">сфера услуг</label> <div class="content"><div class="forcont">
<div class="contr2">THE ROOSVELT</div><div class="contr1">
<center>внушительного вида здание, полностью соответствующее своему названию. можно с уверенностью сказать, что владельцы не пожалели средств, вкладываемых в проект, поэтому сооружение вышло действительно грандиозным. комфортабельные номера, обслуживание высшего класса и удобное местоположение год от года привлекают сюда все больше клиентов. поговаривают, что в этом месте останавливаются и весьма влиятельные личности, потому что здесь есть что-то особенное, чего не могут предоставить в других отелях.</center><br>
<div class="contr">отель</div>
владелец:</br>
администратор:</br>
портье:</br>
консьерж:</br>
горничная:</br>
охрана:</br></br>
<div class="contr">бордель</div>
директор:</br>
сутенер:</br>
ночные бабочки:</br>
</div></br>
<div class="contr2">НАЦИОНАЛЬНЫЙ БАНК США</div>
<div class="contr1">
бухгалтер:</br>
финансист:</br>
кассир:</br>
секретарь:</br>
клерк по облигациям:</br>
клерк по операциям клиринговой палаты:</br>
клерк по инкассированию:</br>
клерк по коммерческому кредиту:</br>
программист:</br>
аналитик по кредиту:</br>
биржевой брокер по валютным операциям:</br>
инспектор по ссудам:</br>
инспектор по кадрам:</br>
охранник:</br>
смотритель сейфа:</br>
</div></br>
<div class="contr2">ABRAHAM</div>
<div class="contr">ресторан</div>
<div class="contr1">
владелец:</br>
менеджер:</br>
шеф-повар:</br>
повар:</br>
официант:</br>
музыкант:</br>
</div></br>
<div class="contr2">DON QUIXOTE</div>
<div class="contr">кофейня</div>
<div class="contr1">владелец:</br>
менеджер:</br>
бариста:</br>
кондитер:</br>
официант:</br>
</div></br>
<div class="contr2">WHITE RABBIT</div>
<div class="contr">кондитерская</div>
<div class="contr1">
владелец:</br>
менеджер:</br>
повар-кондитер:</br>
кассир:</br>
</div></br>
<div class="contr2">DANDELION WINE</div>
<div class="contr">салон цветов</div>
<div class="contr1">
владелец:</br>
менеджер:</br>
флорист:</br>
курьер:</br>
</div></br>
<div class="contr2">SUNRISE</div>
<div class="contr">салон красоты</div>
<div class="contr1">
владелец:</br>
менеджер:</br>
стилист-парикмахер:</br>
мастер маникюра:</br>
визажист:</br>
косметолог:</br>
массажист:</br>
</div></br>
<div class="contr2">NEO</div>
<div class="contr">автомастерская</div>
<div class="contr1">
директор:</br>
управляющий автосервиса:</br>
автомеханик:</br>
автослесарь:</br>
инженер автосервиса:</br>
автодиагност:</br>
мойщик автомобилей:</br>
шиномонтажник:</br>
менеджер по закупкам и продажам автозапчастей:</br>
</div></br>
<div class="contr2">HELIOS</div>
<div class="contr">тату-салон</div>
<div class="contr1">
владелец:</br>
тату-мастер:<br>
пирсер:</br>
</div></br>
</div></div></li>
<li><input type="radio" id="radio-7" name="radio-work" /><label for="radio-7">средства массовой информации</label> <div class="content"><div class="forcont">
<div class="contr2">TIMES</div>
<div class="contr">газета</div>
<div class="contr1">
владелец:
<br>генеральный директор:
<br>главный редактор:
<br>помощник главного редактора:
<br>менеджер по продажам:
<br>журналист:
<br>фотограф:
<br>дизайнер:
<br>стажер
</div><br>
<div class="contr2">VOGUE</div>
<div class="contr">журнал</div>
<div class="contr1"><br>владелец:
<br>генеральный директор:
<br>главный редактор:
<br>помощник главного редактора:
<br>менеджер по продажам:
<br>журналист:
<br>фотограф:
<br>художник:
<br>стажер:
</div>
</div></div></li>
<li><input type="radio" id="radio-8" name="radio-work" /><label for="radio-8">сфера развлечений</label> <div class="content"><div class="forcont">
<div class="contr2">KNIGHT</div><div class="contr1">
<center>это место, абсолютно непримечательное днем, буквально преображается после захода солнца. клуб зажигается яркими огнями ночной жизни, завлекая народ удивительной атмосферой, в которой воплощаются самые дерзкие идеи. много слухов связано с этим заведением: одни говорят, что клуб был основан неким криминальным авторитетом, другие - что под покровом ночи здесь творятся грязные дела, третьи уверены, что это и не клуб вовсе, а нелегальное казино. однако полиция это место еще не прикрыла, может быть за неимением веских доказательств, а может быть и потому, что они сами получают выгоду от всего этого.</center><br>
<div class="contr">ночной клуб</div>
владелец:</br>
администратор:</br>
бармен:</br>
диджей:</br>
танцовщик:</br>
охрана:</br></br>
<div class="contr">казино</div>
директор:</br>
руководитель службы безопасности:</br>
администратор:</br>
крупье:</br>
охрана главного входа:</br>
охрана игрового зала:</br>
</div></br>
<div class="contr2">SPIRIT</div>
<div class="contr">танцевальная студия</div>
<div class="contr1">
владелец:</br>
хореограф:</br>
</div></br>
<div class="contr2">SAENGER</div>
<div class="contr">театр</div>
<div class="contr1">
владелец:</br>
артист оркестра:</br>
артист балета:</br>
артист мимического ансамбля:</br>
артист драмы:</br>
артист разговорного жанра:</br>
балетмейстер:</br>
дирижер:</br>
звукорежиссер:</br>
репетитор по балету:</br>
репетитор по вокалу:</br>
гример-пастижер:</br>
костюмер:</br>
механик по обслуживанию звуковой техники:</br>
настройщик духовых инструментов:</br>
настройщик пианино и роялей:</br>
настройщик-регулировщик смычковых инструментов:</br>
осветитель:</br>
пиротехник:</br>
реквизитор:</br>
гардеробщик:</br> </br>
</div></br>
<div class="contr2">VOLTAGE</div>
<div class="contr">спорт-клуб</div>
<div class="contr1">
владелец:</br>
менеджер:</br>
фитнес-тренер:</br>
тренер боевых искусств:</br>
тренер по плаванью:</br>
</div></br>
</div></div></li>
<li><input type="radio" id="radio-9" name="radio-work" /><label for="radio-9">криминал</label> <div class="content"><div class="forcont">
<p>вор-карманник</br>
вор-домушник</br>
проститутка из бара 'la prese'</br>
глава мафии</br>
бандит</br></p>
</div></div></li>
</ul></div></div>Код:
ваши_профессии <a href="ссылка на ваш профиль">имя персонажа</a>