From 11a58dc33d96d0c1213ba9aee2986d3a773b5f69 Mon Sep 17 00:00:00 2001
From: Olga Brani <olgabrani@grnet.gr>
Date: Wed, 30 Jul 2014 18:23:55 +0300
Subject: [PATCH] admin-ui: White theme

---
 .../admin/static/css/bootstrap.css            | 114 +++----
 .../synnefo_admin/admin/static/css/global.css | 317 +++++++++---------
 .../admin/static/sass/_bars-btns.scss         |   1 +
 .../admin/static/sass/_details.scss           |   3 +-
 .../admin/static/sass/_extra.scss             |  14 +-
 .../admin/static/sass/_filters.scss           |   1 +
 .../admin/static/sass/_loaders.scss           |   2 +-
 .../admin/static/sass/_palette1.scss          |   5 +
 .../admin/static/sass/_settings.scss          |   2 +-
 .../admin/static/sass/_tables.scss            |  34 +-
 .../admin/static/sass/_theme1.scss            |  92 +++--
 .../static/sass/bootstrap/_variables.scss     |  48 +--
 .../admin/templates/admin/subnav.html         |   1 -
 13 files changed, 347 insertions(+), 287 deletions(-)

diff --git a/snf-admin-app/synnefo_admin/admin/static/css/bootstrap.css b/snf-admin-app/synnefo_admin/admin/static/css/bootstrap.css
index 83f3228d0..8295e45dd 100644
--- a/snf-admin-app/synnefo_admin/admin/static/css/bootstrap.css
+++ b/snf-admin-app/synnefo_admin/admin/static/css/bootstrap.css
@@ -390,8 +390,8 @@ body {
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
   line-height: 1.42857;
-  color: white;
-  background-color: #303030;
+  color: #222222;
+  background-color: white;
 }
 
 /* line 39, ../sass/bootstrap/_scaffolding.scss */
@@ -402,17 +402,17 @@ textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
-  color: white;
+  color: #222222;
 }
 
 /* line 49, ../sass/bootstrap/_scaffolding.scss */
 a {
-  color: #4d99d8;
+  color: #005b9a;
   text-decoration: none;
 }
 /* line 54, ../sass/bootstrap/_scaffolding.scss */
 a:hover, a:focus {
-  color: #83b8e4;
+  color: #ee5161;
 }
 /* line 58, ../sass/bootstrap/_scaffolding.scss */
 a:focus {
@@ -2108,12 +2108,12 @@ th {
   padding: 10px;
   line-height: 1.42857;
   vertical-align: top;
-  border-top: 1px solid white;
+  border-top: 1px solid #cccccc;
 }
 /* line 35, ../sass/bootstrap/_tables.scss */
 .table > thead > tr > th {
   vertical-align: bottom;
-  border-bottom: 2px solid white;
+  border-bottom: 2px solid #cccccc;
 }
 /* line 45, ../sass/bootstrap/_tables.scss */
 .table > caption + thead > tr:first-child > th,
@@ -2126,11 +2126,11 @@ th {
 }
 /* line 51, ../sass/bootstrap/_tables.scss */
 .table > tbody + tbody {
-  border-top: 2px solid white;
+  border-top: 2px solid #cccccc;
 }
 /* line 56, ../sass/bootstrap/_tables.scss */
 .table .table {
-  background-color: #303030;
+  background-color: white;
 }
 
 /* line 70, ../sass/bootstrap/_tables.scss */
@@ -2145,7 +2145,7 @@ th {
 
 /* line 82, ../sass/bootstrap/_tables.scss */
 .table-bordered {
-  border: 1px solid white;
+  border: 1px solid #cccccc;
 }
 /* line 89, ../sass/bootstrap/_tables.scss */
 .table-bordered > thead > tr > th,
@@ -2154,7 +2154,7 @@ th {
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > th,
 .table-bordered > tfoot > tr > td {
-  border: 1px solid white;
+  border: 1px solid #cccccc;
 }
 /* line 96, ../sass/bootstrap/_tables.scss */
 .table-bordered > thead > tr > th,
@@ -2297,7 +2297,7 @@ table th[class*="col-"] {
     overflow-y: hidden;
     overflow-x: scroll;
     -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid white;
+    border: 1px solid #cccccc;
     -webkit-overflow-scrolling: touch;
   }
   /* line 182, ../sass/bootstrap/_tables.scss */
@@ -2736,7 +2736,7 @@ select[multiple].input-lg,
   display: block;
   margin-top: 5px;
   margin-bottom: 10px;
-  color: white;
+  color: #626262;
 }
 
 @media (min-width: 768px) {
@@ -3099,7 +3099,7 @@ select[multiple].input-lg,
 
 /* line 85, ../sass/bootstrap/_buttons.scss */
 .btn-link {
-  color: #4d99d8;
+  color: #005b9a;
   font-weight: normal;
   cursor: pointer;
   border-radius: 0;
@@ -3116,7 +3116,7 @@ select[multiple].input-lg,
 }
 /* line 105, ../sass/bootstrap/_buttons.scss */
 .btn-link:hover, .btn-link:focus {
-  color: #83b8e4;
+  color: #ee5161;
   text-decoration: underline;
   background-color: transparent;
 }
@@ -4811,7 +4811,7 @@ input[type="button"].btn-block {
 /* line 48, ../sass/bootstrap/_navs.scss */
 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   background-color: #d9d9d9;
-  border-color: #4d99d8;
+  border-color: #005b9a;
 }
 /* line 59, ../sass/bootstrap/_navs.scss */
 .nav .nav-divider {
@@ -4827,7 +4827,7 @@ input[type="button"].btn-block {
 
 /* line 76, ../sass/bootstrap/_navs.scss */
 .nav-tabs {
-  border-bottom: 1px solid inherit;
+  border-bottom: 1px solid #e6e6e6;
 }
 /* line 78, ../sass/bootstrap/_navs.scss */
 .nav-tabs > li {
@@ -4840,17 +4840,17 @@ input[type="button"].btn-block {
   line-height: 1.42857;
   border: 1px solid transparent;
   border-radius: 0 0 0 0;
-  color: white;
+  color: #222222;
 }
 /* line 91, ../sass/bootstrap/_navs.scss */
 .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
   background: inherit;
-  border-color: inherit inherit inherit;
+  border-color: inherit inherit #e6e6e6;
 }
 /* line 102, ../sass/bootstrap/_navs.scss */
 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
-  color: white;
-  background-color: #4e4e4e;
+  color: #222222;
+  background-color: #d9d9d9;
   border: 1px solid inherit;
   border-bottom-color: transparent;
   cursor: default;
@@ -5316,8 +5316,8 @@ input[type="button"].btn-block {
 
 /* line 383, ../sass/bootstrap/_navbar.scss */
 .navbar-default {
-  background-color: #222222;
-  border-color: inherit;
+  background-color: whitesmoke;
+  border-color: #e6e6e6;
 }
 /* line 387, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-brand {
@@ -5326,7 +5326,7 @@ input[type="button"].btn-block {
 /* line 390, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
   color: #e6e6e6;
-  background-color: transparent;
+  background-color: #008b44;
 }
 /* line 396, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-text {
@@ -5334,22 +5334,22 @@ input[type="button"].btn-block {
 }
 /* line 401, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-nav > li > a {
-  color: white;
+  color: #222222;
 }
 /* line 405, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
-  color: white;
-  background-color: #333333;
+  color: #222222;
+  background-color: #ededed;
 }
 /* line 411, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-nav > .has-dropdown:hover > a:first-child {
-  color: white;
-  background-color: #333333;
+  color: #222222;
+  background-color: #ededed;
 }
 /* line 419, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
-  color: #303030;
-  background-color: white;
+  color: white;
+  background-color: #ee5161;
 }
 /* line 427, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
@@ -5371,27 +5371,27 @@ input[type="button"].btn-block {
 /* line 446, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-  border-color: inherit;
+  border-color: #e6e6e6;
 }
 /* line 456, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
-  background-color: white;
-  color: #303030;
+  background-color: #ee5161;
+  color: white;
 }
 @media (max-width: 767px) {
   /* line 465, ../sass/bootstrap/_navbar.scss */
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: white;
+    color: #222222;
   }
   /* line 468, ../sass/bootstrap/_navbar.scss */
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: white;
-    background-color: #333333;
+    color: #222222;
+    background-color: #ededed;
   }
   /* line 476, ../sass/bootstrap/_navbar.scss */
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #303030;
-    background-color: white;
+    color: white;
+    background-color: #ee5161;
   }
   /* line 484, ../sass/bootstrap/_navbar.scss */
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
@@ -5401,16 +5401,16 @@ input[type="button"].btn-block {
 }
 /* line 498, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-link {
-  color: white;
+  color: #222222;
 }
 /* line 500, ../sass/bootstrap/_navbar.scss */
 .navbar-default .navbar-link:hover {
-  color: white;
+  color: #222222;
 }
 
 /* line 509, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse {
-  background-color: #4e4e4e;
+  background-color: #cccccc;
   border-color: transparent;
 }
 /* line 513, ../sass/bootstrap/_navbar.scss */
@@ -5424,20 +5424,20 @@ input[type="button"].btn-block {
 }
 /* line 522, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-text {
-  color: white;
+  color: #222222;
 }
 /* line 527, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-nav > li > a {
-  color: white;
+  color: #222222;
 }
 /* line 531, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
-  color: #303030;
+  color: #222222;
   background-color: #d9d9d9;
 }
 /* line 537, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-nav > li.has-dropdown:hover > a:first-child {
-  color: #303030;
+  color: #222222;
   background-color: #d9d9d9;
 }
 /* line 545, ../sass/bootstrap/_navbar.scss */
@@ -5465,7 +5465,7 @@ input[type="button"].btn-block {
 /* line 573, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
-  border-color: #3c3c3c;
+  border-color: #bababa;
 }
 /* line 582, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
@@ -5483,11 +5483,11 @@ input[type="button"].btn-block {
   }
   /* line 597, ../sass/bootstrap/_navbar.scss */
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-    color: white;
+    color: #222222;
   }
   /* line 600, ../sass/bootstrap/_navbar.scss */
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #303030;
+    color: #222222;
     background-color: #d9d9d9;
   }
   /* line 608, ../sass/bootstrap/_navbar.scss */
@@ -5503,11 +5503,11 @@ input[type="button"].btn-block {
 }
 /* line 625, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-link {
-  color: white;
+  color: #222222;
 }
 /* line 627, ../sass/bootstrap/_navbar.scss */
 .navbar-inverse .navbar-link:hover {
-  color: #303030;
+  color: #222222;
 }
 
 /* line 4, ../sass/bootstrap/_pagination.scss */
@@ -5678,12 +5678,12 @@ input[type="button"].btn-block {
   padding: .2em .6em .3em;
   font-size: 13px;
   line-height: 1;
-  color: #303030;
+  color: white;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: .25em;
-  background: #eeeeee;
+  background: #444444;
 }
 /* line 20, ../sass/bootstrap/_labels.scss */
 .label[href]:hover, .label[href]:focus {
@@ -5703,12 +5703,12 @@ input[type="button"].btn-block {
 
 /* line 42, ../sass/bootstrap/_labels.scss */
 .label-default {
-  background-color: #eeeeee;
+  background-color: #444444;
   color: white;
 }
 /* line 584, ../sass/bootstrap/_mixins.scss */
 .label-default[href]:hover, .label-default[href]:focus {
-  background-color: #d4d4d4;
+  background-color: #2b2b2b;
 }
 
 /* line 46, ../sass/bootstrap/_labels.scss */
@@ -5885,7 +5885,7 @@ a.list-group-item.active > .badge,
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: #4d99d8;
+  border-color: #005b9a;
 }
 
 /* line 9, ../sass/bootstrap/_alerts.scss */
@@ -6461,7 +6461,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
 /* line 140, ../sass/bootstrap/_panels.scss */
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive {
-  border-top: 1px solid white;
+  border-top: 1px solid #cccccc;
 }
 /* line 144, ../sass/bootstrap/_panels.scss */
 .panel > .table > tbody:first-child > tr:first-child th,
diff --git a/snf-admin-app/synnefo_admin/admin/static/css/global.css b/snf-admin-app/synnefo_admin/admin/static/css/global.css
index e06021cb6..0b4fbc84d 100644
--- a/snf-admin-app/synnefo_admin/admin/static/css/global.css
+++ b/snf-admin-app/synnefo_admin/admin/static/css/global.css
@@ -7,7 +7,7 @@
 .spinner > div {
   width: 8px;
   height: 8px;
-  background-color: white;
+  background-color: #222222;
   border-radius: 100%;
   display: inline-block;
   -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
@@ -59,14 +59,14 @@
 Disabled buttons are transparent with light gray border
 and light gray font colors
 */
-/* line 115, ../sass/_bars-btns.scss */
+/* line 116, ../sass/_bars-btns.scss */
 .line-btn {
   display: inline-block;
   text-align: center;
   opacity: 1;
-  background-color: #222222;
-  border-bottom: 2px solid #222222;
-  color: white;
+  background-color: #e6e6e6;
+  border-bottom: 2px solid #e6e6e6;
+  color: #222222;
 }
 /* line 29, ../sass/_bars-btns.scss */
 .line-btn span {
@@ -101,17 +101,18 @@ and light gray font colors
 }
 /* line 109, ../sass/_bars-btns.scss */
 .line-btn:hover, .line-btn:focus {
-  border-bottom-color: white;
-  color: white;
+  opacity: 1;
+  border-bottom-color: #222222;
+  color: #222222;
 }
 
-/* line 119, ../sass/_bars-btns.scss */
+/* line 120, ../sass/_bars-btns.scss */
 .outline-btn {
   display: inline-block;
   text-align: center;
   opacity: 1;
-  border: 1px solid white;
-  color: white;
+  border: 1px solid #222222;
+  color: #222222;
 }
 /* line 29, ../sass/_bars-btns.scss */
 .outline-btn span {
@@ -151,7 +152,7 @@ and light gray font colors
 }
 /* line 65, ../sass/_bars-btns.scss */
 .outline-btn:hover span, .outline-btn:focus span {
-  border-color: white;
+  border-color: #222222;
 }
 /* line 69, ../sass/_bars-btns.scss */
 .outline-btn.disabled {
@@ -163,7 +164,7 @@ and light gray font colors
   border-color: transparent;
 }
 
-/* line 123, ../sass/_bars-btns.scss */
+/* line 124, ../sass/_bars-btns.scss */
 .custom-btn {
   display: inline-block;
   text-align: center;
@@ -227,59 +228,59 @@ and light gray font colors
 .custom-btn.disabled:hover span, .custom-btn.disabled:focus span {
   color: #818181 !important;
 }
-/* line 125, ../sass/_bars-btns.scss */
+/* line 126, ../sass/_bars-btns.scss */
 .custom-btn[data-karma="neutral"] {
   background-color: #3c96e0;
   border-color: #3c96e0;
 }
-/* line 129, ../sass/_bars-btns.scss */
+/* line 130, ../sass/_bars-btns.scss */
 .custom-btn[data-karma="good"] {
   background-color: #00a551;
   border-color: #00a551;
 }
-/* line 134, ../sass/_bars-btns.scss */
+/* line 135, ../sass/_bars-btns.scss */
 .custom-btn[data-karma="bad"] {
   background-color: #d2881f;
   border-color: #d2881f;
 }
-/* line 139, ../sass/_bars-btns.scss */
+/* line 140, ../sass/_bars-btns.scss */
 .custom-btn[data-caution="warning"][data-karma="good"], .custom-btn[data-caution="warning"][data-karma="neutral"] {
   background-color: #d2881f;
   border-color: #d2881f;
 }
-/* line 144, ../sass/_bars-btns.scss */
+/* line 145, ../sass/_bars-btns.scss */
 .custom-btn[data-caution="dangerous"][data-karma="bad"], .custom-btn[data-caution="dangerous"][data-karma="neutral"] {
   background-color: #e42a48;
   border-color: #e42a48;
 }
 
 /* Sidebar */
-/* line 156, ../sass/_bars-btns.scss */
+/* line 157, ../sass/_bars-btns.scss */
 .sidebar {
   margin: 0 30px 0 0;
   width: 110px;
   height: auto;
   float: left;
 }
-/* line 161, ../sass/_bars-btns.scss */
+/* line 162, ../sass/_bars-btns.scss */
 .sidebar .btn-group-vertical {
   width: 100%;
 }
 @media (max-width: 1200px) {
-  /* line 156, ../sass/_bars-btns.scss */
+  /* line 157, ../sass/_bars-btns.scss */
   .sidebar {
     width: auto;
     margin: 20px auto;
     float: none;
   }
-  /* line 169, ../sass/_bars-btns.scss */
+  /* line 170, ../sass/_bars-btns.scss */
   .sidebar .btn-group-vertical a {
     margin-right: 10px;
     display: inline-block;
   }
 }
 
-/* line 177, ../sass/_bars-btns.scss */
+/* line 178, ../sass/_bars-btns.scss */
 .sidebar.sidebar-fixed {
   top: 80px;
   left: auto;
@@ -295,26 +296,26 @@ and light gray font colors
 /*
 Positioning or customizing buttons
 */
-/* line 195, ../sass/_bars-btns.scss */
+/* line 196, ../sass/_bars-btns.scss */
 .sidebar .custom-btn {
   display: block;
   margin: 0 0 1em;
 }
-/* line 198, ../sass/_bars-btns.scss */
+/* line 199, ../sass/_bars-btns.scss */
 .sidebar .custom-btn span {
   padding: 8px;
 }
 
-/* line 204, ../sass/_bars-btns.scss */
+/* line 205, ../sass/_bars-btns.scss */
 body .custom-buttons {
   float: left;
   margin-right: 10px;
 }
-/* line 207, ../sass/_bars-btns.scss */
+/* line 208, ../sass/_bars-btns.scss */
 body .custom-buttons .line-btn {
   margin-right: 1em;
 }
-/* line 210, ../sass/_bars-btns.scss */
+/* line 211, ../sass/_bars-btns.scss */
 body .custom-buttons .disabled {
   display: none;
 }
@@ -322,11 +323,11 @@ body .custom-buttons .disabled {
 /*
 Extra-button is used to show total selected rows
 */
-/* line 228, ../sass/_bars-btns.scss */
+/* line 229, ../sass/_bars-btns.scss */
 .extra-btn span {
   display: inline-block;
 }
-/* line 231, ../sass/_bars-btns.scss */
+/* line 232, ../sass/_bars-btns.scss */
 .extra-btn .badge {
   background: transparent;
   line-height: 0.8;
@@ -335,57 +336,57 @@ Extra-button is used to show total selected rows
   font-weight: normal;
   font-size: 1em;
 }
-/* line 238, ../sass/_bars-btns.scss */
+/* line 239, ../sass/_bars-btns.scss */
 .extra-btn .badge::before {
   content: "(";
 }
-/* line 241, ../sass/_bars-btns.scss */
+/* line 242, ../sass/_bars-btns.scss */
 .extra-btn .badge::after {
   content: ")";
 }
 
-/* line 247, ../sass/_bars-btns.scss */
+/* line 248, ../sass/_bars-btns.scss */
 .show-hide-all {
   float: right;
 }
-/* line 249, ../sass/_bars-btns.scss */
+/* line 250, ../sass/_bars-btns.scss */
 .show-hide-all em {
   font-style: normal;
 }
-/* line 252, ../sass/_bars-btns.scss */
+/* line 253, ../sass/_bars-btns.scss */
 .show-hide-all.line-btn {
   padding: 8px;
 }
-/* line 254, ../sass/_bars-btns.scss */
+/* line 255, ../sass/_bars-btns.scss */
 .show-hide-all.line-btn span {
   display: inline;
 }
 
-/* line 261, ../sass/_bars-btns.scss */
+/* line 262, ../sass/_bars-btns.scss */
 .actions-per-item .custom-btn {
   margin: 10px 10px 10px 0;
 }
 
-/* line 266, ../sass/_bars-btns.scss */
+/* line 267, ../sass/_bars-btns.scss */
 .charts .chart {
   display: none;
 }
-/* line 269, ../sass/_bars-btns.scss */
+/* line 270, ../sass/_bars-btns.scss */
 .charts .well {
   padding-left: 140px;
 }
-/* line 272, ../sass/_bars-btns.scss */
+/* line 273, ../sass/_bars-btns.scss */
 .charts .sidebar {
   position: fixed;
 }
-/* line 275, ../sass/_bars-btns.scss */
+/* line 276, ../sass/_bars-btns.scss */
 .charts .sidebar a {
   margin-bottom: 1em;
   display: inline-block;
   text-align: center;
   opacity: 1;
-  border: 1px solid white;
-  color: white;
+  border: 1px solid #222222;
+  color: #222222;
   display: block;
 }
 /* line 29, ../sass/_bars-btns.scss */
@@ -426,7 +427,7 @@ Extra-button is used to show total selected rows
 }
 /* line 65, ../sass/_bars-btns.scss */
 .charts .sidebar a:hover span, .charts .sidebar a:focus span {
-  border-color: white;
+  border-color: #222222;
 }
 /* line 69, ../sass/_bars-btns.scss */
 .charts .sidebar a.disabled {
@@ -437,7 +438,7 @@ Extra-button is used to show total selected rows
 .charts .sidebar a.disabled:hover span, .charts .sidebar a.disabled:focus span {
   border-color: transparent;
 }
-/* line 280, ../sass/_bars-btns.scss */
+/* line 281, ../sass/_bars-btns.scss */
 .charts .sidebar a.active {
   display: inline-block;
   text-align: center;
@@ -503,7 +504,7 @@ Extra-button is used to show total selected rows
   color: #818181 !important;
 }
 
-/* line 287, ../sass/_bars-btns.scss */
+/* line 288, ../sass/_bars-btns.scss */
 .notify .reload-btn {
   padding: 0 4px;
   font-size: 18px;
@@ -2571,7 +2572,7 @@ Extra-button is used to show total selected rows
   display: inline-block;
   width: 18px;
   height: 18px;
-  background: #4e4e4e;
+  background: #cccccc;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
@@ -2583,79 +2584,78 @@ Extra-button is used to show total selected rows
   vertical-align: super;
   cursor: pointer;
   margin-left: 10px;
-  color: #818181;
+  color: white;
 }
 /* line 105, ../sass/_details.scss */
 .object-details h3 .popover-dismiss:hover, .object-details h3 .popover-dismiss:focus {
-  background: #686868;
+  background: #b3b3b3;
   color: #eeeeee;
 }
 /* line 111, ../sass/_details.scss */
 .object-details h3 .popover .popover-content {
   font-size: 12px;
-  color: #303030;
   line-height: 130%;
 }
-/* line 118, ../sass/_details.scss */
+/* line 117, ../sass/_details.scss */
 .object-details .icon-link {
   margin-right: 10px;
 }
-/* line 121, ../sass/_details.scss */
+/* line 120, ../sass/_details.scss */
 .object-details p {
   margin: 10px 20px;
   font-style: italic;
 }
-/* line 126, ../sass/_details.scss */
+/* line 125, ../sass/_details.scss */
 .object-details .length {
   margin-left: 6px;
   border: 0 none;
   font-style: italic;
 }
-/* line 130, ../sass/_details.scss */
+/* line 129, ../sass/_details.scss */
 .object-details .length::before {
   content: '( ';
 }
-/* line 133, ../sass/_details.scss */
+/* line 132, ../sass/_details.scss */
 .object-details .length::after {
   content: ' )';
 }
-/* line 137, ../sass/_details.scss */
+/* line 136, ../sass/_details.scss */
 .object-details > .object-details {
   margin-left: -20px;
   margin-right: -20px;
   padding: 12px 20px;
 }
 
-/* line 145, ../sass/_details.scss */
+/* line 144, ../sass/_details.scss */
 .object-details-content .nav-tabs > li a {
   opacity: 0.7;
 }
-/* line 148, ../sass/_details.scss */
+/* line 147, ../sass/_details.scss */
 .object-details-content .nav-tabs > li.active > a {
   opacity: 1;
 }
-/* line 153, ../sass/_details.scss */
+/* line 152, ../sass/_details.scss */
 .object-details-content .nav-tabs > li:not(.active) > a:hover, .object-details-content .nav-tabs > li:not(.active) > a:focus {
   opacity: 1;
 }
 
-/* line 158, ../sass/_details.scss */
+/* line 157, ../sass/_details.scss */
 .tab-pane {
   overflow: auto;
 }
 
-/* line 162, ../sass/_details.scss */
+/* line 161, ../sass/_details.scss */
 .parts-separator {
-  border-top: 2px solid #818181;
+  border-top: 2px solid #e6e6e6;
   padding-top: 1em;
 }
-/* line 165, ../sass/_details.scss */
+/* line 164, ../sass/_details.scss */
 .parts-separator h2 {
   font-size: 24px;
   margin-bottom: 2em;
   padding-top: 1em;
 }
-/* line 169, ../sass/_details.scss */
+/* line 168, ../sass/_details.scss */
 .parts-separator h2 em {
   max-width: 50%;
   display: inline;
@@ -2665,45 +2665,45 @@ Extra-button is used to show total selected rows
   vertical-align: top;
 }
 
-/* line 180, ../sass/_details.scss */
+/* line 179, ../sass/_details.scss */
 .part-two > .object-details {
-  border-bottom: 2px solid #818181;
-  background: #383838;
+  border-bottom: 2px solid #e6e6e6;
+  background: whitesmoke;
   padding: 14px 20px;
 }
-/* line 184, ../sass/_details.scss */
+/* line 183, ../sass/_details.scss */
 .part-two > .object-details .object-details {
   padding: 5px 20px;
 }
-/* line 187, ../sass/_details.scss */
+/* line 186, ../sass/_details.scss */
 .part-two > .object-details .object-details:hover, .part-two > .object-details .object-details:focus {
-  background: #3d3d3d;
+  background: #ebebeb;
 }
-/* line 192, ../sass/_details.scss */
+/* line 191, ../sass/_details.scss */
 .part-two > .object-details .custom-btn span {
   padding: 5px;
 }
-/* line 197, ../sass/_details.scss */
+/* line 196, ../sass/_details.scss */
 .part-two .object-details-content {
   display: none;
   padding: 0 35px;
 }
 
-/* line 230, ../sass/_details.scss */
+/* line 229, ../sass/_details.scss */
 .show-hide-all span.snf-font-arrow-up {
   display: none;
   padding: 0;
 }
-/* line 235, ../sass/_details.scss */
+/* line 234, ../sass/_details.scss */
 .show-hide-all span.snf-font-arrow-down {
   display: inline;
   padding: 0;
 }
-/* line 241, ../sass/_details.scss */
+/* line 240, ../sass/_details.scss */
 .show-hide-all.open .snf-font-arrow-up {
   display: inline;
 }
-/* line 244, ../sass/_details.scss */
+/* line 243, ../sass/_details.scss */
 .show-hide-all.open .snf-font-arrow-down {
   display: none;
 }
@@ -2735,40 +2735,41 @@ Extra-button is used to show total selected rows
   height: 30px;
   margin: 0 10px 10px 0;
   display: inline-block;
-  background: white;
+  background: whitesmoke;
+  border: 1px solid #cccccc;
 }
-/* line 30, ../sass/_filters.scss */
+/* line 31, ../sass/_filters.scss */
 .filter .form-group {
   margin: 0;
   height: 30px;
 }
-/* line 35, ../sass/_filters.scss */
+/* line 36, ../sass/_filters.scss */
 .filter label,
 .filter .dropdown {
   height: 30px;
   line-height: 30px;
   border: 0 none;
   padding: 0 10px;
-  color: #303030;
+  color: #222222;
   background: transparent;
   font-weight: normal;
   margin: 0;
 }
-/* line 45, ../sass/_filters.scss */
+/* line 46, ../sass/_filters.scss */
 .filter .dropdown-menu {
-  background: white;
+  background: whitesmoke;
   margin: 0;
 }
-/* line 48, ../sass/_filters.scss */
+/* line 49, ../sass/_filters.scss */
 .filter .dropdown-menu > .active > a {
-  background: white;
+  background: gainsboro;
 }
-/* line 51, ../sass/_filters.scss */
+/* line 52, ../sass/_filters.scss */
 .filter .dropdown-menu > li:hover > a {
-  background: white;
+  background: #e8e8e8;
   color: inherit;
 }
-/* line 56, ../sass/_filters.scss */
+/* line 57, ../sass/_filters.scss */
 .filter input {
   border: 0 none;
   background: transparent;
@@ -2776,48 +2777,48 @@ Extra-button is used to show total selected rows
   line-height: 30px;
   padding: 0 5px;
   font-weight: normal;
-  color: #303030;
+  color: #222222;
 }
 
-/* line 70, ../sass/_filters.scss */
+/* line 71, ../sass/_filters.scss */
 .filter-dropdown .dropdown > a .selected-value {
   margin-left: 4px;
 }
-/* line 73, ../sass/_filters.scss */
+/* line 74, ../sass/_filters.scss */
 .filter-dropdown .dropdown > a .arrow {
   font-weight: bold;
 }
-/* line 78, ../sass/_filters.scss */
+/* line 79, ../sass/_filters.scss */
 .filter-dropdown .dropdown.open a {
   text-decoration: none;
-  color: #303030;
+  color: #222222;
 }
-/* line 83, ../sass/_filters.scss */
+/* line 84, ../sass/_filters.scss */
 .filter-dropdown .dropdown a {
-  color: #303030;
+  color: #222222;
 }
-/* line 86, ../sass/_filters.scss */
+/* line 87, ../sass/_filters.scss */
 .filter-dropdown .dropdown .dropdown-menu {
   width: auto;
 }
-/* line 88, ../sass/_filters.scss */
+/* line 89, ../sass/_filters.scss */
 .filter-dropdown .dropdown .dropdown-menu a {
   padding-left: 12px;
   padding-right: 12px;
 }
-/* line 89, ../sass/_filters.scss */
+/* line 90, ../sass/_filters.scss */
 .filter-dropdown .dropdown .dropdown-menu a span {
   margin-right: 6px;
 }
 
-/* line 99, ../sass/_filters.scss */
+/* line 100, ../sass/_filters.scss */
 body input:not(.subject):focus {
   border-color: transparent;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 
-/* line 104, ../sass/_filters.scss */
+/* line 105, ../sass/_filters.scss */
 .filters.subnav-fixed {
   top: 50px;
 }
@@ -2868,7 +2869,7 @@ p.progress-area {
   vertical-align: text-top;
   padding: 4px 8px;
   border: 1px solid #d9d9d9;
-  color: #303030;
+  color: #222222;
 }
 /* line 48, ../sass/_modals.scss */
 .modal textarea.body, .modal input.body {
@@ -3123,7 +3124,7 @@ table .wrap {
   float: right;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: #4d99d8;
+  background-color: #005b9a;
   color: #fff;
 }
 /* line 55, ../sass/_tables.scss */
@@ -3131,7 +3132,7 @@ table .wrap {
 .table-items:not(.table-selected) td:last-child .summary-expand:hover,
 .table-items:not(.table-selected) td:last-child .summary-expand:focus {
   text-decoration: none;
-  background-color: #83b8e4;
+  background-color: #ee5161;
 }
 /* line 60, ../sass/_tables.scss */
 .table-selected-main:not(.table-selected) td:last-child dl,
@@ -3152,14 +3153,14 @@ table .wrap {
 /* line 77, ../sass/_tables.scss */
 #table-items-selected_filter label,
 #table-items-total_filter label {
-  color: white;
+  color: #222222;
 }
 /* line 80, ../sass/_tables.scss */
 #table-items-selected_filter input,
 #table-items-total_filter input {
-  color: #303030;
-  background: white;
-  border: 0 none;
+  color: #222222;
+  background: whitesmoke;
+  border: 1px solid #cccccc;
   padding: 3px 5px;
 }
 /* line 85, ../sass/_tables.scss */
@@ -3171,7 +3172,7 @@ table .wrap {
 /* line 91, ../sass/_tables.scss */
 #table-items-selected_wrapper {
   padding: 10px;
-  border: 1px solid gray;
+  border: 1px solid #e6e6e6;
   margin-bottom: 20px;
   display: none;
 }
@@ -3195,25 +3196,25 @@ table.dataTable tbody tr {
 }
 /* line 114, ../sass/_tables.scss */
 table.dataTable tbody tr.even {
-  background-color: #3d3d3d;
+  background-color: whitesmoke;
 }
 
 /* line 120, ../sass/_tables.scss */
 table.dataTable thead th,
 table.dataTable thead td {
   border-bottom: 1px solid white;
-  border-top: 1px solid white;
+  border-top: 1px solid #e6e6e6;
 }
 
 /* line 124, ../sass/_tables.scss */
 table.dataTable tbody tr:hover {
-  background-color: #4f4f4f;
+  background-color: #e0e0e0;
 }
 
 /* line 127, ../sass/_tables.scss */
 table.dataTable tbody tr.selected {
-  color: white;
-  background-color: #303030;
+  color: #222222;
+  background-color: #cccccc;
 }
 
 /* line 134, ../sass/_tables.scss */
@@ -3232,7 +3233,7 @@ html body .dataTables_wrapper table th.sorting, html body .dataTables_wrapper ta
 .dataTables_wrapper .dataTables_paginate {
   padding-top: 0;
   margin-bottom: 0.5em;
-  color: white;
+  color: #222222;
   line-height: 35px;
 }
 
@@ -3244,38 +3245,45 @@ table.dataTable.no-footer {
 
 /* line 159, ../sass/_tables.scss */
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: white !important;
+  color: #222222 !important;
   padding: 0 1em;
 }
 
 /* line 166, ../sass/_tables.scss */
 .container .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
 .container .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
-  background: #303030;
-  border-color: white;
+  background: transparent;
+  border-color: #222222;
+  color: #222222 !important;
 }
 
-/* line 171, ../sass/_tables.scss */
-.container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
+/* line 172, ../sass/_tables.scss */
+.container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
   border-color: transparent;
+  color: #818181 !important;
 }
-
 /* line 177, ../sass/_tables.scss */
+.container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus, .container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+  color: #818181 !important;
+}
+
+/* line 184, ../sass/_tables.scss */
 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-  background: white;
+  background: #cccccc;
+  color: #222222 !important;
   border: transparent;
 }
 
-/* line 182, ../sass/_tables.scss */
+/* line 190, ../sass/_tables.scss */
 .dataTables_wrapper > .custom-buttons {
   margin-bottom: 1em;
 }
 
-/* line 186, ../sass/_tables.scss */
+/* line 194, ../sass/_tables.scss */
 .dataTables_wrapper .dataTables_processing {
-  background: #4e4e4e;
+  background: #ffa914;
   color: white;
   padding: 5px 10px;
   -webkit-box-shadow: inset 0 0 5px #888888;
@@ -3283,7 +3291,7 @@ table.dataTable.no-footer {
   z-index: 1;
 }
 
-/* line 194, ../sass/_tables.scss */
+/* line 202, ../sass/_tables.scss */
 .fixed {
   position: fixed;
 }
@@ -3366,8 +3374,8 @@ h1, h2, h3, h4 {
   display: inline-block;
   text-align: center;
   opacity: 1;
-  border: 1px solid white;
-  color: white;
+  border: 1px solid #222222;
+  color: #222222;
   opacity: 1;
 }
 /* line 29, ../sass/_bars-btns.scss */
@@ -3408,7 +3416,7 @@ h1, h2, h3, h4 {
 }
 /* line 65, ../sass/_bars-btns.scss */
 .app-list a:hover span, .app-list a:focus span {
-  border-color: white;
+  border-color: #222222;
 }
 /* line 69, ../sass/_bars-btns.scss */
 .app-list a.disabled {
@@ -3432,7 +3440,7 @@ h1, h2, h3, h4 {
 /* line 65, ../sass/_extra.scss */
 .nav-simple {
   padding: 20px;
-  border-bottom: 1px solid white;
+  border-bottom: 1px solid #222222;
 }
 /* line 68, ../sass/_extra.scss */
 .nav-simple .header {
@@ -3458,11 +3466,11 @@ h1, h2, h3, h4 {
 }
 /* line 86, ../sass/_extra.scss */
 .nav-simple .login-info .has-dropdown:hover > a, .nav-simple .login-info .has-dropdown:focus > a {
-  background: #4d4d4d;
+  background: white;
 }
 /* line 90, ../sass/_extra.scss */
 .nav-simple .login-info .has-dropdown > a {
-  color: white;
+  color: #222222;
   display: inline-block;
   padding: 0 10px;
 }
@@ -3477,29 +3485,28 @@ h1, h2, h3, h4 {
 /* line 106, ../sass/_extra.scss */
 .navbar-default {
   border: 0 none;
+  border-bottom: 1px solid #e6e6e6;
   z-index: 1040;
   margin: 0 auto;
 }
-/* line 110, ../sass/_extra.scss */
+/* line 111, ../sass/_extra.scss */
 .navbar-default .container-fluid {
   padding: 0;
 }
-/* line 113, ../sass/_extra.scss */
+/* line 114, ../sass/_extra.scss */
 .navbar-default .home-icon {
   padding: 0;
   height: 50px;
   width: 50px;
   text-align: center;
   line-height: 50px;
+  font-size: 2px;
+  background: #00a551;
 }
-/* line 119, ../sass/_extra.scss */
+/* line 122, ../sass/_extra.scss */
 .navbar-default .home-icon img {
   max-height: 50px;
 }
-/* line 122, ../sass/_extra.scss */
-.navbar-default .home-icon:hover {
-  background-color: #333333;
-}
 
 /* line 129, ../sass/_extra.scss */
 .sub-nav {
@@ -3552,77 +3559,77 @@ svg > text:last-child {
 
 /* line 174, ../sass/_extra.scss */
 .tab-content {
-  background: #4e4e4e;
-  color: white;
+  background: #d9d9d9;
+  color: #222222;
   padding: 20px;
+  border: 0 none;
 }
-/* line 178, ../sass/_extra.scss */
+/* line 179, ../sass/_extra.scss */
 .tab-content .well {
   margin-bottom: 0;
 }
 
-/* line 183, ../sass/_extra.scss */
+/* line 184, ../sass/_extra.scss */
 .selection-indicator {
   cursor: pointer;
   padding: 6px 12px 6px 6px;
 }
 
 /* Notification area */
-/* line 190, ../sass/_extra.scss */
+/* line 191, ../sass/_extra.scss */
 .notify {
   padding: 30px 10px 15px;
   width: 100%;
   position: fixed;
   bottom: 0;
-  background: white;
-  color: #303030;
+  background: #444444;
+  color: white;
 }
-/* line 198, ../sass/_extra.scss */
+/* line 199, ../sass/_extra.scss */
 .notify .container > *:not(:last-child) {
   margin-bottom: 16px;
 }
-/* line 201, ../sass/_extra.scss */
+/* line 202, ../sass/_extra.scss */
 .notify .remove-icon {
   color: transparent;
   margin-left: 20px;
   font-weight: bold;
 }
-/* line 207, ../sass/_extra.scss */
+/* line 208, ../sass/_extra.scss */
 .notify .container > *:hover .remove-icon {
   color: #d9534f;
 }
-/* line 211, ../sass/_extra.scss */
+/* line 212, ../sass/_extra.scss */
 .notify .state-icon {
   margin-right: 10px;
 }
-/* line 214, ../sass/_extra.scss */
+/* line 215, ../sass/_extra.scss */
 .notify .success {
   color: #449d44;
 }
-/* line 217, ../sass/_extra.scss */
+/* line 218, ../sass/_extra.scss */
 .notify .error {
   color: #d9534f;
 }
-/* line 220, ../sass/_extra.scss */
+/* line 221, ../sass/_extra.scss */
 .notify .pending {
   color: #f0ad4e;
 }
-/* line 223, ../sass/_extra.scss */
+/* line 224, ../sass/_extra.scss */
 .notify .warning {
   font-style: italic;
   font-weight: bold;
-  color: #4e4e4e;
 }
 /* line 228, ../sass/_extra.scss */
 .notify .close-notify {
   position: absolute;
   right: 20px;
   top: 20px;
-  color: #303030;
+  color: white;
 }
 /* line 234, ../sass/_extra.scss */
 .notify .close-notify:hover, .notify .close-notify:focus {
-  color: #222222;
+  color: inherit;
 }
 /* line 238, ../sass/_extra.scss */
 .notify .dl-horizontal {
@@ -3667,7 +3674,7 @@ svg > text:last-child {
 /* line 276, ../sass/_extra.scss */
 .popover {
   max-width: none;
-  color: #303030;
+  color: #222222;
   margin-bottom: 20px;
 }
 /* line 280, ../sass/_extra.scss */
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss
index 4bd440b43..892a09dd0 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss
@@ -107,6 +107,7 @@ and light gray font colors
 	color: $border;
 	&:hover,
     &:focus{
+        opacity:1;
 		border-bottom-color: $border;
         color: $border;
 	}
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_details.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_details.scss
index 91bed41c8..2d7f4cb25 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_details.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_details.scss
@@ -110,7 +110,6 @@
         .popover {
             .popover-content {
                 font-size: 12px;
-                color: $reverse-text-color;
                 line-height: 130%;
             }
         }
@@ -160,7 +159,7 @@
 }
 
 .parts-separator {
-    border-top: 2px solid $gray-light-extra;
+    border-top: 2px solid $parts-separator-color;
     padding-top: 1em;
     h2 {
         font-size: 24px;
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_extra.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_extra.scss
index 9620c291a..800a9c956 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_extra.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_extra.scss
@@ -104,7 +104,8 @@ h1,h2,h3,h4 {
 /* Navigation */
 
 .navbar-default {
-    border: 0 none;
+    border:0 none;
+    border-bottom: 1px solid $navbar-default-border;
     z-index: 1040;
     margin: 0 auto;
     .container-fluid {
@@ -116,12 +117,11 @@ h1,h2,h3,h4 {
         width: $navbar-height;
         text-align: center;
         line-height: $navbar-height;
+        font-size: 2px;
+        background: $navbar-default-brand-bg;
         img {
             max-height: $navbar-height;
         }
-        &:hover {
-            background-color: $navbar-default-link-hover-bg;
-        }
     }
 
 }
@@ -175,6 +175,7 @@ svg>text:last-child {
 	background: $tab-content-bg;
     color: $tab-content-color;
 	padding: 20px;
+    border: 0 none;
 	.well {
         margin-bottom: 0;
 	}
@@ -223,7 +224,6 @@ svg>text:last-child {
 	.warning {
 		font-style: italic;
 		font-weight: bold;
-		color: $gray-light;
 	}
 	.close-notify {
         position: absolute;
@@ -232,7 +232,7 @@ svg>text:last-child {
         color: $notify-close-color;
         &:hover,
         &:focus{
-            color: $primary-color;
+            color: inherit;
         }
     }
 	.dl-horizontal {
@@ -275,7 +275,7 @@ svg>text:last-child {
 
 .popover {
 	max-width: none;
-    color: $reverse-text-color;
+    color: $popover-color;
 	margin-bottom: 20px;
 	h2 {
 		text-align: center;
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_filters.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_filters.scss
index 044ecf3f2..50122352f 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_filters.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_filters.scss
@@ -27,6 +27,7 @@ $filter-height: 30px;
     margin: 0 $filter-margin $filter-margin 0;
     display: inline-block;
     background: $filter-bg;
+    border: 1px solid $filter-border-color;
     .form-group {
         margin: 0;
         height: $filter-height;
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_loaders.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_loaders.scss
index 3e6a3326f..ba659d00b 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_loaders.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_loaders.scss
@@ -5,7 +5,7 @@
 .spinner > div {
   width: 8px;
   height: 8px;
-  background-color: white;
+  background-color: $text-color;
 
   border-radius: 100%;
   display: inline-block;
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_palette1.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_palette1.scss
index baa172a0e..bb9386097 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_palette1.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_palette1.scss
@@ -3,5 +3,10 @@ $theme-ciel:            #00ADF1;
 $theme-tyrquoise:       #16C0B2;
 $theme-yellow:          #FFA914;
 $theme-red:             #EE5161;
+$theme-gray-light:      #f5f5f5;
+$theme-black:           #222;
+$theme-gray-medium:     #ccc;
+$theme-gray-dark:       #444;
 
 
+$theme-border-light:          lighten($theme-gray-medium,10%);
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_settings.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_settings.scss
index dd86d1a11..36668a696 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_settings.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_settings.scss
@@ -42,4 +42,4 @@ $details-title-height:          35px;
 
 @import "palette1";
 @import "bootstrap/variables";
-//@import "theme1";
+@import "theme1";
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_tables.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_tables.scss
index 754010a57..9c679c6b0 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_tables.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_tables.scss
@@ -78,9 +78,9 @@ table .wrap {
         color: $text-color;
     }
     input {
-        color: $reverse-text-color;
+        color: $filter-font-color;
         background: $filter-bg;
-        border: 0 none;
+        border: 1px solid $filter-border-color;
         padding: 3px 5px;
         &:focus {
             outline: 0 none;
@@ -90,7 +90,7 @@ table .wrap {
 
 #table-items-selected_wrapper {
     padding: 10px;
-    border: 1px solid gray;
+    border: 1px solid $table-selected-border;
     margin-bottom: 20px;
     display: none;
 }
@@ -119,10 +119,10 @@ table.dataTable tbody tr {
 table.dataTable thead th,
 table.dataTable thead td {
   border-bottom: 1px solid white;
-  border-top: 1px solid $table-border-color;
+  border-top: 1px solid $table-datatable-border-color;
 }
 table.dataTable tbody tr:hover {
-    background-color: lighten($table-zebra-row-bg, 7%);
+    background-color: $table-row-hover;
 }
 table.dataTable tbody tr.selected {
     color: $table-selected-row-color;
@@ -148,7 +148,7 @@ html body .dataTables_wrapper {
 .dataTables_wrapper .dataTables_paginate {
     padding-top: 0;
     margin-bottom: 0.5em;
-    color: white;
+    color: $text-color;
     line-height: $datatabled-actions-height;
 }
 table.dataTable.no-footer {
@@ -157,25 +157,33 @@ table.dataTable.no-footer {
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-    color: white!important;
+    color: $text-color!important;
     padding: 0 1em;
 }
 
 .container .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
 .container .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
 {
-    background: $table-selected-row-bg;
-    border-color: white;
+    background: transparent;
+    border-color: $text-color;
+    color: $text-color!important;
 }
 
-.container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
+.container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
     border-color: transparent;
+    color: $btn-link-disabled-color!important; 
+    &:hover,
+    &:focus,
+    &:active {
+        color: $btn-link-disabled-color!important; 
+    }
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-    background: white;
+    background: $table-paginate-current-bg;
+    color: $table-paginate-current-color!important;
     border: transparent;
 }
 
@@ -184,8 +192,8 @@ table.dataTable.no-footer {
 }
 
 .dataTables_wrapper .dataTables_processing {
-    background: $gray-light;
-    color: white;
+    background: $table-processing-bg;
+    color: $table-processing-color;
     padding: 5px 10px;
     @include box-shadow(inset 0 0 5px #888);
     z-index: 1;
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/_theme1.scss b/snf-admin-app/synnefo_admin/admin/static/sass/_theme1.scss
index 095336d68..e5934fdda 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/_theme1.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/_theme1.scss
@@ -11,6 +11,7 @@ $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")
 //
 //## Gray and brand colors for use across Bootstrap.
 
+$synnefo-green:         #00a551;
 $gray-darker:            lighten(#000, 13.5%) !default; // #222
 $gray-dark:              $snf_gray-dark;
 $gray:                   lighten(#000, 33.5%) !default; // #555
@@ -31,19 +32,18 @@ $secondary-color:       $snf_gray-dark;
 // ## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-$body-bg:               white;
+$body-bg:               #fff;
 //** Global text color on `<body>`.
-$text-color:            #222;
-$reverse-text-color:    $secondary-color;
+$text-color:            $theme-black;
+$reverse-text-color:    #fff;
 
 //** Global textual link color.
-$link-color:            $ciel;
-//** Link hover color set via `darken()` function.
-$link-hover-color:      lighten($link-color, 13%) !default;
+$link-color:            $theme-blue;
+$link-hover-color:      $theme-red;
 
 // ----- EXTRA COLOR-RELATED SETTINGS
 
-$hover-nav-color:       #333;
+$hover-nav-color:       darken($theme-gray-light,3%);
 
 
 $secondary-link-color:  white;
@@ -54,29 +54,57 @@ $bad-karma-color:       $red-intense;
 $neutral-karma-color:   $orange-intense;
 $good-karma-color:      $green-intense;
 
-$btn-outline-color:     #fff;
-$btn-line-bg:           $gray-dark;
-$btn-line-border:       #fff;
+$btn-outline-color:     $total-black;
+$btn-line-bg:           $theme-border-light;
+$btn-line-border:       $total-black;
 
 // Tables
-$table-selected-row-bg:     red;
-$table-selected-row-color:  blue;
-$table-zebra-row-bg:        orange;    
-$table-border-color:        pink;
+$table-selected-row-bg:     $theme-gray-medium;
+$table-selected-row-color:  $text-color;
+$table-zebra-row-bg:        $theme-gray-light;    
+$table-row-hover:           lighten($theme-gray-medium,8%);
+$table-datatable-border-color:        $theme-border-light;
+$table-processing-bg:       $theme-yellow;
+$table-processing-color:    $reverse-text-color;
+$table-paginate-current-bg: $theme-gray-medium;
+$table-paginate-current-color:  $text-color;
+$table-selected-border:     $theme-border-light;
 
 
 // Filters
-$filter-bg:             #fff;
-$filter-font-color:     $reverse-text-color;
-$filter-active-bg:      #fff;
-$filter-hover-bg:       #fff;
+$filter-bg:             $theme-gray-light;
+$filter-font-color:     $text-color;
+$filter-active-bg:      darken($filter-bg,10%);
+$filter-hover-bg:       darken($filter-bg,5%);
 $filter-hover-color:    inherit;
+$filter-border-color:   $theme-gray-medium;
 
 // Tabs
-$tab-content-bg:        $theme-red;
-$tab-content-color:     #fff;
+$tab-content-bg:        lighten($theme-gray-medium,5%);
+$tab-content-color:     $text-color;
+$tab-border:            $theme-border-light;
 
 
+$object-details-bg:     $theme-gray-light;
+$object-details-border: $theme-border-light;
+
+$object-details-row-hover-bg:      darken($object-details-bg,4%);
+
+// Popover dismiss icon
+$popover-dismiss-bg:            $theme-gray-medium;
+$popover-dismiss-color:         lighten($popover-dismiss-bg,20%);
+$popover-dismiss-bg-hover:      darken($popover-dismiss-bg,10%);
+$popover-dismiss-color-hover:   $almost-white;
+
+$popover-color:         $text-color;
+$modal-text-color:      $text-color;
+
+// Notification area
+$notify-bg:             $theme-gray-dark;
+$notify-color:          $reverse-text-color;
+$notify-close-color:    #fff;
+
+$parts-separator-color: $theme-border-light;
 // ----- END OF EXTRA COLOR-RELATED SETIINGS
 
 
@@ -173,7 +201,8 @@ $table-bg-hover:                #f5f5f5 !default;
 $table-bg-active:               $table-bg-hover !default;
 
 //** Border color for table and cell borders.
-$table-border-color:            #ddd !default;
+$table-border-color:            $theme-gray-medium;
+
 
 
 //== Buttons
@@ -380,22 +409,23 @@ $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2
 $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;
-$navbar-default-bg:                $primary-color;
-$navbar-default-border:            inherit;
+$navbar-default-bg:                $theme-gray-light;
+$navbar-default-border:            $theme-border-light;
 
 // Navbar links
 $navbar-default-link-color:                $text-color;
 $navbar-default-link-hover-color:          $text-color;
 $navbar-default-link-hover-bg:             $hover-nav-color;
 $navbar-default-link-active-color:         $reverse-text-color;
-$navbar-default-link-active-bg:            white;
+$navbar-default-link-active-bg:            $theme-red;
 $navbar-default-link-disabled-color:       #ccc !default;
 $navbar-default-link-disabled-bg:          transparent !default;
 
 // Navbar brand label
 $navbar-default-brand-color:               $navbar-default-link-color !default;
 $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
-$navbar-default-brand-hover-bg:            transparent !default;
+$navbar-default-brand-hover-bg:         darken($synnefo-green,5%);
+$navbar-default-brand-bg:               $synnefo-green;
 
 // Navbar toggle
 $navbar-default-toggle-hover-bg:           #ddd !default;
@@ -406,12 +436,12 @@ $navbar-default-toggle-border-color:       #ddd !default;
 // Inverted navbar
 // Reset inverted navbar basics
 $navbar-inverse-color:                      $text-color;
-$navbar-inverse-bg:                         $gray-light;
+$navbar-inverse-bg:                         $theme-gray-medium;
 $navbar-inverse-border:                     transparent;
 
 // Inverted navbar links
 $navbar-inverse-link-color:                 $text-color;
-$navbar-inverse-link-hover-color:           $reverse-text-color;
+$navbar-inverse-link-hover-color:           $text-color;
 $navbar-inverse-link-hover-bg:              $gray-lighter;
 $navbar-inverse-link-active-color:          white;
 $navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
@@ -443,7 +473,7 @@ $nav-disabled-link-hover-color:             $gray-light !default;
 $nav-open-link-hover-color:                 #fff !default;
 
 //== Tabs
-$nav-tabs-border-color:                     inherit;
+$nav-tabs-border-color:                     $theme-border-light;
 
 $nav-tabs-link-hover-border-color:          inherit;
 
@@ -582,9 +612,9 @@ $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%
 //##
 
 //** Default label background color
-$label-default-bg:            $almost-white !default;
+$label-default-bg:            $theme-gray-dark;
 //** Primary label background color
-$label-primary-bg:            $brand-primary !default;
+$label-primary-bg:            $brand-primay !default;
 //** Success label background color
 $label-success-bg:            $brand-success !default;
 //** Info label background color
@@ -595,7 +625,7 @@ $label-warning-bg:            $brand-warning !default;
 $label-danger-bg:             $brand-danger !default;
 
 //** Default label text color
-$label-color:                 $gray-dark !default;
+$label-color:                 #fff;
 //** Default text color of a linked label
 $label-link-hover-color:      #fff !default;
 
diff --git a/snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_variables.scss b/snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_variables.scss
index c048c38cc..a75995872 100644
--- a/snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_variables.scss
+++ b/snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_variables.scss
@@ -10,12 +10,12 @@ $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.
-
-$gray-darker:            lighten(#000, 13.5%) !default; // #222
-$gray-dark:              $snf_gray-dark;
-$gray:                   lighten(#000, 33.5%) !default; // #555
-$gray-light:             $snf_gray-light;
-$gray-lighter:           lighten(#000, 85%) !default; // #eee
+$synnefo-green:         #00a551;
+$gray-darker:           lighten(#000, 13.5%) !default; // #222
+$gray-dark:             $snf_gray-dark;
+$gray:                  lighten(#000, 33.5%) !default; // #555
+$gray-light:            $snf_gray-light;
+$gray-lighter:          lighten(#000, 85%) !default; // #eee
 
 $brand-primary:         #fff;
 $brand-success:         #5cb85c !default;
@@ -39,7 +39,7 @@ $reverse-text-color:    $secondary-color;
 //** Global textual link color.
 $link-color:            $ciel;
 //** Link hover color set via `darken()` function.
-$link-hover-color:      lighten($link-color, 13%) !default;
+$link-hover-color:      lighten($link-color, 13%);
 
 // ----- EXTRA COLOR-RELATED SETTINGS
 
@@ -62,20 +62,27 @@ $btn-line-border:       #fff;
 $table-selected-row-bg:     $gray-dark;
 $table-selected-row-color:  white;
 $table-zebra-row-bg:        lighten($gray-dark,5%);    
-$table-border-color:        white;
+$table-row-hover:           lighten($table-zebra-row-bg, 7%);
+$table-datatable-border-color:        white;
+$table-processing-bg:       $gray-light;
+$table-processing-color:    $text-color;
+$table-paginate-current-bg: #fff;
+$table-paginate-current-color:  $reverse-text-color;
+$table-selected-border:     gray;
 
 
 // Filters
-$filter-bg:             #fff;
+$filter-bg:             $almost-white;
 $filter-font-color:     $reverse-text-color;
-$filter-active-bg:      #fff;
-$filter-hover-bg:       #fff;
+$filter-active-bg:      $filter-bg;
+$filter-hover-bg:       $gray-lighter;
 $filter-hover-color:    inherit;
+$filter-border-color:   transparent;
 
 // Tabs
 $tab-content-bg:        $gray-light;
 $tab-content-color:     #fff;
-
+$tab-border:            inherit;
 
 $object-details-bg:     lighten($body-bg,3%);
 $object-details-border: $gray-light-extra;
@@ -88,6 +95,7 @@ $popover-dismiss-color:         lighten($popover-dismiss-bg,20%);
 $popover-dismiss-bg-hover:      lighten($popover-dismiss-bg,10%);
 $popover-dismiss-color-hover:   $almost-white;
 
+$popover-color:         $reverse-text-color;
 $modal-text-color:      $reverse-text-color;
 
 // Notification area
@@ -95,6 +103,7 @@ $notify-bg:             #fff;
 $notify-color:          $reverse-text-color;
 $notify-close-color:    $gray-dark;
 
+$parts-separator-color: $snf_gray-light;
 // ----- END OF EXTRA COLOR-RELATED SETIINGS
 
 
@@ -191,7 +200,7 @@ $table-bg-hover:                #f5f5f5 !default;
 $table-bg-active:               $table-bg-hover !default;
 
 //** Border color for table and cell borders.
-$table-border-color:            #ddd !default;
+$table-border-color:            #ddd;
 
 
 //== Buttons
@@ -405,15 +414,16 @@ $navbar-default-border:            inherit;
 $navbar-default-link-color:                $text-color;
 $navbar-default-link-hover-color:          $text-color;
 $navbar-default-link-hover-bg:             $hover-nav-color;
-$navbar-default-link-active-color:         $reverse-text-color;
-$navbar-default-link-active-bg:            white;
+$navbar-default-link-active-color:         #fff;
+$navbar-default-link-active-bg:            $theme-red;
 $navbar-default-link-disabled-color:       #ccc !default;
 $navbar-default-link-disabled-bg:          transparent !default;
 
 // Navbar brand label
 $navbar-default-brand-color:               $navbar-default-link-color !default;
 $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
-$navbar-default-brand-hover-bg:            transparent !default;
+$navbar-default-brand-hover-bg:         darken($synnefo-green,5%);
+$navbar-default-brand-bg:               $synnefo-green;
 
 // Navbar toggle
 $navbar-default-toggle-hover-bg:           #ddd !default;
@@ -461,7 +471,7 @@ $nav-disabled-link-hover-color:             $gray-light !default;
 $nav-open-link-hover-color:                 #fff !default;
 
 //== Tabs
-$nav-tabs-border-color:                     inherit;
+$nav-tabs-border-color:                     transparent;
 
 $nav-tabs-link-hover-border-color:          inherit;
 
@@ -600,7 +610,7 @@ $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%
 //##
 
 //** Default label background color
-$label-default-bg:            $almost-white !default;
+$label-default-bg:            $almost-white;
 //** Primary label background color
 $label-primary-bg:            $brand-primary !default;
 //** Success label background color
@@ -615,7 +625,7 @@ $label-danger-bg:             $brand-danger !default;
 //** Default label text color
 $label-color:                 $gray-dark !default;
 //** Default text color of a linked label
-$label-link-hover-color:      #fff !default;
+$label-link-hover-color:      #fff;
 
 
 //== Modals
diff --git a/snf-admin-app/synnefo_admin/admin/templates/admin/subnav.html b/snf-admin-app/synnefo_admin/admin/templates/admin/subnav.html
index 9c113b6d6..98106214c 100644
--- a/snf-admin-app/synnefo_admin/admin/templates/admin/subnav.html
+++ b/snf-admin-app/synnefo_admin/admin/templates/admin/subnav.html
@@ -27,4 +27,3 @@
       {% endfor %}
     </ul>
 </div> <!-- /sub-nav -->
-
-- 
GitLab