/*
** This style sheet creates new styles and also modifies/augments styles.css
** This style sheet must be defined AFTER styles.css!!
**
** Example: <link rel="stylesheet" type="text/css" href="styles.css">
**          <link rel="stylesheet" type="text/css" href="stylesBkd.css">
**
** Reference:
** http://stackoverflow.com/questions/16322610/100-height-div-between-header-and-footer
*/

/*
** CSS at-rules. Special instructions for the browser, not directly related to
** styling of (X)HTML/XML elements in Web documents using rules and properties,
** although they do play important roles in controlling how styles are applied.
**
** These 2 rules control the viewport and pertains mostly to mobile displays.
*/
@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
/* Just for IE10 */
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

html, body {
    height: 100%;
    margin: 0;
}
/* the wrapper is what the viewer sees on the screen, aka the viewport */
#wrapper {
    position:relative;
    min-height:100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width:100%;
    /* the DPB header height is 121 pixels */
    height:121px;
    position:absolute;
    left:0;
    top:0;
}
#content {
    width:817px;
    /* sum of DPB footer heights is 57px, left menu width is 185px */
    margin:0 auto -57px 185px !important;
    padding:0 0 0 0 !important;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-inner {
    padding-top:3px;
    padding-left:5px;
}
#content-spacer-top {
    height:121px;
}
#content-spacer-bottom {
    /* sum of DPB footer heights:  height + pad top + pad bottom +
                                   margin top + margin bottom +
                                   border top + border bottom */
    height:57px;
}
#footer {
    /* the DPB footer height is 30 pixels */
    height: 30px;
}