header {
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 10px 10px 10px;
}

header img {
    max-width: 100%;
    min-width: 250px;
}

header a:hover img {
    opacity: 0.8;
}

h1.title {
    text-align: right;
    font-size: 28px;
    line-height: 32px;
}

.tagline {
    font-size: 16px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    display: block;
    line-height: 22px;
    margin-top: 10px;
}

@media only screen and (max-width: 960px) {
    header img {
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 767px) {
    header, h1.title {
        text-align: center;
    }
}

/* styles to accommodate for too many items or nav titles that are too long to fit in the horizontal layout */
nav {
    height: auto;
}

#nav {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-align-items: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

#nav a {
    display: block;
    height: 100%;
    box-sizing: border-box;
}
/* end */

#main ul, #main ol {
    list-style-position: outside;
}