body {
	background: #567;
	font-family: segoe ui;
	font-size: 5em;
	margin: 0;
}

.menubar {
	background-color: #fff;
	height: 1.5em;
	padding: 0.25em;
	line-height: 1.5em;
}
.optionsbutton {
	float: left;
	height: 1.4em;
	width: 1.4em;
	background-image: url('options.png');
	background-size: 1.4em 1.4em;
	margin-right: 0.5em;
}

.devicegroup {
	display: inline-block;
	overflow: hidden;
	background-color: #bbb;
	height: 5.8em;
	width: 4.8em;
	margin: 0.25em;
	padding: 0.25em;
}

.service-status {
	position: absolute;
	width: 1em;
	height: 1em;
	background-size: 1em 1em;
}

.service-logo {
	height: 4.8em;
	width: 4.8em;
	background-size: 4.8em 4.8em;
	background-repeat: no-repeat;
}
.service-text-smaller {
	color: #445;
	font-size: 50%;
}

.status-neutral {
	background-image: url('status-neutral.png');
}
.status-good {
	background-image: url('status-good.png');
}
.status-bad {
	background-image: url('status-bad.png');
}

.minecraft-good {
	background-image: url('logo-minecraft-good.png');
}
.minecraft-neutral,.minecraft-bad {
	background-image: url('logo-minecraft-neutral.png');
}

.plex-good {
	background-image: url('logo-plex-good.png');
}
.plex-neutral,.plex-bad {
	background-image: url('logo-plex-neutral.png');
}

.calibre-good {
	background-image: url('logo-calibre-good.png');
}
.calibre-neutral,.calibre-bad {
	background-image: url('logo-calibre-neutral.png');
}


.hidden {
	display: none;
}
.pwpopupcontainer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(50,50,50,0.8);
}
.pwpopup {
	padding: 0.5em;
	background: #cde;
	position: fixed;
    top: 30%;
    left: 50%;
    width:9em;
    margin-left: -5em; /*set to a negative number 1/2 of your width*/
}
#pwinfo {
	display: inline-block;
	font-size: 0.5em;
	line-height: 1em;
}
.pwinfo-bad {
	background-color: #daa;
}
.pwinfo-good {
	background-color: #ada;
}
.pwpopup input,button {
	font-size: 1em;
	width: 100%;
}
.bottom-disclaimer {
	padding-left: 1em;
	padding-right: 1em;
	font-size: 12pt;
	color: #aab;
	font-style: italic;
}

.weather-warning-container {
	margin: 1em;
	background-color: #edecbd;
}
.weather-warning-logo-heat {
	display: table-cell;
	width: 4em;
	height: 4em;
	background-image: url('logo-heat.png');
	background-repeat: no-repeat;
	background-size: 3em 3em;
	background-position: 0.5em 0.5em;
}
.weather-warning-logo-lightning {
	display: table-cell;
	width: 4em;
	height: 4em;
	background-image: url('logo-lightning.png');
	background-repeat: no-repeat;
	background-size: 3em 3em;
	background-position: 0.5em 0.5em;
}
.weather-warning-text {
	display: table-cell;
	padding-right: 0.25em;
	font-size: 1.4rem;
}