/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	16.5em;
}
/* 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:	20.5em; /* match ul width */
	height:10.5em;
	position:absolute;
	top:	-0.3em;

}

.sf-vertical li:hover ul.l1,
.sf-vertical li.sfHover ul.l1 {
background:url(../images/design/hover_menu_bkg_l1.png) no-repeat;
}

.sf-vertical li:hover ul.l2,
.sf-vertical li.sfHover ul.l2 {
background:url(../images/design/hover_menu_bkg_l2.png) no-repeat;
}
.sf-vertical li:hover ul.l3,
.sf-vertical li.sfHover ul.l3 {
background:url(../images/design/hover_menu_bkg_l3.png) no-repeat;
}
.sf-vertical li:hover ul.l4,
.sf-vertical li.sfHover ul.l4 {
background:url(../images/design/hover_menu_bkg_l4.png) no-repeat;
}
.sf-vertical li:hover ul.l5,
.sf-vertical li.sfHover ul.l5 {
background:url(../images/design/hover_menu_bkg_l5.png) no-repeat;
}