html, body {
    overflow: hidden;
    /* background-image: url('bg.jpg'); */
    background-size: cover;
}

p {
    padding: 6px;
}

h1, h2 {
    padding-left: 6px;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

pre {
    padding: 6px;
}

.unsupportedBrowser #unsupported {
    display: block;
}

.unsupportedBrowser #wrapper, .unsupportedBrowser #header-bar, .unsupportedBrowser #moduleToolbox, .isNotAdmin.inSpecification #header-bar, #unsupported {
    display: none;
}

.unsupportedBrowser h1 {
    margin: 0;
    padding: 9px;
}

.unsupportedBrowser h2, .unsupportedBrowser p, .unsupportedBrowser ul, .unsupportedBrowser li {
    padding: 6px;
}

.unsupportedBrowser ul {
    list-style-type: square;
    list-style-position: inside;
}

#header-bar {
    position: fixed;
    width: 100%;
    height: 84px;
    padding: 18px 0;
    top: 0;
    left: 0;
}

.bodyHeaderImage {
    margin: 28px 252px;
    float: left;
}

.pageNotEditable #header-bar {
    padding: 0 10px;
}

#section-name {
    line-height: 56px; /* Must be the same height as the container for vertical centering */
    margin-left: 10px;
}

#logout-text {
    float: right;
    line-height: 56px;
}

#homeIcon, #historyIcon, #settingsIcon, #logoutIcon {
    margin: 0;
}

#wrapper {
    position: absolute;
    top: 0px; /* Match this to the height of #header-bar so everything lines up */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    margin-bottom: 0px;
}

#bodyContent {
    height: 100%;
    width: 100%;
    overflow: auto;
}

/* Form Size */
.formSize {
    position: absolute;
    z-index: -10000;
}

body.edit .formSize,
body.noSession .formSize {
    display: none;
}

.dwFormContainer.sizeFormContainer {
    /* Set height/width to approx 100% (i.e. minus any scrollbars) */
    height: calc(100vh - (100vh - 100%));
    width: calc(100vw - (100vw - 100%));
    display: flex;
    flex-direction: column;
}

.edit #wrapper {
    max-width: 1400px;
    margin: 0 auto;
    top: 399px; /* 279px (toolbox) + 120px (header bar)*/
}

.noSession #wrapper, .isNotAdmin.inSpecification #wrapper {
    top: 0;
}

.form-navigation-link, .form-navigation-link-disabled {
    display: inline-block;
    width: 150px;
    height: 50px;
    margin: 5px 0 5px 5px;
    line-height: 50px; /* Should be the same as the height for vertical alignment */
    text-align: center;
    overflow: auto;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.form-navigation-link-disabled {
    cursor: default;
}

/* Specification Tasks */
#specificationTaskList {
    width: 100%;
}

    #specificationTaskList h2 {
        margin: 0;
    }

.specTaskListMessage {
    border-left: 4px solid;
    margin: 3px 0;
    padding: 3px 10px;
}

/* Overwrite module specific styles for this Skin */
#moduleToolbox {
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 84px;
    border: none;
}

.mdl-module-editable {
    border: none;
    margin-bottom: 2.5%;
    margin: 0 5px 5px 5px;
}

/* override for toolbar borders and bg */
.mdl-module-edit-toolbar {
    border: none;
    background-image: none;
}

#specificationFormContainer {
    min-height: 220px;
    margin: 0 auto;
    position: relative;
    padding: 0;
    overflow: hidden; /* Hide controls with negative lefts */
}

#metro-navigation-container {
    margin-bottom: 20px;
}

#specificationBackground {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#specificationForm {
    width: 100%;
    height: 100%;
}

/* getting rid of unsightly borders on module drag and drop toolbox */
.mdl-module-container {
    border: none;
}

/* misc changes for css segregation porpoises */
.details-heading, .details-text, #moduleToolbox {
    min-height: 250px;
}

/* general properties for responsive navigation */
.mdl-navigation a#expandMenu {
    display: none;
}

.loadingOverlayProgress {
    position: relative;
    padding-top: 16px;
    height: 86px;
    width: 100%;
    font-size: 15px;
    background-image: url('../../images/Loading.gif');
    background-repeat: no-repeat;
    background-position: center top;

/* added some clear fix rules for responsive navigation */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}