Button baseStyle problem

[alan.hayes]

Hi there,

My problem is a simple one, I have a "Button" with an icon, and I've set the baseStyle to my own style. Fine so far, and here is the working CSS:

.customButton, .customButtonDown, .customButtonOver,
.customButtonFocused, .customButtonFocusedDown, .customButtonFocusedOver, 
.customButtonSelected, .customButtonSelectedDown, .customButtonSelectedOver,
.customButtonSelectedFocused, .customButtonSelectedFocusedDown, .customButtonSelectedFocusedOver
{
   border: 3px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   color: white;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   text-decoration: none;
}

The problem arises when I add the following:

   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;

Instead of the button having a 1px shadow effect, there are 2 borders "within" the button. one under the icon, and one under the text.

Behavior is the same across Firefox, Safari, IE8.

Any ideas how to get the desired effect?
Thanks in advance
Alan