/* adapted from http://www.duoh.com/csstutorials/2levelmenu/index.html */

ul#navigation {
	position: relative; 
	list-style-type: none;
	padding: 0;
	margin: 0;
	border: 0;
	margin-bottom:20px;
	top: 0px;
	left: 0px;
	width: 810px;
	height: 20px;
	background: #566171 url(images/navigation_over.gif) no-repeat;
}

/*<group=level 1>*/

ul#navigation li {
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	text-indent: -9999px;	
}

ul#navigation li a {
	border: 0;
	display: block;
	height: 20px;
	background: url(images/navigation.gif) no-repeat;
}

ul#navigation li a:hover {
	border: 0;
	display: block;
	background-image: url(images/navigation_over.gif);
}	
	
/*</group>*/

/*<group=level 1 ids>*/


 
 li#about a {
	width: 111px;
}

li#about a:link,
li#about a:visited,
li#about a:hover {
	background-position: 0px 0px;
}

li#samples a {
	width: 105px;
}

li#samples a:link,
li#samples a:visited,
li#samples a:hover {
	background-position: -111px 0px;
}

li#shop a {  /*Shop = Estimate*/
	width: 143px;
}

li#shop a:link,
li#shop a:visited,
li#shop a:hover {	
	background-position: -216px 0px;
}


li#news a {
	width: 81px;
}

li#news a:link, 
li#news a:visited, 
li#news a:hover {	
	background-position: -359px 0px;
}

li#info a {
	width: 120px;
}

li#info a:link, 
li#info a:visited, 
li#info a:hover {	
	background-position: -440px 0px;
}

li#contact a {
	width: 90px;
}

li#contact a:link,
li#contact a:visited, 
li#contact a:hover {
	background-position: -560px 0px;
}
	
/*</group>*/

/*<group=level 2>*/


#navigation li ul {	
	display: block;
	visibility: hidden;
	position: absolute; 
	left: 0px;
	width: 341px;/*341*/
	margin: 0;
}

#navigation li:hover ul {
	visibility: visible;
	z-index: 100;
}

#navigation li#about ul {
	background: none;
	height: 18px;
	margin-left: -40px; /*why 40?*/
}

#navigation li#samples ul {
	background: none;
	height: 18px;
	margin-left: 71px;  /*why*/
}

#navigation li#news ul {
	background: none;
	height: 18px;
	margin-left: 319px;  /*why*/
}

#navigation li#info ul {
	background: none;
	height: 18px;
	margin-left: 400px;  /*why*/
}
/* IE6*/

* html #navigation li#info ul {
	margin-left: 440px;
}

* html #navigation li#news ul {
	margin-left: 359px;
}

* html #navigation li#samples ul {
	margin-left: 111px;
}

* html #navigation li#about ul {
	margin-left: 0px;

} 	/* IE6 END*/

/* IE7  http://css-discuss.incutio.com/?page=StarHtmlHack  */
*+ html #navigation li#info ul {
	margin-left: 440px;
}

*+ html #navigation li#news ul {
	margin-left: 359px;
}

*+ html #navigation li#samples ul {
	margin-left: 111px;
}

*+ html #navigation li#about ul {
	margin-left: 0px;
} 
/* IE 7 END */



/*</group>*/

/*<group=level 2 ids>*/
ul#navigation li#about ul li#what a:link, 
ul#navigation li#about ul li#what a:visited {
	width: 96px;
	height: 18px;
	background: url(images/subnavigation_about.gif) no-repeat 0px 0px;
}

ul#navigation li#about ul li#what a:hover {
	width: 96px;
	height: 18px;
	background: url(images/subnavigation_about.gif) no-repeat 0px -18px;
}

ul#navigation li#about ul li#how a:link, 
ul#navigation li#about ul li#how a:visited {
	width: 117px;
	height: 18px;
	background: url(images/subnavigation_about.gif) no-repeat -96px 0px;
}

ul#navigation li#about ul li#how a:hover {
	width: 117px;
	height: 18px;
	background: url(images/subnavigation_about.gif) no-repeat -96px -18px;
}



ul#navigation li#samples ul li#salesmaterials a:link, 
ul#navigation li#samples ul li#salesmaterials a:visited {
	width: 124px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat 0px 0px;
}

ul#navigation li#samples ul li#salesmaterials a:hover {
	width: 124px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat 0px -18px;
}

ul#navigation li#samples ul li#print a:link, 
ul#navigation li#samples ul li#print a:visited {
	width: 48px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat -124px 0px;
}

ul#navigation li#samples ul li#print a:hover {
	width: 48px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat -124px -18px;
}

ul#navigation li#samples ul li#video a:link, 
ul#navigation li#samples ul li#video a:visited {
	width: 49px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat -172px 0px; /*107 = 63 + 44*/
}

ul#navigation li#samples ul li#video a:hover {
	width: 49px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat -172px -18px;
}

ul#navigation li#samples ul li#web a:link, 
ul#navigation li#samples ul li#web a:visited {
	width: 45px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat -221px 0px; /*152= 107 + 63 + 44*/
}

ul#navigation li#samples ul li#web a:hover {
	width: 45px;
	height: 18px;
	background: url(images/subnavigation_samples.gif) no-repeat -221px -18px;
}
	
	
ul#navigation li#news ul li#tech a:link, 
ul#navigation li#news ul li#tech a:visited {
	width: 146px;/*146*/
	height: 18px;
	background: url(images/subnavigation_news.gif) no-repeat 0px 0px;
}

ul#navigation li#news ul li#tech a:hover {
	width: 146px;/*146*/
	height: 18px;
	background: url(images/subnavigation_news.gif) no-repeat 0px -18px;
}

ul#navigation li#news ul li#blog a:link,
ul#navigation li#news ul li#blog a:visited {
	width: 111px; /*111*/
	height: 18px;
	background: url(images/subnavigation_news.gif) no-repeat -146px 0px;
}

ul#navigation li#news ul li#blog a:hover {
	width: 111px;/*111*/
	height: 18px;
	background: url(images/subnavigation_news.gif) no-repeat -146px -18px;
}

ul#navigation li#news ul li#newsletter a:link,
ul#navigation li#news ul li#newsletter a:visited {
	width: 84px;/*84*/
	height: 18px;
	background: url(images/subnavigation_news.gif) no-repeat -257px 0px;
}

ul#navigation li#news ul li#newsletter a:hover {
	width: 84px;/*84*/
	height: 18px;
	background: url(images/subnavigation_news.gif) no-repeat -257px -18px;
}


ul#navigation li#info ul li#tut a:link, 
ul#navigation li#info ul li#tut a:visited {
	width: 84px;
	height: 18px;
	background: url(images/subnavigation_info.gif) no-repeat 0px 0px;
}

ul#navigation li#info ul li#tut a:hover {
	width: 84px;
	height: 18px;
	background: url(images/subnavigation_info.gif) no-repeat 0px -18px;
}

ul#navigation li#info ul li#def a:link, 
ul#navigation li#info ul li#def  a:visited {
	width: 78px;
	height: 18px;
	background: url(images/subnavigation_info.gif) no-repeat -84px 0px;
}

ul#navigation li#info ul li#def  a:hover {
	width: 78px;
	height: 18px;
	background: url(images/subnavigation_info.gif) no-repeat -84px -18px;
}



/*</group>*/