/*
@charset "UTF-8";
CSS Document 
*/
@import url("scroll-bar-colour.css");


/* TEST FIRST - (don't use vars in case PDF generator does not support) */
:root {
--blue-light:#D6EEF6; 
--teal:#069;
--blue-active: #003B70;
--blue-grey:#2F4655;
--grey: #cccccc;
}


h1 { color: #069; font-size: 3em; font-weight:normal; margin-left:40px;}

figure img {width:99%; max-width:99%; height:auto; display:block; text-align:center; margin:auto;}

.meta-info h2 { margin-bottom: 0.2em; clear: both;}
h2 {font-weight:normal; font-size:1.2em;}
.meta-info ol, meta-info li {list-style:none; list-style-position:outside; margin:0;}
.base-info {position:relative; overflow:visible;}
.meta-info {background-color: #D6EEF6 ; color: #333; height: 100%; bottom:0; margin:0 0 0 -24px; padding: 20px 10px 10px 60px;  box-sizing:border-box;}

details {background-color: #D6EEF6 ; margin-top:2em; border-color:#D6EEF6;}

details summary[aria-expanded="false"] {background-color: #D6EEF6; background-position: 5px 20px;}
details summary[aria-expanded="true"] {background-color: #D6EEF6; background-position: 5px 20px;}

summary {background-color: #D6EEF6; }
details summary:hover {background-color: #E6F1F4;}
summary h2 {margin:0; padding:10px; font-size: 1.6em;}

.table-text {border-color: #fff;}
.adjustments td:nth-child(1),.adjustments td:nth-child(2),.adjustments td:nth-child(3) {width:15%;}
.adjustments td:nth-child(4) {width:20%;}
.adjustments td:nth-child(5) {width:35%;}
caption.align-bottom {background-color: #E6F1F4; display:none;/* TEMP */}
.table-text th {
background-color: #E6F1F4;
color: #333;
}
.table-text small { margin-right: 1em;}
.table-text th, .table-text td {
border-bottom: 1px dotted #E6F1F4;
padding:5px;
}
.table-text th:nth-child(4) {text-align:center;}
.table-text td:nth-child(4) {text-align:right; padding-right: 4em;}
.table-text tr {border-bottom: 1px dotted #ccc;}
.table-text tr:last-child td {border-bottom: none;}



.station-images {margin-top: 2em;}
.station-images img { max-height:220px; width:auto;}
p {color: #666;}

#siteDescription {}
#siteHistory { }

.siteText {min-height:30em;}


#container.fullwidth {
	box-sizing: content-box; overflow: hidden; 
}
#content {padding-top:3em;}

@supports (transition: initial) {
  /* CSS to use if transitions are supported */
  .menu-rhs { 
      transition: 600ms ease-in-out;
  }
}

/* EDGE !!!! all positioning failing in Edge = cannot use list size if select positioned out of flow */
.menu-rhs { 
box-sizing: border-box; 
width: 17em;
position: absolute; 
top: 40px ; /*-40px;*/
/* right: -30em; keep for screen readers */
 right: -18.7em;/*

/*
-webkit-transition: 600ms ease-in-out;
-moz-transition: 600ms ease-in-out;
-o-transition: 600ms ease-in-out;
*/
/* and ms ?*/
/*
transition: 600ms ease-in-out;
*/
}

.menu-rhs h2 {
box-sizing:border-box;
clear:both; color: #fff; padding: 10px ; margin-left: -6.2em;  background-color:#069; 
border-radius: 20px 0 0 20px;
}

.menu-rhs h2:hover, .menu-rhs h2:active {
/* background-color: color( var(--teal) shade(35%)); */
background-color: #036; /* temp */
}

.menu-rhs:hover, .menu-rhs:active,.menu-rhs:focus {
transform: translate(-17em,0);
}
/* position: relative;*/ 
/* EDGE cannot render a select with a list size, out of document flow, Edge targeted, size removed, still problematic, so hide.
*/
@supports (-ms-ime-align: auto) {
	.menu-rhs {
		left: -400px;
		transition: none;
		right:auto;
		margin-top: 3em;
	}
	
	
	.menu-rhs:hover, .menu-rhs:active, .menu-rhs:focus {
		transform: none;
	}
	
	.menu-rhs h2 {
		box-sizing:border-box;
		clear:both; color: #fff; padding: 10px ; margin-left: 0em; background-color:#069; 
		 border-radius: 0; 
		 background-color:#036;
	}
	select::-ms-expand {
		display: none;
	}
}


select.menu-vertical, input.menu-vertical {
-moz-appearance: none;
-webkit-appearance: none;
appearance:none;
box-sizing:border-box;
line-height: 2em !important;
display:inline-block;
border: 1px solid transparent; 

font-size: inherit;
border-radius:0;
background-color:#069; color: #fff;
min-width:17em; 
margin:0;

min-height:12em;
}



.menu-vertical option , datalist#acornSatStations option {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance:none;

appearance:none;

border-bottom:1px solid #09C !important; 
/*width:17em;*/
padding:10px 10px 0px 10px;

line-height:2.4em;
height:2.4em;
}

/*select:-internal-list-box option:checked, */
select.menu-vertical option:hover, .menu-vertical option:active,.menu-vertical option[selected], .menu-vertical option.active {
/* -webkit-appearance: none; */
/* background-color: color( var(--teal) shade(35%)); */
color:#fff;
background-color: #036;
}

select.menu-vertical option:hover, .menu-vertical option:active, .menu-vertical option[selected] {
/* background-color: #000 !important; */
/* background-color: color( var(--teal) shade(35%)) !important; */
background-color: #036;
color:#fff;
}


/* adjustments station list */
.list-columns li {
display:block; 
line-height: 2em;	
}
.list-columns  {
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
-o-column-count:3;
column-count:3;
-webkit-column-gap:15px;
-moz-column-gap:15px;
-ms-column-gap:15px;
-o-column-gap:15px;
column-gap:15px;
columns:3;
}

.list-columns .idcode {
font-weight:bold;
color: #333;
display: inline-block;
margin-right: 10px;
}

/* contrast header - adjustments stations */
.header { background-color: #D6EEF6; color: #069; padding:10px; margin-bottom: 10px; border:2px solid #fff;}
.adjustments .table-text {margin-bottom: 2em;}

/* ,#content button */
#content input,#content textarea { 
/*width : 150px;*/
margin: 0;
padding:1px;
line-height:inherit;

font-family : inherit;
font-size   : 100%;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
box-sizing: border-box;
-webkit-appearance: none; 
}
td input, td select, td button {width:100%;}

.btn-wide {min-width:12em; padding:5px;}

#editControls {position:absolute; top:0px; right: 0; margin-top: -40px; width:auto; text-align:right;}
#editControls input {text-align:center; padding:10px; background-color: #ddd; border-radius:6px; border-color: #ddd; border-style:solid;}
#editControls input:hover {background-color: #efefef;}

.header-print, .footer-print {display:none; margin: 20px 0 0 0;}


.upperCase { font-variant:small-caps; }

/* location map */
#aus-map {position:relative; overflow:visible; width:251px;height:200px; margin-left: -34px; border:none;} 
#aus-map svg {position:absolute; } 
.states, .coast {
fill: #fff;
stroke: #ccc;
}

.station-images figure {position:relative;}
.station-images figcaption {
position: absolute;
bottom: 0;
display:block;
box-sizing:border-box;
width: auto;
font-size:0.8em;
background-color: rgba(255,255,255, 0.6);
padding:2px;
}
.station-images figcaption a {
text-decoration:none;
color: #333;
}
.station-images figcaption span { margin-left: 2px;}/**/


/* Adjustments styles */
details {background-color: #E6F1F4 ; margin-top:2em; border-color:#D6EEF6;}
details p {color:#000;}
.list-columns li {
display:block; 
line-height: 2em;	
}
.list-columns  {
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
-o-column-count:3;
column-count:3;
-webkit-column-gap:15px;
-moz-column-gap:15px;
-ms-column-gap:15px;
-o-column-gap:15px;
column-gap:15px;
columns:3;
}

.list-columns .idcode {
font-weight:bold;
color: #333;
display: inline-block;
margin-right: 10px;
width: 4em;
}


.adjustments .table-text {margin-bottom: 2em;}
.header { background-color: #D6EEF6; color: #069; padding:10px; margin-bottom: 10px; border:2px solid #fff;}
table {width:100% ;}



@media all { 
.page-break { visibility:hidden; } 
} 


/*.page-footer { position:static; bottom:20mm;} static for pagination */

/* for print/PDF more in @media print and browser defaults*/
@media print {

/* -webkit-print-color-adjust: exact; */

#adjustments {
display:block; 
page-break-before:always;
}
.adjustments caption {
display:none;
}
/*
#adjustments:before {
content: attr(data-print-header);
color: #666;
display:block;
text-align:right;
margin: 10mm 0 0 0;
}
*/
/*
#adjustments:after {
content: 'Test footer content';
position:static;
bottom: 10mm
}
*/

#adjustments details {display:block;}


@page {
margin: 1.0cm 1.0cm 0.1cm 0cm;
size: portrait;
orientation: portrait;
size: A4; /* only chrome, opera */
width: 99%;
height: 99%;
}

#pageheight {min-height: 267mm; box-sizing:border-box;}
#container.fullwidth, #columns, #pagewrap { width:100%; min-height: 267mm; margin:0; padding:0;}
#container.fullwidth {padding-right:10mm;}
#content {margin-top: 1cm; min-height:230mm; box-sizing:border-box; }

.meta-info {margin:0; padding: 5mm 5mm 5mm 10mm; box-sizing:border-box;}
.meta-info {background-color: #D6EEF6 !important; -webkit-print-color-adjust: exact;}
.meta-info h2 { font-size:1.0em; font-weight: bold;}

h1 {margin-left: 10mm;}

.page-break { display:block; page-break-before:always; } 

.page-number {display: inline-block; box-sizing: border-box; border-radius:1.2em; width: 2.4em; line-height: 2.4em; margin-left: 2em; 
/*
background-color: var(--blue-light) !important;
*/
background-color: #D6EEF6;
text-align:center; -webkit-print-color-adjust: exact;}

.header-print {display:block; text-align:right; color:#666; font-size:1em;}

.page-footer {position:relative; height: 2em; color:#999; overflow:visible;}
.p-id { position:absolute; width:auto; top: 0; margin:0; padding:0;}
.footer-print { display:block; height: 1em; position:absolute; right:0; width:auto; top:0; margin:0;text-align:right;  }

#header, #footer { display:none;}
.p-id, details {margin-left: 10mm;}

details summary[aria-expanded="true"] {
background-image:none;
padding-left: 0px;
background-color: #D6EEF6 !important; 
-webkit-print-color-adjust: exact;
}
summary {background-color: #D6EEF6 !important; -webkit-print-color-adjust: exact;}
.table-text th {background-color: #E6F1F4 !important; -webkit-print-color-adjust: exact; color: #333;}
}
/* ol  */
#stn_num_history li{display: inline-block; margin-left:5px;}
#stn_num_history li::after {
	content: ' / ';
	color: #999;
}
#stn_num_history li:last-child::after {
	content:''
}



button.btn-blue {
-moz-appearance: none;
-webkit-appearance: none;
appearance:none;
background-color: #D6EEF6 !important;

}
button.btn-blue:hover, button.btn-blue:active {
	background-color: #efefef !important;
	box-shadow: #06F 0 0 4px 2px;
}
button.btn-large {
	padding:10px;/**/
	width:80px;
	height:70px;
	border-radius:5px;
	border:none;
	background-image:url(images/map.png);
}
/* map navigation button */
.map-menu-rhs {
	position:absolute;
	top: -40px; /* 10*/
	right: -10px;
	width:auto;
	text-align:right;
}

@supports (transition: initial) {
	/* CSS to use if transitions are supported */
	.station-navigation-map { 
		transition: 300ms ease-in-out;
	}
}
.station-navigation-map {
	position:absolute;
	top:0;
	left: -1240px;
}
.station-navigation-map.onscreen {
	transform: translate(1200px,0);
}

/* navigation station map popUp */
#navigation-map {
	position:relative; width:auto;height:auto; overflow:visible;
	box-sizing:border-box;
	padding-top: 50px;
	background-color: rgba(213,238,246,0.7); /*0.7#D6EEF6;*/
}


/* map background = generic */
.states, .coast {
	fill: #F8F2E7;
	stroke: #fff;
}
/*
svg:hover circle {
	stroke: #000;
	fill: #000;
	transition: 200ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 200ms;
	-webkit-transition-timing-function: ease-in-out;
}
*/

/* default */
div.popUp {
position: absolute;
text-align: center;
width: 120px;
min-height: 7em;
padding: 5px;
font: 12px sans-serif;
background:rgba(255,255,255,0.8); 
border: 2px #fff solid;
border-radius: 8px;
/*pointer-events: none;*/
z-index:999;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.navigation-map div.popUp {
	width:120px;
	min-height: 7em;
	text-align:left;
}
div.popUp p {
	text-align:left;
	margin:0;
	padding:0;
	font-weight:bold;
	line-height: 1.2em;
}

.station-navigation-map div.popUp p  { font-weight:normal; font-size:0.9em; position:relative; min-height: 1.2em; line-height: 1.4em; }
.station-navigation-map  div.popUp p.title { font-size: 1em; font-weight:bold; color:#900;}

.station-navigation-map  div.popUp p .value { display: block; position:absolute; width:auto; right:0; top:0; text-align:right; font-weight: bold; height: 1.4em;}

div.popUp[aria-hidden="true"]{ display:none; } /* visibility: hidden; */
div.popUp[aria-hidden="false"]{ display:block; } /* visibility: visible;*/

.invisible{ visibility:hidden; }
.visible { visibility: visible; }

/* have made this desktop only */
#content .station-navigation-map .button-close {
display:none;

/*
box-sizing: border-box;
padding: 2px 5px;
background: #fff;
border: 1px solid #ccc;
margin: 0px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 10px;
color: #fff;
background-color: rgba(177,0,0,0.8);
*/
}
#map-navigation_btn {
	font-size: 1.1em;
	font-weight:bold;
	color: #069;
}