/*       A good page for studying styling Son of Sucker Fish menu can be: http://www.htmldog.com/ptg/archives/000050.php
	http://www.csscreator.com/node/19621
 */
#menu { color: #9c9b9b; margin: 0; /* all lists */
	float: left; font-size:9px; font-family: Verdana; word-spacing: 2px; letter-spacing: 3px; }

#menu ul { margin: 0; /* all lists */
	padding: 0; }

#menu li { background-repeat: repeat; background-attachment: scroll; background-position: 0 0; margin: 0; /* all list items */
	padding: 0; float: left; display: block; cursor: pointer; }

#menu li ul {
	width: 10em;
	position: absolute; /* second-level lists */
	z-index: 99;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	width: 13em;

}

#menu li ul ul { margin: -1.5em 0 0 13em; /* third-and-above-level lists */
}

#menu li li {
	padding: 0 1em 0 0;
	margin: 0;
	width: 11.9em;
}

#menu ul a {
	
	width: 12em;
}

#menu li:hover ul ul, #menu li:hover ul ul ul,
#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
	left: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul,
#menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
	left: auto;
}

/* STYLING THE MENU
-----------------------------------*/
#menu li ul {  }

#menu li ul li {  }

#menu li ul a { color: #d1dee9; padding: 4px 16px 4px 10px; font-weight: normal; background-image: url(transbutnblu.png); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-transform: none; border: dotted 1px #000; }

#menu li ul a:hover,
#menu li ul a:active,
#menu li ul a:focus {
	color: #FFFFFF;
}

#menu li a { margin: 0; display: block; color: #cccfdc; font-weight: bold; background-repeat: repeat-x; background-attachment: scroll; background-position: right top; text-decoration: none; padding: 5px 10px; }

#menu li a:hover { color: #fff; background-image: url(transbutnbluO.png); }

#menu li a.active { background-repeat: no-repeat; background-attachment: scroll; background-position: right center; }

#menu li a.active:hover,
#menu li a.active:active,
#menu li a.active:focus {
}

#menu li li a.active { color: #ffffff; font-weight: bold; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }

#menu li.havechild {  }

#menu li.levelhavechild { background-repeat: no-repeat; background-attachment: scroll; background-position: 100% 50%; }
#menu li.levelhavechild:hover { background-repeat: no-repeat; background-attachment: scroll; background-position: 94% 50%; }
#menu li:hover ,
#menu li.sfhover { background-repeat: no-repeat; background-attachment: scroll; background-position: right center; }

#menu ul li:hover, #menu ul ul li:hover,
#menu ul li.sfhover, #menu ul ul li.sfhover { background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }