#rankingsTitle { margin: 0.75em auto 1em auto; }
#rankingsTitle h3 { color: #777777; margin-bottom: 0.25em; font-weight: bold; font-family:  "open Sans", Helvetica, Arial, sans-serif; font-size: 18px; }
#rankingsTitle h4 { color: #AAAAAA; margin-top: 0; font-family:  "open Sans", Helvetica, Arial, sans-serif; font-size: 14px; }

#formatted-data { float: left; }

#period-view                 { float: right; font-size: 0.8em; }
#period-view span            { padding: 0 0.25em; }
#period-view span:last-child { padding-right: 0; }
#period-view span.selected   { color: #000; background-color: #efefef; cursor: default; text-decoration: underline; }

table#valuesTable caption { margin-bottom: 0; }

table#valuesTable caption div {
	float:      left;
	height:     22px;
	width:      14%;
	text-align: center;
	font-size:  7pt;
	padding:    0.5em 0.1em 0.1em 0.1em;
}

#legend {
  display:     flex;
  white-space: nowrap;
  margin:      0 !important;
}

#legend li {
  display:     inline-block;
  text-align:  center;
  flex-grow:   1;
  margin:      0 !important;
  white-space: normal;
  height:      22px;
  font-size:   7pt;
  padding:     0.5em 0.1em 0.1em 0.1em;
}

.warmCool .lowest       { background-color: #2166AC !important; color: #fff !important; }
.warmCool .bottom-tenth { background-color: #67A9CF !important; }
.warmCool .bottom-third { background-color: #D1E5F0 !important; }
.warmCool .normal       { background-color: #F5F5F5 !important; }
.warmCool .top-third    { background-color: #FDDBC7 !important; }
.warmCool .top-tenth    { background-color: #EF8A62 !important; }
.warmCool .highest      { background-color: #B2182B !important; color: #fff !important; }

.warmCool .lowest a { color: #90B9DC; }

.wetDry .lowest       { background-color: #8C540A !important; color: #fff !important; }
.wetDry .bottom-tenth { background-color: #D8B365 !important; }
.wetDry .bottom-third { background-color: #F6E8C3 !important; }
.wetDry .normal       { background-color: #F5F5F5 !important; }
.wetDry .top-third    { background-color: #C7EAE5 !important; }
.wetDry .top-tenth    { background-color: #5AB4AC !important; }
.wetDry .highest      { background-color: #01655E !important; color: #fff !important; }

.wetDry .lowest a { color: #67A9CF; }
.wetDry .highest a { color: #90B9DC; }

table#valuesTable th,
table#valuesTable td {
  font-size: 0.8em;
}

table#valuesTable td.period,
table#valuesTable td.rank,
table#valuesTable td.since { text-align: left; }

table#valuesTable td.period,
table#valuesTable td.value,
table#valuesTable td.mean,
table#valuesTable td.departure,
table#valuesTable td.rank,
table#valuesTable td.since {
  white-space: nowrap;
}

table#valuesTable td.ties {
  font-size:  0.7em;
  font-style: italic;
  text-align: left;
  padding:    3px;
}