#nav {
	font-family: Arial;
	font-size: 12px;
	margin: 0 0 0 8px;
	padding: 0;
	z-index: 100;
}

#nav :link {
	color: #fff;
	/*display: block;*/
	text-decoration: none;
}

#nav :visited {
	color: #fff;
	text-decoration: none;
}

#nav a:hover {
	color: #ccc;
}

#nav :link, #nav :visited {
	text-decoration: none;
	display: block;
}

#nav img {
	border: none;
}

#nav li {
	float: left;	
	list-style: none;
	position: relative;
	color: #fff;
	margin:0;
}

#nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	padding: 5px 10px 5px 0;
	margin: 0;
	background-color: #a70101;
	z-index: 100;
	/* IE has to have width set to induce wrapping to a second line*/
}

#nav li ul li a {
	padding: 2px 0 2px 0;
	display: block;
	width: 10em;
	color: #fff;
	margin:2px 0 0 15px;
}

#nav div {
	height: 30px;
}

#nav div a{
	height: 30px;
	color: #fff;
}

#nav li:hover ul, #nav li.over ul {
	display: block;
}

.hidden {
	visibility: hidden;
}

/* Item specific css */
#classes {
	background-image: url(img/button_classes.gif);
	width: 79px;
}
#classes:hover div, #classes.over div {
	background-image: url(img/button_classes-over.gif);
}
#classes-pg #classes {
	background-image: url(img/button_classes-on.gif);
}


#boysprogram {
	background-image: url(img/button_boysprogram.gif);
	width: 138px;
}
#boysprogram:hover div, #boysprogram.over div {
	background-image: url(img/button_boysprogram-over.gif);
}
#boysprogram-pg #boysprogram {
	background-image: url(img/button_boysprogram-on.gif);
}

#summerprogram {
	background-image: url(img/button_summerprogram.gif);
	width: 159px;
}
#summerprogram:hover div, #summerprogram.over div {
	background-image: url(img/button_summerprogram-over.gif);
}
#summerprogram-pg #summerprogram {
	background-image: url(img/button_summerprogram-on.gif);
}

#calendar {
	background-image: url(img/button_calendar.gif);
	width: 95px;
}
#calendar:hover div, #calendar.over div {
	background-image: url(img/button_calendar-over.gif);
}
#calendar-pg #calendar {
	background-image: url(img/button_calendar-on.gif);
}


#registration {
	background-image: url(img/button_registration.gif);
	width: 121px;
}
#registration:hover div, #registration.over div {
	background-image: url(img/button_registration-over.gif);
}
#registration-pg #registration {
	background-image: url(img/button_registration-on.gif);
}

#about {
	background-image: url(img/button_about.gif);
	width: 106px;
}
#about:hover div, #about.over div {
	background-image: url(img/button_about-over.gif);
}
#about-pg #about {
	background-image: url(img/button_about-on.gif);
}


#topnav {
	float:right;
	font-family: Arial;
	font-size: 12px;
	margin:23px 0 0 18px;
	padding: 0;
	z-index: 100;
	height:15px;
}

#topnav :link {
	color: #fff;
	/*display: block;*/
	text-decoration: none;
}

#topnav :visited {
	color: #fff;
	text-decoration: none;
}

#topnav a:hover {
	color: #ccc;
}

#topnav :link, #topnav :visited {
	text-decoration: none;
	display: block;
}

#topnav img {
	border: none;
}

#topnav li {
	float: left;	
	list-style: none;
	position: relative;
	color: #fff;
	margin:0;
}

#topnav li ul {
	display: none;
	position: absolute;
	top: 100%;
	padding: 5px 10px 5px 0;
	margin: 0;
	background-color: #a70101;
	z-index: 100;
	/* IE has to have width set to induce wrapping to a second line*/
}

#topnav li ul li a {
	padding: 2px 0 2px 0;
	display: block;
	width: 10em;
	color: #fff;
	margin:2px 0 0 15px;
}

#topnav div {
	height: 15px;
}

#topnav div a{
	height: 15px;
	color: #fff;
}

#topnav li:hover ul, #topnav li.over ul {
	display: block;
}

.hidden {
	visibility: hidden;
}

/* Item specific css */
#homelink {
	background-image: url(img/topbutton_home.gif);
	width: 58px;
}
#homelink:hover div, #homelink.over div {
	background-image: url(img/topbutton_home-over.gif);
}
#home-pg #homelink {
	background-image: url(img/topbutton_home.gif);
}


#contact {
	background-image: url(img/topbutton_contact.gif);
	width: 95px;
}
#contact:hover div, #contact.over div {
	background-image: url(img/topbutton_contact-over.gif);
}
#contact-pg #contact {
	background-image: url(img/topbutton_contact.gif);
}



