/* CSS Document */
/* Because of Typo3 and the way it handles menus some of the information here is not used
I have tried to mark out those areas and or combine to make clearer
some of the areas I have marked out worked different in Typo3 then expected*/

/**************** menu coding *****************/

#mainMenu {
	width: 1024px;
	/*background: #eee;  This causes a gray block beneight the whole menu when the dropdowns open*/
	float: left;
	overflow: visible;
	visibility: visible;
}

#mainMenu ul {
	list-style: none;
	width: 9em;
	margin: 0;  /* Added so menu in IE will not move with longer dropdown lenths */
	padding:0; /* Added to block  inheritance in Firefox */
	text-align:center;
	float:left;
	text-transform:none;
	display:inline;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	line-height: 12px;
	font-weight: bold;
}

#mainMenu a{
	text-decoration: none;
	font-weight:bold;
	font-family: arial, helvetica, sans-serif;
	color: #EEE; 
	width: 8.9em;
	padding:3px 0 3px 2px;
}

#mainMenu ul li a {float:left;}

#mainMenu ul ul a, #mainMenu ul ul ul a{ 
	background-image:url(../../images/banner_menu/menu_background2.gif);
	border-top: solid 1px #ccc;
	color: #FFF; 
	width: 8.8em;
	text-transform:none;
}	

#mainMenu ul ul ul a{ 
	padding-left:20px;
	border-top: solid 1px #ccc;
}

#mainMenu ul ul ul ul a{ 
	padding-left:30px;
	background: #f0c; /*#3E383A;*/
	border-top: solid 1px #ccc;
	width: 8.8em;
	text-transform: none;
}

#mainMenu a:hover {
	color: #000;
	/*background-image:url(../../images/banner_menu/menu_background.gif);
	border-top:solid thin #947D5A;*/
}

#mainMenu a ul:hover, a ul ul:hover {
	color: #000;
	background-image:url(../../images/banner_menu/menu_background2.gif);
	/*border-top:solid thin #947D5A;*/
}

#mainMenu ul ul {
	position: relative;
	z-index: 400;
	text-align:left;
	margin: 0;
}

#mainMenu ul ul ul{
	position:relative;
	top:0;
	/*left:15px;*/
	margin: 0;
}

DIV#mainMenu ul ul,
DIV#mainMenu ul li:hover ul ul,
DIV#mainMenu ul ul li:hover ul ul{display: none;}

DIV#mainMenu ul li:hover ul,
DIV#mainMenu ul ul li:hover ul,
DIV#mainMenu ul ul ul li:hover ul{display: block;}