/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	font-size:		14px; 
	line-height: 	16px; 
	font-family: 	Trebuchet MS, Helvetica, Arial, Sans-seriff;
	text-align: 	left;
}

.sf-menu li ul li a {
	font-size: 		14px; 
	padding: 		.6em .6em .6em .6em;
}

/* REMOVES SPACING AROUND IMAGES */
.sf-menu a {
	border-left:	0px;
	border-top:		0px;
	padding: 		0px;
	margin: 		0px;
	text-decoration:none;
}

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

/* CHANGES PADDING OF SUB MENUS */
.sf-menu li li {
	top:			-1px;
	left:			-1px;
	background:		#E8F2F2;
	border-bottom:	1px solid #fff;
	padding: 		4px;
	width:			180px;
}

/* CHANGES 2ND LEVEL SUBS */
.sf-menu li li li {
	left: 			48px;
	top:			4px;
	background:		#E8F2F2;
}

/* 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:	242px; /* match ul width */
	top:	0;
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { /* hover highlight */
	background:		#D5E9EA;
	outline:		0;
}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:			241px;
	border-left:	1px solid #fff;
	border-right:	1px solid #fff;
	border-top:	1px solid #fff;
}