Add border around tab content

What CSS code do I need to add to put a border around the content of a tab? (As shown in the second of the images below)
I'd also like to have space between the text and the border.

I'm using Tabs Manager GK4 (style 1) on Joomla 1.7
My site can be viewed at http://www.ballinderreen.com/community/

Help would be much appreciated!


- THIS IS HOW IT CURRENTLY LOOKS.

How It Is.jpg

- THIS IS HOW I WOULD LIKE IT TO LOOK

How I Want It.jpg

No-one offered me their assistance
I have no CSS knowledge but I did eventually manage to change the style to what I want (through persistance, backwards engineering, and trial and error! ).


- THE NEW CSS CODE FOR STYLE-1

Code: Select all

.gkTabItemSpace{ padding-left: 25px; padding-right: 25px; padding-bottom: 15px; padding-top: 0px }
.gkTab { position: relative; }
.gkTabWrap { margin: 0 auto; border: 1px solid #e8e8e8!important; border-bottom-color: #e1e1e1 !important; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px;  -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;  }
ul.gkTabs { margin:0!important; padding: 0!important; background: url('../images/style1/bg.png') repeat-x 0 0 !important; height:42px; border-left: 0px solid #ffffff!important; border-right: 1px solid #6b9735!important; border-bottom-color: #e1e1e1 !important;
    -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px;  -moz-border-radius-topleft: 10px;  -webkit-border-top-right-radius: 10px; }
ul.gkTabs li { list-style-type: none; position: relative; line-height: 42px !important; margin: 0 !important; padding: 0 20px!important; border: none !important;  border-right: 2px groove #85aa57!important; background: none!important; float: left; cursor: pointer; 
    font-weight: bold; color: #f3f5ef; }
ul.gkTabs li:hover,
ul.gkTabs li.active { background: #fff !important; color: #6ba228 !important; }
ul.gkTabs li:hover:first-child,
ul.gkTabs li.active:first-child { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;  border-radius-topright: 10px; }
.gkTabContainer0 { clear: both; }
.gkTabContainer1 { overflow: hidden; }
.gkTabItem { float: left; overflow: hidden; padding: 26px 0; text-align: justify; }
.gkTabButtonNext,
.gkTabButtonPrev { width: 18px; height: 18px; background: url('../images/style1/b_next.png') no-repeat 0 0; cursor: pointer; position: absolute; top: 43%; right: 0; text-indent:-999em; }
.gkTabButtonPrev { background: url('../images/style1/b_prev.png') no-repeat 0 0; left: 0; right:inherit; }
.gkTabButtonNext:hover,
.gkTabButtonPrev:hover { background-position: 100% 0; }
.gkTabContainer0,
.gkTabContainer1,
.gkTabContainer2 { position:relative; }
.gkTabItem { position: absolute; left: -999em; top: 0; width: 100%; }
.gkTabItem.active { position: static; left: 0; }


- THE RESULT

New Look_2011-08-26-2.jpg