/* Common to all display sizes */

* {
    box-sizing: content-box;
}

body {
    margin: 0;
    padding: 0 !important;
    color: #333;
    font-family: Montserrat, Helvetica, Arial, 'Noto Sans', sans-serif;
    font-size: 12pt;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header {
    background: linear-gradient(to bottom, #698EB4, #369, #369, #698EB4);
    color: white;
    padding: 0.5rem;
    width: 100vw;
    left: 0;
    position: fixed;
    z-index: 999;
    font-size: 14pt;
}

#logo img {
    float: left;
    padding: 0.5rem;
    width: auto;
    height: 5rem;;
}

a {
    text-decoration: none;
    color: #369;
}

header a {
    color: white;
}

header ul,
header ul li,
header nav a {
    display: inline-block;
    margin: 0 1rem 0 0;
    padding: 0;
}

div.content a {
    color: #369;
}

a:hover {
    text-decoration: underline;
}

div.wikitoc ul ul {
    margin-left: 1rem;
}

div.wikitoc ul li {
    margin: 0;
    padding: 0;
}

.content h1 {
    color: #369;
    margin: 1rem 10% 1rem 10%;
    text-align: center;
    max-width: 80%;
}

.content div.box ul {
    list-style: none;
}

.box h2 {
    text-align: center;
    width: 80%;
    color: #466b90;
    font-weight: 250;
    border-bottom: solid 1px #33669926;
    margin: 0.5rem auto 1rem auto;
    padding: 0 0 0.5rem 0;
}

.box {
    background-color: #f2f2f2;
    border-radius: 0.5rem;
    border: solid 1px #dadada;
    margin: 1rem;
}

div.box li {
    margin-bottom: 0.5rem;
}

.content img {
    max-width: 95%;
    max-height: calc(100vh - 10rem);
}

table.wikitable {
    text-align: left;
}

h1.main-title {
    width: 80%;
    text-align: center;
    margin: 1.5rem auto 2.5rem auto;
    font-weight: 300;
}

header h1 {
    font-weight: 250;
    margin: 0 0 0.5rem 0;
}

header nav a {
    white-space: nowrap;
}

footer {
    text-align: center;
    font-size: small;
    margin-top: 2rem;
    background: linear-gradient(to bottom, #f0f0f0, #ffffff);
    padding: 0.5rem;
    position: fixed;
    bottom: 0rem;
    width: 100vw;
    left: 0;
    z-index: 999;
}

footer div#edit a {
    color: #33669994;
}

div.right {
    width: 100%;
    text-align: right;
}

div.left {
    width: 100%;
    text-align: left;
}

input[type="textarea"] {
    width: 75%;
    padding: 0.25rem;
    margin: 1rem 0 0 0;
    border-radius: 0.5rem;
    border: inset 1px silver;
}

/* search system */

.ODS_tabs {
    display: block;
}

.ODS_formFooter {
    background-color: inherit;
    border: none;
    height: 2rem;
}

.ODS_formBody table {
    background-color: white;
    ;
}

div.ODS_tabContents {
    padding: 0;
    border: 1px solid #7f94a5;
    border-bottom: none;
    background-color: white;
    border-left: none;
    border-right: none;
}

div.ODS_tabContents {
    border: none;
    padding: 0;
    border-top: solid 1px silver;
}

div.ODS_tabContent {
    padding: 0;
}

.search_result {
    margin: 0;
    padding: 1rem;
    width: 100%;
    margin-bottom: 2rem;
}

span.search_author {
    display: block;
}

.search_result:nth-child(odd) {
    background-color: #a1beb563;
}

span.search_result_exp {
    display: block;
    background: #f7f4f4a3;
}

.search_result:nth-child(even) {
    background-color: #87aaba63;
}

span.search_result_exp {
    font-family: monospace;
}

div#search_navbuttons {
    margin-bottom: 10rem;
}

/* elide spurious login box in search results */

table.dialog_body {
    display: none;
}

.vspx_content {
    margin-top: 3rem;
}

div#cls {
    margin: 0;
    padding: 0;
}

div#content {
    padding: 9rem 0 4rem 0;
}

/* Medium display sizes */
@media (min-width: 1024px) {
    body>* {
        padding: 1rem;
    }

    body>header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 1rem;
        width: 100vw;
        height: 6rem;
    }

    div#content {
        padding: 8rem 0 5rem 0;
    }

    header h1 {
        margin: 0.5rem 0 0.5rem 0;
        padding: 0;
        font-weight: 250;
    }

    header input {
        margin: 1rem 0 1rem 0;
        padding: 0;
    }

    div.headerleft {
        max-width: 50%;
        margin-top: 0;
        text-align: left;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 8rem;
        top: 1.5rem;
    }

    div.headerright {
        max-width: 40%;
        text-align: right;
        margin-top: .5rem;
        margin-right: 1rem;
    }

    header nav {
        margin: 0.5rem 0.5rem 0 0;
    }

    div.content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    h1.main-title {
        padding-top: 1rem;
    }

    div.box {
        padding: 1rem;
        width: 25%;
        clear: none;
        float: left;
        height: 18rem;
        border: none;
        box-shadow: 0px 0px 15px 7px #dadada;
    }

    .box h2 {
        margin: 0 auto 1rem auto;
    }

    div.box li {
        margin-bottom: 0.5rem;
    }

    div#edit {
        display: inline;
        position: absolute;
        right: 2rem;
        top: 1rem;
    }
}

/* Really tiny displays */
@media (max-width: 512px) {
    header div.headerright nav a {
        display: none;
    }
}