/**
 * All styles
 */

* {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
}

html, body {
    height: 100%;
    margin: 0;
    background-color: #fff2e2;
}

body {
    display: flex;
    flex-direction: column;
}


/**
 * Header
 */

#header {
    box-sizing: border-box;
    background-color: #f3be79;
    font-family: "Arvo", serif;
    font-size: 36px;
    font-weight: bold;
    color: #cd7400;
    text-align: center;
    text-shadow: 2px 2px #ff9000;
    padding: 20px 0px;
}

@media only screen and (max-width : 800px) {
    #header {
        font-size: 30px;
    }
}

@media only screen and (max-width : 650px) {
    #header {
        font-size: 26px;
    }
}


/**
 * Menu
 */

#menu {
    box-sizing: border-box;
    background-color: #4e2c05;
}

#menu #menu_hamburger {
    display: none;
}

#menu_inner {
    margin: 0px auto;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

#menu_inner a {
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
}

#menu_inner a.active {
    background-color: #ed8600;
}

#menu_inner a:hover {
    background-color: #9c5813;
    transition: background-color 0.5s ease;
}

@media only screen and (max-width : 800px) {
    #menu_inner {
        padding: 0px 10px;
    }

    #menu_inner a {
        padding: 8px 10px;
    }
}

@media only screen and (max-width : 650px) {
    #menu #menu_hamburger {
        display: block;
        width: 100%;
        margin: 0px;
        padding: 5px 0px;
        text-align: center;
        line-height: 0px;
        cursor: pointer;
    }

    #menu #menu_hamburger #menu_hamburger_burger {
        display: inline-block;
    }

    #menu #menu_hamburger #menu_hamburger_burger .bar1,
    #menu #menu_hamburger #menu_hamburger_burger .bar2,
    #menu #menu_hamburger #menu_hamburger_burger .bar3 {
        width: 35px;
        height: 5px;
        background-color: #fff;
        margin: 6px 0;
        transition: 0.4s;
    }

    #menu #menu_hamburger #menu_hamburger_burger .bar1.change {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }

    #menu #menu_hamburger #menu_hamburger_burger .bar2.change {
        opacity: 0;
    }

    #menu #menu_hamburger #menu_hamburger_burger .bar3.change {
        -webkit-transform: rotate(45deg) translate(-9px, -7px);
        transform: rotate(45deg) translate(-9px, -7px);
    }

    #menu #menu_hamburger span {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        vertical-align: 13px;
    }

    #menu_inner {
        display: none;
        padding-bottom: 10px;
    }

    #menu_inner a {
        width: 100%;
        text-align: center;
        margin: 2px 0px;
    }
}


/**
 * Body Content
 */

#content {
    box-sizing: border-box;
    flex: 1 0 auto;
    margin: 0px auto;
    width: 100%;
    max-width: 800px;
}

#content a {
	color: #00f;
	text-decoration: underline;
	cursor: pointer;
}

#content a:hover {
	color: #004;
}

#content h1 {
    font-size: 22px;
    color: #4e2c05;
    padding-bottom: 5px;
    border-bottom: 1px dotted #000;
}

#content h2 {
    font-size: 18px;
    color: #cd7400;
}

#content th {
    background-color: #9E5900;
    text-align: left;
    color: #fff;
}

@media only screen and (max-width : 800px) {
    #content {
        padding: 0px 10px;
    }

    #content h1 {
        font-size: 18px;
    }
}


/**
 * Link Classes
 */

#content a.pdf {
    background-image: url('/images/page_white_acrobat.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

#content a.external {
    background-image: url('/images/world_link.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}


/**
 * Footer
 */

#footer {
    box-sizing: border-box;
    background-color: #4F2C00;
    font-family: "Arvo", serif;
    font-size: 14px;
    font-weight: bold;
    color: #F3BE79;
    text-align: center;
    line-height: 1.75;
    padding: 15px 0px;
}

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

@media only screen and (max-width : 800px) {
    #footer {
        font-size: 12px;
    }
}

@media only screen and (max-width : 650px) {
    #footer {
        font-size: 11px;
    }
}


/**
 * Forms
 */

:-moz-placeholder {
    color: #424242;
}

::-moz-placeholder {
    color: #424242;
}

:-ms-input-placeholder {
    color: #424242;
}

[type="text"],
[type="password"],
[type="date"],
[type="datetime"],
[type="email"],
[type="number"],
[type="search"],
textarea,
select {
    display: inline-block;
    width: 95%;
    max-width: 300px;
    padding: 8px 10px;
    margin: 2px 0;
    border: 1px solid #ccc;
    color: #424242;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    border-radius: 3px;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
}

[type='text']:focus,
[type='password']:focus,
[type='date']:focus,
[type='datetime']:focus,
[type='email']:focus,
[type='number']:focus,
[type='search']:focus,
textarea:focus,
select:focus {
    border: 1px solid #8a8a8a;
    background-color: #fefefe;
    outline: none;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

select {
    padding: 9px 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2851, 51, 51%29"></polygon></svg>');
    background-size: 9px 6px;
    background-position: right center;
    background-origin: content-box;
    background-repeat: no-repeat;
}

@media screen and (min-width: 0\0) {
    select {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==")
    }
}

select:disabled {
    background-color: #e6e6e6;
    cursor: default;
}


/**
 * Buttons
 */

input[type='submit'], input[type='button'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    background-color: #4F2C00;
    border: 1px solid #4F2C00;
    font-size: 0.875rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    padding: 10px 1rem;
    margin: 3px 0px;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    cursor: pointer;
}

input[type='submit'].reverse, input[type='button'].reverse {
    background-color: #eee;
    border-color: #777;
    color: #0F2E21;
}

input[type='submit']:hover, input[type='button']:hover {
    background-color: #DC8100;
    border-color: #4F2C00;
}

input[type='submit'].reverse:hover, input[type='button'].reverse:hover {
    background-color: #bbb;
    border-color: #777;
    color: #4F2C00;
}

::-webkit-input-placeholder {
    color: #424242;
}


/**
 * Errors
 */

#errors, #errors *, #errors *::before {
    color: #f00;
}