@charset "utf-8";
/* CSS Document */

#wrap {
	width:28em;
	/*Top:-5px;*/
	position:inline;
	padding:0.05em 0.05em 0.05em 0.05em;
	vertical-align:top; text-align:left;
	background:none;
}



ul#navigation{
	font-family: "Calibri", "Verdana", "Bookman Old Style", Tahoma;
	font-size: 18px	; z-index:200;
	text-decoration: none;
	position:relative; font-weight:bold;
	display: block;	
}
ul#navigation, ul#navigation ul {
	padding: 0em;
	margin:  0em;
	list-style: none;	
	
}
ul#navigation li { 
	line-height : 1em;
	position: relative;
	float: left;
}
ul#navigation>li li { /* Needed for Opera 9, maybe because it's decent CSS. Hide from IE6 */
	float: none;
}

#navigation a {
	display: block;
	color: white;
	vertical-align:middle;
	background-color: #ff0000;  /* top line color */
	line-height : 1.1em;
	padding: 4px 0.5em 4px 0.5em;
	text-decoration: none;
	border-right : 1px solid white;
	border-bottom : 1px solid #ff0000 
}

/* IE 6 ETC */
ul#navigation a:hover {
	color: #3671b4;
	background-color: #808000;/*78C381*/
	
}

ul#navigation li li a {
	width: 5em; /*           ****CHANGE-SUBMENU SET WIDTH **** */
	text-align:left; /*           ****CHANGE SUBMENU WIDTH**** */
}
ul#navigation li li li a {
	width:5em; /*           ****CHANGE-SUBMENU SET WIDTH **** */
	text-align:left;
}
ul#navigation li li a {
	width: 8em; /*           ****CHANGE SUBMENU WIDTH**** */
}
ul#navigation li li li a {
	width: 8em; /*           ****CHANGE SUBMENU WIDTH**** */
}

ul#navigation li ul {
	position : absolute;
	left: -999em;
}
#navigation li:hover ul ul, #navigation li.sfhover ul ul {
	left: -999em;
}

#navigation li:hover ul, #navigation li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul {
	top: 0;
	left:0em;
	padding 5 5 5 5;
	margin-left: 100%;
	
}

/*					****DISPLAYS HORIZONTAL MENU**** */
#navigation li:active ul, #navigation li:hover ul, #navigation li.sfhover ul {
   	top: 100%;
	margin-left: 0;
	
}
/*div#menu {
	width:100%;
}*/

#navigation span:hover, #navigation span.sfhover {
	cursor:default;
}

/* BACKGROUND EFFECTS */

/* Allows each succesive parent list item and the hovered submenu to have a lighter background color */

#navigation li:hover a, #navigation li:hover span {
	color: white; border-bottom:1px solid #ff0000;
	background-color: #FF4444;/* This is hover on top line, and background on first level from there LI */

}
#navigation li.sfhover a, #navigation li.sfhover span {
	color: white; border-bottom:1px solid #ff0000;
	background-color: #FF4444;/* This is hover on top line, and background on first level from there LI */

}
ul#navigation li ul li:hover a, ul#navigation li ul li:hover span, ul#navigation li ul li.sfhover a, ul#navigation li ul li.sfhover span {
	color: white; border-bottom:1px solid white;
	background-color: #FF6666;/* hover on first level - and background for second level LI UL LI */
}
ul#navigation li ul ul li:hover a, ul#navigation li ul ul li:hover span, ul#navigation li ul ul li.sfhover a, ul#navigation li ul ul li.sfhover span {
	color: white; border-bottom:1px solid white;
	background-color: #FF3333;/* hover on second level (LI UL UL LI) */
}


</style>

<!--[if lt IE 7]>

<style type="text/css">
ul#navigation li ul { /* Just to help IE6 along */
	width : 8em; background:#C0C0C0;
}
</style>

<script type="text/javascript" src="sfhover.js"></script>
<script type="text/javascript">
    addEvent(window, 'load', doIEStuff);
</script>
<![endif]-->