#menucontainer
{
	margin: 0 auto;
	background-color:#ffffff;
	width:725px;
}
#mainmenu 
{
	/*Styles for the main menu; items that will show up across the top of the page.*/
	height:21px;
	/*border-top:1px solid #FFFFFF;*/     /*Not sure I like these, but they put a white 1px border on the top and bottom*/
	/*border-bottom:1px solid #FFFFFF;*/  /*of the main menu, which helps set it off from the red border set for menudiv.*/
	margin:0px; /*Set the margin to 0px so the list snugs to the left side of the menudiv rather than including the
	            /*typical indent that goes along with a div.*/
	width:100%;
	list-style:none; /* Setting this to none removes all bullet points, lettering, etc. from our lists.*/
	font:normal 8pt verdana, arial, helvetica;
}
#mainmenu li 
{
	/* Styles for the main menu's list items.*/
	margin:0;
	padding:0;
	display:block;
	float:left; /*Setting float to left makes the menu horizontal across the page.*/
	position:relative; /*Relative positioned elements serve as containing blocks.  We want our submenus
	                     contained under their mainmenus.*/
	width:145px; /*Make each main menu list item this wide.*/
}
#mainmenu li a:link, 
#mainmenu li a:visited 
{
	/*Styles for links in the main menu; make sure visited links are styled the same way.
	Implicit in styling this way is that our main menu items must be <a> elements and you must
	set the href attribute.  If you have no link to use, use #, i.e., <a href="#">My Menu Item</a>.*/
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#1E90FF;
	color:#ffffff;
	width:145px;
	height:13px;
}            
#mainmenu li:hover a, 
#mainmenu li a:hover, 
#mainmenu li a:active 
{
	/*Styles for menu items that the cursor is currently hovering over.  Mainly, when the cursor is over
	a menu item, change the background color and put a 1px white border on either side to help set it off.*/
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#00CED1;
	color:#ffffff;
	width:145px; /*Shorten the width by 2px to allow for the border lines below.*/
	height:13px;
	/*border-left:1px solid #ffffff;*/
	/*border-right:1px solid #ffffff;*/
}

/*Styles to handle the submenus.*/
#mainmenu li ul.submenu 
{
	/*Styles for our submenus.  A submenu is created by making a <ul/> element that is a child of one
	of our mainmenu's <li/> elements.*/
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none; /*Do not initially display submenus.*/
	background:#ffffff;
	width:143px;
	position:absolute;
	top:21px;
	left:-1px;
	border:1px solid #1E90FF;
	border-top:none;
}
#mainmenu li:hover ul.submenu 
{
	/*This style is what shows the submenu when the mouse is hovering over the main menu.*/
	display:block;
}
#mainmenu li ul.submenu li 
{
	/*Set the widths for the submenu menu items.*/
	width:143px;
	clear:left;
	width:143px;
}
#mainmenu li ul.submenu li a:link, 
#mainmenu li ul.submenu li a:visited 
{
	/*Styles for links in the submenus; make sure visited links are styled the same way.
	Implicit in styling this way is that our submenu items must be <a> elements and you must
	set the href attribute.  If you have no link to use, use #, i.e., <a href="#">My Menu Item</a>.*/
	clear:left;
	background:#1E90FF;
	padding:4px 0;
	width:143px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:1000;
}
#mainmenu li ul.submenu li:hover a, 
#mainmenu li ul.submenu li a:active, 
#mainmenu li ul.submenu li a:hover 
{
	/*These styles define what happens when submenu items are hovered over.*/
	clear:left;
	background:#00CED1;
	padding:4px 0;
	width:143px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:1000;
}

/*Sub submenu handling.  These styles handle the display of menus
that are the children of submenus.  The class of the <ul> element
for these menus should be se to subsubmenu.*/
#mainmenu li ul.submenu li ul.subsubmenu 
{
	/*Styles for the menu items on sub submenus.*/
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:143px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #1E90FF;
	border-left:1px solid #1E90FF;
	background:#ffffff;
	z-index:900;
}
#mainmenu li ul.submenu li:hover ul.subsubmenu 
{
	/*Show a sub submenu when it's parent is hovered over.*/
	display:block;
}
#mainmenu li ul.submenu li ul.subsubmenu li a:link, 
#mainmenu li ul.submenu li ul.subsubmenu li a:visited 
{
	/* Set the background color for subsubmenu elements.*/
	background:#1E90FF;
}
#mainmenu li ul.submenu li ul.subsubmenu li:hover a, 
#mainmenu li ul.submenu li ul.subsubmenu li a:hover, 
#mainmenu li ul.submenu li ul.subsubmenu li a:active 
{
	/*Set the background color for subsubmenu elements that are currently being hovered over.
	As with the main and submenus, these elements must be anchor (<a>) elements.*/
	background:#00CED1;
}

/* Styles for the >> character that indicates a subsubmenu.*/
#mainmenu li ul.submenu li a span 
{
	/* Style for the span element in submenus.  Really only used to style the >> character that
	shows that there is a subsubmenu.*/
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#00CED1;
}
#mainmenu li ul.submenu li:hover a span, 
#mainmenu li ul.submenu li a:hover span 
{
	/* Styles for the span element in submenus when the submenu element is being hovered over.*/
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#ffffff;
}

body { behavior:url("/beta/csshover.htc"); }