/* 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.  */

#menu-container {
	position:relative;
}
#mainMenu { /* The main definition of the menu area, colours and font. */
	width: 560px;
	padding: 5px 0 5px 0; 
	margin: 0;
	color: #213C6B;
	position: relative;
	background: #87C6AF;
	text-align: left;
	font: bold 11px Arial, Helvetica, sans-serif;
	}

#menuList {
	padding: 0;
	margin: 0;
	}

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

#menuList li { /* Controls the positioning of the submenu options */
	margin-left: 0; /* 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: 0; 
	padding: 5px 20px;
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #213C6B;  
	border-right: 1px solid #fff;
	background: #87C6AF; 
	text-decoration: none;
	}
.jp a.starter {
	padding: 5px 15px;
}
	
a.starter:hover { /* Buttons on the main menu bar (active (hover) status) */
	color: #fff;
	/*background:#549F84;*/
	}

.menu { /* Dropdown options (buttons) - area and positioning */ 
	visibility: hidden;  
	color: #FFFFFF; 
	position: absolute;
	background: #F3F7F5;
	text-align: left;
	display:block;
	}
	
.hidemenu2 { /* This gets around a bug in IE which refuses to recoginse the 'display:block' attribute applied to the sub menu options. */
	visibility: hidden; 
	width: 0; 
	color: #FFFFFF; 
	position: absolute;
	}
	
.menu li a { /* Dropdown options (buttons) - inactive status - font, style and colour. */
	padding: 5px 7px 5px 7px;
	display: block; 
	font: 11px Arial, Helvetica, sans-serif;
	margin: 0; 
	color: #696969;
	border-left: #C0D9CF 2px solid;
	border-bottom: #fff 1px solid;
	border-right: #C0D9CF 2px 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: #FFFFFF;
	background-color: #315584;
	}
	
.menuselect {
	background-color: #e4e4e4;
	}
/* 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. */

#menu1 {
	z-index: 100; /* Leave this alone unless you've got a good reason to change it */
	width: 165px; 
	}
#menu2 {
	z-index: 100;
	width: 205px; 
	}
#menu3 {
	z-index: 100;
	width: 165px; 
	}
#menu4 {
	z-index: 100;
	width: 165px; 
	}
#menu5 {
	z-index: 100;
	width: 165px; 
	}
#menu6 {
	z-index: 100;
	width: 165px; 
	}
#menu7 {
	z-index: 100;
	width: 225px; 
	}
#menu8 {
	z-index: 100;
	width: 165px; 
	}
#menu9 {
	z-index: 100;
	width: 165px; 
	}
#menu10 {
	z-index: 100;
	width: 200px; 
	}
#menu11 {
	z-index: 100;
	width: 165px; 
	}
#menu12 {
	z-index: 100;
	width: 200px; 
	}
#menu14 {
	z-index: 100;
	width: 200px; 
	}
#menu15 {
	z-index: 100;
	width: 200px; 
	}
#menu16 {
	z-index: 100;
	width: 200px; 
	}
#menu17 {
	z-index: 100;
	width: 200px; 
	}
#menu18 {
	z-index: 100;
	width: 200px; 
	}
#menu19 {
	z-index: 100;
	width: 200px; 
	}
	
.language {
	position:	absolute;
	top:		5px;
	right:		55px;
	margin:		0;
	padding:	0;
	list-style:	none;
}
.language li {
	display:	inline;
}
.language li a{
	padding:	0 5px;
	color:		#fff;
	text-decoration:none;
}
.language li a:hover{
	color:		#213C6B;
}