Here's what the page menu buttons look on my site:
http://synchronicitysandbox.com/
there's a 1px line just on the right and left side of the active button.
Here's how to do it in Atahualpa:
In the style.css find this:
/* "current" page and hover */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li a:hover
and add this:
{
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
/* more ... */
border-bottom:1px solid #fff;
border-top:1px solid #fff;
font-weight:bold;
padding: 4px 5px;
}
What you've done is added a 1px border to your button, and that's a problem
because when someone scrolls over the buttons, they'll jump around. So,
if you don't like that, you've got to add borders to a few other areas.
so add this:
border:1px solid #FFFFFF;
to these sections, like this:
ul.rMenu li a
{
padding: 4px 5px;
border:1px solid #FFFFFF;
}
/* added for dark menu*/
ul#rmenu li a
{
padding: 4px 5px;
border:1px solid #FFFFFF;
}
ul.rMenu li a:link, ul.rMenu li a:hover, ul.rMenu li a:visited, ul.rMenu li a:active
{
text-decoration: none;
/* more ... */
margin:0;
padding: 4px 5px;
border:1px solid #FFFFFF;
}
/*added*/
ul#rmenu li a:link, ul#rmenu li a:hover, ul#rmenu li a:visited, ul#rmenu li a:active
{
text-decoration: none;
/* more ... */
margin:0;
padding: 4px 5px;
border:1px solid #FFFFFF;
}
/*
ul.rMenu li.sfhover a:active,
ul.rMenu li:hover a:active
{
color: #fff;
background-color: #c00;
border:1px solid #FFFFFF;
}
*/
Then go into your wp Atahualpa editor, and change the colors around of
your hover and active menu items under 'page menu bars', so that they'll
be white (#FFFFFF).
Hope it works for you, too.