<!--HTML-->
<div class='accordion2'>
  <div class='element'>
    <input type="checkbox" id="element1" />
    <label for="element1" class="header">Ратуша</label>
    <section class='content'>
    <p> <img src="http://funkyimg.com/i/2JifB.jpg" alt="lorem" align="left" style="margin: 10px 10px 0px 0px;"><p> Находится в самом центре города и является центром политической жизни. Верхние этажи отданы под залы встреч Совета Пяти, первый и второй этаж занимает кабинет мэра, подземные уровни отведены для Второго советника и его подчиненных. Именно здесь решаются все важные вопросы касательно политики, финансирования, благоустройства и жизнедеятельности города. </p>
<p>На входе, холле первого этажа можно изучить макет всего Сильвергарда. Макет живой, над ним восходят солнце и луна, идут снега и дожди, по ущельям текут реки, а в деревьях щебечут птицы.</p>
<p>Рядом с ратушей растет огромный дуб, обнесенный оградой. Табличка на ограде гласит «Дуб, Первый Советник, 16 октября 1888 года».</p>

    </section>
  </div>
  <div class='element'>
    <input type="checkbox" id="element2" />
    <label for="element2" class="header">Библиотека</label>
    <section class='content'>
      <p>Библиотека находится несколько в отдалении от города и являет собой целый комплекс зданий, соединенных между собой многочисленными мостами и переходами. Является не только хранилищем знаний, но и различных магических артефактов, результатов исследований магов и магических изобретений, не получивших популярности либо широкой огласки. Однако главными артефактами Библиотеки являются полки с книгами героев, содержащих полную историю конкретного персонажа. </p> 

<p><img src="http://funkyimg.com/i/2JiiF.jpg" alt="lorem" align="right" style="margin: 5px 0px -5px 10px"> Здание поделено на секции, которые находятся в ведении архивариусов. У каждой секции свой архивариус, который следит за происходящим на вверенной территории и докладывает Главному Библиотекарю. Архивариусы следят за перемещением книг персонажей и их изменениями. Например,если герою что-то угрожает, то его книга подает знак. Библиотека сама выбирает своих архивариусов среди подавших письменную заявку.</p>

<p>Помимо архивариусов в Библиотеке есть еще один житель - сипуха размером с человека. Огромная сова имеет доступ ко всем секциям. Иногда ее можно заметить даже читающей книги или расхаживающей по залам, но чаще всего она где-нибудь спит. Сипуха является помощником Главного Библиотекаря, но при этом обладает своим характером и далеко не всегда выполняет его поручения.</p>
    </section>
  </div>

<div class='element'>
    <input type="checkbox" id="element3" />
    <label for="element3" class="header">Здание конклава магов</label>
    <section class='content'>
     <p><img src="http://funkyimg.com/i/2Jihh.jpg" alt="lorem" align="right" style="margin: 0px 0px 0px 10px;">Самое загадочное место в городе: большинство стен внутри здания украшены фресками, сюжеты которых меняются. Странности всему этому добавляют еще три статуи, которые загадочным образом каждый день находятся у разных стен в разных позах.  Причины всего этого пока не установлены. </p> 
<p>В конклаве всегда происходит слишком много всего: то пол пропадет, то новые комнаты появятся. И это не считая того, что тут устраивают сами маги: взрывы, пожары, наводнения нашествия лягушек, мини-торнадо из морковки и все прочие сопутствующие магическим изысканиям вещи присутствуют в избытке.</p>

 <p><img src="http://funkyimg.com/i/2JihN.jpg" alt="lorem" align="left" style="margin: 0px 10px 0px 0px;">В здании конклава помимо магической лаборатории, занимающейся разработкой новых способов облегчить (или сильно усложнить - тут как выйдет) жизнь городу, находится центр учета и контроля магии, местное отделение госпиталя, комитет по защите магических животных и растений в пределах Сильвергарда, отдел, занимающийся содержанием под стражей осужденных магов, транспортный отдел и многие другие подразделения. Верхушку конклава составляют главы подразделений.</p>
    </section>
  </div>

<div class='element'>
    <input type="checkbox" id="element4" />
    <label for="element4" class="header">Полицейский участок</label>
    <section class='content'>
      <p>Казалось бы, какие преступления могут происходить в месте, где убийства априори невозможны? Вот только при этом полиции особо не отдохнуть: магия штука занятная, но в расследованиях крайне хлопотная.</p>

<p>Возглавляет правоохранительную систему Сильвергарда шериф. Сотрудники занимаются расследованием преступлений во всем Сильвергарде, на границах барьера,где главной задачей является изъятие запрещенных предметов, поиск уязвимостей барьера и предотвращение несанкционированных перемещений между Эдмонтоном и Сильвергарда, в их юрисдикции ряд случаев в Эдмонтоне и его окрестностях, так или иначе связанных с героями сказок.</p>

<p>Полиция Сильвергарда делится на два подразделения. Подразделение Асур (синяя форма) занимается расследованием дел как внутри Сильвергарда, так и дел, связанных с правонарушениями сказочными героями в Эдмонтоне. Подразделение Шемрок (зеленая форма) - занимается вопросами контроля и безопасности по обе стороны барьера. Они проводят досмотры входящих и выходящих, изымают запрещенные вещи и контролируют наличие документов, позволяющих выход.</p>
<center><img src="http://funkyimg.com/i/2JttV.jpg" alt="lorem" align="middle"></center>
    </section>
  </div>


<div class='element'>
    <input type="checkbox" id="element5" />
    <label for="element5" class="header">Центр адаптации новоприбывших</label>
    <section class='content'>
      <p>Адаптацией жителей в Сильверграде занимается Адаптационное ведомство, находящееся под руководством мэрии. Главное здание ведомства и его корпуса находится в нескольких километрах за чертой города. Именно сюда направляются все новоприбывшие сразу после досмотра у границ магического барьера.</p>

<p>Специалисты-адаптологи оказывают поддержку в поиске работы и жилья, помогают обзавестись социальными связями в Сильвергарде, знакомя старожилов и новеньких по принципу схожести интересов, или помогают найти других героев той же сказки/истории. Курс адаптации также включает в себя сведения о Сильвергарде и его законах, несколько экскурсий по городу и визит в прибрежные и горные районы. По окончании периода адаптации (обычно от одной до трех недель) каждому выпускнику назначается куратор, который еще месяц поддерживает своего подопечного. По истечении срока герой становится полноправным гражданином Сильвергарда.</p>

<p><img src="http://funkyimg.com/i/2Jj53.jpg" alt="lorem" align="left" style="margin: 0px 10px 0px 0px;"> Помимо работы в самом Сильвергарде у центра адаптации есть отделение в Эдмонтоне при посольстве Лихтенштейна, где временно базируются специалисты, работающие с семьями сказок и помогающие на этапе их взросления вне Сильвергарда. Одной из важных состовляющих работы центра является работа с теми героями сказок, кто по каким-то причинам остался без родителей и опекунов. Они перенаправляются в Сильвергард, где пристраиваются в принимающие или замещающие семьи вплоть до совершеннолетия. Принимающая  семья (в отличие от замещающей) не является приемной и не числится его полноправным опекуном, однако в обоих случаях семьи получают на ребенка дотации из бюджета города.</p>
    </section>
  </div>

<div class='element'>
    <input type="checkbox" id="element6" />
    <label for="element6" class="header">Школа и образование</label>
    <section class='content'>
      <p>Образование обязательно для всех. Единственная школа Сильвергарда  находится в огороженной парковой зоне для комфорта и безопасности детей. Добраться сюда можно через сеть порталов - один из них расположен прямо у вдоха школы, а также для желающих приезжать на велосипедах есть специально оборудованные парковки. Въезд в каретах на территорию запрещен.</p>
<center><img src="http://funkyimg.com/i/2Jj61.jpg" alt="lorem" align="middle" style="margin: 5px 10px 10px 10px;"> <img src="http://funkyimg.com/i/2JtbA.jpg" alt="lorem" align="middle" style="margin: 5px 10px 10px 10px;"></center>
<p>Школу посещают дети от 5 до 17 лет. Распределение по классам опирается на возраст. Набор дисциплин зависит от года обучения и включает в себя стандартный общеобразовательный пакет, а также историю, географию и устройство Сильвергарда, использование бытовых магических приборов и изучение местного бестиария. Некоторые предметы подразумевают экскурсии по Сильвергарду и его окрестностям. Дополнительно предусмотрены дисциплины для детей с магическими талантами.</p>

<p>Уроки идут в первой половине дня с 8.00 до 12.00, после чего дается полчаса на ланч. С 12.30 до 15.30 продолжаются занятия, с 16.00 начинаются факультативы по группам, куда входят спорт, магические занятия, филология и риторика, прикладное творчество и ремесла, кулинария. На территории парка есть пруд и спортивная площадка, а также обеденная зона на свежем воздухе, которая благодаря магическому куполу защищена от дождя и снега. Столовой нет, и ланчи нужно брать с собой.</p>

<p>Последние два года школьники могут выбрать пройти спецкурс, позволяющий поехать на дальнейшее обучение в университет Альберты в качестве иностранного студента из Лихтенштейна. Но если страшеклассник желает продолжить обучение в Сильверграде у него есть возможность устроиться на стажировку в интересующей его области, где его приписывают к одному из сотрудников, что позволяет сразу окунуться в будущую профессию.</p>
    </section>
  </div>


  
</div>
</div>
 <style>
.accordion2 {
  margin: 0 auto;
}
input[type='checkbox'], input[type='radio'] {
  display: none;
}
.element {
  margin-bottom: 2px;
}
.header {
  background: #baaf9c;
  padding: 8px;
  border-bottom: 0;
  display: block;
  position: relative;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-family:"Palatino Linotype"; 
  font-size:16px;
  color:#724430;
  transition: all 0.5s ease-in-out 0s;
}

.header:after {
  border: 6px solid transparent;
  position: absolute;
  content: "";
  border-top-color: #000;
  right: 10px;
  top: calc(50% - 3px);
}

input[type="checkbox"]:checked ~ .header, input[type="radio"]:checked ~ .header {
  background: #221a14;
  color: #b7b08d !important;
  border-color: #000;
}
input[type="checkbox"]:checked ~ .header:after,
input[type="radio"]:checked ~ .header:after {
  border-top-color: transparent;
  border-bottom-color: #FFF;
  top: calc(50% - 8px);
}
input[type="checkbox"]:checked ~ .content, input[type="radio"]:checked ~ .content {
  max-height: 650px;
  margin-top: 0px;
  opacity: 1;
  padding: 10px;
  transition: max-height 0.5s linear, opacity 1s  0.25s linear;
  overflow-y: auto;
}

input[type="checkbox"] ~ .content, input[type="radio"] ~ .content {
  max-height: 0px;
  opacity: 0;
  transition: max-height 0.5s linear;
  overflow-y: auto;
  background: #bcb69b;
}

</style>