@font-face {
  font-family: 'FontAwesome';
  src: url('../../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

* { margin:0; padding : 0;   } 
body { max-width: 600px; position: relative; font-family: 'PT Sans' ; font-size: 14px;  }
#map-canvas { max-width: 600px; height: 350px; position: relative; overflow: hidden; }
.wrapper {
	position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.68);  }
#type {    position: absolute;
    top: 0;
    padding: 10px 0;    display: block;    right: 10px;;}
#type input { margin-right: 5px;   }
.time1 { background: url( ../grey.png)  0 0 no-repeat; }
.time2 { background: url( ../deepblue.png)  0 0 no-repeat; }
.time3 { background: url( ../purple.png)  0 0 no-repeat; }
.time4 { background: url( ../lightblue.png)  0 0 no-repeat; }
.time5 { background: url( ../brown.png)  0 0 no-repeat; }
.time6 { background: url( ../red.png)  0 0 no-repeat; }
.lengend-wrapper {
  position: absolute;;
  left: 10px;
  background: rgba(255, 255, 255, 0.75);
  padding: 5px;
  text-align: center;
  top: 110px;;}
  .lengend-wrapper label { 
    font-size: 12px; 
    text-align: center;
 }
 .style3 { color: #666; font-size: 12px; font-weight: 100; }