/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	17.85em;
	background-image:none;
}
.sf-vertical li a{
	display:block;
	height:40px;
	line-height:40px;
	padding-top:0;
	padding-bottom:0;
	color:#95009A;
	background-color:#fff;
	border-bottom:1px dotted #95009A;
}
.sf-vertical li a:hover,.sf-vertical #nav_sel a{
	border-bottom:1px dotted #95009A;
	color:#fff;
	background-color:		#CB2CD1;
	background-image:none;
}
.sf-vertical li li,.sf-vertical #nav_sel li li a,.sf-vertical #nav_sel li li li a{
	background-color:		#CB2CD1!important;
}
/* 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:	17.9em; /* match ul width */
	top:	0;
}
.sf-vertical li:hover ul li a{
	background-color:#CB2CD1;
}
.sf-vertical li:hover ul li a:hover{
	background-color:#666;
}
/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background:url(../images/arrows-black.png) no-repeat;background-position: 0px 0px;} /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background:url(../images/arrows-black.png) no-repeat;background-position: 0px 0px; } /* 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:url(../images/arrows-ffffff.png) no-repeat;background-position: -10px 0; /* arrow hovers for modern browsers*/
}