@charset "UTF-8";
/* CSS Document */

#divNav {
	margin: 0;
	padding: 0;
	height: 63px;
	width: 420px;
	background-image: url(../images/s-nav-bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	position: relative;
	}

	#nav {
	position: relative;
	top: 0px;
	height: 63px;
	width: 420px;
	}

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

	#nav a {
	text-decoration: none;
	margin-left: 0px;
	padding-left: 0px;
	}

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

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
	position: absolute;
	top: 28px;
	left: 0;
	padding-top: 5px;
	height: 20px;
	width: 420px;
	padding-left: 15px;
	}

	#nav li.on ul {
	}

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

	#nav li a {
	font-weight: bold;
	display: block;
	padding: 0;
	}

	#nav li.on a {
	}

	#nav li.on ul a, #nav li.off ul a {
	border: 0;
	float: left;
	width: auto;
	margin-right: 18px;
	}

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

	#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:#FFFFFF;
	}

	/*do the image replacement*/

	#nav li span {
		position: absolute;
		left: -9384px;
	}

	#liAbout a, #liPrograms a, #liTestimonials a, #liContact a {
	display: block;
	position: relative;
	height: 28px; /*contains all hover states*/
	background-image: url(../images/main-nav.jpg);
	background-repeat: no-repeat;
	outline: none;
	}

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

#liAbout a {
	background-position: 0 0;
	width: 88px;
}

#liPrograms a {
	background-position: -88px 0;
	width: 114px;
}

#liTestimonials a {
	background-position: -202px 0;
	width: 106px;
}

#liContact a {
	background-position: -308px 0;
	width: 112px;
}


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

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

/*hover states*/

#liAbout a:hover, #liAbout:hover a, #liAbout.over a {
	background-position: 0 -28px;
}

#liPrograms a:hover, #liPrograms:hover a, #liPrograms.over a {
	background-position: -88px -28px;
}

#liTestimonials a:hover, #liTestimonials:hover a, #liTestimonials.over a {
	background-position: -202px -28px;
}

#liContact a:hover, #liContact:hover a, #liContact.over a {
	background-position: -308px -28px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	color: #D6D6D6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-image: url(images/clear.gif);
	font-weight: normal;
}		

#nav li.on ul a {
}