.sf-vertical {width: 100%; float:left;}
.sf-vertical li  {width: 100%;float:left;border-bottom: 1px solid #7b86a2;}
.sf-vertical li.active span {}
.sf-vertical li:hover {}
.sf-vertical li.active {font-weight:bold;}

ul.sf-vertical li a, ul.sf-vertical li span.separator {padding:0px 0 0 10px;height: 40px; line-height:40px;font-size: 22px; font-weight:normal;width: 100%;}
ul.sf-vertical ul li li {padding:0;}
ul.sf-vertical li li a, ul.sf-vertical li li span.separator {height: 35px; font-size: .9em; font-weight:normal;font-family: Arial, Helvetica, sans-serif;}
/*split LEVEL*/
ul.sf-vertical .line2 {/*BECAUSE IT's A VERTICAL MENU*/ visibility:hidden;}


.sf-vertical li {
background: none;	
}

.sf-vertical li li {
border-bottom:0;
}

.sf-vertical li li.pjmenu-top {
border:0;
}

.sf-vertical li span.separator {
display:block;
}



/**** menu STYLING **************************************************************************************/
/**** Main Level ***************************************************************************************/

 ul.sf-vertical li.last { border-right:0;}
 ul.sf-vertical li.first { border-left:0;}
 ul.sf-vertical li li { padding:0; border-right:0;}

/*split LEVELS*/
 ul.sf-vertical li span.line1 
{
line-height:16px; font-size:16px;font-family:"Futura Md BT", Arial, sans-serif;
}
.sf-vertical .line2, .sf-navbar .line2, .sf-vertical .line2  
{
padding:0;margin:0;font-size:11px; display:block; 
text-transform:none; margin-top:-7px; font-weight:normal;
text-indent: 1px;
}

/*main level normal*/
 .sf-vertical li a,  .sf-vertical li span 
{
color:#fff;
}
 ul.sf-vertical li .line2
{
color: #999;
font-weight:normal;
}

/*main level hover*/
 .sf-vertical li:hover a,  .sf-vertical li:hover span 
{
color:#000;
}

/*main level active*/
 ul.sf-vertical li.active a,  ul.sf-vertical li.active span
{
color: #fff;
font-weight:normal;
}
 ul.sf-vertical li.active .line2 
{
color: #ddd;
font-weight:normal;
}


/****  Sub Levels ***************************************************************************************/

 ul.sf-vertical li li a,  ul.sf-vertical li li span.separator,  ul.sf-vertical li ul li span.line1
{
font-family: Arial, Helvetica, sans-serif;
padding-left:15px; height: 35px; line-height:33px; 
font-size: 12px; font-weight:normal; width:100%;
}

/*sub-level active*/
 ul.sf-vertical  li li.active a,  ul.sf-vertical li li.active span, 
 ul.sf-vertical  li li li.active a,  ul.sf-vertical li li li.active span,
 ul.sf-vertical  li li li li.active a,  ul.sf-vertical li li li li.active span,
 ul.sf-vertical  li li li li li.active a,  ul.sf-vertical li li li li li.active span
{
color:#fff;
}

/*sub-level normal*/
 ul.sf-vertical li li a,  ul.sf-vertical li li span, 
 .sf-vertical li.active  li a,  .sf-vertical li.active li span,
 .sf-vertical li li.active  li a,  .sf-vertical li li.active li span,
 .sf-vertical li li li.active  li a,  .sf-vertical li li li.active li span,
 .sf-vertical li li li li.active  li a,  .sf-vertical li li li li.active li span,
 .sf-vertical li:hover  li a,  .sf-vertical li:hover li span, 
 .sf-vertical li li:hover li a,  .sf-vertical li li:hover  li span,
 .sf-vertical li li li:hover li a,  .sf-vertical li li li:hover  li span, 
 .sf-vertical li li li li:hover li a,  .sf-vertical li li li li:hover  li span, 
 .sf-vertical li li li li li:hover li a,  .sf-vertical li li li li li:hover  li span  
{
color: #666;
font-weight:normal;
}

/*sub-level hovered*/
 .sf-vertical li li:hover a,  .sf-vertical li li:hover  span, 
 .sf-vertical li li li:hover a,  .sf-vertical li li li:hover  span,
 .sf-vertical li li li li:hover a,  .sf-vertical li li li li:hover  span, 
 .sf-vertical li li li li li:hover a,  .sf-vertical li li li li li:hover  span,      
 .sf-vertical li li li li li li:hover a,  .sf-vertical li li li li li li:hover  span      
{
color: #fff;
}


/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

#outercolumn-l .sf-vertical li li, #leftcolumn .sf-vertical li li {
	width:	240px;
}

/* 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:	100%; /* match ul width */
	top:	-20px;
	
}
.sf-vertical li:hover ul ul,
.sf-vertical li.sfHover ul ul{
	left:	100%; /* match ul width */

	
}

.sf-vertical .parent span.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			10px;
	top:			12px;
	width:			16px;
	height:			16px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url(../images/arrows-flyout.png) no-repeat 0 0; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

.sf-vertical .parent li span.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			26px;
	top:			10px; 
} 

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator, .sf-vertical .parent span.sf-sub-indicator { background-position: 0 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 li.parent span: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.pjmenu-top, .sf-vertical li.pjmenu-bottom
{border-bottom:0;}


/*Get Rid of BG for Sub levels ------------------*/
.sf-vertical li li, .sf-vertical li li span.separator {
	background: none;
}
.sf-vertical li li:hover, .sf-vertical li li.over, .sf-vertical li li.sfHover{
	background: none;
}
.sf-vertical li li.active a, .sf-vertical li li.on a, .sf-vertical li li.active span.separator{
	background: none;
}
.sf-vertical li:hover li, .sf-vertical li.over li, .sf-vertical li.sfHover li, .sf-vertical li:hover li{
	background: url(../images/submenu.png) 50% 50%; 
	width:240px; 
	padding:0;
}
.sf-vertical li.active li a, .sf-vertical li.sfHover li a, .sf-vertical li li.parent a {background:none;}


.sf-vertical ul li {background: url(../images/submenu.png) 50% 50%;padding:0;}
.sf-vertical ul {z-index: 3000;}
.sf-vertical ul li:hover {background: url(../images/submenu.png) 50% 25%;z-index: 3000;}
.sf-vertical ul li.pjmenu-top {background: url(../images/submenu2.png) no-repeat 0 0;height:27px;}
.sf-vertical ul li.pjmenu-bottom{background: url(../images/submenu.png) 50% 100%; height:27px;}
.sf-vertical ul li.active {
background: url(../images/submenu2.png) 50% 75%;}