<!--HTML--><div id="occup"><span class="actitle"></span><div class="inner"><!--фильтрация объектов по классу, адаптация by Alex Kolmar--><div class="chars-nav">
<a rel="all" class="current">Все персонажи</a>
<hr>
<a rel="pure">Чистые</a>
<a rel="unstable">Нестабильные</a>
<a rel="psi">Пси</a>
<hr>
<a rel="center">Центр</a>
<a rel="termitary">Термитник</a>
<a rel="industrial">Промзона</a>
<a rel="otherareas">Прочее</a>
<hr>
<a rel="unitichurch">Церковь Единства</a>
<a rel="inquisition">Инквизиция</a>
<a rel="corps">Корпус Содействия</a>
<hr>
<a rel="politics">Политика</a>
<a rel="medicine">Медицина</a>
<a rel="cityservices">Городские службы</a>
<a rel="education">Образование</a>
<a rel="students">Учащиеся</a>
<a rel="massmedia">Средства массовой информации</a>
<hr>
<a rel="scientific">Научная сфера</a>
<a rel="farmworkers">Работники Садов</a>
<a rel="industrialworkers">Работники Промзоны</a>
<hr>
<a rel="business">Бизнес</a>
<a rel="servicesector">Сфера обслуживания</a>
<a rel="creative">Творчесткие профессии</a>
<a rel="criminal">Незаконная деятельность</a>
<hr>
<a rel="other">Прочая деятельность</a>
    </div>
    <ul class="all-chars">


<li class="inquisition center pure all char"><a href="https://gmo.rusff.me/profile.php?id=5">Авель Мерсер [37]</a> – инквизитор, Слуга Веры</li>

<li class="medicine termitary unstable all char"><a href="">Адель Абернати [31] </a> – врач скорой помощи</li>

<li class="unstable termitary business criminal all char"><a href="https://gmo.rusff.me/profile.php?id=29">Ино Валентайн [26]</a> – помощница бизнесмена, Королева «Осиного Гнезда»</li>

<li class="inquisition center pure all char"><a href="https://gmo.rusff.me/profile.php?id=6">Каин Мерсер [37]</a> – инквизитор, Слуга Веры</li>

<li class="psi termitary corps all char"><a href="https://gmo.rusff.me/profile.php?id=25">Лигита Огнева [24]</a> – помощник дознавателя Корпуса Содействия</li>

<li class="pure center creative all char"><a href="https://gmo.rusff.me/profile.php?id=11">Рита Деверо [20]</a> – модель, знаменитость, золотая молодежь </li>

<li class="psi termitary corps all char"><a href="https://gmo.rusff.me/profile.php?id=26">Сара Хойт [19]</a> – Посвященная в Корпусе Содействия</li>

<li class="psi termitary creative criminal all char"><a href="https://gmo.rusff.me/profile.php?id=28">Сидни Бэйн [25]</a> – танцовщица, участница группировки «Осиное Гнездо»</li>

<li class="psi termitary criminal all char"><a href="https://gmo.rusff.me/profile.php?id=30">Соледад [??]</a> – личная игрушка</li>

</ul>
</div>
</div>

<style>

/* Список персонажей
-----------------------------------------------*/

ul.all-chars li, #occup .chars-nav a {
margin: 5px 0 !important;
}

#occup .chars-nav a:before {
    content:'';
    content: '\e061';
    font-family: Material Icons;
    opacity: 0.5;
    font-size: 8px;
    padding: 1px 2px 0 0;
    font-weight: bold;
}

#occup * {margin: 0;}

#occup {
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    max-width: 900px;
    height: auto;
    margin: 5px auto;
    box-sizing: border-box;
font-size: 12px;
}

#occup span {
  text-align: center;
  font: bold 14px/16px sans-serif;
  text-transform: uppercase;
  padding-bottom: 5px;
  width: 100%;
  display: block;
}

#occup > span  {
  font: bold 16px/20px sans-serif;
}

#occup a {
  text-decoration: none;
  font-weight: normal;
}

#occup .inner {
  display: flex;
  flex-direction: row;
  padding: 0;
  background: none;
  border: none;
}

#occup .inner .chars-nav, #occup .inner .all-chars {
    border: 1px solid var(--mainBorder);
    margin: 0 5px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

#occup .chars-nav {
    width: 35%;
    border-radius: 20px 0 0 20px;
}

#occup .chars-nav a {
  width: fit-content;
  cursor: pointer;
}

#occup .chars-nav .current {font-weight: bold;}

#occup .all-chars {
  width: 65%;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
    border-radius:  0 20px  20px 0;
}

#occup ul {
  list-style: none;
  padding: 0;
}

#occup .org {display: none;}

#occup .org p {font: normal 12px/16px sans-serif;}

</style>
<script type="text/javascript">
  $(function() {
    var newSelection = "";
    $(".chars-nav a").click(function(){
      $(".all-chars").show();
      $(".chars-nav a").removeClass("current");
      $(this).addClass("current");
      newSelection = $(this).attr("rel");
      $(".char").not("."+newSelection).hide();
      $("."+newSelection).show();
    });
  });
</script>