<!--HTML--><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>

<div id="occup">
	<span class="actitle"></span>
	<div class="inner">
    <!--фильтрация объектов по классу, адаптация by Alex Kolmar-->
<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>
    <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="">Авель Мерсер [38] </a> – инквизитор, Слуга Веры</li>
<li class="medicine termitary unstable all char"><a href="">Адель Абернати [27] </a> – врач скорой помощи</li>
<li class="unitichurch center pure all char"><a href="">Джон Смит [37] </a> – архимандрит, шоу-проповедник</li>
<li class="inquisition center pure all char"><a href="">Каин Мерсер [38] </a> – инквизитор, Слуга Веры</li>
<li class="unitichurch termitary psi all char"><a href="">Сара Сид [21] </a> – телохранитель</li>
<li class="creative center pure all char"><a href="">Эйва Доу [20] </a> – модель</li>
    </ul>
	</div>
</div>