@charset "utf-8";
/* for /climate/model-summary/, /climate/model-summary/archive/yyyymmdd.shtml, /climate/model-summary/model-summary-table.shtml */
/*
@import url(/climate/styles/date.css);
*/
.ui-dialog .ui-widget-content a {
    border-bottom: 1px dotted #ccc;
    color: #3366cc;
    text-decoration: none;
    width: 540px;
}
.ui-dialog .ui-widget-content a:hover,.ui-dialog .ui-widget-content a:active {
    color: #F60;
}

.icon-download-grey { background:transparent url(/climate/images/symbols/icon-md-download-grey.png) no-repeat 5px 0.8em; padding-left:24px;}
.ui-icon-mail,.icon-mail-grey {background:transparent url(/climate/images/symbols/icon-md-mail-grey.png) no-repeat 5px 0.8em; padding-left:24px;}

.access-info li{text-align:left;}
div.ui-tabs div.ui-tabs-panel {padding: 0.5em; margin:0; min-height:500px;}

div.block-33{width:33%; float:left; display:block; padding:0;margin:0; border-left:none !important;}


h3 {color:#000; font-size: 1em;}

/* about info at bottom of tabs */
p.info {padding:2px 2px 2px 24px !important; background:url(/climate/images/symbols/icon-info-large.png) no-repeat left;float:left;width:auto;}
ul.horizontal {padding:2px; float:left;width:auto;  margin:0 !important;}
.box-info { border:2px #efefef solid; background-color:#efefef; margin:4px 0;}
ul ul {padding-bottom:0 !important;margin-bottom:0 !important;}
.ip {color:#666; margin:1em 0 .4em 0; font-style:italic; background:#efefef url(/climate/images/symbols/icon-copyright-large.png) no-repeat .2em .2em; padding:.4em .4em .4em 28px; }
abbr {border-bottom: dotted #ccc 1px; }


.cool     {color:#0066FF;}
.warm     {color:#CC0000;}
.neutral  {color:#666;}

#page-info {margin-left:10px;padding:1px 4px 1px 20px !important; background: url(/climate/images/symbols/icon-info.png) no-repeat left top; height:2em;}
.intro {border:4px solid #efefef; margin:.2em 0;}

#details table img {margin:1px; border:1px solid #fff; box-shadow:0 0 3px 1px #999;}
#details table img:hover {border-color:#000;}

/* graph boxes */
.box-graphic { border:3px #efefef solid; text-align:center; background-color: #f8f8f8; }
.box-graphic  h3          {padding: 10px 0 10px 0; margin:0 auto 5px auto; text-align:center; background-color: #efefef; color: #333; }
.box-graphic form         {padding: 0;}
.box-graphic label {display:inline-block; width:auto; border:2px solid #efefef; padding:5px 8px 5px 5px; margin: 4px; background-color: #efefef; font-weight:bold; color:#666; }
.box-graphic label:hover,  .box-graphic label.active {border-color:#ccc; cursor:pointer; background:#efefef;}
.box-graphic details {text-align: left; margin-bottom:0;}


#nino34Dials {margin-bottom:2em; overflow:visible;}
/* clip the label off the top of the graph display */
#clipMonthGraphNINO34    {width:auto; /*max-width:615px; max-height:380px;*/ overflow:hidden; margin:0 auto;}
#clipMonthGraphIOD {width:auto; /*max-width:615px; max-height:266px; */ overflow:hidden; margin:0 auto;}

/* dials */
#dials div {float:left; width: 33%; margin-bottom:2em;}
#dials div h3 {margin-top: -2.2em; /*-2.6em */ padding:5px; background-color:transparent;}
#dials div p {color: #666;}

.ui-tooltip, .arrow:after {
    background: #666;
    border: 2px solid #fff;
  }
  .ui-tooltip {
    padding: 5px 10px;
    color: #fff;
    border-radius: 20px;
    font: 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;
  }
   

/* 
#sstOutlooks date #sstOutlooksCharts p.date { margin-top:0; }*/

#sstOutlooks p.date { margin-top:-10px; width: 725px; height: 23px; background-color:#efefef !important; background-position: 8px 8px; padding:8px 20px 6px 30px !important;
}

#sstOutlooks .date-next-issue { display:none; }

.ui-tabs-panel h2 {
   border: none;
}
.ui-tabs-panel h2:first-of-type {
  padding-top: 0px;
}
/* poama probability distribution table */
#probTable { font-size: 1em; }

/* archive box */
.box-archive h2 { margin:-5px -5px 5px -5px; background-color: #efefef; color: #000; padding: 5px; }


#sstOutlooksCharts .block-75 , #sstOutlooksCharts #right-block, #sstOutlooksCharts h1, #page-info {display: none !important; position: absolute; height: 0; margin: 0; }
#sstOutlooksCharts li, #sstOutlooksCharts p { display: inline-block; padding: 5px;}

/* #sstOutlooksCharts h2 { text-align: left; color: #000; font-size: 1em; } */

#sstOutlooksChartsClip { /*height: 380px; */overflow: hidden; /*aspect-ratio: ; */}
#sstOutlooksChartsClip img { display: block; margin: auto; text-align: center; }
#sstOutlooks img#regionImage { display: block; margin: -36px auto auto; text-align: center; }

#bomModelContent { margin-bottom: 1em; }


#image { display: block; margin: auto; text-align: center; border: 1px solid #efefef; }

#dialogPoama button {width: 5em; }
#dialogPoama {background: #efefef; }
#dialog {text-align:center; font-weight: bold;font-size: 1.2em;}
#dialog img#image{display: block; margin: auto; }

#extraButtons { margin: auto; text-align: center; }

#sstOutlooks {
   background: white; 
   border: 0px;
}

#sstOutlooks #tableHeader {
    background-color: #efefef;
    color: #000;
    font-size: 1em;
    margin: 0 auto 5px;
    padding: 10px 0;
    text-align: center;
    width: 780px;
}

.model-summary-hidden { display: none; } 

#poamaAboutLink[aria-hidden=true], #accessAboutLink[aria-hidden=true] { display:none;}

.timeseries img{
  max-width: 100%;
  height:auto;
}


@media print {
    .block-25, .print-no, .box-info { display: none; }
    img { max-width: 100%; height:auto;}
    .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; }
    a.pdf { padding-left:0; }


    #dials div h3 { margin-top: -2.4em; font-size: 0.9em; }
    #details table img { border: none; box-shadow: none; }
    p.date time:first-child:before {
        padding-left:0 !important;
    }
}


/*
align button styling for lrf buttons and model summary
*/

.radio-buttons > label, a.button.primary {
  display: inline-block;
  position:relative; /* for radio inputs */
  
  padding:.275em .6em;
  
  text-align:center;
  font-size:1.0em;
  line-height:30px;
  font-weight:400;
  text-decoration:none;
  
  color:#000;
  background-color:#efefef;

  border:1px solid #ccc;
  border-radius:4px;
}
.radio-buttons > label span{display:inline-block} /* */

/* active states */
.radio-buttons > label.active, .radio-buttons > label:focus, .radio-buttons > label:hover  {
  cursor:default;
  color:#fff;
  background:#06c;
}

a.button.primary {
  
  color:#fff;
  background:#666;
  cursor: pointer;
}

a.button.primary:hover, a.button.primary:active, a.button.primary:focus  {
  color:#fff;
  background:#06c;
  
}

/* hide radio buttons */
.radio-buttons > label input[type=radio]{position:absolute;z-index:-1}

#content hr {display:none;}