<!--HTML-->
 <div class="spiritfirst">
   <div class="spiritfirstpic"><img src="https://funkyimg.com/i/2Tp7j.png"></div>
    <div class="spiritfirsttitle">
      <subtitle>от вещего духа</subtitle></div>
    <div class="spiritfirsttext"><subtitle>Добро пожаловать!</subtitle>
      <about>Ты попал в мир где балом правят сказочные персонажи, где злодеи и герои живут в одном городе и выживают подобно обычным людям. Это мир волшебства и невероятных открытий, мир в, котором историю пишут герои сказок, мир, который ты до этого момента не мог себе даже представить. У тебя появилась уникальная возможность стать частью этого мира, написать волшебными чернилами новую историю, которая найдет свое место в волшебной Книге Сказок.</about></div>
  </div> 
  
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">гостевая</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">f.a.q</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">роли и внешности</label>
 
    <section id="content-tab1">
        <p>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -<br>
<I>Любое изменение в истории может иметь ужасные последствия (с) Мерлин.</i><br> Один из сильнейших магов не раз предупреждал о том, что нельзя менять ход истории, но появились те, что решили испытать судьбу. Стояло только волшебным чернилам попасть не в те руки, как ход историй стал меняться, герои получали то чего хотели, то чем были обделены в своих сказках. В какой-то момент все вышло из под контроля, магия перестала покоряться, стали происходит непонятные вещи, которые приводили к разрушению целых селений. Только тогда пришло осознание, что пора что-то делать, но ничего путного в голову не приходило.<br>
Решение было неожиданным и не всем пришлась по вкусу идея покинуть родной мир. Да, это был риск, на который не все могли пойти, но собственная жизнь была дороже какого-то упрямства и обид. Закрывая магические порталы никто не мог себе представь, что все жители окажутся посреди незнакомого города, почти в чем мать родила и совершенно лишенные магии. Новая жизни начиналась не так красочно как хотелось, но при этом они были живы. Несколько лет ушло на то, чтобы понять чем и как живет этот мир, освоить новую технику и выбрать путь по которому идти. За двадцать восемь лет персонажи изменились, у них теперь новые жизни, которые стали неожиданным продолжением для старой истории. <br>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br>
Думаю ты, дорогой друг, понял, что попал на форум посвященный сказкам в реальном мире. Очень рад, что тебя заинтересовала эта тематика и ты сейчас читаешь эти строки. У тебя есть возможность внести коррективы в известные сказки, выбрать любую из адаптаций и написать новую историю, не похожую на ту, что мы все знает. Если твои предложения будут не лишены логики и здравого смысла, то ты запросто сможешь воплотить самую безумную и самую желанную идею в твоей жизни. 
Уже здесь и сейчас ты сможешь придержать роль и внешность. Ниже представлен код, который обязателен для заполнения. Скорее, время сказок!
        </p>
    </section>  
    <section id="content-tab2">
        <p>
<center><b></b></center>
- Однополые отношения запрещены!<br><br>
- Ровно на трое суток с момента регистрации придерживаются персонажи и внешности, за не зарегистрированными пользователями - сутки. Возможно продление брони ещё на трое суток.<br><br>
- Основная локация — Фэйблвуд, небольшой город на севере штата Вайоминг, у подножия гор Блэк-Хилс. Все жители города - персонажи из сказок, мифов и легенд;<br><br>
- Все сказочные персонажи предпочитают использовать имена, которые "даровал" им новый мир, при этом не забывая о своих прошлых именах. На данный момент сложно найти жителей этого города, которые называют себя именами из сказки; <br><br>
- В городе проживают только те персонажи, которые были представлены в сказках, а так же люди, что окружали их в том мире. Жители других городов бывают в Фэйблвуде, но не задерживаются в сказочном городе больше недели. И стоит им только выехать за пределы города как им и вовсе не хочется туда возвращаться; <br><br>
- Сказочные персонажи стареют, но делают это куда медленнее обычных людей. За 28 лет существования города каждый повзрослел только на 4 года ( 1 год сказочных = 7 лет реальных);<br><br>
- Когда-то давно существовали сказочники, которые благодаря своей истинной вере создали целый сказочный мир. Подобные люди не принимаются в игру, о них могут говорить, вспоминать и обсуждать их труды, но в Фэйблвуде их нет;<br><br>
- В новом для себя мире сказочные персонажи не могли представить чем будут заняты, от чего первые несколько лет постигали науки и учились новому. Не все сумели выдержать обучение, останавливались на половине пути и ступали не на ту дорожку. Вполне возможно, что в этом городе когда-то искренне честный герой не сумел найти себе занятия и потому бездельничает и страдает от безденежья. Есть и другая сторона медали, кто-то напористый и амбициозный достиг высот и сейчас занимает высокую должность, которая позволяет иметь большие деньги и власть;<br><br>
- Принимаются представители только древнегреческой мифологии. Взяв подобного персонажа - не забывайте о том, что здесь он почти обычный человек, вполне себе смертный и утративший свои силы;<br><br>
- Не забывайте о том, что это жестокая реальность, которая за двадцать восемь лет могла изменить любого человека до неузнаваемости. Наши герои и злодеи не исключение. Любой из героев, который когда-то представлялся положительным персонажем может стать злодеем в Фэйблвуде, и наоборот. История может быть совсем новой, несмотря на то, что является продолжением старой жизни;<br><br>
- Персонажи-животные во время перемещения приобрели человеческий облик и в городе могут жить полноценной жизнью.
- На данный момент в городе нет магии, но все может изменится в самый неожиданный момент. 

        </p>
    </section> 
    <section id="content-tab3">
        <p><center>
<b>A-B-C</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=44">amber heard / firebird</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=21">alexander skarsgard /  zmei gorynich</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=35">alexia giordano / lisa</a><br>
<a href="ссылка на профиль"> bradley cooper / sindbad [до 04.05. включительно]</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=34">brendon urie / phoebus de chateaupers</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=27">ben barnes / mordred</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=29">bill skarsgard / gray wolf </a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=24">boyd holbrook / march hare</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=8">sarah paulson / cinderella</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=5">candice swanepoel / odette</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=13">charlie hunnam / jabberwocky</a><br><br>

<b>D-E-F</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=7">deepika padukone / esmeralda</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=64">g eazy / piero </a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=26">eiza gonzalez / sherazade</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=31">elizabeth olsen / alice</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=47">elle fanning</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=14">eva green / red queen</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=15">evan peters / prince charming</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=4">emilia clarke / snow white</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=22">frank grillo / nightingale the robber</a><br><br>

<b>G-H-I</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=45">gal gadot / persephone</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=41">henrik holm / ivan-tsarevich</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=38">herman tømmeraas/ genie</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=6">holland roden / little mermaid</a><br><br>

<b>J-K-L</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=57">jake gyllenhaal/ царь Шахрияр</a>
<a href="http://fabletest.f-rpg.ru/profile.php?id=20">joel kinnaman / koschei</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=32">katie mcgrath / marya morevna</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=47">kaya scodelario / malvina</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=23">lady gaga / gold-bearing goose</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=17">lana del rey / anastasia tremaine</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=25">lana parrilla / evil queen</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=16">lauren german / tinker bell</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=63">lily james / vasilisa the beautiful</a><br>
<a href="ссылка на профиль">lily collins [до 04.05]</a><br><br>

<b>M-N-O</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=51">max riemelt / bluebeard</a></a><br>
<a href="ссылка на профиль">madelaine petsch / merida [до 04.05]</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=28">mads mikkelsen / hades</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=18">margot robbie / yaga</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=2">michael fassbender / rothbart</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=19">natalie dormer / maleficent</a><br><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=54">nicola peltz/ sirin</a><br><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=53">oscar isaac / genius detective</a><br><br>

<b>P-Q-R</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=10">peter dinklage / rumpelstilzchen</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=43">phoebe tonkin / anastasia</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=37">robert downey jr / tin woodman</a><br><br>

<b>S-T-U</b><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=30">samara weaving / periwinkle</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=41">saoirse ronan / vasilisa the wise</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=36">summer bishil / jasmine</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=9">sophie turner / gretel</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=48">stephen lang / pict the brewer</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=40">tarjei sandvik moe / ivan the fool</a><br>
<a href="http://fabletest.f-rpg.ru/profile.php?id=33">taylor swift / fleur-de-lys</a><br><br>

<b>V-W-X</b><br><br>


<b>Y-Z</b><br><br>

</center>
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)} 

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}


.tabs {
	padding: 0px;
	margin: 0 auto;
}

.tabs>section {
	display: none;
	padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

 
@keyframes fadeIn {
	from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
	}
	to {
    transform: translate(0px,0);
	}
}

.tabs>input {
	display: none;
	position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
	display: inline-grid;
	margin: 0 -3px 0px;
	padding: 10px 0px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
	color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}
</style>