[html]<script>$(document).ready(function(){

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

})

</script><style>::-webkit-scrollbar-thumb {
background-color: #222;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
height: auto;
}

::-webkit-scrollbar {
width: 5px;
height: 5px;
border: 2px solid #eee;
background-color: #999;
}

::-webkit-scrollbar-corner {
background-color: #eee;
height: 4px;
width: 4px;
}

body { margin-top: 100px; font-family: 'roboto', serif; line-height: 1.5; font-size: 10px; }

.container{ width: 600px; height: auto; margin: 0 auto; }
</style>

<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">

<div class="container">

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1"><s>&nbsp;&nbsp;&nbsp;&nbsp;</s> &nbsp;&nbsp;<b>I. instruction</b></li>
</ul>

<div id="tab-1" class="tab-content current">
<div class="title">&. ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ ТЕМЫ :</div>
<b>занятость и список ролей</b> -
    <p>во вкладках сверху можно увидеть разные отрасли ; в любые из них можно добавить отдельные категории - так, например, при желании можно добавить больше достопримечательностей и так далее ; заполняется строго по шаблону ; BB-коды не работают, для оформления пользуйтесь html - если код неправильно оформлени, администрация имеет право его не ставить, а сообщить в плюсе к сообщению об ошибке ;
   

</div><!-- container -->[/html]

[html]<script>$(document).ready(function(){

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

})

</script>

<style>::-webkit-scrollbar-thumb {
background-color: #222;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
height: auto;
}

::-webkit-scrollbar {
width: 5px;
height: 5px;
border: 2px solid #eee;
background-color: #999;
}

::-webkit-scrollbar-corner {
background-color: #eee;
height: 4px;
width: 4px;
}

body { margin-top: 100px; font-family: 'roboto', serif; line-height: 1.5; font-size: 10px; }

.container{ width: 600px; height: auto; margin: 0 auto; }

ul.tabs { margin: 0px; padding: 0px; list-style: none; text-align: right; background-color: #000; padding-right: 30px; border-bottom: 1px solid #fff; }

ul.tabs li{     background: none;
    color: #666;
    display: inline-block;
    padding: 0px 0px;
    margin-top: 0px;
    cursor: crosshair;
    font-family: 'istok web';
    font-weight: 700;
    text-transform: uppercase;
    font-size: 7px;
    letter-spacing: 1px;
    background-color: #100b09;
    z-index: 10000;}
 
ul.tabs li b { font-family: 'roboto'; font-weight: 400; color: #eee; }

ul.tabs li.current{ background: #000; color: #eee; }

.tab-content { display: none; background: #f8f8f8; padding: 20px 40px 20px 40px; }

.tab-content.current { display: inherit; }

#tab-1, #tab-2, #tab-3, #tab-4 { height: 300px; text-align: justify; }

#tab-1 { overflow: hidden }

#tab-1 img { margin-top: -20px; margin-left: -40px; width: 600px; overflow: hidden; height: 360px; margin-top: -20px; -webkit-filter: grayscale(100%); filter: grayscale(100%);  }

#tab-1 h1 { font-family: 'playfair display'; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 200px; color: #fff; z-index: 1000; float: left; margin-left: 10px; margin-top: 90px; position: absolute; opacity: 0.8; }

.mein h4 { font-family: 'roboto'; font-size: 7px; text-transform: uppercase; color: #fff; margin-top: 10px; font-weight: 400; }

.mein h4 b { font-weight: 900; }

.mein { font-family: 'times'; font-size: 9.5px; font-weight: 400; letter-spacing: 1px; text-transform: normal; width: 360px; text-align: justify; line-height: 1.2em; margin-top: 120px; color: #fff; z-index: 1000; float: left; margin-left: 10px; position: absolute; opacity: 0.8; }

</style>

<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">

<div class="container">

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1"><s>&nbsp;&nbsp;&nbsp;&nbsp;</s> &nbsp;&nbsp;<b>I. THE BASIC</b></li>
    <li class="tab-link" data-tab="tab-2"><s>&nbsp;&nbsp;&nbsp;&nbsp;</s> &nbsp;&nbsp;<b>II. CITY</b></li>
    <li class="tab-link"  style="padding-left: 25px!important;" data-tab="tab-3"><s>&nbsp;&nbsp;&nbsp;&nbsp;</s> &nbsp;&nbsp;<b>III. MYSTIC </b></li>
    <li class="tab-link" data-tab="tab-4"><s>&nbsp;&nbsp;&nbsp;&nbsp;</s> &nbsp;&nbsp;<b>IV. WORK</b></li>
<li class="tab-link" style="padding-left: 25px!important;" data-tab="tab-5"><s>&nbsp;&nbsp;&nbsp;&nbsp;</s> &nbsp;&nbsp;<b>IV. CREATURES</b></li>
</ul>

<div id="tab-1" class="tab-content current"><h1>РАБОТА В БАМБЕРГЕ</h1>
    <div class="mein">Стоящий на семи холмах город издавна стал местом обитания нечисти ; во время Второй Мировой Войны ведьмы, оборотни и вампиры объединились, чтобы защитить свой город — благодаря им город остался нетронутым, избежал бомбёжек и понёс малочисленные потери. Нечисть также облюбовала этот город, потому что именно здесь мэрия и её администрация уже продолжительное время с удовольствием сотрудничает с главами ковенов, альфами стай и советом вампиров. Мэрия передала в руки нечисти следующие территории :<p><h4><s>&nbsp;&nbsp;&nbsp;&nbsp;</s>&nbsp;&nbsp;<b>CITY</b> ДОСТОПРИМЕЧАТЕЛЬНОСТИ&nbsp;&nbsp;<s>&nbsp;&nbsp;&nbsp;&nbsp;</s>&nbsp;&nbsp;<b>MYSTIC</b> ТЕРРИТОРИЯ НЕЧИСТИ&nbsp;&nbsp;<s>&nbsp;&nbsp;&nbsp;&nbsp;</s>&nbsp;&nbsp;<b>WORK</b> ОБЩИЕ ПРОФЕССИИ&nbsp;&nbsp;<s>&nbsp;&nbsp;&nbsp;&nbsp;</s>&nbsp;&nbsp;<b>CREATURES</b> СПИСОК НЕЧИСТИ</h4></div>
<img src="https://forumupload.ru/uploads/0017/f2/a8/2/627433.jpg" width="620">
</div>
<div id="tab-2" class="tab-content">
    <div class="title">&. ДОСТОПРИМЕЧАТЕЛЬНОСТИ</div>
<p>Архитектура города уцелела в военное время - кто-то считает, что чудом, кто-то знает, что нечисть объединилась во время Второй Мировой, чтобы защитить город. Достопримечательности Бамберга были бережно сохранены и сейчас считаются наследием всего человечества.
<table layout=fixed width=100%>
<tr valign=top>
  <td><div class="bill-7">Императорский собор Бамберга :</div>
<div class='bill-6'><br><br>главный священник : акция
<br>священник :
<br>регент хора :
<br>хористы :
</div></td>
<td><div class="bill-7">Исторический музей Бамберга :</div>
<div class='bill-6'>
<br>
<br>директор :
<br>секретарь :
<br>экскурсоводы :
<br>реставраторы :
<br>смотрители :
</div></td>
<td><div class="bill-7">Международный Дом деятелей искусств :</div>
<div class='bill-6'>
<br>
<br>директор : акция
<br>секретарь :
<br>администратор :
<br>стипендиаты :
<br>сотрудники :
</div></td>
<tr>
</table></div>
<div id="tab-3" class="tab-content">
   <div class="title">&. ТЕРРИТОРИИ НЕЧИСТИ</div>
      <p>По завершению Второй Мировой войны мэр города передал нечисти в полное распоряжение ( с условием не нарушать законы города ) несколько территорий - теперь на них находятся важные места собраний и силы, которые бережно охраняются ;
<table layout=fixed width=100%>
<tr valign=top>
  <td><div class="bill-7">Кладбище Drudenhaus :</div>
<div class="bill-6"><i>[ принадлежит ведьмам ]</i><br>
<br>смотритель :
<br>могильщики :
<br>сторожи :
</div></td>
<td><div class="bill-7">Замок Altenburg :</div>
<div class="bill-6"><i>[ принадлежит совету вампиров ]</i>
<br>
<br>совет вампиров :
<br>судьи :
<br>охранники тюрьмы :
<br>следователи :
<br>каратели :
</div></td>
<td><div class="bill-7">Национальный парк <br>Sonnentempel Im Hain :</div>
<div class="bill-6"><i>[ принадлежит оборотням ]</i>
<br>
<br>смотритель :
<br>сотрудники :
</div></td>
<tr>
</table>
   <div class="title">&. Кладбище Drudenhaus ( Drudenhaus (Malefizhaus, Trudenhaus, Hexenhaus, Hexengefängnis ) :</div>
<p>Тюрьма для обвинённых в колдовстве женщин, существовавшая в Бамберге с 1627 по 1632 года ; тюрьма действительно служила своей цели и практически все находящиеся в ней были способны колдовать. Ведьм пытали и пытались заставить их использовать силы на благо церкви, однако большинство ведьм отказывалось сотрудничать. В настоящий момент на месте, где когда-то была тюрьма, находится частное кладбище, принадлежащее ведьмам, где они хоронят своих умерших, чтобы не терять с ними связь и черпать их силу. Место считается священным и бережно защищено от нечисти — ни один вампир или оборотень не могут туда попасть без разрешения главы ковена.
<div class="title">&. Замок Altenburg :</div>
<p>Замок, некогда принадлежавший правящей Бамбергом семье Бишопов ; находится на самом высоком холме из семи, что 'поддерживают' Бамберг. Предположительно замок был построен в 1109-ом году. В 1553-ом году впервые был использован как тюрьма, которой управляли вампиры, чтобы питаться заключёнными, спустя сто лет замок сгорел и до сих пор неизвестно почему — ходят слухи, что сам Влад Дракула приложил к этому руку. В 1801-ом был отреставрирован и заново отдан в руки Совета Вампиров, которые сделали из него свою западно-европейскую штаб-квартиру, которая существует и по сей день — здесь же находится тюрьма для вампиров, которых арестовали за нарушение кодекса.
<div class="title">&. Sonnentempel Im Hain & Bruderwald :</div>
<p>Национальные парки, которые на данный момент принадлежат оборотням и часто служат местом их общих собраний ; в остальных случаях близлежащие к городу территории поделены на принадлежащие стаям земли, где мэрией был введён закон о запрете охоты, чтобы люди случайно не ранили и не спровоцировали кого-то из оборотней.

</div>
<div id="tab-4" class="tab-content">
    <div class="title">&. ОБЩИЕ ПРОФЕССИИ</div>
      <p>Несмотря на присутствие в городе нечисти, Бамберг живёт за счёт своей инфраструктуры, которая в большинстве своём занята простыми людьми ; тем не менее многие вампиры, ведьмы и оборотни становятся работниками в самых разных отраслях, чтобы поддерживать человеческий образ жизни ;
<table layout=fixed width=100%>
<tr valign=top>
  <td><div class="bill-7">Государственная служба :</div>
<div class="bill-6"><i>[ мэрия, полиция, университет и так далее ; профессии оплачиваемые государством ]</i><br>
<br>мэр : акция
<br>начальник полиции : акция
<br>директор университета : акция
<br>профессия :
</div></td>
<td><div class="bill-7">Частный <br>бизнес :</div>
<div class="bill-6"><i>[ бары, салоны красоты, магазины и так далее ; профессии связанные с частными компаниями - продавцы, бармены, владельцы бизнесов ]</i>
<br>
<br>профессия :
</div></td>
<td><div class="bill-7">Самозанятые :</div>
<div class="bill-6"><i>[ свободные художники, дизайнеры - фриланс ; преступники - наркоторговцы, гонщики и так далее ]</i>
<br>
<br>профессия :
</div></td>
<tr>
</table>
</div>
<div id="tab-5" class="tab-content">
    <div class="title">&. СПИСОК НЕЧИСТИ</div>
      <p>Несмотря на своё магическое происхождение, нечисти так же не чужда статистика и подсчёт 'своих' ;

<div class='title'>ВАМПИРЫ :</div>
<table layout=fixed width=100%>
<tr valign=top>
  <td><div class="bill-7">КЛАН 'название клана'</div>
<div class="bill-6"><i>[ описание клана ]</i><br>
<br>глава клана :
<br>члены клана :
</div></td>
<td><div class="bill-7">КЛАН 'название клана'</div>
<div class="bill-6"><i>[ описание клана ]</i><br>
<br>глава клана :
<br>члены клана :
</div></td>
<td><div class="bill-7">КЛАН 'название клана'</div>
<div class="bill-6"><i>[ описание клана ]</i><br>
<br>глава клана :
<br>члены клана :
</div></td>
  <td layout=fixed width=30%><div class="bill-7">ОДИНОЧКИ</div>
<div class="bill-6"><i>[ X - ВАМПИР ЯВЛЯЕТСЯ ПРЕСТУПНИКОМ И ОБЪЯВЛЕН В РОЗЫСК СОВЕТОМ ]</i><br>
<br>
</div></td>
<tr>
</table>

<div class='title'>оборотни :</div>
      <table layout=fixed width=100%>
<tr valign=top>
  <td><div class="bill-7">СТАЯ 'название стаи'</div>
<div class="bill-6"><i>[ описание стаи ]</i><br>
<br>альфа :
<br>бета :
<br>члены стаи :
</div></td>
<td><div class="bill-7">СТАЯ 'название стаи'</div>
<div class="bill-6"><i>[ описание стаи ]</i><br>
<br>альфа :
<br>бета :
<br>члены стаи :
</div></td>
<td><div class="bill-7">СТАЯ 'название стаи'</div>
<div class="bill-6"><i>[ описание стаи ]</i><br>
<br>альфа :
<br>бета :
<br>члены стаи :
</div></td>
  <td layout=fixed width=30%><div class="bill-7">ОДИНОЧКИ</div>
<div class="bill-6"><br>
<br>name surname
</div></td>
<tr>
</table>
      <div class='title'>ведьмы / ведьмаки :</div>
      <table layout=fixed width=100%>
<tr valign=top>
  <td><div class="bill-7">КОВЕН 'название ковена'</div>
<div class="bill-6"><i>[ описание ковена ]</i><br>
<br>глава ковена :
<br>члены ковена :
<br>ученики ковена :
</div></td>
<td><div class="bill-7">КОВЕН 'название ковена'</div>
<div class="bill-6"><i>[ описание ковена ]</i><br>
<br>глава ковена :
<br>члены ковена :
<br>ученики ковена :
</div></td>
<td><div class="bill-7">КОВЕН 'название ковена'</div>
<div class="bill-6"><i>[ описание ковена ]</i><br>
<br>глава ковена :
<br>члены ковена :
<br>ученики ковена :
</div></td>
  <td layout=fixed width=30%><div class="bill-7">ОДИНОЧКИ</div>
<div class="bill-6"><br>
<br>name surname
</div></td>
<tr>
</table>
</div>

</div><!-- container -->[/html]

Код:
место работы, раса, принадлежность клану-ковену-стае - <a href="ссылка на профиль">имя фамилия английском</a>