#tab-headers
{
    overflow-x: auto;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    
    background-color: white;
}

#tab-headers ul {
    width: 1000px;
}

    #tab-headers li
    {
        width: 90px;
        float: left;
    }

        #tab-headers li table
        {
            width: 100%;
            table-layout: fixed;
            white-space: nowrap;
        }

        #tab-headers li td
        {
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            color: #d2d2d2;
        }

        #tab-headers li img
        {
            width: 20px;
        }

        #tab-headers li.selected
        {
            border-bottom: 4px solid orange;
            
        }

        #tab-headers li.selected td
        {
            color: #333;
        }

#tab-content
{
    width: 100%;
    overflow: hidden;
    position: relative;
}

#tabs
{
    float: left;
    display: inline;
    background-color: white;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    padding: 0px;
    margin: 0px;
    /*apply a transfor to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */
    -webkit-transform: translate3d(0px,0px,0px);
}

    #tabs > div
    {
        float: left;
        padding: 0px;
        margin: 0px;
        /*apply a transfor to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */
        -webkit-transform: translate3d(0px,0px,0px);
        transform: translate3d(0px,0px,0px);
    }

