rework css

55 files changed, 1461 insertions, 2068 deletions

diff --git a/server/sonar-web/Gruntfile.coffee b/server/sonar-web/Gruntfile.coffee
index 739811baabc..87c48f34b3c 100644
--- a/server/sonar-web/Gruntfile.coffee
+++ b/server/sonar-web/Gruntfile.coffee
@@ -9,18 +9,16 @@ module.exports = (grunt) ->
       dev:
         files:
           '<%= grunt.option("assetsDir") || pkg.assets %>css/sonar.css': [
-            '<%= pkg.sources %>less/init.less'
             '<%= pkg.sources %>less/jquery-ui.less'
             '<%= pkg.sources %>less/select2.less'
             '<%= pkg.sources %>less/select2-sonar.less'
-            '<%= pkg.sources %>less/layout.less'
+
+            '<%= pkg.sources %>less/init.less'
+            '<%= pkg.sources %>less/components.less'
+            '<%= pkg.sources %>less/pages.less'
+
             '<%= pkg.sources %>less/style.less'
-            '<%= pkg.sources %>less/icons.less'
-            '<%= pkg.sources %>less/ui.less'
-            '<%= pkg.sources %>less/sonar-colorizer.less'
-            '<%= pkg.sources %>less/dashboard.less'
-            '<%= pkg.sources %>less/select-list.less'
-            '<%= pkg.sources %>less/navigator.less'
+
             '<%= pkg.sources %>less/*.less'
           ]
       build:
@@ -28,18 +26,16 @@ module.exports = (grunt) ->
           cleancss: true
         files:
           '<%= grunt.option("assetsDir") || pkg.assets %>css/sonar.css': [
-            '<%= pkg.sources %>less/init.less'
             '<%= pkg.sources %>less/jquery-ui.less'
             '<%= pkg.sources %>less/select2.less'
             '<%= pkg.sources %>less/select2-sonar.less'
-            '<%= pkg.sources %>less/layout.less'
+
+            '<%= pkg.sources %>less/init.less'
+            '<%= pkg.sources %>less/components.less'
+            '<%= pkg.sources %>less/pages.less'
+
             '<%= pkg.sources %>less/style.less'
-            '<%= pkg.sources %>less/icons.less'
-            '<%= pkg.sources %>less/ui.less'
-            '<%= pkg.sources %>less/sonar-colorizer.less'
-            '<%= pkg.sources %>less/dashboard.less'
-            '<%= pkg.sources %>less/select-list.less'
-            '<%= pkg.sources %>less/navigator.less'
+
             '<%= pkg.sources %>less/*.less'
           ]
 
diff --git a/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs b/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs
index a3a80218b5c..d368d724dd1 100644
--- a/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs
+++ b/server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs
@@ -1,5 +1,11 @@
 <div class="container">
-  <ul class="nav navbar-nav">
+  <ul class="nav navbar-nav nav-crumbs">
+      <li>
+        <a href="{{link '/settings'}}">{{t 'layout.settings'}}</a>
+      </li>
+  </ul>
+
+  <ul class="nav navbar-nav nav-tabs">
     <li class="dropdown">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         {{t 'sidebar.project_settings'}}&nbsp;<i class="icon-dropdown"></i>
@@ -39,9 +45,6 @@
         <li>
           <a href="{{link '/roles/projects'}}">{{t 'roles.page'}}</a>
         </li>
-        <li>
-          <a href="{{link '/admin_dashboards/index'}}">{{t 'default_dashboards.page'}}</a>
-        </li>
       </ul>
     </li>
 
diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js
index 8414937c221..a9ac2f9e22d 100644
--- a/server/sonar-web/src/main/js/nav/app.js
+++ b/server/sonar-web/src/main/js/nav/app.js
@@ -41,7 +41,7 @@ define([
 
   App.addInitializer(function () {
     var navHeight = $('.navbar-global').outerHeight() + $('.navbar-context').outerHeight();
-    $(document.body).css('padding-top', navHeight).data('top-offset', navHeight);
+    $('.page-wrapper').css('padding-top', navHeight).data('top-offset', navHeight);
   });
 
   App.addInitializer(function () {
diff --git a/server/sonar-web/src/main/less/component-viewer-source-colorizer.less b/server/sonar-web/src/main/less/component-viewer-source-colorizer.less
deleted file mode 100644
index 9c5d4027839..00000000000
--- a/server/sonar-web/src/main/less/component-viewer-source-colorizer.less
+++ /dev/null
@@ -1,29 +0,0 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
-
-/* constants */
-.code .c {
-  font-style: normal;
-}
-
-/* javadoc */
-.code .j {
-  font-style: normal;
-}
-
-/* keyword */
-.code .k {
-  color: saturate(@darkBlue, 50%);
-  font-weight: 600;
-}
-
-/* string */
-.code .s {
-  color: saturate(@red, 0%);
-  font-weight: normal;
-}
-
-/* preprocessing directive */
-.code .p {
-  font-weight: normal;
-}
diff --git a/server/sonar-web/src/main/less/components.less b/server/sonar-web/src/main/less/components.less
index 2e8bcc3eb72..028babb53a9 100644
--- a/server/sonar-web/src/main/less/components.less
+++ b/server/sonar-web/src/main/less/components.less
@@ -1,3 +1,4 @@
+@import "components/ui";
 @import "components/source";
 @import "components/facets";
 @import "components/modals";
@@ -11,3 +12,10 @@
 @import "components/menu";
 @import "components/page";
 @import "components/component-name";
+@import "components/component-viewer";
+@import "components/navbar";
+@import "components/navigator";
+@import "components/select-list";
+@import "components/login";
+@import "components/graphics";
+@import "components/bubble-popup";
diff --git a/server/sonar-web/src/main/less/components/bubble-popup.less b/server/sonar-web/src/main/less/components/bubble-popup.less
new file mode 100644
index 00000000000..36c7246eacd
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/bubble-popup.less
@@ -0,0 +1,136 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+@popupArrowSize: 8px;
+
+.bubble-popup {
+  position: absolute;
+  z-index: 100;
+  margin-top: -16px;
+  margin-left: @popupArrowSize;
+  padding: 10px;
+  border: 1px solid @barBorderColor;
+  border-radius: 3px;
+  .box-sizing(border-box);
+  background-color: @white;
+  box-shadow: @defaultShadow;
+}
+
+.bubble-popup-arrow,
+.bubble-popup-arrow:after {
+  position: absolute;
+  display: block;
+  .size(0, 0);
+  border: @popupArrowSize solid transparent;
+}
+
+.bubble-popup-arrow {
+  top: 15px;
+  left: -@popupArrowSize;
+  border-left-width: 0;
+  border-right-color: @barBorderColor;
+
+  &:after {
+    content: " ";
+    left: 1px;
+    bottom: -@popupArrowSize;
+    border-left-width: 0;
+    border-right-color: @white;
+  }
+}
+
+.bubble-popup-bottom {
+  margin-top: @popupArrowSize;
+  margin-left: -16px;
+
+  .bubble-popup-arrow {
+    top: -@popupArrowSize;
+    left: 15px;
+    border-left-width: @popupArrowSize;
+    border-top-width: 0;
+    border-right-color: transparent;
+    border-bottom-color: @barBorderColor;
+
+    &:after {
+      left: -@popupArrowSize;
+      bottom: -@popupArrowSize - 1px;
+      border-left-width: @popupArrowSize;
+      border-top-width: 0;
+      border-right-color: transparent;
+      border-bottom-color: @white;
+    }
+  }
+}
+
+.bubble-popup-bottom-right {
+  .bubble-popup-bottom;
+  margin-left: 0;
+  margin-right: -8px;
+
+  .bubble-popup-arrow {
+    left: auto;
+    right: 15px;
+  }
+}
+
+.bubble-popup-container {
+  max-width: 560px;
+  max-height: 300px;
+  padding-right: 30px;
+  overflow: auto;
+}
+
+.bubble-popup-title {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+
+.bubble-popup-section {
+  width: 450px;
+  padding-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.fluid {
+    width: auto;
+    max-width: 450px;
+  }
+}
+
+.bubble-popup-section + .bubble-popup-section,
+.bubble-popup-section + .bubble-popup-title {
+  margin-top: 10px;
+}
+
+.bubble-popup-list {
+  margin-top: 5px;
+
+  & > li { padding: 2px 0; }
+}
+
+
+@overlayPopupMargin: 20px;
+@overlayPopupPadding: 40px;
+
+.overlay-popup {
+  position: fixed;
+  z-index: 1200;
+  top: @overlayPopupMargin;
+  bottom: @overlayPopupMargin;
+  left: @overlayPopupMargin;
+  right: @overlayPopupMargin;
+  padding: @overlayPopupPadding @overlayPopupPadding @overlayPopupPadding + 30px;
+  background-color: #fff;
+  overflow: scroll;
+  box-shadow: 0 0 20px 15px rgba(0, 0, 0, 0.5);
+
+  .modal-foot {
+    position: fixed;
+    z-index: 1201;
+    bottom: @overlayPopupMargin;
+    left: @overlayPopupMargin;
+    right: @overlayPopupMargin;
+  }
+}
diff --git a/server/sonar-web/src/main/less/components/component-name.less b/server/sonar-web/src/main/less/components/component-name.less
index 9621942992d..78549e66171 100644
--- a/server/sonar-web/src/main/less/components/component-name.less
+++ b/server/sonar-web/src/main/less/components/component-name.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 .component-name {
   .clearfix;
diff --git a/server/sonar-web/src/main/less/component-viewer.less b/server/sonar-web/src/main/less/components/component-viewer.less
index 71958756200..ad39f12a0ce 100644
--- a/server/sonar-web/src/main/less/component-viewer.less
+++ b/server/sonar-web/src/main/less/components/component-viewer.less
@@ -1,5 +1,5 @@
-@import (reference) "variables";
-@import (reference) "mixins";
+@import (reference) "../variables";
+@import (reference) "../mixins";
 @import (reference) "ui";
 
 @headerHeight: 60px;
diff --git a/server/sonar-web/src/main/less/components/dropdowns.less b/server/sonar-web/src/main/less/components/dropdowns.less
index 4b75992a0ab..0e5cf6501c3 100644
--- a/server/sonar-web/src/main/less/components/dropdowns.less
+++ b/server/sonar-web/src/main/less/components/dropdowns.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 
 .dropdown {
diff --git a/server/sonar-web/src/main/less/components/graphics.less b/server/sonar-web/src/main/less/components/graphics.less
new file mode 100644
index 00000000000..f5604148bf0
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/graphics.less
@@ -0,0 +1,235 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+.sonar-d3 {
+
+}
+
+.sonar-d3 .axis path {
+  fill: none;
+  stroke: #444;
+}
+
+.sonar-d3 .tick line {
+  stroke: #444;
+}
+
+.sonar-d3 .tick text {
+  fill: #444;
+}
+
+.sonar-d3 .plot {
+  transition: all 0.2s ease;
+}
+
+.sonar-d3 .plot:hover .arc,
+.sonar-d3 .plot.hover .arc {
+  opacity: 0.4;
+}
+
+.sonar-d3 .plot .arc:hover,
+.sonar-d3 .plot .arc.hover {
+  opacity: 1;
+}
+
+.sonar-d3 .plot .line {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.sonar-d3 .plot .line-marker {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 2;
+  opacity: 0;
+}
+
+.sonar-d3 .plot .scanner {
+  stroke: #000;
+  opacity: 0.25;
+}
+
+.sonar-d3 .arc,
+.sonar-d3 .bar rect {
+  cursor: pointer;
+  stroke: #fff;
+  stroke-width: 1px;
+  transition: all 0.2s ease;
+}
+
+.sonar-d3 .bar,
+.sonar-d3 .bar .legend-text,
+.sonar-d3 .pie-legend,
+.sonar-d3 .pie-legend .legend-text {
+  cursor: pointer;
+}
+
+.sonar-d3 .legend {
+
+}
+
+.sonar-d3 .legend-bullet {
+  transition: all 0.2s ease;
+}
+
+.sonar-d3 .legend-text {
+  font-size: 12px;
+  cursor: default;
+}
+
+.sonar-d3 .legend-active .legend-bullet {
+  -webkit-transform: scale(1.4);
+  -webkit-transform-origin: center;
+}
+
+.sonar-d3 .legend-html {
+  margin-bottom: 10px;
+  color: @secondFontColor;
+
+  .legend-text + .legend-text { margin-left: 15px; }
+  .legend-text-main { font-weight: 500; }
+}
+
+.sonar-d3 .details-color-indicator {
+  fill: #fff;
+  transition: fill 0.2s ease;
+}
+
+.sonar-d3 .details-metric {
+  font-size: 12px;
+}
+
+.sonar-d3 .details-metric-main {
+  font-weight: bold;
+}
+
+.sonar-d3 .info {
+
+}
+
+.sonar-d3 .info-text {
+  font-size: 13px;
+}
+
+.sonar-d3 .info-text-bold {
+  font-weight: bold;
+}
+
+.sonar-d3 .info-text-small {
+  font-size: 12px;
+}
+
+.sonar-d3 .event-tick {
+  fill: none;
+  stroke: #000;
+  stroke-width: 1px;
+  transition: all 0.3s ease;
+}
+
+.sonar-d3.cloud-widget {
+  text-align: center;
+}
+
+.sonar-d3 .cloud-word {
+  display: inline-block;
+  vertical-align: baseline;
+  white-space: nowrap;
+  margin-right: 14px;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+
+  &:hover {
+    border-bottom: 1px solid;
+  }
+}
+
+.max-results-reached-message {
+  font-size: 12px;
+}
+
+div.max-results-reached-message {
+  margin-top: 10px;
+  color: #777;
+  text-align: center;
+}
+
+text.max-results-reached-message {
+  fill: #777;
+}
+
+.sonar-d3 .treemap-container {
+  position: relative;
+}
+
+.sonar-d3 .treemap-cell {
+  position: absolute;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  .box-sizing(border-box);
+  text-align: center;
+}
+
+.sonar-d3 .treemap-cell-drilldown {
+  cursor: pointer;
+}
+
+.sonar-d3 .treemap-inner {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.2;
+  padding: 5px;
+  .box-sizing(border-box);
+  color: #fff;
+  font-weight: 300;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sonar-d3 .treemap-link {
+  position: absolute;
+  z-index: 2;
+  top: 5px; right: 5px;
+  line-height: @iconSmallFontSize;
+  color: #fff;
+  opacity: 0.5;
+  .link-no-underline;
+
+  &:hover { opacity: 1; }
+}
+
+.sonar-d3 .treemap-link i,
+.sonar-d3 .treemap-link i:before {
+  vertical-align: top;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.sonar-d3 .treemap-cell-small {
+  .treemap-inner { display: none; }
+}
+
+.sonar-d3 .treemap-cell-very-small {
+  .treemap-inner { display: none; }
+  .treemap-link { display: none; }
+}
+
+.sonar-d3 .treemap-breadcrumbs {
+  margin-top: 10px;
+  padding-top: 7px;
+  border-top: 1px solid #E6E6E6;
+}
+
+.sonar-d3 .treemap-breadcrumbs-item {
+  color: @secondFontColor;
+
+  & > [class^="icon-qualifier-"] { margin-right: 4px; }
+}
+
+.sonar-d3 .treemap-breadcrumbs-item + .treemap-breadcrumbs-item {
+  margin-left: 10px;
+
+  & > .icon-chevron-right { margin-right: 10px; }
+}
diff --git a/server/sonar-web/src/main/less/components/issues.less b/server/sonar-web/src/main/less/components/issues.less
index b4a0ec67399..8177f088984 100644
--- a/server/sonar-web/src/main/less/components/issues.less
+++ b/server/sonar-web/src/main/less/components/issues.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 @import (reference) "../components/typography";
 
 @leftPadding: 10px;
diff --git a/server/sonar-web/src/main/less/components/login.less b/server/sonar-web/src/main/less/components/login.less
new file mode 100644
index 00000000000..067d2a34a8c
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/login.less
@@ -0,0 +1,29 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+#login_form {
+  border: 2px solid #4b9fd5;
+  width: 230px;
+  text-align: left;
+  background-color: #CAE3F2;
+  padding: 15px 20px;
+}
+
+#login_form h4 {
+  text-align: left;
+  font-weight: bold;
+  color: #036;
+}
+
+#login_form p {
+  padding: 3px 0 10px;
+}
+
+#login_form a {
+  border-bottom-color: @blue;
+}
+
+#login_form .desc {
+  font-size: 85%;
+  font-weight: normal;
+}
diff --git a/server/sonar-web/src/main/less/components/measures.less b/server/sonar-web/src/main/less/components/measures.less
index 9ee9d75a375..a49a2c31004 100644
--- a/server/sonar-web/src/main/less/components/measures.less
+++ b/server/sonar-web/src/main/less/components/measures.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 
 .measures {
diff --git a/server/sonar-web/src/main/less/components/menu.less b/server/sonar-web/src/main/less/components/menu.less
index 0b78b90f030..9750de742b9 100644
--- a/server/sonar-web/src/main/less/components/menu.less
+++ b/server/sonar-web/src/main/less/components/menu.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 .menu {
   min-width: 160px;
diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
index 14d7504da6d..2c8da63e581 100644
--- a/server/sonar-web/src/main/less/navbar.less
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -1,5 +1,5 @@
-@import (reference) "mixins";
-@import (reference) "variables";
+@import (reference) "../mixins";
+@import (reference) "../variables";
 @import (reference) "ui";
 
 @navbarGlobalBackground: #262626;
diff --git a/server/sonar-web/src/main/less/navigator.less b/server/sonar-web/src/main/less/components/navigator.less
index ddb1478deaa..26839743527 100644
--- a/server/sonar-web/src/main/less/navigator.less
+++ b/server/sonar-web/src/main/less/components/navigator.less
@@ -1,5 +1,5 @@
-@import (reference) "mixins";
-@import (reference) "variables";
+@import (reference) "../mixins";
+@import (reference) "../variables";
 
 @import "navigator/config";
 @import "navigator/base";
diff --git a/server/sonar-web/src/main/less/navigator/base.less b/server/sonar-web/src/main/less/components/navigator/base.less
index cad9782ab81..9b448f74e4b 100644
--- a/server/sonar-web/src/main/less/navigator/base.less
+++ b/server/sonar-web/src/main/less/components/navigator/base.less
@@ -1,7 +1,6 @@
-@import "../variables";
-@import "../mixins";
-
-@import "config";
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
 
 
 .navigator { }
diff --git a/server/sonar-web/src/main/less/navigator/config.less b/server/sonar-web/src/main/less/components/navigator/config.less
index a973cbdebb8..10c6ce5e674 100644
--- a/server/sonar-web/src/main/less/navigator/config.less
+++ b/server/sonar-web/src/main/less/components/navigator/config.less
@@ -1,4 +1,4 @@
-@import "../variables";
+@import (reference) "../../variables";
 
 // Layout
 @navigatorTopOffset: 80px;
diff --git a/server/sonar-web/src/main/less/navigator/filters.less b/server/sonar-web/src/main/less/components/navigator/filters.less
index f56739867ef..7c56f015d96 100644
--- a/server/sonar-web/src/main/less/navigator/filters.less
+++ b/server/sonar-web/src/main/less/components/navigator/filters.less
@@ -1,7 +1,6 @@
-@import "../variables";
-@import "../mixins";
-
-@import "config";
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
 
 
 .navigator-filters {
diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less
index 66b2f43a2f9..207bbc31737 100644
--- a/server/sonar-web/src/main/less/components/page.less
+++ b/server/sonar-web/src/main/less/components/page.less
@@ -1,21 +1,29 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "../init/links";
+
 
 .page {
-  padding: 10px 0;
+  position: relative;
+  padding: 10px;
+}
+
+.page-container {
+  min-width: 980px;
+}
+
+.page-wrapper {
+  min-height: ~"calc(100vh - @{pageFooterHeight})";
+  .box-sizing(border-box);
 }
 
-.page-header,
-// deprecated
-.page_title {
+.page-header {
   .clearfix;
   margin-bottom: 10px;
 }
 
 .page-title {
   float: left;
-  font-size: @mediumFontSize !important;
   line-height: @formControlHeight;
 }
 
@@ -29,3 +37,19 @@
   font-size: @smallFontSize;
   line-height: 1.5;
 }
+
+.page-footer {
+  min-height: @pageFooterHeight;
+  padding: 10px;
+  line-height: 1.5;
+  border-top: 1px solid @barBorderColor;
+  .box-sizing(border-box);
+  background-color: @barBackgroundColor;
+  color: @baseFontColorLight;
+  font-size: @smallFontSize;
+  text-align: center;
+
+  a {
+    .link-base-color;
+  }
+}
diff --git a/server/sonar-web/src/main/less/components/rules.less b/server/sonar-web/src/main/less/components/rules.less
index c4314d0c84c..4532f47ba93 100644
--- a/server/sonar-web/src/main/less/components/rules.less
+++ b/server/sonar-web/src/main/less/components/rules.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @leftPadding: 10px;
 @rightPadding: 10px;
diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index 3503922f9ba..5b7d664110f 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -1,11 +1,10 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @sideWidth: 300px;
 
 .search-navigator {
-  margin: 0 -10px;
 
   &.sticky {
 
@@ -343,7 +342,6 @@
   margin-right: 4px;
   border-bottom: none;
   color: @baseFontColor;
-  font-size: @iconSmallFontSize;
 }
 
 .search-navigator-filters-actions {
diff --git a/server/sonar-web/src/main/less/select-list.less b/server/sonar-web/src/main/less/components/select-list.less
index e03bd93ba59..9cfd6ed019d 100644
--- a/server/sonar-web/src/main/less/select-list.less
+++ b/server/sonar-web/src/main/less/components/select-list.less
@@ -1,5 +1,5 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
+@import (reference) '../variables';
+@import (reference) '../mixins';
 
 .select-list-container {
   min-width: 500px;
diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index 80928d14e7d..361634ac603 100644
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @lineHeight: 18px;
 @lineWithIssuesBackground: #ffeaea;
diff --git a/server/sonar-web/src/main/less/components/tooltips.less b/server/sonar-web/src/main/less/components/tooltips.less
index 271f13d8804..99574aefe7f 100644
--- a/server/sonar-web/src/main/less/components/tooltips.less
+++ b/server/sonar-web/src/main/less/components/tooltips.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @background: #475760;
 
diff --git a/server/sonar-web/src/main/less/components/typography.less b/server/sonar-web/src/main/less/components/typography.less
index 24d960ff196..bdc8903a45c 100644
--- a/server/sonar-web/src/main/less/components/typography.less
+++ b/server/sonar-web/src/main/less/components/typography.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 .formatted() {
   max-width: 1020px;
diff --git a/server/sonar-web/src/main/less/ui.less b/server/sonar-web/src/main/less/components/ui.less
index bb375e2946a..311a2ca8328 100644
--- a/server/sonar-web/src/main/less/ui.less
+++ b/server/sonar-web/src/main/less/components/ui.less
@@ -1,5 +1,5 @@
-@import (reference) "variables";
-@import (reference) "mixins";
+@import (reference) "../variables";
+@import (reference) "../mixins";
 
 
 /*
@@ -94,18 +94,6 @@
   }
 }
 
-.link-no-underline {
-  border-bottom: none;
-}
-
-.link-with-icon {
-  .link-no-underline;
-
-  & > .ul {
-    border-bottom: 1px solid @lightBlue;
-  }
-}
-
 a.active-link {
   border-bottom: none;
   font-weight: 500;
@@ -453,7 +441,7 @@ input[type=button] {
   padding: 2px 0;
 
   a {
-    color: @baseLightFontColor;
+    color: @baseFontColorLight;
 
     &:hover, &:focus {
       color: @blue !important;
@@ -490,7 +478,7 @@ input[type=button] {
     padding-bottom: 2px;
     margin-right: 2px;
     border-bottom: 3px solid transparent;
-    color: @baseLightFontColor;
+    color: @baseFontColorLight;
 
     &:hover {
       border-color: @blue;
diff --git a/server/sonar-web/src/main/less/deprecated.less b/server/sonar-web/src/main/less/deprecated.less
new file mode 100644
index 00000000000..7450ef486f0
--- /dev/null
+++ b/server/sonar-web/src/main/less/deprecated.less
@@ -0,0 +1,356 @@
+@import (reference) "variables";
+@import (reference) "mixins";
+@import (reference) "components/ui";
+
+// deprecated since 5.1
+
+// use `.page-title` instead
+.page_title {
+  .clearfix;
+  margin-bottom: 10px;
+}
+
+.loading {
+  background: url("../images/loading.gif") no-repeat 4px 2px;
+  color: #444;
+  padding: 3px 25px;
+}
+
+// use `.vertical-right` instead
+.right {
+  text-align: right;
+}
+
+// use `.vertical-left` instead
+.left {
+  text-align: left;
+}
+
+// use `.text-center` instead
+.center {
+  text-align: center;
+}
+
+// use `.vertical-top` instead
+.top {
+  vertical-align: top;
+}
+
+// use `.vertical-bottom` instead
+.bottom {
+  vertical-align: bottom;
+}
+
+// use `.vertical-middle` instead
+.middle {
+  vertical-align: middle;
+}
+
+.clear {
+  height: 0;
+  clear: both;
+}
+
+// use `.note` instead
+.subtitle {
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+}
+
+.crossout {
+  text-decoration: line-through;
+}
+
+.notes {
+  color: #777;
+  font-size: 11px;
+  margin-bottom: 10px;
+  background-color: #EFEFEF;
+  border: 1px solid #cdcdcd;
+  line-height: 16px;
+  height: 16px;
+  padding: 2px 4px;
+}
+
+.warning, .modal-warning {
+  border: solid 1px #FFD324;
+  background-color: #FFF6BF;
+  color: #514721;
+  margin: 0 0 4px;
+  padding: 4px;
+}
+
+.error, .modal-error {
+  border: 1px solid red;
+  background-color: #FF5252;
+  color: #eee;
+  margin: 0 0 4px;
+  padding: 4px;
+
+  a {
+    color: #eee;
+  }
+}
+
+.notice, .modal-notice {
+  border: 1px solid #9c9;
+  background-color: #e2f9e3;
+  color: #060;
+  margin: 0 0 4px;
+  padding: 4px;
+}
+
+.info {
+  background-color: #CAE3F2;
+  padding: 5px;
+  border: 1px solid #4B9FD5;
+}
+
+div.operations {
+  float: right;
+  margin: 0;
+}
+
+ul.operations {
+  float: right;
+  height: 20px;
+  line-height: 20px;
+  list-style-type: none;
+  margin: 0;
+  background-color: #EFEFEF;
+  border: 1px solid #cdcdcd;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+ul.operations li {
+  float: left;
+  margin: 0;
+  padding: 0 8px;
+  font-size: 85%;
+  border-right: 1px solid #cdcdcd;
+}
+
+ul.operations li.selected {
+  background-color: #d4d4d4;
+}
+
+ul.operations li.last {
+  border-right-width: 0;
+}
+
+ul.operations li a {
+  .base-link;
+  color: #555;
+}
+
+ul.operations li img {
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+th.operations, td.operations {
+  text-align: right;
+}
+
+.doc h2 {
+  margin-top: 8px;
+}
+
+.doc p {
+  margin: 8px 0;
+}
+
+.doc pre, pre.code {
+  color: #777;
+  background-color: #EFEFEF;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px dashed #777;
+  font-size: 93%;
+  line-height: 1.5em;
+}
+
+.doc li {
+  list-style: disc outside;
+  padding: 2px;
+}
+
+.doc ul {
+  list-style: none outside;
+  padding-left: 30px;
+}
+
+.rulename, .rulename a {
+  color: #444;
+  font-weight: 500;
+}
+
+.rulename a:hover {
+  text-decoration: underline;
+}
+
+.source_title {
+  padding: 10px 5px;
+}
+
+.source_title span.h1 {
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.source_links {
+  font-size: 11px;
+}
+
+.global_violations {
+  width: 100%;
+}
+
+.global_violations > tbody > tr > td {
+  padding-bottom: 10px;
+}
+
+.global_violations td {
+  padding: 3px 0;
+}
+
+.global_violations td img, #source_title img {
+  vertical-align: text-bottom;
+}
+
+.tab_header {
+  padding: 5px 10px;
+}
+
+.tab_header td {
+  padding-right: 7px;
+}
+
+.tab_header td.name {
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tab_header td.value {
+  text-align: right;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.extension-close {
+  position: absolute;
+  top: 5px; right: 10px;
+}
+
+.source_options {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid #ddd;
+  font-size: 85%;
+}
+
+.source_options td {
+  background: url("../images/sep12.png") no-repeat scroll 0 50% transparent;
+  padding: 0 10px;
+}
+
+.source_options td.first {
+  background: none;
+  padding: 0 10px 0 0;
+}
+
+div.autocomplete {
+  position: absolute;
+  width: 600px;
+  right: 10px;
+  top: 10px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 0;
+  color: #111;
+  line-height: 18px;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+  z-index: 999999;
+}
+
+div.autocomplete ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+div.autocomplete ul li {
+  list-style-type: none;
+  display: block;
+  margin: 0;
+  padding: 3px 5px;
+  cursor: pointer;
+  color: #333;
+  line-height: 18px;
+  height: 18px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+div.autocomplete div.q {
+  font-size: 93%;
+  color: #777;
+  width: 90px;
+  text-align: right;
+  margin-right: 5px;
+  display: inline-block;
+
+  /* For IE 7 */
+  zoom: 1;
+  *display: inline;
+}
+
+div.autocomplete ul li img {
+  vertical-align: middle;
+}
+
+div.autocomplete ul li.selected {
+  background-color: @lightBlue;
+}
+
+div.autocomplete strong {
+  font-weight: bold;
+}
+
+div.autocompleteNote {
+  color: #777;
+  font-size: 85%;
+  background-color: #EFEFEF;
+  border-top: 1px solid #CCC;
+  padding: 1px 10px;
+}
+
+.color_OK {
+  border: 2px solid #85bb43 !important;
+  color: #85bb43 !important;
+}
+
+.color_WARN {
+  border: 2px solid #f90 !important;
+  color: #f90 !important;
+}
+
+.color_ERROR {
+  border: 2px solid #d4333f !important;
+  color: #d4333f !important;
+}
+
+.admin-page-title {
+  margin-bottom: 0;
+}
+
+.admin-page-description {
+  font-size: 85%;
+  font-weight: normal;
+  margin-bottom: 25px;
+}
diff --git a/server/sonar-web/src/main/less/init.less b/server/sonar-web/src/main/less/init.less
index cb4dcc614a5..b2efe611c2d 100644
--- a/server/sonar-web/src/main/less/init.less
+++ b/server/sonar-web/src/main/less/init.less
@@ -1,165 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-
-html {
-  color: @baseFontColor;
-  background: #fff;
-}
-
-body {
-  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: @baseFontSize;
-  line-height: 1.231;
-}
-
-* {
-  margin: 0;
-  padding: 0
-}
-
-a {
-  border-bottom: 1px solid @lightBlue;
-  color: @darkBlue;
-  cursor: pointer;
-  outline: none;
-  text-decoration: none;
-  .trans;
-
-  &:hover {
-    color: @blue;
-  }
-
-  &:active, &:focus {
-    color: @darkBlue;
-  }
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-fieldset, img {
-  border: 0;
-}
-
-address, caption, cite, code, dfn, em, strong, th, var {
-  font-style: normal;
-  font-weight: normal;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-caption, th {
-  text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
-
-q:before, q:after {
-  content: '';
-}
-
-abbr, acronym {
-  border: 0;
-  font-variant: normal;
-}
-
-sup {
-  vertical-align: text-top;
-}
-
-sub {
-  vertical-align: text-bottom;
-}
-
-input, textarea, select {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-select, input, button, textarea {
-  font-size: inherit;
-  font-family: inherit;
-}
-
-/*Remove button padding in FF*/
-select::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-legend {
-  color: #000
-}
-
-pre, code, kbd, samp, tt {
-  font-family: monospace;
-  line-height: 1;
-}
-
-code {
-  font-size: 93%;
-}
-
-small {
-  color: #aaa;
-  font-size: 85%;
-  font-style: normal;
-}
-
-em {
-  font-weight: bold;
-}
-
-svg {
-  vertical-align: top;
-}
-
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Light-webfont.eot');
-  src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Light-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Regular-webfont.eot');
-  src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Medium-webfont.eot');
-  src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
-  font-weight: 500;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Bold-webfont.eot');
-  src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
-  font-weight: 700;
-  font-style: normal;
-}
+@import "init/base";
+@import "init/type";
+@import "init/links";
+@import "init/tables";
+@import "init/icons";
+@import "init/misc";
diff --git a/server/sonar-web/src/main/less/init/base.less b/server/sonar-web/src/main/less/init/base.less
new file mode 100644
index 00000000000..be78c35b787
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/base.less
@@ -0,0 +1,106 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+*, *:before, *:after {
+  margin: 0;
+  padding: 0
+}
+
+html, body {
+  background-color: @baseBackgroundColor;
+}
+
+fieldset, img {
+  border: 0;
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+caption, th {
+  text-align: left;
+}
+
+q:before, q:after {
+  content: '';
+}
+
+abbr, acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+select, input, button, textarea {
+  font-size: inherit;
+  font-family: inherit;
+}
+
+/*Remove button padding in FF*/
+select::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+legend {
+  color: #000
+}
+
+pre, code, kbd, samp, tt {
+  font-family: @monoFontFamily;
+  font-size: @monoFontSize;
+  line-height: @monoLineHeight;
+}
+
+svg, img {
+  vertical-align: top;
+}
+
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Light-webfont.eot');
+  src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Light-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular-webfont.eot');
+  src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Medium-webfont.eot');
+  src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Bold-webfont.eot');
+  src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
+  font-weight: 700;
+  font-style: normal;
+}
diff --git a/server/sonar-web/src/main/less/icons.less b/server/sonar-web/src/main/less/init/icons.less
index 451c4366930..20d9e0e1947 100644
--- a/server/sonar-web/src/main/less/icons.less
+++ b/server/sonar-web/src/main/less/init/icons.less
@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
 
 @font-face {
 	font-family: 'sonar';
diff --git a/server/sonar-web/src/main/less/init/links.less b/server/sonar-web/src/main/less/init/links.less
new file mode 100644
index 00000000000..949c707e429
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/links.less
@@ -0,0 +1,38 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+a {
+  border-bottom: 1px solid @lightBlue;
+  color: @darkBlue;
+  cursor: pointer;
+  outline: none;
+  text-decoration: none;
+  .trans;
+
+  &:hover {
+    color: @blue;
+  }
+
+  &:active, &:focus {
+    color: @darkBlue;
+  }
+}
+
+.link-base-color {
+  border-color: mix(@baseFontColor, @barBackgroundColor, 20%);
+  color: @baseFontColor;
+
+  &:hover {
+    border-bottom-color: @lightBlue;
+    color: @blue;
+  }
+
+  &:active, &:focus {
+    border-bottom-color: @lightBlue;
+    color: @darkBlue;
+  }
+}
+
+.link-no-underline {
+  border-bottom: none;
+}
diff --git a/server/sonar-web/src/main/less/init/lists.less b/server/sonar-web/src/main/less/init/lists.less
new file mode 100644
index 00000000000..7d543d8e192
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/lists.less
@@ -0,0 +1,41 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+ol, ul {
+  list-style: none;
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  margin-left: -5px;
+  list-style: none;
+}
+
+.list-inline > li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+dl {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+dt, dd {
+  line-height: 1.42857143;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
diff --git a/server/sonar-web/src/main/less/init/misc.less b/server/sonar-web/src/main/less/init/misc.less
new file mode 100644
index 00000000000..03ed7d52dab
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/misc.less
@@ -0,0 +1,34 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+.vertical-top {
+  vertical-align: top;
+}
+
+.vertical-bottom {
+  vertical-align: bottom;
+}
+
+.vertical-middle {
+  vertical-align: middle;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.note {
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+
+  img {
+    // FIXME why bottom?
+    vertical-align: bottom;
+  }
+}
diff --git a/server/sonar-web/src/main/less/init/tables.less b/server/sonar-web/src/main/less/init/tables.less
new file mode 100644
index 00000000000..bb47d8463be
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/tables.less
@@ -0,0 +1,203 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.odd {
+  background-color: #fff;
+}
+
+.odd.selected, .even.selected, .odd.selected a, .even.selected a, .even.selected span, .odd.selected span {
+  background-color: @lightBlue;
+  color: @baseFontColor;
+}
+
+table.data > thead > tr > th {
+  vertical-align: top;
+  font-size: 93%;
+  padding: 4px 7px 4px 3px;
+  line-height: 1.4;
+  text-transform: uppercase;
+
+  & > .small {
+    text-transform: none;
+  }
+}
+
+table.data > tfoot > tr > td {
+  font-size: 93%;
+  color: #777;
+  padding: 5px;
+}
+
+table.data > tbody > tr > td {
+  padding: 5px;
+  vertical-align: text-top;
+}
+
+table.data td.small, table.data th.small {
+  padding: 0;
+  white-space: nowrap;
+}
+
+table.data th img, table.data td img {
+  vertical-align: sub;
+}
+
+table.data.zebra tbody tr:nth-child(odd) {
+  background-color: #f5f5f5;
+}
+
+.data thead tr.total {
+  background-color: #EFEFEF;
+  font-weight: normal;
+  border: 1px solid #DDD;
+}
+
+.data thead tr.total th {
+  font-weight: normal;
+}
+
+.data thead tr.blank {
+  background-color: #fff;
+  line-height: 15px;
+}
+
+.data tr.highlight {
+  background-color: @lightBlue;
+}
+
+.data input, .data select, .data button {
+  vertical-align: baseline;
+}
+
+.data td.category {
+  padding-right: 15px;
+}
+
+.categoryDescription {
+  padding: 10px 5px;
+}
+
+.data td.category.withSubcategories {
+  background-image: url('../images/bullet_arrow_down.gif');
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+
+.data td.subcategory {
+  padding-left: 20px;
+}
+
+.hoverable:hover {
+  background-color: #CAE3F2;
+}
+
+.hoverable:hover a {
+  color: #111;
+}
+
+table.sortable .sortcol {
+  cursor: pointer;
+  padding-left: 15px;
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+table.sortable .sortasc {
+  background-image: url('../images/bullet_arrow_up.gif');
+  background-position: left center;
+}
+
+table.sortable .sortdesc {
+  background-image: url('../images/bullet_arrow_down.gif');
+  background-position: left center;
+}
+
+table.sortable .righticon {
+  padding-right: 15px;
+  background-position: right center;
+}
+
+table.sortable .nosort {
+  cursor: default;
+}
+
+table.spaced th {
+  font-weight: bold;
+  color: #333;
+  padding: 4px 5px;
+}
+
+table.spaced td, table.matrix tfoot td {
+  padding: 3px 5px;
+  line-height: 18px;
+}
+
+table.spaced td img {
+  vertical-align: text-bottom;
+}
+
+table.spacedicon th {
+  font-weight: bold;
+  color: #333;
+  padding: 4px 5px;
+}
+
+table.spacedicon td {
+  padding: 0 5px;
+  height: 24px;
+}
+
+.thin {
+  width: 1%;
+}
+
+td.sep {
+  width: 10px;
+}
+
+.spacer {
+  width: 5px;
+  display: inline-block;
+}
+
+.formError {
+  display: inline-block;
+  background-color: #FF9090;
+  color: #000;
+  padding: 0 5px;
+}
+
+table.form td {
+  padding: 2px 5px;
+  vertical-align: top;
+}
+
+table.form td.keyCell {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+table.form td img {
+  vertical-align: bottom;
+}
+
+.admin hr {
+  background: transparent;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-bottom: 1px dashed #FFD324;
+  height: 1px;
+}
+
+table#project-history tr > td {
+  vertical-align: top;
+}
diff --git a/server/sonar-web/src/main/less/init/type.less b/server/sonar-web/src/main/less/init/type.less
new file mode 100644
index 00000000000..998f1cb1ed8
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/type.less
@@ -0,0 +1,86 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+html, body {
+  color: @baseFontColor;
+}
+
+body {
+  font-family: @baseFontFamily;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
+}
+
+h1, .h1 {
+  line-height: @formControlHeight;
+  color: @baseFontColor;
+  font-size: @bigFontSize;
+  font-weight: 300;
+}
+
+h2, .h2 {
+  line-height: @formControlHeight;
+  color: @baseFontColor;
+  font-size: @bigFontSize;
+  font-weight: 300;
+}
+
+h3, .h3 {
+  line-height: @formControlHeight;
+  color: @baseFontColor;
+  font-size: @baseFontSize;
+  font-weight: 500;
+}
+
+h4, .h4, h5, .h5, h6, .h6 {
+  line-height: @formControlHeight;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+  font-weight: 400;
+}
+
+h1 img, .h1 img, h2 img, .h2 img, h3 img, .h3 img, h4 img, .h4 img {
+  vertical-align: middle;
+}
+
+sup {
+  vertical-align: text-top;
+}
+
+sub {
+  vertical-align: text-bottom;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: bold;
+}
+
+small,
+.small {
+  font-size: (100% * (@smallFontSize / @baseFontSize));
+}
+
+.big {
+  font-size: (100% * (@bigFontSize / @baseFontSize));
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
diff --git a/server/sonar-web/src/main/less/layout.less b/server/sonar-web/src/main/less/layout.less
deleted file mode 100644
index 2f798812f19..00000000000
--- a/server/sonar-web/src/main/less/layout.less
+++ /dev/null
@@ -1,288 +0,0 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-
-@media print {
-  /* ------------------- PRINT ------------------- */
-  html, body {
-    font-size: 8pt;
-  }
-
-  a, a:link, a:visited {
-    text-decoration: none;
-    border-bottom: 0;
-  }
-
-  .noprint {
-    display: none !important;
-  }
-
-  .print {
-    display: inline;
-    position: static;
-    left: 0;
-  }
-
-  #hd, #sidebar, #crumbs {
-    display: none;
-  }
-
-  .with_sidebar, .wo_sidebar {
-    padding: 0 !important;
-    margin: 0;
-  }
-
-  #content {
-    margin-left: 0 !important;
-  }
-
-  .widget thead, .widget tfoot {
-    // Fix for phantomjs bug about wrapping tables
-    display: table-row-group;
-  }
-}
-
-@media screen {
-  .print {
-    display: none;
-  }
-}
-
-/* LAYOUT */
-#content {
-  padding: 0 10px;
-}
-
-#container {
-  height: auto !important;
-  min-width: 940px;
-  min-height: 500px;
-}
-
-#hd {
-  color: #FFF;
-  background: #262626;
-  padding: 0 10px;
-  height: 30px;
-  line-height: 30px;
-  font-size: 93%;
-  margin: 0;
-  position: relative;
-}
-
-#hd #nav-left > ul > li {
-  height: 30px;
-}
-
-#hd a {
-  color: #fff;
-  .link-no-underline;
-
-  &.selected, &:hover, &:focus { color: @blue; }
-}
-
-#nav-left {
-  float: left;
-  vertical-align: middle;
-}
-
-#nav {
-  float: right;
-  vertical-align: middle;
-}
-
-#nav-left img, #nav img {
-  vertical-align: text-bottom;
-}
-
-#nav-left > ul > li {
-  float: left;
-  padding: 0 20px 0 0;
-}
-
-#nav-left > ul > li > a,
-#nav > ul > li > a {
-  font-size: @smallFontSize;
-  font-weight: 300;
-  letter-spacing: 0.05em;
-}
-
-#nav > ul > li {
-  float: right;
-  height: 30px;
-  padding: 0 0 0 15px;
-}
-
-#searchResourcesResults {
-  position: absolute;
-  float: right;
-  width: 600px;
-  top: 30px;
-  right: 0;
-}
-
-#crumbs {
-  color: #444;
-  background: #EFEFEF;
-  height: 26px;
-  line-height: 26px;
-  font-size: 93%;
-  margin: 0;
-  padding: 0 10px;
-  border-bottom: 1px solid #CCC;
-}
-
-#crumbs img {
-  vertical-align: text-bottom;
-}
-
-#bc li {
-  float: left;
-  background: #EFEFEF url("../images/bc-gray.png") no-repeat right;
-  border-bottom: 1px solid #CCC;
-  padding: 0 20px 0 0;
-  margin: 0 10px 0 0;
-}
-
-#bc li img {
-  margin-right: -5px;
-}
-
-#bc li a {
-  .link-no-underline;
-}
-
-#crumbs-ops {
-  float: right;
-  padding: 0 5px 0 0;
-}
-
-#crumbs-ops li {
-  float: left;
-  padding: 0 0 0 10px;
-}
-
-#crumbs-ops li a {
-  .link-no-underline;
-}
-
-#hd .dropdown-menu a {
-  color: #000;
-}
-
-#project-settings-menu {
-  float: right;
-  right: 20px;
-}
-
-#nonav {
-  text-align: left;
-  margin: 50px 180px 0;
-}
-
-#footer {
-  padding: 4px 0;
-  clear: both;
-}
-
-#body {
-  position: relative;
-}
-
-.with_sidebar {
-  margin: 0 0 0 160px;
-  padding: 10px;
-}
-
-.wo_sidebar {
-  margin: 0 8px;
-}
-
-#sidebar {
-  position: absolute;
-  top: 0; left: 10px;
-  width: 150px;
-
-  &.sticky {
-    position: fixed;
-  }
-}
-
-ul.sidebar {
-  text-align: left;
-  border-top: none;
-  padding: 10px 0;
-}
-
-ul.sidebar li {
-  list-style-type: none;
-  padding: 3px 10px;
-}
-
-ul.sidebar li > a {
-  .link-no-underline;
-}
-
-ul.sidebar li.active {
-  background-color: #4b9fd5;
-}
-
-ul.sidebar li.active a, ul.sidebar li.active a:hover {
-  color: #FFF;
-}
-
-ul.sidebar li.active [class^="icon-"],
-ul.sidebar li.active [class*=" icon-"] {
-  color: #FFF;
-}
-
-li.sidebar-title {
-  text-transform: uppercase;
-  font-size: 93%;
-  font-weight: bold;
-}
-
-ul.sidebar li.spacer {
-  border: 0 none;
-  height: 10px;
-  margin: 0;
-  padding: 0;
-}
-
-ul.sidebar select, ul.sidebar input {
-  font-size: 93%;
-}
-
-#logo {
-  text-align: center;
-  padding: 10px 0 0 0;
-}
-
-#logo a {
-  text-decoration: none;
-  border-bottom-width: 0;
-}
-
-#logo img {
-  display: block;
-}
-
-.gray-sidebar {
-  background-color: #EFEFEF;
-  border: 1px solid #CCC;
-  color: #666;
-  border-top: none;
-}
-
-.blue-sidebar {
-  height: 100%;
-  border-left: 1px solid @blue;
-  border-right: 1px solid @blue;
-  border-bottom: 1px solid @blue;
-  background-color: @lightBlue;
-  color: @baseFontColor;
-}
-
-.nolayout {
-  padding: 10px;
-}
diff --git a/server/sonar-web/src/main/less/pages.less b/server/sonar-web/src/main/less/pages.less
new file mode 100644
index 00000000000..fae11724e5a
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages.less
@@ -0,0 +1,8 @@
+@import "pages/analysis-reports";
+@import "pages/api-documentation";
+@import "pages/coding-rules";
+@import "pages/dashboard";
+@import "pages/dsm";
+@import "pages/issues";
+@import "pages/libraries";
+@import "pages/quality-gates";
diff --git a/server/sonar-web/src/main/less/analysis-reports.less b/server/sonar-web/src/main/less/pages/analysis-reports.less
index 5edbcfed230..5740253305e 100644
--- a/server/sonar-web/src/main/less/analysis-reports.less
+++ b/server/sonar-web/src/main/less/pages/analysis-reports.less
@@ -1,7 +1,7 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-@import (reference) "navigator/base";
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "../components/ui";
+@import (reference) "../components/navigator/base";
 
 
 @pendingColor: #fdfce2;
diff --git a/server/sonar-web/src/main/less/api-documentation.less b/server/sonar-web/src/main/less/pages/api-documentation.less
index d73a319aec8..e30f8bd8e10 100644
--- a/server/sonar-web/src/main/less/api-documentation.less
+++ b/server/sonar-web/src/main/less/pages/api-documentation.less
@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "navigator/config";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/navigator/config";
 
 @apiDocumentationSidebarWidth: 230px;
 
diff --git a/server/sonar-web/src/main/less/coding-rules.less b/server/sonar-web/src/main/less/pages/coding-rules.less
index 27ee2aceae4..e32da3d4c33 100644
--- a/server/sonar-web/src/main/less/coding-rules.less
+++ b/server/sonar-web/src/main/less/pages/coding-rules.less
@@ -1,7 +1,8 @@
-@import (reference) 'mixins';
-@import (reference) 'variables';
-@import (reference) 'ui';
-@import (reference) 'navigator/config';
+@import (reference) '../mixins';
+@import (reference) '../variables';
+@import (reference) '../init/links';
+@import (reference) '../components/ui';
+@import (reference) '../components/navigator/config';
 
 @facetsHeight: 36px;
 
diff --git a/server/sonar-web/src/main/less/dashboard.less b/server/sonar-web/src/main/less/pages/dashboard.less
index 86dce3a54a7..8afe0efbb23 100644
--- a/server/sonar-web/src/main/less/dashboard.less
+++ b/server/sonar-web/src/main/less/pages/dashboard.less
@@ -1,8 +1,9 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "../components/ui";
 
-.dashboard-page {
+.dashboard-page,
+.dashboard-page body {
   background-color: @barBackgroundColor;
 }
 
@@ -12,12 +13,6 @@
 }
 
 /* LAYOUT */
-#dashboard {
-  position: relative;
-  width: 100%;
-  padding: 10px 0;
-}
-
 #dashboard .transparent {
   position: absolute;
   width: 100%;
diff --git a/server/sonar-web/src/main/less/dsm.less b/server/sonar-web/src/main/less/pages/dsm.less
index f41f4ffc461..f17fca17ebd 100644
--- a/server/sonar-web/src/main/less/dsm.less
+++ b/server/sonar-web/src/main/less/pages/dsm.less
@@ -1,6 +1,6 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
-@import (reference) 'ui';
+@import (reference) '../variables';
+@import (reference) '../mixins';
+@import (reference) '../components/ui';
 
 @cellSize: 22px;
 
diff --git a/server/sonar-web/src/main/less/issues.less b/server/sonar-web/src/main/less/pages/issues.less
index 26f8043e1d3..5f22d04455a 100644
--- a/server/sonar-web/src/main/less/issues.less
+++ b/server/sonar-web/src/main/less/pages/issues.less
@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
 
 @sideWidth: 300px;
 
diff --git a/server/sonar-web/src/main/less/libraries.less b/server/sonar-web/src/main/less/pages/libraries.less
index 9d659fad749..d67dc0c9b5a 100644
--- a/server/sonar-web/src/main/less/libraries.less
+++ b/server/sonar-web/src/main/less/pages/libraries.less
@@ -1,5 +1,5 @@
-@import (reference) "variables";
-@import (reference) "mixins";
+@import (reference) "../variables";
+@import (reference) "../mixins";
 
 
 .libraries-header {
diff --git a/server/sonar-web/src/main/less/quality-gates.less b/server/sonar-web/src/main/less/pages/quality-gates.less
index 2039c85c50b..9734d8f5b8e 100644
--- a/server/sonar-web/src/main/less/quality-gates.less
+++ b/server/sonar-web/src/main/less/pages/quality-gates.less
@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "navigator/config";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/navigator/config";
 
 @qualityGateSidebarWidth: 230px;
 
diff --git a/server/sonar-web/src/main/less/sonar-colorizer.less b/server/sonar-web/src/main/less/sonar-colorizer.less
index dd924b9ea5e..e3b2130c298 100644
--- a/server/sonar-web/src/main/less/sonar-colorizer.less
+++ b/server/sonar-web/src/main/less/sonar-colorizer.less
@@ -1,12 +1,3 @@
-.code {
-  font-size: 12px;
-}
-.code pre {
-  font-family: Monospace;
-  padding: 0 5px;
-  color: #111;
-  margin: 0;
-}
 /* for example java annotations */
 .code .a {
   color: #808000;
diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less
index 7c195519f5a..c03f596bfb8 100644
--- a/server/sonar-web/src/main/less/style.less
+++ b/server/sonar-web/src/main/less/style.less
@@ -1,8 +1,3 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-@import (reference) "components/typography";
-
 /*
  * SonarQube, open source software quality management tool.
  * Copyright (C) 2008-2014 SonarSource
@@ -23,44 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-/* CSS optimized by http://www.cleancss.com */
-
-/* ------------------- PROJECTS SEARCH FORM ------------------- */
-#projectSearch {
-  color: #444;
-  margin: 4px 0 0 0;
-}
-
-/*
-  FOOTER
-*/
-#ftlinks {
-  background: #fff;
-  color: #262626;
-  text-align: center;
-  border-top: 1px solid #fff;
-  font-size: 85%;
-  padding: 10px 0;
-  line-height: 1.4;
-}
-
-.footer-logo {
-  margin-top: 10px;
-  text-align: center;
-
-  .sq-logo {
-    display: inline-block;
-  }
-
-  .sq-logo .sq-logo-letter {
-    fill: @black;
-  }
-
-  .sq-logo .sq-logo-arc {
-    fill: @blue;
-  }
-
-}
+@import (reference) "mixins";
+@import (reference) "variables";
+@import (reference) "init/links";
+@import (reference) "components/ui";
+@import (reference) "components/typography";
 
 .ie-warn {
   color: #EEE;
@@ -76,73 +38,6 @@
 /*
   GENERAL
 */
-a.icon-favorite,
-a.icon-not-favorite {
-  .link-no-underline;
-}
-
-.loading {
-  background: url("../images/loading.gif") no-repeat 4px 2px;
-  color: #444;
-  padding: 3px 25px;
-}
-
-.right {
-  text-align: right;
-}
-
-.left {
-  text-align: left;
-}
-
-.center {
-  text-align: center;
-}
-
-.top {
-  vertical-align: top;
-}
-
-.bottom {
-  vertical-align: bottom;
-}
-
-.middle {
-  vertical-align: middle;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-.clear {
-  height: 0;
-  clear: both;
-}
-
-.note {
-  color: #777;
-  font-size: 93%;
-  font-weight: normal;
-  line-height: 13px;
-}
-
-.note img {
-  vertical-align: bottom;
-}
-
-.crossout {
-  text-decoration: line-through;
-}
-
-.small {
-  font-size: @smallFontSize;
-}
 
 em.mandatory {
   color: #990000;
@@ -205,102 +100,6 @@ a.external {
   cursor: default;
 }
 
-/* ------------------- PAGE ------------------- */
-h1, .h1 {
-  color: @baseFontColor;
-  font-size: 16px;
-}
-
-h2, .h2 {
-  color: @baseFontColor;
-  font-size: 16px;
-  font-weight: normal;
-}
-
-h3, .h3 {
-  color: @baseFontColor;
-  font-size: 100%;
-  font-weight: bold;
-}
-
-h4, .h4 {
-  color: @baseFontColor;
-  font-size: 85%;
-  color: #777;
-}
-
-h1 img, .h1 img, h2 img, .h2 img, h3 img, .h3 img, h4 img, .h4 img {
-  vertical-align: middle;
-}
-
-.subtitle {
-  color: #777;
-  font-size: 85%;
-  margin: 0;
-  padding: 0;
-}
-
-.notes {
-  color: #777;
-  font-size: 11px;
-  margin-bottom: 10px;
-  background-color: #EFEFEF;
-  border: 1px solid #cdcdcd;
-  line-height: 16px;
-  height: 16px;
-  padding: 2px 4px;
-}
-
-.treemap {
-  position: relative;
-  cursor: pointer;
-}
-
-.treemap a {
-  color: #FFF;
-  text-decoration: none;
-  font-size: 12px;
-  padding: 1px;
-}
-.treemap a:hover {
-  text-decoration: underline;
-}
-
-/* ------------------- MESSAGES ------------------- */
-.warning, .modal-warning {
-  border: solid 1px #FFD324;
-  background-color: #FFF6BF;
-  color: #514721;
-  margin: 0 0 4px;
-  padding: 4px;
-}
-
-.error, .modal-error {
-  border: 1px solid red;
-  background-color: #FF5252;
-  color: #eee;
-  margin: 0 0 4px;
-  padding: 4px;
-
-  a {
-    color: #eee;
-  }
-}
-
-.notice, .modal-notice {
-  border: 1px solid #9c9;
-  background-color: #e2f9e3;
-  color: #060;
-  margin: 0 0 4px;
-  padding: 4px;
-}
-
-.info {
-  background-color: #CAE3F2;
-  padding: 5px;
-  border: 1px solid #4B9FD5;
-}
-
 /* ------------------- SETUP / MIGRATION PAGES ------------------- */
 .migration {
   background-image: url("../images/logo.png");
@@ -308,738 +107,6 @@ h1 img, .h1 img, h2 img, .h2 img, h3 img, .h3 img, h4 img, .h4 img {
   background-position: top right;
 }
 
-/* ------------------- LOGIN FORM ------------------- */
-#login_form {
-  border: 2px solid #4b9fd5;
-  width: 230px;
-  text-align: left;
-  background-color: #CAE3F2;
-  padding: 15px 20px;
-}
-
-#login_form h4 {
-  text-align: left;
-  font-weight: bold;
-  color: #036;
-}
-
-#login_form p {
-  padding: 3px 0 10px;
-}
-
-#login_form a {
-  border-bottom-color: @blue;
-}
-
-#login_form .desc {
-  font-size: 85%;
-  font-weight: normal;
-}
-
-/* ------------------- DOCUMENTATION --------------------- */
-.doc h2 {
-  margin-top: 8px;
-}
-
-.doc p {
-  margin: 8px 0;
-}
-
-.doc pre, pre.code {
-  color: #777;
-  background-color: #EFEFEF;
-  padding: 10px;
-  margin: 10px 0;
-  border: 1px dashed #777;
-  font-size: 93%;
-  line-height: 1.5em;
-}
-
-.doc li {
-  list-style: disc outside;
-  padding: 2px;
-}
-
-.doc ul {
-  list-style: none outside;
-  padding-left: 30px;
-}
-
-/* ------------------- TABLES ------------------- */
-.odd {
-  background-color: #fff;
-}
-
-.odd.selected, .even.selected, .odd.selected a, .even.selected a, .even.selected span, .odd.selected span {
-  background-color: @lightBlue;
-  color: @baseFontColor;
-}
-
-table.data > thead > tr > th {
-  vertical-align: top;
-  font-size: 93%;
-  padding: 4px 7px 4px 3px;
-  line-height: 1.4;
-  text-transform: uppercase;
-
-  & > .small {
-    text-transform: none;
-  }
-}
-
-table.data > tfoot > tr > td {
-  font-size: 93%;
-  color: #777;
-  padding: 5px;
-}
-
-table.data > tbody > tr > td {
-  padding: 5px;
-  vertical-align: text-top;
-}
-
-table.data td.small, table.data th.small {
-  padding: 0;
-  white-space: nowrap;
-}
-
-table.data th img, table.data td img {
-  vertical-align: sub;
-}
-
-table.data.zebra tbody tr:nth-child(odd) {
-  background-color: #f5f5f5;
-}
-
-.data thead tr.total {
-  background-color: #EFEFEF;
-  font-weight: normal;
-  border: 1px solid #DDD;
-}
-
-.data thead tr.total th {
-  font-weight: normal;
-}
-
-.data thead tr.blank {
-  background-color: #fff;
-  line-height: 15px;
-}
-
-.data tr.highlight {
-  background-color: @lightBlue;
-}
-
-.data input, .data select, .data button {
-  vertical-align: baseline;
-}
-
-.data td.category {
-  padding-right: 15px;
-}
-
-.categoryDescription {
-  padding: 10px 5px;
-}
-
-.data td.category.withSubcategories {
-  background-image: url('../images/bullet_arrow_down.gif');
-  background-position: right center;
-  background-repeat: no-repeat;
-}
-
-.data td.subcategory {
-  padding-left: 20px;
-}
-
-.hoverable:hover {
-  background-color: #CAE3F2;
-}
-
-.hoverable:hover a {
-  color: #111;
-}
-
-table.sortable .sortcol {
-  cursor: pointer;
-  padding-left: 15px;
-  background-repeat: no-repeat;
-  background-position: right center;
-}
-
-table.sortable .sortasc {
-  background-image: url('../images/bullet_arrow_up.gif');
-  background-position: left center;
-}
-
-table.sortable .sortdesc {
-  background-image: url('../images/bullet_arrow_down.gif');
-  background-position: left center;
-}
-
-table.sortable .righticon {
-  padding-right: 15px;
-  background-position: right center;
-}
-
-table.sortable .nosort {
-  cursor: default;
-}
-
-table.spaced th {
-  font-weight: bold;
-  color: #333;
-  padding: 4px 5px;
-}
-
-table.spaced td, table.matrix tfoot td {
-  padding: 3px 5px;
-  line-height: 18px;
-}
-
-table.spaced td img {
-  vertical-align: text-bottom;
-}
-
-table.spacedicon th {
-  font-weight: bold;
-  color: #333;
-  padding: 4px 5px;
-}
-
-table.spacedicon td {
-  padding: 0 5px;
-  height: 24px;
-}
-
-.thin {
-  width: 1%;
-}
-
-td.sep {
-  width: 10px;
-}
-
-.spacer {
-  width: 5px;
-  display: inline-block;
-}
-
-.formError {
-  display: inline-block;
-  background-color: #FF9090;
-  color: #000;
-  padding: 0 5px;
-}
-
-table.form td {
-  padding: 2px 5px;
-  vertical-align: top;
-}
-
-table.form td.keyCell {
-  width: 1%;
-  white-space: nowrap;
-  text-align: right;
-  font-weight: bold;
-  vertical-align: top;
-}
-
-table.form td img {
-  vertical-align: bottom;
-}
-
-.admin hr {
-  background: transparent;
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  border-bottom: 1px dashed #FFD324;
-  height: 1px;
-}
-
-table#project-history tr > td {
-  vertical-align: top;
-}
-
-/* OPERATIONS */
-#page-operations {
-  display: inline-block;
-  width: 100%;
-}
-
-div.operations {
-  float: right;
-  margin: 0;
-}
-
-ul.operations {
-  float: right;
-  height: 20px;
-  line-height: 20px;
-  list-style-type: none;
-  margin: 0;
-  background-color: #EFEFEF;
-  border: 1px solid #cdcdcd;
-  border-radius: 3px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-}
-
-ul.operations li {
-  float: left;
-  margin: 0;
-  padding: 0 8px;
-  font-size: 85%;
-  border-right: 1px solid #cdcdcd;
-}
-
-ul.operations li.selected {
-  background-color: #d4d4d4;
-}
-
-ul.operations li.last {
-  border-right-width: 0;
-}
-
-ul.operations li a {
-  .base-link;
-  color: #555;
-}
-
-ul.operations li img {
-  vertical-align: middle;
-  margin-right: 5px;
-}
-
-th.operations, td.operations {
-  text-align: right;
-}
-
-/* RESOURCE VIEWER */
-.resourceName h1 {
-  margin: 5px 0;
-}
-
-/* SOURCE */
-.sources2 {
-  width: 100%;
-  border: 0;
-  margin: 0;
-  background-color: #FFF;
-}
-
-.sources2 td.lid {
-  background-color: #EFEFEF;
-  border-right: 1px solid #DDDDDD;
-  text-align: right;
-  padding: 2px 0.5em 0 0.5em;
-  vertical-align: top;
-  font-size: 85%;
-}
-
-.sources2 td.lid a {
-  text-decoration: none;
-  color: #AAA;
-}
-
-.sources2 td.scm {
-  border-right: 1px solid #DDD;
-  background-color: #EFEFEF;
-}
-
-.sources2 td.revision {
-  border-top: 1px solid #DDD;
-  vertical-align: top;
-  padding: 0 0.3em;
-  white-space: nowrap;
-}
-
-.sources2 tr:first-child td.revision {
-  border-top: none;
-}
-
-.sources2 tr.row td.plus {
-  background-color: #EFEFEF;
-  padding: 0;
-  width: 16px;
-}
-
-.sources2 tr.row:hover td.plus {
-  background: url("../images/add.png") no-repeat scroll left 0 #EFEFEF;
-}
-
-.sources2 td.plus a {
-  display: block;
-  cursor: pointer;
-  height: 16px;
-  width: 16px;
-}
-
-.sources2 td.gray {
-  background-color: #EFEFEF;
-  padding: 2px 0.5em 0;
-}
-
-.sources2 td.white {
-  border-left: 1px solid #DDD;
-  background-color: #FFF;
-}
-
-.sources2 span.date, .sources2 span.date a {
-  color: #AAA;
-  font-size: 85%;
-  text-decoration: none;
-}
-
-.sources2 span.author, .sources2 span.author a {
-  font-size: 85%;
-}
-
-.sources2 div.violation, #global_violations div.violation {
-  background-color: #FFF;
-  margin: 0;
-  border: 1px solid #DDD;
-  font-size: 12px;
-}
-
-.rulename, .rulename a {
-  color: #444;
-  font-weight: 500;
-}
-
-.rulename a:hover {
-  text-decoration: underline;
-}
-
-.sources2 td.line {
-  width: 100%;
-}
-
-.sources2 td.line pre {
-  font-size: 12px;
-  font-family: @monoFontFamily;
-}
-
-.sources2 td.ind {
-  border-right: 1px solid #DDD;
-  padding: 0 0.3em;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.sources2 td.ind a,.sources2 td.ind span {
-  padding: 0 3px;
-}
-
-.sources2 td.ok {
-  background-color: #ACE97C;
-}
-
-.sources2 td.warn {
-  background-color: #FFF6BF;
-}
-
-.sources2 td.ko {
-  background-color: #FF9090;
-}
-
-.sources2 td.new_section {
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: #EEE #DDD;
-  height: 30px;
-  background: url('../images/gray-stripes.png');
-}
-
-.sources2 td.violations {
-  background-color: #FFF;
-  padding: 10px;
-  border-left: 1px solid #DDD;
-}
-
-.source_title {
-  padding: 10px 5px;
-}
-
-.source_title span.h1 {
-  font-size: 16px;
-  margin-right: 10px;
-}
-
-.source_links {
-  font-size: 11px;
-}
-
-.global_violations {
-  width: 100%;
-}
-
-.global_violations > tbody > tr > td {
-  padding-bottom: 10px;
-}
-
-.global_violations td {
-  padding: 3px 0;
-}
-
-.global_violations td img, #source_title img {
-  vertical-align: text-bottom;
-}
-
-.code-issue-create-form {
-  padding: 10px;
-}
-
-.code-global-issues {
-  padding: 10px 10px 0;
-}
-
-.code-issues {
-  padding: 10px 10px 0;
-  line-height: 0;
-}
-
-.code-issue {
-  margin: 0;
-  font-size: 12px;
-  .trans(border-color);
-
-  .error {
-    line-height: normal;
-  }
-}
-
-.code-issue strong {
-  font-weight: bold;
-}
-
-.code-issue-toggle {
-  cursor: pointer;
-}
-
-.code-issue-name {
-  position: relative;
-  background-color: #E4ECF3;
-  margin: 0;
-  padding: 5px 10px;
-  line-height: 16px;
-  color: #777;
-  border: 1px solid #DDD;
-  border-bottom: medium none;
-}
-
-.code-issue-msg {
-  line-height: 1.5;
-  padding: 5px 10px;
-  border-left: 1px solid #DDD;
-  border-right: 1px solid #DDD;
-  background-color: #EFEFEF;
-}
-
-.code-issue-name img {
-  vertical-align: text-bottom;
-}
-
-.code-issue-name-rule {
-  max-width: 90%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.code-issue-permalink {
-  position: absolute;
-  top: 4px; right: 4px;
-
-  a { text-decoration: none; }
-}
-
-.code-issue-name-extra {
-  margin-top: 6px;
-  line-height: 12px;
-}
-
-.code-issue-name-extra li {
-  font-size: 11px !important;
-}
-
-.code-issue-name-right {
-  position: absolute;
-  top: 5px; right: 26px;
-}
-
-.code-issue-comment, .code-issue-msg, .code-issue-actions, .code-issue-form {
-  background-color: #EFEFEF;
-  border: 1px solid #DDD;
-  border-top: none;
-  line-height: 1.5em;
-  margin: 0;
-  padding: 5px 10px;
-}
-
-.code-issue-form input[type=submit],
-.code-issue-form input[type=button],
-.code-issue-form button,
-.code-issue-form .action {
-  vertical-align: middle;
-}
-
-.code-issue-comment h4 {
-  font-size: 11px;
-  margin-bottom: 2px;
-}
-
-.code-issue-comment h4 img {
-  vertical-align: sub;
-}
-
-.code-issue-comment ul li {
-  list-style: square inside;
-}
-
-.code-issue-comment ol li {
-  list-style: decimal inside;
-}
-
-.code-issue-comment pre {
-  padding: 10px;
-  border: 1px dashed #DDD;
-  color: #444;
-  font-size: 12px;
-}
-
-.code-issue-details {
-  padding: 0 10px 5px;
-  border-left: 1px solid #DDD;
-  border-right: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
-  background-color: #EFEFEF;
-  line-height: 1.3;
-}
-
-.code-issue-tabs {
-  margin-bottom: 5px;
-  font-size: 0;
-
-  & > li {
-    display: inline-block;
-    padding: 4px 0;
-    color: @secondFontColor;
-    font-size: @smallFontSize;
-  }
-
-  & > li + li { margin-left: 15px; }
-}
-
-.code-issue-details-list {
-
-}
-
-.code-issue-details-list > li {
-  font-size: 0;
-}
-
-.code-issue-details-term,
-.code-issue-details-value {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.code-issue-details-term {
-  width: 90px;
-}
-
-.code-issue-details-term:after {
-  content: ":";
-}
-
-.code-issue-list {
-  background-color: #E4ECF3;
-}
-
-.code-issue-bar,
-.code-issue-list {
-  font-size: 0;
-  white-space: nowrap;
-}
-
-.code-issue-list > li,
-.code-issue-bar > li {
-  display: inline-block;
-  vertical-align: middle;
-  height: 14px;
-  line-height: 14px;
-  padding: 0 8px;
-  border-left: 1px solid #fff;
-  border-right: 1px solid #bfbfbf;
-  font-size: 12px;
-}
-
-.code-issue-list > li:first-child,
-.code-issue-bar > li:first-child {
-  padding-left: 0;
-  border-left: none;
-}
-
-.code-issue-list > li:last-child,
-.code-issue-bar > li:last-child {
-  padding-right: 0;
-  border-right: none;
-}
-
-.code-issue-collapsed .code-issue-msg,
-.code-issue-collapsed .code-issue-details {
-  display: none;
-}
-
-.code-issue-errors {
-  margin-top: 10px;
-}
-
-.tab_header {
-  padding: 5px 10px;
-}
-
-.tab_header td {
-  padding-right: 7px;
-}
-
-.tab_header td.name {
-  text-align: left;
-  white-space: nowrap;
-}
-
-.tab_header td.value {
-  text-align: right;
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.extension-close {
-  position: absolute;
-  top: 5px; right: 10px;
-}
-
-.source_options {
-  margin-top: 5px;
-  padding-top: 5px;
-  border-top: 1px solid #ddd;
-  font-size: 85%;
-}
-
-.source_options td {
-  background: url("../images/sep12.png") no-repeat scroll 0 50% transparent;
-  padding: 0 10px;
-}
-
-.source_options td.first {
-  background: none;
-  padding: 0 10px 0 0;
-}
-
 /* DUPLICATIONS */
 
 .duplications {
@@ -1201,103 +268,7 @@ div.note a {
   color: #777777;
 }
 
-/* SEARCH AUTOCOMPLETE FIELDS */
-#searchInput {
-  color: #444;
-  font-size: 13px;
-  padding-right: 20px;
-}
-
-#searchingResources {
-  position: absolute;
-  top: 8px;
-  right: 18px;
-}
-
-div.autocomplete {
-  position: absolute;
-  width: 600px;
-  right: 10px;
-  top: 10px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  margin: 0;
-  padding: 0;
-  color: #111;
-  line-height: 18px;
-  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
-  z-index: 999999;
-}
-
-div.autocomplete ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-div.autocomplete ul li {
-  list-style-type: none;
-  display: block;
-  margin: 0;
-  padding: 3px 5px;
-  cursor: pointer;
-  color: #333;
-  line-height: 18px;
-  height: 18px;
-  vertical-align: middle;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-div.autocomplete div.q {
-  font-size: 93%;
-  color: #777;
-  width: 90px;
-  text-align: right;
-  margin-right: 5px;
-  display: inline-block;
-
-  /* For IE 7 */
-  zoom: 1;
-  *display: inline;
-}
-
-div.autocomplete ul li img {
-  vertical-align: middle;
-}
-
-div.autocomplete ul li.selected {
-  background-color: @lightBlue;
-}
-
-div.autocomplete strong {
-  font-weight: bold;
-}
-
-div.autocompleteNote {
-  color: #777;
-  font-size: 85%;
-  background-color: #EFEFEF;
-  border-top: 1px solid #CCC;
-  padding: 1px 10px;
-}
-
 /* ------------------- DASHBOARD ------------------- */
-.color_OK {
-  border: 2px solid #85bb43 !important;
-  color: #85bb43 !important;
-}
-
-.color_WARN {
-  border: 2px solid #f90 !important;
-  color: #f90 !important;
-}
-
-.color_ERROR {
-  border: 2px solid #d4333f !important;
-  color: #d4333f !important;
-}
 
 #alerts_widget {
   margin-bottom: 10px;
@@ -1332,11 +303,6 @@ span.empty_widget {
   }
 }
 
-.big {
-  font-size: 152%;
-  font-weight: bold;
-}
-
 .adminportlet {
   border: 2px dashed #ccc;
   margin-bottom: 10px;
@@ -2317,397 +1283,3 @@ div.rule-title {
   line-height: 16px;
   padding: 4px 2px;
 }
-
-
-
-
-.sonar-d3 {
-
-}
-
-.sonar-d3 .axis path {
-  fill: none;
-  stroke: #444;
-}
-
-.sonar-d3 .tick line {
-  stroke: #444;
-}
-
-.sonar-d3 .tick text {
-  fill: #444;
-}
-
-.sonar-d3 .plot {
-  transition: all 0.2s ease;
-}
-
-.sonar-d3 .plot:hover .arc,
-.sonar-d3 .plot.hover .arc {
-  opacity: 0.4;
-}
-
-.sonar-d3 .plot .arc:hover,
-.sonar-d3 .plot .arc.hover {
-  opacity: 1;
-}
-
-.sonar-d3 .plot .line {
-  fill: none;
-  stroke: #000;
-  stroke-width: 2;
-}
-
-.sonar-d3 .plot .line-marker {
-  fill: #fff;
-  stroke: #000;
-  stroke-width: 2;
-  opacity: 0;
-}
-
-.sonar-d3 .plot .scanner {
-  stroke: #000;
-  opacity: 0.25;
-}
-
-.sonar-d3 .arc,
-.sonar-d3 .bar rect {
-  cursor: pointer;
-  stroke: #fff;
-  stroke-width: 1px;
-  transition: all 0.2s ease;
-}
-
-.sonar-d3 .bar,
-.sonar-d3 .bar .legend-text,
-.sonar-d3 .pie-legend,
-.sonar-d3 .pie-legend .legend-text {
-  cursor: pointer;
-}
-
-.sonar-d3 .legend {
-
-}
-
-.sonar-d3 .legend-bullet {
-  transition: all 0.2s ease;
-}
-
-.sonar-d3 .legend-text {
-  font-size: 12px;
-  cursor: default;
-}
-
-.sonar-d3 .legend-active .legend-bullet {
-  -webkit-transform: scale(1.4);
-  -webkit-transform-origin: center;
-}
-
-.sonar-d3 .legend-html {
-  margin-bottom: 10px;
-  color: @secondFontColor;
-
-  .legend-text + .legend-text { margin-left: 15px; }
-  .legend-text-main { font-weight: 500; }
-}
-
-.sonar-d3 .details-color-indicator {
-  fill: #fff;
-  transition: fill 0.2s ease;
-}
-
-.sonar-d3 .details-metric {
-  font-size: 12px;
-}
-
-.sonar-d3 .details-metric-main {
-  font-weight: bold;
-}
-
-.sonar-d3 .info {
-
-}
-
-.sonar-d3 .info-text {
-  font-size: 13px;
-}
-
-.sonar-d3 .info-text-bold {
-  font-weight: bold;
-}
-
-.sonar-d3 .info-text-small {
-  font-size: 12px;
-}
-
-.sonar-d3 .event-tick {
-  fill: none;
-  stroke: #000;
-  stroke-width: 1px;
-  transition: all 0.3s ease;
-}
-
-.sonar-d3.cloud-widget {
-  text-align: center;
-}
-
-.sonar-d3 .cloud-word {
-  display: inline-block;
-  vertical-align: baseline;
-  white-space: nowrap;
-  margin-right: 14px;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-
-  &:hover {
-    border-bottom: 1px solid;
-  }
-}
-
-.max-results-reached-message {
-  font-size: 12px;
-}
-
-div.max-results-reached-message {
-  margin-top: 10px;
-  color: #777;
-  text-align: center;
-}
-
-text.max-results-reached-message {
-  fill: #777;
-}
-
-.sonar-d3 .treemap-container {
-  position: relative;
-}
-
-.sonar-d3 .treemap-cell {
-  position: absolute;
-  border-right: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-  .box-sizing(border-box);
-  text-align: center;
-}
-
-.sonar-d3 .treemap-cell-drilldown {
-  cursor: pointer;
-}
-
-.sonar-d3 .treemap-inner {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1.2;
-  padding: 5px;
-  .box-sizing(border-box);
-  color: #fff;
-  font-weight: 300;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sonar-d3 .treemap-link {
-  position: absolute;
-  z-index: 2;
-  top: 5px; right: 5px;
-  line-height: @iconSmallFontSize;
-  color: #fff;
-  opacity: 0.5;
-  .link-no-underline;
-
-  &:hover { opacity: 1; }
-}
-
-.sonar-d3 .treemap-link i,
-.sonar-d3 .treemap-link i:before {
-  vertical-align: top;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.sonar-d3 .treemap-cell-small {
-  .treemap-inner { display: none; }
-}
-
-.sonar-d3 .treemap-cell-very-small {
-  .treemap-inner { display: none; }
-  .treemap-link { display: none; }
-}
-
-.sonar-d3 .treemap-breadcrumbs {
-  margin-top: 10px;
-  padding-top: 7px;
-  border-top: 1px solid #E6E6E6;
-}
-
-.sonar-d3 .treemap-breadcrumbs-item {
-  color: @secondFontColor;
-
-  & > [class^="icon-qualifier-"] { margin-right: 4px; }
-}
-
-.sonar-d3 .treemap-breadcrumbs-item + .treemap-breadcrumbs-item {
-  margin-left: 10px;
-
-  & > .icon-chevron-right { margin-right: 10px; }
-}
-
-
-/* ------------------- Admin pages ------------------- */
-
-.admin-page-title {
-  margin-bottom: 0px;
-}
-
-.admin-page-description {
-  font-size: 85%;
-  font-weight: normal;
-  margin-bottom: 25px;
-}
-
-
-/* ------------------- Bubble popups ----------------- */
-
-@popupArrowSize: 8px;
-
-.bubble-popup {
-  position: absolute;
-  z-index: 100;
-  margin-top: -16px;
-  margin-left: @popupArrowSize;
-  padding: 10px;
-  border: 1px solid @barBorderColor;
-  border-radius: 3px;
-  .box-sizing(border-box);
-  background-color: @white;
-  box-shadow: @defaultShadow;
-}
-
-.bubble-popup-arrow,
-.bubble-popup-arrow:after {
-  position: absolute;
-  display: block;
-  .size(0, 0);
-  border: @popupArrowSize solid transparent;
-}
-
-.bubble-popup-arrow {
-  top: 15px;
-  left: -@popupArrowSize;
-  border-left-width: 0;
-  border-right-color: @barBorderColor;
-
-  &:after {
-    content: " ";
-    left: 1px;
-    bottom: -@popupArrowSize;
-    border-left-width: 0;
-    border-right-color: @white;
-  }
-}
-
-.bubble-popup-bottom {
-  margin-top: @popupArrowSize;
-  margin-left: -16px;
-
-  .bubble-popup-arrow {
-    top: -@popupArrowSize;
-    left: 15px;
-    border-left-width: @popupArrowSize;
-    border-top-width: 0;
-    border-right-color: transparent;
-    border-bottom-color: @barBorderColor;
-
-    &:after {
-      left: -@popupArrowSize;
-      bottom: -@popupArrowSize - 1px;
-      border-left-width: @popupArrowSize;
-      border-top-width: 0;
-      border-right-color: transparent;
-      border-bottom-color: @white;
-    }
-  }
-}
-
-.bubble-popup-bottom-right {
-  .bubble-popup-bottom;
-  margin-left: 0;
-  margin-right: -8px;
-
-  .bubble-popup-arrow {
-    left: auto;
-    right: 15px;
-  }
-}
-
-.bubble-popup-container {
-  max-width: 560px;
-  max-height: 300px;
-  padding-right: 30px;
-  overflow: auto;
-}
-
-.bubble-popup-title {
-  margin-bottom: 5px;
-  font-weight: 600;
-}
-
-.bubble-popup-section {
-  width: 450px;
-  padding-bottom: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.fluid {
-    width: auto;
-    max-width: 450px;
-  }
-}
-
-.bubble-popup-section + .bubble-popup-section,
-.bubble-popup-section + .bubble-popup-title {
-  margin-top: 10px;
-}
-
-.bubble-popup-list {
-  margin-top: 5px;
-
-  & > li { padding: 2px 0; }
-}
-
-
-@overlayPopupMargin: 20px;
-@overlayPopupPadding: 40px;
-
-.overlay-popup {
-  position: fixed;
-  z-index: 1200;
-  top: @overlayPopupMargin;
-  bottom: @overlayPopupMargin;
-  left: @overlayPopupMargin;
-  right: @overlayPopupMargin;
-  padding: @overlayPopupPadding @overlayPopupPadding @overlayPopupPadding + 30px;
-  background-color: #fff;
-  overflow: scroll;
-  box-shadow: 0 0 20px 15px rgba(0, 0, 0, 0.5);
-
-  .modal-foot {
-    position: fixed;
-    z-index: 1201;
-    bottom: @overlayPopupMargin;
-    left: @overlayPopupMargin;
-    right: @overlayPopupMargin;
-  }
-}
-
-
-.sq-logo .sq-logo-letter {
-  fill: #fff;
-}
-
-.sq-logo .sq-logo-arc {
-  fill: @blue;
-}
diff --git a/server/sonar-web/src/main/less/variables.less b/server/sonar-web/src/main/less/variables.less
index f8eb0ee0561..0857574ca68 100644
--- a/server/sonar-web/src/main/less/variables.less
+++ b/server/sonar-web/src/main/less/variables.less
@@ -1,18 +1,37 @@
 /*
- * Fonts
+ * Base
  */
 
-@smallFontSize: 12px;
+@baseBackgroundColor: #fff;
+@baseFontColor: #444;
+@baseFontColorLight: #595959;
+@baseFontFamily: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 @baseFontSize: 13px;
+@baseLineHeight: unit(16px / @baseFontSize);
+
+
+/*
+ * Code
+ */
+
+@monoFontFamily: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+@monoFontSize: 12px;
+@monoLineHeight: 18px;
+
+
+/*
+ * Font Sizes
+ */
+
+@smallFontSize: 12px;
 @mediumFontSize: 14px;
 @bigFontSize: 16px;
-@baseFontColor: #444;
-@baseLightFontColor: #595959;
+
+
+
 @secondFontColor: #777;
 @headerFontSize: 16px;
 
-@monoFontFamily: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-
 
 
 /*
@@ -100,3 +119,12 @@
  */
 
 @defaultTransitionOptions: .2s ease;
+
+
+
+
+/*
+ * Page
+ */
+
+@pageFooterHeight: 60px;
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/branding/_footer.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/branding/_footer.html.erb
index 332b7691a1e..968b000588b 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/branding/_footer.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/branding/_footer.html.erb
@@ -1,6 +1,6 @@
 <div>
   This application is based on
   <a href="http://www.sonarqube.org/" title="SonarQube&trade;">SonarQube&trade;</a>
-  but is <em>not</em> an official version provided by
+  but is <strong>not</strong> an official version provided by
   <a href="http://www.sonarsource.com" title="SonarSource SA">SonarSource SA</a>.
 </div>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb
index e286cbd1f93..4a470b21ea6 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb
@@ -1,4 +1,4 @@
-<div id="dashboard">
+<div class="page" id="dashboard">
   <% if @resource -%>
   <span class="hidden" id="is-project-dashboard">&nbsp;</span>
   <% end -%>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index de953be5a51..f4c66cc01b4 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -1,6 +1,6 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE html>
 <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
-<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
index 33da7ed3d77..d426dd667d9 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
@@ -6,20 +6,17 @@
    @project=@resource unless @project || selected_section==Navigation::SECTION_HOME
    period_param = "period=#{u(params[:period])}" if params[:period]
 %>
-<div id="container">
-  <nav class="navbar navbar-global"></nav>
+<div class="page-wrapper" id="container">
+  <nav class="navbar navbar-global page-container" id="global-navigation"></nav>
 
   <% if selected_section==Navigation::SECTION_RESOURCE || selected_section==Navigation::SECTION_CONFIGURATION %>
-    <nav class="navbar navbar-context"></nav>
+    <nav class="navbar navbar-context page-container" id="context-navigation"></nav>
   <% end %>
 
   <%= yield :header -%>
 
-  <div id="body">
+  <div id="body" class="page-container">
     <div id="content">
-      <% if @project %>
-        <div class="print"><h2><%= h @project.name() %></h2></div>
-      <% end %>
       <div class="error" id="error" style="display:none">
         <span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#error').hide();return false;"><%= message('hide').downcase -%></a>]
       </div>
@@ -36,28 +33,26 @@
 
 <% unless params[:hd]=='false' %>
   <%= yield :footer %>
-  <div id="footer">
+  <div id="footer" class="page-footer page-container">
     <% controller.java_facade.getWebFooters().each do |footer| %>
       <% if footer.getHtml() %>
         <div><%= footer.getHtml().to_s %></div>
       <% end %>
     <% end %>
-    <div id="ftlinks">
-      <%= render 'branding/footer' -%>
-      <div>
-        Version <%= sonar_version -%> -
-        <a href="http://www.gnu.org/licenses/lgpl-3.0.txt" target="lgpl_v3">LGPL v3</a> -
-        <a href="http://www.sonarqube.org" target="sonar">Community</a> -
-        <a href="http://www.sonarqube.org/documentation" target="sonar_doc">Documentation</a> -
-        <a href="http://www.sonarqube.org/support" target="support">Get Support</a> -
-        <a href="http://sonar-plugins.codehaus.org" target="plugins">Plugins</a> -
-        <a href="<%= ApplicationController.root_context -%>/api_documentation">Web Service API</a>
-        <% unless DatabaseVersion.production? %>
-          <br><br><span class="error big" id="evaluation_warning">Embedded database should be used for evaluation purpose only</span>
-          <br><br><span class="error">The embedded database will not scale, it will not support upgrading to newer versions of SonarQube, and there is no support for migrating your data out of it into a different database engine.</span>
-        <% end %>
-      </div>
-      <!--[if lte IE 8 ]><br/><span class="ie-warn">IE 8 is not supported. Some widgets may not be properly displayed. Please switch to a <a target="_blank" href="http://redirect.sonarsource.com/doc/requirements.html">supported version or another supported browser</a>.</span><!--<![endif]-->
+    <%= render 'branding/footer' -%>
+    <div>
+      Version <%= sonar_version -%> -
+      <a href="http://www.gnu.org/licenses/lgpl-3.0.txt" target="lgpl_v3">LGPL v3</a> -
+      <a href="http://www.sonarqube.org" target="sonar">Community</a> -
+      <a href="http://www.sonarqube.org/documentation" target="sonar_doc">Documentation</a> -
+      <a href="http://www.sonarqube.org/support" target="support">Get Support</a> -
+      <a href="http://sonar-plugins.codehaus.org" target="plugins">Plugins</a> -
+      <a href="<%= ApplicationController.root_context -%>/api_documentation">Web Service API</a>
+      <% unless DatabaseVersion.production? %>
+        <br><br><span class="error big" id="evaluation_warning">Embedded database should be used for evaluation purpose only</span>
+        <br><br><span class="error">The embedded database will not scale, it will not support upgrading to newer versions of SonarQube, and there is no support for migrating your data out of it into a different database engine.</span>
+      <% end %>
     </div>
+    <!--[if lte IE 8 ]><br/><span class="ie-warn">IE 8 is not supported. Some widgets may not be properly displayed. Please switch to a <a target="_blank" href="http://redirect.sonarsource.com/doc/requirements.html">supported version or another supported browser</a>.</span><!--<![endif]-->
   </div>
 <% end %>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_nolayout.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_nolayout.html.erb
index 5cc1498a0db..9102b4f8c4b 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_nolayout.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_nolayout.html.erb
@@ -1,7 +1,7 @@
-<div id="body" class="nolayout">
+<div id="body" class="page">
   <% if @snapshot %><div class="print"><h2><%= h @snapshot.project.name(true) %></h2></div><% end %>
   <div class="error" id="error" style="display:none"><span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#error').hide();return false;"><%= message('hide').downcase -%></a>]</div>
   <div class="warning" id="warning" style="display:none"><span id="warningmsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#warning').hide();return false;"><%= message('hide').downcase -%></a>]</div>
   <div class="notice" id="info" style="display:none"><span id="infomsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#info').hide();return false;"><%= message('hide').downcase -%></a>]</div>
   <%= yield %>
-</div>
\ No newline at end of file
+</div>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb
index 52e8974dc14..1fd6754bef0 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb
@@ -10,10 +10,10 @@
    end
   %>
 <%= render :partial => 'layouts/head' unless params[:hd]=='false' %>
-<%= render :partial => 'layouts/navbar' %>
 <% if params[:layout]=='false' %>
   <%= render :partial => 'layouts/nolayout' %>
 <% else %>
   <%= render :partial => 'layouts/layout' %>
 <% end %>
+<%= render :partial => 'layouts/navbar' %>
 <%= render :partial => 'layouts/footer' unless params[:hd]=='false' %>