/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:				180px;
	padding: 			5px 0;
}
/* 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 {
	background-color:  	transparent;
	margin-top: 		-1px;
	width:				225px;
	left:				180px; /* match ul width */
	top:				0;	
}

.sf-vertical li:hover ul li,
.sf-vertical li.sfHover ul li{
	border-top:			1px solid #dae7ed;
	height: 			15px;
	background-color: 	#f7f7f7;
	width: 				233px;
}

.sf-vertical li:hover ul li a,
.sf-vertical li.sfHover ul li a{
	padding: 			2px 0;
}