[html]

<!--чтоб работало-->
<script type="text/javascript">
  $(document).ready(function(){
    $('.dialog').click(function(){
      $(this).parent().children('div.dialogopen').toggle('normal');
      return false;
    });
  });
</script>
<!-- Вкладки для списков -->
<script type="text/javascript">
$('.s-tabs2').each(function(){
   $(this).children('span:first').addClass('selected');
   $(this).children('.stab2').eq(0).show();   
});
$('.s-tabs2>span').live('click', function(){
     var a = $(this).parent('.s-tabs2');
     var arr = a.children('span');
     var index = arr.index(this);
     arr.removeClass('selected');
     $(this).addClass('selected');
     a.children('.stab2').hide();   
     a.children('.stab2').eq(index).show();   
});
</script>

<style type="text/css">.dialog {
    position: absolute;
    z-index: 999;
    cursor: pointer;
    width: 91px;
    height: 66px;
    background: url(https://forumstatic.ru/files/0019/4c/60/88721.png) right center no-repeat;
    margin-top: 91px!important;
    margin-left: 61px;
}
.dialogopen {
    z-index: 200;
    left: 165px;
    top: 190px;
    width: auto;
    height: auto;
}
.backivent {background: url(https://forumstatic.ru/files/0010/8c/30/96762.jpg);
    height: 352px;
    width: 800px;
    margin: 10px 14px 12px 25px;
    border-style: solid;
    border-width: 2px;
    border-color: #22211d;
    box-shadow: inset 0 0 23px 9px #000000, 0 0 0px 7px #241d1a, 0 0 3px 9px #17120e;
    outline: 6px solid #0b0e08!important;
}
.iventtext {text-align: center;
    font-family: URWTaurusD!important;
    font-size: 32px;
    padding-bottom: 14px;
    color: rgb(201 121 43) !important;
    background: linear-gradient(rgba(255,255,255,1) 10%, rgba(0,0,0,1) 70%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -o-background-clip: text !important;
    text-shadow: 1px 0px 1px rgba(0,0,0,.42), 0 0 10px rgba(128,125,122,.5);}
</style>

<div class="iventtext">Впереди вас ждёт странный постамент с книгой.</div>

<div class="backivent">

<div style="
    position: absolute;
    margin-top: 46px;
    margin-left: 132px;
    font-family: oranienbaum;
    font-size: 40px;
    text-shadow: rgb(255 255 255) -1px 1px 2px, rgba(214, 0, 0, 0.77) 1px -1px 2px, rgb(0, 0, 0) 2px 2px 20px, rgb(0, 0, 0) 0px 0px 6px;
    color: rgb(255 241 54) !important;
    font-weight: 500;
    opacity: 0.9;
            ">!</div>
<!--  попуг-->
<div class="dialog"></div>
<div style="display:none;position:absolute;" class="dialogopen">
<ul class="s-tabs2">
<li class="stab2">
<div class='ans'>Эй, ты! Не спишь?<br>Знаешь, у тебя на голове какая-то... Мусорка, хе.</div>
</li>
<li class="stab2">
<div class="ans">*собеседник нервно смеётся*<br>Я сижу тут уже битый час. Один.<br>
*бормочет под нос*<br>..нет, он спросит - не видел ли я ещё кого-то... Но я не видел... Ничего не видел...</div>
</li><li class="stab2">
<div class="ans">Ладно, это был я. Мне срочно нужна помощь, нет времени на нежности. В джунглях... Что-то странное. Опасное. Ужасное. Давай проверим? <br>По закону жанра, нам нельзя разделяться. И в одиночку не справиться. Поэтому я тебя... эээ... Позвал. Назовём это так и не будем обижаться.</div>
</li>
<li class="stab2">
<div class="ans">Я нашёл какую-то странную книгу. Все листы в ней - одна и та же карта, которая ведёт отсюда в джунгли, а дальше... Возможно, нас ждёт следующая подсказка. <br>На обложке странный рисунок. Это птица? Бабочка? Морская звезда?..
</div>
</li>
<li class="stab2">
<div class="ans">Легко сказать! Думаешь, я местный? Вот ты выглядишь довольно надёжно, поэтому я тебя и разбуд... Позвал с собой! <a href="https://wolves.roleforum.ru/pages/jungles">Веди меня,</a> а я буду приглядывать с ветвей и давать советы. Это даётся мне лучше всего.</div>
</li>
<span>*подбежать к попугаю*</span><span>— Это ты виноват!</span><span>— Эй?</span><span>— В чём дело?</span><span>— Показывай дорогу.</span></ul>
</div>

</div>
[/html]