карта ляжет так, как я ее положу

[html]
<style>
.tablet {
background-image: url(https://forumupload.ru/uploads/001b/ce/b4/4/104993.png);
width: 700px;
height: 920px;
margin-left: 20px;
}

/* Строка имени */
.stim {
width: 578px;
border: 1px;
border-color: #000;
background-color: #959D9F;
font-family: Oswald;
text-align: center;
position: absolute;
margin-top: 40px;
margin-left: 55px;
text-transform: uppercase;
}

.tabbed > input {
display: none;
}
.tabbed > label {
width: 100px;
margin-top: 110px;
margin-left: 43px;
margin-bottom: -90px;
display: block;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Oswald;
text-size: 20px;
text-transform: uppercase;
}

.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: 470px;
position: relative;
}

.tabs-body > div {
position: absolute;
top: 0;
left: 0;
line-height: 1.4em;
opacity: 0;
width: 470px;
height: 726px;
padding: 10px;
z-index: 0;
margin-top: 110px;
margin-right: 55px;
text-align: justify;
overflow: auto;
}

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

/* Слева */
#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>

<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
/* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tablet">
<div class="stim"><td>Джонатан “Джонни, Джей” Нойманн <br> Уровень доступа: A </div>

<div class="tabbed">


<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Личные данные</label>

<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Внешность</label>

<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Способность 1</label>

<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Способность 2</label>

<input type="radio" name="tabs-body" id="nav-left-5">
<label for="nav-left-5">Характер</label>

<input type="radio" name="tabs-body" id="nav-left-6">
<label for="nav-left-6">Биография</label>
<div class="tabs-body">

<div class="body-left-1">
<center><img src="https://forumupload.ru/uploads/001b/fb/3e/293/239440.jpg"></center>
Wet sand | Taejoon Oh (TJ)<br>
Пол: мужской<br>
Дата рождения: 1 января вписано в документах (настоящее 27 октября)<br>
Возраст: 37<br>
Рост и вес: 198, 99 кг

<br><br>
Семейное положение: холост<br>
Должность/Статус: Оперативник Мадженты, кодовое имя “Арбитр”. Сотрудник СБ. По настроению подрабатывает барменом в местном баре-ресторане для преподавателей и сотрудников Академии<br>
Ник в чате академии: uhu
<br><br>
Отличительные признаки
<br>
Цвет глаз: светло-карий<br>
Цвет волос: светло-русый<br>
Татуировки/Шрамы/Пирсинг/Пигментация: 17 татуировок, шрамы на лице и животе
</div>

<div class="body-left-2"><br>
Шкаф размером два на чуть уже, внушительный, но не без изъянов — особенно заметна огромная дыра в желудке, словно вечный голод стал частью его натуры. Он обладатель шикарных густых светлых волос, которые при хорошем освещении могут казаться золотыми. Пряди слегка растрёпаны, добавляя ему брутальности и подчёркивая его лёгкую небрежность. Лицо чётко очерчено: скулы подчёркнуты, нос прямой, а подбородок острый. Глубокий, тяжёлый взгляд с лениво-уверенной мимикой может пронзить собеседника насквозь. Глаза выражают спокойствие и уверенность, порой с лёгким оттенком сарказма.<br>
Татуировки занимают значительную часть его тела — шею, грудь и продолжаются на других частях тела. Сильный метаболизм помогает держать фигуру в тонусе. Рельефное, мускулистое тело свидетельствует о регулярных физических нагрузках, но легкая сутулость делает его чуть менее грозным. Рот разработан как надо, язык гибок, а зубы ухожены — он тщательно следит за ними, понимая, что это его своеобразный инструмент для выживания.
Его стиль — расслабленно-элегантный. Иногда он носит небрежно расстёгнутую рубашку, обнажающую грудь и татуировки, иногда — строгий костюм, добавляющий образу элегантности, но чаще форму СБ. Изо рта несёт то табаком, то перегаром, а иногда — запахом лука или чеснока, которым он никого не щадит. На работе коллеги частенько пихают ему в рот то конфеты, то жвачки, потому что этот гад о других не думает.
Его повадки порой кошмарят окружающих — то пальцем в зубах ковыряет, то демонстрирует выдающиеся навыки в плевках на дальность. Внешне он выглядит солиднее, чем позволяет себе вести, но рот ему лучше не открывать: сам знает, что ничего приличного оттуда не выйдет. Настроение считывать по нему сложно: кислой миной может выдать шутку, а с широкой улыбкой — нанести удар.<br>
Одежда всегда чистая, выдрессирован носить её аккуратно. Пользуется лёгким древесным парфюмом, но только на территории академии — перед выходом в сельву он избегает ароматов, чтобы не выдать своё присутствие. От него веет настоящей маскулинностью, которой, кажется, где-то не хватает заботливой женщины. Вот только интерес к юбкам у него сугубо практический: вытереть ими стол или использовать для других бытовых нужд.
Его образ завершает лёгкая ухмылка и серьги в ушах, которые добавляют в его образ нотки харизмы и любви к свободе.
</div>

<div class="body-left-3">
► Сверхсила<br><br>
Применение: Пассивная, на себя, работает всегда.<br><br>
Описание способности: Способность увеличивает физические параметры, делает мускулы сильнее, кости крепче, делает человека очень сильным.
<br><br>
Ограничения:
Способность работает нон-стоп, поэтому всегда хочется много и вкусно есть, без еды чувствует сильнейший дискомфорт, может начать страдать кишечными и желудочными расстройствами, испытывать мерзкое ощущение, будто сам себя жрет. Может питаться за счет второй способности.

</div>

► Душегуб <br><br>
Применение: Активная, применяется на других.<br><br>
Описание способности: Высасывание чужой жизненной силы через прикосновение и подпитка собственной. Попавший под влияние силы в течение 5 минут теряет сознание, после 7 минуты - умирает, его сердце останавливается, мозг умирает от кислородного голодания. Применяющий способность наоборот получает бафф на повышение выносливости. После осушения на первой стадии (обморок) бодр, как после контрастного душа, не чувствует усталости, действие длится около 10 часов. Осушение до второй стадии (смерть) приводит к полному восстановлению сил как после продолжительного, качественного сна. Действие длится сутки.<br><br>
Ограничения: За раз можно довести до обморока 10 человек, убить всего 1. Если всосать все 11 в течение дня, случится приступ тахикардии, подскочит давление. Оптимальный вариант использования: 5 обмороков за день. Следующее использование на следующий день.

</div>

<div class="body-left-5">
Джонни привык быть в центре внимания, оттого он привлекает к себе взгляды не только уверенными жестами и словами, но и паскудным поведением. Ему нравится похвала, а потому может перестараться в открывании бутылки вместе со стеклом. Он знает чего хочет, ему не страшно идти по головам, даже если путь к цели окажется тернистым. Не терпит внеуставного давления, ему важно контролировать собственную жизнь и не быть ни от кого зависимым. Он показательно демонстрирует, что поддержка ему не нужна, что рассчитывает обычно только на себя, ну и потому юлит и увиливает, стараясь врать, чем честно признаваться в проблемах. Но если проблема в вас - он скажет это прямо и грубо, будьте уверены. Обманчиво открыт и весел, вся внешняя расслабленность является маской, внутри глубоко травмирован и если кто и знает о его душевных терзаниях, так это душевая кабинка, порванный-переломанный спортивный инвернтарь и пачки сигарет. Мало думает, быстро действует, много рефлексирует, ну и такой сладкий пирожочек, естественно, держит себя в статусе парня одинокого, потому что близкие отношения подразумевают открытость и какие-то навыки социального общения, а у него с этим не задалось. Эмпатия близка к нулю, сила есть - ума не надо, научи дурака богу молиться, он и лоб расшибет, - все это про Джонни.
</div>

<div class="body-left-6">
1st January (Фёрст Дженьюэри) – так назвали ребёнка, случайно попавшего в руки исследовательского отдела Охры. Нежеланный двухлетний ребёнок одинокой женщины, у которого не было даже имени, а лишь пугающая способность и дата рождения, которую предпочли скрыть и заменить на такую же, как и имя. Собственно, запоминать зверюшку проще. Измождённого, не знавшего ни любви, ни заботы, мальчика передали в лабораторию, где его окружили ещё более бесчувственные люди в белых халатах.<br>
Едва попав туда, он стал объектом тестов, экспериментов и операций. Его разум, ещё совсем детский, не понимал, почему эти люди так издеваются над ним. Постепенно эмоции притуплялись, а воля слабела. Такова была цель проекта — превратить его в бездушную машину, готовую исполнять любые приказы. Охра нуждалась в послушных солдатах, лишённых жалости и сомнений.<br>
Эксперимент длился несколько лет и казался успешным: мальчик был словно автомат, нуждающийся лишь в пище, сне и выполнении базовых потребностей. Он развивался, но его поведение оставалось неизменным. Однако однажды, после очередной серии мучительных испытаний, шестилетний мальчик впервые впал в истерику и, охваченный яростью, набросился на учёных, разрывая тех на гордые доли, части и половинки. В итоге его поместили в изолятор, который на него никакого эффекта не произвел, поэтому проект признали провалившимся, так как личность ребёнка не удалось уничтожить.<br>
Через два месяца его перевели в интернат для изменённых детей. Здесь тесты продолжились, но теперь за ним следил не бездушный учёный, а строгий психолог Ричард Рихтер. Для Дженьюэри он стал чем-то вроде отца — жёсткого, требовательного, но всё же отца. Похвала Рихтера была для мальчика редким подарком, как праздник. Именно он дал ребёнку имя — Джонатан Нойманн.<br>
После интерната Джона отправили в элитную академию, где его готовили как ликвидатора. Охра отказалась от эксперимента, но не позволила ему уйти из поля зрения. Уже в первый год после выпуска Джонатан стал известен как один из лучших, несмотря на проблемы с контролем гнева. Он выполнял приказы, не задавал вопросов и не испытывал сожалений. Но что-то внутри его не давало покоя: были ли правы те, кто называл себя его "матерью"? Чем заслужили смерти те, кого он убивал?<br>
Однажды Джонатан попал в жуткую миссию, из которой чудом выбрался живым. Возвращение лишь укрепило его сомнения. Но Охра решила от него "избавиться", переведя в другой поганый регион. Так он оказался в Индоре, где стал сотрудником службы безопасности местной академии. Здесь он встретил Элизабет, женщину, которая изменила его взгляд на жизнь. Она показала ему другой путь — идеалы Мадженты, её веру в новый, лучший мир. Впервые Джонатан почувствовал, что его жизнь может иметь смысл. Однако идеи Охры всё ещё цеплялись за его разум. Нужно было поставить точку. А потому за месяц до красной недели с помощью личных связей и былых заслуг Джон возвращается в ряды ликвидаторов. После он ещё долго жалел о том, что не был в ту неделю вместе с новоприобретенной семьей, но, потрясенный до глубины души смертью Апостола, окончательно осознал, чему он посвятит свою жизнь. Уничтожение человечества и отстройка нового мира на костях прогнившей изнутри Сиены. Именно с этими мыслями он вернулся в родные пенаты как шпион Мадженты.<br>
Время порой шутит, и он снова столкнулся с Эстер Стерн. Знакомое лицо, схожая судьба и миссия, которая многое изменила. Старший ребёнок, которого они должны были устранить вместе с родителями, внезапно ожил и атаковал их. Джонатан настоял на том, чтобы спасти подростка, несмотря на приказ уничтожить всех, кроме младшего. Этот поступок стоил ему доверия, но ему было всё равно.<br>
Ему грозило списание, но, учитывая все прошлые заслуги, его вновь перевели. Теперь это была академия Ред, где Джон продолжил работать в службе безопасности, а под настроение еще и в кафе барменом (где пил он больше, чем наливал). Здесь его снова "ждали" Элизабет и Эстер - кармические женщины его жизни. <br>
Вдохновлённый возвращением своего кумира, Апостола, Джонатан твёрдо знал, чего хочет. Он стремился собрать вокруг себя тех, кто готов был бороться за новый мир, и отомстить тем, кто разрушил его старую жизнь.
<br><br>
Секретная информация: ~~обрезан~~
</div>
[/html]

+13