/* GENERAL BODY */
header {
    padding: 0.5em
}
#logo {
    width: 8.75em;
    display: inline;
    margin-bottom: 1.25em
}
#station {
    display: inline;
    margin-left: 0.5em;
    font-weight: bold;
}
body {
    padding-top: 1em;
    background-color:#606060;
}
#container {
    background-color: #404040;
    height: 100%;
    padding: 1.5em;
    border: 0.15em solid #808080;
    border-radius: 0.4em;
}
.section {
    padding: 0.5em 2em;
}
#timestampLeft {
    display: none;
}
#getLatest1, #getLatest2 {
    font-size: 0.9em;
    font-weight: bold;
    font-style: oblique;
    color: #FFFFFF;
    border-top: 0.15em solid #CCCCCC;
    /*border-bottom: 0.15em solid #909090;*/
    border-radius: 0.4em;
    background-color:#606060; 
    margin: 1em 0em 0em;
    width: 100%;
    height: 2.5em;
}
.refresh_row {
    height: auto;
    border-top: 0.15em solid #000000;
    border-radius: 0.4em;
    background-color:#202020; 
    margin: 1em 0em 0em;
    padding-top: 0.25em;
    width: 100%;
}
.refresh_text {
    text-align: right;
    padding-top: 0.2em;
    font-size: 0.9em;
    font-weight: bold;
    color: #CCCCCC;
}
.refresh_checkbox {
    padding-bottom: 0.2em;
    text-align: center;
}
.data_row {
    border: 0.1em solid #808080;
    background-color: #808080;
    border-radius: 0.4em;
    margin-bottom: 0.5em;
}
.row_label {
    font-size: 0.9em;
    color: #EEEEEE;
    font-weight: bold;
    padding: 0.2em 0.5em 0.2em 0.5em;
}
.data_container {
    background-color: #000000;
    padding: 0.3em;
    border-radius: 0.4em;
}
.data_column {
    padding: 0.2em;
}
.data {
    color: 	#FFD700;
    font-family: 'Lucida Console', consolas, monospace;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border-radius: 0.3em;
    background-color: #0e0e3f;
    padding: 0.2em;
}
.label {
    font-size: 0.8em;
    padding: 0em 0.1em;
    margin-left: 0.1em;
    color: #FFFFFF;
    font-weight: bold;
}
/*compass style*/
/*#compass_container {
    text-align: center;
    padding: 1.5em 0em;
    vertical-align: central;
}
#compass {
    width: 100%;
}
#arrow {
    position: absolute;
    right: 45%;
    top: 30%;
    height: 37.5%;
}
#compass_speed {
    color: 	#FFD700;
    font-family: 'Lucida Console', consolas, monospace;
    font-weight: bolder;
    font-size: 2.5em;
    position: absolute;
    bottom: 42.5%;
    left: 27.5%;
}
#degree {
    color: 	#FFD700;
    font-family: 'Lucida Console', consolas, monospace;
    font-weight: bolder;
    position: absolute;
    font-size: 1.5em;
    top: 65%;
    left: 42.5%;
}*/
/*footer style*/
.footer {
    margin: 0em;
}
.footer_container {
    margin: 0.5em 0em;
    background-color: #000000;
    padding: 0.3em;
    border-radius: 0.4em;
}
.footer_data {
    color: 	#FFD700;
    font-family: 'Lucida Console', consolas, monospace;
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
    border-radius: 0.3em;
    background-color: #0e0e3f;
    padding: 0.2em 1em;
}

/*hi res tablet*/
@media only screen and (max-width: 1200px) {
    .row_label {
        font-size: 0.75em;
    }
    .data {
        font-size: 1em;
    }
    .label {
        font-size: 0.65em;
    }
    #getLatest1, #getLatest2 {
    font-size: 0.75em;
    }
    .footer_data {
    font-size: 0.75em;
    }
}
/*tablet*/
@media only screen and (max-width: 991px) {
    .row_label {
        font-size: 0.75em;
    }
    .data {
        font-size: 0.75em;
    }
    .label {
        font-size: 0.5em;
    }
    #getLatest1, #getLatest2 {
    font-size: 0.75em;
    }
    .footer_data {
    font-size: 0.6em;
    }
}
/*smartphone*/
@media only screen and (max-width: 767px) {
    header {   
        text-align: center;
    }
    #logo {
        width: 7.5em;
        margin-bottom: 1em;
    }
    #station {
        font-size: 2em;
    }
    #timestampLeft {
        display: block;
    }
    #timestampRight {
        display: none;
    }
    .row_label {
        text-align: center;
    }
    .data {
        font-size: 1.25em;
    }
    .label {
        font-size: 0.75em;
    }
    #getLatest1, #getLatest2 {
    font-size: 0.85em;
    }
    .footer_data {
    font-size: 0.75em;
    }
 }