#menu {width: 190px; /* set width of menu */ margin:0px; float:left;}
#menu ul { /* remove bullets and list indents */ list-style: none; margin: 0; padding: 0;}
#menu a {display: block; margin: 0;}
#menu a.ln {
	text-decoration:none; 
	padding:6px 5px 6px 5px; 
	border-bottom:#447493 solid 0px;
	color:#ffffff;
	font-size:12px;
}
#menu a.ln:hover {
	padding:6px 5px 6px 5px;
	color:#000000; 
	background-color:#FFFF99;
	text-decoration:none; 
}
#menu a.ln_default {
	border-right:0px;
	border-bottom: 1px solid color:#333333;
	border-top: 1px solid color:#666666;
	color:#000000; 
	background-color:#FFFFCC;
	text-decoration:none;
	padding:6px 5px 6px 5px;
	font-size:12px;	
}
#menu a.ln_default:hover {
	border-top:#447493 solid 1px;
	color:#000000; 
	background-color:#FFFFCC;
	text-decoration:none;
	padding:6px 5px 6px 5px;
}
#menu a.ln2 {
	background-color:#FFFF99;
	color:#000000;
	text-decoration:none; 
	padding:5px 0px 6px 15px;
	margin:0px 0px 0px 0px;	
	border-bottom:#FFBF99 solid 1px;
	border-left:#FFFF99 solid 0px;
	border-right:#447493 solid 1px;	
	font-weight:bold;
	font-size:12px;	
}
#menu a.ln2:hover {
	border-right:#447493 solid 1px;
	background-color:#FFFFCC;
	color:#000000;
	text-decoration:none; 
	padding:5px 5px 6px 15px;	
	border-left-color:#FFFFCC;
}

#menu li:hover > a.ln {
	padding:5px 5px 5px 5px;
	background-color:#FFFF99;
	color:#000000;
	border-top:#447493 solid 1px;
	border-bottom:#FFBF99 solid 1px;
}
#menu li:hover > a.ln_default {
	padding:5px 5px 5px 5px;
	background-color:#FFFFCC;
	color:#000000;
	border-top:#447493 solid 1px;
	border-bottom:#FFBF99 solid 1px;
}

#menu li li:hover > a.ln2 {
	border-right:0px;
}


#menu li ul ul {
	border-top:#447493 solid 1px;
	border-bottom:#447493 solid 1px;
}


#menu a.ln2_default {
	border-right:0px;
	border-bottom: 1px solid color:#333333;
	border-top: 1px solid color:#666666;
	color:#000000; 
	background-color:#FFFFCC;
	text-decoration:none;
	padding:6px 5px 6px 15px;
}
#menu a.ln2_default:hover {
	color:#000000; 
	background-color:#FFFFCC;
	text-decoration:none; 
}

#menu a.ln2_top {border-width: 1px 1px 1px 0px;}

#menu a.ln3 {
	background-color:#FFFF99;
	color:#000000;
	text-decoration:none; 
	padding:5px 5px 5px 15px;
	margin:0px 0px 0px 0px;	
	border-bottom:#FFBF99 solid 1px;
	border-left:#447493 solid 0px;
	border-right:#447493 solid 1px;	
	font-weight:bold;
	font-size:12px;	
}
#menu a.ln3:hover {
	background-color:#FFFFCC;
	color:#000000;
	text-decoration:none; 
	padding:5px 5px 5px 15px;	
}
#menu a.ln3_default {
	border-right:#447493 solid 1px;	
	border-bottom: 1px solid color:#333333;
	border-top: 1px solid color:#666666;
	color:#000000; 
	background-color:#FFFFCC;
	text-decoration:none;
	padding:6px 5px 6px 5px;
	font-size:12px;	
}
#menu a.ln3_default:hover {
	color:#000000; 
	background-color:#FFFFCC;
	text-decoration:none; 
	border-right:#447493 solid 1px;
}

#menu a.ln3_top {border-width: 1px 1px 1px 0px;}

/*

/**************** code below is only for Right navigation ****************/
#menu li { position: relative;} /* make the list elements a containing block for the nested lists */
#menu ul ul ul { position: absolute; top: 0; left: 100%; width: 100%; } /* to position them to the right of their containing block */ /* width is based on the containing block */
div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
/**************** end: code is only for Right navigation ****************/

#topnav {height:20px; position:relative; z-index:100;}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:"Trebuchet MS", "Lucida Grande", Arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:20px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.district {width:123px; background:url(http://www.whitnall.com/custom/images/topmenu_over_district.gif) no-repeat;}
.menu li.schools {width:124px; background:url(http://www.whitnall.com/custom/images/topmenu_over_schools.gif) no-repeat;}
.menu li.students {width:163px; background:url(http://www.whitnall.com/custom/images/topmenu_over_students.gif) no-repeat;}
.menu li.staff {width:135px; background:url(http://www.whitnall.com/custom/images/topmenu_over_staff.gif) no-repeat;}
.menu li.parents {width:154px; background:url(http://www.whitnall.com/custom/images/topmenu_over_parents.gif) no-repeat;}
.menu li.community {width:181px; background:url(http://www.whitnall.com/custom/images/topmenu_over_community.gif) no-repeat;}

/* set up the normal unhovered images in the links */
.menu li a#district {width:123px; background:url(http://www.whitnall.com/custom/images/topmenu_district.gif) no-repeat;}
.menu li a#schools {width:124px; background:url(http://www.whitnall.com/custom/images/topmenu_schools.gif) no-repeat;}
.menu li a#students {width:163px; background:url(http://www.whitnall.com/custom/images/topmenu_students.gif) no-repeat;}
.menu li a#staff {width:135px; background:url(http://www.whitnall.com/custom/images/topmenu_staff.gif) no-repeat;}
.menu li a#parents {width:154px; background:url(http://www.whitnall.com/custom/images/topmenu_parents.gif) no-repeat;}
.menu li a#community {width:181px; background:url(http://www.whitnall.com/custom/images/topmenu_community.gif) no-repeat;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover {position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#district:hover, .menu li:hover a#district,
.menu li a#schools:hover, .menu li:hover a#schools,
.menu li a#students:hover, .menu li:hover a#students,
.menu li a#staff:hover, .menu li:hover a#staff,
.menu li a#parents:hover, .menu li:hover a#parents,
.menu li a#community:hover, .menu li:hover a#community {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul {left:0; top:20px; background: #29698C; padding:0; border:0px solid #000000; border-width:0px 1px 1px 1px; width:179px; height:auto;}
.menu :hover ul li {display:block; position:relative; float:left; width:179px;}
.menu :hover ul li a {display:block; font-size:9pt; width:169px; padding:0 5px 0 5px; color:#FFFFFF; text-decoration:none; border:0px solid #447493; border-width:0px 0px 1px 0px;}
.menu :hover ul li a:hover {background:#FFFFAB; color:#29698C;}