/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	/*width:	16.7em;*/
	width:	200px;
}
/* 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:	10em; /* match ul width */
	top:	0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 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 .children 
{

background-color:#F9DD99 !important;
background:none !important;
border:none !important;
}
.sf-vertical li ul.children 
{

margin-left:80px;
background-image:none !important;
}
.sf-vertical li ul.children ul.children
{

margin-left:60px;

}

.sf-vertical li ul.children ul.children ul
{

margin-left:0px;

}

.sf-vertical li .children li
{
border:0px solid #999999 !important;
background-image:none!important;
line-height:12px;
}
.sf-vertical li .children li a 
{
	background-color:#2F343A !important;
	color:#FFF !important;
	float:none !important;
}
.sf-vertical li .children li a:hover
{
	background-color: #00356C;
	background-image: url(btleft_bg_hover.jpg);
	background-repeat: repeat-x;
	color: #FFF;	
}
#sub-page-menu ul li .children li a 
{
	color:#FFF !important;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
}
.sf-menu li .children li
{
border:none !important;}
.sf-menu li .children li a {
border-top:none !important;
float:none !important;
}


.sf-menu li
{
border-top:2px solid #CFDEFF;}
li < .children 
{
border:1px solid red;}


