/*
This stylesheet developed by:
Isaac Schlittenhart - ischlittenhart@scc.spokane.edu
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 implementation.

We appreciate credit and/or lunch. Hope you like our menus. 
If you implement them, please drop us a line; we'd like to hear from you.
Web Services 
Copyright 2006-present Web Services, Spokane Community College.
*/

.mtophor{
	position:relative;
	background:#fff;
	opacity:0.75;
	filter:Alpha(opacity='75');
	z-index:1;
	top:0px;
	left:1px;
	width:529px;
	_width:563px;
	height:1px;
	line-height:0;
	margin:0px;
	padding:0px;
}
/*horizontal nav*/
#navigation {
	position:absolute;
	top:0px;
	left:1px;
	font-family:Tahoma, sans-serif;
	font-weight: 300;
	width: 100%;
	z-index: 1000;
}
#navigation a {
	display: block;
	color: #000;
	background: #FFF;
	text-decoration: none;
	padding: 4px 10px;
	margin:0px;
}

#navigation li ul a {
	border-width: 1px;
	border-style: solid;
	border-color: #FDFFFE #CACBCD #CACBCD #bbb;
	color: #000;
	background: #EEF;
	text-decoration: none;
	
}

#navigation a.root { 
	height:24px;
	_height:23px;
	font-size:12px;
	font-weight: 600;
	color:#3366CC;
	background-color:#FFF;
	filter:Alpha(opacity='75');
	opacity:.75;
	line-height: 1.9em;
	padding: 0px 10px;
	_width:100%;
}

#navigation a.flyout {
	background: #FFF url( "../_images/ydownboxed.gif" ) no-repeat 97% 50%;
	padding-right: 30px;
}

#navigation a:hover {
	color: #FFF;
	background: #6699cc;
	text-decoration: none;
}

/*Styles for flyout menus*/
/*Style for flyout root. Creates pseudo color:inherit;*/
div#navigation ul li.flyout:hover a, 
	#navigation a.flyout:hover, 
	#navigation ul li.flyout:hover a:hover
	{
		background: #6699cc url( "../_images/yon_downboxed.gif" ) no-repeat 97% 50%;
		color:#fff;
	}
	/*Redefine the a for lower level menues. Remember to go 2 layers deep*/ 
	div#navigation ul li.flyout:hover li a,
    #navigation ul ul li.flyout:hover li a, 
    #navigation ul ul ul li.flyout:hover li a
	{
		color:#000;
		background: #EEF;
	}
	div#navigation ul li.flyout:hover li a.flyout, 
	div#navigation ul li.flyout:hover ul li:hover li a.flyout, 
	div#navigation 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#navigation ul li.flyout:hover ul li a:hover,
	div#navigation ul ul li.flyout:hover li a:hover,
	div#navigation ul ul ul li.flyout:hover li a:hover
	{
		color:#FFF;
		background: #6699cc;
	}
/*Style for flyout second level. Creates pseudo color:inherit; same as above but uses out arrow instead of down*/
	div#navigation ul li.flyout:hover ul a.flyout,
	div#navigation ul ul li.flyout:hover ul a.flyout,
	div#navigation ul ul ul li.flyout:hover ul a.flyout
	{
		background: #EEF url( "../_images/youtboxed.gif" ) no-repeat 97% 50%;
		color:#000;
	}
	div#navigation ul li.flyout:hover ul li:hover a.flyout,
	div#navigation ul li.flyout:hover ul li li:hover a.flyout,
	div#navigation 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;
	}
	div#navigation ul li.flyout:hover ul li:hover li.flyout:hover li.flyout:hover li a.flyout
	{
		background: #EEF url( "../_images/youtboxed.gif" ) no-repeat 97% 50%;
		color:#000;
	}
	div#navigation ul li.flyout:hover ul li:hover li:hover li:hover a.flyout,
	div#navigation ul li.flyout:hover ul li:hover ul li:hover ul li:hover ul li:hover a.flyout:hover,
	div#navigation ul li.flyout:hover ul li:hover li:hover li.flyout:hover li:hover a.flyout
	{
		background: #6699CC url( "../_images/yon_outboxed.gif" ) no-repeat 97% 50%;
		color:#FFF;
	}
/*end flyout styles*/
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation ul li 
{
  display:inline;
	float: left;
	position:relative;
	background:transparent;
}

#navigation ul ul li {
  clear: left;
  margin-top: -1px;
  width: 14em;
	vertical-align: bottom; /* IE5/win bugfix */
}
/*used to create opacity for flyouts*/
#navigation ul ul li a{
	filter:Alpha(opacity=90);
	opacity:.95;
}
div#navigation ul ul li:hover div {
	display: inline;
}
#navigation ul ul {
	width:14em;
	_width: 20em;
	position: absolute;
	z-index: 2000;
	padding: .5em 3em 3em 3em;
	margin: -.5em -3em -3em -3em;
	top: 26px;
	_top: 24px;
	display: none;
	left: auto;
}

#navigation ul ul ul {
	top: 0;
	left: 100%;
}

div#navigation ul ul, div#navigation ul li:hover ul ul, div#navigation ul ul li:hover ul ul {
	/*non hover rules*/
	display: none;
	top: 1px;
}

div#navigation ul li:hover ul, div#navigation ul ul li:hover ul, div#navigation ul ul ul li:hover ul {
	/*hover rules*/
	display: block;
	left: 14em;
}
div#navigation ul li:hover ul, div#navigation ul li ul 
{
  /*first level hovers position under horizontal rule*/
  left: auto;
  top:25px;
}

div#navigation ul li:hover div
{
	display:inline;
}

/*Custom menu classes*/
#navigation li.strong a {
	font-weight: 600;
}
/*Fix strong inheritance*/
#navigation li.strong li a {
	font-weight: normal;
}
.indent * {
	padding-left: 1000px;
}
#navigation ul li a.root { border-top:1px solid #FFF;}
#menu .navigationedges{display:none;}

