How to put lines just on right an left side of active Menu Items
 

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.

Note:
The height of the lines seemed a bit much, so I decreased the height, and
increased the padding to the right and left, this way:

padding: 2px 8px;

instead of:

padding: 4px 5px;