Character Status

Код:
<!--HTML--><div id="spiritworkroom">
<div class="spiritsecond">
<div class="tabsi">
    <input id="tab1" type="radio" name="tabsi" checked>
    <label for="tab1">❖ Учёт персонажей</label>
 
    <input id="tab2" type="radio" name="tabsi">
    <label for="tab2">❖ Занятость</label>
 
    <section id="content-tab1">
<table>
<tbody>
<tr>
<td><strace>Vampires</strace>
<strace1> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=49">adrian raye</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=56">joseph marston</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=23">stefanie scaletta</a><br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=11">Xavier Arden</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=76">Jared Long</a><br>
</strace1></td>
<td><strace>Valkyries</strace>
<strace1>
❖ <a href="https://unholymess.rusff.me/profile.php?id=7">fox sinclair</a> <br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=92">shaye wang</a><br>
 </strace1></td>
<td><strace>Werewolves</strace>
<strace1>
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=12">John Sinclair</a> [волк]<br> 
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=47">francis elliot</a><br> [кошка] [стая Эллиотов]<br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=81">Hannah Alexander</a>  [волк] (стая - семья)<br>
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a> [волк]<br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=63">ronan mutt</a> [волк] <br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=84">vincenzo azzopardi</a> [медоед] (семья аццопарди)<br>
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=44">zachariah rose</a> [волк]<br>
 </strace1></td>
</tr>
<tr>
<td><strace>Witches & Warlocks</strace>
<strace1>❖ <a href="https://unholymess.rusff.me/profile.php?id=62">alex jackson</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=64">athena marlowe</a> [семья марлоу]<br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=71">Atlanta Barbeau</a><br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=53">bernadette duparc</a> [ковен «está morta»]<br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=28">cassandra marlowe</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=51">enzo de rosa</a> [клан вуду «кости лоа»]<br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=65">elizabeth coleman</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=9">Eva Knox</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=87">josephine sotomayor</a><br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=43">Luis Balee</a><br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=60"> monique trémaux</a><br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=77">sage carter</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=66">tyrone gill</a> [семейный ковен]<br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=72">Yooseok Kang</a><br> [ковен"Gemini"]
 </strace1></td>
<td><strace>Succubi</strace>
<strace1>
❖ <a href="https://unholymess.rusff.me/profile.php?id=48">Ariella Batel</a><br>
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=6">mars mayers</a> <br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=38">morvayne redfield</a><br>
❖ <a href="https://unholymess.rusff.me/viewtopic.php?id=176#p16069">ogonna kawu</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=50">Taron Chase</a><br> 
 </strace1></td>
<td><strace>Filomorts </strace>
 <strace1>❖ <a href="https://unholymess.rusff.me/profile.php?id=55">cornelia thornheart</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=57">winifred greyson</a><br> 
</strace1></td>
</tr>
<tr>
<td><strace>Cambions</strace>
<strace1> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=61">jerome hawkins</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=88">Kraven Morigan</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=4">leo ricci</a> <br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=18">nikky black</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=8">parker daniels</a> <br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=10">Rafaella Darling</a> <br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=39">rowan blackwood</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=29">thomas hawkins</a><br> 
</strace1></td>
<td><strace>Humans</strace>
<strace1> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=78">christeene vale</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=21">kate odaire</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=90">lucas gilmore</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=13">morgan ransom</a><br> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=25">maeve sawyer</a><br>
 </strace1></td>
<td><strace>Others</strace>
<strace1> 
❖ <a href="https://unholymess.rusff.me/profile.php?id=59">alan james</a> [дракон]<br> 

 </strace1></td>
</tr>
</tbody>
</table></blockquote>
</figure>    </section>  
    <section id="content-tab2">
<table>
<tbody>
<tr>
<td>
<strace>Стражи (СМС)</strace>
 <strace2>
❖ <a href="https://unholymess.rusff.me/profile.php?id=88">Kraven Morigan</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=4">leo ricci</a><br>
❖ <a href="https://unholymess.rusff.me/profile.php?id=63">ronan mutt</a><br>
</strace2></td>
<td><strace>Закон и порядок</b></strace>
 <strace2>
❖ Полиция, отдел по чрезвычайным происшествиям: <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a><br>
❖ Полиция Сан-Франциско, криминалист: <a href="https://unholymess.rusff.me/profile.php?id=53">bernadette duparc</a><br>
❖ юридическая фирма, младший партнёр: <a href="https://unholymess.rusff.me/profile.php?id=25">maeve sawyer</a><br>
</strace2></td>
</tr>
<tr>
<td><strace>Медицина</strace>
<strace2> 
❖ Больница Нового Орлеана, фельдшер в бригаде скорой помощи: <a href="https://unholymess.rusff.me/profile.php?id=90">lucas gilmore</a><br>
</strace2> </td>
<td><strace>Образование и культура</strace>
<strace2> 
❖ Джаз-певица, преподаватель вокала: <a href="https://unholymess.rusff.me/profile.php?id=71">Atlanta Barbeau</a><br>
❖ Реставратор, гостевой лектор в университете: <a href="https://unholymess.rusff.me/profile.php?id=77">sage carter</a><br>
❖ Студентка, работает в зоопарке Одубон: <a href="https://unholymess.rusff.me/profile.php?id=81">Hannah Alexander</a><br>
❖ школьница: <a href="https://unholymess.rusff.me/profile.php?id=87">josephine sotomayor</a><br>
❖ Новоорлеанский университет: <a href="https://unholymess.rusff.me/profile.php?id=21">kate odaire</a> (студентка сестринского дела), <a href="https://unholymess.rusff.me/profile.php?id=90">lucas gilmore</a> (студент, кардиология)<br>
❖ владелица картинной галереи: <a href="https://unholymess.rusff.me/profile.php?id=92">shaye wang</a><br>
</strace2></td>
</tr>
<tr>
<td><strace>Масс-медиа</strace>
<strace2>
❖ Утреннее шоу «The Big Easy Morning», ведущая: <a href="https://unholymess.rusff.me/profile.php?id=6">Mars Myers</a><br>
❖ Ведущая true crime подкаста <a href="https://unholymess.rusff.me/profile.php?id=8">parker daniels</a> <br> 
❖ Медийная личность, актриса, модель: <a href="https://unholymess.rusff.me/profile.php?id=10">Rafaella Darling</a> <br> 
❖ «the louisiana weekly», стажер: <a href="https://unholymess.rusff.me/profile.php?id=28">cassandra marlowe</a><br>
❖ Газета New Orlean`s Post, штатный журналист, автор тру крайм канала на ютуб: <a href="https://unholymess.rusff.me/profile.php?id=50">Taron Chase</a><br>
❖ Писатель, фрилансер: <a href="https://unholymess.rusff.me/profile.php?id=66">tyrone gill</a><br>
</strace2></td>
<td><strace>Сфера услуг</strace>
<strace2> 
❖ Антикварная лавка “Saint & Sinner Curiosities”, владелец: <a href="https://unholymess.rusff.me/profile.php?id=7">Fox Sinclair</a><br>
❖ Аукционный дом "crescent city antiques", оценщик:  <a href="https://unholymess.rusff.me/profile.php?id=64">athena marlowe</a><br>
❖ Бойцовский клуб для сверхъестественных существ "Vortex", владелец: <a href="https://unholymess.rusff.me/profile.php?id=11">Xavier Arden</a><br>
 ❖ горничная в Hotel Monteleone: <a href="https://unholymess.rusff.me/profile.php?id=9">Eva Knox</a><br>
❖ «Ransom charter & treks»: совладелица: <a href="https://unholymess.rusff.me/profile.php?id=13">morgan ransom</a><br>
❖ агентство по продаже недвижимости «hawkins & blum», вице-президент: <a href="https://unholymess.rusff.me/profile.php?id=29">thomas hawkins</a><br>
❖ Владелец блюз-бара "Cross Road": <a href="https://unholymess.rusff.me/profile.php?id=43">Luis Balee</a><br>
❖ Владелица и продавец в цветочной лавке "Venenum Hedera": <a href="https://unholymess.rusff.me/profile.php?id=55">cornelia thornheart</a><br>
❖ стрип-клуб “The Velvet Pact”: владелец <a href="https://unholymess.rusff.me/profile.php?id=49">adrian raye</a>; управляющая : <a href="https://unholymess.rusff.me/profile.php?id=48">Ariella Batel</a><br>
❖ владелица лавки магических трав: <a href="https://unholymess.rusff.me/profile.php?id=57">winifred greyson</a><br>
❖  Бар "Scatola di Pandora", владелец: <a href="https://unholymess.rusff.me/profile.php?id=51">enzo de rossa</a><br>
❖ клуб "Moonlight", владелец: <a href="https://unholymess.rusff.me/profile.php?id=76">Jared Long</a>, бармен: <a href="https://unholymess.rusff.me/profile.php?id=65">elizabeth coleman</a><br>
❖ лавка гаитянских сувениров и кофе «la douceur amère», владелица: <a href="https://unholymess.rusff.me/profile.php?id=60">monique trémaux</a><br>
❖ Торговый представитель: <a href="https://unholymess.rusff.me/profile.php?id=84">vincenzo azzopardi</a><br>
❖ Телохранитель в частной охранной фирме: <a href="https://unholymess.rusff.me/viewtopic.php?id=176#p16069">ogonna kawu</a><br>
</strace2></td>
</tr>
<tr>
<td><strace>Криминал</strace>
<strace2> 
❖ Чёрный рынок сверхъестественного, браконьер: <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a><br>
❖ наемник: <a href="https://unholymess.rusff.me/profile.php?id=18">nikky black</a><br>
❖ торговец редкими амулетами <a href="https://unholymess.rusff.me/profile.php?id=39">rowan blackwood</a><br>
❖ охотник за магическими долгами: <a href="https://unholymess.rusff.me/profile.php?id=56">joseph marston</a><br>
</strace2></td>
<td><strace>Другое</strace>
 <strace2>
❖ Книжный магазин, владелец: <a href="https://unholymess.rusff.me/profile.php?id=23">stefanie scaletta</a><br>
❖ Профессиональный трекер: <a href="https://unholymess.rusff.me/profile.php?id=44">zachariah rose</a><br>
❖ Писательница: <a href="https://unholymess.rusff.me/profile.php?id=55">cornelia thornheart</a><br>
❖ «Refuge du dragon», лендлорд <a href="https://unholymess.rusff.me/profile.php?id=59">alan james</a><br>
❖ Инвестор: <a href="https://unholymess.rusff.me/profile.php?id=61">jerome hawkins</a><br>
❖ Музыкант, разнорабочий: <a href="https://unholymess.rusff.me/profile.php?id=47">francis elliot</a><br>
❖ послушница при церкви: <a href="https://unholymess.rusff.me/profile.php?id=38">morvayne redfield</a><br>
❖ охотник: <a href="https://unholymess.rusff.me/profile.php?id=78">christeene vale</a><br>
</strace2></td>
</tr>
</tbody>
</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: 640px;
height: 700px;
margin:auto;}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}

.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}

.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}

.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}

.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)} 

.spiritsecond {    background: #a5a19f;
    width: 645px;
    margin: 0px;
    height: 680px;
    border-radius: 10px;
    /* box-shadow: 0px 1px 5px 1px; */
    border: solid 1px #968484;
    margin-top: 9px;
    position: absolute;
}


.tabsi {
	padding: 0px;
	margin: 0 auto;
}

.tabsi>section {
display: none;
    padding: 15px 15px 15px 20px;
    height: 600px;
    overflow-y: auto;
    margin-right: 3px;
    color: #000000;
    font-size: 11px;
    text-align: left;
}
.tabsi>section strace{
      text-align: center !important;
    font: 500 12px Alice !important;
    display: block;
    text-transform: uppercase;
    color: #21130f !important;
    border-radius: 4px;
    padding: 5px;
    background: url(https://forumstatic.ru/files/0014/e8/8c/55204.png);
}
.tabsi>section strace1{
    color: #21130f !important;
    display: block;
    height: 155px;
overflow: auto;
    text-transform: lowercase;
    padding: 4px;
    background: #b7b2af59;
    border-radius: 10px;
}
.tabsi>section strace2{
    color: #21130f !important;
    display: block;
    height: 105px;
    line-height: 145%;
overflow: auto;
    text-transform: lowercase;
    padding: 4px 6px;
    background: #b7b2af59;
    border-radius: 10px;
}

.tabsi>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
}

 
@keyframes fadeIn {
	from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
	}
	to {  
    transform: translate(0px,0);
	}
}

.tabsi>input {
	display: none;
	position: absolute;
}

.tabsi>label:first-of-type {box-shadow: none}

.tabsi>label {display: inline-grid
;
    margin: 0 -3px -10px;
    padding: 17px 0px;
    font-weight: 600;
    text-align: center;
    color: #000;
    /* border-bottom: solid 1px #3c2d2d; */
    width: 320px;
    left: 6px;
    top: 0px;
    position: relative;
    /* background: #000; */
    cursor: pointer;
    font-family: philosopher;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: lighter;
}
.tabsi>label:after {content: "";
display: block;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabsi>label:hover:after {transform: scaleX(1);}
.tabsi>label:hover {
	color:  #000000;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabsi>input:checked+label {
 color: #804510;
}
.tabsi>input:checked+label:after {content: "";
display: block;
position:absolute;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}


</style>