html {height: 100%}
  body {margin: 0; padding: 0; height: 100%}
    
    .map-container {height: 100%; position: relative; box-sizing: border-box; width: 925px; height: 600px; margin: 0 auto}
    .map-container * {font-family: arial, sans-serif; text-transform: uppercase}
    
    #map-canvas {height: 100%; box-sizing: border-box}
      #map-canvas .infoBox {box-sizing: border-box; background-color: #fff; padding: 35px 15px 15px 15px; background: transparent url(../images/info-box.png) 0 0 no-repeat}
        #map-canvas span.city-name {display: block; font-weight: bold; color: #000; text-transform: uppercase}
        #map-canvas span.data {display: block; color: #000; margin-top: 5px}
    
    .legend-wrapper {box-sizing: border-box; position: absolute; bottom: 0; right: 0; padding: 123px 10px 30px 20px; height: 100%; width: 225px; background: #fff url(../images/map-header.png) 0 0 no-repeat; overflow: hidden}
      .legend-wrapper h3 {margin-top: 0}
      #legend {box-sizing: border-box; overflow: scroll; overflow-x: hidden; height: 100%}
        #legend div {}
        #legend div:last-child {margin-bottom: 30px}
          #legend div span {display: block; font-size: 12px; line-height: 23px}