/*
This style sheet is used for flyout menu navigation.

<!--- ---------------------------------------------------------------------
'Sites Style Sheet              CompuCraft Software Solutions (c) 1999-2006
'Date --- Init Reason------------------------------------------------------
'25/10/06 DB initiated based on DOCMV42
'07/02/07 DP updated ie hover support
'21/08/07 MT new design for www 
'02/02/08 MT updated designe for www
'---------------------------------------------------------------------- --->

note: comments starting with cw- are used by the ComWeb Style Sheet Theme (colour) Editor.
Where more than one such comment is on consecutive lines, this is for backwards compatibility.
The first of these such lines is the latest label for the Style sheet editor to display and
the latter entries are older or redundant labels.
*/

/*high level of specificity, to override the master css treatment of bulleted lists, and tighten up the spacing*/
#content #mainMenu ul {
	list-style-type: none;
	margin: 0 1em 0 0;
}


/*override global margin settings from within master.css to create default spacing in navigation lists*/  
#menuList li, 
#menuList a {
	margin-bottom: 0;
	font-weight: normal;
}

/*HORIZONTAL MENU WITH FLYOUTS*/

#headerTail #menuList { 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	left: 0;
	bottom: 8px;
	padding: 0;
	margin: 0 20px 0 15px;
	font-size: 11px;/*safeguard in case an item is not a link, remains same size as links*/	
	line-height: 13px;
	width: 996px;/* to allow the bgd image full width */
	overflow: visible;/*to allow the flyouts to be seen outside the div*/
}

  /*Targetting IE only, requires padding on all sides, whereas other browsers didn't need padding-bottom*/
* html #headerTail #menuList { 
	padding: 8px 8px 3px 8px;
	bottom: 3px;
}

#headerTail #menuList ul  { /* the overall ul  */
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#headerTail #menuList ul ul { /*each submenu ul */
/* cw-Horizontal Menu Individual Borders */
	border-top-color: #afafaf;
	/*the top border of the submenus*/
	border-top-width: 1px;
	border-top-style: solid;
	padding: 0;
	margin: 0;
	list-style-type: none;/*for all rows subsequent to top row*/
}

#headerTail #menuList li { /* all list items */
	float: left;/*allows the list items to display horizontally*/
/*Navigation Background, 1 of 2 places */
	background: transparent; 
/*	url(midRounded.gif) 0 50% repeat-x; *//*can be used for top level only, if combined with a later rule which colours subnav li's differently*/
	/*can be used for top level only, if combined with a later rule which colours subnav li's differently*/
/*same image required in 2 places, 1 of 2
	background: url(menuBulletArrow.gif) 95% 50% no-repeat;*/
/* cw-Horizontal Menu Individual Borders 
	border-color: transparent;
	border-width: 1px ;
	border-style: solid;*/
	margin-right: 2px;/*spacing between the top-level items*/
/* cw-Horizontal Menu top-level nav top border */
	border-right: 1px solid #afafaf;
}

#headerTail #menuList li:hover,
#headerTail #menuList li.iehover {  /* list pseudo-class necessary for nav with no explicit link, but still needs the same rollover background color. Good for evry browser other than IE*/
/* cw-Horizontal Menu Links Hover */
	color: #ff0000;
/* nav hover colour, 1 of 2 places, see further declaration */
/* cw-Horizontal Menu Links Background Hover */
	background: none;
	text-decoration: none;
/* the trailing colour in IE, pseudo class still supports colour */
}

#headerTail #menuList ul ul { /* all submenus */
	position: absolute;
/* cw-Horizontal Menu Submenu Background */
	background-color: #fafafa;
	width: 16em;
	left: -999em; /* hides all submenus until required (upon rollover), using left positioning to hide menus instead of display attribute, because display:none isn't read by screen readers */
	padding:0;
	margin:0;
	padding-right: 2px;/*for all except IE. Not an IE bug, IE seems to be behaving as expected here*/
}

  /*Targetting IE only, not a bug, IE seems to be correct, see the rule in the immediately preceeding line above*/
* html #headerTail #menuList ul ul { /* all submenu levels beyond first level unordered lists */
	padding-right: 0px ;
}

#headerTail #menuList ul ul li { /* all levels of subnav, individual list items */
	width: 16em;
	border: 1px solid #afafaf;
	border-top: none;
	padding:0;
	margin:0;
/* cw-Horizontal Menu Submenu Items Background */
	background-color: #fafafa; /*nav after the top level*/
	
}

#headerTail #menuList li.submenu { /* menus items requiring arrows */
/*Navigation Background,  2 of 2 places*/
/*same image required in 2 places, 2 of 2*/
	background: transparent /* url(menuLink.gif) no-repeat -3px right*/;
/*can be used for top level only, if combined with a later rule which colours subnav li's differently*/
	}

#headerTail #menuList a { /* all menu anchors*/
	display: block;/*needed to get full 'padded' shape*/
	padding: 3px 5px;/*space above and to the sides of the anchor words*/
/* cw-Horizontal Menu Link Backgrounds */
	background-color: transparent; /*so that the arrows are visible in the lists behind them*/
/* cw-Horizontal Menu Links */
	color: #000000;
	text-decoration: none;
	white-space: nowrap;
	margin: 0;
}

#headerTail #menuList ul li.currentPage a {
/* cw-MenuHorizontal Current Page Link Background */
/*	background: #fafafa; can be used for top level only, if combined with a later rule which colours subnav li's differently*/
/* cw-MenuHorizontal Current Page Link Text */
	color: #0066cc;
}

#headerTail #menuList a:hover { /* all menu anchors*/
/* cw-Horizontal Menu Links Hover */
	color: #ff0000;
	text-decoration: none;
/*nav hover colour, 2 of 2 places, see previous declaration*/
/* cw-Horizontal Menu Links Background Hover 
	background: none;*/
}

#headerTail #menuList li.submenu a { /* menus items requiring arrows */
/*	padding-right: 20px; *//*to give room for the bullet arrows*/
}

/*Targetting IE only */
* html #headerTail #menuList ul ul a {  /*	only applies to anchors within list items of fixed widths */
	width: 100%; /* for IE5.x/Win, needs a width to be full-width-clickable, and will extend to the size of the parent li. Since the top level menus are not fixed widths does not apply to them, so this rule is nested deeper.*/
/*	padding: 3px 8px; space above and to the sides of the anchor words*/
}

/*Targetting IE only */
/* star-html filter combined with backward-slash filter, targets IE 6 only */
* html #headerTail #menuList ul ul  a {  /* only applies to anchors within list items of fixed widths, and is designed to help position the flyouts by reducing the anchor width in IE6*/
/*	w\idth: 14.7em; for  IE 6*/
}

#headerTail #menuList li.submenu ul li li a { /* menus items requiring arrows */
/*	padding-right: 20px; *//*to give room for the bullet arrows*/
	background: #fafafa;
}

#headerTail #menuList li li.submenu a,
#headerTail #menuList li li ul li.submenu a { /* MT second and third level menus items requiring arrows */
/*	padding-right: 20px;  to give room for the bullet arrows */
	background: #fafafa url(menuBulletArrow.gif) no-repeat  100% 50%; /* MT show bullets or arrows for second and third level menu items with submenus below */
}

#headerTail #menuList li li.submenu li a,
#headerTail #menuList li li ul li.submenu li a { /* MT second and third level menus items NOT requiring bullets or arrows */
	background: #fafafa;
}

#headerTail #menuList li.submenu ul li a:hover { /* hover on second level menu item anchor, showing any bullets or arrows */
	color: #fff;
	text-decoration: none;
	background: #b4b49d url(menuBulletHover.gif) no-repeat 100% 50%;
}

#headerTail #menuList ul ul ul { /* third-level-and-beyond lists */
	margin-top: -1.3em;/*positions the top of the flyout menus*/
}

#headerTail #menuList li:hover ul ul, 
#headerTail #menuList li:hover ul ul ul,
#headerTail #menuList li.iehover ul ul, 
#headerTail #menuList li.iehover ul ul ul {/*hide all submenus until required (upon rollover)*/
	left: -999em; /* using left positioning to hide menus instead of display attribute, because display:none isn't read by screen readers */
}

#headerTail #menuList li:hover ul,
#headerTail #menuList li.iehover ul { /* targets submenus nested under hovered list items, ie. ALL lists from top level down */
	left: auto;
	margin-left: -1px;/*position how far the menu is placed to the left. Auto makes it nudge 1px to the right, so this compensates*/
}

#headerTail #menuList li li:hover ul,
#headerTail #menuList li li li:hover ul,
#headerTail #menuList li li.iehover ul,
#headerTail #menuList li li li.iehover ul { /* targets submenus nested under hovered list items, ie. ALL lists from top level down */
	left: auto;
	margin-left: 15.8em;/*position how far the menu is placed to the right. usually half an em less than the list width*/
}

#headerTail #menuList li#changeMenuStyle a {
	background-color: #999966;
	color: #4c4c34;
}

#headerTail #menuList li#changeMenuStyle a:hover {
	text-decoration: none;
}


#headerTail #menuList ul ul a  { /* submenu anchors*/
	white-space: normal;
}

#headerTail #menuList li.submenu:hover,
#headerTail #menuList li.submenuiehover { /* removing the image and providing a highlight */
/*Navigation Background,  2 of 2 places*/
/* cw-MenuHorizontal Submenu Link Background Hover*/
	background: none;
/*	background-image: none; 
	background: #999966 url(submenuArrow.gif) 100% 50% no-repeat;*/
	color: #ff0000;
	text-decoration: none;
}

#headerTail #menuList li.submenu li.currentPage a
{ /* highlight the current page, beyond first level menu item anchor */
/* cw-MenuHorizontal Current Page Link Background */
/*	background: #fafafa; can be used for top level only, if combined with a later rule which colours subnav li's differently*/
	font-weight: normal;
}

#headerTail #menuList li.submenu li.currentPage a:hover
{ /* highlight the current page hover, beyond first level menu item anchor */
/* cw-MenuHorizontal Current Page Link Hover Background */
	background: #b4b49d;
	color: #ff0000;
}


/* Non-Standard Additions
------------------------------------------------------------------------------------- */