diff --git a/_mixins.scss b/_mixins.scss
deleted file mode 100644
index 72e0761..0000000
--- a/_mixins.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@mixin box-sizing($box-model) {
-    -moz-box-sizing: $box-model;
-    -webkit-box-sizing: $box-model;
-    box-sizing: $box-model;
-}
-
-@mixin border-radius($radius) {
-    -webkit-border-radius: $radius;
-    -moz-border-radius: $radius;
-    -ms-border-radius: $radius;
-    border-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-top-radius($radius) {
-    -webkit-border-top-right-radius: $radius;
-    border-top-right-radius: $radius;
-    -webkit-border-top-left-radius: $radius;
-    border-top-left-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-right-radius($radius) {
-    -webkit-border-bottom-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-    -webkit-border-top-right-radius: $radius;
-    border-top-right-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-bottom-radius($radius) {
-    -webkit-border-bottom-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-    -webkit-border-bottom-left-radius: $radius;
-    border-bottom-left-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-left-radius($radius) {
-    -webkit-border-bottom-left-radius: $radius;
-    border-bottom-left-radius: $radius;
-    -webkit-border-top-left-radius: $radius;
-    border-top-left-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-bottomleft-radius($radius) {
-    -webkit-border-bottom-left-radius: $radius;
-    border-bottom-left-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-bottomright-radius($radius) {
-    -webkit-border-bottom-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin border-topright-radius($radius) {
-    -webkit-border-top-right-radius: $radius;
-    border-top-right-radius: $radius;
-    background-clip: padding-box;
-}
-
-@mixin gradient-top-bottom($start, $pos, $end, $pos2, $bg) {
-    background: $bg;
-    background: -moz-linear-gradient(top, $start $pos, $end $pos2);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop($pos, $start), color-stop($pos2, $end));
-    background: -webkit-linear-gradient(top, $start $pos, $end $pos2);
-    background: -o-linear-gradient(top, $start $pos, $end $pos2);
-    background: -ms-linear-gradient(top, $start $pos, $end $pos2);
-    background: linear-gradient(to bottom, $start $pos, $end $pos2);
-}
-
-@mixin box-shadow-top($color) {
-    -moz-box-shadow: inset 0px 1px 0px 0px $color;
-    -webkit-box-shadow: inset 0px 1px 0px 0px $color;
-    box-shadow: inset 0px 1px 0px 0px $color;
-}
-
-@mixin box-shadow-left($color) {
-    -moz-box-shadow: inset 1px 0px 0px 0px $color;
-    -webkit-box-shadow: inset 1px 0px 0px 0px $color;
-    box-shadow: inset 1px 0px 0px 0px $color;
-}
-
-@mixin box-shadow-bottom($color) {
-    -moz-box-shadow: 0px 1px 0px 0px $color;
-    -webkit-box-shadow: 0px 1px 0px 0px $color;
-    box-shadow: 0px 1px 0px 0px $color;
-}
-
-@mixin box-shadow-out($color) {
-    -moz-box-shadow: inset 1px 1px 0px 0px $color;
-    -webkit-box-shadow: inset 1px 1px 0px 0px $color;
-    box-shadow: inset 1px 1px 0px 0px $color;
-}
-
-@mixin transform-rotate($deg) {
-    -webkit-transform: rotate($deg);
-    -moz-transform: rotate($deg);
-    -o-transform: rotate($deg);
-    -ms-transform: rotate($deg);
-    transform: rotate($deg);
-}
diff --git a/_vars.scss b/_vars.scss
deleted file mode 100644
index 4c60164..0000000
--- a/_vars.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-/* Global */
-$font-stack: arial, serif;
-$font-color: #676a6c;
-$reverse-font-color: #fff;
-$font-size: 1rem;
-$font-size-smaller: 0.9rem;
-
-$background-color: #fff;
-
-$link-color: #fff;
-$link-decoration: none;
-$link-hover-color: #fff;
-$link-hover-decoration: none;
-
-$default-border: 1px;
-$default-border-color: #d6d6d6;
-$default-border-radius: 3px;
-$default-padding: 5px;
-
-$default-highlighter: #FBA026;
-
-/* Content Container */
-$content-container-padding: $default-padding;
-$content-container-color: $reverse-font-color;
-
-/* Content box */
-$content-box-background-color: $background-color;
-$content-box-border: $default-border;
-$content-box-border-color: $default-border-color;
-$content-box-margin: $default-padding;
-$content-box-padding: $default-padding;
-$content-box-font-size: $font-size;
-$content-box-font-color: $font-color;
-
-$content-border-color: #b7b7b7;
-$content-borderlight-color: #dddddd;
-$content-background-color: #f5f5ff;
-
-/* Navigation */
-$nav-top-background-color: #000;
-$nav-top-font-color: $reverse-font-color;
-$nav-top-padding: 3px;
-
-$nav-side-background-color: $nav-top-background-color;
-$nav-side-font-color: $nav-top-font-color;
-$nav-side-padding: $nav-top-padding;
-
-$nav-main-background-color: $nav-side-background-color;
-$nav-main-font-color: $nav-side-font-color;
-$nav-main-padding: $nav-top-padding;
-
-$nav-contentside-background-color: $nav-side-background-color;
-$nav-contentside-font-color: $nav-side-font-color;
-$nav-contentside-padding: $nav-top-padding;
-
-/* Colors */
-$red: #f00;
-$green: #0f0;
-$blue: #00f;
-$yellow: #ff0;
-$white: #fff;
-$black: #000;
-$pink: #f0f;
-$purple: #7D26CD;
-
-/* Accordion */
-$accordion-margin-top-bottom: 10px;
-$accordion-margin-left-right: 30px;
-
-$accordion-border-size: $default-border;
-$accordion-border-color: $default-border-color;
-
-// Label
-$accordion-padding-top-bottom: $default-padding;
-$accordion-padding-left-right: 20px;
-$accordion-font-size: $font-size;
-
-$accordion-inactive-color-start: #e0e3eb;
-$accordion-inactive-color-end: #f5f5ff;
-$accordion-inactive-background: #f5f5ff;
-$accordion-inactive-foreground: #777;
-
-$accordion-active-color-start: #fff;
-$accordion-active-color-end: #fff;
-$accordion-active-background: $content-box-background-color;
-$accordion-active-foreground: $font-color;
-
-$accordion-hover-color-start: #fff;
-$accordion-hover-color-end: #fff;
-$accordion-hover-background: $content-box-background-color;
-
-$accordion-border-radius: $default-border-radius;
-
-// Content
-$accordion-padding: 10px;
-
-/* Log */
-$log-padding: $default-padding;
-$log-margin: 5px;
-$log-border: 2px;
-
-/* Blockquote */
-$blockquote-padding: 10px;
-$blockquote-background: $content-box-background-color;
-
-$blockquote-border: $default-border;
-$blockquote-border-color: $default-border-color;
-$blockquote-border-radius: $default-border-radius;
-
-/* Breadcrumbs */
-$breadcrumb-font-size: 12px;
-$breadcrumb-padding: 10px 10px 10px 20px;
-
-$breadcrumb-border: $default-border;
-$breadcrumb-border-radius: 3px;
-$breadcrumb-border-color: $default-border-color;
-
-$breadcrumb-inactive-background: $content-background-color;
-$breadcrumb-active-background: $content-box-background-color;
-
-/* Input */
-$input-border: $default-border;
-$input-border-color: $default-border-color;
-$input-invalid-border-color: #b85450;
-$input-background: $background-color;
-$input-font-size: $font-size;
-$input-color: $font-color;
-$input-placeholder-color: #cfcfcf;
-
-/* Button */
-$button-border: $default-border;
-$button-border-color: $default-border-color;
-$button-background: #f1f1f1;
-$button-active-background: #d6d6d6;
-$button-font-size: $font-size-smaller;
-$button-height: 2rem;
-$button-min-width: 70px;
-$button-padding: $default-padding;
-
-// Breadcrumb buttons
-$button-crumb-font-size: 12px;
-$button-crumb-background: #f5f5ff;
-$button-crumb-active-background: $content-box-background-color;
-$button-crumb-padding: 10px;
-
-/* Canvas */
-$canvas-background: $content-box-background-color;
-$canvas-border: $default-border;
-$canvas-border-color: $default-border-color;
-
-/* Article */
-$article-background: $content-box-background-color;
-$article-padding: $default-padding;
-$article-link-color: #8ea4ff;
-
-$article-table-border: $default-border;
-$article-table-border-color: #999;
-$article-even-background: #eee;
-
-/* Form */
-$form-label-size: $font-size-smaller;
-
-/* Icon */
-$icon-font-color: $reverse-font-color;
-$icon-font-size: $font-size-smaller;
-
-/* Img */
-$img-padding: $default-padding;
-$img-border: $default-border;
-$img-border-color: $default-border-color;
-$img-background: $content-box-background-color;
-$img-border-radius: $default-border-radius;
-
-/* list */
-$list-padding: $default-padding;
-$list-background: $background-color;
-
-$list-border-radius: $default-border-radius;
-$list-border: $default-border;
-$list-border-color: $default-border-color;
-
-/* pagination */
-$pagination-border-radius: $default-border-radius;
-$pagination-active-color: $reverse-font-color;
-$pagination-active-background: #353535;
-
-/* pre */
-$pre-background: $background-color;
-$pre-border-radius: $default-border-radius;
-$pre-border: $default-border;
-$pre-border-color: $default-border-color;
-$pre-padding: $default-padding;
-
-/* tag */
-$tag-border:  $default-border;
-$tag-border-color: $default-border-color;
-$tag-color: $reverse-font-color;
-$tag-font-size: 0.6rem;
\ No newline at end of file
diff --git a/accordion.scss b/accordion.scss
index 549ff33..2a468de 100644
--- a/accordion.scss
+++ b/accordion.scss
@@ -1,15 +1,15 @@
-@import "_mixins", "_vars";
+
 
 .ac-container{
-    margin: $accordion-margin-top-bottom auto $accordion-margin-left-right auto;
+    margin: 1rem auto 1rem auto;
     text-align: left;
 
     > input {
         display: none;
 
         &:checked + label {
-            @include gradient-top-bottom($accordion-active-color-start, 0, $accordion-active-color-end, 100, $accordion-active-background);
-            color: $accordion-active-foreground;
+            background: var(--button-colored-background);
+            color: var(--text-on-background-color-2);
 
             + section {
                 display: inherit;
@@ -23,30 +23,29 @@
 
     label {
         display: block;
-        padding: $accordion-padding-top-bottom $accordion-padding-left-right;
+        padding: 1rem 1rem;
         position: relative;
         z-index: 20;
         margin-top: -1px;
         cursor: pointer;
-        color: $accordion-inactive-foreground;
-        font-size: $accordion-font-size;
-        border: $accordion-border-size solid $accordion-border-color;
-        @include border-radius($accordion-border-radius);
-        @include gradient-top-bottom($accordion-inactive-color-start, 0, $accordion-inactive-color-end, 100, $accordion-inactive-background);
+        color: var(--text-on-background-color-2);
+        font-size: 1rem;
+        border: 1rem solid var(--box-border);
+        background: var(--box-border);
 
         &:hover {
-            @include gradient-top-bottom($accordion-hover-color-start, 0, $accordion-hover-color-end, 100, $accordion-hover-background);
+            background: var(--button-colored-background-hover);
         }
     }
 
     > section {
-        background: $content-box-background-color;
+        background: #fff;
         overflow: hidden;
         height: auto;
         position: relative;
         z-index: 10;
-        border-left: $accordion-border-size solid $accordion-border-color;
-        border-right: $accordion-border-size solid $accordion-border-color;
-        padding: $accordion-padding;
+        border-left: 1rem solid var(--box-border);
+        border-right: 1rem solid var(--box-border);
+        padding: 1rem;
     }
 }
diff --git a/alert.scss b/alert.scss
index 64ca87c..41fcf8c 100644
--- a/alert.scss
+++ b/alert.scss
@@ -1,8 +1,8 @@
-@import "_mixins", "_vars";
+
 
 .log-msg {
-    padding: $log-padding;
-    margin: $log-margin;
+    padding: 1rem;
+    margin: 1rem;
 }
 
 @each $tuple in
@@ -12,7 +12,7 @@
     'info' #b6d2ff #85b0ee #4865a5 {
     .log-msg-status-#{nth($tuple, 1)} {
         background: #{nth($tuple, 2)};
-        border: $log-border solid #{nth($tuple, 3)};
+        border: 1px solid #{nth($tuple, 3)};
         color: #{nth($tuple, 4)};
     }
 }
\ No newline at end of file
diff --git a/article.scss b/article.scss
index 2a37994..b6a962a 100644
--- a/article.scss
+++ b/article.scss
@@ -1,7 +1,7 @@
-@import "_mixins", "_vars";
+
 
 article {
-    background: $article-background;
+    background: #fff;
     padding: 10px;
     margin: 0;
     font-size: 0.9rem;
@@ -54,8 +54,8 @@ article {
     }
 
     a {
-        color: $article-link-color;
-        border-bottom: 1px dotted $article-link-color;
+        color: var(--link-color);
+        border-bottom: 1px dotted var(--link-color);
 
         &:hover {
             border-bottom: none;
@@ -93,17 +93,17 @@ article {
 
     table {
         border-collapse: collapse;
-        border: $article-table-border solid $article-table-border-color;
+        border: 1px solid var(--box-border);
         margin: 0 auto;
         margin-bottom: 1rem;
 
         th, td {
             padding: 5px;
-            border: $article-table-border solid $article-table-border-color;
+            border: 1px solid var(--box-border);
         }
 
         tr:nth-child(2n) {
-            background: $article-even-background;
+            background: var(--table-row-background);
         }
     }
 }
\ No newline at end of file
diff --git a/blockquote.scss b/blockquote.scss
index b28105a..eca5f9e 100644
--- a/blockquote.scss
+++ b/blockquote.scss
@@ -1,9 +1,8 @@
-@import "_mixins", "_vars";
+
 
 blockquote {
-    border: $blockquote-border solid $blockquote-border-color;
-    background: $blockquote-background;
-    padding: $blockquote-padding;
-    @include box-sizing(border-box);
-    @include border-radius($blockquote-border-radius);
+    border: 1px solid var(--box-border);
+    background: #ccc;
+    padding: 1rem;
+    box-sizing: border-box;
 }
diff --git a/breadcrumb.scss b/breadcrumb.scss
index 573030c..3c4f8fe 100644
--- a/breadcrumb.scss
+++ b/breadcrumb.scss
@@ -1,26 +1,19 @@
-@import "_mixins", "_vars";
+
 
 .crumbs-1 {
     list-style: none;
     overflow: hidden;
-    font-size: $breadcrumb-font-size;
+    font-size: 1rem;
 
     li {
-        background: $breadcrumb-inactive-background;
-        border: $breadcrumb-border solid $breadcrumb-border-color;
-        padding: $breadcrumb-padding;
+        background: #fff;
+        border: 1px solid var(--box-border);
+        padding: 10px 10px 10px 20px;
         position: relative;
         display: block;
         float: left;
-        text-shadow: -1px -1px 1px #ffffff;
         cursor: pointer;
 
-        @include box-shadow-out(#ffffff);
-
-        &:first-child {
-            @include border-left-radius($breadcrumb-border-radius);
-        }
-
         // todo: maybe replace .last with :last-child
         &:not(.last):after, &:before {
             content:" ";
@@ -29,7 +22,7 @@
             height: 0;
             border-top: 18px solid transparent;
             border-bottom: 17px solid transparent;
-            border-left: 14px solid $content-background-color;
+            border-left: 14px solid var(--box-border);
             position: absolute;
             top: 50%;
             margin-top: -18px;
@@ -41,8 +34,8 @@
         }
 
         &:before {
-            border-left-color: $breadcrumb-border-color;
-            margin-left: $breadcrumb-border;
+            border-left-color: var(--box-border);
+            margin-left: 1px;
             z-index: 1;
         }
 
@@ -53,7 +46,6 @@
 
     .last {
         padding-right: 20px;
-        @include border-right-radius($breadcrumb-border-radius);
 
         &:before {
             border: none;
@@ -65,6 +57,6 @@
     }
 
     .active, li:hover {
-        background: $breadcrumb-active-background;
+        background: var(--button-colored-background-hover);
     }
 }
diff --git a/button.scss b/button.scss
index 14a4022..a428a85 100644
--- a/button.scss
+++ b/button.scss
@@ -1,98 +1,25 @@
-@import "_mixins", "_vars";
+
 
 .btn {
     cursor: pointer;
 }
 
 button, input[type="submit"], input[type="button"], a.button {
-    border: $button-border solid $button-border-color;
     cursor: pointer;
-    text-shadow: 1px 1px 1px #ffffff;
-    min-width: $button-min-width;
-    height: $button-height;
-    font-size: $button-font-size;
-    background: $button-background;
-    @include box-shadow-out(#ffffff);
+    min-width: 70px;
+    height: 2rem;
 
-    &:hover, :active {
-        text-shadow: -1px -1px 1px #ffffff;
-        background: $button-active-background;
-    }
-}
-
-@mixin color-button($color1, $color2, $fallback, $shadow) {
-    color: #ffffff;
-    text-shadow: 1px 1px 1px #696969;
-    @include gradient-top-bottom($color1, 0, $color2, 100, $fallback);
-    @include box-shadow-out($shadow);
-
-    &:hover, :active {
-        text-shadow: -1px -1px 1px #696969;
-        @include gradient-top-bottom($color2, 0, $color1, 100, $fallback);
-    }
-}
-
-button.red {
-    @include color-button(#f17068, #d16059, #d9645b, #ff8d7c);
-}
-
-button.green {
-    @include color-button(#9df1ad, #77d17c, #90d99d, #c8ffb6);
-}
-
-button.blue {
-    @include color-button(#beddf1, #7ba9d1, #97afd9, #cbf3ff);
-}
-
-ul.btns {
-    list-style: none;
-    overflow: hidden;
-    font-size: 12px;
-
-    li {
-        background: $button-crumb-background;
-        border-left: $button-border solid $button-border-color;
-        border-top: $button-border solid $button-border-color;
-        border-bottom: $button-border solid $button-border-color;
-        float: left;
-        text-shadow: -1px -1px 1px #ffffff;
-        cursor: pointer;
-
-        @include box-shadow-out(#ffffff);
-
-        &:last-child {
-            border-right: $button-border solid $button-border-color;
-        }
-
-        &:before {
-            border-left-color: $button-border-color;
-            margin-left: 1px;
-        }
-    }
-
-    a {
-        display: block;
-        padding: $button-crumb-padding;
-    }
-
-    .active {
-        cursor: default;
-    }
-
-    .active, li:hover {
-        background: $button-crumb-active-background;
-    }
-}
-
-button.simple {
-    background: $button-background;
-    border: $button-border solid $button-border-color;
-    text-shadow: -1px -1px 1px #ffffff;
-    padding: 5px;
-    min-width: 40px;
+    background: var(--button-colored-background);
+    color: var(--text-on-background-color-2);
+    margin: 0;
+    padding: 0;
+    flex: 0;
+    height: 32px;
+    border: none;
+    box-shadow: none;
 
     &:hover {
-        background: $button-background;
+        background: var(--button-colored-background-hover);
     }
 }
 
diff --git a/canvas.scss b/canvas.scss
index f7dc363..4dcbbd2 100644
--- a/canvas.scss
+++ b/canvas.scss
@@ -1,8 +1,8 @@
-@import "_mixins", "_vars";
+
 
 canvas {
-    background: $canvas-background;
-    border: $canvas-border solid $canvas-border-color;
+    background: #fff;
+    border: 1px solid var(--box-border);
     user-select: none;
 }
 
diff --git a/clean.scss b/clean.scss
index e2e791b..5a88709 100644
--- a/clean.scss
+++ b/clean.scss
@@ -1,5 +1,3 @@
-@import "_mixins", "color";
-
 html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
     margin: 0;
     padding: 0;
@@ -23,7 +21,7 @@ ul {
 }
 
 input, select, textarea, .textarea {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     appearance: none;
     box-shadow: none;
 
diff --git a/color.css b/color.css
deleted file mode 100644
index 55f0be0..0000000
--- a/color.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.ok {
-  color: #5cff56; }
-
-.warning {
-  color: #ff4b41; }
-
-.favorite {
-  color: #d16059; }
-
-.green {
-  background: #42bd41; }
-
-.red {
-  background: #d01715; }
-
-.blue {
-  background: #5778fd; }
-
-.orange {
-  background: #FBA026; }
-
-.lightblue {
-  background: #03a9f5; }
-
-.yellow {
-  background: #ffeb3c; }
-
-.purple {
-  background: #673bb7; }
-
-.pink {
-  background: #ffa6e3; }
-
-.grey {
-  background: #dcdcdc; }
-
-.darkred {
-  background: #B8312F; }
-
-.darkgreen {
-  background: #009788; }
-
-.darkblue {
-  background: #3f51b5; }
-
-/*# sourceMappingURL=color.css.map */
diff --git a/color.scss b/color.scss
deleted file mode 100644
index 319eb9f..0000000
--- a/color.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@each $tuple in
-    'ok' #5cff56, 'warning' #ff4b41, 'favorite' #d16059 {
-    .#{nth($tuple, 1)} {
-        color: #{nth($tuple, 2)};
-    }
-}
-
-@each $tuple in
-    'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
-    'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
-    'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
-    .#{nth($tuple, 1)} {
-        background: #{nth($tuple, 2)};
-    }
-}
diff --git a/default.scss b/default.scss
index 8c2f8be..04cfbf4 100644
--- a/default.scss
+++ b/default.scss
@@ -1,24 +1,16 @@
-@import "_mixins", "_vars";
-
-body {
-    background: $background-color;
-    font-family: Open Sans, sans-serif;
-    font-size: $font-size;
-}
-
 .clear {
     clear: both;
 }
 
 pre {
-    background: $pre-background;
-    @include border-radius($pre-border-radius);
-    border: $pre-border solid $pre-border-color;
-    padding: $pre-padding;
+    background: #cfcfcf;
+    border-radius: 3px;
+    border: 1px solid #ccc;
+    padding: 1rem;
     overflow-x: scroll;
     counter-reset: line;
     width: 100%;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
 
     span {
         display: block;
@@ -43,3 +35,92 @@ iframe {
     width: 100%;
     height: 100%;
 }
+
+.clean {
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: 0;
+    vertical-align: top;
+}
+
+.clean:focus {
+    outline: 0;
+}
+
+.rp {
+    position: relative;
+}
+
+.ap {
+    position: absolute;
+}
+
+.lf {
+    float: left;
+}
+
+.rf {
+    float: right;
+}
+
+.op {
+    margin: 0 auto;
+}
+
+.rT {
+    text-align: right;
+}
+
+.lT {
+    text-align: left;
+}
+
+.cT {
+    text-align: center;
+}
+
+.f-w {
+    width: 100%;
+    max-width: none;
+}
+
+.f-h {
+    height: 100%;
+    max-height: none;
+}
+
+.vT {
+    vertical-align: top;
+}
+
+.vB {
+    vertical-align: bottom;
+}
+
+.vM {
+    vertical-align: middle;
+}
+
+.n-wrap {
+    white-space: nowrap;
+}
+
+.p,
+.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
+    cursor: pointer;
+}
+
+.vC {
+    display: table-cell;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.vh {
+    display: none !important;
+}
+
+.x-overflow {
+    overflow-x: auto;
+}
\ No newline at end of file
diff --git a/form.scss b/form.scss
index 0c2cd16..aecea00 100644
--- a/form.scss
+++ b/form.scss
@@ -1,5 +1,3 @@
-@import "_mixins", "_vars";
-
 form {
     li {
         margin: 5px 0 5px 0;
@@ -15,9 +13,8 @@ form {
     }
 
     label {
-        font-size: $form-label-size;
+        font-size: 1rem;
         color: #878787;
-        text-shadow: -1px -1px 1px #ffffff;
     }
 
     i+i {
@@ -29,7 +26,7 @@ form {
     }
 
     .list {
-        font-size: $form-label-size;
+        font-size: 1rem;
 
         td {
             white-space: nowrap;
diff --git a/grid.scss b/grid.scss
index efb6fd9..b74077a 100644
--- a/grid.scss
+++ b/grid.scss
@@ -45,8 +45,7 @@
   -ms-flex: 0 0 auto;
   -webkit-box-flex: 0;
   flex: 0 0 auto;
-  padding-right: 0.3rem;
-  padding-left: 0.3rem;
+  padding-right: 1rem;
 }
 
 .col-xs {
@@ -259,9 +258,8 @@
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
-    padding-right: 0.3rem;
-    padding-left: 0.3rem;
-  }
+    padding-right: 1rem;
+    }
 
   .col-sm {
     -webkit-flex-grow: 1;
@@ -474,9 +472,8 @@
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
-    padding-right: 0.3rem;
-    padding-left: 0.3rem;
-  }
+    padding-right: 1rem;
+    }
 
   .col-md {
     -webkit-flex-grow: 1;
@@ -689,9 +686,8 @@
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
-    padding-right: 0.3rem;
-    padding-left: 0.3rem;
-  }
+    padding-right: 1rem;
+    }
 
   .col-lg {
     -webkit-flex-grow: 1;
diff --git a/icon.scss b/icon.scss
index 91001b4..f3ce6a1 100644
--- a/icon.scss
+++ b/icon.scss
@@ -1,7 +1,7 @@
-@import "_mixins", "_vars";
+
 
 .infoIcon {
-    width: $icon-font-size;
+    width: var(--badge-size);
     text-align: center;
     vertical-align: middle;
     position: relative;
@@ -13,14 +13,15 @@
         position: absolute;
         right: -.55rem;
         top: -.45rem;
-        width: $icon-font-size;
-        height: $icon-font-size;
-        line-height: $icon-font-size;
+        width: .9rem;
+        height: var(--badge-size);
+        line-height: var(--badge-size);
         border-radius: 50%;
         text-align: center;
+        padding: .15rem;
 
-        color: $icon-font-color;
-        background: rgba(209, 96, 89, 1);
+        color: var(--badge-color);
+        background: var(--badge-background);
     }
 }
 
diff --git a/image.scss b/image.scss
index 3e2b802..9e39d01 100644
--- a/image.scss
+++ b/image.scss
@@ -1,29 +1,25 @@
-@import "_mixins", "_vars";
+
 
 img {
     &.frame-1 {
-        padding: $img-padding;
-        background: $img-background;
-        border: $img-border solid $img-border-color;
-        @include box-shadow-out(#ffffff);
-        @include border-radius($img-border-radius);
+        padding: 1rem;
+        background: #fff;
+        border: 1px solid var(--box-border);
         box-sizing: border-box;
         width: 100%;
     }
 
     &.frame-2 {
-        border: $img-border solid $img-border-color;
-        background: $img-background;
+        border: 1px solid var(--box-border);
+        background: #fff;
         box-sizing: border-box;
         width: 100%;
     }
 
     &.frame-3 {
-        padding: $img-padding;
-        background: $img-background;
-        border: $img-border solid $img-border-color;
-        @include box-shadow-out(#ffffff);
-        @include border-radius($img-border-radius);
+        padding: 1rem;
+        background: #fff;
+        border: 1px solid var(--box-border);
         box-sizing: border-box;
         width: 100%;
     }
diff --git a/input.scss b/input.scss
index 5b6c666..542a646 100644
--- a/input.scss
+++ b/input.scss
@@ -1,7 +1,7 @@
-@import "_mixins", "_vars";
+
 
 input, select, textarea, .textarea {
-    border: $input-border solid $input-border-color;
+    border: 1px solid var(--input-border);
 }
 
 progress {
@@ -21,21 +21,20 @@ input[type="email"],
 input[type="date"],
 input[type="number"],
 input[type="datetime-local"] {
-    @include box-sizing(border-box);
-    color: $input-color;
-    background: $input-background;
+    box-sizing: border-box;
+    color: var(--input-color);
+    background: var(--input-background);
     width: 100%;
     height: 2rem;
     min-width: 70px;
     max-width: 100%;
     padding: 7px;
-    font-size: $input-font-size;
-    border: $input-border solid $input-border-color;
+    font-size: 1rem;
+    border: 1px solid var(--input-border);
     transition: background 0.3s, border 0.3s;
-    box-shadow: inset 1px 1px 4px -2px #c5c5c5;
 
     &:focus, .active {
-        border-color: $default-highlighter;
+        border-color: var(--input-background-active);
     }
 
     &:disabled {
@@ -43,6 +42,68 @@ input[type="datetime-local"] {
     }
 }
 
+.inputWrapper {
+    display: flex;
+    flex-direction: row;
+
+    .textWrapper+input[type=submit], .textWrapper+input[type=button], .textWrapper+button {
+        background: var(--button-colored-background);
+        color: var(--text-on-background-color-2);
+        margin: 0;
+        padding: 0;
+        flex: 0;
+        height: auto;
+        border: none;
+        box-shadow: none;
+
+        &:hover {
+            background: var(--button-colored-background-hover);
+        }
+    }
+
+    .textWrapper {
+        flex: 1;
+        position: relative;
+
+        input {
+            padding-left: 2rem;
+        }
+
+        .frontIcon, .endIcon {
+            color: var(--input-icon-color);
+            font-size: 1.1rem;
+            position: absolute;
+            top: 0;
+            padding: .6rem .6rem .6rem .4rem;
+        }
+
+        .frontIcon {
+            left: 0;
+        }
+
+        .endIcon {
+            right: 0;
+        }
+
+        input[type=text]:active, input[type=text]:focus,
+        input[type=password]:active, input[type=password]:focus {
+            border: 1px solid var(--input-border-active);
+        }
+
+        input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon,
+        input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon,
+        input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon,
+        input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon {
+            color: var(--input-icon-color-active);
+        }
+
+        input[type=text]~.endIcon, input[type=text]~.endIcon,
+        input[type=password]~.endIcon, input[type=password]~.endIcon {
+            cursor: pointer;
+        }
+    }
+}
+
 input ~ .dropdown {
     position: absolute;
     display: none;
@@ -63,17 +124,17 @@ option {
 }
 
 input[type="file"] {
-    border: solid $input-font-size $input-background;
+    border: 1px solid var(--input-border-active);
     width: 100%;
     max-width: 100%;
-    color: $input-color;
+    color: var(--input-color);
     padding: 10px;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
 }
 
 input::placeholder {
-        color: $input-placeholder-color;
-        opacity: 0.5;
+    color: var(--input-icon-color);
+    opacity: 0.5;
 }
 
 input::placeholder, textarea {
@@ -82,14 +143,14 @@ input::placeholder, textarea {
 
 input:invalid {
     transition: all 0.5s;
-    border-color: $input-invalid-border-color;
+    border-color: #f00;
 }
 
 textarea, .textarea {
     overflow: auto;
     resize: both;
     min-height: 100px;
-    @include box-sizing(border-box);
+   box-sizing: border-box;
 }
 
 span.checkbox, span.radio {
@@ -126,15 +187,15 @@ input[type="range"] {
     flex-wrap: nowrap;
 
     button {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         display: inline-block;
-        background: $input-background;
+        background: var(--input-border-active);
         height: 2rem;
-        font-size: $input-font-size;
+        font-size: 1rem;
         min-width: 40px;
-        border-left: solid $input-border $input-border-color;
-        border-top: solid $input-border $input-border-color;
-        border-bottom: solid $input-border $input-border-color;
+        border-left: solid 1px var(--input-border);
+        border-top: solid 1px var(--input-border);
+        border-bottom: solid 1px var(--input-border);
         border-right: none;
         padding: 0;
 
@@ -144,7 +205,7 @@ input[type="range"] {
         flex-shrink: 0;
 
         &:hover {
-            background: $input-background;
+            background: var(--input-border-active);
         }
     }
 
@@ -154,8 +215,8 @@ input[type="range"] {
     }
 
     input {
-        @include box-sizing(border-box);
-        font-size: $input-font-size;
+        box-sizing: border-box;
+        font-size: 1rem;
 
         position: relative;
         vertical-align: middle;
@@ -177,16 +238,3 @@ select.plain {
     cursor: pointer;
     box-shadow: none;
 }
-
-.tag-input {
-    input {
-        border: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    .tag {
-        padding: 3px;
-        font-size: 0.8rem;
-    }
-}
\ No newline at end of file
diff --git a/layout.scss b/layout.scss
index c81bc73..3b134b9 100644
--- a/layout.scss
+++ b/layout.scss
@@ -1,9 +1,7 @@
-@import "_mixins", "color";
-
 .ipt-wrap {
     display: table;
     vertical-align: top;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
 
     .ipt-first {
         width: 100%;
diff --git a/list.scss b/list.scss
index 6aa311b..712fa8b 100644
--- a/list.scss
+++ b/list.scss
@@ -1,10 +1,9 @@
-@import "_mixins", "_vars";
+
 
 ul.boxed {
-    background: $list-background;
-    padding: $list-padding;
-    @include border-radius($list-border-radius);
-    border: $list-border solid $list-border-color;
+    background: #fff;
+    padding: 5px;
+    border: 1px solid var(--box-border);
 
     li {
         margin: 5px 0 5px 0;
diff --git a/main.css b/main.css
deleted file mode 100644
index 0b2589d..0000000
--- a/main.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
-main {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  top: 0;
-  bottom: 100%;
-  left: 0;
-  z-index: 1;
-  background: #fff;
-  transition: all 0.2s; }
-
-/*# sourceMappingURL=main.css.map */
diff --git a/main.scss b/main.scss
deleted file mode 100644
index ee2acc7..0000000
--- a/main.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "_mixins", "_vars";
-
-main {
-    height: 100%;
-    width: 100%;
-    position: relative;
-    top: 0;
-    bottom: 100%;
-    left: 0;
-    z-index: 1;
-
-    background: $background-color;
-    transition: all 0.2s;
-}
diff --git a/nav.scss b/nav.scss
index c94ccb8..5820727 100644
--- a/nav.scss
+++ b/nav.scss
@@ -1,17 +1,17 @@
-@import "_mixins", "_vars";
 
-#nav-side {
-    user-select: none;
-    width: 175px;
-    position: fixed;
-    top: 79px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
+
+body > nav {
+    width: 250px;
     overflow-y: auto;
     font-size: 0.8em;
-    background: #3b3b3b;
+    background: linear-gradient(135deg, var(--nav-category-background-highlight), var(--nav-category-background));
+    color: rgba(255, 255, 255, 0.8);
+}
+
+#nav-side {
+    display: flex;
+    flex-flow: column;
+    box-sizing: border-box;
 
     span {
          width: 20px;
@@ -37,6 +37,11 @@
     }
 
     input + ul {
+        .min, .max {
+            margin-left: 1rem;
+            float: right;
+        }
+
         .max {
             display: none;
         }
@@ -52,46 +57,33 @@
 
     label {
         display: block;
-        padding: 7px 0 7px 7px;
+        padding: .5rem 1rem .5rem 1rem;
         cursor: pointer;
     }
 
     > li {
-        //border-bottom: 1px solid #252525;
-        color: #fff;
+        display: block;
 
         a {
             display: block;
-            padding: 7px 0 7px 7px;
+            padding: .5rem 1rem .5rem 1rem;
 
             &:hover {
-                color: #252525;
-                background: $default-highlighter;
+                background: var(--nav-sub-background-hover);
             }
         }
 
         li {
-            border-top: 1px solid #505050;
-            color: #fff;
-
             &:not(:first-child) {
-                background: #444;
+                background: linear-gradient(to right, var(--nav-sub-background-highlight), var(--nav-sub-background));
             }
 
-            border-bottom: 1px solid #252525;
-
             &:hover, &.active {
-                color: #252525;
-                background: $default-highlighter;
-                border-top: 1px solid rgb(255, 192, 110);
+                background: var(--nav-category-background-hover);
             }
         }
     }
 
-    li:last-child li:last-child {
-        border-bottom: none;
-    }
-
     .max, .min {
         float: right;
     }
@@ -99,57 +91,25 @@
     i {
         margin-right: 5px;
     }
-
-    &::-webkit-scrollbar-track
-    {
-        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-        background-color: #F5F5F5;
-    }
-
-    &::-webkit-scrollbar
-    {
-        width: 12px;
-        background-color: #F5F5F5;
-    }
-
-    &::-webkit-scrollbar-thumb
-    {
-        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-        background-color: #555;
-    }
 }
 
 .nav-trigger {
     position: absolute;
     clip: rect(0, 0, 0, 0);
 
-    &:checked ~ main {
-        width: calc(100% - 175px);
-        left: 175px;
+    &:checked + nav {
+        width: 0%;
     }
 }
 
-label[for="nav-trigger"] {
-    font-size: 2.0em;
-    height: 30px;
-    width: 30px;
-    cursor: pointer;
-}
-
 .nav-top {
     user-select: none;
-    margin-top: 5px;
+    margin-top: 1rem;
     display: block;
     background: #fff;
-    border: 1px solid $content-border-color;
+    border: 1px solid var(--box-border);
 
     > li {
-        @include box-shadow-top(#fff);
-
-        &:first-child {
-            @include box-shadow-out(#fff);
-        }
-
         > a {
             display: inline-block;
             padding: 10px 10px;
@@ -163,14 +123,8 @@ label[for="nav-trigger"] {
         cursor: pointer;
 
         &:hover, &.active {
-            @include box-shadow-top(#FFC06E);
-
-            &:first-child {
-                @include box-shadow-out(#FFC06E);
-            }
-
-            background: $default-highlighter;
-            color: #252525;
+            background: var(--nav-content-hover);
+            color: var(--text-on-background-color-2);
 
             > ul {
                 display: block;
@@ -189,9 +143,6 @@ label[for="nav-trigger"] {
             display: none;
             opacity: 0;
             visibility: hidden;
-            border-left: 1px solid $content-border-color;
-            border-bottom: 1px solid $content-border-color;
-            border-right: 1px solid $content-border-color;
 
             li {
                 display: block;
@@ -200,25 +151,25 @@ label[for="nav-trigger"] {
 
                 &:hover {
                     color: #252525;
-                    background: $default-highlighter;
+                    background: var(--nav-content-hover);
                 }
             }
         }
     }
 }
 
-@media screen and (max-width: 600px) {
-    .nav-trigger:checked ~ main {
-        width: 100%;
-        left: 0;
+@media only screen and (max-width: 800px) {
+    body > .nav-trigger:not(:checked) + nav {
+        width: 0%;
     }
 
-    .nav-trigger:not(:checked) ~ main {
-        width: 0;
-        padding-right: 0;
+    body > .nav-trigger:checked + nav {
+        width: auto;
     }
+}
 
-    #nav-side {
+@media only screen and (max-width: 500px) {
+    body > .nav-trigger:checked + nav {
         width: 100%;
     }
 }
\ No newline at end of file
diff --git a/pagination.scss b/pagination.scss
index 1f76791..29552a5 100644
--- a/pagination.scss
+++ b/pagination.scss
@@ -1,4 +1,4 @@
-@import "_mixins", "_vars";
+
 
 .pagination {
     li {
@@ -6,15 +6,13 @@
     }
 
     a {
-        @include border-radius(3px);
-        @include box-shadow-out(#ffffff);
-        background: $content-background-color;
+        border-radius: 3px;
+        background: #ccc;
         padding: 5px 10px 5px 10px;
     }
 
     .active, a:hover, a:active {
-        color: $pagination-active-color;
-        background: $pagination-active-background;
-        @include box-shadow-out(#e8e8e8);
+        color: #000;
+        background: #fff;
     }
 }
diff --git a/progress.scss b/progress.scss
index 11012e9..425e706 100644
--- a/progress.scss
+++ b/progress.scss
@@ -1,4 +1,4 @@
-@import "_mixins", "_vars";
+
 
 .meter {
     height: 15px; /* Can be anything */
@@ -8,7 +8,7 @@
     > span {
         display: block;
         height: 100%;
-        @include border-radius(3px);
+        border-radius: 3px;
         background-color: rgb(43,194,83);
         background-image: linear-gradient(
                         to left top,
diff --git a/section.scss b/section.scss
index ad9b028..711e72f 100644
--- a/section.scss
+++ b/section.scss
@@ -1,14 +1,12 @@
-@import "_mixins", "_vars";
+
 
 .box {
-    @include box-sizing(border-box);
-    //display: inline-block;
-    margin-top: 0.3rem;
+    box-sizing: border-box;
+    margin-top: 1rem;
     overflow-x: auto;
 
     .inner {
-        @include box-sizing(border-box);
-        @include box-shadow-out(#ffffff);
+        box-sizing: border-box;
         padding: 10px;
     }
 }
@@ -18,18 +16,8 @@
 }
 
 section.box {
-    @include box-shadow-bottom(#f1f1f1);
-    border: $content-box-border solid $content-box-border-color;
-    background: $content-box-background-color;
-
-    @each $tuple in
-        'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
-        'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
-        'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
-        &.#{nth($tuple, 1)} {
-            border-top: 3px solid #{nth($tuple, 2)};
-        }
-    }
+    border: 1px solid var(--box-border);
+    background: #fff;
 }
 
 section {
@@ -38,15 +26,13 @@ section {
             margin: 10px 10px 0 10px;
             padding-bottom: 5px;
             font-size: 1.1em;
-            text-shadow: 1px 1px 1px #ffffff;
             border-bottom: 1px solid #e1e1e1;
         }
     }
 
     > h2 {
-        @include box-sizing(border-box);
+       box-sizing: border-box;
         font-size: 1.2em;
         margin-bottom: 5px;
-        text-shadow: 1px 1px 1px #ffffff;
     }
 }
diff --git a/styles.css b/styles.css
index c215fad..3bb9726 100644
--- a/styles.css
+++ b/styles.css
@@ -1,68 +1,3 @@
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
-.ok {
-  color: #5cff56; }
-
-.warning {
-  color: #ff4b41; }
-
-.favorite {
-  color: #d16059; }
-
-.green {
-  background: #42bd41; }
-
-.red {
-  background: #d01715; }
-
-.blue {
-  background: #5778fd; }
-
-.orange {
-  background: #FBA026; }
-
-.lightblue {
-  background: #03a9f5; }
-
-.yellow {
-  background: #ffeb3c; }
-
-.purple {
-  background: #673bb7; }
-
-.pink {
-  background: #ffa6e3; }
-
-.grey {
-  background: #dcdcdc; }
-
-.darkred {
-  background: #B8312F; }
-
-.darkgreen {
-  background: #009788; }
-
-.darkblue {
-  background: #3f51b5; }
-
 html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
   margin: 0;
   padding: 0; }
@@ -81,8 +16,6 @@ ul {
   list-style: none; }
 
 input, select, textarea, .textarea {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   appearance: none;
   box-shadow: none; }
@@ -102,48 +35,17 @@ table {
 i {
   font-style: normal; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
-body {
-  background: #fff;
-  font-family: Open Sans, sans-serif;
-  font-size: 1rem; }
-
 .clear {
   clear: both; }
 
 pre {
-  background: #fff;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
+  background: #cfcfcf;
   border-radius: 3px;
-  background-clip: padding-box;
-  border: 1px solid #d6d6d6;
-  padding: 5px;
+  border: 1px solid #ccc;
+  padding: 1rem;
   overflow-x: scroll;
   counter-reset: line;
   width: 100%;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
   pre span {
     display: block; }
@@ -164,50 +66,74 @@ iframe {
   width: 100%;
   height: 100%; }
 
-.ok {
-  color: #5cff56; }
+.clean {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: 0;
+  vertical-align: top; }
 
-.warning {
-  color: #ff4b41; }
+.clean:focus {
+  outline: 0; }
 
-.favorite {
-  color: #d16059; }
+.rp {
+  position: relative; }
 
-.green {
-  background: #42bd41; }
+.ap {
+  position: absolute; }
 
-.red {
-  background: #d01715; }
+.lf {
+  float: left; }
 
-.blue {
-  background: #5778fd; }
+.rf {
+  float: right; }
 
-.orange {
-  background: #FBA026; }
+.op {
+  margin: 0 auto; }
 
-.lightblue {
-  background: #03a9f5; }
+.rT {
+  text-align: right; }
 
-.yellow {
-  background: #ffeb3c; }
+.lT {
+  text-align: left; }
 
-.purple {
-  background: #673bb7; }
+.cT {
+  text-align: center; }
 
-.pink {
-  background: #ffa6e3; }
+.f-w {
+  width: 100%;
+  max-width: none; }
 
-.grey {
-  background: #dcdcdc; }
+.f-h {
+  height: 100%;
+  max-height: none; }
 
-.darkred {
-  background: #B8312F; }
+.vT {
+  vertical-align: top; }
 
-.darkgreen {
-  background: #009788; }
+.vB {
+  vertical-align: bottom; }
 
-.darkblue {
-  background: #3f51b5; }
+.vM {
+  vertical-align: middle; }
+
+.n-wrap {
+  white-space: nowrap; }
+
+.p,
+.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
+  cursor: pointer; }
+
+.vC {
+  display: table-cell;
+  vertical-align: middle;
+  white-space: nowrap; }
+
+.vh {
+  display: none !important; }
+
+.x-overflow {
+  overflow-x: auto; }
 
 .wf-100 {
   width: 100%; }
@@ -2525,8 +2451,7 @@ iframe {
   -ms-flex: 0 0 auto;
   -webkit-box-flex: 0;
   flex: 0 0 auto;
-  padding-right: 0.3rem;
-  padding-left: 0.3rem; }
+  padding-right: 1rem; }
 
 .col-xs {
   -webkit-flex-grow: 1;
@@ -2703,8 +2628,7 @@ iframe {
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
-    padding-right: 0.3rem;
-    padding-left: 0.3rem; }
+    padding-right: 1rem; }
 
   .col-sm {
     -webkit-flex-grow: 1;
@@ -2880,8 +2804,7 @@ iframe {
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
-    padding-right: 0.3rem;
-    padding-left: 0.3rem; }
+    padding-right: 1rem; }
 
   .col-md {
     -webkit-flex-grow: 1;
@@ -3057,8 +2980,7 @@ iframe {
     -ms-flex: 0 0 auto;
     -webkit-box-flex: 0;
     flex: 0 0 auto;
-    padding-right: 0.3rem;
-    padding-left: 0.3rem; }
+    padding-right: 1rem; }
 
   .col-lg {
     -webkit-flex-grow: 1;
@@ -3213,26 +3135,6 @@ iframe {
     -ms-flex-order: 1;
     -webkit-box-ordinal-group: 2;
     order: 1; } }
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 article {
   background: #fff;
   padding: 10px;
@@ -3263,8 +3165,8 @@ article {
     padding: 3px;
     background: #f1f1f1; }
   article a {
-    color: #8ea4ff;
-    border-bottom: 1px dotted #8ea4ff; }
+    color: var(--link-color);
+    border-bottom: 1px dotted var(--link-color); }
     article a:hover {
       border-bottom: none; }
   article p {
@@ -3284,65 +3186,18 @@ article {
     margin: 0 auto; }
   article table {
     border-collapse: collapse;
-    border: 1px solid #999;
+    border: 1px solid var(--box-border);
     margin: 0 auto;
     margin-bottom: 1rem; }
     article table th, article table td {
       padding: 5px;
-      border: 1px solid #999; }
+      border: 1px solid var(--box-border); }
     article table tr:nth-child(2n) {
-      background: #eee; }
-
-.ok {
-  color: #5cff56; }
-
-.warning {
-  color: #ff4b41; }
-
-.favorite {
-  color: #d16059; }
-
-.green {
-  background: #42bd41; }
-
-.red {
-  background: #d01715; }
-
-.blue {
-  background: #5778fd; }
-
-.orange {
-  background: #FBA026; }
-
-.lightblue {
-  background: #03a9f5; }
-
-.yellow {
-  background: #ffeb3c; }
-
-.purple {
-  background: #673bb7; }
-
-.pink {
-  background: #ffa6e3; }
-
-.grey {
-  background: #dcdcdc; }
-
-.darkred {
-  background: #B8312F; }
-
-.darkgreen {
-  background: #009788; }
-
-.darkblue {
-  background: #3f51b5; }
+      background: var(--table-row-background); }
 
 .ipt-wrap {
   display: table;
   vertical-align: top;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
   .ipt-wrap .ipt-first {
     width: 100%;
@@ -3365,26 +3220,6 @@ p {
   p + p {
     margin-top: 5px; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .tooltip > i {
   font-size: 0.85rem;
   position: relative;
@@ -3491,54 +3326,14 @@ p {
     -webkit-transform: scale(1);
     transform: scale(1);
     opacity: 0; } }
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 canvas {
   background: #fff;
-  border: 1px solid #d6d6d6;
+  border: 1px solid var(--box-border);
   user-select: none; }
 
 canvas.chart {
   width: 100%; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 form li {
   margin: 5px 0 5px 0; }
 form td {
@@ -3547,41 +3342,20 @@ form td {
   form td textarea + i {
     vertical-align: top; }
 form label {
-  font-size: 0.9rem;
-  color: #878787;
-  text-shadow: -1px -1px 1px #ffffff; }
+  font-size: 1rem;
+  color: #878787; }
 form i + i {
   margin-left: 3px; }
 form .layout td + td {
   padding-left: 5px; }
 form .list {
-  font-size: 0.9rem; }
+  font-size: 1rem; }
   form .list td {
     white-space: nowrap;
     padding: 3px 5px 3px 5px; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .infoIcon {
-  width: 0.9rem;
+  width: var(--badge-size);
   text-align: center;
   vertical-align: middle;
   position: relative;
@@ -3592,65 +3366,30 @@ form .list {
     position: absolute;
     right: -.55rem;
     top: -.45rem;
-    width: 0.9rem;
-    height: 0.9rem;
-    line-height: 0.9rem;
+    width: .9rem;
+    height: var(--badge-size);
+    line-height: var(--badge-size);
     border-radius: 50%;
     text-align: center;
-    color: #fff;
-    background: #d16059; }
+    padding: .15rem;
+    color: var(--badge-color);
+    background: var(--badge-background); }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 img.frame-1 {
-  padding: 5px;
+  padding: 1rem;
   background: #fff;
-  border: 1px solid #d6d6d6;
-  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  background-clip: padding-box;
+  border: 1px solid var(--box-border);
   box-sizing: border-box;
   width: 100%; }
 img.frame-2 {
-  border: 1px solid #d6d6d6;
+  border: 1px solid var(--box-border);
   background: #fff;
   box-sizing: border-box;
   width: 100%; }
 img.frame-3 {
-  padding: 5px;
+  padding: 1rem;
   background: #fff;
-  border: 1px solid #d6d6d6;
-  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  background-clip: padding-box;
+  border: 1px solid var(--box-border);
   box-sizing: border-box;
   width: 100%; }
 
@@ -3720,28 +3459,54 @@ div.slider-1 {
     .slider-2 label img {
       display: block; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
+.slider-3 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column; }
+  .slider-3 .icon-cards {
+    position: relative;
+    width: 60vw;
+    height: 40vw;
+    max-width: 380px;
+    max-height: 250px;
+    margin: 0;
+    perspective: 1000px; }
+    .slider-3 .icon-cards-content {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transform-style: preserve-3d;
+      transform: translateZ(-30vw) rotateY(0);
+      animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; }
+    .slider-3 .icon-cards-item {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 60vw;
+      height: 40vw;
+      max-width: 380px;
+      max-height: 250px; }
+      .slider-3 .icon-cards-item:nth-child(1) {
+        transform: rotateY(0) translateZ(35vw); }
+      .slider-3 .icon-cards-item:nth-child(2) {
+        transform: rotateY(120deg) translateZ(35vw); }
+      .slider-3 .icon-cards-item:nth-child(3) {
+        transform: rotateY(240deg) translateZ(35vw); }
+    .slider-3 .icon-cards img {
+      width: 100%; }
+
+@keyframes carousel {
+  0%,  17.5% {
+    transform: translateZ(-35vw) rotateY(0); }
+  27.5%, 45% {
+    transform: translateZ(-35vw) rotateY(-120deg); }
+  55%, 72.5% {
+    transform: translateZ(-35vw) rotateY(-240deg); }
+  82.5%, 100% {
+    transform: translateZ(-35vw) rotateY(-360deg); } }
 input, select, textarea, .textarea {
-  border: 1px solid #d6d6d6; }
+  border: 1px solid var(--input-border); }
 
 progress {
   height: 20px;
@@ -3759,20 +3524,17 @@ input[type="email"],
 input[type="date"],
 input[type="number"],
 input[type="datetime-local"] {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  color: #676a6c;
-  background: #fff;
+  color: var(--input-color);
+  background: var(--input-background);
   width: 100%;
   height: 2rem;
   min-width: 70px;
   max-width: 100%;
   padding: 7px;
   font-size: 1rem;
-  border: 1px solid #d6d6d6;
-  transition: background 0.3s, border 0.3s;
-  box-shadow: inset 1px 1px 4px -2px #c5c5c5; }
+  border: 1px solid var(--input-border);
+  transition: background 0.3s, border 0.3s; }
   .textarea:focus, .textarea .active,
   .tag-input:focus,
   .tag-input .active,
@@ -3794,7 +3556,7 @@ input[type="datetime-local"] {
   input[type="number"] .active,
   input[type="datetime-local"]:focus,
   input[type="datetime-local"] .active {
-    border-color: #FBA026; }
+    border-color: var(--input-background-active); }
   .textarea:disabled,
   .tag-input:disabled,
   textarea:disabled,
@@ -3808,6 +3570,47 @@ input[type="datetime-local"] {
   input[type="datetime-local"]:disabled {
     background: #efefef; }
 
+.inputWrapper {
+  display: flex;
+  flex-direction: row; }
+  .inputWrapper .textWrapper + input[type=submit], .inputWrapper .textWrapper + input[type=button], .inputWrapper .textWrapper + button {
+    background: var(--button-colored-background);
+    color: var(--text-on-background-color-2);
+    margin: 0;
+    padding: 0;
+    flex: 0;
+    height: auto;
+    border: none;
+    box-shadow: none; }
+    .inputWrapper .textWrapper + input[type=submit]:hover, .inputWrapper .textWrapper + input[type=button]:hover, .inputWrapper .textWrapper + button:hover {
+      background: var(--button-colored-background-hover); }
+  .inputWrapper .textWrapper {
+    flex: 1;
+    position: relative; }
+    .inputWrapper .textWrapper input {
+      padding-left: 2rem; }
+    .inputWrapper .textWrapper .frontIcon, .inputWrapper .textWrapper .endIcon {
+      color: var(--input-icon-color);
+      font-size: 1.1rem;
+      position: absolute;
+      top: 0;
+      padding: .6rem .6rem .6rem .4rem; }
+    .inputWrapper .textWrapper .frontIcon {
+      left: 0; }
+    .inputWrapper .textWrapper .endIcon {
+      right: 0; }
+    .inputWrapper .textWrapper input[type=text]:active, .inputWrapper .textWrapper input[type=text]:focus,
+    .inputWrapper .textWrapper input[type=password]:active, .inputWrapper .textWrapper input[type=password]:focus {
+      border: 1px solid var(--input-border-active); }
+    .inputWrapper .textWrapper input[type=text]:active ~ .frontIcon, .inputWrapper .textWrapper input[type=text]:focus ~ .frontIcon,
+    .inputWrapper .textWrapper input[type=password]:active ~ .frontIcon, .inputWrapper .textWrapper input[type=password]:focus ~ .frontIcon,
+    .inputWrapper .textWrapper input[type=text]:active ~ .endIcon, .inputWrapper .textWrapper input[type=text]:focus ~ .endIcon,
+    .inputWrapper .textWrapper input[type=password]:active ~ .endIcon, .inputWrapper .textWrapper input[type=password]:focus ~ .endIcon {
+      color: var(--input-icon-color-active); }
+    .inputWrapper .textWrapper input[type=text] ~ .endIcon, .inputWrapper .textWrapper input[type=text] ~ .endIcon,
+    .inputWrapper .textWrapper input[type=password] ~ .endIcon, .inputWrapper .textWrapper input[type=password] ~ .endIcon {
+      cursor: pointer; }
+
 input ~ .dropdown {
   position: absolute;
   display: none;
@@ -3825,17 +3628,15 @@ option {
   line-height: 1rem; }
 
 input[type="file"] {
-  border: solid 1rem #fff;
+  border: 1px solid var(--input-border-active);
   width: 100%;
   max-width: 100%;
-  color: #676a6c;
+  color: var(--input-color);
   padding: 10px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
 
 input::placeholder {
-  color: #cfcfcf;
+  color: var(--input-icon-color);
   opacity: 0.5; }
 
 input::placeholder, textarea {
@@ -3843,14 +3644,12 @@ input::placeholder, textarea {
 
 input:invalid {
   transition: all 0.5s;
-  border-color: #b85450; }
+  border-color: #f00; }
 
 textarea, .textarea {
   overflow: auto;
   resize: both;
   min-height: 100px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
 
 span.checkbox, span.radio {
@@ -3881,17 +3680,15 @@ input[type="range"] {
   flex-direction: row;
   flex-wrap: nowrap; }
   .input button {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: inline-block;
-    background: #fff;
+    background: var(--input-border-active);
     height: 2rem;
     font-size: 1rem;
     min-width: 40px;
-    border-left: solid 1px #d6d6d6;
-    border-top: solid 1px #d6d6d6;
-    border-bottom: solid 1px #d6d6d6;
+    border-left: solid 1px var(--input-border);
+    border-top: solid 1px var(--input-border);
+    border-bottom: solid 1px var(--input-border);
     border-right: none;
     padding: 0;
     position: relative;
@@ -3899,13 +3696,11 @@ input[type="range"] {
     flex-grow: 0;
     flex-shrink: 0; }
     .input button:hover {
-      background: #fff; }
+      background: var(--input-border-active); }
   .input i {
     position: relative;
     vertical-align: middle; }
   .input input {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     font-size: 1rem;
     position: relative;
@@ -3926,134 +3721,63 @@ select.plain {
   cursor: pointer;
   box-shadow: none; }
 
-.tag-input input {
-  border: none;
-  padding: 0;
-  margin: 0; }
-.tag-input .tag {
-  padding: 3px;
-  font-size: 0.8rem; }
-
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .ac-container {
-  margin: 10px auto 30px auto;
+  margin: 1rem auto 1rem auto;
   text-align: left; }
   .ac-container > input {
     display: none; }
     .ac-container > input:checked + label {
-      background: #fff;
-      background: -moz-linear-gradient(top, #fff 0, #fff 100);
-      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #fff));
-      background: -webkit-linear-gradient(top, #fff 0, #fff 100);
-      background: -o-linear-gradient(top, #fff 0, #fff 100);
-      background: -ms-linear-gradient(top, #fff 0, #fff 100);
-      background: linear-gradient(to bottom, #fff 0, #fff 100);
-      color: #676a6c; }
+      background: var(--button-colored-background);
+      color: var(--text-on-background-color-2); }
       .ac-container > input:checked + label + section {
         display: inherit; }
     .ac-container > input + label + section {
       display: none; }
   .ac-container label {
     display: block;
-    padding: 5px 20px;
+    padding: 1rem 1rem;
     position: relative;
     z-index: 20;
     margin-top: -1px;
     cursor: pointer;
-    color: #777;
+    color: var(--text-on-background-color-2);
     font-size: 1rem;
-    border: 1px solid #d6d6d6;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
-    border-radius: 3px;
-    background-clip: padding-box;
-    background: #f5f5ff;
-    background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
-    background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
-    background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
-    background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
-    background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100); }
+    border: 1rem solid var(--box-border);
+    background: var(--box-border); }
     .ac-container label:hover {
-      background: #fff;
-      background: -moz-linear-gradient(top, #fff 0, #fff 100);
-      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #fff));
-      background: -webkit-linear-gradient(top, #fff 0, #fff 100);
-      background: -o-linear-gradient(top, #fff 0, #fff 100);
-      background: -ms-linear-gradient(top, #fff 0, #fff 100);
-      background: linear-gradient(to bottom, #fff 0, #fff 100); }
+      background: var(--button-colored-background-hover); }
   .ac-container > section {
     background: #fff;
     overflow: hidden;
     height: auto;
     position: relative;
     z-index: 10;
-    border-left: 1px solid #d6d6d6;
-    border-right: 1px solid #d6d6d6;
-    padding: 10px; }
+    border-left: 1rem solid var(--box-border);
+    border-right: 1rem solid var(--box-border);
+    padding: 1rem; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .log-msg {
-  padding: 5px;
-  margin: 5px; }
+  padding: 1rem;
+  margin: 1rem; }
 
 .log-msg-status-ok {
   background: #aaffad;
-  border: 2px solid #81e27d;
+  border: 1px solid #81e27d;
   color: #459442; }
 
 .log-msg-status-warning {
   background: #f8ffa8;
-  border: 2px solid #d6d949;
+  border: 1px solid #d6d949;
   color: #94972f; }
 
 .log-msg-status-error {
   background: #ff7d79;
-  border: 2px solid #ee5649;
+  border: 1px solid #ee5649;
   color: #a5302a; }
 
 .log-msg-status-info {
   background: #b6d2ff;
-  border: 2px solid #85b0ee;
+  border: 1px solid #85b0ee;
   color: #4865a5; }
 
 .slider {
@@ -4062,81 +3786,24 @@ select.plain {
   .slider ul {
     display: inline; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 blockquote {
-  border: 1px solid #d6d6d6;
-  background: #fff;
-  padding: 10px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  background-clip: padding-box; }
+  border: 1px solid var(--box-border);
+  background: #ccc;
+  padding: 1rem;
+  box-sizing: border-box; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .crumbs-1 {
   list-style: none;
   overflow: hidden;
-  font-size: 12px; }
+  font-size: 1rem; }
   .crumbs-1 li {
-    background: #f5f5ff;
-    border: 1px solid #d6d6d6;
+    background: #fff;
+    border: 1px solid var(--box-border);
     padding: 10px 10px 10px 20px;
     position: relative;
     display: block;
     float: left;
-    text-shadow: -1px -1px 1px #ffffff;
-    cursor: pointer;
-    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    box-shadow: inset 1px 1px 0px 0px #ffffff; }
-    .crumbs-1 li:first-child {
-      -webkit-border-bottom-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-      -webkit-border-top-left-radius: 3px;
-      border-top-left-radius: 3px;
-      background-clip: padding-box; }
+    cursor: pointer; }
     .crumbs-1 li:not(.last):after, .crumbs-1 li:before {
       content: " ";
       display: block;
@@ -4144,7 +3811,7 @@ blockquote {
       height: 0;
       border-top: 18px solid transparent;
       border-bottom: 17px solid transparent;
-      border-left: 14px solid #f5f5ff;
+      border-left: 14px solid var(--box-border);
       position: absolute;
       top: 50%;
       margin-top: -18px;
@@ -4152,168 +3819,37 @@ blockquote {
     .crumbs-1 li:not(.last):after {
       z-index: 2; }
     .crumbs-1 li:before {
-      border-left-color: #d6d6d6;
+      border-left-color: var(--box-border);
       margin-left: 1px;
       z-index: 1; }
     .crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after {
       border-left: 14px solid #ffffff; }
   .crumbs-1 .last {
-    padding-right: 20px;
-    -webkit-border-bottom-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    -webkit-border-top-right-radius: 3px;
-    border-top-right-radius: 3px;
-    background-clip: padding-box; }
+    padding-right: 20px; }
     .crumbs-1 .last:before {
       border: none; }
   .crumbs-1 .active {
     cursor: default; }
   .crumbs-1 .active, .crumbs-1 li:hover {
-    background: #fff; }
+    background: var(--button-colored-background-hover); }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .btn {
   cursor: pointer; }
 
 button, input[type="submit"], input[type="button"], a.button {
-  border: 1px solid #d6d6d6;
   cursor: pointer;
-  text-shadow: 1px 1px 1px #ffffff;
   min-width: 70px;
   height: 2rem;
-  font-size: 0.9rem;
-  background: #f1f1f1;
-  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  box-shadow: inset 1px 1px 0px 0px #ffffff; }
-  button:hover, button :active, input[type="submit"]:hover, input[type="submit"] :active, input[type="button"]:hover, input[type="button"] :active, a.button:hover, a.button :active {
-    text-shadow: -1px -1px 1px #ffffff;
-    background: #d6d6d6; }
-
-button.red {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #696969;
-  background: #d9645b;
-  background: -moz-linear-gradient(top, #f17068 0, #d16059 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f17068), color-stop(100, #d16059));
-  background: -webkit-linear-gradient(top, #f17068 0, #d16059 100);
-  background: -o-linear-gradient(top, #f17068 0, #d16059 100);
-  background: -ms-linear-gradient(top, #f17068 0, #d16059 100);
-  background: linear-gradient(to bottom, #f17068 0, #d16059 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #ff8d7c;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ff8d7c;
-  box-shadow: inset 1px 1px 0px 0px #ff8d7c; }
-  button.red:hover, button.red :active {
-    text-shadow: -1px -1px 1px #696969;
-    background: #d9645b;
-    background: -moz-linear-gradient(top, #d16059 0, #f17068 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d16059), color-stop(100, #f17068));
-    background: -webkit-linear-gradient(top, #d16059 0, #f17068 100);
-    background: -o-linear-gradient(top, #d16059 0, #f17068 100);
-    background: -ms-linear-gradient(top, #d16059 0, #f17068 100);
-    background: linear-gradient(to bottom, #d16059 0, #f17068 100); }
-
-button.green {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #696969;
-  background: #90d99d;
-  background: -moz-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9df1ad), color-stop(100, #77d17c));
-  background: -webkit-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: -o-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: -ms-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: linear-gradient(to bottom, #9df1ad 0, #77d17c 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #c8ffb6;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #c8ffb6;
-  box-shadow: inset 1px 1px 0px 0px #c8ffb6; }
-  button.green:hover, button.green :active {
-    text-shadow: -1px -1px 1px #696969;
-    background: #90d99d;
-    background: -moz-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77d17c), color-stop(100, #9df1ad));
-    background: -webkit-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: -o-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: -ms-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: linear-gradient(to bottom, #77d17c 0, #9df1ad 100); }
-
-button.blue {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #696969;
-  background: #97afd9;
-  background: -moz-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #beddf1), color-stop(100, #7ba9d1));
-  background: -webkit-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: -o-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: -ms-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: linear-gradient(to bottom, #beddf1 0, #7ba9d1 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #cbf3ff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #cbf3ff;
-  box-shadow: inset 1px 1px 0px 0px #cbf3ff; }
-  button.blue:hover, button.blue :active {
-    text-shadow: -1px -1px 1px #696969;
-    background: #97afd9;
-    background: -moz-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ba9d1), color-stop(100, #beddf1));
-    background: -webkit-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: -o-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: -ms-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: linear-gradient(to bottom, #7ba9d1 0, #beddf1 100); }
-
-ul.btns {
-  list-style: none;
-  overflow: hidden;
-  font-size: 12px; }
-  ul.btns li {
-    background: #f5f5ff;
-    border-left: 1px solid #d6d6d6;
-    border-top: 1px solid #d6d6d6;
-    border-bottom: 1px solid #d6d6d6;
-    float: left;
-    text-shadow: -1px -1px 1px #ffffff;
-    cursor: pointer;
-    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    box-shadow: inset 1px 1px 0px 0px #ffffff; }
-    ul.btns li:last-child {
-      border-right: 1px solid #d6d6d6; }
-    ul.btns li:before {
-      border-left-color: #d6d6d6;
-      margin-left: 1px; }
-  ul.btns a {
-    display: block;
-    padding: 10px; }
-  ul.btns .active {
-    cursor: default; }
-  ul.btns .active, ul.btns li:hover {
-    background: #fff; }
-
-button.simple {
-  background: #f1f1f1;
-  border: 1px solid #d6d6d6;
-  text-shadow: -1px -1px 1px #ffffff;
-  padding: 5px;
-  min-width: 40px; }
-  button.simple:hover {
-    background: #f1f1f1; }
+  background: var(--button-colored-background);
+  color: var(--text-on-background-color-2);
+  margin: 0;
+  padding: 0;
+  flex: 0;
+  height: 32px;
+  border: none;
+  box-shadow: none; }
+  button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover {
+    background: var(--button-colored-background-hover); }
 
 .unseen {
   font-weight: bold; }
@@ -4321,35 +3857,10 @@ button.simple {
 [data-href] {
   cursor: pointer; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 ul.boxed {
   background: #fff;
   padding: 5px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  background-clip: padding-box;
-  border: 1px solid #d6d6d6; }
+  border: 1px solid var(--box-border); }
   ul.boxed li {
     margin: 5px 0 5px 0; }
     ul.boxed li:first-child {
@@ -4361,38 +3872,17 @@ ul.h-list li {
   display: inline-block;
   margin: 5px 10px 5px 10px; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
-#nav-side {
-  user-select: none;
-  width: 175px;
-  position: fixed;
-  top: 79px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
+body > nav {
+  width: 250px;
   overflow-y: auto;
   font-size: 0.8em;
-  background: #3b3b3b; }
+  background: linear-gradient(135deg, var(--nav-category-background-highlight), var(--nav-category-background));
+  color: rgba(255, 255, 255, 0.8); }
+
+#nav-side {
+  display: flex;
+  flex-flow: column;
+  box-sizing: border-box; }
   #nav-side span {
     width: 20px;
     display: inline-block; }
@@ -4404,6 +3894,9 @@ ul.h-list li {
       display: none; }
     #nav-side input:checked + ul > li:nth-child(n+2) {
       display: inherit; }
+  #nav-side input + ul .min, #nav-side input + ul .max {
+    margin-left: 1rem;
+    float: right; }
   #nav-side input + ul .max {
     display: none; }
   #nav-side input + ul .min {
@@ -4412,87 +3905,47 @@ ul.h-list li {
     display: none; }
   #nav-side label {
     display: block;
-    padding: 7px 0 7px 7px;
+    padding: .5rem 1rem .5rem 1rem;
     cursor: pointer; }
   #nav-side > li {
-    color: #fff; }
+    display: block; }
     #nav-side > li a {
       display: block;
-      padding: 7px 0 7px 7px; }
+      padding: .5rem 1rem .5rem 1rem; }
       #nav-side > li a:hover {
-        color: #252525;
-        background: #FBA026; }
-    #nav-side > li li {
-      border-top: 1px solid #505050;
-      color: #fff;
-      border-bottom: 1px solid #252525; }
-      #nav-side > li li:not(:first-child) {
-        background: #444; }
-      #nav-side > li li:hover, #nav-side > li li.active {
-        color: #252525;
-        background: #FBA026;
-        border-top: 1px solid #ffc06e; }
-  #nav-side li:last-child li:last-child {
-    border-bottom: none; }
+        background: var(--nav-sub-background-hover); }
+    #nav-side > li li:not(:first-child) {
+      background: linear-gradient(to right, var(--nav-sub-background-highlight), var(--nav-sub-background)); }
+    #nav-side > li li:hover, #nav-side > li li.active {
+      background: var(--nav-category-background-hover); }
   #nav-side .max, #nav-side .min {
     float: right; }
   #nav-side i {
     margin-right: 5px; }
-  #nav-side::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    background-color: #F5F5F5; }
-  #nav-side::-webkit-scrollbar {
-    width: 12px;
-    background-color: #F5F5F5; }
-  #nav-side::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    background-color: #555; }
 
 .nav-trigger {
   position: absolute;
   clip: rect(0, 0, 0, 0); }
-  .nav-trigger:checked ~ main {
-    width: calc(100% - 175px);
-    left: 175px; }
-
-label[for="nav-trigger"] {
-  font-size: 2.0em;
-  height: 30px;
-  width: 30px;
-  cursor: pointer; }
+  .nav-trigger:checked + nav {
+    width: 0%; }
 
 .nav-top {
   user-select: none;
-  margin-top: 5px;
+  margin-top: 1rem;
   display: block;
   background: #fff;
-  border: 1px solid #b7b7b7; }
-  .nav-top > li {
-    -moz-box-shadow: inset 0px 1px 0px 0px #fff;
-    -webkit-box-shadow: inset 0px 1px 0px 0px #fff;
-    box-shadow: inset 0px 1px 0px 0px #fff; }
-    .nav-top > li:first-child {
-      -moz-box-shadow: inset 1px 1px 0px 0px #fff;
-      -webkit-box-shadow: inset 1px 1px 0px 0px #fff;
-      box-shadow: inset 1px 1px 0px 0px #fff; }
-    .nav-top > li > a {
-      display: inline-block;
-      padding: 10px 10px; }
+  border: 1px solid var(--box-border); }
+  .nav-top > li > a {
+    display: inline-block;
+    padding: 10px 10px; }
   .nav-top li {
     background: #fff;
     display: inline-block;
     position: relative;
     cursor: pointer; }
     .nav-top li:hover, .nav-top li.active {
-      -moz-box-shadow: inset 0px 1px 0px 0px #FFC06E;
-      -webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E;
-      box-shadow: inset 0px 1px 0px 0px #FFC06E;
-      background: #FBA026;
-      color: #252525; }
-      .nav-top li:hover:first-child, .nav-top li.active:first-child {
-        -moz-box-shadow: inset 1px 1px 0px 0px #FFC06E;
-        -webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E;
-        box-shadow: inset 1px 1px 0px 0px #FFC06E; }
+      background: var(--nav-content-hover);
+      color: var(--text-on-background-color-2); }
       .nav-top li:hover > ul, .nav-top li.active > ul {
         display: block;
         opacity: 1;
@@ -4506,120 +3959,34 @@ label[for="nav-trigger"] {
       width: 150px;
       display: none;
       opacity: 0;
-      visibility: hidden;
-      border-left: 1px solid #b7b7b7;
-      border-bottom: 1px solid #b7b7b7;
-      border-right: 1px solid #b7b7b7; }
+      visibility: hidden; }
       .nav-top li > ul li {
         display: block;
         color: #000;
         padding: 7px; }
         .nav-top li > ul li:hover {
           color: #252525;
-          background: #FBA026; }
+          background: var(--nav-content-hover); }
 
-@media screen and (max-width: 600px) {
-  .nav-trigger:checked ~ main {
-    width: 100%;
-    left: 0; }
+@media only screen and (max-width: 800px) {
+  body > .nav-trigger:not(:checked) + nav {
+    width: 0%; }
 
-  .nav-trigger:not(:checked) ~ main {
-    width: 0;
-    padding-right: 0; }
-
-  #nav-side {
+  body > .nav-trigger:checked + nav {
+    width: auto; } }
+@media only screen and (max-width: 500px) {
+  body > .nav-trigger:checked + nav {
     width: 100%; } }
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
-main {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  top: 0;
-  bottom: 100%;
-  left: 0;
-  z-index: 1;
-  background: #fff;
-  transition: all 0.2s; }
-
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .pagination li {
   display: inline; }
 .pagination a {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
   border-radius: 3px;
-  background-clip: padding-box;
-  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  box-shadow: inset 1px 1px 0px 0px #ffffff;
-  background: #f5f5ff;
+  background: #ccc;
   padding: 5px 10px 5px 10px; }
 .pagination .active, .pagination a:hover, .pagination a:active {
-  color: #fff;
-  background: #353535;
-  -moz-box-shadow: inset 1px 1px 0px 0px #e8e8e8;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #e8e8e8;
-  box-shadow: inset 1px 1px 0px 0px #e8e8e8; }
+  color: #000;
+  background: #fff; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .meter {
   height: 15px;
   /* Can be anything */
@@ -4628,11 +3995,7 @@ main {
   .meter > span {
     display: block;
     height: 100%;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
     border-radius: 3px;
-    background-clip: padding-box;
     background-color: #2bc253;
     background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054));
     position: relative;
@@ -4780,115 +4143,43 @@ main {
     line-height: 60px;
     font-size: 9px; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .box {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  margin-top: 0.3rem;
+  margin-top: 1rem;
   overflow-x: auto; }
   .box .inner {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    box-shadow: inset 1px 1px 0px 0px #ffffff;
     padding: 10px; }
 
 .box-container {
   display: inline-block; }
 
 section.box {
-  -moz-box-shadow: 0px 1px 0px 0px #f1f1f1;
-  -webkit-box-shadow: 0px 1px 0px 0px #f1f1f1;
-  box-shadow: 0px 1px 0px 0px #f1f1f1;
-  border: 1px solid #d6d6d6;
+  border: 1px solid var(--box-border);
   background: #fff; }
-  section.box.green {
-    border-top: 3px solid #42bd41; }
-  section.box.red {
-    border-top: 3px solid #d01715; }
-  section.box.blue {
-    border-top: 3px solid #5778fd; }
-  section.box.orange {
-    border-top: 3px solid #FBA026; }
-  section.box.lightblue {
-    border-top: 3px solid #03a9f5; }
-  section.box.yellow {
-    border-top: 3px solid #ffeb3c; }
-  section.box.purple {
-    border-top: 3px solid #673bb7; }
-  section.box.pink {
-    border-top: 3px solid #ffa6e3; }
-  section.box.grey {
-    border-top: 3px solid #dcdcdc; }
-  section.box.darkred {
-    border-top: 3px solid #B8312F; }
-  section.box.darkgreen {
-    border-top: 3px solid #009788; }
-  section.box.darkblue {
-    border-top: 3px solid #3f51b5; }
 
 section header > h1 {
   margin: 10px 10px 0 10px;
   padding-bottom: 5px;
   font-size: 1.1em;
-  text-shadow: 1px 1px 1px #ffffff;
   border-bottom: 1px solid #e1e1e1; }
 section > h2 {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-size: 1.2em;
-  margin-bottom: 5px;
-  text-shadow: 1px 1px 1px #ffffff; }
+  margin-bottom: 5px; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 .tabview .tab-links {
+  color: #000;
   padding: 0.3rem 0 0 0; }
   .tabview .tab-links label {
-    text-shadow: 1px 1px 1px #fff;
     font-size: 0.9em;
     cursor: pointer; }
+    .tabview .tab-links label:hover {
+      color: var(--text-on-background-color-2);
+      background: var(--button-colored-background-hover); }
+  .tabview .tab-links .active label:hover {
+    color: var(--text-on-background-color-2);
+    background: var(--button-colored-background-hover); }
   .tabview .tab-links .active a {
     cursor: default; }
   .tabview .tab-links li {
@@ -4902,28 +4193,26 @@ section > h2 {
 
 .tab-1 .tab-links {
   margin: 0;
-  border-bottom: 1px solid #b7b7b7; }
+  border-bottom: 1px solid var(--box-border); }
   .tab-1 .tab-links label {
     padding: 5px 10px 1px 10px;
     background: none;
     overflow: auto; }
   .tab-1 .tab-links .active, .tab-1 .tab-links .active label {
-    background: #fff;
-    border-bottom: 1px solid #fff; }
+    background: var(--button-colored-background);
+    border-bottom: 1px solid var(--button-colored-background); }
   .tab-1 .tab-links .active label {
-    border-top: 1px solid #b7b7b7;
-    border-left: 1px solid #b7b7b7;
-    border-right: 1px solid #b7b7b7; }
+    border-top: 1px solid var(--box-border);
+    border-left: 1px solid var(--box-border);
+    border-right: 1px solid var(--box-border); }
   .tab-1 .tab-links li {
     margin: 0 5px 0 0; }
 .tab-1 .tab-content {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  background: #fff;
-  border-left: 1px solid #b7b7b7;
-  border-right: 1px solid #b7b7b7;
-  border-bottom: 1px solid #b7b7b7;
+  background: var(--button-colored-background);
+  border-left: 1px solid var(--box-border);
+  border-right: 1px solid var(--box-border);
+  border-bottom: 1px solid var(--box-border);
   padding: 10px; }
 .tab-1.left {
   display: flex; }
@@ -4936,10 +4225,10 @@ section > h2 {
     .tab-1.left .tab-links label {
       padding-bottom: 5px; }
     .tab-1.left .tab-links .active label {
-      border-bottom: 1px solid #b7b7b7; }
+      border-bottom: 1px solid var(--box-border); }
   .tab-1.left .tab-content {
     width: 100%;
-    border-top: 1px solid #b7b7b7; }
+    border-top: 1px solid var(--box-border); }
 
 .tab-2 .tab-links label {
   padding: 5px 10px 5px 10px;
@@ -4947,35 +4236,10 @@ section > h2 {
 .tab-2 .tab-links li {
   margin: 0 5px 15px 0; }
 .tab-2 .tab-links .active a, .tab-2 .tab-links .active label {
-  border: 1px solid #b7b7b7;
-  background: #fff;
-  background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #f5f5ff));
-  background: -webkit-linear-gradient(top, #fff 0, #f5f5ff 100);
-  background: -o-linear-gradient(top, #fff 0, #f5f5ff 100);
-  background: -ms-linear-gradient(top, #fff 0, #f5f5ff 100);
-  background: linear-gradient(to bottom, #fff 0, #f5f5ff 100); }
+  color: var(--text-on-background-color-2);
+  border: 1px solid var(--box-border);
+  background: var(--button-colored-background); }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 table.fixed {
   table-layout: fixed; }
   table.fixed td {
@@ -4986,96 +4250,68 @@ table.fixed {
 table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
   display: none; }
 
-table .sort-asc, table .sort-desc {
-  padding-left: 5px;
+table .sort-asc, table .sort-desc, table .filter {
+  padding: 0 5px 0 5px;
   cursor: pointer; }
 
-.table {
-  background: none; }
-  .table caption {
-    color: #fff; }
-  .table thead {
-    color: #fff; }
-  .table.green caption, .table.green thead {
-    background: #42bd41; }
-  .table.red caption, .table.red thead {
-    background: #d01715; }
-  .table.blue caption, .table.blue thead {
-    background: #5778fd; }
-  .table.orange caption, .table.orange thead {
-    background: #FBA026; }
-  .table.lightblue caption, .table.lightblue thead {
-    background: #03a9f5; }
-  .table.yellow caption, .table.yellow thead {
-    background: #ffeb3c; }
-  .table.purple caption, .table.purple thead {
-    background: #673bb7; }
-  .table.pink caption, .table.pink thead {
-    background: #ffa6e3; }
-  .table.grey caption, .table.grey thead {
-    background: #dcdcdc; }
-  .table.darkred caption, .table.darkred thead {
-    background: #B8312F; }
-  .table.darkgreen caption, .table.darkgreen thead {
-    background: #009788; }
-  .table.darkblue caption, .table.darkblue thead {
-    background: #3f51b5; }
-
-table.table {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
+table.default {
   box-sizing: border-box;
   width: 100%;
   font-size: 0.9em;
   max-width: 100%;
   overflow: hidden; }
-  table.table caption {
-    background: #fff;
-    border-right: 1px solid #b7b7b7;
-    border-left: 1px solid #b7b7b7;
-    border-top: 1px solid #b7b7b7;
-    padding: 5px; }
-  table.table td {
+  table.default caption {
+    font-size: 1.5rem;
+    font-weight: 400;
+    border-bottom: 1px solid var(--box-border);
+    background: var(--table-caption-background);
+    padding: .5rem;
+    border-right: 1px solid var(--box-border);
+    border-left: 1px solid var(--box-border);
+    border-top: 1px solid var(--box-border);
+    text-align: left;
+    height: 3rem; }
+    table.default caption i {
+      font-size: .8rem; }
+  table.default td {
     padding: 5px 10px 5px 10px;
     white-space: nowrap; }
-  table.table tbody td:first-child {
-    border-left: 1px solid #b7b7b7; }
-  table.table tbody td:last-child {
-    border-right: 1px solid #b7b7b7; }
-  table.table tbody td {
-    border-top: 1px solid #b7b7b7;
-    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
-    box-shadow: inset 0px 1px 0px 0px #ffffff; }
-  table.table tbody tr {
-    height: 2rem; }
-    table.table tbody tr:nth-of-type(2n) {
-      background: #f8f8f8; }
-    table.table tbody tr:nth-of-type(2n+1) {
-      background: #fff; }
-    table.table tbody tr:hover {
-      background: #f0f0f0; }
-  table.table tbody tr:last-child td {
-    border-bottom: 1px solid #b7b7b7; }
-  table.table thead {
-    background: #fff; }
-    table.table thead td:first-child {
-      border-left: 1px solid #b7b7b7; }
-    table.table thead td:last-child {
-      border-right: 1px solid #b7b7b7; }
-  table.table .empty {
+  table.default tbody td:first-child {
+    border-left: 1px solid var(--box-border); }
+  table.default tbody td:last-child {
+    border-right: 1px solid var(--box-border); }
+  table.default tbody tr {
+    height: 3rem; }
+    table.default tbody tr:nth-of-type(2n) {
+      background: var(--table-row-background); }
+    table.default tbody tr:nth-of-type(2n+1) {
+      background: var(--table-row-background-alt); }
+    table.default tbody tr:hover {
+      background: var(--table-row-background-hover); }
+  table.default tbody tr td {
+    border-bottom: 1px solid var(--box-border); }
+  table.default thead {
+    height: 3rem;
+    background: var(--table-head-background); }
+    table.default thead td:first-child {
+      border-left: 1px solid var(--box-border); }
+    table.default thead td:last-child {
+      border-right: 1px solid var(--box-border); }
+    table.default thead td {
+      border-bottom: 1px solid var(--box-border); }
+  table.default .empty {
     text-align: center;
     color: #d8d8d8; }
-  table.table tfoot {
+  table.default tfoot {
     border: none; }
-    table.table tfoot label {
+    table.default tfoot label {
       float: left; }
-    table.table tfoot select {
+    table.default tfoot select {
       width: auto;
       float: right;
       margin: 0;
       min-width: 0px; }
-    table.table tfoot td {
+    table.default tfoot td {
       text-align: center;
       padding-top: 10px; }
 
@@ -5098,14 +4334,14 @@ table.list td {
       display: block;
       margin-bottom: .625em; }
       table.table tbody tr td:last-child {
-        border-bottom: 1px solid #b7b7b7; }
+        border-bottom: 1px solid var(--box-border); }
       table.table tbody tr:last-child td {
         border-bottom: none; }
         table.table tbody tr:last-child td:last-child {
-          border-bottom: 1px solid #b7b7b7; }
+          border-bottom: 1px solid var(--box-border); }
     table.table tbody td {
-      border-left: 1px solid #b7b7b7;
-      border-right: 1px solid #b7b7b7;
+      border-left: 1px solid var(--box-border);
+      border-right: 1px solid var(--box-border);
       display: block;
       font-size: .8rem;
       text-align: right;
@@ -5125,36 +4361,11 @@ table.list td {
 .nobreak {
   white-space: nowrap; }
 
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-/* Accordion */
-/* Log */
-/* Blockquote */
-/* Breadcrumbs */
-/* Input */
-/* Button */
-/* Canvas */
-/* Article */
-/* Form */
-/* Icon */
-/* Img */
-/* list */
-/* pagination */
-/* pre */
-/* tag */
 span.tag {
   cursor: pointer;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
   border-radius: 4px;
-  background-clip: padding-box;
   padding: 4px 6px 4px 6px;
-  font-size: 0.6rem;
-  color: #fff;
+  font-size: .8rem;
+  color: var(--text-on-background-color-2);
+  background: var(--button-colored-background);
   display: inline-block; }
-
-/*# sourceMappingURL=styles.css.map */
diff --git a/styles.scss b/styles.scss
index 65fa4b6..9970283 100644
--- a/styles.scss
+++ b/styles.scss
@@ -1,3 +1,3 @@
-@import "_vars", "clean", "_mixins", "default", "color", "size", "transformation", "alignment", "visibility", "animate", "grid";
-@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
+@import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid";
+@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
 @import "media";
diff --git a/tab.scss b/tab.scss
index d3c515b..0bf913b 100644
--- a/tab.scss
+++ b/tab.scss
@@ -1,13 +1,21 @@
-@import "_mixins", "_vars";
-
 .tabview {
     .tab-links {
+        color: #000;
         padding: 0.3rem 0 0 0;
 
         label {
-            text-shadow: 1px 1px 1px #fff;
             font-size: 0.9em;
             cursor: pointer;
+
+            &:hover {
+                color: var(--text-on-background-color-2);
+                background: var(--button-colored-background-hover);
+            }
+        }
+
+        .active label:hover {
+            color: var(--text-on-background-color-2);
+            background: var(--button-colored-background-hover);
         }
 
         .active a {
@@ -37,7 +45,7 @@
 .tab-1 {
     .tab-links {
         margin: 0;
-        border-bottom: 1px solid $content-border-color;
+        border-bottom: 1px solid var(--box-border);
 
         label {
             padding: 5px 10px 1px 10px;
@@ -46,14 +54,14 @@
         }
 
         .active, .active label {
-            background: $content-box-background-color;
-            border-bottom: 1px solid $content-box-background-color;
+            background: var(--button-colored-background);
+            border-bottom: 1px solid var(--button-colored-background);
         }
 
         .active label {
-            border-top: 1px solid $content-border-color;
-            border-left: 1px solid $content-border-color;
-            border-right: 1px solid $content-border-color;
+            border-top: 1px solid var(--box-border);
+            border-left: 1px solid var(--box-border);
+            border-right: 1px solid var(--box-border);
         }
 
         li {
@@ -62,11 +70,11 @@
     }
 
     .tab-content {
-        @include box-sizing(border-box);
-        background: $content-box-background-color;
-        border-left: 1px solid $content-border-color;
-        border-right: 1px solid $content-border-color;
-        border-bottom: 1px solid $content-border-color;
+        box-sizing: border-box;
+        background: var(--button-colored-background);
+        border-left: 1px solid var(--box-border);
+        border-right: 1px solid var(--box-border);
+        border-bottom: 1px solid var(--box-border);
 
         padding: 10px;
     }
@@ -88,13 +96,13 @@
             }
 
             .active label {
-                border-bottom: 1px solid $content-border-color;
+                border-bottom: 1px solid var(--box-border);
             }
         }
 
         .tab-content {
             width: 100%;
-            border-top: 1px solid $content-border-color;
+            border-top: 1px solid var(--box-border);
         }
     }
 }
@@ -111,8 +119,9 @@
         }
 
         .active a, .active label {
-            border: 1px solid $content-border-color;
-            @include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff);
+            color: var(--text-on-background-color-2);
+            border: 1px solid var(--box-border);
+            background: var(--button-colored-background)
         }
     }
 }
diff --git a/table.scss b/table.scss
index 26cb71f..0c90228 100644
--- a/table.scss
+++ b/table.scss
@@ -1,4 +1,4 @@
-@import "_mixins", "_vars";
+
 
 table.fixed {
     table-layout: fixed;
@@ -19,42 +19,31 @@ table .sort-asc, table .sort-desc, table .filter {
     cursor: pointer;
 }
 
-.table {
-    background: none;
-    caption {
-        color: #fff;
-    }
-
-    thead {
-        color: #fff;
-    }
-
-    @each $tuple in
-        'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
-        'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
-        'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
-        &.#{nth($tuple, 1)} {
-            caption, thead {
-                background: #{nth($tuple, 2)};
-            }
-        }
-    }
-}
-
-table.table {
-    @include box-sizing(border-box);
+table.default {
+    box-sizing: border-box;
     width: 100%;
     font-size: 0.9em;
     max-width: 100%;
     overflow: hidden;
 
     caption {
-        background: #fff;
-        border-right: 1px solid $content-border-color;
-        border-left: 1px solid $content-border-color;
-        border-top: 1px solid $content-border-color;
+        font-size: 1.5rem;
+        font-weight: 400;
+        border-bottom: 1px solid var(--box-border);
+        background: var(--table-caption-background);
+        padding: .5rem;
 
-        padding: 5px;
+        border-right: 1px solid var(--box-border);
+        border-left: 1px solid var(--box-border);
+        border-top: 1px solid var(--box-border);
+
+        text-align: left;
+
+        i {
+            font-size: .8rem;
+        }
+
+        height: 3rem;
     }
 
     td {
@@ -64,48 +53,48 @@ table.table {
 
     tbody {
         td:first-child {
-            border-left: 1px solid $content-border-color;
+            border-left: 1px solid var(--box-border);
         }
 
         td:last-child {
-            border-right: 1px solid $content-border-color;
-        }
-
-        td {
-            border-top: 1px solid $content-border-color;
-            @include box-shadow-top(#ffffff);
+            border-right: 1px solid var(--box-border);
         }
 
         tr {
-            height: 2rem;
+            height: 3rem;
 
             &:nth-of-type(2n) {
-                background: #f8f8f8;
+                background: var(--table-row-background);
             }
 
             &:nth-of-type(2n+1) {
-                background: #fff;
+                background: var(--table-row-background-alt);
             }
 
             &:hover {
-                background: #f0f0f0;
+                background: var(--table-row-background-hover);
             }
         }
 
-        tr:last-child td {
-            border-bottom: 1px solid $content-border-color;
+        tr td {
+            border-bottom: 1px solid var(--box-border);
         }
     }
 
     thead {
-        background: #fff;
+        height: 3rem;
+        background: var(--table-head-background);
 
         td:first-child {
-            border-left: 1px solid $content-border-color;
+            border-left: 1px solid var(--box-border);
         }
 
         td:last-child {
-            border-right: 1px solid $content-border-color;
+            border-right: 1px solid var(--box-border);
+        }
+
+        td {
+            border-bottom: 1px solid var(--box-border);
         }
     }
 
@@ -164,21 +153,21 @@ table.list {
                 margin-bottom: .625em;
 
                 td:last-child {
-                    border-bottom: 1px solid $content-border-color;
+                    border-bottom: 1px solid var(--box-border);
                 }
 
                 &:last-child td {
                     border-bottom: none;
 
                     &:last-child {
-                        border-bottom: 1px solid $content-border-color;
+                        border-bottom: 1px solid var(--box-border);
                     }
                 }
             }
 
             td {
-                border-left: 1px solid $content-border-color;
-                border-right: 1px solid $content-border-color;
+                border-left: 1px solid var(--box-border);
+                border-right: 1px solid var(--box-border);
                 display: block;
                 font-size: .8rem;
                 text-align: right;
diff --git a/tag.scss b/tag.scss
index 6ef26ed..0828c66 100644
--- a/tag.scss
+++ b/tag.scss
@@ -1,10 +1,11 @@
-@import "_mixins", "_vars";
+
 
 span.tag {
     cursor: pointer;
-    @include border-radius(4px);
+    border-radius: 4px;
     padding: 4px 6px 4px 6px;
-    font-size: $tag-font-size;
-    color: $tag-color;
+    font-size: .8rem;
+    color: var(--text-on-background-color-2);
+    background: var(--button-colored-background);
     display: inline-block;
 }
diff --git a/tests/app/forms_input.php b/tests/app/forms_input.php
index e64bbca..f430e23 100644
--- a/tests/app/forms_input.php
+++ b/tests/app/forms_input.php
@@ -14,7 +14,7 @@
                                         <div class="inputbackground">
                                             <input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
                                             <div id="input1-dropdown" class="dropdown" data-active="true">
-                                                <table id="a1" class="table darkred">
+                                                <table id="a1" class="default">
                                                     <thead>
                                                         <tr>
                                                             <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
@@ -54,7 +54,7 @@
                                         <div class="inputbackground">
                                             <input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
                                             <div id="input2-dropdown" class="dropdown" data-active="true">
-                                                <table id="a1" class="table darkred">
+                                                <table id="a1" class="default">
                                                     <thead>
                                                         <tr>
                                                             <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
@@ -73,7 +73,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <table class="table darkred">
+                                    <table class="default">
                                             <thead>
                                                 <tr>
                                                     <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
@@ -103,7 +103,7 @@
                                     </div>
                                 </div>
                                 <div id="input4-dropdown" class="dropdown" data-active="true">
-                                    <table id="a1" class="table darkred">
+                                    <table id="a1" class="default">
                                         <thead>
                                             <tr>
                                                 <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
@@ -120,7 +120,7 @@
                                         </tbody>
                                     </table>
                                 </div>
-                                <table class="table darkred">
+                                <table class="default">
                                     <thead>
                                         <tr>
                                             <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
@@ -144,7 +144,7 @@
                                         <div class="inputbackground">
                                             <input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
                                             <div id="input3-dropdown" class="dropdown" data-active="true">
-                                                <table id="a1" class="table darkred">
+                                                <table id="a1" class="default">
                                                     <thead>
                                                         <tr>
                                                             <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
diff --git a/tests/app/index.php b/tests/app/index.php
index e558375..049404c 100644
--- a/tests/app/index.php
+++ b/tests/app/index.php
@@ -33,7 +33,7 @@
                 </ul>
             </div>
             <div id="bar-b">
-                <span class="vC" id="ham-trigger">
+                <span id="ham-trigger">
                     <label for="nav-trigger"><i class="fa fa-bars"></i></label>
                 </span>
                 <span class="vC" id="logo" itemscope itemtype="http://schema.org/Organization">
diff --git a/tests/app/tables.php b/tests/app/tables.php
index db2a7df..e52a316 100644
--- a/tests/app/tables.php
+++ b/tests/app/tables.php
@@ -129,7 +129,7 @@
 <div class="row">
     <div class="col-xs-12">
         <div class="box wf-100">
-            <table id="tRemovable" class="table darkred" data-ui-element="tr" data-tag="form">
+            <table id="tRemovable" class="default" data-ui-element="tr" data-tag="form">
                 <caption>Table Title</caption>
                 <thead>
                 <tr>
diff --git a/tooltip.scss b/tooltip.scss
index 66469b3..b323e70 100644
--- a/tooltip.scss
+++ b/tooltip.scss
@@ -1,4 +1,4 @@
-@import "_mixins", "_vars";
+
 
 .tooltip > i {
     font-size: 0.85rem;