#menu {
	position: relative;
	height: 29px;
	overflow: hidden;
	float: right;
} 
  
#menu ul { 
	padding: 0; 
	margin: 0; 
} 
  
/* Don't apply padding here (offsetWidth will differ in IE) 
If you need padding add it to the child anchor */ 
#menu ul li { 
	float: left; 
	list-style: none; 
} 
  
#menu ul li a { 
	text-indent: -500em; /*remove comment for dev only */
	z-index: 10; 
	display: block; 
	float: left; 
	height: 30px; 
	position: relative; 
	overflow: hidden; /* this is sort of a trick to prevent firefox from extending the dotted shape when you click a link */
} 

/* ----------------------------------------------- */

#menu ul li.divider {
	text-indent: -500em;
	width: 20px;
	height: 30px;
	background: url(../images/menu-divider.gif) no-repeat center center;
	overflow: hidden;
}

#menu-about a { 
	width: 54px; 
	background: url('../images/menu-about.png') no-repeat center  !important;
	background: url('../images/menu-about.gif') no-repeat center; 
} 

#menu-about a:hover, #menu-about a.current  {
	background: url('../images/menu-about-on.png') no-repeat center  !important;
	background: url('../images/menu-about-hover.gif') no-repeat center; 
}

#menu-quote a { 
	width: 54px; 
	background: url('../images/menu-quote.png') no-repeat center  !important;
	background: url('../images/menu-quote.gif') no-repeat center; 
} 

#menu-quote a:hover, #menu-quote a.current {
	background: url('../images/menu-quote-on.png') no-repeat center  !important;
	background: url('../images/menu-quote-on.gif') no-repeat center; 
}

#menu-capabilities a { 
	width: 102px; 
	background: url('../images/menu-capabilities.png') no-repeat center  !important;
	background: url('../images/menu-capabilities.gif') no-repeat center; 
} 


#menu-capabilities a:hover, #menu-capabilities a.current {
	background: url('../images/menu-capabilities-on.png') no-repeat center  !important;
	background: url('../images/menu-capabilities-on.gif') no-repeat center; 
}

#menu-environment a { 
	width: 117px; 
	background: url('../images/menu-environment.png') no-repeat center  !important;
	background: url('../images/menu-environment.gif') no-repeat center; 
} 


#menu-environment a:hover, #menu-environment a.current {
	background: url('../images/menu-environment-on.png') no-repeat center  !important;
	background: url('../images/menu-environment-on.gif') no-repeat center; 
}

#menu-artwork a { 
	width: 121px; 
	background: url('../images/menu-artwork.png') no-repeat center  !important;
	background: url('../images/menu-artwork.gif') no-repeat center; 
} 
#menu-artwork a:hover, #menu-artwork a.current {
	background: url('../images/menu-artwork-on.png') no-repeat center  !important;
	background: url('../images/menu-artwork-on.gif') no-repeat center; 
}

#menu-contact a { 
	width: 70px; 
	background: url('../images/menu-contact.png') no-repeat center  !important;
	background: url('../images/menu-contact.gif') no-repeat center; // ie! 
} 

#menu-contact a:hover, #menu-contact a.current {
	background: url('../images/menu-contact-on.png') no-repeat center  !important;
	background: url('../images/menu-contact-on.gif') no-repeat center; // ie! 
}

#menu-home a { 
	width: 4px; 
	background: url('../images/menu-home.png') no-repeat center  !important; 
	background: url('../images/menu-home.gif') no-repeat center; // ie! 
} 

#menu-home a:hover, #menu-home a.current {
	background: url('../images/menu-home-on.png') no-repeat center  !important; 
	background: url('../images/menu-home-on.gif') no-repeat center; // ie! 
}

/* ----------------------------------------------- */

#menu li.background { 
	background: url('../images/bg-menu-right.png') no-repeat top right  !important; 
	background: url('../images/bg-menu-right.gif') no-repeat top right; 
	z-index: 8; 
	position: absolute; 
	visibility: hidden; 
} 
  
#menu .background .left { 
	background: url('../images/bg-menu.png') no-repeat top left  !important; 
	background: url('../images/bg-menu.gif') no-repeat top left; 
	height: 30px; 
	/*margin-right: 9px;*/ /* 7px is the width of the rounded shape */ 
}