/* content */

#temperature:after, #apparentTemperature:after, #dewPoint:after, #minTemperature:after, #maxTemperature:after, .forecastMinTemperature:after, .forecastMaxTemperature:after {
	content: "°";
	font-size: 1em !important;
}

#dewPoint:before {
	content: "Dew Point ";
}

#apparentTemperature:before {
	content: "Apparent ";
}

#humidity:before {
	content: "Humidity ";
}

#humidity:after {
	content: " %";
}

#wind:before {
	content: "Wind ";
}

#gust:before {
	content: "Gusts ";
}

#wind:after, #gust:after, #maxGust:after {
	content: " km/h";
}

#pressure:before {
	content: "Pressure ";
}

#pressure:after {
	content: " hPa";
}

#rainfall:before {
	content: "Rain since 9am ";
}

#rainfall:after {
	content: " mm";
}

#minTemperature:before {
	content: "Low "
}

#maxTemperature:before {
	content: "High "
}

#maxGust:before {
	content: "Stongest wind gust "
}

.forecastMinTemperature:before {
	content: "Low ";
}

.forecastMaxTemperature:before {
	content: "High ";
}

.rainChance:before {
	content: "Chance of rain ";
}

.rainChance:after {
	content: " % ";
}

/*
.rainRange:before {
	content: "Amount ";
}

.rainRange:after {
	content: " mm";
}
*/

#forecastIssued:before {
	content: "Forecast Issued: ";
}



/* basic layout */

body {
	color: #333340;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	padding: 0;
	margin: 0;
	text-rendering: optimizeLegibility;
}

section {
	display: block;
}

#wrapper {
	background-color: #d9d9bc;
	background: -webkit-gradient(linear, left top, left bottom, from(#d9d9bc), to(#e6e6d2));
	background-repeat: no-repeat;
	padding-left: 240px;
	padding-top: 30px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	position: relative;
}

#locality {
	font-weight: normal;
	font-size: 32px;
}

#observations {
	overflow: visible;
	width: 200px;
	text-align: right;
	position: absolute;
	left: 0;
	top: 37px;
}

#observations h2, 
#forecast h2 {
	display: none;
}

#observations p {
	font-size: 20px;
	position: relative;
	margin: 0 0 20px 0;
}


#observations #temperature {
	font-size: 48px;
	position: relative;
	right: -26px;
}

#observations p:before {
	opacity: 0.6;
	font-size: 11px;
	display: block;
}

#observations p:after {
	font-size: 14px;
}

#observationTime {
	opacity: 0.6;
	font-size: 11px;
	position: absolute;
	width: 200px;
	left: 0;
	top: 75px;
	text-align: right;
}

#minTemperature time, 
#maxTemperature time, 
#maxGust time {
	opacity: 0.8;
	font-size: 11px;
	position: absolute;
	right: 1px;
	top: 33px;
}

#minTemperature, 
#maxTemperature, 
#maxGust {
	margin-bottom: 34px !important;
}

#observations p:empty, 
#forecast p:empty {
	display: none;
}

#forecast {
	overflow: auto;
	margin: 60px 0 60px 0px;
	width: 300px;
}

.periodForecast {
	overflow: auto;
	margin-bottom: 40px;
	white-space: normal;
}

.periodForecast h3 {
	font-size: 13px;
	margin: 0 6px 2px 0;
	clear: left;
}

.periodForecast p {
	font-size: 13px;
	margin: 0 0 7px 0;
	clear: left;
}

.periodForecast p.precisText {
    clear: none;
	padding-top: 1px;
	margin-bottom: 6px;
}

.forecastMinTemperature:before, 
.forecastMaxTemperature:before,
p.rainChance:before, 
p.rainRange:before  {
	opacity: 0.6;
	display: block;
	font-size: 10px;
	line-height: 10px;
}

p.forecastMinTemperature, 
p.forecastMaxTemperature,
p.rainChance, 
p.rainRange {
	font-size: 20px;
	float: left;
	margin: 0 20px 12px 0;
	clear: none;
	position: relative;
}

p.rainChance:after, 
p.rainRange:after,
p.rainRange .to {
	font-size: 12px;
}

span.rainRange {
	opacity: 0.8;
	font-size: 11px;
	position: absolute;
	left: 1px;
	top: 32px;
}



#forecastIssued {
	opacity: 0.6;
	font-size: 11px;
}

@media all and (max-width: 600px){
	#wrapper {
		width: 100%;
		height: 100%;
		position: fixed;
		margin: 0;
		padding: 0;
	}
	
	#locality {
		position: fixed;
		top: 14px;
		left: 108px;
		margin: 0;
		-webkit-transform: rotate(90deg);
		-webkit-transform-origin: left top;
	}
	
	#observationsScroller {	
		position: fixed;
		width: 77px;
		height: 100%;
		-webkit-transform: scaleX(-1);
		-webkit-overflow-scrolling : touch;
		overflow: scroll;
		z-index: 500;
	}

	#observations {
		position: absolute;
		top: 12px;
		left: 9px;
		width: auto;
		-webkit-transform: rotate(90deg) scaleY(-1);
		-webkit-transform-origin: left top;
		white-space: nowrap;
		text-align: left;
	}
	
	#observations p {
/* 		float: left; */
		display: inline-block;
		margin: 0 30px 0 0;
	}
	
	#minTemperature time, #maxTemperature time, #maxGust time {
		left: 1px;
	}
	
	#observationTime {
		position: fixed;
		top: 17px;
		left: 20px;
		margin: 0;
		height: auto;
		width: auto;
		-webkit-transform: rotate(90deg);
		-webkit-transform-origin: left top;
		white-space: nowrap;
		text-align: left;
	}

	#observations #temperature {
		position: relative;
		top: -8px;
		right: auto;
	}

	#minTemperature, #maxTemperature, #maxGust {
		margin-bottom: 0 !important;
	}
	
	#forecastScroller {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 100;
		-webkit-overflow-scrolling : touch;
		overflow: scroll;
	}

	#forecast {
		position: relative;
		padding: 120px 16px 16px 126px;
		width: auto;
		margin: 0;
	}
}

@media all and (max-width: 600px) and (orientation: landscape) {
	#locality {
		left: 12px;
		bottom: 68px;
		top: auto;
		-webkit-transform: rotate(0);	
	}

	#observationsScroller {	
		width: 100%;
		height: 82px;
		bottom: 0;
		left: 0;
		top: auto;
		-webkit-transform: scaleX(1);
	}
	
	#observations {
		-webkit-transform: rotate(0) scaleY(1);	
	}

	#observationTime {
		bottom: 8px;
		left: 14px;
		top: auto;
		-webkit-transform: rotate(0);	
	}
	
	#forecast {
		padding: 12px 16px 0px 120px;
		white-space: nowrap;
		position: absolute;
		min-width: 2650px; /*needed to force redraw of bounds*/
	}
	
	.periodForecast, #forecastIssued {
		width: 300px;
		float: left;
		margin-right: 30px; 
	}
	
}