@charset "utf-8";
/* for /climate/influences/, /climate/influences/archive/yyyymmdd.archive.shtml */
@import url('/climate/styles/date.css');
@import url('/climate/styles/tabs-nested.css');
@import url('/climate/styles/loader.css');

@import url('/climate/enso/wrap-up/animation-controls.css');

#graphsContainer iframe { width:780px; box-sizing: border-box; min-height: 680px; overflow: visible; }

.tabs-nested.ui-tabs { padding: 1.0em 0.6em !important; }
.ui-tabs .ui-tabs-nav li { margin-right: 0.4em; }

#ensoStatus { text-align:center; margin: auto; }
#ensoStatus img { max-width: 100%; height: auto; }
#ensoStatus g.background{fill: #efefef; }
g.labels { display: none; opacity: 0; }

#sstWeeklyGraph span, #sstMonthlyGraph span {display: block; float: right;  min-width: 100px; }
.graphContainer { min-height: 98px; background: #F5F5F5; padding: 15px 10px 0 10px; box-sizing: border-box; margin:3px; border: 1px solid #fff; box-shadow: 0 0 1px #999; }
/* archive box */
.box-archive h2 {margin:-5px -5px 5px -5px; background-color: #efefef; color: #000; padding: 5px; }

/* jquery ui overrides */
div.ui-tabs div.ui-tabs-panel { padding: 0.5em; margin:0; min-height:500px; }
.ui-tabs .ui-tabs-nav li a { padding: .5em 0.7em; }
.ui-dialog .ui-widget-content a { color: #06C; }
.ui-dialog .ui-widget-content a:hover { color: #F60; }

h1 strong { font-size: .8em; color: #666; }
h3 { color: #000; font-size: 1em; }

/* sst tables */
table.table-text caption {
color: #666;
 background-color: #efefef;
 background: linear-gradient(to top, #ffffff,#efefef );
 text-align: center; }
table.table-text { margin: auto; caption-side: bottom; width: 100%; margin-top: 2px; }

/* product specific */

.zoomImage {position: relative; box-sizing: border-box;}
.zoomImage::after {
	content: url(/climate/images/symbols/zoom-25x25.png);
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 999;
}

.zoomImage img {
	box-sizing: border-box; 
	transition: all 0.3s ease-in-out;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
}
.zoomImage.right img {
	transform-origin: bottom right;
}

.zoomImage img:focus, .zoomImage img:hover {
	transform: scale(2);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
 }

.block-100 { clear: both; }
.block-100 img { max-width: 98%; height:auto; }

.feature img { width: auto; max-width:95%; height:auto; min-height:auto; }
.block-50 .feature { margin-right:10px; min-height:auto; }
a.imageOpener.feature img { min-height:auto; max-width: 98%; }


.block-20 { width:20%; display:block; }
.block-80 { width:80%; display:block; float:left; }


div.block-50 img { max-width:98%; }
.block-80.float-right { float: right; }

/* cull most of below */
a.definition { text-decoration: none; border-bottom: 1px dotted #F60; }
a.definition:hover { text-decoration: none; border-bottom: 1px dotted #000; }
a.imageOpener, a.imageOpener img { position: relative; text-align: center; margin: auto; display: inline-block; }
a.imageOpener img{ text-align: center; border-color: #fff; box-shadow: 0 0 2px #ccc; min-height: 140px; max-width:98%; }
.text  a.imageOpener, .imageOpener.textLink {display: inline-block; margin: 3px; background-image: none;}


/* info link */
div.tabs { position:relative; }
#about-cc { display: none; position: absolute; left:3px; top: 3px; z-index: 900; width: 90%; box-shadow: 3px 3px 3px #888888; }
#info-link { width: 30px; height: 30px; position: absolute; right: 8px; top: 8px; z-index: 9; }
#info { border-radius:15px; font-weight: bold; color: #C00; text-shadow: 1px 1px 1px #000; }


a.clip-top { display:block; overflow: hidden; position:relative; }
a.clip-top img { display:block; margin-top: -25px; }
.imageOpener:hover, .imageOpener:focus { cursor: url(/climate/images/interface/cursor-popup.png), url(/climate/images/interface/cursor-popup.cur), default !important; border-color:#ccc; }

/* links at bottom of sections */
ul.horizontal {
	float: left;
	margin: 0 !important;
	min-height: 2.5em; 
	clear: both;
	box-sizing: border-box; 
	width: auto;
	padding: 1em 2px 2px 2px; }
ul.horizontal li { background-image: none !important; margin: 3px; padding: 0; }
ul.horizontal a, .btn-inline{ text-decoration: none; display: block; padding: 0.5em; border: 1px solid #fff; border-radius: 6px; box-shadow: 0 0 2px 1px #ccc; background-color: #efefef; }
a.btn-inline { display: inline-block; width: auto; padding: 0.1em 0.5em; margin: 0 0.3em; }
.pull-up { margin-top: -3em; }
ul.horizontal a:hover { background-color: #fff; }
ul.horizontal b { display: block; padding: 0.5em; width: auto; }
ul.horizontal.inline { display: inline-block; }

@media print {
	#clip      { margin-left:0px; }
	a[href="/climate/search/enso-wrap-up.shtml?bookmark=no-rm"] { display:  none; }


	#info-link { display:none; }
	#overview .block-20, .block-25, .print-no, .box-info { display:none}
	img { max-width:100%; }
	.access-info { display:none; }
	.ui-tabs-nav { display: none; }
	#tabs div.ui-tabs div.ui-tabs-panel, #tabs .ui-widget .ui-widget-content { padding:0; min-height: auto; height: auto; display: block !important; width: 100% !important; }
	.print-none { display:none; }
	.block-75, .print-block-100{ width:100% !important; float: none; }
	a.pdf { padding-left:0; }

	p.date time:first-child:before {
		padding-left: 0 !important; }
}

.hidden{visibility: hidden;}


figure, figure img { display: block; text-align: center; margin: auto;  }
figcaption { color:#666; padding:10px;}
/* for image grids */
.gradient-bottom  figure {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
    background: -webkit-linear-gradient(bottom, #efefef, #ffffff);
    background: -moz-linear-gradient(bottom, #efefef, #ffffff);
    background: -ms-linear-gradient(bottom, #efefef, #ffffff);
    background: -o-linear-gradient(bottom, #efefef, #ffffff);
    background: linear-gradient(to top, #efefef, #ffffff);
}


#enso-history figcaption {
	clear: both;
	color: #666;
	display: block;
	float: none;	
	padding: 10px;	
	font-size: 1em;
}
#enso-history figcaption p, #enso-history figcaption ul, #enso-history figcaption h3 {
	font-style:normal;
	color:#000;
}
#enso-history figure {
	margin: 1em 0;
	padding: 0;
}
figure.image-timeline  img{
	width: 5078px !important;
	max-width: 5078px !important;
	height: 381px;
	max-height: 381px;
}


#isAccessMap {text-align: center; margin:auto; margin-bottom: 1em;}
.table-text th, .table-text td {font-size: 0.8em;}


.page-menu {display: none;}
figcaption.block-50, .nospace { box-sizing: border-box; }

.ui-tabs .ui-tabs-panel {
	padding: 1em .4em .4em .4em;
}

.ui-widget-content {
	border:none;
}
.ui-widget-header {
	border:none;
	border-bottom: 1px solid #ddd;
	background: #fff;
	border-radius: 0;
}
.tabs-nested.ui-tabs {
	padding: 1.0em 0.0em !important;
}
.tabs-nested-first.ui-tabs {
	padding: 0 .4em .4em .4em;
}

.tabs-nested-first > .ui-widget-header { background: linear-gradient(to top,#efefef, #fff) !important; margin-bottom: 2em; 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 > .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:none;
	border: none;
}

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




/* .tabs-nested .ui-tabs-panel h2 {padding-top:10px; }*/
.tabs-nested .tabs-nested .ui-tabs-panel h2 {padding-top:20px; }

.box-notice p:last-of-type {padding-bottom: 0; margin-bottom: 0;}

.box-notice.top-margin-none { margin: -2em 0 2em 0; background-color: #efefef; border-radius: 0px; color: #666; font-style: italic;}

.mjo-clip  {height: auto;border: 1px solid #efefef; overflow: hidden;}

.box-centre h3 { text-align: center; margin-top:0;padding-top:0;}

#dialog {max-width: 100%;}
.box-graphic .sstMenu label, .box-graphic label { margin: 4px; border:none; color: #666; background-color: #eee;}
.box-graphic .sstMenu label a {text-decoration: none; display: block; box-sizing: border-box; }
.box-graphic .sstMenu label:hover a {color: #fff !important;}
.box-graphic .sstMenu label a:hover, .box-graphic .sstMenu label a:active {color: #fff;}

.menu-horizonatal-btn { margin:8px;text-align: center; border: none; }
.menu-horizonatal-btn label{ display: inline-block; font-weight: normal; margin: 0; padding: 0.5em 0; font-size: 1.1em; position: relative; text-align:center; padding:.275em 0.6em ; background-color: #dddddd; color: #069 ; border-radius: 4px; line-height:30px; }
.menu-horizonatal-btn fieldset > label:first-of-type { border-radius: 4px 0 0 4px; margin-right: -4px;}
.menu-horizonatal-btn fieldset > label:last-of-type { border-radius:0 4px 4px 0;}
.menu-horizonatal-btn label.active { color:#fff; text-decoration:none; cursor:default; background: #06C; }
.menu-horizonatal-btn label:hover,.menu-horizonatal-btn label:focus { color: #fff; background: #666; }
.menu-horizonatal-btn input[type='radio'] { position: absolute; z-index: -1; }


/* move to climate.css */
.space-top {padding-top: 1em; }
p.date {font-size: 0.76rem;}
.ui-widget * { outline: none;}
/* note - archive now has discrete template, so below may be redundant */
.archive .archive-only {display:none;}


.ms > h2 {padding:10px; text-align: center; color: #333; }

.no-ms {color: #666; font-weight: normal; padding:10px !important; }

.image-pad img {display:block; padding:4px; background-color: #fff; }
#dialog img {max-width:100%;}

figure#imageTimeline img { max-width:5078px;}

summary h3 {text-align: left !important; padding: 5px !important;}
details {background-color: #fff; }


.smaller {font-size: smaller;}

/* former/standby content areas now contain an <hr> to avoid CMS error generation */
#content hr {display:none;}

/* shm formatting */
.theme-blue summary { border:none !important; background-color: white !important; }
			h2 {color:#000; font-size: 1.4em; font-weight: bold; border-bottom: dotted 1px #ccc;}

			details summary h2, details summary h3 {background-color: #fff ;border-bottom: none;}

			#isAccessMap {
    			text-align: unset; 
			}

			.box-graphic {border: none;}
			.box-graphic .sstMenu label a {
				text-decoration: none;
				display: block;
				box-sizing: border-box;
			}
			.box-image img {max-width:100%; display: inline-block;  box-sizing: border-box;}
			
			.spacer-large {
				clear: both;
				padding:20px;
			}

			.pad {padding: 10px;}
			.pad-large {padding: 20px;}

			
			fieldset {border: none;}
            /*#data-link,#data-link a,*/
			 .data-link {padding:0 5px 0 24px; margin: 4px 4px 4px 20px; background-color: #efefef; border-radius: 4px;}
			 .data-link  a, a.data-link {padding:10px 10px 10px 24px; display: inline-block;}
			label { 
				font-size: 1em; padding:5px 10px;
				color: #666;
				vertical-align: middle;
   				margin: auto 5px;
			} /*line-height: 30px;*/
			select {padding: 5px 10px;}
			.box-notice.noborder {border: none !important;}

			.layer-container {position: relative; min-height: 560px;}

			/* .flex {align-content: flex-start;}*/

/* review - from rainfall */
/* 'latest' SST maps differ in aspect ratio to archive versions - just whitespace - so need to displace overlay */

.layer { position: absolute; display:block;left:0;top:0;margin:auto; }
.layer, .layer img  {
	animation-name: fadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: .3s;
}
@keyframes fadeInOut {
	0% {opacity:0;}
	45% {opacity:0.3;}
	100% {opacity:1;}
}

/*
#regionsOverlay.layer { 
	max-width: 94.3%;
    padding-right: 3.6%;
    padding-top: 2.5%;  }
*/
.archive #regionsOverlay.layer {
	max-width: 100%;
	padding-right: 0;
    padding-top: 0; 
}


.hidden {display: none; }
.space-left {margin-left: 20px !important;}

.flex {justify-content: center;}
.flex-align-top > * {
	align-self: flex-start;
	margin-top:0 !important;
}

.key-points h2 {padding-top:0; }