/*
 * A tabbar that works without flicker in IE6. Wow! allankelly at gmail dot com
 *
 * Note that float:left; automatically sets display:block; and any further
 * display: properties are ignored.
 * However see http://www.positioniseverything.net/explorer/doubled-margin.html
 * for a reason to use float:left; display:inline; for IE (double margin bug).
 *
 * What this is: my original tabbar used a "stacked tabs" background image
 * positioned to the right in the .tabbar a {} rule, and the same image
 * positioned to the left in the .tabbar a span {} rule. Then hover rules
 * changed the vertical positions of the image to change the appearance of the
 * tab.  However this flickered really badly in IE6, so couldn't be used.
 *
 * This version sets a background for .tabbar {} and a background for .tabbar a
 * {}.  The .tabbar a {} background is normally seen. Then in the .tabbar
 * a:hover {} rule I set background:none; which reveals the other background.
 * This does not flicker.  Hoorah!
 *
 * However, I do not have a place to put a static LHS for the tab and a static
 * RHS for the tab on 2 "layers" - I have the element, the <a> and the <span>
 * only. So, I have put a transparent RHS corner gif in the <span>.  (IE6 cannot
 * handle transparent png it seems).
 *
 * Over and above the original tabbar, we have tidier CSS and a RHS corner gif.
 * Same HTML, pretty neat =)
 */

ul.tabbar, li.tabbar,
ul.subtabbar, li.subtabbar {
    /* Don't float this, or content sits on the same line. We want this to be
     * full-width */
    background:#FFF;
    border:0;
    margin:0;
    padding:0;
    list-style:none;
}

ul.tabbar,
ul.subtabbar {
    border-bottom:solid 1px #AAA;
    padding-left:20px;
    padding-top: 3px;
}
ul.tabbar {
    height:30px;
}
ul.subtabbar {
    height:20px;
    border-left:solid 1px #AAA;
    border-right:solid 1px #AAA;
}

li.tabbar , li.activetabbar,
li.subtabbar , li.activesubtabbar {
    float: left; display:inline;
    margin: 0 1px 0 0;
}

li.tabbar , li.activetabbar {
    height: 30px;
}
li.subtabbar , li.activesubtabbar {
    height: 20px;
}

li.tabbar,
li.subtabbar {
    background: url( '/img/tabs/tabs_white_blue_tan_gradient_30_1000.png' ) 0 -60px;
}

li.activetabbar,
li.activesubtabbar {
    position:relative;
    top:1px;
    background: url( '/img/tabs/tabs_white_blue_tan_gradient_30_1000.png' ) 0 0;
}

li.tabbar a, li.activetabbar a,
li.subtabbar a, li.activesubtabbar a {
    float: left; display: inline;
    margin: 0;
    padding:0;
         /* This breaks IE6 layout!
     *  width:100px;
          */
    height:100%;
    overflow:hidden;
    font-weight:normal;
    font-size:90%;
    color:#666666;
    text-decoration: none;
}
li.subtabbar a, li.activesubtabbar a {
    font-size:80%;
    font-weight:normal;
}
li.tabbar a,
li.subtabbar a {
    background: url( '/img/tabs/tabs_white_blue_tan_gradient_30_1000.png' ) 0 -30px;
	}
li.activetabbar a,
li.activesubtabbar a {
    background: url( 'img/tabs/tabs_white_blue_tan_gradient_30_1000.png' ) 0 0;
    cursor:default;
    font-weight:bold;
    color:#444;
	}
li.tabbar span, li.activetabbar span,
li.subtabbar span, li.activesubtabbar span {
    /* IE */
    float: left; display: inline;
    margin:0;
    /* top right bot left */
    padding: 7px 13px 0 13px;
    cursor:pointer;
    /* RHS curve */
    position:relative;
    height:100%;
    background: url( '/img/tabs/rhs_30_10x30.gif' ) right top no-repeat;
	}
li.tabbar a:hover, li.activetabbar a:hover ,
li.subtabbar a:hover, li.activesubtabbar a:hover  {
    /* IE */
    float: left; display:inline;
    background-image: none;
	}
/* It would be nice to have tabs move down 1px onmouseover/hover.
 * Code below works a bit! TODO: fixit.
li.tabbar a:hover {
    position:relative;
    top:1px;
	}
*/
li.tabbar a:active,
li.subtabbar a:active {
    /* IE */
    float: left; display:inline;
    color: black;
	}