body, html {
    height: 100%;  
}

/***************************** header ********************************/

#appname {
    font-family: 'Times New Roman';
    font-size: 25px;
    color: #2B2B2B;
    /*float: right;*/
    line-height: 76px;
    padding-right: 0px;
}

.userInfoHeader {
    float: right; 
    color: #A7A796; 
    font-size: 11px; 
    padding-top: 10px;
}

/****************************** navbar *****************************/

#navbar:before {
    position: absolute;
    left: 0px;
    right: 0;
     /*top: 0px;*/ 
    bottom: 0;
    /*background: rgb(252,248,227); */
    background-color: #337ab7;
    color: white;
    height: 75px;
    width: 100%;

}

/****************************** content ******************************/
#content {
    min-height: 100%;
    padding-bottom:60px;
}

/****************************** footer *******************************/

.footer {
    border-top: 1px solid #CCC;
    font-size: .85em;
    background-color: #EFEED6;
    padding: 5px 10px 5px 10px;
    color: #A7A796;
    width: 100%;
    height: 25px;
    margin-top: -25px;
}

    .footer a {
        text-decoration: none;
        font-weight: bold;
        color: #A7A796;
    }

    #footerInfo {
    float: right;
    font-size: 11px; 
}

.userInfoFooter {
color: #A7A796; 
font-size: 11px; 
float: left;
}

/********************** styles for validation helpers *****************/
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/**********verticle aligns textboxes on validation errors****************/
td, th {
    vertical-align: top;
}

/********************************** table *******************************/
thead {
    /*background-color: rgb(252,248,227);*/
}


/************************ view port***************************************/


@media screen and (min-width: 279px) and (max-width: 309px) {

    #appname {
        font-size: 18px;
    }
}

@media screen and (min-width: 309px) and (max-width: 339px) {

    #appname {
        font-size: 18px;
    }
}
@media screen and (min-width: 339px) and (max-width: 369px) {

    #appname {
        font-size: 20px;
    }
}
@media screen and (min-width: 369px) and (max-width: 399px) {

    #appname {
        font-size: 22px;
    }
}

@media all and (max-width: 398px) {
   .footer {
        height: 65px;
    }
}

@media all and (max-width: 519px) {
    .userInfoHeader {
        display: none;
    }

    .footer {
        height: 65px;
    }

    #appname{
        line-height: 17px;
    }
}

@media all and (min-width: 520px) and (max-width: 767px) 
{
    #appname{
        line-height: 36px;
    }
}


/*above 519px do not display*/
@media all and (min-width: 519px) {
    .userInfoFooter {
        display: none;
    }
}

@media all and (max-width: 767px) {

    .idaoLogo {
        display: none;
    }

    .btn {
        width: 100%;
    }

    .section-btn > .col-sm-2 {
        padding: 5px;
    }

    .userInfoHeader {
        padding-top: 8px;
    }
    #navbar {
        background-color: rgb(252,248,227);
        color: white;
    }
}

@media print {

    body {
        margin-top: -144px;
    }
    a[href]:after {
        content: none !important;
        top: 0px;
    }

    footer > .navbar-fixed-bottom {
        position: relative;
    }

    /*for chrome only*/
    [class*="col-sm-"] {
        float: left;
    }

    .idaoLogo {
        display: block !important;
    }

    .navbar-fixed-top {
        position: relative;
    }

    .navbar-toggle {
        display: none;
    }

    #appname {
        font-family: 'Times New Roman';
        color: #2B2B2B;
        line-height: 70px;
    }

    .userInfoFooter {
        color: #A7A796; 
        font-size: 11px; 
        float: left;
    }

    .userInfoHeader {
        float: right; 
        color: #A7A796; 
        font-size: 11px;
    }

    .navbar-fixed-bottom > .footer > .container > .row > .col-sm-4 {
        float: right;
    }

    div#dateTimeOnPrintedPage {
        position:  fixed;
        bottom:  0;
    }
}

@media screen {
    div#dateTimeOnPrintedPage {
        display: none;
    }
}


.titletextbegin {
  margin-left: 10px;
}

.textspace {
  margin-left: 7px;
}