/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu_holder {
	background-color: #000000;
	background-image: url(../images/menu_bg.jpg);
	position: absolute;
	left: 0px;
	top: 111px;
	margin: 0px;
	padding: 0px;
	height: 22px;
	width: 1001px;
}

.menu {
	font-family:arial, sans-serif;
	position: absolute;
	width: 950px;
	z-index:100;
	left: 26px;
	background-color: #000000;
	top: 111px;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:950px; w\idth:950px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

/* width of the drop down menu */
.menu ul ul {}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
}

/* style the links for the top level */
.menu a, .menu a:visited {
	display:block;
	font-size:10px;
	text-decoration:none;
	color:#CCCCCC;
	height:20px; /* menu height minus two */
	padding-left:10px;
	padding-right: 0px;
	line-height:19px; /* menu height minus three */
	font-weight:bold;
	background-color: #000000;
	letter-spacing: 0.2em;
	text-align: left;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
}
/* make the drop down list left justified, or different from main menu if desired */
.menu ul ul a, .menu ul ul a:visited {
	text-align: left;
}

.menu a.here:link, .menu a.here:visited {
	background-color: #729545; /* #518610 - darker green */
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {w\idth:138px;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:0px;
	top:22px; /* equal to menu height */
	left:0;
	width:135px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
}
/* another hack for IE5.5 */
* html .menu ul ul {top:24px;t\op:23px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	color:#FFFFFF;
	height:auto;
	line-height:1.5em; /* height of each drop down menu item, and space between the lines of multiple line items */
	padding:2px 0px 2px 10px;
	width:130px;
	background-color: #518610;
	border-top-width: 0;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
	width:95px;
	w\idth:95px;
}

/* style the top level hover */
.menu li a:hover, .menu ul ul a:hover, 
.menu li a.here:hover /* this one needed for IE6 to work */
{
	color:#FFFFFF;
	background-color: #729545; /* #729545 lighter green */
}
/* this code in Firefox keeps the top level selected even when you hover on lower items */
.menu :hover > a, .menu ul ul :hover > a {
	color:#FFFFFF;
	background-color: #729545;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul
{visibility:visible; }

/* define the widths for all the menus 
   sub menus have the same width as main menu */
.menu .home a, .menu .about a:visited {
	width:81px;}

/* hack for IE6, not sure why only this one is needed */	
* html .home a, * html .home a:visited {w\idth:81px;}
	 
.menu .about a, .menu .about a:visited {
	width:95px;}
	
.menu .team a, .menu .team a:visited {
	width:135px;
}
	
.menu .lead a, .menu .lead a:visited {
	width:215px;}

.menu .work a, .menu .work a:visited {
	width:108px;}
	
.menu .resource a, .menu .resource a:visited {
	width:111px;}	

.menu .contact a, .menu .contact a:visited {
	width:123px;}
	
	
/*********************************/
/**** THIRD LEVEL STUFF ***/
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
	background-color: #536b7d;
	background-image: url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif);
	background-repeat: no-repeat;
	background-position: 130px center;
}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}


/* position the third level flyout menu */
.menu ul ul ul{ 
	top:-2px; /* -2 because the main drop down menu item top border is 2 px */
	width:154px;
} 

.menu ul ul ul.team_drop {
	left:147px; /* width of main drop menu plus 12 */
} 
	
.menu ul ul ul.lead_drop {
	left:227px;
} 
	
.menu ul ul ul.work_drop {
	left:120px;
} 

.menu ul ul ul.team_drop,
.menu ul ul ul.team_drop,
.menu ul ul ul.team_drop {
	width:154px; /* defines the width of the top border */
}
	
/* the width of the third level menu = */
.menu .team_drop a, .menu .team_drop a:visited,
.menu .lead_drop a, .menu .lead_drop a:visited,
.menu .work_drop a, .menu .work_drop a:visited {
	width:140px; /* this plus 14 = width of .menu ul ul ul */
}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-150px;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
	background-color: #729545;
	line-height:1.2em; /* make the line spacing the same as the left fly out menu */
	padding:3px 0 4px 10px; /* adjust the padding to made the menu box the same height as the drop down menu single line item */
}
/* style the third level hover */
.menu ul ul ul a:hover {background-color:#96AD64;}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}