/*NAVBAR STYLE SHEET FOR WWW.PCDS.CO.UK */
/* LAST EDITED BY: PETER COX */

/* 14_pcds_navbar.css v14.6 (03.10.14) */
/* W3C validated dd.mm.07 */


/*body {
behavior: url(csshover2.htc);
}*/

#navwrap { /* The basic bar of the menu */
	position:relative;
	float:right;
	width:700px;
	margin-top:10px;
	margin-left:10px;
	margin-right:50px;
	height:1.0em;
	min-height:27px;
	z-index:100; /* Master layering for the whole menu */
	/*border:1px dashed yellow;*/
	}

/*   menu globals \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
	
#menu { /* Red border; expanding container holding all the menus */
	position:absolute;
	/*top:-26px;*/ /* Controls the vertical position of the menu relative to the bar */
	/*left:-60px;*/
	width:100%;
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:3.0em; /* First text size control - sets the baseline sizing all the menus */
	line-height:1.5em;
	/*z-index:100;*/
	/*border:1px solid red;*/
	}
	
	#menu a, #menu a:visited { /* Controls the common look of links */
	display:block;
	width:100%;
	text-decoration:none;
	border-bottom:4px solid #342673;
	border-bottom:4px solid #3f629d;
	}
	#menu a:active, #menu a:hover, #menu a:focus { /* Controls the common look of primary links */
	display:block;
	width:100%;
	text-decoration:none;
	}

/*   menu ul globals \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

#menu ul { /* Cyan border; stuff in here does the whole list container */
	/* Global controls for the top level menu items */
	position:relative;
	float:left;
	padding-top:0;
	padding-bottom:5px; /* Controls the gap below the primary menu items */
	padding-left:0; /* Removes any list indent; keeps everything to the extreme left */
	margin-top:4px; /* Controls the vertical centering of menu items on the bar */
	margin-left:20px;
	margin-left:0;
	font-weight:normal;
	list-style-type:none;
	/*border:1px solid cyan;*/
	}


/*   top-level menu link globals \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

#menu ul li a {
	color:#ffffff;
	/*font-size:3.0em;*/
	}

/*   top-level menu link specifics \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */


body.web #menu ul li.web a { 
	color:#3f629d;
	}
	
body.web #menu ul li.web a:hover, body.web #menu ul li.web a:active { 
	color:#ffffff;
	} /* This makes it white on hover but doesn't persist */
	
body.graphics #menu ul li.graphics a:hover, body.graphics #menu ul li.graphics a:active { 
	color:#ffffff;
	} /* This makes it white on hover but doesn't persist */
	
body.designMake #menu ul li.designMake a:hover, body.designMake #menu ul li.designMake a:active { 
	color:#ffffff;
	} /* This makes it white on hover but doesn't persist */
	
body.graphics #menu ul li.graphics a {
	color:#3f629d;
	}

body.designMake #menu ul li.designMake a { /* NB: hyphens not allowed in names */
	color:#3f629d;
	}




/*   menu ul classes \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
	
	#menu ul .web {
		float:left;
		/*width:3.5em;*/
		width:7.5em;
		width:7.0em;
		height:60px; /* Restrict the area that activates the menu */
		margin-right:0;
		padding-right:5px; /* Controls the spacing around the primary menu item */
		padding-left:5px; /* Controls the spacing around the primary menu item */
		background-color:transparent;
		/*border:1px dashed red;*/
		}
				
	#menu ul .graphics {
		float:left;
		/*margin-right:-5.0em;*/ /* Adjusts following items back against the wider Components after floating */
		/*width:4.0em;*/
		width:7.0em;
		height:60px;  /* Restrict the area that activates the menu */
		padding-right:5px;
		padding-left:5px;
		margin-left:20px;
		background-color:transparent;
		color:#ffffff; /* Set the colour of the item text when not a link*/
		/*border:1px solid lime;*/
		}
	#menu ul .designMake {
		float:left;
		width:7.5em;
		width:7.0em;
		height:60px;  /* Restrict the area that activates the menu */
		margin-left:20px;
		background-color:transparent;
		color:#ffffff; /* Set the colour of the item text when not a link*/
		/*border:1px dotted cyan;*/
		}

/* ///////////////// SECOND-LEVEL (FIRST DROPDOWN) LISTS GLOBAL STYLING ///////////////////*/	

#menu ul ul {  /* sets the general look of the first drop-down menu containers */
	position:relative;
	background-color:#3f629d;
	/*background-color:#3f629d;*/
	padding:5px 5px 3px 5px;
	width:100%;
	width:16.0em; /* The width of the dropdown area */
	font-size:0.4em; /* Size of text in the first dropdown menus */
	line-height:1.4em;
	/*border-top:1px solid #BFE2FF;*/
	left:-999em; /* using left instead of display to hide menus because display: none isn't read by screen readers ; so the dropdowns are always visible, it's just that they're moved off the screen*/
	}
	
#menu ul ul li.graphics2,
#menu ul ul li.designMake2 { /* For those listed items not actually links */
	border-top:1px solid #BFE2FF;
	padding-top:1px;
	padding-bottom:1px;
	}	
	
	
/* ///////////////// SECOND-LEVEL (FIRST DROPDOWN) LISTS LINK STYLING ///////////////////*/		

#menu ul ul li.web2 a { /* keeps the web menu operational with link styles whilst other menus are not fully linked */
	border-top:1px solid #BFE2FF;
	padding-top:1px;
	}

#menu ul ul li a:hover, #menu ul ul li a:focus { /* sets the global hover and focus states for the drop-down items */
	position:relative;
	left:0; /* Make them appear back where it should do */
	/*background-color:#342673;*/ /* Controls the hover color of the second level */
	}

/* The crucial bit to make the dropdowns appear... */
#menu li:hover ul, #menu li:focus ul, /* This line controls the display of the first drop-down containers */

#menu li:hover ul li:hover ul, #menu li:focus ul li:focus ul { /* Second drop-down containers */
	left:0;/* Make them appear back where it should do */
	}

	
/* ///////////////////////// PERSISTENT HOVER STYLE ON THE TOP LEVEL /////////////// */
	
#menu ul li:hover a { /*set styles for top level when dropdown is hovered / active */
/* Works by styling every link inside a list item when that list item is hovered */
	/*background-color:#3f629d;*/  /* Top level background control when dd hovered */
	/*background-color:#00FF66;*/ /* this colours the top level background AND anything below */
	color:#ffffff; /* but this doesn't colour the top level text */
	}
	
#menu li.web a:hover, #menu li.graphics a:hover, #menu li.designMake a:hover { /* then specifically control the hover effect of the menu items and anything within them unless this is countermanded by another items-specific style*/
	background-color:#342673;
	/*background-color:#00FF66;*/
	color:#ffffff;
	}

/*body.web #menu ul li.web a, *//* this makes the top level link white (all the time) */
/*body.graphics #menu ul li.graphics a,*/
/*body.designMake #menu ul li.designMake a, */
body.web #menu ul ul li.web2 a, /* keeps them all white in dropdown */
body.web #menu ul ul li.web2 a:hover {
	color:#ffffff;
	}
	
body.graphics #menu ul ul li.graphics2 a, /* keeps them all white in dropdown */
body.graphics #menu ul ul li.graphics2 a:hover {
	color:#ffffff;
	}
	
body.designMake #menu ul ul li.designMake2 a, /* keeps them all white in dropdown */
body.designMake #menu ul ul li.designMake2 a:hover {
	color:#ffffff;
	}
	
/*body.web #menu ul li a {
	color:#ffffff;
	}*/
	
/*body.web #menu ul li.web a {
	color:#00FF00;
	}*/
	
	/* Can I just have no background on the top level unless directly hovered? */
	/* Just keep it mid blue? ie; turn off the background control */
	
/* // End of navbar styling */