/* Otematata CSS — modern (Bootstrap 3) [v1.0.x]
 * Stylesheet for the production page otematata_modern.php.
 * (Renamed from otematata.v3.css to align with the *.modern.* set.) */

html, body {
	margin:0;
	padding:0;
	background: #E6E6E6;
	color:#000;
	line-height: 1.25;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	margin:0;
	padding:0;
	background: #E6E6E6 url(/images/borders.gif) repeat-y center;
	word-wrap:break-word;
}

.page { 
	width: expression(document.body.clientWidth < 962? "960px" : document.body.clientWidth > 1002? "1000px" : "auto");
	max-width: 1000px;
	min-width: 960px;
	margin:0 auto; 
	position: relative; 
	overflow: hidden; 
	background: #FFF;
}

.container {
	width: auto;
    margin-left: 10px;
	margin-right: 10px;
}

a {
	color: #006699;
}

.leading200 { line-height: 200%; }
.leading180 { line-height: 180%; }
.leading150 { line-height: 150%; }
.leading100 { line-height: 100%; }

.header {
	color: white;
    /* background: steelblue; */
    background-color: #428bca;
	width: 100%;
	max-width: 1000px;
	height: 200px;
}

.footer {
	color: white;
	/* background: steelblue; */
  	background-color: #428bca;
	width: 100%;
	max-width: 1000px;
	text-align: center;
	font: 14px 'Exo 2', Helvetica, Verdana, Arial, sans-serif;
	font-weight: lighter;
	bottom: 0px;
	padding: 5px;
}

.navbar-custom {
    width: 1000px;
    min-width: 1000px;
    margin: 0px auto;
}

.heading-bolder {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 18px;
	padding-left: 10px;
}

.equipment {
	position: absolute; 
	left: 0px;
}

.mainimage {
	position: absolute; 
	left: 100px;
}

.pagetitle {
	position: absolute; 
	top: 15px;
	left: 125px;
	font: 94px Bowlby One SC, Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 3px 3px 3px #666; 
	text-align: right;
	color: white; /* Older Browsers */
	color: rgba(255,255,255,0.9); 
}

.pagesubtitle {
	position: absolute; 
	top: 122px;
	left: 145px;
	font: 25px 'Exo 2', Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 3px 3px 3px #666; 
	text-align: center;
	color: white; /* Older Browsers */
	color: rgba(255,255,255,0.8); 
}

.pagedatetime {
	position: absolute;
	top: 155px;
	right: 60px; 
	font: 10px sans-serif, Helvetica, Arial, Verdana;
	font-weight: normal;
	text-align: center;
	color: white; /* Older Browsers */
	color: rgba(255,255,255,0.7); 
}

.pagefont {
	font: 14px Bowlby One SC, Verdana, Arial, Helvetica, sans-serif;
}

.heading {
	color: white;
	text-align: left;
	font: 18px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	padding: 0px;
	text-shadow: black 1px 1px;
}

.updated {
	color: DeepSkyBlue;
	text-align:right;
	font: 10px 'Roboto', sans-serif;
	letter-spacing: 0px;
	font-weight: lighter;
	text-shadow: none;
}

.shorter {
	padding: 5px 5px 5px 10px;
}

.rbutton {
    padding: 1px;
    float: right;
}

.section {
    font: 18px 'Exo 2', Verdana, Arial, Helvetica, sans-serif;
    border-left: 1px dashed steelblue;
    border-right: 1px dashed steelblue;
    border-bottom: 1px dashed steelblue;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}

.location {
	font: 18px 'Roboto', Verdana, Arial, Helvetica, sans-serif;
	font-weight: 100;
	text-align: center;
	letter-spacing: 1px;
}

table {
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
}

.table-morecondensed > thead > tr > th,
.table-morecondensed > tbody > tr > th,
.table-morecondensed > tfoot > tr > th,
.table-morecondensed > thead > tr > td,
.table-morecondensed > tbody > tr > td,
.table-morecondensed > tfoot > tr > td {
	padding: 2px 1px 0px 10px;
}

table.graphs {
	border: 2px dotted black;
	margin:0; 
}

table.maps {
	padding: 1px;
}

table.values th, td {
	/* padding: 2px; */
	width: 50%;
	font: 17px 'Roboto', sans-serif;
	font-weight: lighter;
	overflow: hidden;
}

td.reading {
	font-weight: 500;
	letter-spacing: 1px;
	padding-left: 10px;
	/* background: #e0e0e0; */
}

td.value, td.fixed {
	color: black;
}

td.estimate {
	color: gray; 
}

td.forecast {
	color: red; 
}

td.title {
	text-align: center;
	background: #e0e0e0;
}

td.gtitle {
	text-align: center;
	background: #e0e0e0;
	width: 33%;
}

td.guage {
	width: 33%;
}

.photos a img {
	border: none;
}

.photos a img {
	border: none;
}

.photos a:hover img {
	opacity:0.65;
	-moz-opacity:0.65;
	filter:alpha(opacity=65);
}

/* Weather Icons fix (v1.0.1) — the cdnjs weather-icons 2.0.x build applies the
 * 'weathericons' font-family ONLY via the base .wi class; the .wi-* rules just
 * set the glyph codepoint. The site's markup uses the modifier class alone
 * (wi-sunrise, wi-day-sunny, wi-wind-*) with no .wi, so the glyph rendered in
 * the page font as a broken (italic, since <i>) box. We (1) apply the font to
 * any wi-* class, and (2) declare @font-face against the ABSOLUTE cdnjs font
 * URLs so the load can't depend on the cdnjs CSS's relative ../font/ paths.
 * Still served from the cdnjs remote — just addressed explicitly. */
@font-face {
	font-family: 'weathericons';
	src: url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.woff2') format('woff2'),
	     url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.woff') format('woff'),
	     url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
[class^="wi-"], [class*=" wi-"] {
	font-family: 'weathericons' !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Panel chrome (v1.0.3) — slightly bolder 2px border and rounder 8px corners on
   the section boxes. Overrides Bootstrap 3's defaults (1px border, 4px radius);
   loaded after the BS3 CDN so it wins. Header/footer inner corners follow at
   radius - border (6px) to stay flush inside the thicker frame. */
.panel { border-width: 2px; border-radius: 8px; }
.panel-heading { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.panel-footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }