<!--HTML-->
<div class="vacation-main"><div class="vacation">
<div class="vacation-up">
<p class="vacation-title">УХОД И ОТСУТСТВИЕ</p>
</div>
<div class="vacation-description-img"><p class="vacation-description">
текст отсутствия 

</p></div>

<details>
<summary>В ОТПУСКЕ</summary>
<p class="low-title">В ЛОУ</p>
<p class="low">
aidan page до 00.00
</p>
<p class="low-title">ОТСУТСТВИЕ</p>
<p class="low">
aidan page до 00.00
</p>
</details>

<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;имя внешности 
&lt;br&gt;✎ &lt;a href=ссылка на профиль&gt;имя персонажа&lt;/a&gt;</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; 
}

.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 {
width: 275px;
height: auto;
top: 20px;
left: 155px;
font-family: arial;
font-size: 11px;
color: #56614a;
position: relative;
}

.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: 50px;
top: -60px;
}

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

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 

summary {
display: inline-block;
font-size: 11px;
cursor: pointer;
background-color: #839470;
width: 150px;
height: 10px;
position: relative;
left: 3px;
top: -30px;
color: #e4e2dc;
font-family: Franklin Gothic Medium;
padding: 5px;
letter-spacing: 1px;
text-transform: uppercase; 
}

summary:before {  
content: "";
}
details[open] > summary:before {
  content: "";
}

summary ~ * {

}

summary:focus {
outline:0;
box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}

details {
display:block;
width: 300px;
height: auto;
color: #839470;
position: relative;
left: 130px;
top: -10px;
text-align: center;
padding-bottom: 10px;
}

.low-title {
font-family: Franklin Gothic Medium;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase; 
padding: 5px;
}

.low {
position: relative;
top: -10px;
}

.low-box {
width: 65px;
height: 8px;
background-color: #839470;
position: relative;
font-size: 11px;
font-family: Franklin Gothic Medium;
padding: 5px;
left: 245px;
letter-spacing: 1px;
top: -20px;
text-align: center;
}

</style>