/* CSS Document */

.boilerplate-container{ padding: 0em;}
.boilerplate-header{background: #fff; padding: 1em; color: #3c2f2f}
.boilerplate-header h1{padding: 0;margin: 0;}
.boilerplate-header h2{font-size: 1em; font-weight: normal;}

/* List Quakes*/
.quakes-section{}
.quakes-section *{margin: 0;padding: 0;list-style-type: none; box-sizing: border-box;}
.quakes-section ol{display: grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); grid-gap:1em; margin-top: 1em;}
.quakes-section ol li:first-child{grid-column:span 2;}
.first-dl{display: grid; grid-template-columns:1fr 1fr; grid-gap:.5em 1em; font-size: 1em;}
.first-dl dt{grid-column:span 2;}
.first-dl dd span{font-size: .9em; line-height:26px; color: #898989; width: 90px; display: inline-block; margin: 0; margin-right: .5em;}
.first-dl dd span:after{content: ':'; display: inline-block; float: right;}
.first-dl dd span:before{content: ''; width: 27px; height: 27px; margin: 0; display: inline-block; margin-right: .5em; vertical-align:middle;}
.spa-date-icon:before{background-position: -41px -222px !important}
.spa-time-icon:before{background-position: -41px -257px !important}
.spa-beat-icon:before{background-position: -41px -291px !important}
.spa-deep-icon:before{background-position: -44px -358px !important}
.spa-lat-icon:before{background-position: -44px -324px !important}
.spa-lon-icon:before{background-position: -6px -324px !important}

.quakes-section ol li{background: #fff;}
.quakes-section ol li h1{font-size: 1.1em;}
.earth-maps{position: relative;}
.earth-maps img{width: 100%; height: auto;}
.google-eart-map{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.030); border-bottom: 1px solid #d6d6d6;}
.quakes-section ol dl{padding: 1em; position: relative; line-height: 1.5; color: #2E2323}
.quakes-section ol dl dt{ border-bottom: 1px solid #f1f1f1; padding-bottom: 1em;}
.quakes-section ol dl dd{font-size: .9em;}
.last-time{ position: absolute; right: 1em; bottom: 1em; display: inline-block; padding:.2em .5em; background: #d00800; color: #fff;  font-size: .7em !important; border-radius: 6px;}

/* Earth News */
.earth-news *{margin: 0;padding: 0; box-sizing: border-box;}
.earth-news-title{font-size: 1.2em; color: #d00800;  margin: 0;padding: 1em; border-bottom: 6px solid #f9f9f9;}
.earth-news-title:before{width: 25px; height: 25px; content:''; background: url(../img/flashing-icon.gif) center no-repeat; display: inline-block; vertical-align: bottom; margin-right: .5em;}
.earth-news h1 small{font-size: .7em; color:#767676; display: inline-block; padding: .1em .3em; border: 1px solid #ccc; border-radius: 4px; font-weight: normal; margin: 0; margin-left: .3em;}
.earth-news ul li{border-bottom: 1px solid #f1f1f1;}
.earth-news ul li:last-child,.earth-news ul li:last-child a{border: none; padding-bottom: 0;}
.earth-news ul li a{padding: 1.1em; color: #2B2324; display: block; font-size: .7em; }
.earth-news ul li a h1:before{content:'›'; margin-right: 1em;}
.earth-news ul li a h1{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.earth-news ul li a:hover{text-decoration: underline;}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 320px) and (max-width: 767px) {
  
.quakes-section ol li:first-child{grid-column:span 1;}
.first-dl{grid-gap:0; font-size: .9em;}
.first-dl dd span{width: 80px; margin-right: .3em;}	
  
}