/* default link styling needed for IE6 to work */
.buttons a {color:#000000;} 
.buttons a:active {color:#FFF;}
.buttons a:hover {text-decoration:none;} 

/* remove the margin and bullets, set the padding for this demo only*/ 
.buttons {margin:0px; padding:0px; list-style:none;font:11px Arial, Verdana, Helvetica, sans-serif;width:949px; background:#F0F0F0 url(../images/menubg.jpg) repeat-x;border:1px solid #818181;border-top:2px solid #000;border-bottom:none;} 

/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */  
.buttons li {display:inline; float:left; padding-right:2px; background:url(../images/menuseperator.jpg) right top no-repeat; height:32px;}    

/* style the links and place the background image to start from left edge */
.buttons li a {display:block; height:32px; float:left; background:url(../images/menubg.jpg) repeat-x; text-decoration:none;letter-spacing:1px; line-height:32px;padding:0px 7px}    



/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.buttons li a:hover, .buttons li a:hover b {border:0; background:url(../images/menubg_hover.jpg) repeat-x; cursor:pointer;color:#FFF}

/* style the active state to replace the background image. This can also be used for a 'current' tab if you wish */
.buttons li a:active, .buttons li a:active b, .buttons li a.current, .buttons li a.current b {background: url(../images/menubg_hover.jpg) repeat-x;color:#FFF;}

/* move the text down by 3 pixels, and to the right by 2 pixels */
.buttons li a:active b, .buttons li a.current b { line-height:32px; margin-left:21px; padding-right:19px;}

.buttons li.nobg{background:none;padding-right:0px;}