/* Page Specific CSS */

body {font-family: 'Lato', sans-serif; background: #fff; color: #333; font-size: 16px; margin: 0px; padding: 0px;}
h1 {font-size: 40px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px; text-align: center;}
h2 {font-size: 30px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px 0px;}
h3 {font-family: 'Acme', sans-serif; font-size: 24px; margin: 10px 0px;}
h4 {font-family: 'Lato', sans-serif; font-size: 20px;}

img {width: 100%;} 
p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 1px #FD9393 solid;}
a:hover {color: #47CCFC;}
small {padding: 10px 0px; font-size: 10px;}
p {margin: 0px; padding: 0px; font-size: 12px;}
li {line-height: 19px; font-size: 12px;}
ol {line-height: 24px;}

#map a {border: none;}
.mapboxgl-popup-content {font-family: 'Lato', sans-serif; font-size: 14px; padding: 10px;}

ul.nav {list-style: none; margin: 0px; padding: 10px; text-align: center;}
ul.nav li {display: inline; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-right: 4px;}
ul.nav li h2 {font-family: 'Lato'; display: inline; font-size: 10px; letter-spacing: .1em;}
ul.nav li a {border: none;}
ul.nav li a:hover {border-bottom: 1px #FD9393 solid;}
#viewInfo {cursor: pointer;}

#selected {padding: 5px 10px; display: none}
#selected .description {font-size: 14px; padding: 4px 0px; line-height: 19px;}
#selected ul {list-style: none; margin: 15px 0px; padding: 0px;}

#siteInfo {padding: 5px 10px;}
#siteInfo p {font-size: 14px; padding: 4px; line-height: 19px;}

.store-details {text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding-right: 6px;}
.address {color: #FF4646; text-transform: uppercase; font-weight: 700;}

@media screen and (min-width: 750px) {
  #map {
    height: 100%;
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
  }

  .floater {
    border-radius: 4px;
    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
    background: white;
    width: 390px;
  }
  .top-right {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom:0px;
    max-width:400px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
  }
  #header_block {
    margin: 10px 10px 5px;
    float: right;
    pointer-events: initial
  }
  #info_wrapper {
    margin: 5px 10px 5px;
    float: right;
    pointer-events: initial
  }

  #Stores {
    margin: 5px 10px 5px;
    float: right;
    pointer-events: initial;
    overflow: scroll;
    bottom: 10px;
    height: 400px;
  }
  #Stores table {
    table-layout: fixed;
  }
  #Stores tr {
    cursor: pointer;
    font-size:14px;
  }
  #Stores tr td {
    padding: 2px 10px;
    width: 50%;
  }
}

@media screen and (max-width: 750px) {
  h1 {font-size: 30px; padding-top: 5px;}
  h2 {font-size: 20px;}

  ul.nav {padding: 0px 10px; line-height: .5;}
  ul.nav li h2 {display: none;}

  #map {
    height: 20%;
    width: 100%;
  }
  .mapboxgl-ctrl-top-left {
    display: none;
  }
  .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
    margin: 0;
  }
  .mapboxgl-ctrl-logo {
    transform: scale(.75,.75);
  }
  #header_block {
    margin: 0px;
  }
  #info_wrapper {
    margin: 0px;
    bottom: 0px;
    overflow: scroll;
  }
  #selected {
    padding: 10px 10px;
  }
  #Stores {
    margin: 0px;
    overflow: scroll;
    height: 25%;
  }
  #Stores table {
    table-layout: fixed;
  }
  #Stores tr {
    cursor: pointer; font-size: 13px;
  }
  #Stores tr td {
    padding: 2px 10px;
    width: 50%;
  }
}