/* */
#nav
{	
	width: 100%;
	height: 31px;

	background-image: url(images/nav_backer.gif);
	
	border: none;
	margin: 0px;
	padding: 0px;	
}

/* */
#nav a
{
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif; 
	font-size: 8pt; 
	line-height: 12pt;
	color: #FFFFFF;
	text-decoration: none;
	text-transform:uppercase;
}

/* */
#nav .groups
{
	width: 100%;
	height: inherit;

	display: block;	
	list-style-type: none;

	border: none;
	margin: 0px;			
	padding: 0px;	
}

/* */
#nav .groups .group
{
	height: inherit;
	float: left;

	border: none;
	margin: 0px 0px 0px 16px;			
	padding: 0px;	
		
	position: relative;		
	
	behavior: expression(
	this.onmouseover = new Function("this.className += ' hover'"),
	this.onmouseout = new Function("this.className = this.className.replace(' hover', '')"),
	this.style.behavior=null);
}

/* */
#nav .group .onstate
{
	display: none;
}

/* */
#nav .group .offstate
{	
	display: inline;
}

/* */
#nav .items .item a
{	
	display: block;
	_width: 100%; /* ie6 hack to adjust the width of the anchor tag. */
	padding: 2px 0px 0px 6px;			
	margin: 0px;
}

/* */
#nav .items
{
	display: none;
	list-style-type: none;
		
	background-color: #000000;
	opacity:.85;
	-moz-opacity: 0.85;
	filter: alpha(opacity=85);	
		
	border: #7d7d7d 1px solid;
	margin: 0px;
	padding: 0px;	
		
	position: absolute;
}

/* */
#nav .items .item
{
	width: 150px;	
		
	border: none;
	margin: 0px;			
	padding: 0px;
	
	behavior: expression(
	this.onmouseover = new Function("this.className += ' hover'"),
	this.onmouseout = new Function("this.className = this.className.replace(' hover', '')"),
	this.style.behavior=null);
}

/* Event Driven Styles Here */

#nav .items .item:hover a
, #nav .items li.hover a
{
	background-color: #212121;	
}

#nav .group:hover .onstate
,#nav li.hover .onstate
{
	display: inline;
}

#nav .group:hover .offstate
,#nav li.hover .offstate
{
	display: none;
}

#nav .group:hover .items
,#nav li.hover .items 
{
	display: block;
	top: 100%;
	_top: 102%; /* ie6 hack to adjust location of rollover menu*/
	left: 0%;
	
	behavior: expression(
	this.onmouseover = new Function("this.className += ' hover'"),
	this.onmouseout = new Function("this.className = this.className.replace(' hover', '')"),
	this.style.behavior=null);
}

/* **************************** */






















