h1 { font-size: 2em; }

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

h3 { margin-top: 1em; }

.hide { display: none; }

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

.center { margin-bottom: 1em; }

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

/*
 * CPI Toggle buttons
 */
ul.cpi-toggle {
  text-align: right;
  margin:     0.5em 0 !important;
  padding:    0 !important;
  font-size:  0.8em;
}

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 { font-size: 0.8em; margin-bottom: 1em; }
form.select-form select { margin-right: 5px; }

button { cursor: pointer; }

.disaster-cb-row {
  white-space:   nowrap;
  margin-bottom: 0.7em;
}

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

form .fl {
  text-align: left;
}

form .checkboxes {
  text-align: left;
  width: 18%;
}

form .buttons {
  text-align: right;
}

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

form #update-div {
  margin-top: 1em;
}

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

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

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

/*
 * 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 { background: #444; }

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-up Tables
 */
.pu {
  font-size: 0.8em !important;
  padding:   2px !important;
}

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

table.popup {
  position:           absolute;
  right:              60px;
  top:                -125px;
  z-index:            10;
  width:              250px;
  background-color:   #fff;
  -webkit-box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    3px 3px 2px 0px rgba(0, 0, 0, 0.4);
  box-shadow:         3px 3px 2px 0px rgba(0, 0, 0, 0.4);
}

table.popup caption {
  background-color:   #ccc !important;
  padding:            8px;
  border:             solid 1px #777;
  white-space:        normal;
  margin:             0;
  font-weight:        bold;
  -webkit-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    3px 2px 2px 0px rgba(0, 0, 0, 0.4);
  box-shadow:         3px 2px 2px 0px rgba(0, 0, 0, 0.4);
}

table.popup tr td       { white-space: nowrap; }
table.popup tr td.label { text-align:  left !important; }
table.popup tr td.value { text-align:  right !important; }

.close {
  float:  right;
  cursor: pointer;
}