/* CSS for weather page using openWeatherMap.com. Needs a key from them to work */
/* last modified AJM 6 Feb 2016 */

body {
	font: 				20px Arial, Helvetica, sans-serif; /* for iPhone */
	margin: 			0;
	width : 			100%;
	background-color:   rgba(0,0,0,.0); 			/* Sets background to 0% - ie fully transparent */
	background-color:   transparent;
    font-size:          16px;                       /* default font size for page */
	margin:             0px;                        /* moves body a smidge off left hand edge */
    left:               0px;
    top:                0px;
    padding:            0px; 
 /*	background:         url(../images/f1_back_plain.png) no-repeat center center width:100%; */ /* needed for android only, ios works without */
	
	font-family:        Verdana,Arial,Geneva,Helvetica,sans-serif; 		/* default font for everything */
	
	-webkit-tap-highlight-color : rgba(0,0,0,0); 	/* Stops button highlighting. Override the semitransparent color overlay when a user clicks */*/                                          /* a clickable element.  To completely disable it, set the value to ‘transparent’ or ‘rgba(0,0,0,0)’ */

    -webkit-background-size:    cover;              /* next lines make background images fit */
    -moz-background-size:       cover;
    -o-background-size:         cover;
    background-size:            cover;
}

.weather-wrapper {
 /* background: */ 	#990000; /* gooner red */
/*	background: 	#7EB6FF; /* forget me not blue  - test for std browser */
	margin: 		5% 0 5% 5%;
	margin: 		0% 0 0% 0%;
	padding: 		0% 0%;
	float: 			left;
	color: 			black;
	width: 			100%;
/* max-width:		310px; works best for iPhone */
}

.weather-icon {
	width : 		100px;		/* this would be used to make the icon appear as square */
	width : 		100%; 		/* this is used to make the icon appear as a banner */
	display: 		block;
}
.weather-description, .weather-maindescription, .weather-temperature, .weather-min-temperature, .weather-max-temperature, .weather-humidity, .weather-cloudiness, .weather-wind-speed, .weather-sunrise, .weather-updated, .weather-wind-direction, .weather-sunset {
	font: 			20px Verdana,Arial,Geneva,Helvetica,sans-serif; /* for iPhone */
	margin: 		0;
	color: 			black;
}

table cellpadding ="2", cellspacing="2" {
    border-collapse: collapse;
}

table, th, td {
	font: 			16px Verdana,Arial,Geneva,Helvetica,sans-serif; /* for iPhone */
    border: 		0px solid;
	border-color: 	grey;
	padding: 		0% 1%; /* ajm change from 5%*/
	text-align: 	left;
	color: 			black;
}

/*
strong {
	margin:			18px;
	color: 			steelblue;
}
*/

.capitalize {
	text-transform: capitalize;
}

.hide {
	display: 		none;
}
/*
.hideshow {
display: show;
display: none;
}
*/


/* compensation for hi res android type screens, e.g. Sony Xperia Z */
@media only screen and (min-device-width: 769px) and (max-device-width:1080px) {

}

/* compensation for mid size screens, e.g iPad, samsung galaxy 2 */
@media screen and (min-device-width: 480px) and (max-device-width: 768px) {

} /* end mid size */
  
/* very specific for iPad */
@media screen and (min-device-width: 768px) and (max-device-width: 768px) {

}  

/* intended for in-between android smartphones e.g sony xperia */

@media screen and (max-device-width: 480px) {	

body {
	font: 				18px Arial, Helvetica, sans-serif; /* for iPhone */
	margin: 			0;
	width : 			100%;
	background-color:   rgba(0,0,0,.0); 			/* Sets background to 0% - ie fully transparent */
	background-color:   transparent;
    font-size:          10px;                       /* default font size for page */
	margin:             0px;                        /* moves body a smidge off left hand edge */
    left:               0px;
    top:                0px;
    padding:            0px; 
 /*	background:         url(../images/f1_back_plain.png) no-repeat center center width:100%; */ /* needed for android only, ios works without */
	
	font-family:        Verdana,Arial,Geneva,Helvetica,sans-serif; 		/* default font for everything */
	
	-webkit-tap-highlight-color : rgba(0,0,0,0); 	/* Stops button highlighting. Override the semitransparent color overlay when a user clicks */*/                                          /* a clickable element.  To completely disable it, set the value to ‘transparent’ or ‘rgba(0,0,0,0)’ */

    -webkit-background-size:    cover;              /* next lines make background images fit */
    -moz-background-size:       cover;
    -o-background-size:         cover;
    background-size:            cover;
}

table, th, td {
	font: 			18px Verdana,Arial,Geneva,Helvetica,sans-serif; /*  */
	padding: 		0% 2%;
    border: 		0px solid blue;
	color: 			black;
	padding-top: 	0.5em;
}

.weather-description, .weather-maindescription, .weather-temperature, .weather-min-temperature, .weather-max-temperature, .weather-humidity, .weather-cloudiness, .weather-wind-speed, .weather-sunrise, .weather-updated, .weather-wind-direction, .weather-sunset {
	font: 			18px Verdana,Arial,Geneva,Helvetica,sans-serif; /* for iPhone */
}
}

/* compensation for smaller screens, e.g iPhone 4 */
@media screen and (max-device-width: 320px) {
	
.weather-icon {
	width : 		40%;
	width : 		100%;
	background: 	transparent; 
	margin-left: 	auto;  /* centralise */
    margin-right: 	auto;  /* centralise */
}
	
.weather-wrapper {
	background: 	transparent; /* transparent allows background from the app to show */
	/* background:  	#CAE1FF; /* grey on iPhone (test) */
}
	
table, th, td {
	font: 			14px Verdana,Arial,Geneva,Helvetica,sans-serif; /* for iPhone */
	padding: 		0% 1%;
    border: 		0px solid blue;
	color: 			black;
	padding-top: 	0.5em;
}

.weather-description, .weather-maindescription, .weather-temperature, .weather-min-temperature, .weather-max-temperature, .weather-humidity, .weather-cloudiness, .weather-wind-speed, .weather-sunrise, .weather-updated, .weather-wind-direction, .weather-sunset {
	font: 			14px Verdana,Arial,Geneva,Helvetica,sans-serif; /* for iPhone */
}
} /* smallsize */