/* Header, Banner, and Navigation */

header, footer {
    width: 100%;
    max-width: 100vw; /* Ensure it never exceeds the viewport width */
    margin: 0;
    box-sizing: border-box;
}

header {
    padding: 0;
    border: 0;
    position: relative;
    top: 0;
    left: 0;
}

#bannerimage {
    width: 100%;
    height: auto; /* Allow height to scale on mobile */
    min-height: 10em;
    background-color: #1d2b4c;
    position: relative;
    display: block;
    border-top: none;
    border-bottom: none;
    border: 0;
}

#bannerimage #surveyname {
    font-size: xx-large;
    position: absolute;
    bottom: 2.9em;
    left: 1em;
}

#surveyname2 {
    font-size: xx-large;
    position: absolute;
    bottom: 1.75em;
    left: 1em;
}

#surveyname3 {
    font-size: xx-large;
    position: absolute;
    bottom: 1.13em;
    left: 1em;
}

nav {
    clear: both;
    font-size: smaller;
    background-color: #000;
    padding-left: 2em;
    height: 2em;
    border-top: none;
    border-bottom: none;
    line-height: 2em;
}

nav #navlinks {
    float: left;
    z-index: 9999;
}

nav #navlinks ul {
    padding: 0;
    margin: 0;
    border: 0;
}

nav #navlinks li {
    margin: 0;
    list-style: none;
    display: inline-block;
    padding-left: .5em;
    padding-right: 1em;
    border-right: 2px solid #ffffff;
    height: 2em;
    line-height: 2em;
}

nav a:link,
nav a:visited {
    color: #fff;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
}

/* Header Bar (Groundwater Science) */
h2 {
    margin: 1px 0 0 0;
    background-color: #42536e;
    color: #fff;
    padding: .5rem 2rem;
}

h2 a {
    color: #f1f4fe;
    text-decoration: none;
    display: block;
}

/* Footer Styles */
footer {
    clear: both;
    background-color: #ddd;
    padding: 1.5em;
    font-size: 10px;
    border-top: 1px solid #ccc;
    top: 0;
    height: 12em;
}

footer .column_left {
    float: left;
    color: #444444;
    padding-left: 1em;
}

footer a {
    color: #444444;
    text-decoration: none;
}

footer .column_right {
    float: right;
    color: #444444;
    text-align: right;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5 {
    margin-bottom: 0;
    padding-bottom: .25rem;
    color: #444444;
}

footer h3 {
    font-size: 14px;
    padding-top: 0;
    margin-top: 0;
    color: #444444;
}

footer p,
footer ul,
footer li {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.4;
}

#social img {
    margin: 0 4px 0 4px;
}

div.social-links a img {
    -webkit-filter: opacity(80%);
    filter: opacity(80%);
}

div.social-links a:hover img {
    filter: opacity(100%);
    -webkit-filter: opacity(100%);
}

/* Mobile Fix for Navigation: Allow wrapping so it doesn't push the margin */
@media (max-width: 600px) {
    nav {
        height: auto; /* Allow nav to grow if links wrap */
        line-height: normal;
        padding: 10px;
    }

    nav #navlinks li {
        border-right: none;
        padding: 5px 10px;
    }
    
    footer {
        height: auto; /* Allow footer to grow vertically on mobile */
        padding: 2em 1em;
    }
}