/* Standard (top) Navigation Rules

	NOTE! - Rules for creating a side navigation are listed below the standard (top) navigation rules.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

.navigation {
	margin : 0 auto 0 auto;
	padding : 0;
	width : 756px;
	display : block;
	clear : both;
	position : relative;
}

.navigation a {
	margin : 0;
	padding : .5em 10px .5em 10px;
	width : auto;
	text-align : left;
	font-weight : normal;
	border-right : none;
	display : block;
	float : left;
	clear : none;
}

.navigation ul {
	margin : 0;
	padding : 0;
	width : auto;
	list-style : none;
	display : block;
	float : left;
}

.navigation li {
	margin : 0;
	padding : 0;
	width : auto;
	border : none;
	display : block;
	float : left;
	clear : none;
	position : relative;
}

/* These rules are the default settings for all levels of sub-navigation */

.navigation li ul, .navigation li li ul, .navigation li li li ul {
	margin : 0;
	padding : 0;
	width : 160px;
	display : block;
	position: static;
	clear : both;
}

/* Top Navigation Rules

	The following rules are specific to top navigation
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

.topNav { z-index : 10; }

.topNav ul {
	margin : 0;
	padding : 0 212px 0 0;
	height : 30px;
	width : 544px;
	list-style : none;
	background : url(/images/template/navigationBackground.gif) top left no-repeat;
	display : block;
	float : left;
	position : relative;
}

.topNav li ul { top : 30px; left : 0; border : none; background : none; }
.topNav li li ul, .topNav li li li ul { border : none; background : none; }

.topNav li {
	margin : 0;
	padding : 0;
	width : auto;
	border : none;
	background : url(/images/template/subNavigationBackground.gif) top left repeat-x #e5e5e5;
	display : block;
	position : relative;
	float : left;
}

.topNav li li {
	padding : 0;
	border-right: 1px #c6c6c6 solid;
	border-left: 1px #c6c6c6 solid;
	border-bottom : 1px #999 solid;
	background : url(/images/template/subNavigationBackground.gif) top left repeat-x #e5e5e5;
}

/* Rules for topNav standard links */

.topNav a {
	margin : 0;
	padding : .5em 10px .5em 20px;
	width : auto;
	color : #fff;
	text-align : left;
	font-weight : bold;
	border : none;
	background : url(/images/template/bulletNavArrow3.gif) left no-repeat;
	display : block;
	float : left;
	clear : none;
}

.topNav a:hover { color : #c30; }

.topNav li a { color : #333; }
.topNav li li a, .topNav li li li a, .topNav li li li li a { color : #333; }
.topNav li li a:hover, .topNav li li li a:hover, .topNav li li li li a:hover { color : #c30; }

/* Rules for topNav selected links */

.topNav li.selected { background : url(/images/nav_divide.gif) top right no-repeat; }
.topNav li li.selected, .topNav li li li.selected { background : transparent; }

/* Rules for topNav active links */

.topNav li.active { background : url(/images/nav_divide.gif) top right no-repeat; }
.topNav li li.active, .topNav li li li.active { background : transparent; }

/* These rules set the values for the different link states for the menu links */

.topNav li a { width : auto; text-align : center; }

.topNav li li a { width : 120px; text-align : left; }

/* a link in a <li> with the leaf class has no children */

.topNav li.leaf a { width : auto; text-align : center; }
.topNav li li.leaf a { width : 140px; text-align : left; }

/* "click" links only allow room for a "+" they do not link to an href, their main purpose is that they
expand to reveal children when clicked */

.topNav a.click { padding : .5em 0 .5em 0; width : 20px; text-align : center; }

/* "hover" links expand to reveal children when hovered over but can also go to an href when clicked */

.topNav li li a.hover { width : 140px; text-align : left; }

/* Side Navigation Rules

	The following rules will transform the standard (top) navigation into a side-bar nav when the "sideNav" class is applied
	to both the "#content" div and the ".navigation" div. By applying the "sideNav" class in those to places you force the 
	navigation and the content divs to conform to a set size and float left, note the combined width of the two divs should 
	add up to the width of your wrapper div.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

.sideNav {
	margin : 0;
	padding : 0;
	width : 181px;
	list-style : none;
	display : block;
	float : left;
	clear : none;
	z-index : 5;
}

.contentSideNav { padding : 0 0 1em 0; width : 575px; float : left; clear : right; }


.sideNav ul {
	padding : 0;
	width : 181px;
}

.sideNav li {
	margin : 0;
	padding : 0;
	width : 181px;
	list-style : none;
	border : none;
	background : url(/images/template/sideNavLinkBackground.gif) bottom left no-repeat;
	display : table;
	clear : both;
}

.sideNav li li, .sideNav li li li { background : url(/images/template/sideNavSubLinkBackground.gif) bottom left no-repeat; }

.sideNav li a {
	margin : 0;
	padding : .5em 10px .5em 35px;
	width : 126px;
	color : #333;
	text-align : left;
	font-weight : bold;
	border : none;
	background : url(/images/template/bulletNavArrow1.gif) left no-repeat;
	display : block;
	float : left;
}

.sideNav li li a, .sideNav li li li a { padding : .5em 10px .5em 45px; font-weight : normal; background : url(/images/template/bulletNavArrow2.gif) left no-repeat; }

.sideNav li a:hover { color : #369; }

/* Rules for sideNav active links */

.sideNav li.active a { color : #c30; }
.sideNav li.active a:hover { color : #039; }

.sideNav li.active li a, .sideNav li.active li li a { color : #333; }

.sideNav li li.active a, .sideNav li li li.active a { color : #c30; font-weight : bold; }


/* sideNav sub links only display when the containing <li> is given the "active" class */

.sideNav li.active ul, .sideNav li.active li ul, .sideNav li.active li li ul { display : block; background : url(/images/template/sideNavLinkBackground.gif) top left no-repeat #f4f4f4; }

/* Graphic Links

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

.topNav a.graphicLink {
	margin : 0;
	padding : 0;
	height : 30px;
	width : auto;
	border : none;
	text-indent : -5000px;
	display : block;
	float : left;
	clear : none;
}

/* These rules set widths for the links in the navigation

	For a top navigation I think it is best to force some kind of restraint on the growth of the text.
	Simply applying widths through classes can make a liquid design maintain some sort of order 
	
	If used in addition to ".graphicLink" you would specify the background images in the seperate classes here. */
	
.topNav li a.link1 { width : 68px; background : url(/images/template/navigationLinks.gif) 0px 0px; }
.topNav li a.link2 { width : 101px; background : url(/images/template/navigationLinks.gif) 688px 0px; }
.topNav li a.link3 { width : 94px; background : url(/images/template/navigationLinks.gif) 587px 0px; }
.topNav li a.link4 { width : 98px; background : url(/images/template/navigationLinks.gif) 493px 0px; }
.topNav li a.link5 { width : 93px; background : url(/images/template/navigationLinks.gif) 395px 0px; }
.topNav li a.link6 { width : 90px; background : url(/images/template/navigationLinks.gif) 302px 0px; }

.topNav li a.link1:hover { width : 68px; background : url(/images/template/navigationLinks.gif) 0px 30px; }
.topNav li a.link2:hover { width : 101px; background : url(/images/template/navigationLinks.gif) 688px 30px; }
.topNav li a.link3:hover { width : 94px; background : url(/images/template/navigationLinks.gif) 587px 30px; }
.topNav li a.link4:hover { width : 98px; background : url(/images/template/navigationLinks.gif) 493px 30px; }
.topNav li a.link5:hover { width : 93px; background : url(/images/template/navigationLinks.gif) 395px 30px; }
.topNav li a.link6:hover { width : 90px; background : url(/images/template/navigationLinks.gif) 302px 30px; }

/* Use active classes in addition to or in replacement of link class to highlight the active section */

.topNav li a.active1, .topNav li a.active1:hover { width : 68px; background : url(/images/template/navigationLinks.gif) 0px 30px; }
.topNav li a.active2, .topNav li a.active2:hover { width : 101px; background : url(/images/template/navigationLinks.gif) 688px 30px; }
.topNav li a.active3, .topNav li a.active3:hover { width : 94px; background : url(/images/template/navigationLinks.gif) 587px 30px; }
.topNav li a.active4, .topNav li a.active4:hover { width : 98px; background : url(/images/template/navigationLinks.gif) 493px 30px; }
.topNav li a.active5, .topNav li a.active5:hover { width : 93px; background : url(/images/template/navigationLinks.gif) 395px 30px; }
.topNav li a.active6, .topNav li a.active6:hover { width : 90px; background : url(/images/template/navigationLinks.gif) 302px 30px; }

/* Use this class to create a graphic link dtyle instead of text */

.graphicLink { height : 65px; width : auto; overflow : hidden; }