/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu {line-height:13px;} 
.sf-menu ul {position:absolute;top:-9999em;width:287px; /* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {float:left;position:relative;}
.sf-menu a {display:block;position:relative;padding:0 4px 0 5px;}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {left:0;top:0; /* match top ul list item height */z-index:3000;}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top:-9999em;}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:144px; /* match ul width */top:0;}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-9999em;}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left:144px; /* match ul width */top:0;}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {width:143px;}
.sf-vertical li {background:transparent url(../img/black_bg.png) 0px 0px repeat; margin-bottom:1px;}
.sf-vertical li ul, .sf-vertical li ul li {width:287px;}
.sf-vertical li ul { width:287px;}
/* 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: 144px; /* match ul width */top:0;}
.sf-vertical li ul li:hover ul, .sf-vertical li ul li.sfHover ul {left:288px;}