diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index 6624fb4eb1..9d511428e2 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -9,6 +9,7 @@
     {{- with index $themevariants 0 }}
     <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
     {{- end }}
+    <link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"{{ if ne (.Scratch.Get "relearnOutputFormat") "PRINT" }} media="print"{{ end }}>
     {{- if .Site.Params.disableInlineCopyToClipBoard }}
diff --git a/static/css/ie.css b/static/css/ie.css
new file mode 100644
index 0000000000..8d6ea06cd5
--- /dev/null
+++ b/static/css/ie.css
@@ -0,0 +1,331 @@
+@media all and (-ms-high-contrast:none) {
+	/* set default colors as in variant.css for IE11 */
+	body {
+		background-color: #ffffff; /* var(--MAIN-BG-color) */
+		color: #101010; /* var(--MAIN-TEXT-color) */
+		font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
+	}
+
+	a,
+	#toc-menu {
+		color: #486ac9; /* var(--MAIN-LINK-color) */
+	}
+
+	a:hover,
+	#toc-menu:hover,
+	#body a.highlight:after {
+		color: #134fbf; /* var(--MAIN-LINK-HOVER-color) */
+	}
+
+	#sidebar {
+		background: #282828; /* var(--MENU-SECTIONS-BG-color) */
+	}
+
+	#header-wrapper {
+		/* initially use section background to avoid flickering on load when a
+		non default variant is active */
+		background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
+		border-bottom-color: rgba( 0, 0, 0, 0 );  /* var(--MENU-SECTIONS-BG-color) */
+		color: #e0e0e0; /* var(--MENU-SEARCH-color) */
+	}
+
+	.searchbox {
+		border-color: #e0e0e0; /* var(--MENU-SEARCH-BORDER-color) */
+		background-color: #323232; /* var(--MENU-SEARCH-BG-color) */
+	}
+
+	#sidebar .collapsible-menu label:after,
+	#sidebar a {
+		color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
+	}
+
+	#sidebar select:hover,
+	#sidebar .collapsible-menu label:hover:after,
+	#sidebar a:hover {
+		color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
+	}
+
+	#sidebar ul.topics > li.parent,
+	#sidebar ul.topics > li.active {
+		background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
+	}
+
+	#sidebar ul.topics li.active > a {
+		background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
+		color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
+	}
+
+	#sidebar ul li.visited > a .read-icon {
+		color: #486ac9; /* var(--MENU-VISITED-color) */
+	}
+
+	#sidebar .nav-title {
+		color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
+	}
+
+	#sidebar hr {
+		border-color: #606060; /* var(--MENU-SECTION-HR-color) */
+	}
+
+	#footer {
+		color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
+	}
+
+	h1 {
+		color: #101010; /* var(--MAIN-TEXT-color) */
+		font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
+	}
+
+	h2, h3, h4, h5, h6 {
+		color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
+		font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */
+	}
+
+	div.box {
+		background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
+	}
+
+	div.box > .box-label {
+		color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
+	}
+
+	div.box > .box-content {
+		background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
+		color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
+	}
+
+	div.box.info {
+		background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
+	}
+
+	div.box.info > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-INFO-TEXT-color) */
+	}
+
+	div.box.warning {
+		background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
+	}
+
+	div.box.warning > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-WARNING-TEXT-color) */
+	}
+
+	div.box.note {
+		background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
+	}
+
+	div.box.note > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-NOTE-TEXT-color) */
+	}
+
+	div.box.tip {
+		background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
+	}
+
+	div.box.tip > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-TIP-TEXT-color) */
+	}
+
+	div.box.primary {
+		background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
+	}
+
+	div.box.primary > .box-content {
+		color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
+	}
+
+	div.box.secondary {
+		background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
+	}
+
+	div.box.secondary > .box-content {
+		color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
+	}
+
+	div.box.blue {
+		background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
+	}
+
+	div.box.blue > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-BLUE-TEXT-color) */
+	}
+
+	div.box.green {
+		background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
+	}
+
+	div.box.green > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREEN-TEXT-color) */
+	}
+
+	div.box.grey {
+		background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
+	}
+
+	div.box.grey > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREY-TEXT-color) */
+	}
+
+	div.box.orange {
+		background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
+	}
+
+	div.box.orange > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-ORANGE-TEXT-color) */
+	}
+
+	div.box.red {
+		background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
+	}
+
+	div.box.red > .box-content {
+		color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */
+	}
+
+	div.box.transparent > .box-label {
+		color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
+	}
+
+	div.box.transparent > .box-content {
+		color: #101010; /* var(--MAIN-TEXT-color) */
+	}
+
+	code,
+	kbd,
+	pre,
+	samp {
+		font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
+	}
+
+	code {
+		background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
+		border-color: #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
+		color: #5e5e5e; /* var(--CODE-INLINE-color) */
+	}
+
+	pre {
+		background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
+		border-color: #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
+		color: #000000; /* var(--CODE-BLOCK-color) */
+	}
+
+	div.featherlight .featherlight-content{
+		background-color: #ffffff /* var(--INTERNAL-MAIN-BG-color); */
+	}
+
+	#topbar {
+		background-color: #ffffff; /* var(--MAIN-BG-color) */
+	}
+
+	#body a[aria-disabled="true"] {
+		color: #101010; /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
+	}
+
+	.copy-to-clipboard-button {
+		background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
+		border-color: #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
+		color: #5e5e5e; /* var(--CODE-INLINE-color) */
+		font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
+	}
+
+	.copy-to-clipboard-button:hover {
+		background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
+		color: #fffae9; /* var(--CODE-INLINE-BG-color) */
+	}
+
+	pre .copy-to-clipboard-button {
+		border-color: #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
+		color: #486ac9; /* var(--MAIN-LINK-color) */
+	}
+
+	pre .copy-to-clipboard-button:hover {
+		background-color: #486ac9; /* var(--MAIN-LINK-color) */
+		border-color: #486ac9; /* var(--MAIN-LINK-color) */
+		color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
+	}
+
+	#homelinks {
+		background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
+		border-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
+	}
+
+	#homelinks a {
+		color: #323232 /* var(--MENU-HOME-LINK-color) */
+	}
+
+	#homelinks a:hover {
+		color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */;
+	}
+
+	#body a.highlight:after {
+		background-color: #486ac9; /* var(--MAIN-LINK-color) */
+	}
+
+	.progress {
+		background-color: #ffffff; /* var(--MAIN-BG-color) */
+	}
+
+	.btn-default {
+		color: #101010; /* var(--MAIN-TEXT-color) */
+	}
+
+	.btn-default:hover,
+	.btn-default:focus,
+	.btn-default:active {
+		color: #ffffff;/* var(--MAIN-BG-color) */
+	}
+
+	.anchor {
+		color: #486ac9; /* var(--MAIN-ANCHOR-color) */
+	}
+
+	#body .tags a.tag-link {
+		background-color: #7dc903; /* var(--TAG-BG-color) */
+		color: #ffffff; /* var(--MAIN-BG-color) */
+	}
+
+	#body .tags a.tag-link:before {
+		border-right-color: #7dc903; /* var(--TAG-BG-color) */
+	}
+
+	#body .tags a.tag-link:after {
+		background: #ffffff; /* var(--MAIN-BG-color) */
+	}
+
+	#body .tab-nav-button.active {
+		background-color: #ffffff !important; /* var(--MAIN-BG-color) */
+		border-bottom-color: #ffffff !important; /* var(--MAIN-BG-color) */
+	}
+}
+
+@media all and (-ms-high-contrast:none) {
+	/* set further styles to fix broken stuff in IE11 */
+
+	/* turn off animiation in IE because this causes the menu
+    to move in from the left on every page load */
+    .default-animation{
+        transition: none;
+    }
+
+    /* our silly dinosaur browser wants to have the real colors */
+    #header-wrapper {
+        background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */
+        border-bottom-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
+    }
+
+    /* clears the 'X' from Internet Explorer's search input */
+    input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
+    input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
+
+    /* turn off variant selector as it uses modern stuff; don't change
+    order with block below */
+    .showVariantSwitch{
+        display: getamodernbrowser;
+    }
+    /* dumb IE11 doesn't understand initial, so we force a fallback here */
+    .showLangSwitch,
+    .showVisitedLinks,
+    .showFooter {
+        display: block;
+    }
+}
diff --git a/static/css/tabs.css b/static/css/tabs.css
index 2d82593fc4..11babb6deb 100644
--- a/static/css/tabs.css
+++ b/static/css/tabs.css
@@ -14,10 +14,6 @@
 #body .tab-nav-button:first-child {
     margin-left: 9px;
 }
-#body .tab-nav-button.active {
-    background-color: #ffffff !important; /* var(--MAIN-BG-color) */
-    border-bottom-color: #ffffff !important; /* var(--MAIN-BG-color) */
-}
 #body .tab-nav-button:not(.active) {
     border-bottom-color: rgba( 134, 134, 134, .1 ) !important;
     margin-top: 7px;
diff --git a/static/css/tags.css b/static/css/tags.css
index dd3da7a210..dc68a4448c 100644
--- a/static/css/tags.css
+++ b/static/css/tags.css
@@ -6,11 +6,9 @@
 }
 
 #body .tags a.tag-link {
-    background: #7dc903; /* var(--TAG-BG-color) */
     border-bottom-right-radius: 3px;
     border-top-right-radius: 3px;
     box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-    color: #ffffff; /* var(--MAIN-BG-color) */
     display: inline-block;
     font-size: 0.8em;
     font-weight: 400;
@@ -21,7 +19,7 @@
 }
 
 #body .tags a.tag-link:before {
-    border-color: transparent #7dc903 transparent transparent; /* var(--TAG-BG-color) */
+    border-color: transparent;
     border-style: solid;
     border-width: 1em 1em 1em 0;
     content: "";
@@ -33,7 +31,6 @@
 }
 
 #body .tags a.tag-link:after {
-    background: #ffffff; /* var(--MAIN-BG-color) */
     border-radius: 100%;
     content: "";
     left: 1px;
diff --git a/static/css/theme.css b/static/css/theme.css
index 1cbdf6e52e..4eb4b89e61 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -49,11 +49,8 @@ html {
 }
 
 body {
-    background-color: #ffffff; /* var(--MAIN-BG-color) */
-    color: #101010; /* var(--MAIN-TEXT-color) */
     display: flex;
-    flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS */
-    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
+    flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */
     font-size: 16.25px;
     font-weight: 300;
     height: 100%;
@@ -77,16 +74,6 @@ body #body-inner .chapter h1 {
     }
 }
 
-a,
-#toc-menu {
-    color: #486ac9; /* var(--MAIN-LINK-color) */
-}
-
-a:hover,
-#toc-menu:hover {
-    color: #134fbf; /* var(--MAIN-LINK-HOVER-color) */
-}
-
 pre {
     position: relative;
 }
@@ -103,7 +90,6 @@ th {
 }
 
 #sidebar {
-    background: #282828; /* var(--MENU-SECTIONS-BG-color) */
     display: flex;
     flex-basis: auto;
     flex-direction: column;
@@ -122,11 +108,8 @@ th {
 }
 
 #header-wrapper {
-    /* initially use section background to avoid flickering on load when a
-    non default variant is active */
-    background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
-    border-bottom: 4px solid rgba( 0, 0, 0, 0 );  /* var(--MENU-SECTIONS-BG-color) */
-    color: #e0e0e0; /* var(--MENU-SEARCH-color) */
+    border-bottom-style: solid;
+    border-bottom-width: 4px;
     text-align: center;
     padding: 1rem;
     position: relative;
@@ -136,9 +119,9 @@ th {
 }
 
 .searchbox {
-    border: 1px solid #e0e0e0; /* var(--MENU-SEARCH-BORDER-color) */
     border-radius: 4px;
-    background-color: #323232; /* var(--MENU-SEARCH-BG-color) */
+    border-style: solid;
+    border-width: 1px;
     position: relative;
     margin-top: 1rem;
 }
@@ -190,17 +173,6 @@ th {
     z-index: 410;
 }
 
-#sidebar .collapsible-menu label:after,
-#sidebar a {
-    color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
-}
-
-#sidebar select:hover,
-#sidebar .collapsible-menu label:hover:after,
-#sidebar a:hover {
-    color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
-}
-
 #sidebar a.padding {
     padding: 0 1rem;
 }
@@ -262,10 +234,6 @@ th {
     padding-right: 1rem;
 }
 
-#sidebar ul.topics > li.parent {
-    background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
-}
-
 #sidebar ul.topics li > a {
     margin-left: -1rem;
     margin-right: -1rem;
@@ -273,11 +241,6 @@ th {
     padding-right: 1rem;
 }
 
-#sidebar ul.topics li.active > a {
-    background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
-    color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
-}
-
 #sidebar ul {
     list-style: none;
     padding: 0;
@@ -331,12 +294,10 @@ th {
 }
 
 #sidebar ul li.visited > a .read-icon {
-    color: #486ac9; /* var(--MENU-VISITED-color) */
     display: inline;
 }
 
 #sidebar .nav-title {
-    color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
     font-size: 2rem;
     font-weight: 200;
     letter-spacing: -1px;
@@ -352,14 +313,11 @@ th {
 }
 
 #sidebar hr {
-    border-bottom: 1px solid #606060; /* var(--MENU-SECTION-HR-color) */
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
     margin: 1.5rem 1rem 1rem 1rem;
 }
 
-#footer {
-    color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
-}
-
 #body {
     display: flex;
     flex-basis: 100%;
@@ -466,16 +424,12 @@ th {
 }
 
 h1 {
-    color: #101010; /* var(--MAIN-TEXT-color) */
-    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
     font-weight: 200;
     text-align: center;
     text-transform: uppercase;
 }
 
 h2, h3, h4, h5, h6 {
-    color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
-    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */
     letter-spacing: -1px;
     text-rendering: optimizeLegibility;
 }
@@ -505,21 +459,17 @@ div.box {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
     --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
-    background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
     margin: 1.5rem 0;
 }
 
 div.box > .box-label {
-    color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
     font-weight: 500;
     padding: .2rem .6rem;
 }
 
 div.box > .box-content {
-    background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
-    color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
     padding-bottom: .1rem;
     padding-left: 1rem;
     padding-right: 1rem;
@@ -537,111 +487,56 @@ div.box > .box-content > :last-child {
 div.box.info {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
-    background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
-}
-
-div.box.info > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-INFO-TEXT-color) */
 }
 
 div.box.warning {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
-    background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
-}
-
-div.box.warning > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-WARNING-TEXT-color) */
 }
 
 div.box.note {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
-    background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
-}
-
-div.box.note > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-NOTE-TEXT-color) */
 }
 
 div.box.tip {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
-    background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
-}
-
-div.box.tip > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-TIP-TEXT-color) */
 }
 
 div.box.primary {
     --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
-    background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
-}
-
-div.box.primary > .box-content {
-    color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
 }
 
 div.box.secondary {
     --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
-    background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
-}
-
-div.box.secondary > .box-content {
-    color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
 }
 
 div.box.blue {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
-    background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
-}
-
-div.box.blue > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-BLUE-TEXT-color) */
 }
 
 div.box.green {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
-    background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
-}
-
-div.box.green > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREEN-TEXT-color) */
 }
 
 div.box.grey {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
-    background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
-}
-
-div.box.grey > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREY-TEXT-color) */
 }
 
 div.box.orange {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
-    background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
-}
-
-div.box.orange > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-ORANGE-TEXT-color) */
 }
 
 div.box.red {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
-    background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
-}
-
-div.box.red > .box-content {
-    color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */
 }
 
 div.box.transparent {
@@ -651,13 +546,8 @@ div.box.transparent {
     background-color: transparent;
 }
 
-div.box.transparent > .box-label {
-    color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
-}
-
 div.box.transparent > .box-content {
     background-color: transparent;
-    color: #101010; /* var(--MAIN-TEXT-color) */
 }
 
 /* attachments shortcode */
@@ -715,16 +605,14 @@ code,
 kbd,
 pre,
 samp {
-    font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
     font-size: 92%;
     vertical-align: baseline;
 }
 
 code {
-    background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
-    border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
     border-radius: 2px;
-    color: #5e5e5e; /* var(--CODE-INLINE-color) */
+    border-style: solid;
+    border-width: 1px;
     -webkit-print-color-adjust: economy;
     color-adjust: economy;
     padding-left: 2px;
@@ -743,10 +631,9 @@ code.copy-to-clipboard-code {
 }
 
 pre {
-    background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
-    border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
     border-radius: 2px;
-    color: #000000; /* var(--CODE-BLOCK-color) */
+    border-style: solid;
+    border-width: 1px;
     -webkit-print-color-adjust: economy;
     color-adjust: economy;
     line-height: 1.15;
@@ -958,7 +845,6 @@ td {
 }
 
 #topbar {
-    background-color: #ffffff; /* var(--MAIN-BG-color) */
     min-height: 3rem;
     position: relative;
     z-index: 480;
@@ -1068,7 +954,6 @@ span.nav i{
 }
 
 #body a[aria-disabled="true"] {
-    color: #101010; /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
     pointer-events: none;
     text-decoration: none;
 }
@@ -1087,7 +972,7 @@ span.nav i{
     }
 }
 @media screen and (max-width: 47.938em) {
-    /* we don't support sidebar flyout in IE */
+    /* we don't support sidebar flyout in mobile */
     .mobile-support #sidebar {
         left: -230px;
     }
@@ -1124,12 +1009,10 @@ span.nav i{
 }
 
 .copy-to-clipboard-button {
-    background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
-    border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
     border-radius: 0 2px 2px 0;
-    color: #5e5e5e; /* var(--CODE-INLINE-color) */
+    border-style: solid;
+    border-width: 1px;
     cursor: pointer;
-    font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
     font-size: 92%;
     padding-left: 22px;
 }
@@ -1145,42 +1028,23 @@ span.nav i{
     padding-right: 5px;
 }
 
-.copy-to-clipboard-button:hover {
-    background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
-    color: #fffae9; /* var(--CODE-INLINE-BG-color) */
-}
-
 pre .copy-to-clipboard-button {
     background-color: rgba( 160, 160, 160, .2 );
-    border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
     border-radius: 2px;
-    color: #486ac9; /* var(--MAIN-LINK-color) */
+    border-style: solid;
+    border-width: 1px;
     padding: 5px 3px 5px 25px;
     position: absolute;
     right: 4px;
     top: 4px;
 }
 
-pre .copy-to-clipboard-button:hover {
-    background-color: #486ac9; /* var(--MAIN-LINK-color) */
-    border-color: #486ac9; /* var(--MAIN-LINK-color) */
-    color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
-}
-
 #homelinks {
-    background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
-    border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */
+    border-bottom-style: solid;
+    border-bottom-width: 4px;
     padding: 7px 0;
 }
 
-#homelinks a {
-    color: #323232 /* var(--MENU-HOME-LINK-color) */
-}
-
-#homelinks a:hover {
-    color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */;
-}
-
 option {
     color: initial;
 }
@@ -1298,7 +1162,6 @@ option {
 }
 
 #body a.highlight:after {
-    background-color: #486ac9; /* var(--MAIN-LINK-color) */
     content: "";
     display: block;
     height: 1px;
@@ -1331,7 +1194,6 @@ option {
 }
 
 .progress {
-    background-color: #ffffff; /* var(--MAIN-BG-color) */
     border: 0px solid rgba( 134, 134, 134, .166 );
     box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
     height: 0;
@@ -1372,8 +1234,9 @@ option {
 
 .btn {
     background-image: none !important;
-    border: 1px solid transparent !important;
     border-radius: 4px !important;
+    border-style: solid !important;
+    border-width: 1px !important;
     cursor: pointer !important;
     display: inline-block !important;
     font-size: 14px !important;
@@ -1400,7 +1263,6 @@ option {
 }
 
 .btn-default {
-    color: #101010 !important; /* var(--MAIN-TEXT-color) */
     background-color: transparent;
     border-color: rgba( 134, 134, 134, .333 ) !important;
 }
@@ -1408,7 +1270,6 @@ option {
 .btn-default:hover,
 .btn-default:focus,
 .btn-default:active {
-    color: #ffffff !important; /* var(--MAIN-BG-color) */
     background-color: rgba( 134, 134, 134, .75 ) !important;
     border-color: rgba( 134, 134, 134, .75 ) !important;
 }
@@ -1419,7 +1280,6 @@ option {
 
 /* anchors */
 .anchor {
-    color: #486ac9; /* var(--MAIN-ANCHOR-color) */
     cursor: pointer;
     font-size: .5em;
     margin-left: .66em;
@@ -1570,36 +1430,6 @@ rapi-doc {
     }
 }
 
-@media all and (-ms-high-contrast:none) {
-    /* turn off animiation in IE because this causes the menu
-    to move in from the left on every page load */
-    .default-animation{
-        transition: none;
-    }
-
-    /* our silly dinosaur browser wants to have the real colors */
-    #header-wrapper {
-        background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */
-        border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */
-    }
-
-    /* clears the 'X' from Internet Explorer's search input */
-    input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
-    input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
-
-    /* turn off variant selector as it uses modern stuff; don't change
-    order with block below */
-    .showVariantSwitch{
-        display: getamodernbrowser;
-    }
-    /* dumb IE11 doesn't understand initial, so we force a fallback here */
-    .showLangSwitch,
-    .showVisitedLinks,
-    .showFooter {
-        display: block;
-    }
-}
-
 /* clears the 'X' from Chrome's search input */
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
diff --git a/static/css/variant.css b/static/css/variant.css
index 5583a561e5..f346525fb6 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -191,105 +191,6 @@ h6 {
     font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
 }
 
-code {
-    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
-    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
-    color: var(--INTERNAL-CODE-INLINE-color);
-}
-
-pre {
-    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
-    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
-    color: var(--INTERNAL-CODE-BLOCK-color);
-}
-
-div.featherlight .featherlight-content{
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-body #topbar {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-#body a[aria-disabled="true"] {
-    color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-.copy-to-clipboard-button {
-    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
-    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
-    color: var(--INTERNAL-CODE-INLINE-color);
-}
-
-.copy-to-clipboard-button:hover {
-    background-color: var(--INTERNAL-CODE-INLINE-color);
-    color: var(--INTERNAL-CODE-INLINE-BG-color);
-}
-
-pre .copy-to-clipboard-button {
-    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
-    color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-pre .copy-to-clipboard-button:hover {
-    background-color: var(--INTERNAL-MAIN-LINK-color);
-    border-color: var(--INTERNAL-MAIN-LINK-color);
-    color: var(--INTERNAL-CODE-BLOCK-BG-color);
-}
-
-#homelinks {
-    background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
-    border-bottom-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
-}
-
-#homelinks a {
-    color: var(--INTERNAL-MENU-HOME-LINK-color);
-}
-
-#homelinks a:hover {
-    color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
-}
-
-#body a.highlight:after {
-    background-color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-.progress {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-.btn-default {
-    color: var(--INTERNAL-MAIN-TEXT-color) !important;
-}
-
-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active {
-    color: var(--INTERNAL-MAIN-BG-color) !important;
-}
-
-.anchor {
-    color: var(--INTERNAL-MAIN-ANCHOR-color);
-}
-
-#body .tags a.tag-link {
-    background-color: var(--INTERNAL-TAG-BG-color);
-    color: var(--INTERNAL-MAIN-BG-color);
-}
-
-#body .tags a.tag-link:before {
-    border-right-color: var(--INTERNAL-TAG-BG-color);
-}
-
-#body .tags a.tag-link:after {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-#body .tab-nav-button.active {
-    background-color: var(--INTERNAL-MAIN-BG-color) !important;
-    border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
-}
-
 div.box {
     background-color: var(--INTERNAL-BOX-NEUTRAL-color);
 }
@@ -406,6 +307,102 @@ samp {
     font-family: var(--INTERNAL-CODE-font);
 }
 
+code {
+    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
+    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
+    color: var(--INTERNAL-CODE-INLINE-color);
+}
+
+pre {
+    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
+    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
+    color: var(--INTERNAL-CODE-BLOCK-color);
+}
+
+div.featherlight .featherlight-content{
+    background-color: var(--INTERNAL-MAIN-BG-color);
+}
+
+#topbar {
+    background-color: var(--INTERNAL-MAIN-BG-color);
+}
+
+#body a[aria-disabled="true"] {
+    color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
 .copy-to-clipboard-button {
+    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
+    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
+    color: var(--INTERNAL-CODE-INLINE-color);
     font-family: var(--INTERNAL-CODE-font);
 }
+
+.copy-to-clipboard-button:hover {
+    background-color: var(--INTERNAL-CODE-INLINE-color);
+    color: var(--INTERNAL-CODE-INLINE-BG-color);
+}
+
+pre .copy-to-clipboard-button {
+    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
+    color: var(--INTERNAL-MAIN-LINK-color);
+}
+
+pre .copy-to-clipboard-button:hover {
+    background-color: var(--INTERNAL-MAIN-LINK-color);
+    border-color: var(--INTERNAL-MAIN-LINK-color);
+    color: var(--INTERNAL-CODE-BLOCK-BG-color);
+}
+
+#homelinks {
+    background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
+    border-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+    color: var(--INTERNAL-MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+    color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
+}
+
+#body a.highlight:after {
+    background-color: var(--INTERNAL-MAIN-LINK-color);
+}
+
+.progress {
+    background-color: var(--INTERNAL-MAIN-BG-color);
+}
+
+.btn-default {
+    color: var(--INTERNAL-MAIN-TEXT-color) !important;
+}
+
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active {
+    color: var(--INTERNAL-MAIN-BG-color) !important;
+}
+
+.anchor {
+    color: var(--INTERNAL-MAIN-ANCHOR-color);
+}
+
+#body .tags a.tag-link {
+    background-color: var(--INTERNAL-TAG-BG-color);
+    color: var(--INTERNAL-MAIN-BG-color);
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--INTERNAL-TAG-BG-color);
+}
+
+#body .tags a.tag-link:after {
+    background-color: var(--INTERNAL-MAIN-BG-color);
+}
+
+#body .tab-nav-button.active {
+    background-color: var(--INTERNAL-MAIN-BG-color) !important;
+    border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
+}