@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700,800);


/* MASTER FONT FAMILIES */
html, .button, .blog h6, input, textarea {
    font-family: 'Avenir Next', 'HelveticaNeue-UltraLight', 'Tahoma', helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, .button, .caption {
    font-family: 'Avenir Next', 'HelveticaNeue-UltraLight', 'Tahoma', helvetica, sans-serif;
}



/* DEFAULT STYLES */
html, body {
    padding: 0px;
    margin: 0px;
    -webkit-text-size-adjust: none;
}

body {
    font-size: 16px;
    line-height: 1.8;
    color: #f2efda;
    background: #2a2a2a;
    text-align: center;
}

main {
    text-align: center;
    width: auto;
    padding: 0 40px;
    max-width: 750px;
}

h1 { font-size: 2.5em; }
h2 { font-size:   2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.3em; }
h5 { font-size:   1em; }

h6 {
    font-weight: normal;
    font-size: .75em;
    margin: 0px;
}

h1, h2, h3, h4, h5 {
    /*max-width: 800px;*/
    margin-top: 0;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
}

.note {
    font-size: .75em;
    color: #dd900b;
}

a {
    color: #1ba7ed; /*0793c4*/
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#header, #footer, hr, .button {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
}

hr {
    border: 0;
    color: #cbcbcb;
    background-color: #ccc;
    height: 1px;
    max-width: 850px;
}

input, textarea {
    color: #3f3f3f;
    -webkit-border-radius: 0;
}

table {
    border-collapse: collapse;
    border: 1px solid #666;
    width: 100%;
    margin: 1em auto;
}

table td, table th {
    padding: 0.25em;
    border: 1px solid #666;
    font-size: 20px !important;
}

table th {
    font-weight: bold;
    text-align: center;
}

table td {
    font-weight: normal;
    text-align: left;
}

table .right {
    text-align: right;
}



/* HEADER */
header {
    padding: 1em 2em 2em 2em;
}

#logo_main {
    width: 500px;
    height: auto;
}

#nav {
    margin-top: 1.5em;
}

#nav a, .bd_button {
    background: #505660;
    color: #f2efda;
    text-decoration: none;
    text-align: center;
    width: 20%;
    max-width: 10em;
    display: inline-block;
    padding: 0.6em;
    margin: .25em;
}

#nav a:hover, .bd_button:hover {
    background: #dd900b;
    text-decoration: none;
}

#nav .selected {
    background: #111 !important;
}

#alert_msg {
    background: #3f3f3f;
    color: white;
    text-align: center;
    padding: 8px;
    border-radius: 2px;
}

#logged_in_box {
    margin: -1em auto 2em auto;
    font-size: 0.8em;
}



/* FOOTER */
footer {
    padding: 2.5em 2em 2em 2em;
    margin: 0em auto;
    max-width: 60em;
}

#app_store_badges {
    float: right;
    text-align: right;
    padding-right: 6em;
    width: 10em;
}

#copyright {
    float: left;
    width: 20em;
    padding-left: 6em;
    text-align: left;
    font-size: 0.8em;
    line-height: 1.4;
    color: #dd900b;
}

#copyright a {
    color: #dd900b;
}

#heinzel_logo {
    width: 109px;
    height: 42px;
    float: left;
    margin-right: 1em;
}

#trademarks {
    clear: both;
    font-size: 0.7em;
    padding-top: 3em;
    color: #5b687a;
    line-height: 1.4;
}



/* CONTENT */
.content {
    padding: 1.5em 1em;
}

.content_inner {
    margin: 0 auto;
    padding: 1.5em 1em;
    max-width: 40em;
    overflow: auto;
}

.orange {
    color: #2a2a2a;
    background-color: #dd900b;
}

.grayish {
    background-color: #3c3c3d;
}



/* HOME */
#home_message_main_dude {
    width: 105px;
    height: 172px;
    float: left;
}

#home_message_main {
    text-align: left;
    margin: 1.8em 0em 0em 9em;
}

/*
#screenshot {
    max-width: 15.5em;
    height: auto;
    float: right;
    margin: 0em 0em 1em 2em;
}
*/

#home_screenshot_wrapper {
    width: 15.5em;
    height: auto;
    float: right;
    margin: 0em 0em 0em 2em;
    display: none;
}

#home_screenshot_wrapper ul {
    margin: 0;
}

#home_screenshot_wrapper img {
    width: 15.5em;
    height: auto;
}

#home_message_mid {
    text-align: left;
    font-size: 0.9em;
}

#home_message_mid p {
    margin: 0em 0em 0.75em 0em;
}

#home_message_enemies {
    margin-top: 1em;
    width: 160px;
    height: auto;
}



/* ABOUT */
#about_main {
    text-align: left;
}

#about_main p {
    max-width: 30em;
}

#about_dude_old {
    float: right;
    width: 130px;
    height: auto;
    margin: 3em 0 1em 1.5em;
}

#about_caption {
    color: #dd900b;
    font-size: 0.7em;
    float: right;
    width: 130px;
    clear: right;
    margin: 0 0 1.5em 1.5em;
    text-align: center;
}

#about_table, #about_table td {
    border: 0;
    width: auto;
}

#about_note {
    margin-top: 1.25em;
    float: left;
    text-align: left;
    width: 100%;
    line-height: 1.4;
}

#about_mug {
    width: 30px;
    height: auto;
    float: left;
    margin-right: 1em;
}



/* LEADERBOARD */
#leaderboard_table {
    margin: 0 auto;
    border: 0;
    border-collapse: collapse;
    width: auto;
}

#leaderboard_table td {
    font-size: 1.2em;
    padding: .15em .4em;
    border: 0;
}

#leaderboard_table .score {
    text-align: right;
}

#leaderboard_table .name {
    text-align: left;
}



/* SUPPORT */
#support_main {
    text-align: left;
}

#support_main h4 {
    color: #dd900b;
    margin-top: 2em;
}

#support_main h5 {
    font-size: 1.1em;
    line-height: 1.5;
    margin-top: 1.75em;
    margin-bottom: 0.5em;
}

#support_main p {
    margin: .25em 0em;
}



/* PRIVACY */
#privacy_main {
    text-align: left;
}

#privacy_main h5 {
    color: #dd900b;
    margin: 1.5em 0 .5em 0;
}

#privacy_main p {
    margin: 0 0 0.5em 0;
}



/* FORM */
form {
    margin: 0px;
}

.label {
    font-size: 0.9em;
    padding: 3px 8px;
    margin: 15px auto 0px auto;
    text-align: center;
    cursor: pointer;
    display: block;
}

.label_error {
    color: #d33e3e;
}

.field {
    margin: 0px auto 12px auto;
    text-align: center;
}

.field_spacer {
    height: 15px;
}

.input, .textarea, .input_pass {
    font-size: 1em;
    border: 1px solid #bbb;
    padding: 6px;
    margin: 0px 8px 0px 0px;
    text-align: center;
    border-radius: 4px;
    max-width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.input, .textarea, .input_pass {
    line-height: 18px;
}

.textarea {
    width: 500px;
    height: 150px;
    line-height: 1.5;
    text-align: left !important;
}

.input_error {
    border: 2px solid #d33e3e;
}

.input_check {
    font-size: 18px;
    margin: 0px;
}

.select {
    font-size: 18px;
    margin-top: 0px;
}

#error_box {
    background-color: #d33e3e;
    background-position: 7px 5px;
    background-repeat: no-repeat;
    padding: 10px 15px;
    color: white;
    text-align: center;
    margin: 15px auto;
    max-width: 50%;
    min-width: 300px;
    border-radius: 2px;
}



/* BUTTONS */
.button {
    font-size: 1em;
    line-height: 1.1;
    border: 0;
    background: #24a4d1;
    color: white;
    min-width: 106px;
    text-align: center;
    padding: .75em 1em;
    margin: 4px;
    display: inline-block;
    border-right: 1px solid rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(0,0,0,0.4);
    border-radius: 2px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.button:hover {
    background: #555;
    text-decoration: none;
}

.button_gray {
    background: #aaa;
}

.button_red {
    background: #d33e3e;
}

.button_processing, .button_processing:hover {
    text-decoration: none;
    background: url(/images/main/button_processing.gif);
    border-right: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    cursor: default;
}



/* RESPONSIVE */
@media screen and (max-width: 37em) {


    table td, table th {
        font-size: 0.8em;
    }


    #header {
        padding: 1em 2em 2em 2em;
    }


    #logo_main {
        margin: 0em auto;
        width: 100%;
        max-width: 360px;
        height: auto;
    }

    #nav a {
        max-width: 14em;
        width: 14em;
        display: block;
        padding: 0.5em;
        margin: 0 auto .5em auto;
    }
    
    
    .content {
        padding: 1em .25em;
    }

    .content_inner {
        padding: 1em .25em;
    }


    #app_store_badges {
        float: none;
        margin: 0em auto;
        padding: 0em;
        width: auto;
        text-align: center;
    }
    
    #copyright {
        float: none;
        margin: 1.5em auto;
        padding: 0.5em 0em;
        width: 20em;
        text-align: left;
    }
    
    #trademarks {
        padding-top: 1em;
    }
    
    
    .content {
        padding: 1.5em 1.5em;
    }
    
    .bd_button {
        width: auto;
    }
    
    
    
    
    #home_message_main_dude {
        width: 55px;
        height: 90px;
        float: right;
        margin: 0em 0em 0.75em 0.75em;
    }

    #home_message_main {
        text-align: left;
        margin: 0em 0em 0em 0em;
    }
    
    #home_screenshot_wrapper {
        float: none;
        margin: 0em auto 3em auto;
    }
    
    8
    
    #about_dude_old {
        width: 80px;
    }
    
    #about_caption {
        width: 80px;
    }
    
    
    
}

@media screen and (max-width: 360px) {

    
    
}



.metric {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* input placeholder text color */
::-webkit-input-placeholder {   color: #888; }
:-moz-placeholder {             color: #888; }
::-moz-placeholder {            color: #888; }
:-ms-input-placeholder {        color: #888; }