<style type="text/css">
#map_canvas {
	height: 800px;
	width: 100%;
}
    #wrapper {
	margin: 0 auto;
	max-width: 100%;
}

    #nav_wrapperMapit > NAV UL {
        opacity:0.4;
	background: #39a9a4;
	background: rgb(57,169,164);
	background: rgba(57,169,164, 0.95);
	color: #fff;
	position: absolute;
	right: 0;
	text-align: left;
	width: 400px;
	z-index: 99; 
        padding-left: 40px;
        padding-bottom: 15px;
        transition: opacity 0.2s linear;
}
#nav_wrapperMapit > NAV UL:hover {
    opacity:1;
    
    }
#nav_wrapperMapit > NAV UL LI STRONG {
	display: block;
	font-size: 18px;
	margin-top: 15px;
}

#nav_wrapperMapit > NAV UL LI A {
    cursor: pointer;
	color: white;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 14px;
	margin-left: -4px;
	padding: 0 5px;
	vertical-align: middle;
}

#nav_wrapperMapit > NAV UL LI A:hover {
	color: #e1704b;
	text-decoration: none;
}
</style>
<div id="wrapper">
    <div id="nav_wrapperMapit">
        <nav>
            <ul class="vertical">

                <li><strong><?php print CommonLanguage::getMessage('points_of_interest');?></strong></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('show', '1')"><?php print CommonLanguage::getMessage('zone_one_customers');?></a></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('show', '2')"><?php print CommonLanguage::getMessage('zone_two_customers');?></a></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('show', '2')"><?php print CommonLanguage::getMessage('zone_three_customers');?></a></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('show', '2')"><?php print CommonLanguage::getMessage('zone_four_customers');?></a></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('show', '2')"><?php print CommonLanguage::getMessage('zone_five_customers');?></a></li>
                <li><strong>Controls</strong></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('hide_all')"><?php print CommonLanguage::getMessage('hide_all_markers');?></a></li>
                <li><a onclick="javascript:$('#map_canvas').trigger('reset')"><?php print CommonLanguage::getMessage('reset_map');?></a></li>
            </ul>
        </nav>
    </div>

    <div id="map_canvas"></div>
</div>
<!-- JS -->
<script type="text/javascript" src="<?php echo JS_PATH; ?>jquery.mapit.js"></script>
<script src="<?php echo JS_PATH; ?>initializers.js"></script>
<!-- JS ends -->