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=11">Xavier Arden</a><br>
</strace1></td>
<td><strace>Valkyries</strace>
<strace1>
❖ <a href="https://unholymess.rusff.me/profile.php?id=7">fox sinclair</a> <br> 
 </strace1></td>
<td><strace>Werewolves</strace>
<strace1>
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a> <br> 
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=12">John Sinclair</a> <br> 
 </strace1></td>
</tr>
<tr>
<td><strace>Witches & Warlocks</strace>
<strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=9">Eva Knox</a><br>
 </strace1></td>
<td><strace>Succubi</strace>
<strace1>
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=6">mars mayers</a> <br> 
 </strace1></td>
<td><strace>Filomorts </strace>
 <strace1>❖ <a href="https://unholymess.rusff.me/">name surname</a><br>
</strace1></td>
</tr>
<tr>
<td><strace>Cambions</strace>
<strace1> 
 ❖ <a href="https://unholymess.rusff.me/profile.php?id=4">leo ricci</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> 
</strace1></td>
<td><strace>Humans</strace>
<strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=13">morgan ransom</a><br> 
 </strace1></td>
<td></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=4">leo ricci</a><br>
</strace2></td>
<td><strace>Закон и порядок</b></strace>
 <strace2>
❖ Полиция, отдел по чрезвычайным происшествиям: <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a><br>
</strace2></td>
</tr>
<tr>
<td><strace>Медицина</strace>
<strace2> 
❖ <a href="https://unholymess.rusff.me/">name surname</a><br>
</strace2> </td>
<td><strace>Образование и культура</strace>
<strace2> 
❖ <a href="https://unholymess.rusff.me/">name surname</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> 
</strace2></td>
<td><strace>Сфера услуг</strace>
<strace2> 
❖ Антикварная лавка “Saint & Sinner Curiosities”, владелец: <a href="https://unholymess.rusff.me/profile.php?id=7">Fox Sinclair</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>
</strace2></td>
</tr>
<tr>
<td><strace>Криминал</strace>
<strace2> 
❖ Чёрный рынок сверхъестественного, браконьер: <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a><br>
</strace2></td>
<td><strace>Другое</strace>
 <strace2>
❖ <a href="https://unholymess.rusff.me/">name surname</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;
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>