/* Links */
body.maintenance a,
body.maintenance a:focus,
body.maintenance a:hover {
    color: #fff;
}


/*
 * Base structure
 */
html,
body.maintenance,
body.error404{
    height: 100%;
}

body.maintenance,
body.error404{
    text-align: center;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
body.maintenance .site-wrapper,
body.error404 .site-wrapper{
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
}

body.maintenance .site-wrapper-inner,
body.error404 .site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}
body.error404 .cover-container,
body.maintenance .cover-container {
    margin-right: auto;
    margin-left: auto;
}

/* Padding for spacing */
body.maintenance .inner,
body.error404 .inner {
    padding: 2rem;
}



/*
 * Cover
 */

body.maintenance .cover,
body.error404 .cover {
    padding: 0 1.5rem;
}
body.maintenance .cover .btn-lg,
body.error404 .cover .btn-lg {
    padding: .75rem 1.25rem;
    font-weight: bold;
}


/*
 * Affix and center
 */

@media (min-width: 40em) {
    /* Start the vertical centering */
    body.error404 .site-wrapper-inner,
    body.maintenance .site-wrapper-inner {
        vertical-align: middle;
    }
    /* Handle the widths */
    body.maintenance .masthead,
    body.maintenance .mastfoot,
    body.maintenance .cover-container,
    body.error404 .masthead,
    body.error404 .mastfoot,
    body.error404 .cover-container {
        width: 100%; /* Must be percentage or pixels for horizontal alignment */
    }
}

/*
 * Foooter
 */
body.maintenance footer#colophon,
body.error404 footer#colophon{
    position: fixed;
    bottom: 0;
    width: 100%;
}

@media (min-width: 62em) {
    body.maintenance .masthead,
    body.maintenance .mastfoot,
    body.maintenance .cover-container,
    body.error404 .masthead,
    body.error404 .mastfoot,
    body.error404 .cover-container {
        width: 42rem;
    }
}