#menu {
	position: relative;
	height: 29px;
	/*width: 470px;*/
	overflow: hidden;
	float: right;
	padding-top: 40px;
	padding-right: 5px;
	padding-left: 50px;
} 
  
#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; 
	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 {
	float: left;
	background: url(../images/menu-divider.gif) no-repeat center center;
	width: 1px;
	padding: 0px;
	overflow: hidden;
	height: 30px;
	margin-right: 9px;
	margin-left: 9px;
}

#menu-insights a { 
	width: 84px; 
	background: url('../images/menu-insights.png') no-repeat center !important; 
	background: url('../images/menu-insights.gif') no-repeat center; 
} 
  
#menu-services a { 
	width: 87px; 
	background: url('../images/menu-services.png') no-repeat center !important; 
	background: url('../images/menu-services.gif') no-repeat center; 
} 
  
#menu-events a { 
	width: 72px; 
	background: url('../images/menu-events.png') no-repeat center !important; 
	background: url('../images/menu-events.gif') no-repeat center; 
} 

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

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

#menu-home a { 
	width: 30px; 
	background: url('../images/menu-home.png') no-repeat center !important; 
	background: url('../images/menu-home.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 */ 
}