.Widget > ul.Tabs
{
   display: table;
   margin: 0;
   padding: 0;
}

.Widget > ul > li.Tab
{
    list-style: none;
    float: left;
    
    /* Left margin 5px results in a gap at the very left,
     * negative margin on the right lessens that for tab-to-tab gap.
     */
    margin: 0 -3px -1px 5px;
    padding: 5px;
    border: 1px solid #c5c5c5;
    border-bottom-width: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    
    cursor: pointer;

    /* Darken */
    background: linear-gradient(#FFF0, #AAAF);
}

.Widget > ul > li.ActiveTab
{
	/* Brighten (in case it's not on top of white */
    background: linear-gradient(#FFF0, #FFF8);
    
    /* Because of -1px bottom margin,
     * Tab overlaps TabBody,
     * so this white bottom border should overdraw the TabBody border
     * for Tab to appear merged with body.
     * .. but TabBody border always appears on top ..
     */
    border-bottom: 1px solid white;
}

.TabBody
{
	position: relative;
    border: 1px solid #c5c5c5;
    display: none;
}

.Widget > div.ActiveTab
{
    display: block;
}