/* Main styles */
body {
	background-color:#DDEEFF;
	font-family:Arial,Helvetica,sans;
	font-size:16px;
	text-align:center;
	margin:8px 0;
}
h1 {
	text-align:center;
	height:38px;
	margin:1px 0 8px 0;
}
h1 a, h1 a:visited {
	color:#000;
}
h2 {
	margin-top:0;
	text-align:center;
}
div {
	text-align:left;
}

/* structure */
div#main {
  border:5px solid #666;
  background-color:#DDEEFF;
  margin:0 3%;
  height:79%;
  height:calc(100vh - 145px);
  position:relative;
  z-index:100;
}
.bigquakes #main, .othermaps #main {
  height:calc(100vh - 175px);
}
div#map {
  height:100%;
  margin-right:255px;
  border-right:5px solid #666;
  background-color:#e2efff;
}
#layer-light,
#layer-satellite {
  color: #666;
}
#layer-light.active,
#layer-satellite.active {
  color: #000;
}
#main.map-satellite div#map {
  background-color:#13182b;
}
div#sidebar {
	position:absolute;
	top:0;
	right:0;
	width:255px;
	height:100%;
}
div#sidebar-header {
	padding:0 5px;
}
div#sidebar-inner {
	overflow:auto;
}
div#footer {
	width:90%;
	font-size:80%;
	text-align:center;
	margin-left:5%;
	padding:0 5px 0 0;
}
div#footer {
	width:90%;
	font-size:80%;
	text-align:center;
	margin-left:5%;
	padding:0 5px 0 0;
}

/* navigation */
div.navigation {
  height:24px;
  border-bottom:1px solid #333;
  text-align:center;
  margin:0;
  position:absolute;
  width:100%;
  top:50px;
  left:0px;
}
.bigquakes div.navigation, .othermaps div.navigation {
  margin-bottom:24px;
  border-bottom:0px none;
}
.bigquakes h1, .othermaps h1 {
  margin-bottom:55px;
}
.home div.navigation {
  position:relative;
  top:auto;
  width:auto;
  margin:0 3%;
}
.about div.navigation,
.faqs div.navigation,
.dailyenergy div.navigation {
  position:relative;
  top:auto;
	width:990px;
	height:25px;
	margin:0 auto;
}
.home div.navigation ul li a,
.about div.navigation ul li a,
.faqs div.navigation ul li a,
.dailyenergy div.navigation ul li a {
  padding-bottom:8px;
  height:19px;
}
div.main,
div.faqbox,
div.aboutbox {
  z-index:51;
}
div.navigation ul{
  margin:5px 0 -5px 0;
}
div.navigation ul li {
  display:inline;
  margin:0;
}
div.navigation ul li a {
  padding:5px 15px 7px;
  height:19px;
  position:relative;
}
div.navigation ul div {
  display:none;
  position:absolute;
  background-color:#666;
	margin:5px 0 0;
	padding:0;
  left:3%;
  width:94%;
  top:24px;
  border-top:1px solid #333;
}
div.navigation ul ul {
  margin: 0 auto;
	padding:0;
}
div.navigation ul ul li {
  border-right:0px none;
  padding:0px 5px;
}
.bigquakes li.bigquakes ul a,
.othermaps li.othermaps ul a {
  background-color:transparent;
  padding-top:0px;
  border:0px none;
  z-index:50;
  text-decoration:underline;
  font-weight:normal;
}
.home li.home a,
.bigquakes li.bigquakes a,
.othermaps li.othermaps a,
.dailyenergy li.dailyenergy a,
.faqs li.faqs a,
.about li.about a {
  background-color:#666;
  border-top:1px solid #333;
  border-right:1px solid #333;
  border-left:1px solid #333;
  z-index:50;
  text-decoration:none;
  font-weight:bold;
  color:#fff;
}
.bigquakes li.bigquakes div,
.othermaps li.othermaps div {
  z-index:25;
  padding-top:0;
  padding-bottom:5px;
  display:block;
  text-align:center;
}
.bigquakes li.bigquakes ul a,
.othermaps li.othermaps ul a {
  color:#fff;
}
.bigquakes li.bigquakes ul span {
  color:#fff;
  font-weight:bold;
}
.largest #navigation li.largest a,
.recent #navigation li.recent a,
.today #navigation li.today a,
.week #navigation li.week a,
.all #navigation li.all a,
.feb22 #navigation li.feb22 a,
.june13 #navigation li.june13 a {
  text-decoration:none;
  font-weight:bold;
  font-size:110%;
}

/* quake list */
ul.quakes, ul.quakes li {
  margin:0;
  padding:0;
  clear:left;
  list-style-type:none;
}
div#sidebar-header ul.quakes {
  margin-top:5px;
}
ul#quakes {
  margin-left:5px;
}
ul.quakes li {
  width:100%;
  height:20px;
}
ul.quakes li span {
  display:inline-block;
  /*float:left;*/
}
ul.quakes li span.mag {
  width:44px;
}
ul.quakes li span.depth {
  width:53px;
}
ul.quakes li span.date {
  width:87px;
}
ul.quakes li span.time {
  width:45px;
  clear:right;
}
ul#quakes span.date, ul#quakes span.time {
  color:#999;
}

span#time {
	font-weight:bold;
	display:block;
}
div#controls {	
	margin-bottom:5px;
}
span.quaketime {
	color:#999;
}
table#legend {
	margin:8px auto 5px auto;
}
table#legend td span {
	font-size:90%;
	display:block;
	font-weight:bold;
	padding:2px;
	width:55px;
	text-align:center;
}
table#legend td span.caption {
	width:105px;
}
span#range,
span#dayLabel {
	font-size:80%;
}
a img {
	border:0px none;
}
div#aboutbox,
div#faqbox {
	width:970px;
	margin:0 auto;
	padding:5px;
	border:5px solid #666;
	position:relative;
	z-index:100;
}
div#faqbox ul, div#faqbox li {
	margin-left:5px;
	margin-right:5px;
	padding-left:0px;
	list-style-type:none;
}
div#faqbox p {
	margin-top:2px;
}
span#quakes-header {
	font-weight:bold;
}
span#numquakes {
	font-size:130%;
}
#day {
  margin-bottom:8px;
}
.filtered-label {
  font-size:80%;
  font-weight:normal;
  display:none;
}
.filtered .filtered-label {
  display:inline;
}

/* Display controls */
div.displayControls {
	border:2px solid #999;
	background-color:#DDEEFF;
	margin-right:5px;
	padding:3px;
}
div.displayControls label {
	font-size:80%;
}
div#speedWarning,
div#faultInfo,
div#igInfo,
div#scaleInfo {
	border:1px solid #000;
	background-color:#FFFF47;
	width:320px;
	position:absolute;
	right:6%;
	top:85px;
	font-size:80%;
	z-index:100;
	padding:3px;
	display:none;
}

/* Custom controls */
div.leaflet-control button {
  background-color:#eee;
  border:1px solid #bbb;
  margin-right:-1px;
  cursor:pointer;
}
div.layer-controls .overlay-toggle {
  display:none;
}
div.layer-controls .overlay-toggle label {
  cursor:pointer;
}
div.layer-controls .overlay-toggle input {
  margin:0 3px;
  vertical-align:text-bottom;
}
div.layer-controls:hover .overlay-toggle {
  display:block;
  background-color:#eee;
  text-align:center;
  padding:4px 0;
  border:1px solid #bbb;
  margin-top:-1px;
  margin-right:-1px;
}
.leaflet-control.control-fullscreen {
  clear:none;
}
.leaflet-control.control-reset {
  clear:left;
  padding-top:3px;
}
@media (max-width:640px) {
  .leaflet-control.control-fullscreen,
  .leaflet-control.control-reset {
    clear:both;
    padding-top:0;
  }
}
button.fullscreen-toggle {
  height: 26px;
  width: 26px;
  background-image: url('/images/fullscreen.png');
}
.fullscreen button.fullscreen-toggle {
  background-image: url('/images/fullscreen-exit.png');
}

/* Fullscreen mode */
#wrapper.fullscreen {
  width: 100%;
  height: 100%;
  background-color: #DDEEFF;
}
.fullscreen #navigation,
.fullscreen #quicklinks {
  display: none;
}
.fullscreen #main {
  margin: 0 8px;
  height: 85%;
  height: calc(100vh - 110px);
}
.home .fullscreen div#map {
  margin-left: 0;
  border-left:0px none;
}
.bigquakes .fullscreen h1, .othermaps .fullscreen h1 {
  margin-bottom: 8px;
}

/* IE hacks */
* html .home div.navigation ul li a,
*+html .home div.navigation ul li a,
* html .about div.navigation ul li a,
*+html .about div.navigation ul li a,
* html .faqs div.navigation ul li a,
*+html .faqs div.navigation ul li a,
* html .dailyenergy div.navigation ul li a,
*+html .dailyenergy div.navigation ul li a {
  padding-bottom:6px;
  margin-bottom:-1px;
}
* html .about div.navigation,
*+html .about div.navigation,
* html .faqs div.navigation,
*+html .faqs div.navigation,
* html .dailyenergy div.navigation,
*+html .dailyenergy div.navigation {
  width:970px;
}
* html div.navigation ul,
*+html div.navigation ul {
  margin:0;
}
* html div.navigation ul li a,
*+html div.navigation ul li a {
  padding-bottom:5px;
}
* html div.navigation ul ul,
*+html div.navigation ul ul {
  margin:0;
}