/**************** menu coding *****************/
#menu {
width: 250px;
background: #FFF;
margin:10px 0px 0px 13px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width:250px;
height: 20px;
}

#menu a, #menu h2 {
font: bold 12px arial, helvetica, sans-serif;
display: block;
margin: 0;
/*padding: 1px 3px;*/
}

#menu a {
/*border-bottom: 1px solid #ccc;
padding-left:10px;*/
padding-right:10px;
}

#menu h2 {
color: #4393FF;
background: #FFF;
text-transform: uppercase;
/*padding-left: 6px; */
padding-right: 6px;
cursor:pointer;

padding-left: 12px;
background-image: url(/assets/bluedots.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}

#menu li.mlink h2 {
margin: 0;
padding: 0px 0px 0px 0px;

}

#menu li.mlink a {
font: bold 12px arial, helvetica, sans-serif;
display: block;
background-color: #FFF;
color: #4393FF;
text-decoration: none;
margin: 0;

border: none;

padding-left: 12px;
background-image: url(/assets/bluedots.gif);
background-repeat: no-repeat;
background-position: 0px 5px;

}

#menu li.mlink a:hover {
background-color: #FFF;
color: #8B438F;
text-decoration: underline;

padding-left: 12px;
background-image: url(/assets/purpledots.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}

#menu a {
color: #4393FF;
background: #FFF;
text-decoration: none;
}

#menu a:hover {
color: #4393FF;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul li {
height:20px;
background: #FFF;
}

#menu ul ul li a {
padding-left:5px;
padding-top: 2px;
height:18px;
}

#menu ul ul li a:hover {
background-color: #FFF;
color: #8B438F;
text-decoration: underline;
}

#menu ul ul{
position: absolute;
top: 12px;
left: -226px;
width: 100%;
}


#menu ul ul ul ul ul {
position: absolute;
top: 0px;
left:-148px;
width: 100%;
}

#menu ul ul {
	background-image: url(empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 8px 8px 8px 8px;
	margin: -12px 0 0 -30px;
/*	background: red;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}

#menu ul ul ul{
	padding: 8px 8px 8px 8px;
	margin: -12px 0 0 -30px;
	/* background: red; */
z-index:400;
}


#menu li li{	/* create borders around each item */
	border: 1px solid #ccc;
}
#menu ul>li + li{	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

#menu li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul,
div#menu ul ul ul li:hover ul ul
{_display: none;
visibility:hidden;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul,
div#menu ul ul ul ul li:hover ul
{_display: block;
visibility:visible;}

}