.aqi0
{
    color: #000000;
    background-color: #d7d7d7;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 
        AQI Good Category, 
        Background-Color: Green, 
        text-color: white
*/
.aqi1
{
    color: #000000;
    background-color: #00E400;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 
        AQI Moderate Category, 
        Background-Color: Yellow, 
        text-color: white
*/
.aqi2
{
    color: #000000;
    background-color: #FFFF00;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 
        AQI USG Category, 
        Background-Color: Orange, 
        text-color: black
*/
.aqi3
{
    color: #ffffff;
    background-color: #FF7E00;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 
        AQI Unhealthy Category, 
        Background-Color: Red, 
        text-color: black
*/
.aqi4
{
    color: #ffffff;
    background-color: #FF0000;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 
        AQI Very Unhealthy Category, 
        Background-Color: Purple, 
        text-color: black
*/
.aqi5
{
    color: #ffffff;
    background-color: #99004C;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 
        AQI Hazardous Category, 
        Background-Color: Maroon, 
        text-color: black
*/
.aqi6
{
    color: #ffffff;
    background-color: #7e0023;
    /*#4C0026*/
    padding-top: 4px;
    padding-bottom: 4px;
}

.aqi0-dot-image{
    background-image: url('../images/aqi0circle.gif');
}

.aqi1-dot-image{
    background-image: url('../images/aqi1circle.gif');
}

.aqi2-dot-image{
    background-image: url('../images/aqi2circle.gif');
}

.aqi3-dot-image{
    background-image: url('../images/aqi3circle.gif');
}

.aqi4-dot-image{
    background-image: url('../images/aqi4circle.gif');
}

.aqi5-dot-image{
    background-image: url('../images/aqi5circle.gif');
}

.aqi6-dot-image{
    background-image: url('../images/aqi6circle.gif');
}

/* Note, these are only good in browsers which understand CSS3
(everything above Internet Explorer 8)
*/
.aqi0-dot{
    color: #000000;
    background-color: #d7d7d7;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

.aqi1-dot{
    color: #000000;
    background-color: #00E400;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

.aqi2-dot{
    color: #000000;
    background-color: #FFFF00;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

.aqi3-dot{
    color: #ffffff;
    background-color: #FF7E00;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

.aqi4-dot{
    color: #ffffff;
    background-color: #FF0000;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

.aqi5-dot{
    color: #ffffff;
    background-color: #99004C;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

.aqi6-dot{
    color: #ffffff;
    background-color: #7e0023;
    border-radius: 15px;
    border:1px grey solid;
    display:inline-block;
    width:10px;
    height:10px;
    background-repeat: no-repeat;
}

/* Note, these are only good in browsers which understand CSS3
(everything above Internet Explorer 8)
*/
.aqi0-rounded
{
    color: #000000;
    background-color: #d7d7d7;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.aqi1-rounded
{
    color: #000000;
    background-color: #00E400;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.aqi2-rounded
{
    color: #000000;
    background-color: #FFFF00;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.aqi3-rounded
{
    color: #ffffff;
    background-color: #FF7E00;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.aqi4-rounded
{
    color: #ffffff;
    background-color: #FF0000;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.aqi5-rounded
{
    color: #ffffff;
    background-color: #99004C;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.aqi6-rounded
{
    color: #ffffff;
    background-color: #7e0023;
    border-radius: 5px;
    border:1px grey solid;
    width:100%;
    height:100%;
}

.colorCube{
    margin-top: 5px;
    margin-right:5px;
}

.colorCube,
.colorCubeValue{
    float:left;
}