@charset "UTF-8";
/* for annual summary from 2016  */

@import url('/climate/styles/date.css');
@import url('/climate/current/includes/events-filter.css');
@import url('/climate/styles/loader.css');
@import url('/climate/styles/tabs-nested.css');

/* generic scale for fullwidth format */
.fullwidth h1 {font-size: 2em;}
.fullwidth h2 {font-size: 1.4em; border-bottom: 1px dotted #ccc; margin: 0 0 0.8em 0; padding-bottom:4px;}
.fullwidth .ui-tabs .ui-tabs-panel { padding: 1em !important;}


.fullwidth .ui-tabs.tabs-nested .ui-tabs-panel  {padding: 0;}
.fullwidth #tabs {margin-bottom: 2em; margin-top: 2em;}
h1 > strong {padding: 0em;  font-size: .7em; font-weight:normal;}

/* there's no BoM print styling on .fullwidth, footer height needs further coertion */
@media print{
	#container.fullwidth {width: 99% !important; box-sizing:border-box;
		size: A4 portrait;}
	#overview p {
		width: auto;
	}
	.block-50.float-right { float:none; width: auto;height:auto;}
	#footer #footer-columns {height: auto; }
	img {width:fit-content; max-width: 180mm;}

	/*
	figure.group {page-break-inside: avoid;}
	figure + p {clear:both; margin-top: 3em;}
	*/

	img {page-break-inside: avoid; }

	.print-break-after {page-break-after: always;}
	.print-break-before {page-break-before: always;}
}

.fullwidth .box-notice {border-radius: 0; padding: 1em; /* font-style: normal;*/} 
.key-points li {margin-bottom: 1.0em; font-size:1.1em;}

/* check if required */
.box-image a, .box-image a img{display:block; text-align:center !important; margin:auto; }
.box-image p a {display:inline;}

img {max-width:100% !important;}
.box-image, img {page-break-inside:avoid}

/* end scale */


/* move to figure.css */
figure {
box-sizing:border-box;
margin: 0 0 10px 0;
padding: 0 0 10px 0; 
background: #efefef linear-gradient(to top, #efefef, #ffffff) repeat scroll 0 0;
page-break-inside:avoid
}

figure > img, figure a > img, figure div > image { display:block; text-align:center !important; margin:auto;  max-width: 100%; position:relative;}


figcaption {
clear: both;
color: #666;
display: block;
float: none;
font-style: italic;
padding: 5px;
text-align:center;
}
figcaption a, .box-image figcaption a {display: inline;}


figure {text-align:center;}
/* for svg */
.figure { width: 900px; min-height: 625px; position:relative; margin:auto;}

/* TEST! */
.col-33.figure {width: 300px; height: 211px;}

@media print{ 
	.figure, svg { width: 100%; height: auto; min-height:auto; }
}

.chart { margin: 2em 0; }
/* end charts */

.image-opener , .imageOpener, .imageOpener img {box-sizing: border-box !important; }

/* end generic */

@media only screen  and (min-width : 1024px) {
	#overview p { width: 50%; box-sizing:border-box; }
}


/* need to convert these back to scalable sizes */
.lead-graphics {min-height: 160px; }
.popupVideo { height:255px; overflow:hidden;}
.popupVideo img {margin-top:-43px;}


/* highlights - promo/link block */
.highlights-btn a[aria-haspopup="true"]:hover, .highlights-btn a[aria-haspopup="true"]:focus, .highlights-btn a[aria-haspopup="true"]:active {
 cursor: url("/climate/images/interface/cursor-popup.png"), url("/climate/images/interface/cursor-popup.cur"), default !important;
}
.highlights-btn a[aria-haspopup="true"]::before {
background-color: rgba(256, 256, 256, 0.2) ; 
content: " ";
display: block;
height: 256px;
position: absolute;
width: 456px;
z-index: 99;
}
.highlights-btn a[aria-haspopup="true"]:hover::before, .highlights-btn a[aria-haspopup="true"]:active::before {
background-color: rgba(0, 0, 0, 0.2);
}


.figcaption-overlay {
	position: relative;
}
.figcaption-overlay figcaption {
	position:absolute; 
	z-index:9999;
	box-sizing:border-box;
	
	font-size:1.4em;
	font-style:normal;
	min-height:3.8em;
	line-height:3.8em;
}

.highlights-btn.figcaption-overlay figcaption {
	top:96px;
	width:456px;
	
	color:#FFF;
	background-color: #166B96; /* fallback */
	background: linear-gradient(45deg, rgba(22,107,150, 0.9), rgba(26, 169, 203, 0.6));
}


/* table in maps tab */
#mapsTable, .mapsTable { width:940px; margin: 1.6em -1em 1em -1em; }
#mapsTable thead th, .mapsTable  thead th {background-color: #efefef;padding:5px;}
#mapsTable td,  .mapsTable td { max-width:144px !important; }
#mapsTable img,  .mapsTable img {width:inherit; max-height: auto; }
.imageOpener img {width: 100%; } /* where parent % needs reset to 100% */
@media print {
	#mapsTable,  .mapsTable  {width:100%; box-sizing:border-box; margin:0; white-space:normal;}
	#mapsTable td,  .mapsTable  td {
		 max-width:auto  !important;
	}
}
#mapsTable a.imageOpener {display: block; /* needed for cwdev overlay */}




/* temperature table */
.table-text .sst, .table-text .rain {background-image:none;}
.table-text {margin-top: 60px;}
.table-text th {position:relative; vertical-align:top !important;}
.table-text .col-4, .table-text .col-5,.table-text .col-2 {text-align: center; position:absolute;  margin-top: -56px; margin-left:-2px;z-index:99; height:50px;}

.table-text .col-4 {width: 264px;}
.table-text .col-5 {width: 357px;}
.table-text .col-2 {width: 120px;}

/* added for fy summary */
.table-text caption {font-style: italic; color: #666; font-weight:normal; border: none; background-color: unset;}
.table-text {border-collapse:collapse; margin: 20px 0;}
.table-text td, .table-text th {padding: 0.8em; }
.table-text tbody th {background-color: unset; }


.print-only {display:none;}

.box-notice { clear: both;}

@media print {
	.table-text .col-4, .table-text .col-5,.table-text .col-2 {display:none; text-align: inherit; position:relative;  margin-top: 0px; margin-left:0px;z-index:0; height:auto; width:auto;}
	.table-text th {font-size: .8em; padding: 0;}
	.table-text th div {display:none !important;}
	tr.print-only {display: table-row;}
	.print-page-break {page-break-before: always;}
	#tabs h2 {page-break-before: always; margin-top: 1em;}
	#tabs h2:first-of-type {page-break-before: avoid;}

}

#printBtn, a.button {border: 3px solid #ddd; background-color: #efefef; border-radius:0; margin-left:5px; color: #3366CC; font-size: 11px;line-height:11px;}
#printBtn:hover, #printBtn:active {cursor:pointer; background-color: #f8f8f8;}
.table-text th {width:8.5%;}
.table-text .sst, .table-text th.sst, th.sst div {background-color:#D8F1F1;}
.table-text .rain, .table-text th.rain, th.rain div {background-color: #ECF1FF;}
.table-text .temperature, .table-text  th.temperature, th.temperature div {background-color: #FFECEC !important;}

/* .box-nitice.larger */
.larger {border-radius:8px;}
.larger p,.larger ul {font-size: 1.12em;}
.larger li {padding-bottom:.3em;}


/* tables x 3 (more now) */

table {width: 100%; padding: 0; margin: 0.2em; border: 2px solid #ccc; background-color:#fff; white-space: nowrap; border-collapse: collapse; empty-cells:show;}
table#table-salinity {white-space: normal;}


/* table elements */
td, th {border: 1px solid #EAEAEA; padding: 0 0.3em;} 
th {padding: 0.3em}
td {text-align: right; }
td.date {text-align: left; border-left: none; padding-left: 0.5em;}
th.heading {font-size: 1.2em; text-align: left; background-color: #E5E5E1; padding: 0.5em 1em}
th {background-color: #E5E5E1; text-align:center;}
th.place, th.extreme, td.itemtitle {padding:0.1em; padding-right: 0.3em; text-align: left; font-weight:normal; background-color: #F3F4EF; }
table.extremes td {text-align: left; padding-top:0.3em; padding-bottom:0.3em;}
th.groupheading, tr.grouptitle * {background-color: #EAEAEA; text-align:left; padding-left: 1em; }
td.unit {text-align:left; padding-left:0.1em; width:2em} 
table.summary td {width:4em}
colgroup.group {border-left: 2px solid #EAEAEA;}
table a {text-decoration:none;}

table.thumbgroup td {text-align: center; padding: 5px; }
table.thumbgroup td img {max-width: 154px; width:154px;}

table.compact {white-space: normal;}
table.areal td {text-align: right; padding-right:1.6em; width:6em}
table.areal td.comment {text-align:left; padding-left:0.3em; padding-right:0.3em; width:0;}
table.daily td {padding-top: 0; padding-bottom:0;}
table.daily td {font-size: 0.7em}
table.daily tbody th {font-size: 0.8em}
/*table.areal tr {height: 3em;}*/
table.areal td.comment {white-space:normal; width: 20%}
table.areal th.place {width: 10em; padding:1em;white-space: nowrap;}

/* hover effect on table rows */
table tbody tr:hover * {background-color: #E5E5E1;}

table tbody th {text-align: left;}

/* various others */
.dateline {padding-top:0.6em; font-size: 0.9em; color:#999;}
span.place {border-bottom: 1px dotted #ccc; }



@media print {
	table.compact {white-space: normal;}
}
/* patches for T-bar design */

/* for wider month summary with 3 extra averages columns*/
table.compact tr th {vertical-align: top;}

table.compact td {
	/* padding-right:6%; */
	width: auto;
}

/* print media */
@media print {
	
	table {width:100%; height:auto; max-width:100%; margin:0; box-sizing:border-box;}

	table.compact td,table.compact th, table.areal td,table.areal th {padding:0.4em;}
	table caption { white-space: normal !important;  }

	table.areal th {padding: 0 0.3em;}
	/*table.areal td {text-align: right; padding-right:2em; width:6em}*/
	table.areal tr {height: 2em;}
	table.areal td.comment {white-space:normal; width: 15%}
	table.areal th.place {width: 8em; padding:0.3em;}
}
/* tidy up sup */
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}


/* TODO reconcile tables */
table.cd3-rank-table td {text-align : right }
tr.cd3-group-heads th:nth-child(2), 
tr.cd3-col-heads th:nth-child(2), 
tr.cd3-col-heads th:nth-child(3), 
tr.cd3-col-heads th:nth-child(4), 
tr.cd3-col-heads th:nth-child(5), 
table.cd3-rank-table td:nth-child(2),
table.cd3-rank-table td:nth-child(3),
table.cd3-rank-table td:nth-child(4),
table.cd3-rank-table td:nth-child(5)
{ background-color: rgba(253, 205, 172, 0.4) ; }
tr.cd3-group-heads th:nth-child(3), 
tr.cd3-col-heads th:nth-child(6), 
tr.cd3-col-heads th:nth-child(7), 
tr.cd3-col-heads th:nth-child(8), 
tr.cd3-col-heads th:nth-child(9), 
table.cd3-rank-table td:nth-child(6),
table.cd3-rank-table td:nth-child(7),
table.cd3-rank-table td:nth-child(8),
table.cd3-rank-table td:nth-child(9)
{ background-color: rgba(179, 226, 205, 0.4); } 
tr.cd3-group-heads th:nth-child(4), 
tr.cd3-col-heads th:nth-child(10), 
tr.cd3-col-heads th:nth-child(11), 
table.cd3-rank-table td:nth-child(10),
table.cd3-rank-table td:nth-child(11)
{ background-color: rgba(203, 213, 232, 0.4) } 
table.cd3-rank-table { white-space: normal !important; }
table.cd3-rank-table td, table.cd3-rank-table th {border: 1px solid #FFF;}

table.cd3-rank-table td:nth-child(1), 
table.cd3-rank-table td:nth-child(3),
table.cd3-rank-table td:nth-child(4),
table.cd3-rank-table td:nth-child(7),
table.cd3-rank-table td:nth-child(8),
table.cd3-rank-table td:nth-child(9)
{ padding-right: 3em !important; }


a span.preliminary, #dialog.preliminary::before {
	content: 'preliminary';
	color: rgba(255,255,255,0.8);
	font-size:4rem;
	font-weight:bold;
	text-decoration:none;
	position: absolute;
	display: block;
	width:auto;
	z-index:999;
	-webkit-text-stroke: rgba(0,0,0,0.4) 2px;
	top:100px;
	left:10%;
	text-align:center;
}

a.imageOpener { background-size: auto; }
#mapsTable  a.imageOpener  { height:109px; }

 a.imageOpener div.preliminary {
	color: rgba(255,255,255,0.8);
	font-size:2.6rem;
	font-weight:bold;
	text-decoration:none;
	position: absolute;
	display: block;
	width:auto;
	z-index:999;
	-webkit-text-stroke: rgba(0,0,0,0.4) 1px;
	top: 120px;
	left:-120px;
	text-align:center;
}
#mapsTable div.preliminary {	
	font-size:1.6rem;
	top: -50px;
	left:5%;
}

caption.align-bottom {
    padding: 10px;
	line-height: 1.4em;
    text-align: left;
}

b { background-color: #9999FF; font-weight:300;}


/* add for water refactor */
.tabs-nested-first > .ui-widget-header { padding-bottom: 5px; background: linear-gradient(to top,#efefef, #fff) !important; margin-bottom: 0em; margin-top: 0;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active { background-color: linear-gradient(to top, #efefef, #fff ); }
.ui-tabs.tabs-nested-first > .ui-tabs-nav > li.ui-state-default {margin-bottom: 6px;}

.ui-tabs.tabs-nested-first > .ui-tabs-nav > li.ui-tabs-active {
	color: #fff;
	background-color:#06C;
	border-radius: 4px;
}
.ui-tabs.tabs-nested-first > .ui-tabs-nav > li.ui-tabs-hover {
    background-color: #c6c6c6;
    /*border-radius: 4px;*/
}
.ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-state-active a,
.ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-state-active a:link,
.ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-state-active a:visited,
.ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-state-active a:hover{color: #fff;}


.flex {display: flex; }
.wrap {flex-wrap: wrap;}
.cols-3 > * {width: 33%; flex-basis: 33%; }
.cols-2 > * {width: 50%; flex-basis: 50%; }
/* TODO: responsive 'flex-grids' for tiny screens */


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 3px solid #fff;
	border-bottom-color: #fff;
	border-radius: 0;
	background: none;
    /* background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; */
    font-weight: normal;
    color: #555;
	margin-bottom: -5px
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 3px solid #fff;
	border-bottom-color: #fff;
	background: none; 
	background-color:#e6e6e6;
   
    font-weight: normal;
    color: #212121;
}
.ui-state-hover, .tabs-nested.ui-widget-content .ui-state-hover, .tabs-nested .ui-widget-header .ui-state-hover, .ui-state-focus, .tabs-nested.ui-widget-content .ui-state-focus,  .tabs-nested .ui-widget-header .ui-state-focus {
	background-color:#e6e6e6;
	background: #e6e6e6;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    /*background-color: linear-gradient(to top, #efefef, #fff );*/
	border: 3px solid #d3d3d3; 
	border-bottom-color: #fff;
	background-color: #fff;
}
.ui-widget-header {
    border: none;
    border-bottom: 3px solid #ddd;
    background: #fff;
    border-radius: 0;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -3px;
    padding-bottom: 3px;
}
.tabs-nested .ui-widget-header {
    border-bottom: 1px solid #ddd;
}

ul.no-bullets {list-style-image: none; margin-left: 0;}

ul.no-bullets li {margin-bottom: 20px;}


.keypoints h3 { font-size: 1.6em; padding: 20px; color: #fff; margin-bottom: 15px;}
@media print {
	.keypoints h3 {color:#000;}
	
}

.ui-tabs-panel h3 {
    font-size: 1.2em;
}

h3.temperature {background-color: #C3272F; }
h3.rainfall { background-color: #0AB0D9; }
h3.influences { background-color: #2F4655; }

#highlights.tldr {  margin-top: 50px; background-color: #ccc;}

.tldr #aus {
    left: 534px; /* */
    top: 15px;
    color: #000;
    width: 366px;
	font-size: larger;
}

.tabs-nested.ui-tabs {
    margin: 0 -1em;
}
#summary figure { background: none;}

/*
.ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-state-default, .ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-widget-content .ui-state-default, .ui-tabs.tabs-nested-first > .ui-tabs-nav > .ui-widget-header .ui-state-default {
	background: ;
}

.tabs-nested.ui-state-default, .ui-widget-content .ui-state-default, .tabs-nested.ui-widget-header .ui-state-default {
   background-image: unset;
}
*/

table#table-salinity td+td, table#table-salinity th  {text-align: left; padding-left: 10px;}


.banner {
	background: linear-gradient(75deg, #003366 20%,#1964AA 70%);
	padding:20px 10px 0 20px;
	margin: 10px 0;
}
.banner h1 {color: #fff;}
h1 > small { font-size: .7em; font-weight: normal;}
#definitionPopUp b {background-color: #fff;font-weight:bold; }


.padding-0 {padding:0;} /* for banner image in first section */