/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
#mainNav {
	width:	100%;
}
#mainNav li{
	width:100%;
}
#mainNav #navAtLevel2 li{
	width:100%;
}
#navAtLevel2 li a{
	font-size:13px;
	color:#fff;
	font-weight:bold;
	width:90%;
	border-bottom:1px solid #fff;
	margin-left:10px;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
#mainNav li:hover ul,
#mainNav li.sfHover ul {
	left:	94%; /* match ul width */
	top:	0;
	margin-left:15px;
	/*background:#D43B49;*/
	background:#3a5b7b;
	opacity:0.9;
	filter:alpha(opacity=90);
}

/*** alter arrow directions ***/
#mainNav .sf-sub-indicator { background-position: center right; } /* IE6 gets solid image only */
#mainNav a > .sf-sub-indicator { background-position: center right; } /* use translucent arrow for modern browsers*/

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

#mainNav li.lastMenuItem a{border-bottom:none;}
/* #navAtLevel2 #ajP1299 a{border-bottom:none;}
#navAtLevel2 #ajP2216 a{border-bottom:none;}
#navAtLevel2 #ajP2419 a{border-bottom:none;} */