<script type="text/javascript">
$(document).ready(function() {
$("#open").click(function(){
    $("div#panel").slideDown("slow");
});
$("#close").click(function(){
    $("div#panel").slideUp("slow");
});   
$("#toggle a").click(function () {
    $("#toggle a").toggle();
});   
   
});
</script>
<!-- Панель -->
<div id="toppanel">
<div id="panel">
    <div class="content clearfix">
    <div class="left">
        <h1>Полезная информация</h1>
        <h2></h2>
        <p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=15#p20">Шаблон анкет </a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=21">Акция №1 Адмиралы Альянса</a></p>
        <p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=14">Акция №2 Элита</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=20#">Акция №3 Враги всего мира</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=3#p352">Сюжет</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=5">Расы</a></p>
    </div>
    <div class="left">
        <h1>Банк данных</h1>
        <h2></h2>
        <p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=10">Технологии</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=29">Крафты</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=22">Совет</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=13">Классификация Фиендов и Рахни</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=12">Trigger</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=9">Быт</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=8">Эфир</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=7">Технологии Seraph</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=6">Фракции и организации</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=4">Magi</a></p>
    </div>
    <div class="left right">   
        <h1>Мелочи жизни</h1>
        <h2></h2>
        <p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=25#p554">Вопросы и предложения</a></p>
  <p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=27#p423">Смена ника</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=18">Заполнение профиля</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=26">Поиск партнера по игре</a></p>
<p><a href="http://valorgates.rolbb.ru/viewtopic.php?id=17">Уход/Отсутствие</a></p>
    </div>
                </div>
</div>
    <!-- Закладка наверху -->
<div class="tab">
    <ul class="login">
    <li class="left">&nbsp;</li>
        <li>Здравствуйте!</li>
    <li class="sep">|</li>
    <li id="toggle">
        <a id="open" class="open" href="#">Информация | Навигация</a>
        <a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>   
    </li>
    <li class="right">&nbsp;</li>
    </ul>
</div>
</div>

/* Выскальзывающая панель */
#toppanel {
    position: absolute; 
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}