From e88f2b25bbe4d3fffb47b31b14626a2af77e3252 Mon Sep 17 00:00:00 2001
From: Josh south <jsouth@users.noreply.github.com>
Date: Mon, 27 Feb 2017 13:48:48 -0800
Subject: [PATCH] Newsite tabs (#2004)

* Layout updates, dark themes, tons o stuff

* Update themes

Theme updates + scaffolding
---
 _includes/footer.html        |   16 +-
 _includes/global-header.html |    2 +-
 _includes/header.html        |    9 +-
 _includes/side-menu.html     |    2 +-
 _layouts/docs.html           |  224 ++-
 css/style-alt.css            | 2637 +++++++++++++++++--------------
 css/style.css                | 2895 +++++++++++++++++++---------------
 docker-for-mac/faqs.md       |    4 +-
 docker-for-mac/install.md    |   14 +-
 images/seach.png             |  Bin 0 -> 1233 bytes
 images/search.png            |  Bin 0 -> 1233 bytes
 js/docs.js                   |   49 +-
 12 files changed, 3285 insertions(+), 2567 deletions(-)
 create mode 100644 images/seach.png
 create mode 100644 images/search.png

diff --git a/_includes/footer.html b/_includes/footer.html
index a698eb4023..01abd9f649 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,5 +1,3 @@
-<!-- footer -->
-<footer class="footer">
   <!-- newsletter -->
   <div class="newsletter_section">
       <div class="container">
@@ -23,7 +21,7 @@
                         <li><a href="https://www.docker.com/use-cases">Use Cases</a></li>
                         <li><a href="https://www.docker.com/customers">Customers</a></li>
                         <li><a href="https://www.docker.com/partners/partner-program">Partners</a></li>
-                        <li><a href="https://www.docker.com/industry-government">For Government</a></li>
+                        <li class="break"><a href="https://www.docker.com/industry-government">For Government</a></li>
                         <li><a href="https://www.docker.com/company">About Docker</a></li>
                         <li><a href="https://www.docker.com/company/management">Management</a></li>
                         <li><a href="https://www.docker.com/company/news-and-press">Press &amp; News</a></li>
@@ -35,7 +33,7 @@
                         <li><a href="https://www.docker.com/products/overview">Product</a></li>
                         <li><a href="https://www.docker.com/pricing">Pricing</a></li>
                         <li><a href="https://www.docker.com/docker-community">Community Edition</a></li>
-                        <li><a href="https://www.docker.com/enterprise">Enterprise Edition </a></li>
+                        <li class="break"><a href="https://www.docker.com/enterprise">Enterprise Edition </a></li>
                         <li><a href="https://www.docker.com/products/docker-datacenter">Docker Datacenter</a></li>
                         <li><a href="https://cloud.docker.com/">Docker Cloud</a></li>
                         <li><a href="https://store.docker.com/">Docker Store</a></li>
@@ -44,13 +42,13 @@
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <ul class="footer_links">
                         <li><a href="https://www.docker.com/docker-mac">Docker for Mac </a></li>
-                        <li><a href="https://www.docker.com/docker-windows">Docker for Windows(PC)</a></li>
+                        <li class="break"><a href="https://www.docker.com/docker-windows">Docker for Windows(PC)</a></li>
                         <li><a href="https://www.docker.com/docker-aws" class="web30">Docker for AWS</a></li>
-                        <li><a href="https://www.docker.com/docker-microsoft-azure">Docker for Azure</a></li>
+                        <li class="break"><a href="https://www.docker.com/docker-microsoft-azure">Docker for Azure</a></li>
                         <li><a href="https://www.docker.com/docker-windows-server">Docker for Windows Server</a></li>
-                        <li><a href="https://www.docker.com/docker-centos">Docker for CentOS</a></li>
+                        <li><a href="https://www.docker.com/docker-centos">Docker for CentOS distribution</a></li>
                         <li><a href="https://www.docker.com/docker-debian">Docker for Debian</a></li>
-                        <li><a href="https://www.docker.com/docker-fedora">Docker for Fedora</a></li>
+                        <li><a href="https://www.docker.com/docker-fedora">Docker for Fedora&#x00AE</a></li>
                         <li><a href="https://www.docker.com/docker-oracle-linux">Docker for Oracle Enterprise Linux</a></li>
                         <li><a href="https://www.docker.com/docker-rhel">Docker for RHEL</a></li>
                         <li><a href="https://www.docker.com/docker-sles">Docker for SLES</a></li>
@@ -110,5 +108,3 @@
             </div>
         </div>
     </div>
-</footer>
-<!-- /end footer -->
diff --git a/_includes/global-header.html b/_includes/global-header.html
index 6f4adaa64f..d57b9b9960 100644
--- a/_includes/global-header.html
+++ b/_includes/global-header.html
@@ -81,7 +81,7 @@
                 </form>
             </div>
             <div id="tabs">
-                <ul class="tabs nav navbar-nav navbar-left">
+                <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left">
                   {% include treebuilder.html %}
                 </ul>
             </div>
diff --git a/_includes/header.html b/_includes/header.html
index 1e5aa3f484..48dd0b349b 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,8 @@
-<nav class="nav-secondary navbar navbar-default navbar-fixed-top">
+<nav class="nav-secondary navbar navbar-fixed-top">
     <div class="container-fluid">
+      <!-- <div class="ctrl-left">
+        <a href="javascript:void(0)" id="menu-toggle-left"><i class="fa fa-outdent" aria-hidden="true"></i></a>
+      </div> -->
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
               <span class="sr-only">Toggle navigation</span>
@@ -9,7 +12,6 @@
             </button>
                   <a href="/"><img class="logo" src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs"></a>
         </div>
-
           <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
               <div class="search-form" id="search-div">
                   <form>
@@ -27,8 +29,7 @@
                   </ul>
               </div>
               <div class="ctrl-right">
-                  <a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-outdent" aria-hidden="true"></i></a>
-                  <!-- varsion -->
+                  <a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
                   <div class="btn-group">
                       <button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         Docker 1.13 <span class="caret"></span>
diff --git a/_includes/side-menu.html b/_includes/side-menu.html
index df2c65b71b..08075455b7 100644
--- a/_includes/side-menu.html
+++ b/_includes/side-menu.html
@@ -1,4 +1,4 @@
-<div class="nav-sidebar navbar-collapse collapse">
+{% if page.landing == true %}<div class="nav-sidebar navbar-collapse collapse affix" data-spy="affix" data-offset-top="490">{%else%}<div class="nav-sidebar navbar-collapse collapse">{% endif %}
     <ul class="nav navbar-collapse" id="stacked-menu">
       {{ leftnav }}
     </ul>
diff --git a/_layouts/docs.html b/_layouts/docs.html
index ef452a3d5d..3e60b4dd93 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -1,98 +1,85 @@
 <!-- relative link basehrefs -->
-{% if page.path contains "index.md" %}
-{% capture basehref %}{{ page.url }}{% endcapture %}
-{% else %}
-{% assign crumbs = page.url | split: '/' %}
-{% assign stoppingpoint = crumbs | size | minus: 1 %}
-{% for crumb in crumbs %}
-{% if forloop.index == stoppingpoint %}
-{% capture basehref %}{{basehref}}{{ crumb }}/{% endcapture %}
-{% break %}
-{% else %}
-{% capture basehref %}{{basehref}}{{ crumb }}/{% endcapture %}
-{% endif %}
-{% endfor %}
-{% endif %}
+{% if page.path contains "index.md" %} {% capture basehref %}{{ page.url }}{% endcapture %} {% else %} {% assign crumbs = page.url | split: '/' %} {% assign stoppingpoint = crumbs | size | minus: 1 %} {% for crumb in crumbs %} {% if forloop.index == stoppingpoint
+%} {% capture basehref %}{{basehref}}{{ crumb }}/{% endcapture %} {% break %} {% else %} {% capture basehref %}{{basehref}}{{ crumb }}/{% endcapture %} {% endif %} {% endfor %} {% endif %}
 <!-- Logic for feedback CC'ing -->
 {% if page.assignee %}{% assign assignee=page.assignee%}{% else %}{% assign assignee=page.defaultassignee%}{% endif %}
 <!-- Logic for 'edit this button' -->
-{% assign edit_url = "https://github.com/docker/docker.github.io/edit/master/" | append: page.path %}
-{% for entry in site.data.not_edited_here.overrides %}
-	{% if page.url contains entry.path %}
-    {% if entry.source %}{% assign edit_url = entry.source %}{% else %}{% assign edit_url = "" %}{% endif %}
-		{% break %}
-	{% endif %}
-{% endfor %}
+{% assign edit_url = "https://github.com/docker/docker.github.io/edit/master/" | append: page.path %} {% for entry in site.data.not_edited_here.overrides %} {% if page.url contains entry.path %} {% if entry.source %}{% assign edit_url = entry.source %}{%
+else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %}
 
 <!-- End of logic for 'edit this button' -->
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-<base href="{{ basehref }}"/>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<style type="text/css">
-@charset "UTF-8";
-[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
-	display: none !important;
-}
-ng\:form {
-	display: block;
-}
-</style>
-<script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=k6svi4faiclrdpi5eax4n23dzy"></script>
-<script type="text/javascript">
+	<base href="{{ basehref }}" />
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style type="text/css">
+		@charset "UTF-8";
+		[ng\:cloak],
+		[ng-cloak],
+		[data-ng-cloak],
+		[x-ng-cloak],
+		.ng-cloak,
+		.x-ng-cloak,
+		.ng-hide:not(.ng-hide-animate) {
+			display: none !important;
+		}
+
+		ng\:form {
+			display: block;
+		}
+	</style>
+	<script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=k6svi4faiclrdpi5eax4n23dzy"></script>
+	<script type="text/javascript">
   !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
   analytics.load("IWj9D0UpZHZdZUZX9jl98PcpBFWBnBMy");
   analytics.page();
-  }}();
-</script>
-{% if site.GH_ENV == "gh_pages" %}<meta name="robots" content="noindex">{% endif %}
-<meta property="og:type" content="website">
-<meta property="og:updated_time" content="{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}">
-<meta property="og:image" content="https://www.docker.com/sites/default/files/social/docker-facebook-share.png">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="@docker_docs">
-<meta name="twitter:url" content="https://twitter.com/docker_docs">
-<meta name="twitter:title" content="{{ page.title }}">
-<meta name="twitter:image:src" content="https://www.docker.com/sites/default/files/social/docker-twitter-share.png">
-<meta property="article:published_time" content="{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}docker, docker open source, docker platform, distributed applications, microservices, containers, docker containers, docker software, docker virtualization{% endif %}">
-<!-- <link rel="manifest" href="/favicons/manifest.json"> -->
-<!-- <link rel="stylesheet" href="/css/documentation.css"> -->
-<link rel="stylesheet" href="/css/font-awesome.min.css">
-<link rel="stylesheet" href="/css/bootstrap.min.css">
-<link id="pagestyle" rel="stylesheet" href="/css/style.css">
-<!-- temp css will be removed -->
-<link rel="stylesheet" href="/css/temp.css">
-{% seo %}
-{% if page.hide_from_sitemap %}<meta name="robots" content="noindex" />{% endif %}
+	</script>
+	{% if site.GH_ENV == "gh_pages" %}
+	<meta name="robots" content="noindex">{% endif %}
+	<meta property="og:type" content="website">
+	<meta property="og:updated_time" content="{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}">
+	<meta property="og:image" content="https://www.docker.com/sites/default/files/social/docker-facebook-share.png">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:site" content="@docker_docs">
+	<meta name="twitter:url" content="https://twitter.com/docker_docs">
+	<meta name="twitter:title" content="{{ page.title }}">
+	<meta name="twitter:image:src" content="https://www.docker.com/sites/default/files/social/docker-twitter-share.png">
+	<meta property="article:published_time" content="{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}docker, docker open source, docker platform, distributed applications, microservices, containers, docker containers, docker software, docker virtualization{% endif %}">
+	<link rel="stylesheet" href="/css/font-awesome.min.css">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<link id="pagestyle" rel="stylesheet" href="/css/style.css">
+	<!-- temp css will be removed -->
+	<link rel="stylesheet" href="/css/temp.css"> {% seo %} {% if page.hide_from_sitemap %}
+	<meta name="robots" content="noindex" />{% endif %}
 </head>
+
 <body ng-app="Docker" ng-controller="DockerController">
 	<header>
-		{% if page.landing == true %}{% include global-header.html %}{% endif %}
-		{% if page.landing != true %}{% include header.html %}{% endif %}
+		{% if page.landing == true %}{% include global-header.html %}{% endif %} {% if page.landing != true %}{% include header.html %}{% endif %}
 	</header>
 
-	<div id="wrapper" class="toggled">
-		<main class="main" id="page-content-wrapper">
+	<div class="{% if page.landing == true %}wrapper landing{%else%}wrapper right-open{% endif %}">
+		<main class="main page-content">
 			<div class="container-fluid">
 				<div class="row">
-					<div class="col-sm-3 col-md-3 sidebar{% if page.landing == true %}-home{%else%} col-sm-2 col-md-2{% endif %} collapse">
+					<div class="col-sm-2 col-md-2 sidebar{% if page.landing == true %}-home{%else%}{% endif %}">
 						{% include side-menu.html %}
 					</div>
-
-					<div class="{% if page.landing == true %}col-sm-9 col-md-9 main-content{%else%}col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 content{% endif %}">
-						<section class="section" id="DocumentationText">
+					<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 {% if page.landing == true %}main-content{%else%}content{% endif %}">
+						<section class="section">
 							{% if page.title %}
 							<h1>{{ page.title }}</h1>{% endif %} {% if page.advisory %}
 							<blockquote>{{ site.data.advisories.texts[page.advisory] | markdownify }}</blockquote>{% endif %} {% unless page.tree == false %}{% include read_time.html %}{% endunless %} {{ content }} {% if page.noratings != true %}
 							<div style="text-align: center; margin-top: 50px">
-								<img src="/images/chat.png" alt="chat icon" style="margin-right: 10px">
+								<img src="/images/chat.png" alt="chat icon">
 								<b>Feedback?</b> Suggestions? Can't find something in the docs?<br/> {% if edit_url != "" %}
-								<a href="https://github.com/docker/docker.github.io/edit/master/{{ page.path }}" class="nomunge">Edit this page</a> <span style="color:#D8E0E0">&#9679;</span> {% endif %}
+								<a href="https://github.com/docker/docker.github.io/edit/master/{{ page.path }}" class="nomunge">Edit this page</a> <span>&#9679;</span> {% endif %}
 								<a href="https://github.com/docker/docker.github.io/issues/new?title=Feedback for: {{ page.path }}&assignee={% if page.assignee %}{{ page.assignee }}{% else %}{{ page.defaultassignee }}{% endif %}&body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})"
-												class="nomunge">Request docs changes</a> <span style="color:#D8E0E0">&#9679;</span> <a href="https://www.docker.com/docker-support-services">Get support</a> <br />Rate this page:
+												class="nomunge">Request docs changes</a> <span>&#9679;</span> <a href="https://www.docker.com/docker-support-services">Get support</a> <br />Rate this page:
 								<div id="pd_rating_holder_8453675"></div>
 								<script type="text/javascript">
 									PDRTJS_settings_8453675 = {
@@ -115,7 +102,6 @@ ng\:form {
 							</div>
 							{% endif %}
 						</section>
-
 						<script language="javascript">
 							var x = document.links.length;
 							var baseHref = document.getElementsByTagName('base')[0].href
@@ -137,60 +123,60 @@ ng\:form {
 							}
 						</script>
 					</div>
-					<div id="{% if page.landing == true %}sidebar-wrapper-home{%else%}sidebar-wrapper{% endif %}">
-						 <div class="toc-nav">
-						<section class="section" id="RightColumnSection">
-							<div id="feedback-links">
-								<ul>
-									{% if edit_url != "" %}
-									<li><a href="{{ edit_url }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this page</a></li>{% endif %}
-									<li><a href="https://github.com/docker/docker.github.io/issues/new?title=Feedback for: {{ page.path }}&assignee={% if page.assignee %}{{ page.assignee }}{% else %}{{ page.defaultassignee }}{% endif %}&body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})"
-														class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
-									<li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li>
-									<li><div class="toggle-mode">
-									    <div class="icon">
-									        <i class="fa fa-sun-o" aria-hidden="true"></i>
-									    </div>
-									    <div class="toggle-switch">
-									      <label class="switch">
-									          <input type="checkbox" id="switch-style">
-									          <div class="slider round"></div>
-									      </label>
-									    </div>
-									    <div class="icon">
-									        <i class="fa fa-moon-o" aria-hidden="true"></i>
-									    </div>
-									</div></li>
-								</ul>
-							</div>
-							{% unless page.notoc %} {% assign my_min = page.toc_min | default: site.toc_min | default: 2 %} {% assign my_max = page.toc_max | default: site.toc_max | default: 3 %} {% assign my_name = page.url | default: "unnamed" %}
-							<div id="side-toc">
-								<div id="side-toc-title">On this page:</div>
-								<div id="side-toc-contents">{% include toc_pure_liquid.html html=content sanitize=true class="inline_toc" id="my_toc" toc_min=my_min toc_max=my_max page_name=my_name %}</div>
-							</div>
-							{% endunless %}
-						</section>
+						<div class="toc-nav">
+						<div id="{% if page.landing == true %}sidebar-wrapper-home{%else%}sidebar-wrapper{% endif %}" class="{% if page.landing == true %} affix-top{%else%}sidebar-wrapper{% endif %}" {% if page.landing == true %} data-spy="affix" data-offset-top="490">{%else%}{% endif %}
+							<div class="toc-nav">
+									<div class="feedback-links">
+										<ul>
+											{% if edit_url != "" %}
+											<li><a href="{{ edit_url }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this page</a></li>{% endif %}
+											<li><a href="https://github.com/docker/docker.github.io/issues/new?title=Feedback for: {{ page.path }}&assignee={% if page.assignee %}{{ page.assignee }}{% else %}{{ page.defaultassignee }}{% endif %}&body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})"
+																class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
+											<li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li>
+											<li>
+												<div class="toggle-mode">
+													<div class="icon">
+														<i class="fa fa-sun-o" aria-hidden="true"></i>
+													</div>
+													<div class="toggle-switch">
+														<label class="switch">
+															<input type="checkbox" id="switch-style">
+															<div class="slider round"></div>
+													</label>
+													</div>
+													<div class="icon">
+														<i class="fa fa-moon-o" aria-hidden="true"></i>
+													</div>
+												</div>
+											</li>
+										</ul>
+									</div>
+									{% unless page.notoc %} {% assign my_min = page.toc_min | default: site.toc_min | default: 2 %} {% assign my_max = page.toc_max | default: site.toc_max | default: 3 %} {% assign my_name = page.url | default: "unnamed" %}
+										<div id="side-toc-title">On this page:</div>
+										{% include toc_pure_liquid.html html=content sanitize=true class="inline_toc" id="my_toc" toc_min=my_min toc_max=my_max page_name=my_name %}
+									</div>
+									{% endunless %}
+						</div>
 					</div>
+
 				</div>
 			</div>
-			</div>
-
+		</main>
 	</div>
-	</main>
 
-	</div>
-<footer class="footer">
-	{% include footer.html %}
-</footer>
-<link rel="stylesheet" href="/css/github.css">
-<script src="/js/highlight.pack.js"></script>
-<script>
-	hljs.initHighlightingOnLoad();
-</script>
-<script src="/js/anchorlinks.js"></script>
-<script defer src="/js/menu.js"></script>
-<script src="/js/jquery.js"></script>
-<script src="/js/bootstrap.min.js"></script>
-<script defer src="/js/docs.js"></script>
+	<footer class="footer">
+		{% include footer.html %}
+	</footer>
+	<link rel="stylesheet" href="/css/github.css">
+	<script src="/js/highlight.pack.js"></script>
+	<script>
+		hljs.initHighlightingOnLoad();
+	</script>
+	<!-- <script src="/js/anchorlinks.js"></script> -->
+	<script defer src="/js/menu.js"></script>
+	<script src="/js/jquery.js"></script>
+	<script src="/js/bootstrap.min.js"></script>
+	<script defer src="/js/docs.js"></script>
 </body>
+
 </html>
diff --git a/css/style-alt.css b/css/style-alt.css
index 47924ae35d..79db19d75f 100644
--- a/css/style-alt.css
+++ b/css/style-alt.css
@@ -1,933 +1,1382 @@
 /*
 *
 * docker
-* base theme
+* theme dark
 *
 */
+
 html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; }
+    font-family: sans-serif;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
 
 body {
-  background-color: #192837;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  color: #e4e4e4; }
+    background-color: #192837;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    color: #e4e4e4;
+}
+
 
 /*
 *
 * links
 *
 */
-a {
-  color: #F7F8F9;
-  cursor: pointer; }
 
-a:active,
-a:hover {
-  color: #fff;
-  text-decoration: none; }
+a {
+    color: #F7F8F9;
+    cursor: pointer;
+}
+
+a:active, a:hover {
+    color: #F7F8F9;
+    opacity: .8;
+    text-decoration: none;
+}
+
 
 /*
 *
 * lists
 *
 */
+
+
 /*
 *
 * tables
 *
 */
+
 table {
     border: 1px solid #1b1a1a;
     margin: 0 0 15px 0;
-    min-width: 86%;
-    max-width: 100%;
+    width: 100%;
 }
 
-table > tbody > tr:nth-of-type(even) {
-  background-color: #1f3341; }
+table>tbody>tr:nth-of-type(even) {
+    background-color: #1f3341;
+}
 
 thead {
-    background: #2b4252; }
+    background: #2b4252;
+}
 
 th, td {
-  padding: 7px 10px 7px 20px;
-  text-align: left;
-  font-weight: 400; }
-  /*
+    padding: 7px 10px 7px 20px;
+    text-align: left;
+    font-weight: 400;
+}
+
+
+/*
   *
   * typography ******************************************************************
   *
   */
-  h1, h2, h3, h4, h5, h6 {
+
+h1, h2, h3, h4, h5, h6 {
     color: #b9c2cc;
-    font-family: Geomanist Book; }
+    font-family: Geomanist Book;
+}
 
-  h1 {
+h1 {
     font-size: 38px;
-    line-height: 48px; }
+    line-height: 48px;
+}
 
-  h2 {
+h2 {
     font-size: 28px;
-    line-height: 38px; }
+    line-height: 38px;
+}
 
-  h3 {
+h3 {
     font-size: 20px;
-    line-height: 28px; }
+    line-height: 28px;
+}
 
-  h4 {
+h4 {
     color: #445d6e;
     font-size: 18px;
     line-height: 26px;
-    text-transform: uppercase; }
+    text-transform: uppercase;
+}
 
-  h5 {
+h5 {
     color: #445d6e;
     font-size: 16px;
-    line-height: 26px; }
+    line-height: 26px;
+}
 
-  h6 {
+h6 {
     color: #82949e;
     font-size: 16px;
-    line-height: 26px; }
+    line-height: 26px;
+}
 
-  p {
+p {
     color: #d3d4d4;
     font-family: 'Open Sans', sans-serif;
     font-size: 14px;
     line-height: 24px;
-    margin-bottom: 10px; }
+    margin: 10px 0 20px 0;
+}
 
-  p.p2 {
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+  h1 {
+      font-size: 26px;
+      line-height: 48px;
+  }
+  .hero-text p {
+      margin-bottom: 15px;
+      font-size: 14px;
+      line-height: 20px;
+  }
+}
+
+
+
+p.p2 {
     font-size: 16px;
-    line-height: 30px; }
+    line-height: 30px;
+}
 
-  .reading-time {
+.reading-time {
     font-style: italic;
     font-size: 80%;
     display: block;
     padding: 0;
-    color: #ccc; }
+    color: #ccc;
+}
 
-  .dropdown-header {
+.dropdown-header {
     font-size: 13.5px;
     line-height: 16px;
     color: #1488c6;
     padding: 10px 0 0 15px;
     display: block;
     font-weight: 600;
-    margin: 10px 0 0 0; }
-
-  img {
-    display: block;
-    max-width: 100%;
-    height: auto;}
-/*
-*
-* branding *********************************************************************
-*
-*/
-.logo {
-  margin: 12px 10px 0 10px; }
-
-.affix-top .affix-logo {
-  opacity: 0; }
-
-.affix-logo {
-  float: left;
-  width: 160px; }
-
-/*
-*
-* Primary navigation - top header **********************************************************
-*
-*/
-.nav-primary {
-  background: transparent;
-  padding: 5px 12px; }
-
-.primary {
-  padding: 5px 0 0 90px; }
-
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .nav-primary {
-    background: #0087c9;
-    padding: 5px 12px;
-    position: absolute;
-    /*height: 100%;*/
-    width: 100%;
-    z-index: 9999; }
-  .primary {
-    padding: 20px 0 0;
-    text-align: center; }
-  .user-nav {
-    padding: 5px 0 0;
-    text-align: center; }
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    /** todo remove this **/
-    color: #fff;
-    text-align: center; }
-  .navbar-default .navbar-toggle,
-  .navbar-default .navbar-toggle:focus,
-  .navbar-default .navbar-toggle:hover {
-    background: transparent;
-    border: 0; } }
-
-/*
-*
-* Secondary Navigation  **********************************************************
-*
-*/
-.nav-secondary {
-  background: #000;
-  box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
-  height: 55px; }
-
-/*
-*
-* Tabs ***********************************************************************
-*
-*/
-.tabs {
-  padding: 0;
-  float: left;
-  margin: 0; }
-
-.tabs li {
-  float: left;
-  list-style: none; }
-
-.tabs li a {
-  color: #fff;
-  padding: 16px 20px 15px;
-  float: left;
-  opacity: 0.7; }
-
-.tabs li a:hover {
-  background: #0d6996 !important;
-  border-bottom: 4px solid #fff; }
-
-.tabs li.active a {
-  background: transparent !important;
-  color: #F7F8F9;
-  cursor: default;
-  border-bottom: 4px solid #412179;
-  opacity: 1; }
-
-/*
-*
-* nav-secondary-tabs  ***********************************************************************
-*
-*/
-.nav-secondary-tabs {
-  background-color: rgba(0, 0, 0, 0.05);
-  bottom: 0;
-  height: 55px;
-  position: absolute;
-  width: 100%;
-  z-index: 10;
-  transition: all 0.1s ease; }
-
-.nav-secondary-tabs.affix {
-  background: #0C5176;
-  height: 55px;
-  top: 0;
-  position: fixed;
-  z-index: 100; }
-
-/*
-*
-* user-nav ***********************************************************************
-*
-*/
-.user-nav {
-  padding: 7px 0 0; }
-
-/*
-*
-* layout ***********************************************************************
-*
-*/
-.main {
-  padding: 40px 0 30px;
-  min-height: 500px; }
-
-.main-content {
-  padding: 20px 45px 20px 45px;
-  max-width: 1100px; }
-
-@media (min-width: 768px) {
-  .main {
-    padding-right: 40px;
-    padding-left: 40px; } }
-
-.content {
-  padding: 60px 45px 20px 75px;
-  max-width: 1100px;
-  min-height: 500px; }
-
-#wrapper {
-  padding-left: 0;
-  transition: all 0.5s ease; }
-
-#wrapper.toggled {
-  padding-left: 36px; }
-
-#sidebar-wrapper-home {
-  display: none; }
-
-#sidebar-wrapper {
-  height: 100%;
-  position: fixed;
-  right: 250px;
-  overflow-y: auto;
-  margin-right: -250px;
-  transition: all 0.5s ease;
-  width: 0;
-  z-index: 1000; }
-
-#wrapper.toggled #sidebar-wrapper {
-  width: 250px; }
-
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  #sidebar-wrapper {
-    display: none; } }
-
-#page-content-wrapper {
-  padding: 0;
-  width: 100%;
-  transition: all 0.5s ease; }
-
-#wrapper.toggled #page-content-wrapper {
-  position: absolute;
-  margin-left: -240px;
-  padding-right: 240px; }
-
-@media (min-width: 768px) {
-  #wrapper.toggled {
-    padding-left: 0; }
-  #sidebar-wrapper {
-    width: 0; }
-  #wrapper.toggled #sidebar-wrapper {
-    width: 250px; }
-  #page-content-wrapper {
-    padding: 0; }
-  #wrapper.toggled #page-content-wrapper {
-    position: relative;
-    margin-left: 0; } }
-
-/*
-*
-* 2 column left sidebar layout ***********************************************************************
-*
-*/
-/* column container */
-.colmask {
-  position: relative;
-  /* This fixes the IE7 overflow hidden bug */
-  clear: both;
-  float: left;
-  width: 100%;
-  overflow: hidden; }
-
-.colleft,
-.colmid,
-.colright {
-  float: left;
-  width: 100%;
-  position: relative; }
-
-.col1,
-.col2,
-.col3 {
-  float: left;
-  position: relative;
-  padding: 0 0 1em;
-  overflow: hidden; }
-
-/*.leftmenu {}*/
-.leftmenu .colleft {
-  right: 75%;
-  background: #FBFBFC; }
-
-.leftmenu .col1 {
-  width: 71%;
-  /* right column content width */
-  left: 102%;
-  /* 100% plus left column left padding */ }
-
-.leftmenu .col2 {
-  width: 21%;
-  /* left column content width (column width minus left and right padding) */
-  left: 6%;
-  /* (right column left and right padding) plus (left column left padding) */ }
-
-/*
-* Top navigation
-* Hide default border to remove 1px line.
-*/
-.navbar-fixed-top {
-  border: 0; }
-
-/*
-* Sidebar
-*/
-/* Hide for mobile, show later */
-.sidebar {
-  display: none; }
-
-@media (min-width: 768px) {
-  .sidebar-home {
-    background-color: #1f3341;
-    display: block;
-    padding: 0 30px 0 0;
-    min-height: 1800px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-width: 300px; } }
-
-@media (min-width: 768px) {
-  .sidebar {
-    background-color: #1f3341;
-    position: fixed;
-    top: 51px;
-    bottom: 0;
-    left: 0;
-    z-index: 1000;
-    display: block;
-    padding: 0 30px 0 20px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-width: 300px; } }
-
-/*
-*
-* NAV SIDEBAR ***********************************************************************
-*
-*/
-.nav-sidebar {
-  padding: 15px 0 0;
-  margin-right: -21px;
-  margin-bottom: 20px;
-  margin-left: -20px;
-  max-width: 350px; }
-
-.nav-sidebar > li > a {
-  padding-right: 20px;
-  padding-left: 20px; }
-
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:focus,
-.nav-sidebar > .active > a:hover {
-  color: #F7F8F9;
-  background-color: #428bca; }
-
-.nav-sidebar.affix {
-  top: 55px;
-  z-index: 0; }
-
-.nav-sidebar ul {
-  list-style: none;
-  margin: -25px 0 1.5rem;
-  padding: 0;
-  text-align: left;
-  overflow: hidden;
-  transition: all 0.2s ease;}
-
-.nav-sidebar ul li {
-  display: block; }
-
-.nav-sidebar ul li a {
-  font-size: 14px;
-  font-weight: 400;
-  width: 100%;
-  line-height: 24px; }
-
-.nav-sidebar ul li a:hover {
-  opacity: 0.7;
-  background: transparent; }
-
-.nav-sidebar ul li a,
-.nav-sidebar ul li a:focus,
-.nav-sidebar ul li a:hover {
-  border-bottom: none;
-  text-decoration: none; }
-
-.nav-sidebar ul li a.active,
-.nav-sidebar.nav > li > a:focus {
-  cursor: default;
-  color: #F7F8F9;
-  border-left: 4px solid #21cbc9; }
-
-.nav-sidebar ul li li a {
-  margin-left: 10px;
-  border-left: 1px solid #21cbc9;
-  font-size: 12px; }
-
-/*.nav-sidebar a.expand-menu {}
-.nav-sidebar a.expand-menu:hover {}
-.nav-sidebar a.expand-menu.active {}*/
-.nav-sidebar .caret {
-  float: right;
-  margin-top: 5px; }
-
-.nav-sidebar ul,
-.nav-sidebar.affix ul {
-  position: initial;
-  margin: initial !important; }
-
-.leftnav {
-  padding: 0 20px 20px 0; }
-
-/*
-*
-* Table of contents menu  ***********************************************************************
-*
-*/
-.toc-nav i.fa {
-    font-size: 16px;
-    margin: 0px 8px 0 0;
-    color: #97acbb;
+    margin: 10px 0 0 0;
 }
 
-.edit {
-  margin: 10px 0 20px 15px; }
+/*
+*
+* images
+*
+*/
 
-.toc-toggle {
-  width: 25px;
-  height: 25px;
-  float: right; }
-
-.toc-nav {
-  background-color: #1f3341;
-  height: 100%;
-  width: 270px;
-  padding: 20px 20px 10px 20px; }
-
-.toc-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%; }
-
-.toc-nav li {
-  padding: 2px 8px 2px 32px; }
-
-.toc-nav a {
-  text-decoration: none;
-  font-size: 12px;
-  /*color: #0C5176;*/
-  display: block;
-  transition: 0.3s; }
-
-.offcanvas a:focus,
-.toc-nav a:hover {
-  color: #f1f1f1; }
-
-.toc-nav li a.active {
-  color: #F7F8F9;
-  border-left: 4px solid #21cbc9;
-  font-weight: bold; }
-
-.toc-nav ul li,
-.toc-nav ul li ul li {
-  padding-left: 15px; }
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
 
 /*
 *
-* Toggle Switches **************************************************************
+* Header ***********************************************************************
 *
 */
-.toggle-mode {
-  float: left;
-  width: 100%;
-  padding: 0; }
 
-.toggle-mode .icon {
-  width: 25px;
-  float: left;
-  font-size: 1.5rem; }
+.header {
+    animation: gradientswitch 50s infinite;
+    -webkit-animation: gradientswitch 50 sinfinite;
+    height: 500px;
+    position: relative;
+    z-index: 1;
+}
 
-.toggle-switch {
-  float: left;
-  height: 40px;
-  width: 60px;
-  padding: 4px 0 0; }
+@keyframes gradientswitch
+    {
+      0%   {background: #1488C6;}
+      25%  {background: #0C5176;}
+      50%  {background: #BB4258;}
+      75%  {background: #0C5176;}
+      100% {background: #1488C6;}
+    }
 
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 47px;
-  height: 19px; }
-
-.switch input {
-  display: none; }
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #192837;
-  border: 1px solid #3d5261;
-  transition: 0.4s;}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 15px;
-  width: 15px;
-  left: 2px;
-  bottom: 1px;
-  background-color: #0C5176;
-  transition: 0.4s; }
-
-/*input:checked+.slider {}*/
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3; }
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  transform: translateX(26px); }
-
-.slider.round {
-  border-radius: 34px; }
-
-.slider.round:before {
-  border-radius: 50%; }
-
-/*
-*
-* feedback links ***********************************************************************
-*
-*/
-#feedback-links {
-  margin: 50px 0 10px 0;
-  width: 100%;
-  padding: 10px 0 10px 0; }
-
-/*
-*
-* Controls ***********************************************************************
-*
-*/
-.ctrl-left {
-  float: left;
-  width: 20px;
-  margin: 0 19px 1px 0; }
-
-.ctrl-right {
-  float: right;
-  padding: 5px 16px 0; }
-
-.ctrl-right .btn-group {
-  float: left;
-  margin: 2px 24px 0 0; }
-
-/*
-*
-* Breadcrumbs **************************************************************
-*
-*/
-.breadcrumb {
-  padding: 8px 15px 0 0;
-  margin: 10px 0 0;
-  list-style: none;
-  background-color: transparent;
-  border-radius: 4px; }
-
-/*
-* Search *********************************************************************
-*
-*/
-/** for landing page search */
-.search-form {
-  float: left;
-  margin: 10px 15px 0 0px;
-  width: 285px; }
-
-.nav-secondary .search-form {
-  float: left;
-  width: 285px;
-  margin: 10px 30px 0 10px; }
-
-.nav-secondary-tabs .search-form {
-  margin: 10px 30px 0 0; }
-
-.nav-secondary-tabs.affix .search-form {
-  margin: 10px 30px 0 0; }
-
-.nav-secondary-tabs .search-form input[type=search] {
-  background: #3bb1ec;
-  border: 0;
-  color: #0C5176;
-  border-radius: 0;
-  transition: all 0.2s ease; }
-
-.nav-secondary-tabs.affix input[type=search],
-input[type=text] {
-  background: #10628e;
-  border: 0;
-  transition: all 0.2s ease;
-  width: 285px; }
-
-.nav-secondary input[type=search] {
-  background: #2d2d2d;
-  border: 0;
-  border-radius: 0; }
-
-.search-form input[type=search]:focus {
-  background: #fff;
-  box-shadow: 0; }
-
-.search-form input[type=search]::-webkit-input-placeholder {
-  color: #fff; }
-
-.search-form input[type=search]:-moz-placeholder {
-  /* Firefox 18- */
-  color: #fff; }
-
-.search-form input[type=search]::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #fff; }
-
-.search-form input[type=search]:-ms-input-placeholder {
-  color: #fff; }
-
-/*
-*
-* Custom Content Docs Guides : steps   ******************************************
-*
-*/
-i.fa.fa-indent,
-i.fa.fa-outdent {
-  color: #8d98a0;
-  padding: 16px 15px 0 0;
-  font-size: 1.8rem;
-  opacity: 0.7; }
-
-/*.step-container {}*/
-.step a {
-  padding: 15px;
-  float: left;
-  min-height: 75px;
-  width: 100%; }
-
-.step a:hover {
-  opacity: 0.6; }
-
-.step-num {
-  border-radius: 50%;
-  behavior: url("PIE.htc");
-  width: 36px;
-  height: 36px;
-  padding: 4px;
-  border: 2px solid #196d9c;
-  color: #0a486b;
-  text-align: center;
-  float: left;
-  font-size: 1.5rem;
-  margin-right: 25px; }
-
-/*.step-text {}*/
-.step p {
-  padding: 5px 45px 0 0;
-  width: 87%;
-  float: left; }
-
-.step .fa-chevron-right {
-  font-size: 3.5rem;
-  margin: 4px 0 0 15px;
-  float: left;
-  color: #125275;
-  opacity: 0.4; }
-
-/* Portrait and Landscape */
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .step p {
-    padding: 25px 0 0;
-    width: 87%;
-    float: left; }
-  .step-text {
-    float: left; }
-  .container > .navbar-header {
-    margin: 0; } }
-
-/*
-*
-* Guides : components
-*
-*/
-.component-container {
-  padding: 0;
-  margin: 0;
-  width: 100%; }
-
-.component {
-  border-top: 10px solid;
-  border-color: #d3d4d4;
-  padding: 30px 30px 0;
-  text-align: center;
-  margin: 0 0 15px;
-  min-height: 280px;
-  max-width: 330px; }
-
-.component-full {
-  padding: 15px 0 20px 20px;
-  float: left;
-  width: 100%;
-  min-height: 120px;
-  margin: 20px 0 0; }
-
-.component,
-.component-full {
-  box-shadow: 0.2px 0.2px 6px 0 rgba(169, 169, 169, 0.44); }
-
-.component-full-icon {
-  float: left;
-  padding: 5px 15px 0 7px; }
-
-.component-full p {
-  margin: 0; }
-
-.component-full h3 {
-  margin-top: 10px; }
-
-.component img,
-.component-full-icon img {
-  width: 50px;
-  height: 50px; }
-
-.component-icon {
-  width: 50px;
-  margin: 0 auto;
-  padding: 0 0 10px; }
-
-.component-full-copy {
-  float: left;
-  width: 80%; }
-
-a.anchorLink {
-  margin-left: 5px;
-  visibility: hidden; }
-
-/*
-*
-* feedback
-*
-*/
-.feedback {
-  text-align: center;
-  padding: 50px 0; }
-
-/*
-* Global elper classes *********************************************************************
-*
-*/
-.sub-header-block {
-  padding: 25px 20px 50px 0; }
-
-.block {
-  padding: 25px 20px 10px 0; }
-
-.block ul {
-  padding: 0; }
+    @-webkit-keyframes gradientswitch /* Safari and Chrome - necessary duplicate */
+    {
+      0%   {background: #1488C6;}
+      25%  {background: #0C5176;}
+      50%  {background: #BB4258;}
+      75%  {background: #0C5176;}
+      100% {background: #1488C6;}
+}
 
 /*
 *
 * hero banner text *************************************************************
 *
 */
+
 .hero-text {
-  -ms-flex-align: center;
-      align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  min-height: 24em;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -webkit-animation-name: hero;
-          animation-name: hero;
-  -webkit-animation-duration: 2s;
-          animation-duration: 2s; }
+    -ms-flex-align: center;
+    align-items: center;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    min-height: 24em;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-animation-name: hero;
+    animation-name: hero;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
 
 .hero-text-centered {
-  -ms-flex: none;
-      flex: none;
-  text-align: center;
-  max-width: 60%; }
+    -ms-flex: none;
+    flex: none;
+    text-align: center;
+    max-width: 60%;
+}
 
 .hero-text h1 {
-  color: #fff; }
+    color: #fff;
+}
 
 .hero-text p {
-  color: #fff;
-  margin-bottom: 15px;
-  font-size: 18px;
-  line-height: 28px; }
+    color: #fff;
+    margin-bottom: 15px;
+    font-size: 18px;
+    font-weight: 200;
+    font-family: Open Sans;
+    line-height: 30px;
+}
 
 .hero-text ul {
-  padding: 0;
-  width: 65%;
-  margin: 0 auto; }
+    padding: 0;
+    width: 65%;
+    margin: 0 auto;
+}
 
 .hero-text li {
-  padding: 0 10px 0 0; }
+    padding: 0 10px 0 0;
+}
 
-.hero-text a {
-  color: #fff; }
 
 /* Portrait and Landscape */
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .hero-text {
-    position: absolute;
-    top: 75px; }
-  .hero-text-centered {
-    -ms-flex: none;
+    .hero-text {
+        position: absolute;
+        top: 75px;
+    }
+    .hero-text-centered {
+        -ms-flex: none;
         flex: none;
-    text-align: center;
-    max-width: 80%; }
-  .hero-text li {
+        text-align: center;
+        max-width: 80%;
+    }
+    .hero-text li {
+        float: left;
+        margin: 10px 0 0 0;
+    }
+}
+
+
+/*
+* Search *********************************************************************
+*
+*/
+
+.search-form {
     float: left;
-    margin: 10px 0 0; } }
+    margin: 10px 15px 0 20px;
+}
+
+.search-form input[type=text] {
+    background: #3bb1ec;
+    border: 0;
+    color: #0C5176;
+    border-radius: 0px;
+    margin: 0;
+    transition: all 0.2s ease;
+    width: 230px;
+}
+
+.nav-secondary input[type=text] {
+    background: #000;
+    border: 0;
+    margin: 0;
+    transition: all 0.2s ease;
+}
+
+.search-form input[type=text]:focus {
+    background: #fff;
+    box-shadow: 0;
+}
+
+input[type=text], .nav-secondary-tabs.affix input[type=text] {
+    background: #10628e;
+    border: 0;
+    margin: 0;
+}
+
+.search-form input[type=text]::-webkit-input-placeholder {
+    color: #fff;
+}
+
+.search-form input[type=text]:-moz-placeholder {
+    /* Firefox 18- */
+    color: #fff;
+}
+
+.search-form input[type=text]::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #fff;
+}
+
+.search-form input[type=text]:-ms-input-placeholder {
+    color: #fff;
+}
+
+
+/*
+*
+* Butons ***********************************************************************
+*
+*/
+
+ul.buttons {
+    list-style: none;
+}
+
+a.button {
+    color: #fff;
+}
+
+a.button.outline-btn {
+    color: #b3b7bc;
+}
+
+.button {
+    margin: 10px 10px 0 0;
+    font-family: Geomanist;
+    padding: 12px 35px 10px;
+    min-width: 200px;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+    float: left;
+    text-align: center;
+}
+
+.button:hover {
+    color: #fff;
+    opacity: 0.7;
+}
+
+.primary-btn {
+    background: #1488C6;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.secondary-btn {
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.transparent-btn {
+    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.outline-btn {
+    background: #192837;
+    border: 1px solid #263d54;
+    text-decoration: none;
+    margin: 0;
+}
+
+.outline-btn:hover, .primary-btn:hover, .secondary-btn:hover {
+    opacity: 0.8;
+}
+
+.outline-btn:hover {
+    color: #1488C6;
+}
+
+
+/*
+*
+* branding *********************************************************************
+*
+*/
+
+.logo {
+    margin: 12px 10px 0 10px;
+    width: 160px;
+}
+
+.affix-top .affix-logo {
+    opacity: 0;
+}
+
+.affix-logo {
+    float: left;
+    width: 160px;
+    transition: all 0.1s ease;
+}
+
+
+/*
+*
+* Primary navigation - top header **********************************************************
+*
+*/
+
+.nav-primary {
+    background: transparent;
+    padding: 5px 12px;
+}
+
+.primary {
+    padding: 5px 0 0 20px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .nav-primary {
+        background: #0087c9;
+        padding: 5px 12px;
+        position: absolute;
+        width: 100%;
+        z-index: 9999;
+    }
+    .primary {
+        padding: 20px 0 0;
+        text-align: center;
+    }
+    .user-nav {
+        padding: 5px 0 0;
+        text-align: center;
+    }
+    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
+        /** todo remove this **/
+        color: #fff;
+        text-align: center;
+    }
+    .navbar-default .navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
+        background: transparent;
+        border: 0;
+    }
+}
+
+
+/*
+*
+* Secondary Navigation  **********************************************************
+*
+*/
+
+.nav-secondary {
+    background: #000;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.74);
+    height: 55px;
+}
+
+/*
+*
+* nav-secondary-tabs  ***********************************************************************
+*
+*/
+
+.nav-secondary-tabs {
+    background-color: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    height: 55px;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+    transition: all 0.1s ease;
+}
+
+.nav-secondary-tabs.affix {
+    background: #000;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.74);
+    height: 55px;
+    top: 0;
+    position: fixed;
+    z-index: 100;
+}
+/*
+*
+* Tabs ***********************************************************************
+*
+*/
+
+.tabs {
+    padding: 0;
+    float: left;
+    margin: 0;
+}
+
+.tabs li {
+    float: left;
+    list-style: none;
+}
+
+.tabs li a {
+    color: #fff;
+    padding: 19px 20px 13px;
+    float: left;
+    opacity: 0.7;
+    font-weight: 600;
+}
+
+.tabs li a:hover {
+    background: rgb(25, 40, 55) !important;
+    border-bottom: 4px solid #fff;
+}
+
+.tabs li.active a {
+    background: transparent !important;
+    color: #F7F8F9;
+    cursor: default;
+    border-bottom: 4px solid #fff;
+    opacity: 1;
+}
+
+
+/*
+*
+* user-nav ***********************************************************************
+*
+*/
+
+.user-nav {
+    padding: 5px 0 0;
+}
+
+
+/*
+*
+* layout ***********************************************************************
+*
+*/
+section.section {
+    max-width: 960;
+}
+
+.main-content {
+    padding: 20px 15px 25px 20px;
+    max-width: 885px;
+}
+
+.content {
+    padding: 65px 55px 20px 50px;
+    min-height: 500px;
+    max-width: 860px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .content {
+        padding: 55px 30px 20px 32px;
+    }
+}
+
+
+.wrapper {
+    min-height: 1000px;
+    /*transition: all 0.1s ease;*/
+}
+
+
+#sidebar-wrapper-home #feedback-links {
+  margin: 10px 0 10px 0;
+}
+
+#sidebar-wrapper {
+    background: #101c29;
+    border-left: 1px solid rgb(16, 28, 41);
+    height: 100%;
+    position: fixed;
+    right: 250px;
+    overflow-y: auto;
+    margin-right: -250px;
+    width: 0;
+    /*transition: all 0.5s ease;*/
+}
+
+#sidebar-wrapper-home {
+    background-color: #101c29;
+    /*border-left: 1px solid rgba(204, 204, 204, 0.29);*/
+    position: absolute;
+    height: 100%;
+    right: 0;
+    top: 500px;
+    width: 250px;
+}
+
+@media (min-device-width: 320px) and (max-device-width: 480px) {
+    #sidebar-wrapper-home {
+      display: none;
+    }
+}
+
+#sidebar-wrapper-home.affix {
+  top: 10px;
+  position: fixed;
+}
+
+.wrapper.right-open #sidebar-wrapper {
+    width: 250px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    #sidebar-wrapper {
+        display: none;
+    }
+}
+
+.page-content {
+    /*display: none;
+    transition: all 0.5s ease;*/
+}
+
+.wrapper.right-open .page-content {
+    padding-right: 190px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .wrapper.right-open .page-content {
+        padding-right: 0;
+    }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
+  .wrapper.right-open .page-content {
+      padding-right: 0;
+  }
+
+}
+
+/*
+* Top navigation
+* Hide default border to remove 1px line.
+*/
+
+.navbar-fixed-top {
+    top: 0;
+    border-width: 0;
+}
+
+
+/*
+* Sidebar
+*/
+
+
+/* Hide for mobile, show later */
+
+.sidebar {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .sidebar-home {
+        background-color: #101c29;
+        border-right: 1px solid rgb(16, 28, 41);
+        display: block;
+        padding: 0 20px 0 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        min-height: 1000px;
+        max-width: 250px;
+        position: absolute;
+    }
+}
+
+.sidebar-home .affix {
+    background-color: #101c29;
+    border-right: 1px solid 1px solid rgb(16, 28, 41);
+    position: fixed;
+    top: 55px;
+    bottom: 0;
+    left: 0;
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-width: 250px;
+    }
+
+@media (min-width: 768px) {
+    .sidebar {
+        background-color: #101c29;
+        border-right: 1px solid 1px solid rgb(16, 28, 41);
+        position: fixed;
+        top: 51px;
+        bottom: 0;
+        left: 0;
+        display: block;
+        padding: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-width: 250px;
+    }
+}
+
+
+/*
+*
+* NAV SIDEBAR ***********************************************************************
+*
+*/
+
+.nav-sidebar {
+  padding-top: 20px
+}
+
+.nav-sidebar>li>a {
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.nav-sidebar>.active>a, .nav-sidebar>.active>a:focus, .nav-sidebar>.active>a:hover {
+    color: #F7F8F9;
+    background-color: #428bca;
+}
+
+.nav-sidebar.affix {
+    top: 55px;
+    z-index: 0;
+    padding: 30px 0px 0 20px
+}
+
+.nav-sidebar ul {
+    list-style: none;
+    padding: 0;
+    text-align: left;
+    overflow: hidden;
+}
+
+.nav-sidebar ul li {
+    display: block;
+}
+
+/*.nav-sidebar ul li a {}*/
+
+.nav-sidebar ul li a:hover {
+    opacity: 0.7;
+    background: transparent;
+}
+
+.nav-sidebar ul li a, .nav-sidebar ul li a:focus, .nav-sidebar ul li a:hover {
+    border-bottom: none;
+    text-decoration: none;
+}
+
+.nav-sidebar ul li a.active, .nav-sidebar.nav>li>a:focus {
+    cursor: default;
+    color: #F7F8F9;
+    border-left: 4px solid #7960a5;
+}
+
+.nav-sidebar ul li li a {
+    margin-left: 10px;
+    border-left: 1px solid #7960a5;
+    font-size: 12px;
+}
+
+
+/*.nav-sidebar a.expand-menu {}
+.nav-sidebar a.expand-menu:hover {}
+.nav-sidebar a.expand-menu.active {}*/
+
+.nav-sidebar .caret {
+    float: right;
+    margin-top: 5px;
+}
+
+.leftnav {
+    padding: 0 20px 20px 0;
+}
+
+
+/*
+*
+* Table of contents menu  ***********************************************************************
+*
+*/
+
+.toc-nav i.fa {
+    font-size: 16px;
+    margin: 0px 8px 0 0;
+    color: #97acbb;
+}
+
+i.fa.fa-question {
+    font-size: 21px;
+    margin: 0 11px 0 0;
+}
+
+.edit {
+    margin: 10px 0 20px 15px;
+}
+
+.toc-toggle {
+    width: 25px;
+    height: 25px;
+    float: right;
+}
+
+.toc-nav {
+    padding: 10px 10px 30px 20px;
+}
+
+.toc-nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.toc-nav li {
+    padding: 2px 8px 2px 32px;
+}
+
+.toc-nav a {
+  display: block;
+  font-size: 12px;
+  padding: 0 0 0 10px;
+  text-decoration: none;
+}
+
+.offcanvas a:focus, .toc-nav a:hover {
+    color: #f1f1f1;
+}
+
+.toc-nav li a.active {
+    color: #F7F8F9;
+    border-left: 4px solid #21cbc9;
+    font-weight: bold;
+}
+
+.toc-nav ul li, .toc-nav ul li ul li {
+    padding-left: 15px;
+}
+
+
+/*
+*
+* Toggle Switches **************************************************************
+*
+*/
+
+.toggle-mode {
+    float: left;
+    padding: 0 0 0 10px;
+    width: 100%;
+}
+
+.toggle-mode .icon {
+    width: 25px;
+    float: left;
+    font-size: 1.5rem;
+}
+
+.toggle-switch {
+    float: left;
+    height: 40px;
+    width: 60px;
+    padding: 3px 7px 0 2px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 47px;
+    height: 19px;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #0b131b;
+    border: 1px solid #0b131b;
+    transition: 0.4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 15px;
+    width: 15px;
+    left: 2px;
+    bottom: 1px;
+    background-color: #536980;
+    transition: 0.4s;
+}
+
+
+/*input:checked+.slider {}*/
+
+input:focus+.slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+
+/*
+*
+* feedback links ***********************************************************************
+*
+*/
+
+.feedback-links {
+    margin: 40px 0 10px 0;
+    padding: 20px 0 10px 0;
+    width: 250px;
+}
+
+div#PDRTJS_8453675_msg,div#PDRTJS_8453675_msg_1 {
+    color: #fff!important;
+}
+
+/*
+*
+* Controls ***********************************************************************
+*
+*/
+
+.ctrl-left {
+    float: left;
+    width: 20px;
+    margin: 0 19px 1px 0;
+}
+
+.ctrl-right {
+    float: right;
+    padding: 5px 16px 0;
+}
+
+.ctrl-right .btn-group {
+    float: left;
+    margin: 2px 24px 0 0;
+}
+
+
+/*
+*
+* Breadcrumbs **************************************************************
+*
+*/
+
+.breadcrumb {
+    padding: 8px 15px 0 0;
+    margin: 10px 0 0;
+    list-style: none;
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+
+/*
+* Search *********************************************************************
+*
+*/
+
+
+/** for landing page search */
+
+.search-form {
+    float: left;
+    margin: 10px 15px 0 0px;
+    width: 235px;
+}
+
+.nav-secondary .search-form {
+  float: left;
+  width: 235px;
+  margin: 10px 5px 0 10px;
+}
+
+.nav-secondary-tabs .search-form {
+    margin: 5px 10px 0 0;
+}
+
+.nav-secondary-tabs.affix .search-form {
+    margin: 5px 10px 0 0;
+}
+
+.nav-secondary-tabs .search-form input[type=search] {
+    background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
+    background-position: 10px 9px;
+    border: 0;
+    color: #fff;
+    border-radius: 0;
+    /*-webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;*/
+    padding: 0px 0 0 40px;
+    width: 235px;
+}
+
+.nav-secondary-tabs.affix input[type=search], input[type=text] {
+    background: #272727 url("/images/search.png") no-repeat;
+    background-position: 10px 9px;
+    border: 0;
+    box-shadow: none;
+    /*-webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;*/
+}
+
+.nav-secondary input[type=search] {
+    background: #272727 url("/images/search.png") no-repeat;
+    background-position: 10px 9px;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0px 0 0 40px;
+    /*-webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;*/
+}
+
+.nav-secondary .search-form input[type=search]:focus {
+    background: #3e3e3e url("/images/search.png") no-repeat;
+    background-position: 10px 9px;
+    box-shadow: none;
+    color: #ffffff;
+}
+
+.search-form input[type=search]::-webkit-input-placeholder {
+    color: #fff;
+    opacity: .5;
+}
+
+.search-form input[type=search]:-moz-placeholder {
+    /* Firefox 18- */
+    color: #fff;
+    opacity: .5;
+}
+
+.search-form input[type=search]::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #fff;
+    opacity: .5;
+}
+
+.search-form input[type=search]:-ms-input-placeholder {
+    color: #fff;
+    opacity: .5;
+}
+
+
+/*
+*
+* Custom Content Docs Guides : steps   ******************************************
+*
+*/
+
+i.fa.fa-indent, i.fa.fa-outdent {
+    color: #8d98a0;
+    padding: 16px 15px 0 0;
+    font-size: 1.8rem;
+    opacity: 0.7;
+}
+
+
+/*.step-container {}*/
+
+.step a {
+    padding: 15px;
+    float: left;
+    min-height: 75px;
+    width: 100%;
+}
+
+.step a:hover {
+    opacity: 0.6;
+}
+
+.step-num {
+    border-radius: 50%;
+    behavior: url("PIE.htc");
+    width: 36px;
+    height: 36px;
+    padding: 4px;
+    border: 2px solid #196d9c;
+    color: #0a486b;
+    text-align: center;
+    float: left;
+    font-size: 1.5rem;
+    margin-right: 25px;
+}
+
+
+/*.step-text {}*/
+
+.step p {
+    padding: 5px 45px 0 0;
+    width: 87%;
+    float: left;
+}
+
+.step .fa-chevron-right {
+    font-size: 3.5rem;
+    margin: 4px 0 0 15px;
+    float: left;
+    color: #125275;
+    opacity: 0.4;
+}
+
+
+/* Portrait and Landscape */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .step p {
+        padding: 25px 0 0;
+        width: 87%;
+        float: left;
+    }
+    .step-text {
+        float: left;
+    }
+    .container>.navbar-header {
+        margin: 0;
+    }
+}
+
+
+/*
+*
+* Guides : components
+*
+*/
+
+.component-container {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.component {
+    background: #101c29;
+    padding: 30px 30px 0;
+    text-align: center;
+    min-height: 280px;
+    max-width: 300px;
+    max-width: 330px;
+}
+
+.component-full {
+    background: #101c29;
+    padding: 33px 0 32px 23px;
+    float: left;
+    width: 100%;
+    min-height: 120px;
+    margin: 20px 0 0;
+}
+
+.component p, .component-full p {
+    color: #72ccff;
+}
+
+.component-full-icon {
+    float: left;
+    padding: 5px 15px 0 7px;
+}
+
+.component-full p {
+    margin: 0;
+}
+
+.component-full h3 {
+    margin-top: 10px;
+}
+
+.component img, .component-full-icon img {
+    width: 50px;
+    height: 50px;
+}
+
+.component-icon {
+    width: 50px;
+    margin: 0 auto;
+    padding: 0 0 10px;
+}
+
+.component-full-copy {
+    float: left;
+    width: 80%;
+}
+
+a.anchorLink {
+    margin-left: 5px;
+    visibility: hidden;
+}
+
+
+/*
+*
+* feedback
+*
+*/
+
+.feedback {
+    text-align: center;
+    padding: 50px 0;
+}
+
+
+/*
+* Global elper classes *********************************************************************
+*
+*/
+
+.sub-header-block {
+    padding: 25px 20px 50px 0;
+}
+
+/*.block {
+    padding: 25px 20px 10px 0;
+}*/
+
+.block ul {
+    padding: 0;
+}
+
+
+/*
+*
+* hero banner text *************************************************************
+*
+*/
+
+.hero-text {
+    -ms-flex-align: center;
+    align-items: center;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    min-height: 24em;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-animation-name: hero;
+    animation-name: hero;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
+
+.hero-text-centered {
+    -ms-flex: none;
+    flex: none;
+    text-align: center;
+    max-width: 60%;
+}
+
+.hero-text h1 {
+    color: #fff;
+}
+
+.hero-text p {
+    color: #fff;
+    margin-bottom: 15px;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+.hero-text ul {
+    padding: 0;
+    width: 65%;
+    margin: 0 auto;
+}
+
+.hero-text li {
+    padding: 0 10px 0 0;
+}
+
+.hero-text a {
+    color: #fff;
+}
+
+
+/* Portrait and Landscape */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .hero-text {
+        position: absolute;
+        top: 75px;
+    }
+    .hero-text-centered {
+        -ms-flex: none;
+        flex: none;
+        text-align: center;
+        max-width: 80%;
+    }
+    .hero-text li {
+        float: left;
+        margin: 10px 0 0;
+    }
+}
+
 
 /*
 *
 * Custom Content****************************************************************
 *
 */
-.strip,
-.strip-alt {
-  padding: 70px 0 50px;
-  min-height: 300px;
-  width: 100%; }
+
+.strip, .strip-alt {
+    padding: 70px 0 50px;
+    min-height: 300px;
+    width: 100%;
+}
 
 .strip-alt {
-  background: #1488c6;
-  color: #fff; }
+    background: #1488c6;
+    color: #fff;
+}
 
-.strip-alt h3,
-.strip-alt h6 {
-  color: #fff; }
+.strip-alt h3, .strip-alt h6 {
+    color: #fff;
+}
 
 .color-strip {
-  background: #1488c6;
-  height: 300px;
-  width: 100%; }
+    background: #1488c6;
+    height: 300px;
+    width: 100%;
+}
 
 .illustration {
-  max-width: 944px;
-  margin: 0 auto; }
+    max-width: 944px;
+    margin: 0 auto;
+}
 
 
 /*
@@ -935,44 +1384,50 @@ a.anchorLink {
 * Bootstrap Overrides : super embarrassing  ***********************************************************************
 *
 */
-.navbar-nav > li > a {
-  color: #fff !important; }
 
-.navbar-collapse,
-.navbar-form {
-  border-color: transparent; }
+.navbar-nav>li>a {
+    color: #fff !important;
+}
+
+.navbar-collapse, .navbar-form {
+    border-color: transparent;
+}
 
 .navbar-toggle .icon-bar {
-  background-color: #fff !important; }
+    background-color: #fff !important;
+}
 
-.nav > li > a:focus,
-.nav > li > a:hover {
-  background-color: transparent; }
+.nav>li>a:focus, .nav>li>a:hover {
+    background-color: transparent;
+}
 
-.dropdown-menu > li > a {
-  font-size: 13.5px;
-  line-height: 16px;
-  color: #1488c6;
-  padding: 5px 15px;
-  display: block; }
+.dropdown-menu>li>a {
+    font-size: 13.5px;
+    line-height: 16px;
+    color: #1488c6;
+    padding: 5px 15px;
+    display: block;
+}
 
-.nav .open > a,
-.nav .open > a:focus,
-.nav .open > a:hover {
-  background-color: transparent;
-  border-color: #337ab7; }
+.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
+    background-color: transparent;
+    border-color: #337ab7;
+}
 
-  /*
+
+/*
   *
   * docs content formatting  **********************************************************
   *
   */
-  blockquote {
-      border-left: 6px solid #439FD1;
-      background: #1f3341;
-  }
 
-  pre {
+blockquote {
+    border-left: 6px solid #439FD1;
+    background: #1f3341;
+    padding: 10px 20px 20px 10px;
+}
+
+pre {
     display: block;
     padding: 9.5px;
     margin: 0 0 10px;
@@ -985,343 +1440,143 @@ a.anchorLink {
     border: 1px solid #000;
     border-radius: 4px;
 }
+
 .hljs {
     color: #f5f5f5!important;
 }
+.hljs-tag, .hljs-name, .hljs-attribute {
+    color: #e3e3f2!important;
+    font-weight: normal;
+}
 .hljs-keyword, .hljs-selector-tag, .hljs-subst {
     color: #f5f5f5!important;
 }
+
 code {
-    padding: 5px 4px;
+    padding: 3px 7px;
     font-size: 90%;
-    color: #f0adfb;
-    background-color: #000000;
-    border-radius: 4px;
+    color: #c9b3ef;
+    background-color: rgba(64, 62, 162, 0.27);
+    border-radius: 2px;
 }
+
 span.reading-time {
     font-style: italic;
     font-size: 12px;
     display: block;
-    color: #4ab7f1;
+    color: #bfabe5;
 }
+
+
 /*
 *
 * autocompleteResults  **********************************************************
 *
 */
+
 div#autocompleteResults {
     display: none;
 }
+
 div#autocompleteResults {
-    background: #0a0a0a;
+    background: rgba(10, 10, 10, 0.95);
     border: 1px solid #000;
     color: #fff;
-    padding: 20px 40px 10px 5px;
+    padding: 20px 55px 15px 15px;
     margin: 10px 0 0 0;
     position: absolute;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
+    width: 800px;
 }
+
 ul.autocompleteList {
     list-style: none;
 }
+
 .autocompleteList li {
+    ccolor: #b4c3d2;
     padding: 5px 0 7px 0;
 }
 
 div#autocompleteResults span {
-    background: #5d2663;
-    color: #fff;
+  background-color: rgba(64, 62, 162, 0.61);
+  color: #b7a4de;
 }
+
+
 /*
 *
 * Fonts  ***********************************************************************
 *
 */
-@font-face {
-  font-family: 'Geomanist Book';
-  src: url("../fonts/geomanist/hinted-Geomanist-Book.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Book.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Book.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Book.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Book.svg#Geomanist-Book") format("svg");
-  font-weight: normal;
-  font-style: normal; }
 
 @font-face {
-  font-family: 'Geomanist Ultra';
-  src: url("../fonts/geomanist/hinted-Geomanist-Ultra.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Ultra.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Ultra.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Ultra.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Ultra.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Ultra.svg#Geomanist-Ultra") format("svg");
-  font-weight: normal;
-  font-style: normal; }
+    font-family: 'Geomanist Book';
+    src: url("../fonts/geomanist/hinted-Geomanist-Book.eot");
+    src: url("../fonts/geomanist/hinted-Geomanist-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Book.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Book.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Book.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Book.svg#Geomanist-Book") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
 
-@font-face {
-  font-family: 'Geomanist Thin';
-  src: url("../fonts/geomanist/hinted-Geomanist-Thin.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Thin.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Thin.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Thin.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Thin.svg#Geomanist-Thin") format("svg");
-  font-weight: 100;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Geomanist Light';
-  src: url("../fonts/geomanist/hinted-Geomanist-Light.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Light.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Light.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Light.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Light.svg#Geomanist-Light") format("svg");
-  font-weight: 300;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Geomanist';
-  src: url("../fonts/geomanist/hinted-Geomanist-Regular.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Regular.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Regular.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Regular.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Regular.svg#Geomanist-Regular") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Geomanist ExtraLight';
-  src: url("../fonts/geomanist/hinted-Geomanist-ExtraLight.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-ExtraLight.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-ExtraLight.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-ExtraLight.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-ExtraLight.svg#Geomanist-ExtraLight") format("svg");
-  font-weight: 200;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Geomanist Medium';
-  src: url("../fonts/geomanist/hinted-Geomanist-Medium.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Medium.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Medium.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Medium.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Medium.svg#Geomanist-Medium") format("svg");
-  font-weight: 500;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Geomanist Bold';
-  src: url("../fonts/geomanist/hinted-Geomanist-Bold.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Bold.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Bold.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Bold.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Bold.svg#Geomanist-Bold") format("svg");
-  font-weight: bold;
-  font-style: normal; }
-
-/*
-*
-* Header ***********************************************************************
-*
-*/
-.header {
-  background: #0087C9;
-  min-height: 500px;
-  position: relative; }
-
-.fan {
-  background: transparent url("../images/fan.svg") no-repeat top left;
-  background-size: cover;
-  position: absolute;
-  width: 208px;
-  height: 500px; }
-
-/*
-*
-* hero banner text *************************************************************
-*
-*/
-.hero-text {
-  -ms-flex-align: center;
-      align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  min-height: 24em;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -webkit-animation-name: hero;
-          animation-name: hero;
-  -webkit-animation-duration: 2s;
-          animation-duration: 2s; }
-
-.hero-text-centered {
-  -ms-flex: none;
-      flex: none;
-  text-align: center;
-  max-width: 60%; }
-
-.hero-text h1 {
-  color: #fff; }
-
-.hero-text p {
-  color: #fff;
-  margin-bottom: 15px;
-  font-size: 18px;
-  font-weight: 200;
-  font-family: Open Sans;
-  line-height: 30px; }
-
-.hero-text ul {
-  padding: 0;
-  width: 65%;
-  margin: 0 auto; }
-
-.hero-text li {
-  padding: 0 10px 0 0; }
-
-/* Portrait and Landscape */
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .hero-text {
-    position: absolute;
-    top: 75px; }
-  .hero-text-centered {
-    -ms-flex: none;
-        flex: none;
-    text-align: center;
-    max-width: 80%; }
-  .hero-text li {
-    float: left;
-    margin: 10px 0 0 0; } }
-
-/*
-* Search *********************************************************************
-*
-*/
-.search-form {
-  float: left;
-  margin: 10px 15px 0 20px; }
-
-.search-form input[type=text] {
-  background: #3bb1ec;
-  border: 0;
-  color: #0C5176;
-  border-radius: 0px;
-  margin: 0;
-  transition: all 0.2s ease;
-  width: 230px; }
-
-.nav-secondary input[type=text] {
-  background: #000;
-  border: 0;
-  margin: 0;
-  transition: all 0.2s ease; }
-
-.search-form input[type=text]:focus {
-  background: #fff;
-  box-shadow: 0; }
-
-input[type=text], .nav-secondary-tabs.affix input[type=text] {
-  background: #10628e;
-  border: 0;
-  margin: 0; }
-
-.search-form input[type=text]::-webkit-input-placeholder {
-  color: #fff; }
-
-.search-form input[type=text]:-moz-placeholder {
-  /* Firefox 18- */
-  color: #fff; }
-
-.search-form input[type=text]::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #fff; }
-
-.search-form input[type=text]:-ms-input-placeholder {
-  color: #fff; }
-
-/*
-*
-* Butons ***********************************************************************
-*
-*/
-ul.buttons {
-  list-style: none; }
-
-a.button {
-  color: #fff; }
-
-a.button.outline-btn {
-  color: #0087C8; }
-
-.button {
-  margin: 10px 10px 0 0;
-  font-family: Geomanist;
-  padding: 12px 35px 10px;
-  min-width: 200px;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  float: left;
-  text-align: center; }
-
-.button:hover {
-  color: #fff;
-  opacity: 0.7; }
-
-.primary-btn {
-  background: #1488C6;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
-
-.secondary-btn {
-  background-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
-
-.transparent-btn {
-  background-color: rgba(0, 0, 0, 0.2);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
-
-  .outline-btn {
-    background: #192837;
-    border: 1px solid #263d54;
-    text-decoration: none;
-    margin: 0; }
-
-.outline-btn:hover,
-.primary-btn:hover,
-.secondary-btn:hover {
-  opacity: 0.8; }
-
-.outline-btn:hover {
-  color: #1488C6; }
 
 /** these are bootstarp overrides :/   */
+
 .dropdown-btn {
-  background: transparent;
-  color: #fff;
-  padding: 6px 12px;
-  margin-top: 7px;
-  font-weight: 400;
-  background-image: none;
-  border: 0; }
+    background: transparent;
+    color: #fff;
+    padding: 6px 12px;
+    margin-top: 7px;
+    font-weight: 400;
+    background-image: none;
+    border: 0;
+}
 
 .dropdown-header {
-  font-size: 13.5px;
-  line-height: 16px;
-  color: #1488c6;
-  padding: 5px 15px;
-  display: block; }
+    font-size: 13.5px;
+    line-height: 16px;
+    color: #1488c6;
+    padding: 5px 15px;
+    display: block;
+}
 
 .text-link {
-  padding: 5px; }
+    padding: 5px;
+}
 
 #feedback {
-  padding: 10px 0; }
+    padding: 10px 0;
+}
+
 
 /*
 *
 * News letter  **********************************************************
 *
 */
+
 .newsletter_section {
-  background-color: rgb(25, 40, 55);
-  padding: 42px 0 32px;
-  min-height: 140px; }
+    background-color: rgb(12, 12, 12);
+    padding: 42px 0 32px;
+    min-height: 140px;
+}
 
 .newsletter_section input {
-  background-color: #263d54;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  font-size: 16px;
-  line-height: 19px;
-  color: #82949E;
-  padding: 14px 15px 12px;
-  margin: -2px 10px 10px 0;
-  float: left;
-  height: 49px;
-  width: 340px !important; }
+    background-color: #151414;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    font-size: 16px;
+    line-height: 19px;
+    color: #82949E;
+    padding: 14px 15px 12px;
+    margin: -2px 10px 10px 0;
+    float: left;
+    height: 49px;
+    width: 340px !important;
+}
 
 
 /*
@@ -1329,101 +1584,139 @@ a.button.outline-btn {
 * global footer  ***********************************************************************
 *
 */
+
 footer {
-  background: #000;
-  /*box-shadow: -4px -7px 9px 5px #192837;*/
-  position: relative;
-  z-index: 99999; }
+    background: #000;
+    /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), 0 4px 12px 1px rgb(0, 0, 0);*/
+    position: relative;
+    z-index: 99999;
+}
 
 .top_footer {
-  padding: 50px 0 35px; }
+    padding: 50px 0 35px;
+}
 
 .footer_links {
-  list-style: none;
-  padding: 0; }
-  .footer_links li {
-    margin-bottom: 2px; }
-    .footer_links li a {
-      color: #c3c5c5;
-      font-size: 12px;
-      line-height: 16px;
-      text-decoration: none; }
+    list-style: none;
+    padding: 0;
+}
+
+.footer_links li {
+    margin-bottom: 2px;
+}
+
+.footer_links li a {
+    color: #c3c5c5;
+    font-size: 12px;
+    line-height: 16px;
+    text-decoration: none;
+}
 
 .footer_sub_nav {
-  float: right;
-  padding: 10px 30px 20px 0; }
-  .footer_sub_nav ul {
+    float: right;
+    padding: 10px 30px 20px 0;
+}
+
+.footer_sub_nav ul {
     list-style: none;
     margin: 0;
-    padding: 0; }
-    .footer_sub_nav ul li {
-      float: left;
-      margin-left: 10px;
-      padding-bottom: 6px; }
-      .footer_sub_nav ul li a {
-        color: #637986;
-        font-size: 12px;
-        line-height: 17px; }
+    padding: 0;
+}
+
+.footer_sub_nav ul li {
+    float: left;
+    margin-left: 10px;
+    padding-bottom: 6px;
+}
+
+.footer_sub_nav ul li a {
+    color: #637986;
+    font-size: 12px;
+    line-height: 17px;
+}
 
 .bottom_footer {
-  clear: both;
-  padding: 30px 0 20px;
-  border-top: 1px solid #192837;
-  float: left;
-  width: 100%; }
+    clear: both;
+    padding: 30px 0 20px;
+    border-top: 1px solid #192837;
+    float: left;
+    width: 100%;
+}
 
 .footer-copyright {
-  float: left; }
-  .footer-copyright p {
+    float: left;
+}
+
+.footer-copyright p {
     font-family: "Open Sans";
     font-size: 12px;
     line-height: 17px;
     color: #637986;
     margin-bottom: 0;
-    padding: 0 0 15px; }
+    padding: 0 0 15px;
+}
 
 .footer_social_nav {
-  float: right;
-  padding: 0 15px 0 0; }
-  .footer_social_nav ul {
+    float: right;
+    padding: 0 15px 0 0;
+}
+
+.footer_social_nav ul {
     list-style: none;
     padding: 0;
-    margin: 0; }
-    .footer_social_nav ul li {
-      float: left;
-      position: relative; }
+    margin: 0;
+}
+
+.footer_social_nav ul li {
+    float: left;
+    position: relative;
+}
 
 .footer_social_nav ul li:before {
-  color: #fff;
-  position: absolute;
-  top: 10px;
-  left: 10px; }
+    color: #fff;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
 
-.footer_social_nav ul li + li {
-  margin-left: 10px; }
+.footer_social_nav ul li+li {
+    margin-left: 10px;
+}
 
 .footer_social_nav ul li a {
-  width: 32px;
-  height: 32px;
-  background-color: #222323;
-  border-radius: 50px;
-  color: #fff;
-  display: block;
-  text-indent: 9999px;
-  overflow: hidden; }
+    width: 32px;
+    height: 32px;
+    background-color: #222323;
+    border-radius: 50px;
+    color: #fff;
+    display: block;
+    text-indent: 9999px;
+    overflow: hidden;
+}
+
+.break {
+  margin-bottom: 20px!important;
+}
 
 /* Portrait and Landscape */
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .top_footer {
-    padding: 15px 0 0;
-    margin-bottom: 50px; }
-  .footer_links {
-    padding: 10px 0; }
-  button.outline-btn {
-    margin: 20px 0 0 2px; }
-  .footer_sub_nav {
-    float: left; }
-  .footer_sub_nav ul li {
-    float: none;
-    padding-bottom: 6px;
-    margin: 0; } }
+    .top_footer {
+        padding: 15px 0 0;
+        margin-bottom: 50px;
+    }
+    .footer_links {
+        padding: 10px 0;
+    }
+    button.outline-btn {
+        margin: 20px 0 0 2px;
+    }
+    .footer_sub_nav {
+        float: left;
+    }
+    .footer_sub_nav ul li {
+        float: none;
+        padding-bottom: 6px;
+        margin: 0;
+    }
+}
diff --git a/css/style.css b/css/style.css
index 2d0487bf12..23cee9eb6b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,43 +1,52 @@
 /*
 *
 * docker
-* base theme
+* base theme light
 *
 */
+
 html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; }
+    font-family: sans-serif;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
 
 body {
-  background-color: #fff;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  color: #637986; }
+    background-color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    color: #637986;
+}
+
 
 /*
 *
 * links
 *
 */
-a {
-  color: #2089C4;
-  cursor: pointer; }
 
-a:active,
-a:hover {
-  color: #42aae4;
-  text-decoration: none; }
+a {
+    color: #2089C4;
+    cursor: pointer;
+}
+
+a:active, a:hover {
+    color: #2089C4;
+    opacity: .8;
+    text-decoration: none;
+}
+
 
 /*
 *
 * lists
 *
 */
+
+
 /*
 *
 * tables
@@ -45,87 +54,126 @@ a:hover {
 */
 
 table {
-  border: 1px solid rgba(204, 204, 204, 0.29);
-  margin: 0 0 15px 0;
-  min-width: 86%;
-  max-width: 100%;
+    border: 1px solid rgba(204, 204, 204, 0.29);
+    margin: 0 0 15px 0;
+    width: 100%;
 }
 
 table>tbody>tr:nth-of-type(even) {
     background-color: #f7f7f7;
 }
+
 th, td {
     padding: 7px 10px 7px 20px;
     text-align: left;
     font-weight: 400;
 }
+
 thead {
     background: rgba(96, 125, 139, 0.28);
     font-weight: 400;
 }
+
+
 /*
 *
 * typography ******************************************************************
 *
 */
+
 h1, h2, h3, h4, h5, h6 {
-  color: #254356;
-  font-family: Geomanist Book; }
+    color: #254356;
+    font-family: Geomanist Book;
+}
 
 h1 {
-  font-size: 38px;
-  line-height: 48px; }
+    font-size: 38px;
+    line-height: 48px;
+}
 
 h2 {
-  font-size: 28px;
-  line-height: 38px; }
+    font-size: 28px;
+    line-height: 38px;
+}
 
 h3 {
-  font-size: 20px;
-  line-height: 28px; }
+    font-size: 20px;
+    line-height: 28px;
+}
 
 h4 {
-  color: #445d6e;
-  font-size: 18px;
-  line-height: 26px;
-  text-transform: uppercase; }
+    color: #445d6e;
+    font-size: 18px;
+    line-height: 26px;
+    text-transform: uppercase;
+}
 
 h5 {
-  color: #445d6e;
-  font-size: 16px;
-  line-height: 26px; }
+    color: #445d6e;
+    font-size: 16px;
+    line-height: 26px;
+}
 
 h6 {
-  color: #82949e;
-  font-size: 16px;
-  line-height: 26px; }
+    color: #82949e;
+    font-size: 16px;
+    line-height: 26px;
+}
 
 p {
-  color: #445d6e;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  margin: 10px 0 20px 0; }
+    color: #445d6e;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 10px 0 20px 0;
+}
+
+
+/*
+*
+* mobile type ******************************************************************
+*
+*/
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    h1 {
+        font-size: 26px;
+    }
+    h2 {
+        font-size: 22px;
+    }
+    h3 {
+        font-size: 18px;
+    }
+    h4 {
+        font-size: 16px;
+    }
+}
 
 p.p2 {
-  font-size: 16px;
-  line-height: 30px; }
+    font-size: 16px;
+    line-height: 30px;
+}
 
 .reading-time {
-  font-style: italic;
-  font-size: 80%;
-  display: block;
-  padding: 0;
-  color: #ccc; }
+    font-style: italic;
+    font-size: 80%;
+    display: block;
+    padding: 0;
+    color: #ccc;
+}
 
 .dropdown-header {
-  font-size: 13.5px;
-  line-height: 16px;
-  color: #1488c6;
-  padding: 10px 0 0 15px;
-  display: block;
-  font-weight: 600;
-  margin: 10px 0 0 0; }
+    font-size: 13.5px;
+    line-height: 16px;
+    color: #1488c6;
+    padding: 10px 0 0 15px;
+    display: block;
+    font-weight: 600;
+    margin: 10px 0 0 0;
+}
+
+
 /*
 *
 * images
@@ -133,835 +181,1332 @@ p.p2 {
 */
 
 img {
-  display: block;
-  max-width: 100%;
-  height: auto;
+    display: block;
+    max-width: 100%;
+    height: auto;
 }
-/*
-*
-* branding *********************************************************************
-*
-*/
-.logo {
-  margin: 12px 10px 0 10px; }
-
-.affix-top .affix-logo {
-  opacity: 0; }
-
-.affix-logo {
-  float: left;
-  width: 160px;
-  transition: all 0.1s ease; }
 
 /*
 *
-* Primary navigation - top header **********************************************************
+* Header ***********************************************************************
 *
 */
-.nav-primary {
-  background: transparent;
-  padding: 5px 12px; }
 
-.primary {
-  padding: 5px 0 0 90px; }
-
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .nav-primary {
-    background: #0087c9;
-    padding: 5px 12px;
-    position: absolute;
-    /*height: 100%;*/
-    width: 100%;
-    z-index: 9999; }
-  .primary {
-    padding: 20px 0 0;
-    text-align: center; }
-  .user-nav {
-    padding: 5px 0 0;
-    text-align: center; }
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    /** todo remove this **/
-    color: #fff;
-    text-align: center; }
-  .navbar-default .navbar-toggle,
-  .navbar-default .navbar-toggle:focus,
-  .navbar-default .navbar-toggle:hover {
-    background: transparent;
-    border: 0; } }
-
-/*
-*
-* Secondary Navigation  **********************************************************
-*
-*/
-.nav-secondary {
-  background: #0C5176;
-  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
-  height: 55px; }
-
-/*
-*
-* Tabs ***********************************************************************
-*
-*/
-.tabs {
-  padding: 0;
-  float: left;
-  margin: 0; }
-
-.tabs li {
-  float: left;
-  list-style: none; }
-
-.tabs li a {
-  color: #fff;
-  padding: 16px 20px 15px;
-  float: left;
-  transition: 0.3s;
-  opacity: 0.7; }
-
-.tabs li a:hover {
-  background: rgba(0, 0, 0, 0.17) !important;
-  border-bottom: 4px solid #fff; }
-
-.tabs li.active a {
-  background: transparent !important;
-  color: #2089C4;
-  cursor: default;
-  border-bottom: 4px solid #fff;
-  opacity: 1; }
-
-/*
-*
-* nav-secondary-tabs  ***********************************************************************
-*
-*/
-.nav-secondary-tabs {
-  background-color: rgba(0, 0, 0, 0.05);
-  bottom: 0;
-  height: 55px;
-  position: absolute;
-  width: 100%;
-  z-index: 10;
-  transition: all 0.1s ease; }
-
-.nav-secondary-tabs.affix {
-  background: #0C5176;
-  height: 55px;
-  top: 0;
-  position: fixed;
-  z-index: 100; }
-
-/*
-*
-* user-nav ***********************************************************************
-*
-*/
-.user-nav {
-  padding: 7px 0 0; }
-
-/*
-*
-* layout ***********************************************************************
-*
-*/
-.main {
-  padding: 40px 0 30px;
-  min-height: 500px; }
-
-.main-content {
-  padding: 20px 45px 20px 45px;
-  max-width: 1100px;}
-
-/*@media (min-width: 768px) {
-  .main {
-    padding-right: 40px;
-    padding-left: 40px; } }*/
-
-.content {
-  padding: 60px 45px 20px 75px;
-  max-width: 1100px;
-  min-height: 500px; }
-
-#wrapper {
-  padding-left: 0;
-  transition: all 0.5s ease; }
-
-#wrapper.toggled {
-  padding-left: 36px; }
-
-#sidebar-wrapper-home {
-  display: none;}
-
-#sidebar-wrapper {
-  height: 100%;
-  position: fixed;
-  right: 250px;
-  overflow-y: auto;
-  margin-right: -250px;
-  transition: all 0.5s ease;
-  width: 0;
-  z-index: 1000; }
-
-/*@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  #sidebar-wrapper {
-    display: none;
-  }
-}*/
-
-#wrapper.toggled #sidebar-wrapper {
-  width: 250px; }
-
-#page-content-wrapper {
-  padding: 0;
-  width: 100%;
-  transition: all 0.5s ease; }
-
-#wrapper.toggled #page-content-wrapper {
-  position: absolute;
-  margin-left: -240px;
-  padding-right: 240px; }
-
-@media (min-width: 768px) {
-  #wrapper.toggled {
-    padding-left: 0; }
-  #sidebar-wrapper {
-    width: 0; }
-  #wrapper.toggled #sidebar-wrapper {
-    width: 250px; }
-  #page-content-wrapper {
-    padding: 0; }
-  #wrapper.toggled #page-content-wrapper {
+.header {
+    animation: gradientswitch 50s infinite;
+    -webkit-animation: gradientswitch 50 sinfinite;
+    height: 500px;
     position: relative;
-    margin-left: 0; } }
-
-/*
-*
-* 2 column left sidebar layout ***********************************************************************
-*
-*/
-/* column container */
-.colmask {
-  position: relative;
-  /* This fixes the IE7 overflow hidden bug */
-  clear: both;
-  float: left;
-  width: 100%;
-  overflow: hidden; }
-
-.colleft,
-.colmid,
-.colright {
-  float: left;
-  width: 100%;
-  position: relative; }
-
-.col1,
-.col2,
-.col3 {
-  float: left;
-  position: relative;
-  padding: 0 0 1em;
-  overflow: hidden; }
-
-/*.leftmenu {}*/
-.leftmenu .colleft {
-  right: 75%;
-  background: #FBFBFC; }
-
-.leftmenu .col1 {
-  width: 71%;
-  /* right column content width */
-  left: 102%;
-  /* 100% plus left column left padding */ }
-
-.leftmenu .col2 {
-  width: 21%;
-  /* left column content width (column width minus left and right padding) */
-  left: 6%;
-  /* (right column left and right padding) plus (left column left padding) */ }
-
-/*
-* Top navigation
-* Hide default border to remove 1px line.
-*/
-.navbar-fixed-top {
-  border: 0; }
-
-  /*
-  * Sidebar
-  */
-  /* Hide for mobile, show later */
-  .sidebar {
-      display: none;
-  }
-  @media (min-width: 768px) {
-      .sidebar-home {
-          background-color: #FBFBFC;
-          display: block;
-          padding: 0 30px 0 0;
-          overflow-x: hidden;
-          overflow-y: auto;
-      }
-  }
-  /*.sidebar-home .affix {}*/
-  @media (min-width: 768px) {
-      .sidebar {
-          background-color: #FBFBFC;
-          position: fixed;
-          top: 51px;
-          bottom: 0;
-          left: 0;
-          z-index: 1000;
-          display: block;
-          padding: 0 30px 0 0;
-          overflow-x: hidden;
-          overflow-y: auto;
-          max-width: 300px;
-      }
-  }
-/*
-*
-* NAV SIDEBAR ***********************************************************************
-*
-*/
-.nav-sidebar {
-  padding: 15px 0 0;
-  margin-right: -21px;
-  margin-bottom: 20px;
-  /*margin-left: -20px;*/
-  max-width: 350px; }
-
-.nav-sidebar > li > a {
-  padding-right: 20px;
-  padding-left: 20px; }
-
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:focus,
-.nav-sidebar > .active > a:hover {
-  color: #2089C4;
-  background-color: #428bca; }
-
-.nav-sidebar.affix {
-  top: 55px;
-  z-index: 0; }
-
-.nav-sidebar ul {
-  list-style: none;
-  /*margin: -25px 0 1.5rem;*/
-  padding: 0;
-  /*width: 270px;*/
-  text-align: left;
-  overflow: hidden; }
-
-.nav-sidebar ul li {
-  display: block; }
-
-.nav-sidebar ul li a {
-  font-size: 14px;
-  font-weight: 600;
-  width: 100%; }
-
-.nav-sidebar ul li a:hover {
-  opacity: 0.7;
-  background: transparent; }
-
-.nav-sidebar ul li a,
-.nav-sidebar ul li a:focus,
-.nav-sidebar ul li a:hover {
-  border-bottom: none;
-  text-decoration: none; }
-
-.nav-sidebar ul li a.active,
-.nav-sidebar.nav > li > a:focus {
-  cursor: default;
-  color: #2089C4;
-  border-left: 4px solid #21cbc9; }
-
-.nav-sidebar ul li li a {
-  margin-left: 10px;
-  border-left: 1px solid #21cbc9;
-  font-size: 12px; }
-
-/*.nav-sidebar a.expand-menu {}
-.nav-sidebar a.expand-menu:hover {}
-.nav-sidebar a.expand-menu.active {}*/
-.nav-sidebar .caret {
-  float: right;
-  margin-top: 5px; }
-
-.nav-sidebar ul,
-.nav-sidebar.affix ul {
-  position: initial;
-  margin: initial !important; }
-
-.leftnav {
-  padding: 0 20px 20px 0; }
-
-/*
-*
-* Table of contents menu  ***********************************************************************
-*
-*/
-.toc-nav i.fa {
-    font-size: 16px;
-    margin: 0px 8px 0 0;
-    color: #4fa1d0;}
-
-.edit {
-  margin: 10px 0 20px 15px; }
-
-.toc-toggle {
-  width: 25px;
-  height: 25px;
-  float: right; }
-
-.toc-nav {
-  background-color: #FBFBFC;
-  height: 100%;
-  padding: 20px 10px 50px 17px;
-  width: 250px; }
-
-.toc-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%; }
-
-.toc-nav li {
-  padding: 2px 8px 2px 32px; }
-
-.toc-nav a {
-  /*padding-left: 25px;*/
-  text-decoration: none;
-  font-size: 12px;
-  /*color: #0C5176;*/
-  display: block;
-  transition: 0.3s; }
-
-.offcanvas a:focus,
-.toc-nav a:hover {
-  opacity: .8;}
-
-.toc-nav li a.active {
-  color: #2089C4;
-  border-left: 4px solid #21cbc9;
-  font-weight: bold; }
-
-.toc-nav ul li,
-.toc-nav ul li ul li {
-  padding-left: 15px; }
-
-/*
-*
-* Toggle Switches **************************************************************
-*
-*/
-.toggle-mode {
-  float: left;
-  width: 100%;
-  padding: 0; }
-
-.toggle-mode .icon {
-  width: 25px;
-  float: left;
-  font-size: 1.5rem; }
-
-.toggle-switch {
-  float: left;
-  height: 40px;
-  width: 60px;
-  padding: 4px 0 0; }
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 47px;
-  height: 19px; }
-
-.switch input {
-  display: none; }
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #fff;
-  border: 1px solid #0C5176;
-  transition: 0.4s; }
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 15px;
-  width: 15px;
-  left: 2px;
-  bottom: 1px;
-  background-color: #0C5176;
-  transition: 0.4s; }
-
-/*input:checked+.slider {}*/
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3; }
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  transform: translateX(26px); }
-
-.slider.round {
-  border-radius: 34px; }
-
-.slider.round:before {
-  border-radius: 50%; }
-
-/*
-*
-* feedback links ***********************************************************************
-*
-*/
-#feedback-links {
-  margin: 50px 0 10px 0;
-  width: 100%;
-  padding: 10px 0 10px 0; }
-
-/*
-*
-* Controls ***********************************************************************
-*
-*/
-.ctrl-left {
-  float: left;
-  width: 20px;
-  margin: 0 19px 1px 0; }
-
-  .ctrl-right {
-      float: right;
-      padding: 5px 16px 0;}
-
-.ctrl-right .btn-group {
-  float: left;
-  margin: 2px 24px 0 0; }
-
-/*
-*
-* Breadcrumbs **************************************************************
-*
-*/
-.breadcrumb {
-  padding: 8px 15px 0 0;
-  margin: 10px 0 0;
-  list-style: none;
-  background-color: transparent;
-  border-radius: 4px; }
-
-  /*
-  * Search *********************************************************************
-  *
-  */
-  .search-form {
-      float: left;
-      /*margin: 10px 15px 0 20px;*/
-      margin: 10px 15px 0 0px;
-      width: 340px;
-  }
-
-  .nav-secondary .search-form  {
-      float: left;
-      width: 285px;
-      margin: 10px 30px 0 10px;
-  }
-
-  .nav-secondary-tabs .search-form {
-    margin: 5px 10px 0 0;
-  }
-
-  .nav-secondary-tabs.affix .search-form {
-    margin: 5px 10px 0 0;
-  }
-
-  .nav-secondary-tabs .search-form input[type=search] {
-      /*background: rgb(59, 177, 236);*/
-      background: rgba(0, 0, 0, 0.17);
-      border: 0;
-      color: #0C5176;
-      border-radius: 0;
-      -webkit-transition: all 0.2s ease;
-      -moz-transition: all 0.2s ease;
-      -o-transition: all 0.2s ease;
-      transition: all 0.2s ease;
-      width: 300px;
-  }
-
-  .nav-secondary-tabs.affix input[type=search],
-  input[type=text] {
-      background: rgb(16, 98, 142);
-      border: 0;
-      -webkit-transition: all 0.2s ease;
-      -moz-transition: all 0.2s ease;
-      -o-transition: all 0.2s ease;
-      transition: all 0.2s ease;
-  }
-
-  .nav-secondary input[type=search] {
-      background: #065F8F;
-      border: 0;
-      border-radius: 0;
-      color: #fff;
-  }
-
-  .search-form input[type=search]:focus {
-      background: #fff;
-      box-shadow: 0;
-      color: #445d6e;
-  }
-
-  .search-form input[type=search]::-webkit-input-placeholder {
-      color: #fff;
-  }
-
-  .search-form input[type=search]:-moz-placeholder {
-      /* Firefox 18- */
-      color: #fff;
-  }
-
-  .search-form input[type=search]::-moz-placeholder {
-      /* Firefox 19+ */
-      color: #fff;
-  }
-
-  .search-form input[type=search]:-ms-input-placeholder {
-      color: #fff;
-  }
-/*
-*
-* Custom Content Docs Guides : steps   ******************************************
-*
-*/
-i.fa.fa-indent,
-i.fa.fa-outdent {
-  color: #fff;
-  padding: 16px 15px 0 0;
-  font-size: 1.8rem;
-  opacity: 0.7; }
-
-/*.step-container {}*/
-.step a {
-  padding: 15px;
-  float: left;
-  min-height: 75px;
-  width: 100%; }
-
-.step a:hover {
-  opacity: 0.6; }
-
-.step-num {
-  border-radius: 50%;
-  behavior: url("PIE.htc");
-  width: 36px;
-  height: 36px;
-  padding: 4px;
-  border: 2px solid #196d9c;
-  color: #0a486b;
-  text-align: center;
-  float: left;
-  font-size: 1.5rem;
-  margin-right: 25px; }
-
-/*.step-text {}*/
-.step p {
-  padding: 5px 45px 0 0;
-  width: 87%;
-  float: left; }
-
-.step .fa-chevron-right {
-  font-size: 3.5rem;
-  margin: 4px 0 0 15px;
-  float: left;
-  color: #125275;
-  opacity: 0.4; }
-
-/* Portrait and Landscape */
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .step p {
-    padding: 25px 0 0;
-    width: 87%;
-    float: left; }
-  .step-text {
-    float: left; }
-  .container > .navbar-header {
-    margin: 0; } }
-
-/*
-*
-* Guides : components
-*
-*/
-.component-container {
-  padding: 0;
-  margin: 0;
-  width: 100%; }
-
-.component {
-  border-top: 10px solid;
-  border-color: #125275;
-  padding: 30px 30px 10px;
-  text-align: center;
-  margin: 0 0 15px;
-  min-height: 280px;
-  max-width: 330px; }
-
-.component-full {
-  padding: 15px 0 20px 20px;
-  float: left;
-  width: 100%;
-  min-height: 120px;
-  margin: 20px 0 0; }
-
-.component,
-.component-full {
-  /*box-shadow: 0.2px 0.2px 6px 0 rgba(169, 169, 169, 0.44); */
-  border: 1px solid rgba(204, 204, 204, 0.46);}
-
-.component-full-icon {
-  float: left;
-  padding: 5px 15px 0 7px; }
-
-.component-full p {
-  margin: 0; }
-
-.component-full h3 {
-  margin-top: 10px; }
-
-.component img,
-.component-full-icon img {
-  width: 50px;
-  height: 50px; }
-
-.component-icon {
-  width: 50px;
-  margin: 0 auto;
-  padding: 0 0 10px; }
-
-.component-full-copy {
-  float: left;
-  width: 80%; }
-
-a.anchorLink {
-  margin-left: 5px;
-  visibility: hidden; }
-
-/*
-*
-* feedback
-*
-*/
-.feedback {
-  text-align: center;
-  padding: 50px 0; }
-
-/*
-* Global elper classes *********************************************************************
-*
-*/
-.sub-header-block {
-  padding: 25px 20px 50px 0; }
-
-.block {
-  padding: 25px 20px 10px 0; }
-
-.block ul {
-  padding: 0; }
+    z-index: 1;
+}
+
+@keyframes gradientswitch
+    {
+      0%   {background: #1488C6;}
+      25%  {background: #0C5176;}
+      50%  {background: #BB4258;}
+      75%  {background: #0C5176;}
+      100% {background: #1488C6;}
+    }
+
+    @-webkit-keyframes gradientswitch /* Safari and Chrome - necessary duplicate */
+    {
+      0%   {background: #1488C6;}
+      25%  {background: #0C5176;}
+      50%  {background: #BB4258;}
+      75%  {background: #0C5176;}
+      100% {background: #1488C6;}
+}
 
 /*
 *
 * hero banner text *************************************************************
 *
 */
+
 .hero-text {
-  -ms-flex-align: center;
-      align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  min-height: 24em;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -webkit-animation-name: hero;
-          animation-name: hero;
-  -webkit-animation-duration: 2s;
-          animation-duration: 2s; }
+    -ms-flex-align: center;
+    align-items: center;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    min-height: 24em;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-animation-name: hero;
+    animation-name: hero;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
 
 .hero-text-centered {
-  -ms-flex: none;
-      flex: none;
-  text-align: center;
-  max-width: 60%; }
+    -ms-flex: none;
+    flex: none;
+    text-align: center;
+    max-width: 60%;
+}
 
 .hero-text h1 {
-  color: #fff; }
+    color: #fff;
+}
 
 .hero-text p {
-  color: #fff;
-  margin-bottom: 15px;
-  font-size: 18px;
-  line-height: 28px; }
+    color: #fff;
+    margin-bottom: 15px;
+    font-size: 18px;
+    font-weight: 200;
+    font-family: Open Sans;
+    line-height: 30px;
+}
 
 .hero-text ul {
-  padding: 0;
-  width: 65%;
-  margin: 0 auto; }
+    padding: 0;
+    width: 65%;
+    margin: 0 auto;
+}
 
 .hero-text li {
-  padding: 0 10px 0 0; }
+    padding: 0 10px 0 0;
+}
 
-.hero-text a {
-  color: #fff; }
 
 /* Portrait and Landscape */
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .hero-text {
-    position: absolute;
-    top: 75px; }
-  .hero-text-centered {
-    -ms-flex: none;
+    .hero-text {
+        position: absolute;
+        top: 75px;
+    }
+    .hero-text-centered {
+        -ms-flex: none;
         flex: none;
-    text-align: center;
-    max-width: 80%; }
-  .hero-text li {
+        text-align: center;
+        max-width: 80%;
+    }
+    .hero-text li {
+        float: left;
+        margin: 10px 0 0 0;
+    }
+}
+
+
+/*
+* Search *********************************************************************
+*
+*/
+
+.search-form {
     float: left;
-    margin: 10px 0 0; } }
+    margin: 10px 5px 0 0px;
+}
+
+.search-form input[type=text] {
+    background: #3bb1ec;
+    border: 0;
+    color: #0C5176;
+    border-radius: 0px;
+    margin: 0;
+    transition: all 0.2s ease;
+    width: 230px;
+}
+
+.nav-secondary input[type=text] {
+    background: #065F8F;
+    border: 0;
+    margin: 0;
+    transition: all 0.2s ease;
+}
+
+.search-form input[type=text]:focus {
+    background: #fff;
+    box-shadow: 0;
+}
+
+input[type=text], .nav-secondary-tabs.affix input[type=text] {
+    background: #10628e;
+    border: 0;
+    margin: 0;
+}
+
+.search-form input[type=text]::-webkit-input-placeholder {
+    color: #fff;
+}
+
+.search-form input[type=text]:-moz-placeholder {
+    /* Firefox 18- */
+    color: #fff;
+}
+
+.search-form input[type=text]::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #fff;
+}
+
+.search-form input[type=text]:-ms-input-placeholder {
+    color: #fff;
+}
+
+
+/*
+*
+* Butons ***********************************************************************
+*
+*/
+
+ul.buttons {
+    list-style: none;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .hero-text ul.buttons {
+        list-style: none;
+    }
+}
+
+a.button {
+    color: #fff;
+}
+
+a.button.outline-btn {
+    color: #0087C8;
+}
+
+.button {
+    margin: 10px 10px 0 0;
+    font-family: Geomanist;
+    padding: 12px 35px 10px;
+    min-width: 200px;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+    float: left;
+    text-align: center;
+}
+
+.button:hover {
+    color: #fff;
+    opacity: 0.7;
+}
+
+.primary-btn {
+    background: #1488C6;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.secondary-btn {
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.transparent-btn {
+    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+}
+
+.outline-btn {
+    background: #fff;
+    border: 1px solid;
+    border-color: #0087C8;
+    text-decoration: none;
+    margin: 0;
+}
+
+.outline-btn:hover, .primary-btn:hover, .secondary-btn:hover {
+    opacity: 0.8;
+}
+
+.outline-btn:hover {
+    color: #1488C6;
+}
+
+
+/*
+*
+* branding *********************************************************************
+*
+*/
+
+.logo {
+    margin: 12px 10px 0 10px;
+    width: 160px;
+}
+
+.affix-top .affix-logo {
+    opacity: 0;
+}
+
+.affix-logo {
+    float: left;
+    width: 160px;
+    transition: all 0.1s ease;
+}
+
+
+/*
+*
+* Primary navigation - top header **********************************************************
+*
+*/
+
+.nav-primary {
+    background: transparent;
+    padding: 5px 12px;
+}
+
+.primary {
+    padding: 5px 0 0 20px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .nav-primary {
+        background: #000;
+        padding: 5px 12px;
+        position: absolute;
+        width: 100%;
+        z-index: 9999;
+    }
+    .primary {
+        padding: 20px 0 0;
+        text-align: center;
+    }
+    .user-nav {
+        padding: 5px 0 0;
+        text-align: center;
+    }
+    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
+        /** todo remove this **/
+        color: #fff;
+        text-align: center;
+    }
+    .navbar-default .navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
+        background: transparent;
+        border: 0;
+    }
+}
+
+
+/*
+*
+* Secondary Navigation  **********************************************************
+*
+*/
+
+.nav-secondary {
+    background: #0C5176;
+    /*background: #32116d;*/
+    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
+    height: 55px;
+}
+
+/*
+*
+* nav-secondary-tabs  ***********************************************************************
+*
+*/
+
+.nav-secondary-tabs {
+    background-color: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    height: 55px;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+    transition: all 0.1s ease;
+}
+
+.nav-secondary-tabs.affix {
+    background: #0C5176;
+    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
+    height: 55px;
+    top: 0;
+    position: fixed;
+    z-index: 100;
+}
+
+/*
+*
+* Tabs ***********************************************************************
+*
+*/
+
+.tabs {
+    padding: 0;
+    float: left;
+    margin: 0;
+}
+
+.tabs li {
+    float: left;
+    list-style: none;
+}
+
+.tabs li a {
+    color: #fff;
+    padding: 19px 20px 13px;
+    float: left;
+    opacity: 0.7;
+    font-weight: 600;
+}
+
+.tabs li a:hover {
+    background: rgba(0, 0, 0, 0.17) !important;
+    border-bottom: 4px solid #fff;
+}
+
+.tabs li.active a {
+    background: transparent !important;
+    color: #2089C4;
+    cursor: default;
+    border-bottom: 4px solid #fff;
+    opacity: 1;
+}
+
+
+.tabs dd,
+.tabs .tab-title {
+    float: left;
+    list-style: none;
+    margin-bottom: 0 !important;
+    position: relative
+}
+
+.tabs dd>a,
+.tabs .tab-title>a {
+    display: block;
+    background-color: #EFEFEF;
+    color: #222;
+    font-family: 'Geomanist Book', sans-serif;
+    font-size: 1rem;
+    padding: 1rem 2rem
+}
+
+.tabs dd>a:hover,
+.tabs .tab-title>a:hover {
+    background-color: #e1e1e1
+}
+
+.tabs dd.active a,
+.tabs .tab-title.active a {
+    background-color: #fff;
+    color: #222
+}
+
+.tabs.radius dd:first-child a,
+.tabs.radius .tab:first-child a {
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px
+}
+
+.tabs.radius dd:last-child a,
+.tabs.radius .tab:last-child a {
+    -webkit-border-bottom-right-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px
+}
+
+.tabs.vertical dd,
+.tabs.vertical .tab-title {
+    position: inherit;
+    float: none;
+    display: block;
+    top: auto
+}
+
+.tabs-content {
+    margin-bottom: 1.5rem;
+    width: 100%
+}
+
+.tabs-content:before,
+.tabs-content:after {
+    content: " ";
+    display: table
+}
+
+.tabs-content:after {
+    clear: both
+}
+
+.tabs-content>.content {
+    display: none;
+    float: left;
+    padding: 0.9375rem 0;
+    width: 100%
+}
+
+.tabs-content>.content.active {
+    display: block;
+    float: none
+}
+
+.tabs-content>.content.contained {
+    padding: 0.9375rem
+}
+
+.tabs-content.vertical {
+    display: block
+}
+
+.tabs-content.vertical>.content {
+    padding: 0 0.9375rem
+}
+
+@media only screen and (min-width: 40.0625em) {
+    .tabs.vertical {
+        float: left;
+        margin: 0;
+        margin-bottom: 1.25rem !important;
+        max-width: 20%;
+        width: 20%
+    }
+    .tabs-content.vertical {
+        float: left;
+        margin-left: -1px;
+        max-width: 80%;
+        padding-left: 1rem;
+        width: 80%
+    }
+}
+
+
+/*
+*
+* user-nav ***********************************************************************
+*
+*/
+
+.user-nav {
+    padding: 5px 0 0;
+}
+
+
+/*
+*
+* layout ***********************************************************************
+*
+*/
+
+section.section {
+    max-width: 960px;
+}
+
+.main-content {
+    padding: 20px 15px 25px 20px;
+    max-width: 885px;
+}
+
+.content {
+    padding: 65px 55px 20px 50px;
+    min-height: 500px;
+    max-width: 860px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .content {
+        padding: 55px 30px 20px 32px;
+    }
+}
+
+.wrapper {
+    min-height: 1000px;
+    /*transition: all 0.5s ease;*/
+}
+
+#sidebar-wrapper-home #feedback-links {
+    margin: 10px 0 10px 0;
+}
+
+#sidebar-wrapper {
+    background-color: #FBFBFC;
+    border-left: 1px solid rgba(204, 204, 204, 0.29);
+    height: 100%;
+    position: fixed;
+    right: 250px;
+    overflow-y: auto;
+    margin-right: -250px;
+    width: 0;
+    /*transition: all 0.5s ease;*/
+}
+
+#sidebar-wrapper-home {
+    background-color: #FBFBFC;
+    border-left: 1px solid rgba(204, 204, 204, 0.29);
+    position: absolute;
+    height: 100%;
+    right: 0;
+    top: 500px;
+    width: 250px;
+}
+
+@media (min-device-width: 320px) and (max-device-width: 480px) {
+    #sidebar-wrapper-home {
+      display: none;
+    }
+}
+
+#sidebar-wrapper-home.affix {
+  top: 10px;
+  position: fixed;
+}
+
+.wrapper.right-open #sidebar-wrapper {
+    width: 250px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    #sidebar-wrapper {
+        display: none;
+    }
+}
+
+.page-content {
+    /*display: none;
+    transition: all 0.5s ease;*/
+}
+
+.wrapper.right-open .page-content {
+    padding-right: 190px;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .wrapper.right-open .page-content {
+        padding-right: 0;
+    }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
+  .wrapper.right-open .page-content {
+      padding-right: 0;
+  }
+
+}
+
+
+/*
+* Sidebar
+*/
+
+
+.sidebar {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .sidebar-home {
+        background-color: #FBFBFC;
+        border-right: 1px solid rgba(204, 204, 204, 0.29);
+        display: block;
+        padding: 0 20px 0 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        min-height: 1000px;
+        max-width: 250px;
+        position: absolute;
+    }
+}
+
+.sidebar-home .affix {
+    background-color: #FBFBFC;
+    border-right: 1px solid rgba(204, 204, 204, 0.29);
+    position: fixed;
+    top: 55px;
+    bottom: 0;
+    left: 0;
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-width: 250px;
+}
+
+
+/*.sidebar-home .affix {}*/
+
+@media (min-width: 768px) {
+    .sidebar {
+        background-color: #FBFBFC;
+        border-right: 1px solid rgba(204, 204, 204, 0.29);
+        position: fixed;
+        top: 51px;
+        bottom: 0;
+        left: 0;
+        display: block;
+        padding: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-width: 250px;
+    }
+}
+
+.collapse.in {
+    transition: all 0.2s ease;
+}
+
+
+/*
+*
+* NAV SIDEBAR ***********************************************************************
+*
+*/
+
+.nav-sidebar {
+    padding-top: 20px;
+}
+
+.nav-sidebar>li>a {
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.nav-sidebar>.active>a, .nav-sidebar>.active>a:focus, .nav-sidebar>.active>a:hover {
+    color: #2089C4;
+    background-color: #428bca;
+}
+
+.nav-sidebar.affix {
+    top: 55px;
+    z-index: 0;
+}
+
+.nav-sidebar ul {
+    list-style: none;
+    /*margin: -25px 0 1.5rem;*/
+    padding: 0;
+    /*width: 270px;*/
+    text-align: left;
+    overflow: hidden;
+}
+
+.nav-sidebar ul li {
+    display: block;
+}
+
+
+/*.nav-sidebar ul li a {}*/
+
+.nav-sidebar ul li a:hover {
+    opacity: 0.7;
+    background: transparent;
+}
+
+.nav-sidebar ul li a, .nav-sidebar ul li a:focus, .nav-sidebar ul li a:hover {
+    border-bottom: none;
+    text-decoration: none;
+}
+
+.nav-sidebar ul li a.active, .nav-sidebar.nav>li>a:focus {
+    cursor: default;
+    color: #2089C4;
+    border-left: 4px solid #21cbc9;
+}
+
+.nav-sidebar ul li li a {
+    margin-left: 10px;
+    border-left: 1px solid #21cbc9;
+    font-size: 12px;
+}
+
+
+/*.nav-sidebar a.expand-menu {}
+.nav-sidebar a.expand-menu:hover {}
+.nav-sidebar a.expand-menu.active {}*/
+
+.nav-sidebar .caret {
+    float: right;
+    margin-top: 5px;
+}
+
+.leftnav {
+    padding: 0 20px 20px 0;
+}
+
+
+/*
+*
+* Table of contents menu  ***********************************************************************
+*
+*/
+
+.toc-nav i.fa {
+    font-size: 16px;
+    margin: 0px 8px 0 0;
+    color: #4fa1d0;
+}
+
+i.fa.fa-question {
+    font-size: 21px;
+    margin: 0 11px 0 0;
+}
+
+.edit {
+    margin: 10px 0 20px 15px;
+}
+
+.toc-toggle {
+    width: 25px;
+    height: 25px;
+    float: right;
+}
+
+#side-toc {
+  width: 200px;
+}
+
+.toc-nav {
+    padding: 10px 10px 30px 20px;
+}
+
+.toc-nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.toc-nav li {
+    padding: 2px 8px 2px 32px;
+}
+
+.toc-nav a {
+    display: block;
+    font-size: 12px;
+    padding: 0 0 0 10px;
+    text-decoration: none;
+}
+
+.offcanvas a:focus, .toc-nav a:hover {
+    opacity: .8;
+}
+
+.toc-nav li a.active {
+    color: #2089C4;
+    border-left: 4px solid #21cbc9;
+    font-weight: bold;
+}
+
+.toc-nav ul li, .toc-nav ul li ul li {
+    padding-left: 15px;
+}
+
+
+/*
+*
+* Toggle Switches **************************************************************
+*
+*/
+
+.toggle-mode {
+    float: left;
+    padding: 0 0 0 10px;
+    width: 100%;
+}
+
+.toggle-mode .icon {
+    width: 25px;
+    float: left;
+    font-size: 1.5rem;
+}
+
+.toggle-switch {
+    float: left;
+    height: 40px;
+    width: 60px;
+    padding: 3px 7px 0 2px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 47px;
+    height: 19px;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgb(195, 228, 247);
+    border: 1px solid #c3e4f7;
+    transition: 0.4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 15px;
+    width: 15px;
+    left: 2px;
+    bottom: 1px;
+    background-color: #4fa1d0;
+    transition: 0.4s;
+}
+
+
+/*input:checked+.slider {}*/
+
+input:focus+.slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+
+/*
+*
+* feedback links ***********************************************************************
+*
+*/
+
+.feedback-links {
+    margin: 40px 0 10px 0;
+    padding: 20px 0 10px 0;
+    width: 250px;
+}
+
+
+/*
+*
+* Controls ***********************************************************************
+*
+*/
+
+.ctrl-left {
+    float: left;
+    width: 20px;
+    margin: 0 19px 1px 0;
+}
+
+.ctrl-right {
+    float: right;
+    padding: 5px 16px 0;
+}
+
+.ctrl-right .btn-group {
+    float: left;
+    margin: 2px 24px 0 0;
+}
+
+
+/*
+*
+* Breadcrumbs **************************************************************
+*
+*/
+
+.breadcrumb {
+    padding: 8px 15px 0 0;
+    margin: 10px 0 0;
+    list-style: none;
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+
+/*
+  * Search *********************************************************************
+  *
+  */
+
+.search-form {
+    float: left;
+    margin: 10px 15px 0 0px;
+    width: 235px;
+}
+
+.nav-secondary .search-form {
+    float: left;
+    width: 235px;
+    margin: 10px 5px 0 10px;
+}
+
+.nav-secondary-tabs .search-form {
+    margin: 5px 10px 0 0;
+}
+
+.nav-secondary-tabs.affix .search-form {
+    margin: 5px 10px 0 0;
+}
+
+.nav-secondary-tabs .search-form input[type=search] {
+    background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
+    background-position: 10px 9px;
+    border: 0;
+    box-shadow: none;
+    color: #fff;
+    border-radius: 0;
+    /*-webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;*/
+    padding: 0px 0 0 40px;
+    width: 235px;
+}
+
+.nav-secondary-tabs.affix input[type=search], input[type=text] {
+    background: rgba(0, 0, 0, 0.17) url(/images/search.png) no-repeat;
+    background-position: 10px 9px;
+    border: 0;
+    box-shadow: none;
+    /*-webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;*/
+}
+
+.nav-secondary input[type=search] {
+    background: rgba(0, 0, 0, 0.17) url(/images/search.png) no-repeat;
+    background-position: 10px 9px;
+    border: 0;
+    box-shadow: none;
+    padding: 0px 0 0 40px;
+    border-radius: 0;
+    color: #fff;
+    /*-webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;*/
+}
+
+.nav-secondary .search-form input[type=search]:focus {
+    background: rgb(51, 112, 144) url(/images/search.png) no-repeat;
+    background-position: 10px 9px;
+    box-shadow: none;
+    color: #fff;
+}
+
+.search-form input[type=search]::-webkit-input-placeholder {
+    color: #fff;
+    opacity: .5;
+}
+
+.search-form input[type=search]:-moz-placeholder {
+    /* Firefox 18- */
+    color: #fff;
+    opacity: .5;
+}
+
+.search-form input[type=search]::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #fff;
+    opacity: .5;
+}
+
+.search-form input[type=search]:-ms-input-placeholder {
+    color: #fff;
+    opacity: .5;
+}
+
+
+/*
+*
+* Custom Content Docs Guides : steps   ******************************************
+*
+*/
+
+i.fa.fa-indent, i.fa.fa-outdent {
+    color: #fff;
+    padding: 16px 15px 0 0;
+    font-size: 1.8rem;
+    opacity: 0.7;
+}
+
+
+/*.step-container {}*/
+
+.step a {
+    padding: 15px;
+    float: left;
+    min-height: 75px;
+    width: 100%;
+}
+
+.step a:hover {
+    opacity: 0.6;
+}
+
+.step-num {
+    border-radius: 50%;
+    behavior: url("PIE.htc");
+    width: 36px;
+    height: 36px;
+    padding: 4px;
+    border: 2px solid #196d9c;
+    color: #0a486b;
+    text-align: center;
+    float: left;
+    font-size: 1.5rem;
+    margin-right: 25px;
+}
+
+
+/*.step-text {}*/
+
+.step p {
+    padding: 5px 45px 0 0;
+    width: 87%;
+    float: left;
+}
+
+.step .fa-chevron-right {
+    font-size: 3.5rem;
+    margin: 4px 0 0 15px;
+    float: left;
+    color: #125275;
+    opacity: 0.4;
+}
+
+
+/* Portrait and Landscape */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .step p {
+        padding: 25px 0 0;
+        width: 87%;
+        float: left;
+    }
+    .step-text {
+        float: left;
+    }
+    .container>.navbar-header {
+        margin: 0;
+    }
+}
+
+
+/*
+*
+* Guides : components
+*
+*/
+
+.component-container {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.component {
+    padding: 30px 30px 10px;
+    text-align: center;
+    margin: 0 0 15px;
+    min-height: 280px;
+    max-width: 330px;
+}
+
+.component-full {
+    padding: 15px 0 20px 20px;
+    float: left;
+    width: 100%;
+    min-height: 120px;
+    margin: 20px 0 0;
+}
+
+.component, .component-full {
+    border: 1px solid rgba(204, 204, 204, 0.46);
+}
+
+.component-full-icon {
+    float: left;
+    padding: 5px 15px 0 7px;
+}
+
+.component-full p {
+    margin: 0;
+}
+
+.component-full h3 {
+    margin-top: 10px;
+}
+
+.component img, .component-full-icon img {
+    width: 50px;
+    height: 50px;
+}
+
+.component-icon {
+    width: 50px;
+    margin: 0 auto;
+    padding: 0 0 10px;
+}
+
+.component-full-copy {
+    float: left;
+    width: 80%;
+}
+
+a.anchorLink {
+    margin-left: 5px;
+    visibility: hidden;
+}
+
+
+/*
+*
+* feedback
+*
+*/
+
+.feedback {
+    text-align: center;
+    padding: 50px 0;
+}
+
+
+/*
+* Global elper classes *********************************************************************
+*
+*/
+
+.sub-header-block {
+    padding: 25px 20px 50px 0;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .block {
+        padding: 0;
+    }
+}
+
+.block ul {
+    padding: 0;
+}
+
+
+/*
+*
+* hero banner text *************************************************************
+*
+*/
+
+.hero-text {
+    -ms-flex-align: center;
+    align-items: center;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    min-height: 24em;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-animation-name: hero;
+    animation-name: hero;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
+
+.hero-text-centered {
+    -ms-flex: none;
+    flex: none;
+    text-align: center;
+    max-width: 60%;
+}
+
+.hero-text h1 {
+    color: #fff;
+}
+
+.hero-text p {
+    color: #fff;
+    margin-bottom: 15px;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+.hero-text ul {
+    padding: 0;
+    width: 65%;
+    margin: 0 auto;
+}
+
+.hero-text li {
+    padding: 0 10px 0 0;
+}
+
+.hero-text a {
+    color: #fff;
+}
+
+
+/* Portrait and Landscape */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .hero-text {
+        position: absolute;
+        top: 75px;
+    }
+    .hero-text-centered {
+        -ms-flex: none;
+        flex: none;
+        text-align: center;
+        max-width: 80%;
+    }
+    .hero-text p {
+        margin-bottom: 15px;
+        font-size: 14px;
+        line-height: 20px;
+    }
+    .hero-text li {
+        float: left;
+        margin: 10px 0 0;
+    }
+}
+
 
 /*
 *
 * Custom Content****************************************************************
 *
 */
-.strip,
-.strip-alt {
-  padding: 70px 0 50px;
-  min-height: 300px;
-  width: 100%; }
+
+.strip, .strip-alt {
+    padding: 70px 0 50px;
+    min-height: 300px;
+    width: 100%;
+}
 
 .strip-alt {
-  background: #1488c6;
-  color: #fff; }
+    background: #1488c6;
+    color: #fff;
+}
 
-.strip-alt h3,
-.strip-alt h6 {
-  color: #fff; }
+.strip-alt h3, .strip-alt h6 {
+    color: #fff;
+}
 
 .color-strip {
-  background: #1488c6;
-  height: 300px;
-  width: 100%; }
+    background: #1488c6;
+    height: 300px;
+    width: 100%;
+}
 
 .illustration {
-  max-width: 944px;
-  margin: 0 auto; }
+    max-width: 944px;
+    margin: 0 auto;
+}
 
 
 /*
@@ -969,361 +1514,174 @@ a.anchorLink {
 * Bootstrap Overrides : super embarrassing  ***********************************************************************
 *
 */
-.navbar-nav > li > a {
-  color: #fff !important; }
 
-.navbar-collapse,
-.navbar-form {
-  border-color: transparent; }
+@media (max-width: 767px) {
+    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
+        padding: 5px 15px 5px 25px;
+        color: #fff;
+        text-align: center;
+    }
+}
+
+.navbar-nav>li>a {
+    color: #fff !important;
+}
+
+.navbar-collapse, .navbar-form {
+    border-color: transparent;
+}
 
 .navbar-toggle .icon-bar {
-  background-color: #fff !important; }
+    background-color: #fff !important;
+}
 
-.nav > li > a:focus,
-.nav > li > a:hover {
-  background-color: transparent; }
+.nav>li>a:focus, .nav>li>a:hover {
+    background-color: transparent;
+}
 
-.dropdown-menu > li > a {
-  font-size: 13.5px;
-  line-height: 16px;
-  color: #1488c6;
-  padding: 5px 15px;
-  display: block; }
+.dropdown-menu>li>a {
+    font-size: 13.5px;
+    line-height: 16px;
+    color: #1488c6;
+    padding: 5px 15px;
+    display: block;
+}
 
-.nav .open > a,
-.nav .open > a:focus,
-.nav .open > a:hover {
-  background-color: transparent;
-  border-color: #337ab7; }
+.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
+    background-color: transparent;
+    border-color: #337ab7;
+}
 
-  /*
+
+/*
   *
   * docs content formatting  **********************************************************
   *
   */
-  blockquote {
-      border-left: 6px solid #439FD1;
-      background: #fff;
-  }
-  pre {
-      display: block;
-      padding: 15.5px;
-      margin: 0 0 10px;
-      font-size: 14px;
-      line-height: 24PX;
-      color: #566d7c;
-      word-break: break-all;
-      word-wrap: break-word;
-      background-color: #F5F8FA;
-      border: 0;
-      border-radius: 0;
-  }
-  /*
+
+blockquote {
+    border-left: 6px solid #32116d;
+    background: #f5f8fa;
+    padding: 10px 20px 20px 10px;
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #f3f3f3;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #18191b;
+    border: 1px solid #000;
+    border-radius: 4px;
+}
+
+.hljs {
+    color: #f5f5f5!important;
+}
+
+.hljs-tag, .hljs-name, .hljs-attribute {
+    color: #e3e3f2!important;
+    font-weight: normal;
+}
+
+.hljs-keyword, .hljs-selector-tag, .hljs-subst {
+    color: #f5f5f5!important;
+}
+
+code {
+    padding: 3px 7px;
+    font-size: 90%;
+    color: #0c5176;
+    background-color: rgba(70, 68, 167, 0.15);
+    border-radius: 2px;
+}
+
+
+/*
   *
   * autocompleteResults  **********************************************************
   *
   */
-  div#autocompleteResults {
-      display: none;
-  }
-  div#autocompleteResults {
-      background: #f6fcff;
-      border: 1px solid #eee;
-      padding: 20px 40px 10px 5px;
-      margin: 10px 0 0 0;
-      position: absolute;
-  		-webkit-transition: all 0.5s;
-    	-moz-transition: all 0.5s;
-    	-o-transition: all 0.5s;
-    	transition: all 0.5s;
-  }
-  ul.autocompleteList {
-      list-style: none;
-  }
-  .autocompleteList li {
-      padding: 5px 0 7px 0;
-  }
-  span.reading-time {
+
+div#autocompleteResults {
+    display: none;
+}
+
+div#autocompleteResults {
+    background: #f6fcff;
+    border: 1px solid #eee;
+    padding: 20px 55px 15px 15px;
+    margin: 10px 0 0 0;
+    position: absolute;
+    width: 800px;
+}
+
+ul.autocompleteList {
+    list-style: none;
+}
+
+.autocompleteList li {
+    padding: 5px 0 7px 0;
+}
+
+span.reading-time {
     font-style: italic;
     font-size: 12px;
     display: block;
     color: #999;
-  }
+}
+
 div#autocompleteResults span {
-      background: #e2f5ff!important;
-      color: #000;
-  }
+    background: #b8e2f9!important;
+    color: #518cad;
+}
+
+
 /*
 *
 * Fonts  ***********************************************************************
 *
 */
+
 @font-face {
-  font-family: 'Geomanist Book';
-  src: url("../fonts/geomanist/hinted-Geomanist-Book.eot");
-  src: url("../fonts/geomanist/hinted-Geomanist-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Book.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Book.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Book.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Book.svg#Geomanist-Book") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-
-/*
-*
-* Header ***********************************************************************
-*
-*/
-.header {
-  /*background: #0087C9;*/
-  background: linear-gradient(180deg, #0087C9, #0087C9, #0C5176, #673AB7, #250f4c);
-  background-size: 1800% 1800%;
-  /*-webkit-animation: rainbow 28s ease infinite;
-  -z-animation: rainbow 18s ease infinite;
-  -o-animation: rainbow 18s ease infinite;*/
-  animation: rainbow 10s ease infinite;
-  min-height: 500px;
-  position: relative;
-  z-index: 1; }
-
-  /*@-webkit-keyframes rainbow {
-      0%{background-position:0% 10%}
-      10%{background-position:0% 20%}
-      50%{background-position:100% 19%}
-      100%{background-position:0% 82%}
-  }
-  @-moz-keyframes rainbow {
-      0%{background-position:0% 82%}
-      50%{background-position:100% 19%}
-      100%{background-position:0% 82%}
-  }
-  @-o-keyframes rainbow {
-      0%{background-position:0% 82%}
-      50%{background-position:100% 19%}
-      100%{background-position:0% 82%}
-  }*/
-  @keyframes rainbow {
-      0%{background-position:0% 20%}
-      20%{background-position:20% 40%}
-      50%{background-position:40% 60%}
-      100%{background-position:60% 100%}
-  }
-
-/*.fan {
-  background-image: linear-gradient(-120deg, rgba(245, 33, 33, 0) 87%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-110deg, rgba(27, 0, 255, 0) 85%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-103deg, rgba(255, 33, 33, 0) 84%, rgba(255, 255, 255, 0.08) 15%), radial-gradient(circle, #0087C9 0%, #0087C9 100%);
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  z-index: -1;}*/
-/*
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .fan {
-    display: none; } }
-
-.fan {
-  -webkit-animation-name: fan;
-          animation-name: fan;
-  -webkit-animation-duration: 2s;
-          animation-duration: 2s; }
-
-@-webkit-keyframes fan {
-  from {
-    left: -100px;
-    opacity: 0; }
-  to {
-    left: 0;
-    opacity: 1; } }
-
-@keyframes fan {
-  from {
-    left: -100px;
-    opacity: 0; }
-  to {
-    left: 0;
-    opacity: 1; } }*/
-
-/*
-*
-* hero banner text *************************************************************
-*
-*/
-.hero-text {
-  -ms-flex-align: center;
-      align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  min-height: 24em;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -webkit-animation-name: hero;
-          animation-name: hero;
-  -webkit-animation-duration: 2s;
-          animation-duration: 2s; }
-
-.hero-text-centered {
-  -ms-flex: none;
-      flex: none;
-  text-align: center;
-  max-width: 60%; }
-
-.hero-text h1 {
-  color: #fff; }
-
-.hero-text p {
-  color: #fff;
-  margin-bottom: 15px;
-  font-size: 18px;
-  font-weight: 200;
-  font-family: Open Sans;
-  line-height: 30px; }
-
-.hero-text ul {
-  padding: 0;
-  width: 65%;
-  margin: 0 auto; }
-
-.hero-text li {
-  padding: 0 10px 0 0; }
-
-/* Portrait and Landscape */
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .hero-text {
-    position: absolute;
-    top: 75px; }
-  .hero-text-centered {
-    -ms-flex: none;
-        flex: none;
-    text-align: center;
-    max-width: 80%; }
-  .hero-text li {
-    float: left;
-    margin: 10px 0 0 0; } }
-
-/*
-* Search *********************************************************************
-*
-*/
-.search-form {
-  float: left;
-  margin: 10px 5px 0 0px; }
-
-.search-form input[type=text] {
-  background: #3bb1ec;
-  border: 0;
-  color: #0C5176;
-  border-radius: 0px;
-  margin: 0;
-  transition: all 0.2s ease;
-  width: 230px; }
-
-.nav-secondary input[type=text] {
-  background: #065F8F;
-  border: 0;
-  margin: 0;
-  transition: all 0.2s ease; }
-
-.search-form input[type=text]:focus {
-  background: #fff;
-  box-shadow: 0; }
-
-input[type=text], .nav-secondary-tabs.affix input[type=text] {
-  background: #10628e;
-  border: 0;
-  margin: 0; }
-
-.search-form input[type=text]::-webkit-input-placeholder {
-  color: #fff; }
-
-.search-form input[type=text]:-moz-placeholder {
-  /* Firefox 18- */
-  color: #fff; }
-
-.search-form input[type=text]::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #fff; }
-
-.search-form input[type=text]:-ms-input-placeholder {
-  color: #fff; }
-
-/*
-*
-* Butons ***********************************************************************
-*
-*/
-ul.buttons {
-  list-style: none; }
-
-a.button {
-  color: #fff; }
-
-a.button.outline-btn {
-  color: #0087C8; }
-
-.button {
-  margin: 10px 10px 0 0;
-  font-family: Geomanist;
-  padding: 12px 35px 10px;
-  min-width: 200px;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  float: left;
-  text-align: center; }
-
-.button:hover {
-  color: #fff;
-  opacity: 0.7; }
-
-.primary-btn {
-  background: #1488C6;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
-
-.secondary-btn {
-  background-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
-
-.transparent-btn {
-  background-color: rgba(0, 0, 0, 0.2);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2); }
-
-.outline-btn {
-  background: #fff;;
-  border: 1px solid;
-  border-color: #0087C8;
-  text-decoration: none;
-  margin: 0; }
-
-.outline-btn:hover,
-.primary-btn:hover,
-.secondary-btn:hover {
-  opacity: 0.8; }
-
-.outline-btn:hover {
-  color: #1488C6; }
+    font-family: 'Geomanist Book';
+    src: url("../fonts/geomanist/hinted-Geomanist-Book.eot");
+    src: url("../fonts/geomanist/hinted-Geomanist-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/geomanist/hinted-Geomanist-Book.woff2") format("woff2"), url("../fonts/geomanist/hinted-Geomanist-Book.woff") format("woff"), url("../fonts/geomanist/hinted-Geomanist-Book.ttf") format("truetype"), url("../fonts/geomanist/hinted-Geomanist-Book.svg#Geomanist-Book") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
 
 /** these are bootstarp overrides :/   */
+
 .dropdown-btn {
-  background: transparent;
-  color: #fff;
-  padding: 6px 12px;
-  margin-top: 7px;
-  font-weight: 400;
-  background-image: none;
-  border: 0; }
+    background: transparent;
+    color: #fff;
+    padding: 6px 12px;
+    margin-top: 7px;
+    font-weight: 400;
+    background-image: none;
+    border: 0;
+}
 
 .dropdown-header {
-  font-size: 13.5px;
-  line-height: 16px;
-  color: #1488c6;
-  padding: 5px 15px;
-  display: block; }
+    font-size: 13.5px;
+    line-height: 16px;
+    color: #1488c6;
+    padding: 5px 15px;
+    display: block;
+}
 
 .text-link {
-  padding: 5px; }
+    padding: 5px;
+}
 
 #feedback {
-  padding: 10px 0; }
+    padding: 10px 0;
+}
 
 
 /*
@@ -1331,124 +1689,167 @@ a.button.outline-btn {
 * News letter  **********************************************************
 *
 */
+
 .newsletter_section {
-  background-color: rgba(224, 228, 231, 0.7);
-  padding: 42px 0 32px;
-  min-height: 140px; }
+    background-color: rgba(224, 228, 231, 0.7);
+    padding: 42px 0 32px;
+    min-height: 140px;
+}
 
 .newsletter_section input {
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  font-size: 16px;
-  line-height: 19px;
-  color: #82949E;
-  padding: 14px 15px 12px;
-  margin: -2px 10px 10px 0;
-  float: left;
-  height: 49px;
-  width: 340px !important; }
+    background-color: #FFFFFF;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    font-size: 16px;
+    line-height: 19px;
+    color: #82949E;
+    padding: 14px 15px 12px;
+    margin: -2px 10px 10px 0;
+    float: left;
+    height: 49px;
+    width: 340px !important;
+}
+
 
 /*
 *
 * global footer  ***********************************************************************
 *
 */
+
 footer {
-  background: #fff;
-  position: relative;
-  z-index: 99999; }
+    background: #fff;
+    /*box-shadow: 0 0 12px 7px rgba(255, 255, 255, 0.68), 0 4px 8px 3px rgb(255, 255, 255);*/
+    position: relative;
+    z-index: 99999;
+}
 
 .top_footer {
-  padding: 50px 0 35px; }
+    padding: 50px 0 35px;
+}
 
 .footer_links {
-  list-style: none;
-  padding: 0; }
-  .footer_links li {
-    margin-bottom: 2px; }
-    .footer_links li a {
-      color: #637986;
-      font-size: 12px;
-      line-height: 16px;
-      text-decoration: none; }
+    list-style: none;
+    padding: 0;
+}
+
+.footer_links li {
+    margin-bottom: 2px;
+}
+
+.footer_links li a {
+    color: #637986;
+    font-size: 12px;
+    line-height: 16px;
+    text-decoration: none;
+}
 
 .footer_sub_nav {
-  float: right;
-  padding: 10px 30px 20px 0; }
-  .footer_sub_nav ul {
+    float: right;
+    padding: 10px 30px 20px 0;
+}
+
+.footer_sub_nav ul {
     list-style: none;
     margin: 0;
-    padding: 0; }
-    .footer_sub_nav ul li {
-      float: left;
-      margin-left: 10px;
-      padding-bottom: 6px; }
-      .footer_sub_nav ul li a {
-        color: #637986;
-        font-size: 12px;
-        line-height: 17px; }
+    padding: 0;
+}
+
+.footer_sub_nav ul li {
+    float: left;
+    margin-left: 10px;
+    padding-bottom: 6px;
+}
+
+.footer_sub_nav ul li a {
+    color: #637986;
+    font-size: 12px;
+    line-height: 17px;
+}
 
 .bottom_footer {
-  clear: both;
-  padding: 30px 0 20px;
-  border-top: 1px solid #E0E4E7;
-  float: left;
-  width: 100%; }
+    clear: both;
+    padding: 30px 0 20px;
+    border-top: 1px solid #E0E4E7;
+    float: left;
+    width: 100%;
+}
 
 .footer-copyright {
-  float: left; }
-  .footer-copyright p {
+    float: left;
+}
+
+.footer-copyright p {
     font-family: "Open Sans";
     font-size: 12px;
     line-height: 17px;
     color: #637986;
     margin-bottom: 0;
-    padding: 0 0 15px; }
+    padding: 0 0 15px;
+}
 
 .footer_social_nav {
-  float: right;
-  padding: 0 15px 0 0; }
-  .footer_social_nav ul {
+    float: right;
+    padding: 0 15px 0 0;
+}
+
+.footer_social_nav ul {
     list-style: none;
     padding: 0;
-    margin: 0; }
-    .footer_social_nav ul li {
-      float: left;
-      position: relative; }
+    margin: 0;
+}
+
+.footer_social_nav ul li {
+    float: left;
+    position: relative;
+}
 
 .footer_social_nav ul li:before {
-  color: #fff;
-  position: absolute;
-  top: 10px;
-  left: 10px; }
+    color: #fff;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
 
-.footer_social_nav ul li + li {
-  margin-left: 10px; }
+.footer_social_nav ul li+li {
+    margin-left: 10px;
+}
 
 .footer_social_nav ul li a {
-  width: 32px;
-  height: 32px;
-  background-color: #82949E;
-  border-radius: 50px;
-  color: #fff;
-  display: block;
-  text-indent: 9999px;
-  overflow: hidden; }
+    width: 32px;
+    height: 32px;
+    background-color: #82949E;
+    border-radius: 50px;
+    color: #fff;
+    display: block;
+    text-indent: 9999px;
+    overflow: hidden;
+}
+
+.break {
+  margin-bottom: 20px!important;
+}
 
 /* Portrait and Landscape */
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-  .top_footer {
-    padding: 15px 0 0;
-    margin-bottom: 50px; }
-  .footer_links {
-    padding: 10px 0; }
-  button.outline-btn {
-    margin: 20px 0 0 2px; }
-  .footer_sub_nav {
-    float: left; }
-  .footer_sub_nav ul li {
-    float: none;
-    padding-bottom: 6px;
-    margin: 0; } }
+    .top_footer {
+        padding: 15px 0 0;
+        margin-bottom: 50px;
+    }
+    .footer_links {
+        padding: 10px 0;
+    }
+    button.outline-btn {
+        margin: 20px 0 0 2px;
+    }
+    .footer_sub_nav {
+        float: left;
+    }
+    .footer_sub_nav ul li {
+        float: none;
+        padding-bottom: 6px;
+        margin: 0;
+    }
+}
diff --git a/docker-for-mac/faqs.md b/docker-for-mac/faqs.md
index 1a96cd5455..e7b48d8970 100644
--- a/docker-for-mac/faqs.md
+++ b/docker-for-mac/faqs.md
@@ -51,10 +51,10 @@ leveraging beta features that aren't in stable yet. Just keep this in mind as
 you create and work with beta containers, perhaps in the spirit of a playground
 space where you are prepared to troubleshoot or start over.
 
-<font color="#CC3366">To safely switch between beta and stable versions be sure
+To safely switch between beta and stable versions be sure
 to save images and export the containers you need, then uninstall the current
 version before installing another. The workflow is described in more detail
-below.</font><br>
+below.<br>
 
 Do the following each time:
 
diff --git a/docker-for-mac/install.md b/docker-for-mac/install.md
index fc76f71e43..a4ce17f4ad 100644
--- a/docker-for-mac/install.md
+++ b/docker-for-mac/install.md
@@ -20,8 +20,8 @@ channels, see the [FAQs](/docker-for-mac/faqs.md#stable-and-beta-channels).
 
 <table style="width:100%">
   <tr>
-    <th style="font-size: x-large; font-family: arial">Stable channel</th>
-    <th style="font-size: x-large; font-family: arial">Beta channel</th>
+    <th>Stable channel</th>
+    <th>Beta channel</th>
   </tr>
   <tr valign="top">
     <td width="50%">This installer is fully baked and tested, and comes
@@ -46,12 +46,14 @@ channels, see the [FAQs](/docker-for-mac/faqs.md#stable-and-beta-channels).
   </tr>
   <tr valign="top">
   <td width="50%">
-  <a class="button darkblue-btn" href="https://download.docker.com/mac/stable/Docker.dmg">Get Docker for Mac (stable)</a><br><br>
-  <a href="https://download.docker.com/mac/stable/Docker.dmg.sha256sum"><font color="#BDBDBD" size="-1">Download checksum: Docker.dmg SHA256</font></a>
+  <a class="button primary-btn" href="https://download.docker.com/mac/stable/Docker.dmg">Get Docker for Mac (stable)</a><br><br>
+
+  <a class="button outline-btn" href="https://download.docker.com/mac/stable/Docker.dmg.sha256sum">Download checksum: Docker.dmg SHA256</a>
   </td>
   <td width="50%">
-  <a class="button darkblue-btn" href="https://download.docker.com/mac/beta/Docker.dmg">Get Docker for Mac (beta)</a><br><br>
-  <a href="https://download.docker.com/mac/beta/Docker.dmg.sha256sum"><font color="#BDBDBD" size="-1">Download checksum: Docker.dmg SHA256</font></a>
+  <a class="button primary-btn" href="https://download.docker.com/mac/beta/Docker.dmg">Get Docker for Mac (beta)</a><br><br>
+
+  <a class="button outline-btn" href="https://download.docker.com/mac/beta/Docker.dmg.sha256sum">Download checksum: Docker.dmg SHA256</a>
   </td>
   </tr>
 </table>
diff --git a/images/seach.png b/images/seach.png
new file mode 100644
index 0000000000000000000000000000000000000000..3478f30e4952734b23899c5f7bca231d14919714
GIT binary patch
literal 1233
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%o>>?5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYNY@uLosb^?v
zX<=ldqhMrUXr^yqsc&eaYhY+)U}<Gwr~m~@K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mih)p`bI{&Koz>hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83
zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0<RzFwUtj!6b93RUi%Wu15$?rmaB)aw
zL8^XGYH@yPQ8F;%(v(3~6<9eJr6!i-7lq{K=fFZSAS1sdzc?emK*8A=6l&%Q8or6i
znRy^VO|ULsUn|eN;*!L?<Wx@=TP2`5dYPFiRz@bS#?CHo25u(CmWGC|W)_y_juwUn
zW^RV&hURXr<}kf3`N^fZsd*(Zy(vJw7DfgJPDZXqZYE}?SoMMuL~a4lW|!2W%(B!J
zx1#)91+d4hGI6@a)fKl}AbL}<xCP=5S2vt`^?{Dj2SqPZbi;&zX$ZuGCte^2p8Qku
zfN8!6n7FOy%G_gMV6^viaSW-rwdIPTH&dd_@k0M4%^hroD>ekGEQwKCv2cN+636r!
zcBcp01tl97F5IXY)wC@mBSV8rN@=^oD&4IM4|*E5`0Ux|{=d0q*YiMS`5y)4=WV}N
z_dWlAC$jG`%fH2}Q(p%zDd-9hDd?72*6aCBx>Lh%&iii-wIT(LQgItTB-e<)Pl=Js
zQ0iV_RKS}WVvx*r>cs4v*J($TR#`Ny<=%Br)~QV)T#i@eYW2OO^ADxo${pQ#Tw>9#
zRXdMI$%nq<$o=UZ@lIKTjhi?2f@Ii+ERLBDQsEVs-Y(YEd~2LmD^@Ag9(2=pzf+6K
zd*3u`H^JQ%N7NtPIAn8gW6S6G*1$=^77np#`HNe<muyu2TfO1Ww~43js=vN5;k=U0
zUuB_3tzUVJHmWXBzMp(uiuaP;ll%nbN2O7Rf64#dS<7j_AbR`5x~CKMKY$7uPgg&e
IbxsLQ06P+`IsgCw

literal 0
HcmV?d00001

diff --git a/images/search.png b/images/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba7d4c35077f64394d0e61e2aaafd7e1fe19cc9f
GIT binary patch
literal 1233
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%o>>?5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYNY@uLosb^?v
zX<=ldqhMrUXr^yqsc&eaYhY+)U}<Gwr~m~@K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mih)p`bI{&Koz>hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83
zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0<RzFwUtj!6b93RUi%Wu15$?rmaB)aw
zL8^XGYH@yPQ8F;%(v(3~6<9eJr6!i-7lq{K=fFZSAS1sdzc?emK*8A=6l&%Q8or6i
znRy^VO|ULsUn|eN;*!L?<Wx@=TP2`5dYPFiRz@bS#?CIT&Tb~gmWGC|W)_y_juwUn
zW^RV&hURXr<}kf3`N^fZsd*(Zy(tL2E;#jq5=3qR&}Ns^qRg_?6t|-MTm`Vltuk@D
z#Sy1@P`xR*-Qt8(uRhQ*`k?4Vif)(?Fb#p2@Wcz`z>|M!9x%-p0TXvq-?MTC21a{N
z7srr_TWhZD_hvSfIQDU#h+_;F-`WLDu`J?_?5u(@rNXy7HMS&gfAmQHp^j41<OhqC
zSW5$Au5Nq~5L;3d67#3FPT5~UW~WAxevL<w_`TCl&&G-zFVyRPaWYlp=aC)q+%p_G
z^LHH7)N}4sdVaNSW7otfJCENu5Uw#X@}yMThfd>|*S}<rnbeD0-#b3TWyONtTA$am
zrn-B7{~q9T=YOJkb=X@=J)!fz4v5XW(7iI?YFC!E=I_rv)?d9By1e(hdTEiq;q}=s
z!rt!DY)HRn;db?Xo6y`9rdKl)4}^&dM_im)ec)>T^A#%(XMBGWw?4S++5QA+_k}KL
zrKLKntnzFYJ?Ob!>ae#nXU1gPPRBi2{#H?MHyP&(zYSOv5E58?>{*TMKlO>7swP*=
uwb%XF_iz7^#(!L)+nWNz?6>7JvN1RuXuh0LU@s0TWISE{T-G@yGywo-BeQk@

literal 0
HcmV?d00001

diff --git a/js/docs.js b/js/docs.js
index c62b85991a..d9538e2695 100644
--- a/js/docs.js
+++ b/js/docs.js
@@ -38,9 +38,47 @@ if (readCookie("night") == "true") {
  *
  */
 
+// Cookie functions
+function createCookie(name,value,days) {
+    var expires = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+function readCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0;i < ca.length;i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}
+
+function eraseCookie(name) {
+    createCookie(name,"",-1);
+}
+if (readCookie("night") == "true") {
+  document.getElementById('pagestyle').setAttribute('href', '/css/style-alt.css');
+  $('#switch-style').prop('checked', true);
+} else {
+  document.getElementById('pagestyle').setAttribute('href', '/css/style.css');
+  $('#switch-style').prop('checked', false);
+}
+/*
+ *
+ * toggle menu *********************************************************************
+ *
+ */
+
 $("#menu-toggle").click(function(e) {
         e.preventDefault();
-        $("#wrapper").toggleClass("toggled");
+        $(".wrapper").toggleClass("right-open");
     });
 
 var navHeight = $('.navbar').outerHeight(true) + 80;
@@ -53,8 +91,9 @@ $(document.body).scrollspy({
 
 $(document).ready(function(){
   // Add smooth scrolling to all links
+  // $( ".toc-nav a" ).addClass( "active" );
   $(".toc-nav a").on('click', function(event) {
-
+    // $(this).addClass('active');
     // Make sure this.hash has a value before overriding default behavior
     if (this.hash !== "") {
       // Prevent default anchor click behavior
@@ -66,7 +105,7 @@ $(document).ready(function(){
       // Using jQuery's animate() method to add smooth page scroll
       // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
       $('html, body').animate({
-        scrollTop: $(hash).offset().top
+        scrollTop: $(hash).offset().top-80
       }, 800, function(){
 
         // Add hash (#) to URL when done scrolling (default click behavior)
@@ -92,7 +131,7 @@ $(document).ready(function(){
       // Using jQuery's animate() method to add smooth page scroll
       // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
       $('html, body').animate({
-        scrollTop: $(hash).offset().top
+        scrollTop: $(hash).offset().top-80
       }, 800, function(){
 
         // Add hash (#) to URL when done scrolling (default click behavior)
@@ -103,7 +142,6 @@ $(document).ready(function(){
 });
 
 
-
 /*
  *
  * make dropdown show on hover *********************************************************************
@@ -154,3 +192,4 @@ if($('.nav-sidebar ul a.active').length != 0)
       $(this).addClass('collapse in').siblings;
   });
 }
+