@charset "utf-8";

.ui-bar-b {border: none;}

.image-responsive img, img.image-responsive {max-width:100%; height:auto;}/*  */

h2#app-title.ui-title {text-align: left; color:#fff; margin:0 98px 0 40px; padding:8px 0 2px 0; font-weight:300; text-shadow:none; }
.ui-panel-page-content-position-left h2#app-title.ui-title { margin-left:10px; }
.ui-header .ui-btn-left {margin-left:10px;}
div[data-role="header"] {min-height:40px; box-sizing:border-box; }
#content-wrapper .ui-header .ui-btn-left {margin-left:0; }
#content-wrapper .ui-header .ui-btn, #nav-panel .ui-header .ui-btn {font-size: 16px;}


#nav-panel .ui-header h1.ui-title  {display:inline-block; font-weight:600 ; font-size:.9em; color:#CAE2F4 !important; padding:7px 5px 5px 5px;  margin:0 0 0 0px; vertical-align:top;}


#content-header .ui-btn, #smallScreenFooter .ui-btn, #nav-panel .ui-header .ui-btn{
    background-color: transparent;
    border: 0;
    border-radius:0 !important;
}

#content-header .ui-btn:hover, #smallScreenFooter .ui-btn:hover, #nav-panel .ui-header .ui-btn:hover {
    background-color: #156FB3;
}

#content-header .ui-btn:after {
    height: 20px;
    width: 20px;
    background-size: 20px 20px;
    margin-left: -10px;
    margin-top: -10px;
    line-height: 20px;
    font-size:16px;
}
#content-header #about-info.ui-btn:after {
    background-size: 18px 18px;
}

#content-header .ui-btn-icon-left:after, #content-header .ui-btn-icon-right:after, #content-header .ui-btn-icon-notext:after {
    border-radius: 0;
    font-size:20px;
}

#app-meta {position:absolute; right:5px; top:5px;}
#app-meta .ui-btn {margin:0 !important;}

/* miscellaneous */
#smallScreenFooter a.copyright {min-width: 1.2em; font-size: 0.8em; padding:0; margin:0; }
#smallScreenFooter {bottom: -2px; padding-bottom: 2px;}
#smallScreenFooter div[data-type="horizontal"] {float:left; margin-left:5px;}

/*
hi res display - if adjustments required
@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

*/
html {
    /*
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    */
    }
/* img[src$='.png'] { -ms-interpolation-mode: nearest-neighbor; }*/
img {
/*image-rendering: optimizeQuality;*/
/*-ms-interpolation-mode: bicubic;*/
-ms-interpolation-mode: nearest-neighbor; /* sharp edges */
}
body {margin:0; padding:0; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; position:relative; font-size-adjust:0.539;}
body.oldIE[style] {font-size:76% !important;}
body.oldIE .lvOptions[style]{
    border: medium none !important;
    margin: -5.6em 0 5px 560px;
    padding: 0;
    text-align: right;
    width: auto;
    max-width:400px  !important;
}
body.oldIE .lvOptions .ui-block-a[style] {width:25%;}
h1, h2, h3, .ui-btn {font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size-adjust:0.539; }

body.oldIE #content-header.ui-panel-page-content-position-left.ui-panel-animate {left:272px !important;}

#issuedate {padding: 0.0em  0.5em  2em 1em;}
#svissuedate {padding:0.8em; font-size:0.8em; font-weight:normal;  float:right;width:auto;}

.truncate {overflow: hidden;text-overflow:ellipsis; white-space:nowrap;display:inline-block;}

a[target="_blank"] {padding-right: 14px; background: url(/climate/images/symbols/external.gif) no-repeat right;}
a[target="_blank"]:focus::after {content: ' (Opens in new window) ' ;}

#extra-info-popup-content a[target="_blank"]:focus::after, #about-info-popup-content a[target="_blank"]:focus::after {content: '' ; }
#extra-info-popup-content a[target="_blank"] , #about-info-popup-content a[target="_blank"] {background-image:none;}

/* z-index no go for radio button facade z-index:9999999999999*/
[data-whatinput="keyboard"] *:focus, [data-whatinput="keyboard"] label:focus {outline:2px solid #3CF !important; }
.ui-accessibile-hidden *:focus {border:none !important;}
[data-whatinput="keyboard"] #header *:focus {border:none !important; outline:2px solid #3CF !important;}


#breadcrumb a:focus {color: #000 !important;}

/**/
/* Remove focus dotted line by default */
*::-moz-focus-inner {
    border: none;
}
*:focus, *:active {
    box-shadow: none;
    outline: none !important;
}

/* Highlight anything that gets keyboard focus */
[data-whatinput="keyboard"] *:focus,
 {
    box-shadow: none;
    outline: 2px solid #3cf !important;
    z-index: 99;
}

/* For making the jump to content link visible when using keyboard
 *
 * Copied from http://www.bom.gov.au/assets-140/css/home.css with
 * addition of the custom CSS in the first line below
 */
#jumplinks { left: 0px; top: 0px; } /* Custom CSS */

/* /assets-140/css/home.css as of 2015-06-18 */
#jumplinks { position: absolute; left: 0px; top: 0px; display: none; text-align: left; margin: 0; padding: 0; } /* for all, including Opera. display:none used to switch off the skip links for Opera users (it's redundant, Opera has excellent keyboard navigation)*/
* html #jumplinks { display: block; } /* switch on for IE6 and below */
*+html #jumplinks { display: block; } /* switch on for IE7 */
:root #jumplinks { display: block} /* switch on for Moz, FF and Safari */
#jumplinks a { white-space: nowrap; display:block; color: #fff; background: transparent; text-decoration: none; padding: 7px; position: absolute; left: -1000em; top: 0; }
#jumplinks a:visited { color: #fff }
#jumplinks a:focus, #jumplinks a:active { z-index: 99; top: 0; left: 100px; color: #fff; padding-left: 250px; background: transparent !important; } /*Note IE bug that requires use of :active to mimic effect of :focus*/
#jumplinks a:hover { cursor: default }

/* For making elements with relevant tooltips clickable for
 * use on mobile devices
 */
.more-info {
    border-bottom: 1px dotted gray;
    position: relative;
    display:inline-block;
}
.iOS #smallScreenFooter .more-info {border-bottom:none;}

.more-info .title {
    position: absolute;
    font-size: 1em;
    top:25px;
    background: black;
    color: white;
    padding: 5px;
    right: -5px;
    white-space: nowrap;
    z-index: 1;
}


.leaflet-container a.leaflet-popup-close-button  {color: #666;}

/* for firefox, ie*/
/*#smallScreenFooter {overflow:visible !important;}  know issues for some Android*/

.next-issue {color:#D5E9F7 ; display:none; }/* #99CCFF */

/* https://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx */
@media screen and (-ms-high-contrast: active) {
  /* All high contrast styling rules */
   .ui-btn-icon-notext {text-indent: 0 !important; color:#000;}
   #section-menu .ui-btn-icon-notext:after {
       content: 'Info ';
       background-image: url(images/icons-png/info-black.png) no-repeat !important;
   }
   #extra-info .ui-btn-icon-notext:after {
       content: 'More ';
   }
   #search-info .ui-btn-icon-notext:after {
       content: 'Search ';
   }
   #sectionNavClose .ui-btn-icon-notext:after {
       content: 'X ';
   }
   .ui-icon-home.ui-btn-icon-notext:after {
       content: 'Home ';
   }
   #nav-panel-close .ui-btn-icon-notext:after {
       content: 'Nav ';
   }
   .ui-icon-delete .ui-btn-icon-notext:after, #search-info-popup .ui-btn-icon-notext:after, #ui-input-search .ui-btn-icon-notext:after, #modal-popup .ui-btn-icon-notext:after, #extra-info-popup .ui-btn-icon-notext:after, #info-popup .ui-btn-icon-notext:after{
       content: 'X ';
   }
   #map .leaflet-control-zoom-aus:after {
       content: 'Zoom ';
       padding: .5em;
   }
   #map .leaflet-control-layers-toggle:after {
       content: 'Layer controls';
       padding: .5em;
   }
}
@media screen and (-ms-high-contrast: black-on-white) {
  .ui-btn-icon-notext, #map .leaflet-control-zoom-aus:after, #map .leaflet-control-layers-toggle {  border:1px solid #000 !important; color:#000;}
}
@media screen and (-ms-high-contrast: white-on-black) {
  .ui-btn-icon-notext, #map .leaflet-control-zoom-aus:after, #map .leaflet-control-layers-toggle {  border:1px solid #fff !important; color:#fff;}
}


@media(min-width:400px){.next-issue {display:inline}}
.issue-date:hover .nextIssue, .issue-date:active .nextIssue {display:inline}

/*
#search-info-popup-popup[style] {top:30px; bottom: 60px;}
@media (min-width: 1025px){#search-info-popup-popup {top:100px}}
*/
ul#autocomplete {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height:100px; /* set max- height on popup to container height 2em */
    max-height:200px !important;
    max-width:18em;
    margin:0 0 0 0.5em;
    padding:0;
    top:0;
    font-weight: normal;
}

ul#autocomplete li{margin:0}

.ui-controlgroup-horizontal h3 {display: inline-block; color: #000; font-size:1em; padding:0 1em;}
.ui-controlgroup-horizontal .ui-btn-inline, .ui-controlgroup-horizontal .ui-btn {margin:0 ;}


/* location search */
#search-info-popup {height: 200px;}
#location-search {position:relative; max-width:19em;} /* 17 for mobile - 3em++ for close button, margin */
#location-search .ui-body-c {border:none;}/*  padding-left: 4px; adjust theme */
#location-search .ui-controlgroup {margin: 0 4px;}/* redundant ? */

/* for archive links
#overview-summary ul, #overview-influences ul {margin-bottom: 3em;}
.ui-content .complementary {position:absolute; bottom: 0; background-color:#EDF3FF; padding:.2em; width:95%;}
*/
#summary-container .ui-content a { font-weight: normal;}
#search-info-control {
  background-color: white;
}

/* Make image in overview introduction always 100% */
#overview-introduction .image-responsive img {
    width: 100%
}

#search-info.ui-icon-search {

 font-size:15.5px;
  z-index:998;
}

#search-info-control #search-info.ui-icon-search:after {
  background-color:transparent;
  border-radius: inherit;
  opacity: 0.74;
}

#search-info-control #search-info.ui-icon-search:hover {
  background-color:#f4f4f4;
  border-color:#ccc;
  cursor: pointer;
}

#location-search .ui-input-search {margin-bottom: 0 !important;}
html #location-search .ui-filterable + .ui-listview {margin-top:0;}


.location-search-list .ui-btn {font-weight: normal !important;background-image:none !important ;} /* revise theme */
/*
.geo-icon-inactive {
    background-position: 0 0 !important;
    padding-left: 21px !important;
}
need svg
.geo-icon {
background: url("http://wdev.bom.gov.au/images/meteye/geo-icon-sprite.png") no-repeat scroll .4em .6em rgba(0, 0, 0, 0);
padding-left :24px;
}
 */
/* end search */

#section-menu {margin-top:0;}
/*
header blocks panel and content
.ui-header .ui-btn-left {margin-left:10px;}
div[data-role="header"] {min-height:44px; box-sizing:border-box; }
#content-wrapper .ui-header .ui-btn-left {margin-left:0;}
#content-wrapper .ui-header .ui-btn {font-size: 14px;}
*/
#nav-panel .ui-btn, #nav-panel label, #nav-panel div.ui-controlgroup-label {font-size: 14px;}

/* panel */

/* core.css sets 1em at 76%, so for largeView need to push panel to pixels - or increase the ems. */
.ui-panel {width: 272px; /*17em;*/}

#nav-panel { background-color:#215987;}
#nav-panel.ui-body-b {border-right:none; border-left-color:#003366; border-top-color:#003366; border-bottom: 1px solid #215987; border-left:none;}

.compact .ui-panel-inner { padding: 0 !important; margin:0 !important}
.compact .ui-controlgroup, .compact fieldset.ui-controlgroup, .compact .ui-collapsible-set, .compact .ui-collapsible-set .ui-collapsible {margin:0 !important;}
.compact .ui-collapsible-content {padding:0 !important;}

/* nested collaspsibles */
.compact .ui-collapsible-set .ui-collapsible .ui-collapsible{margin:0 1px;}
.compact .ui-collapsible-set .ui-collapsible .ui-collapsible-heading .ui-btn{font-weight:normal;}
.compact .ui-collapsible-set .ui-collapsible .ui-btn, .ui-collapsible-set .ui-collapsible .ui-collapsible .ui-btn {font-weight:normal; font-size:1em;}

.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {border-top:none;}
.compact .ui-collapsible .ui-collapsible .ui-collapsible-heading .ui-btn{font-weight:normal; border:1px solid #ffffff; border-bottom:none;}
/* end nested collaspsibles */

#nav-panel .ui-controlgroup-vertical .ui-controlgroup-controls {border-radius:0 !important;border-top:none;}
#nav-panel .ui-header h2.ui-title  {display:inline-block; font-weight:500 ; font-size:.9em; color:#CAE2F4 !important; padding:7px 5px 5px 5px;  margin:0 0 0 0px; vertical-align:top;}
#nav-panel .ui-header .ui-controlgroup-horizontal {display:inline-block; padding: 2px 0 0 2px;}

.ui-header a[data-rel="back"] {display:none;}
#nav-panel .ui-bar-b .ui-btn {background-color:transparent; font-weight:300;} /* rgba(0,0,0, .2) */
#nav-panel div[data-role="header"] div .ui-btn  {font-size:.9em;  font-weight:400; padding:5px }
#nav-panel div[data-role="header"] div .ui-select .ui-btn {padding-right:36px;}


#nav-panel .ui-controlgroup-horizontal .ui-controlgroup-controls {display:block;}

.ui-panel .line .ui-radio {width:232px; }
.ui-panel .line .ui-radio legend.ui-btn ,html .ui-panel .ui-body-c .ui-btn{border-right:none !important;}
.ui-panel .line .ui-radio a.ui-btn {width:40px; right:0;  display:table-cell; height:inherit; vertical-align:middle;}

.ui-panel  fieldset .ui-btn-icon-notext.ui-btn-right {top:0;right:0; border-left-color:#D5E9F7;border-bottom-color:#D5E9F7;}
.ui-panel fieldset .submenu .ui-btn-icon-notext.ui-btn-right { border-left-color:#EDF3FF; border-bottom-color:#EDF3FF; }
.ui-controlgroup-controls .ui-btn-icon-notext {width:11px;}
div.line {position: relative; background-color: #D5E9F7;}
.submenu div.line {background-color: #D5E9F7;}
div.line .ui-nodisc-icon.ui-btn:after, div.split .ui-nodisc-icon .ui-btn:after {background-color: rgba(0, 0, 0, 0.4);}

div.line.on .ui-nodisc-icon.ui-btn:after,div.split .ui-nodisc-icon .ui-btn:after {background-color: rgba(21, 111, 179, 0.3);}

.fit-3 div.ui-radio{width:33.3%;}
.fit-3 .ui-radio .ui-btn {text-align:center;}
.fit-1 div.ui-select {width:100%;}
.fit-1 select option{ padding: 0.4em 0 0.4em 2.4em;}
.fit-1 .ui-btn {text-align: left; padding-left:2.5em;}

/* panel submenu */
.submenu {display:none;}
.ui-radio .submenu-parent.ui-btn.ui-radio-on:after {
    background-color: rgba(0,0,0,0.2);
    border-style: none;
    border-width: 0px;
    height: 18px;
    width: 18px;
    /*border-color: none; {c-active-background-color}*/
    /* to do - png handling for ie */
    background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2212px%22%20height%3D%228px%22%20viewBox%3D%220%200%2012%208%22%20style%3D%22enable-background%3Anew%200%200%2012%208%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%226%2C0%200%2C6%202%2C8%206%2C4%2010%2C8%2012%2C6%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/* end panel */

/* popup */
div.tooltip {max-width:300px !important;}
.ui-popup a.ui-link, .ui-popup a[target="_blank"] { font-weight:normal;}

/* Popup headers */
.ui-bar-a h1,.ui-bar-a h2, .ui-bar-a h3, .ui-bar-a .ui-title {color: #FFF !important; font-size:1.2em}
.ui-header .ui-title {overflow: visible !important; white-space: normal !important;}
.ui-popup-container .ui-header .ui-title, .ui-footer .ui-title {margin: 0 auto;}

.popup-text { max-width:500px; }
.popup-text h1, .ui-popup .ui-title {font-size:1.3em; color:#999;}
.popup-text h2 {margin: 0; padding: .2em; color:#000;}
.popup-text h3 {margin: 0; padding: .2em; color:#000; font-size:1em;}
.popup-text ul { font-weight:bold; margin:.4em; list-style-image:none;}

/*#about-info-popup-popup {min-width:60%;}*/

/* default
.popup-content {
     min-width:auto;
     min-height:auto;
}
*/

@media (min-width: 1025px){
    .ui-popup-screen {
        /*
        ********************************************************************
        max-height: 612px;
        ********************************************************************
         need to be large view only*/
    }
}
/* end popups */

/* video
#video-container .description {display: none;}
#video-container div.video {margin: 0 -1em;}
*/
/* for 16:9 ratio */
/* generic 16:9 */
.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* specific */
#video-container {
    display: none;
    opacity: 0;
    height: 100%;
}

#video-container .alt-formats {
 display:block;
 width:auto;
 position:absolute;
 top: 1.2em;
 right: 1em;
}
#video-container .alt-formats a[target="_blank"] {background-image:none !important;}
#overview-video h2, #video-container h2 {margin-right: 6em;}

.popup-video {margin:0 -1em;}

.video-meta {padding: 0.2em; margin:0;}
.video-meta .description {display:none;}
.video-meta > .ui-controlgroup-horizontal {display:inline-block !important; width:auto;}

@media (max-width:320px){
#about-info-popup {min-width:200px; max-width: 280px;}
#extra-info-popup, #extra-info-popup .ui-grid-a {max-width: 14em !important; }
#extra-info-popup .ui-grid-a > div {float:none; display:block; max-width: none; text-align:center;}
}
@media (max-width:480px){
#about-info-popup {min-width:300px; max-width: 400px; }
}
@media (min-width:480px){.popup-video { max-width: none;} #about-info-popup {min-width:400px; max-width: none; }}
@media (min-width:768px){#about-info-popup {min-width:500px; max-width: 600px; }}
/***********************************************************************/
#about-info-popup .ui-content {max-height:500px; overflow-y:scroll;}
/***********************************************************************/
#about-info-popup-popup {min-width:14em; max-width: 500px !important;}
#about-info-popup-content .ui-collapsible-heading .ui-btn {font-weight:normal;}
#extra-info-popup .ui-grid-a .ui-btn { min-width:6em;}

figure     {text-align:center; border: 2px solid #fff; margin: 2px; padding: 2px; background-color: #fff; border-radius: 6px;}
figure img {display:block; margin: auto;}
figcaption {color: #333; font-style:italic; background-color: #efefef; padding:0.3em;}

#info-popup {max-width:600px;}
#info-popup-popup.ui-popup-container {margin-top: 0;}
#info-popup-popup h3 {color:#000; font-size: 1em; padding:0; margin:0;}

.complementary {margin-top:2em;}

/* end video */

/* footer */
#smallScreenFooter {text-align:center; }
#smallScreenFooter a {display: inline-block; font-size:.6em; color:#fff; text-decoration:none; font-weight: normal;padding:5px; margin:auto;}

/* Setting map dimensions ********************************************************************************************************** */

/* shuffle style position to breakpoints -   this is for reference only */
/* TODO: work out breakpoints for map heights? base on content - key widths for map - check size of bounds at 2 x zoom + legend tuck-away  */
/* for ref - from jqm css - min-heights
@media screen and (orientation: portrait) {
    .ui-mobile .ui-page {
        min-height: 420px;
    }
}
@media screen and (orientation: landscape) {
    .ui-mobile .ui-page {
        min-height: 300px;
    }
}

*/
@media (max-width: 1024px){
    /* .ui-page {overflow: "hidden";}*/
    body, #content-wrapper {overflow: hidden;}
}

/***********************************************************************/
/*
.ui-popupscreen.in {
    top:-48px !important; z-index:999
}
*/
/***********************************************************************/
/* heights/dimensions */
#content {margin:0; padding:0;}
#content-wrapper {position:relative;}

div.ui-page[style] {
   padding-top: 0 !important; /* remove for static external header */
}
/*.ui-page, .ui-panel-wrapper {height:100%;}*/
/* .ui-panel-wrapper {height:1px; min-height:100%;}test kludge */
/* #content-wrapper {overflow-y: hidden;}*/


/* cannot inherit (from parent min-height 100%) to do min-height 100% so needs to be set via js */
/* removed #mainContent as redundant check if ref'd by popups etc */
/* #mainContent {min-height: 100%; margin:0; position:relative; top:0; bottom:0; padding-bottom:42px;} needs pixels for small view */


/* landscape --- ui-panel-open -reset ui-page to minheight 100%  */

/* we seem to have a redundant container level */
#content-container {
    margin: 0;
    padding:0 0 0 0; /* 42px*/
    position:relative;
    min-height: 100%;
}
/*#summary-container {padding-bottom: 42px;}*/

#map-container[style] { padding-bottom: 0 !important;}
#video-container {}

#map-container {
    display: none;
    opacity: 0;
    height: 100%;
}

#timeline-container {
    width: 100%;
    /*
    overflow: scroll;
    overflow: auto; -webkit-overflow-scrolling: touch;
    */
}

#map {
  background-color: #ffffff;  /* ocean blue */
  /* background-color: #C3DEF9; */ /* ocean blue */
  position: relative;
  width: 100%;
  height: 564px;
}

/* Possible work-around for issue on some Android browsers where map
   tiles don't line up after clicking on a control.

   Source: https://github.com/Leaflet/Leaflet/issues/161
   Side effect: sometimes there is spacing between tiles
*/
.android * img.leaflet-tile {
    outline: 1px solid transparent;
}

/* avoid overlapping attribution control with layer control */
.leaflet-control-attribution.leaflet-control { margin-left: 64px }

/* toDO: review with height breakpoints */
.leaflet-control-legend {max-height:206px;} /*height:auto; width:auto;needs pixels - and the contained img*/
.leaflet-control-legend img.legend {display:block; /*height:100%;*/ width:100%; -ms-interpolation-mode: bicubic;}

@media (min-height:480px ){
    .leaflet-control-legend {max-height: 247px;}
}

@media (min-height: 560px){
    .leaflet-control-legend {max-height: 280px;}
}

@media (min-height: 600px){
.leaflet-control-attribution.leaflet-control { visibility:visible !important;}
.leaflet-control-legend {max-height:350px; height:auto; }
}
.ui-popup-screen[style] {height: 100% !important;} /* inheriting full height - ie. inc. fixed header height */
/*.ui-popup-container[style] { top: 20px !important; }*/
#about-info-popup-popup[style], #extra-info-popup-popup[style], #search-info-popup-popup[style] { top: 30px !important; }  #info-popup-popup[style] { top: 30px !important; }
/* #location-info-popup-popup *//* popup content = too long for small views so centres off-screen */

@media (min-width: 0px){
    .leaflet-control-legend {max-width: 80%;}
}
@media (min-width: 560px){
    .leaflet-control-legend {max-width: 510px;}
}

@media (min-width: 1025px){
    .leaflet-control-legend {max-height:350px; height:auto; }
    #lvContentContainer {position:relative; margin:0; } /* should correctly inherit up and down */
    #lvContentContainer .ui-popup-screen {height:100%;} /* test ! */

    .ui-page[style] {
        padding-bottom:0 !important; /* small footer hidden so padding not needed */
        min-height: 564px !important; /*600 */
        /* height: auto !important;*/
    }
    /*
    .ui-page[style] #map-container[style]{
        max-height: 600px !important;
    }
    */
    #lvContentContainer .ui-responsive-panel[style] {

    }/* #content-wrapper,  */
    /*.ui-panel-wrapper  {min-height:auto;} header*/

#lvContentContainer #content-container {min-height:564px; padding-bottom:0; /*height:auto; */}
#lvContentContainer #content-container[style] {min-height:564px !important;  padding-bottom:0 !important; /*height: auto !important;*/}

#lvContentContainer .ui-popup-screen {}
#lvContentContainer .ui-popup-container[style] { top: 30px !important; }
}
/* end key dimensions */


/* placeholder */
.summary {
    display:none;
    opacity: 0;
}

/* Leaflet Layer Control */
.leaflet-control-layers-toggle {
    height: 30px;
    width: 30px;
    background-size: 22px auto;
}

/* Prevent zoom controls to overlay the left menu on small screen */
.leaflet-top, .leaflet-bottom {
    z-index: auto !important;
}

#splash-screen {position:fixed; width: 100%; height: 100%; min-height: 300px; z-index: 9999; background-color: #fff; display: table-cell; text-align: center; vertical-align: middle;padding-top: 50px; left: 0px;}
#splash-screen > div {border-radius: 12px; max-width:210px; margin: 40px auto; box-shadow:0 0 4px 3px #999; background-color:#215987;}
#splash-screen > div div {padding: 0.5em;}
#splash-screen > div div:first-child {border-radius:12px 12px 0 0;}
#splash-screen h2 {text-align:center; margin-bottom:0 !important; color:#fff; font-size:1.4em;}
#splash-screen > div div:last-child { background-color: #5397CD; text-align: center;  border-radius: 0 0 12px 12px;}
#splash-screen div h3 {text-align: center; color:#fff; padding-top:0;}

.hidden {display:none !important;}
.warning { color: #fff; background-color: #C00; border: solid 6px #000000;padding: 10px; margin-bottom: 15px; font-size: 1.1em; height:auto; }
.warning a {color:#fff !important; border-bottom:1px dotted #000; text-decoration:none;}
.transparent {opacity: 0;}

/* During the week of the presentation of our prototype, a site announcement
 * is placed on the website.
 * We remove this for now.
 * TODO: take this out of the CSS once we go live
 */
#site-announcement {display: none;}

/* thumbnails */
/* scrollable images - temp - may have more than 5
.ui-grid-d h4 {font-size: .9em; color: #000; font-weight:500; padding: 3px;}
.thumbnails p {font-size: .9em; font-weight: normal;}*/
.thumbnails {max-height:225px;}
.thumbnails img{height:auto; max-height:175px;}


/** THIS SHOULD BE IN THE THEME */
a.thumbnail-btn {
    background-color: #C6DBEF!important; /* ocean blue */
    display: block;
    margin: 2px!important;
    padding: 0;
}
a.thumbnail-btn:hover {border-color: #000;}

a.thumbnail-btn b {display: block;}
/* heading markup for blocks with limited text forbidden by VA */
a.thumbnail-btn h4, a.thumbnail-btn b {
    text-align: center;
    margin:1px;
    color: #215987 ;
    background-color: #EDF3FF;
    border-radius: 4px 4px 0 0;
    font-weight:600;
    overflow: hidden;text-overflow:ellipsis; white-space:nowrap;
}


a.thumbnail-btn:hover h4, a.thumbnail-btn:hover b {
    background-color: #D5E9F7;
}
a.thumbnail-btn h4.selected, a.thumbnail-btn b.selected {
    color: #000;
    font-weight: 700;
    background-color: #9CF;
}

div.summary a.thumbnail-btn h4, ul.summary a.thumbnail-btn b {
    padding: 10px 3px;
}
.ui-content .summary ul { padding:0;list-style:none; list-style-image:none; list-style-type:none; list-style-position:outside; margin:0;}
.ui-content .summary li {margin:0;  padding:0 0 0 18px; line-height: 1.6em; background: url(images/symbols/bullet-blue.png) 0 .3em no-repeat scroll;}
.ui-content .summary li li {margin:0;  padding:0 0 0 18px; line-height: 1.6em; background: url(images/symbols/bullet-sub-blue.png) 0 .3em no-repeat scroll;}

ul#timeline,  .ui-content .summary ul.thumbnails, #timeline-container ul { list-style-position:inside; margin:0; }
.ui-content .summary ul.thumbnails li{ list-style:none; list-style-image:none !important; margin-left: 0; background-image:none; padding-left:0; padding-bottom:0; list-style-position:inside;}


div.scroll a.thumbnail-btn h4, ul.thumbnails a.thumbnail-btn b {
    padding: 6px 3px;
    margin: 1px;
    font-weight: 500;
}
/* make thumbnails images fit */
.thumbnails img {
    max-width: 90%;
}

/* video thumbnail cell */
/* #overview-summary ul.thumbnails li:last-child img{padding: 3.5%; } */

/* end thumbnails */


/* Map popup and Modal popup styles */
/* overide leaflet button in large view */
/*
.leaflet-container a.leaflet-popup-close-button {
    background: none repeat scroll 0 0 transparent;
    color: #c3c3c3;
    font: bold 16px/14px Tahoma,Verdana,sans-serif;
    height: 14px;
    padding: 4px 4px 0 0;
    position: absolute;
    right: -20px;
    top: -20px;
    margin-right:-10px;
    margin-top:-10px;
    border: 3px solid #ccc;
    text-align: center;
    text-decoration: none;
    width: 18px;
    font-size:16px;
    font-weight:bold;
    border-radius: 1em;
}
*/

#modal-popup-content { margin: 13px 19px; min-width: 255px;}
/*#exceed-chart { margin-left: 2px; height: 150px;} */
div[id^="exceed-chart"] { margin-left: 2px; height: 150px;}
div[id^="sdl-chart"] { margin-left: 2px; height: 150px;}
.leaflet-popup { min-width: 230px; }
.leaflet-popup-content { overflow: auto; max-height: 300px;}

table.popup-data { width: 100%;/* border-radius: 5px;*/ padding: 4px;  margin: 0 0 2px 0; background: #333; border-collapse:collapse; border: none;}
table.popup-data td {padding:5px; vertical-align: text-bottom; line-height:1.1em;}
table.popup-data td.title { padding-right: 10px; color: #fff; font-weight:300; text-shadow:none; font-size:0.9em; }
table.popup-data td.value { text-align: left; color: #fff; font-size:1em;}
table.popup-data td.value span.num { color: #ccc; font-size: 0.8em; display:none;}
table.popup-data td.valueright { text-align: right; color: #fff; font-size:1em;}
table.popup-data td.valueright span.num { color: #ccc; font-size: 0.8em; display:none;}

table.popup-data a {
    text-shadow: initial;
    color: white;
    text-decoration: unset;
}

table.popup-data a:hover, table.popup-data a:visited, table.popup-data a:focus {
    color: white;
}

table.popup-data a:hover {
    text-decoration: underline;
}

table.popup-data a[target="_blank"]:focus::after, table.popup-data a[target="_blank"]:focus::after {
    content: '';
}

table.popup-data tr.divider {
    background-color:white;
    height:10px;
}

table.tg  {
border-collapse:collapse;
border-spacing:0;
}
table.tg td{
font-family:Arial, sans-serif;
font-size:14px;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
table.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
table.tg .tg-3z14{
background-color:#f1e60d;
vertical-align:top
}
table.tg .tg-1wza{
background-color:#f49739;
vertical-align:top
}
table.tg .tg-9hbo{
font-weight:bold;
vertical-align:top
}
table.tg .tg-yw4l{
vertical-align:top
}
table.tg .tg-4atf{
background-color:#3c61aa;
vertical-align:top
}
table.tg .tg-z5mp{
background-color:#cc1417;
vertical-align:top
}

/* diagnostic only
.ui-hidden-accessible *:focus {
    clip: rect(1px, 1px, 1px, 1px);
    height: auto;
    overflow: hidden;
    position: relative !important;
    width: auto;
    left:17em;
    border:2px solid #900;
}
*/

@media(max-width: 1024px){
    table.popup-data td.value span.num {display:none;}
}
@media (min-width:1025px){
    table.popup-data td.title {font-size:1em }
    table.popup-data td.value { font-size:1.1em;}
}
h2.popup-title { font-size: 12px; color: #444; padding: 0;}
/* TODO: background colour should be set using ui-body from theme */
h3.popup-subtitle {  /*width: 100%;border-radius: 5px; */ padding: 5px 0; margin: 5px 0 0 0; line-height: 1.3em; color: #fff; background-color: #5397CD; text-shadow: 1px 1px #000; font-weight:500; }
h3.popup-subtitle span { padding-left: 5px; }/**/

/* Font Awesome icons for spinner marker */
i.fa {
    font-size: 16px;
}

i.fa-spin {
    cursor: progress;
    margin-top: 11px;
    font-size: 14px;
}

/* Legend colours, to be used for emphasis in popups, tables etc.*/
.value-highlight { border-radius: 4px; padding: 1px 1px; width: 100%; background-color: #333; color: #FFF;}

/* content header close button */
@media (max-width:319px){
    .thumbnails { font-size: .6em;}

}
@media (min-width:320px){
    .ui-panel-page-content-open #nav-panel-close {display:none !important;}/**/
   .thumbnails { font-size: .7em;}

}
@media (min-width: 400px){
    .thumbnails  { font-size: .8em;}
}
@media (min-width: 500px){
    .thumbnails  { font-size: 1em;}
}

/* end change */
/* TODO - check portratit/landscape support - add as conditionals is broadly supported  */
@media (max-width:420px){
    #smallScreenFooter div.ui-grid-b div{width:100%; text-align:center;}
    #smallScreenFooter div.ui-grid-b div.ui-block-a, #smallScreenFooter div.ui-grid-b div.ui-block-c {display:none;}
}

/* breakpoint for timeseries images to scroll */
@media (max-width:561px){
    #app-title { font-size: .8em;}
    /*.thumbnails.ui-responsive .ui-grid-b  .ui-block-a, .thumbnails.ui-responsive  .ui-grid-b > .ui-block-b,.thumbnails.ui-responsive  .ui-grid-b  > .ui-block-c { float: left; width: 33.3% }*/
    .ui-grid-b  .ui-block-a,  .ui-grid-b  .ui-block-b, .ui-grid-b  .ui-block-c { float: left; width: 33.3% }
    .ui-grid-a .ui-block-a , .ui-grid-a .ui-block-b {float:left; width:50%;}
}

@media (min-width:600px){
    .video-meta span {display:none;} /* make more generic. hide description */
    /*.legend {max-height: 375px; }*/
    .thumbnails  { font-size: 1em;}
}

@media (min-width:769px){

/* ui-panel-animate  ui-panel-page-content-display-push ui-panel-wrapper ui-header ui-bar-b ui-header-fixed slidedown */
/* works for footer only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {margin-right: 17em;}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {margin-left: 17em;}
.ui-panel-page-content-open.ui-panel-page-content-display-push {width: auto;}
.ui-panel-dismiss-display-push {display: none;}


}

/*@media (max-width:1024px){*/
@media (max-width:1024px){

#video-container .description {display: none;}  display in largeview query
/*
#video-container div.video {margin: 0 -1em;}
*/
    body {margin:0; padding:0; font-size:100%;}

    #nav-panel.ui-body-b {background-color:#215987; border-right: 1px solid #215987;}
    #nav-panel { background:#215987 url(../images/bom-logo-theme-b-stacked.png) no-repeat bottom;}

    #content-header h1 {font-size: 1em; font-weight:500; margin:0 40px 0 40px;padding:6px;}
    h2, h3 {font-size: 1em; font-weight:700;}

    p.copyright {font-size:.7em; text-align:center;}
    p.copyright a{ font-weight:normal; text-decoration:none; }
    p.copyright a:hover, p.copyright a:active {color: #ffffff;}

    #smallScreenFooter {display:block;}
}


@media (min-width: 1025px){
    #summary-container {padding-bottom: 0.2em;}
    #extra-info {display:none !important;}
    #lvOptions {margin:-5.6em 0 5px 560px; padding:0; border:none !important; background-color:none !important; text-align:right; width:auto;}
    #lvOptions div {display:inline-block; text-align:right; width:auto;}
    #lvOptions div div { display:inline-block !important; width:auto !important; clear:none;  padding:0;}
    #lvOptions div div a{ font-weight:normal !important; font-size:12px !important; line-height:1em; padding-top:12px; padding-bottom:12px; border-radius:6px !important; }
    #lvOptions div div a[target="_blank"]:focus::after {content: ''}
    #lvOptions a[target="_blank"] { background-image:none;}

    #content-container { font-size:1.2em;}
    #summary-container h2, #video-container h2{ font-size:1.6em; padding-bottom: 1em; font-weight:300;}

    #about-info-popup-popup {width:600px;}

    #panel-title {display:none;}
    #nav-panel .ui-header h1.ui-title  {display:none; }
    .thumbnails p {font-size: 1.1em; font-weight: normal;}
    /* content,  map, video heights */
    #video-container .description{ display:none;}/* not enough information value, yet */
    #video-container div.video {margin: 0 ;}

    #nav-panel.ui-body-b {border-right:none !important; box-sizing:border-box; width:273px;}
    .ui-panel-open.ui-panel-position-left.ui-panel-display-push {border-right:none !important; box-sizing:border-box;}
    #nav-panel.ui-body-b .ui-panel-inner {border-right: 1px solid #215987 !important;}
    #nav-panel.ui-body-b .ui-header{margin-top: -1px}

    body {font-size:76%;} /* to help transistion during core.css load */

    h1.largeviewTitle {margin: 10px 0 0 5px; font-size:20px; padding:5px; }
    h2#app-title.ui-title {font-size:1.2em;margin:0 40px 0 40px; padding:10px 0 0 0; font-weight:500;}
    .ui-panel-page-content-position-left h2#app-title.ui-title { margin-left:10px; }


    #columns > #breadcrumb  {margin:0 ; padding:.4em; font-size:11px; height:16px;}
    ul#breadcrumb {
    padding:0;margin:0; width:100%;
    background-color:#efefef;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#fff));
    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);
        }
    #breadcrumb li {display:block; width:auto; float:left;padding-left:14px; background: url(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;}

    .ui-panel-page-content-open #nav-panel-close {display:none !important;}

    #nav-panel div[data-role="header"] h1 {display:none;}

    #nav-panel div[data-role="header"] div .ui-btn {display:none !important;}

    #smallScreenFooter {display:none !important;}


    /* replace all 17em widths with 272px as bom font/ems smaller*/
    /* Panel positioning (for overlay and push) */
    /* Panel left closed */
    .ui-panel-position-left {left: -272px;}
    /* Panel left closed animated */
    .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
    .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
        left: 0;
        -webkit-transform: translate3d(-272px,0,0);
        -moz-transform: translate3d(-272px,0,0);
        transform: translate3d(-272px,0,0);
    }
    /* Panel left open */
    .ui-panel-position-left.ui-panel-display-reveal, /* Unset "panel left closed" for reveal */
    .ui-panel-open.ui-panel-position-left {
        left: 0;
    }
    /* Panel left open animated */
    .ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay,
    .ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-push {

        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -moz-transform: none;
    }
    /* Panel right closed */
    .ui-panel-position-right {
        right: -272px;
    }
    /* Panel right closed animated */
    .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
    .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
        right: 0;
        -webkit-transform: translate3d(272px,0,0);
        -moz-transform: translate3d(272px,0,0);
        transform: translate3d(272px,0,0);
    }
    /* Panel right open */
    .ui-panel-position-right.ui-panel-display-reveal, /* Unset "panel right closed" for reveal */
    .ui-panel-position-right.ui-panel-open {
        right: 0;
    }
    /* Panel right open animated */
    .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay,
    .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -moz-transform: none;
    }
    /* Wrapper and fixed toolbars positioning (for reveal and push) */
    /* Panel left open */
    .ui-panel-page-content-position-left {
        left: 272px;
        right: -272px;
    }
    /* Panel left open animated */
    .ui-panel-animate.ui-panel-page-content-position-left {
        left: 0;
        right: 0;
        -webkit-transform: translate3d(272px,0,0);
        -moz-transform: translate3d(272px,0,0);
        transform: translate3d(272px,0,0);
    }
    /* Panel right open */
    .ui-panel-page-content-position-right {
        left: -272px;
        right: 272px;
    }
    /* Panel right open animated */
    .ui-panel-animate.ui-panel-page-content-position-right {
        left: 0;
        right: 0;
        -webkit-transform: translate3d(-272px,0,0);
        -moz-transform: translate3d(-272px,0,0);
        transform: translate3d(-272px,0,0);
    }
    /* Dismiss model open */
    .ui-panel-dismiss-open.ui-panel-dismiss-position-left {
        left: 272px;
    }
    .ui-panel-dismiss-open.ui-panel-dismiss-position-right {
        right: 272px;
    }

    .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left {
        margin-right: 272px;
    }
    .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
        margin-left: 272px;
    }
}

/* test tab key focus for screenreader conent for non-screenreader users */
.ui-hidden-accessible.focus-highlight:focus {
    clip: auto;
    height:auto;
    width: inherit;
    max-width: 90%;

    overflow:visible;
    outline:2px solid #33CCFF;
    background-color: #fff;
    padding: 10px;
    z-index:99999999999;
    left: 1em;
    top: 1em;
}
.ui-hidden-accessible.focus-highlight:focus h2, .ui-hidden-accessible.focus-highlight:focus p {
    margin-left:1em;
}

/*
* basic print styles,
*    hide navigation, & control buttons,
*    resize main content,
*    adjust padding to allow for hidden buttons,
*    adjust borders, colour for items with bg
*/
@media print {
	#nav-panel, #lvOptions, #extra-info, #search-info, #app-meta, nav-panel-close, .leaflet-left { display: none; }
	#content-header { border: none; position: relative; margin-bottom:6em;}
	#app-title { font-size:1.6em !important; color:#000  !important; line-height: 2em; }
	.thumbnails  a {box-shadow:none; border-radius:0; border: none; }
	.thumbnails {margin: 5px !important; border: 1px dotted #ccc;}
	.thumbnails  a b {font-size:1.1em; }
	.ui-content .summary li {padding-left: 0;}
	.ui-content {padding: 5px;}
	.ui-content h2 {font-size: 1.2em !important;}
	.ui-hidden-accessible {display:none !important; }
	#map {margin: 5px !important;}
	/* test only! hidden space in GROWS page - if this line is not used it should be removed */
	#issuedate {display: none !important;}
	/*  ******************************** */

	#content-wrapper {
		position:relative;
		margin:0;
		padding:0;
		width: auto;
		height:auto;
		min-height:auto;
		max-height:auto;
		left:0 !important;
		transform: none;
		overflow-x: visible;
	}
	div.ui-page[style] , .ui-mobile .ui-page-active {
		position: relative;
		height:auto;
		min-height:auto;
		max-height:auto;
		padding:0;
		margin:0;
		left:0 !important;
		transform: none;
		max-width: 1007px; /* IE */
		overflow-x: visible;
	}
	.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push,
	.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left{
		position:relative;
		margin:0 !important;
		height:auto;
		min-height:auto;
		max-height:auto;
		left: -272px;/* webkit*/
		transform: translate3d(272px, 0px, 0px); /* other browsers */
		overflow-x: visible;
		right:0;
	}

}