Split ToC and variables scss

4 files changed, 378 insertions, 368 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
new file mode 100644
index 00000000..7acfc416
--- /dev/null
+++ b/content/assets/stylesheets/_variables.scss
@@ -0,0 +1,230 @@
+// Breakpoints
+$mobile-width: 800px;
+
+// Border radius
+$border-radius: 3px;
+
+// Fonts
+$mono-font-family: "Menlo", "Liberation Mono", "Consolas", "DejaVu Sans Mono", "Ubuntu Mono", "Courier New", "Andale Mono", "Lucida Console", monospace;
+$sans-font-family: "Source Sans Pro", sans-serif;
+
+// Link colors
+$link-color: #3084bb;
+$link-color-hover: #20597e;
+$link-code-color: rgb(55, 119, 176);
+
+// Inline code colors
+$code-color: #c7254e;
+$code-background-color: #f9f2f4;
+
+// Home page colors
+$landing-background: #f9f9f9;
+$landing-header-background: #34373c;
+$topic-border: rgb(215, 215, 215);
+$topic-ce-header-color: rgb(1, 120, 85);
+$topic-ee-header-color: rgb(9, 96, 153);
+$topic-omnibus-header-color: rgb(107, 79, 187);
+$topic-runner-header-color: rgb(203, 88, 15);
+
+// Other colors
+$toc-bg-color: rgba(244, 247, 248, .7);
+$toc-border: rgb(229, 229, 229);
+$border-color: #e5e5e5;
+$border-color-light: #f0f0f0;
+$table-border-color: $border-color;
+$thead-border-color: rgba(170, 170, 170, .5);
+$hr-border-color: $border-color;
+$blockquote-border-color: rgb(0, 188, 242);
+$blockquote-background-color: rgb(239, 246, 251);
+$pre-background-color: rgba(238, 238, 238, .35);
+$body-color: rgba(0, 0, 0, .85);
+$body-background-color: rgb(249, 249, 249);
+$main-background-color: rgb(255, 255, 255);
+$search-border: rgba(0, 0, 0, .25);
+$h-border-bottom: rgba(125, 134, 140, .2);
+$h1-border-bottom: rgb(241, 139, 33);
+$main-box-shadow: rgba(0, 0, 0, .1);
+$white: #fff;
+$black: #333;
+
+// Footer variables
+
+$color-white: #fff;
+$color-white-alt: #d9ccff;
+$color-transparent: rgba(0, 0, 0, 0);
+
+$color-dark: #000;
+
+$color-gray: #777;
+$color-gray-medium: #ddd;
+$color-gray-light: #aaa;
+$color-gray-extra-light: #e7e7e7;
+
+$color-green: #18be97;
+
+$color-red: #f00;
+
+$color-primary: #548;
+$color-primary-alt: #6b4fbb;
+$color-secondary: #e14329;
+$color-secondary-alt: #fba225;
+$color-subfooter-bg: rgb(85, 68, 136);
+
+$color-primary-medium: #503991;
+
+$divider-color: #d3d3d3;
+
+$link-color: #55acee;
+$link-code-color: rgb(55, 119, 176);
+
+$border-color: #dfdfdf;
+
+$header-text-light-color: #a69ebd;
+
+$team-content-color: #999;
+$member-name-color: #333;
+$member-shadow-color: #ccc;
+$member-social-color: #ccc;
+
+$blog-color-text: #222;
+$blog-color-note: #666;
+$blog-color-heading: #fff;
+$blog-color-purple: rgb(107, 79, 187);
+$blog-color-mk-border: #ccc;
+$blog-color-date: #888;
+$blog-color-overlay-border: #eee;
+$blog-color-border-shadow: rgba(0, 0, 0, .1);
+$blog-color-image-from: rgba(0, 0, 0, 0);
+$blog-color-image-to: rgba(0, 0, 0, .8);
+$blog-color-ipanel-heading: rgba(221, 221, 221, .5);
+$blog-color-legacy-image-from: rgba(85, 68, 136, .8);
+$blog-color-legacy-image-to: rgba(72, 135, 197, .92);
+
+// legacy blog variables that were used by other pages
+
+$blog-date-color: #999;
+$blog-text-color: #444;
+$blog-notes-color: #606060;
+$blog-image-color-to: #4887c5;
+$blog-divider-color: #128bee;
+$blog-table-background: #faf9f9;
+$blog-table-background-hover: #f4f8fe;
+$blog-table-border: #efeff1;
+
+$release-manager-list-bg: #403366;
+$release-manager-table-border: #584985;
+$release-manager-table-header-color: #9583c9;
+$release-manager-current-table-data-color: #ff9;
+
+$mvp-list-bg: #403366;
+$mvp-table-border: #584985;
+$mvp-table-header-color: #9583c9;
+
+$landing-community-bg: #34373c;
+$landing-organization-color: #d7d7d7;
+
+$downloads-btn-color: #7769a0;
+$downloads-btn-hover-color: #403366;
+$downloads-code-color: #403366;
+$downloads-step-link-color: #ffb800;
+$downloads-step-color: #e3dcf7;
+
+$contact-color: #bbb4cf;
+$contact-btn-bg: #887ab6;
+
+$consultancy-bg-color: #272120;
+
+$gs-btn-bg: #129bee;
+$gs-btn-hover-bg: #6144b8;
+
+$applications-title-color: #373737;
+$applications-app-shadow-color: #e0e0e0;
+
+$link-box-color: #333;
+$link-box-border-color: #7863b6;
+$link-box-hover-bg: #f4f0ff;
+
+$pricing-primary: #129bee;
+$subscription-header-bg: #444;
+$subs-header-color: #242424;
+$subs-header-sub-color: #979797;
+$subs-header-hr-color: #d4d4d4;
+$pricing-header-color-to: #4887c5;
+$pricing-gray-bg: #fafafa;
+
+$blueish-gray: #a1a1a2;
+
+$dropdown-text-color: #626262;
+$dropdown-caret-color: #c4c4c4;
+$dropdown-border-color: #eaeaea;
+$dropdown-focus-color: #c4c4c4;
+$dropdown-hover-color: #f7faff;
+
+$dropdown-filter-border-color: rgba(0, 0, 0, .1);
+$dropdown-fa-color: #c7c7c7;
+$dropdown-fa-focus-color: #555;
+
+$formula-variable-bg: #f9f9f9;
+$formula-text-color: #9d9d9d;
+$formula-value-color: #444;
+
+// Bootstrap overrides
+$breadcrumb-separator: ">";
+$breadcrumb-bg: darken($color-white, 2%);
+
+$container-large-desktop: 1200px;
+
+$body-bg: #f9f9f9;
+
+$font-family-sans-serif: "Source Sans Pro", sans-serif;
+$font-family-serif: "Roboto Slab", serif;
+
+$border-radius-large: 3px;
+
+$grid-float-breakpoint: 992px;
+$screen-sm-min: 768px;
+
+$navbar-default-bg: #fff;
+$navbar-default-toggle-icon-bar-bg: $color-primary;
+$navbar-default-link-color: #8c929d;
+$navbar-default-link-hover-color: $color-primary;
+$navbar-default-link-active-color: $color-primary;
+$navbar-default-link-active-bg: transparent;
+$navbar-default-border: #d7d7d7;
+
+$dropdown-bg: #019875;
+$dropdown-link-color: #fff;
+$dropdown-link-hover-color: #18be97;
+
+$search-input-font-color: #333;
+$search-border-color: #bcbcbc;
+
+$reseller-divider-color: $navbar-default-border;
+$reseller-hero-bg-color: #35393d;
+$reseller-hero-content-color: #969696;
+$reseller-category-active-background-color: rgba(255, 255, 255, .4);
+
+$applications-search-box-shadow-color: rgba($color-dark, .5);
+
+$features-gradient-end: rgba(148, 149, 150, 1);
+$features-gradient-begin: rgba(0, 0, 0, .91);
+$features-semi-transparent-white: rgba(255, 255, 255, .15);
+$features-semi-transparent-gray: rgba(180, 180, 180, .15);
+$features-semi-transparent-gray-link: rgba(180, 180, 180, .50);
+$features-semi-transparent-black: rgba(12, 12, 12, .47);
+$features-semi-transparent-purple: rgba(107, 79, 187, .50);
+$features-barely-transparent-white: rgba(255, 255, 255, .5);
+$features-gray-light-barely-transparent: rgba(170, 170, 170, .5);
+$features-gallery-background-gradient-begin: #6b4fbb;
+$features-gallery-background-gradient-middle: #5942a0;
+$features-gallery-background-gradient-end: #42327a;
+$features-gallery-alt-description-black: rgba(0, 0, 0, .7);
+
+$ee-standalone-primary-background-gradient: linear-gradient(to right, $color-primary-alt 0%, $features-gallery-background-gradient-middle 40%, $features-gallery-background-gradient-end 100%);
+$ee-standalone-hero-background-top: rgba(52, 55, 60, .85);
+$ee-standalone-hero-background-gradient: linear-gradient(to bottom, $ee-standalone-hero-background-top, $landing-community-bg 85%);
+
+$facebook-bg: #3b5998;
+$twitter-bg: #55acee;
+$google-bg: #dd4b39;
+$linkedin-bg: #007bb5;
diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss
index d2ec1d5e..c11f9f1c 100644
--- a/content/assets/stylesheets/footer.scss
+++ b/content/assets/stylesheets/footer.scss
@@ -2,185 +2,8 @@
 version: 3
 ---
 
-$color-white: #fff;
-$color-white-alt: #d9ccff;
-$color-transparent: rgba(0, 0, 0, 0);
+@import "variables";
 
-$color-dark: #000;
-
-$color-gray: #777;
-$color-gray-medium: #ddd;
-$color-gray-light: #aaa;
-$color-gray-extra-light: #e7e7e7;
-
-$color-green: #18be97;
-
-$color-red: #f00;
-
-$color-primary: #548;
-$color-primary-alt: #6b4fbb;
-$color-secondary: #e14329;
-$color-secondary-alt: #fba225;
-$color-subfooter-bg: rgb(85, 68, 136);
-
-$color-primary-medium: #503991;
-
-$divider-color: #d3d3d3;
-
-$link-color: #55acee;
-$link-code-color: rgb(55, 119, 176);
-
-$border-color: #dfdfdf;
-
-$header-text-light-color: #a69ebd;
-
-$team-content-color: #999;
-$member-name-color: #333;
-$member-shadow-color: #ccc;
-$member-social-color: #ccc;
-
-$blog-color-text: #222;
-$blog-color-note: #666;
-$blog-color-heading: #fff;
-$blog-color-purple: rgb(107, 79, 187);
-$blog-color-mk-border: #ccc;
-$blog-color-date: #888;
-$blog-color-overlay-border: #eee;
-$blog-color-border-shadow: rgba(0, 0, 0, .1);
-$blog-color-image-from: rgba(0, 0, 0, 0);
-$blog-color-image-to: rgba(0, 0, 0, .8);
-$blog-color-ipanel-heading: rgba(221, 221, 221, .5);
-$blog-color-legacy-image-from: rgba(85, 68, 136, .8);
-$blog-color-legacy-image-to: rgba(72, 135, 197, .92);
-
-// legacy blog variables that were used by other pages
-
-$blog-date-color: #999;
-$blog-text-color: #444;
-$blog-notes-color: #606060;
-$blog-image-color-to: #4887c5;
-$blog-divider-color: #128bee;
-$blog-table-background: #faf9f9;
-$blog-table-background-hover: #f4f8fe;
-$blog-table-border: #efeff1;
-
-$release-manager-list-bg: #403366;
-$release-manager-table-border: #584985;
-$release-manager-table-header-color: #9583c9;
-$release-manager-current-table-data-color: #ff9;
-
-$mvp-list-bg: #403366;
-$mvp-table-border: #584985;
-$mvp-table-header-color: #9583c9;
-
-$landing-community-bg: #34373c;
-$landing-organization-color: #d7d7d7;
-
-$downloads-btn-color: #7769a0;
-$downloads-btn-hover-color: #403366;
-$downloads-code-color: #403366;
-$downloads-step-link-color: #ffb800;
-$downloads-step-color: #e3dcf7;
-
-$contact-color: #bbb4cf;
-$contact-btn-bg: #887ab6;
-
-$consultancy-bg-color: #272120;
-
-$gs-btn-bg: #129bee;
-$gs-btn-hover-bg: #6144b8;
-
-$applications-title-color: #373737;
-$applications-app-shadow-color: #e0e0e0;
-
-$link-box-color: #333;
-$link-box-border-color: #7863b6;
-$link-box-hover-bg: #f4f0ff;
-
-$pricing-primary: #129bee;
-$subscription-header-bg: #444;
-$subs-header-color: #242424;
-$subs-header-sub-color: #979797;
-$subs-header-hr-color: #d4d4d4;
-$pricing-header-color-to: #4887c5;
-$pricing-gray-bg: #fafafa;
-
-$blueish-gray: #a1a1a2;
-
-$dropdown-text-color: #626262;
-$dropdown-caret-color: #c4c4c4;
-$dropdown-border-color: #eaeaea;
-$dropdown-focus-color: #c4c4c4;
-$dropdown-hover-color: #f7faff;
-
-$dropdown-filter-border-color: rgba(0, 0, 0, .1);
-$dropdown-fa-color: #c7c7c7;
-$dropdown-fa-focus-color: #555;
-
-$formula-variable-bg: #f9f9f9;
-$formula-text-color: #9d9d9d;
-$formula-value-color: #444;
-
-// Bootstrap overrides
-$breadcrumb-separator: ">";
-$breadcrumb-bg: darken($color-white, 2%);
-
-$container-large-desktop: 1200px;
-
-$body-bg: #f9f9f9;
-
-$font-family-sans-serif: "Source Sans Pro", sans-serif;
-$font-family-serif: "Roboto Slab", serif;
-
-$border-radius-large: 3px;
-
-$grid-float-breakpoint: 992px;
-$screen-sm-min: 768px;
-
-$navbar-default-bg: #fff;
-$navbar-default-toggle-icon-bar-bg: $color-primary;
-$navbar-default-link-color: #8c929d;
-$navbar-default-link-hover-color: $color-primary;
-$navbar-default-link-active-color: $color-primary;
-$navbar-default-link-active-bg: transparent;
-$navbar-default-border: #d7d7d7;
-
-$dropdown-bg: #019875;
-$dropdown-link-color: #fff;
-$dropdown-link-hover-color: #18be97;
-
-$search-input-font-color: #333;
-$search-border-color: #bcbcbc;
-
-$reseller-divider-color: $navbar-default-border;
-$reseller-hero-bg-color: #35393d;
-$reseller-hero-content-color: #969696;
-$reseller-category-active-background-color: rgba(255, 255, 255, .4);
-
-$applications-search-box-shadow-color: rgba($color-dark, .5);
-
-$features-gradient-end: rgba(148, 149, 150, 1);
-$features-gradient-begin: rgba(0, 0, 0, .91);
-$features-semi-transparent-white: rgba(255, 255, 255, .15);
-$features-semi-transparent-gray: rgba(180, 180, 180, .15);
-$features-semi-transparent-gray-link: rgba(180, 180, 180, .50);
-$features-semi-transparent-black: rgba(12, 12, 12, .47);
-$features-semi-transparent-purple: rgba(107, 79, 187, .50);
-$features-barely-transparent-white: rgba(255, 255, 255, .5);
-$features-gray-light-barely-transparent: rgba(170, 170, 170, .5);
-$features-gallery-background-gradient-begin: #6b4fbb;
-$features-gallery-background-gradient-middle: #5942a0;
-$features-gallery-background-gradient-end: #42327a;
-$features-gallery-alt-description-black: rgba(0, 0, 0, .7);
-
-$ee-standalone-primary-background-gradient: linear-gradient(to right, $color-primary-alt 0%, $features-gallery-background-gradient-middle 40%, $features-gallery-background-gradient-end 100%);
-$ee-standalone-hero-background-top: rgba(52, 55, 60, .85);
-$ee-standalone-hero-background-gradient: linear-gradient(to bottom, $ee-standalone-hero-background-top, $landing-community-bg 85%);
-
-$facebook-bg: #3b5998;
-$twitter-bg: #55acee;
-$google-bg: #dd4b39;
-$linkedin-bg: #007bb5;
 .footer {
   position: relative;
   padding-top: 50px;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 5b23ed43..53a062a0 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -2,54 +2,7 @@
 version: 16
 ---
 
-// Breakpoints
-$mobile-width: 800px;
-
-// Border radius
-$border-radius: 3px;
-
-// Fonts
-$mono-font-family: "Menlo", "Liberation Mono", "Consolas", "DejaVu Sans Mono", "Ubuntu Mono", "Courier New", "Andale Mono", "Lucida Console", monospace;
-$sans-font-family: "Source Sans Pro", sans-serif;
-
-// Link colors
-$link-color: #3084bb;
-$link-color-hover: #20597e;
-$link-code-color: rgb(55, 119, 176);
-
-// Inline code colors
-$code-color: #c7254e;
-$code-background-color: #f9f2f4;
-
-// Home page colors
-$landing-background: #f9f9f9;
-$landing-header-background: #34373c;
-$topic-border: rgb(215, 215, 215);
-$topic-ce-header-color: rgb(1, 120, 85);
-$topic-ee-header-color: rgb(9, 96, 153);
-$topic-omnibus-header-color: rgb(107, 79, 187);
-$topic-runner-header-color: rgb(203, 88, 15);
-
-// Other colors
-$toc-bg-color: rgba(244, 247, 248, .7);
-$toc-border: rgb(229, 229, 229);
-$border-color: #e5e5e5;
-$border-color-light: #f0f0f0;
-$table-border-color: $border-color;
-$thead-border-color: rgba(170, 170, 170, .5);
-$hr-border-color: $border-color;
-$blockquote-border-color: rgb(0, 188, 242);
-$blockquote-background-color: rgb(239, 246, 251);
-$pre-background-color: rgba(238, 238, 238, .35);
-$body-color: rgba(0, 0, 0, .85);
-$body-background-color: rgb(249, 249, 249);
-$main-background-color: rgb(255, 255, 255);
-$search-border: rgba(0, 0, 0, .25);
-$h-border-bottom: rgba(125, 134, 140, .2);
-$h1-border-bottom: rgb(241, 139, 33);
-$main-box-shadow: rgba(0, 0, 0, .1);
-$white: #fff;
-$black: #333;
+@import "variables";
 
 *, *::before, *::after {
   box-sizing: border-box;
@@ -424,148 +377,6 @@ h6 {
   }
 }
 
-// ToC styles
-.breadcrumbs + ul, .doc-nav > ul, .quick-nav ul {
-  padding: 20px;
-  background: $body-background-color;
-
-  li {
-    padding: 4px 0;
-    list-style: none;
-
-    &::before {
-      content: "›\00a0";
-    }
-
-    ul {
-      padding-top: 5px;
-    }
-  }
-}
-
-.doc-nav, .quick-nav {
-  h4 {
-    padding-bottom: 5px;
-    border-bottom: solid 1px $h1-border-bottom;
-  }
-}
-
-.clear {
-  clear: both;
-}
-
-// not wide enough to show quick nav and toc
-@media(max-width:1099px) {
-  .doc-nav {
-    margin: 0 auto;
-    padding: 40px 40px 0;
-    background: $white;
-    width: inherit;
-    max-width: 900px;
-  }
-
-  .doc-nav > ul {
-    border-bottom: 2px solid $thead-border-color;
-    border-top: 2px solid $thead-border-color;
-    margin: 0;
-  }
-
-  .main.class {
-    float: none;
-    width: inherit;
-    margin: 0 auto;
-    max-width: 900px;
-  }
-
-  .quick-nav {
-    display: none;
-  }
-}
-
-
-// wide enough to show toc but not quick nav
-@media(min-width:1100px) {
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-
-  .main.class {
-    padding-top: 53px;
-  }
-
-  .doc-nav {
-    position: fixed;
-    top: 0;
-    right: 0;
-    padding-top: 55px;
-    overflow-y: scroll;
-    height: 100%;
-  }
-
-  .doc-nav ul ul {
-    padding-left: 25px;
-  }
-
-  .doc-nav > ul .quick-nav ul {
-    margin: 0;
-  }
-
-  .doc-nav, .quick-nav {
-    width: 25%;
-  }
-}
-@media(min-width:1100px) and (max-width:1600px) {
-  .quick-nav {
-    display: none;
-  }
-
-  .doc-nav {
-    width: 30%;
-    max-width: 30%;
-  }
-
-  .main.class.has-toc {
-    width: 70%;
-    max-width: 70%;
-    float: left;
-  }
-}
-
-
-// wide enough to show quick nav and toc
-@media(min-width:1601px) {
-  .main.class.has-toc {
-    width: 50%;
-    margin-left: 25%;
-    max-width: 50%;
-  }
-
-  .quick-nav {
-    position: fixed;
-    top: 0;
-    padding-top: 55px;
-    left: 0;
-    overflow-y: scroll;
-    height: 100%;
-  }
-
-  .quick-nav ul ul {
-    padding-bottom: 0;
-  }
-
-  .quick-nav h4 {
-    margin-top: 25px;
-  }
-
-  .quick-nav h4:first-child {
-    margin-top: 10px;
-  }
-
-}
-
 // Permalinks on header elements.
 .anchor {
   display: inline-block;
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
new file mode 100644
index 00000000..69b5b0d4
--- /dev/null
+++ b/content/assets/stylesheets/toc.scss
@@ -0,0 +1,146 @@
+---
+version: 1
+---
+
+@import "variables";
+
+// ToC styles
+.breadcrumbs + ul, .doc-nav > ul, .quick-nav ul {
+  padding: 20px;
+  background: $body-background-color;
+
+  li {
+    padding: 4px 0;
+    list-style: none;
+
+    &::before {
+      content: "›\00a0";
+    }
+
+    ul {
+      padding-top: 5px;
+    }
+  }
+}
+
+.doc-nav, .quick-nav {
+  h4 {
+    padding-bottom: 5px;
+    border-bottom: solid 1px $h1-border-bottom;
+  }
+}
+
+.clear {
+  clear: both;
+}
+
+// not wide enough to show quick nav and toc
+@media(max-width:1099px) {
+  .doc-nav {
+    margin: 0 auto;
+    padding: 40px 40px 0;
+    background: $white;
+    width: inherit;
+    max-width: 900px;
+  }
+
+  .doc-nav > ul {
+    border-bottom: 2px solid $thead-border-color;
+    border-top: 2px solid $thead-border-color;
+    margin: 0;
+  }
+
+  .main.class {
+    float: none;
+    width: inherit;
+    margin: 0 auto;
+    max-width: 900px;
+  }
+
+  .quick-nav {
+    display: none;
+  }
+}
+
+
+// wide enough to show toc but not quick nav
+@media(min-width:1100px) {
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  .main.class {
+    padding-top: 53px;
+  }
+
+  .doc-nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding-top: 55px;
+    overflow-y: scroll;
+    height: 100%;
+  }
+
+  .doc-nav ul ul {
+    padding-left: 25px;
+  }
+
+  .doc-nav > ul .quick-nav ul {
+    margin: 0;
+  }
+
+  .doc-nav, .quick-nav {
+    width: 25%;
+  }
+}
+@media(min-width:1100px) and (max-width:1600px) {
+  .quick-nav {
+    display: none;
+  }
+
+  .doc-nav {
+    width: 30%;
+    max-width: 30%;
+  }
+
+  .main.class.has-toc {
+    width: 70%;
+    max-width: 70%;
+    float: left;
+  }
+}
+
+
+// wide enough to show quick nav and toc
+@media(min-width:1601px) {
+  .main.class.has-toc {
+    width: 50%;
+    margin-left: 25%;
+    max-width: 50%;
+  }
+
+  .quick-nav {
+    position: fixed;
+    top: 0;
+    padding-top: 55px;
+    left: 0;
+    overflow-y: scroll;
+    height: 100%;
+  }
+
+  .quick-nav ul ul {
+    padding-bottom: 0;
+  }
+
+  .quick-nav h4 {
+    margin-top: 25px;
+  }
+
+  .quick-nav h4:first-child {
+    margin-top: 10px;
+  }
+}