body {
	font-family: sans-serif;
	cursor: default;
	background-color: #333;
	color: #fff;
	margin: 0; padding: 2px;
	margin-bottom: 2em;
}
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;
	display: block;
	margin-bottom: 2px;
	overflow: hidden;
	color: #000;
	position: relative;
	font-size: 16pt;
}
.grid_details
{
	background-color: #fff;
}
.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; }
#uptime { position: fixed; left: 0; bottom: 1em; font-size: 8pt; text-align: center; width: 100%; }
.probe .title, .grid_details .title { display: inline-block; min-width: 25%; float:left; padding: 2px; font-weight: bold; } 
.probe .temperature, .grid_details .stat { float: right; padding: 4px; padding-right: 24px; text-align: left;  }
.probe .graph { text-align: center; }
.probe .graph img { width: 100%; max-width: 100%; }
.probe .refresh_button, .grid_details .refresh_button { font-weight: normal; position: absolute; right: 2px; top: 25%; 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; }
.separator { display: block; padding: 0px 5px; }
.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 { }
#rrdgraphs, #network-graphs { display: none; }
#rrdgraphs img, #network-graphs img { display: block; margin: 5px 5px 0px 0px; width: 100%; max-width: 100%; }
#right_floater a { color: #fff; }
#left_floater { position: absolute; left: 5px; top: 5px; }
#left_floater a { color: #fff; }
#page_swapper { position: absolute; right: 5px; top: 5px; cursor: pointer; padding: 5px; }

.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%); }
.tempgraph { display: inline-block; max-width: 100%; }

.banner { font-weight: bold; font-size: 1.25em; 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)
{
	#weathersticker { max-width: 100px; overflow: hidden; display: inline-block; margin-top: 3px; }
	#right_floater, #left_floater { display: none;}
}