[html]<center><img src="http://s8.uploads.ru/GiqSr.jpg"></center>
<br>
<!--Стиль и скрипт таблицы-->
<style>
#titl {
text-align: center;
font-family: Palatino Linotype;
font-size: 14px;
font-weight: bold;
}
#menu span {
height: 8px;
cursor: pointer;
color: #776455;
background: url(http://forumstatic.ru/files/000e/4d/84/29639.png) repeat bottom transparent;
text-decoration: none;
border: 0px solid #C0C0C0;
border-top: 0px solid #C0C0C0;
text-transform: uppercase;
text-shadow: 0px 1px 0px #000000;
padding: 8px;
font-size: 1em;
font-weight: normal;
}
#menu .tabactive {box-shadow: inset 0 0 2em rgba(0,0,0,0.6);}
#menu span:hover {box-shadow:inset 0 0 2em rgba(0,0,0,0.6);} /* Параметры тени */
#submenu {
/*padding: 5px;
width: 500px;*/
}
.submenutext {
display: none;
height: auto;
width: 950px;
overflow-y: auto;
overflow-x: hidden;
padding: 4px 12px;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 1px #382C2B;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0.5) !important;
position: relative;
}
/* entire container, keeps perspective */
.flip-containers {perspective: 1000px;}
/* flip the pane when hovered */
.flip-containers:hover .flippers, .flip-containers.hover .flippers {transform: rotateY(180deg);}
.flip-containers, .fronts, .backs {
width: 130px !important;
height: 215px !important;
}
/* flip speed goes here */
.flippers {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.fronts, .backs {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.fronts {
z-index: 2;
transform: rotateY(0deg); /* for firefox 31 */
}
/* back, initially hidden pane */
.backs {
transform: rotateY(180deg);
width: 130px !important;
height: 215px !important;
box-shadow: 0 0 1px #382C2B;
color: #776455;
font-size: 10px;
background: url(http://forumstatic.ru/files/0011/ce/f7/83829.jpg);
}
.answersssss {
padding: 7px 7px 7px 7px;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 1px #382C2B;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0.25) !important;
-moz-border-image: url(http://forumstatic.ru/files/000e/4d/84/30314.png) 18 6 repeat;
/* -webkit-border-image: url(http://forumstatic.ru/files/000e/4d/84/30314.png) 18 6 repeat; */
-o-border-image: url(http://forumstatic.ru/files/000e/4d/84/30314.png) 18 6 repeat;
width: 116px !important;
text-align: center;
font-family: Georgia, serif;
font-size: 11px !important;
letter-spacing: 1px;
}
.backs img {margin-left: -5px;}
</style>
<!--Скрипт таблицы-->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").css({"z-index":"-1;"})
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).css({"z-index":"1"})
$("td.#MenuTxT div.submenutext").hide(0);
$("div."+activeDiv).show(0);
return false; });
});
</script>
<!--Наполнение таблицы-->
<table style="width: 980px;">
<tbody>
<tr>
<td style="text-align: center; margin: 10px 0; position: relative; border: 1px solid rgba(109, 78, 83, 0.4); left: 9px; background: none !important;">
<div id="menu">
<span alt=#sm1 "style="cursor: pointer;">Приветствие</span>
<span alt=#sm2 "style="cursor: pointer;">Первые лица</span>
<span alt=#sm3 "style="cursor: pointer;">Города</span>
<span alt=#sm4 "style="cursor: pointer;">Гильдии</span>
<span alt=#sm5 "style="cursor: pointer;">Расы</span>
</div>
</td>
</tr>
<tr align="left">
<td id="MenuTxT" valign="top" style="height: auto;">
<div id="submenu" width="100%">
<div id="sm1" class="submenutext" style="display:block;">
<table border="0">
<tbody>
<tr>
<td>
<div id="titl">Добро пожаловать в наш мир!</div><br>
<center>Пришла и ваша пора стать его частью, для чего заполните нижеуказанный шаблон, а мы подготовим для вас вступительный бонус: 300 франков и бездонную сумку.</center><br><br>
</td>
</tr>
</tbody>
</table>
</div>
<div id="sm2" class="submenutext" style="height: 500px;">
<div style="text-align: center; text-transform: uppercase; text-shadow: 0px 1px 0px #000000; padding: 8px; font-size: 1em; font-weight: normal;">Королевская семья</div>
<table>
<tr>
<td>
<div class="flip-containers" ontouchstart="this.classList.toggle('hover');"><div class="flippers">
<div class="fronts">
<img src="http://s5.uploads.ru/Ep97G.jpg" style="width:130px;height:215px;">
</div>
<div class="backs">
<div style="margin: 5px;"><div class="answersssss" style="margin-left: -5px;margin-top:-5px;">Валнор Грейхаунд</div><br>
Человек, 47 лет<br>Коронован 23.11.45<br><br>• женился 16.11.45<br>на Софии Фонфор<br>• есть дочь Анна,<br>родилась 26.08.46<br><br>[роль закрыта]</div>
</div>
</div></div>
<div class="answersssss">Король</div>
</td>
<td><div class="flip-containers" ontouchstart="this.classList.toggle('hover');"><div class="flippers">
<div class="fronts">
<img src="http://s8.uploads.ru/NYaDf.jpg" style="width:130px;height:215px;">
</div>
<div class="backs">
<div style="margin: 5px;"><div class="answersssss" style="margin-left: -5px;margin-top:-5px;"><a href="http://fantezigra.rolka.su/viewtopic.php?id=2040" about="_blank">София Грейхаунд</a></div><br>Человек, 24 года<br>До свадьбы - младшая принцесса де Фонфор<br><br>• в управлении не участвует<br>• живет во дворце с дочерью Анной<br><br>[роль закрыта]</div>
</div>
</div></div>
<div class="answersssss">Королева</div>
</td>
<td><div class="flip-containers" ontouchstart="this.classList.toggle('hover');"><div class="flippers">
<div class="fronts">
<img src="http://se.uploads.ru/aQJFY.jpg" style="width:130px;height:215px;">
</div>
<div class="backs">
<div style="margin: 5px;"><div class="answersssss" style="margin-left: -5px;margin-top:-5px;"><a href="http://fantezigra.rolka.su/viewtopic.php?id=2551" about="_blank">Тиадальма де Фонфор</a></div><br>Человек, 24 года<br>Старшая сестра-близнец Софии<br><br>• Заклинатель огне-земельного духа<br>• окопалась в миру<br><br>[роль открыта через наследие анкеты]</div>
</div>
</div></div>
<div class="answersssss">Принцесса</div>
</td>
<td><div class="flip-containers" ontouchstart="this.classList.toggle('hover');"><div class="flippers">
<div class="fronts">
<img src="http://s1.uploads.ru/eUGCA.jpg" style="width:130px;height:215px;">
</div>
<div class="backs">
<div style="margin: 5px;"><div class="answersssss" style="margin-left: -5px;margin-top:-5px;">Мариана де Фонфор</div><br>Человек, 45 лет<br>Вдова прошлого К.,<br>Чарльза де Фонфора<br><br>• ушла за кулисы<br>• кроме дочерей есть<div style="margin-right: -10px;margin-bottom:-10px;">законнорожденный сын Вильгельм, первый в очереди наследия, и бастард Гэбриэл</div><br><br>[роль закрыта]</div>
</div>
</div></div>
<div class="answersssss">Королева-мать</div>
</td>
</tr>
</table>
</div>
<div id="sm3" class="submenutext" style="height: 500px;">
<script type="text/javascript">
$("#sm3").load('/pages/igrushki #igr');
</script>
</div>
<div id="sm4" class="submenutext" style="height: 500px;">
4
</div>
<div id="sm5" class="submenutext" style="height: 500px;">
5
</div>
</div>
</td>
</tr>
</tbody>
</table>
<hr style="transform: scale(1,-1); margin-top: -8px">
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" style="display: none; top: 2px; position: relative" height="13" width="13"></div>[/html]