<style>	
#menu1 span {
padding: 7px 15px 7px;
margin: 10px 5px;
width: 100px;
text-decoration: none;
font-weight: bold;}

#menu1 .tabactive, #menu2 .tabactive {
color: #9ca3a6;
background: #152b38;
border: 1px solid #152b38; 
border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;}

#submenu1 {
margin-top: 10px;
padding: 0px;
font-size: 12px;
width: 720px;
height: 365px;}

.submenutext1 {
text-align: center;
display: none;}

</style>

<center><table style="width: 615px;" border="0">
 <tbody>
  <tr>
   <td align="center">
    <div id="menu1"> 
<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>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT1" valign="top" align="center">
    <div id="submenu1" align="center">
     <div id="sm1" class="submenutext1" style="display:block;">

<table width="100%" cellspacing="0" cellpadding="0" border="1" style="background: url(http://s49.radikal.ru/i126/1112/16/167d71527558.jpg) no-repeat center center;"><tr style="font-weight: bold;">

<td width="178" align="center" height="10">Добро пожаловать!</td>
<td width="178" align="center" height="10">Время и погода</td>
<td width="178" align="center" height="10"> А сегодня…</td>
<td width="178" align="center" height="10"> Срочно требуются:</td>

</tr>
<tr height="110"><td>
<div style="width: 96%; height: 90px; overflow: auto;">

Маг ты или маггл, мы всегда рады видеть тебя на нашей ролевой. У нас уютно и душевно. Благодаря хитроумно заплетённому сюжету, каждый игрок важен. 
<br/>
<b>Будь с нами и мы всегда будем с тобой.</b>

</div>
</td>

<td>
<div style="width: 96%; height: 90px; overflow: auto;">

1 сентября, пятница, 1995 год; 
<br/>
<b>Время:</b> 22:00-00:00; 
<br/> 
<b>Погода:</b> + 18, к вечеру похолодало, усилился ветер.

</div>
</td>

<td>
<div style="width: 96%; height: 90px; overflow: auto;">

А сегодня начинает свою жизнь меню нашего форума, на который, кстати, мисс Браун убила 4 дня и 3 ночи. Это лишь начало из всего того, что будет сделано! 
<br/>
<b>Оставайтесь с нами!</b>

</div>
</td>

<td>
<div style="width: 96%; height: 90px; overflow: auto;">

<a href="_" title="Принимается по пробному посту"> Гарри Поттер</a>
<br/>
<a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=332"> Невилл Лонгботтом</a>
<br/>
<a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=331#p6582"> Луна Лавгуд</a>
<br/>
<a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=332"> Чоу Чэнг</a>
<br/>
<a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=331#p6581"> Долорес Амбридж</a>
<br/>
<a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=332"> Поппи Помфри </a>
<br/>
<a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=3"> <b> Список персонажей<b></a>

</div>
</td>
</tr>
<tr height="214">

<td>

<img width="178" height="214" src="http://s017.radikal.ru/i442/1112/6b/4d033377c6a2.png">

</td><td>

<img width="178" height="214" src="http://s61.radikal.ru/i173/1112/47/0d5330bebbe5.png">

</td><td>

<img width="178" height="214" src="http://s017.radikal.ru/i434/1112/31/5811448fb344.png">

</td><td>

<img width="178" height="214" src="http://s017.radikal.ru/i436/1112/e7/cacbed463520.png">

</td></tr>
<tr height="20" style="font-weight: bold;">
<td> 

0

</td><td>

0

</td><td>

0

</td><td>

0

</td></tr></table>

</div>
     <div id="sm2" class="submenutext1">

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="1" style="background: url(http://s49.radikal.ru/i126/1112/16/167d71527558.jpg) no-repeat center center;">
<tr style="font-weight: bold;"><td width="33%" align="center" height="30">

Сюжет

</td><td width="34%" align="center" height="30">

Новости

</td><td width="33%" align="center" height="30">

Руководство

</td></tr>

<tr align="center"><td style="padding: 5px 0 5px 0;">
<div style="width: 96%; height: 315px; overflow: auto; padding: 3px;">

Перед самым началом учёбы преподаватели Хогвартса обнаруживают в замке новый призрак, который наотрез отказывается говорить о себе и стремительно скрывается из поля зрения при появлении человека. После долгих и мучительных попыток успокоить бедное приведение, они с ужасом узнают в нём преподавателя магловедения Чэрити Бербидж, которая утверждает, что её зверски убили в Косом переулке, перемежая свою речь душераздирающими воплями. В скором времени в указанном месте авроры обнаруживают её труп. 
<br/>
Тем временем группа учеников, чувствуя приближающуюся опасность, втайне от преподавательского состава основывает организацию под названием "Отряд Дамблдора".
<br/>
Всем нам предстоит разобраться в этом нелёгком и опасном деле, иначе кто знает, на кого впредь падёт выбор загадочного убийцы?.. 
<br/>
Подробнее <a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=314#p5713 "> здесь </a>

</div>
</td>
<td>
<div style="width: 96%; height: 315px; overflow: auto;">

Вкусная еда и приятная атмосфера праздника, наполнявшая тронный зал, заставляла детей и профессоров почувствовать себя снова дома, но ничто не вечно. А этот чудесный вечер уже близился к концу, и старостам факультетов было велено развести первокурсников по их спальням.
Многие начинали уже зевать. Пора было отправляться разбирать вещи и ложиться спать.
Всех игроков прошу разойтись по комнатам.
Более подробные новости вы можете узнать <a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=132"> тут </a>	

</div>
</td>
<td>
<div style="width: 96%; height: 315px; overflow: auto;">

<b> Админы </b>
<br/>
<!-- Картинки админов -->
<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=102"><img width="90" height="90" src="http://forumavatars.ru/img/avatars/000c/36/63/102-1319635701.jpg" title="Кида Браун.Администратор общих вопросов. Всё к ней."> 

<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=72"><img width="90" height="90" src="http://forumavatars.ru/img/avatars/000c/36/63/72-1302611646.jpg" title="Джаред Эйвери. Проверяющий анкеты."> 

<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=73"><img width="90" height="90" src="http://s60.radikal.ru/i169/1112/69/488e9c1dda46.jpg" title="Пэнси Паркинсон.">

<br/><br/>

<b> Модераторы </b>
<br/>
<!-- картинки модераторов -->

<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=97"><img width="90" height="90" src="http://forumavatars.ru/img/avatars/000c/36/63/97-1319724816.jpg" title="Аластор Грюм. Ответственный за домашние задания и лекции">

<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=67"><img width="90" height="90" src="http://forumavatars.ru/img/avatars/000c/36/63/67-1296907956.jpg" title="Нимфадора Тонкс. Квестоплёт">

<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=128"><img width="90" height="90" src="http://forumavatars.ru/img/avatars/000c/36/63/128-1317504506.jpg" title="Драко Малфой. Пиарщик, акциипридумыватель.">

<a href="http://harrypotternewstory.magicrpg.ru/profile.php?id=165"><img width="90" height="90" src="http://forumavatars.ru/img/avatars/000c/36/63/165-1322823228.png" title="Элис Джонсон. Пиарщик.">

</div>
</td></tr></table>

</div>
     <div id="sm3" class="submenutext1" style="background: url(http://s49.radikal.ru/i126/1112/16/167d71527558.jpg) no-repeat center center;">

<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr><td rowspan="2" width="30%"></td>

<td width="70%" height="30">  

<b> Наша реклама </b> 

</td></tr>

<tr><td valign="top" height="100"> 

<a href="http://harrypotternewstory.magicrpg.ru" target="_blank"><img src="http://s61.radikal.ru/i174/1112/64/66b3028617b5.gif" title="Harry Potter and the New story" width="88" height="31"></a>

<a href="http://harrypotternewstory.magicrpg.ru" target="_blank"><img src="http://s017.radikal.ru/i401/1112/72/3b4e22f13bc1.gif" title="Harry Potter and the New story" width="88" height="31"></a>

<a href="http://harrypotternewstory.magicrpg.ru" target="_blank"><img src="http://s017.radikal.ru/i414/1112/41/51f0686d9e9e.gif" title="Harry Potter and the New story" width="88" height="31"></a>

<a href="http://harrypotternewstory.magicrpg.ru" target="_blank"><img src="http://s05.radikal.ru/i178/1112/f8/d2d18eaad1cd.gif" title="Harry Potter and the New story" width="88" height="31"></a> 

<a href="http://harrypotternewstory.magicrpg.ru" target="_blank"><img src="http://s008.radikal.ru/i305/1112/32/ee6b6fd2eb0e.gif" title="Harry Potter and the New story" width="75" height="31"></a>

<a href="http://harrypotternewstory.magicrpg.ru" target="_blank"><img src="http://s001.radikal.ru/i196/1112/58/a425f53c0baf.gif "title="Harry Potter and the New story" width="75" height="31"></a>

</td></tr>

<tr><td rowspan="2">  По всем вопросам рекламы обращаться к <a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=128"> Драко Малфою </a>  и  <a href="http://harrypotternewstory.magicrpg.ru/viewtopic.php?id=165"> Элис Джонсон </a> </td>

<td height="30"> <b> Партнеры </b> </td></tr>

<tr><td height="100">
<marquee behavior="scroll" direction="left" width="96%" height="50" loop="0" scrollamount="3" scrolldelay="2" onMouseOver="this.stop()" onMouseOut="this.start()">

<a href="http://marvelgame.roletalk.ru/"><img src="http://25.media.tumblr.com/tumblr_loyupxOJjQ1qb1ukwo1_500.gif" width="88" height="31" border="0" alt="The Marvel Universe: You can feel how hard to be a hero"></a>

</marquee>
</td></tr></table>

</div>

     <div id="sm4" class="submenutext1" style="background: url(http://s49.radikal.ru/i126/1112/16/167d71527558.jpg) no-repeat center center;">

<style>	
#menu2 {
margin: 0 0 0 0;
width: 240px;
height: 50px;}

#menu2 span {
border-bottom: 1px solid #333;
text-align:center;
display:block;
margin: 0px;
padding: 18px 9px 17px 9px;}

#submenu2 {
text-align: center;
font-size: 12px;
width: 478px;}

.submenutext2 {
display: none; 
height: 350px;}

</style>

<center><table style="width: 100%; height: 100%;" border="1" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td width="240" valign="top">
    <div id="menu2"> <b>
<span alt="#sm5" style="cursor: pointer;">Кнопка 1</span>
<span alt="#sm6" style="cursor: pointer;">Кнопка 2</span>
<span alt="#sm7" style="cursor: pointer;">Кнопка 3</span>
<span alt="#sm8" style="cursor: pointer;">Кнопка 4</span>
<span alt="#sm9" style="cursor: pointer;">Кнопка 5</span>
<span alt="#sm10" style="cursor: pointer;">Кнопка 6</span>
<span alt="#sm11" style="cursor: pointer; border: none!important;">Кнопка 7</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT2"  align="center" valign="top">
    <div id="submenu2" align="center"> 
     <div id="sm5" class="submenutext2" style="display:block; background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент первой кнопки

</div>
     <div id="sm6" class="submenutext2" style="background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент второй кнопки

</div>
     <div id="sm7" class="submenutext2" style="background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент третьей кнопки

</div>
     <div id="sm8" class="submenutext2" style="background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент четвертой кнопки

</div>
     <div id="sm9" class="submenutext2" style="background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент пятой кнопки

</div>
     <div id="sm10" class="submenutext2" style="background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент шестой кнопки

</div>
     <div id="sm11" class="submenutext2" style="background: url(ссылка на бэкграунд) no-repeat center center;"><br/>

Контент седьмой кнопки

</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>


<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT2 div.submenutext2").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT2 div.submenutext2:first").show();
$("div.#menu2 span").click(function() {
    $("div.#menu2 span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT2 div.submenutext2").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>


</div>
   </td>
</tr>
 </tbody>
</table></center>

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT1 div.submenutext1").hide('1600');
<!--$(".tabs span:first").addClass("active").show('2200'); -->
$("td.#MenuTxT1 div.submenutext1:first").show('2200');
$("div.#menu1 span").click(function() {
    $("div.#menu1 span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT1 div.submenutext1").hide('1600');
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>