/**
    This is the section that composes the AQI readings on the front page

*/
body {
    color:black;
}
.aqi {
    text-align: center;
    width: 100%;
}

    .aqi .readings_wrapper {
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        max-width: 145px;
        margin: 0 auto !important;
    }

    .aqi .readings {
        border: 1px solid none;
        margin: 3px;
    }

    .aqi .indices {
        text-transform: uppercase;
    }

.aqi_less_than {
    color: black;
}

.aqi_na{
    font-size: xx-large;
}

.default_wrapper {
    border: 1px solid;
    color: lightgray;
}

.default_label {
    color: dimgray;
}

.default_text_color{
    color: black;
}

.aqi_less_than {
    font-size: large;
}

.green_wrapper {
    border: 1px solid #5dc150;
}

.yellow_wrapper {
    border: 1px solid #ffd400;
}

.orange_wrapper {
    border: 1px solid #f68825;
}

.red_wrapper {
    border: 1px solid #ef202a;
}

.purple_wrapper {
    border: 1px solid #893188;
}

.darkmagenta_wrapper {
    border: 1px solid #510a2c;
}


#map_band {
    text-align: center;
}

.icon_map {
    background-image: url("../images/google-maps-icon64.jpg");
    background-repeat: no-repeat;
    display: inline-block;
    height: 47px;
    margin-right: 10px;
    width: 66px;
    vertical-align: middle !important;
}

#color_key_band {
    height: 48px;
}

    #color_key_band H2 {
        background: white;
        width: 40%;
    }

.keys_new {
    height: 20px;
}

.keys li {
    border: none;
    display: inline-block;
    float: left;
    height: 20px;
    width: 20%;
}

    .keys li .color_item {
        display: block;
        height: 10px;
        transition: border-color 200mx ease 0s;
    }

.color_item.green, i_good {
    background: none repeat scroll 0 0 #5dc150;
}

.color_item.yellow, i_moderate {
    background: none repeat scroll 0 0 #ffd400;
}

.color_item.orange, i_usg {
    background: none repeat scroll 0 0 #f68825;
}

.color_item.red, i_unhealthy {
    background: none repeat scroll 0 0 #ef202a;
}

.color_item.purple, i_very_unhealthy {
    background: none repeat scroll 0 0 #893188;
}

.color_item.darkmagenta, i_hazardous {
    background: none repeat scroll 0 0 #510a2c;
}


.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
    color: White;
}

/* level 2 page styles */
.site_name {
    min-width: 120px;
    width: 45%;
}

.site_aqi {
}

.site_distance {
}

.heading_left_padding {
    padding-left: 20px;
}


.row_top_padding {
    padding-top: 10px;
}

.seperation {
    padding-top: 9px;
}

@media screen and (max-height: 568px) {
    .panelHeight {
        height: 400px;
    }
}

@media screen and (min-height: 640px) {
    .panelHeight {
        height: 450px;
    }
}

@media screen and (min-height: 667px) {
    .panelHeight {
        height: 525px;
    }
}

@media screen and (min-height: 731px) {
    .panelHeight {
        height: 550px;
    }
}


@media screen and (min-height: 812px) {
    .panelHeight {
        height: 600px;
    }
}

@media screen and (max-height: 823px) {
    .panelHeight {
        height: 650px;
    }
}

@media screen and (min-height: 1024px) {
    .panelHeight {
        height: 800px;
    }
}

@media screen and (min-height: 1366px) {
    .panelHeight {
        height: 1150px;
    }
}

@media screen and (min-width: 320px) {
    .location_list_size {
        font-size: x-small;
    }
}

@media screen and (min-width: 360px) {
    .location_list_size {
        font-size: small;
    }
}

@media screen and (min-width:700px) and (min-height:500px) {
    .location_list_size {
        font-size: medium;
        text-wrap: none;
    }

    .seperation {
        padding-top: 0px;
    }
}