From d00396ef79689eb3bc44e7166b8844aec2612108 Mon Sep 17 00:00:00 2001
From: Andrew Chen <chenopis@users.noreply.github.com>
Date: Thu, 10 Aug 2017 17:43:56 -0700
Subject: [PATCH] Add Version Selector to v1.4 (#4746)

* Add Version Selector to v1.4

* upgrade to newer header

* change include_cached to include

* move head.html to correct location

* remove seo

* add footer-scripts.html

* turn on global nav

* fix docs nav link
---
 _config.yml                   |  21 ++
 _includes/footer-scripts.html |  53 +++++
 _includes/head-header.html    |  23 +-
 _includes/head.html           |  16 ++
 _includes/header.html         |  67 ++++++
 _layouts/docwithnav.html      | 175 ++++++--------
 _sass/_base.sass              | 432 ++++++++++++++++++++++++++++++++--
 js/script.js                  |  19 ++
 8 files changed, 676 insertions(+), 130 deletions(-)
 create mode 100644 _includes/footer-scripts.html
 create mode 100644 _includes/head.html
 create mode 100644 _includes/header.html

diff --git a/_config.yml b/_config.yml
index 803d130901..493b7e8bf9 100644
--- a/_config.yml
+++ b/_config.yml
@@ -19,6 +19,27 @@ defaults:
       version: "v1.4"
       githubbranch: "v1.4.12"
       docsbranch: "release-1.4"
+      versions:
+        - fullversion: "v1.7.3"
+          version: "v1.7"
+          githubbranch: "v1.7.3"
+          docsbranch: "release-1.7"
+          url: https://kubernetes.io/docs/home/
+        - fullversion: "v1.6.8"
+          version: "v1.6"
+          githubbranch: "v1.6.8"
+          docsbranch: "release-1.6"
+          url: https://v1-6.docs.kubernetes.io/docs/home/
+        - fullversion: "v1.5.7"
+          version: "v1.5"
+          githubbranch: "v1.5.7"
+          docsbranch: "release-1.5"
+          url: https://v1-5.docs.kubernetes.io/docs/
+        - fullversion: "v1.4.12"
+          version: "v1.4"
+          githubbranch: "v1.4.12"
+          docsbranch: "release-1.4"
+          url: https://v1-4.docs.kubernetes.io/docs/
   -
     scope:
       path: "docs"
diff --git a/_includes/footer-scripts.html b/_includes/footer-scripts.html
new file mode 100644
index 0000000000..73768497cc
--- /dev/null
+++ b/_includes/footer-scripts.html
@@ -0,0 +1,53 @@
+<button class="flyout-button" onclick="kub.toggleToc()"></button>
+
+<style>
+.cse .gsc-control-cse, .gsc-control-cse, {
+	padding: 0;
+}
+  .gsc-control-cse table, .gsc-control-cse-en table {
+	  margin:0px !important;
+  }
+  .gsc-above-wrapper-area {
+	  border-bottom: 0;
+  }
+</style>
+
+<script>
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-36037335-10', 'auto');
+ga('send', 'pageview');
+
+// hide docs nav area if no nav is present, or if nav only contains a link to the current page
+(function () {
+	window.addEventListener('DOMContentLoaded', init)
+
+		// play nice with our neighbors
+		function init() {
+			window.removeEventListener('DOMContentLoaded', init)
+				hideNav()
+		}
+
+	function hideNav(toc){
+		if (!toc) toc = document.querySelector('#docsToc')
+			var container = toc.querySelector('.container')
+
+				// container is built dynamically, so it may not be present on the first runloop
+				if (container) {
+					if (container.childElementCount === 0 || toc.querySelectorAll('a.item').length === 1) {
+						toc.style.display = 'none'
+							document.getElementById('docsContent').style.width = '100%'
+					}
+				} else {
+					requestAnimationFrame(function () {
+						hideNav(toc)
+					})
+				}
+	}
+})();
+</script>
+
+<!-- Commenting out AnswerDash for now; we need to work on our list of questions/answers/design first
+	<!-- Start of AnswerDash script <script>var AnswerDash;!function(e,t,n,s,a){if(!t.getElementById(s)){var i,r=t.createElement(n),c=t.getElementsByTagName(n)[0];e[a]||(i=e[a]=function(){i.__oninit.push(arguments)},i.__oninit=[]),r.type="text/javascript",r.async=!0,r.src="https://p1.answerdash.com/answerdash.min.js?siteid=756",r.setAttribute("id",s),c.parentNode.insertBefore(r,c)}}(window,document,"script","answerdash-script","AnswerDash");</script> <!-- End of AnswerDash script -->
\ No newline at end of file
diff --git a/_includes/head-header.html b/_includes/head-header.html
index 17a83fa31e..581a8fbaea 100644
--- a/_includes/head-header.html
+++ b/_includes/head-header.html
@@ -2,17 +2,17 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-    {% if !page.no_canonical %}<link rel="canonical" href="http://kubernetes.io{{page.url}}" />{% endif %}
+	{% if !page.no_canonical %}<link rel="canonical" href="http://kubernetes.io{{page.url}}" />{% endif %}
 	<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
 	<link rel="stylesheet" href="/css/styles.css"/>
-        <link rel="stylesheet" href="/css/jquery-ui.min.css">
-        <link rel="stylesheet" href="/css/sweetalert.css">
+	<link rel="stylesheet" href="/css/jquery-ui.min.css">
+	<link rel="stylesheet" href="/css/sweetalert.css">
 	<script src="/js/jquery-2.2.0.min.js"></script>
-        <script src="/js/jquery-ui.min.js"></script>
+	<script src="/js/jquery-ui.min.js"></script>
 	<script src="/js/script.js"></script>
-        <script src="/js/sweetalert.min.js"></script>
+	<script src="/js/sweetalert.min.js"></script>
 	<script src="/js/bootstrap.min.js"></script>
 	<title>Kubernetes - {{ title }}</title>
 </head>
@@ -21,6 +21,19 @@
 <header>
 	<a href="/" class="logo"></a>
 	<div class="nav-buttons" data-auto-burger="primary">
+		<ul class="global-nav">
+			<li>
+				<a href="#">
+					{{page.version}} <span class="ui-icon ui-icon-carat-1-s"></span>
+				</a>
+				<ul>
+				{% for version in page.versions %}
+				  <li><a href="{{ version.url }}">{{ version.version }}</a></li>
+				{% endfor %}
+				</ul>
+			  </li>
+			</li>
+		</ul>
 		<a href="/docs/" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a>
 		<a href="/docs/hellonode/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>
 		<button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000000..d8ef6b314d
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,16 @@
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
+	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
+	<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
+	<link rel="stylesheet" href="/css/styles.css"/>
+	<link rel="stylesheet" href="/css/jquery-ui.min.css">
+	<link rel="stylesheet" href="/css/sweetalert.css">
+	{% if page.class == "gridPage" %}<link rel="stylesheet" href="/css/gridpage.css">{% endif %}
+	<script src="/js/jquery-2.2.0.min.js"></script>
+	<script src="/js/jquery-ui.min.js"></script>
+	<script src="/js/script.js"></script>
+	<script src="/js/sweetalert.min.js"></script>
+	<script src="/js/bootstrap.min.js"></script>
+</head>
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000000..1c043339f0
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,67 @@
+<div id="cellophane" onclick="kub.toggleMenu()"></div>
+
+<header>
+    <a href="/" class="logo"></a>
+
+    <div class="nav-buttons" data-auto-burger="primary">
+        <ul class="global-nav">
+            <li><a href="/docs/">Documentation</a></li>
+            <li><a href="http://blog.kubernetes.io/">Blog</a></li>
+            <li><a href="/community/">Community</a></li>
+            <li>
+                <a href="#">
+                    {{page.version}} <span class="ui-icon ui-icon-carat-1-s"></span>
+                </a>
+                <ul>
+                {% for version in page.versions %}
+                  <li><a href="{{ version.url }}">{{ version.version }}</a></li>
+                {% endfor %}
+                </ul>
+              </li>
+            </li>
+        </ul>
+        <!-- <a href="/docs/home" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a> -->
+        <a href="/docs/tutorials/kubernetes-basics/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>
+        <button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
+    </div>
+
+    <nav id="mainNav">
+        <main data-auto-burger="primary">
+        <div class="nav-box">
+            <h3><a href="/docs/tutorials/stateless-application/hello-minikube/">Get Started</a></h3>
+            <p>Ready to get your hands dirty? Build a simple Kubernetes cluster that runs "Hello World" for Node.js.</p>
+        </div>
+        <div class="nav-box">
+            <h3><a href="/docs/home/">Documentation</a></h3>
+            <p>Learn how to use Kubernetes with the use of walkthroughs, samples, and reference documentation. You can even <a href="/editdocs/" data-auto-burger-exclude>help contribute to the docs</a>!</p>
+        </div>
+        <div class="nav-box">
+            <h3><a href="/community/">Community</a></h3>
+            <p>If you need help, you can connect with other Kubernetes users and the Kubernetes authors, attend community events, and watch video presentations from around the web.</p>
+        </div>
+        <div class="nav-box">
+            <h3><a href="http://blog.kubernetes.io">Blog</a></h3>
+            <p>Read the latest news for Kubernetes and the containers space in general, and get technical how-tos hot off the presses.</p>
+        </div>
+        </main>
+        <main data-auto-burger="primary">
+        <div class="left">
+            <h5 class="github-invite">Interested in hacking on the core Kubernetes code base?</h5>
+            <a href="https://github.com/kubernetes/kubernetes" class="button" data-auto-burger-exclude>View On Github</a>
+        </div>
+
+        <div class="right">
+            <h5 class="github-invite">Explore the community</h5>
+            <div class="social">
+                <a href="https://twitter.com/kubernetesio" class="twitter"><span>Twitter</span></a>
+                <a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
+                <a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
+                <a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
+                <a href="https://groups.google.com/forum/#!forum/kubernetes-users" class="mailing-list"><span>Mailing List</span></a>
+                <a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
+            </div>
+        </div>
+        <div class="clear" style="clear: both"></div>
+        </main>
+    </nav>
+</header>
diff --git a/_layouts/docwithnav.html b/_layouts/docwithnav.html
index b97f92d53a..75ceb1976e 100755
--- a/_layouts/docwithnav.html
+++ b/_layouts/docwithnav.html
@@ -1,115 +1,82 @@
-{% for thistoc in site.data.globals.tocs %}{% if foundTOC %}{% break %}{% else %}{% assign tree = site.data[thistoc].toc %}{% include tocsearch.html %}{% endif %}{% endfor %}
-{% for override in site.data.overrides.overrides %}{% if page.path contains override.path %}{% assign notitle = "true" %}{% endif %}{% endfor %}
-<!Doctype html>
-<html id="docs" class="{{site.data[foundTOC].bigheader}}">
+{% for current_toc in site.tocs %}
+	{% if found_toc %}
+		{% break %}
+	{% else %}
+		{% assign toc=site.data[current_toc] %}
+		{% include tocsearch.html tree=toc.toc toc=toc %}
+	{% endif %}
+{% endfor %}
 
-{% include head-header.html %}
+<!Doctype html>
+<html id="docs" class="{{ toc.bigheader }}">
+
+{% include head.html %}
+
+<body>
+
+{% include header.html %}
 
 <!--  HERO  -->
 <section id="hero" class="light-text">
-  <h1>{{ site.data[foundTOC].bigheader }}</h1>
-  <h5>{{ site.data[foundTOC].abstract }}</h5>
-  <div id="vendorStrip" class="light-text">
-    <ul>
-      <li><a href="/docs/" {% if site.data[foundTOC].bigheader == "Kubernetes Documentation" %}class="YAH"{% endif %}>DOCS HOME</a></li>
-      <li><a href="/docs/user-guide/" {% if site.data[foundTOC].bigheader == "Guides" %}class="YAH"{% endif %}>GUIDES</a></li>
-      <li><a href="/docs/tutorials/" {% if site.data[foundTOC].bigheader == "Tutorials" %}class="YAH"{% endif %}>TUTORIALS</a></li>
-      <li><a href="/docs/tasks/" {% if site.data[foundTOC].bigheader == "Tasks" %}class="YAH"{% endif %}>TASKS</a></li>
-      <li><a href="/docs/concepts/" {% if site.data[foundTOC].bigheader == "Concepts" %}class="YAH"{% endif %}>CONCEPTS</a></li>
-      <li><a href="/docs/reference/" {% if site.data[foundTOC].bigheader == "Reference Documentation" %}class="YAH"{% endif %}>REFERENCE</a></li>
-      <li><a href="/docs/tools/" {% if site.data[foundTOC].bigheader == "Tools" %}class="YAH"{% endif %}>TOOLS</a></li>
-      <li><a href="/docs/samples/" {% if site.data[foundTOC].bigheader == "Samples" %}class="YAH"{% endif %}>SAMPLES</a></li>
-      <li><a href="/docs/troubleshooting/" {% if site.data[foundTOC].bigheader == "Support" %}class="YAH"{% endif %}>SUPPORT</a></li>
-    </ul>
-    <div id="searchBox">
-      <input type="text" id="search" placeholder="Search" onkeydown="if (event.keyCode==13) window.location.replace('/docs/search/?q=' + this.value)">
-    </div>
-  </div>
-</section>
-
-<section id="encyclopedia">
-  <div id="docsToc">
-        <div class="pi-accordion">
-        {% if site.data[foundTOC].bigheader != "Kubernetes Documentation" %}
-        {% assign tree = site.data[foundTOC].toc %}{% include tree.html %}
-        {% endif %}
-        </div> <!-- /pi-accordion -->
-    <button class="push-menu-close-button" onclick="kub.toggleToc()"></button>
-  </div> <!-- /docsToc -->
-  <div id="docsContent">
-        <p><a href="/editdocs#{{ page.path }}" id="editPageButton">Edit This Page</a></p>
-      {% if notitle != "true" %}<h1>{{ title }}</h1>{% endif %}
-    {{ content }}
-        <p><a href=""><img src="https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/{{ page.path }}?pixel" alt="Analytics" /></a>
-        {% if page.url != "/404.html" and page.url != "/docs/search/" %}
-		<script type="text/javascript">
-	        PDRTJS_settings_8345992 = {
-		        "id" : "8345992",
-		        "unique_id" : "{{page.url}}",
-		        "title" : "{{title}}",
-		        "permalink" : "http://kubernetes.github.io{{page.url}}"
-	        };
-	        (function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
-		</script>
-		<a href="" onclick="window.open('https://github.com/kubernetes/kubernetes.github.io/issues/new?title=Issue%20with%20' +
-		window.location.pathname)" class="button issue">Create an Issue</a>
-		<a href="/editdocs#{{ page.path }}" class="button issue">Edit this Page</a>
-	{% endif %}
+	<h1>{{ toc.bigheader }}</h1>
+	<h5>{{ toc.abstract }}</h5>
+	<div id="vendorStrip" class="light-text">
+		<ul>
+			<li><a href="/docs/" {% if toc.bigheader == "Kubernetes Documentation" %}class="YAH"{% endif %}>DOCS HOME</a></li>
+			<li><a href="/docs/user-guide/" {% if toc.bigheader == "Guides" %}class="YAH"{% endif %}>GUIDES</a></li>
+			<li><a href="/docs/tutorials/" {% if toc.bigheader == "Tutorials" %}class="YAH"{% endif %}>TUTORIALS</a></li>
+			<li><a href="/docs/tasks/" {% if toc.bigheader == "Tasks" %}class="YAH"{% endif %}>TASKS</a></li>
+			<li><a href="/docs/concepts/" {% if toc.bigheader == "Concepts" %}class="YAH"{% endif %}>CONCEPTS</a></li>
+			<li><a href="/docs/reference/" {% if toc.bigheader == "Reference Documentation" %}class="YAH"{% endif %}>REFERENCE</a></li>
+			<li><a href="/docs/tools/" {% if toc.bigheader == "Tools" %}class="YAH"{% endif %}>TOOLS</a></li>
+			<li><a href="/docs/samples/" {% if toc.bigheader == "Samples" %}class="YAH"{% endif %}>SAMPLES</a></li>
+			<li><a href="/docs/troubleshooting/" {% if toc.bigheader == "Support" %}class="YAH"{% endif %}>SUPPORT</a></li>
+		</ul>
+		<div id="searchBox">
+			<input type="text" id="search" placeholder="Search" onkeydown="if (event.keyCode==13) window.location.replace('/docs/search/?q=' + this.value)" autofocus="autofocus">
+		</div>
 	</div>
 </section>
 
+<section id="encyclopedia">
+	<div id="docsToc">
+				<div class="pi-accordion">
+				{% if toc.bigheader != "Kubernetes Documentation" %}
+					{% include tree.html tree=toc.toc %}
+				{% endif %}
+				</div> <!-- /pi-accordion -->
+		<button class="push-menu-close-button" onclick="kub.toggleToc()"></button>
+	</div> <!-- /docsToc -->
+
+	<div id="docsContent">
+				<p><a href="/editdocs#{{ page.path }}" id="editPageButton">Edit This Page</a></p>
+
+				{% unless page.notitle %}
+					<h1>{{ page.title }}</h1>
+				{% endunless %}
+
+				{{ content }}
+
+				<p><a href=""><img src="https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/{{ page.path }}?pixel" alt="Analytics" /></a></p>
+				{% if page.url != "/404.html" and page.url != "/docs/search/" %}
+				<script type="text/javascript">
+						PDRTJS_settings_8345992 = {
+								"id" : "8345992",
+								"unique_id" : "{{ page.url }}",
+								"title" : "{{ page.title }}",
+								"permalink" : "http://kubernetes.github.io{{ page.url }}"
+						};
+						(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
+				</script>
+				<a href="" onclick="window.open('https://github.com/kubernetes/kubernetes.github.io/issues/new?title=Issue%20with%20' +
+				window.location.pathname)" class="button issue">Create an Issue</a>
+				<a href="/editdocs#{{ page.path }}" class="button issue">Edit this Page</a>
+		{% endif %}
+		</div>
+</section>
+
 {% include footer.html %}
+{% include footer-scripts.html %}
 
-<button class="flyout-button" onclick="kub.toggleToc()"></button>
-
-<style>
-  .cse .gsc-control-cse, .gsc-control-cse, {
-    padding: 0;
-  }
-  .gsc-control-cse table, .gsc-control-cse-en table {
-    margin:0px !important;
-  }
-  .gsc-above-wrapper-area {
-    border-bottom: 0;
-  }
-</style>
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-  ga('create', 'UA-36037335-10', 'auto');
-  ga('send', 'pageview');
-	
-  // hide docs nav area if no nav is present, or if nav only contains a link to the current page
-  (function () {
-	  window.addEventListener('DOMContentLoaded', init)
-	  
-	  // play nice with our neighbors
-	  function init() {
-		  window.removeEventListener('DOMContentLoaded', init)
-		  hideNav()
-	  }
-	  
-	  function hideNav(toc){
-		  if (!toc) toc = document.querySelector('#docsToc')
-		  var container = toc.querySelector('.container')
-		  
-		  // container is built dynamically, so it may not be present on the first runloop
-		  if (container) {
-			  if (container.childElementCount === 0 || toc.querySelectorAll('a.item').length === 1) {
-				  toc.style.display = 'none'
-				  document.getElementById('docsContent').style.width = '100%'
-			  }
-		  } else {
-			  requestAnimationFrame(function () {
-				  hideNav(toc)
-			  })
-		  }
-	  }
-  })();
-</script>
-<!-- Commenting out AnswerDash for now; we need to work on our list of questions/answers/design first
-<!-- Start of AnswerDash script <script>var AnswerDash;!function(e,t,n,s,a){if(!t.getElementById(s)){var i,r=t.createElement(n),c=t.getElementsByTagName(n)[0];e[a]||(i=e[a]=function(){i.__oninit.push(arguments)},i.__oninit=[]),r.type="text/javascript",r.async=!0,r.src="https://p1.answerdash.com/answerdash.min.js?siteid=756",r.setAttribute("id",s),c.parentNode.insertBefore(r,c)}}(window,document,"script","answerdash-script","AnswerDash");</script> <!-- End of AnswerDash script -->
 </body>
 </html>
diff --git a/_sass/_base.sass b/_sass/_base.sass
index 109124052f..5ca64b2a4e 100644
--- a/_sass/_base.sass
+++ b/_sass/_base.sass
@@ -234,6 +234,68 @@ header
 			color: $blue
 			text-decoration: none
 
+// Global Nav - 12/9/2016 Update
+
+ul.global-nav
+	display: none
+
+	li
+		display: inline-block
+		margin-right: 14px
+
+		a
+			color: #fff
+			font-weight: 400
+			padding: 0
+			position: relative
+
+			&.active:after
+				position: absolute
+				width: 100%
+				height: 2px
+				content: ''
+				bottom: -4px
+				left: 0
+				background: #fff
+
+		ul
+			display: none
+			position: fixed
+			top: 40px
+			text-align: left
+
+			li
+				display: block
+				height: 28px
+
+				a
+					background: $dark-grey
+					color: #fff
+					padding: 7px
+
+			li:last-child
+				a
+					border-radius: 7px
+
+	li:hover
+		ul
+			display: block
+
+
+.flip-nav ul.global-nav li a,
+.open-nav ul.global-nav li a,
+	color: $dark-grey
+
+.flip-nav ul.global-nav li ul li a,
+	background: #fff
+	color: $dark-grey
+
+.flip-nav ul.global-nav li a.active:after,
+.flip-nav ul.global-nav li ul li a.active:after,
+.open-nav ul.global-nav li a.active:after,
+
+	background: $blue
+
 // FLIP NAV
 .flip-nav
 	header
@@ -301,6 +363,26 @@ header
 	padding-left: 0
 	padding-right: 0
 	margin-bottom: 0
+	position: relative
+
+	&.bot-bar:after
+		display: block
+		margin-bottom: -20px
+		height: 8px
+		width: 100%
+		background-color: transparentize(white, 0.9)
+		content: ''
+	
+	&.no-sub
+		
+		h5
+			display: none
+		
+		h1
+			margin-bottom: 20px
+
+#home #hero:after
+	display: none
 
 // VENDOR STRIP
 #vendorStrip
@@ -482,6 +564,19 @@ section
 			margin: 0 auto
 			height: 44px
 			line-height: 44px
+			position: relative
+			
+			&:before
+				position: absolute
+				width: 15px
+				height: 15px
+				content: ''
+				right: 8px
+				top: 7px
+				background-image: url(/images/search-icon.svg)
+				background-repeat: no-repeat
+				background-size: 100% 100%
+				z-index: 1
 
 		#search
 			width: 100%
@@ -490,6 +585,10 @@ section
 			line-height: 30px
 			font-size: 16px
 			vertical-align: top
+			background: #fff
+			border: none
+			border-radius: 4px
+			position: relative
 
 
 #encyclopedia
@@ -712,7 +811,6 @@ dd
 		font-weight: 500
 		margin-bottom: 30px
 		padding-bottom: 10px
-		border-bottom: 1px solid #cccccc
 
 		// Make sure anchor links aren't hidden by the header
 		&:before
@@ -722,6 +820,9 @@ dd
 			height: $header-clearance
 			visibility: hidden
 
+	h1,h2
+		border-bottom: 1px solid #cccccc
+		
 	h1
 		font-size: 32px
 		padding-right: 60px
@@ -731,18 +832,21 @@ dd
 
 	h3
 		font-size: 24px
+		font-weight: 300
+		margin-bottom: 5px
 
 	h4
 		font-size: 20px
+		margin-bottom: 0px
 
 	h5, h6
 		font-size: 16px
 		font-weight: 500
 
 	p
-		font-size: 14px
+		font-size: 16px
 		font-weight: 300
-		line-height: 1.25em
+		line-height: 1.75em
 
 	p + p
 		margin-top: 10px
@@ -753,7 +857,7 @@ dd
 		background-color: $light-grey
 		color: $dark-grey
 		font-family: $mono-font
-		vertical-align: bottom
+		vertical-align: baseline
 		font-size: 14px
 		font-weight: bold
 		padding: 2px 4px
@@ -780,6 +884,7 @@ dd
 		display: block
 		margin: 20px 0
 		padding: 15px
+		position: relative
 		overflow-x: auto
 
 	h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
@@ -787,6 +892,9 @@ dd
 		font-size: inherit
 		background-color: transparent
 
+	.includecode
+		table-layout: fixed
+
 	.includecode, .includecode th, .includecode td
 		padding: 0 !important
 
@@ -817,6 +925,8 @@ dd
 
 	li
 		margin-bottom: 0.75em
+		font-size: 16px
+		line-height: 1.75em
 
 	table
 		width: 100%
@@ -886,8 +996,8 @@ dd
 		//font-weight: 700
 		text-decoration: underline
 
-	a:visited
-		color: blueviolet
+//  a:visited
+//      color: blueviolet
 
 	a.button
 		border-radius: 2px
@@ -1209,12 +1319,284 @@ $feature-box-div-margin-bottom: 40px
 			max-height: 900px
 			margin: 20px auto
 
+		#calendarEvents
+			position: relative
+			width: 80vw
+			height: 30vw
+			max-width: 1200px
+			max-height: 450px
+			margin: 20px auto           
+
 		iframe
 			position: absolute
 			border: 0
 			width: 100%
 			height: 100%
 
+// Dialog
+.ui-icon
+	display: inline-block !important
+
+#feature-state-dialog-link
+	text-decoration: none !important
+	padding: 5px !important
+	a:visited
+		color: #454545 !important
+	a code
+		display: inline-block !important
+		box-sizing: border-box !important
+		background-color: #f7f7f7 !important
+		color: #303030 !important
+		font-family: "Roboto Mono", monospace !important
+		vertical-align: baseline !important
+		font-size: 14px !important
+		font-weight: bold !important
+		padding: 0px 4px !important
+
+#feature-state-dialog
+	background: #fff !important
+	border: 1px solid #ddd !important
+	padding: 0.5em 1em !important
+
+	ul, li
+		list-style: disc !important
+		margin: 4px 12px !important
+
+	p
+		margin: 8px 0px !important
+
+	code
+		display: inline-block !important
+		box-sizing: border-box !important
+		background-color: #f7f7f7 !important
+		color: #303030 !important
+		font-family: "Roboto Mono", monospace !important
+		vertical-align: baseline !important
+		font-size: 14px !important
+		font-weight: bold !important
+		padding: 0px 4px !important
+
+.ui-dialog
+	background: #f7f7f7 !important
+	padding: 0.5em
+
+.ui-dialog-content
+	position: relative
+	float: right
+	width: 100%
+
+	$toc-margin: 15px
+	$header-clearance: $header-height + 20px
+
+	* + h2, * + h3, * + h4, * + h5, * + h6
+		margin-top: 30px
+
+	h1, h2, h3, h4, h5, h6
+		line-height: normal
+		font-weight: 500
+		margin-bottom: 30px
+		padding-bottom: 10px
+
+		// Make sure anchor links aren't hidden by the header
+		&:before
+			display: block
+			content: " "
+			margin-top: -$header-clearance
+			height: $header-clearance
+			visibility: hidden
+
+	h1,h2
+		border-bottom: 1px solid #cccccc
+		
+	h1
+		font-size: 32px
+		padding-right: 60px
+
+	h2
+		font-size: 28px
+
+	h3
+		font-size: 24px
+		font-weight: 300
+		margin-bottom: 5px
+
+	h4
+		font-size: 20px
+		margin-bottom: 0px
+
+	h5, h6
+		font-size: 16px
+		font-weight: 500
+
+	p
+		font-size: 16px
+		font-weight: 300
+		line-height: 1.75em
+
+	p + p
+		margin-top: 10px
+
+	code
+		display: inline-block
+		box-sizing: border-box
+		background-color: $light-grey
+		color: $dark-grey
+		font-family: $mono-font
+		vertical-align: baseline
+		font-size: 14px
+		font-weight: bold
+		padding: 2px 4px
+
+	a code
+		color: $blue
+		text-decoration: underline
+
+	pre .pi, pre .s
+		margin: 0
+		padding: 0
+
+	.highlight code span, code, pre code
+		font-family: "Roboto Mono", monospace
+
+	code, pre code
+		color: #303030
+
+	pre code
+		padding: 0
+
+	pre
+		background-color: #f7f7f7
+		display: block
+		margin: 20px 0
+		padding: 15px
+		position: relative
+		overflow-x: auto
+
+	h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
+		font-family: inherit
+		font-size: inherit
+		background-color: transparent
+
+	.includecode
+		table-layout: fixed
+
+	.includecode, .includecode th, .includecode td
+		padding: 0 !important
+
+	.includecode th
+		text-align: right !important
+		padding: 10px !important
+
+	.includecode th a, .includecode th a code
+		color: white !important
+		background-color: transparent !important
+
+	.includecode pre
+		margin: 0 !important
+
+	ul li
+		list-style: disc
+
+	ol li
+		list-style: decimal
+
+	ul, ol
+		margin: 20px 0
+		padding-left: 30px
+		font-weight: 300
+
+	ul ul, ol ol, ul ol, ol ul
+		margin: 0.75em 0
+
+	li
+		margin-bottom: 0.75em
+		font-size: 16px
+		line-height: 1.75em
+
+	table
+		width: 100%
+		border: 1px solid #ccc
+		border-spacing: 0
+		margin-top: 30px
+		margin-bottom: 30px
+
+	thead, tr:nth-child(even)
+		background-color: $light-grey
+
+	thead
+		background-color: #555
+		color: white
+
+	th, td
+		padding: 8px
+		text-align: left
+		margin: 0
+
+	th
+		font-weight: normal
+
+	td
+		font-size: 0.85em
+
+	#editPageButton
+		position: absolute
+		top: -25px
+		right: 5px
+		width: 50px
+		height: 50px
+		line-height: 50px
+		border-radius: 50%
+		white-space: nowrap
+		text-indent: 50px
+		overflow: hidden
+		background: $blue url(/images/icon-pencil.svg) no-repeat
+		background-position: 12px 10px
+		background-size: 29px 29px
+
+	#markdown-toc
+		margin-bottom: 20px
+
+		ul, li
+			list-style: disc
+			color: $blue
+
+		ul
+			padding: 0 15px
+			margin: 0
+
+		li
+			padding: 0
+			line-height: 1.5em
+			margin-bottom: 0
+
+		a
+			position: relative
+			color: $blue
+			font-weight: 700
+
+	img
+		max-width: 100%
+
+	a
+		//font-weight: 700
+		text-decoration: underline
+
+//  a:visited
+//      color: blueviolet
+
+	a.button
+		border-radius: 2px
+		text-decoration: none
+		
+		&:visited
+			color: white
+
+	a.issue
+		margin-left: 0px
+
+.ui-dialog-buttonpane
+	background: #f7f7f7 !important
+
 // Tabs
 .ui-widget-header
 	background: transparent !important
@@ -1226,19 +1608,27 @@ $feature-box-div-margin-bottom: 40px
 		padding: 0px !important
 		list-style: none !important
 		margin-bottom: 0px !important
-		margin-left: 1px !important
+		margin-left: 4px !important
+
+.ui-tabs-panel
+	ul li
+		list-style: disc !important
+
+	ol li
+		list-style: decimal !important
 
 .ui-widget-content
 	border: 0px !important
 
-.ui-widget-content
 	table
 		margin: 0px !important
 
 .ui-tabs .ui-tabs-panel
-	padding: 0px !important
 	border: 1px solid #ccc !important
 
+.ui-tabs-anchor
+	text-decoration: none !important
+
 // Talk to us
 #talkToUs
 	h3, h4
@@ -1345,18 +1735,18 @@ $feature-box-div-margin-bottom: 40px
 
 	
 	//#bigSocial
-	//	text-align: center
-	//	
-	//	div
-	//		display: inline-block
-	//		float: none
-	//		padding-top: 125px
-	//		width: calc(90%)
-	//		
-	//		a
-	//			margin-top: 15px
-	//			font-size: 18px
+	//  text-align: center
+	//  
+	//  div
+	//      display: inline-block
+	//      float: none
+	//      padding-top: 125px
+	//      width: calc(90%)
+	//      
+	//      a
+	//          margin-top: 15px
+	//          font-size: 18px
+	//
 	//
 	//
 	//
-//
diff --git a/js/script.js b/js/script.js
index 22eff0a1b4..dfb42a887b 100755
--- a/js/script.js
+++ b/js/script.js
@@ -503,3 +503,22 @@ var pushmenu = (function(){
 		show: show
 	};
 })();
+
+$(function() {
+
+	// Make global nav be active based on pathname
+	if ((location.pathname.split("/")[1]) !== ""){
+		$('.global-nav').show();
+		$('.global-nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
+	}
+
+	// If vendor strip doesn't exist add className
+	if ( !$('#vendorStrip').length > 0 ) {
+		$('#hero').addClass('bot-bar');
+	}
+
+	// If is not homepage add class to hero section
+	if (!$('#home').length > 0 ) {
+		$('#hero').addClass('no-sub');
+	}
+});