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;
}
.event-note:last-child { margin-bottom: 1em !important; }

/*
 * 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;
}

#billionsMenu {
  display:          flex;
  justify-content:  space-evenly;
  align-items:      stretch;
  font-size:        0.95em;
  margin:           0 !important;
  background-color: #194E81;
  padding:          0 !important;
}

#billionsMenu li {
  flex:       1;
  display:    inline;
  list-style: none;
  margin:     0 !important;
  padding:    0 !important;
  text-align: center;
  cursor:     pointer;
}

#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 {
  float:     left;
  padding:   0;
  margin:    1em 0;
  min-width: 100px;
}

.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
 */
ul.cpi-toggle {
  float:       right;
  margin:      1em 0 !important;
  padding:     0 !important;
  white-space: nowrap;
}

ul.cpi-toggle li {
  display:          inline;
  margin:           0 -2px 0 -2px !important;
  padding:          0.2em 0.5em !important;
  list-style-type:  none;
  cursor:           default;
  border:           solid 1px #ccc;
  background-color: #fefefe;
}

ul.cpi-toggle li.link {
  cursor:           pointer;
  color:            rgb(0, 87, 165);
  background-color: #e5ebf0;
  border:           solid 1px #eee;
}

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

form.select-form select { margin-right: 5px; }

button { cursor: pointer; }

.disaster-cb {
  padding: 1px 3px;
  border:  1px solid #aaa;
}

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

@media only screen and (max-width: 1024px) {
  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; }

/*
 * Checkboxes
 */
 .checkboxes {
  display:         flex;
  justify-content: center;
  align-content:   center;
  margin:          1em auto;
}

.checkboxes .checkflexbox {
  text-align:  left;
  line-height: 2em;
  margin:      auto;
  white-space: nowrap;
}

/*
 * 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; }