Tab Panel - Gap between tab and body and style problems

Hi guys.

I am using the AJAX tab panel control and applying custom styles to it. I'm having a problem in that I cannot seem to get the "default" style for the tabs to look right.

I am trying to do something similar to the default style of the tab, whereby the top border changes color when the user hovers over a tab. My problem is two fold:

Firstly, there is a small gap between the tab itself and the content displayed in the body of the panel. How do I get rid of that space? I've tried setting padding and spacing on just about all the styles they mention on the ajax sample website, but I'm not having any luck getting rid of it.

Secondly, this is the style for my outer border:

1.TabPanel .ajax__tab_outer
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

And this is the style that has to be applied when the user hovers over a tab:

1.TabPanel .ajax__tab_hover
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

What's happening with this setting though is that ANOTHER border is put around the tab, so it looks COMPLETELY wonky.

Please please please help me! I have to have this done tomorrow and it looks TERRIBLE at the moment.

Thanks everyone,
Johann.

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien