body {
        margin: 0px 5px;
    }
    h2#mapTitle {
        font-family: ArchivoNarrow, sans-serif, Arial , Verdana, Lucida Console, Courier, monospace;
        font-size: 30px;
        margin-top: 12px;
        margin-bottom: 14px;
        padding-top: 5px;
    }


    #loading {
        width:350px;
        padding-top:10px;
        text-align:center;
    }

    .loader {
        /*position: relative;*/
    }


    .double-pulse {
         position: absolute;
         top: 0;
         left: 0;
      /* width: 5rem;
         height: 5rem;*/
         width: 95px;
         height: 95px;
         margin: 0 auto;
         border-radius: 100%;
         background-color: blue;
         opacity: .4;
         animation: double-pulse 1.5s infinite ease-out;
	     z-index: 99;
    }
    .double-pulse:nth-of-type(2) {
         animation-delay: -350ms;
    }
    @keyframes double-pulse {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }


    #controls {
        height:auto;
        width:95%;
        padding:10px 10px 8px 10px;
        margin: 10px auto 10px auto;
        border:solid silver 1px;
    }

    #controls div {
         margin-left:10px;
         width:auto;
         height:auto;
         padding:4px;
         border:solid silver 1px;
         border-radius:3px;
         display:inline;
    }

    #staInfoHead {
        margin: 4px auto 4px auto;
    }

    #mapandlist {
        height: 335px;
        width: 100%;
        display: inline;
    }

    #gmap {
        height: 380px;
        width: 64%;
        float:left;
    }

    #backtomap {
        border-radius: 14px;
        margin-left: 25px;
    }



    @font-face {
        font-family: 'ArchivoBlack';
        font-weight: normal;
        src: url('fonts/ArchivoBlack-Regular.eot'); /* IE */
        src: url('fonts/ArchivoBlack-Regular.ttf') format('truetype'),
             url('fonts/ArchivoBlack-Regular.woff') format('woff'),
             url('fonts/ArchivoBlack.otf') format('opentype');
    }
    @font-face {
        font-family: 'ArchivoNarrow';
        font-weight: normal;
        src: url('fonts/ArchivoNarrow-Regular.eot'); /* IE */
        src: url('fonts/ArchivoNarrow-Regular.ttf') format('truetype'),
             url('fonts/ArchivoNarrow-Regular.woff') format('woff'),
             url('fonts/ArchivoNarrow-Regular.otf') format('opentype');
    }

    #stationlist {
        float: right;
        height: auto;
        width: 35%;
        border: 1px solid black; 
        border-top: 0px solid black;
        margin: 0px;
        font-family: 'ArchivoNarrow', sans-serif;*/
    }

    #stationlist tr:hover, tr.hovered {
        background-color: rgb(200, 200, 255)!important;
    }
    #stationlist table {
        -webkit-border-horizontal-spacing:0px;
        -webkit-border-vertical-spacing:0px;
        border-collapse: collapse;
        /*font-family: Avenir Next Condensed, Lucida Console, Courier, monospace;
        font-family: 'Roboto Condensed', sans-serif;*/
        font-family: 'ArchivoNarrow', sans-serif;*/
    }
    #stationlist  td:first-child  {  /* station codes */
        border-collapse: collapse;
        padding-left: 4px;
        padding-right: 4px;
        font-family: ArchivoNarrow, Arial Black , Verdana, Lucida Console, Courier, monospace;
        font-size: 18px;
        /*font-style: bold;*/
        /*-webkit-text-stroke: 1px black;*/
        color: white!important;
        -webkit-print-color-adjust: exact;
        text-shadow: 1px 1px 2px black;
    }
    #stationlist td:nth-child(2n) {  /* station locations */
        font-style:bold;
        font-size:16px;
        padding-left: 5px;
        color: black
    }
    #stationlist p {  /* station closest... caption */
        margin: 5px 5px 1px auto;
        float: right;
        font-style:italic;
        font-size:14px;
    }

    /* remainder here is used by map.phtml, should move to own CSS file: */

    #msgs  {
        color: black;
        font-size: 2em;
        font-family: 'ArchivoNarrow', sans-serif;
        font-style: italic;
        background-color: lightgrey;
        /*width: 950px;*/
        width: 100%;
    }

    #agelegend {
        font-size: 24px;
        background-color: lightgrey;
        width: 100%;
    }

    /* is all inline style, this breaks in iOS
    .spectrumSpan {
        display:inline-block;
        height: 20px;
        width: 0.5%;
    }
    */
    @media screen and (max-width: 700px) {
        .legLabel {
            font-size: 16px;
        }
        .spectrumSpan {
            width: 1.5%;
        }
    }
    @media screen and (max-width: 840px) {
        h2#mapTitle {
            font-size: 24px;
        }
    }
    @media screen and (max-width: 600px) {
        h2#mapTitle {
            font-size: 18px;
        }
    }


    #gmap > div.leaflet-control-container > div:nth-child(4) > div {
        font-size: 8px;
        text-align: match-parent;
    }