#nav, #nav ul
{
margin: 0; 
padding: 0; 
list-style-type: none; 
list-style-image: none; 
list-style-position: outside; 
line-height: 1;
}
#nav a { 
display: block; 
/*xwidth: auto; */
width:187px;
padding:5px;
text-decoration:none;
color:#777777;
/*padding:.2em .5em;*/
}

#nav li a:hover{
text-decoration:underline;
}

#nav li ul li a:hover,
#nav a:active {
background:;
color:#000;
text-decoration:none;
z-index:999;
}

#nav li { 
position:relative; /*added this because
absolute must be in relation to a relatively 
positioned block*/
float: left; 
width: auto; 
background-color:#E6E3D2;
height:20px;
width:187px;
text-align:center;
padding:4px 5px 5px 5px;
margin-right:5px;
/*border:1px solid #CCCCCC;*/
}
#nav li ul { 
background:  none repeat scroll 0%; 
position: absolute; 
width: 207px; 
left: -9999px; 
/*positions the dropdown horizontally 
off the page using absolute positioning until hovered - 
I added a bottom:1em; to the :hover state below*/
}

#nav li ul ul {
	margin: -1em 0 0 10em;
}


#nav li ul li{ 
background-color:#E6E3D2;
color: #646464; 
width:189px;
font-weight:bold;
text-align:center;
padding-top:5px;
padding-bottom:5px;
background-image:url(images/drop_down_bar.gif);
background-position:center bottom;
background-repeat:no-repeat;
text-transform:uppercase;
font-size:11px;
}


#nav li:hover ul, 
#nav li.sfhover ul { 
left:-1px;
bottom:25px;
z-index:999;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
	bottom:1px;

}


#nav li li:hover ul, #nav li li.sfhover ul {
	left: 40px;
bottom:1px;
}

#content { 
clear: left; 
color: rgb(204, 204, 204); 
}

#nav_product_guide
{
width:200px;
height:30px;
background-image:url(images/nav_product_guide.gif);
background-repeat:no-repeat;
}