﻿body { 	background-color:lightgreen; 
	font-family: Arial, sans-serif;
	}

img {width: 100%; object-fit: contain;}
 
div.screen {
	xfloat:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left:auto;
	margin-right:auto;
}
	
div.headerPanel {
	xfloat: left; xclear: right;
	xwidth:500px;
	xmargin-left:auto;
	xmargin-right:auto;
	background-color:lightgreen;
	background-color:white;
	box-shadow: 3px 3px 3px #888888;

	padding: 5px 10px 5px 10px;
	text-align:center;
	margin-left:10px;
	margin-right:10px;
	margin-bottom: 10px;
	border-radius: 4px;
	
}

div.panel {
	xfloat: left;
	margin: 3px;
	background-color:white;
	box-shadow: 3px 3px 3px #888888;
	width:500px;
	height:300px;
	padding: 10px 10px 10px 10px;
	text-align:center;
	border-radius: 4px;
	
}

@media only screen and (max-width:1080px) {
div.headerPanel {
	width:96%;
	}

div.panel {
	width:96%;
	height:0%;
	}
}

div.footer {
	clear: left;
	background-color:lightgreen;
	margin-left:auto;
	margin-right:auto;
	padding: 10px 10px 10px 10px;
	text-align:center;
}

h1 {
	padding: 0 0 0 0;
	xbackground-color: white;
	xbox-shadow: 5px 5px 5px #888888;
	margin-top: 0px;
	margin-bottom: 0px;
}

h2 {
	padding: 0 0 0 0;
	background-color: lightgreen;
	margin-top: 0px;
	column-span: all;
}

div.text {
	text-align:left;
	xmax-width:800px;
	font-size:large;
	padding: 5px;
}

div.item-windkts {
	display: inline-block; background-color:gold ; padding:4px; margin: 9px;
}
div.item-winddeg {
	display: inline-block; background-color:goldenrod ; padding:4px; margin: 9px;
}
div.item-temp {
	display: inline-block; background-color:lightpink ; padding:4px; margin: 9px;
}
div.item-hpa {
	display: inline-block; background-color:lightyellow ; padding:4px; margin: 9px;
}
div.item-rain {
	display: inline-block; background-color:lightblue ; padding:4px; margin: 9px;
}


li {
	margin: 0px;
	text-align: left;
}

a { 
	display: inline-block;
	border-radius: 0px;
	border-style: inset;
	border-width: 1px;
	padding: 4px;
	margin: 5px;	
	background-color: lightgrey;
}

table.weatherdata {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	background-color: white;
	padding: 0px;
	box-shadow: 5px 5px 5px #888888;
	border-spacing: 0px;
	font-weight:bold;
	font-size:large;

	}

table.weatherdata tr:nth-child(odd) {
             background-color:lightgrey;
        }

td.desc {
	text-align:right;
	padding: 5px;
}

td.value {
	text-align:center;
	padding: 5px;
}

td.units {
	text-align:left;
	padding: 5px;
}