/* WD CSS Flyout Menu Stylesheet  - CMW 13/02/2008 */

/* WinIE Behavior Call */
body {
	behavior: url(includes/csshover.htc);
}


/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
	width: 150px;				/* Sets sidebox to 150px wide - Set width below for the CSS Flyout */
	margin: 0;				/* Sets sidebox to no margin  - Set margin below for the CSS Flyout */
	background-color: #FEF8E9;		/* Sets sidebox background colour to WD BLue, Set colour below for the CSS Flyout */
	font-weight: bold;			/* Set sidebox to bold text - Applies throughout entire sidebox and CSS Flyout */
}


/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
	line-height: 18px;			/* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
	width: 150px;				/* Sets CSS Flyout to 150px wide, matching the width of the entire sidebox which is set above */	
	margin: 0;				/* Sets CSS Flyout List Area to no margin, - Applies throughout menu system */
	padding: 0;				/* Sets CSS Flyout List Area to no padding - Applies throughout menu system */
	background-color: #FEF8E9;		/* Sets CSS Flyout List Area background colour to WD BLue - Applies throughout menu system unless overridden */
}


/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {
	background-color: #EDCFBC; 		/* Sets CSS Flyout List Area background colour to WD Blue - Applies to all levels apart from the first one */
}


/* Sets Category Text Background on Main Menu for categories without subcats */
div#nav-cat li {
	position: relative;			/* Sets the submenu to display inline with the previous menu - Applies throughout menu system */
	list-style: none;			/* Sets the list to display without any indentation or markers - Applies thorughout menu system */
	margin: 0;				/* Sets each line item to no margin - Applies throughout menu system */ 	
	z-index: 1;				/* Ensures the menu displays on top of other items on the page - Applies throughout menu system - may need to alter this value */ 
	border-bottom: 1px solid #000000;	/* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}


/* Sets currently hovered category on the Main Menu and it's parent category to orange background */
div#nav-cat li:hover {
	background-color: #FCE0C2;		/* Sets the background color of a line item which is being hovered over to WD Orange - Applies throughout menu system */
}


/* Sets Category Text Background on Main Menu for categories with subcats */
div#nav-cat li.submenu {
	background: url(../images/ms_submenu.gif) 95% 50% no-repeat; /* Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
}


/* Sets currently hovered category on the Main Menu and it's parent category to orange background */
div#nav-cat li.submenu:hover {
	background: url(../images/ms_submenu_hover.gif) 95% 50% no-repeat; /* Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
	background-color: #FCE0C2;		/* Sets the background color of a line item that contains a submenu which is being hovered over to WD Orange - Applies throughout themenu structure */
}


/* Settings for Category Text */
div#nav-cat li a {
	display: block; 			/* Sets the whole of the line to be clickable, rather than just the text - Applies throughout menu system */
	padding: 0.25em 0 0.25em 0.5em;		/* Positions the text on each line item into a more central position - Applies throughout menu system */
	text-decoration: none;			/* Sets the text to disdplay normally with no unwanted effects - Applies throughout menu system */
	width: 140px;				/* Sets the width of the text area to 140px wide - Applies throughout menu system */
	font-weight: bold;
	color: #CC0000;				/* Sets the text to be white - Applies throughout menu system */	
}*/						/* This strange closing comment mark seems to be necessary to get this to work properly */


/* Settings for the display of submenu blocks */
div#nav-cat ul a{
	width: auto;				/* Sets the submenu block width to auto - If not present menu displays as huge list - Applies throughout menu system */
}


/* Settings for position of submenu blocks */
div#nav-cat ul ul {
	position: absolute;			/* Sets the submenu blocks to display alongside and below the parent menu - Applies throughout menu system */
	top: 0;					/* Sets the position of submenu blocks to line up against the parent menu at the top - Applies throughout menu system */
	left: 150px;				/* Sets the position of submenu blocks to line up against the parent menu on the side - Applies throughout menu system */
	display: none;				/* Sets the submenu blocks NOT to display - Seems strange but if this isn't included strange effects occur - Applies throughout menu system */
}


/* Settings for extra submenu blocks */
div#nav-cat ul.level1 li.submenu:hover ul.level2, div#nav-cat ul.level2 li.submenu:hover ul.level3, div#nav-cat ul.level3 li.submenu:hover ul.level4, div#nav-cat ul.level4 li.submenu:hover ul.level5, div#nav-cat ul.level5 li.submenu:hover ul.level6 {
	display: block;				/* Sets submenu blocks TO display when they are being hovered over, overriding setting directly above - Applies throughout menu system */
}