[html]<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tablet {
    background-image: url(https://forumupload.ru/uploads/001b/ce/b4/4/104993.png);
    width: 700px;
    height: 920px;
    margin-left: 20px;
}

.tabbed > input {
    display: none;
}

.tabbed > label {
    margin-top: 87px;
    margin-left: 43px;
    margin-bottom: -70px;
    display: block;
    padding-top: 10px;
    text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
    cursor: pointer;
    z-index: 1;
}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
    background: transparent;
    color: #191970;
    height: 30px;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
    background: #A02223 !important;
    color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
    background: transparent;
    color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {
    grid-area: tabs-body;
}

/* Имена переключателей слева */
#nav-left-1 {
    grid-area: nav-left-1;
}

#nav-left-2 {
    grid-area: nav-left-2;
}

#nav-left-3 {
    grid-area: nav-left-3;
}

#nav-left-4 {
    grid-area: nav-left-4;
}

#nav-left-5 {
    grid-area: nav-left-5;
}

#nav-left-6 {
    grid-area: nav-left-6;
}

#nav-left-7 {
    grid-area: nav-left-7;
}

#nav-left-8 {
    grid-area: nav-left-8;
}

#nav-left-9 {
    grid-area: nav-left-9;
}

#nav-left-10 {
    grid-area: nav-left-10;
}

.tabs-body {
    width: auto;
    position: relative;
}

.tabs-body > div {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.4em;
    opacity: 0;
    width: auto;
    height: 125%;
    padding: 10px;
    z-index: 0;
    margin-top: 44px;
    margin-left: 0px;
    margin-right: 55px;
}

/* Переключатели */

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

    /* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
    transform: translateY(0px);
    transform: translateX(0%);
    opacity: 1;
    z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
}
</style>

<!-- В пост. Только слева. (done by Kolobdur) -->
<style>
.tabbed {
    display: grid;
    grid-template: /* навигация слева и поле */ "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-5 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-6 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-7 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-8 tabs-body tabs-body tabs-body tabs-body" 1fr
         /* Колонки */
         / 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
}
</style>

<div class="tablet">
<div class="tabbed">
    <!-- Навигация слева -->
    <!-- Слева 1 -->
    <input type="radio" name="tabs-body" id="nav-left-1" checked>
    <label for="nav-left-1">Терминология</label>
    <!-- Слева 2 -->
    <input type="radio" name="tabs-body" id="nav-left-2">
    <label for="nav-left-2">Пистолеты и револьверы</label>
    <!-- Слева 3 -->
    <input type="radio" name="tabs-body" id="nav-left-3">
    <label for="nav-left-3">Пистолеты-пулемёты</label>
    <!-- Слева 4 -->
    <input type="radio" name="tabs-body" id="nav-left-4">
    <label for="nav-left-4">Ружья\дробовики</label>
    <!-- Слева 5 -->
    <input type="radio" name="tabs-body" id="nav-left-5">
    <label for="nav-left-5">Карабины\МГО</label>
    <!-- Слева 6 -->
    <input type="radio" name="tabs-body" id="nav-left-6">
    <label for="nav-left-6">Штурмовые винтовки</label>
    <!-- Слева 7 -->
    <input type="radio" name="tabs-body" id="nav-left-7">
    <label for="nav-left-7">Винтовки</label>
    <!-- Слева 8 -->
    <input type="radio" name="tabs-body" id="nav-left-8">
    <label for="nav-left-8">Тяжёлое вооружение</label>
    <!-- Слева 9 -->
    <input type="radio" name="tabs-body" id="nav-left-9">
    <label for="nav-left-9">Взрывчатка</label>

    <div class="tabs-body">
    <!-- Контент вкладок слева -->
    <div class="body-left-1">
        <table width=100% ; style="color:#000" ; bgcolor="#959D9F" ; border="1px" ; bordercolor="#000" ;>
        <td>Автор: Unk</td>
        <td>Дата: 29.08.2123</td>
        <td>Просмотры: 122k</td>
        <td>Рейтинг: ★★★★☆</td>
        </table>
        <b>Здесь общее название</b>
        <br><i>1.</i>

        <br><br>
        <p align="justify"> 2.

        <br><br>Термины
        <br><br>Больше терминов. Без прокрутки никаки. Хайд уходит за пределы.

        <br><br>Грустить.</p></div>

    <div class="body-left-2">
        <table width=100% ; style="color:#000" ; bgcolor="#959D9F" ; border="1px" ; bordercolor="#000" ;>
        <td>Автор: Unk</td>
        <td>Дата: 29.08.2123</td>
        <td>Просмотр: Conf.</td>
        <td>Доступ: Разрешён.</td>
        </table>
        <b>“Пистолеты"</b>
        <br><i>FIX.</i>
       
        <br><br>
        <p align="justify"> Калибр: 9x19, .45.
        <br><br>Емкость магазина: 17, 15
        <br><br>Габариты в мм. (длина*ширина*высота): 195*40*161 (уточнить про флуктуации на разных моделях,
        но стоит ли оно того?)
        <br><br>Особенности использования:
        <br><br>Доступность:
        <br><br>Допуск:
        <br><br>Текст рыба: Самозарядный пистолет, разработанный в Цюрихе на основе различных технических
        решений ушедшего века и производимый повсеместно в мегакомлпексах. Адаптирован для использования
        правшами и левшами, а также оборудован планками Пикатины для ношения различных приборов. Был принят
        на вооружение после специализированного отбора и полномасштабных испытаний в армейских и полицейских
        подразделений. Существует в нескольких вариантах (помимо калибров), включая более короткую
        "компактную" версию и "тактическую" версию с возможностью установки глушителя и прицельных
        приспособлений с тритиумом (как радий, только стильно модно). </p></div>

    <div class="body-left-3">
        <table width=100% ; style="color:#000" ; bgcolor="#959D9F" ; border="1px" ; bordercolor="#000" ;>
        <td>Автор: Unk</td>
        <td>Дата: 29.08.2123</td>
        <td>Просмотры: 372k</td>
        <td>Рейтинг: ★★★☆☆</td>
        </table>
        <b>Расцвет Академий</b>
        <br><i>Измененные спасают человечество ценой собственных жизней.</i>

        <br><br>
        <p align="justify">К 2087 году жизнеспособными оказываются только мегаполисы, которые успели возвести
        защитно-оборонительные сооружения по всему периметру и отгородиться от агрессивной среды
        заминированной и просматриваемой буферной зоной. Ощетинившиеся огнестрельным оружием и силовыми
        барьерами города становятся не только защитой от мутировавших животных и растений, но и отличной
        тюрьмой для тех, кто успел в них спрятаться.
        <br><br>Недовольные новым порядком или политикой Мирового правительства, уходят из городов и
        образуют редкие и малочисленные колонии, которые представляют собой небольшие фортифицированные
        военизированные поселения.

        <br><br>Охра учреждает элитные военные Академии для обучения измененных, имеющих наиболее подходящие
        боевые способности и навыки. И создает из них особые элитные спецгруппы. Всем измененным с момента
        проявления способности и передачи в интернат, присваивают пожизненным статус “М” и устанавливают с
        помощью уникальной технологии специальную метку - сдерживающую печать, позволяющую контролировать
        измененного, а также временно блокировать его способности, если это необходимо.
        <br><br>Измененных, не прошедших отбор в элитные военные Академии, обучают в других, после чего они
        становятся многочисленными винтиками огромного сложного механизма под названием Охра. Раз попав в
        систему, они больше не могут вернуться к нормальной жизни и навсегда остаются под бдительным
        наблюдением Всевидящей.
        <br><br>Выпускники элитных Академий, задача которых заключается в ликвидации угрозы для городов,
        становятся настоящими героями.</p></div>

    <div class="body-left-4">
        <table width=100% ; style="color:#000" ; bgcolor="#959D9F" ; border="1px" ; bordercolor="#000" ;>
        <td>Автор: Unk</td>
        <td>Дата: 29.08.2123</td>
        <td>Просмотры: 251k</td>
        <td>Рейтинг: ★★★★☆</td>
        </table>
        <b>Укрепление власти Сиены</b>
        <br><i>Под контролем Мирового правительства.</i>

        <br><br>
        <p align="justify">Стоящие у власти в мегаполисах пытаются противостоять Мировому правительству и
        добиться суверенитета. Но Всевидящая не дремлет. По планете проносится настоящая волна бунтов и
        попыток захватить власть в городах, которую Охра жестко подавляет с помощью своих элитных отрядов.

        <br><br>Родители все чаще пытаются спрятать от Охры детей, у которых пробудились способности.
        Некоторым измененным удается избежать интернат и даже сбежать, чтобы избежать идентифицирующей
        маркировки. В середине 100-х появляется Вирид - радикально настроенная организация, которая борется
        за права измененных. Члены организации тщательно скрываются в городах среди обычных людей.

        <br><br>Ходят слухи о том, что где-то на земле даже есть город, основанный измененными. Всевидящая
        постоянно выслеживает членов Вирид и при возможности уничтожает на месте. Никаких расследований и
        судов. Измененного, которого забирают спецгруппы, больше никто никогда не видит.</p></div>

    <div class="body-left-5">
        <table width=100% ; style="color:#000" ; bgcolor="#959D9F" ; border="1px" ; bordercolor="#000" ;>
        <td>Автор: Unk</td>
        <td>Дата: 29.08.2123</td>
        <td>Просмотры: 561k</td>
        <td>Рейтинг: ★★★★★</td>
        </table>
        <b>Ошибка Охры</b>
        <br><i>Красная Неделя (1.10.2118 - 07.10.2118)</i>

        <br><br>
        <p align="justify">Система отбраковки Охры дает сбой. Один из психически неустойчивых измененных,
        способности которого были несколько лет назад признаны недостойными Академии, сумел найти способ
        заявить о себе и за неделю уничтожил все Академии и большинство интернатов. Из Академий в целых
        осталась только одна - в Амазонии. Всего в мире погибло как минимум три четверти измененных,
        находящихся под контролем Всевидящей.

        <br><br>Виновный в геноциде измененных террорист Марк Шейн, известный под именем Апостол, был
        обнаружен и ликвидирован одним из элитных отрядов, а его ликвидатор, Блэк Фрайдей, стал настоящим
        героем войны, которая продлилась всего неделю, и символом для оставшихся в живых измененных.

        <br><br>Интернаты в городах восстановили, но измененных в них уже не сотни, а десятки. А
        единственная оставшаяся целой Академия после этого случая принимает измененных с любыми
        способностями. Ужесточился отлов уклонившихся от идентифицирующей маркировки измененных, которых по
        достижении 18-ти летия привозят в Академию напрямую, минуя интернаты.

        Больше Охра не повторит своей ошибки.</p></div>
    <div class="body-left-6">
        <table width=100% ; style="color:#000" ; bgcolor="#959D9F" ; border="1px" ; bordercolor="#000" ;>
        <td>Автор: Unk</td>
        <td>Дата: 29.08.2123</td>
        <td>Просмотры: 561k</td>
        <td>Рейтинг: ★★★★★</td>
        </table>
        <b>Аву</b>
        <br><i>Красная Неделя (1.10.2118 - 07.10.2118)</i>

        <br><br>
        <p align="justify">Система отбраковки Охры дает сбой. Один из психически неустойчивых измененных,
        способности которого были несколько лет назад признаны недостойными Академии, сумел найти способ
        заявить о себе и за неделю уничтожил все Академии и большинство интернатов. Из Академий в целых
        осталась только одна - в Амазонии. Всего в мире погибло как минимум три четверти измененных,
        находящихся под контролем Всевидящей.

        <br><br>Виновный в геноциде измененных террорист Марк Шейн, известный под именем Апостол, был
        обнаружен и ликвидирован одним из элитных отрядов, а его ликвидатор, Блэк Фрайдей, стал настоящим
        героем войны, которая продлилась всего неделю, и символом для оставшихся в живых измененных.

        <br><br>Интернаты в городах восстановили, но измененных в них уже не сотни, а десятки. А
        единственная оставшаяся целой Академия после этого случая принимает измененных с любыми
        способностями. Ужесточился отлов уклонившихся от идентифицирующей маркировки измененных, которых по
        достижении 18-ти летия привозят в Академию напрямую, минуя интернаты.

        Больше Охра не повторит своей ошибки.</p></div>
    </div>
</div>
</div>
[/html]