#map {            
                width:648px;
                height: 395px;
                border:1px solid black;
            }            

            #map_footer {
                width: 628px;
                text-align:left;
                font: black;            
                font-size:14pt;
                margin-top:20px;
                margin-bottom:20px;
                padding: 0 10px;
                background-color:#fff;
                border:1px solid #000;
                color:#000;
              }

            #map_footer p {
                margin-top: 10px;
                margin-bottom: 10px;
            }

            #map_footer span {
                display: block;
                margin-bottom: 5px;
            }
    
            .layer circle {
                fill: #FF9E73;
                fill-opacity: .8;
                stroke: #FF4F00;
                stroke-width: 1.5px;
            }

            .compass .back {
              fill: #FF9E73;
              fill-opacity: .8;
            }

            .compass .fore {
              stroke: #FF4F00;
              stroke-width: 1.5px;
            }

            .compass rect.back.fore {
              fill: #FF9E73;
              fill-opacity: .3;
              stroke: #FF4F00;
              stroke-width: 1px;
              shape-rendering: crispEdges;
            }

            .compass .direction {
              fill: none;
            }

            .compass .chevron {
              fill: none;
              stroke: #FF4F00;
              stroke-width: 5px;
            }

            .compass .zoom .chevron {
              stroke-width: 4px;
            }

            .compass .active .chevron, .compass .chevron.active {
              stroke: #fff;
            }

            .compass.active .active .direction {
              fill: #FF4F00;
            }