Css and a mild case of frustration

I am currently working on a webpage, but lihas border-rightof 1pxto act as a separator. However, the border is simply not enough to do the job.

Here are the code snippets and some screenshots:

HTML menu

<nav id="home-nav" class="posabs">
 <ul class="nav">
  <li id="hdoc" style="border-right:1px solid #aaa6a0;"><a href=""><span>Original Content</span></a></li>
  <li id="hpnd" style="border-right:1px solid #aaa6a0;"><a href=""><span>Production &amp; Digital</span></a></li>
  <li id="hcns" style="border-right:1px solid #aaa6a0;"><a href=""><span>Commercials &amp; Shorts</span></a></li>
  <li id="hind"><a href=""><span>Distribution &amp; Sales</span></a></li>
 </ul>
</nav>

CSS

<style type="text/css">
#home-nav a span{display:block;background-image:url(../images/guru_silos.png);background-norepeat:0 0;height:52px;text-indent:-9999px;}
#home-nav a{height:104px;}
#hdoc a{width:188px;height:48px;margin-right:35px;}
#hpnd a{width:191px;height:50px;margin-right:35px;}
#hcns a{width:209px;height:52px;margin-right:35px;}
#hind a{width:196px;height:51px;}
#hdoc ul li{border-left:1px solid #aaa6a0;height:50px;}
#hpnd ul li{border-left:1px solid #aaa6a0;height:50px;}
#hcns ul li{border-left:1px solid #aaa6a0;height:50px;}
#hind ul li{border-left:1px solid #aaa6a0;height:50px;}
#hdoc a span{width:188px;background-position:-190px -159px;margin:25px 0 0 14px;}
#hdoc a:hover span{background-position:0px -159px}
#hpnd a span{width:191px;background-position:-211px -105px;margin:25px 0 0 12px;}
#hpnd a:hover span{background-position:-211px -52px}
#hcns a span{width:209px;background-position:0px -53px;margin:25px 0 0 18px;}
#hcns a:hover span{background-position:0px 0px}
#hind a span{width:196px;background-position:-211px 0px;margin:25px 0 0 22px;}
#hind a:hover span{background-position:0px -107px}
</style>

Desired view

Desired CSS result, from Illustrator file. Please ignore the missing background.

Current view

The current results of my CSS and HTML.