@charset "utf-8";

@import url('/climate/ahead/outlooks/mw.css');

/* TODO REVIEW! Mostly very old, for responsive wrappers, minimal download */
img { border: none; }

#breadcrumb { margin:-1em 0 1em -.8em; padding:.4em;font-size:.9em; min-height:1.2em; width:100%; }
#breadcrumb li {display:block; width:auto; float:left;padding-left:14px; background: url(/climate/images/symbols/bullet-arrow.png) no-repeat 2px 2px; }
#breadcrumb li:first-child {background:url(/climate/images/symbols/bullet.gif) no-repeat 0 0; }
#breadcrumb a:link , #breadcrumb a:visited{text-decoration:none; }

h1 {clear:both; }

figure { margin: 0; padding: 0; box-sizing: border-box; } /* reset */
#pagewrap, #columns, #container, #container.fullwidth { width: 100%; box-sizing: border-box; } /* small view first */
figure img { max-width:100%; height:auto; }


/* ocean */
figcaption {position:relative; background-color:#EDF3FF ; padding:5px; }
/* figure:last-child figcaption b{ margin-right: 6em; } */
a.button { box-sizing: border-box;text-decoration:none; display:block; background-color:#f3f4ef; border:1px solid #ccc; text-align:center;border-radius:6px 0 0 6px;
padding:4px; margin:0; position:absolute; top:0; right:0; }
a.button:hover{background-color:#fff; }

p.date { margin:10px 0; font-weight: bold; background: url(/climate/images/symbols/time-icon.png) no-repeat left; padding-left:24px; }
.ui-content ul { margin:0; } /* from jq mobile .ui-content wrapper */

.box-notice  {padding: 1em; margin: 1em 0; }

.maps {margin-bottom:2.0em; }
.maps h3{text-align:center; background-color: #D5E9F7;  padding:0.8em; margin-bottom:1em; position:relative;font-weight:normal; }
.maps h3 a, .maps h3 a:link, .maps h3 a:visited { /*display:block;*/ font-size:0.8em; }

@media screen and (max-width:320px){
	.sv-hide {display:none; }
}

@media screen and (min-width: 500px){
	.maps h3 a {display:inline-block; position:absolute; right: 0.6em; top:0.6em; }
}
@media screen and (min-width:768px){figcaption b { margin-left: 1em; }}

@media screen and (min-width:1024px){
	/* add header segments, css,footer js - after page load */
	#pagewrap {width: 1003px; box-shadow: 0 0 28px rgba(0,0,0,0.6); }
	#container.fullwidth {padding: 12px 20px 12px 20px; }
}

#content h2 {clear:both; border-bottom: 1px dotted #ccc; color:#000; margin:2em 0 1em 0; }
#content section > h2:first-of-type, #content div > h2:first-of-type {margin:0em 0 1em 0; }

#overview-summary { border:4px solid #D7EAF7; background-color:#EDF3FF; padding:1em; } /*#CAE3F4#BDDDF2 #efefef#f5f5f5 */

#overview-summary ul {margin:0; }
#overview-summary h2 {margin-top:0; }
.bg-grey {border:4px solid #D7EAF7; background-color:#EDF3FF; padding:1em; }

#overview-influences ul, #overview-summary ul, #rainfall-summary ul, #temperature-summary ul, 
#overview-influences p, #overview-summary p, #rainfall-summary p, #temperature-summary p { font-size:1.1em; }
#overview-influences li, #overview-summary li, #rainfall-summary li, #temperature-summary li {
list-style: outside none none;
background: rgba(0, 0, 0, 0) url("/climate/images/symbols/bullet-blue.png") no-repeat scroll 0 0.5em;
line-height: 1.6em;
margin: 0 0 1.4em 0;
padding: 0 0 0 18px; }

/* redundant ? */
#confidence-update {display:block; }

h1 { padding-bottom: 0; }

.maps { position: relative; }
.maps figure {
/* max-width: 24.6%; */
box-sizing: border-box; position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
border: 1px solid #fff;
background-color: #fff;
margin-bottom: 1em;
}


.maps figure:hover, .maps figure:active {
border: 1px solid #000;
cursor: pointer;
box-shadow: 0 0 4px 2px rgba(0,0,0, 0.2);
}


.maps figure::after {
content: url('/climate/images/symbols/zoom-25x25.png');
position: absolute;
right: 0.0em;
bottom: 0.0em;
z-index: 9;
}

.maps figure.large {
max-width: 100%; width:100%;
height:auto;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 99;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
z-index: 999;
box-shadow: 0 0 8px 4px rgba(0,0,0,0.4);
margin-bottom: 0;
}
.maps figure.large::after {
content: url('/climate/images/symbols/zoom-out-25x25.png');
position: absolute;
right: 0.0em;
bottom: 0.0em;
z-index: 9;
}

figure.large figcaption {font-size: 1.4em; }


/* .maps { min-height: 245px; }*/
.maps figcaption { display: block; text-align: center; }

/* region form on default latest page */
.downloadMaps label { /* display: inline-block; */ color: #666; font-weight: bold; }
.downloadMaps [aria-hidden="true"] { display:none; }
.downloadMaps { display: flex; flex-direction: row; flex-wrap:wrap; }
.downloadMaps fieldset { box-sizing: border-box; min-height: 3.4em; padding: 0.6em; margin:0.2em 0.2em 0.2em 0; border: 1px dotted #ddd; }
@media (max-width: 768px){
	label span { display:block;}
	.downloadMaps  select {}
	.downloadMaps fieldset { max-width: 90%; padding: 0.2em;}
}
@media (min-width: 768px){
	.downloadMaps { flex-wrap: nowrap; }
	.downloadMaps fieldset {margin:0.2em 0.2em 2em 0;}
}




#mwMap { max-width: 760px; height:auto;text-align:center; margin:auto; }


#mwOutputs  ul { text-align: center; width:auto; margin:auto; }
#mwOutputs  li {list-style:none; display:inline-block; }
#mwOutputs a.buttony { display:block; width:20em; padding: 1em; font-weight: bold; text-decoration: none; box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);  background-color: #efefef; border-radius: 4px; margin:0.2em 0.5em; text-align:center; }
#mwOutputs a:active.buttony, #regionOutputs a:hover.buttony{ background-color: #fff;  box-shadow: 0 0 2px 4px rgba(0,0,0,0.2); }
#mwOutputs img {max-width: 100%; height:auto; }



.extra-info section { display: inline-block; box-sizing: border-box; width: 50%; }
.bg-grey-light { background-color: #fefefe; }

.btn-large {color: #ccc; text-decoration: none; padding: 1em; display:block; text-align:center; border-radius: 4px; background-color: #D7EAF7; }
.btn-large:hover, .btn-large:active {background-color: #efefef;}


@media print {
	figure { display: inline-block !important; width: 24%; box-sizing: border-box; }
	figure::after, figure.large::after {
		content: none !important;
	}
	h2 small
	h2 small, h3 small, h3 a,.region-maps form, .region-maps h2 , #regionOutputs ul{ display:none !important; }
	#regionOutputs img {max-width: 100%; max-height: auto; }
}