[hideprofile][html]<div id="spiritworkroom">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Городские<br> службы и СМИ</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Образование<br> и наука</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Военные<br> и СБА</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Развлечения<br> и сфера услуг</label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5">Вне<br>закона</label>
<section id="content-tab1">
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" rowspan=2 width="25%">Мэрия и сенат</td>
<td align="center" rules="none" rowspan=2 width="25%">Полиция</td>
<td align="center" rules="none" colspan=2>Здравоохранение</td>
</tr>
<tr>
<td align="center" rules="none" width="25%">Городская больница</td>
<td align="center" rules="none" width="25%">Ветеринария</td>
</tr>
<tr>
<td align="center" rules="none">
Мэр - <a href="https://australis.rusff.me/">Douglas Lind[npc]</a><br>
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td align="center" rules="none">
Глава полиции - <a href="https://australis.rusff.me/">Name Name</a><br>
Главы округов - <a href="https://australis.rusff.me/">Name Name</a><br>
Патрульные офицеры - <a href="https://australis.rusff.me/">Name Name</a><br>
Криминалисты - <a href="https://australis.rusff.me/profile.php?id=33">Ariel Kahdeksan</a><br>
Судмедэксперт - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td align="center" rules="none">
Глав. врач - <a href="https://australis.rusff.me/">Name Name</a><br>
Врачи - <a href="https://australis.rusff.me/">Name Name</a><br>
Медики - <a href="https://australis.rusff.me/">Name Name</a><br><br>
Частная практика<br><br>
Целитель - <a href="https://australis.rusff.me/profile.php?id=12"> Valdoria Dagar</a><br>...
</td>
<td align="center" rules="none">
Владелец сети клиник - <a href="https://australis.rusff.me/profile.php?id=7">Hassan Shafi Harper</a><br>...
</td>
</tr>
</table><hr>
Службы спасения и береговая охрана
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="25%">Пожарные</td>
<td align="center" rules="none" width="25%">Службы спасения города</td>
<td align="center" rules="none" width="25%">Береговые спасатели</td>
<td align="center" rules="none">Береговая охрана</td>
</tr>
<tr>
<td align="center" rules="none">
<a href="https://australis.rusff.me/">Name Name</a><br>
</td>
<td align="center" rules="none">
<a href="https://australis.rusff.me/">Name Name</a><br>
</td>
<td align="center" rules="none">
<a href="https://australis.rusff.me/">Name Name</a><br>
</td>
<td align="center" rules="none">
<a href="https://australis.rusff.me/">Name Name</a><br>
</td>
</tr>
</table><hr>
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" colspan=3 width="25%">СМИ</td>
<td align="center" rules="none" rowspan=2 width="25%">Частная <br>одиночная<br> деятельность</td>
</tr>
<tr>
<td align="center" rules="none" width="25%">Газета</td>
<td align="center" rules="none" width="25%">Радиостанция</td>
<td align="center" rules="none" width="25%">Блогеры</td>
</tr>
<tr>
<td align="center" rules="none">
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td align="center" rules="none">
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td align="center" rules="none">
блог - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td align="center" rules="none">
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
</tr>
</table>
</section>
<section id="content-tab2">
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="33.33%">Университет Единства</td>
<td align="center" rules="none" width="33.33%">Университет Магии</td>
<td align="center" rules="none" width="33.33%">Военно-магическая академия</td>
</tr>
<tr>
<td rules="none" align="center">
Ректор - <a href="https://australis.rusff.me/">Name Name[npc]</a><br>
Преподаватели - <a href="https://australis.rusff.me/">Name Name</a><br>
Студенты - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td rules="none" align="center">
Ректор - <a href="https://australis.rusff.me/">Qing Larra [npc]</a><br>
Зам. ректора - <a href="https://australis.rusff.me/profile.php?id=7">Kyrion Athaire</a><br>
Преподаватели - <a href="https://australis.rusff.me/profile.php?id=7">Kyrion Athaire</a><br>
Студенты - <a href="https://australis.rusff.me/profile.php?id=24">Mikael Lind</a><br>...
</td>
<td rules="none" align="center">
Ректор - <a href="https://australis.rusff.me/">Nicolas Stein[npc]</a><br>
Преподаватели - <a href="https://australis.rusff.me/profile.php?id=4">Zarian Athaire</a><br>
Кадеты - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
</tr>
<tr>
<td align="center" rules="none" width="33.33%">"Наследие"<br>орден Хронистов</td>
<td align="center" rules="none" width="33.33%">Школы<br>частные и муниципальные</td>
<td align="center" rules="none" width="33.33%">Прочее</td>
</tr>
<tr>
<td rules="none" align="center">
Глава - <a href="https://australis.rusff.me/">неизвестен</a><br>
Младший адепт - <a href="https://australis.rusff.me/profile.php?id=12"> Valdoria Dagar</a><br> <br>...
</td>
<td rules="none" align="center"> Муниципальная школа<br>
Директор - <a href="https://australis.rusff.me/">Name Name</a><br>
Преподаватели - <a href="https://australis.rusff.me/">Name Name</a><br>
Ученики - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td rules="none" align="center">
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
</tr>
</table>
</section>
<section id="content-tab3">
Вооружённые силы Альянса
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="25%">Драконы</td>
<td align="center" rules="none" width="25%">Тигры</td>
<td align="center" rules="none" width="25%">Львы</td>
<td align="center" rules="none">Крайты</td>
</tr>
<tr>
<td align="center" rules="none">
<a href="https://australis.rusff.me/">Name Name</a><br>
</td>
<td align="center" rules="none">
<a href="https://australis.rusff.me/profile.php?id=14">Kain Adams</a><br><br>
</td>
<td align="center" rules="none">
<a href="https://australis.rusff.me/profile.php?id=25">Boyd Barton</a><br>
<a href="https://australis.rusff.me/profile.php?id=3">Sole Rain</a><br>
</td>
<td align="center" rules="none">
<a href="https://australis.rusff.me/">Name Name</a><br>
</td>
</tr>
</table><hr>
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="50%">СБА</td>
<td align="center" rules="none" >Прочие</td>
</tr>
<tr>
<td align="center" rules="none">
Глава - <a href="https://australis.rusff.me/">NPC</a><br>
Оперативный отдел<br>
Агенты - <a href="https://australis.rusff.me/">Name Name</a><br>
Стажёры - <a href="https://australis.rusff.me/">Name Name</a><br>
Научный отдел<br>
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td align="center" rules="none">
Наёмный телохранитель - <a href="https://australis.rusff.me/profile.php?id=25">Boyd Barton</a><br>...
</td>
</tr>
</table>
</section>
<section id="content-tab4">
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="33.33%">"Holy sinner", бар</td>
<td align="center" rules="none" width="33.33%">"X-Race", автодром</td>
<td align="center" rules="none" width="33.33%">"Красный Обсидиан", клуб-казино</td>
</tr>
<tr>
<td rules="none" align="center">
Владелец - <a href="https://australis.rusff.me/profile.php?id=6">Kingshan Kirihara</a><br>...
</td>
<td rules="none" align="center">
Директор - <a href="https://australis.rusff.me/profile.php?id=13">Teige Kirihara</a><br>...
</td>
<td rules="none" align="center">
Владелец - <a href="https://australis.rusff.me/profile.php?id=7">Hassan Shafi Harper</a><br>
Управляющий - <a href="https://australis.rusff.me/profile.php?id=10">Noah Lorenzo</a><br>
Работники казино - ...<br>
Бармены - ...<br>
Танцовщицы и танцоры - ...<br>
Кормильцы и эскорт - ...<br>
</td>
</tr>
<tr>
<td align="center" rules="none" width="33.33%">Музыкальная группа "Rosenrot"</td>
<td align="center" rules="none" width="33.33%">Ночной клуб</td>
<td align="center" rules="none" width="33.33%"></td>
</tr>
<tr>
<td rules="none" align="center">
Лидер и солист - <a href="https://australis.rusff.me/profile.php?id=18">Alexander Dahl</a><br>...
</td>
<td rules="none" align="center">
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
<td rules="none" align="center">
</td>
</tr>
</table><hr>
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="33.33%">Похоронное агентство "Styx"</td>
<td align="center" rules="none" width="33.33%">Автомастерская "Iron Heart"</td>
<td align="center" rules="none" width="33.33%">Прочее</td>
</tr>
<tr>
<td rules="none" align="center">
Владелец - <a href="https://australis.rusff.me/profile.php?id=16">Viktor Krum</a><br>...
</td>
<td rules="none" align="center">
Владелица, механик - <a href="https://australis.rusff.me/profile.php?id=8">Nuori Athaire</a><br>
НПС (пока): Администратор - <a href="https://australis.rusff.me/viewtopic.php?id=80#p5590">Ксю</a>, Механик - <a href="https://australis.rusff.me/viewtopic.php?id=80#p5590">Арчи</a>, Химик - <a href="https://australis.rusff.me/viewtopic.php?id=80#p5590">Дрю</a>, Программист - <a href="https://australis.rusff.me/viewtopic.php?id=80#p5590">Тим</a><br>
</td>
<td rules="none" align="center">
Падре - <a href="https://australis.rusff.me/profile.php?id=9">Emilio Mendez</a><br>
Модель - <a href="https://australis.rusff.me/profile.php?id=17">Everett Krum-Rose</a><br>
Невольник - <a href="https://australis.rusff.me/viewtopic.php?id=53#p5152">Sky Lane</a><br>
Писатель - <a href="https://australis.rusff.me/profile.php?id=28">Ennae Yoon</a><br>
</td>
</tr>
</table>
</section>
<section id="content-tab5">
<table layout="fixed" width="100%" rules="none">
<tr>
<td align="center" rules="none" width="33.33%">Синдикат</td>
<td align="center" rules="none" width="33.33%">"Дети Субботы"</td>
<td align="center" rules="none" width="33.33%">Прочий криминал</td>
</tr>
<tr>
<td rules="none" align="center">
Глава семьи Крам - <a href="https://australis.rusff.me/profile.php?id=16">Viktor Krum</a><br>...
</td>
<td rules="none" align="center">
Покровитель - <a href="https://australis.rusff.me/profile.php?id=18">Alexander Dahl</a><br>
Лидер боевого крыла - <a href="https://australis.rusff.me/profile.php?id=18">Tikhon Naryan</a><br>...
</td>
<td rules="none" align="center">
должность - <a href="https://australis.rusff.me/">Name Name</a><br>...
</td>
</tr> <tr>
<td align="center" rules="none" width="33.33%"></td>
<td align="center" rules="none" width="33.33%">Пираты</td>
<td align="center" rules="none" width="33.33%"></td>
</tr>
<tr>
<td rules="none" align="center">
</td>
<td rules="none" align="center">
<a href="https://australis.rusff.me/profile.php?id=18">Tikhon Naryan</a><br>...
</td>
<td rules="none" align="center">
</td>
</tr>
</table>
</section>
</div>
</div>
</div>
<div class="clearer"></div>
<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');
#spiritworkroom {width: 100%;
height: 520px;
background: transparent;/* основной фон */
margin:auto;
box-shadow: 0 0 0 0px rgba(0,0,0,.2)
--aclr: #4d5556; /* цвет акцентов*/
--nacl: #6a7778; /* цвет неактивных акцентов*/}
.tabs {
padding: 0px;
margin: 0 auto;
}
.tabs>section {
display: none;
padding: 10px;
height: 500px;/* высота блока */
overflow-y: auto;
margin: 5px;
font-family: arial;/*текст на самих вкладках*/
font-size: 12px;
text-align: justify
}
.tabs>section>p {/* хз что это хд но лучше на трогать*/
margin: 0 0 5px;
line-height: 2;
color: #54ff00;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@keyframes fadeIn {/* хз что это хд но лучше на трогать*/
from {
transform: translate(-400px,0);
transform-origin: 50% 0%;
}
to {
transform: translate(0px,0);
}
}
.tabs>input {/* хз что это хд но лучше на трогать*/
display: none;
position: absolute;
}
.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #5f5f5f;
background: rgba(0,0,0,.1);/*фон неактивных закладок*/
background-blend-mode: multiply;
width: 20%;/*ширина закладки (делим 100% на их количество)*/
border: solid rgba(0,0,0,.2);/*нижняя граница между закладкой и вкладкой*/
border-width: 0px 0px 0px 0px;
left: 3px;
top: 6px;
position: relative;
font-family: pt sans;/*настройки шрифта заголовков*/
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
box-shadow: 0px 0 0 0 rgba(168,132,129,1) inset/*граница между закладками*/
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 100%;
height: 3px;
background: var(--nacl);/*всплывашка на закладке невыбранной в начале*/
left:0px;
bottom:0px;
transform: scaleX(0);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
.tabs>label:hover:after {transform: scaleX(1);
background: var(--nacl);}/*всплывашка на закладке невыбранной в конце*/
.tabs>label:hover {
color: #000000;
cursor: pointer;
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}
.tabs>input:checked+label {
color: #000000; /*цвет текста на выбранной закладке*/
background: transparent;/*фон выбранной закладки*/
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 100%;/*всплывашка выбранной закладки*/
height: 3px;
background: var(--aclr);
left:0px;
bottom:0px;
transform: scaleX(1);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
/*здесь надо продублировать элемент #tab1:checked~#content-tab1 для каждой вкладки заменив номер на соответствующий*/
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4, #tab5:checked~#content-tab5 {
display: block;
}
</style>[/html]
