/******************************************************/
/*********   NORMALIZE - BECAUSE...BROWSERS   *********/
/******************************************************/
@import url('core/normalize.less');



/*****************************************************************/
/********* BIP FRAME COLORS & LESS ELEMENTS & ANIMATIONS *********/
/*****************************************************************/
@import url('core/colors.less');
@import url('core/less-elements.less');
@import url('core/animations.less');



/*********************************************/
/*********   BIP FRAME CORE STYLES   *********/
/*********************************************/
@import url('core/forms.less');
@import url('core/grid.less');
@import url('core/menus.less');
@import url('core/pagination.less');
@import url('core/spacing.less');
@import url('core/tables.less');
@import url('core/tabs.less');
@import url('core/text.less');



/***********************************************************************************************/
/*********   PRINT - BECAUSE YOU KNOW, PEOPLE STILL PRINT WEB PAGES (OR DON'T THEY?)   *********/
/***********************************************************************************************/
@import url('core/print.less');



/**********************************************/
/*********   CUSTOM STYLES - LAYOUT   *********/
/**********************************************/

/*********

 * Use this to set the background color of the viewport.
 
 *********/

body {
    background-color: @grey_C;
}



/*********

 * Use this to control the maximum width of outer container.
 * Set to "none" if any element(s) need(s) to span the full width of the viewport.
 
 *********/

.container.outer {
    max-width: none;
}



/*********

 * Use this to control the inner content wrapper.

 *********/

.container.inner {
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
}

@media screen and (min-width: 1220px) { /* min-width = max-width + padding-left + padding-right */

    .container.inner {
        padding-left: 0px;
        padding-right: 0px;
    }

}



header {
    background-color: #DDDDDD;
    padding: 50px 0px 50px 0px;
}

nav {
    background-color: #EEEEEE;
    padding: 20px 0px 20px 0px;
}

main {
    padding: 20px 0px 20px 0px;
}

.main-content {
    background-color: #BBBBBB;
    padding: 20px 20px 20px 20px;
}

.sidebar {
    background-color: #BBBBBB;
    padding: 20px 20px 20px 20px;
    text-align: center;
}

.sidebar i {
    clear: both;
    color: #666666;
}

.sidebar p {
    text-align: center;
}

footer {
    background-color: #DDDDDD;
    padding: 50px 0px 50px 0px;
}

.subsection {
    .rounded(5px);
    background-color: #AAAAAA;
    margin-top: 20px;
    padding: 30px 20px 30px 20px;
    text-align: center;
}

.subsection:hover {
    .ease-out;
    background-color: #CCCCCC;
}


/**************************************************/
/*********   CUSTOM STYLES - TYPOGRAPHY   *********/
/**************************************************/
h1, h2, h3 {
    color: #444444;
    font-weight: bold;
    margin-bottom: 10px;
}

p {
    color: #666666;
    margin-top: 20px;
}

.form-elements .form-element {
    margin-top: 20px;
}

.tab-wrapper {
    padding: 20px 10px 0px 10px;
}


/********************************************/
/*********   CUSTOM STYLES - TABS   *********/
/********************************************/
@media screen and (max-width: 1250px) {
    
    .tabs-horizontal::after {
        border-top: none;
    }
    
    .tabs-horizontal ul {
        margin-left: 0px;
    }
    	
    .tabs-horizontal ul li {
        -webkit-border-radius: 5px;
    	-moz-border-radius: 5px ;
    	-ms-border-radius: 5px;
    	-o-border-radius: 5px;
    	border-radius: 5px;
        display: none; /* only show the tab that is currently active */
        font-size: 20px;
    	margin: 0px 4px 4px 0px;
        padding: 10px 8px 10px 8px;
        text-align: center;
        width: 100%;
    }
    
    .tabs-horizontal ul li.active-tab {
        display: block;
    }
    
    .show-more-tabs {
        display: block;
    }
    
}