<div class="container">
    <div class="html-box">
            <script>
    	/* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
(function(){var dep={"jQuery":"http://code.jquery.com/jquery-latest.min.js"};var init=function(){(function($){$.fn.idTabs=function(){var s={};for(var i=0;i<arguments.length;++i){var a=arguments[i];switch(a.constructor){case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}
if(typeof s['return']=="function")
s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}
$.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))
return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}
var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}
return s;}
$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}
var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}
var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();
</script>


<div id="stiles">	
<div id="oborotka">
<img style="display:none" id=MyLogIN  onclick="Piar2 ()" src="http://forumstatic.ru/files/0014/e2/2a/61331.png">
</div>
<div id="kn" class="tabb"> 
    <ul>
	<br>
<li class="row"><a href="http://ehozavtra.mybb.ru/viewtopic.php?id=2#p2" target="_blank">гостевая</a></li>
<li class="row"><a href="http://ehozavtra.mybb.ru/viewtopic.php?id=3#p3" target="_blank">списки занятых</a></li>
<li class="row"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=118#p141" target="_blank">доска объявлений</a> </li>
<li class="row"><a href="http://ehozavtra.mybb.ru/viewtopic.php?id=147#p316" target="_blank">обсуждение игры</a></li>
<li class="row"><a href="http://ehozavtra.mybb.ru/viewtopic.php?id=66#p84" target="_blank">вопросы по игре</a></li>
<li class="row"><a href="http://forum-top.ru/vote/4161"  target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x15_8.gif"></a></li>
</ul>
</div>


<div id="blok" class="tabb"> 
<ul> 
<li class="menu"><a href="#menu1"><span>События</span></a></li> 
<li class="menu"><a href="#menu2"><span>Впервые здесь</span></a></li>
</ul>
<div id="menu1" class="content">
<br>Погодные условия на пятницу <b>13 марта 2015 года:</b> <i>утро</i> - небо затянуто тучами, моросит дождь; день - сохраняется пасмурность; <i>вечер</i> - начинается сильный дождь, <i>к ночи</i> переходящий в ливень. 
<br>
Последователи знаменитого прорицателя Дживаса заявили о себе снова: они покусились на жизнь аврора и разослали всему волшебному обществу письма.
<br>
Кроме того, некоторые студенты Хогвартса жалуются на  <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=164#p398">странные бесформенные привидения</a>, которые ведут себя хуже чем стая пикси!      
</div> 

<div id="menu2" class="content">
<table width="100%" border="0" style="background-image: url(http://forumstatic.ru/files/0014/e2/2a/33188.png); background-repeat: no-repeat">
  <tr>
    <td width="185px">&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	&nbsp;<br>
	</td>
    <td valign="top">	
	  <br><br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=6#p6">шаблоны анкет</a> <br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=3#p37">правила</a> <br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=4#p4">сюжет</a>
    
</td> 
   <td width="173px" valign="top">
	&nbsp;<br>
	&nbsp;<br>
   	&nbsp;<br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=65#p83">персонажи на время</a> <br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=3#p12">занятые внешности</a> <br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=3#p15">свободные профессии</a> <br>
<img src="http://se.uploads.ru/EfpxJ.png"> <a href="http://ehozavtra.mybb.ru/viewtopic.php?id=5#p5">нужные персонажи</a> 
</td></tr>
</table>
</div> 


<script type="text/javascript"> 
  $("#blok ul").idTabs(); 
</script>

</div>
</div>

<style>
#stiles {background: url() 0% 50% no-repeat transparent;
height: 252px;
position: relative;
}


#kn {
text-align: center;
top: 81px;
width: 170px;
padding: 0px 633px;
color: #554b58;
}

.tabb {
margin: 0px;
position: absolute;
}

.row {
background: rgba(11, 9, 11, 0.010);
border: 1px outset rgba(11, 9, 11, 0.200);
box-shadow: 1px 1px 4px #615c62;
height: 17px; /* высота ячейки */
line-height: 18px; /* высота до названия - гостевая */
margin: 2px; /* между строками расстояние */
width: 157px; /* ширина ячейки */
}

.row a {
color: #f0eef2 !important; 
font: 12px Verdana !important;
text-transform: uppercase;
}

.row a:hover, .row a:focus, .row a:active {
color: #421f53 !important; 
}

#oborotka {
background: url() 0% 50% no-repeat transparent;
height: 100px;
width: 141px;
position: absolute;
left: 660px;
top: 6px;
}

/*  */


#blok { 
left: 30px;
position: absolute;
top: 5px;
}

#blok li a {
left: 192px;
background: url("http://se.uploads.ru/tq6mp.png") 0px 0px no-repeat transparent;
width: 178px !important;
color: #eeeeee;
display: inline-block;
font:  11pt Verdana;
height: 42px;
padding: 7px 0px 0px; 
position: relative;
text-align: center;
text-shadow: 1px 1px 4px #d1bfd8;
text-transform: uppercase;
}

 #blok li a:hover, #blok li a:focus, #blok li a:active, .selected {
background-position: 0px -55px; 
z-index: 5;
color: #EEEEEE;
}

 #blok li{
margin: 0px -6px;
display: inline-block;
 }
 
.content { 
left: 45px;
height: 165px;
overflow: auto;
padding: -200px 15px;
position: relative;
width: 510px;
}

</style>
</div>
</div>