/*
PURE CSS FLYOUT NAVIGATION version 1.0
  developed by:
Isaac Schlittenhart - ischlittenhart@scc.spokane.edu
Copyright 2006-present Web Services, Spokane Community College.

Special thanks to the following sites for ideas and htc hover file:
	http://www.seoconsultants.com/css/menus/tutorial/
	http://www.positioniseverything.net/css-dropdowns.html
	http://www.xs4all.nl/~peterned/csshover.html

Notes for implementation:
The csshover.htc is needed for IE to function. 
See style tag with title="IE Specific rules" for other necessary styles.
This version is only capable of a total of 5 nested ul's. The style sheet can
be modified to accomidate more, but it must be noted that more than this amount will
function somewhat slower in IE and is not best for interface design.
To add or remove flyout levels note the "Styles for flyout menus" section and the
"Hide Show code" section. In the "Styles for flyout menus" section, the rules
must be stagered so that they can be properly inherited. 

I appreciate credit and/or lunch. Hope you like my menus. 
If you implement them, I'd like to hear from you.
Isaac.S
*/
/*Core below*/
.mtop {
position: relative;
background: #fff; 
opacity:0.90;
z-index:1;
top:0px;
left:1px;
width:115px;
height:1px;
line-height:0;
margin:0px;
padding:0px;
filter:Alpha(opacity='85');
}
.mbottom {
position: relative;
background: #fff; 
opacity:0.75;
z-index:1;
top:0px;
_top:0px;
left:1px;
width:115px;
height:1px;
line-height:0;
margin:0px;
padding:0px;
filter:Alpha(opacity='75');
}
/*Core below*/
#menu {
	position: relative;
	top: 0px;
	font-family: Verdana, sans-serif;
	font-weight: 300;
	font-size:11px;
	width: 117px;
	z-index: 1000;
}
#menu a {
	display: block;
	color: #000;
	background: #FFF;
	text-decoration: none;
	padding: 4px 10px 4px 10px;
	margin: 0px;
}

#menu h2 a
{
  border: none;
  text-decoration: none;
}

#menu h2
{
	display: block;
  color: #000;
  background: #FFF;
  text-decoration: none;
}

#menu li ul a {
	border-width: 1px;
	border-style: solid;
	border-color: #FDFFFE #CACBCD #CACBCD #bbb;
	color: #000;
	background: #EEF;
	text-decoration: none;
}
#menu a.root, #menu li.root h2{
	opacity:.75;
	filter:Alpha(opacity='75'); 
}

#menu a.flyout {
	background: #FFF url( "../_images/youtboxed.gif" ) no-repeat 97% 50%;
	padding-right: 20px;
}

#menu a:hover {
	color: #FFF;
	background: #6699cc;
	text-decoration: none;
}

/*Styles for flyout menus*/
/*Style for flyout root. Creates pseudo color:inherit;*/
	 
	/*Redefine the a for lower level menues. Remember to go 2 layers deep*/
	div#menu ul li.flyout:hover li a, 
	#menu ul ul li.flyout:hover li a {
		color: #000;
		background: #EEF;
	}
	div#menu ul li.flyout:hover ul li a:hover, 
	#menu ul ul li.flyout:hover li a:hover {
		color: #FFF;
		background: #6699cc;
	}
	div#menu a.flyout:hover,
	div#menu ul li.flyout:hover a.flyout, 
	div#menu ul li.flyout:hover li a.flyout
	{
		background: #6699CC url( "../_images/yon_outboxed.gif" ) no-repeat 97% 50%;
		color:#FFF;
	}

	div#menu ul li.flyout:hover li a.flyout, 
	div#menu ul li.flyout:hover ul li:hover li a.flyout, 
	div#menu ul li.flyout:hover ul li:hover li.flyout:hover li a.flyout
	{
		background: #EEF url( "../_images/youtboxed.gif" ) no-repeat 97% 50%;
		color:#000;
	}
	div#menu ul li.flyout:hover ul li:hover a.flyout,
	div#menu ul li.flyout:hover ul li li:hover a.flyout,
	div#menu ul li.flyout:hover ul li:hover li:hover li:hover a.flyout
	{
		background: #6699CC url( "../_images/yon_outboxed.gif" ) no-repeat 97% 50%;
		color:#FFF;
	}
/*end flyout styles*/
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu ul li {
	position:relative;
}

#menu ul ul li {
	clear:left;
	margin-left: -1px;
  width: 14em;
	vertical-align: bottom; /* IE5/win bugfix */
}
/*used to create opacity for flyouts*/
#menu ul ul li a 
{
  opacity:.95;
	filter:Alpha(opacity=95);
}
div#menu ul ul li:hover div {
	display: inline;
}
#menu ul ul {
	width:14em;
	_width:20em;
	position: absolute;
	z-index: 1000;
	top:0px;
	left: auto;
	padding:3em;
	margin:-3em;
	display: none;
}

#menu ul ul ul {
	top: 0px;
	left: 100%;
}
/*Hide Show code*/
	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 {
		/*non hover rules*/
		display: none;
	}

	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 {
		/*hover rules*/
		display: block;
		left:117px;
	}
  div#menu ul ul li:hover ul, div#menu ul ul li ul 
  {
    /*first level hovers position under horizontal rule*/
    left: 14em;
  }
/*End Hide Show code*/
/* Commented backslash hack hides rule from IE5-Mac \*/
#menu a {
	float: none;
}
/* End IE5-Mac hack */
div#menu ul li:hover div {
	display: inline;
}
#menu #coverme {
	cursor: hand;
	position: absolute;
	top: 0px;
	width: 140px; _width:0px;
	height:1.5em;
	border:solid 0px #000;
	background:transparent;
	z-index:-1;
}
/*Custom menu classes*/
#menu li.strong a {
	font-weight: 600;
}
/*Fix strong inheritance*/
#menu li.strong li a {
	font-weight: normal;
}

#menu li.center h2, #menu li.center a {
	text-align: center;
}

#menu .opacity80 h2, #menu .opacity80 h2 a {
	font-size: 11px;
	font-weight: 600;
	color: #3366CC;
	padding: 0px;
	background: #FFF;
	filter:Alpha(opacity='85'); opacity:.90;
/*Width 100 needed for opacity to function properly*/
_width:100%;
}
#menu .menu_padbottom a
{
  padding-bottom:10px;
}
#menu .header h2, #menu .header h2 a {
	font-size: 11px;
	font-weight: 600;
	color: #3366CC;
	padding: 3px 3px 3px 3px; /*Width 100 needed for opacity to function properly*/ _width:100%;
}

#menu .miindent a{
	padding-left:15px;
}