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;
    }

}