/* CSS Document */
#menu {
	margin: 0 0 0 4px;
	font-family: Arial;
	font-size: 10px;
}

#menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
}

#menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
}

#menu a {
	display: block;
}

* html #menu li a {
	position: relative;/* Fix IE6's inability to expand clickable area */
}

#menu li ul {
	visibility: hidden;
	position: absolute;
	z-index: 100;
	margin:0;
	padding:0;
}

/* using display is better (no scrollbars when page loads), but IE can't handle it, so only good browsers should see this */
html>body #menu li ul {
	display: none;
}

#menu li li {
	width: 100%;
}

/* fix the position */
#menu li li ul {
	top: 0px;
	left: 100%;
}

/* simulate child selector for IE */
div#menu li:hover ul,
#menu li:hover li:hover ul,
#menu li:hover li:hover li:hover ul {
	visibility: visible;
}

div#menu li:hover li ul,
#menu li:hover li:hover li ul {
	visibility: hidden;
}

/* do the normal show, with increased specificity, for good browsers */
#menu ul#menuList li:hover>ul {
	display: block;
	visibility: visible;
	width: 137px;
	overflow: hidden;
}

#menu a {
	font-size:11px;
	text-decoration: none;
	padding: 0px 36px 0px 0px;
	background-repeat:no-repeat;
}

#menu a:hover {
	text-decoration: none;
	background-repeat:no-repeat;
}

#menu li ul {
	width: 137px;
}

#menu li ul a {
	margin: 0;
	padding: 0;
	height: 20px;
	width: 137px;
	color: #767676;
	border: 0;
}

/* item background for FF: no problem here! */
#menu li ul li > a {
	background-image: url(../img/submenu_bg.png) !important;
	background-repeat: no-repeat;
}

/* hack for IE: PNG loaded in imageloader below text-div */
.submenu_bg {
	z-index: 103;
	display: block;
	position: absolute;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/submenu_bg.png');
	border: 0;
}

/* text in div on top of submenu_bg image so that links work and text is visible */
.submenu_text {
	width: 100%;
	padding: 2px 0px 3px 21px;
	position: absolute;
	z-index: 104;
	cursor: pointer;
}

/* rollover submenu for both IE and FF */
#menu li ul a:hover span {
	color: #FFF;
	display: block;
	background-image: url(../img/submenu_bg_ro.png);
	background-repeat: no-repeat;
}

/* dropshadow below submenu for IE: hack again */
.submenu_footer {
	height: 3px;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/submenu_footer.png');
	border: 1px solid red;
}

/* dropshadow for FF: no problem here! */
#menu li ul > .submenu_footer {
	background-image: url(../img/submenu_footer.png) !important;
	background-repeat: no-repeat;
	width: 137px;
}
