/* ---------- Global Styles --------- */
body {
    position: relative;
}

html {
    text-align: center;
    background-color: #000000;
    color: #FFFFFF;
}

a {
    color: #0094ff;
}

h2 {
    font: bold 22px arial;
}

h3 {
    font: bold 20px arial;
}

p {
    font: 20px arial;
}

    p.copyright {
        font: 16px arial;
    }


/* ---------- Styles for Login/About ---------- */
#production_login_block {
    display: none;
}

#loginarea {
    height: auto;
    width: 95%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    padding-top: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    #loginarea img {
        text-align: center;
        width: 95%;
        max-width: 500px;
    }

    #loginarea form {
        height: auto;
        margin: 0 auto;
        text-align: center;
        border: 1px solid blue;
    }

    #loginarea table {
        font: 22px arial;
        margin: 0 auto;
        text-align: left;
    }

    #loginarea td {
        text-align: left;
        padding: 4px;
    }

    #loginarea input {
        font: 22px arial;
        width: 90%;
    }

.loginbtn {
    font: 22px arial;
}

#description {
    font: 18px arial;
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

#aboutarea {
    height: auto;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}


/* ---------- Styles for Info (jquery ui) ---------- */
.ui-widget {
    font: 26px arial;
}

.ui-dialog-titlebar-close {
    width: 36px !important;
    height: 36px !important;
    top: 35% !important;
}

.ui-accordion .ui-accordion-content {
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: -28px;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.ui-accordion .ui-accordion-header.ui-state-active {
    background-color: #D0D0F0;
}


/* ---------- Styles for Leaderboard ---------- */
table.leader_table {
    border: 2px solid black;
    border-collapse: collapse;
    font: 22px arial;
    position: relative;
    width: 80%;
    margin: 0 auto;
}

tr.leader_row {
    color: white;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 1px solid white;
    background: #414141;
    padding-left: 1px;
    padding-right: 1px;
}

p.leader_banner {
    position: relative;
    font: 24px arial;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
}


/* ---------- Styles for Achievements ---------- */
#achievements {
    z-index: 150;
    position: absolute;
    left: 100px;
    background: #ffffff;
    width: 420px;
    height: 480px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0.97;
    display: none;
}

img.achievement_image {
    position: relative;
    max-height: inherit;
    max-width: inherit;
    visibility: visible;
    text-align: center;
}

div.achievement_text {
    position: relative;
    font: 16px arial;
    text-align: center;
    visibility: visible;
    margin-top: 13px;
}

div.achievement_name {
    position: relative;
    font: 26px arial;
    text-align: center;
    visibility: visible;
    margin-top: 5px;
    margin-bottom: 13px;
}

/* ---------- Styles for User Update/Create ---------- */
#userarea {
    height: auto;
    width: 620px;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
}

#userarea form {
    width: 95%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    border: 1px solid blue;
}

#userarea table {
    font: 2.4vmin arial;
    width: 95%;
    margin: 0 auto;
    text-align: left;
    margin-top: 1px;
    margin-bottom: 1px;
    border-spacing: 1px;
}

#userarea .usergenderlist {
    width: 90%;
}

#userarea .usergenderlist input {
    width: 22px;
    display: inline;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;     
}

#userarea .usergenderlist label {
    display: inline;
    float: none;
    clear: none;
}

#userarea td {
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
}

#userarea input {
    font: 2.4vmin arial;
    width: 95%;
}

/* ---------- Customizations for Mobile ---------- */
@media only screen and (max-width: 760px) {
    p {
        font: 14px arial;
    }

        p.copyright {
            font: 10px arial;
        }

    #loginarea table {
        font: 16px arial;
    }

    #loginarea input {
        font: 16px arial;
    }

    .loginbtn {
        font: 16px arial;
    }

    #description {
        font: 12px arial;
    }
}