body
{
	width:				412px;
	height:				220px;
}

html
{
	width:				410px;
	height:				210px;
	font-family:		Verdana, arial rounded MT, arial rounded MT bold, sans-serif;
}

/*
html, body
{
	overflow: 			auto;
	border-width: 		0px;
}

html>body
{
	overflow:			none;
}
*/

/*Classes*/
.clayout
{
	border-width:		1px 1px 1px 1px;
	border-color:		#000000;
	border-style:		solid;
	width:				410px;
	/*background:			#FFFFCC;*/
}

.cstats
{
	width:				205px;
	position:			absolute;
}

/*layout id's*/
#titlebox
{
	text-align:			center;
	min-height:				42px;
}

#weatherstats
{
	height:				152px;
	position:			relative;
	width:				412px;
}

html>body #weatherstats
{
	height:				150px;
	width:				410px;
}

#footer
{
	height:				21px;
	width:				412px;
}

html>body #footer
{
	width:				410px;
}

/*Title box id's*/
#sitename
{
	width:				410px;
	font-weight:		bold;
}

#title
{
	width:				410px;
}

#tempstats
{
	top:				0px;
	left:				0px;
}

#rainstats
{
	top:				65px;
	left:				0px;
}

#windstats
{
	top:				110px;
	left:				0px;
}

#image
{
	top:				0px;
	left:				210px;
}

html>body #image
{
	left:				209px;
}

img
{
	border-style:		none;
}

#imageoverlay {
	position:			absolute;
	color:				#FFFFFF;
	bottom:					10px;
	left:					21%;
	font-size:			14px;
}

#imageoverlay a {
	color:				#FFFFFF;	
}

#imageoverlay a.hover {
	
}

/*Footer id's*/
#harvlink
{
	width:				205px;
	float:				left;
}

#graphlink
{
	width:				205px;
	float:				right;
	text-align:			right;
}

a.flink:link, a.flink:visited, a.flink:hover, a.flink:active
{
	font-weight:		bold;
	font-size:			90%;
	text-decoration:	none;
	color:				black;
	padding:			0 3px 0 2px;
}

/*Value id's*/
#temp
{
	font-size:			220%;
	text-align:			left;
	margin-left:		38px;
	margin-bottom:		0%;
	/*font-weight:		bold;*/
}

#humid, #windspd, #windgust, #rainhour
{
	margin-left:		15px;
}

#rainday
{
	margin-left:		61px;
}

#imgmes
{
	color:				#FFFFFF;
	width:				100%;
	position:			absolute;
	text-align:			center;
	top:				120px;
	left:				0px
}

/*Mobile only css*/
/*iphone portrait*/
@media only screen and (max-width: 500px) and (orientation:portrait)
{
	html, body
	{
		width:				300px;
		height:				400px;
		font-family:		Verdana, arial rounded MT, arial rounded MT bold, sans-serif;
	}

	.clayout, #footer, #sitename, #title
	{
		width:				300px;
	}
	
	.cstats
	{
		text-align:			center;
	}
	
	html>body #weatherstats
	{
		height:				300px;
		width:				300px;
	}
	
	html>body #footer
	{
		width:				300px;
	}

	html>body #image
	{
		top:				150px;
		left:				50px;
	}
	
	#graphlink, #harvlink
	{
		width:				150px;
	}
	
	#humid, #windspd, #windgust, #rainhour
	{
		margin-left:		0px;
	}
	
	#rainday
	{
		/*margin-left:		46px;*/
		margin-left:		0px;
	}
	
	#temp
	{
		font-size:			150%;
		text-align:			center;
		margin-left:		0px;
	}
	
	#tempstats
	{
		top:				0px;
	}

	#rainstats
	{
		top:				55px;
	}

	#windstats
	{
		top:				100px;
	}
	
	#tempstats, #rainstats, #windstats, #image
	{
		left:				50px;
	}
	
}
/*iPhone landscape view*/
@media only screen and (max-width: 500px) and (orientation:landscape)
{
	html, body
	{
		width:				460px;
		height:				270px;
		font-family:		Verdana, arial rounded MT, arial rounded MT bold, sans-serif;
	}
	.clayout, #footer, #sitename, #title
	{
		width:				460px;
	}
	
	html>body #weatherstats
	{
		height:				150px;
		width:				460px;
	}
	
	html>body #footer
	{
		width:				460px;
	}

	html>body #image
	{
		top:				0px;
		left:				259px;
	}
	
	#graphlink, #harvlink
	{
		width:				230px;
	}
	
	#humid, #windspd, #windgust, #rainhour
	{
		margin-left:		40px;
	}
	
	#rainday
	{
		margin-left:		86px;
	}
	
	#temp
	{
		font-size:			150%;
		text-align:			left;
	}
	
	#tempstats
	{
		top:				0px;
	}

	#rainstats
	{
		top:				55px;
	}

	#windstats
	{
		top:				100px;
	}
	
	#tempstats, #rainstats, #windstats, #image
	{
		left:				30px;
	}
	
}