/* Map Tooltip */
.map_tooltip{
  display:none;
  padding:10px;
  border-radius: 5px;
  color : #fff;
  background-color: rgba(50, 50, 50, 0.5);
}

/* Map Controls */
.map_controls {
  color: white;
  text-align: center;
}
.map_controls .wi {
  font-size: 50px;
  padding: 10px;
}
.map_controls .btn-great {
  margin-top:10px;
  padding: 8px 35px;
}
.map_controls a.other-map i{
  background-color: rgba(255,255,255, 0.1);
  border-radius: 100px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  margin: 15px 5px;
  padding: 10px 0px;
}
.map_controls a.other-map i:hover{
  box-shadow: 0 1px 3px inherit, 0 1px 7px inherit; /* Color handled by inline style or specific page css */
}

/* Overlay Buttons */
#cloud_overlay_btn, #rain_overlay_btn, #temperatures_overlay_btn, #wind_overlay_btn{
  margin-bottom:10px;
  color: #666;
  font-size: 18px;
  padding: 3px 6px;
  cursor:pointer;
}

/* Legends */
.legend > div .wi{
  font-size : inherit;
}
.legend > div .fa, .legend > div .wi{
  color: #FFF;
  padding: 6px 0px;
  width: 31px;
  background-color: rgba(51,51,51,0.9);
  border-radius: 100px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.legend > div{
  padding: 2px;
}
.legend > div .fa:hover, .legend > div .wi:hover{
  box-shadow: 0 3px 6px rgba(0,0,0,0.20), 0 3px 6px rgba(0,0,0,0.30);
  transform: scale(1.1);
}
.legend label,
.legend span {
  display:block;
  float:left;
  height:10px;
  width:13.9%;
  text-align:center;
  font-size:9px;
  margin-top:5px;
  color:white;
}
.wind span,
.wind label{
  width:20%;
}
.map-legends{
  background: none;
  box-shadow:none;
  border-bottom : 1px solid white;
  border-left : 1px solid white;
}
.table_legend{
  float:right;
}
.table_legend td{
  font-size: 10px;
  line-height: 100%;
  color: white;
  font-weight: bold;
  text-align:center;
  height: 20px;
  padding: 5px;
}
.table_legend td .wi{
  font-size: 12px;
}

/* Background Colors */
.bg-sunny { background: rgba(255, 204, 10, 0.7); }
.bg-clear { background: rgba(178, 161, 96, 0.7); }
.bg-cloudy { background: rgba(140, 140, 140, 0.7); }
.bg-overcast { background: rgba(48, 48, 48, 0.7); }
.bg-rain-light { background: rgba(10, 55, 109, 0.7); }
.bg-rain-showers { background: rgba(70, 37, 85, 0.7); }
.bg-rain-heavy { background: rgba(201, 0, 33, 0.7); }
.bg-temp-unit { background: rgba(255, 255, 255, 0.7); color: #666; }
.bg-temp-n10 { background: rgba(119, 214, 255, 0.7); }
.bg-temp-0 { background: rgba(255, 255, 255, 0.7); color: #666; }
.bg-temp-10 { background: rgba(255, 191, 191, 0.7); }
.bg-temp-20 { background: rgba(255, 127, 127, 0.7); }
.bg-temp-30 { background: rgba(255, 63, 63, 0.7); }
.bg-temp-40 { background: rgba(255, 0, 0, 0.7); }
.bg-wind-unit { background: rgba(100, 209, 145, 0.7); }
.bg-wind-20 { background: rgba(100, 209, 145, 0.7); }
.bg-wind-35 { background: rgba(177, 187, 77, 0.7); }
.bg-wind-50 { background: rgba(255, 165, 9, 0.7); }
.bg-wind-65 { background: rgba(255, 87, 19, 0.7); }
.bg-wind-80 { background: rgba(255, 10, 30, 0.7); }

/* Responsive */
@media (max-width: 767px){
  .map_controls a.other-map i{
    margin: 15px 1px;
    padding: 6px 0px;
  }
}
@media (min-width: 768px){
  #cloud_overlay_btn, #rain_overlay_btn, #temperatures_overlay_btn, #wind_overlay_btn {
    font-size: 24px;
    padding: 5px 10px;
  }
  .legend > div .fa, .legend > div .wi{
    padding: 12px 0px;
    width: 48px;
  }
  .map_controls .wi{
    font-size: 50px;
    padding: 10px;
  }
  .map_controls .btn-great{
    padding: 8px 35px;
  }
}