diff --git a/.stylelintrc.json b/.stylelintrc.json
index 91efffa001..f55e8f3922 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,7 +1,21 @@
 {
-    "extends": "stylelint-config-recommended-scss",
+    "extends": [
+        "stylelint-config-standard",
+        "stylelint-config-recommended-scss"
+    ],
     "rules": {
         "no-descending-specificity": null,
-        "no-duplicate-selectors": null
+        "no-duplicate-selectors": null,
+        "block-closing-brace-newline-after": ["always", {
+            "ignoreAtRules": ["if", "else"]
+        }],
+        "at-rule-empty-line-before": ["always", {
+            "except": [
+                "blockless-after-same-name-blockless",
+                "first-nested"
+            ],
+            "ignore": ["after-comment"],
+            "ignoreAtRules": ["else"]
+        }]
     }
 }
diff --git a/package.json b/package.json
index 4e0ab9821c..5cf48e6ad0 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "eslint": "^4.9.0",
     "stylelint": "^9.8.0",
     "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-config-standard": "^18.2.0",
     "stylelint-scss": "^3.4.0"
   },
   "scripts": {
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
index b5285144bc..e6a5fad6df 100644
--- a/themes/metro/scss/_common.scss
+++ b/themes/metro/scss/_common.scss
@@ -1,6 +1,7 @@
 // Common styles for the Metro theme
 
 // CSS Reset
+/* stylelint-disable-next-line selector-list-comma-newline-after */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
@@ -9,8 +10,17 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
 }
 
 /* HTML5 display-role reset for older browsers */
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
@@ -25,16 +35,16 @@ q {
 }
 
 blockquote {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     content: none;
   }
 }
 
 q {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     content: none;
   }
@@ -51,7 +61,8 @@ table {
   font-family: 'IcoMoon';
   src: local('☺');
   src: url('../fonts/IcoMoon.eot');
-  src: url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
     url('../fonts/IcoMoon.svg#IcoMoon') format('svg'),
     url('../fonts/IcoMoon.woff') format('woff'),
     url('../fonts/IcoMoon.ttf') format('truetype');
@@ -63,7 +74,8 @@ table {
   font-family: 'Open Sans';
   src: local('☺'), local('Open Sans'), local('OpenSans');
   src: url('../fonts/opensans-regular-webfont.eot');
-  src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-regular-webfont.woff') format('woff'),
     url('../fonts/opensans-regular-webfont.ttf') format('truetype');
   font-weight: normal;
@@ -74,7 +86,8 @@ table {
   font-family: 'Open Sans Light';
   src: local('☺'), local('Open Sans Light'), local('OpenSans-Light');
   src: url('../fonts/opensans-light-webfont.eot');
-  src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-light-webfont.woff') format('woff'),
     url('../fonts/opensans-light-webfont.ttf') format('truetype');
   font-weight: normal;
@@ -85,7 +98,8 @@ table {
   font-family: 'Open Sans Bold';
   src: local('☺'), local('Open Sans Bold'), local('OpenSans-Bold');
   src: url('../fonts/opensans-bold-webfont.eot');
-  src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-bold-webfont.woff') format('woff'),
     url('../fonts/opensans-bold-webfont.ttf') format('truetype');
   font-weight: normal;
@@ -96,7 +110,8 @@ table {
   font-family: 'Open Sans Extrabold';
   src: local('☺'), local('Open Sans Extrabold'), local('OpenSans-Extrabold');
   src: url('../fonts/opensans-extrabold-webfont.eot');
-  src: url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
+  src:
+    url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-extrabold-webfont.woff') format('woff'),
     url('../fonts/opensans-extrabold-webfont.ttf') format('truetype');
   font-weight: normal;
@@ -164,7 +179,7 @@ body#loginform {
     margin-#{$left}: auto;
     margin-#{$right}: auto;
 
-    &:before {
+    &::before {
       /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
       font-family: 'IcoMoon';
       font-size: 220px;
@@ -204,7 +219,7 @@ body#loginform {
   input {
     &.textfield {
       width: 100%;
-      border: 1px solid #ffffff;
+      border: 1px solid #fff;
       background: $navi-color;
       color: $th-color;
       box-sizing: border-box;
@@ -576,7 +591,6 @@ select {
   }
 }
 
-/******************************************************************************/
 /* classes */
 .clearfloat {
   clear: both;
@@ -696,7 +710,7 @@ div.tools {
     #{$left}: -9999px;
     position: relative;
 
-    &:before {
+    &::before {
       /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
       font-family: 'IcoMoon';
       content: "";
@@ -708,16 +722,16 @@ div.tools {
       #{$left}: 9995px;
     }
 
-    &:indeterminate:before {
+    &:indeterminate::before {
       content: "";
     }
 
-    &:checked:before {
+    &:checked::before {
       content: "";
     }
   }
 
-  .navigation input[type="checkbox"]:before {
+  .navigation input[type="checkbox"]::before {
     color: #fff;
   }
 
@@ -725,7 +739,7 @@ div.tools {
     #{$left}: -9999px;
     position: relative;
 
-    &:before {
+    &::before {
       /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
       font-family: 'IcoMoon';
       content: "";
@@ -737,13 +751,13 @@ div.tools {
       #{$left}: 9995px;
     }
 
-    &:checked:before {
+    &:checked::before {
       content: "";
     }
   }
 }
 
-tr.noclick td:first-child:before {
+tr.noclick td:first-child::before {
   content: "";
 }
 
@@ -942,7 +956,7 @@ img.lightbulb {
 /* Doc links in SQL */
 .cm-sql-doc {
   text-decoration: none;
-  border-bottom: 1px dotted #999999;
+  border-bottom: 1px dotted #999;
   color: inherit !important;
 }
 
@@ -1084,7 +1098,7 @@ fieldset.confirmation legend {
 .tblcomment {
   font-size: 70%;
   font-weight: normal;
-  color: #000099;
+  color: #009;
 }
 
 .tblHeaders {
@@ -1108,18 +1122,18 @@ div.tools,
     &:link,
     &:active,
     &:visited {
-      color: #0000ff;
+      color: #00f;
     }
 
     &:hover {
-      color: #ff0000;
+      color: #f00;
     }
   }
 }
 
 /* forbidden, no privileges */
 .noPrivileges {
-  color: #ff0000;
+  color: #f00;
   font-weight: bold;
 }
 
@@ -1155,7 +1169,6 @@ td.disabled {
   font-weight: bold;
 }
 
-/******************************************************************************/
 /* specific elements */
 
 /* topmenu */
@@ -1272,7 +1285,7 @@ fieldset.caution li,
 }
 
 fieldset.caution li {
-  &:before {
+  &::before {
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font-family: "IcoMoon";
     content: "";
@@ -1291,7 +1304,8 @@ fieldset.caution li {
     text-transform: uppercase;
     font-weight: normal;
   }
-  &:before {
+
+  &::before {
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font-family: "IcoMoon";
     content: "%";
@@ -1360,7 +1374,6 @@ ul {
     border-#{$right}: 0;
   }
 }
-/* end topmenu */
 
 /* zoom search */
 div#dataDisplay {
@@ -1390,7 +1403,7 @@ table {
         display: block;
 
         &:hover {
-          background-color: #ccffcc;
+          background-color: #cfc;
         }
       }
     }
@@ -1400,7 +1413,7 @@ table {
     }
 
     td.selected {
-      background-color: #ffcc99;
+      background-color: #fc9;
     }
   }
 }
@@ -1455,7 +1468,7 @@ div#tablestatistics table {
     white-space: nowrap;
     color: $button-color;
 
-    &:before {
+    &::before {
       padding-#{$left}: 5px;
       padding-#{$right}: 5px;
       /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
@@ -1532,8 +1545,8 @@ div#tablestatistics table {
   height: auto;
   overflow: visible;
   visibility: hidden;
-  background-color: #ffffcc;
-  color: #006600;
+  background-color: #ffc;
+  color: #060;
   border: 0.1em solid #000;
   padding: 0.5em;
 }
@@ -1869,7 +1882,6 @@ div {
     }
   }
 }
-/* end server variables */
 
 p.notice {
   margin: 1.5em 0;
@@ -1880,7 +1892,7 @@ p.notice {
 
   @if $direction == rtl {
     background-position: 99% 50%;
-    padding: 25px 10px 10px 10px
+    padding: 25px 10px 10px 10px;
   } @else {
     background-position: 10px 50%;
     padding: 10px 10px 10px 25px;
@@ -2101,7 +2113,7 @@ li {
       margin: 0 !important;
     }
 
-    &:after {
+    &::after {
       content: "Scheme: #{$color-scheme}";
       margin-#{$left}: 10px;
     }
@@ -2362,13 +2374,14 @@ input {
   &[type="password"].invalid_value,
   &[type="number"].invalid_value,
   &[type="date"].invalid_value .invalid_value {
-    background: #ffcccc;
+    background: #fcc;
   }
 }
 
 /**
   *  Ajax notification styling
   */
+
 /* additional styles */
 .ajax_notification {
   top: 0;
@@ -2986,7 +2999,7 @@ form {
   dd {
     margin-#{$left}: 0.5em;
 
-    &:before {
+    &::before {
       content: "\25B8  ";
     }
   }
@@ -3102,6 +3115,7 @@ form.append_fields_form .tblFooters {
       -webkit-box-sizing: border-box;
     }
   }
+
   select {
     width: 10em;
     box-sizing: border-box;
@@ -3217,6 +3231,7 @@ form.append_fields_form .tblFooters {
 .cPointer {
   $height: 20px;
   $width: 10px;
+
   height: $height;
   width: $width;
   margin-#{$left}: $height / -2;
@@ -3412,12 +3427,12 @@ form.append_fields_form .tblFooters {
   }
 
   .edit_box_posting {
-    background: #FFF url("../img/ajax_clock_small.gif") no-repeat right center;
+    background: #fff url("../img/ajax_clock_small.gif") no-repeat right center;
     padding-#{$right}: 1.5em;
   }
 
   .edit_area_loading {
-    background: #FFF url("../img/ajax_clock_small.gif") no-repeat center;
+    background: #fff url("../img/ajax_clock_small.gif") no-repeat center;
     height: 10em;
   }
 
@@ -3514,7 +3529,7 @@ div#page_content div {
     margin-top: 1em;
 
     table.data {
-      border-top: 0.1px solid #eeeeee;
+      border-top: 0.1px solid #eee;
     }
   }
 
@@ -3692,7 +3707,7 @@ table.show_create {
       position: relative;
     }
 
-    &:before {
+    &::before {
       #{$left}: -0.7em;
       position: absolute;
       content: ">";
@@ -3700,7 +3715,7 @@ table.show_create {
   }
 
   .query_input {
-    &:before {
+    &::before {
       #{$left}: -0.7em;
       position: absolute;
       content: ">";
@@ -3715,29 +3730,29 @@ table.show_create {
   }
 
   .message {
-    &:hover:before {
+    &:hover::before {
       color: #7cf;
       font-weight: bold;
     }
 
-    &.expanded:before {
+    &.expanded::before {
       content: "]";
     }
 
-    &.welcome:before {
+    &.welcome::before {
       display: none;
     }
 
     &.failed {
-      &:before,
-      &.expanded:before,
-      &:hover:before {
+      &::before,
+      &.expanded::before,
+      &:hover::before {
         content: "=";
         color: #944;
       }
     }
 
-    &.pending:before {
+    &.pending::before {
       opacity: 0.3;
     }
 
@@ -3959,15 +3974,15 @@ table.show_create {
       display: none;
     }
 
-    &:after {
+    &::after {
       content: "";
       display: table;
       clear: both;
     }
   }
 
-  .trace.welcome:after,
-  .debug > .welcome:after {
+  .trace.welcome::after,
+  .debug > .welcome::after {
     content: "";
     display: table;
     clear: both;
@@ -3988,7 +4003,7 @@ table.show_create {
   }
 }
 
-/* Code mirror console style*/
+/* Code mirror console style */
 
 .cm-s-pma {
   .CodeMirror-code {
@@ -4113,6 +4128,7 @@ table.show_create {
 
 .pma_drop_file_status {
   color: #235a81;
+
   span.underline:hover {
     cursor: pointer;
     text-decoration: underline;
@@ -4164,9 +4180,11 @@ meter {
   &[value="1"]::-webkit-meter-optimum-value {
     background: linear-gradient(white 3%, #e32929 5%, transparent 10%, #e32929);
   }
+
   &[value="2"]::-webkit-meter-optimum-value {
-    background: linear-gradient(white 3%, #ff6600 5%, transparent 10%, #ff6600);
+    background: linear-gradient(white 3%, #f60 5%, transparent 10%, #f60);
   }
+
   &[value="3"]::-webkit-meter-optimum-value {
     background: linear-gradient(white 3%, #ffd700 5%, transparent 10%, #ffd700);
   }
diff --git a/themes/metro/scss/_designer.scss b/themes/metro/scss/_designer.scss
index 5ba8014903..8a2279c791 100644
--- a/themes/metro/scss/_designer.scss
+++ b/themes/metro/scss/_designer.scss
@@ -66,7 +66,7 @@ canvas.designer {
   cursor: default;
 
   &:hover {
-    background-color: #ccffcc;
+    background-color: #cfc;
     color: #000;
     background-repeat: repeat-x;
     cursor: default;
@@ -79,7 +79,7 @@ canvas.designer {
   cursor: default;
 
   &:hover {
-    background-color: #ccffcc;
+    background-color: #cfc;
     color: #000;
     background-repeat: repeat-x;
     cursor: default;
@@ -89,10 +89,10 @@ canvas.designer {
 #designer_hint {
   white-space: nowrap;
   position: absolute;
-  background-color: #99ff99;
+  background-color: #9f9;
   color: #000;
   z-index: 3;
-  border: #00cc66 solid 1px;
+  border: #0c6 solid 1px;
   display: none;
 }
 
@@ -160,7 +160,7 @@ canvas.designer {
   &:hover {
     vertical-align: top;
     color: #fff;
-    background-color: #ff9966;
+    background-color: #f96;
     cursor: default;
     padding-#{$left}: 2px;
     padding-#{$right}: 2px;
@@ -179,7 +179,7 @@ canvas.designer {
   &:hover {
     vertical-align: top;
     color: #fff;
-    background-color: #ff9966;
+    background-color: #f96;
     cursor: default;
     text-align: center;
     font-weight: bold;
@@ -203,7 +203,7 @@ canvas.designer {
   }
 }
 
-/* ---------------------------------------------------------------------------*/
+/* --------------------------------------------------------------------------- */
 .bor {
   width: 10px;
   height: 10px;
@@ -218,8 +218,8 @@ canvas.designer {
 
 .designer_header {
   background-color: #f6f6f6;
-  border-top: 20px solid #ffffff;
-  color: #333333;
+  border-top: 20px solid #fff;
+  color: #333;
   display: block;
   height: 28px;
   margin-#{$left}: -20px;
@@ -346,6 +346,7 @@ a {
       border: 1px solid #999;
     }
   }
+
   &.active.trigger {
     background: #222 url("../img/designer/minus.png") 85% 55% no-repeat;
     z-index: 999;
@@ -377,6 +378,7 @@ a {
 
 #ab {
   min-width: 300px;
+
   .ui-accordion-content {
     padding: 0;
   }
diff --git a/themes/metro/scss/_icons.scss b/themes/metro/scss/_icons.scss
index 6c5bf13554..aed162c7bd 100644
--- a/themes/metro/scss/_icons.scss
+++ b/themes/metro/scss/_icons.scss
@@ -1,6 +1,6 @@
 .icon {
   margin: 0;
-  margin-#{$left}: .3em;
+  margin-#{$left}: 0.3em;
   padding: 0 !important;
   width: 16px;
   height: 16px;
diff --git a/themes/metro/scss/_jqplot.scss b/themes/metro/scss/_jqplot.scss
index abc2406590..35e27a0882 100644
--- a/themes/metro/scss/_jqplot.scss
+++ b/themes/metro/scss/_jqplot.scss
@@ -4,7 +4,7 @@
 // These will be cascaded down to all plot elements according to css rules
 .jqplot-target {
   position: relative;
-  color: #222222;
+  color: #222;
   font-family: $font-family;
   font-size: 1em;
 }
@@ -143,12 +143,12 @@
 
 .jqplot-meterGauge-tick {
   font-size: 0.75em;
-  color: #999999;
+  color: #999;
 }
 
 .jqplot-meterGauge-label {
   font-size: 1em;
-  color: #999999;
+  color: #999;
 }
 
 table {
@@ -158,14 +158,14 @@ table {
     margin-#{$left}: 12px;
     margin-#{$right}: 12px;
     background-color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     position: absolute;
     font-size: 0.75em;
   }
 
   &.jqplot-cursor-legend {
     background-color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     position: absolute;
     font-size: 0.75em;
   }
@@ -190,7 +190,7 @@ td {
 
 div {
   &.jqplot-table-legend-swatch-outline {
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     padding: 1px;
   }
 
@@ -216,14 +216,14 @@ div {
 }
 
 table.jqplot-cursor-tooltip {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   font-size: 0.75em;
 }
 
 .jqplot-cursor-tooltip,
 .jqplot-highlighter-tooltip,
 .jqplot-canvasOverlay-tooltip {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   font-size: 0.75em;
   white-space: nowrap;
   background: rgba(208, 208, 208, 0.5);
diff --git a/themes/metro/scss/_navigation.scss b/themes/metro/scss/_navigation.scss
index 98a595feda..6668509289 100644
--- a/themes/metro/scss/_navigation.scss
+++ b/themes/metro/scss/_navigation.scss
@@ -77,7 +77,7 @@
     height: 15px;
     line-height: 100%;
 
-    &:after {
+    &::after {
       font-family: $font-family-extra-bold;
       text-transform: uppercase;
       margin-#{$left}: 5px;
@@ -112,7 +112,7 @@
 }
 
 div#left_tableList li {
-  a:first-child:before {
+  a:first-child::before {
     color: $navi-pointer-color;
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font-family: "IcoMoon";
@@ -120,7 +120,7 @@ div#left_tableList li {
     margin: 10px;
   }
 
-  &:hover a:first-child:before {
+  &:hover a:first-child::before {
     color: $button-color;
   }
 }
@@ -165,7 +165,7 @@ img {
   margin: 0.3em auto 0;
 }
 
-/* Navigation tree*/
+/* Navigation tree */
 #pma_navigation_tree {
   margin: 0;
   margin-#{$left}: 10px;
@@ -392,9 +392,9 @@ li.fast_filter {
 
   input {
     width: 100%;
-    background-color: #ffffff;
-    border: 1px solid #cccccc;
-    color: #666666;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    color: #666;
     font-family: $font-family;
     padding: 2px;
   }
diff --git a/themes/metro/scss/_variables.scss b/themes/metro/scss/_variables.scss
index ce5bbe8d41..caf4823628 100644
--- a/themes/metro/scss/_variables.scss
+++ b/themes/metro/scss/_variables.scss
@@ -13,139 +13,139 @@ $font-family-fixed: Consolas, "Lucida Grande", monospace;
 // Set this value for the desired color scheme
 $color-scheme: win !default;
 
-$navi-color: #EEEEEE;
+$navi-color: #eee;
 $navi-background: #377796;
-$navi-background-light: #428EB4;
-$navi-pointer-color: #333333;
+$navi-background-light: #428eb4;
+$navi-pointer-color: #333;
 $navi-pointer-background: #377796;
-$navi-database-name-color: #333333;
-$navi-hover-background: #428EB4;
-$main-color: #444444;
-$main-background: #FFFFFF;
+$navi-database-name-color: #333;
+$navi-hover-background: #428eb4;
+$main-color: #444;
+$main-background: #fff;
 $browse-pointer-color: #377796;
-$browse-marker-color: #000000;
-$browse-warning-color: #D44A26;
-$browse-success-color: #01A31C;
-$browse-gray-color: #CCCCCC;
-$browse-marker-background: #EEEEEE;
-$border-color: #DDDDDD;
-$button-color: #FFFFFF;
+$browse-marker-color: #000;
+$browse-warning-color: #d44a26;
+$browse-success-color: #01a31c;
+$browse-gray-color: #ccc;
+$browse-marker-background: #eee;
+$border-color: #ddd;
+$button-color: #fff;
 $button-background: #377796;
-$button-hover: #428EB4;
-$th-background: #F7F7F7;
-$th-disabled-background: #F3F3F3;
-$th-color: #666666;
-$th-pointer-color: #000000;
-$bg-one: #F7F7F7;
-$bg-two: #FFFFFF;
-$blue-header: #3A7EAD;
+$button-hover: #428eb4;
+$th-background: #f7f7f7;
+$th-disabled-background: #f3f3f3;
+$th-color: #666;
+$th-pointer-color: #000;
+$bg-one: #f7f7f7;
+$bg-two: #fff;
+$blue-header: #3a7ead;
 
 @if $color-scheme == teal {
-  $navi-color: #FFFFFF;
-  $navi-background: #004D60;
-  $navi-background-light: #04627C;
-  $navi-pointer-color: #666666;
-  $navi-pointer-background: #004D60;
-  $navi-database-name-color: #FFFFFF;
+  $navi-color: #fff;
+  $navi-background: #004d60;
+  $navi-background-light: #04627c;
+  $navi-pointer-color: #666;
+  $navi-pointer-background: #004d60;
+  $navi-database-name-color: #fff;
   $navi-hover-background: #216475;
-  $main-color: #444444;
-  $main-background: #FFFFFF;
+  $main-color: #444;
+  $main-background: #fff;
   $browse-pointer-color: #004d60;
-  $browse-marker-color: #000000;
-  $browse-warning-color: #D44A26;
-  $browse-success-color: #01A31C;
-  $browse-gray-color: #CCCCCC;
-  $browse-marker-background: #EEEEEE;
-  $border-color: #DDDDDD;
-  $button-color: #FFFFFF;
-  $button-background: #AAAAAA;
-  $button-hover: #000000;
-  $th-background: #F7F7F7;
-  $th-disabled-background: #F3F3F3;
-  $th-color: #666666;
-  $th-pointer-color: #000000;
-  $bg-one: #F7F7F7;
-  $bg-two: #FFFFFF;
-  $blue-header: #3A7EAD;
+  $browse-marker-color: #000;
+  $browse-warning-color: #d44a26;
+  $browse-success-color: #01a31c;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #aaa;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #3a7ead;
 } @else if $color-scheme == redmond {
-  $navi-color: #FFFFFF;
+  $navi-color: #fff;
   $navi-background: #780505;
-  $navi-background-light: #A10707;
-  $navi-pointer-color: #666666;
+  $navi-background-light: #a10707;
+  $navi-pointer-color: #666;
   $navi-pointer-background: #780505;
-  $navi-database-name-color: #FFFFFF;
-  $navi-hover-background: #A10707;
-  $main-color: #444444;
-  $main-background: #FFFFFF;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #a10707;
+  $main-color: #444;
+  $main-background: #fff;
   $browse-pointer-color: #780505;
-  $browse-marker-color: #000000;
-  $browse-warning-color: #D44A26;
-  $browse-success-color: #01A31C;
-  $browse-gray-color: #CCCCCC;
-  $browse-marker-background: #EEEEEE;
-  $border-color: #DDDDDD;
-  $button-color: #FFFFFF;
-  $button-background: #AAAAAA;
-  $button-hover: #000000;
-  $th-background: #F7F7F7;
-  $th-disabled-background: #F3F3F3;
-  $th-color: #666666;
-  $th-pointer-color: #000000;
-  $bg-one: #F7F7F7;
-  $bg-two: #FFFFFF;
-  $blue-header: #3A7EAD;
+  $browse-marker-color: #000;
+  $browse-warning-color: #d44a26;
+  $browse-success-color: #01a31c;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #aaa;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #3a7ead;
 } @else if $color-scheme == blueeyes {
-  $navi-color: #FFFFFF;
+  $navi-color: #fff;
   $navi-background: #377796;
-  $navi-background-light: #428EB4;
-  $navi-pointer-color: #666666;
+  $navi-background-light: #428eb4;
+  $navi-pointer-color: #666;
   $navi-pointer-background: #377796;
-  $navi-database-name-color: #FFFFFF;
-  $navi-hover-background: #428EB4;
-  $main-color: #444444;
-  $main-background: #FFFFFF;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #428eb4;
+  $main-color: #444;
+  $main-background: #fff;
   $browse-pointer-color: #377796;
-  $browse-marker-color: #000000;
-  $browse-warning-color: #D44A26;
-  $browse-success-color: #01A31C;
-  $browse-gray-color: #CCCCCC;
-  $browse-marker-background: #EEEEEE;
-  $border-color: #DDDDDD;
-  $button-color: #FFFFFF;
+  $browse-marker-color: #000;
+  $browse-warning-color: #d44a26;
+  $browse-success-color: #01a31c;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
   $button-background: #377796;
-  $button-hover: #000000;
-  $th-background: #F7F7F7;
-  $th-disabled-background: #F3F3F3;
-  $th-color: #666666;
-  $th-pointer-color: #000000;
-  $bg-one: #F7F7F7;
-  $bg-two: #FFFFFF;
-  $blue-header: #3A7EAD;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #3a7ead;
 } @else if $color-scheme == mono {
-  $navi-color: #FFFFFF;
-  $navi-background: #666666;
-  $navi-background-light: #999999;
-  $navi-pointer-color: #666666;
-  $navi-pointer-background: #666666;
-  $navi-database-name-color: #FFFFFF;
-  $navi-hover-background: #999999;
-  $main-color: #444444;
-  $main-background: #FFFFFF;
-  $browse-pointer-color: #666666;
-  $browse-marker-color: #000000;
-  $browse-warning-color: #666666;
-  $browse-success-color: #888888;
-  $browse-gray-color: #CCCCCC;
-  $browse-marker-background: #EEEEEE;
-  $border-color: #DDDDDD;
-  $button-color: #FFFFFF;
-  $button-background: #AAAAAA;
-  $button-hover: #000000;
-  $th-background: #F7F7F7;
-  $th-disabled-background: #F3F3F3;
-  $th-color: #666666;
-  $th-pointer-color: #000000;
-  $bg-one: #F7F7F7;
-  $bg-two: #FFFFFF;
-  $blue-header: #555555;
+  $navi-color: #fff;
+  $navi-background: #666;
+  $navi-background-light: #999;
+  $navi-pointer-color: #666;
+  $navi-pointer-background: #666;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #999;
+  $main-color: #444;
+  $main-background: #fff;
+  $browse-pointer-color: #666;
+  $browse-marker-color: #000;
+  $browse-warning-color: #666;
+  $browse-success-color: #888;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #aaa;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #555;
 }
diff --git a/themes/metro/scss/theme-rtl.scss b/themes/metro/scss/theme-rtl.scss
index eca2454041..251a1f01c9 100644
--- a/themes/metro/scss/theme-rtl.scss
+++ b/themes/metro/scss/theme-rtl.scss
@@ -1,2 +1,3 @@
 $direction: rtl;
+
 @import "theme";
diff --git a/themes/metro/scss/theme.scss b/themes/metro/scss/theme.scss
index b05caefc93..47302761e4 100644
--- a/themes/metro/scss/theme.scss
+++ b/themes/metro/scss/theme.scss
@@ -1,7 +1,5 @@
 @import "../../pmahomme/scss/direction";
-
 @import "variables";
-
 @import "common";
 @import "enum-editor";
 @import "gis";
diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss
index e4e5c2274e..ef026f081b 100644
--- a/themes/original/scss/_common.scss
+++ b/themes/original/scss/_common.scss
@@ -62,14 +62,14 @@ h3 {
 
 a {
   text-decoration: none;
-  color: #0000ff;
+  color: #00f;
   cursor: pointer;
 
   &:link,
   &:visited,
   &:active {
     text-decoration: none;
-    color: #0000ff;
+    color: #00f;
     cursor: pointer;
   }
 }
@@ -77,26 +77,26 @@ a {
 button.mult_submit,
 .checkall_box + label {
   text-decoration: none;
-  color: #0000ff;
+  color: #00f;
   cursor: pointer;
 }
 
 a:hover {
   text-decoration: underline;
-  color: #ff0000;
+  color: #f00;
 }
 
 button.mult_submit {
   &:hover,
   &:focus {
     text-decoration: underline;
-    color: #ff0000;
+    color: #f00;
   }
 }
 
 .checkall_box + label:hover {
   text-decoration: underline;
-  color: #ff0000;
+  color: #f00;
 }
 
 dfn {
@@ -155,7 +155,7 @@ fieldset {
 
   legend {
     font-weight: bold;
-    color: #444444;
+    color: #444;
     background-color: transparent;
   }
 }
@@ -253,10 +253,11 @@ td.vbottom {
 }
 
 div.tools {
-  border: 1px solid #000000;
+  border: 1px solid #000;
   padding: 0.2em;
   margin-top: 0;
   margin-bottom: 0.5em;
+
   /* avoid a thick line since this should be used under another fieldset */
   border-top: 0;
   text-align: $right;
@@ -267,6 +268,7 @@ div.tools {
 fieldset.tblFooters {
   margin-top: 0;
   margin-bottom: 0.5em;
+
   /* avoid a thick line since this should be used under another fieldset */
   border-top: 0;
   text-align: $right;
@@ -421,15 +423,15 @@ img.lightbulb {
 .pdflayout {
   overflow: hidden;
   clip: inherit;
-  background-color: #ffffff;
+  background-color: #fff;
   display: none;
-  border: 1px solid #000000;
+  border: 1px solid #000;
   position: relative;
 }
 
 .pdflayout_table {
   background: #d3dce3;
-  color: #000000;
+  color: #000;
   overflow: hidden;
   clip: inherit;
   z-index: 2;
@@ -438,7 +440,7 @@ img.lightbulb {
   cursor: move;
   position: absolute;
   font-size: 80%;
-  border: 1px dashed #000000;
+  border: 1px dashed #000;
 }
 
 /* Doc links in SQL */
@@ -522,19 +524,19 @@ div {
 }
 
 .success {
-  color: #000000;
+  color: #000;
   background-color: #f0fff0;
 }
 
 h1.success,
 div.success,
 .success h1 {
-  border-color: #00ff00;
+  border-color: #0f0;
 }
 
 .notice {
-  color: #000000;
-  background-color: #ffffdd;
+  color: #000;
+  background-color: #ffd;
 }
 
 h1.notice,
@@ -544,32 +546,32 @@ div.notice,
 }
 
 .error {
-  background-color: #ffffcc;
-  color: #ff0000;
+  background-color: #ffc;
+  color: #f00;
 }
 
 h1.error {
-  border-color: #ff0000;
+  border-color: #f00;
 }
 
 div.error {
-  border-color: #ff0000;
+  border-color: #f00;
 
   h1 {
-    border-color: #ff0000;
+    border-color: #f00;
   }
 }
 
 .confirmation {
-  background-color: #ffffcc;
+  background-color: #ffc;
 }
 
 fieldset.confirmation {
-  border: 0.1em solid #ff0000;
+  border: 0.1em solid #f00;
 
   legend {
-    border-#{$left}: 0.1em solid #ff0000;
-    border-#{$right}: 0.1em solid #ff0000;
+    border-#{$left}: 0.1em solid #f00;
+    border-#{$right}: 0.1em solid #f00;
     font-weight: bold;
     background-image: url("../img/s_really.png");
     background-repeat: no-repeat;
@@ -593,7 +595,7 @@ fieldset.confirmation {
 .tblcomment {
   font-size: 70%;
   font-weight: normal;
-  color: #000099;
+  color: #009;
 }
 
 .tblHeaders {
@@ -613,11 +615,11 @@ div.tools,
   &:link,
   &:active,
   &:visited {
-    color: #0000ff;
+    color: #00f;
   }
 
   &:hover {
-    color: #ff0000;
+    color: #f00;
   }
 }
 
@@ -625,11 +627,11 @@ div.tools a {
   &:link,
   &:visited,
   &:active {
-    color: #0000ff;
+    color: #00f;
   }
 
   &:hover {
-    color: #ff0000;
+    color: #f00;
   }
 }
 
@@ -637,34 +639,34 @@ div.tools a {
   &:link,
   &:active,
   &:visited {
-    color: #0000ff;
+    color: #00f;
   }
 
   &:hover {
-    color: #ff0000;
+    color: #f00;
   }
 }
 
 /* forbidden, no privilegs */
 .noPrivileges {
-  color: #ff0000;
+  color: #f00;
   font-weight: bold;
 }
 
 /* disabled text */
 
 .disabled {
-  color: #666666;
+  color: #666;
 
   a {
     &:link,
     &:active,
     &:visited {
-      color: #666666;
+      color: #666;
     }
 
     &:hover {
-      color: #666666;
+      color: #666;
       text-decoration: none;
     }
   }
@@ -672,7 +674,7 @@ div.tools a {
 
 tr.disabled td,
 td.disabled {
-  background-color: #cccccc;
+  background-color: #ccc;
 }
 
 .nowrap {
@@ -762,7 +764,7 @@ form.login label {
 }
 
 .central_columns_navigation {
-  padding: 1.5% 0em !important;
+  padding: 1.5% 0 !important;
 }
 
 .central_columns_add_column {
@@ -795,7 +797,6 @@ form.login label {
   display: inline-block;
 }
 
-/******************************************************************************/
 /* specific elements */
 
 /* topmenu */
@@ -854,7 +855,7 @@ ul {
 
 span {
   &.caution {
-    color: #ff0000;
+    color: #f00;
   }
 
   &.success {
@@ -863,11 +864,11 @@ span {
 }
 
 fieldset.caution a {
-  color: #ff0000;
+  color: #f00;
 
   &:hover {
-    color: #ffffff;
-    background-color: #ff0000;
+    color: #fff;
+    background-color: #f00;
   }
 }
 
@@ -943,7 +944,6 @@ ul {
     border-bottom: 1pt solid $main-background;
   }
 }
-/* end topmenu */
 
 /* zoom search */
 div#dataDisplay {
@@ -973,7 +973,7 @@ table {
         display: block;
 
         &:hover {
-          background-color: #ccffcc;
+          background-color: #cfc;
         }
       }
     }
@@ -983,7 +983,7 @@ table {
     }
 
     td.selected {
-      background-color: #ffcc99;
+      background-color: #fc9;
     }
   }
 }
@@ -1081,9 +1081,9 @@ div#tablestatistics table {
   height: auto;
   overflow: visible;
   visibility: hidden;
-  background-color: #ffffcc;
-  color: #006600;
-  border: 0.1em solid #000000;
+  background-color: #ffc;
+  color: #060;
+  border: 0.1em solid #000;
   padding: 0.5em;
 }
 
@@ -1397,14 +1397,11 @@ div#profilingchart {
   bottom: 24px;
 }
 
-/* end profiling */
-
 /* table charting */
 .chartOption {
   float: $left;
   margin-#{$right}: 40px;
 }
-/* end table charting */
 
 /* querybox */
 
@@ -1712,13 +1709,13 @@ input {
   &[type="password"].invalid_value,
   &[type="number"].invalid_value,
   &[type="date"].invalid_value {
-    background: #ffcccc;
+    background: #fcc;
   }
 }
 
 select.invalid_value,
 .invalid_value {
-  background: #ffcccc;
+  background: #fcc;
 }
 
 /**
@@ -1790,13 +1787,13 @@ select.invalid_value,
   }
 
   h3 {
-    border-bottom: 1px #999999 solid;
+    border-bottom: 1px #999 solid;
     font-size: 110%;
   }
 }
 
 .importoptions h3 {
-  border-bottom: 1px #999999 solid;
+  border-bottom: 1px #999 solid;
   font-size: 110%;
 }
 
@@ -2261,7 +2258,7 @@ fieldset {
   dd {
     margin-#{$left}: 0.5em;
 
-    &:before {
+    &::before {
       content: "\25B8  ";
     }
   }
@@ -2510,6 +2507,7 @@ fieldset {
 .cPointer {
   $height: 20px;
   $width: 10px;
+
   height: $height;
   width: $width;
   margin-top: $height / -2;
@@ -2763,7 +2761,7 @@ body .ui-widget {
 }
 
 .ui-dialog fieldset legend a {
-  color: #0000ff;
+  color: #00f;
 }
 
 .ui-draggable {
@@ -2800,7 +2798,7 @@ div#page_content div {
     margin-top: 1em;
 
     table.data {
-      border-top: 0.1px solid #eeeeee;
+      border-top: 0.1px solid #eee;
     }
   }
 
@@ -2983,7 +2981,7 @@ table.show_create {
       position: relative;
     }
 
-    &:before {
+    &::before {
       #{$left}: -0.7em;
       position: absolute;
       content: ">";
@@ -2991,7 +2989,7 @@ table.show_create {
   }
 
   .query_input {
-    &:before {
+    &::before {
       #{$left}: -0.7em;
       position: absolute;
       content: ">";
@@ -3006,29 +3004,29 @@ table.show_create {
   }
 
   .message {
-    &:hover:before {
+    &:hover::before {
       color: #7cf;
       font-weight: bold;
     }
 
-    &.expanded:before {
+    &.expanded::before {
       content: "]";
     }
 
-    &.welcome:before {
+    &.welcome::before {
       display: none;
     }
 
     &.failed {
-      &:before,
-      &.expanded:before,
-      &:hover:before {
+      &::before,
+      &.expanded::before,
+      &:hover::before {
         content: "=";
         color: #944;
       }
     }
 
-    &.pending:before {
+    &.pending::before {
       opacity: 0.3;
     }
 
@@ -3156,6 +3154,7 @@ table.show_create {
     width: 100%;
     position: absolute;
     top: 0;
+
     /* For support IE8, this layer doesn't use filter:opacity or opacity,
     js code will fade this layer opacity to 0.18(using animation) */
     background: #666;
@@ -3258,15 +3257,15 @@ table.show_create {
       display: none;
     }
 
-    &:after {
+    &::after {
       content: "";
       display: table;
       clear: both;
     }
   }
 
-  .trace.welcome:after,
-  .debug > .welcome:after {
+  .trace.welcome::after,
+  .debug > .welcome::after {
     content: "";
     display: table;
     clear: both;
@@ -3287,7 +3286,7 @@ table.show_create {
   }
 }
 
-/* Code mirror console style*/
+/* Code mirror console style */
 
 .cm-s-pma {
   .CodeMirror-code {
@@ -3496,7 +3495,7 @@ span.drag_icon {
 th {
   &.header {
     cursor: pointer;
-    color: #0000ff;
+    color: #00f;
 
     &:hover {
       text-decoration: underline;
@@ -3582,15 +3581,15 @@ body {
 
   .ui-dialog {
     padding: 0;
-    border-color: #000000;
+    border-color: #000;
 
     .ui-dialog-titlebar {
       padding: 0.3em 0.5em;
       border: none;
-      border-bottom: 1px solid #000000;
+      border-bottom: 1px solid #000;
 
       button {
-        border: 1px solid #999999;
+        border: 1px solid #999;
       }
     }
 
@@ -3600,12 +3599,12 @@ body {
 
     .ui-dialog-buttonpane {
       background: #d3dce3;
-      border-top: 1px solid #000000;
+      border-top: 1px solid #000;
 
       button {
         margin: 0.1em 0 0.1em 0.4em;
-        border: 1px solid #999999;
-        color: #000000;
+        border: 1px solid #999;
+        color: #000;
       }
     }
 
@@ -3620,6 +3619,7 @@ body {
 }
 
 /* templates/database/designer */
+
 /* side menu */
 #name-panel {
   overflow: hidden;
diff --git a/themes/original/scss/_icons.scss b/themes/original/scss/_icons.scss
index 50428433dc..f04edf0323 100644
--- a/themes/original/scss/_icons.scss
+++ b/themes/original/scss/_icons.scss
@@ -1,6 +1,6 @@
 .icon {
   margin: 0;
-  margin-#{$left}: .3em;
+  margin-#{$left}: 0.3em;
   padding: 0 !important;
   width: 16px;
   height: 16px;
diff --git a/themes/original/scss/_variables.scss b/themes/original/scss/_variables.scss
index 73a0ac8ada..adaadd81f0 100644
--- a/themes/original/scss/_variables.scss
+++ b/themes/original/scss/_variables.scss
@@ -6,37 +6,37 @@
 $navi-width: 240px;
 
 // foreground (text) color for the navi frame
-$navi-color: #000000;
+$navi-color: #000;
 
 // background for the navi frame
-$navi-background: #D0DCE0;
+$navi-background: #d0dce0;
 
 // foreground (text) color of the pointer in navi frame
-$navi-pointer-color: #000000;
+$navi-pointer-color: #000;
 
 // background of the pointer in navi frame
-$navi-pointer-background: #9999CC;
+$navi-pointer-background: #99c;
 
 // main frame
 
 // foreground (text) color for the main frame
-$main-color: #000000;
+$main-color: #000;
 
 // background for the main frame
-$main-background: #F5F5F5;
+$main-background: #f5f5f5;
 
 // foreground (text) color of the pointer in browse mode
-$browse-pointer-color: #000000;
+$browse-pointer-color: #000;
 
 // background of the pointer in browse mode
-$browse-pointer-background: #CCFFCC;
+$browse-pointer-background: #cfc;
 
 // foreground (text) color of the marker (visually marks row by clicking on it)
 // in browse mode
-$browse-marker-color: #000000;
+$browse-marker-color: #000;
 
 // background of the marker (visually marks row by clicking on it) in browse mode
-$browse-marker-background: #FFCC99;
+$browse-marker-background: #fc9;
 
 // fonts
 
@@ -51,10 +51,10 @@ $font-family-fixed: monospace;
 // border
 $border: 0;
 // table header and footer color
-$th-background: #D3DCE3;
+$th-background: #d3dce3;
 // table header and footer background
-$th-color: #000000;
+$th-color: #000;
 // table data row background
-$bg-one: #E5E5E5;
+$bg-one: #e5e5e5;
 // table data row background, alternate
-$bg-two: #D5D5D5;
+$bg-two: #d5d5d5;
diff --git a/themes/original/scss/theme-rtl.scss b/themes/original/scss/theme-rtl.scss
index eca2454041..251a1f01c9 100644
--- a/themes/original/scss/theme-rtl.scss
+++ b/themes/original/scss/theme-rtl.scss
@@ -1,2 +1,3 @@
 $direction: rtl;
+
 @import "theme";
diff --git a/themes/original/scss/theme.scss b/themes/original/scss/theme.scss
index a70218a1e7..ec8c95848c 100644
--- a/themes/original/scss/theme.scss
+++ b/themes/original/scss/theme.scss
@@ -1,7 +1,5 @@
 @import "../../pmahomme/scss/direction";
-
 @import "variables";
-
 @import "common";
 @import "../../pmahomme/scss/enum-editor";
 @import "../../pmahomme/scss/gis";
diff --git a/themes/pmahomme/scss/_codemirror.scss b/themes/pmahomme/scss/_codemirror.scss
index 7d077f792c..83fb5ad1e3 100644
--- a/themes/pmahomme/scss/_codemirror.scss
+++ b/themes/pmahomme/scss/_codemirror.scss
@@ -34,6 +34,7 @@ span {
   &.cm-comment {
     color: #808000;
   }
+
   &.cm-mysql-string {
     color: #008000;
   }
diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss
index 0bf4201bb2..c0afca33d7 100644
--- a/themes/pmahomme/scss/_common.scss
+++ b/themes/pmahomme/scss/_common.scss
@@ -2,7 +2,6 @@
  * Common styles for the pmahomme theme
  */
 
-/******************************************************************************/
 /* general tags */
 html {
   font-size: 82%;
@@ -147,12 +146,12 @@ button.mult_submit {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
-    background-image: linear-gradient(#ffffff, #e0e0e0);
+    background-image: linear-gradient(#fff, #e0e0e0);
 
     &.active {
       border: 1px solid #666;
       box-shadow: 0 0 2px #999;
-      background: linear-gradient(#bbbbbb, #ffffff);
+      background: linear-gradient(#bbb, #fff);
     }
   }
 }
@@ -170,7 +169,7 @@ th {
   font-weight: bold;
   color: $th-color;
   background: #f3f3f3;
-  background: linear-gradient(#ffffff, #cccccc);
+  background: linear-gradient(#fff, #ccc);
 }
 
 a img {
@@ -389,7 +388,7 @@ input {
   &[type=submit]:hover,
   &[type=button]:hover {
     position: relative;
-    background: linear-gradient(#ffffff, #dddddd);
+    background: linear-gradient(#fff, #ddd);
     cursor: pointer;
   }
 }
@@ -503,7 +502,7 @@ fieldset {
   fieldset {
     margin: 0.8em;
     border: 1px solid #aaa;
-    background: #E8E8E8;
+    background: #e8e8e8;
   }
 
   legend {
@@ -580,11 +579,10 @@ select {
   margin: 6px;
 
   &[multiple] {
-    background: linear-gradient(#ffffff, #f2f2f2);
+    background: linear-gradient(#fff, #f2f2f2);
   }
 }
 
-/******************************************************************************/
 /* classes */
 .clearfloat {
   clear: both;
@@ -683,9 +681,11 @@ td.vbottom {
 
 div.tools {
   padding: 0.2em;
+
   a {
     color: #3a7ead !important;
   }
+
   margin-top: 0;
   margin-bottom: 0.5em;
   // avoid a thick line since this should be used under another fieldset
@@ -750,7 +750,7 @@ table tbody:first-of-type tr:nth-child(even),
 table tbody:first-of-type tr:nth-child(even) th,
 #table_index tbody:nth-of-type(even) tr,
 #table_index tbody:nth-of-type(even) th {
-  background: #DFDFDF;
+  background: #dfdfdf;
 }
 
 table tr {
@@ -862,7 +862,7 @@ img.lightbulb {
 }
 
 .pdflayout_table {
-  background: #D3DCE3;
+  background: #d3dce3;
   color: #000;
   overflow: hidden;
   clip: inherit;
@@ -961,7 +961,7 @@ div.success {
 }
 
 .success h1 {
-  border-color: #00FF00;
+  border-color: #0f0;
 }
 
 .notice {
@@ -992,7 +992,7 @@ div.error {
   border-color: #333;
 
   h1 {
-    border-color: #ff0000;
+    border-color: #f00;
   }
 }
 
@@ -1010,7 +1010,7 @@ div.error {
 .tblcomment {
   font-size: 70%;
   font-weight: normal;
-  color: #000099;
+  color: #009;
 }
 
 .tblHeaders {
@@ -1030,7 +1030,7 @@ div.tools,
   &:link,
   &:active,
   &:visited {
-    color: #0000FF;
+    color: #00f;
   }
 }
 
@@ -1038,7 +1038,7 @@ div.tools a {
   &:link,
   &:visited,
   &:active {
-    color: #0000FF;
+    color: #00f;
   }
 }
 
@@ -1046,19 +1046,19 @@ div.tools a {
   &:link,
   &:active,
   &:visited {
-    color: #0000FF;
+    color: #00f;
   }
 }
 
 .tblHeaders a:hover,
 div.tools a:hover,
 .tblFooters a:hover {
-  color: #FF0000;
+  color: #f00;
 }
 
 // forbidden, no privileges
 .noPrivileges {
-  color: #FF0000;
+  color: #f00;
   font-weight: bold;
 }
 
@@ -1171,7 +1171,7 @@ form.login {
 }
 
 .central_columns_navigation {
-  padding: 1.5% 0em !important;
+  padding: 1.5% 0 !important;
 }
 
 .central_columns_add_column {
@@ -1204,7 +1204,6 @@ form.login {
   display: inline-block;
 }
 
-/******************************************************************************/
 /* specific elements */
 
 #topmenu {
@@ -1253,7 +1252,7 @@ ul {
 }
 
 .menucontainer {
-  background: linear-gradient(#ffffff, #dcdcdc);
+  background: linear-gradient(#fff, #dcdcdc);
   border-top: 1px solid #aaa;
 }
 
@@ -1281,7 +1280,7 @@ ul#topmenu2 a {
 
 span {
   &.caution {
-    color: #FF0000;
+    color: #f00;
   }
 
   &.success {
@@ -1290,11 +1289,11 @@ span {
 }
 
 fieldset.caution a {
-  color: #FF0000;
+  color: #f00;
 
   &:hover {
     color: #fff;
-    background-color: #FF0000;
+    background-color: #f00;
   }
 }
 
@@ -1404,17 +1403,17 @@ table {
         display: block;
 
         &:hover {
-          background-color: #CCFFCC;
+          background-color: #cfc;
         }
       }
     }
 
     th {
-      background-color: #D3DCE3;
+      background-color: #d3dce3;
     }
 
     td.selected {
-      background-color: #FFCC99;
+      background-color: #fc9;
     }
   }
 }
@@ -1504,7 +1503,7 @@ div#tablestatistics table {
   font-style: italic;
   white-space: nowrap;
   margin-#{$left}: 10px;
-  color: #D6D6D6;
+  color: #d6d6d6;
   text-shadow: none;
 }
 
@@ -1522,8 +1521,8 @@ div#tablestatistics table {
   height: auto;
   overflow: visible;
   visibility: hidden;
-  background-color: #ffffcc;
-  color: #006600;
+  background-color: #ffc;
+  color: #060;
   border: 0.1em solid #000;
   padding: 0.5em;
 }
@@ -1650,10 +1649,12 @@ table {
   &#serverstatusvariables {
     width: 100%;
     margin-bottom: 1em;
+
     .name {
       width: 18em;
       white-space: nowrap;
     }
+
     .value {
       width: 6em;
     }
@@ -1688,7 +1689,7 @@ div {
 
 div#chartVariableSettings {
   border: 1px solid #ddd;
-  background-color: #E6E6E6;
+  background-color: #e6e6e6;
   margin-#{$left}: 10px;
 }
 
@@ -1697,8 +1698,9 @@ table#chartGrid {
     padding: 3px;
     margin: 0;
   }
+
   div.monitorChart {
-    background: #EBEBEB;
+    background: #ebebeb;
     overflow: hidden;
     border: none;
   }
@@ -1722,7 +1724,7 @@ div.tabLinks {
 .popupContent {
   display: none;
   position: absolute;
-  border: 1px solid #CCC;
+  border: 1px solid #ccc;
   margin: 0;
   padding: 3px;
   background-color: #fff;
@@ -1791,7 +1793,7 @@ div {
   .var-header {
     color: $th-color;
     background: #f3f3f3;
-    background: linear-gradient(#ffffff, #cccccc);
+    background: linear-gradient(#fff, #ccc);
     font-weight: bold;
     text-align: $left;
   }
@@ -1961,7 +1963,7 @@ a.button {
   background-image: linear-gradient(#f8f8f8, #d8d8d8);
 
   &:hover {
-    background: linear-gradient(#ffffff, #dddddd);
+    background: linear-gradient(#fff, #ddd);
   }
 }
 
@@ -1993,6 +1995,7 @@ textarea {
     padding: 5px;
     font-family: inherit;
   }
+
   &#sql_query_edit {
     height: 7em;
     width: 95%;
@@ -2019,6 +2022,7 @@ div#queryboxcontainer div#bookmarkoptions {
     list-style-type: disc;
     vertical-align: middle;
   }
+
   li {
     margin-bottom: 0.3em;
   }
@@ -2035,6 +2039,7 @@ div#queryboxcontainer div#bookmarkoptions {
 }
 
 /* end main page */
+
 /* iconic view for ul items */
 
 li.no_bullets {
@@ -2120,6 +2125,7 @@ code {
     overflow: auto;
     direction: ltr;
   }
+
   &.sql {
     display: block;
     padding: 1em;
@@ -2295,13 +2301,13 @@ input {
   &[type=password].invalid_value,
   &[type=number].invalid_value,
   &[type=date].invalid_value {
-    background: #FFCCCC;
+    background: #fcc;
   }
 }
 
 select.invalid_value,
 .invalid_value {
-  background: #FFCCCC;
+  background: #fcc;
 }
 
 /**
@@ -2378,6 +2384,7 @@ select.invalid_value,
   h2 {
     word-wrap: break-word;
   }
+
   h3 {
     border-bottom: 1px #999 solid;
     font-size: 110%;
@@ -2433,7 +2440,7 @@ select.invalid_value,
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     text-shadow: 0 1px 0 #fff;
-    background: linear-gradient(#ffffff, #cccccc);
+    background: linear-gradient(#fff, #ccc);
     cursor: pointer;
     float: $right;
   }
@@ -2706,8 +2713,8 @@ table#index_columns {
     .errors {
       margin: 0 -2px 1em;
       padding: 0.5em 1.5em;
-      background: #FBEAD9;
-      border: 0 #C83838 solid;
+      background: #fbead9;
+      border: 0 #c83838 solid;
       border-width: 1px 0;
       list-style: none;
       font-family: $font-family;
@@ -2720,7 +2727,7 @@ table#index_columns {
       margin-#{$left}: 0;
       padding: 0;
       list-style: none;
-      color: #9A0000;
+      color: #9a0000;
       font-size: small;
     }
 
@@ -2732,7 +2739,7 @@ table#index_columns {
       margin-#{$left}: 1em;
       font-size: 80%;
       text-transform: uppercase;
-      color: #E00;
+      color: #e00;
       cursor: help;
     }
 
@@ -2786,42 +2793,42 @@ table#index_columns {
 
     &.custom {
       padding: 1px;
-      border: 1px #EDEC90 solid;
-      background: #FFC;
+      border: 1px #edec90 solid;
+      background: #ffc;
     }
   }
 
   // customized field
   .custom {
-    background: #FFC;
+    background: #ffc;
   }
 
   .field-error {
-    border-color: #A11 !important;
+    border-color: #a11 !important;
   }
 
   input {
     &[type=text],
     &[type=password],
     &[type=number] {
-      border: 1px #A7A6AA solid;
+      border: 1px #a7a6aa solid;
       height: auto;
 
       &:focus {
-        border: 1px #6676FF solid;
-        background: #F7FBFF;
+        border: 1px #6676ff solid;
+        background: #f7fbff;
       }
     }
   }
 
   select,
   textarea {
-    border: 1px #A7A6AA solid;
+    border: 1px #a7a6aa solid;
     height: auto;
 
     &:focus {
-      border: 1px #6676FF solid;
-      background: #F7FBFF;
+      border: 1px #6676ff solid;
+      background: #f7fbff;
     }
   }
 
@@ -2835,14 +2842,14 @@ table#index_columns {
   }
 
   .field-comment-warning {
-    color: #A00;
+    color: #a00;
   }
 
   // error list
   dd {
     margin-#{$left}: 0.5em;
 
-    &:before {
+    &::before {
       content: "\25B8  ";
     }
   }
@@ -2853,6 +2860,7 @@ fieldset {
     th {
       background: $bg-two;
     }
+
     + tr th {
       padding-top: 0.6em;
     }
@@ -3002,7 +3010,7 @@ fieldset {
   position: fixed;
   top: 55px;
   width: 100%;
-  background: #ffffff;
+  background: #fff;
 }
 
 #table_columns {
@@ -3104,7 +3112,7 @@ fieldset {
 
   th.draggable {
     &.right span {
-      margin-#{$right}: 0px;
+      margin-#{$right}: 0;
     }
 
     span {
@@ -3126,7 +3134,7 @@ fieldset {
 
 .cCpy {
   background: #333;
-  color: #FFF;
+  color: #fff;
   font-weight: bold;
   margin: 0.1em;
   padding: 0.3em;
@@ -3143,6 +3151,7 @@ fieldset {
 .cPointer {
   $height: 20px;
   $width: 10px;
+
   height: $height;
   width: $width;
   margin-top: $height / -2;
@@ -3165,7 +3174,7 @@ fieldset {
 
   * {
     background: none !important;
-    color: #FFF !important;
+    color: #fff !important;
   }
 }
 
@@ -3194,7 +3203,7 @@ fieldset {
 }
 
 .cList {
-  background: #EEE;
+  background: #eee;
   border: solid 1px #999;
   position: absolute;
   -moz-box-shadow: 0 0.2em 0.5em #333;
@@ -3206,7 +3215,7 @@ fieldset {
     padding-#{$left}: 0.2em;
 
     &:hover {
-      background: #DDD;
+      background: #ddd;
       cursor: pointer;
     }
 
@@ -3226,7 +3235,7 @@ fieldset {
   text-align: center;
 
   &:hover {
-    background: #DDD;
+    background: #ddd;
   }
 }
 
@@ -3242,7 +3251,7 @@ fieldset {
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
-  background: linear-gradient(#eeeeee, #cccccc);
+  background: linear-gradient(#eee, #ccc);
 
   td {
     margin: 0;
@@ -3266,7 +3275,7 @@ fieldset {
         color: #fff;
         cursor: pointer;
         text-shadow: none;
-        background: linear-gradient(#333333, #555555);
+        background: linear-gradient(#333, #555);
       }
     }
 
@@ -3274,7 +3283,7 @@ fieldset {
       color: #fff;
       cursor: pointer;
       text-shadow: none;
-      background: linear-gradient(#333333, #555555);
+      background: linear-gradient(#333, #555);
     }
   }
 
@@ -3290,7 +3299,7 @@ fieldset {
   text-align: center;
   height: 1.4em;
   width: 1.2em;
-  text-shadow: 1px 0 #FFF;
+  text-shadow: 1px 0 #fff;
 }
 
 .cEdit {
@@ -3299,14 +3308,14 @@ fieldset {
   position: absolute;
 
   input[type=text] {
-    background: #FFF;
+    background: #fff;
     height: 100%;
     margin: 0;
     padding: 0;
   }
 
   .edit_area {
-    background: #FFF;
+    background: #fff;
     border: 1px solid #999;
     min-width: 10em;
     padding: 0.3em 0.5em;
@@ -3331,17 +3340,17 @@ fieldset {
   }
 
   .edit_box_posting {
-    background: #FFF url('../img/ajax_clock_small.gif') no-repeat $right center;
+    background: #fff url('../img/ajax_clock_small.gif') no-repeat $right center;
     padding-#{$right}: 1.5em;
   }
 
   .edit_area_loading {
-    background: #FFF url("../img/ajax_clock_small.gif") no-repeat center;
+    background: #fff url("../img/ajax_clock_small.gif") no-repeat center;
     height: 10em;
   }
 
   .goto_link {
-    background: #EEE;
+    background: #eee;
     color: #555;
     padding: 0.2em 0.3em;
   }
@@ -3408,7 +3417,7 @@ fieldset {
 
 input.btn {
   color: #333;
-  background-color: #D0DCE0;
+  background-color: #d0dce0;
 }
 
 body .ui-widget {
@@ -3416,7 +3425,7 @@ body .ui-widget {
 }
 
 .ui-dialog fieldset legend a {
-  color: #235A81;
+  color: #235a81;
 }
 
 .ui-draggable {
@@ -3453,7 +3462,7 @@ div#page_content div {
     margin-top: 1em;
 
     table.data {
-      border-top: 0.1px solid #EEEEEE;
+      border-top: 0.1px solid #eee;
     }
   }
 
@@ -3534,6 +3543,7 @@ table.show_create {
       }
     }
   }
+
   .message span {
     &.text,
     &.action {
@@ -3609,7 +3619,7 @@ table.show_create {
       }
 
       .message {
-        border-color: #373B41;
+        border-color: #373b41;
       }
 
       .CodeMirror-cursor {
@@ -3633,10 +3643,12 @@ table.show_create {
   .message {
     border-bottom: solid 1px #ccc;
     padding-bottom: 0.2em;
+
     &.expanded > .action_content {
       position: relative;
     }
-    &:before {
+
+    &::before {
       #{$left}: -0.7em;
       position: absolute;
       content: ">";
@@ -3644,7 +3656,7 @@ table.show_create {
   }
 
   .query_input {
-    &:before {
+    &::before {
       left: -0.7em;
       position: absolute;
       content: ">";
@@ -3659,29 +3671,29 @@ table.show_create {
   }
 
   .message {
-    &:hover:before {
+    &:hover::before {
       color: #7cf;
       font-weight: bold;
     }
 
-    &.expanded:before {
+    &.expanded::before {
       content: "]";
     }
 
-    &.welcome:before {
+    &.welcome::before {
       display: none;
     }
 
     &.failed {
-      &:before,
-      &.expanded:before,
-      &:hover:before {
+      &::before,
+      &.expanded::before,
+      &:hover::before {
         content: "=";
         color: #944;
       }
     }
 
-    &.pending:before {
+    &.pending::before {
       opacity: 0.3;
     }
 
@@ -3907,15 +3919,15 @@ table.show_create {
       display: none;
     }
 
-    &:after {
+    &::after {
       content: "";
       display: table;
       clear: both;
     }
   }
 
-  .trace.welcome:after,
-  .debug > .welcome:after {
+  .trace.welcome::after,
+  .debug > .welcome::after {
     content: "";
     display: table;
     clear: both;
@@ -4147,13 +4159,15 @@ span.drag_icon {
 
 meter {
   &[value="1"]::-webkit-meter-optimum-value {
-    background: linear-gradient(white 3%, #E32929 5%, transparent 10%, #E32929);
+    background: linear-gradient(white 3%, #e32929 5%, transparent 10%, #e32929);
   }
+
   &[value="2"]::-webkit-meter-optimum-value {
-    background: linear-gradient(white 3%, #FF6600 5%, transparent 10%, #FF6600);
+    background: linear-gradient(white 3%, #f60 5%, transparent 10%, #f60);
   }
+
   &[value="3"]::-webkit-meter-optimum-value {
-    background: linear-gradient(white 3%, #FFD700 5%, transparent 10%, #FFD700);
+    background: linear-gradient(white 3%, #ffd700 5%, transparent 10%, #ffd700);
   }
 }
 
@@ -4293,6 +4307,7 @@ body .ui-dialog {
 
   #table_columns {
     margin-top: 60px;
+
     .tablesorter {
       min-width: 100%;
     }
diff --git a/themes/pmahomme/scss/_designer.scss b/themes/pmahomme/scss/_designer.scss
index 4474e215fd..84f3c67929 100644
--- a/themes/pmahomme/scss/_designer.scss
+++ b/themes/pmahomme/scss/_designer.scss
@@ -17,7 +17,7 @@ $resize-img: 'theme/pmahomme/img/designer/resize.png';
 
 /* Designer */
 .input_tab {
-  background-color: #A6C7E1;
+  background-color: #a6c7e1;
   color: #000;
 }
 
@@ -83,7 +83,7 @@ canvas.designer {
   cursor: default;
 
   &:hover {
-    background-color: #ccffcc;
+    background-color: #cfc;
     color: #000;
     background-repeat: repeat-x;
     cursor: default;
@@ -96,7 +96,7 @@ canvas.designer {
   cursor: default;
 
   &:hover {
-    background-color: #ccffcc;
+    background-color: #cfc;
     color: #000;
     background-repeat: repeat-x;
     cursor: default;
@@ -106,10 +106,10 @@ canvas.designer {
 #designer_hint {
   white-space: nowrap;
   position: absolute;
-  background-color: #99FF99;
+  background-color: #9f9;
   color: #000;
   z-index: 3;
-  border: #00CC66 solid 1px;
+  border: #0c6 solid 1px;
   display: none;
 }
 
@@ -121,7 +121,7 @@ canvas.designer {
 
 .designer_Tabs {
   cursor: default;
-  color: #0055bb;
+  color: #05b;
   white-space: nowrap;
   text-decoration: none;
   text-indent: 3px;
@@ -134,13 +134,13 @@ canvas.designer {
 
   &:hover {
     cursor: default;
-    color: #0055bb;
-    background: #ffee99;
+    color: #05b;
+    background: #fe9;
     text-indent: 3px;
     font-weight: bold;
     white-space: nowrap;
     text-decoration: none;
-    border: #9999ff solid 1px;
+    border: #99f solid 1px;
     text-align: $left;
   }
 }
@@ -183,7 +183,7 @@ canvas.designer {
   &:hover {
     vertical-align: top;
     color: #fff;
-    background-color: #FF9966;
+    background-color: #f96;
     cursor: default;
     padding-#{$left}: 2px;
     padding-#{$right}: 2px;
@@ -203,7 +203,7 @@ canvas.designer {
   &:hover {
     vertical-align: top;
     color: #fff;
-    background-color: #FF9966;
+    background-color: #f96;
     cursor: default;
     text-align: center;
     font-weight: bold;
@@ -213,7 +213,7 @@ canvas.designer {
 }
 
 .butt {
-  border: #4477aa solid 1px;
+  border: #47a solid 1px;
   font-weight: bold;
   height: 19px;
   width: 70px;
@@ -230,8 +230,8 @@ canvas.designer {
 
   &:hover {
     padding: 0;
-    border: #0099cc solid 1px;
-    background: #ffee99;
+    border: #09c solid 1px;
+    background: #fe9;
     color: #000;
     text-decoration: none;
     vertical-align: middle;
@@ -239,7 +239,7 @@ canvas.designer {
   }
 }
 
-/* ---------------------------------------------------------------------------*/
+/* --------------------------------------------------------------------------- */
 .bor {
   width: 10px;
   height: 10px;
@@ -284,7 +284,7 @@ canvas.designer {
 }
 
 .designer_header {
-  background-color: #EAEEF0;
+  background-color: #eaeef0;
   color: #000;
   text-align: center;
   font-weight: bold;
@@ -332,19 +332,19 @@ a {
   &.M_butt_Selected_down_IE,
   &.M_butt_Selected_down {
     border: 1px solid #c0c0bb;
-    background-color: #99ff99;
+    background-color: #9f9;
     color: #000;
 
     &:hover {
-      border: 1px solid #0099cc;
-      background-color: #ffee99;
+      border: 1px solid #09c;
+      background-color: #fe9;
       color: #000;
     }
   }
 
   &.M_butt:hover {
-    border: 1px solid #0099cc;
-    background-color: #ffee99;
+    border: 1px solid #09c;
+    background-color: #fe9;
     color: #000;
   }
 }
@@ -353,7 +353,7 @@ a {
   z-index: 98;
   position: relative;
   float: $right;
-  background-color: #EAEEF0;
+  background-color: #eaeef0;
   border: #999 solid 1px;
 
   &.left {
@@ -417,6 +417,7 @@ a {
       border: 1px solid #999;
     }
   }
+
   &.active.trigger {
     background: #222 url($minus-img) 85% 55% no-repeat;
     z-index: 999;
@@ -428,7 +429,7 @@ a {
 }
 
 .toggle_container .block {
-  background-color: #DBE4E8;
+  background-color: #dbe4e8;
   border-top: 1px solid #999;
 }
 
@@ -438,7 +439,7 @@ a {
   background-color: #dbe4e8;
 
   &:hover {
-    background-color: #9999cc;
+    background-color: #99c;
   }
 }
 
diff --git a/themes/pmahomme/scss/_enum-editor.scss b/themes/pmahomme/scss/_enum-editor.scss
index 796fffe72d..044e641d7e 100644
--- a/themes/pmahomme/scss/_enum-editor.scss
+++ b/themes/pmahomme/scss/_enum-editor.scss
@@ -35,7 +35,7 @@ p.enum_notice {
     }
 
     input {
-      margin: .1em 0;
+      margin: 0.1em 0;
       padding-#{$right}: 2em;
       width: 100%;
     }
@@ -67,6 +67,6 @@ p.enum_notice {
   a {
     position: absolute;
     #{$left}: 81%;
-    bottom: .35em;
+    bottom: 0.35em;
   }
 }
diff --git a/themes/pmahomme/scss/_gis.scss b/themes/pmahomme/scss/_gis.scss
index 733df00a4b..e36b65b57d 100644
--- a/themes/pmahomme/scss/_gis.scss
+++ b/themes/pmahomme/scss/_gis.scss
@@ -22,7 +22,7 @@ a.close_gis_editor {
 }
 
 #gis_data_editor {
-  background: #D0DCE0;
+  background: #d0dce0;
   padding: 15px;
   min-height: 500px;
 
diff --git a/themes/pmahomme/scss/_jqplot.scss b/themes/pmahomme/scss/_jqplot.scss
index 4910cabe04..9d69847969 100644
--- a/themes/pmahomme/scss/_jqplot.scss
+++ b/themes/pmahomme/scss/_jqplot.scss
@@ -3,7 +3,7 @@
 // rules for the plot target div. These will be cascaded down to all plot elements according to css rules
 .jqplot-target {
   position: relative;
-  color: #222222;
+  color: #222;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 1em;
 }
@@ -71,7 +71,7 @@
 }
 
 .jqplot-yaxis-tick {
-  #{$right}: 0px;
+  #{$right}: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
   text-align: $right;
@@ -93,7 +93,7 @@
 .jqplot-y7axis-tick,
 .jqplot-y8axis-tick,
 .jqplot-y9axis-tick {
-  #{$left}: 0px;
+  #{$left}: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
   text-align: $left;
@@ -142,12 +142,12 @@
 
 .jqplot-meterGauge-tick {
   font-size: 0.75em;
-  color: #999999;
+  color: #999;
 }
 
 .jqplot-meterGauge-label {
   font-size: 1em;
-  color: #999999;
+  color: #999;
 }
 
 table {
@@ -157,14 +157,14 @@ table {
     margin-#{$left}: 12px;
     margin-#{$right}: 12px;
     background-color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     position: absolute;
     font-size: 0.75em;
   }
 
   &.jqplot-cursor-legend {
     background-color: rgba(255, 255, 255, 0.6);
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     position: absolute;
     font-size: 0.75em;
   }
@@ -189,7 +189,7 @@ td {
 
 div {
   &.jqplot-table-legend-swatch-outline {
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     padding: 1px;
   }
 
@@ -209,20 +209,20 @@ div {
 
 .jqplot-title {
   top: 0;
-  #{$left}: 0px;
+  #{$left}: 0;
   padding-bottom: 0.5em;
   font-size: 1.2em;
 }
 
 table.jqplot-cursor-tooltip {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   font-size: 0.75em;
 }
 
 .jqplot-cursor-tooltip,
 .jqplot-highlighter-tooltip,
 .jqplot-canvasOverlay-tooltip {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   font-size: 0.75em;
   white-space: nowrap;
   background: rgba(208, 208, 208, 0.5);
diff --git a/themes/pmahomme/scss/_resizable-menu.scss b/themes/pmahomme/scss/_resizable-menu.scss
index aa57197e89..b49ce7532b 100644
--- a/themes/pmahomme/scss/_resizable-menu.scss
+++ b/themes/pmahomme/scss/_resizable-menu.scss
@@ -28,7 +28,7 @@ ul.resizable-menu {
   }
 
   li:hover {
-    background: linear-gradient(#ffffff, #e5e5e5);
+    background: linear-gradient(#fff, #e5e5e5);
 
     ul {
       display: block;
diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
index f93ed1743d..5f420c384e 100644
--- a/themes/pmahomme/scss/_variables.scss
+++ b/themes/pmahomme/scss/_variables.scss
@@ -6,7 +6,7 @@
 $navi-width: 240px;
 
 // foreground (text) color for the navi frame
-$navi-color: #000000;
+$navi-color: #000;
 
 // background for the navi frame
 $navi-background: #f3f3f3;
@@ -20,23 +20,23 @@ $navi-pointer-background: #ddd;
 // main frame
 
 // foreground (text) color for the main frame
-$main-color: #444444;
+$main-color: #444;
 
 // background for the main frame
-$main-background: #ffffff;
+$main-background: #fff;
 
 // foreground (text) color of the pointer in browse mode
-$browse-pointer-color: #000000;
+$browse-pointer-color: #000;
 
 // background of the pointer in browse mode
-$browse-pointer-background: #ccffcc;
+$browse-pointer-background: #cfc;
 
 // foreground (text) color of the marker (visually marks row by clicking on it)
 // in browse mode
-$browse-marker-color: #000000;
+$browse-marker-color: #000;
 
 // background of the marker (visually marks row by clicking on it) in browse mode
-$browse-marker-background: #ffcc99;
+$browse-marker-background: #fc9;
 
 // fonts
 
@@ -51,10 +51,10 @@ $font-family-fixed: monospace;
 // border
 $border: 0;
 // table header and footer color
-$th-background: #D3DCE3;
+$th-background: #d3dce3;
 // table header and footer background
-$th-color: #000000;
+$th-color: #000;
 // table data row background
-$bg-one: #E5E5E5;
+$bg-one: #e5e5e5;
 // table data row background, alternate
-$bg-two: #D5D5D5;
+$bg-two: #d5d5d5;
diff --git a/themes/pmahomme/scss/printview.scss b/themes/pmahomme/scss/printview.scss
index bbaa00d4ee..44031b75a4 100644
--- a/themes/pmahomme/scss/printview.scss
+++ b/themes/pmahomme/scss/printview.scss
@@ -141,7 +141,6 @@ div.success {
   display: none;
 }
 
-
 table tbody:first-of-type tr {
   // odd items 1,3,5,7...
   &:nth-child(odd) {
diff --git a/themes/pmahomme/scss/theme-rtl.scss b/themes/pmahomme/scss/theme-rtl.scss
index eca2454041..251a1f01c9 100644
--- a/themes/pmahomme/scss/theme-rtl.scss
+++ b/themes/pmahomme/scss/theme-rtl.scss
@@ -1,2 +1,3 @@
 $direction: rtl;
+
 @import "theme";
diff --git a/themes/pmahomme/scss/theme.scss b/themes/pmahomme/scss/theme.scss
index 1aabd7f1eb..03b9ce78c1 100644
--- a/themes/pmahomme/scss/theme.scss
+++ b/themes/pmahomme/scss/theme.scss
@@ -1,7 +1,5 @@
 @import "direction";
-
 @import "variables";
-
 @import "common";
 @import "enum-editor";
 @import "gis";
diff --git a/yarn.lock b/yarn.lock
index f5547a3e09..459339ab69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2921,11 +2921,18 @@ stylelint-config-recommended-scss@^3.2.0:
   dependencies:
     stylelint-config-recommended "^2.0.0"
 
-stylelint-config-recommended@^2.0.0:
+stylelint-config-recommended@^2.0.0, stylelint-config-recommended@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz#f526d5c771c6811186d9eaedbed02195fee30858"
   integrity sha512-ajMbivOD7JxdsnlS5945KYhvt7L/HwN6YeYF2BH6kE4UCLJR0YvXMf+2j7nQpJyYLZx9uZzU5G1ZOSBiWAc6yA==
 
+stylelint-config-standard@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-18.2.0.tgz#6283149aba7f64f18731aef8f0abfb35cf619e06"
+  integrity sha512-07x0TaSIzvXlbOioUU4ORkCIM07kyIuojkbSVCyFWNVgXMXYHfhnQSCkqu+oHWJf3YADAnPGWzdJ53NxkoJ7RA==
+  dependencies:
+    stylelint-config-recommended "^2.1.0"
+
 stylelint-scss@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.4.0.tgz#263da8450e371bcf646063c6ac62f69225369697"