@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';

@media (min-width: 800px) {
    body, html {
        font-family: 'Open Sans', sans-serif;
        font-size: 11px;
        height: 100%;
        overflow: hidden;
    }

    h1 img {
        vertical-align: top;
    }

    .top_img {
        height: 35px;
    }

    #wrapper {
        position: relative;
    }

    header {
        width: 100%;
        background: #ffffff;
        margin: 10px;
    }

    header h1 {
        font-size: 28px;
        margin: 0px;
    }

    a {
        color: #3366FF;
        text-decoration: underline;
    }

    a:hover {
        color: #4d9ed8;
        text-decoration: underline;

    }

    .langselector {
        position: fixed;
        right: 30px;
        top: 30px;
        font-size: 12px;
    }

    .langselector a {
        color: #3366FF;
        text-decoration: underline;
        cursor: pointer;
    }

    .langselector a:hover {
        color: #4d9ed8;
        text-decoration: underline;
        cursor: pointer;
    }

    section {
        width: 100%;
    }

    .map {
        width: 100%;
        height: 600px;
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        z-index: 0;
        overflow: auto;
    }

    .section_comp {
        border-top: solid 1px #000000;
        border-bottom: solid 1px #000000;
    }

    .section_comp img {
        margin-left: 150px;
    }

    .form-wrapper {
        position: absolute;
        right: 20px;
        top: 70px;
        width: 350px;
        padding: 5px;
        margin-right: 10px;
        background: #444444;
        background: rgba(0, 0, 0, .2);
        border-radius: 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
        z-index: 99;
    }

    .form-wrapper input {
        width: 262px;
        height: 15px;
        padding: 5px;
        float: left;
        font: normal 12px 'Open Sans', sans;
        border: 0;
        background: #eee;
        border-radius: 2px 0 0 2px;
    }

    .form-wrapper input:focus {
        outline: 0;
        background: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
    }

    .form-wrapper button {
        overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        cursor: pointer;
        width: 70px;
        font: bold 15px/25px 'Open Sans', sans;
        color: #fff;
        text-transform: uppercase;
        background: #d83c3c;
        border-radius: 0 3px 3px 0;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    }

    .form-wrapper button:hover {
        background: #e54040;
    }

    .form-wrapper button:active,
    .form-wrapper button:focus {
        background: #c42f2f;
        outline: 0;
    }

    .form-wrapper button::-moz-focus-inner {
        /* remove extra button spacing for Mozilla Firefox */
        border: 0;
        padding: 0;
    }

    .form-wrapper-header {
        display: none;
    }

    #livesearch {
        margin: 0;
        text-align: left;
        background-color: #eee;
        font: normal 12px 'Open Sans', sans;
        z-index: 100;
    }

    #livesearch a {
        color: #000000;
    }

    #livesearch a:hover {
        color: #666666;
    }

    #mapoverbox {
        position: absolute;
        padding: 5px;
        top: 120px;
        left: 20px;
        background: rgba(0, 0, 0, .2);
        border-radius: 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
    }

    #mapoverbox-text {
        width: auto;
        padding: 10px;
        float: left;
        font: normal 12px 'Open Sans', sans;
        border: 0;
        background: #eee;
        border-radius: 2px;
        white-space: nowrap;
    }

    #mapoverbox h2 em {
        font-size: 16px;
        text-align: left;
        font-weight: 700;
    }

    #mapoverbox h2 {
        font-size: 12px;
        text-align: left;
        font-weight: 400;
    }

    small {
        font-size: 10px;
    }

    #ObsBox {
        position: absolute;
        right: 20px;
        bottom: 50px;
        min-width: 355px;
        padding: 5px;
        margin-right: 10px;
        background: rgba(0, 0, 0, .2);
        border-radius: 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
    }

    #infotable td {
        padding: 0 5px;
    }

    #infoTableText {
        min-width: 342px;
    }

    #minimizebutton {
        float: right;
        cursor: pointer;
        overflow: visible;
        position: relative;
        border: 0;
        padding: 0;
        width: 100px;
        font: bold 15px/25px 'Open Sans', sans;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        background: #d83c3c;
        border-radius: 3px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    }

    #minimizebutton:hover {
        background: #e54040;
    }

    #rollBox {
        width: auto;
        padding: 10px 30px 10px 5px;
        float: left;
        font: normal 12px 'Open Sans', sans;
        border: 0;
        background: #eee;
        border-radius: 2px;
        white-space: nowrap;
    }

    #rollWheel {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #eee;
    }

    .centered {
        position: absolute;
        top: 20px;
        left: calc(50% - 32px);
    }

    #boxtext {
        min-width: 342px;
        float: left;
        font: normal 12px 'Open Sans', sans;
        border: 0;
        background: #eee;
        border-radius: 2px;
        padding: 0px 5px;
        text-align: center;
    }

    footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: #ffffff;
    }

    .footerBox {
        position: absolute;
        height: 300px;
        width: 100%;
        border-top: 1px solid #000000;
        bottom: 0;
        background: #ffffff;
        z-index: 99;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .footerMinButton {
        float: right;
        margin-right: 50px;
        cursor: pointer;
        overflow: visible;
        position: relative;
        border: 0;
        padding: 0;
        width: 100px;
        font: bold 15px/25px 'Open Sans', sans;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        background: #d83c3c;
        border-radius: 0 0 3px 3px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    }

    .footerMinButton:hover {
        background: #e54040;
    }

    @-webkit-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        40% {
            -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
        }
        60% {
            -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
        }
    }

    @-moz-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateX(0);
        }
        40% {
            transform: translateX(-30px);
        }
        60% {
            transform: translateX(-15px);
        }
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        40% {
            -ms-transform: translateX(-30px);
            transform: translateX(-30px);
        }
        60% {
            -ms-transform: translateX(-15px);
            transform: translateX(-15px);
        }
    }

    .arrow {
        position: absolute;
        right: 390px;
        top: 75px;
        width: 25px;
        height: 25px;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9Ii02MyAtMTYgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtNjMgLTE2IDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0zMjYuMSwyMDMuMmMyMC4yLDIwLjIsMTkuOSw1My4yLTAuNiw3My43bDAsMGMtMjAuNSwyMC41LTUzLjUsMjAuOC03My43LDAuNmwtMTkwLTE5MEM0MS43LDY3LjMsNDIsMzQuNCw2Mi41LDEzLjhsMCwwQzgzLTYuNywxMTYtNi45LDEzNi4xLDEzLjNMMzI2LjEsMjAzLjJ6Ii8+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTMyNi4xLDI3Ni44YzIwLjItMjAuMiwxOS45LTUzLjItMC42LTczLjdsMCwwYy0yMC41LTIwLjUtNTMuNS0yMC44LTczLjctMC42bC0xOTAsMTkwYy0yMC4yLDIwLjItMTkuOSw1My4yLDAuNiw3My43bDAsMGMyMC41LDIwLjUsNTMuNSwyMC44LDczLjcsMC42TDMyNi4xLDI3Ni44eiIvPjwvc3ZnPg==);
        z-index: 99;
    }

    .bounce {
        -webkit-animation: bounce 2s infinite;
        animation: bounce 2s infinite;
    }

    .vertical-line {
        border-right: 1px solid #000000;
    }

    #mouse-position {
        position: absolute;
        left: 3px;
        top: 655px;
        z-index: 99;
        font-size: 12px;
        background: #ffffff;
        padding: 5px;
    }

    #next-species {
        position: absolute;
        right: 3px;
        top: 655px;
        font-size: 12px;
        background: #ffffff;
        padding: 5px;
    }

    .footerContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .footerItem.enabled {
        margin-right: 3px;
        cursor: pointer;
        padding-left: 10px;
        padding-right: 10px;
        font: bold 15px/25px 'Open Sans', sans;
        color: #fff;
        text-transform: uppercase;
        background: #d83c3c;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    }

    .footerItem.disabled {
        margin-right: 3px;
        padding-left: 10px;
        padding-right: 10px;
        font: bold 15px/25px 'Open Sans', sans;
        text-transform: uppercase;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #a9a9a9;
        background: #d3d3d3;
    }

    .footerItem.enabled:hover {
        background: #e54040;
    }

    .mobile-btn-wrapper {
        display: none;
    }

    .mobile-footer {
        display: none;
    }

    .mobile-footer-min-btn {
        display: none;
    }

    #mobileFooterInfoBox {
        display: none;
    }

    .link {
        width: 600px;
    }
}