@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');

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


/* there's no BoM print styling on .fullwidth, footer height needs further coertion */
@media print{
	#container.fullwidth {width: 99% !important; box-sizing:border-box;}
	#overview p {
		width: auto;
	}
	.block-50.float-right { float:none; width: auto;}
	#footer #footer-columns {height: auto; }
}
.fullwidth .box-notice {border-radius: 0; padding: 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 {display: inline;}


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

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

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

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

.image-opener , .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, .imageOpener img {width:inherit; max-height: auto; }

@media print {
	#mapsTable,  .mapsTable  {width:100%; box-sizing:border-box; margin:0; white-space:normal;}
	#mapsTable td,  .mapsTable  td {
		 max-width:auto  !important;
	}
}

/* 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;}

.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;}
	
}

#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;}

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


/* tables x 3 */

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 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.areal td {text-align: right; padding-right:2em; 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;}

/* hover effect on table rows */
table tbody tr:hover * {background-color: #E5E5E1}
/* various others */
.dateline {padding-top:0.6em; font-size: 0.9em; color:#999;}
span.place {border-bottom: 1px dotted #ccc; }



/* patches for T-bar design */

/* for wider month summary with 3 extra averages columns*/
table.compact tr th {vertical-align: top;}
table.compact td {
/*vertical-align: top;*/
padding-right:6%; /* 3.8em */
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;  }

}
/* 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; }


/* *******  TEMP - script this cwdev - has to be hackish as img:before/after not supported ********** 
*/
/*
.preliminary img { 
	border: 4px #FF0066 solid;
	content: 'Preliminary';
	
}
*/
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 {height:inherit; max-width:451px; max-height:310px;}
#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;}