/* NOTE: This CSS file is solely for controlling the dropdown menus, not the 'Primary' menu (ie. Home | Introduction |, etc.)  The CSS for that is in the main CSS file.  */

#mainMenu { /* The main definition of the menu area, colours and font. */
	margin: 		0px 0px 0px 0px;
	padding: 		0px; 
	position: 		relative;
	width:			936px;
}
html>body #mainMenu {
	margin: 		0px 0px -2px 2px;
}
#menuList {
	margin: 		0px 0px 0px 0px;
	padding:		0px 0px 0px 0px;
}

#menuList ul { /* Controls the basic area for the submenus (to change the width, see final section of this CSS) */
	padding: 		0px;
	margin: 		0px;
}

#menuList li { /* Controls the positioning of the submenu options */
	margin: 		0px 0px 0px -3px; /* Forces the submenu options to line up directly underneath the main menu options */
	display: 		inline; 
	list-style-type:none;
}

a.starter { /* Buttons on the main menu bar (inactive status) */
	margin: 		0px -1px 0px 0px; 
	padding: 		0px;
	color: 			#fff;  
	border-left: 	1px solid #fff;
	text-decoration:none;
}
a.starter:hover { /* Buttons on the main menu bar (active (hover) status) */
	color: 			#ffcc00;
}
a.menu-end {
	margin: 		0px -1px 0px 0px; 
	padding: 		0px 3px 0px 0px; 
	border-left: 	1px solid #fff;
	background:		#363636;
	text-decoration:none;
}
html>body a.menu-end {
	padding: 		0px 0px 0px 0px;
	background:		#fff;
}
.menu { /* Dropdown options (buttons) - area and positioning */ 
	visibility: 	hidden;
	color: 			#333; 
	position: 		absolute; 
	background: 	#F7F3F7;
	text-align: 	left;
}
	
.menu li a { /* Dropdown options (buttons) - inactive status - font, style and colour. */
	margin: 		0px 0px 0px 0px;
	padding: 		4px 7px 4px 7px;
	display: 		block; 
	font:			bold 12px Arial, Helvetica, sans-serif;
	color: 			#343434;
	border-left: 	#8D8D8D 1px solid;
	border-bottom: 	#8D8D8D 1px solid;
	border-right: 	#8D8D8D 1px solid;
	border-top: 	#fff 1px solid;
	text-decoration:none;
}
	
.menu li a:hover { /* Dropdown options (buttons) - active (hover) status - it will inherit font and style, etc from the inactive version */
	color: 			#fff;
	background: 	#363636;
}

/* This section defines the width of each individual submenu.  This allows you to have submenus of various widths. */
/* IMPORTANT: You must define all submenus here.  So, if you've got 15 submenus, you will need to create the CSS for #menu1 to #menu15. */

#submenu1 {
	z-index: 		100; 
	width: 			200px;
}
#submenu2 {
	z-index: 		100; 
	width: 			200px; 
}
#submenu3 {
	z-index: 		100; 
	width: 			200px; 
}
#submenu4 {
	z-index: 		100; 
	width: 			230px; 
}