/**********************************
 * TITLE: Gila Screen Stylesheet  *
 * URI  : gila/gila-screen.css    *
 * MODIF: 2003-Apr-30 19:09 +0800 *
 **********************************/

body {
  color: white;
  background-color: black;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 73%;  /* Enables font size scaling in MSIE */
  margin: 0;
  padding: 0;
}

html > body {
  font-size: 9pt;
}

#page {
        margin: 20px auto;
        color: black;
        background-color: #4A4A4A;
        padding: 0;
        width: 1200px;
        border: 1px solid #959596;
}

.doNotDisplay {
  display: none !important;
}

.picfl {
           float:left;
           padding-right: 5px;
           position: relative;
}

.picfr {
           float:right;
           padding-left: 5px;
           position: relative;
}

.picfc {
           text-align: center;
           padding-left: 5px;
           padding-right: 5px;
           position: relative;
}


/* ##### Header ##### */

/* ##### CHANGE background-color to change header color, hex code is OK ##### */
/* ##### Hex Color Chart - http://www.w3schools.com/Html/html_colors.asp  ##### */

#header {
    color: inherit;
    background-color: #202020;
    position: relative;
}

.subHeaderForecast .bom-no-warnings {
    color: white !important;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 30px;
    text-align: right;
    margin: 0;
}

.subHeaderForecast .bom-warning-ticker {
    margin: 0;
    width: 600px;
    height: 30px;
    font-size: 11px !important;
}

.subHeaderForecast .bom-warning-label {
    padding: 0 6px;
}

.subHeaderForecast .bom-warning-separator {
    padding: 0 8px;
}

.headerTitle {
  margin: 0;
  padding: 0.25em 4mm 0.25em 4mm;
}

.headerTitle a {
  color: #C0C0C0;
  background-color: transparent;
  text-decoration: none;
  font-size: 110%;  /* For MSIE */
  font-weight: bold;
  font-style: italic;
}

.headerTitle > a {
  font-size: 110%;  /* For fully standards-compliant user agents */
}

.headerTitle span {
  color: white;
  background-color: transparent;
  font-weight: normal;
}

.headerTemp {
  font-size: 36px;
  font-weight: bold;
  float: right;
  right: .5ex;
  margin-right: 5px;
  margin-left: 15px;
  top: 0.18em;
  color: white;

}
[class~="headerTemp"] {
  top: 0.18em;  /* For fully standards-compliant user agents */
}

.subHeader {
  color: white;
  float: left;
  clear: left;
  position: relative;
  background-color: #4A4A4A;
  font-size: 109%;
  margin: 0;
  padding: 0.5ex 1ex;
}

.subHeaderRight {
  color: white;
  background-color: #4A4A4A;
  font-size: 109%;
  text-align: right;
  margin:  0;
  padding: 0.5ex 2ex;
}

#header .subHeader {
    visibility: hidden;
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

#header .headerTemp {
    visibility: hidden;
}

#header .subHeaderRight {
    visibility: hidden;
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.headerForecastRow {
    clear: both;
    display: grid;
    grid-template-columns: 1fr 600px 1fr;
    align-items: center;
    width: 100%;
}

.headerForecastRow .bom-latest-forecast {
    grid-column: 2;
    width: 600px;
    margin: 0;
}

.headerForecastRow .subHeaderRight {
    grid-column: 3;
    text-align: right;
}

.subHeader a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* ##### Left Side Bar ##### */

.leftSideBar {
  width: 9.5em;
  float: left;
  clear: left;
}

.leftSideBar .sideBarTitle {
  color: #C0C0C0;
  background-color: transparent;
  font-weight: bold;
  margin: 0;
  padding: 0.6ex 0.8ex;
}

.leftSideBar ul {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

.leftSideBar li {
  margin: 4px 5px;
  padding: 0;
}

.leftSideBar a,
.leftSideBar a:visited {
  position: relative;
  display: block;
  width: auto;
  box-sizing: border-box;

  padding: 6px 8px 6px 30px;

  color: #D4A94F;
  background: linear-gradient(to bottom, #343434 0%, #292929 100%);

  border: 1px solid #454545;
  border-left: 3px solid #5A5A5A;
  border-radius: 3px;

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 1px 2px rgba(0,0,0,0.35);

  text-align: left;
  text-decoration: none;

  transition:
      background 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      box-shadow 0.15s ease;
}

.leftSideBar a::before {
  content: "\203A";
  position: absolute;
  left: 7px;
  top: 50%;

  width: 15px;
  height: 15px;
  line-height: 13px;

  transform: translateY(-50%);

  color: #A7A7A7;
  background: #222222;
  border: 1px solid #484848;
  border-radius: 50%;

  font-size: 13px;
  font-weight: bold;
  text-align: center;

  box-sizing: border-box;
}

.leftSideBar a:hover {
  color: #FFFFFF;
  background: linear-gradient(to bottom, #454545 0%, #353535 100%);

  border-color: #666666;
  border-left-color: #CC9933;

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 1px 3px rgba(0,0,0,0.45),
      0 0 5px rgba(204,153,51,0.12);
}

.leftSideBar a:hover::before {
  color: #1F1F1F;
  background: #CC9933;
  border-color: #D7AA4D;
}

.leftSideBar .sideBarText {
  color: black;
  background-color: transparent;
  line-height: 1.25em;
  margin: 1ex 0.25ex 1.5em 0.75ex;
  padding: 0;
  display: block;
}

.leftSideBar .sideBarText a,
.leftSideBar .sideBarText a:visited {
  position: static;
  display: inline;
  width: auto;
  padding: 0;
  color: #CC9933;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  font-weight: bold;
}

.leftSideBar .sideBarText a::before {
  content: none;
}

.leftSideBar .sideBarText a:hover {
  color: white;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}

.leftSideBar .thisPage {
  position: relative;
  display: block;
  box-sizing: border-box;
  margin: 0;

  padding: 6px 8px 6px 30px;

  color: #F4E1B0;
  background: linear-gradient(to bottom, #45413A 0%, #34312C 100%);

  border: 1px solid #6E6042;
  border-left: 3px solid #CC9933;
  border-radius: 3px;

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 1px 3px rgba(0,0,0,0.40),
      0 0 5px rgba(204,153,51,0.10);

  text-align: left;
  font-weight: bold;
}

.leftSideBar .thisPage::before {
  content: "\203A";
  position: absolute;
  left: 7px;
  top: 50%;

  width: 15px;
  height: 15px;
  line-height: 13px;

  transform: translateY(-50%);

  color: #1F1F1F;
  background: #CC9933;
  border: 1px solid #D7AA4D;
  border-radius: 50%;

  font-size: 13px;
  font-weight: bold;
  text-align: center;

  box-sizing: border-box;
}

/* ##### Main Copy ##### */

#main-copy {
  color: black;
  background-color: #C0C0C0;
  text-align: justify;
  line-height: 1.5em;
  margin: 0 0 0 9.5em;
  padding: .5ex 1em 1em 1em;
  border-left: 1px solid rgb(216,210,195);
}

#main-copy-dark {
  color: white;
  background-color: black;
  text-align: justify;
  line-height: 1.5em;
  margin: .1em 0 0 9.5em;
  padding: .5ex 1em 1em 1em;
  border-left: 1px solid rgb(216,210,195);
}

#main-copy h1 {
  color: white;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 175%;
  font-weight: bold;
  margin: 1em 0 0 0;
  padding: 1em 0 0 0;
  border-top: 1px solid rgb(216,210,195);
}

#main-copy a {
  color: #FFD27F;
  background-color: transparent;
  text-decoration: underline;
}

#main-copy a:visited {
  color: #FFD27F;
}

#main-copy a:hover {
  color: white;
  text-decoration: underline;
}

.table-top {
  color: white;
  background-color: #4A4A4A;
  text-align: left;
  font-weight: bold;
}

.column-dark {
  color: black;
  background-color: #9F9F9F;
}

.column-light {
  color: black;
  background-color: #BFBFBF;
}

p {
  margin: 1em 0 1.5em 0;
  padding: 0;
}

dt {
  font-weight: bold;
  margin: 0;
  padding: 0 0 0.5ex 0;
}

dd {
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}

.watchBox {
  color: black;
  font-size: 12px;
  text-align: center;
  background-color: #FF9900;
  margin: 0 0 0 0;
  padding: .5em 0em .5em 0em;
  border: 1px dashed rgb(34,70,79);
}
#main-copy .watchBox a {
  color: blue;
}
#main-copy .watchBox a:hover {
  color: blue;
  background-color: inherit;
  text-decoration: underline;
}

.advisoryBoxnoactive {
  color: black;
  font-size: 12px;
  text-align: center;
  background-color: #C0C0C0;
  margin: 0 0 0 0;
  padding: .5em 0em .5em 0em;
  border: 1px dashed rgb(34,70,79);
}

.advisoryBox {
  color: black;
  font-size: 12px;
  text-align: center;
  background-color: #FFCC00;
  margin: 0 0 0 0;
  padding: .5em 0em .5em 0em;
  border: 1px dashed rgb(34,70,79);
}
#main-copy .advisoryBox a {
  color: blue;
}
#main-copy .advisoryBox a:hover {
  color: blue;
  background-color: inherit;
 text-decoration: underline;
}

.warningBox {
  color: white;
  font-size: 13px;
  text-align: center;
  background-color: #CC0000;
  margin: 0 0 0 0;
  padding: .5em 0em .5em 0em;
  border: 1px dashed rgb(255,255,255);
}
#main-copy .warningBox a {
  color: white;
}
#main-copy .warningBox a:hover {
  color: white;
  background-color: inherit;
  text-decoration: underline;
}

.tornadowarningBox {
  color: white;
  font-size: 13px;
  text-align: center;
  background-color: #CC0000;
  margin: 0 0 0 0;
  padding: .5em 0em .5em 0em;
  border: 1px dashed rgb(255,255,255);
}
#main-copy .tornadowarningBox a {
  color: white;
}
#main-copy .tornadowarningBox a:hover {
  color: white;
  background-color: inherit;
  text-decoration: underline;
}

/* ##### ajaxSidebar ##### */
.ajaxSidebar {
    background-color: white;
        border: none;
        width: 114px;
}
.ajaxSidebar h2 {
        font-size: 12pt;
        color: white;
        background-color: #4A4A4A;
        text-align: center;
        margin-right: 6px;
}

.ajaxSidebar .meas {
        font : x-small Arial, Helvetica, sans-serif;
        color: black;
        text-align : right;
        background-color: white;
        width: 35%;
        }
.ajaxSidebar .data {
        font : 9pt Arial, Helvetica, sans-serif;
        color: black;
        text-align : left;
        background-color: white;
        }
.ajaxSidebar td {
         border: none;
         background-color: white;
}
.ajaxDashboard {
    font-size: 96%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}
.ajaxDashboard .datahead {
        font-size: 100%;
        font-weight: bold;
        color:  white;
        background-color: #202020;
        text-align: center;
}
.ajaxDashboard .datahead2 {
        font-size: 100%;
        font-weight: bold;
		border-bottom: 1px solid #CCCCCC;
        color:  white;
        background-color: #202020;
        text-align: center;
}
.ajaxDashboard .data1 {
         color: white;
         font-size: 100%;
         border-bottom: 1px solid #CCCCCC;
         background-color: #4A4A4A;
         text-align: left;
}
.ajaxDashboard .data2 {
         color: white;
         font-size: 100%;
         background-color: #4A4A4A;
         text-align: left;
}
.ajaxDashboard td {
         border: none;
         background-color: #4A4A4A;
}

.ajaxDashboard .bom-no-warnings {
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
    color: white !important;
}

/* ##### Footer ##### */

#footer {
  color: white;
  background-color: #4A4A4A;
  font-size: 92%;
  text-align: center;
  line-height: 1.25em;
  margin: 0;
  padding: 1em 4mm 1em 4mm;
  clear: both;
}

#footer div {
  margin: 0;
  padding: 0 0 1ex 0;
}

#footer a {
  color: white;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

#footer a:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

#footer a:hover {
  text-decoration: none;
}

.jsuparrow {
background-color:#CDDBCD;
border:0px none;
color:#22464F;
text-decoration:none;
}

.jsupoutline {
background:#CDDBCD none repeat scroll 0%;
border:0px solid #2266AA;
height:15px;
left:0px;
padding:0px;
position:absolute;
top:0px;
width:24px;
}

/* WordPress additions for Weather Display PHP AJAX Templates */
/* Copy and paste all of this to the END of your CSS files */

/* Begin Sidebar */
#sidebar
{
	padding: 2.5em;
	width: 150px;
	float: right;
	background-color: #9F9F9F;
	margin: 5px;

	}

#sidebar form {
	margin: 0;
	}
/* End Sidebar */


/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	display: block;
	}

#wp-calendar caption {
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 2px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff; }
/* End Calendar */



/* Begin Lists

	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	}

html>body .entry li {
	margin: 7px 0 8px 10px;
	}

.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}

#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 0px;
	}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
	}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}
/* End Entry Lists */

#sidebar {
	font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;
    color: black;
	}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #777;
	}


#wp-calendar #prev a, #wp-calendar #next a {
	font-size: 9pt;
	}

#wp-calendar a {
	text-decoration: none;
	}

#wp-calendar caption {
	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: center;
	}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	}

#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
	}

/* Begin Blog Main Copy */
#blog-main {
  color: black;
  background-color: #C0C0C0;
  text-align: left;
  line-height: 1.5em;
  margin: 0 0 0 9.5em;
  padding: .5ex 1em 1em 1em;
  border-left: 1px solid rgb(216,210,195);
  min-height: 720px;
  clear:right;
}

#blog-main-dark {
  color: white;
  background-color: black;
  text-align: left;
  line-height: 1.5em;
  margin: .1em 0 0 9.5em;
  padding: .5ex 1em 1em 1em;
  border-left: 1px solid rgb(216,210,195);
}

#blog-main h1 {
  color: black;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 175%;
  font-weight: bold;
  font-style: italic;
  margin: 1em 0 0 0;
  padding: 1em 0 0 0;
  border-top: 1px solid rgb(216,210,195);
}

#blog-main h2 {
  color: black;
  background-color: transparent;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 120%;
  font-weight: bold;
  margin: 1em 0 0 0;
  padding: 1em 0 0 0;
  text-align:left

}

#blog-main a {
  color: #663300;
  background-color: transparent;
  text-decoration: underline;
}

#blog-main a:hover {
  text-decoration: none;
}

/* Captions */

.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

/* Added for image alignment issued */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
	
.thread-alt {
  color: black;
  background-color: #9F9F9F;
}

.thread-even {
  color: black;
  background-color: #BFBFBF;
}

/* ##### mjc extra ##### */

#horizontal-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#horizontal-menu ul li {
display: inline;
padding: .2em 1em;
}

.menuLinkSelectedhoriz {
background-color: #202020;
color: white;
width: 100px;
padding: .2em;
}

.menuLinkSelected {
display: block;
background-color: #202020;
color: white;
width: 90px;
padding: .04em;
}

/* Title + BoM warning on one thin row */
.subHeaderForecast {
    width: 100% !important;
    height: 30px !important;
    box-sizing: border-box;
}

.warning-title-row {
	position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    overflow: hidden;
}

.site-strip-title {
    position: absolute;
	left: 50%;
	transform: translateX(-50%);
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 0.6px;
    white-space: nowrap;
    text-align: center;

    color: #E6D3A3;
    background: transparent;
}

.warning-title-row .bom-no-warnings {
    flex: 0 0 auto;
    height: 30px;
    line-height: 30px;
    margin: 0;
    white-space: nowrap;
}

.warning-title-row .bom-warning-ticker {
    flex: 1 1 auto;
    max-width: 600px;
    height: 30px;
    margin: 0;
}

/* Left-side station status */
.subHeaderForecast {
    position: relative;
}

.station-status {
    position: absolute;
    left: 10px;
    top: 0;

    height: 30px;
    line-height: 30px;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    white-space: nowrap;

    color: white;
}

.station-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: middle;
}

.station-status-dot.online {
    background-color: #66CC66;
}

.station-status-dot.offline {
    background-color: #CC5555;
}

/* ===== ACTIVE BoM WARNING - make it stand out ===== */

.subHeaderForecast .bom-warning-ticker {
    background: #7A1F1F !important;
    border: 1px solid #E04B43 !important;
    color: white !important;
    font-weight: bold;
}

.subHeaderForecast .bom-warning-label {
    background: #C62828 !important;
    color: white !important;
    font-weight: bold;
}

.subHeaderForecast .bom-warning-content {
    color: white !important;
}

.subHeaderForecast .bom-warning-content a {
    color: white !important;
    font-weight: bold;
    text-decoration: none;
}

.subHeaderForecast .bom-warning-content a:hover {
    text-decoration: underline;
}

/* Maryborough-WX sitewide colour-theme selector */
.mwxThemeSwitcher {
  margin: 12px 5px 5px 5px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: #E4E4E4;
}
.mwxThemeSwitcher .sideBarTitle {
  margin: 0 0 5px 0 !important;
  padding: 0 2px 4px 2px !important;
  color: #CFCFCF !important;
  font-size: 10px;
}
.mwxThemeSwitcher form,
.mwxThemeSwitcher form p {
  margin: 0;
  padding: 0;
}
.mwxThemeSwitcher label {
  display: block;
  margin: 0 0 4px 1px;
  color: #BFC3C6;
  font-size: 9px;
}
.mwxThemeSwitcher select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 3px;
  color: #F3F3F3;
  background: #292C2F;
  border: 1px solid #5E666C;
  border-radius: 3px;
  font: 9px Verdana, Arial, sans-serif;
}

/* ============================================================
   Maryborough-WX Dashboard Theme: Site Dark
   Matches the site-wide Dark palette without linking the two selectors.
   Only dashboard content on the homepage is re-coloured; website Site Theme
   remains independent. Original Dark and all other dashboard themes stay as is.
   ============================================================ */

/* On the homepage, the forecast dashboard is inside #main-copy. Limit the
   canvas tint to that page rather than changing content pages that also use
   this CSS as their inherited template. */
html body #page #main-copy:has(.ajaxDashboard),
html body #page #main-copy:has(.ajaxDashboard) > .column-dark {
  background: #242424 !important;
  background-color: #242424 !important;
  color: #E6E6E6 !important;
  border-left-color: #4B4B4B !important;
}

/* Keep the original dashboard's fixed tables and structure. The later inline
   preview styles in index.php use !important, so full selectors are used here
   to make this dashboard option authoritative without touching other themes. */
html body #page #main-copy .ajaxDashboard {
  background: #303030 !important;
  border-color: #515151 !important;
  color: #E6E6E6 !important;
}
html body #page #main-copy .ajaxDashboard td,
html body #page #main-copy .ajaxDashboard td.data1,
html body #page #main-copy .ajaxDashboard td.data2,
html body #page #main-copy .ajaxDashboard .data1,
html body #page #main-copy .ajaxDashboard .data2 {
  background: #303030 !important;
  background-color: #303030 !important;
  color: #E8E8E8 !important;
}
html body #page #main-copy .ajaxDashboard td.datahead,
html body #page #main-copy .ajaxDashboard td.datahead2,
html body #page #main-copy .ajaxDashboard .datahead,
html body #page #main-copy .ajaxDashboard .datahead2 {
  background: #202020 !important;
  background-color: #202020 !important;
  color: #D4A94F !important;
  border-color: #515151 !important;
}

/* BoM forecast tiles and latest-forecast strip: same palette as the other
   site-wide dark cards while maintaining severe-warning colours and layout. */
html body #page #main-copy .bomfc-wrap,
html body #page #main-copy .bomfc-error,
html body #page .bom-latest-forecast {
  background: #303030 !important;
  background-color: #303030 !important;
  color: #E6E6E6 !important;
  border-color: #515151 !important;
}
html body #page #main-copy .bomfc-title {
  background: #202020 !important;
  background-color: #202020 !important;
  color: #D4A94F !important;
  border-color: #515151 !important;
}
html body #page #main-copy .bomfc-day,
html body #page #main-copy .bomfc-source {
  border-color: #515151 !important;
}

/* Site Dark heading text follows the gold site-wide headings. Other, more
   specific semantic weather colours (risks, warnings, rain bands) remain. */
html body #page #main-copy:has(.ajaxDashboard) h1 {
  color: #D4A94F;
}

/* Site Dark: restore the dashboard's section grid and header outlines.
   Only the outer dashboard table is affected; nested weather data tables,
   radar/satellite image sizing and all other dashboard themes stay intact. */
html body #page #main-copy .ajaxDashboard > table {
  /* Existing 1px cellspacing becomes a visible separator against the
     uniformly charcoal cells, without increasing border dimensions. */
  background: #626262 !important;
  background-color: #626262 !important;
  border-collapse: separate !important;
  border-spacing: 1px !important;
}
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td.datahead,
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td.datahead2 {
  /* Inset stroke does not change the width or height of any heading. */
  box-shadow: inset 0 0 0 1px #757575 !important;
}

/* Site Dark homepage header visibility.
   The homepage scrolls .site-strip-title into view automatically on load.
   Add safe space above that target so the full 30px station/title/warnings
   strip is visible instead of sitting against (or partly beyond) the
   viewport's top edge. scroll-margin changes scrolling, NOT layout sizes. */
html body #page #header .site-strip-title {
  scroll-margin-top: 48px !important;
}


/* ============================================================
   Site Dark Gradient — separate dashboard theme.
   Retains Site Dark's typography, gold headings and navy
   palette. Only the homepage dashboard panels gain a subtle
   navy gradient (similar to Sidebar Button Dark).
   Nested data tables are transparent so gradients do not repeat
   behind individual weather readings.
   ============================================================ */

/* The dashboard canvas uses a matching solid theme base. */
html body #page #main-copy:has(.ajaxDashboard),
html body #page #main-copy:has(.ajaxDashboard) > .column-dark {
    background: #292929 !important;
    background-color: #292929 !important;
    color: #F1F1F1 !important;
}
html body #page #main-copy .ajaxDashboard {
    background: #292929 !important;
    background-color: #292929 !important;
    color: #F1F1F1 !important;
    border-color: #626262 !important;
}

/* Preserve the Midnight Navy heading style, plus a fine visible
   separation between major dashboard blocks. */
html body #page #main-copy .ajaxDashboard > table {
    background: #626262 !important;
    background-color: #626262 !important;
    border-collapse: separate !important;
    border-spacing: 1px !important;
}
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td.datahead,
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td.datahead2 {
    box-shadow: inset 0 0 0 1px #6E6E6E !important;
}

/* Give only the main dashboard content panels a top-to-bottom gradient.
   Do not colour their headings or nested readings independently. */
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td:not(.datahead):not(.datahead2),
html body #page #main-copy .bomfc-wrap,
html body #page #main-copy .bomfc-error,
html body #page .bom-latest-forecast {
    background: linear-gradient(to bottom, #373737 0%, #292929 100%) !important;
    background-color: #292929 !important;
    color: #F1F1F1 !important;
}

/* Inset readings must not paint separate flat or gradient rectangles.
   Headings, warning indicators and other semantic severity colours are
   deliberately left alone. */
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td:not(.datahead):not(.datahead2) table {
    background: transparent !important;
    background-color: transparent !important;
}
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td:not(.datahead):not(.datahead2) table td:not(.datahead):not(.datahead2),
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td:not(.datahead):not(.datahead2) table .data1:not(.datahead):not(.datahead2),
html body #page #main-copy .ajaxDashboard > table > tbody > tr > td:not(.datahead):not(.datahead2) table .data2:not(.datahead):not(.datahead2) {
    background: transparent !important;
    background-color: transparent !important;
}

/* Site Dark Gradient: header and update row share one clean edge.
   Earlier attempts caused either a 14px overlap or a 14px padded strip.
   Remove BOTH that offset and the extra first-row padding rather than
   disguising the space with layering or another negative margin. */
html body #page #main-copy:has(.ajaxDashboard) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body #page #main-copy .column-dark:has(.ajaxDashboard),
html body #page #main-copy .column-dark:has(.ajaxDashboard) > div[align="center"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body #page #main-copy .ajaxDashboard {
  top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The timestamp is the FIRST visible dashboard row; don't draw an
   additional gradient band above its text. */
html body #page #main-copy .ajaxDashboard > table > tbody > tr:first-child > td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 18px !important;
}
/* Fine left-side outline must begin below, not within, the header. */
html body #page #main-copy .ajaxDashboard::before {
  top: 0 !important;
}

/* Site Dark Gradient: prevent a stray inline line box above the first
   dashboard row. PHP/styles/scripts sit inside the homepage's centered
   wrapper before .ajaxDashboard; any inline placeholder can create a blank
   line there. Collapse only that wrapper's line-height, then restore the
   dashboard's normal text line-height so values and headings stay legible.
   Do NOT shift the dashboard over the station title strip. */
html body #page #main-copy .column-dark:has(.ajaxDashboard) > div[align="center"] {
  line-height: 0 !important;
}
html body #page #main-copy .column-dark:has(.ajaxDashboard) > div[align="center"] > .ajaxDashboard {
  line-height: 1.5em !important;
}