body {
	font-family: sans-serif;
	cursor: default;
	background-color: #333;
	color: #fff;
	margin-bottom: 3em;
}
h1 { font-size: 16pt; }
h3 { font-size: 12pt; }
h1,h3 { text-align: center; margin: 0; line-height: 1em; }
.probe, .grid_details
{
	border: solid 1px #000;
	width: 133px;
	max-width: 133px;
	height: 133px;
	max-height: 133px;
	display: inline-block;
	float: left;
	margin: 2px;
	overflow: hidden;
	color: #000;
}
.grid_details
{
	background-color: #fff;
}
.separator { display: none; }
.graph_header { padding: 2px; font-weight: bold; background-color: rgba(255,255,255,.1); max-width: 100%; width: 1565px; margin-top: 5px; }
#right_floater { position: absolute; right: 5px; top: 5px; }
#weathersticker { max-width: 125px; overflow: hidden; display: inline-block; margin: 2px; }
#top_window { display: none; background-color: #ccc; position: fixed; left: 10%; top: 10%; width: 80%; height: 80%; }
#top_window pre { margin: 0; padding: 5px; height: 97%; overflow: auto; background-color: #000; color: #fff; border: solid 2px #fff; border-left: solid 2px #333; border-top: solid 2px #333; }
#top_window .title { height: 3%; color: #fff; font-weight: bold; cursor: pointer; background: #09f url('/lightbox/close.gif') right center no-repeat; }
.probe .title, .grid_details .title { border-bottom: solid 1px #000; padding: 2px; font-weight: bold; background-color: rgba(192,192,192,.5); }
.probe .temperature, .grid_details .stat { padding: 4px; padding-top: .75em; text-align: center; font-size: 24pt; }
.grid_details .stat.small { font-size: 20pt; padding-top: 1em; }
.grid_details .stat.verysmall { font-size: 16pt; padding-top: 1em; }
.probe .graph { text-align: center; }
.probe .graph img { width: 100%; max-width: 100%; }
.probe .refresh_button, .grid_details .refresh_button { font-weight: normal; float: right; color: darkgreen; display: inline-block; width: 16px; height: 16px; background: url('images/refresh.png') center center no-repeat; cursor: pointer; }
.probe .graph_button { font-weight: normal; float: left; color: darkgreen; display: inline-block; width: 16px; height: 16px; background: url('images/graph.png') center center no-repeat; cursor: pointer; }
.weather { background-color: #fafafa; }
.cold { background-color: royalblue; color: #fff; }
.cool { background-color: lightblue; }
.normal { background-color: #f0f0f0; }
.warm { background-color: orange; color: #fff; }
.hot { background-color: red; color: #fff; }
.unknown { background-color: #404040; color: #4f4f4f; }
#sensors { overflow: auto; }
#rrdgraphs img, #network-graphs img { margin: 5px 5px 0px 0px; max-width: 100%; }
#right_floater a { color: #fff; }
#left_floater { position: absolute; left: 5px; top: 5px; }
#left_floater a { color: #fff; }
#page_swapper { display: none; }
#uptime { position: fixed; left: 0; bottom: 1em; font-size: 10pt; text-align: center; width: 100%; }

div.graph-history { background-color: #aaa; color: #000; padding: 5px; max-width: 150px; display: inline-block; margin: 0; }
div.graph-history div.line { width: auto; }

.hoverbox { background-color: rgba(192,192,192,.75); text-align: center; box-sizing: border-box; }
.hoverbox a { text-decoration: none; font-weight: bold; color: #000; padding: 5px; border: solid 2px #000; background-color: #fff;  }
.hoverbox .contentbox { line-height: 2.25em; position: relative; top: 50%; transform: translateY(-50%); }
.contentbox a { white-space: nowrap; }
.tempgraph { display: inline-block; max-width: 100%; }
.link { cursor: pointer; }

.banner { font-weight: bold; font-size: 1.25em; position: absolute; left: 0; bottom: 2em; width: 100%; background-color: #999; text-align: center; }
.banner a { text-decoration: none; color: black; }

@media only screen and (min-device-width: 320px) and (max-device-width: 800px)
{
	.probe
	{
		width: 100px;
		height: 100px;
		max-width: 100px;
		max-height: 100px;
	}
	.probe .temperature { font-size: 20pt; }
	#weathersticker { max-width: 100px; overflow: hidden; display: inline-block; margin-top: 3px; }
	#right_floater, #left_floater { display: none;}
	#sensors { padding-left: 12px; }
}