From c02ffd661ddbc01af39e2636836686427ea85538 Mon Sep 17 00:00:00 2001
From: Josh south <jsouth@users.noreply.github.com>
Date: Thu, 18 Jan 2018 12:11:07 -0800
Subject: [PATCH] CSS fixes for version selector, removing animations, and more
 (#5574)

This commit squashes 21 commits. Leaving the commit messages here for posterity.

* Activate Night Mode

- Add toggle for night mode
- Update base styles

* remove font-size

* Update _night-mode.scss

* Fix first-line indenting and color differences

* Fix rescale bug

* stuff

* Add menu fixs

* Update core pallette - light/dark mode

* Toc link padding

* Remove color cycle
Remove temp.css

* update secondary nav bg

* remove paddin-top ul left nav on med viewport
---
 _includes/footer.html  |  24 +----
 _includes/header.html  |   5 +-
 _layouts/docs.html     |   2 -
 _scss/_base.scss       | 127 +----------------------
 _scss/_content.scss    |  11 ++
 _scss/_layout.scss     | 223 ++++++++++++++++++++++++++++++-----------
 _scss/_mobile.scss     |  61 ++---------
 _scss/_navigation.scss |  73 +++++++-------
 _scss/_night-mode.scss |  28 ++----
 _scss/_overrides.scss  |  37 ++++++-
 _scss/_utilities.scss  | 184 +++++++++++++++++++++-------------
 _scss/_variables.scss  |  18 ++--
 css/temp.css           |  64 ------------
 13 files changed, 403 insertions(+), 454 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index 8afa0db4a7..cb9b7a45e1 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -18,7 +18,7 @@
     <div class="container">
         <div class="top_footer">
             <div class="row">
-                <div class="col-xs-12 col-sm-3 col-md-2">
+                <div class="col-xs-12 col-sm-3 col-md-3">
                     <ul class="footer_links">
                         <li><a href="https://www.docker.com/what-docker">What is Docker</a></li>
                         <li><a href="https://www.docker.com/what-container">What is a Container</a></li>
@@ -32,7 +32,7 @@
                         <li><a href="https://www.docker.com/careers">Careers</a></li>
                     </ul>
                 </div>
-                <div class="col-xs-12 col-sm-3 col-md-2">
+                <div class="col-xs-12 col-sm-3 col-md-3">
                     <ul class="footer_links">
                         <li><a href="https://www.docker.com/products/overview">Product</a></li>
                         <li><a href="https://www.docker.com/pricing">Pricing</a></li>
@@ -44,22 +44,6 @@
                     </ul>
                 </div>
                 <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 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 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 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&#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>
-                        <li><a href="https://www.docker.com//docker-ubuntu">Docker for Ubuntu</a></li>
-                    </ul>
-                </div>
-                <div class="col-xs-12 col-sm-3 col-md-2">
                     <ul class="footer_links">
                         <li><a href="https://docs.docker.com/">Documentation</a></li>
                         <li><a href="https://www.docker.com/docker">Learn</a></li>
@@ -70,7 +54,7 @@
                         <li><a href="https://www.docker.com/products/resources">Resources</a></li>
                     </ul>
                 </div>
-                <div class="col-xs-12 col-sm-3 col-md-2">
+                <div class="col-xs-12 col-sm-3 col-md-3">
                     <ul class="footer_links">
                         <li><a href="https://www.docker.com/docker-community">Community</a></li>
                         <li><a href="https://www.docker.com/technologies/overview">Open Source</a></li>
@@ -96,7 +80,7 @@
         <div class="bottom_footer">
             <div class="footer-copyright col-xs-12 col-md-8">
                 <p class="copyright">
-                    Copyright &copy; 2017 Docker Inc. All rights reserved. </p>
+                    Copyright &copy; 2018 Docker Inc. All rights reserved. </p>
             </div>
             <div class="footer_social_nav">
                 <ul class="nav-social">
diff --git a/_includes/header.html b/_includes/header.html
index 5376678654..5deff4bdb4 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,9 +1,6 @@
 <nav class="nav-secondary navbar navbar-fixed-top">
-    <div class="fan"></div>
+    <!-- <div class="fan"></div> -->
     <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">
             <a href="/"><img class="logo" src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs"></a>
         </div>
diff --git a/_layouts/docs.html b/_layouts/docs.html
index e14b9489d4..ca3a1ad5e4 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -95,8 +95,6 @@
 
 	<!-- Go get "Open Sans" font from Google -->
 	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
-	<!-- temp css will be removed -->
-	<link rel="stylesheet" href="/css/temp.css">
 	<!-- SEO stuff -->
 	<title>{{ page.title }} | Docker Documentation</title>
 <meta property="og:title" content="{{ page.title }}" />
diff --git a/_scss/_base.scss b/_scss/_base.scss
index 9f606425b3..42df2cf63e 100755
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -30,129 +30,4 @@ a {
         opacity: .8;
         text-decoration: none;
     }
-}
-
-/*
-*
-* images
-*
-*/
-
-.content img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-}
-
-
-/*
-*
-* global footer  ***********************************************************************
-*
-*/
-
-footer {
-    background: $white;
-    border-top: 1px solid #E0E4E7;
-    position: relative;
-}
-
-.top_footer {
-    padding: 50px 0 35px;
-}
-
-.footer_links {
-    list-style: none;
-    padding: 0;
-    li {
-        margin-bottom: 10px;
-        a {
-            color: #637986;
-            font-size: 12px;
-            line-height: 16px;
-            text-decoration: none;
-        }
-    }
-}
-
-.footer_sub_nav {
-    float: right;
-    padding: 10px 30px 20px 0;
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        li {
-            float: left;
-            margin-left: 10px;
-            padding-bottom: 6px;
-            a {
-                color: #637986;
-                font-size: 12px;
-            }
-        }
-    }
-}
-
-.bottom_footer {
-    clear: both;
-    padding: 30px 0 20px;
-    border-top: 1px solid #E0E4E7;
-    float: left;
-    width: 100%;
-}
-
-.footer-copyright {
-    float: left;
-}
-
-.footer-copyright p {
-    font-family: $font;
-    font-size: 12px;
-    line-height: 17px;
-    color: #637986;
-    margin-bottom: 0;
-    padding: 0 0 15px;
-}
-
-.footer_social_nav {
-    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;
-}
-
-.footer_social_nav ul li:before {
-    color: $white;
-    position: absolute;
-    top: 10px;
-    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: $white;
-    display: block;
-    text-indent: 9999px;
-    overflow: hidden;
-}
-
-.break {
-    margin-bottom: 20px!important;
-}
+}
\ No newline at end of file
diff --git a/_scss/_content.scss b/_scss/_content.scss
index a5f0631029..d4c085c998 100755
--- a/_scss/_content.scss
+++ b/_scss/_content.scss
@@ -4,6 +4,17 @@
 *
 */
 
+/*
+*
+* images
+*
+*/
+
+.content img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
 /** code formatting **/
 
 pre {
diff --git a/_scss/_layout.scss b/_scss/_layout.scss
index a97cccdbce..5515605c20 100755
--- a/_scss/_layout.scss
+++ b/_scss/_layout.scss
@@ -22,69 +22,71 @@
 */
 
 .header {
-    animation: gradientswitch 80s infinite;
-    -webkit-animation: gradientswitch 80s infinite;
+    background: $bg-secondary;
+    // animation: gradientswitch 80s infinite;
+    // -webkit-animation: gradientswitch 80s infinite;
     height: $global-header-height;
     position: relative;
     z-index: 1;
     transition: all 0.1s ease;
 }
 
-@keyframes gradientswitch {
-    0% {
-        background: #0087C9;
-    }
-    16% {
-        background: #EF4A53;
-    }
-    32% {
-        background: #FFB463;
-    }
-    49% {
-        background: #33D5D4;
-    }
-    65% {
-        background: #254356;
-    }
-    81% {
-        background: #5B4097
-    }
-    100% {
-        background: #0087C9
-    }
-}
+// @keyframes gradientswitch {
+//     0% {
+//         background: #0087C9;
+//     }
+//     16% {
+//         background: #EF4A53;
+//     }
+//     32% {
+//         background: #FFB463;
+//     }
+//     49% {
+//         background: #33D5D4;
+//     }
+//     65% {
+//         background: #254356;
+//     }
+//     81% {
+//         background: #5B4097
+//     }
+//     100% {
+//         background: #0087C9
+//     }
+// }
 
-@-webkit-keyframes gradientswitch {
-    0% {
-        background: #0087C9;
-    }
-    16% {
-        background: #EF4A53;
-    }
-    32% {
-        background: #FFB463;
-    }
-    49% {
-        background: #33D5D4;
-    }
-    65% {
-        background: #254356;
-    }
-    81% {
-        background: #5B4097
-    }
-    100% {
-        background: #0087C9
-    }
-}
+// @-webkit-keyframes gradientswitch {
+//     0% {
+//         background: #0087C9;
+//     }
+//     16% {
+//         background: #EF4A53;
+//     }
+//     32% {
+//         background: #FFB463;
+//     }
+//     49% {
+//         background: #33D5D4;
+//     }
+//     65% {
+//         background: #254356;
+//     }
+//     81% {
+//         background: #5B4097
+//     }
+//     100% {
+//         background: #0087C9
+//     }
+// }
 
-.fan {
-    background: 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, rgba(0, 135, 201, 0) 0%, rgba(0, 135, 201, 0) 100%);
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: -1;
-}
+// .fan {
+//     // background: 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, rgba(0, 135, 201, 0) 0%, rgba(0, 135, 201, 0) 100%);
+
+//     position: absolute;
+//     height: 100%;
+//     width: 100%;
+//     z-index: -1;
+// }
 
 .columns,
 .col-body {
@@ -104,7 +106,6 @@
 
 .col-content {
     flex: 1;
-    transition: all 0.5s ease;
 }
 
 .col-nav,
@@ -124,7 +125,7 @@
 }
 
 .content {
-    padding: 50px 50px 20px 50px;
+    padding: 80px 70px 20px 70px;
     max-width: 1024px;
     min-width: 300px;
     min-height: 500px;
@@ -154,7 +155,6 @@ section.section {
 
 .wrapper.right-open .page-content {
     padding-right: 190px;
-    background-color: purple;
 }
 
 /*
@@ -185,3 +185,110 @@ section.section {
     padding-top: 20px;
     padding-bottom: 20px;
 }
+/*
+*
+* global footer  ***********************************************************************
+*
+*/
+
+footer {
+    background: $white;
+    border-top: 1px solid #E0E4E7;
+    position: relative;
+}
+
+.top_footer {
+    padding: 50px 0 35px;
+}
+
+.footer_links {
+    list-style: none;
+    padding: 0;
+    li {
+        margin-bottom: 10px;
+        a {
+            color: #637986;
+            font-size: 12px;
+            line-height: 16px;
+            text-decoration: none;
+        }
+    }
+}
+
+.footer_sub_nav {
+    float: right;
+    padding: 10px 30px 20px 0;
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+            float: left;
+            margin-left: 10px;
+            padding-bottom: 6px;
+            a {
+                color: #637986;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+.bottom_footer {
+    clear: both;
+    padding: 30px 0 20px;
+    border-top: 1px solid #E0E4E7;
+    float: left;
+    width: 100%;
+}
+
+.footer-copyright {
+    float: left;
+}
+
+.footer-copyright p {
+    font-family: $font;
+    font-size: 12px;
+    line-height: 17px;
+    color: #637986;
+    margin-bottom: 0;
+    padding: 0 0 15px;
+}
+
+.footer_social_nav {
+    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;
+}
+
+.footer_social_nav ul li:before {
+    color: $white;
+    position: absolute;
+    top: 10px;
+    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: $white;
+    display: block;
+    text-indent: 9999px;
+    overflow: hidden;
+}
diff --git a/_scss/_mobile.scss b/_scss/_mobile.scss
index bb2f77fbf3..bcede3efb6 100755
--- a/_scss/_mobile.scss
+++ b/_scss/_mobile.scss
@@ -6,11 +6,10 @@
 
 @media only screen 
     and (min-width : 376px)
-    and (max-width : 1024px) {  
+    and (max-width : 1150px) {  
     .nav-primary,
     .hero-text,
     .banner,
-    .ctrl-right,
     ul.primary.nav.navbar-nav,
     .nav-secondary .logo {
         display: none;
@@ -21,7 +20,6 @@
     }
     .tabs li a {
         font-size: 13px;
-        padding: 19px 10px 11px;
     }
 
     h1,
@@ -50,31 +48,21 @@
     .nav-secondary  {
         overflow: hidden;
     }
-    .search-form {
-        float: left;
-        margin: 5px 15px 0 0px;
-        width: 250px;
+    .nav-sidebar ul li li a {
+        border-left: 0;
+        font-size: 12px;
+        margin-left: 0;
     }
   }
 
 @media only screen 
     and (min-width : 376px)
     and (max-width : 900px) {  
-    .tabs {
-        padding: 0 0 0 10px;
-    }
-    .tabs li a {
-        font-size: 13px;
-        padding: 19px 10px 11px;
-    }
     .sidebar {
         position: fixed;
         width: 100%;
         z-index: 100;
     }
-    .content {
-        padding: 50px;
-    }
     .main-content {
         padding: 22px 35px 25px 30px;
     }
@@ -95,7 +83,7 @@
     .hero-text,
     .banner,
     .ctrl-right {
-        display: none;
+        display: none;///// CHECK THIS /////
     }
     .nav-container {
         overflow: visible;
@@ -141,6 +129,7 @@
     }
     .nav-sidebar a {
         color: #a8a8a8;
+        text-align: center;
     }
     .tabs {
         float: left;
@@ -149,11 +138,10 @@
     }
     .tabs li a {
         color: #fff;
-        padding: 15px 12px 10px 6px;
+        padding: 17px 6px 10px 4px;
         float: left;
         opacity: 0.7;
         font-size: 12px;
-        margin-left: -10px;
     }
     .content {
         padding: 120px 25px;
@@ -181,7 +169,6 @@
     }
     .search-form {
         display: block!important;
-        width: 230px;
     }
     .component-full {
         text-align: center;
@@ -219,7 +206,6 @@
       padding: 5px 0 0 0;
     }
     .tabs li a {
-      padding: 15px 0 10px 0;
       margin-left: 0;
       font-weight: normal;
     }
@@ -256,7 +242,7 @@
     }
     .nav-secondary {
         background: $black;
-        // height: 55px;
+        height: 100px;
     }
     .content {
         padding: 120px 20px;
@@ -264,13 +250,6 @@
     .main-content {
         padding: 0px 10px;
     }
-    .tabs {
-        padding-left: 22px;
-    }
-    .tabs li a {
-        padding: 17px 9px 12px 5px;
-        font-size: 12px;
-    }
     .nav-sidebar a {
         color: #a8a8a8;
     }
@@ -299,19 +278,6 @@
 }
 
 
-/* Portrait and Landscape iphone 4 + S */
-// @media only screen 
-//   and (min-device-width: 320px) 
-//   and (max-device-width: 480px)
-//   and (-webkit-min-device-pixel-ratio: 2) {
-//     .tabs {
-//         padding: 5px 0 0 8px;
-//     }
-//     .tabs li a {
-//         padding: 15px 9px 10px 4px;
-//     }
-// }
-
 /*
 *
 * medium displays mobile  **********************************************************
@@ -345,10 +311,6 @@
     h4 {
         font-size: 16px;
     }
-    .tabs li a {
-        font-size: 12px;
-        padding: 20px 7px 11px 5px;
-    }
     .toc-nav a {
         font-size: 11px;
     }
@@ -372,8 +334,6 @@
   and (orientation: landscape) {
     .search-form {
         float: left;
-        margin: 10px 15px 0 0px;
-        width: 160px;
     }
     .ctrl-right {
         display: block;
@@ -404,7 +364,8 @@
 
 @media (max-width: 1024px) {
     .nav-secondary-tabs.affix-top {
-        background-color: $bg-secondary;
+        // background-color: $bg-secondary;
+        background-color: rgba(0,0,0,.05);
         position: fixed;
         top: 0;
     }
diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss
index 7c95f26088..3047e1a4e1 100755
--- a/_scss/_navigation.scss
+++ b/_scss/_navigation.scss
@@ -4,10 +4,9 @@
 *
 */
 .nav-container {
-    height: 50px;
+    height: 55px;
 }
 
-
 .primary {
     padding: 5px 0 0 20px;
 }
@@ -30,7 +29,6 @@
     padding: 16px 15px 0 0;
 }
 
-
 /*
 *
 * user-nav ***********************************************************************
@@ -52,7 +50,6 @@
     }
 }
 
-
 /*
 *
 * Secondary Navigation  **********************************************************
@@ -63,7 +60,6 @@
     background: $bg-secondary;
     box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
     height: 55px;
-    // overflow: hidden;
 }
 
 
@@ -80,12 +76,16 @@
     position: absolute;
     width: 100%;
     &.affix {
-        background: #0C5176;
+        background: $bg-secondary;
         box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
         top: 0;
         position: fixed;
         z-index: 100;
     }
+    .search-form {
+        margin: 5px 27px 0 -10px;
+        width: 240px;
+    }
 }
 
 /*
@@ -115,8 +115,7 @@
     }
 }
 
-.nav-sidebar .nav ul
-{
+.nav-sidebar .nav ul {
   padding: 0px 0px 0px 15px;
 }
 
@@ -135,13 +134,14 @@
 .nav-sidebar ul li a.active,
 .nav-sidebar.nav>li>a:focus {
     cursor: default;
+    background: #F3F4F4;
     color: #2089C4;
-    border-left: 4px solid #21cbc9;
+    border-left: 4px solid #077CBC;
     font-weight: 600;
 }
 
 .nav-sidebar ul li li a {
-    border-left: 1px solid #21cbc9;
+    border-left: 1px solid #077CBC;
     font-size: 12px;
     margin-left: 15px;
 }
@@ -171,15 +171,15 @@
 .toc-nav ul {
     list-style: none;
     margin: 0;
-    padding-left: 0;
-    line-height: 24px;
+    padding-left: 10px;
+    line-height: 20px;
     li {
-        padding: 2px 8px 2px 15px;
+        padding: 2px 8px 2px 0;
         width: 100%;
         a {
             display: inline-block;
             font-size: 12px;
-            padding: 0 10px 0 10px;
+            padding: 5px 10px 5px 10px;
             text-decoration: none;
         }
     }
@@ -187,7 +187,7 @@
 
 .toc-nav li a.active {
     color: #2089C4;
-    border-left: 4px solid #21cbc9;
+    border-left: 4px solid #2089C4;
     font-weight: bold;
 }
 
@@ -212,7 +212,6 @@ div#side-toc-title {
     margin: 10px 0 20px 15px;
 }
 
-
 /*
 *
 * Toggle Switches **************************************************************
@@ -295,28 +294,33 @@ input:checked+.slider:before {
 * Tabs ***********************************************************************
 *
 */
-
-.tabs {
+#tabs {
     float: left;
     margin: 0;
-    padding: 0;
+    padding-left: 8px; 
+    ul {
+        padding: 0;
+    }
 }
 
-.tabs li {
-    float: left;
-    list-style: none;
-}
 
-.tabs li a {
-    color: $white;
-    padding: 17px 13px 11px;
-    float: left;
-    font-weight: 600;
-}
 
-.tabs li a:hover {
-    background: rgba(0, 0, 0, 0.17) !important;
-    border-bottom: 4px solid #fff;
+.tabs {
+
+    li {
+        float: left;
+        list-style: none;
+        a {
+            color: $white;
+            padding: 17px 19px 14px 15px;
+            float: left;
+            font-weight: 600;
+            &:hover {
+                background: rgba(0, 0, 0, 0.17) !important;
+                border-bottom: 4px solid #fff;
+            }
+        }
+    }
 }
 
 .tabs li.active a {
@@ -326,7 +330,6 @@ input:checked+.slider:before {
     border-bottom: 4px solid #fff;
 }
 
-
 /*
 *
 * feedback links ***********************************************************************
@@ -337,7 +340,6 @@ input:checked+.slider:before {
     margin: 50px 0 10px 0;
 }
 
-
 /* polldaddy */
 
 #rating_info_8453675 {
@@ -349,7 +351,6 @@ input:checked+.slider:before {
     color: inherit !important;
 }
 
-
 /*
 *
 * Controls ***********************************************************************
@@ -364,7 +365,7 @@ input:checked+.slider:before {
 
 .ctrl-right {
     float: right;
-    padding: 5px 2px 12px;
+    padding: 5px 0px;
 }
 
 .ctrl-right .btn-group {
diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss
index 5c282848b4..5bf3979862 100755
--- a/_scss/_night-mode.scss
+++ b/_scss/_night-mode.scss
@@ -7,18 +7,19 @@
 body.night {
     background-color: $bg-body-night;
     color: $body-text-color-night;
+    p,
+    .rating-nero-value,
+    .reading-time {
+        color: $body-text-color-night!important;
+    }
     h1,
     h2,
     h3,
     h4,
     h5,
     h6,
-    .component h3,
-    .component p,
-    p,
-    .rating-nero-value,
-    .reading-time {
-        color: $body-text-color-night!important;
+    .component h3 {
+        color: $white!important;
     }
     a,
     .toc-nav i.fa {
@@ -83,18 +84,16 @@ body.night {
     .nav-sidebar.nav>li>a:focus,
     .toc-nav li a.active {
         color: $active-sidebar-night;
-        border-left: 4px solid #21cbc9;
+        background: #0a151a;
+        border-left: 4px solid #077CBC;//add to variables
     }
     .tabs li.active a {
-        border-bottom: 4px solid #21cbc9;
+        border-bottom: 4px solid #077CBC;//add to variables
     }
     .slider {
         background-color: #344658;
         border: 1px solid #192837;
     }
-    .slider:before {
-        background-color: rgb(26, 162, 161);
-    }
     ul {
         color: $body-text-night;
     }
@@ -172,13 +171,9 @@ body.night {
         background: $bg-search-results-night;
         border: 1px solid $black;
         color: $white;
-        padding: 20px 55px 15px 15px;
+        padding: 20px 0 15px 0px;
         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 {
@@ -189,7 +184,6 @@ body.night {
         padding: 5px 0 7px 0;
     }
     div#autocompleteResults span {
-        background-color: rgba(32, 137, 196, 0.34) !important;
         color: #b7a4de;
     }
     .autocompleteTitle {
diff --git a/_scss/_overrides.scss b/_scss/_overrides.scss
index b5908d6d9b..00889a055f 100755
--- a/_scss/_overrides.scss
+++ b/_scss/_overrides.scss
@@ -7,7 +7,7 @@
 .nav-secondary-tabs .dropdown-btn {
     background: transparent;
     color: #fff;
-    padding: 6px 12px;
+    padding: 5px 11px 0px 0px;
     margin-top: 7px;
     border: 0;
     font-size: 12px;
@@ -16,7 +16,7 @@
 .nav-secondary .dropdown-btn {
     background: transparent;
     color: #b4d4e4;
-    padding: 6px 12px;
+    padding: 5px 11px 0px 0px;
     margin-top: 7px;
     border: 0;
     font-size: 12px;
@@ -100,18 +100,46 @@
     background-color: #0c5176;
 }
 
+/*
+*
+* Bootstrap expand/collapse accordions
+*
+*/
+
+.panel-heading .chevron:after {
+    content: "\f0d8";
+}
+
+.panel-heading.collapsed .chevron:after {
+    content: "\f0d7";
+}
+
+.panel-heading:hover{
+    background-color: #fafdfe;
+}
+
 
 /*
 *
 * override google results +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 *
 */
+.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
+    color: #27343B!important;
+    line-height: 23px!important;
+}
+.gsc-webResult .gsc-result {
+    padding: 20px 0 20px 20px!important;
+}
 
 a.gs-title {
     color: #2089C4!important;
     text-decoration: none;
 }
 
+.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
+    color: #F993A6!important;
+}
 .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
     color: #82949E!important;
 }
@@ -120,6 +148,11 @@ a.gs-title {
     font-size: 14px!important;
 }
 
+.gsc-tabHeader.gsc-tabhActive, .gsc-tabsArea {
+    border-color: #f7f7f761 !important;
+    background: transparent;
+}
+
 img.with-border {
   border: 1px solid #eaeaea;
 }
diff --git a/_scss/_utilities.scss b/_scss/_utilities.scss
index 8086261090..316930aff0 100755
--- a/_scss/_utilities.scss
+++ b/_scss/_utilities.scss
@@ -4,6 +4,13 @@
 *
 */
 
+.archive-panel {
+    padding: 10px 5px;
+    height: 100px;
+    width: 100%;
+    display: none;
+}
+
 .reading-time {
     font-style: italic;
     font-size: 12px;
@@ -11,13 +18,15 @@
     color: rgba(13, 86, 125, 0.55);
 }
 
+.break {
+    margin-bottom: 20px!important;
+}
 /*
 *
 * tables
 *
 */
 
-
 table {
     border: 1px solid rgba(204, 204, 204, 0.29);
     margin: 0 0 15px 0;
@@ -41,12 +50,12 @@ td.th {
 }
 
 thead {
-    background: rgba(96, 125, 139, 0.16);
+    background: $table-head;
 }
 
 i.fa.fa-indent,
 i.fa.fa-outdent {
-    color: #fff;
+    color: $white;
     padding: 16px 15px 0 0;
     font-size: 1.5rem;
     opacity: 0.5;
@@ -69,26 +78,6 @@ img.inline {
     display: inline;
 }
 
-
-/*
-*
-* Bootstrap expand/collapse accordions
-*
-*/
-
-.panel-heading .chevron:after {
-    content: "\f0d8";
-}
-
-.panel-heading.collapsed .chevron:after {
-    content: "\f0d7";
-}
-
-.panel-heading:hover{
-    background-color: #fafdfe;
-}
-
-
 /*
 * Search *********************************************************************
 *
@@ -97,8 +86,8 @@ img.inline {
 
 .search-form {
     float: left;
-    margin: 5px 15px 0 0px;
-    width: 250px;
+    margin: 5px 0 0px;
+    // width: 200px;
     & input[type=text] {
         background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
         background-position: 10px 9px;
@@ -123,7 +112,7 @@ img.inline {
     -o-transition: all 0.2s ease;
     transition: all 0.2s ease;
     padding: 0px 0 0 35px;
-    width: 250px;
+    width: 100%;
 }
 
 .search-form input[type=text]:focus {
@@ -138,24 +127,6 @@ input[type=text],
     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;
-}
-
 .nav-secondary-tabs .search-form input[type=search]:focus {
     background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat;
     background-position: 10px 9px;
@@ -167,28 +138,26 @@ input[type=text] {
     background-position: 10px 9px;
     border: 1px solid transparent;
     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: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat;
     background-position: 10px 9px;
-    border: 1px solid transparent;
+    border: 0;
     box-shadow: none;
+    color: #fff;
     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;
     padding: 0px 0 0 35px;
 }
 
 .nav-secondary .search-form input[type=search]:focus {
-    background: rgb(51, 112, 144) url(/images/search.png) no-repeat;
+    background: rgba(255,255,255,0.17) url(/images/search.png) no-repeat;
     background-position: 10px 9px;
-    border: 1px solid rgba(91, 149, 179, 0.44);
-    box-shadow: none;
-    color: #fff;
 }
 
 .search-form input[type=search]::-webkit-input-placeholder {
@@ -213,6 +182,24 @@ input[type=text] {
     opacity: 1;
 }
 
+// .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;
+// }
+
 /*
   *
   * autocompleteResults  **********************************************************
@@ -224,8 +211,9 @@ div#autocompleteResults {
 }
 
 div#autocompleteResults {
-    background: #f6fcff;
+    background: #E6F5FD;
     border: 1px solid #eee;
+    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.28);
     padding: 20px 0 15px 0px;
     margin: 10px 0 0 0;
     position: absolute;
@@ -242,7 +230,7 @@ ul.autocompleteList {
 }
 
 div#autocompleteResults span {
-    background: #b8e2f9!important;
+    background: transparent!important;
     color: #518cad;
 }
 
@@ -254,21 +242,24 @@ div#autocompleteResults span {
 .autocompleteSelected {
   background-color: #f5f5f5;
 }
-.autocompleteList
-{
+
+.autocompleteList {
   list-style-type: none;
   width: 400px;
 /* commented out 0px padding to allow inherit padding, search results on autocompleteList were getting smashed up against left margin due to this */
 /*  padding:0px; */
   margin-bottom: 0px;
 }
+
 .autoCompleteResult {
-  border-bottom: 1px solid #6db9d1;
-  padding-bottom: 10px;
+    border-bottom: 1px solid rgba(203, 205, 209, 0.4);
+    padding: 15px;
 }
+
 #autocompleteShowAll {
-  padding-bottom: 10px;
+  padding: 20px 15px 0 0;
 }
+
 .autocompleteList li {
   width: 380px;
   border: 0px;
@@ -281,12 +272,71 @@ div#autocompleteResults span {
   *
   */
 
-
-// .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2,input.gsc-search-button {
-//     width: auto!important
-//     height: auto!important;
-// }
-
 input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
     display: none!important;
 }
+
+
+/*
+*
+* moved from temp css
+*
+*/
+
+@media print
+{
+    .footer
+    {
+        display: none !important;
+    }
+    .col-toc
+    {
+      display: none !important;
+    }
+    .col-nav
+    {
+      display: none !important;
+    }
+    .glyphicon-tags
+    {
+      display: none !important;
+    }
+    #ratings-div 
+    {
+      display: none !important;
+    }
+}
+
+.alert-info {
+    border: 0;
+    border-radius: 0;
+    color: #31708f;
+    background-color: #3F51B5!important;
+    border-color: #bce8f1;
+    text-align: center;
+    color: #fff;
+    margin-bottom: 0;
+}
+
+.alert-info ul {
+  list-style-type: none;
+}
+
+.close {
+    float: right;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1;
+    color: #fffdfd;
+    text-shadow: 0 1px 0 #fff;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    margin: 10px 15px 0 0;
+}
+
+/* Make table headings  bold, give tables some breathing room */
+
+.content table {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index 279e77102d..5e59b745ca 100755
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -32,11 +32,11 @@ $bg-body: #fff;
 
 $heading-color: #254356;
 
-$body-text-color: #254356;
+$body-text-color: #33444C;//grey #11 in color pallette
 
 $bg-footer: #fff;
 
-$bg-secondary: #0C5176;
+$bg-secondary: #077CBC;
 
 $bg-sidebar: #FBFBFC;
 
@@ -44,7 +44,7 @@ $bg-component: #FBFBFC;
 
 $bdr-sidebar: rgba(204, 204, 204, 0.29);
 
-$primary-links: #2089C4;
+$primary-links: #0090C8;
 
 $slider-bg: #c3e4f7;
 
@@ -52,6 +52,8 @@ $slider-btn: #4fa1d0;
 
 $code-blocks: rgba(12, 81, 118, 0.1);
 
+$table-head: #CFD2D4;
+
 
 /*
 *
@@ -59,15 +61,15 @@ $code-blocks: rgba(12, 81, 118, 0.1);
 *
 */
 
-$bg-body-night: #192837;
+$bg-body-night: #061F2F;
 
 $body-text-color-night: #d3d4d4;
 
-$bg-secondary-night: #0a121b;
+$bg-secondary-night: #27343B;
 
-$bg-sidebar-night: #101c29;
+$bg-sidebar-night: #101e26;
 
-$active-sidebar-night: #21cbc9;
+$active-sidebar-night: #077CBC;
 
 $bg-component-night: #101c29;
 
@@ -75,7 +77,7 @@ $heading-color-night: #b9c2cc;
 
 $body-text-night: #cbdbe6;
 
-$primary-links-night: #d0e8ff;
+$primary-links-night: #9CD7F7;
 
 $bg-footer-night: #000;
 
diff --git a/css/temp.css b/css/temp.css
index 142bf5ba41..8b13789179 100644
--- a/css/temp.css
+++ b/css/temp.css
@@ -1,65 +1 @@
 
-
-/*
-*
-* this css will be integrated into master. for now testing.......
-*
-*/
-
-@media print
-{
-    .footer
-    {
-        display: none !important;
-    }
-    .col-toc
-    {
-      display: none !important;
-    }
-    .col-nav
-    {
-      display: none !important;
-    }
-    .glyphicon-tags
-    {
-      display: none !important;
-    }
-    #ratings-div 
-    {
-      display: none !important;
-    }
-}
-
-.alert-info {
-    border: 0;
-    border-radius: 0;
-    color: #31708f;
-    background-color: #3F51B5!important;
-    border-color: #bce8f1;
-    text-align: center;
-    color: #fff;
-    margin-bottom: 0;
-}
-
-.alert-info ul {
-  list-style-type: none;
-}
-
-.close {
-    float: right;
-    font-size: 21px;
-    font-weight: 700;
-    line-height: 1;
-    color: #fffdfd;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: .2;
-    margin: 10px 15px 0 0;
-}
-
-/* Make table headings  bold, give tables some breathing room */
-
-.content table {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}