[html]<div class="htmldemo">
<div class="calendarbox">
  <table><tbody><tr><td></td>
    <td><span>месяц</span></td>
    <td><span>созвездие</span></td>
    <td><span>горный месяц</span></td>
    <td><span>время года</span></td>
    </tr>
    <tr>
    <td class="forcenter">
      1
    </td>
    <td><abbr style="cursor: pointer;">Месяц семян</abbr></td>
    <td>Дева / <abbr style="cursor: pointer;">Жрица</abbr></td>
    <td>Малахит</td>
    <td rowspan="4" class="forcenter two">весна</td>
    </tr>
    <tr>
    <td class="forcenter">
      2
    </td>
    <td><abbr>Месяц сева</abbr></td>
    <td>Ритуал</td>
    <td>Изумруд</td>
    </tr>
    <tr>
    <td class="forcenter">
      3
    </td>
    <td><abbr>Месяц леса</abbr></td>
    <td>Клюв</td>
    <td>Демантоид</td>
    </tr>
    <tr>
    <td class="forcenter">
      4
    </td>
    <td><abbr>Месяц цветов</abbr></td>
    <td>Корона</td>
    <td>Хризолит</td>
    </tr>
    <tr><td colspan="5" class="calendardivider"></td></tr>
    <tr>
    <td class="forcenter">
      1
    </td>
    <td><abbr>Месяц сетей</abbr></td>
    <td>Шут</td>
    <td>Желтый топаз</td>
    <td rowspan="4" class="forcenter two">Лето</td>
    </tr>
    <tr>
    <td class="forcenter">
      2
    </td>
    <td><abbr>Месяц покоса</abbr></td>
    <td>Справедливость</td>
    <td>Гелиодор</td>
    </tr>
    <tr>
    <td class="forcenter">
      3
    </td>
    <td><abbr>Месяц жатвы</abbr></td>
    <td>Серп / <abbr style="cursor: pointer;">Полумесяц</abbr>,  <abbr style="cursor: pointer;">Смерть</abbr></td>
    <td>Янтарь</td>
    </tr>
    <tr>
    <td class="forcenter">
      4
    </td>
    <td><abbr>Месяц плодов</abbr></td>
    <td>Лошадь</td>
    <td>Агат</td>
    </tr>
      <tr><td colspan="5" class="calendardivider"></td></tr>
    <tr>
    <td class="forcenter">
      1
    </td>
    <td><abbr>Месяц песен</abbr></td>
    <td>Копьеносец / <abbr>Любовник</abbr></td>
    <td>Рубеллит</td>
    <td rowspan="4" class="forcenter two">Осень</td>
    </tr>
    <tr>
    <td class="forcenter">
      2
    </td>
    <td><abbr>Месяц тьмы</abbr></td>
    <td>Мантия</td>
    <td>Красный берилл</td>
    </tr>
    <tr>
    <td class="forcenter">
      3
    </td>
    <td><abbr>Месяц охоты</abbr></td>
    <td>Гончая</td>
    <td>Гранат</td>
    </tr>
    <tr>
    <td class="forcenter">
      4
    </td>
    <td><abbr>Месяц холода</abbr></td>
    <td>Испытание</td>
    <td>Рубин</td>
    </tr>
    <tr><td colspan="5" class="calendardivider"></td></tr>
    <tr>
    <td class="forcenter">
      1
    </td>
    <td><abbr>Месяц льдов</abbr></td>
    <td>Маг</td>
    <td>Голубой топаз</td>
    <td rowspan="4" class="forcenter two">Зима</td>
    </tr>
    <tr>
    <td class="forcenter">
      2
    </td>
    <td><abbr>Месяц ветров</abbr></td>
    <td>Грифон</td>
    <td>Августит</td>
    </tr>
    <tr>
    <td class="forcenter">
      3
    </td>
    <td><abbr>Месяц родо́в</abbr></td>
    <td><abbr>Судьба</abbr></td>
    <td>Сапфир</td>
    </tr>
    <tr>
    <td class="forcenter">
      4
    </td>
    <td><abbr>Месяц тепла</abbr></td>
    <td>Труба</td>
    <td>Александрит</td>
    </tr>
  </tbody></table>
</div></div>

<style type="text/css">
.calendarbox table {table-layout: auto !important;
background: rgba(255,255,255,.1);
border-radius: 1px;
box-shadow: 0 0 0 1px #9c9672, 0 0 5px 1px rgba(255,255,255,.15) inset;
  margin: auto;
  font-family: montserrat;
}

.calendarbox tr:first-child {text-align: center;
background: rgba(0,0,0,.1);
}

.calendarbox tr:first-child td {padding: 10px 0 !important;
font-family: old standard tt;
font-weight: 700;
text-transform: uppercase;
}

.calendarbox tr td {border: 1px solid rgba(0,0,0,.1) !important;
padding: 7px 10px !important;
max-width: 120px}

.calendardivider {background: rgba(0,0,0,.05)}

.calendarbox td.forcenter {text-align: center;
font-weight: 700}

.calendarbox td.forcenter.two {text-transform: uppercase;
font-size: 14px;
font-family: old standard tt;
}
</style>

[/html]

[html]<div class="htmldemo">
<div class="noble_grad">
  <table>
    <tbody><tr>
      <td class="noble"><span>Титулованное
<br>дворянство (нобили)</span></td>
      <td>
        <b>Император</b> — монарх, глава Империи.<br>
Титул передается по праву первородства (наследует старший сын, если он умер раньше отца, то его старший сын, и дальше к следующим по старшинству линиям). Женщины наследуют лишь по прекращении всех потомков мужского пола.<br>
Супруг Императрицы носит титул принца-консорта.
<br><br>
<b>Наследный принц</b> — наследник престола.
<br><br>
<b>Принцы крови</b> — младшие дети монарха.
<br><br>
<b>Принцы</b> — представители младших линий императорской фамилии.
<br><br>
<b>Герцоги</b> — наследные правители одного из трех регионов Империи.<br>
Высший «не венценосный» титул.
<br><br>
<b>Маркизы</b> — старшие сыновья герцогов. Ранее маркизами в Империи именовались владельцы марок — крупных областей на границе, которым приходилось отбивать набеги на границе, по мере роста Империи марки исчезали, так как границы отодвигались, в итоге, чтобы патрицианская знать не чувствовала себя ущемленной, титул был реформирован.
<br><br>
<b>Графы</b> — владельцы графств.<br>
Малигарцы меж своими зовут графов мормэрами.
<br><br>
<b>Виконты</b> — землевладельцы классом пониже. В основном — старшие сыновья графов, хотя в Малигаре до сих пор много виконтов, которые получили титул и земли земли за службу на графа до прихода Империи. Малигарцы зовут их тэнами.
<br><br>
<b>Бароны</b> — самые младшие из титулованных дворян, имеющих земельные владения.
<br><br>
<small>(Все титулы, за исключением титулов принца-консорта и наследного принца, имеют женские варианты.)</small></td>
    </tr>
    <tr><td colspan="2" style="background: rgba(0,0,0,.05); padding: 5px !important"></td></tr>
    <tr>
      <td class="noble"><span>Нетитулованное<br>
дворянство</span></td>
      <td>
        <b>Баронет</b> — буквально «малый барон». Уже не нобиль, а мелкий дворянин, но с правом передавать титул по наследству. Может обладать землей, может не обладать.
<br><br>
<b>Кавалер</b> — почетное звание воина, идет в довесок к вручаемому ордену. Не передается по наследству. При наличии земли кавалер становится баронетом.
<br><br>
<b>Просто дворянин</b> — человек благородного происхождения без титула и звания кавалера.
      </td>
    </tr>
  </tbody></table>
</div></div>

<style type="text/css">

.noble_grad table {table-layout: auto !important;
  margin: auto;
  background: rgba(0,0,0,.05)
}

#pun .noble_grad td:not(.noble) {padding: 25px !important;}
.noble_grad table {table-layout: auto !important;
  margin: auto;
  background: rgba(0,0,0,.05)
}

#pun .noble_grad td:not(.noble) {padding: 25px !important;}

.noble_grad td.noble {background: #403025;
color: #c2bc9d;
font: 800 10px montserrat;
text-align: center;
text-shadow: 0 0 1px rgba(0,0,0,.8);
text-transform: uppercase;
letter-spacing: 2px;
  width: 60px !important;

}

.noble_grad td.noble span {transform: rotate(180deg);
display: block;
  padding: 0 !important;
      writing-mode: tb-rl;
  margin-left: 20px;
white-space: nowrap;
}

</style>

[/html]

[html]<div class="aboutworld">
  <div class="vtabs">
    <input id="vtab1" type="radio" name="vtabs" checked="">
    <label for="vtab1"><span>Тора Эбениа</span></label>

    <input id="vtab2" type="radio" name="vtabs">
    <label for="vtab2"><span>Э́нвис</span></label>
   
        <input id="vtab3" type="radio" name="vtabs">
    <label for="vtab3"><span>Мнимо́ника</span></label>
   
        <input id="vtab4" type="radio" name="vtabs">
    <label for="vtab4"><span>Кабал</span></label>
   
        <input id="vtab5" type="radio" name="vtabs">
    <label for="vtab5"><span>Академия</span></label>

    <section id="vcontent-tab1">
        <div>
Второе название: Белая Башня (только члены ордена знают, что в изначально орден назывался Тора Эбернея, что переводится как «костяная башня»).
<br>Один из двух орденов, привезенный с Благословленных Земель. Тот самый, который менее ста нет назад воевал с Империей, а после заключил мир на выгодных для себя условиях.
Маги ордена считаются лучшими целителями на всем континенте, а также лучшими дипломатами.
<br><br>
Тора Эбениа — единственный орден, который может создавать <a href="http://333.f-rpg.ru/viewtopic.php?id=4#p18">экзекуторов</a>. Их право на это закреплено в мирном договоре с Империей.
<br><br>
Башни ордена есть во многих городах Империи и Геллифора, но главная башня располагается в Авейре.
<br><br>
<b>ИЕРАРХИЯ:</b><br>
<b>Великий магистр</b> — глава ордена<br>
<b>Восемь старших магистров</b> — самые сильные и ценные маги ордена, вместе с Великим магистром образующие <b>Магистериум</b><br>
<b>Магистры</b> — сильные маги, ценные члены ордена, допущенные к его тайнам. Лишь один маг из тысячи оказывается достаточно сильным, чтобы орден начал его обучение на магистра. Магистрами ордена Тора Эбениа еще никогда не становились маги моложе 30 лет<br>
<b>Адепты</b> — рядовые члены, маги, недостаточно сильные, чтобы продолжить обучение после стандартного десятилетнего курса<br>
<b>Ученики</b> — все те, кто еще не завершил обязательное десятилетнее обучение в Башне учеников в Матере
<br><br>
После завершения обучения члены ордена не ограничены в своих передвижениях.
<br>Все члены ордена за исключением учеников раз в год уплачивают членский взнос, который рассчитывается исходя из того, какой доход маг имел за год. (От 9% до 15% в год. Маги, заработавшие много, могут отдать больше, если пожелают).
        </div>
    </section> 
    <section id="vcontent-tab2">
        <div>
Второе название: Семицветье, поскольку <i>enfys</i> переводится с гелля как «радуга».
<br>Орден, объявивший себя наемным.
<br><br>
В этом ордене создают <a href="http://333.f-rpg.ru/viewtopic.php?id=4#p18">усмиренных</a>.
<br><br>
Все члены ордена носят плащи с гербом ириса и <abbr>цветом школ, к которым они принадлежат</abbr>. Школ, естественно, семь.
<br><br>
Красный — цвет школы боевой магии.<br>
Оранжевый — цвет строителей и зачарователей.<br>
Желтый — цвет целителей и специалистов по метаморфозам тела.<br>
Зеленый — цвет зельеваров и алхимиков.<br>
Голубой цвет означает школу ментальной магии (в т. ч. иллюзий).<br>
Синий — школу <abbr>телепортации</abbr>, которая также изучает переходы между мирами (и все прилагающееся).<br>
Фиолетовый — цвет школы изучающей порождения Хаоса и возможность некромантии.
<br><br>
Центральный Круг ордена находится в городе Арфон в Геллифоре.
<br><br>
<b>ИЕРАРХИЯ:</b><br>
<b>Великий чародей</b> — глава ордена<br>
<b>Двенадцать старших чародеев</b> — сильнейшие чародеи в ордене, члены <b>Капитула</b>. Чтобы иметь право претендовать на это место чародей ордена должен носить на плаще как минимум четыре цвета<br>
<b>Служители</b> — рядовые чародеи<br>
<b>Послушники</b> — ученики. Чтобы перейти не следующую ступень должны освоить любые две школы из представленных в ордене
<br><br>
После завершения обучения члены ордена не ограничены в своих передвижениях.
<br>Члены ордена выше послушника платят ордену 20% процентов от каждого исполненного контракта.
        </div>
    </section>   
        <section id="vcontent-tab3">
        <div>
Члены ордена называют себя Помнящими и считают своей целью недопущение возвращения Неназываемого и повторения Ерополема.
<br><br>
Все члены ордена неразрывными нитями связаны с памятью основателя ордена Оре́сом, который сражался на Великой войне. Каждую ночь они видят кошмары, в которых его глазами наблюдают гибель Благословленных Земель со всеми населяющими их людьми. <b><i>Видят как наяву.</i></b>
Эта же магия дает им возможность иногда предсказывать будущее.
<br><br>
Орден старается держаться подальше от политики.<br>
Их единственная цель — спасение мира.<br>
Их единственный враг — Кабал, в который никто не верит. В последний раз члены ордена сталкивались с Кабалом более пятисот лет назад, раскрыв заговор, в который были втянуты Веран, Геллифор и несколько менее крупных королевств.<br>
Деньги на поддержание деятельности орден зарабатывает торговлей (у Мнимоники есть целый торговый флот), инвестициями и консультированием важных особ (из-за умения магов пророчествовать, аристократы и богатые торговцы часто обращаются к ним за советом).
<br><br>
Несмотря на то, что Мнимоника платит за детей с магическим даром не меньше других орденов, родители не так часто приводят к ним детей. В народе у Помнящих репутация помешанных фанатиков и паникеров. По этой причине орден принимает в свои ряды взрослых магов тоже, при условии, что они пройдут ритуал уз памяти.
<br><br>
Единственная цитадель ордена находится в городе Салуза в Карате.
<br><br>
<b>ИЕРАРХИЯ:</b><br>
<b>Архонт</b> — глава ордена<br>
<b>Архимаги</b> — помощники архонта, выбираемые им самим<br>
<b>Братья и сестры</b> — члены ордена, прошедшие ритуал, связывающий их с воспоминаниями Ореса<br>
<b>Непосвященные</b> — ученики
<br><br>
Братья и сестры ордена отправляются туда, где нужны ордену, и делают то, что им прикажут. Зато им нет необходимости платить членские взносы или зарабатывать себе на жизнь. Мнимоника обеспечивает своих членов всех необходимым.
        </div>
    </section>   
        <section id="vcontent-tab4">
        <div>
Таинственный культ, в существование которого сейчас верят только братья Мнимоники (хотя даже там в существовании Кабала начинают сомневаться).
<br><br>
В ордене Мнимоники верят, что Кабал составляют приспешники Неназываемого, пережившие Ерополема. В действительности же культисты или <b>азар’за</b>, как они сами себя называют — народ магов, принужденный Неназываемым к участию в Великой войне. За это они были прокляты так называемыми светлыми богами, полукровками, сражавшимися против Неназываемого и его легионов Хаоса. Они ждут повторения  Ерополема и жаждут его приблизить, так как только во время него смогут искупить свой грех и заслужить прощение. Ради этого они не остановятся ни перед чем.
<br><br>
Маги-оборотни <b>(едят человеческую плоть)</b>.
<br><br>
<center><b>ИГРОКИ В КУЛЬТ НЕ ПРИНИМАЮТСЯ. ЭТО ФРАКЦИЯ НПС.</b></center>
        </div>
    </section>   
        <section id="vcontent-tab5">
        <div>
Академия не является орденом, но тоже принимает на обучение детей.
<br>Находится не в столице, а в небольшом городке Арзоне вверх по течению реки. Живет он в основном за счет студентов и преподавателей Академии.
<br><br>
Начальный курс обучения в Академии составляет семь лет, после чего наставники определяют студента на один из трех факультетов: боевой магии, лечебной или общей магии.
Курс обучения боевой магии длится еще семь лет, лечебной — шесть лет, общей — три года, после которых выпускник может остаться в Академии, чтобы вести исследовать, что скажут, и получать жалование.
<br><br>
После выпуска все студенты обязаны пятнадцать лет (двенадцать для магов, участвовавших в военных конфликтах) прослужить на благо Империи, отрабатывая свой долг за обучение, после чего они считаются свободными. Большинство магов по истечении срока остается на службе.
<br><br>
Боевые маги и целители в армии и на флоте начинают лейтенантами.
    </div>
    </section>   
</div>
</div>

<style type="text/css">

.vtabs {
padding: 10px;
}

.vtabs>section {
display: none;
}
.vtabs>section>div {
margin: 10px 0 0px;
line-height: 1.5;
  background: rgba(255,255,255,.05);
  text-align: justify;
  padding: 10px
}
.vtabs>input {
display: none;
position: absolute;
}

.vtabs>label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 0px;
background: #403025;
color: #c2bc9d;
font: 700 10px montserrat;
text-align: center;
text-shadow: 0 0 1px rgba(0,0,0,.8);
text-transform: uppercase;
letter-spacing: 2px;
  width: 119px;
    position: relative;
}
.vtabs>label span {position: relative;
z-index: 1}

.vtabs>label:hover {
color: #a39d7e;
cursor: pointer;
}

.vtabs>input:checked+label {
color: #403025;
  text-shadow: none;
  background: #9f9979
}

#vtab1:checked~#vcontent-tab1, #vtab2:checked~#vcontent-tab2, #vtab3:checked~#vcontent-tab3, #vtab4:checked~#vcontent-tab4, #vtab5:checked~#vcontent-tab5 {
display: block;
}

</style>

[/html]