@import url('video.css');
@import url('/climate/styles/ui.css'); /* a few jquery ui style overrides */
@import url('/climate/styles/menu.css');

/* prevent irritating bom scroll change*/
#pageheight {margin-bottom:1px;}

#cc, .cc { color: #666; width:100%; box-sizing:border-box; padding:10px; font-size:0.8em; margin-top: 2em;}
#cc a, .cc a { text-decoration:none !important;}
#cc img, .cc img {opacity:0.6 ;margin-bottom: 2px; }

/* climate  shared styles for updated interface */
#breadcrumb {margin:0 0 1em -.8em; padding:.4em;font-size:.9em; height:1.2em;}
#breadcrumb ul {padding:0;margin:0; width:100%;background-color:#efefef}
#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;}

ul, ol {padding: 0 .2em .6em .2em; margin:0 0 0 1.4em;}
p {padding: 0 .2em .6em .2em; /*margin:0;*/}

ul ul {padding-bottom:0;margin-bottom:0;}
h2, h3, h4 {padding:1em .2em .1em .2em; /*margin: 0; */}
h1 {padding-bottom:.6em;}


#left-column img {display:block;}
@media print{
h1 {padding-left:.2em;}
#left-column img {display:none;} #pageheight div.two-column , #pageheight div.two-column div#content {width:99%; min-width:99%;}
.block-75 img, .block-60 img, .block-50 img, .block-40 img, .block-33 img, .block-25 img {max-width:99% !important;}
}

/* jquery ui runs interference on core css  -  UI cascade override */
.ui-tabs .ui-tabs-panel {font-size: 1em; font-family:Arial, Helvetica, sans-serif; padding:1em .4em .4em .4em; margin:0; }
.ui-widget-content { font-family:Arial, Helvetica, sans-serif;}

.ui-tabs-panel h1 {margin:4px 0 8px 0; clear:both;}
.ui-tabs-panel h2, .ui-tabs-panel h3 {clear:both; padding-bottom:3px;color:#000;}
.ui-tabs-panel h2{font-size:1.2em; border-bottom:1px dotted #ccc; margin-bottom:.2em;}
.ui-tabs-panel h3, .ui-tabs-panel div.block-33 h2 {font-size:1em;}
.ui-tabs-panel p  {padding-top:0; margin-top:0; padding-bottom:1em; margin-bottom:0; line-height:1.4em;}

/* override ui theme */
.ui-tabs-panel a {color: #069;}
.ui-tabs-panel a:hover {color: #F60;}
/* these need to be in the theme */
.ui-tabs-nav a {font-weight: bold; color: #666;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color: #666;}
.ui-state-default a:hover {color: #000;}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited, .ui-state-active a:hover {color: #000;}

.ui-tabs-panel ul, .ui-tabs-panel ol {margin:0 0 0 1.4em;padding :0 .2em .6em .2em;}
.ui-tabs-panel li {margin-left:0;padding-left:0;line-height:1.6em;}
.ui-tabs-panel .page-menu p {padding-bottom:0;margin-bottom:0;}

.tabs h2 a:link, .tabs h3 a:link, .tabs h2 a:visited,.tabs h3 a:visited {color:#000; text-decoration:none; background:url(/climate/images/symbols/arrow-go-to.png) no-repeat left; padding-left:14px;}
.tabs h2 a:hover,.tabs h3 a:hover {text-decoration: underline;}
@media print{.tabs h2 a:link,.tabs h2 a:visited  {padding-left:0;}}

@media print{
    .ui-tabs-nav { display: none; }
    .ui-tabs, .ui-widget, .ui-widget-content  {border:none; background-image:none;}
    .ui-tabs .ui-tabs-hide { display: block !important; }
    .ui-tabs .ui-tabs-panel {display: block !important; page-break-after:always;}
    .tabs-nested.ui-tabs.ui-tabs-panel {display: block !important; page-break-after:avoid;} /* prevent empty page after nested tabs */
    div.ui-tabs div.ui-tabs-panel {min-height:auto; height:auto;}
}
/*
TODO revise to flex
*/
.block-75  {width:74.4%; float:left;}
.block-66  {width:65%; float:left;}
.block-60  {width:59%;float:left;}
.block-50, .blockfifty  {width:49%; float:left;} /*.blockfifty for cmslite - removes numbers */

.block-40  {width:39%; float: left;}
.block-33  {width:32.4%;float:left;}
.block-25  {width:24.4%;float:left;}
.block-75 p, .block-66 p, .block-50 p, .block-75 h2, .block-66 h2, .block-50 h2, .block-75 h3,  .block-66 h3, .block-75 ul, .block-66 ul, .block-50 ul  {padding-left:.4em;margin-left:0}
.block-75 ul, .block-66 ul, .block-50 ul {padding-left:1.6em;}
.block-40 .box-grey h2 {font-size:1em;}
.margin-top {margin-top:1em;}
.float-right{float:right;}
.float-left{float:left; }

.flex {display: flex;}


/* for jqUI dialog image popups */
#popupImage { max-width: 100%; height:auto;}

@media print {
    img {
        max-width:100%;
        page-break-before: auto;
        page-break-after: auto;
        page-break-inside: avoid !important;
    }
    .print-none, .print-no {display:none;}
    .print-block-100{width:100% !important}
    a.pdf {padding-left:0;}
}

div.image-overlay {position:relative; padding:0; margin:0; background-color:#fff; border:1px solid #ccc;width:250px;}
.block-50 div.image-overlay {width:370px;}
.block-40 div.image-overlay {width:270px;}
.block-33 div.image-overlay {width:250px;}
.block-25 div.image-overlay {width:184px;}
@media print{div.image-overlay  {width:auto;}}
#tabs div.image-overlay  img, #tabs div.image-overlay  a{padding:0; margin:0; border:none;display:block;}
#tabs div.image-overlay h2 {position:absolute; width:100%;  z-index:99; bottom:0; font-size:1em; padding:.5em 0 .5em 0;  margin:0; color:#000 ; background-image:url(/climate/images/interface/transparent-tint-70.png); background-repeat:repeat;}

.tabs div.image-overlay h2 a{padding-left:14px !important;}
.tabs div.image-overlay h2 a:link, .tabs .image-overlay h2 a:visited {color:#000;}
.tabs .image-overlay h2 a:hover, .tabs .image-overlay h2 a:focus {color: #000;}


.item {border-bottom: 1px dotted #ccc; margin-bottom:.6em;}
.item p {margin-bottom:0}


li.email, li.video, li.feedback {margin-left:-20px; line-height:1.8em; list-style-image:none; background:url(/climate/images/symbols/bullet.gif) no-repeat left; padding-left:20px; }
li.email  {background-image:url(/climate/images/symbols/email.png); }
li.video {background-image:url(/climate/images/symbols/play-round.png);}
li.feedback {background-image:url(/climate/images/symbols/comments.png);}
li.email a, li.video a, li.feedback a {text-decoration:none;}

a.email, a.video, a.feedback {padding-left:20px; background:url(/climate/images/symbols/bullet.gif) no-repeat left;}
a.email {background-image:url(/climate/images/symbols/email.png);}
a.video {background-image:url(/climate/images/symbols/play-round.png); }
a.feedback {background-image:url(/climate/images/symbols/comments.png);}


/* review for redundancy
.box-grey {border:2px solid #ccc; padding:.4em; margin:.2em;background:#f5f5f5 url(/climate/images/interface/gradient-grey-down.png) top repeat-x;}
.box-grey h2, .box-grey h3, .box-grey p {margin:0;  padding:0 0 0 0; color:#000;}
.box-grey p,  .box-grey ul{padding-bottom:.8em;}
.bg-white {background-color:#fff;}
 */

/* faqs*/
/*#faqs h2, */
.strip {color: #000; background:  url(/climate/images/interface/gradient-grey-down.png) top repeat-x; }
.faqs h2, #faqs h2 {padding:.4em .2em .4em .2em; margin:1em 0 0 0; border-bottom:none;}
.faqs dl, #faqs dl {margin:.4em 0; padding-top: .4em;}
.faqs dt, #faqs dt{font-size:1em;margin:0;  padding:6px 2px 6px 20px; background:#fff url(/climate/images/symbols/plus.gif) no-repeat 2px 6px; border-top:#ccc dotted 1px; font-weight:normal; color:#000;}

.faqs dd, #faqs dd {
    padding:6px 6px 6px 20px; margin-bottom:1em;
    background:linear-gradient(to top, #efefef, #ffffff);
}
.faqs dt:hover, #faqs dt:hover {background-color:#efefef;}

.faqs dt.opened, #faqs dt.opened {color:#000; font-weight:bold; background:#efefef url(/climate/images/symbols/minus.gif) no-repeat 2px 6px !important;}

a.button {text-decoration:none; padding:3px;display:block; background-color:#f3f4ef; border:1px solid #ccc; text-align:center;border-radius:6px;}
a.button:hover{background-color:#fff; }


@media print{
a.button{display:none; }
#faq dd {position:relative; top:0;display:block;}
}
/* end faqs */
.expandee  {display:none; }
li:hover.expander  {text-decoration:underline;}
@media screen{.expander {padding:4px 2px 4px 20px; background:url(/climate/images/symbols/plus.gif) no-repeat 4px 6px;}}
@media print{.expander {display:none;}}
.opened   {background-image:url(/climate/images/symbols/minus.gif) !important;}

.nospace-bottom {padding-bottom:0;margin-bottom:0; }

.hidden {display:none;}
table.table-text {clear:both;}
table.table-text th {vertical-align:middle;}


/*.news is for rss like summary listings. Images - small- 50px, may be linked, needs to be generalised*/
div.news  div {margin-left:0;}
div.news  div div {margin-left:62px;}/* float image but keep margin aligned for text */
div.news img {margin:1px 4px 4px 1px; padding:1px; border: 1px solid #ccc; float:left;}
div.news a img{border:1px solid #ccc; margin:1px 4px 4px 1px; padding:1px;}
div.news a img:hover {border: 1px solid #000;}
div.news .expandee div, div.news .expandee p {margin-left:0; }
div.news h2 {font-size:1em;padding-top:.6em; clear:both; }

div.tabs p + ul{padding-bottom:0;margin-top:-1em;}
div.tabs p + ul + p {margin-top:1em;}
/* also in cdo.css */
a.pdf {background-image: url(/climate/images/symbols/icon_pdf.gif); background-position:1px .3em; padding-left:14px;}

.access-info {position:absolute; left:-99999px}

a.imageOpener img {border:1px solid #ccc;margin:1px 1px 0 1px;padding:1px;}
a.imageOpener img:hover {border-color:#000;}

/* review for redundancy */
.pop-html:hover, .pop-html:focus, .imageOpener:hover, .imageOpener:focus {cursor: url(/climate/images/interface/cursor-popup.png),url(/climate/images/interface/cursor-popup.cur),default !important; border-color:#ccc;}
/*.pop-html, .imageOpener{ background: url(/climate/images/symbols/icon-popup.png) right no-repeat; padding-right:14px;}*/

/* need generic name */
#trackercontainer, #mapContainer, .iframeContainer {overflow:hidden;}

#clip{margin-left:-200px; margin-top:-9.4em;}
@media print{#clip{margin-left:0px; margin-top:-5.8em !important; margin-bottom:-6.8em; }}


div.feature li {clear:left;}
ul.horizontal {padding:0; margin:0 0 0 -4px; width:100%;}
ul.horizontal li{display:block; clear:none; width:auto; float:left;  padding:0 3px 0 12px;  background: url(/images/ui/symbols/bullet-sub.gif) no-repeat 0 3px; }
a.external { background: url(/ol/img/external-ol.gif) right center no-repeat; padding-right: 12px;}


/* added 24/09/2012 */
caption {font-weight:normal; background-color:#fff; border:none; color:#000; overflow:visible;caption-side: top; }
caption p{padding:.2em; margin:0;}
/* add inline html align for ie support */
caption.align-bottom {caption-side: bottom; font-weight:normal; background-color:#f5f5f5; border:none; color:#666; overflow:visible; text-align:center;}

/* for short definitions - preferably glossary items. They can be displayed via 'pop-up'*/
a:hover.definition {cursor:help; }
.definitionDisplay {width:300px;}


/* linear grey, start side */
.gradient-left { background:linear-gradient(to right, #efefef, #ffffff);}
.gradient-top {background: linear-gradient(to bottom, #efefef, #ffffff);}
.gradient-bottom {background: linear-gradient(to top, #efefef, #ffffff);}
.gradient-diag-top {background: linear-gradient(135deg, #ffffff, #efefef);}

/* review for redundancy */
.border-shadow {padding:1px; background-color:#ffffff; border:1px solid #cccccc; box-shadow: 0 0 4px 1px #cccccc;}

.p-id, .date-modified {color: #666;}

.box-notice { border: 4px solid #efefef;padding:.5em; margin:1em 0;}
.box-notice.alert , .box-alert { border: 4px solid #E8A08B; background-color: #EDCABE; padding:.4em; margin:1em 0; color: #000;}
.box-notice.alert h2, .box-alert h2 {color: #9c2903; padding:0.5em 0; margin: 0; border-bottom:none;}
.box-notice.alert  h3, .box-alert h3 {color: #000; }

/* kludge hide alert in outlooks_cms */
#submit_buttons + .box-notice.alert {display:none;}


div.new {background:url(/climate/images/interface/new.png) no-repeat top right;}
div.new h2 {font-size:1em;}


.ui-tooltip, .arrow:after {
background: #666;
border: 2px solid #fff;
}
.ui-tooltip {
padding: 5px 10px;
color: #fff;
border-radius: 20px;
font-weight: bold;
box-shadow: 0 0 7px #666;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px #666;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}



.box-image {margin:10px 0 1em 0; text-align:center;}
.box-image img{margin:auto; display:block;}
.box-image p{color:#666;  background-color:#f5f5f5; padding:3px !important;}

sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }

/* buttons at top of page per climate outlooks */
#lvOptions {
    position:absolute; top: 1em; right: 0.2em;
    padding: 0;
    text-align: right;
    width: auto;
    max-width:50%;
    min-height: 3em;
}
#lvOptions div div {
    clear: none;
    display: inline-block !important;
    padding: 0;
    width: auto !important;
}
#lvOptions div {
    display: inline-block;
    text-align: right;
    width: auto;
}


/* replace with */
.subscribe a {background-color:#F0EEEB; /* box-shadow:0 0 2px #ccc; border:1px solid #ccc;*/ border-radius:4px; padding:10px 10px 10px 24px; text-align:center; text-decoration:none;}
.subscribe a:hover {background-color: #f8f8f8;  box-shadow:0 0 4px #999;}
.subscribe a:active, .subscribe a:focus {background-color:#f9f9f9;}
.icon-mail-grey {background: transparent url(/climate/images/symbols/icon-md-mail-grey.png) no-repeat 5px 50%;}
.icon-calendar-grey {background: transparent url(/climate/images/symbols/icon-md-calendar-grey.png) no-repeat 5px 50%;}

.ui-icon-mail {padding-left: 24px; background:#F0EEEB url(/climate/jquery/mobile/themes/images/icons-png/mail-white.png) no-repeat  5px 12px;}
.ui-icon-comment {padding-left: 24px; background:#F0EEEB  url(/climate/jquery/mobile/themes/images/icons-png/comment-white.png) no-repeat 5px 12px;}
.ui-icon-calendar {padding-left: 24px; background:#F0EEEB url(/climate/jquery/mobile/themes/images/icons-png/calendar-white.png) no-repeat  5px 12px;}


/* 20150205 html5 details/summary, use with details js shim old browsers */
/* these styles are emphatic -low key and inline varient desirable */
details {border: 1px solid #ddd; margin: 5px 0; text-align: left;}
details summary[aria-expanded="false"] {background:#efefef url(/climate/jquery/mobile/themes/images/icons-png/carat-r-black.png) 0px 7px no-repeat; padding-left:30px;}
details summary[aria-expanded="true"] {background:#efefef url(/climate/jquery/mobile/themes/images/icons-png/carat-u-black.png) 0px 7px no-repeat; padding-left:30px;}
/* summary: -webkit-details-marker { font-size:0px; display:none; } *//* hide webkit (additional) arrow */
/* summary:marker { font-size:0px; display:none; } */
details, details summary { display: block; padding:5px; }
details summary:hover, details summary:focus { background-color: #F7F7F7; }

summary {padding:5px; padding-left:30px; margin:0; font-size:1em; font-weight:bold;}

details h2, details h3, details h4 {margin:0;}

.no-details summary {cursor: pointer; }
.no-details details > * { display: none; }
.no-details details summary { display: block; }

/* space first element contained in the summary */
summary + * {padding-top: 10px !important; }

/*  generic key access info for sighted readers :0*/
.keyboard-access:focus {left:200px; z-index:99999999; outline:1px dotted #06F;} /* requires tabindex="0" for non-focusable elements, e.g. p, div, li */
/* from jquery ui */
.ui-helper-hidden-accessible {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

figure { margin:0;}
figure img{ max-width: 100%; max-height: none;}
figure a img{ max-width: 98%;} /* allow hover/active borders */
figcaption { padding: 5px; display: inline-block; color: #666; font-size: 0.9em;}
figcaption p:last-child{ padding-bottom:0; margin-bottom:0;}

/*summary::-webkit-details-marker { display: none;}*/
summary::marker { display: none;}

.cc {clear:both; font-size:0.8em;}
.cc img{margin:0 5px; display:inline-block;}

a.newWindowImg {
background: url("/ol/img/external-ol.gif") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 12px;
}



/* card /feature block */
.card { border:1px solid #ddd; border-radius:4px; box-shadow:0 0 3px rgba(0,0,0,0.2); margin:0 5px 15px 0; min-height: 23em;position:relative; background-color:#fff; }
.card  h2 {font-size:1em; color:#000; text-align:center; padding: 5px; margin:0; background-color: #efefef;}

.card  img {display:block; margin:auto; padding:1px; width:100%; max-width:235px; height:auto; max-height:157px; background-color:#fff !important; box-sizing:border-box; }

.card  a { text-decoration:none; }
.card a img:hover { border:1px solid #000;}
.card > a {display:block; width:100%; height:162px; box-sizing:border-box; padding:0;margin:0; background-color: #fff !important;}

.card figure {margin:0; padding:0}
.card figcaption {background-color: #efefef;}

.card p {padding:5px;}
.card ul {list-style-position: inside; margin-top: 5px; margin-bottom: 0px; padding-bottom:0; margin:5px;}
.card ul li { margin-bottom:5px; margin: 0;}
.card ul a {text-decoration:none; border-bottom: 1px dotted #fff;  }
.card ul a:hover { border-bottom: 1px dotted #006699; }
@media (max-width: 768px){.card > a {height:auto !important;}}

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


/* promotion banners */
.promotion {
    background: #250f07 url(/climate/promotion/images/ytd-2023.jpg) no-repeat 0 -40px;
}
.promotion a {border:none; text-decoration:none; color: #fff; display:block;}
.promotion { margin-bottom: 10px ;  }
.promotion span.p, .promotion p {display: block; font-size: 1.2em; padding-top:5px;}
.promotion span.h2, .promotion h2 {display: inline; font-weight:normal; border-bottom:1px dotted #fff;  font-size: 1.5em; margin:0; padding:3px 0 2px 0; color: #fff;}
.arrow-right  {
    background: inherit url("/climate/promotion/images/arrow-circle.svg") no-repeat top right;
    width:30px; height: 30px;
 }
 .promotion span.p img, .promotion p img {vertical-align: middle;}
@media (min-width:601px) {
    .promotion { background-position: 0px -80px; }
    .promotion a { padding: 20px 15px 20px 400px;}
}

@media (min-width:420px) and (max-width:600px)  {
    .promotion { background-position: -200px -50px; }
    .promotion a { padding: 10px 10px 10px 200px;}
}

/* defaults */
.promotion:hover, .promotion:focus { background-color:#1964AA;}
.promotion { background:  #250f07  url("/climate/promotion/images/ytd-2023.jpg") no-repeat 0 -40px; }