html, body { height: 100%; width: 100%; margin: 0; padding: 0;     background-color: #004699;}
  #map { height: 100%; width: 100%; margin: 0; padding: 3;background-color: #B5DAEA; }
  #meta {
    position: absolute;
    left: 80px;
    top: 21px;
    width: 210px;
    height: 222px;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: arial;
    font-size: 0.9em;
  }
.hover{
    width:500px;
    height:500px;
    background-color:#ccc;
    color:#333;
    opacity: .2;
}
.hover:hover{
    opacity: 1;
}
.cartInfo {
        border: 1px solid #b5bcc7;
    background: #F1ECEC;
    padding-top: 4px;
    margin: auto;
    font-size: 0.7em;
    font-family: arial;
    display: flex;
         justify-content: center;
}
#controls{
	margin: auto;
    padding: 5px;
    background-color: #F1ECEC;
}
#mapbox {
 height: 66%;
margin: auto;
 border:solid 1px silver;
	position:  relative;
}
#L2calendar_result {
    position: relative;
    left: 30%;
    top: 5px;
    width: 430px;
    z-index: 40;
    color: #555;
    background-color: #B5DAEA;
    font-family: arial;
    font-size: 0.9em;
  }
   #coordsInfo {
   /* position: relative;
 *     left: 30%;
 *         bottom: 5px;
 *             width: 130px;
 *                 z-index: 40;
 *                     color: #555;
 *                         background-color: #B5DAEA;
 *                             font-family: arial;
 *                                 font-size: 0.9em;*/
     position:absolute;
        left:5px;
        bottom:5px;
        font-family:"Helvetica";
        font-weight:800;
        color:#333399;
        z-index:50;
  }
  #map_legend {
    position: relative;
  //  right: 20%;
   top: 4px;
    width: 360px;
    z-index: 60;
    color: #555;
    background-color: #B5DAEA;
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading {
    float: right;
  }
  #banner {
        float: left;
        font-family: arial;
   font-size: 2.0em;
   vertical-align: middle;
  }
  img.logo {
   float: left;
        width: 86px;
        height: 81px;
        vertical-align: text-middle;
  }


#middle {
        width: 1190px; /* Account for margins + border values 93% */
        //float: left;
        padding: 5px;
        margin: auto;
     
            background-color: white;
}

#sidebar {
        width: 290px;
        padding: 5px 15px;
        float: left;
}
  #rightfloat { float: right; font-size: 0.8em; }
  #leftfloat { float: left; border: none; height: 75px; }

  #map .logo-med {
                background-image: url('https://www.star.nesdis.noaa.gov/sod/mecb/coastwatch/L2demo/S2/logo/noaa_copernicus_trans_sm.png')  !important;
                height: 125px;
                width: 125px !important;
                z-index: 30;
                display: inline-block;
        background-color: white;
        border-radius:  10px;
        }
        #map #loading {
    position:absolute;
     right:512px;
      top:256px;
       z-index:100;
  }