header.html

<!-- MOVED TO LOCALSITE -->
<style>
/*
Could use these state shapes: https://github.com/coryetzkorn/state-svg-defs
*/
.logoholder {
	background-size: 100% 100%;
	background-position:center;
	height:50px;
  	width:70px;
  	margin-top: -40px;
}

#logoholder {
  background-size: 100% 100%;
  float:left; 
}

.logoholder-state {
	background:url(img/logo/georgia-icon-on-gray.png) no-repeat;
	margin-top: 5px;
	height:50px;
  	width:70px;
}
.logoholder-modelearth {
	background-image:url(../../../community/img/logo/model-earth.png) no-repeat;
	margin-top: 15px;
	margin-right: 24px;
	height:25px; 
	width:25px;
}
.logolink:hover{
	text-decoration: none;
}
#headerLocTitleHolder {
	float:left;
	padding:10px 0 0 0px;
	font-size: 22px;
	height:45px; 
	margin-left:-16px;
	
}
.headerLocTitleHolder-state {
	margin-top: 7px;
}
#headerSiteTitle, #headerLocTitle {
	font-size: 24px;
	font-family: Helvetica !important;
	font-weight: 100;
	color: #777;
	letter-spacing: 2px;
}
#headerLocTitle {
	float:left;
	padding-top:1px;
	color:#9c9c9c;
	font-size: 22px;
}
#homeMenu {
	display: none;
	border: 1px solid #ccc;
}
#homeMenu div {
	height: 40px;
	background-color: #fff;
	padding:20px;
}
.headerbar {
	height:100px;
	background:#fff;
	border-bottom: 1px solid #eee;
	width:100%;
	position:fixed;
	overflow:visible;
	z-index:1002;
}
.headerbar-margin {
	marginX: 0 auto;
	margin-top: 22px;
}
.filters-margin {
	margin: 0 auto;
	max-width:1000px;
}
.headerDropdown {
	float:left;
	display:none;
	margin-left: 10px;
}
.headerDropdown select {
	font-size: 18px;
	color: #999;
	border: 1px #ccc solid;
	padding: 5px;
	border-radius: 4px;
}

/* HEADER */
.headerLogo {
  height:22px;
  margin:7px 10px 4px 0px
}
.upperIcons > div {
  border-left:1px solid #ddd;
  height:100px;
  padding:32px;
  padding-left:37px;
}
.upperIcons > div:hover {
  cursor: pointer;
}
#menuHolder {
  height:100%;
  position:fixed;
  right:0px;

  margin-leftX:-10px;
  overflow: auto;
  background: #fff;

  width:250px;
  margin-right:-250px;
  -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    box-sizing: border-box;
    z-index: 9999;
}
#menuTop {
  margin-left:20px;
}
#menuNav {
  margin-top:20px;
}
#menuNav a {
  display: block;
  padding-left: 40px !important;
  padding-top: 15px !important;
  min-height: 50px;
  box-sizing: border-box;
}
/*
#menuNav a:hover {
  background-color: #ddd;
}
*/
#menuNav a {
  font-size:16px;
  font-weight: 500;
  color: #ccc;
}
#menuNav a:hover {
  background-color: #000;
}


@media (max-width: 600px) {
  #menuNav a {
    font-size:20px;
  }
}
#menuHolder a {
  padding: 10px;
  text-decoration: none;
}
.hideMenu {
  margin-top:15px;
  margin-right:-20px;
  cursor:pointer;
  border: 2px solid #AEAEAE;
  border-radius: 30px;
  font-size: 32px;
  font-weight: 100;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  width: 27px;
  position: relative;
}
.hideMenu:hover {
  color:#fff;
  border-color: #fff;
}
.hideMenuInner {
  position:absolute;
  top:3px;
  left:4px;
  color:#555;
  display: none;
  font-size: 20px;
  display: inline-block;
  line-height: 17px;
}
.hideMenuInner:hover {
  color:#fff;
}
.hideMenuX:after {
  position: absolute;
  top: 10px;
  left: 2px;
  color:#aaa;
  align-content: center; /* no effect, delete */
  content: "×";
}
/* @media handheld { */
@media only screen and (max-width: 479px) { /* Since Lato font not available on Android */
  .hideMenu:after {
      top: 12px;
      left: 4px;
  }
}
/* END HEADER */

</style>

<div id="menuHolder" style="background:#333; display:none">

	<!--
	<div style="float:right;">
	      <div class="expandToFullscreen" style="border:0px; padding: 10px; cursor: pointer; color:#ccc">
	          <span style="font-size:34px;line-height:34px;padding-right:4px">&#10064;</span>
	      </div>
	      <div class="reduceFromFullscreen" style="display:none; border:0px; padding: 10px; cursor: pointer">
	          <span style="font-size:33px;line-height:34px;padding-right:4px">&#10066;</span>
	      </div>
    </div>
	-->

	<div id="menuTop">
		<div class="hideMenu"><span class="hideMenuInner" style="color:#aaa">✕</span></div>
	</div>

	
	<div id="menuNav">

		<!-- Side Nav -->

		<div class="neighborhood" style="display:none">
			<a href="../"><b>Neighborhood</b></a>
			<hr>
		</div>

		<div class="earth" style="display:none">
			<a href="../community/tools"><b><span class="siteTitleShort"></span></b></a>
		</div>
		<div class="georgia" style="display:none">
			<a href="../io/"><b><span class="siteTitleShort"></span></b></a>
		</div>

		<a href="../io/communities/">Communities</a>
		<a href="../io/coders/">Coders & Designers</a>
		<a href="../io/learn/">Teachers & Students</a>	

		<a href="../io/projects">Summer Projects</a>
		

		<!--<a href="start/dataset">Goods & Services</a>-->
		
		<hr>
		<a href="../community/challenge/"><b>Web Challenge</b></a>
		<a href="../community/start/">Starter Samples</a>
		<a href="../community/start/maps/">Map Samples</a>
		<a href="../community/start/charts/">Chart Starters</a>
		<!--
		<a href="start/maps/counties/counties.html">Regions & Counties</a>
		-->

		<div class="earth" style="display:none">
			<a href="../community/zip/leaflet/#columns=JobsAgriculture:50;JobsManufacturing:50">Industry Mix</a>
		</div>
		<hr>

		<!--
		<a href="https://github.com/modelearth/community" target="_parent"><b>Git Involved!</b></a> 
		-->
		<a href="../localsite/info/input/" target="_parent">Send Input</a>

	</div>
</div>

<div class="headerbar headerbarheight">

	<div class="upperIcons" style="float:right;">
		<div class="showSearch local" style="display:none;float:left">
			<!-- To do: use javascript to retain the current window.location.search value from URL when on a search page. -->
			<a href="../localsite/info/" style="text-decoration:none"><div style="font-size:18pt;padding:2px 4px 0 2px;">&#128269;</div></a>
		</div>

		<div style="float:left;">
		      <div class="expandToFullscreen" style="border:0px; padding: 3px 3px; cursor: pointer;">
		          <span style="font-size:34px;line-height:34px;padding-right:4px; color:#555">&#10064;</span>
		      </div>
		      <div class="reduceFromFullscreen" style="display:none; border:0px; padding: 3px 3px; cursor: pointer">
		          <span style="font-size:33px;line-height:34px;padding-right:4px; color:#555">&#10066;</span>
		      </div>
	    </div>

		<!--
		<div class="showApps local" style="display:none; float:left;">
			<i class="material-icons" style="font-size:30px; color:#ccc; padding:5px 4px 4px 0px">&#xE5C3;</i>
		</div>
		-->

		<div class="showMenu" style="float:left;font-size:24px; color:#999;">
			<div style="font-size: 28px; color:#999; padding: 2px 6px 0 2px; margin-top:-5px">☰</div>
		</div>
	</div>

	<div class="contentpadding headerbar-margin" style="padding-top:0px">
		<div id="logospace" style="line-height:32px; margin-left:-19px">
			<a href="" id="logoholder"></a>

			<div style="display:none; float:left; padding:8px 20px 0 20px">

				
				<div style="font-size: 22px">
					<a href="" class="logolink" style="display:none; color:#777; line-height:32px">

						<!-- Resides in navigation.js -->
						<span style="color:#555">model</span><span style="color:#999">earth1</span> 

						<span style="display:none;color:#999">Georgia</span> 
						<span style="display:none;color:#777">IO</span>
						<!--
						<span style="color:#777">LaGrange,</span> <span style="color:#999">Georgia</span>
						-->
					</a>
				</div>
				

				<div style="font-size: 24px; border-right:1px solid #ccc;"><a href="" class="logolink" style="color:#999; line-height:30px">model<span style="color:#777">georgia</span></a></div>
				
				
				<!--
				<div style="font-size: 24px"><a href="" class="logolink" style="color:#999; line-height:30px">model<span style="color:#777">earth</span></a></div>
				-->

				<!--
				<a href=""><img class="headerLogo" src="img/logo/modelgeorgia.png" /></a>
				-->
			</div>
			<div id="headerLocTitleHolder">

					<span id="headerSiteTitle"></span>
					<div style="padding-top:8px; float:right; display:none" class="mock-up">
						<div class="arrowdown"></div>
					</div>
					<div class="headerDropdown mock-up">
						<span class='arrownext' style='margin:10px 10px 0 10px'></span>
						<select id="state_select" name="state" class="picklist">
					       <option value='AL'>Alabama</option>
					       <option value='AK'>Alaska</option>
					       <option value='AZ'>Arizona</option>
					       <option value='AR'>Arkansas</option>
					       <option value='CA'>California</option>
					       <option value='CO'>Colorado</option>
					       <option value='CT'>Connecticut</option>
					       <option value='DE'>Delaware</option>
					       <option value='DC'>District of Columbia</option>
					       <option value='FL'>Florida</option>
					       <option value='GA' selected>Georgia</option>
					       <option value='HI'>Hawaii</option>
					       <option value='ID'>Idaho</option>
					       <option value='IL'>Illinois</option>
					       <option value='IN'>Indiana</option>
					       <option value='IA'>Iowa</option>
					       <option value='KS'>Kansas</option>
					       <option value='KY'>Kentucky</option>
					       <option value='LA'>Louisiana</option>
					       <option value='ME'>Maine</option>
					       <option value='MD'>Maryland</option>
					       <option value='MA'>Massachusetts</option>
					       <option value='MI'>Michigan</option>
					       <option value='MN'>Minnesota</option>
					       <option value='MS'>Mississippi</option>
					       <option value='MO'>Missouri</option>
					       <option value='MT'>Montana</option>
					       <option value='NE'>Nebraska</option>
					       <option value='NV'>Nevada</option>
					       <option value='NH'>New Hampshire</option>
					       <option value='NJ'>New Jersey</option>
					       <option value='NM'>New Mexico</option>
					       <option value='NY'>New York</option>
					       <option value='NC'>North Carolina</option>
					       <option value='ND'>North Dakota</option>
					       <option value='OH'>Ohio</option>
					       <option value='OK'>Oklahoma</option>
					       <option value='OR'>Oregon</option>
					       <option value='PA'>Pennsylvania</option>
					       <option value='RI'>Rhode Island</option>
					       <option value='SC'>South Carolina</option>
					       <option value='SD'>South Dakota</option>
					       <option value='TN'>Tennessee</option>
					       <option value='TX'>Texas</option>
					       <option value='UT'>Utah</option>
					       <option value='VT'>Vermont</option>
					       <option value='VA'>Virginia</option>
					       <option value='WA'>Washington</option>
					       <option value='WV'>West Virginia</option>
					       <option value='WI'>Wisconsin</option>
					       <option value='WY'>Wyoming</option>
					     </select>

					</div>
					<a href="../community/tools" class="logolink">
					<span id="headerLocTitle"></span>
					</a>
			</div>
		</div>
		
		<div id="homeMenu" style="position:absolute">
			<div>Georgia Communities</div>
			<div>United States</div>
		</div>

		
	</div>
</div>
<!-- Also update headerbar and headerOffset -->
<div class="headerbarheight" style="height:100px;"></div>

<script>
$(document).ready(function () {
    $('.expandToFullscreen, .reduceFromFullscreen').click(function(event) {
    	toggleFullScreen();  
    });
});
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    // Only if video is not visible. Otherwise become black.
    $('.moduleBackground').css({'z-index':'0'});   
    $('.expandFullScreen span').text("Shrink");
    // To do: Change icon to &#xE5D1;
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }
    $('.expandToFullscreen').hide();
    $('.reduceFromFullscreen').show(); 
  } else {
    
    $('.moduleBackground').css({'z-index':'-1'}); // Allows video to overlap.
    $('.expandFullScreen span').text("Expand");
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }
    $('.reduceFromFullscreen').hide();
    $('.expandToFullscreen').show();
  }
}

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/

/* Avoiding because disqus places doubleclick cookie */
/* Uncomment to reactivate
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://locally.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
*/
</script>