header.html

<style>
/*
Could use these state shapes: https://github.com/coryetzkorn/state-svg-defs
*/
#local-header {
	min-height: auto !important; /* Removed min-height 56px set for map-filters bar. */
}
</style>

<div id="menuHolder" style="pointer-events: auto; 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 style="clearX:both"></div>
	
	<div id="menuNav">

		<!-- Right Links -->
        <div style="padding-top:10px;" class="local hideMobile">
          
          <!-- move to naics section
          <div class="local downloadbutton showDownload pagebutton" href="#" style="float:left; display:none">
            
            <div style="float:left">
              <i class="material-icons" style="font-size:15pt;padding-top:8px">&#xE2C4;</i>
            </div>
            
            <div class="downloadtext" style="margin:10px 5px 0 3px;white-space: nowrap; float:left"> 
            Download
            </div>
          </div>
          -->
          
        <!--
        <div class="local addlisting pagebutton greenbutton" href="#" style="float:left; display:none">
          
          <div class="hideMobile" style="margin:10px 5px 0 3px;white-space: nowrap; float:left"> 
          Add Listing
          </div>
          <div class="showMobile" style="display:none;"><i class="material-icons" style="font-size:19pt;padding-top:4px">&#xE145;</i></div>

        </div>
        <div class="local partnertools pagebutton" href="#" style="float:left; display:none">
          <div style="margin:10px 5px 0 3px;white-space: nowrap; float:left"> 
          Partner Tools
          </div>
        </div>
        -->

        <div class="showInfo showInfoButton1 pagebutton" style="float: left; padding: 3px 3px 3px 4px; color:#fff; display:none;"><i class="material-icons" style="font-size:28px;">&#xE88F;</i>
        </div>

        <div class="showApps local" style="display:none;float:left;">
          	<div style="display:none" class="showMobile">
          	<i class="material-icons georgiaorg-hide" style="color:#fff">&#xE5C3;</i>
      	  	</div>
        </div>
      </div>
      <!-- /Right Links -->



		<!-- 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/"><b><span class="siteTitleShort"></span></b></a>
		</div>
		<div class="georgia" style="display:none">
			<a href="../"><b><span class="siteTitleShort"></span></b></a>
		</div>

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

		<!--<a href="start/dataset">Goods & Services</a>-->
		
		<hr>
		<a href="../community/challenge/"><b>Web Challenge</b></a>
		<a href="../community/projects/">Project Areas</a>
		<a href="../localsite/info/">Local Industries</a>
		<a href="../community/start/">Starter Samples</a>
		<a href="../io/charts/">IO Widgets</a>
		<a href="../community/challenge/meetups/">Meetups & Slack</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>
		-->
		<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 id="headerbar" class="headerbar headerbarheight" style="border-bottom:1px solid #ccc; width:100%;position:fixed;overflow:visible;z-index:1002;pointer-events:auto;">

	<div class="contentpadding" style="padding-top:0px; padding-bottom:0px; float:left; min-width: 200px">
		<div id="logospace" class="headerbarheight">
			<div id="logoholder">
				
				<div id="headerLogo">
				</div>
				
				<div id="headerLocTitleHolder">
					<span id="headerSiteTitle"></span>
					
					<a href="../community/tools" class="logolink">
					<span id="headerLocTitle"></span>
					</a>
				</div>

			</div>
		</div>		
	</div>

	<div style="float:left; border-left:1px solid #ccc;">
		<style>
			.topstack {
				float:left;
				
				padding-right: 10px;
				padding:18px;
				border-right:1px solid #ccc;
			}
			.topsm {
				font-size: 11px;
				float: left;
			}
			.toplg {
				clear:both;
				font-size: 17px;
				color: #686868;
			}
			.arrow_down_sm {
			    width: 0;
			    height: 0;
			    border-left: 4px solid transparent;
			    border-right: 4px solid transparent;
			    border-top: 4px solid #999;
			    margin: 4px;
			    float: left;
			    pointer-events: auto;
			}

		</style>
		<div class="localX" style="display:none">
			<div class="hideMobile">
				<div class="topstack">
					<div class="topsm">Locations</div><div class="arrow_down_sm"></div>
					<div class="toplg">3 counties in Arizona</div>
				</div>

				<div class="topstack">
					<div class="topsm">Goods & Services</div><div class="arrow_down_sm"></div>
					<div class="toplg">Recycling Industries</div>
				</div>

				<div class="topstack">
					<div class="topsm">Project Teams</div><div class="arrow_down_sm"></div>
					<div class="toplg">React Developers</div>
				</div>
			</div>
		</div>
	</div>

	<div class="upperIcons noprint" style="float:right;">
		<div class="local" style="display:none; float:left">
		<div class="showSearch">
			<!-- To do: use javascript to retain the current window.location.search value from URL when on a search page. 
			add -active rollover
			-->
			<img src="../localsite/img/icon/search.png" style="width:27px; opacity:0.5">
			<!--
			<div style="font-size:18pt;padding:2px 4px 0 2px;">&#128269;</div>
			-->
		</div>
		</div>
		<div class="hideMobile" style="float:left;">
		      <div class="expandToFullscreen" style="border:0px; padding: 3px 3px; cursor: pointer;">
		      	  <img src="../localsite/img/icon/fullscreen.png" style="width:22px; opacity:0.5">
		          <!--span style="font-size:34px;line-height:34px;padding-right:4px; color:#777">&#10064;</span-->
		      </div>
		      <div class="reduceFromFullscreen" style="display:none; border:0px; padding: 3px 3px; cursor: pointer">
		      	  <img src="../localsite/img/icon/minimize.png" style="width:25px; opacity:0.5">
		      	  <!--
		          <span style="font-size:33px;line-height:34px;padding-right:4px; color:#777">&#10066;</span>
		      		-->
		      </div>
	    </div>

		<div class="showMenu" style="displayX:none; float:left;font-size:24px; color:#999;">
			<img src="../localsite/img/icon/hamburger.png" style="width:30px; opacity:0.5">

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

	

</div>
<div id="headeroffset" style="height:100px;"></div>

<script>
$(document).ready(function () {
    $('.expandToFullscreen, .reduceFromFullscreen').click(function(event) {
      toggleFullScreen();  
    });
  	$('.showSearch').click(function(event) {		
		showSearchClick();
	});
  	if (location.host.indexOf('model') >= 0) {
		$(".showSearch").show();
		$(".showSearch").removeClass("local");
  	}

  	function showSearchClick() {
		if (!$("#filterFieldsHolder").length) { // Doesn't exist
			window.location = "/localsite/info/" + window.location.hash;
			return;
		}
		console.log("showSearchClick")
		if ($("#filterFieldsHolder").is(':visible')) {
			$("#filterFieldsHolder").hide();
			//$(".filterbarOffset").hide();
			$("#filterbaroffset").hide();
			//$("#pageLinksHolder").hide();
		} else {
			$("#filterFieldsHolder").show();
			//$(".filterbarOffset").show();
			$("#filterbaroffset").show();
			$(".hideWhenPop").show();
		}
	    return;


	    // NOT CURRENTLY USED


	    //$(".filterFields").hide();
		

	    //$(".moduleBackgroundImage").addClass("moduleBackgroundImageDarken"); // Not needed since filters are not over image.
	    //$(".siteHeaderImage").addClass("siteHeaderImageDarken"); // Not needed since filters are not over image.

	    //$('.topButtons').show(); // Avoid showing bar when no layer.
	    $(".layerContent").show(); // For main page, over video.

	    //$(".showFilters").hide(); // Avoid hiding because title jumps.
	    //$(".hideFilters").show();

	    // Coming soon - Select if searching Georgia.org or Georgia.gov
	    //$(".searchModuleIconLinks").show();
	    $(".hideWhenFilters").hide();

	    $(".filterPanelHolder").show();
	    //$(".filterPanelWidget").show();
	    $("#filterPanel").show(); // Don't use "normal", causes overflow:hidden.
	    $(".searchHeader").show();
	    $("#panelHolder").show();


	    $(".showFiltersClick").hide();
	    $(".hideFiltersClick").show();

	    // Would remove active from Overview Map
	    $(".horizontalButtons .layoutTab").removeClass("active");
	    $(".showFiltersButton").addClass("active");

	    $(".hideSearch").show();
	    //$(".hideFilters").show(); // X not needed since magnifying glass remains visible now.
	    //$("#hideSearch").show();
	    if ($(".settingsPanel").is(':visible')) {
	        hideSettings();
	    }
	    if ($("#menuHolder").is(':visible')) {
	        $('.hideMetaMenu').trigger("click");
	    }
	    //updateOffsets();

	    // Hide because map is displayed, causing overlap.
	    // Could be adjusted to reside left of search filters.
	    //$(".quickMenu").hide();
	}
});
</script>





<!-- nav.html -->
<style>
body {
    background-color: rgb(250, 250, 250); /* For side nav */
}
.sidecolumn-inpage #sidecolumnContent {
    position: static !important;
    float:left;
    padding: 0px;
}
.sidecolumn-inpage #sidecolumnContentScroll {
    position: relative;
    bottom:auto !important;
    right:0 !important;
}

#sidecolumn {
    float: left;
    width: 200px;
    height: 100%;
    padding-right: 10px;
    background-color: rgb(253, 253, 253);
    background-color: #aaa;
    position: relative;
}
#sidecolumnContent {
    padding: 24px;
    position: fixed;
    line-height: 24px;
    width: 178px;
    width: 220px;
    font-size: 14px;
    bottom:0;
    top:100px;
    z-index:1; /* allows border highlight to overlap adjacent content area. */
}
#sidecolumnContent b {
    color:#333;
}
#sidecolumnContentScroll {
    position:absolute;
    top:0px;
    bottom:0px;
    right:24px;
    left:18px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#sidecolumnContentScroll::-webkit-scrollbar {
  display: none;
}

#sidecolumnContent a {
    display:block;
    color: #112e51;
    color: #fff;
}
#sidecolumnContent b a {
	color: #333;
	font-size: 16px;
	line-height: 1.8em;
}
#sidecolumnContentX a:hover {
    border-right: 4px solid #f3f3f3;
    border-right: 4px solid #000;
    margin-right: -4px;
}
#sidecolumnContent a.active {
    border-right: 4px solid #777;
    margin-left:-20px;
    padding-left:20px;
}
#fullcolumn {
    overflow: auto;
    position: relative;
    min-height: 100%; /* For short samples page */
    margin-bottomX: 80px;
    heightX:100%; /* For counties map, but breaks fixed position map on tools page. */
}
@media (max-width: 800px) {
    .content {
      padding: 30px 22px 30px 25px;
    }
    #sidecolumn {
      display: none;
    }
}
.sidecolumn-inpage {
    position: static !important;
    position: relative;
}
.sidecolumn-inpage > #sidecolumnContent {
    position: static;
}




</style>

<div id="logoholderside" class="logoholder" style="display:none; z-index:2"></div>

<div id="sidecolumnContent" style="display:none">

<div id="sidecolumnContentScroll">

<div class="hideSide close-X-sm" style="position:absolute;right:0;top:0;z-index:1">✕</div>

<br>
<b><a href="/community/tools/">Overview</a></b>
<a href="/io/">Community Apps</a>
<a href="/localsite/info/">Industry Comparisons</a>
<a href="/io/charts">Input-Output Widgets</a>
<a href="/community/challenge/">Web Challenge</a>
<a href="/community/start/">Starter Samples</a>
<br>

<b><a href="/community/projects/">Project Areas</a></b>
<a href="/community/projects/#widgets">Mini & Super Widgets</a>
<a href="/community/projects/#profile-editor">React - Profile Editor</a>
<a href="/community/projects/#io">React & D3 - IO Charts</a>
<!--
<a href="/community/projects/#jquery">JQuery - Interactivity</a>
-->
<a href="/community/projects/#github-actions">Python - GitHub Actions</a>
<a href="/community/projects/#python">Python - Machine Learning</a>
<a href="/community/projects/#ux">UX/UI - Report Design</a>
<a href="/community/projects/#maps">Maps - Data Visualization</a>
<a href="/community/projects/#cinematic">Cinematic - School Teams</a>
<a href="/apps/smm">3.0 Lifecycle Tools Mockup</a>
<br>


<!--
    <a href="../community/tools/#projects">Web Projects</a>
<a href="../community/interns/">Internships</a>
-->

<!--
<b>About</b><br>

<a href="../community/tools/#">Overview</a>
-->
<!-- tools/# tells page not to reload, and avoids jumping down to section. -->
<!--a href="../community/tools/#objectives">Objectives</a-->

<!--
<a href="../community/tools/#data">Data Driven</a>
<a href="../community/tools/#modeling">IO Modeling</a>
<a href="../community/tools/#charts">Material Flow</a>
<a href="../community/tools/#regional">Multi-County</a>
<a href="../community/tools/#local">Recycling Maps</a>
<a href="../community/tools/#partners">Partners</a>
-->



<b><a href="/community/carbon-capture/" hashid="carbon-capture">Beyond Carbon</a></b>
<a href="/community/carbon-capture/" hashid="locally">Carbon Capture</a>
<a href="/community/carbon-capture/#forestry">Fast Forestry</a>
<a href="/community/carbon-capture/#superwood">Superwood</a>
<a href="/community/carbon-capture/#flight" hashid="flight">Transforming Flight</a>
<a href="/community/projects/rail" hashid="rail">Net Positive Rail</a>
<a href="/community/carbon-capture/#hydrogen">Hydrogen Fuel</a>
<a href="/community/biotech/" hashid="biotech">Bioeconomy</a><!-- Biotech Products -->
<a href="/community/projects/wood/" hashid="wood">Mass Timber</a>

<a href="/community/projects/nuclear" hashid="nuclear">Nuclear Power</a>
<a href="/community/projects/mobility" hashid="mobility">Electric Vehicles</a>
<a href="/community/architecture/" hashid="new-countryside">New&nbsp;Countryside</a>
<br>


<!--
<b>Design/Coding</b><br>
-->
<br><br>
<br><br><br><br><br><br><br><br><br><br><br><!-- Allows scrolling when footer -->
</div>
</div>
<!-- /nav.html -->