<style type="text/css"> 
#tbl-2 {
  color:#610E0E;
  margin-top:-50px;
  position:relative;
  background: transparent url(http://funkyimg.com/i/28Ak3.png) no-repeat 6px 0;
  width:860px;
  height:402px;
}
#tbl-2 .cnt-a {
  margin:0;
  padding:8px;
  text-align:center;
  position:absolute;
  width:222px;
  overflow-y:auto;
  overflow-x:visible;
}
#Nav.cnt-a {
  z-index:100;
  overflow:visible;
  padding:0;
  height:67px;
  width:195px;
  top:190px;
  left:51px;
}
#Nav li {
  display:inline-block;
  background: transparent url(http://funkyimg.com/i/28A4t.png) no-repeat 1px 0;
  cursor:pointer;
  font: normal normal 400 11px/normal Georgia;
  color:#D6675F;
  text-shadow: 1px 1px 0 rgba(242,137,126,.34); 
  height:15px;
  margin-bottom:1px;
  width:100%;
}
#Nav li:hover,#Nav li.active{ 
  background-position: 2px -15px;
  text-shadow: -1px -1px 0 rgba(255,255,255,.3),0 0 1.4em rgba(250,180,118,1),1px 1px 0 rgba(245,144,93,1);
  color:#E34B43;
}
#Up01 {
  height:96px;
  top: 61px;
  left:30px;
}
#Up02 {
  height:298px;
  top: 61px;
  left:318px;
}
#Up03 {
  height:201px;
  top: 61px;
  left:609px;
}
#Btm01 {
  overflow:visible!important;
  height:67px;
  top: 294px;
  left:30px;
}
#Btm03 {
  overflow:visible!important;
  height:67px;
  top: 294px;
  left:609px;
}
#Up02 .cnt {
  margin:0 auto;padding:0;
  padding-right:3px;
  min-height:99%;
  width:210px;
  text-align:justify;
  opacity:0;
  display:none;
}
#Up02 .cnt.active {
  opacity:1;
  display:block;
}
#Up02 .cnt h5{
  text-align:center;
  padding:2px;
  color:rgba(75,49,49,1);
  text-shadow: 1px 1px 0 rgba(0,0,.4); 
  font: normal normal 400 12px/normal 'Lucida Console';
  box-shadow:inset 0 0 .6em rgba(180,95,23,.7);
  border-radius:12px;
}
#Btm01.cnt-a .image,#Btm03.cnt-a .image{
  cursor:pointer;
  display:inline-block;
  position:relative;
  margin-top:3px;
  margin-left:2px;
  margin-right:0px;
  text-align:center;
}
.image pre {
  background-color: rgba(222,184,144,.8);
  padding:4px;
  width:155px;
  border-radius:7px;
  border:3px solid #BD936A;
  margin-left:-54px;
  position:absolute;
  top:102%;
  box-shadow: 0 0 13px rgba(0,0,0,.3);
  display:none;
}
.image:hover pre {
  position:absolute; z-index:1000;
  display:block;
}
.image>img {
  border-radius:7px;
  border:2px solid #C59E78;
}
</style>	
<div id="tbl-2">
<!-- Навигация -->
  <div class="cnt-a" id="Nav">
     <li class="active">НАВИГАЦИЯ</li>
     <li>ИГРОВЫЕ ДАННЫЕ</li>
     <li>АКТИВНЫЕ ЭПИЗОДЫ</li>
     <li>БАННЕРОБМЕН</li>
  </div>
<!-- Верхние секции -->
  <div class="cnt-a" id="Up01">
11.о2. Закончился пересмотр рангов.
 Были просмотрены все темы,
 которые обновлялись в течении последних двух месяцев.
 Те, кто повысился в ранге: поздравляю!)
 Те, кто понизился - ребята, не расстраиваемся,
 ранг - это всего-лишь цифра в профиле
  </div>
 
<div class="cnt-a" id="Up02">
    <div class="cnt active">
<h5>1-я Вкладка</h5>
11.о2. Закончился пересмотр рангов.
 Были просмотрены все темы,
 которые обновлялись в течении последних двух месяцев.
 Те, кто повысился в ранге: поздравляю!)
 Те, кто понизился - ребята, не расстраиваемся,
 ранг - это всего-лишь цифра в профиле,
 главное получать удовольствие от того, что вы делаете.
    </div>
    <div class="cnt">
<h5>2-я Вкладка</h5>
11.о2. Закончился пересмотр рангов.
 Были просмотрены все темы,
 которые обновлялись в течении последних двух месяцев.
 Те, кто повысился в ранге: поздравляю!)
 Те, кто понизился - ребята, не расстраиваемся,
 ранг - это всего-лишь цифра в профиле,
 главное получать удовольствие от того, что вы делаете.
    </div>
    <div class="cnt">
<h5>3-я Вкладка</h5>
ereeeeeeeeeeeeeeee
errrrrrrrrrrrrrrrr
errrrrrrrrrrrrrrrrrr
 
    </div>
    <div class="cnt">
<h5>4-я Вкладка</h5>
    </div>
</div>
 
  <div class="cnt-a" id="Up03">
11.о2. Закончился пересмотр рангов.
 Были просмотрены все темы,
 которые обновлялись в течении последних двух месяцев.
 Те, кто повысился в ранге: поздравляю!)
 Те, кто понизился - ребята, не расстраиваемся,
 ранг - это всего-лишь цифра в профиле,
 главное получать удовольствие от того, что вы делаете.
  </div>
<!-- Нижние секции -->
  <div class="cnt-a" id="Btm01">
<!-- АДМИНЫ -->
     <div class=image>
<img src=http://funkyimg.com/i/28ntP.gif>
<pre>
АДМИН Вася
Бла-Бла-Бла
</pre>
     </div>
     <div class=image>
<img src=http://funkyimg.com/i/28ntP.gif>
<pre>
АДМИН Вася
Бла-Бла-Бла
</pre>
     </div>
<!--//Конец АДМИНЫ//-->
  </div>
  <div class="cnt-a" id="Btm03">
<!-- РОЗЫСК -->
     <div class=image>
<img src=http://funkyimg.com/i/28ntP.gif>
<pre>
РОЗЫСК Вася
Бла-Бла-Бла
</pre>
     </div>
     <div class=image>
<img src=http://funkyimg.com/i/28ntP.gif>
<pre>
РОЗЫСК Вася
Бла-Бла-Бла
</pre>
     </div>
     <div class=image>
<img src=http://funkyimg.com/i/28ntP.gif>
<pre>
РОЗЫСК Вася
Бла-Бла-Бла
</pre>
     </div>
<!--//Конец РОЗЫСК//-->
  </div>
 
</div>
 
<script type="text/javascript">
(function(){
  var switches = $('#Nav>li');
  var cnt      = $('#Up02>.cnt');
 
  switches.click(function(){
    var num = switches.index(this);
    cnt.removeClass('active');
    switches.removeClass('active');
 
    switches.eq(num).addClass('active');
    cnt.eq(num).hide().addClass('active').fadeIn(600);
  });
})();
</script>