/* style the outer div to give it width */
.menu {			font-size:			1.1em; 
				position:			relative;
				top:				0px;
				margin-left:		5px;
				padding-bottom:		0px; 
				width:				900px;
				z-index:			1000;
				color:				#333;
}

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

/* style the sub-level lists */
.menu ul ul {		width:				15em;
}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {		float:				left;
				height:				24px;
				line-height:		24px; 
				display:			block;
}

/* style the sub level list items */
.menu ul ul li {		display:			block;
				width:				12em;
				height:				auto; 
				line-height:		1em;
}

/* style the links for the top level */
.menu a, .menu a:visited {	
				display:			block;
				float:				left;
				height:				100%; 
				width:				5em; 
				font-size:			1em;
				text-decoration:	none;
				color:				#eee;
				background:			#333;
				padding:			0 3em 0 1em; 
				border-left:		1px solid #999; 
				border-right:		1px solid #333;
				border-bottom:		1px solid #333; 
}

.last a, .last a:visited {			border-right:		1px solid #999;}

/* hack IE5.x to get the correct the faulty box model and get the width right */
* html .menu a, * html .menu a:visited {	
				width:11em; w\idth:7em;
}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
				display:			block;
				background:			#333;
				color:				#eee;
				width:				12em;
				height:				100%;
				line-height:		1em; 
				padding:			0.5em 1em; 
				border-bottom:		1px solid #aaa;
}

* html .menu ul ul a, * html .menu ul ul a:visited  {
				width:				14em; 
				w\idth:				12em;
}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {		border-collapse:	collapse; 
				padding:			0; 
				margin:				-1px; 
				width:				0; 
				height:				0; 
				font-size:			1em; 
				z-index:			1;
}


/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
				background:			#333;
}

/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {
				background:			#333;
}

/* style the sub level 1 background */
.menu ul :hover a.sub1 {
				background:			#333;
}

/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {
				background:			#333;
}

/* style the level hovers */
/* first */
* html .menu a:hover {
				color:				#333;
				background:			#f80;
				position:			relative; 
				z-index:			100;
}
				
.menu li:hover {	position:			relative;
}

.menu :hover > a {
				color:				#333;
				background:			#f80;
}

/* second */
* html .menu ul ul a:hover{
				color:				#eee;
				background:			#f80;
				position:			relative; 
				z-index:			110;
}

.menu ul ul li:hover {
				position:			relative;
}

.menu ul ul :hover > a {
				color:				#eee;
				background:			#f80;
}

/* third */
* html .menu ul ul ul a:hover {
				background:			#f80;
				position:			relative; 
				z-index:			120;
}

.menu ul ul ul :hover > a {
				background:			#f80; 
}

/* fourth */
.menu ul ul ul ul a:hover {
				background:			#f80;
				position:			relative; 
				z-index:			130;
}


/* 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:				0;		
				top:				25px; 
				left:				0; 
				width:				14em;
}

/* position the third level flyout menu */
.menu ul ul ul{		left:				12em;
				top:				0;
				width:				14em;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:			visible; 
				height:				auto; 
				padding:			0 3em 3em 3em; 
				background:			transparent url(../images/design/trans.gif); 
				left:				-3em;
}

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

/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover 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; 
				left:				9em;
}

/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
				visibility:			visible;
}


div.sitemap ul { 			position: 			relative;
				top: 			0;
				left: 			0;
}