/* app css stylesheet */
/* header */
h2 {
      margin: -100px;
      padding: 30px;
      font-family: Roboto,"Courier New",Helvetica,Arial,sans-serif;

      color: #ffffff;
      text-align: center;
      display: block;

      font-size: 2em;
      font-weight: 100;

      background: #555555 url('../img/mountains.png') no-repeat center;
      background-size: cover;

      box-sizing: border-box;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      align-self: center;
      vertical-align: middle;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      min-height: 300px;
      height: auto;

      z-index: 20;
}

.loading-img {
   background: url(../img/loader.gif) center center no-repeat;
}

.scroll-wrapper {
   -webkit-overflow-scrolling: touch;
}

.seismic-img {
   width: 100%;
   height: 600px;
   overflow: auto;
}

.map-ext-popup {
  min-width: 320px;
}

.map {
   min-width: 60%;
}

/*.leaflet-popup-content {
   height: 500px;
   overflow-y: auto;
}*/

.popup-table td {
   padding: 4px;
}

.popup-table th {
   padding: 4px;
}

.grey-axis line {
   stroke: #444;
}

.grey-axis path {
   stroke: #444;
}

.grey-axis text {
   fill: #444;
}

p {
   font-family: Roboto;
}

h4 {
   font-family: Roboto;
   text-align: center;
   font-style: italic;
}

.page-button {
   font-weight: bold;
   font-style: italic;
   background: #e0e0e0;
   color: #366996;

   padding: 10px; padding-left: 20px;
   margin-bottom: 10px;
   border-radius: 6px;
}

.page-link {
   font-weight: normal;
}

.fetching-msg{
   font-style: italic;
   color: #888888;
}

.attrib-msg {
   font-style: italic;
   font-weight: bold;
   color: #888888;
}

.scroll-msg {
   font-style: italic;
   font-weight: bold;
   color: #888888;
}

.scroll-link {
   background: #e0e0e0;
   color: #366996;
   padding: 10px;
   margin-bottom: 10px; margin-right: 6px;
   border-radius: 4px;
   display: inline-block;
}

.tiny {
   font-style: italic;
   font-weight: bold;
   color: #888888;
}

.error-msg{
   font-style: italic;
   color: #888888;
}

.copyright{
   font-style: italic;
}

.announcement {
   font-weight: bold;
}

.confirm-class {
   font-family: Roboto;
}

.globe-container {
   width: 118%;
   height: 790px;
   border: 1px solid gray; 
   padding: 2px;
   margin-left: -100px!important;
   background: #000 url(../img/stars.jpg) no-repeat center;
}

.timemap-page {
   width: 100%;
   height: 750px;
}

.timemap-container {
   width: 100%;
   height: 650px;
}

.session {
  margin-bottom: 30px;
  margin-left: 20px;
}

.row {
  height: 11px;
  width: 80%;
  max-width: 80%;
  margin-left: 20px; margin-bottom: 10px;
}

.colors {
  background: linear-gradient(to right, #9900FF, #A100D9, #AB00A6, #B50073, #BF0040, #C9000D, #FF0000, #FF8300, #FFDD00 );
  margin-bottom: 5px;
}

.label {
  width: 11%;
  color: #444;
  display: inline-block;
  text-align: center;
}

@media (min-width: 1500px) {
  h2 {
     font-size: 55px;
     line-height: 60px;
     padding-left: 30%;
  }

  h4 {
     font-size: 24px;
  }
}

@media (min-width: 1300px) and (max-width: 1500px) {
  h2 {
     font-size: 55px;
     line-height: 60px;
     padding-left: 25%;
  }

  h4 {
     font-size: 22px;
  }
}

@media (min-width: 1099px) and (max-width: 1300px) {
  h2 {
     font-size: 55px;
     line-height: 60px;
     padding-left: 20%;
  }

  h4 {
     font-size: 20px;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  h2 {
     margin: -10px;
     font-size: 45px;
     line-height: 60px;
     padding-left: 20%;
  }

  h4 {
     font-size: 18px;
  }
}

@media (min-width: 580px) and (max-width: 769px) {
  h2 {
     margin: -10px;
     font-size: 33px;
     line-height: 48px;
     padding-left: 20%; 
  }

  h4 {
     font-size: 16px;
  }
}

@media (max-width: 580px) {
  h2 {
     margin: -10px;
     font-size: 33px;
     line-height: 48px;
  }

  h4 {
     font-size: 14px;
  }
}

@media (min-width: 1099px) {
   section {
      max-width: 1000px;
      margin:0 auto;
   }
}

/* for larger screens */
@media (min-width: 1099px) {
   body {
      margin: 100px;
      font-family: Verdana, "Trebuchet MS", Georgia, sans-serif;
      font-size: 16px;
      color: #555555;
   }

   h3{
      text-transform: uppercase;
      font-family: Roboto;
      font-size: 1.2em;
      font-weight: bold;
      background: #e0e0e0;
      color: #366996;
      letter-spacing: 1px;
      padding: 10px; padding-left: 20px;
      margin-bottom: 10px;
      border-radius: 4px;
   }

   .highcharts-title tspan{
      font-size: 17px;
   }

   .spacer{
      width: 30px;
      height: 60px;
      clear: both;
   }

   .small-spacer{
      width: 30px;
      height: 20px;
      clear: both;
   }

   .button-style {
      height: 40px;
      margin: 10px 10px 10px 0;

      font-weight: bold;
      text-transform: uppercase;

      background-color: #ccc;
   }

   .past-chart {
      margin: 40px 20px 40px 20px;
   }

   .attrib-msg {
      font-size: 14px;
   }

   .scroll-msg {
      font-size: 12px;
   }

   .tiny {
      font-size: 10px;
   }

   .haz-img {
      height: 240px; width: 360px;
   }

   a.advert-linker{
      border-radius: 6px;
      border-width: 2px;
      border-color: #666666;
      border-style: solid;

      color: #666666;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;

      background-color: #ffffff;
      padding: 20px;
      margin-bottom: 4px;
      cursor: pointer;

      display: inline-block;
   }

   a.advert-linker:hover{
      text-decoration: none;
      background-color: #0076de;
      color: #ffffff;
      border-color: #0076de;
   }

   .advert-pic {
      float: left;
      margin: 2px 20px 4px 0px;
      height: 240px; width: 320px;
   }
}

/* for medium screens - ipads */
@media (min-width: 769px) and (max-width: 1099px) {
   body {
      font-family: Verdana, "Trebuchet MS", Georgia, sans-serif;
      font-size: 14px;
      color: #555555;
   }

   section {
      margin-left: 60px; margin-right: 60px;
   }

   h3{
      text-transform: uppercase;
      font-family: Roboto;
      font-size: 1em;
      font-weight: bold;
      background: #e0e0e0;
      color: #366996;
      letter-spacing: 1px;

      padding: 10px; padding-left: 20px;
      margin-bottom: 10px;
      border-radius: 4px;
   }

   .highcharts-title tspan{
      font-size: 16px;
   }

   .spacer{
      width: 30px;
      height: 50px;
      clear: both;
   }

   .small-spacer{
      width: 30px;
      height: 20px;
      clear: both;
   }

   .attrib-msg {
      font-size: 12px;
   }

   .scroll-msg {
      font-size: 10px;
   }

   .tiny {
      font-size: 8px;
   }

   .past-chart {
      margin: 40px 20px 40px 20px;
   }

   .button-style {
      height: 36px;
      margin: 10px 20px 10px 0;

      font-weight: bold;
      font-size: 13px;
      text-transform: uppercase;

      background-color: #ccc;
   }

   .haz-img {
      height: 240px; width: 360px;
   }

   a.advert-linker {
      border-radius: 6px;
      border-width: 2px;
      border-color: #666666;
      border-style: solid;

      color: #666666;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;

      display: inline-block;
      background-color: #ffffff;
      margin-bottom: 4px;
      padding: 10px;
      cursor: pointer;
   }

   a.advert-linker:hover {
      text-decoration: none;
      background-color: #0076de;
      color: #ffffff;
      border-color: #0076de;
   }

   .advert-pic {
      float: left;
      margin: 2px 20px 4px 0px;
      height: 240px; width: 320px;
   }

   .mobile-hidden {
      display: none!important;
   }
}

/* for smaller screens */
@media (max-width: 769px) {
   body {
      font-family: Verdana, "Trebuchet MS", Georgia, sans-serif;
      font-size: 12px;
      color: #555555;
   }

   section {
      margin-left: 40px; margin-right: 40px;
   }

   h3{
      text-transform: uppercase;
      font-family: Roboto;
      font-size: 14px;
      font-weight: bold;
      background: #e0e0e0;
      color: #366996;
      letter-spacing: 1px;

      padding: 10px;
      border-radius: 4px;
   }

   .highcharts-title tspan{
      font-size: 14px;
   }

   .spacer{
      width: 20px;
      height: 20px;
      clear: both;
   }

   .small-spacer{
      width: 30px;
      height: 20px;
      clear: both;
   }

   .attrib-msg {
      font-size: 10px;
   }

   .scroll-msg {
      font-size: 8px;
   }

   .tiny {
      font-size: 7px;
   }

   .past-chart {
      margin: 20px;
   }

   .button-style {
      height: 32px;
      margin: 10px 10px 10px 0;

      font-weight: bold;
      font-size: 11px;
      text-transform: uppercase;

      background-color: #ccc;
   }

   .haz-img {
      height: 120px; width: 180px;
   }

   a.advert-linker {
      border-width: 2px;
      border-color: #666666;
      border-style: solid;

      color: #666666;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;

      display: inline-block;
      background-color: #ffffff;
      padding: 10px;
      margin-bottom: 4px;
      cursor: pointer;
   }

   a.advert-linker:hover {
      text-decoration: none;
      background-color: #0076de;
      color: #ffffff;
      border-color: #0076de;
   }

   .advert-pic {
      float: left;
      margin: 2px 20px 4px 0px;
      height: 240px; width: 320px;
   }

   .mobile-hidden {
      display: none!important;
   }
}