#nav li ul, #nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items */
		margin: 0;
		float: left;
		display: block;
		padding: 0;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		top: 35px;
/*		left: 0;*/
margin-left: -10px;
		padding: 6px 0;
		background: #fff;
/*		height: 28px;
		width: 740px;*/
	}

/*
	#nav li.on ul {
		background: #f90;
	}
*/

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #fff;
	}

	#nav ul.on li a, #nav ul.off li a {
		color: #53432a;
		font-weight: normal;
		display: block;
		padding: 3px 0px 3px 10px;
		margin: 0;
	}

/*	#nav li.on a {
		color: #f90;
	}
*/

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		float: none; /*ie doesn't inherit the float*/
		clear:both;
		color: #f00;
		background: none;
		width: auto;
/*		margin-right: 15px;*/
	}

	#nav li.on ul li, #nav li.off ul li {clear:both;width:100%;}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background-color: #fff;
	}

	#nav li.on ul {
/*		display: block;*/
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
		color: #871140;
		text-decoration: underline;
	}











/*do the image replacement*/
	#nav li span {position: absolute;left:-9384px;}

	#nav1 a, #nav2 a, #nav3 a, #nav4 a, #nav5 a, #nav6 a {
		display: block;
		position: relative;
		height: 35px;
/*		background: none;*/ /*contains all hover states*/
	}

	#nav1 li a, #nav2 li a, #nav3 li a, #nav4 li a, #nav5 li a, #nav6 li a {
		display: block;
		position: relative;
		height: auto;
/*		background: url(http://www.alistapart.com/d/hybrid/bk-dropdownMap.gif) no-repeat;*/ /*contains all hover states*/
	}



/*first, put the initial states in place*/

	#nav1.on a, #nav1.off a {width:71px;background:url("/images/nav.gif") no-repeat 0 0;}
	#nav1 ul {
		width: 114px;
	}
	
	#nav2 a {width:75px;background:url("/images/nav.gif") no-repeat -71px 0;}

	#nav3.on a, #nav3.off a {width:103px;background:url("/images/nav.gif") no-repeat -146px 0;}
	#nav3 ul {
		width: 150px;
	}

	#nav4.on a, #nav4.off a {width:76px;background:url("/images/nav.gif") no-repeat -249px 0;}
	#nav4 ul {
		width: 114px;
	}

	#nav5.on a, #nav5.off a {width:70px;background:url("/images/nav.gif") no-repeat -325px 0;}
	#nav5 ul {
		width: 150px;
	}

	#nav6.on a, #nav6.off a {width:51px;background:url("/images/nav.gif") no-repeat -395px 0;}
	#nav6 ul {
		width: 150px;
	}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#nav6.on a {
 	background-position: 0 -35px;
 } /*add selectors for the other li's and background-positions*/

#group01 #nav1.off a,
#group02 #nav2.off a,
#group03 #nav4.off a,
#group04 #nav5.off a,
#group05 #nav6.off a {
 	background-position: 0 -35px;
 } /*add selectors for the other li's and background-positions*/



/*hover states*/
	#nav1 a:hover, #nav1:hover a, #nav1.over a {background-position: 0 -35px;}
	#nav2 a:hover, #nav2:hover a, #nav2.over a {background-position: -71px -35px;}
	#nav3 a:hover, #nav3:hover a, #nav3.over a {background-position: -146px -35px;}
	#nav4 a:hover, #nav4:hover a, #nav4.over a {background-position: -249px -35px;}
	#nav5 a:hover, #nav5:hover a, #nav5.over a {background-position: -325px -35px;}
	#nav6 a:hover, #nav6:hover a, #nav6.over a {background-position: -395px -35px;}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background-color: #fff;
	color: #000;
	font-size: 11px;
	font-family: Verdana, Sans-Serif;
	line-spacing: 125%;
	margin: 0;
	padding: 3px 0px 3px 10px;
}		

/*
#nav li.on ul a {
	background: #f90;
}
*/