diff --git a/resources/www/_shared/styles/_main-menu.scss b/resources/www/_shared/styles/_main-menu.scss
index 8c49cc8901..bc447d7b4d 100644
--- a/resources/www/_shared/styles/_main-menu.scss
+++ b/resources/www/_shared/styles/_main-menu.scss
@@ -42,7 +42,7 @@ $mainMenuBottomBorder: none !default;
       display: inline-block;
       color: $mainMenuLinkColor;
       > span {
-        font-size: 12px;
+        font-size: $xmediumFontSize;
         font-weight: normal;
         border-top: 3px solid transparent;
         display: block;
diff --git a/resources/www/_shared/styles/_variables.scss b/resources/www/_shared/styles/_variables.scss
index 40313353a3..cdebe713fa 100644
--- a/resources/www/_shared/styles/_variables.scss
+++ b/resources/www/_shared/styles/_variables.scss
@@ -7,4 +7,11 @@ $mainMenuLineHeight: 36px;
 
 $baseBorderRadius:      3px;
 $borderRadiusLarge:     4px;
-$borderRadiusSmall:     2px;
\ No newline at end of file
+$borderRadiusSmall:     2px;
+
+
+$defaultFontFamily: Helvetica, Arial, sans-serif;
+$xsmallFontSize: 8px;
+$smallFontSize: 10px;
+$xmediumFontSize: 12px;
+$mediumFontSize: 13px;
diff --git a/resources/www/_shared/styles/jquery-ui/_shared.scss b/resources/www/_shared/styles/jquery-ui/_shared.scss
index f41f239458..d7e8b6102c 100644
--- a/resources/www/_shared/styles/jquery-ui/_shared.scss
+++ b/resources/www/_shared/styles/jquery-ui/_shared.scss
@@ -339,7 +339,7 @@ button.ui-button::-moz-focus-inner {
   text-align: center;
 }
 .ui-datepicker .ui-datepicker-title select {
-  font-size: 1em;
+  //font-size: 1em;
   margin: 1px 0;
 }
 .ui-datepicker select.ui-datepicker-month-year {
@@ -351,7 +351,7 @@ button.ui-button::-moz-focus-inner {
 }
 .ui-datepicker table {
   width: 100%;
-  font-size: .9em;
+  //font-size: .9em;
   border-collapse: collapse;
   margin: 0 0 .4em;
 }
@@ -780,6 +780,7 @@ body .ui-tooltip {
 
 /* Component containers
 ----------------------------------*/
+/* let bootstrap handle font-size
 .ui-widget {
   font-family: Verdana,Arial,sans-serif;
   font-size: 1.1em;
@@ -793,7 +794,7 @@ body .ui-tooltip {
 .ui-widget button {
   font-family: Verdana,Arial,sans-serif;
   font-size: 1em;
-}
+}*/
 
 
 /* positioning */
diff --git a/resources/www/_shared/styles/main.scss b/resources/www/_shared/styles/main.scss
index da70342900..688dc75f1b 100644
--- a/resources/www/_shared/styles/main.scss
+++ b/resources/www/_shared/styles/main.scss
@@ -1,12 +1,12 @@
 @import 'variables';
 
 /** skin/common/main.css */
-body{
-  margin:0;
-  padding:0;
-  font-family:Helvetica,Arial,sans-serif;
-  font-size:12px;
-  overflow:hidden;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
+  overflow: hidden;
 }
 
 
@@ -23,13 +23,15 @@ img{
   position:absolute;
   z-index:32000;
   overflow:hidden;
+  hr{
+    margin: 8px 0;
+  }
+  .popover {
+    max-width: none;
+    width: auto;
+  }
 }
 
-#tooltip hr{
-  margin: 8px 0;
-}
-
-
 .PNB
 {
   position:absolute;
@@ -56,10 +58,6 @@ input.checkbox{
   display:none;
 }
 
-#tooltip .popover {
-  max-width: none;
-  width: auto;
-}
 
 .ui-dialog-titlebar {
   min-height: 20px;
diff --git a/resources/www/admin/styles/main.scss b/resources/www/admin/styles/main.scss
index 672bde3372..254a8c409c 100644
--- a/resources/www/admin/styles/main.scss
+++ b/resources/www/admin/styles/main.scss
@@ -20,6 +20,8 @@ body {
   padding: 0;
   background-color: #ffffff;
   color: #333333;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
   overflow-y: auto;
 }
 .clear {
diff --git a/resources/www/prod/skins/000000/images/ui-bg_gloss-wave_20_111111_500x100.png b/resources/www/common/images/icons/ui-bg_gloss-wave_20_111111_500x100.png
similarity index 100%
rename from resources/www/prod/skins/000000/images/ui-bg_gloss-wave_20_111111_500x100.png
rename to resources/www/common/images/icons/ui-bg_gloss-wave_20_111111_500x100.png
diff --git a/resources/www/common/js/jquery.tooltip.js b/resources/www/common/js/jquery.tooltip.js
index fd0ae6cd12..c09e7376c7 100644
--- a/resources/www/common/js/jquery.tooltip.js
+++ b/resources/www/common/js/jquery.tooltip.js
@@ -300,7 +300,8 @@
                     topOffset = 20,
                     leftOffset = 20;
 
-                if( $eventTarget ) {
+                console.log($eventTarget.length)
+                if( $eventTarget.length > 0 ) {
                     // change offsets:
                     topOffset = -8;
                     leftOffset = -8;
@@ -318,7 +319,7 @@
                 var ratioImage = $(h).width() / $(h).height();
 
                 //position de l'image
-                console.log('$eventTarget', $eventTarget)
+
                 if ($eventTarget.offset().left > (v.x - $eventTarget.offset().left - $eventTarget.width())) {
                     hor = 'gauche';
                     wiH = $eventTarget.offset().left;
@@ -493,6 +494,10 @@
     // delete timeout and show helper
     function show() {
         tID = null;
+        var isBrowsable = false;
+        if( $.tooltip.current !== null ) {
+            isBrowsable = settings($.tooltip.current).isBrowsable;
+        }
 
         if ((!IE || !$.fn.bgiframe) && settings($.tooltip.current).fade) {
             if (helper.parent.is(":animated"))
@@ -507,12 +512,12 @@
             .unbind('mouseenter')
             .unbind('mouseleave')
             .mouseenter(function(){
-                if (settings($.tooltip.current).isBrowsable) {
+                if (isBrowsable) {
                     $.tooltip.currentHover = true;
                 }
             })
             .mouseleave(function () {
-                if (settings($.tooltip.current).isBrowsable) {
+                if (isBrowsable) {
                     // if tooltip has scrollable content or selectionnable text - should be closed on mouseleave:
                     $.tooltip.currentHover = false;
                     helper.parent.hide();
diff --git a/resources/www/common/styles/main.scss b/resources/www/common/styles/main.scss
index 8262fcd930..9a8a320fde 100644
--- a/resources/www/common/styles/main.scss
+++ b/resources/www/common/styles/main.scss
@@ -20,40 +20,7 @@ $mainMenuLinkBackgroundHoverColor: transparent;
 
 #mainContent {
   margin-top: $mainMenuHeight;
-  #page {
-    background-color: #414141;
-  }
 }
 
-body {
-  color: #FFFFFF;
-  background-color: #212121;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  overflow: auto;
-  min-height: 100%;
-  width: 100%;
-}
 
-h1 {
-  font-size: 26px;
-  font-weight: bold;
-  padding: 50px 0 20px;
-}
 
-#page {
-  width: 860px;
-  background-color: #414141;
-  padding: 0 20px;
-  margin: 0 auto;
-  height: 100%;
-  position: relative !important;
-}
-
-.preview .thumb_wrapper {
-  overflow: hidden;
-}
-
-.caption {
-  padding: 50px 0 20px;
-}
diff --git a/resources/www/lightbox/styles/main.scss b/resources/www/lightbox/styles/main.scss
index ce25c17f9c..cd308e35e2 100644
--- a/resources/www/lightbox/styles/main.scss
+++ b/resources/www/lightbox/styles/main.scss
@@ -14,7 +14,8 @@ body {
   background-color: #BFBFBF;
   color: #212121;
   /*font-size:11px;*/
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
 }
 
 #mainContent {
diff --git a/resources/www/oauth/main.scss b/resources/www/oauth/main.scss
index 6b7269be27..af096e9fb8 100644
--- a/resources/www/oauth/main.scss
+++ b/resources/www/oauth/main.scss
@@ -1,10 +1,11 @@
 /********* Default CSS Oauth pages *********/
 
 /****************** Page *******************/
-
+@import '../_shared/styles/variables';
 html, body {
   background: #000000;
-  font-family: Verdana, sans-serif;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
   color: #FFFFFF;
 }
 
diff --git a/resources/www/prod/js/jquery.main-prod.js b/resources/www/prod/js/jquery.main-prod.js
index 13041f56a0..b07fc8aec2 100644
--- a/resources/www/prod/js/jquery.main-prod.js
+++ b/resources/www/prod/js/jquery.main-prod.js
@@ -324,7 +324,7 @@ function checkFilters(save) {
         search.dates.minbound = $('#ADVSRCH_DATE_ZONE input[name=date_min]', adv_box).val();
         search.dates.maxbound = $('#ADVSRCH_DATE_ZONE input[name=date_max]', adv_box).val();
         search.dates.field = $('#ADVSRCH_DATE_ZONE select[name=date_field]', adv_box).val();
-
+        console.log(search.dates.minbound, search.dates.maxbound, search.dates.field)
         if ($.trim(search.dates.minbound) || $.trim(search.dates.maxbound)) {
             danger = true;
             $('#ADVSRCH_DATE_ZONE', adv_box).addClass('danger');
@@ -1008,8 +1008,11 @@ function HueToRgb(m1, m2, hue) {
 $(document).ready(function () {
 
     $('input[name=search_type]').bind('click', function () {
+        console.log('search bind')
         var $this = $(this);
         var $record_types = $('#recordtype_sel');
+
+        console.log($this.hasClass('mode_type_reg'), $record_types)
         if ($this.hasClass('mode_type_reg')) {
             $record_types.css("visibility", "hidden");  // better than hide because does not change layout
             $record_types.prop("selectedIndex", 0);
diff --git a/resources/www/prod/skins/000000/skin-000000.scss b/resources/www/prod/skins/000000/skin-000000.scss
index 3b669d78fd..df3ec0a475 100644
--- a/resources/www/prod/skins/000000/skin-000000.scss
+++ b/resources/www/prod/skins/000000/skin-000000.scss
@@ -123,9 +123,9 @@ $tabsNavBg: #666666;
 $tabsNavBgActive: $mediumBackgroundColor;
 $contentLoaderImg: 'loader-white.gif';
 
-$btnBackground: #EAEAEA;
+$btnBackground: #f2f2f2;
 $btnBackgroundHighlight: #D6D6D6;
-$btnColor: #8e8e8e;
+$btnColor: #737373;
 $btnTextShadow: 0 -1px 0 rgba(0,0,0,0);
 
 $btnInverseBackground: #444444;
diff --git a/resources/www/prod/skins/959595/images/ui-bg_gloss-wave_20_111111_500x100.png b/resources/www/prod/skins/959595/images/ui-bg_gloss-wave_20_111111_500x100.png
deleted file mode 100644
index 60fcd81049..0000000000
Binary files a/resources/www/prod/skins/959595/images/ui-bg_gloss-wave_20_111111_500x100.png and /dev/null differ
diff --git a/resources/www/prod/skins/959595/skin-959595.scss b/resources/www/prod/skins/959595/skin-959595.scss
index 0ef337c4c9..c63b9f07ec 100644
--- a/resources/www/prod/skins/959595/skin-959595.scss
+++ b/resources/www/prod/skins/959595/skin-959595.scss
@@ -123,10 +123,17 @@ $tabsNavBg: #999999;
 $tabsNavBgActive: #B2B2B2; //#D9D9D9;
 $contentLoaderImg: 'loader-black.gif';
 
-$btnBackground: #444444; //#B9B9B9;
+/*$btnBackground: #444444; //#B9B9B9;
 $btnBackgroundHighlight: #393939;
 $btnColor: #AAAAAA;
-$btnTextShadow: 0 -1px 0 rgba(0,0,0,.25);
+$btnTextShadow: 0 -1px 0 rgba(0,0,0,.25);*/
+
+$btnBackground: #f2f2f2;
+$btnBackgroundHighlight: #D6D6D6;
+$btnColor: #737373;
+$btnTextShadow: 0 -1px 0 rgba(0,0,0,0);
+
+
 
 $btnInverseBackground: #B9B9B9;
 $btnInverseBackgroundHighlight: #A4A4A4;
diff --git a/resources/www/prod/skins/skin-shared.scss b/resources/www/prod/skins/skin-shared.scss
index 874c40be11..325ad2dcce 100644
--- a/resources/www/prod/skins/skin-shared.scss
+++ b/resources/www/prod/skins/skin-shared.scss
@@ -18,7 +18,7 @@ $basketsColor: #076882;
 ::-webkit-scrollbar-thumb {
   border-radius: 0;
   width: 3px;
-  background-color: $scrollBgColor;
+  background-color: lighten($scrollBgColor, 5);
 }
 
 ::-webkit-scrollbar-button {
@@ -51,10 +51,11 @@ legend {
   border: none;
 }
 
-
 body {
   color: $darkerTextColor;
   background-color: $darkerBackgroundColor;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
   position: absolute;
   top: 0;
   left: 0;
@@ -71,11 +72,9 @@ html {
   margin: 0;
   padding: 0;
   z-index: 1;
-}
-
-html, body {
-  font-size: 12px;
-  z-index: 1;
+  body {
+    z-index: 1;
+  }
 }
 
 a {
@@ -180,7 +179,7 @@ div#PREVIEWTITLEWRAPPER {
   cursor: pointer;
   color: rgb(204, 204, 204);
   font-weight: bold;
-  font-size: 12px;
+  font-size: $mediumFontSize;
   text-align: right;
   text-decoration: underline;
   height: 16px;
@@ -253,13 +252,13 @@ span.ww_winTitle {
 
 .cont_infos div {
   line-height: 20px;
-  font-size: 10px;
+  font-size: $smallFontSize;
   font-weight: bold;
 }
 
 .cont_infos span {
   cursor: pointer;
-  font-size: 10px;
+  font-size: $smallFontSize;
 }
 
 #SPANTITLE img {
@@ -426,7 +425,7 @@ H4 {
   border-width: 1px;
   border-radius: 4px 4px 4px 4px;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
-  font-size: 12px;
+  font-size: $xmediumFontSize;
   font-weight: bold;
   line-height: 14px;
   text-align: center;
@@ -505,6 +504,14 @@ H4 {
   margin: 3px 1px 3px 1px;
 }
 
+.close {
+  color: $textPrimaryColor;
+  // box-shadow: inset 1px 1px 2px 0px rgba($darkerBackgroundColor,0.7);
+  &:hover {
+    color: $textPrimaryColor;
+  }
+}
+
 .status-marker {
   line-height: 10px;
   border-radius: 50%;
diff --git a/resources/www/prod/skins/ui-components/_actions.scss b/resources/www/prod/skins/ui-components/_actions.scss
index 5a1976d12c..03a397ec6a 100644
--- a/resources/www/prod/skins/ui-components/_actions.scss
+++ b/resources/www/prod/skins/ui-components/_actions.scss
@@ -125,7 +125,7 @@
 
 .contextMenuTrigger {
   color: $textPrimaryColor;
-  font-size: 10px;
+  font-size: $smallFontSize;
   margin-left: 5px;
   line-height: 18px;
   vertical-align: middle;
diff --git a/resources/www/prod/skins/ui-components/_answers-tools.scss b/resources/www/prod/skins/ui-components/_answers-tools.scss
index d79083c36d..972a6bafe9 100644
--- a/resources/www/prod/skins/ui-components/_answers-tools.scss
+++ b/resources/www/prod/skins/ui-components/_answers-tools.scss
@@ -15,7 +15,7 @@
   margin-bottom: 0px;
   margin-top: 0px;
   background-color: $mediumBackgroundColor;
-  font-size:10px;
+  font-size: $smallFontSize;
   z-index:100;
   height:45px;
 }
@@ -38,7 +38,7 @@
 #idFrameT .tools .dropdownButton button.btn {
   height: 30px;
   font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 12px;
+  font-size: $mediumFontSize;
   -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);
@@ -84,7 +84,7 @@
 
 #idFrameT .tools .dropdown-menu a {
   padding: 3px 10px;
-  font-size: 12px;
+  font-size: $mediumFontSize;
   color: $answersToolsBtnColor;
   cursor: pointer;
 }
diff --git a/resources/www/prod/skins/ui-components/_answers.scss b/resources/www/prod/skins/ui-components/_answers.scss
index f76c6c832e..c42841fb5e 100644
--- a/resources/www/prod/skins/ui-components/_answers.scss
+++ b/resources/www/prod/skins/ui-components/_answers.scss
@@ -154,18 +154,6 @@ $answersInfoLabelColor: #949494 !default;
     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;
@@ -215,7 +203,7 @@ $answersInfoLabelColor: #949494 !default;
       font-weight: bold;
       font-size: 20px;
       .author {
-        font-size: 12px;
+        font-size: $mediumFontSize;
         font-weight: normal;
         margin-left: 15px;
       }
@@ -247,7 +235,7 @@ $answersInfoLabelColor: #949494 !default;
       height: 60px;
       text-align: center;
       font-weight: bold;
-      font-size: 13px;
+      font-size: $mediumFontSize;
       background-position: center bottom;
     }
     .contents {
diff --git a/resources/www/prod/skins/ui-components/_buttons.scss b/resources/www/prod/skins/ui-components/_buttons.scss
index a27d1a99cc..e66a223a1d 100644
--- a/resources/www/prod/skins/ui-components/_buttons.scss
+++ b/resources/www/prod/skins/ui-components/_buttons.scss
@@ -15,7 +15,7 @@
 
 .ui-dialog .btn {
   font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 12px;
+  font-size: $mediumFontSize;
   font-weight: bold;
 }
 
diff --git a/resources/www/prod/skins/ui-components/_diapo.scss b/resources/www/prod/skins/ui-components/_diapo.scss
index 361d65fd1a..65f2ef5db1 100644
--- a/resources/www/prod/skins/ui-components/_diapo.scss
+++ b/resources/www/prod/skins/ui-components/_diapo.scss
@@ -50,7 +50,8 @@ $diapoBorderColor: $darkerBorderColor !default;
 
   .bottom {
     position: absolute;
-    bottom: 0px;
+    bottom: 0;
+    z-index: 100;
   }
 
   div.title {
diff --git a/resources/www/prod/skins/ui-components/_jquery-ui.scss b/resources/www/prod/skins/ui-components/_jquery-ui.scss
index 16a6f9ee08..2d3940c7ff 100644
--- a/resources/www/prod/skins/ui-components/_jquery-ui.scss
+++ b/resources/www/prod/skins/ui-components/_jquery-ui.scss
@@ -32,7 +32,7 @@ $modalBackground: $darkerBackgroundColor !default;
       overflow: hidden;
       a {
         padding: 5px 8px;
-        font-size: 0.8em;
+        //font-size: 0.8em;
         font-weight: normal;
         color: $lightTextColor; // more contrasted  color
       }
@@ -84,7 +84,7 @@ $modalBackground: $darkerBackgroundColor !default;
 .ui-tabs li.ui-state-active a, .ui-state-active a:link, .ui-state-active a {
   color: $mediumTextActiveColor;
   font-weight: bold;
-  font-size: 0.8em;
+  //font-size: 0.8em;
 }
 
 .ui-state-active, .ui-widget-content .ui-state-active {
diff --git a/resources/www/prod/skins/ui-components/_modal-bridge.scss b/resources/www/prod/skins/ui-components/_modal-bridge.scss
index 90536ef43e..ed0d405d50 100644
--- a/resources/www/prod/skins/ui-components/_modal-bridge.scss
+++ b/resources/www/prod/skins/ui-components/_modal-bridge.scss
@@ -9,7 +9,6 @@
     *border: 1px solid $bridgeDropdownMenuBorder;
     a {
       padding: 3px 10px;
-      font-size: 12px;
       color: $bridgeDropdownMenuColor;
       cursor: pointer;
       &:hover {
@@ -196,7 +195,7 @@
 #dialog_publicator .element_menu .default_action,
 .element_menu .trigger {
   z-index: 444;
-  font-size: 13px;
+  font-size: $mediumFontSize;
   font-weight: normal;
   border-color: #666
 }
diff --git a/resources/www/prod/skins/ui-components/_modal-edit.scss b/resources/www/prod/skins/ui-components/_modal-edit.scss
index 9e6bb7fda3..2a0ffc5d6e 100644
--- a/resources/www/prod/skins/ui-components/_modal-edit.scss
+++ b/resources/www/prod/skins/ui-components/_modal-edit.scss
@@ -294,7 +294,8 @@
 #idFrameE {
   .ui-datepicker-inline {
     background-color: #111111;
-    background-image: url('#{$skinsImagesPath}ui-bg_gloss-wave_20_111111_500x100.png');
+    // /assets/prod/skins/{{cssfile}}/images/
+    background-image: url('#{$iconsPath}ui-bg_gloss-wave_20_111111_500x100.png');
     background-repeat: repeat-x;
     background-position: 50% top;
   }
diff --git a/resources/www/prod/skins/ui-components/_modal-preview.scss b/resources/www/prod/skins/ui-components/_modal-preview.scss
index 4d7c05dc2a..11c5e07e6d 100644
--- a/resources/www/prod/skins/ui-components/_modal-preview.scss
+++ b/resources/www/prod/skins/ui-components/_modal-preview.scss
@@ -76,7 +76,7 @@
 
 #PREVIEWOTHERSINNER li.title {
   font-weight: bold;
-  font-size: 13px;
+  font-size: $mediumFontSize;
   margin: 10px 10px 5px;
 }
 
diff --git a/resources/www/prod/skins/ui-components/_modal-publish.scss b/resources/www/prod/skins/ui-components/_modal-publish.scss
index 12eb899d2f..124c3012c4 100644
--- a/resources/www/prod/skins/ui-components/_modal-publish.scss
+++ b/resources/www/prod/skins/ui-components/_modal-publish.scss
@@ -14,7 +14,7 @@
         background-color: $darkerBackgroundColor;
         border: 1px solid $darkerBorderColor;
         color: $darkerTextColor;
-        font-size: 13px;
+        font-size: $mediumFontSize;
         cursor: pointer;
         &.odd {
           background-color: lighten($darkerBackgroundColor, 5);
diff --git a/resources/www/prod/skins/ui-components/_modal-push.scss b/resources/www/prod/skins/ui-components/_modal-push.scss
index f21c86a86a..eb53f5551d 100644
--- a/resources/www/prod/skins/ui-components/_modal-push.scss
+++ b/resources/www/prod/skins/ui-components/_modal-push.scss
@@ -12,11 +12,11 @@
 }
 
 .PushBox .LeftColumn ul {
-  margin:10px 0;
+  margin: 10px 0;
 }
 
 .PushBox .LeftColumn ul li img {
-  margin-right:5px;
+  margin-right: 5px;
   vertical-align: middle;
 }
 
@@ -43,90 +43,90 @@
 }
 
 .PushBox .user_content .badges {
-  top:50px;
-  overflow:auto;
-  height:auto;
-  bottom:50px;
-  left:20px;
-  right:20px;
+  top: 50px;
+  overflow: auto;
+  height: auto;
+  bottom: 50px;
+  left: 20px;
+  right: 20px;
 }
 
 .PushBox .user_content .badges .badge .deleter {
-  float:right;
+  float: right;
 
 }
 
 .PushBox .user_content .badges .badge {
-  width:230px;
-  height:80px;
-  margin:10px;
-  display:inline-block;
+  width: 230px;
+  height: 80px;
+  margin: 10px;
+  display: inline-block;
   background-color: #515150;
-  border:3px solid #515150;
-  padding:3px;
+  border: 3px solid #515150;
+  padding: 3px;
 }
 
 .PushBox .user_content .badges .badge.selected {
-  border:3px solid #EFEFEF;
+  border: 3px solid #EFEFEF;
 }
 
 .PushBox .user_content .badges .badge .toggles .status_on .toggle_off {
-  display:none;
+  display: none;
 }
 
 .PushBox .user_content .badges .badge .toggles .status_off .toggle_on {
-  display:none;
+  display: none;
 }
 
-.PushBox .user_content .badges .badge td{
+.PushBox .user_content .badges .badge td {
   vertical-align: top;
 }
 
-.PushBox .user_content .badges .badge td.toggle{
+.PushBox .user_content .badges .badge td.toggle {
   vertical-align: bottom;
 }
 
-.PushBox .user_content .badges .badge .icon{
-  width:80px;
-  background-color:#404040;
+.PushBox .user_content .badges .badge .icon {
+  width: 80px;
+  background-color: #404040;
 }
 
 .PushBox .user_content .badges .badge .infos {
-  padding-top:3px;
-  padding-left:5px;
+  padding-top: 3px;
+  padding-left: 5px;
 }
 
 .PushBox .user_content .badges .badge table {
-  width:95%;
+  width: 95%;
 }
 
 .PushBox .user_content .badges .badge .infos table {
-  height:75px;
+  height: 75px;
 }
 
 .PushBox .user_content .badges .badge .infos tr {
-  height:20px;
+  height: 20px;
 }
 
 .PushBox .user_content .badges .badge .infos tr.toggles {
-  height:25px;
-  text-align:center;
+  height: 25px;
+  text-align: center;
 }
 
 .PushBox .user_content .badges .badge .icon img {
-  margin:7px;
+  margin: 7px;
 }
 
 .PushBox .user_content .badges .badge .name {
-  font-weight:bold;
-  white-space:pre-line;
-  display:block;
-  font-size:12px;
+  font-weight: bold;
+  white-space: pre-line;
+  display: block;
+  font-size: $mediumFontSize;
 }
 
 .PushBox .user_content .badges .badge .subtite {
-  display:block;
-  font-size:10px;
+  display: block;
+  font-size: 10px;
 }
 
 .PushBox .user_content .header .options {
@@ -134,7 +134,7 @@
 }
 
 .PushBox .all-lists .lists {
-  overflow:auto;
+  overflow: auto;
 }
 
 .PushBox .LeftColumn .content ul.list li:nth-child(odd) {
@@ -162,19 +162,19 @@
 }
 
 .PushBox .lists .list {
-  padding:3px 0;
+  padding: 3px 0;
 }
 
 .PushBox .welcome {
   text-align: center;
   font-size: 16px;
   line-height: 18px;
-  margin : 20px 0;
+  margin: 20px 0;
 }
 
 .PushBox .welcome h1 {
   font-weight: bold;
-  margin:40px 0;
+  margin: 40px 0;
 }
 
 #list-editor-search-results {
@@ -182,14 +182,14 @@
 }
 
 #list-editor-search-results table td {
-  padding:1px 0;
-  overflow:hidden;
+  padding: 1px 0;
+  overflow: hidden;
 }
 
 #list-editor-search-results table tr {
   line-height: 24px;
   vertical-align: middle;
-  cursor:pointer;
+  cursor: pointer;
 }
 
 #list-editor-search-results table tr.odd {
@@ -197,70 +197,66 @@
 }
 
 #list-editor-search-results table tr.selected {
-  background-color:#D18827;
+  background-color: #D18827;
 }
 
-
 #list-editor-search-results table th.sortable span {
-  margin:0 5px;
+  margin: 0 5px;
 }
 
 #list-editor-search-results table th.sortable {
-  cursor:pointer;
+  cursor: pointer;
 }
 
 #list-editor-search-results table th.sortable.hover,
 #list-editor-search-results table th.sortable.sorted {
-  background-color:#F0AD30;
+  background-color: #F0AD30;
 }
 
 #list-editor-search-results table th.sortable span.ord_notifier {
-  display:none;
+  display: none;
 }
 
 #list-editor-search-results table th.sortable.sorted span.ord_notifier {
-  display:inline;
+  display: inline;
 }
 
-
-
 #ListShare table {
-  width:100%;
-  margin:5px;
-  background-color:#505050;
+  width: 100%;
+  margin: 5px;
+  background-color: #505050;
 }
 
 #ListManager .content.readonly .badge {
-  width:250px;
-  display:inline-block;
-  margin:5px;
+  width: 250px;
+  display: inline-block;
+  margin: 5px;
   background-color: #515150;
-  padding:5px;
+  padding: 5px;
 }
 
 #ListManager .content.readonly .badge .deleter {
-  float:right;
+  float: right;
 }
 
-
-#ListManager .content.readonly .badge table{
-  width:auto;
+#ListManager .content.readonly .badge table {
+  width: auto;
   table-layout: fixed;
 }
 
-#ListManager .content.readonly .badge .infos{
-  padding:2px;
+#ListManager .content.readonly .badge .infos {
+  padding: 2px;
 }
 
-#ListManager h1 span.title{
-  font-size:24px;
-  line-height:24px;
-  font-weight:bold;
-  vertical-align:middle;
+#ListManager h1 span.title {
+  font-size: 24px;
+  line-height: 24px;
+  font-weight: bold;
+  vertical-align: middle;
 }
 
 #PushBox .general_togglers li {
-  margin-top:5px;
+  margin-top: 5px;
 }
 
 #PushBox .general_togglers button {
@@ -269,12 +265,10 @@
   width: 100%;
 }
 
-
 #PushBox .general_togglers button .ui-button-text {
   font-weight: lighter;
 }
 
-
 #PushBox .content .list_saver {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -298,15 +292,15 @@
 }
 
 #ListManager .content .lists span.action {
-  display:block;
-  text-align:center;
+  display: block;
+  text-align: center;
   font-weight: bold;
-  width:100%;
+  width: 100%;
 }
 
 #recommanded-users {
-  margin-top:25px;
-  line-height:15px;
+  margin-top: 25px;
+  line-height: 15px;
 }
 
 #recommanded-users a:last-child {
@@ -315,8 +309,8 @@
 }
 
 #QuickAddUser table {
-  width:100%;
-  table-layout:auto;
+  width: 100%;
+  table-layout: auto;
 }
 
 #QuickAddUser table tr td {
diff --git a/resources/www/prod/skins/ui-components/_pagination.scss b/resources/www/prod/skins/ui-components/_pagination.scss
index fe2df0da81..68280317d4 100644
--- a/resources/www/prod/skins/ui-components/_pagination.scss
+++ b/resources/www/prod/skins/ui-components/_pagination.scss
@@ -8,7 +8,7 @@
   margin: 0 4px;
   background-color: #0077BC;
   border-radius: $defaultBorderRadius;
-  font-size: 12px;
+  font-size: $mediumFontSize;
   line-height: 14px;
   font-weight: bold;
   cursor: pointer;
diff --git a/resources/www/prod/skins/ui-components/_upload.scss b/resources/www/prod/skins/ui-components/_upload.scss
index ed29c28bc1..b3c3c6d74b 100644
--- a/resources/www/prod/skins/ui-components/_upload.scss
+++ b/resources/www/prod/skins/ui-components/_upload.scss
@@ -22,7 +22,7 @@
   h5 {
     margin-top: 20px;
     margin-bottom: 10px;
-    font-size: 13px;
+    font-size: $mediumFontSize;
     font-weight: bold;
     text-align: left;
   }
diff --git a/resources/www/prod/skins/ui-components/_workzone-baskets.scss b/resources/www/prod/skins/ui-components/_workzone-baskets.scss
index 81857392ad..f9d3f9a548 100644
--- a/resources/www/prod/skins/ui-components/_workzone-baskets.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-baskets.scss
@@ -35,7 +35,7 @@
       color: $workzoneBasketAlertDataColor;
       text-align: center;
       font-weight: bold;
-      font-size: 12px;
+      font-size: $mediumFontSize;
       display: none;
       z-index: 5000;
     }
@@ -79,7 +79,7 @@
         right: 40px;
         height: 16px;
         margin: 2px 0;
-        font-size: 12px;
+        font-size: $mediumFontSize;
       }
       .menu {
         text-align: right;
@@ -119,7 +119,7 @@
     }
     .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
       color: $textPrimaryActiveColor;
-      font-size: 1em;
+      //font-size: 1em;
     }
   }
 }
diff --git a/resources/www/prod/skins/ui-components/_workzone-proposals.scss b/resources/www/prod/skins/ui-components/_workzone-proposals.scss
index b1d8198c4f..6469e6552a 100644
--- a/resources/www/prod/skins/ui-components/_workzone-proposals.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-proposals.scss
@@ -14,7 +14,7 @@
     }
     li {
       line-height: 17px;
-      font-size: 13px;
+      font-size: $mediumFontSize;
     }
     &.fancytree-container {
       background-color: $mediumBackgroundColor;
@@ -50,7 +50,7 @@
     border-left: 4px solid $mediumBackgroundColor;
     border-bottom: 1px solid $mediumBorderColor;
     .fancytree-title {
-      font-size: 12px;
+      font-size: $xmediumFontSize;
       margin-left: 10px;
     }
     &:hover {
@@ -93,7 +93,7 @@
   }
 
   .fancytree-title {
-    font-size: 12px;
+    font-size: $xmediumFontSize;
     color: $proposalsTitle;
     background-color: transparent;
     border: 0px none transparent;
diff --git a/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss b/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
index 55ebd64755..f8db61e3d9 100644
--- a/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
@@ -54,7 +54,7 @@
 }
 
 #THPD_T_treeBox {
-  font-size: 0.85em;
+  font-size: $xmediumFontSize;
   overflow-x: hidden;
   overflow-y: hidden;
   > div {
diff --git a/resources/www/prod/skins/ui-components/_workzone.scss b/resources/www/prod/skins/ui-components/_workzone.scss
index a179935ad4..b96468550a 100644
--- a/resources/www/prod/skins/ui-components/_workzone.scss
+++ b/resources/www/prod/skins/ui-components/_workzone.scss
@@ -155,7 +155,7 @@
       display: inline;
       margin: 0 15px 0 0;
       float: left;
-      font-size: 11px;
+      font-size: $smallFontSize;
       color: $workzoneToolsLabelColor;
       line-height: 22px;
       vertical-align: middle;
diff --git a/resources/www/setup/styles/main.scss b/resources/www/setup/styles/main.scss
index c36b2c4b3b..e1e71f6c80 100644
--- a/resources/www/setup/styles/main.scss
+++ b/resources/www/setup/styles/main.scss
@@ -1,8 +1,8 @@
 $iconsPath: '../../../assets/common/images/icons/';
-
+@import '../../_shared/styles/variables';
 body, html {
-  font-family: Helvetica, Verdana, Arial, sans-serif;
-  font-size: 13px;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
   color: white;
   background-color: #000000;
 }
diff --git a/templates/web/overview.html.twig b/templates/web/overview.html.twig
index fcbcd54c2a..effe825767 100644
--- a/templates/web/overview.html.twig
+++ b/templates/web/overview.html.twig
@@ -8,40 +8,36 @@
 
 {% block stylesheet %}
         <style type="text/css">
-      html{
-
-                color:white;
-                background-color:#212121;
-        }
-
-
-            body{
-                font-family:Helvetica, Arial, sans-serif;
-                font-size:14px;
-        overflow:auto;
-        min-height:100%;
-        width:100%;
-        top:0;
-        left:0;
-        position:absolute;
+            body {
+                color: #FFFFFF;
+                background-color: #212121;
+                font-family: Helvetica, Arial, sans-serif;
+                font-size: 14px;
+                overflow: auto;
+                min-height: 100%;
+                width: 100%;
             }
-            h1{
-                font-size:26px;
-                font-weight:bold;
-                padding:50px 0 20px;
+
+            h1 {
+                font-size: 26px;
+                font-weight: bold;
+                padding: 50px 0 20px;
             }
-            #page{
-                width:860px;
-                background-color:#414141;
-                padding:0 20px;
-                margin:0 auto;
-                height:100%;
+            #page {
+                width: 860px;
+                background-color: #414141;
+                padding: 0 20px;
+                margin: 0 auto;
+                height: 100%;
+                position: relative !important;
             }
-      .preview .thumb_wrapper{
-        overflow:hidden;
-      }
-            .caption{
-                padding:50px 0 20px;
+
+            .preview .thumb_wrapper {
+                overflow: hidden;
+            }
+
+            .caption {
+                padding: 50px 0 20px;
             }
         </style>
 {% endblock %}
diff --git a/templates/web/prod/actions/edit_default.html.twig b/templates/web/prod/actions/edit_default.html.twig
index 858a8c1a2a..627f65aba8 100644
--- a/templates/web/prod/actions/edit_default.html.twig
+++ b/templates/web/prod/actions/edit_default.html.twig
@@ -78,7 +78,7 @@
         {% set i = field.get_id() %}
         {% if field.is_readonly() is empty %}
             <div class="edit_field" id="EditFieldBox_{{i}}" onclick="return(edit_mdwn_fld(event, {{i}}, '{{field.get_name()}}'));" >
-                <img id="editSGtri_{{i}}" style="visibility:hidden;" src="/assets/prod/images/{{cssfile}}/images/suggested.gif" />
+                <img id="editSGtri_{{i}}" style="visibility:hidden;" src="/assets/prod/skins/{{cssfile}}/images/suggested.gif" />
                 <img src="/assets/common/images/icons/info.gif" tooltipsrc="{{ path('prod_tooltip_metadata', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" class="fieldTips" alt=""/>
                 {% if field.get_dces_element %}
                     <img src="/assets/common/images/icons/dublincore.png" tooltipsrc="{{ path('prod_tooltip_dces', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" alt="{{ 'Ce champ est decrit comme un element DublinCore' | trans }}" class="DCESTips" />
diff --git a/templates/web/prod/results/record.html.twig b/templates/web/prod/results/record.html.twig
index f84706fb66..1749aa4010 100644
--- a/templates/web/prod/results/record.html.twig
+++ b/templates/web/prod/results/record.html.twig
@@ -69,7 +69,7 @@
                     <td style='text-align:right;width:{{l_width}}px;' valign='bottom'>
                         <a style="float:right;padding:0;cursor:pointer;" class="contextMenuTrigger" id="contextTrigger_{{record.id}}">
                             <img src="/assets/common/images/icons/contextMenuTrigger.png" height="10" />
-                            &#9660;
+                            <i class="icon-caret-down"></i>
                         </a>
                         <table cellspacing="0" cellpadding="0" style="display:none;" id="answerContext_{{record.id}}" class="contextMenu answercontextmenu">
                             <tbody>
diff --git a/templates/web/prod/templates/upload.html.twig b/templates/web/prod/templates/upload.html.twig
index 81d4029b58..255954119c 100644
--- a/templates/web/prod/templates/upload.html.twig
+++ b/templates/web/prod/templates/upload.html.twig
@@ -35,7 +35,7 @@
             </div>
             <p class="error alert-error"></p>
             <p class="success alert-success"></p>
-            <button type="button" class="remove-element btn btn-inverse btn-mini"><%= language.cancel %></button>
+            <button type="button" class="remove-element btn btn-mini"><%= language.cancel %></button>
         </div>
     </div>
 </li>