From 0194e1b46a306a431ea99b11b30b41fbb6a86272 Mon Sep 17 00:00:00 2001
From: Florian BLOUET <florian.blouet@gmail.com>
Date: Tue, 24 Nov 2015 18:39:12 +0100
Subject: [PATCH] wip: css cleanup

---
 .../gulp/components/vendors/jquery-ui.js      |    3 +-
 .../www/_shared/styles/jquery-ui/_shared.scss | 1005 +++++++++++++++++
 .../_shared/styles/jquery-ui/dark-hive.scss   |  173 +++
 .../styles/jquery-ui/ui-lightness.scss        |  175 +++
 .../www/prod/skins/000000/skin-000000.scss    |  147 +--
 .../www/prod/skins/959595/skin-959595.scss    |  123 +-
 resources/www/prod/skins/skin-shared.scss     |   25 +-
 .../skins/ui-components/_answers-tools.scss   |    4 +-
 .../prod/skins/ui-components/_answers.scss    |  453 ++++----
 .../skins/ui-components/_colorpicker.scss     |   10 +-
 .../skins/ui-components/_context-menu.scss    |    9 +
 .../www/prod/skins/ui-components/_diapo.scss  |   13 +-
 .../www/prod/skins/ui-components/_forms.scss  |    5 +-
 .../www/prod/skins/ui-components/_gui.scss    |   10 +-
 .../prod/skins/ui-components/_jquery-ui.scss  |   75 +-
 .../prod/skins/ui-components/_main-menu.scss  |   67 +-
 .../skins/ui-components/_modal-bridge.scss    |  195 ++--
 .../prod/skins/ui-components/_modal-edit.scss |   25 +-
 .../skins/ui-components/_modal-export.scss    |    2 +-
 .../skins/ui-components/_modal-preview.scss   |   18 +-
 .../skins/ui-components/_modal-publish.scss   |   89 +-
 .../prod/skins/ui-components/_modal-push.scss |   67 +-
 .../skins/ui-components/_modal-tools.scss     |    0
 .../prod/skins/ui-components/_pagination.scss |    6 +-
 .../skins/ui-components/_search-form.scss     |   97 +-
 .../skins/ui-components/_thumb-extractor.scss |  316 +++---
 .../www/prod/skins/ui-components/_upload.scss |  452 ++++----
 .../ui-components/_workzone-baskets.scss      |    8 +-
 .../ui-components/_workzone-proposals.scss    |   16 +-
 .../ui-components/_workzone-thesaurus.scss    |   16 +-
 .../prod/skins/ui-components/_workzone.scss   |    6 +-
 .../www/vendors/jquery-ui/dark-hive.scss      |  153 ---
 .../www/vendors/jquery-ui/ui-lightness.scss   |  159 +--
 .../web/common/index_bootstrap.html.twig      |    2 +-
 34 files changed, 2378 insertions(+), 1546 deletions(-)
 create mode 100644 resources/www/_shared/styles/jquery-ui/_shared.scss
 create mode 100644 resources/www/_shared/styles/jquery-ui/dark-hive.scss
 create mode 100644 resources/www/_shared/styles/jquery-ui/ui-lightness.scss
 delete mode 100644 resources/www/prod/skins/ui-components/_modal-tools.scss

diff --git a/resources/gulp/components/vendors/jquery-ui.js b/resources/gulp/components/vendors/jquery-ui.js
index b8b918bdbb..bef8e05eb0 100644
--- a/resources/gulp/components/vendors/jquery-ui.js
+++ b/resources/gulp/components/vendors/jquery-ui.js
@@ -7,10 +7,11 @@ gulp.task('copy-jquery-ui-images', function(){
         .pipe(gulp.dest( config.paths.build + 'vendors/jquery-ui/images'));
 });
 
+// DEPRECATED > theme is loaded in skin 000000
 gulp.task('copy-jquery-ui-theme1', function(){
     utils.buildCssGroup([config.paths.src + 'vendors/jquery-ui/dark-hive.scss'], 'dark-hive', 'vendors/jquery-ui/css/');
 });
-
+// DEPRECATED > theme is loaded in skin 959595
 gulp.task('copy-jquery-ui-theme2', function(){
     utils.buildCssGroup([config.paths.src + 'vendors/jquery-ui/ui-lightness.scss'], 'ui-lightness', 'vendors/jquery-ui/css/');
 });
diff --git a/resources/www/_shared/styles/jquery-ui/_shared.scss b/resources/www/_shared/styles/jquery-ui/_shared.scss
new file mode 100644
index 0000000000..f41f239458
--- /dev/null
+++ b/resources/www/_shared/styles/jquery-ui/_shared.scss
@@ -0,0 +1,1005 @@
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+  display: none;
+}
+.ui-helper-hidden-accessible {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.ui-helper-reset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  line-height: 1.3;
+  text-decoration: none;
+  font-size: 100%;
+  list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+  content: "";
+  display: table;
+  border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+  clear: both;
+}
+.ui-helper-clearfix {
+  min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  opacity: 0;
+  filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+  z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+  cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+  display: block;
+  text-indent: -99999px;
+  overflow: hidden;
+  background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-resizable {
+  position: relative;
+}
+.ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+  display: none;
+}
+.ui-resizable-n {
+  cursor: n-resize;
+  height: 7px;
+  width: 100%;
+  top: -5px;
+  left: 0;
+}
+.ui-resizable-s {
+  cursor: s-resize;
+  height: 7px;
+  width: 100%;
+  bottom: -5px;
+  left: 0;
+}
+.ui-resizable-e {
+  cursor: e-resize;
+  width: 7px;
+  right: -5px;
+  top: 0;
+  height: 100%;
+}
+.ui-resizable-w {
+  cursor: w-resize;
+  width: 7px;
+  left: -5px;
+  top: 0;
+  height: 100%;
+}
+.ui-resizable-se {
+  cursor: se-resize;
+  width: 12px;
+  height: 12px;
+  right: 1px;
+  bottom: 1px;
+}
+.ui-resizable-sw {
+  cursor: sw-resize;
+  width: 9px;
+  height: 9px;
+  left: -5px;
+  bottom: -5px;
+}
+.ui-resizable-nw {
+  cursor: nw-resize;
+  width: 9px;
+  height: 9px;
+  left: -5px;
+  top: -5px;
+}
+.ui-resizable-ne {
+  cursor: ne-resize;
+  width: 9px;
+  height: 9px;
+  right: -5px;
+  top: -5px;
+}
+.ui-selectable-helper {
+  position: absolute;
+  z-index: 100;
+  border: 1px dotted black;
+}
+.ui-accordion .ui-accordion-header {
+  display: block;
+  cursor: pointer;
+  position: relative;
+  margin-top: 2px;
+  padding: .5em .5em .5em .7em;
+  min-height: 0; /* support: IE7 */
+}
+.ui-accordion .ui-accordion-icons {
+  padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-noicons {
+  padding-left: .7em;
+}
+.ui-accordion .ui-accordion-icons .ui-accordion-icons {
+  padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
+  position: absolute;
+  left: .5em;
+  top: 50%;
+  margin-top: -8px;
+}
+.ui-accordion .ui-accordion-content {
+  padding: 1em 2.2em;
+  border-top: 0;
+  overflow: auto;
+}
+.ui-autocomplete {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: default;
+}
+.ui-button {
+  display: inline-block;
+  position: relative;
+  padding: 0;
+  line-height: normal;
+  margin-right: .1em;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: center;
+  overflow: visible; /* removes extra width in IE */
+}
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+  text-decoration: none;
+}
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+  width: 2.2em;
+}
+/* button elements seem to need a little more width */
+button.ui-button-icon-only {
+  width: 2.4em;
+}
+.ui-button-icons-only {
+  width: 3.4em;
+}
+button.ui-button-icons-only {
+  width: 3.7em;
+}
+
+/* button text element */
+.ui-button .ui-button-text {
+  display: block;
+  line-height: normal;
+}
+.ui-button-text-only .ui-button-text {
+  padding: .4em 1em;
+}
+.ui-button-icon-only .ui-button-text,
+.ui-button-icons-only .ui-button-text {
+  padding: .4em;
+  text-indent: -9999999px;
+}
+.ui-button-text-icon-primary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+  padding: .4em 1em .4em 2.1em;
+}
+.ui-button-text-icon-secondary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+  padding: .4em 2.1em .4em 1em;
+}
+.ui-button-text-icons .ui-button-text {
+  padding-left: 2.1em;
+  padding-right: 2.1em;
+}
+/* no icon support for input elements, provide padding by default */
+input.ui-button {
+  padding: .4em 1em;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -8px;
+}
+.ui-button-icon-only .ui-icon {
+  left: 50%;
+  margin-left: -8px;
+}
+.ui-button-text-icon-primary .ui-button-icon-primary,
+.ui-button-text-icons .ui-button-icon-primary,
+.ui-button-icons-only .ui-button-icon-primary {
+  left: .5em;
+}
+.ui-button-text-icon-secondary .ui-button-icon-secondary,
+.ui-button-text-icons .ui-button-icon-secondary,
+.ui-button-icons-only .ui-button-icon-secondary {
+  right: .5em;
+}
+
+/* button sets */
+.ui-buttonset {
+  margin-right: 7px;
+}
+.ui-buttonset .ui-button {
+  margin-left: 0;
+  margin-right: -.3em;
+}
+
+/* workarounds */
+/* reset extra padding in Firefox, see h5bp.com/l */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.ui-datepicker {
+  width: 17em;
+  padding: .2em .2em 0;
+  display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+  position: relative;
+  padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+  position: absolute;
+  top: 2px;
+  width: 1.8em;
+  height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+  top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+  left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+  right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+  left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+  right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+  display: block;
+  position: absolute;
+  left: 50%;
+  margin-left: -8px;
+  top: 50%;
+  margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+  margin: 0 2.3em;
+  line-height: 1.8em;
+  text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+  font-size: 1em;
+  margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month-year {
+  width: 100%;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+  width: 49%;
+}
+.ui-datepicker table {
+  width: 100%;
+  font-size: .9em;
+  border-collapse: collapse;
+  margin: 0 0 .4em;
+}
+.ui-datepicker th {
+  padding: .7em .3em;
+  text-align: center;
+  font-weight: bold;
+  border: 0;
+}
+.ui-datepicker td {
+  border: 0;
+  padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+  display: block;
+  padding: .2em;
+  text-align: right;
+  text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+  background-image: none;
+  margin: .7em 0 0 0;
+  padding: 0 .2em;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+  float: right;
+  margin: .5em .2em .4em;
+  cursor: pointer;
+  padding: .2em .6em .3em .6em;
+  width: auto;
+  overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+  float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+  width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+  float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+  width: 95%;
+  margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+  width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+  width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+  width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+  border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+  clear: left;
+}
+.ui-datepicker-row-break {
+  clear: both;
+  width: 100%;
+  font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+  direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+  right: 2px;
+  left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+  left: 2px;
+  right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+  right: 1px;
+  left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+  left: 1px;
+  right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+  clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+  float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+  float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
+.ui-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: .2em;
+  outline: 0;
+}
+.ui-dialog .ui-dialog-titlebar {
+  padding: .4em 1em;
+  position: relative;
+}
+.ui-dialog .ui-dialog-title {
+  float: left;
+  margin: .1em 0;
+  white-space: nowrap;
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+  position: absolute;
+  right: .3em;
+  top: 50%;
+  width: 21px;
+  margin: -10px 0 0 0;
+  padding: 1px;
+  height: 20px;
+}
+.ui-dialog .ui-dialog-content {
+  position: relative;
+  border: 0;
+  padding: .5em 1em;
+  background: none;
+  overflow: auto;
+}
+.ui-dialog .ui-dialog-buttonpane {
+  text-align: left;
+  border-width: 1px 0 0 0;
+  background-image: none;
+  margin-top: .5em;
+  padding: .3em 1em .5em .4em;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  float: right;
+}
+.ui-dialog .ui-dialog-buttonpane button {
+  margin: .5em .4em .5em 0;
+  cursor: pointer;
+}
+.ui-dialog .ui-resizable-se {
+  width: 12px;
+  height: 12px;
+  right: -5px;
+  bottom: -5px;
+  background-position: 16px 16px;
+}
+.ui-draggable .ui-dialog-titlebar {
+  cursor: move;
+}
+.ui-menu {
+  list-style: none;
+  padding: 2px;
+  margin: 0;
+  display: block;
+  outline: none;
+}
+.ui-menu .ui-menu {
+  margin-top: -3px;
+  position: absolute;
+}
+.ui-menu .ui-menu-item {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  /* support: IE10, see #8844 */
+  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+}
+.ui-menu .ui-menu-divider {
+  margin: 5px -2px 5px -2px;
+  height: 0;
+  font-size: 0;
+  line-height: 0;
+  border-width: 1px 0 0 0;
+}
+.ui-menu .ui-menu-item a {
+  text-decoration: none;
+  display: block;
+  padding: 2px .4em;
+  line-height: 1.5;
+  min-height: 0; /* support: IE7 */
+  font-weight: normal;
+}
+.ui-menu .ui-menu-item a.ui-state-focus,
+.ui-menu .ui-menu-item a.ui-state-active {
+  font-weight: normal;
+  margin: -1px;
+}
+
+.ui-menu .ui-state-disabled {
+  font-weight: normal;
+  margin: .4em 0 .2em;
+  line-height: 1.5;
+}
+.ui-menu .ui-state-disabled a {
+  cursor: default;
+}
+
+/* icon support */
+.ui-menu-icons {
+  position: relative;
+}
+.ui-menu-icons .ui-menu-item a {
+  position: relative;
+  padding-left: 2em;
+}
+
+/* left-aligned */
+.ui-menu .ui-icon {
+  position: absolute;
+  top: .2em;
+  left: .2em;
+}
+
+/* right-aligned */
+.ui-menu .ui-menu-icon {
+  position: static;
+  float: right;
+}
+.ui-progressbar {
+  height: 2em;
+  text-align: left;
+  overflow: hidden;
+}
+.ui-progressbar .ui-progressbar-value {
+  margin: -1px;
+  height: 100%;
+}
+.ui-progressbar .ui-progressbar-overlay {
+  background: url('#{$imagesPath}animated-overlay.gif');
+  height: 100%;
+  filter: alpha(opacity=25);
+  opacity: 0.25;
+}
+.ui-progressbar-indeterminate .ui-progressbar-value {
+  background-image: none;
+}
+.ui-slider {
+  position: relative;
+  text-align: left;
+}
+.ui-slider .ui-slider-handle {
+  position: absolute;
+  z-index: 2;
+  width: 1.2em;
+  height: 1.2em;
+  cursor: default;
+}
+.ui-slider .ui-slider-range {
+  position: absolute;
+  z-index: 1;
+  font-size: .7em;
+  display: block;
+  border: 0;
+  background-position: 0 0;
+}
+
+/* For IE8 - See #6727 */
+.ui-slider.ui-state-disabled .ui-slider-handle,
+.ui-slider.ui-state-disabled .ui-slider-range {
+  filter: inherit;
+}
+
+.ui-slider-horizontal {
+  height: .8em;
+}
+.ui-slider-horizontal .ui-slider-handle {
+  top: -.3em;
+  margin-left: -.6em;
+}
+.ui-slider-horizontal .ui-slider-range {
+  top: 0;
+  height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+  left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+  right: 0;
+}
+
+.ui-slider-vertical {
+  width: .8em;
+  height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+  left: -.3em;
+  margin-left: 0;
+  margin-bottom: -.6em;
+}
+.ui-slider-vertical .ui-slider-range {
+  left: 0;
+  width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+  bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+  top: 0;
+}
+.ui-spinner {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0;
+  vertical-align: middle;
+}
+.ui-spinner-input {
+  border: none;
+  background: none;
+  color: inherit;
+  padding: 0;
+  margin: .2em 0;
+  vertical-align: middle;
+  margin-left: .4em;
+  margin-right: 22px;
+}
+.ui-spinner-button {
+  width: 16px;
+  height: 50%;
+  font-size: .5em;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  position: absolute;
+  cursor: default;
+  display: block;
+  overflow: hidden;
+  right: 0;
+}
+/* more specificity required here to overide default borders */
+.ui-spinner a.ui-spinner-button {
+  border-top: none;
+  border-bottom: none;
+  border-right: none;
+}
+/* vertical centre icon */
+.ui-spinner .ui-icon {
+  position: absolute;
+  margin-top: -8px;
+  top: 50%;
+  left: 0;
+}
+.ui-spinner-up {
+  top: 0;
+}
+.ui-spinner-down {
+  bottom: 0;
+}
+
+/* TR overrides */
+.ui-spinner .ui-icon-triangle-1-s {
+  /* need to fix icons sprite */
+  background-position: -65px -16px;
+}
+.ui-tabs {
+  position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+  padding: .2em;
+}
+.ui-tabs .ui-tabs-nav {
+  margin: 0;
+  padding: .2em .2em 0;
+}
+.ui-tabs .ui-tabs-nav li {
+  list-style: none;
+  float: left;
+  position: relative;
+  top: 0;
+  margin: 1px .2em 0 0;
+  border-bottom-width: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.ui-tabs .ui-tabs-nav li a {
+  float: left;
+  padding: .5em 1em;
+  text-decoration: none;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+  margin-bottom: -1px;
+  padding-bottom: 1px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
+.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
+.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
+  cursor: text;
+}
+.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
+  cursor: pointer;
+}
+.ui-tabs .ui-tabs-panel {
+  display: block;
+  border-width: 0;
+  padding: 1em 1.4em;
+  background: none;
+}
+.ui-tooltip {
+  padding: 8px;
+  position: absolute;
+  z-index: 9999;
+  max-width: 300px;
+  -webkit-box-shadow: 0 0 5px #aaa;
+  box-shadow: 0 0 5px #aaa;
+}
+body .ui-tooltip {
+  border-width: 2px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+  font-family: Verdana,Arial,sans-serif;
+  font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+  font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+  font-family: Verdana,Arial,sans-serif;
+  font-size: 1em;
+}
+
+
+/* positioning */
+.ui-icon-blank { background-position: 16px 16px; }
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+  border-top-left-radius: 6px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+  border-top-right-radius: 6px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+  border-bottom-left-radius: 6px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+  border-bottom-right-radius: 6px;
+}
diff --git a/resources/www/_shared/styles/jquery-ui/dark-hive.scss b/resources/www/_shared/styles/jquery-ui/dark-hive.scss
new file mode 100644
index 0000000000..ba3672cc55
--- /dev/null
+++ b/resources/www/_shared/styles/jquery-ui/dark-hive.scss
@@ -0,0 +1,173 @@
+$imagesPath: '/assets/vendors/jquery-ui/images/dark-hive/';
+$uiTextContentColor: #ffffff !default;
+$uiTextTitleColor: #333333 !default;
+$uiLinkColor: #ffffff !default;
+$uiLinkFocusColor: #c77405 !default;
+$uiLinkActiveColor: #eb8f00 !default;
+@import './shared';
+.ui-widget-content {
+  border: 1px solid #555555;
+  background: #000000 url('#{$imagesPath}ui-bg_loop_25_000000_21x21.png') 50% 50% repeat;
+  color: $uiTextContentColor;
+}
+.ui-widget-content a {
+  color: $uiLinkColor;
+}
+.ui-widget-header {
+  color: $uiLinkColor;
+  font-weight: bold;
+}
+.ui-widget-header a {
+  color: $uiLinkColor;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+  border: 1px solid #444444;
+  background: #222222 url('#{$imagesPath}ui-bg_highlight-soft_35_222222_1x100.png') 50% 50% repeat-x;
+  font-weight: normal;
+  color: #eeeeee;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+  color: #eeeeee;
+  text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+  border: 1px solid #0b93d5;
+  background: #003147 url('#{$imagesPath}ui-bg_highlight-soft_33_003147_1x100.png') 50% 50% repeat-x;
+  font-weight: normal;
+  color: #ffffff;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+  color: #ffffff;
+  text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+  border: 1px solid #26b3f7;
+  background: #0972a5 url('#{$imagesPath}ui-bg_highlight-hard_20_0972a5_1x100.png') 50% 50% repeat-x;
+  font-weight: normal;
+  color: #ffffff;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+  border: 1px solid #cccccc;
+  background: #eeeeee url('#{$imagesPath}ui-bg_highlight-soft_80_eeeeee_1x100.png') 50% top repeat-x;
+  color: #2e7db2;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+  color: #2e7db2;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+  border: 1px solid #ffb73d;
+  background: #ffc73d url('#{$imagesPath}ui-bg_glass_40_ffc73d_1x400.png') 50% 50% repeat-x;
+  color: #111111;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+  color: #111111;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+  color: #111111;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+  font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+  opacity: .7;
+  filter:Alpha(Opacity=70);
+  font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+  opacity: .35;
+  filter:Alpha(Opacity=35);
+  background-image: none;
+}
+.ui-state-disabled .ui-icon {
+  filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+  width: 16px;
+  height: 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_cccccc_256x240.png');
+}
+.ui-widget-header .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_ffffff_256x240.png');
+}
+.ui-state-default .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_cccccc_256x240.png');
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_ffffff_256x240.png');
+}
+.ui-state-active .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
+}
+.ui-state-highlight .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_4b8e0b_256x240.png');
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_a83300_256x240.png');
+}
+
+/* Overlays */
+.ui-widget-overlay {
+  background: #5c5c5c url('#{$imagesPath}ui-bg_flat_50_5c5c5c_40x100.png') 50% 50% repeat-x;
+  opacity: .8;
+  filter: Alpha(Opacity=80);
+}
+.ui-widget-shadow {
+  margin: -7px 0 0 -7px;
+  padding: 7px;
+  background: #cccccc url('#{$imagesPath}ui-bg_flat_30_cccccc_40x100.png') 50% 50% repeat-x;
+  opacity: .6;
+  filter: Alpha(Opacity=60);
+  border-radius: 8px;
+}
\ No newline at end of file
diff --git a/resources/www/_shared/styles/jquery-ui/ui-lightness.scss b/resources/www/_shared/styles/jquery-ui/ui-lightness.scss
new file mode 100644
index 0000000000..46d0d31c89
--- /dev/null
+++ b/resources/www/_shared/styles/jquery-ui/ui-lightness.scss
@@ -0,0 +1,175 @@
+$imagesPath: '/assets/vendors/jquery-ui/images/ui-lightness/';
+$uiTextContentColor: #333333 !default;
+$uiTextTitleColor: #333333 !default;
+$uiLinkColor: #ffffff !default;
+$uiLinkFocusColor: #c77405 !default;
+$uiLinkActiveColor: #eb8f00 !default;
+$uiLinkBorderFocusColor: $uiLinkFocusColor;
+@import './shared';
+
+.ui-widget-content {
+  border: 1px solid #dddddd;
+  background: #eeeeee url('#{$imagesPath}ui-bg_highlight-soft_100_eeeeee_1x100.png') 50% top repeat-x;
+  color: $uiTextContentColor;
+}
+.ui-widget-content a {
+  color: $uiLinkColor;
+}
+.ui-widget-header {
+  color: $uiTextTitleColor;
+  font-weight: bold;
+}
+.ui-widget-header a {
+  color: $uiLinkColor;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+  border: 1px solid #cccccc;
+  background: #f6f6f6 url('#{$imagesPath}ui-bg_glass_100_f6f6f6_1x400.png') 50% 50% repeat-x;
+  font-weight: bold;
+  color: $uiTextTitleColor;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+  color: $uiLinkColor;
+  text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+  border: 1px solid $uiLinkBorderFocusColor;
+  background: #fdf5ce url('#{$imagesPath}ui-bg_glass_100_fdf5ce_1x400.png') 50% 50% repeat-x;
+  font-weight: bold;
+  color: $uiLinkFocusColor;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+  color: $uiLinkFocusColor;
+  text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+  border: 1px solid $uiLinkActiveColor;
+  background: #ffffff url('#{$imagesPath}ui-bg_glass_65_ffffff_1x400.png') 50% 50% repeat-x;
+  font-weight: bold;
+  color: $uiLinkActiveColor;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+  color: $uiLinkActiveColor;
+  text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+  border: 1px solid #fed22f;
+  background: #ffe45c url('#{$imagesPath}ui-bg_highlight-soft_75_ffe45c_1x100.png') 50% top repeat-x;
+  color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+  color: $uiLinkColor;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+  border: 1px solid #cd0a0a;
+  background: #b81900 url('#{$imagesPath}ui-bg_diagonals-thick_18_b81900_40x40.png') 50% 50% repeat;
+  color: #ffffff;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+  color: #ffffff;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+  color: #ffffff;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+  font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+  opacity: .7;
+  filter:Alpha(Opacity=70);
+  font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+  opacity: .35;
+  filter:Alpha(Opacity=35);
+  background-imag1c94c4: none;
+}
+.ui-state-disabled .ui-icon {
+  filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+  width: 16px;
+  height: 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
+}
+.ui-widget-header .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_ffffff_256x240.png');
+}
+.ui-state-default .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
+}
+.ui-state-active .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
+}
+.ui-state-highlight .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_228ef1_256x240.png');
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+  background-image: url('#{$imagesPath}ui-icons_ffd27a_256x240.png');
+}
+
+/* Overlays */
+.ui-widget-overlay {
+  background: #666666 url('#{$imagesPath}ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat;
+  opacity: .5;
+  filter: Alpha(Opacity=50);
+}
+.ui-widget-shadow {
+  margin: -5px 0 0 -5px;
+  padding: 5px;
+  background: #000000 url('#{$imagesPath}ui-bg_flat_10_000000_40x100.png') 50% 50% repeat-x;
+  opacity: .2;
+  filter: Alpha(Opacity=20);
+  border-radius: 5px;
+}
\ No newline at end of file
diff --git a/resources/www/prod/skins/000000/skin-000000.scss b/resources/www/prod/skins/000000/skin-000000.scss
index 26bb536c26..2e6cf33425 100644
--- a/resources/www/prod/skins/000000/skin-000000.scss
+++ b/resources/www/prod/skins/000000/skin-000000.scss
@@ -1,42 +1,7 @@
-/**
-// @TODO define base colors
-$black: #000000;
-$gg: #111111;
-$gg: #141414;
-$gg: #1a1a1a;
-$gg: #292929;
-$gg: #303030;
-$gg: lighten(#000000, 23); //#3b3b3b; // primary color
-$gg: #404040;
-$gg: #606060;
-$gg: #666666;
-$gg: #999999;
-$gg: #b1b1b1; // text color
-$gg: #EAEAEA;
-$gg: #FFFFFF;
-
-
-$gg: #222222;
-$gg: #393939;
-$gg: #515151;
-$gg: #aaaaaa;
-$gg: #313131;
-
-// color themed:
-$gg: #b1b1b1;
-$gg: #292929;
-$gg: #076882;
-$gg: #0088CC;
-*/
-
 $skinsImagesPath: '/assets/vendors/jquery-ui/images/dark-hive/';
 
 $defaultBorderColor: #303030;
 $defaultBorderRadius: 2px;
-$backgroudPrimaryColor: #1A1A1A;
-$backgroudSecondaryColor: #3b3b3b;
-$backgroudAltColor: #404040;
-$backgroundAltPrimaryColor: #1a1a1a;
 
 $textPrimaryColor: #FFFFFF; //#b1b1b1;
 $textPrimaryHoverColor: #FFFFFF;
@@ -44,11 +9,37 @@ $textPrimaryActiveColor: #FFFFFF;
 $textPrimaryInverseColor: #3b3b3b;
 $textSecondaryColor: #999999;
 
-$highlightTextColor: #FFFFFF;
-$highlightColor: #076882;
-$hightlightLighterColor: #005580;
 $highlightDarkerColor: #0c4554;
 
+$highlightBackgroundColor: #076882;
+$highlightBackgroundAltColor: #0c4554;
+$highlightBorderColor: #0c4554;
+$highlightTextColor: #FFFFFF;
+
+$darkerBackgroundColor: #1A1A1A;
+$darkerBorderColor: #404040;
+$darkerTextColor: #FFFFFF;
+
+$darkBackgroundColor: #292929;
+$darkBorderColor: #303030;
+$darkTextColor: #A6A6A6;
+
+$mediumBackgroundColor: #3b3b3b;
+$mediumBackgroundHoverColor: #666666;
+$mediumBorderColor: #303030; //#404040; //
+$mediumBorderHighlightColor: $darkerBorderColor; //#666666;
+$mediumTextColor: #a1a1a1;
+$mediumTextHoverColor: #EAEAEA;
+$mediumTextActiveColor: #EAEAEA;
+
+$lightBackgroundColor: #404040;
+$lightBackgroundSelectedColor: lighten($lightBackgroundColor, 10);
+$lightBackgroundActiveColor: lighten($lightBackgroundColor, 10);
+$lightBorderColor: #404040;
+$lightBorderSelectedColor: lighten($lightBorderColor, 10);
+$lightBorderActiveColor: lighten($lightBorderColor, 10);
+$lightTextColor: #FFFFFF;
+
 // inverse
 $textInverseColor: #FFFFFF;
 $textInverseHoverColor: #000;
@@ -62,10 +53,7 @@ $mainMenuRightListBorderLeft: #292929;
 $scrollBgColor: #3b3b3b;
 
 $paginateBorderColor: #3b3b3b;
-$paginateBorder2Color: $highlightColor;
-$paginateTextColor: $highlightTextColor;
 $paginateBg1: #141414;
-$paginateBg2: $highlightColor;
 $contextMenuBgHover: $highlightDarkerColor;
 
 
@@ -73,19 +61,6 @@ $uploadBg1: #FFFFFF;
 $uploadBg2: #FFFFFF;
 $uploadLoaderImg: 'loader-black.gif';
 
-$bridgeDialogBg: #000000;
-$bridgeDialogBg2: #404040;
-$bridgeDialogBg3: #404040;
-$bridgeDialogBg4: #111111;
-$publishFeedBorder: #404040;
-$publishFeedColor: #FFFFFF;
-$publishFeedOddBg: #404040;
-$publishFeedOddColor: #FFFFFF;
-$publishFeedHoverBg: #606060;
-$publishFeedHoverColor: #FFFFFF;
-$publishFeedSelectedBg: #0088CC;
-$publishFeedSelectedColor: #FFFFFF;
-
 $bridgeDropdownToggleBg: #222222;
 $bridgeDropdownMenuBg: #393939;
 $bridgeDropdownMenuBorder: #515151;
@@ -93,30 +68,16 @@ $bridgeDropdownMenuColor: #aaaaaa;
 $bridgeDropdownMenuHoverBg: #313131;
 $bridgeDropdownMenuHoverColor: #FFFFFF;
 
-$thesaurusBorder1: #303030;
-$thesaurusBg1: #ededed;
-
-$thesaurusBorder2: #404040;
-$thesaurusBg2: #404040;
+$thesaurusInputBackground: #ededed;
 
 $thesaurusContextMenuColor: #c0c0c0;
-$proposalsBg: #292929;
-$proposalsBorder: $defaultBorderColor;
 $proposalsTitle: #A6A6A6;
 $proposalsTitleBorder: #303030;
 
-$basketsBorder: #b1b1b1;
-$basketsBorder2: #515151;
 $basketsTextColor: #AAAAAA;
-$basketsBg1: #212121;
 
 $guiSplitterImg: 'vsplitter2.png';
 
-$workzoneBg: #3b3b3b;
-$workzoneBorderTop: $defaultBorderColor;
-$workzoneColor1: inherit;
-$workzoneColor2: inherit;
-$workzoneColor3: #EAEAEA;
 $workzoneTabBgHover: #666666;
 $workzoneTabBgActive: #333333;
 $workzoneTabBorderTop: #303030;
@@ -125,8 +86,6 @@ $workzoneBasketAlertDataBg: #fff190;
 $workzoneBasketAlertDataColor: #1a1a1a;
 $workzoneToolsLabelColor: #7f7f7f;
 
-$treeviewBorderExpandable: #303030;
-
 $answersToolsBtnSeparatorBorder: #474747;
 $answersToolsBtnBg: #393939;
 $answersToolsBtnBorder: #515151;
@@ -141,62 +100,27 @@ $answersToolsBtnSettingsBorder: #474747;
 
 
 
-$answersBg: #111111;
-$answersBorderTop: #111111;
-$answersInfoDialogBg: #0c4554;
-$answersInfoDialogColor: #FFFFFF;
-$answersDocInfoBg: #0c4554;
-$answersDocInfoBorder: #000;
-$answersDocInfoColor: #FFFFFF;
-
-$answersFeedBtnGrpBg: #222222;
-$answersFeedEntryBg: #666666;
-$answersFeedEntryBorder: #212121;
-$answersFeedEntryBorderHover: #404040;
-$answersFeedDropMenuBg: #000000;
-$answersFeedDropMenuBorder: #404040;
-$answersFeedDropMenuColor: #EAEAEA;
-
-$searchSbasListBg: #404040;
-$searchSbasListColor: #FFFFFF;
-$searchSbasFilterColor: #FFFFFF;
-$searchSbasListSelectedBg: #404040;
-$searchSbasListSelectedBorder: #404040;
-
-$editCarouselBg: #1a1a1a;
-$editCarouselBorder: #B1B1B1;
-$editStatusFieldOdd: #606060;
-$editStatusFieldHover: #B1B1B1;
-$editStatusFieldActive: #FEFEFE;
 $editTextMultiValueBg: #444444;
 $editTextMultiValueBorder: #999999;
 $editTextMultiValueHighlightBg: #222222;
 
 $preferencesLabelColor: #999999;
 
-$uiColor1: #111111;
 $activeStateIcon: 'ui-icons_cccccc_256x240.png';
 $accordionLoaderImg: 'loader-white.gif';
-$accordionBorderColor: $defaultBorderColor;
 $accordionBgHeaderHover: #474747;
-$accordionBgContent: #212121;
 
-$popoverBg: #000;
-$popoverBorder: #444;
-$popoverColor: $textPrimaryColor;
-$popoverInnerBg: #000;
-$modalBorder: 1px solid #555555;
-$modalBackground: #212121;
+$inputButtonHoverColor: #FEFEFE;
+$inputFallbackBorderColor: #b1b1b1;
 
 
 $dropdownDividerBg: #515151;
-$dropdownDividerBorder: #404040;
+$dropdownDividerBorder: $darkerBorderColor;
 
 $overlayBg: #111111;
 
 $tabsNavBg: #666666;
-$tabsNavBgActive: $backgroudSecondaryColor;
-$sliderBg: #1a1a1a;
+$tabsNavBgActive: $mediumBackgroundColor;
 $contentLoaderImg: 'loader-white.gif';
 
 $btnBackground: #EAEAEA;
@@ -216,6 +140,5 @@ $linkDefaultColor: #b1b1b1;
 $linkDefaultHover: #838383;
 
 
-
-
+@import '../../../_shared/styles/jquery-ui/dark-hive';
 @import '../skin-shared';
diff --git a/resources/www/prod/skins/959595/skin-959595.scss b/resources/www/prod/skins/959595/skin-959595.scss
index 54012d12b7..2a80aa62fa 100644
--- a/resources/www/prod/skins/959595/skin-959595.scss
+++ b/resources/www/prod/skins/959595/skin-959595.scss
@@ -1,22 +1,45 @@
-
 $skinsImagesPath: '/assets/vendors/jquery-ui/images/ui-lightness/';
 
 $defaultBorderColor: #999999;
 $defaultBorderRadius: 2px;
-$backgroudPrimaryColor: #F1F1F1;
-$backgroudSecondaryColor: #B2B2B2; //#D9D9D9;
-$backgroundAltPrimaryColor: #1a1a1a;
+
 $textPrimaryColor: #333333;
 $textPrimaryHoverColor: #1a1a1a;
 $textPrimaryActiveColor: #1a1a1a;
 $textPrimaryInverseColor: #3b3b3b;
 $textSecondaryColor: #999999;
 
-$highlightTextColor: #FFFFFF;
-$highlightColor: #076882;
-$hightlightLighterColor: #005580;
 $highlightDarkerColor: #0c4554;
 
+$highlightBackgroundColor: #076882;
+$highlightBackgroundAltColor: #0c4554;
+$highlightBorderColor: #0c4554;
+$highlightTextColor: #FFFFFF;
+
+
+$darkerBackgroundColor: #D9D9D9; // #F1F1F1 <- to try
+$darkerBorderColor: darken(#D9D9D9, 10);
+$darkerTextColor: #333333;
+
+$darkBackgroundColor: #9c9c9c; //B1B1B1;
+$darkBorderColor: darken($darkBackgroundColor, 10);
+$darkTextColor: #FFFFFF;
+
+$mediumBackgroundColor: #a6a6a6; // B2B2B2 <- to try
+$mediumBorderColor: darken($mediumBackgroundColor, 10);
+$mediumBorderHighlightColor: #666666;
+$mediumTextColor: $textPrimaryColor;
+$mediumTextHoverColor: #EAEAEA;
+$mediumTextActiveColor: #EAEAEA;
+
+$lightBackgroundColor: #B1B1B1;
+$lightBackgroundSelectedColor: darken($lightBackgroundColor, 10);
+$lightBackgroundActiveColor: darken($lightBackgroundColor, 10);
+$lightBorderColor: #B1B1B1;
+$lightBorderSelectedColor: darken($lightBorderColor, 10);
+$lightBorderActiveColor: darken($lightBorderColor, 10);
+$lightTextColor: #3b3b3b;
+
 // inverse
 $textInverseColor: #000;
 $textInverseHoverColor: #000;
@@ -26,31 +49,17 @@ $bgInverseHoverColor: #FFF;
 $mainMenuColor: #FFF;
 $mainMenuRightListBorderLeft: #999;
 
-$scrollBgColor: $backgroudSecondaryColor; //#3b3b3b;
+$scrollBgColor: $mediumBackgroundColor; //#3b3b3b;
 
 $paginateBorderColor: #999999;
-$paginateBorder2Color: #999999;
-$paginateTextColor: #FFFFFF;
+// $paginateBorder2Color: #999999;
+// $paginateTextColor: #FFFFFF;
 $paginateBg1: #D9D9D9;
-$paginateBg2: #999;
 
 $uploadBg1: #FFFFFF;
 $uploadBg2: transparent;
 $uploadLoaderImg: 'loader-black.gif';
 
-$bridgeDialogBg: #D9D9D9;
-$bridgeDialogBg2: #B1B1B1;
-$bridgeDialogBg3: #B1B1B1;
-$bridgeDialogBg4: #D9D9D9;
-$publishFeedBorder: #959595;
-$publishFeedColor: #333333;
-$publishFeedOddBg: #959595;
-$publishFeedOddColor: #FFFFFF;
-$publishFeedHoverBg: #606060;
-$publishFeedHoverColor: #FFFFFF;
-$publishFeedSelectedBg: #0088CC;
-$publishFeedSelectedColor: #FFFFFF;
-
 $bridgeDropdownToggleBg: #E6E6E6;
 $bridgeDropdownMenuBg: #A4A4A4;
 $bridgeDropdownMenuBorder: #666666;
@@ -58,30 +67,17 @@ $bridgeDropdownMenuColor: #EAEAEA;
 $bridgeDropdownMenuHoverBg: #666666;
 $bridgeDropdownMenuHoverColor: #FFFFFF;
 
-$thesaurusBorder1: #999;
-$thesaurusBg1: #d4d4d4;
+$thesaurusInputBackground: #d4d4d4;
 
-$thesaurusBorder2: #FFFFFF;
-$thesaurusBg2: #FFFFFF;
 
 $thesaurusContextMenuColor: #FFFFFF;
-$proposalsBg: #999;
-$proposalsBorder: $defaultBorderColor;
 $proposalsTitle: #FFFFFF;
 $proposalsTitleBorder: #666666;
 
-$basketsBorder: #B1B1B1;
-$basketsBorder2: #666666;
 $basketsTextColor: #777777;
-$basketsBg1: #B1B1B1;
 
 $guiSplitterImg: 'vsplitter2-959595.png';
 
-$workzoneBg: #B1B1B1;
-$workzoneBorderTop: #B1B1B1;
-$workzoneColor1: $textPrimaryColor;
-$workzoneColor2: #000;
-$workzoneColor3: #B2B2B2;
 $workzoneTabBgHover: #999;
 $workzoneTabBgActive: #999;
 $workzoneTabBorderTop: #999;
@@ -90,7 +86,6 @@ $workzoneBasketAlertDataBg: #fff190;
 $workzoneBasketAlertDataColor: #1a1a1a;
 $workzoneToolsLabelColor: #FFFFFF;
 
-$treeviewBorderExpandable: #B2B2B2;
 
 $answersToolsBtnSeparatorBorder: #999;
 $answersToolsBtnBg: #A4A4A4;
@@ -104,61 +99,28 @@ $answersToolsBtnSettingsHoverBg: #393939;
 $answersToolsBtnSettingsHoverColor: lighten($answersToolsBtnColor, 10);
 $answersToolsBtnSettingsBorder: #999;
 
-$answersBg: #D9D9D9;
-$answersBorderTop: #D9D9D9;
-$answersInfoDialogBg: #999;
-$answersInfoDialogColor: #FFFFFF;
-$answersDocInfoBg: #999;
-$answersDocInfoBorder: #999;
-$answersDocInfoColor: #FFFFFF;
+// $diapoBorderColor: $darkerBorderColor;
 
-$answersFeedBtnGrpBg: #E6E6E6;
-$answersFeedEntryBg: #EEEEEE;
-$answersFeedEntryBorder: #D9D9D9;
-$answersFeedEntryBorderHover: #666666;
-$answersFeedDropMenuBg: #E6E6E6;
-$answersFeedDropMenuBorder: #B1B1B1;
-$answersFeedDropMenuColor: $textPrimaryColor;
-
-$searchSbasListBg: #404040;
-$searchSbasListColor: #555555;
-$searchSbasFilterColor: #555555;
-$searchSbasListSelectedBg: #404040;
-$searchSbasListSelectedBorder: #404040;
-
-$editCarouselBg: #B1B1B1;
-$editCarouselBorder: #666666;
-$editStatusFieldOdd: #B1B1B1;
-$editStatusFieldHover: #B1B1B1;
-$editStatusFieldActive: #FEFEFE;
 $editTextMultiValueBg: #FFFFFF;
 $editTextMultiValueBorder: #999999;
 $editTextMultiValueHighlightBg: #d0d0d0;
 
 $preferencesLabelColor: #333333;
 
-$uiColor1: #D9D9D9;
 $activeStateIcon: 'ui-icons_ffffff_256x240.png';
 $accordionLoaderImg: 'loader-black.gif';
-$accordionBorderColor: $defaultBorderColor;
 $accordionBgHeaderHover: #999;
-$accordionBgContent: #D9D9D9;
 
-$popoverBg: #999999;
-$popoverBorder: #444;
-$popoverColor: $textPrimaryColor;
-$popoverInnerBg: #D9D9D9;
-$modalBorder: 1px solid #444;
-$modalBackground: #D9D9D9;
+$inputButtonHoverColor: #FEFEFE;
+$inputFallbackBorderColor: #b1b1b1;
 
-$dropdownDividerBg: #515151;
-$dropdownDividerBorder: #404040;
+$dropdownDividerBg: $darkerBorderColor;
+$dropdownDividerBorder: $darkerBorderColor;
 
 $overlayBg: #B1B1B1;
 
 $tabsNavBg: #999999;
 $tabsNavBgActive: #B2B2B2; //#D9D9D9;
-$sliderBg: #1a1a1a;
 $contentLoaderImg: 'loader-black.gif';
 
 $btnBackground: #444444; //#B9B9B9;
@@ -177,4 +139,11 @@ $widgetContentColor: $textPrimaryInverseColor;
 $linkDefaultColor: #444444;
 $linkDefaultHover: #444444;
 
+// override jquery ui theme colors:
+$uiTextContentColor: $mediumTextColor;
+$uiTextTitleColor: $mediumTextColor;
+$uiLinkColor: $darkTextColor;
+$uiLinkFocusColor: $darkTextColor;
+$uiLinkActiveColor: $darkTextColor;
+@import '../../../_shared/styles/jquery-ui/ui-lightness';
 @import '../skin-shared';
diff --git a/resources/www/prod/skins/skin-shared.scss b/resources/www/prod/skins/skin-shared.scss
index 29e21cb40e..5db5e7dde1 100644
--- a/resources/www/prod/skins/skin-shared.scss
+++ b/resources/www/prod/skins/skin-shared.scss
@@ -7,7 +7,7 @@ $basketsColor: #076882;
 ::-webkit-scrollbar-track
 {
   border-radius: 0;
-  background-color: $backgroudPrimaryColor;
+  background-color: $darkerBackgroundColor;
 }
 
 ::-webkit-scrollbar {
@@ -53,8 +53,8 @@ legend {
 
 
 body {
-  color: $textPrimaryColor;
-  background-color: $backgroudPrimaryColor;
+  color: $darkerTextColor;
+  background-color: $darkerBackgroundColor;
   position: absolute;
   top: 0;
   left: 0;
@@ -299,7 +299,7 @@ span.ww_winTitle {
 
 #ui-datepicker-div {
   z-index: 2000;
-  background-color: $backgroundAltPrimaryColor;
+  background-color: $darkerBackgroundColor;
   position: absolute;
 }
 
@@ -446,7 +446,7 @@ H4 {
 
 #sizeAns_slider .ui-slider-handle, #nperpage_slider .ui-slider-handle,
 #EDIT_ZOOMSLIDER  .ui-slider-handle {
-  background-color: $sliderBg;
+  background-color: $darkerBackgroundColor;
   width: 8px;
   cursor: col-resize;
 }
@@ -461,20 +461,24 @@ H4 {
 }
 
 .popover-inner {
-  background-color: $popoverBg;
-  border: 2px solid $popoverBorder;
+  background-color: $darkerBackgroundColor;
+  border: 2px solid $darkerBorderColor;
   padding: 0px;
-  color: $textPrimaryColor;
+  color: $darkerTextColor;
   border-radius: 4px;
 }
 
 .popover-inner .popover-title {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   border-radius: 0;
 }
 
 .popover-inner .popover-content {
-  background-color: $popoverInnerBg;
+  background-color: $darkerBackgroundColor;
+  hr {
+    background-color: $darkerTextColor;
+    border-color: $darkerBorderColor;
+  }
 }
 .dragover {
   BACKGROUND-COLOR: #fff100
@@ -531,5 +535,4 @@ H4 {
 @import 'ui-components/modal-preview';
 @import 'ui-components/modal-push';
 @import 'ui-components/diapo';
-@import 'ui-components/modal-tools';
 @import 'ui-components/modal-preferences';
\ No newline at end of file
diff --git a/resources/www/prod/skins/ui-components/_answers-tools.scss b/resources/www/prod/skins/ui-components/_answers-tools.scss
index 2f0d82af1e..d79083c36d 100644
--- a/resources/www/prod/skins/ui-components/_answers-tools.scss
+++ b/resources/www/prod/skins/ui-components/_answers-tools.scss
@@ -14,7 +14,7 @@
 #idFrameT .btn-toolbar {
   margin-bottom: 0px;
   margin-top: 0px;
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   font-size:10px;
   z-index:100;
   height:45px;
@@ -47,7 +47,7 @@
 #idFrameT .tools .classicButton button.btn-inverse,
 #idFrameT .tools .dropdownButton button.btn-inverse {
   background-image: none;
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   border-radius: 0;
   margin: 0;
   height: 45px;
diff --git a/resources/www/prod/skins/ui-components/_answers.scss b/resources/www/prod/skins/ui-components/_answers.scss
index 92ba5724d2..f76c6c832e 100644
--- a/resources/www/prod/skins/ui-components/_answers.scss
+++ b/resources/www/prod/skins/ui-components/_answers.scss
@@ -1,3 +1,11 @@
+$answersInfoDialogBg: $highlightBackgroundAltColor !default;
+$answersInfoDialogColor: $highlightTextColor !default;
+$answersDocInfoBg: $highlightBackgroundAltColor !default;
+$answersDocInfoBorder: #000 !default;
+$answersDocInfoColor: $highlightTextColor !default;
+$answersLinkColor: #666666 !default;
+$answersInfoLabelColor: #949494 !default;
+
 #TOPIC_UL li {
   float: none;
   margin: 0;
@@ -37,35 +45,45 @@
 .downloader {
   background-image: url('#{$iconsPath}download.gif');
 }
-
-#answers .status img {
-  max-width: 16px;
-  max-height: 16px;
+#answers {
+  .status {
+    img {
+      max-width: 16px;
+      max-height: 16px;
+    }
+  }
+  #answersNext {
+    width: 150px;
+    margin: 5px;
+    height: 193px;
+    line-height: 193px;
+    font-size: 25px;
+    color: $answersLinkColor;
+    cursor: pointer;
+  }
+  .list {
+    position: relative;
+    float: left;
+    margin: 10px;
+    width: 600px;
+    overflow: hidden;
+    border: 3px solid #404040;
+  }
 }
 
-#answers #answersNext {
-  width: 150px;
-  margin: 5px;
-  height: 193px;
-  line-height: 193px;
-  font-size: 25px;
-  color: #666666;
-  cursor: pointer;
-}
-
-
-#idFrameT #answers {
-  background-color: $answersBg;
-  border: 1px solid $answersBorderTop;
-  top: 55px;
-  bottom: 0;
-  margin-right: 8px;
-  overflow-y: hidden;
-  padding-left: 10px;
-}
-
-#idFrameT #answers:hover {
-  overflow-y: auto;
+#idFrameT {
+  #answers {
+    background-color: $darkerBackgroundColor;
+    border: 1px solid $darkerBorderColor;
+    top: 55px;
+    bottom: 0;
+    margin-right: 8px;
+    overflow-y: hidden;
+    padding-left: 10px;
+    &:hover {
+      overflow-y: auto;
+    }
+  }
 }
 
 #answers_status{
@@ -75,217 +93,180 @@
   height: 60px;
   width: 400px;
   z-index: 1000;
-}
-
-#answers_status table{
-  width: 100%;
-}
-
-#answers_status table tr{
-  height: 20px;
-  vertical-align: middle;
-}
-
-#answers_status table tr td.navigation{
-  text-align: right;
-}
-
-#answers_status .infos {
-  text-align: left;
-  line-height: 18px;
-  font-size: 11px;
-  color: #949494;
-  height: 60px;
-}
-
-#answers_status .infos .infoDialog {
-  float: left;
-  background: $answersInfoDialogBg;
-  color: $answersInfoDialogColor;
-  padding: 0 25px;
-  font-size: 11px;
-  padding-top: 24px;
-  margin-right: 10px;
-  height: 36px;
-}
-
-#answers_status .infos .infoDialog span {
-  font-size: 22px;
-  margin-bottom: 3px;
-  float: left;
-  margin-right: 10px;
-}
-
-#answers_status #docInfo {
-  height: 40px;
-  background: $answersDocInfoBg;
-  color: $answersDocInfoColor;
-  padding: 0 25px;
-  padding-top: 20px;
-  float: left;
-  min-width: 105px;
-  font-size: 11px;
-  line-height: 12px;
-  border-right: 1px solid $answersDocInfoBorder;
-}
-
-
-#answers_status .infos #nbrecsel {
-  font-size: 22px;
-  margin-top: 7px;
-  float: left;
-  margin-right: 7px;
-  display: block;
-  height: 40px;
-}
-
-#answers .list {
-  position: relative;
-  float: left;
-  margin: 10px;
-  width: 600px;
-  overflow: hidden;
-  border: 3px solid #404040;
+  table{
+    width: 100%;
+    tr{
+      height: 20px;
+      vertical-align: middle;
+      td.navigation{
+        text-align: right;
+      }
+    }
+  }
+  .infos {
+    text-align: left;
+    line-height: 18px;
+    font-size: 11px;
+    color: $answersInfoDialogColor;
+    height: 60px;
+    .infoDialog {
+      float: left;
+      background: $answersInfoDialogBg;
+      color: $answersInfoDialogColor;
+      padding: 0 25px;
+      font-size: 11px;
+      padding-top: 24px;
+      margin-right: 10px;
+      height: 36px;
+      span {
+        font-size: 22px;
+        margin-bottom: 3px;
+        float: left;
+        margin-right: 10px;
+      }
+    }
+    #nbrecsel {
+      font-size: 22px;
+      margin-top: 7px;
+      float: left;
+      margin-right: 7px;
+      display: block;
+      height: 40px;
+    }
+  }
+  #docInfo {
+    height: 40px;
+    background: $answersDocInfoBg;
+    color: $answersDocInfoColor;
+    padding: 0 25px;
+    padding-top: 20px;
+    float: left;
+    min-width: 105px;
+    font-size: 11px;
+    line-height: 12px;
+    border-right: 1px solid $answersDocInfoBorder;
+  }
 }
 
 /******* FEEDS ****************************************************************/
+#answers {
+  .feed {
+    position: relative;
+    clear: left;
+    margin: 10px;
+    .btn {
+      font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .btn-inverse:hover {
+      color: $textPrimaryHoverColor;
+    }
+    .btn-group.open .btn-inverse.dropdown-toggle {
+      background-color: $darkerBackgroundColor;
+      background-image: none;
+    }
+    .headblock {
+      max-width: 800px;
+      margin-bottom: 20px;
+      table {
+        width: 100%;
+      }
+      h1 {
+        font-size: 22px;
+        img {
+          margin-right: 15px;
+        }
+      }
+      a.subscribe_rss {
+        font-size: 14px;
+        margin-left: 15px;
+      }
+    }
+    .entry {
+      margin: 0 0 30px;
+      padding: 10px;
+      border: 1px solid $mediumBorderColor; //$answersFeedEntryBorder;
+      background-color: $mediumBackgroundColor; //$answersFeedEntryBg;
+      float: left;
+      &.hover {
+        border: 1px solid $mediumBorderHighlightColor;
+      }
+      h1 {
+        margin-bottom: 0;
+      }
+      table{
+        &.head {
+          vertical-align: middle;
+          margin: 10px 0;
+          width: 600px;
+        }
+        a.tools {
+          display: none;
+        }
+      }
+      &.hover{
+        table a.tools {
+          display: inline;
+        }
+      }
+    }
+    h1 {
+      font-weight: bold;
+      font-size: 20px;
+      .author {
+        font-size: 12px;
+        font-weight: normal;
+        margin-left: 15px;
+      }
+    }
+    h1,
+    .post_date {
+      width: 100%;
+    }
+    p {
+      max-width: 600px;
+      line-height: 18px;
+      margin: 5px 0;
+      text-align: justify;
+    }
+    img {
+      vertical-align: middle;
+    }
 
-#answers .feed {
-  margin: 10px;
-}
-
-#answers .feed .btn {
-  font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-
-
-#answers .feed .btn-inverse:hover {
-  color: $textPrimaryHoverColor;
-}
-
-#answers .feed .btn-group.open .btn-inverse.dropdown-toggle {
-  background-color: $answersFeedBtnGrpBg;
-  background-image: none;
-}
-
-#answers .feed .headblock {
-  max-width: 800px;
-  margin-bottom: 20px;
-}
-
-#answers .feed .headblock table {
-  width: 100%;
-}
-
-#answers .feed .headblock h1 {
-  font-size: 22px;
-}
-
-#answers .feed .headblock h1 img {
-  margin-right: 15px;
-}
-
-#answers .feed .headblock a.subscribe_rss {
-  font-size: 14px;
-  margin-left: 15px;
-}
-
-#answers .feed .entry {
-  margin: 0 0 30px;
-  padding: 10px;
-  border: 3px solid $answersFeedEntryBorder;
-  background-color: $answersFeedEntryBg;
-  float: left;
-}
-
-#answers .feed .entry.hover {
-  border: 3px solid $answersFeedEntryBorderHover;
-}
-
-#answers .feed .entry table.head {
-  vertical-align: middle;
-  margin: 10px 0;
-  width: 600px;
-}
-
-#answers .feed .entry table a.tools {
-  display: none;
-}
-
-#answers .feed .entry.hover table a.tools {
-  display: inline;
-}
-
-#answers .feed h1,
-#answers .feed .post_date {
-  width: 100%;
-}
-
-#answers .feed,
-#answers .feed .entry,
-#answers .feed h1,
-#answers .feed p,
-#answers .feed .contents,
-#answers .feed .see_more,
-#answers .feed .post_date {
-  position: relative;
-  clear: left;
-}
-
-#answers .feed .see_more {
-  height: 60px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 13px;
-  background-position: center bottom;
-}
-
-#answers .feed .contents {
-  clear: left;
-}
-
-#answers .feed .post_date {
-  text-align: right;
-  font-style: italic;
-  max-width: 600px;
-  *width: 600px;
-  margin-bottom: 20px;
-}
-
-#answers .feed h1 {
-  font-weight: bold;
-  font-size: 20px;
-}
-
-#answers .feed h1 .author {
-  font-size: 12px;
-  font-weight: normal;
-  margin-left: 15px;
-}
-
-#answers .feed .entry h1 {
-  margin-bottom: 0;
-}
-
-#answers .feed p {
-  max-width: 600px;
-  line-height: 18px;
-  margin: 5px 0;
-  text-align: justify;
-}
-
-#answers .feed .dropdown-menu {
-  background-color: $answersFeedDropMenuBg;
-  border: 1px solid $answersFeedDropMenuBorder;
-}
-
-#answers .feed .dropdown-menu a {
-  color: $answersFeedDropMenuColor;
-}
-
-#answers .feed img {
-  vertical-align: middle;
+    .entry,
+    h1,
+    p,
+    .contents,
+    .see_more,
+    .post_date {
+      position: relative;
+      clear: left;
+    }
+    .see_more {
+      height: 60px;
+      text-align: center;
+      font-weight: bold;
+      font-size: 13px;
+      background-position: center bottom;
+    }
+    .contents {
+      clear: left;
+    }
+    .post_date {
+      text-align: right;
+      font-style: italic;
+      max-width: 600px;
+      *width: 600px;
+      margin-bottom: 20px;
+    }
+
+    .dropdown-menu {
+      background-color: $darkerBackgroundColor;
+      border: 1px solid $darkerBorderColor;
+      a {
+        color: $darkerTextColor;
+      }
+    }
+  }
 }
diff --git a/resources/www/prod/skins/ui-components/_colorpicker.scss b/resources/www/prod/skins/ui-components/_colorpicker.scss
index 0b1af402bf..1514c0372b 100644
--- a/resources/www/prod/skins/ui-components/_colorpicker.scss
+++ b/resources/www/prod/skins/ui-components/_colorpicker.scss
@@ -1,5 +1,9 @@
+$colorpickerBoxBorder: #FFFFFF;
+$colorpickerSubmitBorder: #404040;
+$colorpickerFocusBorder: #999999;
+
 .colorpicker_box {
-  border: 1px solid #FFFFFF;
+  border: 1px solid $colorpickerBoxBorder;
   cursor: pointer;
   float: left;
   margin: 2px;
@@ -24,12 +28,12 @@
     position: absolute;
     top: 15px;
     width: 100px;
-    border: 1px solid #404040;
+    border: 1px solid $colorpickerSubmitBorder;
     cursor: pointer;
     text-align: center;
   }
   .colorpicker_focus {
-    border: 1px solid #999999;
+    border: 1px solid $colorpickerFocusBorder;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
diff --git a/resources/www/prod/skins/ui-components/_context-menu.scss b/resources/www/prod/skins/ui-components/_context-menu.scss
index 3ebf7527ad..fd0ac05890 100644
--- a/resources/www/prod/skins/ui-components/_context-menu.scss
+++ b/resources/www/prod/skins/ui-components/_context-menu.scss
@@ -75,3 +75,12 @@ Menu contextuel
   background-repeat: no-repeat;
   background-position: 5px center;
 }
+
+
+.context-menu-item a {
+  color: #75ABFF;
+}
+
+.context-menu-item-hover a {
+  color: #212121;
+}
diff --git a/resources/www/prod/skins/ui-components/_diapo.scss b/resources/www/prod/skins/ui-components/_diapo.scss
index af692a75bc..ab29c113ff 100644
--- a/resources/www/prod/skins/ui-components/_diapo.scss
+++ b/resources/www/prod/skins/ui-components/_diapo.scss
@@ -1,3 +1,5 @@
+$diapoBorderColor: $darkerBorderColor !default;
+
 /**
  * Diapo are reused in answers, baskets,
  */
@@ -22,14 +24,14 @@
 #reorder_dialog .ui-sortable-placeholderfollow {
   width: 100px;
   height: 130px;
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
 }
 
 .diapo {
   position: relative;
   display: block;
   float: left;
-  border: 1px solid #404040;
+  border: 1px solid $diapoBorderColor;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -47,14 +49,21 @@
       margin: 0 auto;
     }
   }
+
   .bottom {
     position: absolute;
     bottom: 0px;
   }
+
   div.title {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .duration {
+    background-color: darken($darkerBackgroundColor, 10);
+    color: $darkerTextColor;
+  }
 }
 
 .diapo.CHIM .thumb_wrapper {
diff --git a/resources/www/prod/skins/ui-components/_forms.scss b/resources/www/prod/skins/ui-components/_forms.scss
index 49c6624413..a7c82ee09c 100644
--- a/resources/www/prod/skins/ui-components/_forms.scss
+++ b/resources/www/prod/skins/ui-components/_forms.scss
@@ -1,6 +1,7 @@
+
 /******* INPUTS ***************************************************************/
 input.input-button.hover {
-  color: #FEFEFE;
+  color: $inputButtonHoverColor;
 }
 
 input.search {
@@ -13,7 +14,7 @@ input.search {
 input, select, textarea {
   margin: 2px;
   padding: 2px;
-  *border: 1px solid #b1b1b1;
+  *border: 1px solid $inputFallbackBorderColor;
   font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
 }
 
diff --git a/resources/www/prod/skins/ui-components/_gui.scss b/resources/www/prod/skins/ui-components/_gui.scss
index 8c34dba1c4..e9e2c24e35 100644
--- a/resources/www/prod/skins/ui-components/_gui.scss
+++ b/resources/www/prod/skins/ui-components/_gui.scss
@@ -1,13 +1,13 @@
 
 /******* GUI ******************************************************************/
 
-.gui_grip {
+/*.gui_grip {
   background-image: url('#{$skinsImagesPath}grip.gif');
   background-position: 0 0;
   background-repeat: no-repeat;
   height: 19px;
   width: 5px;
-}
+}*/
 
 .gui_vsplitter,.ui-resizable-e {
   top: 50%;
@@ -16,7 +16,7 @@
   height: 54px;
   position: absolute;
   background-image:  url('#{$iconsPath}vsplitter.png');
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   background-position:  center center;
   background-repeat:  no-repeat;
   right: 0;
@@ -50,7 +50,7 @@
   background-repeat: no-repeat;
   cursor: row-resize;
 }
-
+/*
 .gui_hslider {
   position: absolute;
   height: 0px;
@@ -67,7 +67,7 @@
   background-color: #959595;
   background-image: url('#{$skinsImagesPath}vsplitter.gif');
   cursor: pointer;
-}
+}*/
 
 .gui_ckbox_0 {
   display: block;
diff --git a/resources/www/prod/skins/ui-components/_jquery-ui.scss b/resources/www/prod/skins/ui-components/_jquery-ui.scss
index 5c74e964d4..16a6f9ee08 100644
--- a/resources/www/prod/skins/ui-components/_jquery-ui.scss
+++ b/resources/www/prod/skins/ui-components/_jquery-ui.scss
@@ -1,3 +1,6 @@
+$modalBorder: 1px solid $darkerBorderColor !default;
+$modalBackground: $darkerBackgroundColor !default;
+
 .ui-dialog .ui-dialog-content.loading, .loading {
   background-image: url('#{$iconsPath}#{$contentLoaderImg}');
   background-position: center center;
@@ -23,7 +26,7 @@
 .ui-tabs {
   .ui-tabs-nav {
     li {
-      background-color: $tabsNavBg;
+      background-color: $lightBackgroundColor; //$tabsNavBg;
       height: 30px;
       border: none;
       overflow: hidden;
@@ -31,16 +34,17 @@
         padding: 5px 8px;
         font-size: 0.8em;
         font-weight: normal;
+        color: $lightTextColor; // more contrasted  color
       }
       &.ui-tabs-active {
-        background-color: $tabsNavBgActive;
+        background-color: $mediumBackgroundColor; //$tabsNavBgActive;
         border: none;
       }
       &.ui-tabs-active a,
       &.ui-state-disabled a,
       &.ui-state-processing a {
         cursor: pointer;
-        color: $workzoneColor1
+        color: $mediumTextActiveColor;
       }
 
     }
@@ -51,7 +55,7 @@
     display: block;
     border-width: 0;
     padding: 0px;
-    background-color: $backgroudSecondaryColor;
+    background-color: $mediumBackgroundColor;
     &.tabBox {
       height: 405px;
       overflow: auto;
@@ -67,10 +71,10 @@
 
 
 
-.ui-tabs .ui-tabs-nav li a,
+
 .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
   cursor: pointer;
-  color: $workzoneColor2;
+  color: $mediumTextColor; //$workzoneColor2;
 }
 
 .ui-state-default, .ui-widget-content .ui-state-default {
@@ -78,7 +82,7 @@
 }
 
 .ui-tabs li.ui-state-active a, .ui-state-active a:link, .ui-state-active a {
-  color: $workzoneColor3;
+  color: $mediumTextActiveColor;
   font-weight: bold;
   font-size: 0.8em;
 }
@@ -94,7 +98,7 @@
 }
 
 .ui-dialog.ui-widget-content {
-  background-color: $uiColor1;
+  background-color: $darkerBackgroundColor;
 }
 
 .ui-accordion .ui-accordion-content {
@@ -136,8 +140,8 @@
   margin-bottom: 0;
   height: 44px;
   line-height: 44px;
-  background-color: $backgroudSecondaryColor;
-  border-bottom: 1px solid $accordionBorderColor;
+  background-color: $mediumBackgroundColor;
+  border-bottom: 1px solid $mediumBorderColor; //$accordionBorderColor;
   border-radius: 0;
 }
 
@@ -163,7 +167,7 @@
 
 
 .ui-accordion .ui-accordion-content {
-  background-color: $accordionBgContent;
+  background-color: $darkBackgroundColor;
   border-top: none;
   margin-top: -1px;
   margin-bottom: 0;
@@ -198,8 +202,6 @@
 .ui-dialog.ui-widget-content {
   border: $modalBorder;
   background: $modalBackground;
-  //background: #000000 url("../images/dark-hive/ui-bg_loop_25_000000_21x21.png") 50% 50% repeat;
-  // color: #ffffff;
 }
 
 .ui-dialog-titlebar {
@@ -222,4 +224,51 @@
 
 .ui-dialog-content p {
   line-height: 18px;
+}
+
+.ui-autocomplete.ui-state-hover,
+.ui-autocomplete.ui-widget-content .ui-state-hover,
+.ui-autocomplete.ui-widget-header .ui-state-hover,
+.ui-autocomplete.ui-state-focus,
+.ui-autocomplete.ui-widget-content .ui-state-focus,
+.ui-autocomplete.ui-widget-header .ui-state-focus {
+  background-image:none;
+  background-color:#515151;
+  border:none;
+  margin:0;
+  border-radius: 0;
+}
+
+.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active {
+  margin:0;
+}
+
+.ui-autocomplete li.list-item {
+  width:280px;
+  min-height:45px;
+  display:block;
+}
+
+.ui-autocomplete li.list-item .icon {
+  width:42px;
+}
+
+.ui-autocomplete li.list-item .icon img {
+  max-width:32px;
+  max-height:32px;
+  text-align: center;
+  vertical-align: middle;
+  margin:5px;
+}
+
+.ui-autocomplete {
+  min-height: 42px;
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding:1px 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding-right: 20px;
 }
\ No newline at end of file
diff --git a/resources/www/prod/skins/ui-components/_main-menu.scss b/resources/www/prod/skins/ui-components/_main-menu.scss
index 57bb3cae13..3d0c624ae3 100644
--- a/resources/www/prod/skins/ui-components/_main-menu.scss
+++ b/resources/www/prod/skins/ui-components/_main-menu.scss
@@ -6,45 +6,30 @@
   height: $mainMenuHeight;
   line-height: $mainMenuLineHeight;
   vertical-align: middle;
+  background-color: $mediumBackgroundColor;
+  #mainLogo {
+    margin:0 10px;
+    margin-top: -4px;
+  }
+  li , li span {//
+    height: 40px;
+    line-height: $mainMenuLineHeight;
+    color: $mainMenuColor;
+  }
+  .right {
+    li {
+      border-left: 1px solid $mainMenuRightListBorderLeft;
+      span {
+        padding: 0 15px;
+      }
+      &.user {
+        background: url('#{$iconsPath}icon_user.png') 15px 7px no-repeat;
+        padding-left: 41px;
+        &:hover {
+          background-color: $bgInverseHoverColor;
+          color: $textInverseHoverColor;
+        }
+      }
+    }
+  }
 }
-
-#mainMenu #mainLogo {
-  margin:0 10px;
-  margin-top: -4px;
-}
-
-#mainMenu li, #mainMenu li span {
-  height: 40px;
-  line-height: $mainMenuLineHeight;
-  color: $mainMenuColor;
-}
-
-#mainMenu .PNB.right li {
-  border-left: 1px solid $mainMenuRightListBorderLeft;
-}
-
-#mainMenu .PNB.right li span {
-  padding: 0 15px;
-}
-
-#mainMenu .PNB.right li.user {
-  background: url('#{$iconsPath}icon_user.png') 15px 7px no-repeat;
-  padding-left: 41px;
-}
-
-#mainMenu .PNB.right li.user:hover {
-  background-color: $bgInverseHoverColor;
-  color: $textInverseHoverColor;
-}
-
-#mainMenu, .publi_group {
-  background-color: $backgroudSecondaryColor;
-}
-
-.context-menu-item a {
-  color: #75ABFF;
-}
-
-.context-menu-item-hover a {
-  color: #212121;
-}
\ No newline at end of file
diff --git a/resources/www/prod/skins/ui-components/_modal-bridge.scss b/resources/www/prod/skins/ui-components/_modal-bridge.scss
index 3d5659d8f2..0c5d8dc3db 100644
--- a/resources/www/prod/skins/ui-components/_modal-bridge.scss
+++ b/resources/www/prod/skins/ui-components/_modal-bridge.scss
@@ -2,111 +2,94 @@
   background-color: $bridgeDropdownToggleBg;
   background-image: none;
 }
+#dialog_publicator {
+  .dropdown-menu {
+    min-width: 95px;
+    background-color: $bridgeDropdownMenuBg;
+    *border: 1px solid $bridgeDropdownMenuBorder;
+    a {
+      padding: 3px 10px;
+      font-size: 12px;
+      color: $bridgeDropdownMenuColor;
+      cursor: pointer;
+      &:hover {
+        background-color: $bridgeDropdownMenuHoverBg;
+        color: $bridgeDropdownMenuHoverColor;
+      }
+    }
+  }
+  .ui-tabs-panel {
+    left: 200px;
+  }
+  .notice_box,
+  .error_box {
+    color: $textPrimaryInverseColor;
+    font-weight: bold;
+    margin: 5px auto;
+    padding: 5px 0;
+    text-align: center;
+    width: 90%;
+  }
+  .notice_box {
+    background-color: green;
+    color: $textPrimaryColor;
+  }
+  .error_box {
+    background-color: orange;
+  }
+  .api_banner {
+    height: 30px;
+    bottom: auto;
+    background-color: $lightBackgroundColor;
+    .submenu.ui-buttonset {
+      z-index: 600;
+    }
+  }
+  .api_content {
+    top: 30px;
+    bottom: 25px;
+    color: $textPrimaryColor;
+    .blockmenu {
+      bottom: auto;
+      background-repeat: repeat-x;
+      background-position: left bottom;
+      z-index: 1000;
+      width:100%;
+      height:40px
+    }
+    .blockresponse {
+      padding: 0 10px;
+      top: 40px;
+      overflow: auto;
+      z-index: 200;
+      .form-actions {
+        background-color: $darkerBackgroundColor;
+        border-top: none;
+        margin: 0;
+      }
+    }
+  }
+  .api_content .blockmenu a.selected,
+  .api_banner a.selected {
+    font-weight: bold;
+    color: $highlightBackgroundColor;
+  }
+  .api_infos {
+    top: auto;
+    height: 25px;
+    background-image: url('#{$iconsPath}api_info.png');
+    background-repeat: repeat-x;
+    background-position: 0 0;
+    color: $textSecondaryColor;
+  }
+  .main_menu {
+    float: left;
+  }
+  .diapo {
+    .title {
+      height: 16px;
+      overflow: hidden;
+    }
+  }
 
-#dialog_publicator .dropdown-menu {
-  min-width: 95px;
-  background-color: $bridgeDropdownMenuBg;
-  *border: 1px solid $bridgeDropdownMenuBorder;
-}
-
-#dialog_publicator .dropdown-menu a {
-  padding: 3px 10px;
-  font-size: 12px;
-  color: $bridgeDropdownMenuColor;
-  cursor: pointer;
-}
-
-#dialog_publicator .dropdown-menu a:hover {
-  background-color: $bridgeDropdownMenuHoverBg;
-  color: $bridgeDropdownMenuHoverColor;
-}
-
-#dialog_publicator .ui-tabs-panel {
-  left: 200px;
-}
-
-#dialog_publicator .notice_box,
-#dialog_publicator .error_box {
-  color: #404040;
-  font-weight: bold;
-  margin: 5px auto;
-  padding: 5px 0;
-  text-align: center;
-  width: 90%;
-}
-
-#dialog_publicator .notice_box {
-  background-color: green;
-  color: $textPrimaryColor;
-}
-
-#dialog_publicator .error_box {
-  background-color: orange;
-}
-
-#dialog_publicator .api_banner {
-  height: 30px;
-  bottom: auto;
-  background-color: $bridgeDialogBg2;
-}
-
-#dialog_publicator .api_banner button {
-  border: 1px solid #515151;
-  background-color: #404040;
-}
-
-#dialog_publicator .api_banner .submenu.ui-buttonset {
-  z-index: 600;
-}
-
-#dialog_publicator .api_content {
-  top: 30px;
-  bottom: 25px;
-  color: $textPrimaryColor;
-}
-
-#dialog_publicator .api_content .blockmenu {
-  bottom: auto;
-  background-repeat: repeat-x;
-  background-position: left bottom;
-  z-index: 1000;
-  width:100%;
-  height:40px
-}
-
-#dialog_publicator .api_content .blockmenu a.selected,
-#dialog_publicator .api_banner a.selected {
-  font-weight: bold;
-  color: #0088CC;
-}
-
-#dialog_publicator .api_content .blockresponse {
-  padding: 0 10px;
-  top: 40px;
-  overflow: auto;
-  z-index: 200;
-}
-
-#dialog_publicator .api_content .blockresponse .form-actions {
-  background-color: $bridgeDialogBg;
-  border-top: none;
-  margin: 0;
-}
-
-#dialog_publicator .api_infos {
-  top: auto;
-  height: 25px;
-  background-image: url('#{$iconsPath}api_info.png');
-  background-repeat: repeat-x;
-  background-position: 0 0;
-  color: $textSecondaryColor;
-}
-
-#dialog_publicator .main_menu {
-  float: left;
-}
-
-#dialog_publicator .diapo .title {
-  height: 16px;
-  overflow: hidden;
 }
\ No newline at end of file
diff --git a/resources/www/prod/skins/ui-components/_modal-edit.scss b/resources/www/prod/skins/ui-components/_modal-edit.scss
index f4c902e926..8688ffc836 100644
--- a/resources/www/prod/skins/ui-components/_modal-edit.scss
+++ b/resources/www/prod/skins/ui-components/_modal-edit.scss
@@ -10,7 +10,7 @@
 }
 
 #EDIT_TOP {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   position: absolute;
   top: 0;
   left: 0;
@@ -45,8 +45,8 @@
 }
 
 #EDIT_FILM2 {
-  border: 1px solid $editCarouselBorder;
-  background-color: $editCarouselBg;
+  border: 1px solid $darkerBorderColor;
+  background-color: $darkerBackgroundColor;
   position: absolute;
   top: 30px;
   left: 10px;
@@ -80,7 +80,7 @@
 }
 
 #EDIT_MID_L {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   width: 700px;
   left: 0;
   -webkit-border-radius: 6px;
@@ -92,13 +92,13 @@
   width: 400px;
   right: 0;
   .ui-tabs-panel {
-    background-color: $backgroudSecondaryColor;
+    background-color: $mediumBackgroundColor;
   }
 }
 
 #EDIT_MID_R li.ui-tabs-active,
 #EDIT_MID_R li.ui-state-active {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
 }
 
 #divS_wrapper {
@@ -127,14 +127,15 @@
     position: relative;
   }
   div.edit_field.odd {
-    background-color: $editStatusFieldOdd;
+    background-color: $darkBackgroundColor;
   }
-  div.edit_field.hover, #divS div.edit_field.active {
-    background-color: $editStatusFieldHover;
-    color: #404040;
+  div.edit_field.hover {
+    background-color: $lightBackgroundColor;
+    color: $lightTextColor;
   }
   div.edit_field.active {
-    border: 1px solid $editStatusFieldActive;
+    background-color: $lightBackgroundActiveColor;
+    border: 1px solid $lightBorderActiveColor;
   }
   span.fieldvalue {
     white-space: normal;
@@ -407,7 +408,7 @@ div.thesaurus {
     height: 100%;
     padding: 0px;
     margin: 0px;
-    background: $thesaurusBg2;
+    background: $darkerBackgroundColor;
     border: $thesaurusBorderColor 1px solid;
   }
   div.thesaurus {
diff --git a/resources/www/prod/skins/ui-components/_modal-export.scss b/resources/www/prod/skins/ui-components/_modal-export.scss
index e45e7d9de5..287c877d2a 100644
--- a/resources/www/prod/skins/ui-components/_modal-export.scss
+++ b/resources/www/prod/skins/ui-components/_modal-export.scss
@@ -1,7 +1,7 @@
 /******* EXPORT ***************************************************************/
 
 #printBox {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
diff --git a/resources/www/prod/skins/ui-components/_modal-preview.scss b/resources/www/prod/skins/ui-components/_modal-preview.scss
index 83e03ae2f7..adc9d9c3c5 100644
--- a/resources/www/prod/skins/ui-components/_modal-preview.scss
+++ b/resources/www/prod/skins/ui-components/_modal-preview.scss
@@ -1,9 +1,9 @@
 
 #PREVIEWBOX, #EDITWINDOW {
   z-index: 1200;
-  background-color: $backgroudPrimaryColor;
+  background-color: $darkerBackgroundColor;
   display: none;
-  border: 2px solid #666666;
+  border: 2px solid $darkerBorderColor;
 }
 
 #PREVIEWBOX img {
@@ -45,7 +45,7 @@
 }
 
 #PREVIEWOTHERS {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   overflow-x: hidden;
   overflow-y: auto;
   left: 0;
@@ -81,7 +81,7 @@
 
 #PREVIEWOTHERSINNER li.otherRegToolTip,
 #PREVIEWOTHERSINNER li.otherBaskToolTip {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -101,7 +101,7 @@
 }
 
 #PREVIEWTITLEWRAPPER {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
   bottom: 0;
 }
 
@@ -117,7 +117,7 @@
 }
 
 #PREVIEWCURRENT {
-  background-color: $backgroudSecondaryColor;
+  background-color: $mediumBackgroundColor;
 }
 
 #PREVIEWCURRENTCONT.group_case {
@@ -211,7 +211,7 @@
   vertical-align: middle;
 }
 
-.prevTrainCurrent .duration, .diapo .duration {
-  background-color: black;
-  color: $textPrimaryColor;
+.prevTrainCurrent .duration {
+  background-color: darken($darkerBackgroundColor, 10);
+  color: $darkerTextColor;
 }
diff --git a/resources/www/prod/skins/ui-components/_modal-publish.scss b/resources/www/prod/skins/ui-components/_modal-publish.scss
index 09c7577434..e50acc6f06 100644
--- a/resources/www/prod/skins/ui-components/_modal-publish.scss
+++ b/resources/www/prod/skins/ui-components/_modal-publish.scss
@@ -31,13 +31,13 @@
 #publicator_selection {
   height: 190px;
   bottom: auto;
-  background-color: $bridgeDialogBg3;
+  background-color: $lightBackgroundColor;
 }
 
 #publicator_selection > .PNB10 {
   overflow: auto;
   bottom: 50px;
-  background-color: $bridgeDialogBg4;
+  background-color: $darkerBackgroundColor;
 }
 
 #publicator_selection .btn {
@@ -116,8 +116,8 @@
 }
 
 #dialog_publicator .duration_time {
-  background-color: #000000;
-  color: $textPrimaryColor;
+  background-color: darken($darkerBackgroundColor, 10);
+  color: $darkerTextColor;
   font-weight: bold;
   padding: 2px 4px;
   position: absolute;
@@ -230,46 +230,43 @@
 #dialog_publicator .api_content .element table .informations {
   width: 296px;
 }
-
-#modal_feed form .feeds {
-  color: $publishFeedColor;
-  overflow: auto;
-}
-
-#modal_feed form .feeds .list {
-  margin: 10px 0;
-}
-
-#modal_feed form .feeds .feed {
-  width: 95%;
-  height: 18px;
-  padding: 5px 0;
-  border: 1px solid $publishFeedBorder;
-  color: $publishFeedColor;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-#modal_feed form .feeds .feed.odd {
-  background-color: $publishFeedOddBg;
-  color: $publishFeedOddColor;
-}
-
-#modal_feed form .feeds .feed.hover {
-  background-color: $publishFeedHoverBg;
-  color: $publishFeedHoverColor;
-}
-
-#modal_feed form .feeds .feed.selected {
-  background-color: $publishFeedSelectedBg;
-  color: $publishFeedSelectedColor;
-}
-
-#modal_feed form .feeds .feed span {
-  margin: 0 10px;
-}
-
-#modal_feed form input.error,
-#modal_feed form textarea.error {
-  border: 1px solid red;
+#modal_feed {
+  form {
+    .feeds {
+      color: $darkerTextColor;
+      overflow: auto;
+      .list {
+        margin: 10px 0;
+      }
+      .feed {
+        width: 95%;
+        height: 18px;
+        padding: 5px 0;
+        background-color: $darkerBackgroundColor;
+        border: 1px solid $darkerBorderColor;
+        color: $darkerTextColor;
+        font-size: 13px;
+        cursor: pointer;
+        &.odd {
+          background-color: $mediumBackgroundColor;
+          color: $mediumTextColor;
+        }
+        &.hover {
+          background-color: $lightBackgroundColor;
+          color: $lightTextColor;
+        }
+        &.selected {
+          background-color: $highlightBackgroundColor;
+          color: $highlightTextColor;
+        }
+        span {
+          margin: 0 10px;
+        }
+      }
+    }
+    input.error,
+    textarea.error {
+      border: 1px solid red;
+    }
+  }
 }
diff --git a/resources/www/prod/skins/ui-components/_modal-push.scss b/resources/www/prod/skins/ui-components/_modal-push.scss
index 8bc63c5fa1..8ae6da4cb7 100644
--- a/resources/www/prod/skins/ui-components/_modal-push.scss
+++ b/resources/www/prod/skins/ui-components/_modal-push.scss
@@ -1,26 +1,6 @@
 /** PUSH BOX */
 .PushBox .content {
-  background-color: $backgroudSecondaryColor;
-}
-
-
-#PushBox .btn {
-  font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 12px;
-  font-weight: bold;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  padding: 4px 10px;
-}
-
-.PushBox a.link {
-  margin: 0 5px;
-  color: #0088CC;
-}
-
-.PushBox a.link:hover {
-  color: #40A3D4;
+  background-color: $mediumBackgroundColor;
 }
 
 .PushBox .LeftColumn h1 {
@@ -242,52 +222,7 @@
   display:inline;
 }
 
-.ui-autocomplete.ui-state-hover,
-.ui-autocomplete.ui-widget-content .ui-state-hover,
-.ui-autocomplete.ui-widget-header .ui-state-hover,
-.ui-autocomplete.ui-state-focus,
-.ui-autocomplete.ui-widget-content .ui-state-focus,
-.ui-autocomplete.ui-widget-header .ui-state-focus {
-  background-image:none;
-  background-color:#515151;
-  border:none;
-  margin:0;
-  border-radius: 0;
-}
 
-.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-hover,
-.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active {
-  margin:0;
-}
-
-.ui-autocomplete li.list-item {
-  width:280px;
-  min-height:45px;
-  display:block;
-}
-
-.ui-autocomplete li.list-item .icon {
-  width:42px;
-}
-
-.ui-autocomplete li.list-item .icon img {
-  max-width:32px;
-  max-height:32px;
-  text-align: center;
-  vertical-align: middle;
-  margin:5px;
-}
-
-.ui-autocomplete {
-  min-height: 42px;
-  max-height: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding:1px 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  padding-right: 20px;
-}
 
 #ListShare table {
   width:100%;
diff --git a/resources/www/prod/skins/ui-components/_modal-tools.scss b/resources/www/prod/skins/ui-components/_modal-tools.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/resources/www/prod/skins/ui-components/_pagination.scss b/resources/www/prod/skins/ui-components/_pagination.scss
index 7471ff4d77..843a05e79a 100644
--- a/resources/www/prod/skins/ui-components/_pagination.scss
+++ b/resources/www/prod/skins/ui-components/_pagination.scss
@@ -35,7 +35,7 @@
 #paginate #tool_navigate #PREV_PAGE:hover,
 #paginate #tool_navigate #last:hover,
 #paginate #tool_navigate #first:hover {
-  background-color: $paginateBg2;
+  background-color: $highlightBackgroundColor;
 }
 
 #paginate #tool_navigate #NEXT_PAGE {
@@ -99,6 +99,6 @@
 
 #paginate #tool_navigate input,
 #paginate #tool_navigate a:hover {
-  color: $paginateTextColor;
-  background: $paginateBorder2Color;
+  color: $highlightTextColor;
+  background: $highlightBackgroundColor;
 }
diff --git a/resources/www/prod/skins/ui-components/_search-form.scss b/resources/www/prod/skins/ui-components/_search-form.scss
index 5bc6bee276..af740f96be 100644
--- a/resources/www/prod/skins/ui-components/_search-form.scss
+++ b/resources/www/prod/skins/ui-components/_search-form.scss
@@ -14,46 +14,42 @@ form.phrasea_query input.query {
 #searchForm {
   width: 100%;
   float: left;
+  .input-append {
+    float: left;
+    width: 50%;
+    .btn {
+      border:none;
+    }
+    a.btn {
+      height: 22px;
+      width: 20px;
+    }
+    button.btn {
+      height: 30px;
+      width: 110px;
+    }
+  }
+  .control-group {
+    float: right;
+    margin-left: 0;
+  }
+  .danger .danger_indicator,
+  .danger.danger_indicator {
+    border-color: #c9c900;
+    background-color: #FCEC98;
+    color: #000000;
+  }
+
 }
-
-#searchForm .input-append {
-  float: left;
-  width: 50%;
-}
-
-#searchForm .control-group {
-  float: right;
-  margin-left: 0;
-}
-
-#searchForm .input-append .btn {
-  border:none;
-}
-
-#searchForm .input-append a.btn {
-  height: 22px;
-  width: 20px;
-}
-
-#searchForm .input-append button.btn {
-  height: 30px;
-  width: 110px;
-}
-
-#searchForm .danger .danger_indicator,
-#searchForm .danger.danger_indicator {
-  border-color: #c9c900;
-  background-color: #FCEC98;
-  color: #000000;
-}
-
-
-#adv_search table.colllist {
-  width: 290px;
-}
-
-#adv_search table.filterlist {
-  width: 600px;
+#adv_search {
+  table {
+    &.colllist {
+      width: 290px;
+    }
+    &.filterlist {
+      width: 600px;
+    }
+  }
 }
 
 /******* SEARCH ***************************************************************/
@@ -61,7 +57,7 @@ form.phrasea_query input.query {
 #adv_search .sbasglob,
 .adv_options .sbasglob,
 #sbasfiltercont {
-  color: $searchSbasFilterColor;
+  color: $lightTextColor;
   margin: 0 0 0 10px;
 }
 
@@ -89,8 +85,8 @@ form.phrasea_query input.query {
 
 #adv_search .sbasglob .sbas_list.selected,
 .adv_options .sbasglob .sbas_list.selected {
-  border: 2px solid $searchSbasListSelectedBorder;
-  background-color: $searchSbasListSelectedBg;
+  border: 2px solid $lightBorderSelectedColor;
+  background-color: $lightBackgroundSelectedColor;
 }
 
 .sbasglob .btn-toolbar,
@@ -99,21 +95,15 @@ form.phrasea_query input.query {
   text-align: center;
 }
 
-.sbaslist {
+/*.sbaslist {
   background-color: $searchSbasListBg;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
-}
+}*/
 
 .sbas_list label {
-  color: $searchSbasListColor;
-}
-
-.clksbas span {
-  cursor: pointer;
-  font-weight: bold;
-  margin: 0 5px;
+  color: $lightTextColor;
 }
 
 .clkbas {
@@ -124,6 +114,11 @@ form.phrasea_query input.query {
   -o-column-break-inside:avoid;
   -ms-column-break-inside:avoid;
   column-break-inside:avoid;
+  span {
+    cursor: pointer;
+    font-weight: bold;
+    margin: 0 5px;
+  }
 }
 
 #searchForm .clkbas label {
diff --git a/resources/www/prod/skins/ui-components/_thumb-extractor.scss b/resources/www/prod/skins/ui-components/_thumb-extractor.scss
index f5af2a0592..0c2991dae3 100644
--- a/resources/www/prod/skins/ui-components/_thumb-extractor.scss
+++ b/resources/www/prod/skins/ui-components/_thumb-extractor.scss
@@ -1,177 +1,151 @@
-
 /******* THUMB EXTRACTOR ******************************************************/
 
 #thumbExtractor {
-  background-color: #404040;
+  background-color: $lightBackgroundColor;
+  .main_title {
+    height: 15px;
+    font-weight: bold;
+    top: 15px;
+  }
+  .part_title_left {
+    height: 20px;
+    width: 320px;
+    top: 30px;
+    left: 10px;
+  }
+  .part_title_right {
+    height: 20px;
+    width: 320px;
+    top: 30px;
+    left: 380px;
+  }
+  #thumb_info {
+    padding-top: 25px;
+    font-style: italic;
+  }
+  .frame_video {
+    border: 1px solid $darkerBorderColor;
+    height: 210px;
+    width: 320px;
+    top: 50px;
+    left: 10px;
+  }
+  #thumb_video {
+    height: 100%;
+    width: 100%;
+  }
+  .frame_canva {
+    border: 1px solid $darkerBorderColor;
+    border-bottom: none;
+    height: 210px;
+    line-height: 210px;
+    width: 320px;
+    top: 50px;
+    left: 380px;
+    z-index: 2;
+    text-align: center;
+  }
+  #thumb_canvas {
+    vertical-align: middle;
+    display: inline-block;
+    line-height: 20px;
+  }
+  .action_bar_left {
+    height: 20px;
+    width: 320px;
+    left: 10px;
+    top: 260px;
+    padding: 2px;
+  }
+  .action_bar_right {
+    height: 20px;
+    width: 320px;
+    top: 260px;
+    left: 380px;
+    display: table-row;
+    padding: 2px;
+    .action_icon {
+      padding-right: 10px;
+      display: table-cell;
+      vertical-align: middle;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  #thumb_reset_button {
+    width: 41px;
+    height: 41px;
+    position: absolute;
+    bottom: 10px;
+    right: 60px;
+    display: none;
+    line-height: 20px;
+  }
+  #thumb_delete_button {
+    width: 41px;
+    height: 41px;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: none;
+    line-height: 20px;
+  }
+  #thumb_delete_button,
+  #thumb_reset_button {
+    cursor: pointer;
+  }
+  #thumb_slider {
+    height: 95px;
+    width: 320px;
+    top: 285px;
+    left: 380px;
+    padding: 0;
+    overflow: auto;
+  }
+  #thumb_wrapper {
+    white-space: nowrap;
+    margin-top: 15px;
+    img {
+      display: inline-block;
+      width: 80px;
+      height: 60px;
+      margin-left: 5px;
+      margin-right: 5px;
+      &.selected {
+        border: 2px solid $bgInverseHoverColor;
+      }
+    }
+  }
+  #thumb_camera_button {
+    cursor: pointer;
+    height: 50px;
+    width: 320px;
+    top: 300px;
+    left: 10px;
+    text-align: center;
+  }
+  #thumb_validate_button {
+    cursor: pointer;
+    height: 30px;
+    width: 80px;
+    top: 385px;
+    left: 620px;
+    padding: 0;
+  }
+  .action_frame .ui-slider .ui-slider-handle {
+    background-color: #FFFFFF;
+  }
 }
 
-#thumbExtractor .main_title {
-  height: 15px;
-  font-weight: bold;
-  top: 15px;
+#thumb_confirm {
+  table {
+    table-layout: fixed;
+    width: 100%;
+    td {
+      padding: 5px;
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
 }
-
-#thumbExtractor .part_title_left {
-  height: 20px;
-  width: 320px;
-  top: 30px;
-  left: 10px;
-}
-
-#thumbExtractor .part_title_right {
-  height: 20px;
-  width: 320px;
-  top: 30px;
-  left: 380px;
-}
-
-#thumbExtractor #thumb_info {
-  padding-top: 25px;
-  font-style: italic;
-}
-
-#thumbExtractor .frame_video {
-  border: 1px solid #1A1B1B;
-  height: 210px;
-  width: 320px;
-  top: 50px;
-  left: 10px;
-}
-
-#thumbExtractor #thumb_video {
-  height: 100%;
-  width: 100%;
-}
-
-#thumbExtractor .frame_canva {
-  border: 1px solid #1A1B1B;
-  border-bottom: none;
-  height: 210px;
-  line-height:210px;
-  width: 320px;
-  top: 50px;
-  left: 380px;
-  z-index: 2;
-  text-align: center;
-}
-
-#thumbExtractor #thumb_canvas {
-  vertical-align:middle;
-  display:inline-block;
-  line-height: 20px;
-}
-
-#thumbExtractor .action_bar_left {
-  height: 20px;
-  width: 320px;
-  left: 10px;
-  top: 260px;
-  background-color:  #3B3D3B;
-  border: 1px solid #3B3D3B;
-  padding: 2px;
-}
-
-#thumbExtractor .action_bar_right {
-  height: 20px;
-  width: 320px;
-  top: 260px;
-  left: 380px;
-  background-color: #3B3D3B;
-  border: 1px solid #3B3D3B;
-  display: table-row;
-  padding: 2px;
-}
-
-#thumbExtractor .action_bar_right .action_icon {
-  padding-right: 10px;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-#thumbExtractor .action_bar_right .action_icon:hover {
-  cursor: pointer;
-}
-
-#thumbExtractor #thumb_reset_button {
-  width: 41px;
-  height: 41px;
-  position: absolute;
-  bottom: 10px;
-  right: 60px;
-  display: none;
-  line-height: 20px;
-}
-
-#thumbExtractor #thumb_delete_button {
-  width: 41px;
-  height: 41px;
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  display: none;
-  line-height: 20px;
-}
-
-#thumbExtractor #thumb_delete_button,
-#thumbExtractor #thumb_reset_button {
-  cursor: pointer;
-}
-
-#thumbExtractor #thumb_slider {
-  height: 95px;
-  width: 320px;
-  top: 285px;
-  left: 380px;
-  padding: 0;
-  overflow: auto;
-}
-
-#thumbExtractor #thumb_wrapper {
-  white-space: nowrap;
-  margin-top: 15px;
-}
-
-#thumbExtractor #thumb_wrapper img {
-  display: inline-block;
-  width: 80px;
-  height: 60px;
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
-#thumbExtractor #thumb_wrapper img.selected {
-  border: 2px solid $bgInverseHoverColor;
-}
-
-#thumbExtractor #thumb_camera_button {
-  cursor: pointer;
-  height: 50px;
-  width: 320px;
-  top: 300px;
-  left: 10px;
-  text-align: center;
-}
-
-#thumbExtractor #thumb_validate_button {
-  cursor: pointer;
-  height: 30px;
-  width: 80px;
-  top: 385px;
-  left: 620px;
-  padding: 0;
-}
-
-#thumbExtractor .action_frame .ui-slider .ui-slider-handle {
-  background-color: #FFFFFF;
-}
-
-#thumb_confirm table {
-  table-layout: fixed;
-  width: 100%;
-}
-
-#thumb_confirm table td {
-  padding: 5px;
-  text-align: center;
-  vertical-align: middle;
-}
\ No newline at end of file
diff --git a/resources/www/prod/skins/ui-components/_upload.scss b/resources/www/prod/skins/ui-components/_upload.scss
index 27e41b77fb..ed29c28bc1 100644
--- a/resources/www/prod/skins/ui-components/_upload.scss
+++ b/resources/www/prod/skins/ui-components/_upload.scss
@@ -2,6 +2,21 @@
 
 /******* UPLOAD MANAGER *******************************************************/
 
+#uploadBoxLeft, #uploadBoxRight {
+  width: 48.5%;
+  height: 100%;
+  overflow: auto;
+  text-align: center;
+}
+
+#uploadBoxLeft {
+  float: left;
+}
+
+#uploadBoxRight {
+  float: right;
+}
+
 #uploadBox {
   height: 100%;
   h5 {
@@ -32,263 +47,214 @@
     font-style: italic;
     color: $textSecondaryColor;
   }
-}
-
-#uploadBoxLeft, #uploadBoxRight {
-  width: 48.5%;
-  height: 100%;
-  overflow: auto;
-  text-align: center;
-}
-
-#uploadBoxLeft {
-  float: left;
-}
-
-#uploadBoxRight {
-  float: right;
-}
-
-#uploadBox .fileinput-button {
-  position: relative;
-  overflow: hidden;
-}
-
-#uploadBox .fileinput-button input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0;
-  border: solid transparent;
-  border-width: 0 0 100px 200px;
-  opacity: 0;
-  filter: alpha(opacity=0);
-  -moz-transform: translate(-300px, 0) scale(4);
-  direction: ltr;
-  cursor: pointer;
-}
-
-#uploadBox .status-tab {
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-#uploadBox .status-tab td {
-  padding: 2px;
-}
-
-#uploadBox .status-tab-left {
-  width: 48%;
-  padding-right: 5px;
-  text-align: right;
-}
-
-#uploadBox .status-tab-right {
-  width: 48%;
-  padding-left: 5px;
-  text-align: left;
-}
-
-#uploadBox .status-tab-left input, #uploadBox .status-tab-right input {
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
-#uploadBox .thumbnails {
-  margin-left: -20px;
-}
-
-#uploadBox .thumbnails > li {
-  margin-left: 20px;
-}
-
-#uploadBox .upload-record {
-  height: 260px;
-  background-color: $uploadBg1;
-}
-
-#uploadBox .flash-box .upload-record {
-  height: 160px;
-  background-color: $uploadBg2;
-}
-
-#uploadBox .upload-record .canva-wrapper {
-  height: 125px;
-  overflow: auto;
-}
-
-#uploadBox .upload-record .name-doc {
-  height:40px;
-  overflow: hidden;
-  -o-text-overflow: ellipsis; /* pour Opera 9 */
-  text-overflow: ellipsis;
-  font-weight: bold;
-}
-
-#uploadBox .upload-record .infos-doc {
-  overflow: hidden;
-  -o-text-overflow: ellipsis; /* pour Opera 9 */
-  text-overflow: ellipsis;
-  color: #777777;
-  height: 40px;
-}
-
-#uploadBox .upload-record .error, #uploadBox .upload-record .success{
-  height: 55px;
-  padding-top: 2px;
-  padding-bottom: 3px;
-  display: none;
-  overflow: auto;
-}
-
-#uploadBox .upload-record .remove-element {
-  margin: 2px 0;
-}
-
-#uploadBox .upload-record .error {
-  padding: 0;
-  width: 100%;
-}
-
-#uploadBox .select-label {
-  font-style: italic;
-  color: $textSecondaryColor;
-}
-
-#uploadBox .select-row {
-  font-weight: normal;
-  font-style: normal;
-}
-
-#uploadBoxRight .progress {
-  margin-top: 4px;
-  margin-bottom: 10px;
-  height: 10px;
-}
-
-
-#uploadBox .uploader-button{
-  text-align: center;
-  width:50%;
-}
-
-#uploadBox #addFileList {
-  width:100%;
-  table-layout:fixed;
-  border:none;
-}
-
-#uploadBox #addFileList td{
-  vertical-align: middle;
-}
-
-#uploadBox .uploader-icon {
-  width:15%;
-  text-align:left;
-}
-
-#uploadBox .uploader-info {
-  font-size:10px;
-  width:35%;
-  text-align:left;
-}
-
-#uploadBox .uploader-info p {
-  line-height:10px;
-  font-size:10px;
-  word-wrap: break-word;
-}
-
-#uploadBox .uploader-info a {
-  text-decoration: underline;
-  color: darkblue;
-  margin:5px 0;
+  .fileinput-button {
+    position: relative;
+    overflow: hidden;
+    input {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      border: solid transparent;
+      border-width: 0 0 100px 200px;
+      opacity: 0;
+      filter: alpha(opacity=0);
+      -moz-transform: translate(-300px, 0) scale(4);
+      direction: ltr;
+      cursor: pointer;
+    }
+  }
+  .status-tab {
+    width: 100%;
+    margin-bottom: 10px;
+    td {
+      padding: 2px;
+    }
+  }
+  .status-tab-left {
+    width: 48%;
+    padding-right: 5px;
+    text-align: right;
+  }
+  .status-tab-right {
+    width: 48%;
+    padding-left: 5px;
+    text-align: left;
+  }
+  .status-tab-left input,
+  .status-tab-right input {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .thumbnails {
+    margin-left: -20px;
+    > li {
+      margin-left: 20px;
+    }
+  }
+  .upload-record {
+    height: 260px;
+    background-color: $uploadBg1;
+    .canva-wrapper {
+      height: 125px;
+      overflow: auto;
+    }
+    .name-doc {
+      height:40px;
+      overflow: hidden;
+      -o-text-overflow: ellipsis; /* pour Opera 9 */
+      text-overflow: ellipsis;
+      font-weight: bold;
+    }
+    .infos-doc {
+      overflow: hidden;
+      -o-text-overflow: ellipsis; /* pour Opera 9 */
+      text-overflow: ellipsis;
+      color: #777777;
+      height: 40px;
+    }
+    .error, .success{
+      height: 55px;
+      padding-top: 2px;
+      padding-bottom: 3px;
+      display: none;
+      overflow: auto;
+    }
+    .error {
+      padding: 0;
+      width: 100%;
+    }
+    .remove-element {
+      margin: 2px 0;
+    }
+  }
+  .flash-box .upload-record {
+    height: 160px;
+    background-color: $uploadBg2;
+  }
+  .select-label {
+    font-style: italic;
+    color: $textSecondaryColor;
+  }
+  .select-row {
+    font-weight: normal;
+    font-style: normal;
+  }
+  .progress {
+    margin-top: 4px;
+    margin-bottom: 10px;
+    height: 10px;
+  }
+  .uploader-button{
+    text-align: center;
+    width:50%;
+  }
+  #addFileList {
+    width:100%;
+    table-layout:fixed;
+    border:none;
+    td{
+      vertical-align: middle;
+    }
+  }
+  .uploader-icon {
+    width:15%;
+    text-align:left;
+  }
+  .uploader-info {
+    font-size:10px;
+    width:35%;
+    text-align:left;
+    p {
+      line-height:10px;
+      font-size:10px;
+      word-wrap: break-word;
+    }
+    a {
+      text-decoration: underline;
+      color: darkblue;
+      margin:5px 0;
+    }
+  }
 }
 
 #uploadBoxRight .progress .progress-bar {
   height: 10px;
 }
+#lazaretBox {
+  &.container-fluid {
+    margin: 0;
+    padding: 0;
+  }
+  .loading {
+    background-image: url('#{$iconsPath}#{$uploadLoaderImg}');
+    background-position: center right;
+    background-repeat: no-repeat;
+  }
+  li.wrapper-item {
+    margin-bottom: 20px;
+  }
+  .lazaret-file h5,
+  .lazaret-proposals h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+  .lazaret-file p,
+  .lazaret-proposals p {
+    font-weight: bold;
+    overflow: hidden;
+    -o-text-overflow: ellipsis; /* for Opera 9 */
+    text-overflow: ellipsis;
+  }
+  span.info {
+    display: inline;
+    font-weight: normal;
+  }
+  .lazaret-file,
+  .lazaret-proposals {
+    a {
+      font-weight: normal;
+      color: $textPrimaryColor;
+      &:hover {
+        color: $textSecondaryColor;
+      }
+    }
+    .thumbnails {
+      margin-left: 0;
+      background-color: #FFFFFF;
+      min-height: 234px;
+      li {
+        margin: 0;
+      }
+      img {
+        max-height: 480px;
+      }
+      button {
+        font-weight: normal;
+        img {
+          margin-right: 5px;
+        }
+      }
+      .record-thumb {
+        height: 180px;
+      }
+    }
+  }
 
-#lazaretBox .loading {
-  background-image: url('#{$iconsPath}#{$uploadLoaderImg}');
-  background-position: center right;
-  background-repeat: no-repeat;
-}
-
-#lazaretBox.container-fluid {
-  margin: 0;
-  padding: 0;
-}
-
-#lazaretBox li.wrapper-item {
-  margin-bottom: 20px;
-}
-
-#lazaretBox .lazaret-file h5,
-#lazaretBox .lazaret-proposals h5 {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-#lazaretBox .lazaret-file p,
-#lazaretBox .lazaret-proposals p {
-  font-weight: bold;
-  overflow: hidden;
-  -o-text-overflow: ellipsis; /* for Opera 9 */
-  text-overflow: ellipsis;
-}
-
-#lazaretBox span.info {
-  display: inline;
-  font-weight: normal;
-}
-
-#lazaretBox .lazaret-file a,
-#lazaretBox .lazaret-proposals a {
-  font-weight: normal;
-  color: $textPrimaryColor;
-}
-
-#lazaretBox .lazaret-file a:hover,
-#lazaretBox .lazaret-proposals a:hover {
-  color: $textSecondaryColor;
+  .lazaret-proposals .records-subititution {
+    margin: 0 10px 10px 0;
+  }
 }
 
 
-#lazaretBox .lazaret-file .thumbnails,
-#lazaretBox .lazaret-proposals .thumbnails {
-  margin-left: 0;
-}
 
-#lazaretBox .lazaret-file .thumbnails li {
-  margin: 0;
-}
 
-#lazaretBox .lazaret-proposals .records-subititution {
-  margin: 0 10px 10px 0;
-}
 
-#lazaretBox .lazaret-file .thumbnail,
-#lazaretBox .lazaret-proposals .thumbnail {
-  background-color: #FFFFFF;
-}
 
-#lazaretBox .lazaret-proposals .thumbnail {
-  min-height: 234px;
-}
 
-#lazaretBox .lazaret-proposals .thumbnail .record-thumb {
-  height: 180px;
-}
 
-#lazaretBox .lazaret-file .thumbnail img {
-  max-height: 480px;
-}
 
-#lazaretBox .lazaret-file .thumbnail button {
-  font-weight: normal;
-}
 
-#lazaretBox .lazaret-file .thumbnail button img {
-  margin-right: 5px;
-}
+
+
+
diff --git a/resources/www/prod/skins/ui-components/_workzone-baskets.scss b/resources/www/prod/skins/ui-components/_workzone-baskets.scss
index 2d1089dc57..00fa263269 100644
--- a/resources/www/prod/skins/ui-components/_workzone-baskets.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-baskets.scss
@@ -187,21 +187,21 @@
 
 #baskets {
   > div {
-    border-top: 1px solid $proposalsBorder;
+    border-top: 1px solid $mediumBorderColor;
   }
   .SSTT {
     &.active {
       border: 1px solid #b1b1b1;
       &.ui-corner-top {
         border: none;
-        border-top: 1px solid #000;
+        border-top: 1px solid $mediumBorderColor;
         top: 0;
-        background-color: #212121;
+        background-color: $mediumBackgroundColor;
       }
     }
     &.grouping {
       &.active {
-        border: 1px solid #2f4a6f;
+        // border: 1px solid #2f4a6f;
         &.ui-corner-top {
           border-bottom: none;
         }
diff --git a/resources/www/prod/skins/ui-components/_workzone-proposals.scss b/resources/www/prod/skins/ui-components/_workzone-proposals.scss
index a1b1708857..b1d8198c4f 100644
--- a/resources/www/prod/skins/ui-components/_workzone-proposals.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-proposals.scss
@@ -3,21 +3,21 @@
 #proposals {
   position: relative;
   left: 5px;
-  border-top: 1px solid $proposalsBorder;
+  border-top: 1px solid $darkBorderColor;
   top: 87px !important;
   *:focus {
     outline: none;
   }
   ul {
     ul {
-      background-color: $proposalsBg;
+      background-color: $darkBackgroundColor;
     }
     li {
       line-height: 17px;
       font-size: 13px;
     }
     &.fancytree-container {
-      background-color: $backgroudSecondaryColor;
+      background-color: $mediumBackgroundColor;
       border: 0px none transparent;
       overflow-x: hidden;
       padding-left: 0;
@@ -47,23 +47,23 @@
     height: 49px;
     line-height: 49px;
     margin-left: 0;
-    border-left: 4px solid $backgroudSecondaryColor;
-    border-bottom: 1px solid $proposalsTitleBorder;
+    border-left: 4px solid $mediumBackgroundColor;
+    border-bottom: 1px solid $mediumBorderColor;
     .fancytree-title {
       font-size: 12px;
       margin-left: 10px;
     }
     &:hover {
       border-left: 4px solid $proposalColor;
-      color: $textPrimaryHoverColor;
+      color: $mediumTextHoverColor;
       .fancytree-title {
-        color: $textPrimaryHoverColor;
+        color: $mediumTextHoverColor;
       }
     }
     .fancytree-expander {
       &:before {
         content: '\25C0'; /* U+25C0 BLACK LEFT-POINTING TRIANGLE */
-        color: #a0a0a0;
+        color: $mediumTextColor;
       }
       &:hover {
         &:before {
diff --git a/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss b/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
index e62c013e95..d31eea675d 100644
--- a/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
@@ -2,7 +2,7 @@
 .treeview {
 
   li {
-    color: #a1a1a1;
+    color: $mediumTextColor;
     vertical-align: middle;
     background-image: none;
   }
@@ -14,11 +14,11 @@
     background: none;
     padding-top: 0;
     padding-bottom: 0;
-    border-bottom: 1px solid $treeviewBorderExpandable;
+    border-bottom: 1px solid $mediumBorderColor;
     > .hitarea {
       height: 51px;
       background: url('#{$iconsPath}sprite_tree_first.png') 99% 22px no-repeat;
-      border-left: 5px $backgroudSecondaryColor solid;
+      border-left: 5px $mediumBackgroundColor solid;
       &:hover,
       &.active {
         border-left: 5px $thesaurusColor solid;
@@ -44,7 +44,7 @@
         color: $textPrimaryColor;
       }
       span {
-        color: #a6a6a6;
+        color: $mediumTextColor;
         &.h {
           color: $thesaurusColor !important;
         }
@@ -94,7 +94,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
   }
   .treeview {
     ul {
-      background-color: $proposalsBg;
+      background-color: $darkBackgroundColor;
       margin-left: -16px;
       padding-left: 16px;
       li {
@@ -149,14 +149,14 @@ dans l'onglet thesaurus : arbres, menus contextuels
       width: 100%;
       margin: 0;
       padding: 0;
-      border: 1px solid $thesaurusBorder1;
+      border: 1px solid $mediumBorderColor;
       border-top: none;
       input.input-medium {
         width: 80%;
         border-radius: 0;
         height: 50px;
         padding: 0 2.5%;
-        background: $thesaurusBg1;
+        background: $thesaurusInputBackground;
         border: none;
         float: left;
         margin: 0;
@@ -167,7 +167,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
         vertical-align: middle;
         padding: 0;
         border-radius: 0;
-        background: $backgroudSecondaryColor url('#{$iconsPath}icon_magnify.png') 50% no-repeat;
+        background: $mediumBackgroundColor url('#{$iconsPath}icon_magnify.png') 50% no-repeat;
         border: none;
         margin: 0;
         outline: none;
diff --git a/resources/www/prod/skins/ui-components/_workzone.scss b/resources/www/prod/skins/ui-components/_workzone.scss
index 6571940bc6..12521f49a9 100644
--- a/resources/www/prod/skins/ui-components/_workzone.scss
+++ b/resources/www/prod/skins/ui-components/_workzone.scss
@@ -22,9 +22,9 @@
     background: url('#{$iconsPath}workzoneEscamote.png') 30px 36px no-repeat;
   }
   .wrapper {
-    background-color: $workzoneBg;
+    background-color: $mediumBackgroundColor;
     right: 10px;
-    border-top: 1px solid $workzoneBorderTop;
+    border-top: 1px solid $mediumBorderColor; //$workzoneBorderTop;
   }
 
   .ui-tabs {
@@ -38,7 +38,7 @@
         width: auto;
         height: 85px;
         display: inline-block;
-        background-color: $backgroudSecondaryColor;
+        background-color: $mediumBackgroundColor;
         z-index: 10;
         border-radius: 0;
         &.proposals_WZ {
diff --git a/resources/www/vendors/jquery-ui/dark-hive.scss b/resources/www/vendors/jquery-ui/dark-hive.scss
index cc9d15eecc..1e602084ba 100644
--- a/resources/www/vendors/jquery-ui/dark-hive.scss
+++ b/resources/www/vendors/jquery-ui/dark-hive.scss
@@ -800,159 +800,6 @@ body .ui-tooltip {
   font-family: Verdana,Arial,sans-serif;
   font-size: 1em;
 }
-.ui-widget-content {
-  border: 1px solid #555555;
-  background: #000000 url('#{$imagesPath}ui-bg_loop_25_000000_21x21.png') 50% 50% repeat;
-  color: #ffffff;
-}
-.ui-widget-content a {
-  color: #ffffff;
-}
-.ui-widget-header {
-  border: 1px solid #333333;
-  background: #444444 url('#{$imagesPath}ui-bg_highlight-soft_44_444444_1x100.png') 50% 50% repeat-x;
-  color: #ffffff;
-  font-weight: bold;
-}
-.ui-widget-header a {
-  color: #ffffff;
-}
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
-  border: 1px solid #444444;
-  background: #222222 url('#{$imagesPath}ui-bg_highlight-soft_35_222222_1x100.png') 50% 50% repeat-x;
-  font-weight: normal;
-  color: #eeeeee;
-}
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited {
-  color: #eeeeee;
-  text-decoration: none;
-}
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-  border: 1px solid #0b93d5;
-  background: #003147 url('#{$imagesPath}ui-bg_highlight-soft_33_003147_1x100.png') 50% 50% repeat-x;
-  font-weight: normal;
-  color: #ffffff;
-}
-.ui-state-hover a,
-.ui-state-hover a:hover,
-.ui-state-hover a:link,
-.ui-state-hover a:visited {
-  color: #ffffff;
-  text-decoration: none;
-}
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-  border: 1px solid #26b3f7;
-  background: #0972a5 url('#{$imagesPath}ui-bg_highlight-hard_20_0972a5_1x100.png') 50% 50% repeat-x;
-  font-weight: normal;
-  color: #ffffff;
-}
-.ui-state-active a,
-.ui-state-active a:link,
-.ui-state-active a:visited {
-  color: #ffffff;
-  text-decoration: none;
-}
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
-  border: 1px solid #cccccc;
-  background: #eeeeee url('#{$imagesPath}ui-bg_highlight-soft_80_eeeeee_1x100.png') 50% top repeat-x;
-  color: #2e7db2;
-}
-.ui-state-highlight a,
-.ui-widget-content .ui-state-highlight a,
-.ui-widget-header .ui-state-highlight a {
-  color: #2e7db2;
-}
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
-  border: 1px solid #ffb73d;
-  background: #ffc73d url('#{$imagesPath}ui-bg_glass_40_ffc73d_1x400.png') 50% 50% repeat-x;
-  color: #111111;
-}
-.ui-state-error a,
-.ui-widget-content .ui-state-error a,
-.ui-widget-header .ui-state-error a {
-  color: #111111;
-}
-.ui-state-error-text,
-.ui-widget-content .ui-state-error-text,
-.ui-widget-header .ui-state-error-text {
-  color: #111111;
-}
-.ui-priority-primary,
-.ui-widget-content .ui-priority-primary,
-.ui-widget-header .ui-priority-primary {
-  font-weight: bold;
-}
-.ui-priority-secondary,
-.ui-widget-content .ui-priority-secondary,
-.ui-widget-header .ui-priority-secondary {
-  opacity: .7;
-  filter:Alpha(Opacity=70);
-  font-weight: normal;
-}
-.ui-state-disabled,
-.ui-widget-content .ui-state-disabled,
-.ui-widget-header .ui-state-disabled {
-  opacity: .35;
-  filter:Alpha(Opacity=35);
-  background-image: none;
-}
-.ui-state-disabled .ui-icon {
-  filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
-}
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon {
-  width: 16px;
-  height: 16px;
-}
-.ui-icon,
-.ui-widget-content .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_cccccc_256x240.png');
-}
-.ui-widget-header .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ffffff_256x240.png');
-}
-.ui-state-default .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_cccccc_256x240.png');
-}
-.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ffffff_256x240.png');
-}
-.ui-state-active .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
-}
-.ui-state-highlight .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_4b8e0b_256x240.png');
-}
-.ui-state-error .ui-icon,
-.ui-state-error-text .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_a83300_256x240.png');
-}
 
 /* positioning */
 .ui-icon-blank { background-position: 16px 16px; }
diff --git a/resources/www/vendors/jquery-ui/ui-lightness.scss b/resources/www/vendors/jquery-ui/ui-lightness.scss
index 9358149e53..7bba4f1aec 100644
--- a/resources/www/vendors/jquery-ui/ui-lightness.scss
+++ b/resources/www/vendors/jquery-ui/ui-lightness.scss
@@ -604,7 +604,7 @@ button.ui-button::-moz-focus-inner {
   height: 100%;
 }
 .ui-progressbar .ui-progressbar-overlay {
-  background: url("images/animated-overlay.gif");
+  background: url('#{$imagesPath}animated-overlay.gif');
   height: 100%;
   filter: alpha(opacity=25);
   opacity: 0.25;
@@ -787,7 +787,7 @@ body .ui-tooltip {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+  font-family: Verdana,Arial,sans-serif;
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -797,162 +797,9 @@ body .ui-tooltip {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+  font-family: Verdana,Arial,sans-serif;
   font-size: 1em;
 }
-.ui-widget-content {
-  border: 1px solid #dddddd;
-  background: #eeeeee url('#{$imagesPath}ui-bg_highlight-soft_100_eeeeee_1x100.png') 50% top repeat-x;
-  color: #333333;
-}
-.ui-widget-content a {
-  color: #333333;
-}
-.ui-widget-header {
-  border: 1px solid #e78f08;
-  background: #f6a828 url('#{$imagesPath}ui-bg_gloss-wave_35_f6a828_500x100.png') 50% 50% repeat-x;
-  color: #ffffff;
-  font-weight: bold;
-}
-.ui-widget-header a {
-  color: #ffffff;
-}
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
-  border: 1px solid #cccccc;
-  background: #f6f6f6 url('#{$imagesPath}ui-bg_glass_100_f6f6f6_1x400.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #1c94c4;
-}
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited {
-  color: #1c94c4;
-  text-decoration: none;
-}
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-  border: 1px solid #fbcb09;
-  background: #fdf5ce url('#{$imagesPath}ui-bg_glass_100_fdf5ce_1x400.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #c77405;
-}
-.ui-state-hover a,
-.ui-state-hover a:hover,
-.ui-state-hover a:link,
-.ui-state-hover a:visited {
-  color: #c77405;
-  text-decoration: none;
-}
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-  border: 1px solid #fbd850;
-  background: #ffffff url('#{$imagesPath}ui-bg_glass_65_ffffff_1x400.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #eb8f00;
-}
-.ui-state-active a,
-.ui-state-active a:link,
-.ui-state-active a:visited {
-  color: #eb8f00;
-  text-decoration: none;
-}
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
-  border: 1px solid #fed22f;
-  background: #ffe45c url('#{$imagesPath}ui-bg_highlight-soft_75_ffe45c_1x100.png') 50% top repeat-x;
-  color: #363636;
-}
-.ui-state-highlight a,
-.ui-widget-content .ui-state-highlight a,
-.ui-widget-header .ui-state-highlight a {
-  color: #363636;
-}
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
-  border: 1px solid #cd0a0a;
-  background: #b81900 url('#{$imagesPath}ui-bg_diagonals-thick_18_b81900_40x40.png') 50% 50% repeat;
-  color: #ffffff;
-}
-.ui-state-error a,
-.ui-widget-content .ui-state-error a,
-.ui-widget-header .ui-state-error a {
-  color: #ffffff;
-}
-.ui-state-error-text,
-.ui-widget-content .ui-state-error-text,
-.ui-widget-header .ui-state-error-text {
-  color: #ffffff;
-}
-.ui-priority-primary,
-.ui-widget-content .ui-priority-primary,
-.ui-widget-header .ui-priority-primary {
-  font-weight: bold;
-}
-.ui-priority-secondary,
-.ui-widget-content .ui-priority-secondary,
-.ui-widget-header .ui-priority-secondary {
-  opacity: .7;
-  filter:Alpha(Opacity=70);
-  font-weight: normal;
-}
-.ui-state-disabled,
-.ui-widget-content .ui-state-disabled,
-.ui-widget-header .ui-state-disabled {
-  opacity: .35;
-  filter:Alpha(Opacity=35);
-  background-image: none;
-}
-.ui-state-disabled .ui-icon {
-  filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
-}
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon {
-  width: 16px;
-  height: 16px;
-}
-.ui-icon,
-.ui-widget-content .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_222222_256x240.png');
-}
-.ui-widget-header .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ffffff_256x240.png');
-}
-.ui-state-default .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ef8c08_256x240.png');
-}
-.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ef8c08_256x240.png');
-}
-.ui-state-active .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ef8c08_256x240.png');
-}
-.ui-state-highlight .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_228ef1_256x240.png');
-}
-.ui-state-error .ui-icon,
-.ui-state-error-text .ui-icon {
-  background-image: url('#{$imagesPath}ui-icons_ffd27a_256x240.png');
-}
 
 /* positioning */
 .ui-icon-blank { background-position: 16px 16px; }
diff --git a/templates/web/common/index_bootstrap.html.twig b/templates/web/common/index_bootstrap.html.twig
index c96e39ceb4..ea0ef0bf31 100644
--- a/templates/web/common/index_bootstrap.html.twig
+++ b/templates/web/common/index_bootstrap.html.twig
@@ -8,7 +8,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>{% if local_title is defined%}{{local_title}} | {% endif %}{{ app['conf'].get(['registry', 'general', 'title']) }} {% if module_name is defined %} - {{ module_name }} {% endif %}</title>
 
-        <link type="text/css" rel="stylesheet" href="/assets/vendors/jquery-ui/css/{{ jquery_theme|default('ui-lightness') }}{% if not app.debug %}.min{% endif %}.css">
+        {#<link type="text/css" rel="stylesheet" href="/assets/vendors/jquery-ui/css/{{ jquery_theme|default('ui-lightness') }}{% if not app.debug %}.min{% endif %}.css">#}
         <link type="text/css" rel="stylesheet" href="/assets/common/css/common{% if not app.debug %}.min{% endif %}.css">
 
         <!--[if lte IE 8]>