/* Top Navigation Rules

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

.topNav { background : url(../images/template/navigationBackground.gif) top center no-repeat; z-index : 10; }

.topNav ul {
	margin : 0 auto 0 auto;
	padding : 0;
	height : 43px;
	width : 760px;
	list-style : none;
	display : block;
	position : relative;
}

.topNav ul li ul {
	margin : 0 auto 0 auto;
	padding : 0 0 9px 0;
	height : auto;
	width : 160px;
	border-top : 1px #eee solid;
	background : url(../images/template/dropNavigationBackground.png) bottom left repeat-x;
	display : none;
	float : left;
	top : 43px;
	left : 2px;
}

.topNav li.link1 ul { top : 43px; left : 5px; }

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

.topNav li li { padding : 0; border-bottom : 1px #eee solid; background : none; }

/* Rules for topNav standard links */

.topNav a {
	margin : 0;
	padding : .8em 10px .8em 10px;
	width : auto;
	color : #fff;
	text-align : left;
	font-weight : normal;
	text-decoration : none;
	border : none;
	display : block;
	float : left;
	clear : none;
}

.topNav li a { color : #333; }
.topNav li li a, .topNav li li li a, .topNav li li li li a { color : #036; }
.topNav li li a:hover, .topNav li li li a:hover, .topNav li li li li a:hover { color : #333; background : url(../images/template/dropNavigationLinks.gif) top left repeat-x; }

/* 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 : 140px; text-align : left; }

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

/* Top Navigation Graphic Links
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

.topNav a.graphicLink {
	margin : 0;
	padding : 0;
	height : 43px;
	width : auto;
	border : none;
	text-indent : -5000px;
	overflow : hidden;
	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 a.link1 { width : 126px; background : url(../images/template/headerNavigationLinks.gif) 0px 0px; }
.topNav a.link2 { width : 111px; background : url(../images/template/headerNavigationLinks.gif) 634px 0px; }
.topNav a.link3 { width : 118px; background : url(../images/template/headerNavigationLinks.gif) 523px 0px; }
.topNav a.link4 { width : 128px; background : url(../images/template/headerNavigationLinks.gif) 405px 0px; }
.topNav a.link5 { width : 169px; background : url(../images/template/headerNavigationLinks.gif) 277px 0px; }
.topNav a.link6 { width : 108px; background : url(../images/template/headerNavigationLinks.gif) 108px 0px; }

.topNav a.link1:hover { width : 126px; background : url(../images/template/headerNavigationLinks.gif) 0px 86px; }
.topNav a.link2:hover { width : 111px; background : url(../images/template/headerNavigationLinks.gif) 634px 86px; }
.topNav a.link3:hover { width : 118px; background : url(../images/template/headerNavigationLinks.gif) 523px 86px; }
.topNav a.link4:hover { width : 128px; background : url(../images/template/headerNavigationLinks.gif) 405px 86px; }
.topNav a.link5:hover { width : 169px; background : url(../images/template/headerNavigationLinks.gif) 277px 86px; }
.topNav a.link6:hover { width : 108px; background : url(../images/template/headerNavigationLinks.gif) 108px 86px; }

.topNav li.selected a.link1  { width : 126px; background : url(../images/template/headerNavigationLinks.gif) 0px 43px; }
.topNav li.selected a.link2 { width : 111px; background : url(../images/template/headerNavigationLinks.gif) 634px 43px; }
.topNav li.selected a.link3 { width : 118px; background : url(../images/template/headerNavigationLinks.gif) 523px 43px; }
.topNav li.selected a.link4 { width : 128px; background : url(../images/template/headerNavigationLinks.gif) 405px 43px; }
.topNav li.selected a.link5 { width : 169px; background : url(../images/template/headerNavigationLinks.gif) 277px 43px; }
.topNav li.selected a.link6 { width : 108px; background : url(../images/template/headerNavigationLinks.gif) 108px 43px; }

/* 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 : 169px;
	list-style : none;
	background : none;
	display : block;
	float : left;
	clear : none;
	z-index : 5;
}

.sideNav div {
	height : 10px;
	width : 169px;
	background : url(../images/template/sideNavigationTop.png) top left no-repeat;
	display : block;
}

.sideNav ul {
	padding : 0 4px 9px 5px;
	width : 160px;
	background : url(../images/template/sideNavigationBackground.png) bottom left no-repeat;
}

.sideNav li {
	margin : 0;
	padding : 0;
	width : 160px;
	list-style : none;
	border-bottom : 1px #eee solid;
	background : transparent;
	display : table;
	clear : both;
}

.sideNav li a {
	margin : 0;
	padding : .8em 10px .8em 10px;
	width : 140px;
	color : #036;
	text-align : left;
	text-decoration : none;
	border : none;
	display : block;
	float : left;
}

.sideNav li a:hover { color : #333; background : url(../images/template/dropNavigationLinks.gif) top left repeat-x; }

/* Rules for topNav active links */

.sideNav li.active a { color : #fff; background : url(../images/template/sideNavLinkActive.gif) left no-repeat; }
.sideNav li.active a:hover { color : #9cf; }