<!--HTML-->
<!-- Стиль меню таблицы в объявлении -->
<style type="text/css">
/****************************************
   Таблица с переключаемыми Вкладками
****************************************/
#tab2,#tab2*{
  paddibg:0;
  margin:0;
}
#tab2 {
  background:transparent url(http://ipic.su/img/img7/fs/osnova.1469201937.png) 0 0 no-repeat;
  height:300px;
  width:640px;
  
}
#tab2,#tab2 td{
  border:none 0 transparent!important;
  border-collapse:collapse;
}
img[data^="tab"]{
  cursor:pointer;
  height:100%;
 
  border:none 0 transparent!important;
}
.tab-content {
  display:none;
  width:100%;
  height:260px;
 
  color:#000000;
  overflow-y:auto;
}
</style>
<script type="text/javascript">
$.fn.switch_tabs = function() {
  var tbl = this,knopK = $("img[data^='tab']",tbl);
  knopK.each(function(){
    var arr = $(this).attr('data').split(",");
    $(this).css("background-image","url("+arr[1]+")")
  }); knopK.css("background-position","120% 10000px")
      knopK.css("background-repeat","no-repeat")
  knopK.click(function(){
    knopK.removeClass('active');
    $(this).addClass('active');
    var arr = $(this).attr('data').split(",");
    tbl.css("background-image","url("+arr[1]+")")
    $(".tab-content",tbl).hide();
    $("#"+arr[0]+"",tbl).show();
  });
}
</script>

<table id="tab2" class="tbl-0" border="0">
<tr>
<td class="butt" valign=center height=40>   <!-- Секция кнопок -->
<img width="150" data="tab-1,http://ipic.su/img/img7/fs/osnova.1469201937.png"  src="/i/blank.gif" class="active"/>
<img width="155" data="tab-2,http://ipic.su/img/img7/fs/info.1469201840.png"  src="/i/blank.gif"/>
<img width="155" data="tab-3,http://ipic.su/img/img7/fs/pokemony.1469201860.png"  src="/i/blank.gif"/>
<img width="150" data="tab-4,http://ipic.su/img/img7/fs/nagrady.1469201873.png"  src="/i/blank.gif"/>
</td>
</tr>
<tr>
<td  class="content" align=center>
<!-- Контейнер контента 1-й кнопки -->
<div id="tab-1" class="tab-content"  style="display:block;">
<i>Я помощник - покедекстер, принадлежу тренеру покемонов Аделайн Найтингейл с острова Моро. <br>
Я информирую Аделайн и даю советы на тренировках покемонов. 
Если потеряюсь - замены не будет.</i>


</div>
<!-- Контейнер контента 2-й кнопки -->
<div id="tab-2" class="tab-content">
текст

</div>
<!-- Контейнер контента 3-й кнопки -->
<div id="tab-3" class="tab-content">
текст
</div>
<!-- Контейнер контента 4-й кнопки -->
<div id="tab-4" class="tab-content">
текст
</div>
</td>
</tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->

<!--HTML-->
<style>
.ul-menu * {
        margin: 0;
        padding:  0;
        margin: 0;
        padding:  0;
        font-size: 15px;
        font-family: 'Times New Roman';
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
 
 
    }
 
    .ul-menu li {
        list-style: none;
        margin: 3px 0 3px;
        background-color: #E0EDED;
        font-size:120%;
    }
 
.ul-menu li .cat_lnk {
        background:transparent url() no-repeat 0 0;
        text-align: center;
        padding: 6px;
        display: block;
        height: 28px;
        line-height: 28px;
        width: 96%;
        text-decoration: none;
 
}
.ul-menu li ul {
        list-style-position: outside;
        text-align:left;
        list-style: none;
        display: none;
        height:550px;
        width: 94%;
        margin-top: 1px;
        padding: 6px;
}
.ul-menu li .cat_lnk+ul {
        border: 1px solid green;
        border-top-color:#A5B7B7;
}
a.cat_lnk:hover,a.cat_lnk:active,a.cat_lnk:visited {
        text-decoration: none;
}
.ul-menu li a.cat_lnk.active{
        background-position: 0 -44px;
}
.ul-menu li a.cat_lnk:hover{
        background-position: 0 -88px;
}
</style>
<script type="text/javascript">
 
$.fn.tree_menu = function() {
 
        var nav = this;
        var uls = nav.find("ul");
        var ulsL = uls.length-1;
 
 
        nav.find("a").click(function() {
            var Lnk=$(this).attr("href");
            var self = $(this).next();
            if ( self.length == 0 ) return;
 
 
            uls.each(function( index ){
 
                    if ( this === self[0] ) {
                        if ( self.css('display') == "none" ) {
                           $(this).prev('a').addClass('active');
                        }  else {
                                $(this).prev('a').removeClass('active');$(this).slideUp(400);
                                 uls.eq(index-1).prev('a').click();return  false;
                                }
                        $( this ).slideDown(400);return true;
                    } 
                    if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
                        $(this).prev('a').removeClass('active');
                        $(this).slideUp(400);return true;
                    }
           });
 
                return false;
 
        });
}
</script>

<ul id="nav_menu_content1" class="ul-menu">
    <li><a href="#0" class="cat_lnk">Категория 4</a>
    <ul>Тут содержимое четвертой категории</ul>    
    </li>
    <li><a href="#0" class="cat_lnk">Категория 3</a>
    <ul>Тут содержимое третьей категории</ul>    
    </li>
    <li><a href="#0" class="cat_lnk">Категория 2</a>
    <ul>Тут содержимое второй категории</ul>    
    </li>
    <li><a href="#0" class="cat_lnk active">Категория 1</a>
    <ul  style="display:block">Тут содержимое первой категории</ul>    
    </li>
</ul> <script>$('#nav_menu_content1').tree_menu();</script> <!-- Запуск -->

<!--HTML-->
<center>
<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style type="text/css">
.fon1 {
position: relative;  
width: 630px;
height: 720px;
border: 7px solid #381c1c;
background: #381c1c url(http://winni-designs.nl/images/achtergronden/winni.bg.344.8.jpg);
}

.polosa1 {  
width: 630px;
background: #381c1c;
color: #8c7777;
text-transform: uppercase;
font-family: Arial;
font-size: 15px;
padding: 5px;
}

.info1 {float: left;}

.info1 label {
display: block;
width: 50px; ширина блока
text-align: center;
font-family: Arial; 
color: #efefef; 
margin-right: 10px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
background: #31251b;
padding: 5px;
position: relative;
top: 10px;
left: 78px;
}

.info1 [type=radio] {
display: none;  
}

.content1 {
position: absolute;
top: 258px;
left: 20px;
width: 550px;
height: 400px;
background: #ffffff url(http://storage5.static.itmages.ru/i/16/0815/h_1471269605_8077920_f012eb07d4.jpg) repeat-x bottom;
padding: 20px;
border: 5px solid #31251b;
}

[type=radio]:checked ~ label {color: #000000; background-color: #ffffff; z-index: 2;}
[type=radio]:checked ~ label ~ .content1 {z-index: 1;}

</style>

<div class="fon1">
<center><img src="http://ipic.su/img/img7/fs/Milek.1510330667.png"></center>
<div class="polosa1">Милтанк. Милка. Девочка. 10 уровень.</div>

<div class="info1">
<input type="radio" id="info1-1" name="info1-group-1" checked="">
<label for="info1-1">ОСНОВА</label>
<div class="content1">
<div style="padding-top: 10px; font-family: arial; color: #121212; font-size: 12px; height: 420px; overflow: auto; text-align: justify;"> 

<table>
<tbody>
<tr>
<td style="width:200px;">
<div align="center">
<div style="background:#fff; border-radius:3px; width:200px; border:dashed 1px #5e5e5e;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:left;">#241 Miltank</div>
<div style="background:url(http://storage4.static.itmages.ru/i/17/0119/h_1484838952_6341765_96e49ef1f7.png); width:120px; height:109px; margin-top:6px; ">
<br><img src="http://ipic.su/img/img7/fs/241.1511697802.gif" style="max-width:100%;">
</div>
<div style="background:#eaeaea; height:1px; margin-top:6px;"></div>
<div style="text-align:justify; font-size:10px; color:#222; padding:15px; overflow-y:auto; height: 150px;">
В её молоке содержатся питательные вещества, что делает его идеальным напитком для больных или усталых.
</div>
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:center;">
<div style="background-color:#986500; width:50px; font-family:arial; color:#ffffff; border-radius:10px; font-size:10px; float:left; margin-top:5px;">Normal</div>
<div style="background:#222; color:#fff; text-transform:uppercase; padding:0px; text-align:right;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:0px; text-align:right;"><img alt=" " src="http://cdn.bulbagarden.net/upload/0/03/Bag_Ultra_Ball_Sprite.png" title="Ультрабол. +2 к физ.атаке" style="max-width:20px;"><div>
</div></div>
</div></div>
</div></div>
</td>
<td>
<div style="background: transparent;">
<td style="width:320px;">

<div align="center">
<div style="background:#fff; border-radius:px; border:dashed 1px #5e5e5e; margin-bottom: 5px;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:left;">
Tackle - Толчок
</div>
<div style="text-align:justify; font-size:10px; color:#222; padding:5px; overflow-y:auto;">
Наносит обычные повреждения без дополнительного эффекта.
</div>
<div style="background:#A8A878; color:#fff; text-transform:uppercase; padding:3px; text-align:right;">
Normal/Physical - 40
</div></div></div>

<div align="center">
<div style="background:#fff; border-radius:3px; margin-bottom: 5px; border:dashed 1px #5e5e5e;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:left;">
Growl - Рычание
</div>
<div style="text-align:justify; font-size:10px; color:#222; padding:5px; overflow-y:auto;">
Понижает Атаку цели на одну ступень.
</div>
<div style="background:#A8A878; color:#fff; text-transform:uppercase; padding:3px; text-align:right;">
Normal/Status - 0
</div></div></div>

<div align="center">
<div style="background:#fff; border-radius:3px; margin-bottom: 5px; border:dashed 1px #5e5e5e;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:left;">
Defense Curl - Группировка	
</div>
<div style="text-align:justify; font-size:10px; color:#222; padding:5px; overflow-y:auto;">
Повышает свою Защиту на одну ступень.
</div>
<div style="background:#A8A878; color:#fff; text-transform:uppercase; padding:3px; text-align:right;">
Normal/Status - 0
</div></div></div>

<div align="center">
<div style="background:#fff; border-radius:3px; margin-bottom: 5px; border:dashed 1px #5e5e5e;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:left;">
Earthquake - Землетрясение 
</div>
<div style="text-align:justify; font-size:10px; color:#222; padding:5px; overflow-y:auto;">
Может бить покемонов, использующих Подкоп.
</div>
<div style="background:#39352a; color:#fff; text-transform:uppercase; padding:3px; text-align:right;">
Ground/Physical - 100
</div></div></div>
<br>
<div align="center">
<div style="background:#fff; border-radius:3px; margin-bottom: 5px; border:dashed 1px #5e5e5e;">
<div style="background:#222; color:#fff; text-transform:uppercase; padding:5px; text-align:left;">
Thick Fat - Толстопуз
</div>
<div style="text-align:justify; font-size:10px; color:#222; padding:5px; overflow-y:auto;">
Снижает повреждения от огненных и ледяных атак.
</div>
<div style="background:#39352a; color:#fff; text-transform:uppercase; padding:3px; text-align:right;">

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



</div>
</div>
</div>
 
<div class="info1">
<input type="radio" id="info1-3" name="info1-group-1">
<label for="info1-3">ДАННЫЕ</label>
<div class="content1">

<div style="padding-top: 10px; font-family: arial; color: #121212; font-size: 12px; height: 380px; overflow: auto; text-align: justify;"> 

<p>Милка - не первый мой покемон, если рассматривать в общем итоге, и даже не стартовик, если полагаться на описание в школьных учебниках. Милка просто та, кому я больше доверяю и с кем за время обучения у меня сформировалась достаточно крепкая связь, достаточная для того, чтобы выдержать напряжение и мое постоянное движение. <br>
Мы познакомились с ней год назад под эгидой <a href="http://narutoworl.0pk.ru/viewtopic.php?id=6885#p212449">задания</a> учителя. Проявив себя как самодостаточная, никому ничего необязанная Личность, Милка трепала мои нервы (и глаза) половину дня, однако, при этом очень аккуратно и ненавязчиво проявляла заботу. Тогда я еще не знала, что учитель знает её, а он не знал (хотя, возможно, предполагал), что всё сложится так, как сложилось. <br>
Милка - персонаж весьма неоднозначный. Преимущественно, она ведет себя спокойно, дружелюбно и несколько ненавязчиво, однако, в ее молочном мозгу в какой-то момент может что-то заклинить и она становится неконтролируемым (даже мной, что не делает мне честь как тренеру) танком, которого не всегда даже покебол сдерживает. Она свободолюбива и упряма, но замотивировать Милку несложно. Несмотря на свой немалый вес, она может передвигаться с какой-то особой, присущей, пожалуй, только ей, грацией. Она смела, справедлива и умна, ей нравится порядок не только в предметах, но и в делах. Из нее небольшой помощник в моей профессии, но друг из нее замечательный. 
</p>
</div>
</div>
</div>

<div class="info1">
<input type="radio" id="info1-4" name="info1-group-1">
<label for="info1-4">ОПЫТ</label>
<div class="content1">

<div style="padding-top: 10px; font-family: arial; color: #121212; font-size: 12px; height: 380px; overflow: auto; text-align: justify;"> 

<p>здесь учет опыта
</p>
</div>
</div>
</div>

</div>

<!--HTML-->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0010/b4/f8/71526.css" />
<script type="text/javascript" src="http://forumstatic.ru/files/0010/b4/f8/88003.js"></script>
<style>
/**********************
   Контент слайдера
**********************/
#slider2 {
  margin-left:-5px;
  margin-top: 0;
}
.slider-content {
  /*outline:solid 1px red!important;*/
}
.Amin-Moder {
  width: 215px; 
  vertical-align:top;
  display:inline-block;
  /*outline:solid red 1px;*/
  margin:34px 35px auto 15px;
}
.Amin-Moder *{
  float:none;
}
.Amin-Moder img{
  float:left;
}
.Amin-Moder img{
  padding:8px;
}
#slider2{
/*background:transparent url(http://s2.uploads.ru/rn5eI.jpg) 0 0 no-repeat;*/
/*outline:solid red 1px!important;*/
}
</style>
<!-- Стиль к скрипту второй вкладки -->
<style>/* объява */
#slideShowContainer{
width:310px;
padding:0;
height:250px;
position:relative;
z-index:1000;
margin-left:10px;
}
#slideShow{
position:absolute;
height:250px;
width:300px;
background-color:#fff;
margin:8px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 208px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('http://forumupload.ru/uploads/0007/e3/f7/64535-1.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{left:-22px;}
#previousLink:hover{	background-position:bottom left;}
a#nextLink{right:-32px;background-position:top right;}
#nextLink:hover{background-position:bottom right;}
</style>

<div class="wrap-slider2" align="center">
<!-- Cлайдер -->
   <div id="slider2" slide-width="742" slide-height="350" class="slider" style="padding:12px;height:0;width:0"><style>/*
    <img button-width="36" class="button-left hide" src="http://s3.uploads.ru/gwvyS.png"/>
    <img button-width="36" class="button-right" src="http://s3.uploads.ru/TsxA7.png"/>
<!-- 1-й Контейнер слайдера -->
<div class="slider-content active"><span>1</span><br /><br /><br />
    <img style="margin-top:7px;" src="http://s2.uploads.ru/6dc5t.png" width=99% />
</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content"><span>2 - Скрипт</span><br />
<center>
<div id="slideShowContainer">
    <div id="slideShow">
    <div id="pictures">
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64525-1.png" alt="" />
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64525-2.png" alt="" />
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64525-3.png" alt="" />
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64525-4.png" alt="" />
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64525-5.png" alt="" />
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64526-1.png" alt="" />
    <img src="http://forumupload.ru/uploads/0007/e3/f7/64526-2.png" alt="" />
    </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div></center>
<!-- галерейка -->
<script>
$(document).ready(function() { 
  var z = 0;
  var inAnimation = false;
  $('#pictures img').each(function() { 
    z++;
    $(this).css('z-index', z);
    });
  function swapFirstLast(isFirst) {
    if(inAnimation) return false;
    else inAnimation = true;
    var processZindex, direction, newZindex, inDeCrease;
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease =
1; }
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
  $('#pictures img').each(function() {
    if($(this).css('z-index') == processZindex) { 
       $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow',
function() {
       $(this).css('z-index', newZindex) 
        .animate({ 'top' : '0' }, 'slow', function() { 
           inAnimation = false; 
            });
         });
       }
    else { 
       $(this).animate({ 'top' : '0' }, 'slow', function() {                      
         $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
          });
       }
    });
    return false;
   }
   $('#previousLink').click(function() {
    return swapFirstLast(false);
   });
   $('#nextLink').click(function() {
    return swapFirstLast(true);
   });
});
</script>
</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content"><span>3</span><br /><br /><br /><br />
    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>
    <span class="Amin-Moder"><img src="http://s3.uploads.ru/otGwc.png"/></span>
</div>
<!-- 4-й Контейнер слайдера -->
<div class="slider-content"><span>4</span><br />
    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>
    <span class="Amin-Moder">
Админ-1
<br />
<img src="http://s3.uploads.ru/9sqei.png"/>
<pre>Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd
Текст asdasdasd<br />
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
Текст asdasdasd Текст
<br />
</pre>
    </span>
</div>
   */</style></div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->
</div>