/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Tabbed pane widget.
 */

.rsx-tabbed-pane-content {
    overflow: auto; /*Needed for accurate jQuery outerHeight reading*/
}

.rsx-tabbed-pane-tabs {
    margin: 0;
    padding: 0;
    list-style-type: none;    
}

.rsx-tabbed-pane-tabs > li {        
    position: relative;
    transition: max-height .25s cubic-bezier(.55, 0, .1, 1);
}

.rsx-tabbed-pane-tabs > li {        
   border-bottom-width: 1px;
   border-bottom-style: solid;
}

.rsx-tabbed-pane-tabs.rsx-active > li {        
    max-height: 500px;
}

.rsx-tabbed-pane-tabs > li.rsx-active {    
    max-height: 200px;
}

.rsx-tabbed-pane-tabs > li.rsx-active > a {    
    background: #00357a;
}

.rsx-tabbed-pane-tabs .rsx-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 18px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.rsx-tabbed-pane-has-icon > .rsx-icon,
.rsx-tabbed-pane-has-icon > .rsx-icon-o {
    display: none;
}


@media (max-width: 999px) {
    .rsx-tabbed-pane-tabs .rsx-icon {    
        opacity: 1;
        transition: opacity 0.25s cubic-bezier(.55,0,.1,1);
    }

    .rsx-tabbed-pane-tabs.rsx-active .rsx-icon {
        opacity: 0;
    }

    .rsx-tabbed-pane-tabs > li {    
        max-height: 0;
        overflow: hidden;
    }    
}


@media (max-width: 999px) {
    .rsx-tabbed-pane-tabs .rsx-icon {
        -webkit-transform: translateY(-35%) rotate(90deg);
        -ms-transform: translateY(-35%) rotate(90deg);
        transform: translateY(-35%) rotate(90deg);
    }
}

.rsx-tabbed-pane-tabs > li a {
    display: block;
    height: 100%;
    padding: 20px 45px 20px 20px; 
    background-color: #00549a;
    text-align: left;
    font-weight: 400;
    transition: background-color 0.25s cubic-bezier(.55,0,.1,1);
}

.rsx-tabbed-pane-tabs > li a:link,
.rsx-tabbed-pane-tabs > li a:visited,
.rsx-tabbed-pane-tabs > li a:hover,
.rsx-tabbed-pane-tabs > li a:active {
    color: #fff;
    text-decoration: none;   
}

.rsx-tabbed-pane-tabs > li a:hover {
    background-color: #00357a;
}


@media (min-width: 999px) {
    .rsx-tabbed-pane {    
        display: table;
    }

    .rsx-tabbed-pane > .row {    
        display: table-row;
    }

    .rsx-tabbed-pane > .row > [class*="col-"] {
        display: table-cell;
        float: none;
        vertical-align: top;
    }

    li.rsx-tabbed-pane-has-icon > a {
        padding-left: 75px;
    }

    .rsx-tabbed-pane-has-icon > .rsx-icon,
    .rsx-tabbed-pane-has-icon > .rsx-icon-o {
        display: block;
        font-size: 55px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        left: 10px;
    }
}
