<!--HTML-->

<div class="vacation-main"><div class="vacation">
<div class="vacation-up">
<p class="vacation-title">УХОД И ОТСУТСТВИЕ</p>
</div>

<div class="tabs">
    <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
    <label for="tab-btn-1">⇦</label>
    <input type="radio" name="tab-btn" id="tab-btn-2" value="">
    <label for="tab-btn-2">В отпуске</label>

    <div id="content-1">
      <div class="vacation-description-img"><p class="vacation-description">
Если вам нужно на какое-то время пропасть или снизить свою игровую активность, то необходимо отписаться в этой теме.
Отсутствие [никакой активности] дается максимум на две недели. Лоу [внеигровая активность] максимум на месяц. Все можно продлить по вашей просьбе. 
Не забывайте заполнять шаблон и вставлять его в код <img src="http://sd.uploads.ru/qs9KU.png">
<br>
<br>» Нажми на кнопку чтобы скопировать код.
</p></div>
</div>

<div id="content-2">
<li class="vacation-list">ЛОУ</li>
<li class="vacation-list-2">
имя персонажа до 00.00
</li>

<li class="vacation-list">ОТСУТСТВИЕ</li>
<li class="vacation-list-2">
имя персонажа до 00.00
</li>

</div>

</div>



<div class="low-box"><strong class="legend"><a href="javascript://" style="color: #e4e2dc" onclick="select_text($(this).parent().next().find('pre').get(0));return!1">ОТДОХНУТЬ</a></strong><div class="blockcode"><div class="scrollbox-2" style="height: 4.5em; color: #717f61;"><pre  style="font-size: 0px;">&lt;br&gt;имя персонажа до 00.00</pre></div></div></div>


</div></div>

<style>

.vacation-main {
width: 570px;
}

.vacation {
height: auto;
margin-bottom: 110px;
background: #d9d6cd; 
position: relative;
left: 50px;
z-index: 10; 
top: 90px;
outline: 5px solid #839470;
outline-offset: -5px; 
padding-bottom: 30px;
}

.vacation-up {
background-image: url(https://i.imgur.com/zYiuMM9.png); 
width: 570px;
height: 99px;
background-size: 100%;
z-index: 100; 
position: relative;
top: -90px;
}

.vacation-description {
position: relative;
top: 10px;
width: 300px;
left: 130px;
font-family: arial;
font-size: 11px!important;
color: #56614a;
background-color: #e4e2dc;
border: 13px solid #e4e2dc;
}

.vacation-description-img {
background-image: url(https://i.imgur.com/AKLaEOU.png);  
background-repeat: no-repeat;
background-size: 100%;
width: 450px;
height: 158px;
position: relative;
left: -75px;
top: -110px;
}

.vacation-title {
font-family: Franklin Gothic Medium;
font-size: 18px!important;
position: relative;
left: 190px;
top: 65px;
color: #e4e2dc;
letter-spacing: 1px;
text-transform: uppercase; 
}

#content-2 {
width: 450px;
height: 158px;
position: relative;
left: -75px;
top: -110px;
overflow: auto;
}

li.vacation-list  {
font-size: 14px!important;
font-family: Franklin Gothic Medium;
color: #617051;
margin: 15px 0 10px 0;
}

li.vacation-list-2  {
color: #48553b;
}

.low-box {
width: 81px;
height: 10px;
background-color: #839470;
position: relative;
font-size: 11px;
font-family: Franklin Gothic Medium;
padding: 8px;
left: 290px;
letter-spacing: 1px;
top: -24px;
text-align: center;
float: left;
}

.tabs {
max-width: 350px;
margin-left: auto;
margin-right: auto;
}

.tabs>input[type="radio"] {
display: none;
}

.tabs>input[type="radio"]:checked+label {
background-color: #617051;
}

.tabs>div {
display: none;
padding: 10px 15px;
}


#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2 {
display: block;
}

.tabs>label {
display: inline-block;
user-select: none;
background-color: #839470;
padding: 5px 8px;
font-size: 16px;
line-height: 1.5;
letter-spacing: 1px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
margin-left: 6px;
cursor: pointer;
margin-bottom: 10px;
top: 190px;
left: 40px;
position: relative;
font-size: 11px!important;
font-family: Franklin Gothic Medium;
color: #e4e2dc;
text-transform: uppercase; 
}

.tabs>label:first-of-type {
margin-left: 0;
}
  </style>