/*------------------------------------*\
	NAV
\*------------------------------------*/

#nav{
	list-style:none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px;
	/* Clear floats */
	float:left;
	position:absolute;
	z-index:100;
	}

#nav ul {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	
}


#nav li{
	
	float: left;
	text-transform:uppercase;
	text-decoration: none;
	position:relative;
}


#nav a{
	
	display:block;
	border-right: 1px solid #222222;
	border-bottom: 4px solid #79936f;
	padding: 27px 50px 26px 50px;
	color: #FFFFFF;
}


#nav a:hover{
	display:block;
	border-bottom: 4px solid #027d3c;
	color: #FFFFFF;
	text-decoration:none;
}

/*--- DROPDOWN ---*/

#nav ul{
	
	/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	
	 
	/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	
	list-style:none;
	position:absolute;
	
	left:-9999px; 
	/* Hide off-screen when not needed (this is more accessible than display:none;) */
	
}

#nav ul li{
	margin:0px;
	padding:0px 0px 0px 0px;
	
	/* Introducing a padding between the li and the a give the illusion spaced items */

	float:none;
	
}

#nav ul a{
	white-space:nowrap; 
	/* Stop text wrapping and creating multi-line dropdown items */
}

#nav li:hover ul{ 
/* Display the dropdown on hover */
	
	left:0; 
	/* Bring back on-screen when needed */
	
}

#nav li:hover a{ 
/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	color: #FFFFFF;
	text-decoration:none;
	border-bottom: 4px solid #027d3c;
}

#nav li:hover ul a{ 
/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	
	border-bottom: 1px solid #222222;
	border-right:none;
	border-left:none;
	border-top:none;
	padding: 7px 29px 5px 29px;
	color: #FFFFFF;
	background:#444444;
	text-decoration:none;
}

#nav li:hover ul li a:hover{ 
/* Here we define the most explicit hover states--what happens when you hover each individual link. */

	color: #FFFFFF;
	background: #333333;
}