<!--HTML-->
<style type="text/css">
.post-content .glossary-container {
background-color: #434465;
padding: 20px;
width: 600px;
box-shadow: inset 0 0 9px black, 0 0 2px black;
color: #c1c7e7;
background: url('http://funkyimg.com/i/2gpFo.jpg') top center !important;
border: 1px solid #878fbc;
font-size: 11px;
font-family: verdana;
text-shadow: 0 0 2px black;
}

.post-content .glossary-container a{
color: #bd68a4;
}

.post-content .glossary-container a:hover{
color: #6875bd;
}

.post-content .glossary-main {
padding-left: 10px !important;
padding-right: 10px !important;
background: rgba(131, 125, 164, 0.04);
}

.post-content .glossary-relative {
  background-color: #171420;
  position: relative;
  padding: 15px;
  overflow: hidden;
}

.post-content .glossary-relative a{
color: #6875bd !important;
}

.post-content .glossary-relative a:hover{
color: #bd68a4 !important;
}


.post-content .glossary-menu {
  table-collapse: collapse;
  width: 100%;
}

.post-content  .glossary-menu__item {
background-color: RGBA(112, 122, 185, 0.28);
border-bottom: 3px solid #171420 !important;
color: #c1c7e9;
font-family: Arial, san-serif;
padding: 15px !important;
text-transform: uppercase;
text-align: center;
transition: 0.3s ease;
}

.glossary-menu__item.back {
  background-color: rgba(255, 255, 255, 0);
  border: none !important;
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #bd68a4;
  display: none;
  padding: 0;
  width: 100px;
}

.glossary-menu__item:hover {
  opacity: 0.7;
  cursor: pointer;
}

.post-content .glossary-menu__item:first-child {
  border-right: 40px solid #171420 !important;

}

.glossary-links-category {
  display: none;
}

.glossary-links-category a {
  display: block;
  text-align: center;
}

.glossary-links-category a {
  font-size: 17px;
}

.glossary-links-category a:hover {
  opacity: 0.7;
}
</style>
<div class="glossary-container">
  <p class="glossary-main"><p align="right"><font size="1px">Идея взята с форума <a href="http://neopolis.rusff.me/viewtopic.php?id=964#p68917">Неополис</a> с разрешения администрации</align></font></p><br>
Mass Effect - игра, во вселенной которой есть множество белых пятен, существование которых признано самими разработчиками игры. Для того, чтобы ролевая игра на основе этой вселенной имела целостный характер, мы предлагаем вам поучаствовать в создании этой темы.<br>
Суть проста: здесь можно рассказать другим игрокам о каком-то аспекте этого мира, который придумали вы сами во время игры или просто так. Это может быть что угодно: торговая марка, популярный сериал, известная на всю галактику знаменитость и так далее. <br>
Сообщения в этой теме проходят модерацию. В конце проверенного и одобренного сообщения появится соответствующая печать, а если сообщение модерацию не проходит, то будет удалено.
<br><br>
Пример оформления:<br>
<b>Название</b> - И вся информация о том, о чем хотите рассказать. Представьте, что составляете статью на википедии (:
<br><br>
<b>Источник:</b> ссылка на пост, в котором появляется эта информация. Если кусочек лора, о котором вы пишете - полет фантазии, а не плод игры, можно этот пункт убрать вовсе.
  </p>
  <div class="glossary-relative">
   <table class="glossary-menu">
     <tr class="glossary-menu__row">
      <td class="glossary-menu__item" data-category="politics" onclick="showGlossaryLinks(this)">Политика и история</td>
      <td class="glossary-menu__item" data-category="persons" onclick="showGlossaryLinks(this)">Известные личности</td>
    </tr>
    <tr class="glossary-menu__row">
      <td class="glossary-menu__item" data-category="culture" onclick="showGlossaryLinks(this)">Массовая культура</td>
      <td class="glossary-menu__item" data-category="places" onclick="showGlossaryLinks(this)">Места</td>
    </tr>
    <tr class="glossary-menu__row">
      <td class="glossary-menu__item" data-category="home" onclick="showGlossaryLinks(this)">Быт</td>
      <td class="glossary-menu__item" data-category="events" onclick="showGlossaryLinks(this)">Лента происшествий</td>
    </tr>
    <tr class="glossary-menu__col">
      <td class="glossary-menu__item" data-category="technology" onclick="showGlossaryLinks(this)">Технологии</td>
      <td class="glossary-menu__item" data-category="organization" onclick="showGlossaryLinks(this)">Организации</td>
    </tr>
    <tr class="glossary-menu__col">
      <td class="glossary-menu__item" data-category="nature" onclick="showGlossaryLinks(this)">Флора и фауна</td>
      <td class="glossary-menu__item" data-category="galaxy" onclick="showGlossaryLinks(this)">Загадочная галактика</td>
    </tr>
  </table>
  <div class="glossary-links-category" data-category="politics">
      <a href="#">Ссылка</a>
    </div>
    <div class="glossary-links-category" data-category="persons">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700180">Уильям "Пегас" Гаст</a>
    </div>
    <div class="glossary-links-category" data-category="culture">
      <a href="#">Ссылка</a>
    </div>
    <div class="glossary-links-category" data-category="places">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700214">Бар "На конце Вселенной"</a>
    </div>
    <div class="glossary-links-category" data-category="home">
      <a href="#">Ссылка</a>
    </div>
    <div class="glossary-links-category" data-category="events">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700120">Взрыв на Тессии</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700120">Варфоломеевская ночь</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700120">Процесс над лондонским похитителем</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700120">Трагедия на Гавайях</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700120">Дикари в наше время</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700123">Необычное включение</a>
    </div>
    <div class="glossary-links-category" data-category="technology">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700140">Турианский челнок LH-14 "Птерос".</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700176">Наркотик "Изумрудные облака"</a>
    </div>
    <div class="glossary-links-category" data-category="organization">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700102">Компания "Надёжные руки"</a>
       <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700145">Структура Турианской Армии</a>
       <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700173">Секта фанатичных ханаров-защитников природы на Новерии</a>
    </div>
    <div class="glossary-links-category" data-category="nature">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700112">Хищник из Сабарика</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700113">Арвунский лев</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700174">Растение-реликт "Времена года"</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700175">Рыба-сюрприз</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700178">Лакримида</a>
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700181">Хищники-невидимки</a>
    </div>
    <div class="glossary-links-category" data-category="galaxy">
      <a href="http://masseffectfromashes.ru/viewtopic.php?id=7025#p700096">Раса Рэлой и Турвесс</a>
    </div>
    <div class="glossary-menu__item back" data-category="back" onclick="showGlossaryLinks(this)">
      << Назад
    </div>
  </div>
</div>
<script type="text/javascript">
function showGlossaryLinks(el) {
    var currentEl = $(el);
    var category = currentEl.attr('data-category');
    var relative = currentEl.closest('.glossary-relative');
    var menu = relative.find('.glossary-menu');

    relative.find('.active').fadeOut(0).removeClass('.active');

    if (category === 'back') {
        currentEl.css('display', 'none');
        menu.fadeIn(300);
    } else {
        relative.css('height', menu.height() + 'px');
        menu.fadeOut(200, function() {
            relative.find('.glossary-menu__item.back').css('display', 'block');
            relative.find('.glossary-links-category[data-category="' + category + '"]').fadeIn(300).addClass('active');
        });
    }
};
</script>