/*

This CSS contains all the functionality needed for a dropdown menu.

The hover logic is as follows:

1)	The 'li' element has the hover colour
2)	The 'a' element has the non-hover colour
3)	When you hover over an 'li' element the 'a' element's colour is
	changed to transparent and you see the hover colour
	
This system is adopted to allow you replace the colours with images and have
both images load when the page loads rather than when you hover.  This is
believed to reduce flicker under some circumstances.

*/

/* Topmenu container */

#topmenu_holder {
text-align:center;
width:745px;
margin:0 auto;
}

#topmenu_holder_l {
float:left;
background-image: url(../images/menu/menu_holder_l.gif);
height:35px;
width:15px;
}

#topmenu_holder_r {
float:left;
background-image: url(../images/menu/menu_holder_r.gif);
height:35px;
width:5px;
}

#topmenu_holder_c {
float:left;
text-align:center;
background-image: url(../images/menu/menu_holder_bg.gif);
background-repeat:repeat-x;
width:725px;
height:35px;
}

#topmenu {
position:static;
font-family:Arial;
font-size:1.1em;
z-index:200;

}

/* Level 1 - Top level menu items */

#topmenu ul {
	list-style: none;
	padding: 0px;
	float: left;
	background-image:url(../images/menu/menu_divider.gif);
	background-repeat:no-repeat;
	background-position:right;

}

#topmenu ul li {
	padding: 0px;	
	z-index:100;
	/*
	
	This sets the active (hover) colour for each list item
	You can apply a similar logic at lower levels if you require
	different colours
	
	*/
	position:relative;

}

#topmenu ul li a,
#topmenu ul li span {
	background:transparent;
	display: block;
	color: #999999;
	text-decoration: none;
	text-align: center;
	padding: 8px 11px 8px 11px;
}

#topmenu ul .level1_on a,
#topmenu ul li.level1_on span {
	background: transparent;
	color: #fff;
}

#topmenu ul li:hover a,
#topmenu ul li:hover span {
	background: transparent;
	color: #f2b92a;

}


/* Level 2 menu items */

#topmenu ul li ul {
	/* This ensures Level 2 drops down properly */
	background:#ffffff;
	z-index:100;
	position: absolute;
	margin: 0px auto;
	padding:0px;
	border-top:0px;
	border-bottom:1px;
	border-left:1px;
	border-right:1px;
	border-color:#c8c8c8;
	border-style:solid;
	

	/* Setting this will set the width of this menu level and below */
	
	width: 150px;
}

#topmenu ul li ul li {
	/* The should be set to the same width as the UL to keep IE happy */

	
	width: 150px;
}

#topmenu ul li ul li a,
#topmenu ul li ul li span {
	/* Undo text transform and set padding and text align from this level down */
	
	
	text-align: left;
	padding: 4px 11px 4px 11px;
}

#topmenu ul li:hover ul li a,
#topmenu ul li:hover ul li span {
	/* This sets the inactive background color */
	

	background:#ffffff;
	color: #696969;

}

#topmenu ul li:hover ul li:hover a,
#topmenu ul li:hover ul li:hover span {
	/* 
	
	This clears the inactive background color
	allowing the active backgrond color to show through
	
	*/

	background: #8b4093 url(../images/menu/menu_top_highlightimg.gif) no-repeat left center;
	color: #ffffff;
}

/*

The following CSS ensures that Level 3 menu items and lower
popout to the left from their parent

*/

#topmenu ul li ul li ul {
	top: 0;
	left: 100%;
	border-top:1px solid #c8c8c8;
	background:#ffffff;
}

/* Level 3 menu items */

#topmenu ul li:hover ul li:hover ul li a,
#topmenu ul li:hover ul li:hover ul li span {
	font-weight:normal;
	background:#ffffff;
	color: #999999;
	
}

#topmenu ul li:hover ul li:hover ul li:hover a,
#topmenu ul li:hover ul li:hover ul li:hover span {
	font-weight:normal;
	background-color: #f2b92a;
	color: #ffffff;
	background-repeat:no-repeat;
	background-position: left center;
	background-image:url(../images/menu/menu_top_highlightimg.gif);
	
}

/* Level 4 menu items */

#topmenu ul li:hover ul li:hover ul li:hover ul li a,
#topmenu ul li:hover ul li:hover ul li:hover ul li span {
	background:#ffffff;
	color: #999999;
	
}

#topmenu ul li:hover ul li:hover ul li:hover ul li:hover a,
#topmenu ul li:hover ul li:hover ul li:hover ul li:hover span {
	background-color: #7cca38;
	color: #ffffff;
}

/* The following CSS governs when menu item levels are displayed */

#topmenu ul ul,
#topmenu ul li:hover ul ul,
#topmenu ul ul li:hover ul ul,
#topmenu ul ul ul li:hover ul ul {
	display: none;
}

#topmenu ul li:hover ul,
#topmenu ul ul li:hover ul,
#topmenu ul ul ul li:hover ul,
#topmenu ul ul ul ul li:hover ul {
	display: block;
}