<!--HTML-->
<script>
$(document).ready(function(){
    $("#guestbutton1").click(function(){
    $("#guestbock1").slideToggle();
});
    $("#guestbutton2").click(function(){
    $("#guestbock2").slideToggle();
});
    $("#guestbutton3").click(function(){
    $("#guestbock3").slideToggle();
});
      });
 $(document).ready(function(){
	$('.guestbutton').click(function () {
    $(this).toggleClass('guestbutton-on');
    });
	});
</script>
<div id="fusion_guest">
  
  <div>Добро пожаловать, дорогой друг! Ты проделал долгий и трудный путь, пока добирался до нас, поэтому подсаживайся к костру и расскажи свою историю. Нам не важно, откуда ты пришел и что у тебя за душой, мы рады всем и каждому.</div>
  
  <div>Прежде, чем ты начнешь ткать нить повествования, загляни в парочку организационных тем. На нашем кроссовере творческий полет не ограничен ничем. Однако не стоит забывать о взаимном уважении и общих правилах.
<br><br>
Если ты пока не определился или не до конца уверен, в какой именно ипостаси прийти, то стоит заглянуть в тему с нужными персонажами или же кинуть клич.
<br><br>
Прежде, чем забронировать роль — проверь, не занял ли ее кто-нибудь до тебя. Максимальный срок бронирования на нашем форуме — три дня. Бронь можно продлить не более двух раз. В редких случаях амс может пойти на встречу и продлить бронь еще на один день, если для написания анкеты осталось совсем чуть-чуть.
<br><br>
Придержание роли происходит по шаблону ниже. Внешности не придерживаются. Флуд строго воспрещен.</div>

<div class="guestbutton" id="guestbutton1">придержанные персонажи</div>
<div id="guestbock1" style="display:none">
<i>Имя персонажа [фандом] - ник</i></br>
<i>Имя персонажа [фандом] - ник</i></br>
<i>Имя персонажа [фандом] - ник</i></br>
<i>Имя персонажа [фандом] - ник</i></br>
</div>

<div class="guestbutton" id="guestbutton2">контроль кандидата</div>
<div id="guestbock2" style="display:none">
<i>Имя персонажа [фандом] - ник</i></br>
</div>

<div class="guestbutton" id="guestbutton3">недоступные персонажи</div>
<div id="guestbock3" style="display:none">
<i>Имя персонажа [фандом] - ник</i></br>
<i>Имя персонажа [фандом] - ник</i></br>
<i>Имя персонажа [фандом] - ник</i></br>
<i>Имя персонажа [фандом] - ник</i></br>
</div>

<a href="ссылка" id="guest_needlink">нужные персонажи</a>

<strong class="legend"><a href="javascript://" onclick="select_text($(this).parent().next().find('pre').get(0));return!1">код</a></strong><div class="blockcode"><div class="scrollbox"><pre>&lt;i&gt;Имя персонажа [фандом] - ник&lt;/i&gt;&lt;/br&gt;</pre></div></div>

<style>
#p18 .post-author, #p18 h3{display: none}

#p18 .post-body, #p18 .post-box {
margin: -10px 0 0px 0 !important;
padding: 0 !important;
border: 0 !important;}

#p18 .post-links {position: relative}

#p18 .post-content {margin: 0 !important;
padding: 0 !important;
border: 0 !important;}

.linksb {position: relative}

#p18 .post-rating, #p18 .pl-email {display: none}

#fusion_guest {
    background: url(https://forumstatic.ru/files/001a/19/89/74643.jpg);
width: 890px;
height: 348px;
margin: 30px auto 20px auto;
position: relative;
color: #ffffff;
font-family: roboto;
font-size: 11px;
font-weight: 300;
  top: 7px
}

#fusion_guest a {color: #ecb445}
#fusion_guest a:hover {color: #ffffff}

#fusion_guest > div:first-child {margin-left: 472px;
margin-top: 53px;
position: absolute;
text-align: justify;
width: 388px;
line-height: 14px}

#fusion_guest > div:nth-child(2) {margin-left: 31px;
margin-top: 130px;
position: absolute;
text-align: justify;
width: 500px;
line-height: 14px}

.guestbutton {background: linear-gradient(to left, #60403a, #7b5863); 
  box-shadow: 0 0 0 1px #886950 inset;
width: 300px; 
height: 26px;
position: relative;
margin-bottom: 14px;
text-align: center;
color: #fefefe;
font-family: open sans;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
line-height: 25px;
letter-spacing: 2px;
cursor: pointer;
  left: 560px;
top: 132px}

#guestbock1, #guestbock2, #guestbock3 {background: #60403a; 
width: 298px;
text-align: center;
font-family: Montserrat;
font-size: 10px;
font-weight: 500;
padding: 10px 0;
position: absolute;
z-index: 99;
color: #ebebeb;
left: 560px;
border: 1px solid #886950}

#guestbock1 a, #guestbock2 a, #guestbock3 a {color: #ecb445}
#guestbock1 a:hover, #guestbock2 a:hover, #guestbock3 a:hover {color: #ffffff}

#guestbock1 {top: 157px;}
#guestbock2 {top: 197px;}
#guestbock3 {top: 237px;}

a#guest_needlink {
  background: linear-gradient(to left, #60403a, #7b5863); 
  box-shadow: 0 0 0 1px #886950 inset;
  background-position-x: 0;
width: 300px; 
height: 26px;
position: relative;
color: #fefefe;
font-family: open sans;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
line-height: 25px;
letter-spacing: 2px;
text-align: center;
display: block;
left: 560px;
top: 133px;
transition: all .5s ease-in-out 0s !important;}

a#guest_needlink:hover {
color: #999;
  background-position-x: -300px
}

#fusion_guest .blockcode {
  background:  linear-gradient(to left, #7b5863, #60403a);
  box-shadow: 0 0 0 1px #886950 inset;
width: 300px; 
height: 26px;
position: relative;
color: #ebebeb;
font-family: Montserrat;
font-size: 10px;
font-weight: 700;
left: 560px;
text-align: center;
top: 130px}

#fusion_guest strong.legend {
color: #333;
 background: #f1ebe4;
  font-family: roboto;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  width: 63px;
  height: 18px;
  display: block;
  text-align: center;
  letter-spacing: 3px;
  line-height: 18px;
  position: relative;
  left: 564px;
  top: 152px;
  z-index: 9
}

#fusion_guest .legend a {color: #202a34}
#fusion_guest .legend a:hover {color: #7b5863}

#fusion_guest .scrollbox{width: auto !important;
margin-left: 67px;
display: block;
height: 15px;
margin-top: 7px}

#fusion_guest pre {font-family: roboto !important;
font-size: 10px;
  font-weight: 300
}
</style>