/* Begin CSS Popout Menu */ 
#menu { 
	width: 189px; /* set width of menu */ 
	background: #eee; 
	margin-bottom: 10px; 
} 

#menu ul { /* remove bullets and list indents */ 
	list-style: none; 
	margin: 0px; 
	padding: 0px; 
	color: #CFE4AE; 
	width: 100%; 
} 

/* style, color and size links and headings to suit */ 
#menu a { 
	display: block; 
	text-decoration: none; 
	color: #CFE4AE; 
	white-space: nowrap; 
	margin: 0px; 
	padding: 2px 3px; 
} 

#menu span { 
	display: block; 
	text-decoration: none; 
	white-space: nowrap; 
	margin: 0px; 
	padding: 2px 3px; 
} 

#menu li:hover, #menu a:hover, #menu a:active { 
	color: #FFFF00; 
} 

/* Styling for expanding menu */ 

#menu img{ 
	float: right; 
	padding-top: 3px; 
	border: none; 
} 

/* Begin Content Area */ 

#menu li { 
/* make the list elements a containing block for the nested lists */ 
	position: relative; 
	z-index: 10; 
	display: block; 
	width: 189px; 
	height: 20px; 
	color: #CFE4AE; 
	font-size: 11px; 
	font-weight: bold; 
	padding: 0px; 
	vertical-align: middle; 
	background-color: #0066cc; 
	border-top: #99ccff; 
	border-bottom: #003366; 
	border-width: 1px; 
	border-style: solid; 
	background-repeat: repeat-x; 
} 

#menu ul ul, 
#menu ul ul ul, 
#menu ul ul ul ul, 
#menu ul ul ul ul ul, 
#menu ul ul ul ul ul ul, 
#menu ul ul ul ul ul ul ul, 
#menu ul ul ul ul ul ul ul ul { 
	position: absolute; 
	z-index: 100; 
	left: 100%; /* to position them to the right of their containing block */ 
	width: 100%; 
	top: -1px;  /* makes up for the border */ 
	display: none; 
} 

div#menu ul ul, 
div#menu li:hover ul ul, 
div#menu li li:hover ul ul, 
div#menu li li li:hover ul ul, 
div#menu li li li li:hover ul ul, 
div#menu li li li li li:hover ul ul
{display: none;} 

div#menu li:hover ul, 
div#menu li li:hover ul, 
div#menu li li li:hover ul, 
div#menu li li li li:hover ul, 
div#menu li li li li li:hover ul {
	display: block; 
	color: #FFFF00; 
}