/*
 * codename "Valen": a Wesnoth facilities status page
 * valen2.css: Basic stylesheet
 *
 * Copyright (C) 2012 - 2023 by Iris Morelle <shadowm@wesnoth.org>
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice is present in all copies.
 *
 * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR
 * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT,
 * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
 * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
 * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 */

.fl { float: left;    }
.fr { float: right;   }
.fc { clear: both;    }
.fb { display: block; }

.al-left   { text-align: left;   }
.al-right  { text-align: right;  }
.al-center { text-align: center; }

.chronology {
	font-size: 0.8em;
	color: #724f2e;
}

.facilities {
	display: block;
	padding: 0;
	margin: 0;
}

.facilities > li {
	display: block;
	clear: both;
	padding: 0.6em 0.6em;
	margin: 0.6em -0.6em;
	border-radius: 6px;

	-webkit-transition: background 120ms ease;
	-moz-transition:    background 120ms ease;
	transition:         background 120ms ease;
}

.facilities > li:hover {
	background: rgba(255,255,250,0.4); /* $glamdrol-bg */
}

.facilities li .details, .facilities li .dnsreport, .facilities li .inreport {
	font-size: 0.9em;
}

.facilities li .details {
	clear: left;
}

.facilities .details span {
	display: block;
}

.header, .inst {
	font-weight: bold;
}

.header dt, .header dd {
	margin: 0;
	padding: 0;
}

.header dt {
	float: left;
}

.header dd {
	float: right;
}

.facilities li .header .hostname {
	font-weight: normal;
	font-size: 0.9em;
	padding-left: 0.4em;
	color: #a27f44; /* $wui-border-dark */
	visibility: hidden;
}

.facilities li:hover .header .hostname {
	visibility: visible;
}

.inreport {
	font-weight: bold;
	list-style: none;
	margin-right: 6em;
}

.inreport ul {
	margin: 0;
	padding: 0;
	text-align: left;
}

.inreport li {
	display: inline;
}

.instatus {
	display: inline-block;
	text-align: center;
	margin: 0.4em 1.7em 0.4em 0;
}

.instatus span {
	display: inline-block;
	min-width: 2em;
}

span.inname {
	background: #e7d9c0; /* $glamdrol-darkbg */
	border-radius: 2px;
	padding: 0.2em 0.9em;
	text-shadow: 0px 1px 0px #eee;

	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.instatus .status-label {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.bold   { font-weight: bold;  }

.red    { color: #b22;        }
.green  { color: #090;        }
.yellow { color: #d60;        }
.gray   { color: #aaa;        }

.dnslist {
	-webkit-columns: 2;
	-moz-columns:    2;
	columns:         2;
}

.status-report-unavailable {
	background: #b22;
	color: #fff;
	padding: 1em 4em;
	border-radius: 2px;
	text-align: center;
}

.status-site-notice {
	background: #e7d9c0; /* $glamdrol-darkbg */
	padding: 1em 4em;
	border-radius: 2px;
	text-align: center;
}

.notice-header {
	font-size: 120%;
	font-weight: bold;
}

.status-label {
	display: inline-block;
	color: #fff;
	text-align: center;
	text-shadow: 0px -1px 0px #555;
	border-radius: 2px;
}

.header .status-label {
	padding: 0.25em 1em;
	min-width: 4em;
}

.instatus .status-label {
	padding: 0.2em 0.9em;
}

.green .status-label {
	background: #295;
}

.yellow .status-label {
	background: #e90;
}

.red .status-label {
	background: #c55;
}

.gray .status-label {
	background: #789;
}

#page-description-toggle {
	font-size: 0.8em;
	padding-top: 2em;
}

#page-description {
	margin-bottom: 1em;
}

@media only screen and (max-width: 699px) {
	#report-ts,
	#refresh-interval {
		float: none;
		display: block;
	}
}