1

Код:
[sensation]<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<center><div class="glav" position="absolute">
<!------ КАРТИНКА ------>
<img class="lichface" src="http://funkyimg.com/i/2G2dZ.png">

<!------ ИМЯ ------>
<div class="lichname">Leah Lannister</div>


<!------ ничо не трогаем ------>
<div class="lichocnov">
<div class="notebook2">
    <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
    <input type="radio" name="notebook2a" id="notebook2a_2">


    <div>
        <label for="notebook2a_1"><img src="https://i.imgur.com/B0fVj7b.png"></label>
<!------ ничо не трогаем - конец ------>

      <!------ ВКЛАДКА 1 ------>

 <!------ плашки ------>
<div id="click1"><div id="lav1">
<div class="wiki1"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/vHlyMKL.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;"><center><br><img src="https://i.imgur.com/5MgviHN.png"><br><img src="https://i.imgur.com/4PvvFT1.png"><br><img src="https://i.imgur.com/8hhsqqv.png">


<br><br></center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click1').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click1').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/guj72T7.png" style="width: 68px;height: 68px;margin-top: -29px;margin-left: 208px;position: absolute;" title="плашки"></span></span></a>

 <!------ иконки ------>
<div id="click2"><div id="lav2">
<div class="wiki2"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/dEYL9Uy.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<!------ СТАВИМ ПО ТРИ В РЯД! ------>
<center><br>
<img src="https://i.imgur.com/RLdUr3U.png"> <img src="http://s7.uploads.ru/3w2TR.png"> <img src="https://i.imgur.com/dBIiYBP.png"> <img src="http://s3.uploads.ru/erGWJ.png">



</center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click2').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click2').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/gARDflH.png" style="width: 68px;height: 68px;margin-top: -78px;margin-left: 275px;position: absolute;" title="иконки"></span></span></a>


 <!------ воспоминания ------>
<div id="click3"><div id="lav3">
<div class="wiki3"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/Nj517EF.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;"><center><br>
<img src="http://sh.uploads.ru/0Gmi2.png"><br>
<img src="http://sd.uploads.ru/t/EA6Rz.png"><br>






<br></center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click3').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click3').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/MxQ9xW4.png" style="width: 68px;height: 68px;margin-top: -79px;margin-left: 358px;position: absolute;" title="воспоминания"></span></span></a>

<!------ награды ------>
<div id="click4"><div id="lav4">
<div class="wiki4"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/kQn1xFG.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<!------ СТАВИМ ПО ЧЕТЫРЕ В РЯД! ------>
<center><br>
<img src="https://i.imgur.com/55Pytyu.png" title="Добро пожаловать!"> <img src="https://i.imgur.com/STuk2pD.png" title="500 сообщений"> <img src="https://i.imgur.com/ZLrbfeA.png" title="100 уважения"> <img src="https://i.imgur.com/ytyLb6V.png" title="оставил 100 реклам"><br>
<img src="https://i.imgur.com/TXTy4M6.png" title="последний оставил сообщение во флуде"> <img src="https://i.imgur.com/6gWm63N.png" title="500 позитива"> <img src="https://i.imgur.com/Hb6QN3B.png" title="1000 позитива"> <img src="https://i.imgur.com/NmCF3Hx.png" title="500 уважения"><br>
<img src="https://i.imgur.com/Tz2NPkx.png" title="создал флуд"> <img src="https://i.imgur.com/7Qymmoe.png" title="оставил отзыв в ТОПе"> <img src="https://i.imgur.com/2ENFmRO.png" title="1000 сообщений в профиле"> <img src="https://i.imgur.com/4ZlNAQL.png" title="флудер недели">





<br></center></div>
<a class="close" title="Закрыть" onclick="document.getElementById('click4').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click4').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/eHaXlUS.png" style="width: 68px;height: 68px;margin-top: -29px;margin-left: 422px;position: absolute;" title="награды"></span></span></a>

<!------ дерево ------>
<div id="click5"><div id="lav5">
<div class="wiki5"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/xlMMoS3.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<!------ хитрость ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/6HiHM6H.png" style="top: -10px !important;position: absolute;left: 245px;" title="хитрость"><span><img src="https://i.imgur.com/kNTotUt.png"/></span></a>

<!------ любовь ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/tjmbVzs.png" style="top: -86px !important;position: absolute;left: 276px;" title="любовь"><span><img src="https://i.imgur.com/ZDmfvcG.png"/></span></a>  

<!------ любопытство ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/ZgVB37o.png" style="top: -89px !important;position: absolute;left: 360px;" title="любопытство"><span><img src="https://i.imgur.com/y7nEFaT.png"/></span></a>  

<!------ страх ------>
<a class="tooltip" href=""><img class="derevoimg" src="https://i.imgur.com/4oBJHLk.png" style="top: -20px !important;position: absolute;left: 420px;" title="страх"><span><img src="https://i.imgur.com/KazHg0O.png"/></span></a>  
<br>

</center></div>

<a class="close" title="Закрыть" onclick="document.getElementById('click5').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click5').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/9FruP6n.png" style="width: 52px;height: 52px;margin-top: 170px;margin-left: 230px;position: absolute;" title="дерево"></span></span></a>

<!------ шляпа ------>
<div id="click12"><div id="lav12">
<div class="wiki12"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/27xOcUK.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>  
<br>

</center></div>

<a class="close" title="Закрыть" onclick="document.getElementById('click12').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click12').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/iEnOZ6I.png" style="width: 32px;height: 29px;margin-top: -135px;margin-left: 415px;position: absolute;" title="вечные бонусы рейтинга"></span></span></a>

<!------ шляпа2 ------>
<div id="click13"><div id="lav13">
<div class="wiki13"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;overflow-x: auto;background: url('https://i.imgur.com/zMxajFj.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>

<br>

</center></div>

<a class="close" title="Закрыть" onclick="document.getElementById('click13').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click13').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/T5xInED.png" style="width: 32px;height: 29px;margin-top: -135px;margin-left: 450px;position: absolute;" title="заставки на планшет"></span></span></a>


    </div>


    <div>
        <label for="notebook2a_2"><img src="https://i.imgur.com/B0fVj7b.png"></label>
<!------ ВКЛАДКА 2 ------>


<!------ подложка квеста ------>
<img src="https://i.imgur.com/Ao7FJAy.png" style="position: absolute;top: -136px;left: 217px;">

<!------ шаг1 ------>
<div id="click6"><div id="lav6">
<div class="wiki6"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;background: url('https://i.imgur.com/eViYQfF.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<div class="curiouscontent1">Кругосветное путешествие на небольшой яхте дело рискованное. Вам говорили эти слова абсолютно все кого Вы знаете. Наставники, коллеги по работе, друзья, семья, Ваша вторая половинка. Но Вы никого не слушали. У Вас была мечта. Обогнуть земной шар на небольшом, но добротном судне. По-настоящему испытать себя. Узнать, что такое необузданный и дикий океан! Сейчас идет 89 день Вашего путешествия, и Вы ни о чем не жалеете. С самого детства Вы были невероятно любопытным ребенком. В определенной степени это путешествие ― возможность осознать насколько огромен наш мир, и корнями эта прихоть растет как раз из детства. Кто-то перестает мечтать, но не Вы! Стоя у штурвала и слушая бриз океана, Вас пронизывает гордость за свою храбрость. Однако, на приборной панели внезапно раздается негромкий писк. С удивлением Вы переводите свой взгляд на Ваш радар, который отмечает чей-то сигнал о помощи. ― Попавшее в беду судно? - <b>любопытство</b> разрывает Вас изнутри, и Вы решаете взять курс на источник этого сигнала. Проложив маршрут, Вы тщательно оглядываете горизонт перед Вашими глазами. Спустя несколько минут далеко впереди взрастают первые очертания… Острова. Судя по радару источник сигнала идет именно оттуда. Продолжая свой путь, Вы мысленно задаете себе вопрос: – Идти ли мне до конца? Или продолжить свой путь, проигнорировав этот сигнал? Ответ не сходит с Ваших уст, ведь подсознание уже все решило за Вас. Вы добавляете скорости и берете прямой курс к Острову!</div>
<div class="curiouscontent2">- Вас ждет долгое путешествие! Возьмите с собой все самое необходимое!<br>
<hr>
- Ощутите себя в роли отважного капитана! Впереди Вас ждут многие опасности и трудности! Готовы ли Вы к этому?</div>
<div class="curiouscontent3"><i>— Обеспечьте в профиле наличие не менее 200 сообщений<br>
<hr>
— Купите в банке для себя новую иконку и плашку, обновите аватар и подпись</i></div>
<br>

</center></div>



<a class="close" title="Закрыть" onclick="document.getElementById('click6').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click6').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/6Wl7jlV.png" style="margin-top: 130px;margin-left: 255px;position: absolute;"></span></span></a>
<!------ шаг1 конец ------>


<!------ шаг2 ------>
<div id="click7"><div id="lav7">
<div class="wiki7"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;background: url('https://i.imgur.com/eViYQfF.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center>
<br>
<div class="curiouscontent1">Приближаясь к Острову, Вы чувствуете прилив волнения и легкого азарта. Ощущение неизвестности будоражит Вашу фантазию. Двигатель яхты приятно урчит, а нос корабля ловко разрезает прозрачные волны. По мере приближения к Острову на Вашем лице невольно проскальзывает игривая ухмылка. Спустя полчаса агрессивного круиза Ваш корабль внезапно глушит мотор, свет в капитанской рубке гаснет, а все экраны на приборной панели в один момент затухают. Недоумевая, Вы пытаетесь тыкать на все кнопки подряд, но это не помогает. Спускаетесь в машинную, но и там не находите вразумительной причины полного отключения. На первый взгляд все устройства находятся в полном порядке. В душе Вы проклинаете свое решение отозваться на этот сигнал, но пути назад уже больше нет.  Вы выходите на палубу и вглядываетесь пристальным взглядом в горизонт. Шумный океан и загадочный Остров – ничего более. Похоже путь у Вас один. Вы собираете легкую сумку: кладете внутрь пару бутылок с водой, немного еды, зажигалку, фонарик, блокнот, фотоаппарат, аптечку и компас. Выбрасываете якорь и прыгаете с яхты в воду, надеясь добраться до Острова вплавь. Теплая вода бьет своими волнами Ваше лицо, окутывает тело и вяжет ноги. Вы собираете все свои силы и начинаете медленно, но верно плыть к берегу.</div>
<div class="curiouscontent2">- Прежде чем плыть к Острову, нужно не забыть бросить якорь! Остаться жить на этом Острове в Ваши планы, уж точно не входит!; <br><hr>
- Придется поплавать! Надеюсь, Вы помните, как это делается?;<br> <hr>
- Вы же предупредили близких о своем путешествии? Если все пойдет плохо – надежда лишь на них!;<br> </div>
<div class="curiouscontent3"><i>— проведите на форуме не менее 24 часов<br><hr>
— упомяните в любом Вашем игровом посте событие или действие, связанное с водой<br><hr>
— выясните отношения с тремя игроками и внесите их в Ваш шаблон отношений<br></i></div>
<br>
</center></div>

<a class="close" title="Закрыть" onclick="document.getElementById('click7').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click7').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/uzAbCqm.png" style="margin-top: 120px;margin-left: 373px;position: absolute;"></span></span></a>

<!------ шаг2 конец ------>

<!------ шаг3 ------>
<div id="click8"><div id="lav8">
<div class="wiki8"><br>
<div class="wiki" style="width: 284px;height: 383px;margin-top: -152px;margin-left: 217px;padding-left: 0px;padding-right: 5px;color: #8853bb;background: url('https://i.imgur.com/eViYQfF.png') no-repeat;box-shadow: #bbbcc1 0px 0px 8px 0px inset;">
<center><br>
<div class="curiouscontent1">Оказавшись на берегу, Вы обессилено опускаетесь на четвереньки. Жадно хватая воздух ртом, Вы даете возможность мышцам отдохнуть от совершенного марш-броска по водной глади. Понимая, что впереди Вас ждет долгое путешествие, Вы делаете несколько глотков пресной воды из запасов, а затем начинаете свою дорогу вглубь Острова. Память подсказывает Вам, что перед отключением, радар показывал, что источник сигнала лежит где-то в середине этого необитаемого клочка земли. Бродя вдоль берега, Вы находите еле заметную тропинку и, собравшись с духом, встаете на неё и направляетесь вглубь. С каждой новой сотней метров пути, джунгли вокруг Вас сгущаются, и Вы все яснее осознаете насколько дикая природа вокруг. Вы постоянно слышите треск различных насекомых, пение неизвестных Вам птиц, шуршание маленьких зверьков. Ощущение, что за Вами наблюдают, не покидает царство Вашего разума. Спустя несколько часов безостановочного пути Ваши ноги начинают изнывать от усталости, спина напряжена от груза рюкзака, а пот просолил кожу ото лба до пят. Сквозь кроны деревьев пробиваются яркие лучики света, но Вы знаете, что вечер настанет совсем скоро. Вам кажется, что половину пути преодолеть удалось, но впереди еще столько же. Бродить ночью по джунглям идея явно неудачная, а посему Вы отмечаете место на тропинке, чтобы иметь возможность вернуться к нему, а затем сходите с неё для поисков потенциального ночлега.</div>
<div class="curiouscontent2">- Долгий путь на жаре и в высокой влажности требует хорошей физической подготовки. Надеюсь ею вы обладаете!; <br><hr>
- Дикая природа вокруг! Джунгли, заполненные удивительными существами которых Вы никогда прежде не видели! Хватайте фотик и щелкайте на память! <br> <hr>
- Вы преодолели половину пути. Вам нужен отдых чтобы продолжить путешествие;<br><hr>
- Вам нужно тихое и укромное место, где Вас не потревожит никакой хищник, чтобы нормально провести ночь. Найдите его!<br></div>
<div class="curiouscontent3"><i>— найдите в постах игроков упоминание любого спорта, будь то описанное событие или часть диалога<br><hr>
— обеспечьте наличие в профиле не менее 300 позитива<br><hr>
— провести на форуме не менее 48 часов<br><hr>
— оставьте по 1 сообщению на 6 страницах мыслефлуда подряд<br></i></div>
<br>
</center></div>

<a class="close" title="Закрыть" onclick="document.getElementById('click8').style.display='none';">X</a></div></div></div>
<a href="javascript:void(0)" onclick="document.getElementById('click8').style.display='block';">
<span class="tooltip tooltip-turnleft"><img src="https://i.imgur.com/2meEoOT.png" style="margin-top: -18px;margin-left: 382px;position: absolute;"></span></span></a>

<!------ шаг3 конец ------>


<i class="fa fa-star-o" style="
    color: #fff;
    font-size: 14px;
    position: absolute;
    margin-top: 88px;
    margin-left: 209px;
" title="можешь выкупить задание в банке"></i>

<i class="fa fa-star-o" style="
    color: #fff;
    font-size: 14px;
    position: absolute;
    margin-top: 65px;
    margin-left: 209px;
" title="можешь выкупить задание в банке"></i>

<i class="fa fa-star-o" style="
    color: #fff;
    font-size: 14px;
    position: absolute;
    margin-top: 42px;
    margin-left: 209px;
" title="можешь выкупить задание в банке"></i>

<i class="fa fa-star-o" style="
    color: #fff;
    font-size: 14px;
    position: absolute;
    margin-top: 20px;
    margin-left: 209px;
" title="можешь выкупить задание в банке"></i>

</div>





   
</div>
</div>

</div></center>


   <style>
.glav {background: url(https://i.imgur.com/LHO8LpN.png) no-repeat; width: 783px; height: 500px;}

.lichface {    position: absolute;
    box-shadow: 0px 0px 9px #fff;
    margin-top: 190px;
    margin-left: -81px;
    border: 3px solid #caced2 !important;
    width: 140px;
    height: 140px;
    border-radius: 140px;}

.lichname {position: absolute;
margin-top: 288px;
margin-left: 255px;
width: 250px;
font-size: 14px;
color: #fff;
text-shadow: 1px 0px 1px #fff;
text-transform: uppercase;
    font-family: Bebas Neue;
    letter-spacing: 1px;
text-align: center;
height: 18px;
background: #9f9f9f;}

.lichnedel {position: absolute; margin-top: 75px; margin-left: 30px; width: 220px; font-size: 8px; color: #fff; text-shadow: 1px 1px 0px #000; font-family: Arial; text-transform: uppercase; font-weight: 400; text-align: center; letter-spacing: 1px;}

.lichnagrad {position: absolute; margin-top: 5px; margin-left: 78px; width: 360px; height: 55px; text-align: left; overflow: auto; }

.lichquest {position: absolute; margin-top: 98px; margin-left: 38px; width: 400px; height: 100px; text-align: left; overflow: auto;}

.lichkarta {position: absolute; margin-top: 34px; margin-left: 468px; width: 148px; height: 160px; text-align: left; overflow: auto;}

.lichocnov {position: absolute; margin-top: 210px; margin-left: 22px; border: none;}


.notebook2 > input {
    display: none;
}

.notebook2 > div {
    position: absolute;
    box-sizing: border-box;
    top: -15px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 0px;
    padding: 1px 1em;

    z-index: 0;

    transition: all 0.5s ease 0s, z-index 0s 0.5s;
}

.notebook2 > div > *:first-child {
    display: block;
position: absolute;
box-sizing: border-box;
top: 220px;
width: 10px;
height: 9px;
font-family: Arial;
font-size: 13px;
border-radius: 10px 10px 0px 0px;
background-color: inherit;
color: #fff;
line-height: 28px;
cursor: pointer;
text-align: center;
transition: all 0.5s ease 0s;
}

.notebook2 > div > *:not(:first-child) {
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 447px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 464px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2){
    z-index: 10;
    transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child {
    transition: all 0.5s ease 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child) {
    opacity: 1;
    transition: all 0.5s ease 0.5s;
}


/* Всплывающее окно */	
/* Всплывающее окно */	
#click1, #click2, #click3, #click4, #click5, #click6, #click7, #click8, #click9, #click10, #click11, #click12, #click13 {/* background-color: rgba(0, 0, 0, 0.8); */ display: none;    position: absolute;  z-index: 99999; top: 0; right: 0;bottom: 0;left: 0;}
#lav1, #lav2, #lav3, #lav4, #lav5, #lav6, #lav7, #lav8, #lav9, #lav10, #lav11, #lav12, #lav13 {}

/* кнопка закрытия */
.close {background-color: #e4e6e7;
height: 16px;
position: absolute;
left: 361px;
cursor: pointer;
font-size: 14px;
font-family: arial;
top: 260px;
width: 16px;
border-radius: 20px;
box-shadow: 0px 0px 3px #000;}

.close:hover {background-color: #fff}

.wiki {}
.wiki1 {}
.wiki2 {}
.wiki3 {}
.wiki4 {}
.wiki5 {}
.wiki6 {}
.wiki7 {}
.wiki8 {}
.wiki9 {}
.wiki10 {}
.wiki11 {}
.wiki12 {}
.wiki13 {}


.tooltip span{
visibility: hidden;
position: absolute;
left: 219px;
background: transparent;
top: -3px;
}
 
.tooltip:hover span{
visibility: visible;
}

.derevoimg {cursor: default;}

.strahcontent1{width: 250px;
text-align: justify;
height: 225px;
overflow: auto;
margin-top: 21px;
margin-left: 11px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #ccc;
text-shadow: 0px 0px 1px #000;}

.strahcontent2{width: 140px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: 30px;
margin-left: -110px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #ccc;
text-shadow: 0px 0px 1px #000;}

.strahcontent3{width: 110px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: -80px;
margin-left: 154px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #ccc;
text-shadow: 0px 0px 1px #000;}

.curiouscontent1{width: 250px;
text-align: justify;
height: 225px;
overflow: auto;
margin-top: 21px;
margin-left: 11px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #000;
text-shadow: 0px 0px 1px #fff;}

.curiouscontent2{width: 140px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: 30px;
margin-left: -110px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #000;
text-shadow: 0px 0px 1px #fff;}

.curiouscontent3{width: 110px;
text-align: left;
height: 80px;
overflow: auto;
margin-top: -80px;
margin-left: 154px;
padding-right: 2px;
font-family: cuprum;
font-size: 12px;
line-height: 13px;
color: #000;
text-shadow: 0px 0px 1px #fff;}


</style>