colored-margins.css

/* Primary Nav ================================ */
	div#nav-wrapper{
		background: url(../images/nav-bkg.png) repeat-x;
		width: 100%;
		height: 40px;
		float: left;
	}
	#navPrimary{
		height: 40px;
		padding: 0;
	}
	#navPrimary li{
		display: inline-block;
		margin: 0;
		border-left: 1px solid #FFF;
		border-right: 1px solid #FFF;
		text-shadow: gray 0 0 1px;
		float: left;
	}
	#navPrimary li.first{
		border-left:none;
	}
	#navPrimary li.last{
		border-right-width:2px;
	}
	#navPrimary li a{
		font-family:'American Typewriter';
		padding: 7px 10px;
		font-size: 21px;
		display: inline-block;
		color: #333;
		background: #EBC694 url(../images/nav-bkg.png) repeat-x 0 0;
	}
	#navPrimary li a:hover{
		background-color: #ED9B27;
		background-image: url(../images/nav-bkg_hover.png);
		text-decoration: none;
	}

/* @end - Navigation
----------------------------------------------- */

colored-margins.htm

<div class="container_12" id="nav-wrapper">
     <ul class="grid_12" id="navPrimary">
          <li class="first"><a href="#">Welcome</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Work</a></li>
          <li class="last"><a href="#">Contact Us</a></li>
     </ul>
</div>