/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {margin: 0px; padding:	0px; list-style: none;}
.sf-menu ul{position: absolute; top: -999em; /* left offset of submenus need to match (see below) */ }

.sf-menu ul li{width: 100%; height: 24px;} /* ACTION: need to change these to individual widths */
.sf-menu li:hover{visibility: inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li{float:	left; position:	relative;}
.sf-menu a{display: block;	position: relative;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul{left: 0px; top: 0px; z-index: 1000; background-position: 0px 0px; background-repeat: repeat; padding-top: 30px; padding-bottom: 6px;}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul{top: -999em;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {left: 0px; /* match ul width */ top: 0px; z-index: 10000;}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul{top:	-999em; z-index: 10000;}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul{left: 0px; /* match ul width */	top: 0px; z-index: 1000;}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/ color: #9f9fa7;}

.sf-menu li:hover, .sf-menu li.sfHover, /* leave this until IE effect fully understood */
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background: none; /* change for hover and active when other styling finished */
	outline:		0;
	color: #fff;
	
}