
//****************************************************************************************************
//****************************************************************************************************
//****************************************************************************************************
//*************************************Main CSS for overall site.*************************************
//****************************************************************************************************
//*******************************For proper order of properties, see: ********************************
//https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L36
//****************************************************************************************************
//****************************************************************************************************
//****************************************************************************************************/

// Use "//" comments mostly. Block "/*  */" comments are reserved for when you want to ensure the
// comments stays in the compiled css.


// CSS is split up into five main sections of function:
//
//    Positioning
//    Box-Model
//    Typography
//    Visual
//    Other
//
// Furthermore, the css shall be divided into separate files (example: nav, footer, etc) so to eliminate
// the need to scroll through a massive page file just to change a single setting.
//
// This is meant to simplify what each chunk of code is doing and make it overall easier to read.
//
// These files shall be combined into a single "usta.css" file using the SASS precompiler. The usta.scss
// file shall only hold the bare minimum import styles needed to compile. Most css should be within
// ther .scss files which shall be imported into usta.scss.



// Overall z-index order:
//
// 1-20: Background/Main Body Elements/Banner Elements
// 21-40: Content Elements (Includes footer, except sitemap)
// 41-60: Nav Elements  (Includes footer sitemap)
// 61-80: Other Elements (likely unneeded, but defined incase anyway)
//
//
// Specific z-index orders (bottom to top):
//
// Background: body/site-wrapper (0) > banner (5) > body-wrapper/main (10) > body-content (15)
// Content: standard content (20) > footer (30)
// Nav: Nav ul (40) > misc links (45) > ul li (50) > ul ul (55)
// Other: ???


@import '_variables';
@import '_genericClasses.scss';

//**************************************************
//START Standard Class Block
//**************************************************
// These ARE directly referenced within html in some manner. Thus they should be defined as standard classes.

//*************************
//START Rounded Corners Subblock
//*************************

// Round top corners of element.
.round-top {
    border-top-right-radius: 0.5em;
    border-top-left-radius: 0.5em;

    @media (max-width: $tablet-max) {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
}

// Round bottom corners of element.
.round-bottom {
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;

    @media (max-width: $tablet-max) {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
}

// Round top corners of element, extra.
.round-top-extra {
    border-top-right-radius: 5em;
    border-top-left-radius: 5em;
}

// Round bottom corners of element, extra.
.round-bottom-extra {
    border-bottom-right-radius: 5em;
    border-bottom-left-radius: 5em;
}

//*************************
//END Rounded Corners Subblock
//*************************

//*************************
//START Display Subblock
//*************************

// Class for displaying as block. Mostly for Javascript purposes.
.display-block {
    display: block !important;
}

// Class for displaying as inline-block. Mostly for Javascript purposes.
.display-inline-block {
    display: inline-block !important;
}

// Class for displaying as flex. Mostly for Javascript purposes.
.display-flex {
    display: -webkit-flex !important;
    display: flex !important;
}

// Class for displaying as none. Mostly for Javascript purposes.
.display-none {
    display: none !important;
}

//*************************
//END Display Subblock
//*************************

//*************************
//START Misc Subblock
//*************************

// Clear for floats.
.clear-float {
    clear: both;
}

.error {
    border: 1px solid $color-red;
}

// Properties for django errorlist
ul.errorlist {
    color: $color-red;
    padding-left: 0;
    list-style-type: none;
}

label:not(.required) {
    font-weight: initial;
}

label.required {
    font-weight: bold;
}

.bold-text {
    font-weight: bold;
}

.center {
    text-align: center;
}

.center-margin {
    margin-left: auto;
    margin-right: auto;
}

.pointer {
    cursor: pointer;
}

//*************************
//END Misc Subblock
//*************************

//*************************
//START Messagelist Subblock
//*************************

ul.messagelist {
    padding: 0;
    margin: 0;
}

ul.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 13px;
    padding: 10px 10px 10px 65px;
    margin: 0 0 10px 0;
    background: #dfd url('../usta/img/icon-yes.svg') 40px 12px no-repeat;
    background-size: 16px auto;
    color: #333;
    border-bottom: 2px solid green;
}

ul.messagelist li.warning {
    background: #ffc url('../usta/img/icon-alert.svg') 40px 14px no-repeat;
    background-size: 14px auto;
    border-bottom: 2px solid yellow;
}

ul.messagelist li.error {
    background: #ffefef url('../usta/img/icon-no.svg') 40px 12px no-repeat;
    background-size: 16px auto;
    border-bottom: 2px solid red;
}

//*************************
//END Messagelist Subblock
//*************************

//**************************************************
//END Standard Class Block
//**************************************************

// Import Statements

@import '_common';
@import '_normalize';
@import '_body';
@import '_nav';
@import '_banner';
@import '_footer';
@import '_content';

