﻿/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/*Menu Orientation*/
#topnav{
	margin: 0 13px 0 218px;
	padding: 0;
	position: relative;
	height: 42px;
	min-height: 42px;
	z-index: 500;	
	background: #505050 url('images/bg_menu.jpg') repeat-x left top;
	width: 707px;	
	clear: both;
	top: 18px;
}

#topnav #menu,
#topnav #menu ul{
	margin: 0;
	padding:0;
	list-style: none;
}

#topnav #menu li{
	margin: 0;
	padding: 0 2px 0 0;
	float: left;
	text-align: left;
	background: url('images/bg_menu_seperator.jpg') no-repeat right bottom;
	display: inline;
}

#topnav #menu li.last{
	margin: 0;
	padding: 0;
	float: left;
	text-align: left;
	background: none;
}

#topnav #menu li.last:hover {
	background: none;
}

#topnav #menu a, 
#topnav #menu a:visited {
	margin: 0;
	padding: 15px 17px 10px 18px;
	display: block;	
	text-decoration: none;	
	font-size: 13px;
	color:#ffffff;
	float: left;
	display: inline;
}

/* For accessibility of the top level menu when tabbing //////// On Hold Buggie
#topnav #menu li a:active, 
#topnav #menu li a:focus {
	padding: 10px 17px 0 18px;
	border-bottom: 7px solid #fe0000;
}*/

/* For Non-IE browsers and IE7*/ 
#topnav #menu li:hover {	
	padding: 0 2px 0 0;
	background: url('images/bg_menu_seperator.jpg') no-repeat right bottom;
	position: relative;
}

/* For IE5.5 and IE6 give the hovered links a position relative and a 
change of background and foreground color. This is needed to trigger IE 
to show the sub levels */
* html #topnav{
	left: 2px;
}
* html #topnav #menu li a:hover {
	margin: 0;
	padding: 15px 17px 3px 18px;
	display: block;	
	text-decoration: none;	
	font-size: 13px;
	color:#ffffff;
	float: left;
	display: inline;
}


* html #topnav #menu li a:hover ul {
	margin: 0;
	display: block;
	position: absolute;
	padding: 10px 0;
	background: transparent url('images/transparent.gif');
	background: #000000;
	top: 41px;
	left: 0px;
	width: 260px;
}
* html #topnav #menu li.last a:hover ul {
	margin: 0;
	display: block;
	position: absolute;
	padding: 10px 0;
	background: transparent url('images/transparent.gif');
	background: #000000;
	top: 41px;
	left: -169px;
	width: 260px;
}

* html #topnav #menu li a:hover ul li{
	margin: 0;
	padding: 0;
	background: none;
	float: left;
	display: block;
}
* html #topnav #menu li a:hover ul li a{
	margin: 0;
	padding: 4px 17px;
	border: none;
	float: left;
	clear: both;
	display: block;
	width: 226px;
}

* html #topnav #menu li a:hover ul li a:hover ul{
	padding: 6px 0;
	margin: 0;
	border: 1px solid #C5C5C5;
	background: #EDEDED;
	top: 0;
	left: -211px;
	width: 210px;
	display: block;
	position: absolute;
	visibility: visible;
}

* html #topnav #menu li a:hover ul li a:hover ul li{
	margin: 0;
	padding: 1px 0;	
}
* html #topnav #menu li a:hover ul li a:hover ul li a{
	padding: 0 10px;
	margin: 0;
	color: #000000;
	font-size: 11px;
	margin: 0;
	border: none;
	width: 190px;
}
* html #topnav #menu li a:hover ul li a:hover ul li a:hover{
	background: #666666;
	color: #ffffff;
}

/* Set up the sublevel lists with a position absolute for flyouts and 
overrun padding. The transparent gif is for IE to work*/ 
#topnav #menu li ul {
	display: none;	
}

/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#topnav #menu li:hover > ul {
	display: block;
	position: absolute;	
	padding: 10px 0;
	background: black;
	width: 260px;
}
/* For Non-IE and IE7 make the sublevels visible on list hover. Last class */
#topnav #menu > li.last:hover > ul{
	display: block;
	position: absolute;	
	padding: 10px 0;
	background: black;
	width: 260px;
	top: 40px;
	left: -166px;
}

/* Position the first sub level beneath the top level links */
#topnav #menu > li:hover > ul {
	top: 40px;
	left: 0;
}

/* Style the first sub level beneath the top level links li*/
#topnav #menu > li:hover > ul > li{
	padding: 0;
	margin: 0;
	background-image: none;
	white-space: nowrap;
	width: 100%;
}
#topnav #menu > li:hover > ul > li > a{
	padding: 4px 17px;
	margin: 0;
	border: none;
	width: 226px;	
}

/* Make the hovered list color persist IN OTHER CSS FILES
#topnav #menu li:hover > a {
	border-bottom: 7px solid #fe0000;
}
#topnav #menu > li:hover > ul > li:hover > a{	
	background: #fe0000;
	color: #ffffff;	
}*/


/* get rid of the table */
#topnav #menu table {
	position: absolute;
	border-collapse: collapse;
	top: 0;
	left: 0;
	z-index: 0;
	font-size: 1em;
}

/* keep the third level+ hidden when you hover on first level link */
#topnav #menu li a:hover ul ul {
	visibility: hidden;
}
#topnav #menu li:hover ul ul{
	padding: 6px 0;
	margin: 0;
	border: 1px solid #C5C5C5;
	background: #EDEDED;
	top: 0;
	left: -212px;
	width: 210px;
}
#topnav #menu li:hover ul ul li{
	padding: 1px 0;
	margin: 0;
	background-image: none;
	white-space: nowrap;
	width: 100%;
}

#topnav #menu li:hover ul ul li a{
	padding: 0 10px;
	margin: 0;
	color: #000000;
	font-size: 11px;
	margin: 0;
	border: none;
	width: 190px;
}
#topnav #menu li:hover ul ul li a:hover{
	background: #666666;
	color: #ffffff;
}

#sidenav #menu,
#sidenav #menu ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidenav #menu > li > a{
	margin: 0;
	padding: 3px 0 3px 12px;
	text-decoration: none;
	color: #000000;
	font-size: 110%;
	display: block;
}
#sidenav #menu > li > a:hover,
#sidenav #menu > li.selected > a{
	color: #000000;
	background: #ffffff url('images/bg_sidemenu_hover.jpg') repeat-y left top;
}

#sidenav #menu ul > li > a{
	margin: 0;
	padding: 0 0 0 22px;
	text-decoration: none;
	font-size: 80%; 
	color: #666666;
	display: block;
}
#sidenav #menu ul > li > a:hover{
	color: #000000; 
	font-weight: inherit;	
}
#sidenav #menu ul > li.selected > a {
	color: #000000; 
	font-weight: bold;
} 

/*IE 6 CSS Fixes*/
* html #sidenav #menu li{
	margin: 0;
	padding: 0;
}
* html #sidenav #menu li a{
	margin: 0;
	padding: 3px 0 3px 12px;
	text-decoration: none;
	color: #000000;
	font-size: 110%;
	display: block;
	width: 208px;
	
}
* html #sidenav #menu li a:hover,
* html #sidenav #menu li.selected a{
	color: #000000;
	background: #ffffff url('images/bg_sidemenu_hover.jpg') repeat-y left top;
}
* html #sidenav #menu ul li a{
	margin: 0;
	padding: 0 0 0 22px;
	text-decoration: none;
	font-size: 80%; 
	color: #666666;
	display: block;
	width: 196px;
}

* html #sidenav #menu li.selected ul li a{
	margin: 0;
	padding: 0 0 0 22px;
	text-decoration: none;
	font-size: 80%; 
	color: #666666;
	display: block;
	width: 196px;
	background: none !important;
}

* html #sidenav #menu ul li a:hover{
	color: #000000; 
	font-weight: inherit;
	background: none;	
}
* html #sidenav #menu ul li.selected  a {
	color: #000000; 
	font-weight: bold;
	background: none;
}







