/*
	-- -- -- -- -- -- --
	css sprites2
	nav style, with style for scripted elements

	http://www.alistapart.com/articles/sprites2
	-- -- -- -- -- -- --	
*/

.nav {
	width: 900px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
.nav li {
	display: inline;
}
.nav li a:link, .nav li a:visited {
	position: absolute;
	top: 0;
	height: 30px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 10;
}
/* home */
	.nav .home a:link, .nav .home a:visited {
	left: 20px;
	width: 69px;
}
.nav .home a:hover, .nav .home a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -20px -30px;
}
.nav .home a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -20px -60px;
}
.current-home .home a:link, .current-home .home a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -20px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-home, .nav-home-click {
	position: absolute;
	top: 0;
	left: 20px;
	width: 69px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -20px -30px;
}
.nav-home-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -20px -60px;
}
/* about */
	.nav .about a:link, .nav .about a:visited {
	left: 89px;
	width: 131px;
}
.nav .about a:hover, .nav .about a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -89px -30px;
}
.nav .about a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -89px -60px;
}
.current-about .about a:link, .current-about .about a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -89px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-about, .nav-about-click {
	position: absolute;
	top: 0;
	left: 89px;
	width: 131px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -89px -30px;
}
.nav-about-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -89px -60px;
}
/* yarns */
	.nav .yarns a:link, .nav .yarns a:visited {
	left: 220px;
	width: 65px;
}
.nav .yarns a:hover, .nav .yarns a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -220px -30px;
}
.nav .yarns a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -220px -60px;
}
.current-yarns .yarns a:link, .current-yarns .yarns a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -220px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-yarns, .nav-yarns-click {
	position: absolute;
	top: 0;
	left: 220px;
	width: 65px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -220px -30px;
}
.nav-yarns-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -220px -60px;
}
/* shadecard */
	.nav .shadecard a:link, .nav .shadecard a:visited {
	left: 285px;
	width: 112px;
}
.nav .shadecard a:hover, .nav .shadecard a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -285px -30px;
}
.nav .shadecard a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -285px -60px;
}
.current-shadecard .shadecard a:link, .current-shadecard .shadecard a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -285px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-shadecard, .nav-shadecard-click {
	position: absolute;
	top: 0;
	left: 285px;
	width: 112px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -285px -30px;
}
.nav-shadecard-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -285px -60px;
}
/* patterns */
	.nav .patterns a:link, .nav .patterns a:visited {
	left: 397px;
	width: 88px;
}
.nav .patterns a:hover, .nav .patterns a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -397px -30px;
}
.nav .patterns a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -397px -60px;
}
.current-patterns .patterns a:link, .current-patterns .patterns a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -397px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-patterns, .nav-patterns-click {
	position: absolute;
	top: 0;
	left: 397px;
	width: 88px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -397px -30px;
}
.nav-patterns-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -397px -60px;
}
/* kits */
	.nav .kits a:link, .nav .kits a:visited {
	left: 485px;
	width: 60px;
}
.nav .kits a:hover, .nav .kits a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -485px -30px;
}
.nav .kits a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -485px -60px;
}
.current-kits .kits a:link, .current-kits .kits a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -485px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-kits, .nav-kits-click {
	position: absolute;
	top: 0;
	left: 485px;
	width: 60px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -485px -30px;
}
.nav-kits-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -485px -60px;
}
/* order */
	.nav .order a:link, .nav .order a:visited {
	left: 545px;
	width: 156px;
}
.nav .order a:hover, .nav .order a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -545px -30px;
}
.nav .order a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -545px -60px;
}
.current-order .order a:link, .current-order .order a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -545px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-order, .nav-order-click {
	position: absolute;
	top: 0;
	left: 545px;
	width: 156px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -545px -30px;
}
.nav-order-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -545px -60px;
}
/* contact */
	.nav .contact a:link, .nav .contact a:visited {
	left: 701px;
	width: 105px;
}
.nav .contact a:hover, .nav .contact a:focus {
	background: url(../graphics/navigation-links.jpg) no-repeat -701px -30px;
}
.nav .contact a:active {
	background: url(../graphics/navigation-links.jpg) no-repeat -701px -60px;
}
.current-contact .contact a:link, .current-contact .contact a:visited {
	background: url(../graphics/navigation-links.jpg) no-repeat -701px -90px;
	cursor: hand;
	cursor: pointer;
}
.nav-contact, .nav-contact-click {
	position: absolute;
	top: 0;
	left: 701px;
	width: 105px;
	height: 30px;
	background: url(../graphics/navigation-links.jpg) no-repeat -701px -30px;
}
.nav-contact-click {
	background: url(../graphics/navigation-links.jpg) no-repeat -701px -60px;
}