zross/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>HTML5</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=650, user-scalable=yes">


    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <style>

    @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

    body {
      background: #FFFFEB;
      color: #333;
      /*font-family: "PT serif", serif;*/
      font-family: 'PT Sans', sans-serif;
      position: relative;
      width: 100%;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 4em;
      margin-left: auto;  /*width: 960px;*/
    }

    header,
    footer,
    h1,
    h2,
    h3,
    h4,#FFFFEC
    aside {
      color: #000;
      /*font-family: "Ubuntu Sans", sans-serif;*/
    }


    h1 {
      font-size: 58px;
      font-weight: 400;
      /*letter-spacing: -2px;*/
      letter-spacing: -1px; /*top right bot left*/
      /*color: #3E606F;*/
      color: #FFFFFF;
      /* [disabled]display: block; */
      /* [disabled]width: 960px; */
      margin: 0px;
    }

    h2 {
      margin: 0px;  /*margin-top: 1.5em;*/
      /* [disabled]background-color: #CC3; */
      /* [disabled]display: block; */
    }

    h1, h2 {
      text-rendering: optimizeLegibility;
    }

    h2 a {
      color: #ccc;
      left: -20px;
      position: absolute;
      width: 600px;
    }

    h3{
      margin-left: 15px;
      letter-spacing: 0.5px;
    }

    p{
      width:600px;
      margin-left: 15px;
    }

    h3~p{
      margin-left: 30px;
    }

    a {
      color: steelblue;
    }

    a:not(:hover) {
      text-decoration: none;
    }

    .topBanner {
      background-color:#457993;
      padding-top: 30px;
      padding-bottom: 30px;
      top: 0px;
      margin-bottom: 30px;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #3D4E5A;
      -moz-box-shadow: 0px 3px 2px #999;
      -webkit-box-shadow: 0px 3px 2px #999;
      box-shadow: 0px 3px 2px #999;
    }
    .bannerContent {
      width: 960px;
      margin-right: auto;
      margin-left: auto;

    }
    .bannerContent a img{
      float: left;
      left: -50px;
      position: relative;
      margin-right: 10px;
      bottom: 15px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
    }

    .map1{
      height:500px;
      width:550px;
      background-color: gray;
      position: relative;
      float:left;
    }

    .map2{
      height:500px;
      width:550px;
      background-color: gray;
      background-color:red;
      position:relative;
      float:right;
    }

    .container {
      width: 1200px;
      margin-right: auto;
      margin-left: auto;
      height: auto;
    }

    </style>

    <script>

    var map;


    $(document).ready(function(){

     var mapOptions = {
      zoom: 11,
      center: new google.maps.LatLng(40.6700, -73.9400),
        //mapTypeId: google.maps.MapTypeId.ROADMAP
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };

      map = new google.maps.Map($('.map1')[0], mapOptions);
      map2 = new google.maps.Map($('.map2')[0], mapOptions);


      google.maps.event.addListener(map, 'bounds_changed', function() {


        map2.setZoom(map.getZoom())
        map2.setCenter(map.getCenter())


      });

      google.maps.event.addListener(map2, 'bounds_changed', function() {


        map.setZoom(map2.getZoom())
        map.setCenter(map2.getCenter())


      });


  });//end document ready


    </script>

  </head>
  <body>

   <div class="topBanner">
    <div class="bannerContent"> <a href="http://www.zevross.com" target="_new"><img src="http://www.zevross.com/images/zevrosslogo_update_sm2.png" alt="ZRSA"></a>
     <h1>This is a Title</h1>
   </div>
 </div>

 <p></p>

 <div class="container">
  <div class="map1"></div>
  <div class="map2"></div>
</div>


</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=650, user-scalable=yes">


	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->


	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
	</script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

	<style>

	@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

	body {
	background: #FFFFEB;
	color: #333;
	/font-family: "PT serif", serif;/
	font-family: 'PT Sans', sans-serif;
	position: relative;
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 4em;
	margin-left: auto; /width: 960px;/
	}

	header,
	footer,
	h1,
	h2,
	h3,
	h4,#FFFFEC
	aside {
	color: #000;
	/font-family: "Ubuntu Sans", sans-serif;/
	}


	h1 {
	font-size: 58px;
	font-weight: 400;
	/letter-spacing: -2px;/
	letter-spacing: -1px; /top right bot left/
	/color: #3E606F;/
	color: #FFFFFF;
	/* [disabled]display: block; */
	/* [disabled]width: 960px; */
	margin: 0px;
	}

	h2 {
	margin: 0px; /margin-top: 1.5em;/
	/* [disabled]background-color: #CC3; */
	/* [disabled]display: block; */
	}

	h1, h2 {
	text-rendering: optimizeLegibility;
	}

	h2 a {
	color: #ccc;
	left: -20px;
	position: absolute;
	width: 600px;
	}

	h3{
	margin-left: 15px;
	letter-spacing: 0.5px;
	}

	p{
	width:600px;
	margin-left: 15px;
	}

	h3~p{
	margin-left: 30px;
	}

	a {
	color: steelblue;
	}

	a:not(:hover) {
	text-decoration: none;
	}

	.topBanner {
	background-color:#457993;
	padding-top: 30px;
	padding-bottom: 30px;
	top: 0px;
	margin-bottom: 30px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #3D4E5A;
	-moz-box-shadow: 0px 3px 2px #999;
	-webkit-box-shadow: 0px 3px 2px #999;
	box-shadow: 0px 3px 2px #999;
	}
	.bannerContent {
	width: 960px;
	margin-right: auto;
	margin-left: auto;

	}
	.bannerContent a img{
	float: left;
	left: -50px;
	position: relative;
	margin-right: 10px;
	bottom: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	}

	.map1{
	height:500px;
	width:550px;
	background-color: gray;
	position: relative;
	float:left;
	}

	.map2{
	height:500px;
	width:550px;
	background-color: gray;
	background-color:red;
	position:relative;
	float:right;
	}

	.container {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	}

	</style>

	<script>

	var map;


	$(document).ready(function(){

	var mapOptions = {
	zoom: 11,
	center: new google.maps.LatLng(40.6700, -73.9400),
	//mapTypeId: google.maps.MapTypeId.ROADMAP
	mapTypeId: google.maps.MapTypeId.TERRAIN
	};

	map = new google.maps.Map($('.map1')[0], mapOptions);
	map2 = new google.maps.Map($('.map2')[0], mapOptions);


	google.maps.event.addListener(map, 'bounds_changed', function() {


	map2.setZoom(map.getZoom())
	map2.setCenter(map.getCenter())


	});

	google.maps.event.addListener(map2, 'bounds_changed', function() {


	map.setZoom(map2.getZoom())
	map.setCenter(map2.getCenter())


	});




	});//end document ready


	</script>

	</head>
	<body>

	<div class="topBanner">
	<div class="bannerContent"> <a href="http://www.zevross.com" target="_new"><img src="http://www.zevross.com/images/zevrosslogo_update_sm2.png" alt="ZRSA"></a>
	<h1>This is a Title</h1>
	</div>
	</div>

	<p></p>

	<div class="container">
	<div class="map1"></div>
	<div class="map2"></div>
	</div>




	</html>