h1 { font-size: 2em; margin: 0.5em 0 0.25em 0; }

h2 { padding: 0.25em 0 0 0; }
h2#citation { margin-top: 1em; }

h3 { margin-top: 1em; }

sup { font-size: 0.8em !important; }

.event-note {
  padding:    0 !important;
  margin:     0 !important;
  font-size:  0.8em !important;
  font-style: italic;
}

button,
input[type="submit"] { border-radius: 0.25rem; }

button,
input[type=submit] { transition: background-color 0.5s ease; }

button:disabled,
input[type=submit]:disabled {
  cursor:           default;
  background-color: #ccc;
  transition:       background-color 0.5s ease;
}

/*
 * nav bar menu
 */
nav {
  margin-bottom:      10px;
  -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0 8px 6px -6px rgba(0,0,0,0.4);  /* Firefox 3.5 - 3.6 */
  box-shadow:         0 8px 6px -6px rgba(0,0,0,0.4);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.sticky {
  position: fixed;
  top:      0;
  z-index:  1001;
}

#billionsMenuToggle {
  display:          none;
  color:            #ffffff;
  background-color: #194E81;
  height:           20px;
}

#billionsMenuToggle span {
  float:  right;
  cursor: pointer;
  width:  15px;
  height: 15px;
}

.billionsMenu {
  font-size:        0.95em;
  margin:           0 !important;
  background-color: #194E81;
  padding:          0 !important;
}

#billionsHmenu {
  border-radius:    0.25rem;
  display:          flex;
  justify-content:  space-evenly;
  align-items:      stretch;
}

nav.sticky #billionsHmenu { border-radius: 0 0 0.25rem 0.25rem !important; }

#billionsVmenu { display: none; }

.billionsMenu li {
  list-style: none;
  margin:     0 !important;
  padding:    0 !important;
  text-align: center;
  cursor:     pointer;
}

#billionsHmenu li { flex: 1; }

#billionsVmenu li { border-bottom: 1px solid #00A2E3; }

.billionsMenu li a {
  display:          block;
  color:          #fff;
  padding:          5px;
  background-color: transparent !important;
}

.billionsMenu li:hover,
.billionsMenu li a:hover {
  background-color: #6E8091;
}

.billionsMenu li.selected {
  color:            #fff;
  background-color: #999;
}

.billionsMenu li.selected a {
  color:  #fff;
  cursor: default;
}

/*
 * Prev/Next Buttons
 */
.pn-buttons { min-width: 110px; }

.pn-buttons .pn { display: inline-block; height: 30px; }

.pn button {
  font-family: arial,sans-serif;
}

.pn button:disabled {
  cursor: default;
  background-color: #dddddd;
}

/*
 * CPI Toggle buttons
 */

/* hide radio button */
input.cpi-toggle { position: absolute; opacity: 0; }

label.cpi-toggle-label {
  cursor:           pointer;
  padding:          0.2em 0.5em !important;
  font-weight:      normal;
  font-size:        0.8em;
  line-height:      1.5em;
  border:           solid 1px #ddd;
  color:            rgb(0, 87, 165);
  background-color: #e5ebf0;
}

.cpiToggleControls .cpiToggleControl:first-of-type label.cpi-toggle-label { border-radius: 0.25rem 0 0 0.25rem; }
.cpiToggleControls .cpiToggleControl:last-of-type label.cpi-toggle-label { border-radius: 0 0.25rem 0.25rem 0; }

input.cpi-toggle:not(:checked) ~ label.cpi-toggle-label:hover { border-color: #999 !important; }

input.cpi-toggle:checked ~ label.cpi-toggle-label {
  cursor:             default;
  border-color:     #ccc;
  background-color: rgba(0,87,165,0.7);
  color:            #e5ebf0;
  -moz-box-shadow:    inset 0 0 1px #777777;
  -webkit-box-shadow: inset 0 0 1px #777777;
   box-shadow:        inset 0 0 1px #777777;
}

/*
 * Forms
 */
form.select-form { margin: 1em auto; }

/*
 * Checkboxes
 */
 .checkboxes {
  display:         flex;
  flex-flow:       row wrap;
  justify-content: space-around;
  align-items:     stretch;
  padding:         0;
  margin:          0.5em auto;
}

.checkboxes .checkflexbox {
  text-align:  center;
  margin:      7px auto;
  line-height: 2em !important;
}

@media only screen and (max-width: 659px) {
  .checkboxes .checkflexbox { width: 45%; font-size: 1em !important; }
}

@media only screen and (min-width: 660px) {
  .checkboxes .checkflexbox { width: 150px; font-size: 0.8em !important; white-space: nowrap; }
}

@media only screen and (min-width: 1024px) {
  .checkboxes .checkflexbox { width: 90px; font-size: 0.7em !important; white-space: nowrap; }
}

form.select-form select { margin-right: 5px; border-radius: 0.25rem; }

button { cursor: pointer; }

label {
  font-weight: normal;
  display:     inline-block;
}

/* hide checkbox */
input.disaster-checkbox { position: absolute; opacity: 0; }

label.disaster-checkbox-label {
  cursor:        pointer;
  padding:       0 2px !important;
  border-radius: 0.25rem;
  width:         95%;
  height:        100%;
  border:        solid 1px transparent;
}

.drought-cbl          { border-color: #cc9900 !important; color: rgba(204,153,0,1.0); }
.flooding-cbl         { border-color: #0a47cc !important; color: rgba(10,71,204,1.0); }
.freeze-cbl           { border-color: #0099cc !important; color: rgba(0,153,204,1.0); }
.severe-storm-cbl     { border-color: #00bb33 !important; color: rgba(0,187,51,1.0); }
.tropical-cyclone-cbl { border-color: #ffd147 !important; color: rgba(255,209,71,1.0); }
.wildfire-cbl         { border-color: #ff810a !important; color: rgba(255,129,10,1.0); }
.winter-storm-cbl     { border-color: #9900cc !important; color: rgba(153,0,204,1.0); }
.all-disasters-cbl    { border-color: #bc312e !important; color: rgba(188,49,46,1.0); }

label.disaster-checkbox-label:hover { border-color: #ccc !important; }

.drought-cbl:hover          { background-color: rgba(204,153,0,0.15); }
.flooding-cbl:hover         { background-color: rgba(10,71,204,0.15); }
.freeze-cbl:hover           { background-color: rgba(0,153,204,0.15); }
.severe-storm-cbl:hover     { background-color: rgba(0,187,51,0.15); }
.tropical-cyclone-cbl:hover { background-color: rgba(255,209,71,0.15); }
.wildfire-cbl:hover         { background-color: rgba(255,129,10,0.15); }
.winter-storm-cbl:hover     { background-color: rgba(153,0,204,0.15);  }
.all-disasters-cbl:hover    { background-color: rgba(188,49,46,0.15);  }

.disaster-checkbox:checked ~ label.disaster-checkbox-label {
  -moz-box-shadow:    inset 0 0 2px #777777;
  -webkit-box-shadow: inset 0 0 2px #777777;
   box-shadow:        inset 0 0 2px #777777;
}

.disaster-checkbox:checked ~ label.disaster-checkbox-label.drought-cbl          { background-color: rgba(204,153,0,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.flooding-cbl         { background-color: rgba(10,71,204,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.freeze-cbl           { background-color: rgba(0,153,204,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.severe-storm-cbl     { background-color: rgba(0,187,51,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.tropical-cyclone-cbl { background-color: rgba(255,209,71,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.wildfire-cbl         { background-color: rgba(255,129,10,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.winter-storm-cbl     { background-color: rgba(153,0,204,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.all-disasters-cbl    { background-color: rgba(188,49,46,1) !important; color: #ffffff; }

@media only screen and (max-width: 1023px) {
  label.dropdown-label {
    display:    inline-block;
    width:      77px;
    text-align: left;
  }
}

.dropdown-select label { width: 70px; }

.dropdown-select { margin-bottom: 0.25em; }

sup .button { font-size: 8px !important; }

/*
 * Tables
 */
table { font-size: 0.8em; margin-top: 1em; }

caption {
  font-size:     1.25em !important;
  margin-bottom: 0.25em;
}

table td { text-align: right; }

th.sort {
  cursor:              pointer;
  font-weight:         bold;
  background-image:    url('/monitoring-content/lib/images/sort-lt.gif');
  background-repeat:   no-repeat;
  background-position: center left;
  padding-left:        20px !important;
  margin-left:         -1px !important;
}

th.headerSortDown {
  background-image: url('/monitoring-content/lib/images/desc-lt.gif');
}

th.headerSortUp {
  background-image: url('/monitoring-content/lib/images/asc-lt.gif');
}

.ind {
  display:        inline-block;
  width:          10px;
  height:         10px;
  line-height:    10px;
  vertical-align: middle;
  margin:         0 5px 0 0;
  border:         1px solid #ccc;
}

.drought-ind          { background-color: #cc9900; }
.flooding-ind         { background-color: #0a47cc; }
.freeze-ind           { background-color: #0099cc; }
.severe-storm-ind     { background-color: #00bb33; }
.tropical-cyclone-ind { background-color: #ffd147; }
.wildfire-ind         { background-color: #ff810a; }
.winter-storm-ind     { background-color: #9900cc; }
.all-disasters-ind    { background-color: #bc312e; }

/*
 * Pop-ups
 */
.pu {
  font-size: 0.8em !important;
  padding:   2px !important;
}

.pu-div {
  position: relative;
  display:  none;
}

.popup {
  position:           absolute;
  right:              25px;
  bottom:             25px;
  white-space:        normal;
  text-align:         left;
  padding:            0;
  z-index:            10;
  background-color:   #fff !important;
  border-radius:      3px;
  -webkit-box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
          box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
}

.drought-popup          { border: solid 4px #cc9900; }
.flooding-popup         { border: solid 4px #0a47cc; }
.freeze-popup           { border: solid 4px #0099cc; }
.severe-storm-popup     { border: solid 4px #00bb33; }
.tropical-cyclone-popup { border: solid 4px #ffd147; }
.wildfire-popup         { border: solid 4px #ff810a; }
.winter-storm-popup     { border: solid 4px #9900cc; }
.all-disasters-popup    { border: solid 4px #bc312e; }

.popup-title {
  font-weight: bold;
  padding:     5px 15px 5px 5px;
}

.close {
  position: absolute;
  right:    5px;
  top:      1px;
  width:    10px;
  height:   10px;
  opacity:  0.3;
  cursor:   pointer;
}
.close:hover { opacity: 1; }
.close:before,
.close:after {
  position: absolute;
  left:     7px;
  content:  ' ';
  height:   11px;
  width:    2px;
  background-color: #333;
}
.close:before { transform: rotate(45deg); }
.close:after  { transform: rotate(-45deg); }

.drought-popup          .popup-title { background-color:  #FAF6E8; border-bottom: solid 1px #cc9900; }
.flooding-popup         .popup-title { background-color:  #E9EEFA; border-bottom: solid 1px #0a47cc; }
.freeze-popup           .popup-title { background-color:  #E8F6FA; border-bottom: solid 1px #0099cc; }
.severe-storm-popup     .popup-title { background-color:  #E8F9EC; border-bottom: solid 1px #00bb33; }
.tropical-cyclone-popup .popup-title { background-color:  #FFFBEE; border-bottom: solid 1px #ffd147; }
.wildfire-popup         .popup-title { background-color:  #FFF4E9; border-bottom: solid 1px #ff810a; }
.winter-storm-popup     .popup-title { background-color:  #F6E8FA; border-bottom: solid 1px #9900cc; }
.all-disasters-popup    .popup-title { background-color:  #F9ECEC; border-bottom: solid 1px #bc312e; }

.divTable    { display: table; width: 100%; }
.divTableRow { display: table-row; }

.divTableCell {
  display:    table-cell;
  text-align: right;
  padding:    5px;
}
.divTableCell.hyphen { text-align: center; }

.drought-popup          .divTableRow:nth-child(2n) { background-color: #FAF6E8; border-style: solid none; border-width: 1px 0; border-color: #cc9900; }
.flooding-popup         .divTableRow:nth-child(2n) { background-color: #E9EEFA; border-style: solid none; border-width: 1px 0; border-color: #0a47cc; }
.freeze-popup           .divTableRow:nth-child(2n) { background-color: #E8F6FA; border-style: solid none; border-width: 1px 0; border-color: #0099cc; }
.severe-storm-popup     .divTableRow:nth-child(2n) { background-color: #E8F9EC; border-style: solid none; border-width: 1px 0; border-color: #00bb33; }
.tropical-cyclone-popup .divTableRow:nth-child(2n) { background-color: #FFFBEE; border-style: solid none; border-width: 1px 0; border-color: #ffd147; }
.wildfire-popup         .divTableRow:nth-child(2n) { background-color: #FFF4E9; border-style: solid none; border-width: 1px 0; border-color: #ff810a; }
.winter-storm-popup     .divTableRow:nth-child(2n) { background-color: #F6E8FA; border-style: solid none; border-width: 1px 0; border-color: #9900cc; }
.all-disasters-popup    .divTableRow:nth-child(2n) { background-color: #F9ECEC; border-style: solid none; border-width: 1px 0; border-color: #bc312e; }