/* Small screens */

#wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    background: rgba(255,255,255,.95);
    min-width: 320px;
}

header {
    position: relative;
    height: 90px;
}

    header img {
        position: absolute;
        left: 10px;
        top: 4px;
        height: 90%;
    }

#site-title {
    font-size: 2em;
    position: absolute;
    left: 20%;
    top: 30%;
    z-index:20;
    color: rgba(255, 255, 255, .9);
    text-shadow: 4px 4px 4px rgba(0,0,0, .8);
}

#site-subtitle {
    margin: 0;
    font-size: 1.3em;
    float: right;
    margin-right: 12px;
    margin-top: 4px;
    color: rgba(208, 178, 104, .9);
    text-shadow: 4px 4px 4px rgba(0,0,0, .8);
    /*padding: 10px 10px 0 0;*/
}

nav {
    position: absolute;
    bottom: 0;
    right: 4px;
    width: 96%;
    z-index: 20;
}

    nav a {
        text-decoration: none;
        display: block;
        float: right;
        width: 16%;
        margin: 0 2px 0 0;
        padding: 1px;
        white-space: nowrap;
        text-align: center;
        border: solid 1px gray;
        border-bottom: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-color: rgba(208, 178, 104, .9);
        color: #3232c9;
        font-size: 80%;
    }

.largescreen {
    display: none;
}

.smallscreen {
    display: inline-block;
}

p.caution {
        width:90%;
        font-size:85%;
}

footer {
    font-size: 70%;
}
/* Hide first and last cells in footer table on small screens. */
footer table td:nth-child(1),
footer table td:nth-child(3) {
    display:none;
}
.tablefloatright,
.tablefloatleft {
    float: none;
    margin: 1em auto;
}