/*** ESSENTIAL STYLES ***/
.nav, .nav * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.nav {
	line-height:	9px;
}
.nav ul {
	position:		absolute;
	top:			-999em;
	width:			180px; /* left offset of submenus need to match (see below) */
}
.nav ul li {
	width:			100%;
}
.nav li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
	position:		relative;
	z-index:		10;
}
.nav li {
	position:		relative;
}

#nav li a {
	display:block;
	height:100%;
	text-decoration:none;
	width:			155px;
	padding:		5px 5px 5px 20px;
}

#nav li a:hover, .nav li:hover a, .nav li.sfHover a {
	display:block;
	height:100%;
	text-decoration:none;
	color: #ffffff;
	padding:		5px 5px 5px 20px;
}

.nav li:hover ul,
.nav li.sfHover ul {
	left:			180px;
	top:			0; /* match top ul list item height */
	z-index:		99;
	background:		#51316f;
	border-top:		1px solid #ffffff;
	border-right:	1px solid #ffffff;
	border-bottom:	1px solid #ffffff;
	width:			400px;
}


/*** adding sf-vertical in addition to nav creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	180px;
}
/* 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:	180px; /* match ul width */
	top:	-1px;
	margin:			0;
	padding:		0;
}


/*** ORIGINAL SKIN ***/
.nav li:hover, .nav li.sfHover,
.nav a:focus, .nav a:hover, .nav a:active {
	z-index:10;
	background:#51316f;
	color: #ffffff;
}

.nav li li {
	text-transform:none;
	width:180px;
	border:0;
	float:left;
}

#nav li li a {
	width:180px;
	color:#ffffff;
	background:none;
}

#nav li li a:hover, .nav li.sfHover li a:hover {
	width:180px;
	color:#FFD51F;
	background:none;
}

.nav li li:hover, .nav li li.sfHover{
	background: #51316f;
	border:0;
	color:#FFD51F;
	width:180px;
}