/*
 * Define the width of the div containing the primary navigation.
 */

#nav-primary { 
	width: 900px; 
	height: 47px;
}
	
#nav-primary ul {
	list-style: none;
	width: 900px;
	height: 47px;
	margin: 0 0 0 66px;
}

#nav-primary li {
    list-style: none;
	display: block;				
}

#nav-primary li a {
	text-decoration: none;
	display: block;
	float: left;	
	background: url(/assets/nav/nav-primary-1.png) no-repeat;
	text-indent: -9999px;
}


/*
 * Define the width of each li item. 
 * This is used as a letter box to show the correct part of the background image.
 */	
	
#nav-primary li#n1 a {
	width: 110px;			
	height: 47px;
}

#nav-primary li#n2 a {
	width: 152px;
	height: 47px;
}

#nav-primary li#n3 a {
	width: 171px;
	height: 47px;
}

#nav-primary li#n4 a {
	width: 137px;
	height: 47px;
}

#nav-primary li#n5 a {
	width: 152px;
	height: 47px;
}

#nav-primary li#n6 a {
	width: 69px;
	height: 47px;
}

#nav-primary li#n7 a {
	width: 109px;
	height: 47px;
}


/*
 * Position the background image within the letter boxes we have created. 
 * Use hover states to show the correct background position for hover states.
 * A negative margin is used to show the whole tab. As this doesn't work in IE a separate stylesheet is used for IE6 and below.
 */

#nav-primary li#n1 a:link, 
#nav-primary li#n1 a:visited {	
	background-position: -0px -0px;
}

	#nav-primary li#n1 a:hover, 
	#nav-primary li#n1 a:focus {	
		background-position: -0px -47px;
		width: 110px;
		margin-left: 0px;
	}

#nav-primary li#n2 a:link, 
#nav-primary li#n2 a:visited {	
	background-position: -110px -0px;
}

	#nav-primary li#n2 a:hover, 
	#nav-primary li#n2 a:focus {	
		background-position: -84px -94px;		/* bg posn of n2 (110px) minus margin-left (26px) */ 
		width: 178px;							/* width of n2 (152px) plus margin-left (26px) */
		margin-left: -26px;
	}

#nav-primary li#n3 a:link, 
#nav-primary li#n3 a:visited {	
	background-position: -262px -0px;
}

	#nav-primary li#n3 a:hover, 
	#nav-primary li#n3 a:focus {	
		background-position: -236px -141px;		/* bg posn of n3 (262px) minus margin-left (26px) */ 
		width: 197px;							/* width of n3 (171px) plus margin-left (26px) */
		margin-left: -26px;
	}

#nav-primary li#n4 a:link, 
#nav-primary li#n4 a:visited {	
	background-position: -433px -0px;
}

	#nav-primary li#n4 a:hover, 
	#nav-primary li#n4 a:focus {	
		background-position: -407px -188px;		/* bg posn of n4 (433px) minus margin-left (26px) */ 
		width: 163px;							/* width of n4 (137px) plus margin-left (26px) */
		margin-left: -26px;
	}

#nav-primary li#n5 a:link, 
#nav-primary li#n5 a:visited {	
	background-position: -570px -0px;
}

	#nav-primary li#n5 a:hover, 
	#nav-primary li#n5 a:focus {	
		background-position: -544px -235px;		/* bg posn of n5 (570px) minus margin-left (26px) */ 
		width: 178px;							/* width of n5 (152px) plus margin-left (26px) */
		margin-left: -26px;
	}

#nav-primary li#n6 a:link, 
#nav-primary li#n6 a:visited {	
	background-position: -722px -0px;
}

	#nav-primary li#n6 a:hover, 
	#nav-primary li#n6 a:focus {	
		background-position: -696px -282px;		/* bg posn of n6 (722px) minus margin-left (26px) */ 
		width: 95px;							/* width of n6 (69px) plus margin-left (26px) */
		margin-left: -26px;
	}

#nav-primary li#n7 a:link, 
#nav-primary li#n7 a:visited {	
	background-position: -791px -0px;
}

	#nav-primary li#n7 a:hover, 
	#nav-primary li#n7 a:focus {	
		background-position: -765px -329px;		/* bg posn of n7 (791px) minus margin-left (26px) */ 
		width: 135px;							/* width of n7 (109px) plus margin-left (26px) */
		margin-left: -26px;
	}
	

/*
 * Set the on states using the body id.
 */ 

#s1 #nav-primary li#n1 a:link, 
#s1 #nav-primary li#n1 a:visited {	
	background-position: -0px -47px;
	width: 110px;
	margin-left: 0px;
}

#s1 #nav-primary li#n2 a:hover, 
#s1 #nav-primary li#n2 a:focus {	
	background-position: -84px -376px;		 
	width: 178px;							
	margin-left: -26px;
}

/**/

#s2 #nav-primary li#n1 a:hover, 
#s2 #nav-primary li#n1 a:focus {	
	background-position: -0px -376px;
	width: 110px;
	margin-left: 0px;
	overflow: auto;
	position: relative;
}

#s2 #nav-primary li#n2 a:link, 
#s2 #nav-primary li#n2 a:visited {	
	background-position: -84px -94px;		 
	width: 178px;							
	margin-left: -26px;
}

#s2 #nav-primary li#n3 a:hover, 
#s2 #nav-primary li#n3 a:focus {	
	background-position: -236px -423px;		
	width: 197px;							
	margin-left: -26px;
	position: relative;
}

/**/

#s3 #nav-primary li#n2 a:hover, 
#s3 #nav-primary li#n2 a:focus {	
	background-position: -84px -423px;		
	width: 178px;							
	margin-left: -26px;
	overflow: auto;
	position: relative;
}

#s3 #nav-primary li#n3 a:link, 
#s3 #nav-primary li#n3 a:visited {	
	background-position: -236px -141px;		
	width: 197px;							
	margin-left: -26px;
}

#s3 #nav-primary li#n4 a:hover, 
#s3 #nav-primary li#n4 a:focus {	
	background-position: -407px -470px;		
	width: 163px;							
	position: relative;
}

/**/

#s4 #nav-primary li#n3 a:hover, 
#s4 #nav-primary li#n3 a:focus {	
	background-position: -236px -470px;		
	width: 197px;							
	margin-left: -26px;
	overflow: auto;
	position: relative;
}

#s4 #nav-primary li#n4 a:link, 
#s4 #nav-primary li#n4 a:visited {	
	background-position: -407px -188px;		
	width: 163px;							
	margin-left: -26px;
}

#s4 #nav-primary li#n5 a:hover, 
#s4 #nav-primary li#n5 a:focus {	
	background-position: -544px -517px;		
	width: 178px;							
	margin-left: -26px;
	position: relative;
}

/**/

#s5 #nav-primary li#n4 a:hover, 
#s5 #nav-primary li#n4 a:focus {	
	background-position: -407px -517px;		
	width: 163px;							
	margin-left: -26px;
	overflow: auto;
	position: relative;
}

#s5 #nav-primary li#n5 a:link, 
#s5 #nav-primary li#n5 a:visited {	
	background-position: -544px -235px;		
	width: 178px;							
	margin-left: -26px;
}

#s5 #nav-primary li#n6 a:hover, 
#s5 #nav-primary li#n6 a:focus {	
	background-position: -696px -564px;		
	width: 95px;							
	margin-left: -26px;
	position: relative;
}

/**/

#s6 #nav-primary li#n5 a:hover, 
#s6 #nav-primary li#n5 a:focus {	
	background-position: -544px -564px;		 
	width: 178px;							
	margin-left: -26px;
	overflow: auto;
	position: relative;
}

#s6 #nav-primary li#n6 a:link, 
#s6 #nav-primary li#n6 a:visited {	
	background-position: -696px -282px;		
	width: 95px;							
	margin-left: -26px;
}

#s6 #nav-primary li#n7 a:hover, 
#s6 #nav-primary li#n7 a:focus {	
	background-position: -765px -611px;		
	width: 135px;							
	margin-left: -26px;
	position: relative;
}

/**/

#s7 #nav-primary li#n6 a:hover, 
#s7 #nav-primary li#n6 a:focus {	
	background-position: -696px -611px;		
	width: 95px;							
	margin-left: -26px;
	overflow: auto;
	position: relative;
}  
 
#s7 #nav-primary li#n7 a:link, 
#s7 #nav-primary li#n7 a:visited {	
	background-position: -765px -329px;		
	width: 135px;							
	margin-left: -26px;
}