Перейти к публикации

DLE и меню-аккордеон

Parusnik55

Автор: Parusnik55,
в DataLife Engine (Общие вопросы)

 Рассказать Подписчики 0

Рекомендованные сообщения

Parusnik55

Parusnik55 0

Опубликовано:
Опубликовано:

Всем привет! Установил на DLE меню-аккордеон, но при нажатии на него вся страница почему то съезжает в низ. он он в левой колонке сверху

тут код main.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

{headers}

<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />

<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />

<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />

</head>

<body>{AJAX}

<!--U1AHEADER1Z-->

<script type="text/javascript" src="{THEME}/images/designs/script_site.js"></script>

<!-- <header> -->

<div id="container_full" class="cont_fix"><div id="cont_lt"><div id="cont_rt">

<div id="container_wrap" class="modulesload pagesmain urildMain">

<div id="hDate"></div>

<div id="header"><div id="hLogo"><a href="/" title="На главную"><img src="{THEME}/images/designs/hlogo.png" width="388" height="86"></a></div>

<div id="hPanel"><div id="hIcon"><a href="/rss.xml" class="hIcon_1" title="RSS Лента"></a>

<a href="javascript:window.location.reload();" class="hIcon_2" title="Обновить страницу"></a>

<a href="/sitemap.xml" class="hIcon_3" title="Карта сайта"></a></div>

{login}

<div id="hnav"><div id="hnav_in"><ul id="hnav_list">

<li class="home_link" title="На главную страницу"><a href="/"></a></li>

<li><a href="/"><span>Ccылка</span></a></li>

<li><a href="/"><span>Ccылка</span></a></li>

<li><a href="/"><span>Ccылка</span></a></li>

<li><a href="/"><span>Ccылка</span></a></li>

<li><a href="/"><span>Ccылка</span></a></li>

</ul><form onSubmit="this.sfSbm.disabled=true" action="" method="get" class="hSearch">

<div class="hSearch_in">

<input type="hidden" name="do" value="search" />

<input type="hidden" name="subaction" value="search" />

<input id="story" name="story" type="text" class="hSearch_text" value="Поиск по сайту..." onBlur="if(this.value=='')this.value='Поиск по сайту...'" onFocus="if(this.value=='Поиск по сайту...')this.value=''" />

<input type="submit" value=" " class="hSearch_submit" />

</div></form></div></div>

<div id="cont_t"><b></b></div>

<div id="content_full" class="input_style">

<!-- </header> -->

<!-- <middle> -->

<div id="side_left">

<!-- <container> -->

<!-- <block1> -->

<div class="block_full"><div class="block_in">

<div id="wrapper-200a">

<ul class="accordion">

<li id="one" class="files">

<a href="#one">Мои файлы<span>495</span></a>

<ul class="sub-menu">

<li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>

<li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li>

<li><a href="#one"><em>03</em>FTP сервер<span>366</span></a></li>

</ul>

</li>

<li id="two" class="mail">

<a href="#two">Mail<span>26</span></a>

<ul class="sub-menu">

<li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li>

<li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li>

<li><a href="#two"><em>03</em>Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three" class="cloud">

<a href="#three">Облако<span>58</span></a>

<ul class="sub-menu">

<li><a href="#three"><em>01</em>Соединений<span>12</span></a></li>

<li><a href="#three"><em>02</em>Профилей<span>19</span></a></li>

<li><a href="#three"><em>03</em>Опций<span>27</span></a></li>

</ul>

</li>

<li id="four" class="sign">

<a href="#four">Выйти</a>

<ul class="sub-menu">

<li><a href="#four"><em>01</em>Выйти из</a></li>

<li><a href="#four"><em>02</em>Удалить аккаунт</a></li>

<li><a href="#four"><em>03</em>Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

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

<!-- </block1> -->

<!-- <block987651> -->

<div class="block2_full"><div class="block_in">

<div class="block_title"><b class="b_icon02"></b>Меню 3</div>

<div class="block_cont"><table border="0" cellspacing="1" cellpadding="0" width="100%" class="catsTable"><tr><td style="width:100%" class="catsTd" id="cid3" valign="top">

<li><a href="/">Ссылка</a></li>

<li><a href="/">Ссылка</a></li>

<li><a href="/">Ссылка</a></li>

<li><a href="/">Ссылка</a></li>

<li><a href="/">Ссылка</a></li>

<li><a href="/">Ссылка</a></li>

<li><a href="/">Ссылка</a></li>

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

</div></div>

<!-- </block987651> -->

<!-- </container> -->

</div><div id="side_right">

<!-- <container> -->

<!-- <block> -->

<!-- <block3333> -->

<div class="block3_full"><div class="block_in">

<div class="block_title"><b class="b_icon10"></b>Меню</div>

<div class="block_cont">

<ul class="bnav6">

{topnews}

</ul></div></div></div>

<!-- </block3333> -->

<div class="block3_full"><div class="block_in">

<div class="block_title"><b class="b_icon03"></b>Меню</div>

<div class="block_cont">

модуль</div></div></div>

<div class="block3_full"><div class="block_in">

<div class="block_title"><b class="b_icon08"></b>Меню</div>

<div class="block_cont">

модуль

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

<!-- </container> -->

<!-- </block> -->

</div><div id="side_center">

<!-- <body> -->{info}{content}<!-- </body> --></div>

<!-- </middle> -->

<!-- <footer> -->

</div><div id="footer"><div id="footer_in"><div id="fStat"><div class="banner_bg">счетчик</div></div>&copy; 2011-2012.

Все права не нарушены.

<br>Администрация не несёт ответственности за содержащие файлы на данном портале.

<br>Просматривать сайт рекомендуется с бразуеров <a href="http://opera.com/">Opera</a> и <a href="http://mozilla.com/ru/firefox/">Mozilla Firefox</a>. <div style="display:none;">Powered by <a href="/" title="Powered by DataLife Engine">DataLife Engine</a> &copy; 2012</div>

</div></div>

<div id="fLogo"><img src="{THEME}/images/designs/flogo_design.png" width="104" height="29"></div></div></div></div></div>

<script type="text/javascript" src="{THEME}/images/designs/highslide.js"></script>

<script src="{THEME}/js/scripts.js" type="text/javascript"></script></div>

<!-- </footer> -->

</body>

</html>

<!-- <popup> -->

<!-- </popup> -->

а тут код styles.css

/* General Style */

body {margin:0; padding:0; font-family:tahoma; font-size:11px; line-height:1.2; color:#76ac21;background:#f8f8f7;}

a img {border:0;}

a:link,

a:active,

a:visited {color:#76ac21; text-decoration:underline;}

a:hover {text-decoration:none;}

h1,h2,h3,h4,h5,h6 {display:block; margin:0 0 10px 0; padding:0; color:#76ac21;}

h1 {font-size:22px;}

h2 {font-size:20px;}

h3 {font-size:18px;}

h4 {font-size:16px;}

h5 {font-size:14px;}

h6 {font-size:12px;}

ul,

ol {display:block; padding:0; margin:0;}

ul li {display:list-item; margin:0 0 0 20px; padding:0 0 0 0px;list-style:circle;}

ol li {display:list-item; margin:0 0 0 20px; padding:0 0 0 0px;list-style:decimal;}

.reset,

.reset li,

#hnav_list, #hnav_list li,

.bnav, .bnav li,

.bnav2, .bnav2 li,

.bnav3, .bnav3 li,

.bnav4, .bnav4 li,

.bnav5, .bnav5 li,

.bnav6, .bnav6 li,

.hSys_list, .hSys_list li,

.cProf_list, .cProf_list li,

.forum_nav, .forum_nav li,

.fPost_info, .fPost_info li,

.uMenuV, .uMenuV li,

.u-star-rating, .u-star-rating li {display:block; padding:0; margin:0; list-style:none;}

form {display:block; padding:0; margin:0;}

input[type="image"]:hover {opacity:0.8;}

input, textarea, select, button {font-family:tahoma; font-size:11px;}

/* Inputs */

.input_style input[type="text"],

.input_style input[type="password"],

.input_style textarea,

.input_style select {padding:1px; margin:1px; font-size:11px;color:#777; border:1px solid #cfcfcf; text-shadow:none; background:#fff;outline:none;}

.input_style input[type="text"],

.input_style input[type="password"] {padding:1px; text-indent:3px;}

.input_style input.codeButtons {padding:1px 0; font-style:normal; text-transform:none;}

.input_style input[type="text"]:hover,

.input_style input[type="password"]:hover,

.input_style textarea:hover,

.input_style select:hover,

.input_style input[type="text"]:focus,

.input_style input[type="password"]:focus,

.input_style textarea:focus,

.input_style select:focus {color:#222;background:#f8f8fa;}

.input_style input[type="button"],

.input_style input[type="submit"],

.input_style input[type="reset"] {

background:#7eb12e url(../images/designs/submit_bg.png) repeat-x 0 0;

outline:none;

border:0;

font-size:11px;

font-weight:bold;

color:#fff;

padding:4px 6px 6px 6px;

text-decoration:none;

margin-bottom: 2px !important;

margin-top:2px;

cursor: pointer;

-moz-border-radius: 7px; /* Firefox */

-webkit-border-top-right-radius: 7px;

-webkit-border-top-left-radius: 7px;

-webkit-border-bottom-right-radius: 7px;

-webkit-border-bottom-left-radius: 7px;

-khtml-border-radius: 7px; /* KHTML */

border-radius: 7px;

}

.input_style input[type="button"]:hover,

.input_style input[type="submit"]:hover,

.input_style input[type="reset"]:hover {background:#64b438 url(../images/designs/submit_bg.png) repeat-x 0 -100px;}

/* input reset */

.input_style_reset,

.cProf_search,

.bChat_text textarea,

#container_full .bChat_submit input,

#container_full .bVote_bottom input {

opacity:1.0; filter: alpha(opacity=100);

padding:0;

margin:0;

color:#222 !important;

-moz-border-radius:0;

-webkit-border-radius:0;

-khtml-border-radius:0;

border-radius: 0;

background:#fff;

}

/* Inputs */

label, input[type=button], input[type=submit], button { cursor: pointer; }

textarea {overflow:auto; resize:none;}

.left {float:left;}

.right {float:right;}

.center {text-align:center;}

.hidden {overflow:hidden;}

.none {display:none;}

p {margin:10px 0;}

.clear_table {border:0; border-collapse:collapse; padding:0; margin:0;}

.clear {width:100%; height:0px; clear:both; overflow:hidden;}

/* CSS UCOZ */

td {font-family:Tahoma; font-size:11px;}

form {padding:0px;margin:0px;}

input,textarea,select {vertical-align:middle; font-size:11px; font-family:Tahoma, sans-serif;}

.copy {font-size:10px;}

hr {color:#CCCCCC;height:1px;border:none;background:#CCCCCC;}

label {cursor:pointer;}

.blocktitle {font-family:Tahoma, sans-serif;color:#787878;font-size:12px;}

.mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}

.colgray {border-right:1px solid #E5E7EA;}

.colwhite {border-right:1px solid #FAFAFA;}

.msep {border-top:1px solid #FAFAFA;}

/* ------------- */

/* Menus */

ul.uz, ul.uMenuRoot {list-style: none; margin: 0 0 0 0; padding-left: 0px;}

li.menus {margin: 0; padding: 0 0 0 11px; background: url('/.s/t/813/5.gif') no-repeat 0px 3px; margin-bottom: .6em;}

/* ----- */

/* Site Menus */

.uMenuV {width:198px; margin:0 0 0 -4px;}

.uMenuV li {font-weight:bold;}

.uMenuV li a {padding:8px 6px; display:block; color:#73ab21; text-decoration:none; background:#fcfcfb url(../images/designs/bnav_bg.png) no-repeat 0 0;}

.uMenuV li a:hover,

.uMenuV .uMenuItemA {padding-left:18px; color:#fff; background:#88bc3b url(../images/designs/bnav_bg.png) no-repeat -198px 0;}

/* --------- */

/* Module Part Menu */

.catsTd {padding: 0; }

.catName {font-family:Tahoma, sans-serif;font-size:11px;}

.catNameActive {font-family:Tahoma, sans-serif;font-size:11px;}

.catNumData {font-size:10px;color:#6E6E6E;}

.catDescr {font-size:10px; padding-left:10px;}

a.catName {font-size: 11px; padding: 3px 5px 3px 20px;}

a.catName:link {text-decoration:none; color:#000;}

a.catName:visited {text-decoration:none; color:#000;}

a.catName:hover {text-decoration:none; color:#7d7d7d; background: url('/.s/t/813/6.gif') center left no-repeat;}

a.catName:active {text-decoration:none; color:#000;}

a.catNameActive {color:#7d7d7d; background: url('/.s/t/813/6.gif') center left no-repeat;font-size: 11px; padding: 3px 5px 3px 20px;}

a.catNameActive:link {text-decoration:none; color:#000000;}

a.catNameActive:visited {text-decoration:none; color:#000000;}

a.catNameActive:hover {text-decoration:none; color:#000000;}

a.catNameActive:active {text-decoration:none; color:#000000;}

/* ----------------- */

/* Entries Style */

.eBlock {}

.eTitle {font-size:13px;font-weight:bold;color:#7e7e7e; padding: 5px; }

.eMessage {text-align:justify;padding:10px !important;}

.eText {text-align:justify;padding-bottom:5px;padding-top:5px;border-top:1px solid #CCCCCC}

.eDetails,

.eDetails1,

.eDetails2 {background:#f6f5f2 !important; border:1px solid #ccc !important; padding:5px !important; font-size:11px;}

.eRating {font-size:10px;}

.eAttach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('/.s/t/813/8.gif') no-repeat 0px 0px;}

/* ------------- */

/* Entry Manage Table */

.manTdError {color:#FF0000;}

/* ------------------ */

/* Comments Style */

.cAnswer {padding-left:15px;padding-top:4px;font-style:italic;}

.cBlock1 {background:#F6F6F6;}

.cBlock2 {background:#FFFFFF; border:1px solid #F6F6F6;}

/* -------------- */

/* Comments Form Style */

.commTable {border:1px solid #CCCCCC;background:#FFFFFF;}

.commTd1 {color:#000000;}

.commTd2 {}

.commFl {color:#6E6E6E;width:100%;background:#FCFCFC;border:1px solid #CCCCCC;}

.smiles {border:0 !important; margin:0 0 0 8px; background:0 !important;}

.commReg {padding: 10px 0 10px 0px; text-align:center;}

.commError {color:#FF0000;}

.securityCode {color:#6E6E6E;background:#FCFCFC;border:1px solid #CCCCCC;}

/* ------------------- */

/* Archive Menu */

.archUl {list-style: none; margin:0; padding-left:0;}

.archLi {padding: 0 0 3px 10px; background: url('/.s/t/813/9.gif') no-repeat 0px 4px; font-family:Tahoma,Arial,Sans-Serif;}

a.archLink:link {text-decoration:underline; color:#6E6E6E;}

a.archLink:visited {text-decoration:underline; color:#6E6E6E;}

a.archLink:hover {text-decoration:none; color:#000000;}

a.archLink:active {text-decoration:none; color:#000000;}

/* ------------ */

/* Archive Style */

.archiveCalendars {text-align:center;color:#0000FF;}

.archiveDateTitle {font-weight:bold;color:#6E6E6E;padding-top:15px;}

.archEntryHr {width:250px;color:#DDDDDD;}

.archiveeTitle li {margin-left: 15px; padding: 0 0 0 15px; background: url('/.s/t/813/10.gif') no-repeat 0px 4px; margin-bottom: .6em;}

.archiveEntryTime {width:65px;font-style:italic;}

.archiveEntryComms {font-size:9px;color:#C3C3C3;}

a.archiveDateTitleLink:link {text-decoration:none; color:#6E6E6E}

a.archiveDateTitleLink:visited {text-decoration:none; color:#6E6E6E}

a.archiveDateTitleLink:hover {text-decoration:underline; color:#6E6E6E}

a.archiveDateTitleLink:active {text-decoration:underline; color:#6E6E6E}

.archiveNoEntry {text-align:center;color:#0000FF;}

/* ------------- */

/* Calendar Style */

.calMonth {}

.calWday {color:#FFFFFF; background:#A9A9A9; width:18px;}

.calWdaySe {color:#FFFFFF; background:#7D7D7D; width:18px;}

.calWdaySu {color:#FFFFFF; background:#7D7D7D; width:18px; font-weight:bold;}

.calMday {background:#FFFFFF;color:#000000;}

.calMdayA {background:#CCCCCC;font-weight:bold;}

.calMdayIs {background:#FFFFFF;color:#000000;font-weight:bold;border:1px solid #CCCCCC;}

.calMdayIsA {border:1px solid #000000; background:#FFFFFF;font-weight:bold;}

a.calMonthLink:link,a.calMdayLink:link {text-decoration:none; color:#000000;}

a.calMonthLink:visited,a.calMdayLink:visited {text-decoration:none; color:#000000;}

a.calMonthLink:hover,a.calMdayLink:hover {text-decoration:underline; color:#000000;}

a.calMonthLink:active,a.calMdayLink:active {text-decoration:underline; color:#000000;}

/* -------------- */

/* Poll styles */

.pollBut {width:110px;}

.pollBody {padding:7px; margin:0px; background:#FFFFFF}

.textResults {background:#E5E5E5}

.textResultsTd {background:#FFFFFF}

.pollNow {border-bottom:1px solid #E5E5E5; border-left:1px solid #E5E5E5; border-right:1px solid #E5E5E5;}

.pollNowTd {}

.totalVotesTable {border-bottom:1px solid #E5E5E5; border-left:1px solid #E5E5E5; border-right:1px solid #E5E5E5;}

.totalVotesTd {background:#FFFFFF;}

/* ---------- */

/* User Group Marks */

a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue;}

a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red;}

a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green;}

/* ---------------- */

/* Other Styles */

.replaceTable {height:100px;width:300px;}

.legendTd {font-size:10px;}

/* ------------ */

/* ===== forum Start ===== */

.forum_top {height:50px; margin:0 0 -5px 0; position:relative; background:#f6f5f2 url(../images/designs/f_forum_top_bg.png) no-repeat 0 0; z-index:1;}

.forum_top_in {height:34px; padding:16px 0 0 28px; overflow:hidden; font-size:11px; font-weight:bold; background:url(../images/designs/f_forum_top_bg.png) no-repeat right -50px;}

.forum_top_in a {text-decoration:none;}

.forum_top_in a:hover {text-decoration:underline;}

.gDivLeft {background:#f6f5f2 url(../images/designs/f_forum_lrc_bg.png) repeat-y 0 0;}

.gDivRight {padding:0 5px; background:url(../images/designs/f_forum_lrc_bg.png) repeat-y right 0;}

.forum_lb_bg {height:12px; display:block; margin:-3px -5px 0 -5px; position:relative; background:url(../images/designs/f_forum_top_bg.png) no-repeat 0 -100px; z-index:1;}

.forum_rb_bg {height:12px; display:block; background:url(../images/designs/f_forum_top_bg.png) no-repeat right -112px;}

/* General forum Table View */

.gTable {border:0; border-collapse:collapse; border-spacing:0; background:0;}

.gTableTop {}

.gTableSubTop {height:27px; padding:0 15px; background:#f4f4f4 url(../images/designs/f_forum_row_0.png) repeat-x 0 0;}

.gTableBody {padding:2px;background:#fff;}

.gTableBody1 {padding:2px;background:#fff;}

.gTableBottom {padding:2px;background:#fff;}

.gTableLeft {padding:2px;background:#fff;font-weight:bold;}

.gTableRight {padding:2px;background:#f7f7f7;}

.gTableError {padding:2px;background:#fff;color:#FF0000;}

.forumMemNum,

.forumMemSwch {padding:4px 10px;}

/* ------------------------ */

/* Forums Styles */

.forumIcoTd,

.forumNameTd,

.forumThreadTd,

.forumPostTd,

.forumLastPostTd {height:42px; padding:5px 9px; font-size:11px; background-color:#fff;}

.threadIcoTd,

.threadNametd,

.threadPostTd,

.threadViewTd,

.threadAuthTd,

.threadLastPostTd {padding:5px 9px 8px 9px; font-size:11px; background-color:#fff;}

.forumIcoTd,

.threadIcoTd {text-align:center; background:#fff url(../images/designs/f_forum_row_1.png) no-repeat right bottom;}

.forumNameTd,

.threadNametd {background:#fff url(../images/designs/f_forum_row_2.png) no-repeat right bottom;}

.forumThreadTd,

.threadPostTd {background:#fff url(../images/designs/f_forum_row_3.png) no-repeat right bottom;}

.forumPostTd,

.threadViewTd,

.threadAuthTd {background:#fff url(../images/designs/f_forum_row_1.png) no-repeat right bottom;}

.forumLastPostTd,

.threadLastPostTd {background:#fff url(../images/designs/f_forum_row_5.png) repeat-x right bottom;}

.forumNameTd a {text-decoration:none;}

.forumNameTd a:hover {text-decoration:underline;}

.threadsDetails,

.forumOnlineBar {height:27px; padding:0 15px; background:#f4f4f4 url(../images/designs/f_forum_row_0.png) repeat-x 0 0;}

.threadsType {padding:2px 8px 3px 8px;background:#fff url(../images/designs/f_forum_row_2.png) repeat-x right bottom;}

.threadPinnedLink {font-weight:bold;}

/* ------------- */

/* forum Titles & other */

.forum {font-weight:bold;font-size:9pt;}

.forumDescr,.forumModer,

.threadDescr {color:#b9bbb7;font-size:11px;}

.forumViewed {font-size:11px;}

a.forum:link, a.lastPostUserLink:link, a.forumLastPostLink:link, a.threadAuthorLink:link {text-decoration:underline; color:#7aaf2c;}

a.forum:visited, a.lastPostUserLink:visited, a.forumLastPostLink:visited, a.threadAuthorLink:visited {text-decoration:underline; color:#7aaf2c;}

a.forum:hover, a.lastPostUserLink:hover, a.forumLastPostLink:hover, a.threadAuthorLink:hover {text-decoration:none; color:#7aaf2c;}

a.forum:active, a.lastPostUserLink:active, a.forumLastPostLink:active, a.threadAuthorLink:active {text-decoration:underline; color:#7aaf2c;}

/* -------------------- */

/* forum Navigation Bar */

.forumNamesBar {font-weight:bold;font-size:11px;}

.forumBarKw {font-weight:normal;}

/* -------------------- */

/* forum Fast Navigation Blocks */

.fastNav,.fastSearch,.fastLoginForm {font-size:11px;}

/* ---------------------------- */

/* forum Fast Navigation Menu */

.fastNavMain {background:#DADADA;}

.fastNavCat {background:#EFEFEF;}

.fastNavCatA {background:#EFEFEF;color:#0000FF}

.fastNavForumA {color:#0000FF}

/* -------------------------- */

/* forum Page switches */

.switches {font-weight:bold; background:#CCCCCC;}

.pagesInfo {background:#FFFFFF;padding-right:10px;font-size:10px;}

.switch {background:#FFFFFF;width:15px;font-size:10px;}

.switchActive {background:#E0E0E0;font-weight:bold;color:#6E6E6E;width:15px}

.switches a {color:#7aaf2c; text-decoration:none;}

.switches a:hover {text-decoration:underline;}

/* ------------------- */

/* forum Threads Style */

/* ------------------- */

/* forum Posts View */

.postTable {}

.pollQuestion {text-align:center;font-weight:bold;}

.pollButtons,.pollTotal {text-align:center;}

.pollSubmitBut,.pollreSultsBut {width:140px;font-size:10px;}

.pollSubmit {font-weight:bold;}

.pollEnd {text-align:center;height:30px;}

.codeMessage {background:#f6f5f2 !important; border:1px solid #ccc !important; padding:5px !important; font-size:9px;}

.quoteMessage {background:#f6f5f2 !important; border:1px solid #ccc !important; padding:5px !important; font-size:10px;}

.signatureView {font-size:10px;}

.edited {padding-top:30px;font-size:10px;text-align:right;color:gray;}

.editedBy {font-weight:bold;font-size:11px;}

.statusBlock {padding-top:3px;}

.statusOnline {color:#0000FF;}

.statusOffline {color:#FF0000;}

/* ------------------ */

/* forum AllInOne Fast Add */

.newThreadBlock {background: #F9F9F9;border: 1px solid #B2B2B2;}

.newPollBlock {background: #F9F9F9;border: 1px solid #B2B2B2;}

.newThreadItem {padding: 0 0 0 8px; background: url('/.s/t/813/11.gif') no-repeat 0px 4px;}

.newPollItem {padding: 0 0 0 8px; background: url('/.s/t/813/11.gif') no-repeat 0px 4px;}

/* ----------------------- */

/* forum Post Form */

input {background: #fff; border: 1px solid #bcbcbc;}

.codeButtons, .loginButton, .searchSbmFl, .pollBut, .commSbmFl {font-size:11px;background:#000;color: #fff; border: none;}

.codeCloseAll {font-size:11px; background:#000;color: #fff; border: none;}

#container_wrap input.codeButtons {height:21px !important; margin-top:0 !important; padding:1px !important; line-height:1.2 !important; border:1px solid #7aaf2c; -moz-border-radius: 5px; /* Firefox */

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-khtml-border-radius: 5px; /* KHTML */

border-radius: 5px;

background:#7baf2d url(../images/designs/bbcodes_bg.png) repeat-x 0 0;}

#container_wrap input.codeButtons:hover {background-position:0 -50px;}

.postNameFl,.postDescrFl {background:#FCFCFC;border:1px solid #6E6E6E;width:400px}

.postPollFl,.postQuestionFl {background:#FCFCFC;border:1px solid #6E6E6E;width:400px}

.postResultFl {background:#FCFCFC;border:1px solid #6E6E6E;width:50px}

.postAnswerFl {background:#FCFCFC;border:1px solid #6E6E6E;width:300px}

.postTextFl {background:#FCFCFC;border:1px solid #6E6E6E;width:550px;height:150px}

.postUserFl {background:#FCFCFC;border:1px solid #6E6E6E;width:300px}

.pollHelp {font-weight:normal;font-size:10px;padding-top:3px;}

.smilesPart {padding-top:5px;text-align:center}

/* ----------------- */

#_uwndWnd1 .myWinCont table td {text-align:left;}

#_uwndWnd1 .myWinCont table td[align="right"] {text-align:right;}

.forumContent .viewn_cont table.clear_table {width:100%;}

.forumContent .viewn_cont table.clear_table td {background:0;}

/* ====== forum End ====== */

/* CSS SITE */

#container_full {background:url(../images/designs/wrap_ct_bg.png) repeat-x 0 0;}

#cont_lt {background:url(../images/designs/cont_line_shadown.png) no-repeat 0 136px;}

#cont_rt {background:url(../images/designs/cont_line_shadown.png) no-repeat right 136px;}

#container_wrap {min-width:940px; padding:0 46px;}

.cont_fix #cont_lt {width:1092px; margin:0 auto;}

.cont_fix #cont_rt {padding:0 46px; margin:0 auto;}

.cont_fix #container_wrap {margin:0; padding:0;}

#hDate {width:308px; height:19px; line-height:19px; margin:0 auto; word-spacing:6px; color:#fff; text-align:center; background:#9a9970 url(../images/designs/hdate_bg.png) no-repeat 0 0;}

#header {height:96px; margin:0 0 8px 0;}

#hLogo {float:left; margin:5px 0 0 0;}

#hPanel {width:373px; float:right; margin:14px 0 0 0;}

#hIcon {width:51px; height:7px; float:right; margin:0 0 4px 0;}

#hIcon a {width:8px; height:7px; display:block; float:left; margin:0 5px 0 0; background:url(../images/designs/hicon.png) no-repeat 0 0;}

#hIcon a.hIcon_1 {background:url(../images/designs/hicon.png) no-repeat 0 0;}

#hIcon a.hIcon_2 {background:url(../images/designs/hicon.png) no-repeat -8px 0;}

#hIcon a.hIcon_3 {background:url(../images/designs/hicon.png) no-repeat -16px 0;}

#hIcon a.hIcon_1:hover {background:url(../images/designs/hicon.png) no-repeat 0 -7px;}

#hIcon a.hIcon_2:hover {background:url(../images/designs/hicon.png) no-repeat -8px -7px;}

#hIcon a.hIcon_3:hover {background:url(../images/designs/hicon.png) no-repeat -16px -7px;}

#hSys {width:373px; height:36px; padding:4px 5px 0 0; clear:both; position:relative; background:url(../images/designs/hsys_bg.png) no-repeat 0 0;}

a.hSys_reg_link {display:block; float:left; margin:9px 0 0 109px; font-weight:bold; text-decoration:none;}

a.hSys_reg_link:hover {text-decoration:underline;}

a.button_sys_open {width:114px; height:22px; padding:9px 0 0 13px; overflow:hidden; display:block; float:right; font-weight:bold; text-shadow:0 1px 1px #fff; text-decoration:none; background:url(../images/designs/hsys_bg.png) no-repeat 0 -40px;}

a.button_sys_open:hover {background:url(../images/designs/hsys_bg.png) no-repeat -127px -40px;}

a.button_sys_open b {width:12px; height:12px; display:block; float:right; margin:2px 10px 0 0; background:url(../images/designs/hsys_bg.png) no-repeat -254px -41px;}

a.button_sys_open.current b {background-position:-254px -53px;}

.hSys_pop {width:250px; height:109px; display:none; padding:5px; position:absolute; right:0px; top:42px; background:url(../images/designs/hsys_bg.png) no-repeat 0 -71px;}

.hSys_pop_top {height:26px; line-height:26px; padding:0 10px 0 8px; margin:0 0 5px 0; font-weight:bold;}

.hSys_pop_close {width:11px; height:11px; display:block; float:right; margin:8px 0 0 0; background:url(../images/designs/hsys_bg.png) no-repeat -262px -133px; cursor:pointer;}

.hSys_pop_close:hover {background:url(../images/designs/hsys_bg.png) no-repeat -275px -133px;}

.hSys_login {width:180px; margin:0 auto; position:relative;}

.hSys_login .row {overflow:hidden; margin:0 0 3px 0;}

.hSys_login .row span {display:block; margin:0 0 2px 0; font-size:9px;}

.hSys_login .row input {width:168px; height:20px; line-height:20px; padding:0 6px; vertical-align:top; outline:none; display:block; color:#9a9970; margin:0; border:0; background:#c5dca2 url(../images/designs/hsys_bg.png) no-repeat 0 -224px;}

.hSys_login .row input:hover,

.hSys_login .row input:focus {background-color:#9bc361;}

.hSys_submit {width:30px; height:30px; position:absolute; right:-11px; top:24px;}

.hSys_submit input {width:30px; height:30px; display:block; padding:0; margin:0; border:0; background:url(../images/designs/hsys_bg.png) no-repeat -261px -71px;}

.hSys_submit input:hover {background:url(../images/designs/hsys_bg.png) no-repeat -261px -101px;}

.hSys_prof {width:241px; margin:0 0 0 4px;}

.hSys_avatar {width:71px; float:left; margin:0 2px 0 0;}

.hSys_avatar img {vertical-align:top;}

.hSys_list {overflow:hidden;}

.hSys_list li {margin:0 0 1px 0; overflow:hidden;}

.hSys_list a {width:162px; height:17px; line-height:16px; padding:0 0 0 6px; display:block; color:#fff; text-decoration:none; background:#7aaf2c url(../images/designs/hsys_bg.png) no-repeat 0 -190px;}

.hSys_list a:hover {font-weight:bold; background:#9bc361 url(../images/designs/hsys_bg.png) no-repeat 0 -207px;}

.hSys_list li.hSys_prof_exit a {width:48px; padding:0; float:right; text-align:center;background:#9f9e77 url(../images/designs/hsys_bg.png) no-repeat -168px -190px;}

.hSys_list li.hSys_prof_exit a:hover {background:#9e9e76 url(../images/designs/hsys_bg.png) no-repeat -168px -206px;}

#hnav {margin:0 0 11px 0; overflow:hidden; background:#7bb02e url(../images/designs/hnav_bg.png) no-repeat 0 0;}

#hnav_in {height:31px; background:url(../images/designs/hnav_bg.png) no-repeat right -31px;}

#hnav_list {float:left; padding:0 2px 0 0; background:url(../images/designs/hnav_bg.png) no-repeat right -93px;}

#hnav_list li {height:26px; padding:5px 3px 0 5px; float:left; background:url(../images/designs/hnav_bg.png) no-repeat 0 -62px;}

#hnav_list li.home_link {width:29px; height:31px; padding:0; margin:0; background:url(../images/designs/hnav_bg.png) no-repeat 0 -31px;}

#hnav_list li.home_link a {width:29px; height:31px; display:block;}

#hnav_list li.home_link a:hover {background:url(../images/designs/hnav_bg.png) no-repeat -29px -31px;}

#hnav_list li a {height:21px; display:block; font-weight:bold; color:#fff; text-decoration:none;}

#hnav_list li a span {height:21px; line-height:21px; padding:0 11px;display:block; cursor:pointer;}

#hnav_list li a:hover {color:#85b63d; background:#f8f8f8 url(../images/designs/hnav_bg.png) no-repeat -200px -62px;}

#hnav_list li a:hover span {background:url(../images/designs/hnav_bg.png) no-repeat right -62px;}

.hSearch {width:171px; height:21px; float:right; margin:5px 11px 0 0;}

.hSearch input {outline:none; vertical-align:top;}

.hSearch_text {width:135px; height:21px; line-height:21px; display:block; float:left; padding:0 6px; font-size:11px; color:#73ab21; margin:0; border:0; background:#fff url(../images/designs/hnav_bg.png) no-repeat 0 -93px;}

.hSearch_text:hover,

.hSearch_text:focus {background:#fff url(../images/designs/hnav_bg.png) no-repeat 0 -114px;}

.hSearch_submit {width:21px; height:21px; display:block; float:right; padding:0; margin:0; border:0; background:#87b740 url(../images/designs/hnav_bg.png) no-repeat -147px -93px;}

.hSearch_submit:hover {background:#87b740 url(../images/designs/hnav_bg.png) no-repeat -147px -114px;}

#cont_t {padding:0 8px 0 0; background:url(../images/designs/cont_t_bg.png) no-repeat right 0;}

#cont_t b {height:5px; display:block; background:url(../images/designs/cont_t_bg.png) no-repeat 0 0;}

#content_full {overflow:hidden; padding:2px 4px 4px 4px; border-left:1px solid #dadad9; border-right:1px solid #dadad9; border-bottom:1px solid #52533e; background:#eeefe1;}

#side_left {width:210px; float:left;}

#side_right {width:210px; float:right;}

#side_center {margin:0 214px; padding:0 2px;}

.block_full {width:210px; margin:0 0 4px 0; background:#fff url(../images/designs/block_bg.png) repeat-y 0 0;}

.block_full .block_in {background:url(../images/designs/block_bg.png) no-repeat -210px 0;}

.block_full .block_title {height:30px; padding:15px 0 0 14px; font-weight:bold; text-shadow:1px 1px 0 #fff;}

.block_full .block_cont {padding:7px 10px 10px 10px; overflow:hidden; background:url(../images/designs/block_bg.png) no-repeat -420px bottom;}

.bnav {width:198px; margin:0 0 0 -4px;}

.bnav li {font-weight:bold;}

.bnav li a {padding:8px 6px; display:block; color:#73ab21; text-decoration:none; background:#fcfcfb url(../images/designs/bnav_bg.png) no-repeat 0 0;}

.bnav li a:hover {padding-left:18px; color:#fff; background:#88bc3b url(../images/designs/bnav_bg.png) no-repeat -198px 0;}

.block2_full {width:210px; margin:0 0 4px 0; background:#8e8e5f url(../images/designs/block_bg.png) repeat-y -630px 0;}

.block2_full .block_in {background:url(../images/designs/block_bg.png) no-repeat -840px 0;}

.block2_full .block_title {height:30px; padding:15px 0 0 14px; font-weight:bold; text-shadow:1px 1px 0 #fff;background:#fff url(../images/designs/block_bg.png) no-repeat -840px 0;}

.block2_full .block_cont {padding:5px 4px 15px 4px; overflow:hidden; background:url(../images/designs/block_bg.png) no-repeat -1050px bottom;}

.block2_full .bnav {width:202px; margin:0;}

.block2_full .bnav li {margin:0 0 3px 0;}

.block2_full .bnav li a {height:23px; line-height:21px; overflow:hidden; display:block; padding:0 0 0 7px; color:#fff; text-decoration:none; background:#6a6948 url(../images/designs/bnav_bg.png) no-repeat -400px 0;}

.block2_full .bnav li a:hover {padding-left:14px; color:#474646; background:#fbfcfb url(../images/designs/bnav_bg.png) no-repeat -602px 0;}

.block2_full .catsTable {width:202px; margin:0;}

.block2_full .catsTable td {margin:0 0 3px 0;}

.block2_full .catsTable td a {height:23px; line-height:23px; overflow:hidden; display:block; padding:0 0 0 7px; font-weight:bold; color:#fff; text-decoration:none; text-decoration:none; background:#6a6948 url(../images/designs/bnav_bg.png) no-repeat -400px 0;}

.block2_full .catsTable td a:hover {padding-left:14px; color:#474646; background:#fbfcfb url(../images/designs/bnav_bg.png) no-repeat -602px 0;}

.block2_full .catsTable .catNumData,

.block2_full .catsTable .catDescr {display:none;}

.block2_full .catsTable td b {display:block; float:right; padding:0 5px 0 0; font-weight:100;}

.bnav2,

.bnav3,

.bnav4,

.bnav5,

.bnav6 {width:198px; margin:-5px 0 0 -4px;}

.bnav2 li,

.bnav3 li,

.bnav4 li,

.bnav5 li,

.bnav6 li {margin:0 0 -1px 0; font-weight:bold;}

.bnav2 li a,

.bnav3 li a,

.bnav4 li a,

.bnav5 li a,

.bnav6 li a {height:23px; line-height:21px; padding:0 7px; overflow:hidden; display:block; color:#73ab21; text-decoration:none; background:#fcfcfb url(../images/designs/bnav_bg.png) no-repeat -808px 0;}

.bnav2 li a:hover {color:#fff; background:#88bc3b url(../images/designs/bnav_bg.png) no-repeat -1006px 0;}

.bnav3 li a {background:#fbfbfb url(../images/designs/bnav_bg.png) no-repeat -1208px 0;}

.bnav3 li a:hover {color:#8e8e5f; background:#fafafa url(../images/designs/bnav_bg.png) no-repeat -1406px 0;}

.bnav4 li a {background:#fbfbfb url(../images/designs/bnav_bg.png) no-repeat -1608px 0;}

.bnav4 li a:hover {padding-left:17px; color:#8e8e5f; background:#fafafa url(../images/designs/bnav_bg.png) no-repeat -1806px 0;}

.bnav5 li a {background:#fbfbfb url(../images/designs/bnav_bg.png) no-repeat -2008px 0;}

.bnav5 li a:hover {color:#fff; background:#fafafa url(../images/designs/bnav_bg.png) no-repeat -2206px 0;}

.bnav6 li a {background:#fbfbfb url(../images/designs/bnav_bg.png) no-repeat -2408px 0;}

.bnav6 li a:hover {padding-left:17px; color:#fff; background:#fafafa url(../images/designs/bnav_bg.png) no-repeat -2606px 0;}

.block3_full {width:210px; margin:0 0 4px 0; background:#fff url(../images/designs/block_bg.png) repeat-y -1260px 0;}

.block3_full .block_in {background:url(../images/designs/block_bg.png) no-repeat -1470px 0;}

.block3_full .block_title {height:30px; padding:15px 0 0 14px; font-weight:bold; color:#fff; text-shadow:none; background:#86b827 url(../images/designs/block_bg.png) no-repeat -1470px 0;}

.block3_full .block_cont {padding:5px 11px 15px 11px; overflow:hidden; background:url(../images/designs/block_bg.png) no-repeat -1680px bottom;}

.block3_full .bnav {margin-left:-5px;}

.block3_full .bnav5 {margin-left:-5px;}

.block3_full .bnav6 {margin-left:-5px;}

.block_title b {display:block; float:right; margin:-3px 15px 0 0; background-image:url(../images/designs/block_icon.png); background-repeat:no-repeat;}

.block3_full .block_title b {margin:-4px 16px 0 0;}

.b_icon01 {background-position: 0 0; width: 26px; height: 20px; }

.b_icon02 {background-position: 0 -70px; width: 26px; height: 20px; }

.b_icon03 {background-position: 0 -140px; width: 26px; height: 20px; }

.b_icon04 {background-position: 0 -210px; width: 26px; height: 20px; }

.b_icon05 {background-position: 0 -280px; width: 26px; height: 20px; }

.b_icon06 {background-position: 0 -350px; width: 26px; height: 20px; }

.b_icon07 {background-position: 0 -420px; width: 26px; height: 21px; }

.b_icon08 {background-position: 0 -491px; width: 26px; height: 21px; }

.b_icon09 {background-position: 0 -562px; width: 26px; height: 21px; }

.b_icon10 {background-position: 0 -633px; width: 26px; height: 21px; }

.b_icon11 {background-position: 0 -704px; width: 26px; height: 21px; }

.b_icon12 {background-position: 0 -775px; width: 26px; height: 21px; }

.b_icon13 {background-position: 0 -846px; width: 26px; height: 21px; }

.b_icon14 {background-position: 0 -917px; width: 26px; height: 21px; }

.b_icon15 {background-position: 0 -988px; width: 26px; height: 21px; }

.block_title a.b_icon_vote {width:94px; height:22px; line-height:22px; overflow:hidden; position:relative; padding:0 0 1px 7px; display:block; float:right; margin:-4px 15px 0 0; font-size:11px; color:#fff; text-decoration:none; background:url(../images/designs/hnav_bg.png) no-repeat -172px -93px;}

.block_title a.b_icon_vote:hover {text-decoration:underline;}

.bPartners {overflow:hidden; border-bottom:1px solid #eeefe1; padding:2px 0 5px 0; margin:0 0 3px 0; text-align:center;}

.bPartners a {margin:0 1px;}

.bPartners_c {width:88px; height:31px; padding:4px; overflow:hidden; margin:0 auto 7px auto; background:url(../images/designs/bstat_fon.png) no-repeat 0 0;}

.bPartners img,

.bPartners_c img {vertical-align:top;}

a.ourbanner_button {width:127px; height:18px; padding:6px 0 0 0; display:block; font-weight:bold; color:#76ac21; text-shadow:0 1px 1px #fff; text-align:center; margin:0 auto; text-decoration:none; background:url(../images/designs/ourbanner_button_bg.png) no-repeat 0 0;}

a.ourbanner_button:hover {background:url(../images/designs/ourbanner_button_bg.png) no-repeat 0 -24px;}

.block3_full .bChat_wrap {padding-left:8px; padding-right:8px;}

.bChat_loop {

padding:5px;

margin:0 0 2px 0;

border:1px solid #e8e8e8;

-moz-border-radius: 5px; /* Firefox */

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-khtml-border-radius: 5px; /* KHTML */

border-radius: 5px;

background:#f9f9f9;

}

.bChat_top {border-bottom:1px solid #e5e5e5; padding:0 7px 4px 7px; margin:0 -4px; font-weight:bold;}

.bChat_top a {text-decoration:none;}

.bChat_top a:hover {text-decoration:underline;}

a.bChat_mail,

a.bChat_user {height:10px; display:block; float:right; margin:0 0 0 3px; background:url(../images/designs/bchat_elements.png) no-repeat 0 0;}

a.bChat_mail {width:13px; background-position:-109px -36px;}

a.bChat_user {width:10px; background-position:-122px -36px;}

a.bChat_mail:hover {background-position:-109px -46px;}

a.bChat_user:hover {background-position:-122px -46px;}

.bChat_cont {border-top:1px solid #fff; margin:0 -4px; padding:0 5px;}

.bChat_text {overflow:hidden; padding:2px 0 0 0; margin:0 0 4px 0;}

#container_full .bChat_text textarea {width:186px !important; height:28px !important; display:block; padding:4px; color:#5c5b3d; margin:0; border:0; vertical-align:top; background:#c7dda7 url(../images/designs/bchat_elements.png) no-repeat 0 0;}

#container_full .bChat_text textarea:hover,

#container_full .bChat_text textarea:focus {background-color:#c3e394;}

.bChat_bottom {overflow:hidden;}

.bChat_button {float:right;}

.bChat_button a {width:16px; height:16px; display:block; float:left; margin:0 0 0 2px; background:#8eb950 url(../images/designs/bchat_elements.png) no-repeat -45px -36px;}

.bChat_button a.bChat_ref {background-position:-45px -36px;}

.bChat_button a.bChat_bb {background-position:-61px -36px;}

.bChat_button a.bChat_smile {background-position:-77px -36px;}

.bChat_button a.bChat_setup {background-position:-93px -36px;}

.bChat_button a.bChat_ref:hover {background-position:-45px -52px;}

.bChat_button a.bChat_bb:hover {background-position:-61px -52px;}

.bChat_button a.bChat_smile:hover {background-position:-77px -52px;}

.bChat_button a.bChat_setup:hover {background-position:-93px -52px;}

#container_full .bChat_submit input {width:45px !important; height:16px !important; display:block; padding:0; margin:0; font-size:0px; overflow:hidden; background:#909064 url(../images/designs/bchat_elements.png) no-repeat 0 -36px;}

#container_full .bChat_submit input:hover {background:#909064 url(../images/designs/bchat_elements.png) no-repeat 0 -52px;}

.bVote_top {padding:8px 7px 16px 7px; margin:0 -4px; font-weight:bold; background:url(../images/designs/bvote_top_bg.png) repeat-x 0 bottom;}

.bVote_top_b {padding:4px 0 0 0; font-weight:100; color:#8e8e5f;}

.bVote_top_b b {font-weight:bold;}

.bVote_cont {padding:5px 2px; overflow:hidden;}

.bVote_bottom {height:20px; padding:8px 3px 0 0; border-top:1px solid #eeefe1; background:url(../images/designs/viewn_bottom_angle_bg.png) no-repeat right 5px;}

.bVote_bottom a {display:block; float:left; margin:2px 0 0 3px; font-weight:bold; text-decoration:none;}

.bVote_bottom a:hover {text-decoration:underline;}

#container_full .bVote_bottom input {width:80px; height:20px; display:block; float:right; padding:0; margin:0; border:0; vertical-align:top; background:url(../images/designs/bvote_submit.png) no-repeat 0 0;}

#container_full .bVote_bottom input:hover {background:url(../images/designs/bvote_submit.png) no-repeat 0 -20px;}

.pollButton input.pollBut {display:none;}

.cInfo {margin:0 -2px 3px -2px; background:#fff url(../images/designs/c_info_c_bg.png) repeat-y 0 0;}

.cInfo_rc {background:url(../images/designs/c_info_c_bg.png) repeat-y right 0;}

.cInfo_lt {background:url(../images/designs/c_info_t_bg.png) no-repeat 0 0;}

.cInfo_rt {background:url(../images/designs/c_info_t_bg.png) no-repeat right 0;}

.cInfo_lb {background:url(../images/designs/c_info_b_bg.png) no-repeat 0 bottom;}

.cInfo_rb {padding:10px 14px 11px 14px; overflow:hidden; line-height:1.4; background:url(../images/designs/c_info_b_bg.png) no-repeat right bottom;}

.hr_line {height:5px; margin:3px 0; border-left:1px solid #b2b3a9; border-right:1px solid #b2b3a9; background:url(../images/designs/hr_line.png) repeat-x 0 2px;}

.cAddNews {overflow:hidden; line-height:20px; padding:0 0 0 7px; margin:0 -2px 4px -2px; text-shadow:0 1px 1px #fff;}

a.cAddNews_button {width:136px; height:20px; line-height:20px; display:block; float:right; font-weight:bold; color:#fff; text-shadow:none; text-align:center; text-decoration:none; background:#75a929 url(../images/designs/addnews_button_bg.png) no-repeat 0 0;}

a.cAddNews_button:hover {text-decoration:underline;}

.viewn_loop {margin:0 -2px 5px -2px; background:#fff url(../images/designs/c_info_c_bg.png) repeat-y 0 0;}

.viewn_in {background:url(../images/designs/c_info_c_bg.png) repeat-y right 0;}

.viewn_lt {background:url(../images/designs/viewn_title_l_bg.png) no-repeat 0 0;}

.viewn_rt {background:url(../images/designs/viewn_title_r_bg.png) no-repeat right 0;}

.viewn_lb {background:url(../images/designs/viewn_bottom_l_bg.png) no-repeat 0 bottom;}

.viewn_rb {padding:0 7px 8px 7px; overflow:hidden; background:url(../images/designs/viewn_bottom_r_bg.png) no-repeat right bottom;}

.viewn_title {height:28px; margin:0 0 6px 0; padding:16px 8px 0 11px; font-size:11px; color:#76ac21;}

.viewn_title a {color:#76ac21;text-decoration:none;}

.viewn_title a:hover {text-decoration:underline;}

.viewn_cont {overflow:hidden; padding:5px 4px 11px 4px;}

.viewn_text {min-height:100px; padding:0 0 5px 0;}

.viewn_pict {width:134px; float:left; margin:0 4px 0 0; background:url(../images/designs/viewn_pict_border.png) no-repeat 0 0;}

.viewn_pict b {display:block; padding:4px; overflow:hidden; background:url(../images/designs/viewn_pict_border.png) no-repeat -134px bottom;}

.viewn_pict img {vertical-align:top;}

.viewn_open {height:23px; padding:3px 3px 0 0; background:url(../images/designs/button_fon.png) no-repeat right 0;}

.viewn_open a {float:right;}

.viewn_inner .viewn_pict {float:none; margin:0 auto 10px auto;}

.button_link {width:80px; height:20px; display:block; padding:0 8px 0 0; text-shadow:0 1px 1px #fff; text-decoration:none !important; text-align:center; background:url(../images/designs/button_bg.png) no-repeat right 0;}

.button_link b {height:20px; line-height:20px; display:block; padding:0 0 0 8px; background:url(../images/designs/button_bg.png) no-repeat 0 0;}

.button_link:hover {background:url(../images/designs/button_bg.png) no-repeat right -20px;}

.button_link:hover b {background:url(../images/designs/button_bg.png) no-repeat 0 -20px;}

.viewn_bottom {margin:0 4px 25px 4px; background:url(../images/designs/viewn_bottom_angle_bg.png) no-repeat 0 0;}

.viewn_bottom_in {height:22px; padding:3px 2px 0 2px; overflow:hidden; background:url(../images/designs/viewn_bottom_angle_bg.png) no-repeat right 0;}

.viewn_bottom a {width:auto; display:block; float:left; margin:0 2px;}

.viewn_bottom a.right {float:right;}

.viewn_detail_b {padding:6px 7px; overflow:hidden; border-top:1px solid #f6f6f6; font-weight:bold; background:#f5f5f5 url(../images/designs/viewn_detail_b_bg.png) repeat-x 0 0;}

.viewn_detail_b a {text-decoration:none;}

.viewn_detail_b a:hover {text-decoration:underline;}

.viewn_rat {float:right;}

.viewn_detail_b .left {margin:-1px 5px 0 0;}

.cProf_top {overflow:hidden;}

.cProf_right {width:151px; float:right; margin:0 0 0 4px;}

.cProf_avatar {margin:0 0 4px 0; text-align:center;}

a.cProf_button {width:151px; height:22px; line-height:22px; margin:0 0 2px 0; display:block; font-weight:bold; color:#76ac21; text-align:center; text-decoration:none; background:#f6f3f3 url(../images/designs/cprof_elements.png) no-repeat 0 -46px;}

a.cProf_button:hover {color:#8e8e5f; background:url(../images/designs/cprof_elements.png) no-repeat 0 -68px;}

.cProf_list {overflow:hidden; font-weight:bold;}

.cProf_list a {color:#fff;}

.cProf_list li {height:23px; margin:0 0 2px 0; color:#fff; background:#8e8e5f url(../images/designs/cprof_elements.png) no-repeat 0 0;}

.cProf_list li .rows {height:23px; line-height:21px; padding:0 0 0 8px; background:url(../images/designs/cprof_elements.png) no-repeat right -23px;}

.cProf_list li .rows .left {margin:0 5px 0 0;}

.cProf_list li .rows form select {padding:0; margin:0; position:relative; top:2px; vertical-align:top;}

.cProf_info {font-weight:bold; padding:3px 0; margin:0 0 8px 0; border-top:1px solid #eeefe1;border-bottom:1px solid #eeefe1; text-align:center;}

.cProf_info a {text-decoration:none;}

.cProf_info a:hover {text-decoration:underline;}

.cProf_bottom {overflow:auto; text-align:center;}

.cProf_bottom input {vertical-align:top;}

#container_full input.cProf_b_button {width:142px; height:21px; border:0; margin:0; padding:0; font-weight:bold; color:#fff; text-align:center; background:url(../images/designs/cprof_elements.png) no-repeat 0 -90px;}

#container_full input.cProf_b_button:hover {background:url(../images/designs/cprof_elements.png) no-repeat 0 -111px;}

#container_full input.cProf_search {width:139px; height:21px; line-height:21px; text-indent:0; margin:0; padding:0; border:0; outline:none; color:#76ac21; text-align:center; background:url(../images/designs/cprof_elements.png) no-repeat 0 -132px;}

.vComm_loop {margin:0 0 3px 0; background:#fff url(../images/designs/vcomm_lrc_bg.png) repeat-y 0 0;}

.vComm_rc_bg {background:url(../images/designs/vcomm_lrc_bg.png) repeat-y right 0;}

.vComm_rt_bg {background:url(../images/designs/vcomm_rt_bg.png) no-repeat right 0;}

.vComm_lt_bg {background:url(../images/designs/vcomm_lt_bg.png) no-repeat 0 0;}

.vComm_rb_bg {background:url(../images/designs/vcomm_rb_bg.png) no-repeat right bottom;}

.vComm_lb_bg {padding:6px 6px 7px 6px; overflow:hidden; background:url(../images/designs/vcomm_lb_bg.png) no-repeat 0 bottom;}

.vComm_left {float:left; margin:0 5px 0 0;}

.vComm_right {overflow:hidden;}

.vComm_top {padding:0 0 0 8px; overflow:hidden; line-height:1; font-weight:bold;}

a.vComm_mail {width:17px; height:11px; display:block; float:right; margin:3px 0 0 0; background:url(../images/designs/vcomm_mail.png) no-repeat 0 0;}

a.vComm_mail:hover {background:url(../images/designs/vcomm_mail.png) no-repeat 0 -11px;}

.vComm_top a {text-decoration:none;}

.vComm_top a:hover {text-decoration:underline;}

.vComm_cont {padding:5px 2px; overflow:hidden;}

.vComm_sys {font-size:10px; font-weight:bold;}

.vComm_sys a {text-decoration:none;}

.vComm_sys a:hover {text-decoration:underline;}

/* AddComm */

.addComm_bb {margin:0 0 5px 0;}

.addComm_cont {margin:0 -1px 3px -1px; overflow:hidden;}

.addComm_lc {overflow:hidden; background:url(../images/designs/add_border_lrc_bg.png) repeat-y 0 0;}

.addComm_rc {background:url(../images/designs/add_border_lrc_bg.png) repeat-y right 0;}

.addComm_lt {background:url(../images/designs/add_border_lt_bg.png) no-repeat 0 0;}

.addComm_rt {background:url(../images/designs/add_border_rt_bg.png) no-repeat right 0;}

.addComm_lb {background:url(../images/designs/add_border_lb_bg.png) no-repeat 0 bottom;}

.addComm_rb {padding:1px; overflow:hidden; background:url(../images/designs/add_border_rb_bg.png) no-repeat right bottom;}

.addComm_smile {width:102px; float:right; margin:0 0 0 4px;}

.addComm_textarea .addComm_rb {padding-right:15px;}

.addComm_textarea textarea {width:100%; height:108px; display:block; color:#76ac21; padding:6px; margin:0 17px 0 0; border:0; background:0;}

#pagesBlock1 {font-weight:bold; color:#73ab21; text-align:center;}

#pagesBlock1 a {margin:0 2px;color:#73ab21; text-decoration:none;}

#pagesBlock1 a:hover {text-decoration:underline;}

#pagesBlock1 b {margin:0 2px; color:#777;}

.fbanka {width:519px; height:98px; padding:6px 0 0 51px; margin:10px auto 30px auto; text-align:left; background:url(../images/designs/fbanka_bg.png) no-repeat 0 0;}

.forum_nav {overflow:hidden; margin:0 0 7px 0;}

.forum_nav li {float:right; margin:0 0 0 7px;}

.forum_nav li a {height:22px; display:block; font-weight:bold; color:#7aaf2c; text-shadow:0 1px 1px #fff; text-decoration:none; background:#f5f5f5 url(../images/designs/button_bg.png) no-repeat 0 -40px;}

.forum_nav li a span {height:22px; line-height:22px; display:block; padding:0 13px; background:url(../images/designs/button_bg.png) no-repeat right -40px;}

.forum_nav li a:hover {color:#9a9970; background-position:0 -62px;}

.forum_nav li a:hover span {color:#9a9970; background-position:right -62px;}

.fPost_top {height:26px; line-height:24px; padding:0 12px; overflow:hidden; background:#f6f6f6 url(../images/designs/f_post_top_bg.png) repeat-x 0 0;}

.fPost_top a {text-decoration:none;}

.fPost_top a:hover {text-decoration:underline;}

.fPost_cont {overflow:hidden; background:#fff url(../images/designs/f_post_left_bg.png) repeat-y 0 0;}

.fPost_left {width:219px; float:left; padding:9px 0 8px 0; margin:0 7px 0 0;}

.fPost_avatar {width:142px; padding:4px; text-align:left; margin:0 auto 4px auto; overflow:hidden; position:relative;}

.fPost_avatar b {width:150px; height:auto; display:block; position:absolute; left:0px; top:0px; bottom:10px; background:url(../images/designs/f_post_ava_border.png) no-repeat 0 0;}

.fPost_avatar i {width:150px; height:10px; display:block; position:absolute; left:0px; bottom:0px; background:url(../images/designs/f_post_ava_border.png) no-repeat -150px bottom;}

.fPost_icon {margin:0 0 8px 0; text-align:center;}

.fPost_info {width:192px; margin:0 auto 5px auto;}

.fPost_info a {color:#fff; text-decoration:none;}

.fPost_info a:hover {text-decoration:underline;}

.fPost_info li {width:174px; height:22px; line-height:22px; margin:0 0 2px 0; overflow:hidden; padding:0 9px; font-weight:bold; color:#fff; background:#7aaf2c url(../images/designs/f_post_elements.png) no-repeat 0 0;}

.fPost_rat {width:137px; margin:0 auto;}

a.fPost_minus,

a.fPost_plus {width:23px; height:22px; display:block; float:left; font-size:0px; text-decoration:none; background:url(../images/designs/f_post_elements.png) no-repeat -192px 0;}

a.fPost_minus:hover {background:url(../images/designs/f_post_elements.png) no-repeat -215px 0;}

a.fPost_minus.disable {background:url(../images/designs/f_post_elements.png) no-repeat -238px 0; cursor:default;}

a.fPost_plus {width:23px; height:22px; display:block; float:left; font-size:0px; text-decoration:none; background:url(../images/designs/f_post_elements.png) no-repeat -261px 0;}

a.fPost_plus:hover {background:url(../images/designs/f_post_elements.png) no-repeat -284px 0;}

a.fPost_plus.disable {background:url(../images/designs/f_post_elements.png) no-repeat -307px 0; cursor:default;}

.fPost_rat_in {width:83px; height:22px; line-height:22px; float:left; margin:0 4px; font-weight:bold; color:#fff; text-align:center; background:#9a9970 url(../images/designs/f_post_elements.png) no-repeat -330px 0;}

.fPost_rat_in a {color:#fff; text-decoration:none;}

.fPost_rat_in a:hover {text-decoration:underline;}

.fPost_right {overflow:hidden; padding:3px 0 0 6px;}

.fPost_bottom {height:26px; overflow:hidden; padding:9px 5px 0 226px; background:#f9f9f9 url(../images/designs/f_post_bottom_bg.png) no-repeat center 0;}

.fPost_bottom a,

.fPost_bottom img,

.fPost_bottom input {vertical-align:top;}

.fPostAdd_top {margin:0 0 6px 0; background:url(../images/designs/f_post_add_top_bg.png) repeat-x 0 0;}

.fPostAdd_top_in {background:url(../images/designs/f_post_add_top_bg.png) no-repeat 0 -173px;}

.fPostAdd_top_ins {height:173px; background:url(../images/designs/f_post_add_top_bg.png) no-repeat right -346px;}

.fPostAdd_smile {width:169px; float:left; margin:0 6px 0 0; padding:9px 10px 0 10px;}

.fPostAdd_sm_title {margin:0 0 20px 0; font-weight:bold;}

.fPostAdd_right {overflow:hidden;}

.fPostAdd_bb {height:23px;}

.fPostAdd_text {padding:1px 17px 1px 1px; overflow:hidden;}

#container_wrap .fPostAdd_text textarea {width:100%; height:134px; display:block; padding:7px; color:#7aaf2c; margin:0; border:0; background:0;}

.fPost_option {margin:0 0 4px 0; background:url(../images/designs/f_post_set_lt_bg.png) no-repeat 0 0;}

.fPost_opt_rt {background:url(../images/designs/f_post_set_rt_bg.png) no-repeat right 0;}

.fPost_opt_lb {background:url(../images/designs/f_post_set_lb_bg.png) no-repeat 0 bottom;}

.fPost_opt_rb {padding:5px 1px; overflow:hidden; background:url(../images/designs/f_post_set_rb_bg.png) no-repeat right bottom;}

.fPost_opt_left {width:180px; float:left; padding:0 0 0 7px; margin:0 8px 0 0; font-weight:bold;}

.fPost_opt_right {overflow:hidden; padding:0 0 0 7px;}

.fPostAdd_row {overflow:hidden; margin:0 0 5px 0;}

.fPostAdd_row span {width:120px; display:block; float:left; margin:0 5px 0 0; padding:3px 0 0 0; font-weight:bold; }

.fPostAdd_row input {width:400px !important; padding:3px 5px !important; display:block; float:left; vertical-align:top;}

.fPostAdd_inputs .fPost_opt_right {padding:0;}

.fPostAdd_inputs .fPost_opt_right input {display:block; padding:0 5px; margin:0; border:0; background:0 none;}

.gTablePoll_left {width:120px;}

.gTablePoll_right input {width:400px !important; padding:3px 5px !important; display:block; vertical-align:top;}

.gTablePoll_right textarea {width:400px !important; padding:3px 5px !important; display:block; vertical-align:top;}

#footer {border-top:1px solid #c4c4bd; background:#53543f url(../images/designs/footer_l_bg.png) no-repeat 0 bottom;}

#footer_in {overflow:hidden; padding:9px 9px 11px 9px; font-weight:bold; color:#fff; background:url(../images/designs/footer_r_bg.png) no-repeat right bottom;}

#footer_in a {color:#fff;}

#fStat {float:right; padding:12px 6px 0 0;}

.fHosting {font-weight:100;}

#fLogo {padding:10px 0;}

#fLogo img {vertical-align:top;}

/* OTHER */

#tooltip {

position: absolute;

z-index: 10;

border: 1px solid #558d01;

background-color: #fff;

font-size:11px;

color: #000;

margin:0 5px 0 0;

padding: 3px 5px;

opacity: 0.75;

-moz-border-radius: 5px; /* Firefox */

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-khtml-border-radius: 5px; /* KHTML */

border-radius: 5px;

}

#tooltip h3 {display:block; margin:0; padding:0; font-size:1em;}

.popup_full {padding:10px;}

#container_wrap .u-star-rating:hover {background:url(../images/designs/rating.png) no-repeat 0 -70px !important;}

#container_wrap .u-star-rating,

#container_wrap .u-star-rating li a,

#container_wrap .u-current-rating {height:14px !important;}

.u-star-rating:hover .u-current-rating,

.u-star-rating:hover .u-current-rating b {background:0 !important;}

.u-star-rating li.u-current-rating {background:url(../images/designs/rating.png) no-repeat 0 -70px !important;}

.u-star-rating li a.u-one-star:hover { background:url(../images/designs/rating.png) no-repeat 0 -100px;}

.u-star-rating li a.u-two-stars:hover { background:url(../images/designs/rating.png) no-repeat 0 -114px;}

.u-star-rating li a.u-three-stars:hover { background:url(../images/designs/rating.png) no-repeat 0 -128px;}

.u-star-rating li a.u-four-stars:hover { background:url(../images/designs/rating.png) no-repeat 0 -142px;}

.u-star-rating li a.u-five-stars:hover { background:url(../images/designs/rating.png) no-repeat 0 -156px;}

.u_curr_rat_in {height:14px; display:block; position:relative; top:5px; background:url(../images/designs/rating.png) no-repeat right -84px;}

.u-current-rating[style="width:100%;"]:hover { background:url(../images/designs/rating.png) no-repeat 0 -70px !important;}

.u-current-rating[style="width:100%;"] b {display:none;}

/* END */

.pm_status {

float:left;

border: 1px solid #d8d8d8;

padding: 0px;

background-color: #fff;

width: 280px;

height: 100px;

margin-left: 20px;

margin-right: 5px;

}

.pm_status_head {

border-bottom: 1px solid #d8d8d8;

font-size: 0.9em;

background: #fff url("../images/bbcodes.png") repeat-x 0 100%;

height: 22px;

padding: 0;

font-weight: bold;

text-align: center;

color: #4e4e4e;

}

/* Reset */

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.accordion li {

list-style: none;

}

/* Layout & Style */

.accordion li > a {

display: block;

position: relative;

min-width: 110px;

padding: 0 10px 0 40px;

height: 32px;

color: #fdfdfd;

font: bold 12px/32px Arial, sans-serif;

text-decoration: none;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #6c6e74;

background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));

background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.accordion > li:hover > a,

.accordion > li:target > a {

color: #3e5706;

text-shadow: 1px 1px 1px rgba(255,255,255, .2);

/*background: url(../img/active.png) repeat-x;*/

background: #a5cd4e;

background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));

background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

}

.accordion li > a span {

display: block;

position: absolute;

top: 7px;

right: 0;

padding: 0 10px;

margin-right: 10px;

font: normal bold 12px/18px Arial, sans-serif;

background: #404247;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

}

.accordion > li:hover > a span,

.accordion > li:target > a span {

color: #fdfdfd;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #3e5706;

}

/* Images */

.accordion > li > a:before {

position: absolute;

top: 0;

left: 0;

content: '';

width: 24px;

height: 24px;

margin: 4px 8px;

background-repeat: no-repeat;

background-image: url('../img/icons.png');

background-position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before { background-position: -72px -24px; }

/* Sub Menu */

.sub-menu li a {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #e5e5e5;

border-bottom: 1px solid #c9c9c9;

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: transparent;

border: 1px solid #c9c9c9;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

.sub-menu em {

position: absolute;

top: 0;

left: 0;

margin-left: 14px;

color: #a6a6a6;

font: normal 10px/32px Arial, sans-serif;

}

/* Functionality */

.accordion li > .sub-menu {

height: 0;

overflow: hidden;

-webkit-transition: height .2s ease-in-out;

-moz-transition: height .2s ease-in-out;

-o-transition: height .2s ease-in-out;

-ms-transition: height .2s ease-in-out;

transition: height .2s ease-in-out;

}

.accordion li:target > .sub-menu {

height: 98px;

}

Вот тут коды которые я вставлял. Это из папки по установке этого меню-аккордеона.

Разметка HTML

----------------------------------------------

<div id="wrapper-200a">

<ul class="accordion">

<li id="one" class="files">

<a href="#one">Мои файлы<span>495</span></a>

<ul class="sub-menu">

<li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>

<li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li>

<li><a href="#one"><em>03</em>FTP сервер<span>366</span></a></li>

</ul>

</li>

<li id="two" class="mail">

<a href="#two">Mail<span>26</span></a>

<ul class="sub-menu">

<li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li>

<li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li>

<li><a href="#two"><em>03</em>Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three" class="cloud">

<a href="#three">Облако<span>58</span></a>

<ul class="sub-menu">

<li><a href="#three"><em>01</em>Соединений<span>12</span></a></li>

<li><a href="#three"><em>02</em>Профилей<span>19</span></a></li>

<li><a href="#three"><em>03</em>Опций<span>27</span></a></li>

</ul>

</li>

<li id="four" class="sign">

<a href="#four">Выйти</a>

<ul class="sub-menu">

<li><a href="#four"><em>01</em>Выйти из</a></li>

<li><a href="#four"><em>02</em>Удалить аккаунт</a></li>

<li><a href="#four"><em>03</em>Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

</div>

-----------------------------------------------------------------

Пример одного из вариантов меню с #wrapper-200a:

CSS

Оболочка:

-----------------------------------------------------------------

#wrapper-200a{

width:200px;

float:left;

margin-left:180px

}

----------------------------------------------------------------

И общие стили для всех аккордеонов:

/* Reset */

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.accordion li {

list-style: none;

}

/* Layout & Style */

.accordion li > a {

display: block;

position: relative;

min-width: 110px;

padding: 0 10px 0 40px;

height: 32px;

color: #fdfdfd;

font: bold 12px/32px Arial, sans-serif;

text-decoration: none;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #6c6e74;

background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));

background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.accordion > li:hover > a,

.accordion > li:target > a {

color: #3e5706;

text-shadow: 1px 1px 1px rgba(255,255,255, .2);

/*background: url(../img/active.png) repeat-x;*/

background: #a5cd4e;

background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));

background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

}

.accordion li > a span {

display: block;

position: absolute;

top: 7px;

right: 0;

padding: 0 10px;

margin-right: 10px;

font: normal bold 12px/18px Arial, sans-serif;

background: #404247;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

}

.accordion > li:hover > a span,

.accordion > li:target > a span {

color: #fdfdfd;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #3e5706;

}

/* Images */

.accordion > li > a:before {

position: absolute;

top: 0;

left: 0;

content: '';

width: 24px;

height: 24px;

margin: 4px 8px;

background-repeat: no-repeat;

background-image: url('../img/icons.png');

background-position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before { background-position: -72px -24px; }

/* Sub Menu */

.sub-menu li a {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #e5e5e5;

border-bottom: 1px solid #c9c9c9;

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: transparent;

border: 1px solid #c9c9c9;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

.sub-menu em {

position: absolute;

top: 0;

left: 0;

margin-left: 14px;

color: #a6a6a6;

font: normal 10px/32px Arial, sans-serif;

}

/* Functionality */

.accordion li > .sub-menu {

height: 0;

overflow: hidden;

-webkit-transition: height .2s ease-in-out;

-moz-transition: height .2s ease-in-out;

-o-transition: height .2s ease-in-out;

-ms-transition: height .2s ease-in-out;

transition: height .2s ease-in-out;

}

.accordion li:target > .sub-menu {

height: 98px;

}

На хостинг в папку images загрузил пару картинок, а в папку "style" на всякий случай загрузил файл "accordionmenu.css" бывший в папке установки. Вот его код

/* Reset */

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.accordion li {

list-style: none;

}

/* Layout & Style */

.accordion li > a {

display: block;

position: relative;

min-width: 110px;

padding: 0 10px 0 40px;

height: 32px;

color: #fdfdfd;

font: bold 12px/32px Arial, sans-serif;

text-decoration: none;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #6c6e74;

background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));

background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.accordion > li:hover > a,

.accordion > li:target > a {

color: #3e5706;

text-shadow: 1px 1px 1px rgba(255,255,255, .2);

/*background: url(../img/active.png) repeat-x;*/

background: #a5cd4e;

background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));

background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

}

.accordion li > a span {

display: block;

position: absolute;

top: 7px;

right: 0;

padding: 0 10px;

margin-right: 10px;

font: normal bold 12px/18px Arial, sans-serif;

background: #404247;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

}

.accordion > li:hover > a span,

.accordion > li:target > a span {

color: #fdfdfd;

text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #3e5706;

}

/* Images */

.accordion > li > a:before {

position: absolute;

top: 0;

left: 0;

content: '';

width: 24px;

height: 24px;

margin: 4px 8px;

background-repeat: no-repeat;

background-image: url('../img/icons.png');

background-position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before { background-position: -72px -24px; }

/* Sub Menu */

.sub-menu li a {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #e5e5e5;

border-bottom: 1px solid #c9c9c9;

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {

color: #797979;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: transparent;

border: 1px solid #c9c9c9;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

.sub-menu em {

position: absolute;

top: 0;

left: 0;

margin-left: 14px;

color: #a6a6a6;

font: normal 10px/32px Arial, sans-serif;

}

/* Functionality */

.accordion li > .sub-menu {

height: 0;

overflow: hidden;

-webkit-transition: height .2s ease-in-out;

-moz-transition: height .2s ease-in-out;

-o-transition: height .2s ease-in-out;

-ms-transition: height .2s ease-in-out;

transition: height .2s ease-in-out;

}

.accordion li:target > .sub-menu {

height: 98px;

}

Меню вроде работает но почему то страница постоянно съезжает. Подскажите пожалуйста что я сделал нетак? Заранее большое спасибо.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...