/* 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 : 760px;
	display : block;
	float : left;
	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;
}

.navigation li { background : #555; }
.navigation li li, .navigation li li li, .navigation li li li li { background : #555; }
.navigation li a, .navigation li li a, .navigation li li li a { color : #fff; }

/* Top Navigation Rules

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

.topNav { z-index : 10; }

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

.topNav li ul {
	margin : 0;
	padding : 0;
	border-top : 4px #996 solid;
	position : absolute;
	top : 22px;
	left : -1px;
}

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

.topNav li li {
	padding : 0;
	background : none;
}

/* Rules for topNav standard links */

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

.topNav a:hover { color : #36c; }

.topNav li li a { color : #c93; background : url(../images/template/navigationDropBackground.gif) top left no-repeat; }
.topNav li li.last a { padding : .3em 10px .5em 10px; background : url(../images/template/navigationDropBackground.gif) bottom left no-repeat; }
.topNav li li a:hover { color : #36c; }

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

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

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

/* Graphic Links

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

.topNav a.graphicLink {
	margin : 0;
	padding : 0;
	height : 22px;
	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 : 82px; background : url(../images/template/navigationLinks.gif) 692px 0px; }
.topNav li a.link3 { width : 116px; background : url(../images/template/navigationLinks.gif) 610px 0px; }
.topNav li a.link4 { width : 105px; background : url(../images/template/navigationLinks.gif) 494px 0px; }
.topNav li a.link5 { width : 122px; background : url(../images/template/navigationLinks.gif) 389px 0px; }
.topNav li a.link6 { width : 102px; background : url(../images/template/navigationLinks.gif) 267px 0px; }
.topNav li a.link7 { width : 73px; background : url(../images/template/navigationLinks.gif) 165px 0px; }
.topNav li a.link8 { width : 92px; background : url(../images/template/navigationLinks.gif) 92px 0px; }

.topNav li a.link1:hover { width : 68px; background : url(../images/template/navigationLinks.gif) 0px 22px; }
.topNav li a.link2:hover { width : 82px; background : url(../images/template/navigationLinks.gif) 692px 22px; }
.topNav li a.link3:hover { width : 116px; background : url(../images/template/navigationLinks.gif) 610px 22px; }
.topNav li a.link4:hover { width : 105px; background : url(../images/template/navigationLinks.gif) 494px 22px; }
.topNav li a.link5:hover { width : 122px; background : url(../images/template/navigationLinks.gif) 389px 22px; }
.topNav li a.link6:hover { width : 102px; background : url(../images/template/navigationLinks.gif) 267px 22px; }
.topNav li a.link7:hover { width : 73px; background : url(../images/template/navigationLinks.gif) 165px 22px; }
.topNav li a.link8:hover { width : 92px; background : url(../images/template/navigationLinks.gif) 92px 22px; }