<!--HTML--><div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://funkyimg.com/i/2TYVN.jpg"></div>
    <div class="spiritfirsttitle">от вещего духа
      <subtitle>Добро пожаловать в Вест Хэм</subtitle></div>
    <div class="spiritfirsttext"><subtitle>"Свобода может быть веселой, но и опасной, если ее некому контролировать"</subtitle>
      <about><br>♢ <b>название форума:</b> THE SOCIETY
<br>♢ <b>дата создания:</b> 24.05.2019
<br>♢ <b>тематика форума:</b> реал, мистика
<br>♢ <b>место:</b> Вест Хэм, Коннектикут
<br>♢ <b>система игры:</b> эпизодическая
<br>♢ <b>рейтинг:</b> NC-18</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">история города</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">FAQ</label>
 
    <section id="content-tab1">
        <p>
<br>Вест Хэм - небольшой город в штате Коннектикут, Новая Англия. Город, в котором жители если и не знают друг друга в лицо, то что-то слышали друг о друге. Богатые и бедные; театралы и любители вечеринок; милые и агрессивные - все это можно сказать о будущем поколении и надежде всего города - подростках Вест Хэма.
<br>Когда таинственный и раздражающий запах проникает в город, федеральное правительство отправляет старшеклассников в 10-дневный поход, пока решается проблема. Во время путешествия в горы выясняется, что дорога в лагерь заблокирована. По возвращении домой подростки обнаруживают, что все остальные в городе исчезли, и хотя местные телефоны и текстовые сообщения работают, они электронно отрезаны от остального мира. На следующий день обнаруживается, что все дороги и выходы из города перекрыты бесконечными и опасными лесами. Странным образом подростки попадают в точную копию своего города, но только без взрослых.
<br>
Поначалу герои находят полную свободу забавной, но затем ситуация выходит из-под контроля. Богатенькие девочки и мальчики оставшись без родительского надзора, изо всех сил пытаются понять, что с ними произошло, и как им вернуться домой. Но для этого они должны установить порядок и соблюдать определенные нормы гражданского общества. Только так они смогут выжить. Теперь они ответственны сами за себя, и если они не придут к согласию, то все закончится очень плохо.
        </p>
    </section>  
    <section id="content-tab2">
        <p>
<br>Вест Хэм- таинственный небольшой городок в штате Коннектикут, Новая Англия, в крае знаменитом своими глухими лесами, дождливой погодой и живописными пейзажами, уже плотно вошедшем в человеческое сознание, как край мистический, окутанный всякого рода легендами и загадками, берущими своё начало ещё со времен индейских племён и первых поселенцев. Самыми первыми жителями Вест Хэма было его коренное население, которое загадочным образом эвакуировалось около 1000 лет до н.э. после того, как шаман по имени Модок узнал о пророчестве, гласящим о разрушительном Армагеддоне. Туземцы прозвали долину «проклятой землей» и оставили после себя множество вещей, что были многим позже обнаружены Эллиотами, в местных пещерах. Официально город основан в 1835 году Джеффри Николсоном, разбойником дикого запада. Первоначально город был лишь небольшим поселением, Николсон действовал там, как первый мэр, устанавливая местные законы. 
<br>Пик расцвета Вест Хэма пришелся на 1840-е во время золотой лихорадки, которая была завершена для этого места уже полтора года спустя, после того, как шахтеры были испуганы событием в шахтах. Второй бум населения в Вест Хэме произошел в начале 1870-х годов. Когда американские пионеры путешествовали по Новой Англии многие из них осели в городе. Среди тех, кто остался, были супруги Бретт и Дэйзи Бингхэм, которым приписывается рекордное количество потомков в 32 человека. 
<br>В 1883 году после исчезновения Николсона, который искал способ обрести вечную молодость и бессмертие, правительство США ввело в действие документ, согласно которому Николсон был стерт из истории, считаясь сумасшедшим мэром, а основателем и мэром Коннерса стал Эдвард Эллиот. Примерно в то же время в городе появился таинственный запах, природу которого никто так и не узнал. Нынешний мэр Эллиот вел деловую переписку с неким Пфайфером, который обещал устранить запах за 1,5 млрд. долларов. Предложение не устроило властей города, и сделка была расторгнута. Через два дня после этого школьники вернулись в пустой город.



        </p>
    </section> 
    <section id="content-tab3">
        <p>
<b>Где и когда развиваются события? </b>
<br>События развиваются в городе Вест Хэм, Коннектикут, новая Англия. Время действия – июнь 2019 года.
<br><b>Если я не смотрел(а) сериал, смогу ли понять, о чем речь?</b>
<br>Сюжет сериала взят за основу, можно сказать, что ролевая игра по мотивам сериала. Поэтому независимо от того, смотрели вы или нет, хотите играть каноном или нет - место вам найдется, игрой обеспечим и вы будете также важны, как и все остальные персонажи. Мы и сами не знаем, как повернется наша с вами история.
И не переживайте, у нас два админа неканоны, плюс один из них не смотрел ни одной серии :D 
<br><b>В этом городе только дети? Какой возраст?</b>
<br>Да, все верно, в городе остались только подростки. Возраст персонажей от 14 до 19 лет.
<br><b>Есть ли электричество, связь?</b>
<br>Электричество, как и водоснабжение, функционируют. Связь осталась только локальная, никакого интернета. Позвонить куда-либо за пределы города также невозможно.
<br><b>Что значит графа «принадлежность» в анкете?</b>
<br>Все подростки подразделяются на такие «неофициальные» группировки.
<br><i>Бунтари</i> – люди, которые хотят любыми способами оставить свою прежнюю богатую жизнь; сеют хаос, устанавливают новые порядки; некоторые не гнушаются использовать силу, манипулируют; девиз – «все, что мое – мое».
<br><i>Миротворцы</i> – хотят организовать общество, в котором все делятся друг с другом тем, что было нажито. У них все общее, они распространяют добро и мир, пытаются выстроить четко организованный мир, в котором каждый работает на благо всех.
<br><i>Одиночки</i> – всегда есть те, кто идет против всех. Они сами по себе, но это не значит, что одиночки не могут сбиваться в группы, просто живут они каждый так, как считает нужным.
<br><u>Важно!</u>Все эти разделения вовсе не означают то, что вы не можете общаться между собой. Между людьми из разных групп могут быть абсолютно любые отношения: дружеские, романтические, вражеские.
<br><b>Откуда дети берут еду?</b>
<br>Пока что еда есть в магазинах, но потом детям придется научиться выращивать еду на будущее.
<br><b>Если мне понравилась внешность персонажа из сериала, но я не знаю его истории. Как быть?</b>
<br>Напишите в гостевую, и кто-нибудь из администраторов полностью распишет вам персонажа: характер и примерную сюжетную линию.
<br><b>Что, если я хочу взять внешность взрослого актера/актрисы?</b>
<br>Вы можете взять любую внешность, главное, чтобы на аватаре персонаж выглядел на заявленный возраст. Пожалуйста, не возбраняется играть с внешностью Джонни Деппа в молодые годы.


    </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>