/* ***********************************************************************************

Convertable Nestled list menu by DUNCAL Productions
 2007 by Duncan Hill and Alan Gresley
http://css-class.com/articles/ursidae/
http://css-class.com/articles/ursidae/bears5dd-kbaccess.htm

Converts from a verticle menu with flyout popup submenus to a horizontal menu with popups 
and then flyout popup submenus with a few changes in style where. To convert please find 
where ****DISPLAYS HORIZONTAL MENU**** appears. Please note, this keyboard addaption 
prevents easy conversion.

Dropdown version from top left corner (with IE5.5 and IE6 hacks, none for IE5 for Mac)

ACCESSIBILITY - This menu is completely keyboard accessible in Firefox and IE with just CSS alone.

********************************************************************************* */

/* Note that the values you are likely to want to change are in their own section at the end of the
   file.  If you find you need to change a value that is not there already, feel free to add it */

ul#navigation {
	font-family: Tahoma,Helvetica, Arial,sans-serif;
	font-size: 100%; /*          ****CHANGE**** change for larger or smaller font */
	float:left;
}
ul#navigation, ul#navigation ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
ul#navigation li { 
	line-height : 1.35em;
	position: relative;
	float: left;
}
ul#navigation>li li { /* Needed for Opera 9, maybe because it's decent CSS. Hide from IE6 */
	float: none;
}

#navigation li a, 
#FrontPageMenuWrap li a {
	display: block;
	text-decoration: none;
	text-align:center;
	padding: 0.5em 0.5em;
}

#navigation li li a:focus, #navigation li li a:active { /* The focus position for anchors */
	position : relative;
	left: 10000px;
	/*margin-left:7em;*/
	top:0px;
	padding: 0.5em 0.5em;
	z-index:5;
}
#navigation li:hover li a:focus, #navigation li:hover li a:active, #navigation li.sfhover li a:active { /* The hovered style for submenus when anchor is in focus */
	position : relative;
	left: 0;top:0;
	margin-left:0;
}
#navigation li li li a:focus, #navigation li li li a:active { /* The focus position for anchors */
	left: 20000px;
	margin-left:9em;
	top:-2.38em;
}
#navigation li:hover li li a:focus, #navigation li:hover li li a:active, #navigation li.sfhover li li a:active { /* The hovered style for submenus when anchor is in focus */
	position : relative;
	left: 0;margin-left:0;
}
#navigation li li li li a:focus, #navigation li li li li a:active { /* The focus position for anchors */
	position : relative;
	left: 30000px;
	margin-left:20em;
	top:-4.76em;
	z-index:1;
}
#navigation li:hover li li li a:focus, #navigation li:hover li li li a:active, #navigation li.sfhover li li li a:active { /* The hovered style for submenus when anchor is in focus */
	position : relative;
	left: 0;margin-left:0;
}

#navigation li ul { /* Hides the first unhovered submenu */
	position : absolute;
	left: -10000px;
}
/*#navigation li:active ul ul, #navigation li:active ul ul ul*/
#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {
	left: -10000px; /* Hides the second and following unhovered submenus */
}

#navigation li:hover ul, #navigation li li:hover ul, ul#navigation li li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { /* Displays submenu when the parent anchor element is hovered */
	top: 0;
	left: 1em;
	margin-left: 100%;
}

/* Displays submenu when the parent anchor element is in focus */

#navigation li a:focus+ul {
	top: 0;
	left: 0;
	margin-left: 0;
	top: 2.35em;
}
#navigation li:hover a:focus+ul {
	margin-left: 0;
}
#navigation li li a:focus+ul {
	top: 0;
	left: 10000px;
	margin-left:100%;
}
#navigation li:hover li a:focus+ul {
	left: -10000px;
	margin-left:100%;
}
#navigation li li:hover a:focus+ul {
	left: 0;
	margin-left:100%;
}
#navigation li li li a:focus+ul {
	top: -2.35em;
	left: 20000px;
	margin-left:100%;
}
#navigation li li li:hover a:focus+ul {
	top: 0;
	left: 0;
	margin-left:100%;
}
#navigation li li:hover li a:focus+ul {
	left: 0;
	margin-left:100%;
}


/*                       ****DISPLAYS HORIZONTAL MENU(2) ******* */
#navigation li:hover ul, #navigation li a:focus ul, #navigation li.sfhover ul {
	top:100%;
	margin-left: 0;
}
div#navwrap {
	width:95%;
}

#navigation li li li:hover { /* currently in to prevent IE7 recalculated offset bug for last submenu, oh dear */
	background-position:left;
}





/* Project specific values to change
   The are the common definitions that tend to change by project, 
   such as widths, colours, background images, etc... */


/* place the side menu in the page */
div#sideNavWrap, 
div#FrontPageMenuWrapWrap {
	float:left;
	display:inline;  /* stops the IE6 and earlier doublemargin bug */
	margin: 0;
}

/* height */
ul#navigation li { 
	line-height : 1.35em;
}

#navigation li a {
	margin: 0;
	padding: 0;
}

ul#navigation li li a, #navigation li li a:focus {
	width: 8em; /*           ****CHANGE-SUBMENU**** */
	color: white;
	text-align:left;
}

ul#navigation li li li a, #navigation li li li a:focus {
	width: 10em; /*           ****CHANGE-SUBMENU**** */
}

ul#navigation li li a:hover { /* The hovered style for submenus */
	background-color: #3E5658;
}
#navigation li#menu-item-1 li a:hover,
#navigation li#menu-item-2 li a:hover,
#navigation li#menu-item-3 li a:hover,
#navigation li#menu-item-4 li a:hover,
#navigation li li a:hover,
ul#navigation li li a:focus { /* The focus style for submenus */
	background-color: #75A1A4;
}
ul#navigation li li a:active { /* The active style for submenus */
	background-color: #75A1A4;
}

/* Give some outline */

#navigation li a:focus { /* The focus position for anchors */
	outline: 2px solid #e05067;
}
#navigation li li a:focus { /* The focus position for anchors */
	outline: 2px solid #60a0d0;
}

#navigation li a,
#FrontPageMenuWrap li a {
	font-size: 1.5em;
	line-height: 1.2em;
	font-family: times, serif;
	padding-left: 0.7em;
	width: 180px;
	text-align: left;
}

#navigation li#menu-item-1 li a,
#navigation li#menu-item-2 li a,
#navigation li#menu-item-3 li a,
#navigation li#menu-item-4 li a,
#FrontPageMenuWrap li li a {
	padding: 0.5em 0.5em;
	width: 12em;
	font-size: 0.7em;
	font-weight: bold;
	font-family: arial, sans-serif;
}

#navigation li#menu-item-1 a {	
	padding-top: 33px;
	color: #d6e4e7;
}

#navigation li#menu-item-1:hover ul {
	margin-top: -2em;
}

#navigation li#menu-item-1 {
	height: 92px;	
	background-image: url( ../Images/menuBackground1stBlue.png);
	z-index: 5; /* a hack to make submenus appear overtop of the menus below it */
}

#navigation li#menu-item-2 a {
	color: #d4ecc8;
	padding-top: 20px;
	z-index: 4;
}

#navigation li#menu-item-2:hover ul {
	margin-top: -1em;
}

#navigation li#menu-item-2 {
	height: 93px;
	background-image: url( ../Images/menuBackground2ndGreen.png);
	z-index: 3;
}

#navigation li#menu-item-3 a {
	color: #e0d9bd;
	padding-top: 18px;
	z-index: 2;
}

#navigation li#menu-item-3:hover ul {
	margin-top: -1em;
}

#navigation li#menu-item-3 {
	height: 88px;
	background-image: url( ../Images/menuBackground3rdBrown.png);
	z-index: 1;
}

#navigation li#menu-item-4 a {
	color: #e5d1d2;
	padding-top: 18px;
}

#navigation li#menu-item-4:hover ul {
	margin-top: -1em;
}

#navigation li#menu-item-4 {
	height: 93px;
	background-image: url( ../Images/menuBackground4thRed.png);
}

#FrontPageMenuWrap li a {
	color: #d6e4e7;
	padding-top: 31px;
}

#FrontPageMenuWrap li:hover ul {
	margin-top: -2em;
}

#FrontPageMenuWrap li {
	list-style: none;
	margin: 0;
	height: 92px;
	position: relative;
	width: 193px;
	background-repeat: no-repeat;
	z-index: 3;
	float: left;
	background-image: url( ../Images/menuBackground5thBlue.png);
}

#FrontPageMenuWrap ul {
	margin: 0;
	padding: 0;
}

#navigation li,
#FrontPageMenuWrap li {
	position: relative;
	width: 193px;
	background-repeat: no-repeat;
	z-index: 2;
}

#navigation li ul,
#FrontPageMenuWrap li ul {
	z-index: 3;
	background-color: #3E5658;
}

#navigation li li,
#FrontPageMenuWrap li li {
	width: auto;
	text-align: center;
}