<style type="text/css">
.outer {padding: 10px;background-color: #2A405F;font-family:"Lucida Grande", "Arial", sans-serif !important;}
.outer:before,
.outer:after {content: " ";display: table;}
.outer:after {clear: both;}
.inner {position: relative;min-height: 1px;padding-right: 10px;padding-left: 10px;background: #fff;border: 10px solid #e4e4e4;}
@media (min-width: 768px) {
  .inner {float: left;width: 100%;}
}

</style>
<div id="content" >
    <div class="outer">
        <div style="float:left;width:20%">
            <div class="inner" style="height:420px; border-right:thin; overflow-y:auto!important; overflow-x:hidden;">
                
                <div style="clear:both"></div>
                <!-- sidebar -->
                 <div id="customersList">
                    <div id="tree_loader">                    
                        <img src="<?php echo base_url(); ?>assets/ajax-loader.gif" height="50px" width="50px" align="center" />
                    </div>
                    <ul id="customerTree" class="ztree">
                    </ul>
               	</div>
                <!-- end of sidebar -->
              </div>
            <div class="inner" style="height:190px;overflow-y: auto!important; border-right:thin; border-top: thin;font-size: 14px !important;" id="detailvehicle">
            </div>
    </div> <!-- end of left div -->
    <div class="inner" style="float:right;width: 74.7%;height: 630px;">
           <!-- content put here -->
           <div  id="divMap"> </div>

            <!--  end of content -->
         </div><!-- /.inner -->
    </div><!-- /.outer -->
</div><!-- /#content -->

<!-- Tree Scripts -->

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/tree_view/map.css">    
<script type="text/javascript" src="<?php echo base_url(); ?>assets/all.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM"></script>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript"  src="<?php echo base_url(); ?>assets/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"  src="<?php echo base_url(); ?>assets/ztree/jquery.ztree.excheck-3.5.js"></script>
<!-- End-->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/markerwithlabel.js"></script> 
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/showGoogleMap.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/getDatabaseInfo.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/app.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/tracking.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/customer-tree.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/vehicle.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/common.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/tree_view/map.js"></script>
<script>

    var g_mapType = 0;
    g_interval = 30;
</script>      

