/* Styles for Vertical Tabs
 *
 * @author Matt Lowe { Squelch Design }
 */

ul.squelch-vt-tab-buttons {
    list-style:     none;
    margin:         0;
    position:       -webkit-sticky;
    position:       sticky;
    top:            200px
}
ul.squelch-vt-tab-buttons > li.squelch-vt-tab {
    list-style:     none;
    margin:         0;
}
#primary ul.squelch-vt-tab-buttons > li.squelch-vt-tab-title h2 {   /* #primary due to theme specificity */
    font-weight:    300;
}



/* Clearfixes
 */
div.squelch-vt-tab-wrap {
    clear:          both;
}

div.squelch-vt-tab-contents > div.squelch-vt-tab-content:before,
div.squelch-vt-tab-contents > div.squelch-vt-tab-content:after,
div.squelch-vt-tab-wrap:before,
div.squelch-vt-tab-wrap:after {
    content:        "";
    display:        table;
}
div.squelch-vt-tab-contents > div.squelch-vt-tab-content:after,
div.squelch-vt-tab-wrap:after {
    clear:          both;
}



/* Structure of the tabs
 */
ul.squelch-vt-tab-buttons {
    display:        block;
    width:          180px;
    float:          left;
    box-sizing:     border-box;
    border-right:   1px solid #6d847c;
}
div.squelch-vt-tab-contents {
    display:        block;
    width:          calc( 100% - 180px );
    float:          left;
    box-sizing:     border-box;
}

/* Formatting of the tab buttons
 */
ul.squelch-vt-tab-buttons > li.squelch-vt-tab {
    margin-left:    0;
    width:          85%;
    min-width:      152px;
    margin-right:   16%;

    font-size:      1.2rem;
    font-weight:    bold;
    text-transform: uppercase;

    padding-bottom: 0.25rem;
    margin-bottom:  0.25rem;
    border-bottom:  1px solid #c4c5c7;
}
ul.squelch-vt-tab-buttons > li.squelch-vt-tab.active-tab > a,
ul.squelch-vt-tab-buttons > li.squelch-vt-tab.active-tab > a:link,
ul.squelch-vt-tab-buttons > li.squelch-vt-tab.active-tab > a:active,
ul.squelch-vt-tab-buttons > li.squelch-vt-tab.active-tab > a:hover {
    color:          #d95404;
}


/* Formatting of the tab content areas
 */
div.squelch-vt-tab-contents > div.squelch-vt-tab-content {
    margin-left:    3%;
    width:          97%;
    margin-right:   0;
    margin-bottom:  0;
}
div.squelch-vt-tab-contents > div.squelch-vt-tab-content > h2.squelch-vt-tab-content-title {
    font-weight:    bold;
    text-transform: uppercase;

    margin-bottom:  0;
    padding-bottom: 0;
}
div.squelch-vt-tab-contents > div.squelch-vt-tab-content > h2.squelch-vt-tab-content-title:after {
    display:        block;
    content:        "";
    width:          49%;

    margin-top:     1rem;
    border-bottom:  1px solid #70837d;
    margin-bottom:  1rem;
}


/* Responsiveness
 */
@media (max-width: 554px) {
    ul.squelch-vt-tab-buttons {
        display:        none;
    }
    div.squelch-vt-tab-contents {
        display:        block;
        width:          100%;
        float:          none;
    }
    div.squelch-vt-tab-contents > div.squelch-vt-tab-content {
        margin-left:    auto;
        margin-right:   auto;
        width:          100%;
    }
}