body {
    font-family : verdana,arial,helvetica;
    font-size:12px;
    font-weight:normal;
    color: #000000;
    background-color : #DDDDFF;
}


.forecastIcon {
    text-align: center;
}


#container {
    width:100%;
    height:250px;
    /*background:#ccc;*/
    display:-webkit-flex;
    display:flex
}

#box1 {
    /*background:red;*/
    width:250px;
    float:left;
    -webkit-flex: 1;
    flex: 1;
}

#box2 {
    /*background:yellow;*/
    width:250px;
    float:left;
    text-align: center;
    vertical-align: middle;
    -webkit-flex: 1;
    flex: 1;
}

#box3 {
    /*background:blue;*/
    width:250px;
    float:left;
    text-align: center;
    vertical-align: middle;
    -webkit-flex: 1;
    flex: 1;
}

#wrap {
    width:750px;
    margin:0 auto;
    /*background:#99c;*/
}
#header {
    padding:5px 10px;
    background:#ddd;
}

h1 {
    margin:0;
}

h2 {
    margin:0 0 1em;
}

.nav {
    padding:5px 10px;
    /*background:#c99;*/
}
.nav ul {
    margin:0;
    padding:0;
    list-style:none;
}
.nav li {
    display:inline;
    margin:0;
    padding:0;
}
.main {
    float:left;
    width:730px;
    padding:10px;
    /*background:#9c9;*/
}

#footer {
    clear:both;
    padding:5px 10px;
    /*background:#cc9;*/
}
#footer p {
    margin:0;
}
* html #footer {
    height:1px;
}

div.images img { 
    max-width:100%;
    max-height:100%;
}

div.pi_img img { 
    max-width:70%;
    max-height:70%;
}

.df thead th { background-color: #b8b1f5; }
.df tbody tr:last-child { background-color: #b8b1f5; }

.df{
	width:100%; 
	border-collapse:collapse; 
}
.df td{ 
	padding:7px; border:#4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.df tr{
	background: #b8d1f3;
}
/*  Define the background color for all the ODD background rows  */
.df tr:nth-child(odd){ 
	background: #b8d1f3;
}
/*  Define the background color for all the EVEN background rows  */
.df tr:nth-child(even){
	background: #dae5f4;
}