/*
====================================================================================================
=== MAIN MENU ======================================================================================
====================================================================================================

======================
=== GENERAL STYLES ===
======================
*/
#mainMenu{ /* The menu container div (used to set the background for the menu, etc.) */
	padding:			0; /* Be careful when adding lateral (horizontal) padding to here - seems to throw the submenus slightly off line in IE (inc 7) */
	background: 		#6E747B;
	z-index:			100;
}
ul#topmenu{				
	position:			relative;
	width:				975px; /* This will probably need to be change on a per site basis, but 975px is a fairly standard width */
	height:				2.5em;
	margin: 			0;
	padding: 			0;
	font-size:			1em;
	background: 		#6E747B;
	z-index:			100;
}

/* 
=======================================
=== PARENT (TOP LEVEL) MENU OPTIONS ===
=======================================
*/
ul#topmenu li{			
	display:			inline;
	margin: 			0;
	padding: 			0;
	list-style: 		none;
	z-index:			100;
}
ul#topmenu li.firstItem{	
}
ul#topmenu li.firstItem a.starter{
}
ul#topmenu li.lastItem{ /* Allows you to apply styles to the last menu option (i.e. turn off a border, add extra padding or margin, etc.) */
}
ul#topmenu li.lastItem a.starter{
}
/* Commented out 2007-10-29 (PJB)
ul#topmenu li.ShowLoggedIn{
	position:			absolute;
	top:				27%;
	right:				10px;
	font-weight:		normal;
	color:				#fff;
	text-decoration:	none;
}*/
#mainMenu ul#topmenu a.starter, 
#mainMenu ul#topmenu .ShowDateTime span,
#mainMenu ul#topmenu li.ShowLoggedIn{	/* This rule applies to the top level menu items (links) */
	position:			relative; /* This rule is solely for the benefit of IE, it forces IE to treat this as a block, therefore applying vertical padding, etc. */
	top:				0.5em;
	margin: 			0;
	padding: 			0.6em 8px 0.6em 12px; /* Make sure the left padding is 4px greater than the right padding (if you want the text to be central) */
	font-weight:		bold;
	color:				#fff;
	text-decoration:	none;
	border-right:		1px solid #fff;
	z-index:			100;
}
#mainMenu ul#topmenu a.starter:hover{ /* Hover state for the top level menu items */
	color: 				#fff;
	background: 		#4A4F54;
}
ul#topmenu em{ /* By default, em is set normal.  If you want to highlight the accesskeys (with an underline for example) you can create a new style for em in the site css */ 
	font-style:			normal;
}

/* 
===============================
=== CHILD (SUB) MENU STYLES === 
===============================
*/

ul#topmenu ul{ /* This applies styling to any ul withinh the main (#topmenu) ul.  This include 2nd (.subMenu), 3rd, etc. level menus */
	width:				12em; /* Sets a generic width on all of the submenus.  If you want to set individual widths, do so using the specific IDs of each ul */
	margin-top:			-2px;
	margin-left:		-1px;
	padding: 			0;
	z-index:			200;
}

ul.subMenu{				
	position: 			absolute;
	text-align: 		left;
	visibility: 		hidden;
	z-index: 			100;
}
ul.subMenu li{
	width:				100%;
}
ul.subMenu li a{
	display:			block;
	margin-top:			-2px;
	margin-bottom:		0;
	padding:			0.5em 5px;
	font-size: 			1em;
	color: 				#222;
	text-decoration: 	none;
	border-top:			1px solid #fff;
	border-bottom:		1px solid #ADB3BA;
	background: 		#CCD3DB;
	z-index:			100;
}
ul.subMenu li a:hover{ /* Hover state for submenu items  */
	color: 				#222;
	background: 		#B5BCC4;
}


/*
====================================================================================================
=== RANDOM STYLES ADDED BY TECHIES OR SIMILAR BEASTS OF THE INFERNAL PIT ===========================
====================================================================================================
*/