/*** Общие настройки ***/
.sf-vertical a:link, .sf-vertical a:visited  {
	color:#4B5264;                    	/* Цвет шрифта */
	text-decoration: none;
	padding: 4px 0 4px 4px;		  	/* Высота меню */
	margin: 3px 0 3px 0;  				/* смещение, расстояние между пунктами */
	font-weight: bold;
	text-align: left;
	background-color:transparent;				/* Цвет меню */
	font-size:14px;
}
  /* цвет hover */ 
.sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active {
	color:#900;
	outline:0;
	background-color: transparent;
	background-image:none;
	top: 1px;         /* эффект нажатия кнопки пунктов*/
	padding-left:4px;
}
.sf-vertical li a:hover,.sf-vertical li ul li, .sf-vertical li ul li li,.sf-vertical li.sfHover{
	background-color: transparent; background-image:none; /* убираем лишнее с пунктов меню */ 	
} 
.sf-vertical a:hover {   /* эффект нажатия кнопки*/
	text-decoration:none; top: 0px; 
} 
   /*** END Общие настройки ***/
   
   
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:151px;    /* Ширина пунктов меню  */
	margin:0px;      /* убираем зависимость расстояния между пунктами от гор. меню  */
	background-color: transparent;
	background-image:none; /* убираем лишнее с пунктов меню */
	cursor:pointer; /* Небыло курсора для ОПЕРА если есть были вложенные подпункты */
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul {
	left:155px; /* смещение влево или вправо (указать отрицательную величину) подпунктов 1 уровня */
  	top:5px; /* смещение hover по вертикали 1 уровня */  
}
.sf-vertical li ul li a, .sf-vertical li ul li a:link, .sf-vertical li ul li a:visited  {
	background-color: #626878; /* цвет фона подпунктов */
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
	color:#FFFFFF;	
margin-top:-1px; /* расстояние между подпунктами, смещение по вертикали*/  
top:-3px;
margin-bottom:0px;
}
.sf-vertical li ul li li a, .sf-vertical li ul li li a:link, .sf-vertical li ul li li a:visited  {
	background-color: #626878; /* цвет фона подпунктов 1 уровня*/
	color:#FFFFFF;	
margin-top:-3px;  /* расстояние между подпунктами 1 уровня, смещение по вертикали*/  
top:-2px;
margin-bottom:2px;
}

.sf-vertical li ul li hover, .sf-vertical li ul li a:hover  {
	padding-left: 4px;
	background-color:  #4B5264; /* цвет фона подпунктов*/
	color:#FDCA84;
}

.sf-vertical li ul li li hover, .sf-vertical li ul li li a:hover  {
	padding-left: 4px;
	background-color:  #4B5264; /* цвет фона подпунктов 1 уровня*/
	color:#FDCA84;
}

.sf-vertical li ul li:hover ul, .sf-vertical li ul li.sfHover ul {
	left:151px; /* смещение влево подпунктов 2 уровня, смещение hover по вертикали */
}
   /*** alter arrow directions ***/
  .sf-vertical  .sf-sub-indicator {		 /* позиция индикатора справа или слева arrow или arrow_l */
        background:		url(images/arrow.png) no-repeat -10px -100px;
	position:		absolute;
	display:		block;
	right:			5px;
	top:			5px; /* IE6 only */
}
.sf-vertical .sf-sub-indicator { background-position: -5px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

.sf-vertical li a{ /* цвет шрифта для ИЕ */
	text-decoration: none;
	color: #4B5264;
	font-weight: bold;
}

.sf-vertical li li {
	background-color: #008080; /* цвет и ширина подпунктов 1 уровня, смещение */
	width:151px;
	left:1px; 
}
.sf-vertical li li li {
	background-color: #008080; /* цвет и ширина подпунктов 2 уровня, смещение */
	width:151px;
	left:1px;
}