/* ВНИМАНИЕ: 
ВЕСЬ это файл НЕЛЬЗЯ подвергать автоматическому переворматированию!!!!*/

/* 

включение специального javascripta который реализует свойство :hover 
не только для ссылок но и вообще для всех элементов HTML - 
как обычно нужно это только для дебильного эксплорера 
(остальные браузеры и так все понимают без лишних скриптов)

*/
body { behavior: url(/menu/csshover.htc); }


/*              ------  Basic style     ------          */
/*  тут лучше ничего не трогать - смотрите НИЖЕ */
#menu ul {
        margin: 0;
        margin-left:10px;
        padding: 0;
        border: 0;
        z-index: 10;
}

#menu li {
        margin: 0;
        padding: 0;
        border: 0;
        display: block;
        float: left;
        position: relative;
        z-index: 10;
                  background: none;
}

#menu a {
        float: left;/* \*/float: none;/*  */
        display: block;
                  background: none;
}

#menu li ul {
        visibility: hidden;
        position: absolute;
        z-index: 10;
}

#menu li ul li {
        width: 100%;
        display: block;
        float: left;
        position: static;
}
html>body #menu li ul li {
        float: none;
        position: relative;
}

#menu li ul li:hover {
        position: relative;
}

/* fix the position */
#menu li ul li ul {
        top: 0;
        left: 100%;
}

/* simulate child selector for IE */
div#menu li:hover ul, #menu li:hover li:hover ul, #menu li:hover li:hover li:hover ul {
        visibility: visible;
}
#menu li:hover li ul, #menu li:hover li:hover li ul, #menu li:hover li:hover li:hover li ul {
        visibility: hidden;
}

/* do the normal show, with increased specificity */
#menu ul#menuList li:hover > ul {
        visibility: visible;
}

/*              ------   МАКИЯЖ        --------                      */
/*  здесь можно трогать - но аккуратно */

/* весь блок меню заключен в этот контейнер */
#menu {
        font-family: Helvetica;
        font-size: small; 
        font-weight: bold;
        color: #404040;
        background-color: transparent;
		  /* здесь можно задать фон и вообще вид всего блока меню*/
                  background-image: url(/images/decor3s.gif);
                  background-repeat: repeat-x;
						background-position: 0px 2px;
        margin: 0;
        padding: 0;
        border-style: none;
        display: block;
        height: 30px;
}

/*каждый пункт меню независимо от его положения в иерархии - это
  прежде всего ссылка, так что вот это и есть стиль этой ссылки -
  влияет побольшей части на ссылки самого верхнего уровня, видимые без разворачивания, 
  т.к. следующие уровни перекрываються стилями дальше*/
#menu a {
        text-decoration: none;
        text-align: center;
   /* 	text-transform: lowercase; */
        color: #404040;
        background-color: transparent;
        margin: 0;
        padding: 5px 4px 2px;
        border: 0;
}

/* блок пункта меню верхнего уровня (блок - не ссылка - ссылка внутри) */
#menu li {
        margin: 2px;
        padding: 1px 1px 1px 1px;
        border: 0;
        width: auto;
        display: block;
}
/* он же - но при наведении курсора */
#menu li:hover {
        background-color: transparent;
                  background-image: url(/images/decor3sl.gif);
                  background-repeat: repeat-x;
						background-position: 0px 0px;
        margin: 2px;
        border: 0px;
        cursor: pointer;
}
/* отменить изменения стиля блока пункта меню при наведении 
для более нижних уровней - они обычно сильно отличаются от блоков
основной полосы*/
#menu li li:hover {
                  background-image: none;
						background-color: #17ACE6;
        border: 0px;
}

/* ну блин незнаю как объяснить. тут если что-то менять то только цвета и бордеры
- но будьте внимательны отмена бордера (как и везде тут) - влечет изменения padding*/
#menu li ul {
        color: #000;
        background-color: #ffffff;
/*        background-image: url(/pics/iconbg.gif);*/
/*        background-repeat: repeat-y;*/
        margin: -1px 0 0 -1px;
        padding: 0;
        border: 1px solid #ccc;
}

/*  самое главное  */
/* объяснить не могу - надо чтоб человек сзнал ЦСС и понял почему 
следующие две позиции так похожи и непохожи -  первая для всего того что
выпало но не подсвечено, второе для того что подсвечено и подсвеченный путь назад
уровней вложенности тут ТРИ. можно добавить еще "по аналогии" - 
но в нормальных браузера (не эксплорер) будет работать до бесконечности*/

#menu li ul a, #menu li ul li:hover ul a, #menu li ul li ul li:hover ul a {
        text-align: left;
        margin: 0px 0px 5px 20px;
        color: Black;
}

#menu li ul li:hover a, #menu li ul li ul li:hover a, #menu li ul li ul li ul li:hover a {
        text-align: left;
        margin: 0px 0px 5px 20px;
        color: White;
}

/*  стиль для тех пунктов подменю которые сами являються 
указателями на следующий уровень выпадающего меню
картинка arrow.gif - это треугольничек направленный вправо*/

#menu li ul a.submenu {
        background-image: url(/images/arrow.gif);
        background-repeat: no-repeat;
        background-position: 100% 5px;
}

/*ширина выпадающих блоков для нормальных браузеров (по стандартам)*/
#menu li ul {
        width: 180px;
}

#menu li ul li {
        width: 174px;
}

/*              ------   Fixes  for buggy browsers      --------                        */
/* та же ширина - но для дебильного эксплорера */

* html #menu li li a {
        width: 174px;
        w\idth: 168px;
}



/* можно менять, если надо выровнять положение всего блока меню относительно 
родительского контейнера*/
#menu {
   margin-bottom: 2px;     
   padding-bottom: 0px;
}

/* эта возможность нереализована в БС но вообще можно делать разные иконки, например для внешних-ссылок, для документов и т.д.*/

/* вообще красиво - обращайтесь - реализуем )) */


/*
li ul li.itemDocument {
        background-image: url(/pics/document.gif);
        background-repeat: no-repeat;
        background-position: 3px 50%;
}

li ul li.itemMail {
        background-image: url(/pics/mail_generic.gif);
        background-repeat: no-repeat;
        background-position: 3px 50%;
}

li ul li.itemSearch {
        background-image: url(/pics/search.gif);
        background-repeat: no-repeat;
        background-position: 3px 50%;
}

li ul li.itemHelp {
        background-image: url(/pics/help.gif);
        background-repeat: no-repeat;
        background-position: 3px 50%;
}

li ul li.itemInfo {
        background-image: url(/pics/info.gif);
        background-repeat: no-repeat;
        background-position: 3px 50%;
}*/