.left-nav .sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 15em;
	z-index: 99;
}

.left-nav .sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.left-nav .sf-menu a.sf-with-ul {
	background:		url('../images/arrows-single-333333.png') no-repeat right center;
}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.left-nav .sf-vertical, .sf-vertical li {
	width:	100%;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.left-nav .sf-vertical li:hover ul,
.left-nav .sf-vertical li.sfHover ul {
	left:	15em; /* match ul width */
	top:	0;
}



/*===skins===*/

.left-nav .sf-menu li {
	background: #fff;
	border-bottom:1px solid #f5f5f5;
}
.left-nav .sf-menu li li {
	background: #fff;
}
.left-nav .sf-menu li li li {
	background: #fff;
}
.left-nav .sf-menu li li li li {
	background: #fff;
}

.left-nav .sf-menu.sf-vertical li:hover,
.left-nav .sf-menu.sf-vertical li.sfHover {
	background: #f5f5f5;
}

#left-menu .sf-menu {
	margin-bottom:0;
}