CSS setting: navCatTabs?

[sports guy]

I am trying to configure my css styelsheet to match the front end of my store. This header region of my store is where I am concentrating on now.

Here is an image to explain:


I can see the html code from the website front end. I kow that the gray bar I am working on is these CSS rules:

<div id="navCatTabsWrapper">
<div id="navCatTabs">

My CSS Sheet in this area looks like this:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
 margin: 0em;
 background-color: #FFFFFF;
 padding: 0.5em 0.2em;
 font-weight: bold;
 font-color: #000000;
 height: 1%;
 }
#navCatTabsWrapper {
 background: #404041 url("/images/menu_bg.gif") repeat-x;
 width: 808px;
 height: 39px;
 margin: 5px auto 20px auto;
 padding: 3px 0 0 0;
 color: #ffffff;
 line-height: 17px;
 clear: both;
 }
#navMain ul, #navSupp ul, #navCatTabs ul {
 margin: 0;
 padding: 0.5em 0em;
 list-style-type: none;
 text-align: center;
 line-height: 1.5em;
 }
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
 display: inline;
 }
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
 text-decoration: none;
 padding: 0em 0.5em;
 color: #000000;
 white-space: nowrap;
 }
#navCatTabs ul li a {
 text-decoration: none;
 font-size:12px;
 color: #ffffff;
 }

I have tried many different combinations but cannot match the front end of my website which has this labeled as #menu-wrapper. Here is the css code for the front end that displays this the way I want it:

#menu-wrapper {
 background: #404041 url("/images/menu_bg.gif") repeat-x;
 width: 808px;
 height: 39px;
 margin: 5px auto 20px auto;
 padding: 3px 0 0 0;
 color: #ffffff;
 line-height: 17px;
 clear: both;
}
 
#menu-wrapper a:link, #menu-wrapper a:visited {
 color: #ffffff;
 text-decoration: none;
}
#menu-wrapper a:hover {
 color: #bf1e2d;
 text-decoration: none;
}

First how can I center that text. Second how can I make it normal instead of bold. Third is it possible to add a space|space in between each category?

Any help would be much appreciated.