body {
    margin: 0px;
    min-height: 356px;
    font-family: Helvetica;
    background: url('wild_oliva.png');
	background-size: 198px 200px;
}
p, ol, ul, li, h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
}

#city{
	text-align: center;
	margin: 20px auto 0;
	color: #000;
	font-size: 400%;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
}

#today{
	margin: 60px auto 90px;
	background-image:         linear-gradient(#eee 0%, #ccc 49.9%, #eee 50%);
	width: 500px;
	height: 100px;
	position: relative;
	box-shadow: 0 5px 20px rgba(0,0,0,0.7);
	text-align: center;
}
#todayTemp, #todayWind{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	position: absolute;
	top: -50px;	
	background-size: 198px 200px;
	border: solid 10px #eee;
	font-size: 85px;
	line-height: 100px;
	color: #ccc;
	text-shadow: -2px -2px 2px rgba(0,0,30,1);
}
#todayTemp::before, #todayWind::before{
	position: absolute;
	display: block;
	content: "";
	top: 10px;
	left: 10px;
	width: 160px;
	height: 160px;
	border-radius: 85px;
	background-image: linear-gradient(rgba(255,255,255,.45) 0%, rgba(255,255,255,.2) 15%, rgba(255,255,255,0) 50% );
}
.cold{
	background: linear-gradient( 
		hsla(250, 70%, 50%, .6) 0%, 
		hsla(250, 70%, 10%, .5) 45%, 
		hsla(250, 70%, 60%, .8) 100%), 
			url('wild_oliva.png');
}
.warm{
	background: linear-gradient( 
		hsla(10, 70%, 50%, .6) 0%,
		hsla(10, 70%, 10%, .5) 45%,
		hsla(10, 70%, 60%, .8) 100%),
			url('wild_oliva.png');
}
#todayTemp{
	left: -25px;
	box-shadow: -5px 5px 20px rgba(0,0,0,.7), 0 0 30px rgba(0,0,0,1) inset;
	padding-top: .45em;
}
#todayWind{
	right: -25px;
	box-shadow: 5px 5px 20px rgba(0,0,0,.7), 0 0 30px rgba(0,0,0,1) inset;
	padding-top: .35em;
}
#windspeed{
	position: relative;
	z-index: 10;
}
#windspeed p{
	font-size: 25%;
	text-transform: uppercase;
	line-height: 0;
	margin-top: -4px;
}
#winddial{
	position: absolute;
	left: 50%;
	top: 0;
	height: 50%;
	width: 4px;
	margin: 0 0 0 -2px;
	background-color: #000;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin:    50% 100%;
	-ms-transform-origin:     50% 100%;
	-o-transform-origin:      50% 100%;
	transform-origin:         50% 100%;
	-webkit-transition: all 1s ease-out;
	-moz-transition:    all 1s ease-out;
	-ms-transition:     all 1s ease-out;
	-o-transition:      all 1s ease-out;
	transition:         all 1s ease-out;
	border-radius: 0 0 2px 2px;
	z-index: 5;
	background:         linear-gradient(#000 0%, #800 12.5%, #000 25%, #700 37.5%, #000 50%, #700 62.5%, #000 75%, #700 87.5%, #000 100%);
	background-size: 100% 200%;
	background-position: 0% -100%;
	-webkit-animation: winddial 1s infinite linear;
	-moz-animation:    winddial 1s infinite linear;
	-ms-animation:     winddial 1s infinite linear;
	-o-animation:      winddial 1s infinite linear;
	animation:         winddial 1s infinite linear;
}

@-webkit-keyframes winddial{
	0%{
		background-position: 0% -100%;
	}	
	100%{
		background-position: 0% 0%;
	}
}
@-moz-keyframes winddial{
	0%{
		background-position: 0% -100%;
	}	
	100%{
		background-position: 0% 0%;
	}
}
@-ms-keyframes winddial{
	0%{
		background-position: 0% -100%;
	}	
	100%{
		background-position: 0% 0%;
	}
}
@-o-keyframes winddial{
	0%{
		background-position: 0% -100%;
	}	
	100%{
		background-position: 0% 0%;
	}
}
@keyframes winddial{
	0%{
		background-position: 0% -100%;
	}	
	100%{
		background-position: 0% 0%;
	}
}

#todayDate{
	position: absolute;
	top: 100%;
	width: 100%;
	padding: 7px 0 0;
	color: #fff;
	text-align: center;
	font-size: 120%;
	text-shadow: 0 2px 5px #000;
}
#weatherIcon{
	position: absolute;
	top: -68px;
	left: 50%;
	margin-left: -62px;
	width: 125px;
	height: 110px;
	background-size: 125px 110px;
}
#todayExtra{
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	text-align: center;
	line-height: 1.45;
	color: #555;
	text-shadow: 1px 1px 0 #fff;
}
.cloud{
	background-image: url('Cloud.png');
}
.sun{
	background-image: url('Sun.png');
}
.snow{
	background-image: url('Snow.png');
}
.rain{
	background-image: url('Rain.png');
}
.lightning{
	background-image: url('Rain.png');
}

/*••••• FORECASTS •••••*/
#forecast{
	width: 300px;
	margin: 0 auto;
}
.dayForecast{
	background-color: #bbb;
	border: solid 3px #eee;
	height: 100px;
	border-radius: 7px;
	color: #444;
	text-shadow: 1px 1px 0 #fff;
	margin: 0 0 50px -25px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.7);
	position: relative;
	-webkit-animation: forecasts .6s ease-out, fade .7s ease-in;
	width: 100%;
}
@-webkit-keyframes forecasts{
	0%{
		 -webkit-transform: translateY(-100px);
		 margin: 0px 0px 0px -25px;
	}	
	100%{
		 -webkit-transform: translateY(0px);
		 margin: 50px 0 40px -25px;
	}
}
@-webkit-keyframes fade{
	0%{ opacity: 0; }	
	100%{ opacity: 1; }
}
.smallicon{
	position: absolute;
	top: -37px;
	left: 50%;
	margin-left: -31px;
	width: 63px;
	height: 55px;
	background-size: 63px 55px;
}
.day, .night{
	font-size: 160%;
	text-align: center;
	vertical-align: bottom;
	padding-bottom: 4px;
	position: relative;
	width: 75px;
}
.day{
	background-color: #eee;
	border-radius: 3px 0 0 0;
	height: 55%;
}
.night{
	background-image: linear-gradient(#ccc 0%, #eee 100%);
	border-radius: 0 0 0 3px;
}
.dayForecast .averages{
	border-radius: 0 5px 5px 0;
	box-shadow: 0 0 4px rgba(0,0,0,.4) inset;
	padding-right: 35px;
	text-align: center;
}
.dayForecast td{
	padding: 5px;
}
.dayForecast .wind{
	height: 100px;
	width: 100px;
	border-radius: 50%;
	border: solid 3px #fff;
	position: absolute;
	top: -3px;
	right: -50px;	
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	-ms-box-sizing:     border-box;
	-o-box-sizing:      border-box;
	box-sizing:         border-box;
	background:         linear-gradient(#bbb 0%, #fff 100%);
	box-shadow: 0 0 6px rgba(0,0,0,0.5) inset;
	text-align: center;
}
.windCompass{
	width: 3px;
	height: 50%;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -1.5px;
	background-color: #fff;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin:    50% 100%;
	-ms-transform-origin:     50% 100%;
	-o-transform-origin:      50% 100%;
	transform-origin:         50% 100%;
	-webkit-transition: all 1s ease-out;
	-moz-transition:    all 1s ease-out;
	-ms-transition:     all 1s ease-out;
	-o-transition:      all 1s ease-out;
	transition:         all 1s ease-out;
	box-shadow: 1px 0 0 #aaa;
}
.wind span{
	display: block;
	font-size: 250%;
	margin-top: .35em;
}
.wind span, .wind p{
	position: relative;
	z-index: 10;
}
.wind p{
	text-transform: uppercase;
	margin-top: -5px;
}
.dateNum{
	font-size: 125%;
	text-transform: uppercase;
	font-weight: 400;
	color: #fff;
	position: absolute;
	bottom: -4px;
	left: 3px;
	text-shadow: none;
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin:    0% 100%;
	-ms-transform-origin:     0% 100%;
	-o-transform-origin:      0% 100%;
	transform-origin:         0% 100%;
	-webkit-transform: rotate(-90deg);
	-moz-transform:    rotate(-90deg);
	-ms-transform:     rotate(-90deg);
	-o-transform:      rotate(-90deg);
	transform:         rotate(-90deg);	
}
.snowPrecip, .rainPrecip{
	display: inline-block;
	width: 50px;
	height: 50px;
	background-image: url('precip.png');
	background-size: 100px 50px;
	background-repeat: no-repeat;
	text-align: center;
	color: #fff;
	text-shadow: -1px -1px 0 #333;
	font-size: 90%;
}
.snowPrecip{
	background-position: 0px 0px;
	line-height: 50px;
}
.rainPrecip{
	background-position: -50px 0px;
	line-height: 60px;
}

footer{
	display: block;
	position: fixed;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 80%;
	text-align: center;
	bottom: 0;
	width: 100%;
	background-color: #000;
	padding: 5px 0;
	color: #fff;
	border-top: solid 1px #222;
}
footer a{
	color: #C30;
	text-decoration: none;
}
footer a:hover{
	color: #F90;
	text-decoration: underline;
}