/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav {
font-family:Tahoma, Verdana, Helvetica, sans-serif;
font-size:13px;
height:30px;
line-height:25px; 
background: url(../graphics/background.png);
list-style:none;
border-top:1px solid #666;
/*margin-bottom:10px;*/
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;*/ }

#nav li{
float:left;
/*margin-right:10px;*/
position:relative; }

#nav a{
height:30px;
background:url(../graphics/divide.png) no-repeat right top;
display:block;
padding:0 20px;
color:#fff;
text-decoration:none; }

#nav a:hover{
color:#fff;
/*background:#666 url(../graphics/divide.png) no-repeat right top;*/
height:29px;
border-bottom:1px solid #809980; }

/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* 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). */
background:rgba(255,255,255,0); /* 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{
/*padding-top:1px;  Introducing a padding between the li and the a give the illusion spaced items */
float:none; }

#nav ul a{
font-size:12px;
border-bottom:1px solid #809980;
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. */
background:#3b623b;
text-decoration:none;
border-bottom:1px solid #333;
height:29px;
color:#fff; }

#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. */
text-decoration:none;
color:#fff; }

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