body
{
	background-color:	black;
	color:			yellow;
	font-family:	Arial, Helvetica, Geneva, Verdana, sans-serif;
}

h1
{
	font-size:		x-large;
	font-weight:	bold;
	text-align:		center;
}

h2
{
	font-size:		large;
	font-weight:	bold;
	text-align:		center;
}

h3
{
	font-size:		medium;
	text-align:		center;
}

h4
{
	font-size:		small;
	text-align:		left;
}

/*
img
{
	padding:		0px;
	margin:			0px;
	display:		block;
	position:		absolute;
	top:			0px;
	left:			0px;
}
*/

.wx-panel
{
	border:				1px solid yellow;
	box-sizing: 		border-box;
	-moz-box-sizing: 	border-box;

	background-image: 	url(grey-bg.png);

	position: 			absolute;
}

.wx-main
{
	height:			402px;
	width:			752px;
	margin:			0 auto;
	position: 		relative;
}

.wx-thermo
{
	width: 			300px;
	height: 		400px;
	top: 			0;
	left: 			0;
}

.wx-wind
{
	width: 			450px;
	height: 		200px;
	top: 			0;
	left: 			300px;
}

.wx-rain
{
	width: 			300px;
	height: 		200px;
	top:			200px;
	left: 			300px;
}

.wx-humidity
{
	width: 			150px;
	height: 		100px;
	top:			200px;
	left: 			600px;
}

.wx-barometer
{
	width: 			150px;
	height: 		100px;
	top:			300px;
	left: 			600px;
}

.wx-title
{
	height: 		20px;
	width: 			100%;

	color: 			white;
	text-align: 	center;
	font-weight: 	bold;
	font-size: 		16px;

	position: 		absolute;
	top: 			0;
	left: 			0;
}


.wx-thermo-value
{
	width: 			70px;

	color: 			black;
	text-align: 	center;
	font-weight:	bold;
	font-size:		18px;

	position: 		absolute;
	bottom:			30px;
	left:			70px;
}


.wx-wind-subtitle
{
	height:			20px;
	width:			100%;

	color:			white;
	text-align:		center;
	font-weight:	normal;
	font-size:		14px;

	position:		absolute;
	top:			20px;
	left:			0;
}

.wx-wind-value
{
	width: 			100%;

	color:			black;
	text-align:		center;
	font-weight:	bold;
	font-size:		18px;

	position:		absolute;
	bottom:			8px;
	left:			0px;
}

.wx-wind-speed
{
	width: 			148px;
	height: 		198px;
	position:	 	absolute;
	top:			0;
	left: 			0;
}

.wx-wind-dir
{
	width: 			148px;
	height: 		198px;
	position: 		absolute;
	top:			0;
	left: 			150px;
}

.wx-wind-dist
{
	width: 			148px;
	height: 		198px;
	position: 		absolute;
	top:			0;
	left: 			300px;
}


.wx-rain-subtitle
{
	height:			20px;
	width:			40px;

	color:			white;
	text-align:		center;
	font-weight:	normal;
	font-size:		14px;

	position:		absolute;
	top:			20px;
}
	
.wx-rain-rate-loc
{
	left:			30px;
}

.wx-rain-gauge-storm-loc
{
	left:			110px;
}

.wx-rain-gauge-day-loc
{
	left:			150px;
}

.wx-rain-gauge-month-loc
{
	left:			190px;
}

.wx-rain-gauge-year-loc
{
	left:			230px;
}

.wx-rain-rate-value
{
	width:			100px;

	color:			black;
	text-align:		center;
	font-weight:	bold;
	font-size:		18px;

	position:		absolute;
	left:			0px;
	bottom:			45px;
}

.wx-rain-gauge-value
{
	width:			40px;

	color:			black;
	text-align:		center;
	font-weight:	bold;
	font-size:		16px;

	position:		absolute;
	bottom:			8px;
}


.wx-barometer-value
{
	width:			60px;

	color:			black;
	text-align:		center;
	font-weight:	bold;
	font-size:		16px;

	position:		absolute;
	bottom:			35px;
	right:			10px;
}

.wx-aux
{
	height:			325px;
	width:			752px;
	margin:			0 auto;
	position: 		relative;
	top:			5px;
}

.wx-button-bar
{
	height:			24px;
	width:			750px;
	position: 		absolute;
	top:			0px;
	left:			0px;
}

.wx-button-content
{
	height:			300px;
	width:			750px;
	position: 		relative;
	top:			23px;
	left:			0px;
}

IMG.wx-center
{
/*	margin:			auto auto;	*/
/*	display:		block;	*/
 	object-fit:		none;
 	object-position:	left top;
 	height:			280px;
 	width:			745px;
}

.wx-temp-rb
{
	width:			150px;
	position:		absolute;
	top:			90px;
}

.wx-temp-content
{
	width:			597px;
	height:			300px;
	position:		absolute;
	left:			150px;
	border-left:	1px solid yellow;
}

button
{
	width:			120px;
	white-space:		nowrap;
}

.wx-almanac-table
{
	height:			280px;
	width:			748px;
	margin:			auto auto;
	position: 		absolute;
	top:			20px;
}

#almanac-table
{
	margin:			auto auto;
	border:			1px solid yellow;
	font-size:		14px;
}

#almanac-table th
{
	color:			white;
	border:			0px solid blue;
	text-align:		center;
}

#almanac-table td
{
	border:			0px solid blue;
	padding-right:	5px;
	padding-left:	5px;
}

#almanac-table th:nth-child(1)		{ background-color: #303030; }
#almanac-table th:nth-child(3)		{ background-color: #303030; }
#almanac-table th:nth-child(4)		{ background-color: #303030; }
#almanac-table th:nth-child(5)		{ background-color: #303030; }
#almanac-table th:nth-child(6)		{ background-color: #303030; }

#almanac-table td:nth-child(1)		{ width: 20px; }
#almanac-table td:nth-child(2)		{ text-align: right; background-color: #404040;}
#almanac-table td:nth-child(3)		{ text-align: left; background-color: #404040;}
#almanac-table td:nth-child(4)		{ width: 40px; }
#almanac-table td:nth-child(5)		{ text-align: right; background-color: #404040;}
#almanac-table td:nth-child(6)		{ text-align: right; background-color: #404040;}
#almanac-table td:nth-child(8)		{ text-align: left; background-color: #404040;}
#almanac-table td:nth-child(9)		{ text-align: right; background-color: #404040;}
#almanac-table td:nth-child(10)		{ text-align: right; background-color: #404040;}
#almanac-table td:nth-child(11)		{ text-align: right; background-color: #404040;}


.col-width-20	{ width: 20px; }

.col-width-50	{ width: 50px; }

.col-right		{ text-align: right; margin-right: 2px; }

.col-left		{ text-align:	left; margin-left: 2px; }

.col-center		{ text-align: center; margin-left: 2px; margin-right: 2px; }