#map-cont .year, #map-cont #year_container {
  position:absolute;
  top:0px;
}
#map-cont .year{
  left: 0px;
}

#map-cont #year_container {
  position: absolute;
  right: 0px;
  top:0;
  font-family: helvetica;
  font-size: 24px;
  background-color: #fff;
  background: rgba(255, 255, 255, 0.8);

  padding: 5px 8px 5px 8px;
  display:block;
  font-weight:bold;
  border: 1px solid #cecece;
  width: 300px;
}
#map-cont #instructions {
  font-size:12px;
  font-weight:normal;
  float:left;
  margin-left:15px;
  border-left:1px solid #cecece;
  padding-left:15px;
  width: 162px;
}
#map-cont #instructions img {
  margin-bottom:4px;
}
#map-cont #year {
  float:left;
  width: 52px;
}

.pt {
  position: absolute;
  font-size: 10px;
  font-family:"arial", "helvetica";
  opacity: 1;
  padding: 1px 5px;
  text-shadow: 1px 1px 6px white;
  background-color: rgba(240, 240, 240, 0.4);
}

#map-cont {
  position: relative;
  width: 630px;
  height: 400px;
  cursor:pointer;
}

#map-cont #legend  {
  position: absolute;
  left: 0px;
  bottom: 0px;
  font-size: 11px;
  font-family: "helvetica";
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  width: 94px;
  z-index:10000;
  border: 1px solid #cecece;
}

#map-cont #legend div.break { width: 5px; height:10px; float: left; margin-top: 1px;}
#map-cont #legend span { width: 87px; float: right; }
#map-cont .break-5  { background-color:#ece7f2; }
#map-cont .break-15 { background-color:#a6bddb; }
#map-cont .break-30 { background-color:#74a9cf; }
#map-cont .break-45 { background-color:#3690c0; }
#map-cont .break-60 { background-color:#0570b0; }
#map-cont #legend .line {overflow: hidden; display:block; width: 100%;}
#map-cont .year { display:none; }

@media screen and (max-width: 480px) {
  #map-cont {width: 300px; height: 190px; padding-top: 55px;}
  #map-cont .year { padding-top: 55px; }
  #map-cont #year_container { width: 282px; }
}