/*!
 * Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    /*background-image: url("/images/bg-color-pic.png");
  background-repeat: repeat;*/
    /*min-width: 1024px;*/
    /*background-color: whitesmoke;*/
}

.footer-floor {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px lightgray solid;
}



.alert {
    background-color: #fff8e2;
    border-color: #eadbad;
    color: #333333;
    padding-top: 15px;
}

.alert-danger,
.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
}

.alert-error {
    background-color: #ffe2e2;
    border-color: #ffa1a1;
    overflow: hidden;
}

.alert-error-inner {
    margin-left: 50px;
}

.alert-success {
    background-color: #f2ffe2;
    border-color: #cbe5ac;
}

.alert-info {
    background-color: #e2f6ff;
    border-color: #c0dce9;
}

.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline {
    color: red;
}

/*-------------------------------------------RESPONSIVE-----------------------------------------------------------------------------*/

/*Lets start building a responsive grid-view.
First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are 
included in the total width and height of the elements.*/

* {
    box-sizing: border-box;
}

/*The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other 
   elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:*/
.row::after {
    content: "";
    clear: both;
    display: table;
}

/*All these columns should be floating to the left, and have a padding of 15px:*/
/* For mobile phones: */
/*KKEPS THIS HELPS DEBUG*/
[class*="col-"] {
    float: left;
    width: 100%;
    /*padding-left: 15px;
    padding-right: 15px;*/
    /*padding-top: 5px;
    padding-bottom: 5px;*/
    /*border: 1px solid red;*/
}



/*First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.
Then we make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:*/
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}


/*Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.*/
/*@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue !important;
    }
}*/

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.validation-summary-errors {
    background-color: #ffa1a1;
    border-color: #c0dce9;
}

.validation-summary-valid {
    background-color: #ffa1a1;
    border-color: #c0dce9;
}