﻿html, body {
    height: 100%;
}

.destotabs {
    float: left;
    width: calc(100% - 20px);
    margin: 10px;
    min-height: 200px;
    position: relative;
}

    .destotabs > .btnVisibility {
        position: absolute;
        top: 0px;
        right: 0px;
        display: none;
        text-align: right;
        border-style: solid;
        border-color: #dadada;
        border-width: 1px 1px 1px 1px;
        background: linear-gradient(#fff, #f3f3f3);
        z-index: 101;
    }

        .destotabs > .btnVisibility > label {
            padding: 8px 12px;
            display: block;
            float: right;
            background-repeat: no-repeat;
            background-position: center center;
            font-size: 21px;
            font-weight: normal;
            color: #737373;
        }


    .destotabs > ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        display: table;
        table-layout: fixed;
        width: 100%;
        cursor: pointer;
    }

        .destotabs > ul > li {
            display: table-cell;
            cursor: pointer;
            padding: 10px;
            background: #fff;
            border-style: solid;
            border-color: #dadada;
            border-width: 1px 1px 0px 1px;
            transition: all 0.3s ease 0s;
            font-size: 16px;
        }

            .destotabs > ul > li.active {
                display: table-cell;
                cursor: pointer;
                padding: 10px;
                border-width: 2px 1px 0px 1px;
                border-color: #ffae43 #dadada #ffae43 #dadada;
                color: #ffae43;
                background-color: #f3f3f3;
                background: -webkit-linear-gradient(#fff, #f3f3f3);
                background: -o-linear-gradient(#fff, #f3f3f3);
                background: -moz-linear-gradient(#fff, #f3f3f3);
                background: linear-gradient(#fff, #f3f3f3);
            }

    .destotabs .contents {
        position: relative;
        overflow: hidden;
        border-style: solid;
        border-color: #dadada;
        border-width: 0px 1px 1px 1px;
        min-height: 200px;
        background-color: #f3f3f3;
        font-size: 14px;
    }

        .destotabs .contents .tab {
            display: none;
            padding: 10px;
            position: absolute;
            width: 100%;
            background-color: #f3f3f3;
        }

            .destotabs .contents .tab:after {
                clear: both;
            }

            .destotabs .contents .tab.active {
                display: block;
            }

    .destotabs .loading {
        padding: 20px 0px;
        text-align: center;
    }

    .destotabs.orange2 > ul > li {
        border-color: #ffae43;
        background: linear-gradient(#ffae43, #f1951c );
        color: #fff;
    }

        .destotabs.orange2 > ul > li.active {
            border-color: #ffae43 #dadada;
            background: -webkit-linear-gradient(#fff, #f3f3f3);
            background: -o-linear-gradient(#fff, #f3f3f3);
            background: -moz-linear-gradient(#fff, #f3f3f3);
            background: linear-gradient(#fff, #f3f3f3);
            color: #ffae43;
        }

    .destotabs.green1 > ul > li {
        border-color: #dadada;
        background: #fff;
        color: #504435;
    }

        .destotabs.green1 > ul > li.active {
            border-color: #a0d845 #dadada;
            background: -webkit-linear-gradient(#fff, #f3f3f3);
            background: -o-linear-gradient(#fff, #f3f3f3);
            background: -moz-linear-gradient(#fff, #f3f3f3);
            background: linear-gradient(#fff, #f3f3f3);
            color: #a0d845;
        }

    .destotabs.green2 > ul > li {
        border-color: #a0d845;
        background: linear-gradient(#a0d845, #91c73a );
        color: #fff;
    }

        .destotabs.green2 > ul > li.active {
            border-color: #a0d845 #dadada;
            background: -webkit-linear-gradient(#fff, #f3f3f3);
            background: -o-linear-gradient(#fff, #f3f3f3);
            background: -moz-linear-gradient(#fff, #f3f3f3);
            background: linear-gradient(#fff, #f3f3f3);
            color: #a0d845;
        }

    .destotabs.brown1 > ul > li {
        border-color: #dadada;
        background: #fff;
        color: #504435;
    }

        .destotabs.brown1 > ul > li.active {
            border-color: #b15d21 #dadada;
            background: -webkit-linear-gradient(#fff, #f3f3f3);
            background: -o-linear-gradient(#fff, #f3f3f3);
            background: -moz-linear-gradient(#fff, #f3f3f3);
            background: linear-gradient(#fff, #f3f3f3);
            color: #b15d21;
        }

    .destotabs.brown2 > ul > li {
        border-color: #b15d21;
        background: linear-gradient(#b15d21, #8B4513);
        color: #fff;
    }

        .destotabs.brown2 > ul > li.active {
            border-color: #b15d21 #dadada;
            background: -webkit-linear-gradient(#fff, #f3f3f3);
            background: -o-linear-gradient(#fff, #f3f3f3);
            background: -moz-linear-gradient(#fff, #f3f3f3);
            background: linear-gradient(#fff, #f3f3f3);
            color: #b15d21;
        }


@media screen and (max-width: 900px) {
    .destotabs > ul {
        display: block;
        width: 100%;
        z-index: 100;
        height: 100%;
        background: #dadada;
        right: 1px;
        border: 0px;
    }

        .destotabs > ul > li,
        .destotabs > ul > li.active {
            display: block;
            font-size: 14px;
            width: 100%;
            padding: 5px;
        }

    .destotabs .contents {
        border-width: 1px 1px 1px 1px;
    }
    /*
        .destotabs > .btnVisibility {
        display: block;
    }

    .destotabs > ul {
        display: block;
        width: 0;
        position: absolute;
        z-index: 100;
        height: 100%;
        background: #dadada;
        right: 1px;
        border: 0px;
        overflow: scroll;
        opacity: 0;
    }

        .destotabs > ul > li,
        .destotabs > ul > li.active {
            display: block;
            font-size: 13px;
            width: 100%;
            padding: 5px;
        }

    .destotabs .contents {
        border-width: 1px 1px 1px 1px;
    }
    
*/
}
/* #b15d21 */
