/* JsMenu */

/* Example
<div class="panelMenu" >
  <div class="dropMenu">
     <ul>
       <li><a class="menuItem" href="About.htm">About</a></li>
*/ 
/*
 If there are any drop down menu items, they need to appear over content within the same div.
 e.g. an banner image
 Otherwise just use the menu items without any drop down menus.
*/
/************** Custom Values ***************/

/* NOTES */
/* 1. Adjust height of menu panel and menu items
/* 2. Adjust width according to number of menu items (.dropMenu ul a, .dropMenu ul a:visited)  */
/* 3. Override colours as required */
/* 4. Do not change default ul values (affects the menu layout)*/

/* Dimensions */
.panelMenu
{
	height: 196px; /* e.g. banner 158px + padding of panelMenu (2*8) */ 
	padding: 8px;
}

.dropMenu ul a, .dropMenu ul a:visited  /* Width of menu boxes */ 
{ 
 	width:152px !important; /*mozilla width excludes padding-left*/
	width:162px; /* width of menuPanel/number of menu items. explorer width includes padding-left */ 
} 

/* Colours */
.dropMenu ul li
{
	background-color: #A5A548;/* lime green menu */
}
.dropMenu ul a:hover,
.dropMenu ul ul li a:hover
{
	background-color: #CCCC59; /* lime green menu highlight */ 
}
.dropMenu ul ul li
{
	background-color: red; /* drop down menu */
}
.dropMenu, .dropMenu ul li a, .dropMenu ul ul li a
{
	color: white; /* text colour */
}
.dropMenu
{
	background-color: white; /* colour behind menu at far right*/
}
/* Borders of TopLevel and SubMenu specifies the colour of separators */


/************** Generic Values ***************/

/* class definitions for javascript */
a.menuItem, a.menuDropdown, a.menuDropdownItem 	
{
	text-decoration: none; 
	outline: none; /* remove dotted outline in Firefox */	
}
/* Dimensions */
.dropMenu, .dropMenu ul a, .dropMenu ul a:visited 
{
	height: 28px; /* only change if font size changes */
 	line-height:27px; /* distance between lines (exclude border) */	
}

/* Layout */

.dropMenu ul
{
	vertical-align: top;
	/* display: block; */
	float: left;	
 	text-align:left;
}
	
/* Top level menu */	
.dropMenu ul 
{
	list-style-type:none;
	padding: 0;
	margin: 0;
 }
 .dropMenu ul li
{
	position: relative; /* for dropdown location */
	float: left; /* menu items appear horizontally */
	list-style-type: none;
	padding-left: 0;
	margin: 0;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: white;
}


.dropMenu ul li a, .dropMenu ul li a:hover
{
	display: block; /* so submenu appears beneath instead of ontop of menu */
	padding-left: 4px; /* offset text a little, affects width differently across browsers */
	margin: 0;	
	border:0;
}
 

/* Second level menu */	
.dropMenu ul ul
{
	visibility: hidden; /* MenuLink.js alters this */
	display: block;
	position: absolute;
	list-style-type:none;
	padding: 0;
	margin: 0;	
	border:0;
}
.dropMenu ul ul li
{
	list-style-type:none;
	border:0;	
	padding: 0;
	margin: 0;	
}

.dropMenu ul ul li a, .dropMenu ul ul li a:hover
{
	padding-left: 4px; /* offset text from left edge. padding behaves differently across browsers */
	border-style: none solid solid solid;
	border-width: 1px;
	border-color: white;
	margin: 0;	
}