From: Stas Vilchik <vilchiks@gmail.com>
Date: Wed, 4 Feb 2015 19:53:35 +0000 (+0100)
Subject: rework css
X-Git-Tag: 5.1-RC1~397
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e0aa81c1df99db3039775c3aa2dbad5e685b64be;p=sonarqube.git

rework css
---

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/analysis-reports.less b/server/sonar-web/src/main/less/analysis-reports.less
deleted file mode 100644
index 5edbcfed230..00000000000
--- a/server/sonar-web/src/main/less/analysis-reports.less
+++ /dev/null
@@ -1,93 +0,0 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-@import (reference) "navigator/base";
-
-
-@pendingColor: #fdfce2;
-@workingColor: #ecf9fc;
-@doneColor: #ecfced;
-@failedColor: #fcecec;
-
-
-.analysis-reports-actions {
-  margin-bottom: 10px;
-}
-
-.analysis-reports-total {
-  float: right;
-  margin-top: -20px;
-}
-
-.analysis-reports-results .navigator-results-list > li {
-  cursor: default;
-}
-
-.analysis-reports-no-results {
-  border: none !important;
-}
-
-.analysis-reports-report-pending {
-  background-color: @pendingColor !important;
-}
-
-.analysis-reports-report-working {
-  background-color: @workingColor !important;
-}
-
-.analysis-reports-report-done {
-  background-color: @doneColor !important;
-}
-
-.analysis-reports-report-failed {
-  background-color: @failedColor !important;
-
-  .analysis-reports-report-id { color: darken(@failedColor, 60%); }
-}
-
-.analysis-reports-project {
-  display: inline-block;
-  vertical-align: middle;
-  width: 30%;
-  .text-ellipsis;
-}
-
-.analysis-reports-timestamp {
-  display: inline-block;
-  vertical-align: middle;
-  width: 220px;
-  margin-left: 15px;
-}
-
-.analysis-reports-report-id {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  opacity: 0.3;
-  font-size: @bigFontSize;
-
-  &:before { content: '#'; }
-}
-
-.analysis-reports-spinner {
-  .size(200px, 200px);
-  margin-top: 20px;
-}
-
-.analysis-reports-spinner,
-.analysis-reports-spinner:before
-.analysis-reports-spinner:after {
-  -webkit-animation-duration: 6s;
-  animation-duration: 6s;
-}
-
-.analysis-reports-timestamp-spinner {
-  margin-left: 10px;
-}
-
-.analysis-reports-timestamp-spinner,
-.analysis-reports-timestamp-spinner:before,
-.analysis-reports-timestamp-spinner:after {
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
-}
diff --git a/server/sonar-web/src/main/less/api-documentation.less b/server/sonar-web/src/main/less/api-documentation.less
deleted file mode 100644
index d73a319aec8..00000000000
--- a/server/sonar-web/src/main/less/api-documentation.less
+++ /dev/null
@@ -1,154 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "navigator/config";
-
-@apiDocumentationSidebarWidth: 230px;
-
-.api-documentation-navigator {
-
-  .navigator-side {
-    display: table-cell;
-    vertical-align: top;
-    width: @apiDocumentationSidebarWidth + 2 * @navigatorPadding;
-    min-width: 0;
-  }
-
-  .navigator-header {
-    margin-left: 0;
-    .spinner { margin-top: 9px; }
-  }
-
-  .navigator-actions {
-    height: @navigatorHeaderHeight;
-    width: @apiDocumentationSidebarWidth;
-    margin: @navigatorPadding;
-    padding: 0 @navigatorPadding;
-
-    .navigator-header-title {
-      color: @baseFontColor;
-      font-size: 13px;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-  }
-
-  .api-documentation-show-internals {
-    margin: @navigatorPadding;
-    padding: 0 @navigatorPadding;
-  }
-
-  .navigator-results {
-    width: @apiDocumentationSidebarWidth;
-    min-width: 0;
-  }
-
-  .navigator-details { margin-left: 0; }
-
-  .internal {
-    color: @navigatorBarBackground;
-    background-color: rgb(127, 127, 127);
-    border-radius: 2px;
-    padding: 1px 5px;
-  }
-}
-
-
-.api-documentation-nav {
-
-  .navigator-results-list {
-
-    & > li {
-      border-color: transparent;
-
-      &:hover:not(.active):not(.empty) {
-        background-color: @navigatorBarBackground;
-      }
-
-      &.active {
-        border-color: #4B9FD5;
-      }
-
-      &.empty {
-        cursor: default;
-      }
-
-      .line {
-        padding-top: 2px;
-        padding-bottom: 2px;
-      }
-    }
-  }
-}
-
-.api-documentation-actions {
-  margin-top: 10px;
-  margin-left: 5px;
-
-  ol {
-    li {
-      list-style: decimal;
-      margin-left: 2em;
-    }
-  }
-
-  .api-documentation-action {
-    margin-top: 30px;
-
-    & > p, & > h3 {
-      margin-top: 5px;
-    }
-
-    table {
-      width: 100%;
-
-      tr {
-        border-top: 1px solid @navigatorBorderLightColor;
-
-        td {
-          padding: 10px 0 10px 5px;
-          margin: 5px;
-          vertical-align: top;
-
-          ul {
-            li {
-              list-style: square;
-              margin-left: 2em;
-            }
-          }
-
-          ul.possible-values {
-            display: inline;
-
-            li {
-              display: inline;
-              margin: 0;
-
-              &:before {
-                content: ', '
-              }
-
-              &:first-child:before {
-                content: ''
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .example-response {
-      text-decoration: underline;
-    }
-
-    .example-response-content {
-      margin: 10px 0;
-      padding: 5px;
-      background-color: @navigatorBarBackground;
-      border: 1px solid @navigatorBorderLightColor;
-
-      code {
-        white-space: pre-wrap;
-      }
-    }
-  }
-}
diff --git a/server/sonar-web/src/main/less/coding-rules.less b/server/sonar-web/src/main/less/coding-rules.less
deleted file mode 100644
index 27ee2aceae4..00000000000
--- a/server/sonar-web/src/main/less/coding-rules.less
+++ /dev/null
@@ -1,412 +0,0 @@
-@import (reference) 'mixins';
-@import (reference) 'variables';
-@import (reference) 'ui';
-@import (reference) 'navigator/config';
-
-@facetsHeight: 36px;
-
-.coding-rules-page {
-
-  .navigator-facets {
-    min-height: 3 * @facetsHeight;
-  }
-
-  .navigator-results .spinner {
-    margin: @navigatorPadding;
-  }
-
-  .navigator-results .line-right {
-    margin-top: -14px;
-    float: none;
-    text-align: right;
-  }
-
-  .navigator-results-list .line {
-    padding-top: 3px;
-    padding-bottom: 3px;
-  }
-
-  .navigator-results-list .line + .line {
-    padding-top: 0;
-  }
-
-  .navigator-results-list .line-small {
-    color: @secondFontColor;
-  }
-
-}
-
-.navigator-filter-query {
-  min-width: 40em;
-  padding: 0 5px;
-
-  input {
-    height: 80%;
-    width: 100%;
-    font-size: @baseFontSize;
-    vertical-align: middle;
-    vertical-align: -webkit-baseline-middle;
-  }
-}
-
-
-/*
- * Detail
- */
-
-.coding-rules-detail-header,
-.coding-rules-detail-title {
-  position: relative;
-  margin: 1em 0;
-  line-height: 1.5;
-  font-size: @bigFontSize;
-  font-weight: 400;
-}
-
-.coding-rules-detail-header {
-  margin: 0;
-  padding-right: 100px;
-  font-size: 18px;
-}
-
-.coding-rules-detail-title {
-  display: inline-block;
-  margin-top: 2em;
-}
-
-.coding-rules-detail-permalink {
-  position: absolute;
-  top: 0; right: 0;
-  font-size: @baseFontSize;
-  font-weight: normal;
-  text-decoration: none;
-  .trans;
-
-  &:hover { color: @highlighted; }
-}
-
-.coding-rules-detail-context {
-  margin-bottom: @navigatorPadding;
-  padding: @navigatorPadding / 2;
-  border: 1px solid @contextBorder;
-  background-color: @contextBackground;
-
-  .coding-rules-detail-quality-profile { margin-left: 0; }
-  .coding-rules-detail-quality-profile-name,
-  .coding-rules-detail-quality-profile-severity,
-  .coding-rules-detail-quality-profile-parameters,
-  .coding-rules-detail-quality-profile-actions {
-    vertical-align: top;
-  }
-  .coding-rules-detail-quality-profile-name,
-  .coding-rules-detail-quality-profile-severity {
-    width: 1px;
-    padding-right: @navigatorPadding;
-    white-space: nowrap;
-  }
-
-  .coding-rules-detail-quality-profile-parameter {
-    display: table-cell;
-  }
-}
-
-.coding-rules-detail-quality-profile-parameter {
-  display: block;
-  height: 100%;
-  padding-top: 0;
-  padding-right: @navigatorPadding;
-
-  .key, .value, .sep {
-    display: inline;
-    vertical-align: top;
-  }
-
-  .value {
-    display: inline-block;
-    vertical-align: top;
-    line-height: 23px;
-    max-width: 300px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: @monoFontFamily;
-  }
-}
-.coding-rules-detail-quality-profile-parameter + .coding-rules-detail-quality-profile-parameter { margin-top: 0; }
-
-.coding-rules-detail-context-actions {
-
-  padding: @navigatorPadding / 2;
-  background-color: @contextBackground;
-  border: 1px solid @contextBorder;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.coding-rules-detail-context-actions-quality-profile {
-  vertical-align: middle;
-  margin-right: @navigatorPadding;
-  font-weight: bold;
-}
-
-.coding-rules-detail-context-actions-item {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: @navigatorPadding;
-
-  .limited {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 180px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .limited-big {
-    max-width: 480px;
-  }
-}
-
-.coding-rules-detail-properties {
-  margin: @navigatorPadding 0;
-  font-size: 0;
-}
-
-.coding-rules-detail-properties + .coding-rules-detail-properties {
-  margin-top: -@navigatorPadding;
-}
-
-.coding-rules-detail-property {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 2 * @navigatorPadding;
-  font-size: @smallFontSize;
-  height: 22px;
-  line-height: 22px;
-
-  .select2-search-field { line-height: 1; }
-}
-
-.coding-rules-subcharacteristic {
-  cursor: pointer;
-}
-
-.coding-rules-debt-popup {
-  h3 {
-    display: inline
-  }
-}
-
-.coding-rules-detail-tag + .coding-rules-detail-tag {
-  margin-left: @navigatorPadding;
-}
-
-.coding-rules-detail-tags-change {
-  cursor: pointer;
-
-  &:hover {
-    span { text-decoration: underline; }
-  }
-}
-
-.coding-rules-detail-tag-edit {
-  line-height: 1;
-}
-
-.coding-rules-details-tag-edit-cancel {
-  vertical-align: middle;
-}
-
-.coding-rules-detail-description {
-  margin: 2 * @navigatorPadding 0;
-}
-
-.coding-rules-detail-description-extra {
-  margin-top: -@navigatorPadding;
-}
-
-.coding-rules-detail-extend-description-form {
-  margin: @navigatorPadding 0;
-}
-
-.coding-rules-detail-parameters {
-  width: 100%;
-  margin: @navigatorPadding 0 @navigatorPadding * 2;
-}
-
-.coding-rules-detail-parameter {
-
-}
-
-.coding-rules-detail-parameter-name {
-  width: 1px;
-  vertical-align: top;
-  padding: 5px 10px 5px 0;
-  font-weight: bold;
-}
-
-.coding-rules-detail-parameter-description {
-  vertical-align: top;
-  padding: 5px 5px;
-
-  .subtitle {
-    margin-top: @navigatorPadding;
-    font-size: @baseFontSize;
-  }
-}
-
-.coding-rules-detail-parameter-value {
-  font-family: @monoFontFamily;
-  word-break: break-all;
-}
-
-.coding-rules-detail-parameter-details {
-  display: inline-block;
-  font-size: @baseFontSize;
-  padding-left: 5px;
-}
-
-.coding-rules-detail-parameter-original {
-  margin-left: @navigatorPadding;
-  font-size: @smallFontSize;
-}
-
-
-// Quality Profiles
-.coding-rules-detail-quality-profiles-section {
-
-}
-
-.coding-rules-detail-quality-profiles-header {
-  margin-top: 3 * @navigatorPadding;
-}
-
-.coding-rules-detail-quality-profiles,
-.coding-rules-detail-list {
-  width: 100%;
-  line-height: 22px;
-
-  td {
-    border-top: 1px solid @barBorderColor;
-  }
-
-  tr:first-child td {
-    border-top: none;
-  }
-}
-
-.coding-rules-detail-quality-profile-name,
-.coding-rules-detail-list-name {
-  vertical-align: top;
-  width: 1px;
-  padding: 8px 5px 8px 0;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.coding-rules-detail-quality-profile-severity,
-.coding-rules-detail-list-severity {
-  vertical-align: top;
-  width: 1px;
-  padding: 8px 5px;
-  white-space: nowrap;
-}
-
-.coding-rules-detail-quality-profile-parameters,
-.coding-rules-detail-list-parameters {
-  vertical-align: top;
-  padding: 8px 5px;
-}
-
-.coding-rules-detail-quality-profile-actions,
-.coding-rules-detail-list-actions {
-  vertical-align: top;
-  width: 1px;
-  padding: 8px 0 8px 5px;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.coding-rules-detail-quality-profile-inheritance {
-  margin-top: 4px;
-  font-size: @smallFontSize;
-  font-weight: normal;
-
-  i {
-    position: relative;
-    top: -1px;
-    font-size: @iconSmallFontSize;
-  }
-}
-
-.coding-rules-detail-quality-profiles-activation {
-  margin-top: -3px;
-  margin-left: @navigatorPadding;
-}
-
-.coding-rules-detail-quality-profiles-template-caption {
-  margin-bottom: @navigatorPadding;
-}
-
-// Bulk Change
-.coding-rules-bulk-change-dropdown {
-  position: absolute;
-  z-index: 10;
-  width: 200px;
-  border: 1px solid @navigatorBorderLightColor;
-  .box-sizing(border-box);
-  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
-  background-color: #fff;
-}
-
-.coding-rules-bulk-change-dropdown-link {
-  display: block;
-  max-width: 190px;
-  height: 30px;
-  line-height: 30px;
-  padding: 0 @navigatorPadding;
-  font-size: @smallFontSize;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  .link-no-underline;
-  .trans;
-
-  &:hover { background-color: @navigatorBarBackground; }
-
-  strong {
-    font-weight: bold;
-  }
-}
-
-input.coding-rules-name-key {
-  width: 30em;
-}
-
-textarea.coding-rules-markdown-description {
-  width: 100%;
-  margin-bottom: 4px;
-}
-
-.coding-rules-modal .property {
-  input, textarea {
-    width: 100%;
-  }
-}
-
-.coding-rules-subcharacteristic-more {
-  display: none;
-}
-
-.coding-rules-list-tags {
-  display: inline-block;
-  vertical-align: top;
-  max-width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  .icon-tags:before { font-size: 12px; }
-}
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/component-viewer.less b/server/sonar-web/src/main/less/component-viewer.less
deleted file mode 100644
index 71958756200..00000000000
--- a/server/sonar-web/src/main/less/component-viewer.less
+++ /dev/null
@@ -1,554 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
-
-@headerHeight: 60px;
-@workspaceWidth: 250px;
-
-
-.component-viewer {
-  width: 100%;
-  min-width: 600px;
-  border-left-width: 0;
-  .box-sizing(border-box);
-  .clearfix;
-}
-
-.component-viewer-workspace-enabled {
-  .component-viewer-workspace .component-viewer-workspace-list,
-  .component-viewer-workspace .component-viewer-workspace-title { display: block; }
-}
-
-
-.component-viewer-title {
-  color: @baseFontColor;
-  font-size: @baseFontSize;
-  font-weight: bold;
-}
-
-.component-viewer-title-separator {
-  padding: 0 4px;
-}
-
-
-.component-viewer-workspace {
-  position: relative;
-  float: left;
-  min-width: 30px;
-  margin-right: 10px;
-  border: 1px solid @barBorderColor;
-  background-color: @barBackgroundColor;
-
-  &.overflow {
-    .box-sizing(border-box);
-  }
-}
-
-.component-viewer-workspace-header {
-  position: relative;
-  height: 30px;
-  border-bottom: 1px solid @barBorderColor;
-}
-
-.component-viewer-workspace-title {
-  display: none;
-  padding: 0 30px 0 10px;
-  line-height: 30px;
-  text-transform: uppercase;
-}
-
-.component-viewer-workspace-list {
-  display: none;
-  width: @workspaceWidth;
-  padding: 8px 0;
-  .box-sizing(border-box);
-}
-
-.component-viewer-workspace-item {
-  padding: 0 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.active > a { font-weight: bold; }
-  .subtitle { line-height: 16px; }
-}
-
-.component-viewer-workspace-item + .component-viewer-workspace-item {
-  margin-top: 10px;
-}
-
-.component-viewer-workspace-transition {
-  margin-top: 7px;
-  margin-left: 7px;
-  font-size: @smallFontSize;
-}
-
-.component-viewer-workspace-options {
-  margin-top: 5px;
-  margin-left: 7px;
-  padding-left: 10px;
-  border-left: 3px solid darken(@barBorderColor, 10%);
-}
-
-.component-viewer-workspace-option {
-  line-height: 16px;
-  padding: 3px 0;
-
-  &.active > a { font-weight: bold; }
-}
-
-.component-viewer-workspace-toggle {
-  position: absolute;
-  top: 0; right: 0;
-  .size(30px, 30px);
-  .trans;
-
-  &:hover { background-color: @barBorderColor; }
-}
-
-.component-viewer-source {
-  position: relative;
-  float: left;
-
-  &.overflow {
-    .box-sizing(border-box);
-    overflow: auto;
-  }
-
-  .code th {
-
-    &.settings {
-      line-height: 22px;
-      text-align: left;
-
-      .icon-not-favorite,
-      .icon-favorite {
-        float: right;
-        padding-top: 2px;
-      }
-    }
-
-    &.settings-toggle {
-      vertical-align: top;
-      border-right: 1px solid @barBorderColor;
-      text-align: center;
-      white-space: nowrap;
-
-      .icon-settings { font-size: @iconSmallFontSize; }
-    }
-  }
-
-  .code .coverage-tests {
-    cursor: pointer;
-  }
-
-  .code .duplications {
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    font-size: 0 !important;
-
-    .duplication {
-      display: inline-block;
-      vertical-align: top;
-      .size(5px, 19px);
-    }
-
-    .duplication + .duplication { margin-left: 2px; }
-
-    .duplication-exists {
-      background-color: @lightOrange;
-      cursor: pointer;
-      .trans;
-    }
-
-    .duplication-hover {
-      background-color: darken(@lightOrange, 10%);
-    }
-  }
-
-  .code .measures {
-    padding: 4px 5px;
-    border-left: 1px solid @barBorderColor;
-    border-bottom: 1px solid @barBorderColor;
-    background-color: @barBackgroundColor;
-  }
-
-  .code .stat {
-
-    &.coverage-green {
-      background-color: lighten(@green, 15%) !important;
-      color: @baseFontColor;
-    }
-
-    &.coverage-orange {
-      background-color: lighten(@orange, 15%) !important;
-      color: @baseFontColor;
-    }
-
-    &.coverage-red {
-      background-color: lighten(@red, 15%) !important;
-      color: @baseFontColor;
-    }
-  }
-
-  .code .row-expand {
-
-    .stat, .line {
-      border-left: none;
-      border-right: none;
-      background: url(../images/gray-stripes.png) repeat;
-    }
-
-    .line { text-align: right; }
-  }
-
-  .code .row-hidden { display: none; }
-
-}
-
-
-.component-viewer-source-settings {
-  display: none;
-
-  &.open { display: inline-block; }
-
-  & > li {
-    display: inline;
-    margin-right: 10px;
-  }
-}
-
-
-
-
-.component-viewer-header {
-  position: relative;
-  margin-bottom: 10px;
-}
-
-.component-viewer-header-bar {
-  .clearfix;
-  border: 1px solid @barBorderColor;
-  background-color: @barBackgroundColor;
-}
-
-.component-viewer-header-bar + .component-viewer-header-bar {
-  border-top: 1px solid @barBorderColor;
-}
-
-.component-viewer-header-two-lines-mixin() {
-  @lineHeight: 24px;
-  @topPadding: @headerHeight / 2 - @lineHeight;
-  line-height: @lineHeight;
-  padding: @topPadding 10px;
-}
-
-.component-viewer-header-component {
-  float: left;
-  .component-viewer-header-two-lines-mixin;
-
-}
-
-.component-viewer-header-component-project {
-  color: #777;
-  font-size: @smallFontSize;
-}
-
-.component-viewer-header-component-name {
-  font-weight: 600;
-}
-
-.component-viewer-header-favorite {
-  position: relative;
-  top: -2px;
-  margin-left: 4px;
-  .link-no-underline;
-}
-
-.component-viewer-header-measures {
-  float: right;
-}
-
-.component-viewer-header-measures-scope {
-  position: relative;
-  float: left;
-  height: @headerHeight;
-}
-
-.component-viewer-header-measures-toggle-scope {
-  position: absolute;
-  top: 0;
-  display: block;
-  .size(100%, 6px);
-  margin-bottom: -1px;
-  border-left: 1px solid @barBackgroundColor;
-  .box-sizing(border-box);
-  background-color: lighten(@blue, 30%);
-  .link-no-underline;
-  .transform-origin(0 0);
-  .trans;
-
-  &:after {
-    content: " ";
-    position: absolute;
-    top: 100%;
-    .size(100%, 4px);
-    background-color: transparent;
-  }
-
-  &:hover {
-    background-color: lighten(@blue, 15%);
-    .scale2(1, 2);
-  }
-
-  &.active { background-color: @blue; }
-  &.inactive { background-color: transparent; }
-}
-
-.component-viewer-header-measures-expand {
-  display: block;
-  padding: 11px 20px;
-  white-space: nowrap;
-  .link-no-underline;
-
-  a& {
-    .trans(background);
-
-    &:hover { background-color: @barBorderColor; }
-
-    &:active, &.active {
-      margin-bottom: -1px;
-      border-bottom: 1px solid #fff;
-      border-left-color: @barBorderColor;
-      background-color: #fff;
-    }
-  }
-}
-
-.component-viewer-header-measures-scope + .component-viewer-header-measures-scope {
-  border-left-color: @barBorderColor;
-}
-
-.component-viewer-header-measures-expand .icon-dropdown {
-  margin-left: 6px;
-  margin-right: -10px;
-  color: @baseFontColor;
-}
-
-.component-viewer-header-measure {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: @baseFontSize;
-
-  .rating {
-    font-size: 18px;
-  }
-}
-
-.component-viewer-header-measure + .component-viewer-header-measure {
-  margin-left: 15px;
-}
-
-.component-viewer-header-measure-label {
-  display: block;
-  margin-top: 2px;
-  color: #777;
-  font-size: @smallFontSize;
-}
-
-.component-viewer-header-measure-value {
-  display: block;
-  color: @baseFontColor;
-  font-size: 18px;
-  font-weight: 300;
-
-  i {
-    position: relative;
-    top: -2px;
-  }
-}
-
-.component-viewer-header-measure-issues {
-  width: 45px;
-}
-
-.component-viewer-header-measure-issue {
-  min-width: 1px;
-  height: 6px;
-
-  &.s-blocker { background-color: @severityBlockerColor; }
-  &.s-critical { background-color: @severityCriticalColor; }
-  &.s-major { background-color: @severityMajorColor; }
-  &.s-minor { background-color: @severityMinorColor; }
-  &.s-info { background-color: @severityInfoColor; }
-}
-
-.component-viewer-header-measure-issue + .component-viewer-header-measure-issue {
-  margin-top: 1px;
-}
-
-.component-viewer-header-actions {
-  float: right;
-  display: block;
-  padding: 20px 10px;
-  font-size: @iconFontSize;
-  .link-no-underline;
-}
-
-.component-viewer-header-more-actions {
-  position: absolute;
-  z-index: 100;
-  right: 0; top: 60px;
-  padding: 10px;
-  border: 1px solid @barBorderColor;
-  background-color: @white;
-  line-height: 1.8;
-}
-
-.component-viewer-header-expanded-bar {
-  display: none;
-  .clearfix;
-  position: relative;
-  margin-top: -1px;
-  border: 1px solid @barBorderColor;
-  border-top: none;
-  background-color: #fff;
-
-  &.active { display: block; }
-}
-
-.component-viewer-header-expanded-bar-section {
-  display: inline-block;
-  vertical-align: top;
-  width: 250px;
-
-  &.large { width: 350px; }
-}
-
-.component-viewer-header-expanded-bar-section-actions {
-  margin-left: 15px;
-
-  .component-viewer-header-expanded-bar-section-list > li {
-    padding: 4px 0;
-    line-height: 1.5;
-  }
-}
-
-.component-viewer-header-expanded-bar-section-title {
-  padding: 10px 10px 6px 10px;
-  color: #777;
-  font-size: @smallFontSize;
-}
-
-.component-viewer-header-expanded-bar-section-list {
-  max-height: 120px; // 5 items
-  overflow: auto;
-  .webkit-scrollbar;
-
-  & > li > .item {
-    position: relative;
-    display: block;
-    padding: 4px 60px 4px 10px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    & > .number {
-      position: absolute;
-      right: 25px;
-      top: 50%;
-      margin-top: -8px;
-    }
-
-    & > i {
-      position: absolute;
-      top: 50%;
-      right: 6px;
-      margin-top: -7px;
-    }
-
-    .duration {
-      display: inline-block;
-      min-width: 40px;
-    }
-  }
-
-  & > li > a.item {
-    color: @baseFontColor;
-    .link-no-underline;
-    .trans;
-
-    &:hover { background-color: @barBackgroundColor; }
-    &:active, &.active { background-color: @lightBlue; }
-  }
-}
-
-.component-viewer-header-expanded-bar-bulk-change {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  padding: 4px 10px;
-  font-size: @smallFontSize;
-  .trans;
-
-  &:hover { background-color: @barBackgroundColor; }
-}
-
-.component-viewer-header-decoration {
-  margin-top: 10px;
-}
-
-.component-viewer-header-time-changes {
-  padding: 10px;
-}
-
-.component-viewer-header-sqale-rating {
-  float: left;
-  font-size: 20px;
-}
-
-
-.component-viewer-popup-test {
-  position: relative;
-  display: block;
-  height: 16px;
-  line-height: 16px;
-}
-
-.component-viewer-popup-test-file {
-}
-
-.component-viewer-popup-test-name {
-  display: block;
-  border-left: 20px solid transparent;
-  border-right: 44px solid transparent;
-  .box-sizing(border-box);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.component-viewer-popup-test-status {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -8px;
-}
-
-.component-viewer-popup-test-duration {
-  position: absolute;
-  top: 0; right: 0;
-  color: #777;
-  font-size: @smallFontSize;
-}
-
-.component-viewer-popup-duplications {
-  padding: 4px 0;
-  white-space: normal;
-}
-
-.component-viewer-popup-label {
-  padding-right: 6px;
-  font-weight: 500;
-}
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/components/component-viewer.less b/server/sonar-web/src/main/less/components/component-viewer.less
new file mode 100644
index 00000000000..ad39f12a0ce
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/component-viewer.less
@@ -0,0 +1,554 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "ui";
+
+@headerHeight: 60px;
+@workspaceWidth: 250px;
+
+
+.component-viewer {
+  width: 100%;
+  min-width: 600px;
+  border-left-width: 0;
+  .box-sizing(border-box);
+  .clearfix;
+}
+
+.component-viewer-workspace-enabled {
+  .component-viewer-workspace .component-viewer-workspace-list,
+  .component-viewer-workspace .component-viewer-workspace-title { display: block; }
+}
+
+
+.component-viewer-title {
+  color: @baseFontColor;
+  font-size: @baseFontSize;
+  font-weight: bold;
+}
+
+.component-viewer-title-separator {
+  padding: 0 4px;
+}
+
+
+.component-viewer-workspace {
+  position: relative;
+  float: left;
+  min-width: 30px;
+  margin-right: 10px;
+  border: 1px solid @barBorderColor;
+  background-color: @barBackgroundColor;
+
+  &.overflow {
+    .box-sizing(border-box);
+  }
+}
+
+.component-viewer-workspace-header {
+  position: relative;
+  height: 30px;
+  border-bottom: 1px solid @barBorderColor;
+}
+
+.component-viewer-workspace-title {
+  display: none;
+  padding: 0 30px 0 10px;
+  line-height: 30px;
+  text-transform: uppercase;
+}
+
+.component-viewer-workspace-list {
+  display: none;
+  width: @workspaceWidth;
+  padding: 8px 0;
+  .box-sizing(border-box);
+}
+
+.component-viewer-workspace-item {
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.active > a { font-weight: bold; }
+  .subtitle { line-height: 16px; }
+}
+
+.component-viewer-workspace-item + .component-viewer-workspace-item {
+  margin-top: 10px;
+}
+
+.component-viewer-workspace-transition {
+  margin-top: 7px;
+  margin-left: 7px;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-workspace-options {
+  margin-top: 5px;
+  margin-left: 7px;
+  padding-left: 10px;
+  border-left: 3px solid darken(@barBorderColor, 10%);
+}
+
+.component-viewer-workspace-option {
+  line-height: 16px;
+  padding: 3px 0;
+
+  &.active > a { font-weight: bold; }
+}
+
+.component-viewer-workspace-toggle {
+  position: absolute;
+  top: 0; right: 0;
+  .size(30px, 30px);
+  .trans;
+
+  &:hover { background-color: @barBorderColor; }
+}
+
+.component-viewer-source {
+  position: relative;
+  float: left;
+
+  &.overflow {
+    .box-sizing(border-box);
+    overflow: auto;
+  }
+
+  .code th {
+
+    &.settings {
+      line-height: 22px;
+      text-align: left;
+
+      .icon-not-favorite,
+      .icon-favorite {
+        float: right;
+        padding-top: 2px;
+      }
+    }
+
+    &.settings-toggle {
+      vertical-align: top;
+      border-right: 1px solid @barBorderColor;
+      text-align: center;
+      white-space: nowrap;
+
+      .icon-settings { font-size: @iconSmallFontSize; }
+    }
+  }
+
+  .code .coverage-tests {
+    cursor: pointer;
+  }
+
+  .code .duplications {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    font-size: 0 !important;
+
+    .duplication {
+      display: inline-block;
+      vertical-align: top;
+      .size(5px, 19px);
+    }
+
+    .duplication + .duplication { margin-left: 2px; }
+
+    .duplication-exists {
+      background-color: @lightOrange;
+      cursor: pointer;
+      .trans;
+    }
+
+    .duplication-hover {
+      background-color: darken(@lightOrange, 10%);
+    }
+  }
+
+  .code .measures {
+    padding: 4px 5px;
+    border-left: 1px solid @barBorderColor;
+    border-bottom: 1px solid @barBorderColor;
+    background-color: @barBackgroundColor;
+  }
+
+  .code .stat {
+
+    &.coverage-green {
+      background-color: lighten(@green, 15%) !important;
+      color: @baseFontColor;
+    }
+
+    &.coverage-orange {
+      background-color: lighten(@orange, 15%) !important;
+      color: @baseFontColor;
+    }
+
+    &.coverage-red {
+      background-color: lighten(@red, 15%) !important;
+      color: @baseFontColor;
+    }
+  }
+
+  .code .row-expand {
+
+    .stat, .line {
+      border-left: none;
+      border-right: none;
+      background: url(../images/gray-stripes.png) repeat;
+    }
+
+    .line { text-align: right; }
+  }
+
+  .code .row-hidden { display: none; }
+
+}
+
+
+.component-viewer-source-settings {
+  display: none;
+
+  &.open { display: inline-block; }
+
+  & > li {
+    display: inline;
+    margin-right: 10px;
+  }
+}
+
+
+
+
+.component-viewer-header {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.component-viewer-header-bar {
+  .clearfix;
+  border: 1px solid @barBorderColor;
+  background-color: @barBackgroundColor;
+}
+
+.component-viewer-header-bar + .component-viewer-header-bar {
+  border-top: 1px solid @barBorderColor;
+}
+
+.component-viewer-header-two-lines-mixin() {
+  @lineHeight: 24px;
+  @topPadding: @headerHeight / 2 - @lineHeight;
+  line-height: @lineHeight;
+  padding: @topPadding 10px;
+}
+
+.component-viewer-header-component {
+  float: left;
+  .component-viewer-header-two-lines-mixin;
+
+}
+
+.component-viewer-header-component-project {
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-header-component-name {
+  font-weight: 600;
+}
+
+.component-viewer-header-favorite {
+  position: relative;
+  top: -2px;
+  margin-left: 4px;
+  .link-no-underline;
+}
+
+.component-viewer-header-measures {
+  float: right;
+}
+
+.component-viewer-header-measures-scope {
+  position: relative;
+  float: left;
+  height: @headerHeight;
+}
+
+.component-viewer-header-measures-toggle-scope {
+  position: absolute;
+  top: 0;
+  display: block;
+  .size(100%, 6px);
+  margin-bottom: -1px;
+  border-left: 1px solid @barBackgroundColor;
+  .box-sizing(border-box);
+  background-color: lighten(@blue, 30%);
+  .link-no-underline;
+  .transform-origin(0 0);
+  .trans;
+
+  &:after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    .size(100%, 4px);
+    background-color: transparent;
+  }
+
+  &:hover {
+    background-color: lighten(@blue, 15%);
+    .scale2(1, 2);
+  }
+
+  &.active { background-color: @blue; }
+  &.inactive { background-color: transparent; }
+}
+
+.component-viewer-header-measures-expand {
+  display: block;
+  padding: 11px 20px;
+  white-space: nowrap;
+  .link-no-underline;
+
+  a& {
+    .trans(background);
+
+    &:hover { background-color: @barBorderColor; }
+
+    &:active, &.active {
+      margin-bottom: -1px;
+      border-bottom: 1px solid #fff;
+      border-left-color: @barBorderColor;
+      background-color: #fff;
+    }
+  }
+}
+
+.component-viewer-header-measures-scope + .component-viewer-header-measures-scope {
+  border-left-color: @barBorderColor;
+}
+
+.component-viewer-header-measures-expand .icon-dropdown {
+  margin-left: 6px;
+  margin-right: -10px;
+  color: @baseFontColor;
+}
+
+.component-viewer-header-measure {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: @baseFontSize;
+
+  .rating {
+    font-size: 18px;
+  }
+}
+
+.component-viewer-header-measure + .component-viewer-header-measure {
+  margin-left: 15px;
+}
+
+.component-viewer-header-measure-label {
+  display: block;
+  margin-top: 2px;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-header-measure-value {
+  display: block;
+  color: @baseFontColor;
+  font-size: 18px;
+  font-weight: 300;
+
+  i {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.component-viewer-header-measure-issues {
+  width: 45px;
+}
+
+.component-viewer-header-measure-issue {
+  min-width: 1px;
+  height: 6px;
+
+  &.s-blocker { background-color: @severityBlockerColor; }
+  &.s-critical { background-color: @severityCriticalColor; }
+  &.s-major { background-color: @severityMajorColor; }
+  &.s-minor { background-color: @severityMinorColor; }
+  &.s-info { background-color: @severityInfoColor; }
+}
+
+.component-viewer-header-measure-issue + .component-viewer-header-measure-issue {
+  margin-top: 1px;
+}
+
+.component-viewer-header-actions {
+  float: right;
+  display: block;
+  padding: 20px 10px;
+  font-size: @iconFontSize;
+  .link-no-underline;
+}
+
+.component-viewer-header-more-actions {
+  position: absolute;
+  z-index: 100;
+  right: 0; top: 60px;
+  padding: 10px;
+  border: 1px solid @barBorderColor;
+  background-color: @white;
+  line-height: 1.8;
+}
+
+.component-viewer-header-expanded-bar {
+  display: none;
+  .clearfix;
+  position: relative;
+  margin-top: -1px;
+  border: 1px solid @barBorderColor;
+  border-top: none;
+  background-color: #fff;
+
+  &.active { display: block; }
+}
+
+.component-viewer-header-expanded-bar-section {
+  display: inline-block;
+  vertical-align: top;
+  width: 250px;
+
+  &.large { width: 350px; }
+}
+
+.component-viewer-header-expanded-bar-section-actions {
+  margin-left: 15px;
+
+  .component-viewer-header-expanded-bar-section-list > li {
+    padding: 4px 0;
+    line-height: 1.5;
+  }
+}
+
+.component-viewer-header-expanded-bar-section-title {
+  padding: 10px 10px 6px 10px;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-header-expanded-bar-section-list {
+  max-height: 120px; // 5 items
+  overflow: auto;
+  .webkit-scrollbar;
+
+  & > li > .item {
+    position: relative;
+    display: block;
+    padding: 4px 60px 4px 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    & > .number {
+      position: absolute;
+      right: 25px;
+      top: 50%;
+      margin-top: -8px;
+    }
+
+    & > i {
+      position: absolute;
+      top: 50%;
+      right: 6px;
+      margin-top: -7px;
+    }
+
+    .duration {
+      display: inline-block;
+      min-width: 40px;
+    }
+  }
+
+  & > li > a.item {
+    color: @baseFontColor;
+    .link-no-underline;
+    .trans;
+
+    &:hover { background-color: @barBackgroundColor; }
+    &:active, &.active { background-color: @lightBlue; }
+  }
+}
+
+.component-viewer-header-expanded-bar-bulk-change {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 10px;
+  font-size: @smallFontSize;
+  .trans;
+
+  &:hover { background-color: @barBackgroundColor; }
+}
+
+.component-viewer-header-decoration {
+  margin-top: 10px;
+}
+
+.component-viewer-header-time-changes {
+  padding: 10px;
+}
+
+.component-viewer-header-sqale-rating {
+  float: left;
+  font-size: 20px;
+}
+
+
+.component-viewer-popup-test {
+  position: relative;
+  display: block;
+  height: 16px;
+  line-height: 16px;
+}
+
+.component-viewer-popup-test-file {
+}
+
+.component-viewer-popup-test-name {
+  display: block;
+  border-left: 20px solid transparent;
+  border-right: 44px solid transparent;
+  .box-sizing(border-box);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.component-viewer-popup-test-status {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -8px;
+}
+
+.component-viewer-popup-test-duration {
+  position: absolute;
+  top: 0; right: 0;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-popup-duplications {
+  padding: 4px 0;
+  white-space: normal;
+}
+
+.component-viewer-popup-label {
+  padding-right: 6px;
+  font-weight: 500;
+}
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/components/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
new file mode 100644
index 00000000000..2c8da63e581
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -0,0 +1,212 @@
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "ui";
+
+@navbarGlobalBackground: #262626;
+@navbarContextBackground: @barBackgroundColor;
+
+@navbarHeight: 30px;
+@navbarLineHeight: 20px;
+@navbarTopPadding: (@navbarHeight - @navbarLineHeight) / 2;
+
+.navbar, [class^="navbar-"], [class*=" navbar-"] {
+  .box-sizing(border-box);
+}
+
+.navbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  .clearfix;
+  height: @navbarHeight;
+}
+
+.navbar-fade {
+  .navbar-nav {
+    opacity: 0;
+    .trans(opacity);
+  }
+
+  .navbar-favorite {
+    margin-right: -23px;
+    .trans(margin);
+  }
+
+  &.in {
+    .navbar-nav {
+      opacity: 1;
+    }
+
+    .navbar-favorite {
+      margin-right: 0;
+    }
+  }
+}
+
+.navbar a {
+  .link-no-underline;
+  .trans(none);
+}
+
+.navbar-header {
+  float: left;
+}
+
+.navbar-brand {
+  display: block;
+
+  img {
+    vertical-align: top;
+  }
+}
+
+.navbar-nav {
+  float: left;
+}
+
+.navbar-nav > li {
+  float: left;
+}
+
+.navbar-nav > li > a {
+  padding: @navbarTopPadding 10px;
+  line-height: @navbarLineHeight;
+}
+
+.navbar-nav > li.navbar-more > a {
+  padding-right: 17px;
+}
+
+.navbar-nav > li.navbar-more + li {
+  margin-left: -17px;
+}
+
+.navbar-nav > li.navbar-more + li > a {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.navbar-icon:before {
+  color: #fff !important;
+  font-size: @iconFontSize;
+}
+
+.navbar-favorite {
+  position: relative;
+  top: -2px;
+}
+
+.navbar-right {
+  float: right;
+}
+
+.navbar-search {
+  position: relative;
+  width: 480px;
+  .box-sizing(border-box);
+  .trans(width);
+}
+
+.navbar-search-input {
+  width: 100%;
+  padding: 0 20px 0 40px !important;
+  border: none !important;
+}
+
+.navbar-search-icon {
+  position: absolute;
+  top: 4px;
+  left: 20px;
+  color: @secondFontColor;
+
+  &:before {
+    font-size: @iconSmallFontSize;
+  }
+}
+
+.navbar-search-extra {
+  display: inline-block;
+  width: 90px;
+  margin-right: 10px;
+  text-align: right;
+}
+
+.navbar-search-subtitle {
+  position: absolute;
+  top: 5px;
+  right: 40px;
+}
+
+
+.navbar-global {
+  top: 0;
+  z-index: 499;
+  background-color: @navbarGlobalBackground;
+
+  .navbar-nav > li > a {
+    color: #fff;
+    font-size: 12px;
+    font-weight: 300;
+    letter-spacing: 0.05em;
+
+    &:hover, &:focus {
+      color: #fff;
+    }
+  }
+
+  .navbar-nav > .active > a,
+  .navbar-nav > .dropdown.open > a {
+    color: #fff;
+  }
+
+  .navbar-brand:hover,
+  .navbar-brand:focus {
+    background-color: darken(@navbarGlobalBackground, 20%);
+  }
+
+  .navbar-nav > li > a:hover,
+  .navbar-nav > li > a:focus,
+  .navbar-nav > .active > a,
+  .navbar-nav > .dropdown.open > a {
+    background-color: @blue;
+  }
+
+  .navbar-search-dropdown {
+    background-color: @blue !important;
+  }
+
+  .navbar-admin-link:hover,
+  .navbar-admin-link:focus,
+  .active > .navbar-admin-link {
+    background-color: @orange !important;
+  }
+}
+
+
+.navbar-context {
+  top: @navbarHeight;
+  z-index: 498;
+  height: 57px;
+  background-color: @navbarContextBackground;
+
+  .nav-tabs {
+    width: 100%;
+  }
+
+  .navbar-nav > li > a {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
+
+.navbar-context-favorite {
+  float: left;
+  padding: 6px 0 0 10px;
+}
+
+.navbar-context-meta {
+  line-height: @navbarHeight;
+  padding: 0 10px;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+}
diff --git a/server/sonar-web/src/main/less/components/navigator.less b/server/sonar-web/src/main/less/components/navigator.less
new file mode 100644
index 00000000000..26839743527
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator.less
@@ -0,0 +1,6 @@
+@import (reference) "../mixins";
+@import (reference) "../variables";
+
+@import "navigator/config";
+@import "navigator/base";
+@import "navigator/filters";
diff --git a/server/sonar-web/src/main/less/components/navigator/base.less b/server/sonar-web/src/main/less/components/navigator/base.less
new file mode 100644
index 00000000000..9b448f74e4b
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator/base.less
@@ -0,0 +1,459 @@
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
+
+
+.navigator { }
+
+
+.navigator-element() {
+  position: fixed;
+  z-index: 2;
+  .box-sizing(border-box);
+}
+
+.navigator-header {
+  height: @navigatorHeaderHeight;
+  margin: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+}
+
+.navigator-filters {
+  position: relative;
+  margin: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+}
+
+.navigator-content {
+  display: table;
+  width: 100%;
+}
+
+.navigator-side {
+  position: relative;
+  display: table-cell;
+  vertical-align: top;
+  width: @navigatorResultsWidth + 2 * @navigatorPadding;
+  min-width: 275px + 2 * @navigatorPadding;
+  max-width: 600px + 2 * @navigatorPadding;
+}
+
+.navigator-main {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.navigator-facets {
+  margin: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+}
+
+.navigator-results {
+  position: relative;
+  z-index: 2;
+  width: @navigatorResultsWidth;
+  min-width: 275px;
+  max-width: 600px;
+  margin: @navigatorPadding @navigatorPadding 0;
+  .box-sizing(border-box);
+}
+
+.navigator-actions {
+  position: relative;
+  z-index: 4;
+  margin: 0 @navigatorPadding @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+  .clearfix;
+}
+
+.navigator-details {
+  position: relative;
+  margin: 0 @navigatorPadding @navigatorPadding;
+}
+
+.navigator-resizer {
+  position: absolute;
+  top: 50%; right: -1px;
+  cursor: col-resize;
+}
+
+.navigator-notes {
+  display: none;
+}
+
+.navigator-with-notes {
+
+  .navigator-notes {
+    display: block;
+  }
+}
+
+
+.measures-page {
+  .navigator-details { overflow: visible; }
+  .page { padding: 0 0 0 @navigatorPadding; }
+}
+
+
+.navigator-fetching {
+  &:before {
+    content: " ";
+    position: absolute;
+    z-index: 3;
+    top: 0; bottom: 0; left: 0; right: 0;
+    background: #fff url(../images/loading.gif) no-repeat 4px 4px;
+  }
+
+  &#tab-issue-rule {
+    position: relative;
+
+    &:before {
+      z-index: 3;
+      background-color: #EFEFEF;
+    }
+  }
+
+  &.code-issue-actions {
+    position: relative;
+
+    &:before {
+      z-index: 3;
+      background-color: #E4ECF3;
+    }
+  }
+}
+
+
+.navigator-page-loader {
+  padding: @navigatorPadding 0 0 @navigatorPadding;
+}
+
+
+
+// Header
+.navigator-header {
+  padding: 0 @navigatorPadding;
+  background-color: @navigatorBarBackground;
+  font-size: 0;
+
+  .page-title,
+  .page-actions {
+    margin: (@navigatorHeaderHeight - @formControlHeight) / 2 0;
+  }
+}
+
+.navigator-header-favorite {
+  padding-left: 58px;
+}
+
+.navigator-header-title {
+  display: inline-block;
+  vertical-align: middle;
+  color: @navigatorHeaderColor;
+  font-size: 20px;
+  line-height: @navigatorHeaderLineHeight;
+}
+
+.navigator-header-title-note {
+  vertical-align: middle;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.navigator-header-description {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 70%;
+  margin-left: 16px;
+  font-size: @smallFontSize;
+  font-style: italic;
+}
+
+.navigator-header-actions {
+  margin: 8px 0 8px 20px;
+
+  & > a {
+    vertical-align: middle;
+    margin: 0 8px;
+    font-size: @smallFontSize;
+  }
+}
+
+.navigator-header-menu-toggle {
+  display: inline-block;
+  vertical-align: top;
+  height: 36px;
+  margin-right: 10px;
+  margin-left: -10px;
+  padding: 10px;
+  border-right: 1px solid transparent;
+  .box-sizing(border-box);
+  cursor: pointer;
+  .trans;
+
+  &:hover {
+    background-color: @navigatorHover;
+  }
+
+  &.active {
+    border-color: #cdcdcd;
+    background-color: #fff;
+  }
+
+  [class^="icon-"], [class*=" icon-"] {
+    font-size: 16px;
+  }
+}
+
+
+
+// Notes
+.navigator-notes {
+  margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding;
+  padding: 0 @navigatorPadding;
+  border: 1px solid @navigatorBorderColor;
+  background-color: @navigatorBarBackground;
+
+  color: #777;
+  font-size: @smallFontSize;
+  line-height: @navigatorNotesHeight;
+}
+
+
+
+// Facets
+.navigator-facets {
+  padding: @navigatorPadding;
+  border-bottom: 1px solid @navigatorBorderColor;
+  background-color: @navigatorBarBackground;
+}
+
+.navigator-facets-list {
+
+}
+
+.navigator-facets-list-item {
+  font-size: 0;
+  margin-bottom: -6px;
+}
+
+.navigator-facets-list-item + .navigator-facets-list-item {
+  margin-top: @navigatorPadding;
+}
+
+.navigator-facets-list-item-name {
+  float: left;
+  line-height: 22px;
+  min-width: 120px;
+  margin-right: @navigatorPadding;
+  font-size: @smallFontSize;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.navigator-facets-list-item-options {
+  overflow: hidden;
+}
+
+
+
+// Results
+.navigator-results {
+  background-color: @white;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &.fetching {
+    .navigator-results-list { visibility: hidden; }
+    .navigator-results-loader { display: block; }
+  }
+}
+
+.navigator-results-loader {
+  position: fixed;
+  z-index: 10;
+  display: none;
+  background-color: #fff;
+}
+
+.navigator-results-list {
+
+  & > li {
+    position: relative;
+    z-index: 1;
+    padding: @navigatorPadding / 2 0;
+    border: 1px solid;
+    border-color: @navigatorBorderLightColor transparent;
+    cursor: pointer;
+    .trans;
+
+    .line {
+      padding: @navigatorPadding / 2 @navigatorPadding;
+      line-height: 1.2;
+    }
+
+    .line-small {
+      font-size: 11px;
+      line-height: 14px;
+    }
+
+    .line-right {
+      float: right;
+    }
+
+    .line-nowrap {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      background-color: @navigatorBarBackground;
+    }
+
+    &.active {
+      z-index: 2;
+      background-color: #CAE3F2;
+      border-color: #4B9FD5;
+    }
+  }
+
+  & > li + li { margin-top: -1px; }
+}
+
+.navigator-results-no-results {
+  padding-top: 20% !important;
+  background: #fff !important;
+  border-color: transparent !important;
+  color: #999;
+  cursor: default !important;
+  text-align: center;
+}
+
+
+
+// Details
+.navigator-details {
+  background-color: @white;
+  overflow: auto;
+
+  &.loading {
+    background: @white url("../images/loading.gif") no-repeat 4px 2px;
+  }
+
+  .code-issue-name {
+    border-bottom: none;
+  }
+
+  .code-issue-actions {
+    background-color: #E4ECF3;
+  }
+
+  .source_title {
+    z-index: 3;
+    top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight;
+    left: @navigatorResultsWidth;
+    right: 0;
+    padding: 0 0 @navigatorPadding 0;
+    background-color: #fff;
+  }
+
+  .source {
+    & > table {
+      border: 1px solid #DDD;
+    }
+  }
+
+  .scm .author {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+
+
+// Status
+.navigator-actions {
+  padding: 0 @navigatorPadding 0 0;
+
+  border-right: 1px solid @navigatorBorderLightColor;
+  border-bottom: 1px solid @navigatorBorderLightColor;
+  background-color: @navigatorBarBackground;
+  font-size: @smallFontSize;
+
+  strong { font-weight: bold; }
+}
+
+.navigator-actions-order {
+  float: left;
+  padding: 0 @navigatorPadding;
+  line-height: @navigatorStatusHeight;
+  cursor: pointer;
+  .trans;
+
+  &:hover {
+    background-color: @navigatorHover;
+  }
+}
+
+.navigator-actions-order-choices {
+  position: absolute;
+  top: 100%;
+  left: -1px;
+  min-width: @navigatorResultsWidth / 2;
+  background-color: #fff;
+  border: 1px solid @navigatorBorderLightColor;
+  box-shadow: @defaultShadow;
+  overflow: hidden;
+  display: none;
+
+  & > li {
+    height: @navigatorStatusHeight;
+    line-height: @navigatorStatusHeight;
+    padding: 0 10px;
+    cursor: pointer;
+    .trans;
+
+    &:hover {
+      background-color: @navigatorBarBackground;
+    }
+  }
+
+  &.open {
+    display: block;
+  }
+}
+
+.navigator-actions-total {
+  float: right;
+  height: @navigatorStatusHeight;
+  line-height: @navigatorStatusHeight;
+}
+
+.navigator-actions-bulk {
+  position: relative;
+  top: -1px;
+  margin-left: 8px;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+
+
+// Footer
+.navigator-page #footer {
+  margin: 0;
+  border-top: 1px solid @navigatorBorderLightColor;
+}
+
+.navigator-page #ftlinks {
+  margin-top: 0;
+}
diff --git a/server/sonar-web/src/main/less/components/navigator/config.less b/server/sonar-web/src/main/less/components/navigator/config.less
new file mode 100644
index 00000000000..10c6ce5e674
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator/config.less
@@ -0,0 +1,32 @@
+@import (reference) "../../variables";
+
+// Layout
+@navigatorTopOffset: 80px;
+@navigatorBottomOffset: 35px;
+
+@navigatorHeaderHeight: 40px;
+@navigatorHeaderLineHeight: @navigatorHeaderHeight - 3px;
+@navigatorFiltersHeight: 40px;
+@navigatorFiltersLineHeight: @navigatorFiltersHeight - 3px;
+@navigatorFacetsHeight: 90px;
+@navigatorStatusHeight: 30px;
+@navigatorNotesHeight: 20px;
+
+@navigatorResultsWidth: 320px;
+
+@navigatorPadding: 10px;
+
+
+// Colors
+@navigatorBarBackground: @barBackgroundColor;
+@navigatorBorderColor: @barBorderColor;
+@navigatorBorderLightColor: @barBorderColor;
+
+@navigatorHeaderColor: @baseFontColor;
+
+@navigatorFacetStatColor: @secondFontColor;
+@navigatorFacetInactiveBackground: lighten(@barBackgroundColor, 4%);
+
+
+@navigatorHover: darken(@navigatorBarBackground, 5%);
+@navigatorFilterPadding: @navigatorPadding;
diff --git a/server/sonar-web/src/main/less/components/navigator/filters.less b/server/sonar-web/src/main/less/components/navigator/filters.less
new file mode 100644
index 00000000000..7c56f015d96
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator/filters.less
@@ -0,0 +1,332 @@
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
+
+
+.navigator-filters {
+  padding-right: 85px;
+  background-color: @navigatorBarBackground;
+  font-size: 0;
+}
+
+.navigator-filters-list {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  margin-bottom: -1px;
+}
+
+.navigator-filter-submit,
+.navigator-filter-new-search {
+  vertical-align: middle;
+  margin-left: 15px;
+  font-size: @baseFontSize;
+}
+
+.navigator-filter-submit {
+  position: absolute;
+  bottom: 0; right: 0;
+  .size(85px, @navigatorFiltersHeight);
+  margin: -1px -1px -1px 0;
+  padding: 0;
+  border: 1px solid darken(@blue, 10%);
+  background: @blue;
+  color: #fff;
+  font-weight: normal;
+  .trans;
+
+  &::-moz-focus-inner { border: 0; }
+
+  &:hover, &:focus {
+    border-color: @blue;
+    background-color: lighten(@blue, 10%);
+  }
+}
+
+.navigator-filter-list-favorite {
+  position: relative;
+  padding-left: 36px;
+  overflow: hidden;
+}
+
+.navigator-filters-actions {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 20px;
+  font-size: @baseFontSize;
+}
+
+.navigator-filter {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  vertical-align: top;
+  height: @navigatorFiltersHeight;
+  line-height: @navigatorFiltersLineHeight;
+  margin: -1px 0 0 -1px;
+  padding: 0 1.5 * @navigatorFilterPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+  white-space: nowrap;
+  cursor: pointer;
+  .trans;
+
+  &:hover {
+    z-index: 2;
+    border-color: @navigatorBorderColor;
+    background-color: @navigatorHover;
+  }
+
+  &.active {
+    border-color: @darkGrey;
+    background: #fff;
+  }
+
+}
+
+.navigator-filter-disabled {
+  display: none;
+}
+
+.navigator-filter-optional {
+  padding-right: 0;
+}
+
+.navigator-filter-inline,
+.navigator-filter-read-only,
+.navigator-filter-inactive {
+  cursor: default;
+
+  &:hover,
+  &.active {
+    border-color: transparent;
+    background: transparent;
+  }
+}
+
+.navigator-filter-inline .navigator-filter-label:after {
+    content: "";
+}
+
+.navigator-filter-inactive {
+  opacity: 0.5;
+}
+
+.navigator-filter-context {
+  z-index: 3;
+  background-color: @contextBackground;
+  border-color: @contextBorder;
+}
+
+.navigator-filter-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 5px;
+  color: #333;
+  font-size: @baseFontSize;
+
+  &:after { content: ":"; }
+}
+
+.navigator-filter-value {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 120px;
+  color: #333;
+  font-size: @baseFontSize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.default {
+    color: #666;
+  }
+}
+
+.navigator-filter-disable {
+  display: inline-block;
+  vertical-align: middle;
+  .square(20px);
+  line-height: 20px;
+  margin: 0 0 0 5px;
+  font-size: 18px;
+  text-align: center;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background-color: darken(@navigatorHover, 7%);
+  }
+}
+
+.navigator-filter-range-input {
+  width: 120px;
+}
+
+.navigator-filter-details {
+  display: none;
+  position: absolute;
+  z-index: 1200;
+  min-width: 100px;
+  border: 1px solid @darkGrey;
+  background: #fff;
+  box-shadow: @defaultShadow;
+  font-size: @baseFontSize;
+  transition: opacity 0.3s ease;
+
+  &.active {
+    display: block;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  /* IE10+ specific styles go here */
+  .navigator-filter-details {
+    width: 250px;
+  }
+}
+
+.navigator-filter-details-inner {
+  max-width: 300px;
+  padding: 5px @navigatorFilterPadding;
+
+  .select2-container,
+  input {
+    margin: 5px 0;
+    vertical-align: middle;
+  }
+}
+
+.navigator-filter-select-list {
+  min-width: 150px;
+  max-width: 300px;
+  max-height: 182px;
+  padding: 5px 0;
+  overflow-y: auto;
+  .webkit-scrollbar;
+  -ms-overflow-style: scrollbar;
+
+  label {
+    display: block;
+    padding: 5px @navigatorFilterPadding;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .trans(background);
+
+    &:hover,
+    &.current {
+      background-color: darken(#fff, 7%);
+    }
+
+    & > input[type=checkbox] {
+      vertical-align: baseline;
+      cursor: pointer;
+    }
+
+    & > img {
+      vertical-align: text-bottom;
+    }
+
+//    & > span {
+//      display: inline-block;
+//      vertical-align: top;
+//      width: 86%;
+//      white-space: nowrap;
+//      overflow: hidden;
+//      text-overflow: ellipsis;
+//    }
+
+    &.special {
+      font-style: italic;
+
+      & > span {
+        text-decoration: underline;
+      }
+    }
+
+    &.inactive {
+      cursor: default;
+      opacity: 0.5;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  .single {
+    padding: 5px @navigatorFilterPadding;
+  }
+
+  .line {
+    height: 1px;
+    margin: 5px 0;
+    background: @darkGrey;
+  }
+}
+
+.navigator-filter-select-list:not(.hidden) + .navigator-filter-select-list {
+  margin-top: 5px;
+  border-top: 1px solid @darkGrey;
+}
+
+.navigator-filter-search {
+  position: relative;
+  margin: @navigatorFilterPadding 26px @navigatorFilterPadding @navigatorFilterPadding;
+
+  input {
+    .size(100%, 26px);
+    padding: 0 7px;
+    border: 1px solid @darkGrey;
+    .box-sizing(border-box);
+  }
+
+  .fetching &:after {
+    content: ' ';
+    position: absolute;
+    top: 6px; right: -21px;
+    display: block;
+    .square(16px);
+    background: #fff url(../images/loading.gif) no-repeat center center;
+  }
+
+  &.fetching-error {
+
+    input { border: 2px solid @red; }
+  }
+}
+
+.navigator-filter-load-more {
+  display: none;
+  height: 26px;
+  line-height: 26px;
+  background-color: @grey;
+  text-align: center;
+  cursor: pointer;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background-color: darken(@grey, 7%);
+  }
+}
+
+.navigator-filter-favorite {
+  position: absolute;
+  top: -@navigatorPadding - @navigatorFiltersHeight;
+  left: 0;
+}
+
+.navigator-filter-favorite-toggle {
+  .size(16px, @navigatorFiltersHeight);
+  background: url('../images/navigator/favorite-filters.png') no-repeat center center;
+
+  @media @retina {
+    background-image: url(../images/navigator/favorite-filters@2x.png);
+    background-size: 16px 14px;
+  }
+}
+
+.navigator-filter-more-criteria {
+  font-size: @baseFontSize;
+}
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/components/select-list.less b/server/sonar-web/src/main/less/components/select-list.less
new file mode 100644
index 00000000000..9cfd6ed019d
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/select-list.less
@@ -0,0 +1,194 @@
+@import (reference) '../variables';
+@import (reference) '../mixins';
+
+.select-list-container {
+  min-width: 500px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.select-list-control {
+  margin-bottom: 10px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.select-list-list-container {
+  border: 1px solid #bfbfbf;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.select-list-list-container.loading .select-list-list {
+  visibility: hidden;
+}
+
+.select-list-list-container-readonly {
+  border: none;
+}
+
+.select-list-list-container-readonly .select-list-list {
+  overflow: visible;
+}
+
+.select-list-list-container-readonly .select-list-list > li {
+  border: none;
+}
+
+.select-list-list {
+  overflow-x: hidden;
+}
+
+  .select-list-list > li {
+    position: relative;
+    display: block;
+    margin-top: -1px;
+    padding: 5px 10px;
+    border-top: 1px solid #e0e0e0;
+    color: #404040;
+    transition: -webkit-transform 0.3s ease;
+    transition: -ms-transform 0.3s ease;
+    transition: transform 0.3s ease;
+  }
+
+  .select-list-list > li.removed {
+    -webkit-transform: translateX(100%);
+       -moz-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+         -o-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+
+  .select-list-list > li.added {
+    -webkit-transform: translateX(-100%);
+       -moz-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
+         -o-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+
+  .select-list-list > li.progress {
+    background: url(../images/loading.gif) no-repeat 10px 5px;
+  }
+
+  .select-list-list > li.progress .select-list-list-checkbox {
+    visibility: hidden;
+  }
+
+  .select-list-list > li.empty-message {
+    padding: 6px 5px;
+    border: 1px solid #ddd;
+    background-color: #efefef;
+  }
+
+
+.select-list-list-checkbox {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
+.select-list-list-item {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.select-list-control {
+  height: 27px;
+}
+
+.select-list-check-control {
+  float: left;
+}
+
+.select-list-check-control.disabled {
+  filter: alpha(opacity=60);
+  opacity: 0.6;
+}
+
+.select-list-check-control.disabled .select-list-control-button {
+  background-color: #fff !important;
+}
+
+.select-list-control-button {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  vertical-align: middle;
+  width: 110px;
+  height: 27px;
+  line-height: 25px;
+  .box-sizing(border-box);
+  border: 1px solid #bfbfbf;
+  color: @baseFontColor;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.select-list-control-button:hover {
+  background-color: #f6f6f6;
+  color: @baseFontColor;
+}
+
+.select-list-control-button:active,
+.select-list-control-button.active {
+  z-index: 2;
+  background-color: #efefef;
+  color: @baseFontColor;
+}
+
+.select-list-control-button + .select-list-control-button {
+  margin-left: -1px;
+}
+
+
+.select-list-search-control {
+  position: relative;
+  float: right;
+  height: 27px;
+}
+
+.select-list-search-control input {
+  width: 170px;
+  height: 100%;
+  line-height: 27px\9;
+  padding: 0 40px 0 10px;
+  border: 1px solid #bfbfbf;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+
+.select-list-search-control input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.select-list-search-control input::-ms-clear {
+  display: none;
+}
+
+.select-list-search-control-clear {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 23px;
+  height: 23px;
+  line-height: 24px;
+  background-color: #e0e0e0;
+  color: #fff;
+  cursor: pointer;
+  font-size: 18px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+  .select-list-search-control.disabled .select-list-search-control-clear {
+    filter: alpha(opacity=0);
+    opacity: 0;
+  }
+
+  .select-list-search-control-clear:hover {
+    background-color: #d6d6d6;
+  }
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/components/ui.less b/server/sonar-web/src/main/less/components/ui.less
new file mode 100644
index 00000000000..311a2ca8328
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/ui.less
@@ -0,0 +1,491 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+
+/*
+ * Common
+ */
+
+.nowrap { white-space: nowrap; }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.justify {
+  margin-bottom: -1em;
+  text-align: justify;
+
+  & > .ib { display: inline-block; }
+
+  &:after { display: inline-block; width: 100%; content: " "; }
+}
+
+.no-transform {
+  text-transform: none;
+}
+
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.first-letter-uppercase::first-letter {
+  text-transform: uppercase;
+}
+
+.disabled-pointer-events {
+  pointer-events: none !important;
+}
+
+
+/*
+ * Links
+ */
+
+.link() {
+  outline: none;
+  text-decoration: none;
+  .trans;
+
+  &:hover { color: @blue; }
+
+  &:active, &:focus {
+    color: @darkBlue;
+  }
+}
+
+.base-link {
+  color: @baseFontColor;
+  .link;
+}
+
+.highlighted-link() {
+  color: @darkBlue;
+  .link;
+}
+
+.underlined-link() {
+  .highlighted-link;
+  border-bottom: 1px solid @lightBlue;
+
+  &.link-red { .widget-link-red; }
+}
+
+.icon-with-link {
+  outline: none;
+  text-decoration: none;
+}
+
+.widget-link {
+  .highlighted-link;
+  border-bottom: 1px solid @lightBlue;
+}
+
+.widget-link-red {
+  color: @red;
+  border-bottom-color: @lightRed;
+
+  &:hover, &:active, &:focus {
+    color: @red;
+    border-bottom-color: @red;
+  }
+}
+
+a.active-link {
+  border-bottom: none;
+  font-weight: 500;
+}
+
+
+
+/*
+ * Inputs
+ */
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=search],
+textarea {
+  border: 1px solid @darkGrey;
+  .box-sizing(border-box);
+  background: #fff;
+  color: @baseFontColor;
+  .trans(border-color);
+
+  &:active,
+  &:focus {
+    border-color: @highlighted;
+    box-shadow: none;
+    outline: none;
+  }
+
+  &.invalid { border-color: @red; }
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=search] {
+  height: @formControlHeight;
+  padding: 0 3px;
+}
+
+input[type=search] {
+  -webkit-appearance: none;
+}
+
+textarea {
+  padding: 3px;
+}
+
+button,
+.button,
+input[type=submit],
+input[type=button] {
+  display: inline-block;
+  vertical-align: baseline;
+  height: @formControlHeight;
+  margin: 0 1px;
+  padding: 0 10px;
+
+  border: 1px solid @darkGrey;
+  .box-sizing(border-box);
+
+  background: #f4f4f4;
+
+  color: @baseFontColor;
+  font-weight: bold;
+  font-size: @baseFontSize;
+  text-align: center;
+  text-decoration: none;
+
+  cursor: pointer;
+  outline: none;
+  .trans(border-color);
+
+  &:hover, &.active {
+    border-color: #5281a0;
+    background: #4b9fd5;
+    color: #fff;
+  }
+
+  &:active {
+    border-color: #2790c0;
+    background: #78bdea;
+    color: #fff;
+  }
+
+  &:focus {
+    border-color: @highlighted;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    color: #bbb;
+    border-color: #ddd;
+    background: #ebebeb;
+    cursor: default;
+  }
+}
+
+.button { line-height: @formControlHeight; }
+
+.button-red {
+  &:hover, &:focus {
+    border-color: #900;
+    background: lighten(#900, 10%);
+    color: #fff;
+  }
+
+  &:active {
+    border-color: #900;
+    background: lighten(#900, 20%);
+  }
+}
+
+.button-clean,
+.button-clean:hover,
+.button-clean:focus {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: @baseFontColor;
+}
+
+.button-group {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+
+  & > button,
+  & > .button {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    padding: 2px 8px;
+    font-size: @smallFontSize;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:hover, &:focus, &:active, &.active {
+      z-index: 3;
+    }
+  }
+
+  & > .button { line-height: 16px; }
+
+  & > button + button,
+  & > button + .button,
+  & > .button + button,
+  & > .button + .button {
+    margin-left: -1px;
+  }
+
+  & > a:not(.button) {
+    vertical-align: middle;
+    margin: 0 8px;
+    font-size: @smallFontSize;
+  }
+}
+
+
+.message-notice {
+  display: block;
+  padding: 5px 8px;
+  border: 2px solid @blue;
+}
+
+.message-alert {
+  display: block;
+  padding: 5px 8px;
+  border: 2px solid @orange;
+}
+
+.message-error {
+  display: block;
+  padding: 5px 8px;
+  background-color: @red;
+  color: #fff;
+}
+
+.message-notice + .message-notice,
+.message-notice + .message-alert,
+.message-notice + .message-error,
+.message-alert + .message-notice,
+.message-alert + .message-alert,
+.message-alert + .message-error,
+.message-error + .message-notice,
+.message-error + .message-alert,
+.message-error + .message-error {
+  margin-top: 5px;
+}
+
+
+
+/*
+ * Display SQALE Rating (also used by the SQALE plugin)
+ */
+
+.rating {
+  display: inline-block;
+  .size(1em, 1.3em);
+  line-height: 1.3;
+  color: #fff;
+  font-weight: 300;
+  text-align: center;
+
+  a > & {
+    margin-bottom: -1px;
+    border-bottom: 1px solid;
+    .trans;
+
+    &:hover { opacity: 0.8; }
+  }
+}
+
+.rating-A {
+  background-color: #00AA00;
+  a & { border-bottom-color: #00AA00; }
+}
+
+.rating-B {
+  background-color: #80CC00;
+  a & { border-bottom-color: #80CC00; }
+}
+
+.rating-C {
+  background-color: #FFEE00;
+  color: @baseFontColor;
+  a & { border-bottom-color: #FFEE00; }
+}
+
+.rating-D {
+  background-color: #F77700;
+  a & { border-bottom-color: #F77700; }
+}
+
+.rating-E {
+  background-color: #EE0000;
+  a & { border-bottom-color: #EE0000; }
+}
+
+
+.processes-container {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 50%;
+  width: 350px;
+  margin-left: -175px;
+}
+
+.process-spinner {
+  padding: 0 10px;
+  line-height: @formControlHeight;
+  border-radius: 0 0 3px 3px;
+  .box-sizing(border-box);
+  background-color: #f0e8ac;
+  text-align: center;
+  opacity: 0;
+  .trans;
+
+  &.shown { opacity: 1; }
+}
+
+.process-spinner + .process-spinner {
+  margin-top: 5px;
+  border-radius: 3px;
+}
+
+.process-spinner-failed {
+  padding-right: 30px;
+  background-color: @red;
+  color: @white;
+}
+
+.process-spinner-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 3px;
+  background: none !important;
+  border: none !important;
+  line-height: 1;
+}
+
+
+
+.shortcuts-section {
+
+}
+
+.shortcuts-section + .shortcuts-section {
+  margin-top: 20px;
+}
+
+.shortcuts-section-title {
+  margin-bottom: 5px;
+}
+
+.shortcuts-list {
+  > li + li {
+    margin-top: 5px;
+  }
+}
+
+.shortcut-button {
+  display: inline-block;
+  .square(24px);
+  line-height: 24px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  .vertical-gradient(#f5f5f5, #eee);
+  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+  color: @secondFontColor;
+  font-size: @baseFontSize;
+  font-weight: 500;
+  text-align: center;
+}
+
+
+.nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav > li {
+  position: relative;
+  display: block;
+}
+
+.nav > li > a {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 10px 15px;
+}
+
+
+.nav-crumbs {
+  padding: 2px 0;
+
+  a {
+    color: @baseFontColorLight;
+
+    &:hover, &:focus {
+      color: @blue !important;
+    }
+  }
+
+  > li + li:before {
+    content: "/";
+    float: left;
+    padding: 4px 0;
+    color: fade(@baseFontColor, 30%);
+  }
+
+  > li:first-child {
+    font-size: 18px;
+    font-weight: 300;
+
+    > a {
+      color: @baseFontColor;
+    }
+  }
+}
+
+.nav-tabs {
+  border-bottom: 1px solid @barBorderColor;
+
+  > li {
+    float: left;
+    margin-bottom: -1px;
+  }
+
+  > li > a {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-right: 2px;
+    border-bottom: 3px solid transparent;
+    color: @baseFontColorLight;
+
+    &:hover {
+      border-color: @blue;
+    }
+  }
+
+  > li.active > a {
+    border-color: @blue;
+  }
+}
diff --git a/server/sonar-web/src/main/less/dashboard.less b/server/sonar-web/src/main/less/dashboard.less
deleted file mode 100644
index 86dce3a54a7..00000000000
--- a/server/sonar-web/src/main/less/dashboard.less
+++ /dev/null
@@ -1,443 +0,0 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-
-.dashboard-page {
-  background-color: @barBackgroundColor;
-}
-
-.dashboard-page #ftlinks {
-  border-top-color: @barBorderColor;
-  background-color: @barBackgroundColor;
-}
-
-/* LAYOUT */
-#dashboard {
-  position: relative;
-  width: 100%;
-  padding: 10px 0;
-}
-
-#dashboard .transparent {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: url('../images/transparent.gif') repeat;
-  z-index: 1000;
-}
-
-/* WIDGETS */
-#dashboard .widget {
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 10px;
-  margin: 0;
-}
-
-#dashboard .widget .big {
-  line-height: 1.5;
-  font-size: 24px;
-  font-weight: 300;
-}
-
-#dashboard .block {
-  margin: 0 0 10px 0;
-  border: 1px solid @barBorderColor;
-  background-color: @white;
-}
-
-#dashboard .configure_widget {
-  display: block;
-  position: relative;
-}
-
-#dashboard .widget_props {
-  background-color: #FFFBE2;
-  border: 1px solid #FCE174;
-  margin: 5px;
-  padding: 5px;
-}
-
-#dashboard .widget-title {
-  padding: 10px;
-  line-height: 1;
-  border-bottom: 1px solid @barBorderColor;
-  color: @baseFontColor;
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: uppercase;
-
-  a { .link-no-underline; }
-}
-
-/*CONFIGURATION*/
-#dashboard #configure {
-  position: relative;
-  height: 260px;
-  margin: 5px 0 10px 0;
-}
-
-#dashboard #widget_defs, #dashboard #edit-layout {
-  background-color: #FFFBE2;
-  border: 1px solid #FCE174;
-  padding: 5px;
-  overflow-x: hidden;
-}
-
-#dashboard #widget_defs {
-  margin-right: 104px;
-  overflow-y: auto;
-  height: 250px;
-}
-
-#dashboard #edit-layout {
-  width: 86px;
-  height: 248px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-top: 5px;
-}
-
-#dashboard #edit-layout p {
-  margin-bottom: 5px;
-}
-
-#dashboard .widget_def {
-  display: inline-block;
-  vertical-align: top;
-  border: 1px solid #FCE174;
-  padding: 5px;
-  margin: 5px;
-  white-space: normal;
-  width: 250px;
-  min-height: 100px;
-}
-
-#dashboard ul.widget_categs li {
-  padding-right: 5px;
-}
-
-#dashboard ul.widget_categs li.selected a {
-  font-weight: bold;
-  text-decoration: none;
-}
-
-#dashboard .select-layout {
-  float: left;
-}
-
-#dashboard .select-layout img {
-  border: 3px solid #FFF6BF;
-}
-
-#dashboard .select-layout.selected img {
-  border: 3px solid #4B9FD5;
-}
-
-.admin_page {
-    position: relative;
-}
-
-.admin_page table {
-  margin-top: 10px;
-  margin-bottom: 50px;
-}
-
-.admin_page .empty {
-  font-style: italic;
-}
-
-.admin_page .operations {
-  width: 260px;
-  text-align: right;
-}
-
-.admin_page .operations .link-action { margin-left: 4px; }
-
-.admin_page .owner {
-  width: 140px;
-  text-align: center;
-}
-
-.admin_page .shared {
-  width: 40px;
-  text-align: center;
-}
-
-.admin_page .order, .admin_page .global {
-  width: 45px;
-  text-align: center;
-}
-
-/*OPERATIONS*/
-#dashboard #dashboard-operations {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-#dashboard #dashboard-operations ul.operations {
-  float: left;
-  list-style-type: none;
-  border: 1px solid #cdcdcd;
-  padding: 0;
-  margin: 0;
-  border-radius: 3px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-}
-
-#dashboard #dashboard-operations ul.operations li {
-  float: left;
-  margin: 0;
-  padding: 2px 10px;
-  position: relative;
-  background-color: #f4f4f4;
-  font-size: 85%;
-  border-right: 1px solid #cdcdcd;
-}
-
-#dashboard #dashboard-operations ul.operations li.last {
-  border-right-width: 0;
-}
-
-#dashboard #dashboard-operations ul.operations li.selected {
-  background-color: #d4d4d4;
-}
-
-#dashboard #dashboard-operations ul.operations li a {
-  color: #555;
-}
-
-#dashboard .dashboard-column {
-  margin: 0;
-  padding: 0;
-  overflow: visible;
-}
-
-#dashboard .dashboard-column-wrapper {
-  float: left;
-  margin: 0;
-  padding: 0;
-}
-
-#dashboard .column-handle {
-  height: 30px;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  line-height: 100px;
-  text-align: center;
-  font-size: x-large;
-  vertical-align: middle;
-  background-color: #eee;
-}
-
-#dashboard .block {
-  position: relative;
-  width: 100%;
-}
-
-#dashboard .widget-header {
-  line-height: 16px;
-  padding: 3px 5px 5px;
-  background-color: #efefef;
-  border-bottom: 0;
-}
-
-#dashboard .widget-handle {
-  cursor: move;
-  margin: 0;
-  background-image: url('../images/move.png');
-  background-position: left center;
-  background-repeat: no-repeat;
-  padding-left: 20px;
-}
-
-#dashboard .widget-actions {
-  float: right;
-}
-
-#dashboard .widget-actions a {
-  cursor: pointer;
-}
-
-#dashboard .block-hover {
-  outline: 2px dashed #ddd;
-}
-
-#dashboard .shadow-block {
-  box-shadow: 8px 8px 8px #ddd;
-  box-shadow: 8px 8px 8px #ddd;
-  -moz-box-shadow: 8px 8px 8px #ddd;
-  -webkit-box-shadow: 8px 8px 8px #ddd;
-}
-
-
-
-/*
- * Widget Components
- */
-
-.widget-row {
-  font-size: 0;
-  margin: 0 -10px -20px;
-}
-
-.widget-span {
-  display: inline-block;
-  vertical-align: top;
-  padding: 0 10px 20px;
-  .box-sizing(border-box);
-  font-size: @baseFontSize;
-}
-
-.widget-span-1  { width: 8.33333333333333%; }
-.widget-span-2  { width: 16.66666666666667%; }
-.widget-span-3  { width: 25%; }
-.widget-span-3-5  { width: 29.16666666666667%; }
-.widget-span-4  { width: 33.33333333333333%; }
-.widget-span-5  { width: 41.66666666666667%; }
-.widget-span-6  { width: 50%; }
-.widget-span-7  { width: 58.33333333333333%; }
-.widget-span-8  { width: 66.666666666667%; }
-.widget-span-9  { width: 75%; }
-.widget-span-10 { width: 83.333333333333%; }
-.widget-span-11 { width: 91.666666666667%; }
-.widget-span-12 { width: 100%; }
-
-@media (max-width: 1279px) {
-  .widget-span-1  { width: 50%; }
-  .widget-span-2  { width: 50%; }
-  .widget-span-3  { width: 50%; }
-  .widget-span-3-5  { width: 50%; }
-  .widget-span-4  { width: 50%; }
-  .widget-span-5  { width: 50%; }
-  .widget-span-6  { width: 50%; }
-  .widget-span-7  { width: 100%; }
-  .widget-span-8  { width: 100%; }
-  .widget-span-9  { width: 100%; }
-  .widget-span-10 { width: 100%; }
-  .widget-span-11 { width: 100%; }
-  .widget-span-12 { width: 100%; }
-}
-
-.widget-label {
-  display: block;
-  font-size: @baseFontSize;
-  line-height: 1.2;
-  font-weight: 300;
-}
-
-.widget-number {
-  color: @darkBlue;
-}
-
-.widget-big {
-  line-height: 1.5;
-  font-size: 24px;
-  font-weight: 300;
-}
-
-.widget-medium {
-  line-height: 1.5;
-  font-size: 18px;
-  font-weight: 300;
-}
-
-.widget-measure {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 15px 10px 0;
-
-  .widget-link, .widget-number { .widget-medium; }
-  .widget-label { text-transform: capitalize; }
-}
-
-.widget-measure-main {
-  display: block;
-  margin-top: 10px;
-
-  .widget-link, .widget-number { .widget-big; }
-  .widget-label { font-size: @bigFontSize; }
-}
-
-.widget-measure-container {
-  margin: -10px 0;
-}
-
-.widget-measure-delta {
-  margin-top: -5px;
-  margin-bottom: 10px;
-  line-height: 1.5;
-}
-
-// Widget Histogram
-
-.widget-barchar {
-  line-height: 1;
-
-  td {
-    vertical-align: middle !important;
-  }
-
-  div.barchart div { height: 1em; }
-}
-
-.widget-measure-container .widget-barchar { margin-bottom: 10px; }
-
-.widget-measure-container .widget-barchart-more {
-  margin-top: -5px;
-  margin-bottom: 10px;
-  padding-left: 5px;
-}
-
-// Description Widget
-
-.description-widget-project {
-  display: inline-block;
-  line-height: 1.5;
-  margin-right: 10px;
-  font-size: @bigFontSize;
-  font-weight: 300;
-  white-space: nowrap;
-}
-
-.description-widget-description {
-  margin: 7px 0;
-  line-height: 1.5;
-}
-
-.description-widget-key {
-  color: @secondFontColor;
-  font-size: @smallFontSize;
-  font-weight: 300;
-  white-space: nowrap;
-}
-
-.description-widget-links {
-
-  & > li {
-    display: inline-block;
-    vertical-align: top;
-    padding: 5px 25px 5px 0;
-
-    & > a {
-      font-size: @baseFontSize;
-
-      & > i, & > i:before {
-        vertical-align: top;
-        font-size: 16px;
-      }
-    }
-  }
-}
-
-.description-widget-link-data {
-  margin-top: 7px;
-}
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/dsm.less b/server/sonar-web/src/main/less/dsm.less
deleted file mode 100644
index f41f4ffc461..00000000000
--- a/server/sonar-web/src/main/less/dsm.less
+++ /dev/null
@@ -1,125 +0,0 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
-@import (reference) 'ui';
-
-@cellSize: 22px;
-
-.dsm {
-
-}
-
-
-.dsm-legend {
-  margin: 10px 0;
-
-  & > li {
-    display: inline-block;
-  }
-
-  & > li + li {
-    margin-left: 20px;
-  }
-}
-
-.dsm-legend-square {
-  display: inline-block;
-  vertical-align: middle;
-  .size(14px, 14px);
-
-  &.gray { background-color: @grey; }
-  &.red { background-color: @red; }
-  &.green { .dsm-usage-mixin; }
-  &.blue { background-color: @blue; }
-  &.yellow { .dsm-dependency-mixin; }
-}
-
-.dsm-legend-label {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: @baseFontSize;
-}
-
-
-.dsm-body td {
-  border: 1px solid @barBorderColor;
-}
-
-
-.dsm-body-title {
-  position: relative;
-  vertical-align: middle;
-  padding: 2px 32px 2px 4px;
-  border-right: 2px solid darken(@barBorderColor, 8%) !important;
-  color: @baseFontColor;
-  cursor: pointer;
-  white-space: nowrap;
-  .link-no-underline;
-  .trans(background-color);
-
-  &:hover { background-color: @barBackgroundColor; }
-}
-
-.dsm-body-cell {
-  min-width: 23px;
-  padding: 2px 4px;
-  .box-sizing(border-box);
-  text-align: center;
-  cursor: pointer;
-  white-space: nowrap;
-  .trans(background-color);
-}
-
-.dsm-body-cell-dependency {
-  background-color: @grey;
-}
-
-.dsm-body-cell-cycle {
-  background-color: @red !important;
-  color: #fff !important;
-}
-
-
-.dsm-body-highlighted {
-  background-color: #dff2fd;
-
-  &:hover { background-color: #dff2fd; }
-}
-
-.dsm-body-usage, .dsm-body-usage:hover { .dsm-usage-mixin; }
-.dsm-body-dependency, .dsm-body-dependency:hover { .dsm-dependency-mixin; }
-
-
-.dsm-usage-mixin() {
-  background-color: #e2ffbe;
-}
-
-.dsm-dependency-mixin() {
-  background-color: #fde9cc;
-}
-
-
-.dsm-info {
-  margin-top: 25px;
-
-  th {
-    padding: 2px 5px 7px;
-    font-weight: 500;
-  }
-
-  td {
-    padding: 2px 5px;
-
-    &.changed { padding-top: 7px; }
-  }
-}
-
-.dsm-body-title-package-tangles {
-  position: absolute;
-  top: 50%; right: 4px;
-  margin-top: -10px;
-  padding: 2px 5px;
-  border-radius: 20px;
-  background: @red;
-  font-size: @smallFontSize;
-  color: #fff;
-}
diff --git a/server/sonar-web/src/main/less/icons.less b/server/sonar-web/src/main/less/icons.less
deleted file mode 100644
index 451c4366930..00000000000
--- a/server/sonar-web/src/main/less/icons.less
+++ /dev/null
@@ -1,617 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
-
-@font-face {
-	font-family: 'sonar';
-	src:url('../fonts/sonar-5.1.eot?');
-	src:url('../fonts/sonar-5.1.eot?#iefix') format('embedded-opentype'),
-		  url('../fonts/sonar-5.1.woff?') format('woff'),
-		  url('../fonts/sonar-5.1.ttf?') format('truetype'),
-		  url('../fonts/sonar-5.1.svg?#sonar') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  font-family: 'sonar';
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  vertical-align: middle;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a[class^="icon-"], a[class*=" icon-"] {
-  .link-no-underline;
-}
-
-.icon-half-transparent {
-  opacity: 0.5;
-}
-
-
-/*
- * Colors
- */
-
-
-.icon-black { color: @baseFontColor; }
-.icon-red { color: @red; }
-.icon-green { color: @green; }
-
-
-/*
- * Severity
- */
-
-[class^="icon-severity-"], [class*=" icon-severity"] {
-  position: relative;
-  top: -1px;
-}
-
-.icon-severity-blocker:before,
-.icon-severity-4:before {
-  content: "\f000";
-  color: @severityBlockerColor;
-  font-size: @iconSmallFontSize;
-}
-.icon-severity-critical:before,
-.icon-severity-3:before {
-  content: "\f001";
-  color: @severityCriticalColor;
-  font-size: @iconSmallFontSize;
-}
-.icon-severity-major:before,
-.icon-severity-2:before {
-  content: "\f003";
-  color: @severityMajorColor;
-  font-size: @iconSmallFontSize;
-}
-.icon-severity-minor:before,
-.icon-severity-1:before {
-  content: "\f006";
-  color: @severityMinorColor;
-  font-size: @iconSmallFontSize;
-}
-.icon-severity-info:before,
-.icon-severity-0:before {
-  content: "\f004";
-  color: @severityInfoColor;
-  font-size: @iconSmallFontSize;
-}
-
-
-/*
- * Status
- */
-
-[class^="icon-status-"], [class*=" icon-status"] {
-  position: relative;
-  top: -1px;
-}
-
-.icon-status-open:before {
-  content: "\f010";
-  color: @statusOpenColor;
-  font-size: @iconSmallFontSize;
-  line-height: @iconLineHeight;
-}
-.icon-status-confirmed:before {
-  content: "\f011";
-  color: @statusConfirmedColor;
-  font-size: @iconSmallFontSize;
-  line-height: @iconLineHeight;
-}
-.icon-status-reopened:before {
-  content: "\f012";
-  color: @statusReopenedColor;
-  font-size: @iconSmallFontSize;
-  line-height: @iconLineHeight;
-}
-.icon-status-resolved:before {
-  content: "\f013";
-  color: @statusResolvedColor;
-  font-size: @iconSmallFontSize;
-  line-height: @iconLineHeight;
-}
-.icon-status-closed:before {
-  content: "\f014";
-  color: @statusClosedColor;
-  font-size: @iconSmallFontSize;
-  line-height: @iconLineHeight;
-}
-
-
-/*
- * Test Status
- */
-
-.icon-test-status-ok:before {
-  content: "\f013";
-  color: @green;
-  font-size: @iconFontSize;
-}
-.icon-test-status-failure:before {
-  content: "\f000";
-  color: @orange;
-  font-size: @iconFontSize;
-}
-.icon-test-status-error:before {
-  content: "\f057";
-  color: @red;
-  font-size: @iconFontSize;
-}
-.icon-test-status-skipped:before {
-  content: "\f056";
-  color: @middleGrey;
-  font-size: @iconFontSize;
-}
-
-
-/*
- * Alert
- */
-
-.icon-alert-ok:before {
-  content: "\f013";
-  color: @green;
-  font-size: @iconFontSize;
-}
-.icon-alert-warn:before {
-  content: "\f000";
-  color: @orange;
-  font-size: @iconFontSize;
-}
-.icon-alert-error:before {
-  content: "\f057";
-  color: @red;
-  font-size: @iconFontSize;
-}
-.icon-alert-none:before {
-  content: "\f056";
-  color: @middleGrey;
-  font-size: @iconFontSize;
-}
-
-
-/*
- * Qualifier
- */
-
-[class^="icon-qualifier-"], [class*=" icon-qualifier-"] {
-  position: relative;
-  top: -1px;
-  color: @baseFontColor;
-  font-size: @iconFontSize;
-}
-
-.icon-qualifier-dir:before,
-.icon-qualifier-pac:before { content: "\f114"; }
-.icon-qualifier-trk:before,
-.icon-qualifier-brc:before,
-.icon-qualifier-dev_prj:before { content: "\e600"; }
-.icon-qualifier-cla:before,
-.icon-qualifier-fil:before { content: "\f0f6"; }
-.icon-qualifier-uts:before { content: "\e602"; }
-.icon-qualifier-lib:before { content: "\e604"; }
-.icon-qualifier-vw:before,
-.icon-qualifier-svw:before { content: "\e608"; }
-.icon-qualifier-dev:before { content: "\e60a"; }
-
-.icon-qualifier-dir:before,
-.icon-qualifier-pac:before { color: @orange; }
-.icon-qualifier-cla:before,
-.icon-qualifier-fil:before,
-.icon-qualifier-trk:before,
-.icon-qualifier-brc:before,
-.icon-qualifier-uts:before,
-.icon-qualifier-lib:before,
-.icon-qualifier-vw:before,
-.icon-qualifier-svw:before,
-.icon-qualifier-dev:before,
-.icon-qualifier-dev_prj:before { color: darken(@blue, 10%); }
-
-
-/*
- * Trends
- */
-
-[class^="icon-trend-"], [class*=" icon-trend-"] {
-  position: relative;
-  top: -1px;
-  font-size: @iconSmallFontSize;
-}
-
-.icon-trend-big {
-  font-size: @iconFontSize;
-}
-
-.icon-trend-0:before {
-  // alignment trick
-  content: "\e605";
-  visibility: hidden;
-}
-.icon-trend-1:before {
-  content: "\e605";
-}
-.icon-trend--1:before {
-  content: "\e601";
-}
-.icon-trend-2:before {
-  content: "\e606";
-}
-.icon-trend--2:before {
-  content: "\e603";
-}
-
-
-/*
- * Checkbox
- */
-
-.icon-checkbox {
-  position: relative;
-  top: -2px;
-  display: inline-block;
-  .square(16px);
-  background-size: 16px 16px;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDkuNzE1MDI3LDE4Mi44NTY5OTVsLTQ3NS40Mjg5ODYsMGMtMjUuMTQzMDA1LDAgLTQ2LjY2Niw4Ljk1MTk5NiAtNjQuNTcwOTk5LDI2Ljg1Njk5NXMtMjYuODU2OTk1LDM5LjQyNzk5NCAtMjYuODU2OTk1LDY0LjU3MDAwN2wwLDQ3NS40Mjg5NTVjMCwyNS4xNDMwMDUgOC45NTE5OTYsNDYuNjY3MDUzIDI2Ljg1Njk5NSw2NC41NzEwNDVzMzkuNDI3OTk0LDI2Ljg1Njk5NSA2NC41NzA5OTksMjYuODU2OTk1bDQ3NS40Mjg5ODYsMGMyNS4xNDMwMDUsMCA0Ni42NjYwMTYsLTguOTUzMDAzIDY0LjU3MjAyMSwtMjYuODU2OTk1YzE3LjkwMzk5MiwtMTcuOTAzOTkyIDI2Ljg1NDk4LC0zOS40MjkwMTYgMjYuODU0OTgsLTY0LjU3MTA0NWwwLC00NzUuNDI3OTc5YzAsLTI1LjE0MzAyMSAtOC45NTA5ODksLTQ2LjY2NiAtMjYuODU0OTgsLTY0LjU3MDAwN2MtMTcuOTA2MDA2LC0xNy45MDQ5OTkgLTM5LjQyOTk5MywtMjYuODU4MDAyIC02NC41NzIwMjEsLTI2Ljg1ODAwMmwwLDBsMCwwLjAwMDAzMXptMTY0LjU3MTk2LDkxLjQyODAwOWwwLDQ3NS40Mjg5ODZjMCw0NS4zMzM5ODQgLTE2LjA5NjAwOCw4NC4wOTYwMDggLTQ4LjI4Njk4NywxMTYuMjg2MDExYy0zMi4xODkwMjYsMzIuMTkwOTc5IC03MC45NTMwMDMsNDguMjg2MDExIC0xMTYuMjg1MDM0LDQ4LjI4NjAxMWwtNDc1LjQyOTk2MiwwYy00NS4zMzMwMDgsMCAtODQuMDk1MDE2LC0xNi4wOTUwMzIgLTExNi4yODYwMTEsLTQ4LjI4NjAxMXMtNDguMjg1OTk1LC03MC45NTIwMjYgLTQ4LjI4NTk5NSwtMTE2LjI4NjAxMWwwLC00NzUuNDI4OTg2YzAsLTQ1LjMzMzAwOCAxNi4wOTUwMDEsLTg0LjA5NTAwMSA0OC4yODU5OTUsLTExNi4yODUwMDRjMzIuMTkwMDAyLC0zMi4xOTEwMDIgNzAuOTUzMDAzLC00OC4yODYwMDMgMTE2LjI4NjAxMSwtNDguMjg2MDAzbDQ3NS40Mjk5NjIsMGM0NS4zMzIwMzEsMCA4NC4wOTYwMDgsMTYuMDk1MDAxIDExNi4yODUwMzQsNDguMjg2MDAzYzMyLjE5MDk3OSwzMi4xOTAwMDIgNDguMjg2OTg3LDcwLjk1MTk5NiA0OC4yODY5ODcsMTE2LjI4NTAwNGwwLDB6IiBmaWxsPSIjNzc3Nzc3Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
-}
-
-.icon-checkbox-checked {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDkuNzE1MDI3LDE4Mi44NTY5OTVsLTQ3NS40Mjg5ODYsMGMtMjUuMTQzMDA1LDAgLTQ2LjY2Niw4Ljk1MTk5NiAtNjQuNTcwOTk5LDI2Ljg1Njk5NXMtMjYuODU2OTk1LDM5LjQyNzk5NCAtMjYuODU2OTk1LDY0LjU3MDAwN2wwLDQ3NS40Mjg5NTVjMCwyNS4xNDMwMDUgOC45NTE5OTYsNDYuNjY3MDUzIDI2Ljg1Njk5NSw2NC41NzEwNDVzMzkuNDI3OTk0LDI2Ljg1Njk5NSA2NC41NzA5OTksMjYuODU2OTk1bDQ3NS40Mjg5ODYsMGMyNS4xNDMwMDUsMCA0Ni42NjYwMTYsLTguOTUzMDAzIDY0LjU3MjAyMSwtMjYuODU2OTk1YzE3LjkwMzk5MiwtMTcuOTAzOTkyIDI2Ljg1NDk4LC0zOS40MjkwMTYgMjYuODU0OTgsLTY0LjU3MTA0NWwwLC00NzUuNDI3OTc5YzAsLTI1LjE0MzAyMSAtOC45NTA5ODksLTQ2LjY2NiAtMjYuODU0OTgsLTY0LjU3MDAwN2MtMTcuOTA2MDA2LC0xNy45MDQ5OTkgLTM5LjQyOTk5MywtMjYuODU4MDAyIC02NC41NzIwMjEsLTI2Ljg1ODAwMmwwLDBsMCwwLjAwMDAzMXptMTY0LjU3MTk2LDkxLjQyODAwOWwwLDQ3NS40Mjg5ODZjMCw0NS4zMzM5ODQgLTE2LjA5NjAwOCw4NC4wOTYwMDggLTQ4LjI4Njk4NywxMTYuMjg2MDExYy0zMi4xODkwMjYsMzIuMTkwOTc5IC03MC45NTMwMDMsNDguMjg2MDExIC0xMTYuMjg1MDM0LDQ4LjI4NjAxMWwtNDc1LjQyOTk2MiwwYy00NS4zMzMwMDgsMCAtODQuMDk1MDE2LC0xNi4wOTUwMzIgLTExNi4yODYwMTEsLTQ4LjI4NjAxMXMtNDguMjg1OTk1LC03MC45NTIwMjYgLTQ4LjI4NTk5NSwtMTE2LjI4NjAxMWwwLC00NzUuNDI4OTg2YzAsLTQ1LjMzMzAwOCAxNi4wOTUwMDEsLTg0LjA5NTAwMSA0OC4yODU5OTUsLTExNi4yODUwMDRjMzIuMTkwMDAyLC0zMi4xOTEwMDIgNzAuOTUzMDAzLC00OC4yODYwMDMgMTE2LjI4NjAxMSwtNDguMjg2MDAzbDQ3NS40Mjk5NjIsMGM0NS4zMzIwMzEsMCA4NC4wOTYwMDgsMTYuMDk1MDAxIDExNi4yODUwMzQsNDguMjg2MDAzYzMyLjE5MDk3OSwzMi4xOTAwMDIgNDguMjg2OTg3LDcwLjk1MTk5NiA0OC4yODY5ODcsMTE2LjI4NTAwNGwwLDB6IiBmaWxsPSIjNzc3Nzc3Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=),
-                    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDIuOTg0OTg1LDQwNC4xMDY5OTVjMCw3Ljk0Nzk5OCAtMi43ODEwMDYsMTQuNzAzMDAzIC04LjM0NDk3MSwyMC4yNjY5OThsLTI1Ni4zMjEwNDUsMjU2LjMxOWMtNS41NjI5ODgsNS41NjI5ODggLTEyLjMxOSw4LjM0NjAwOCAtMjAuMjY1OTkxLDguMzQ2MDA4cy0xNC43MDMwMDMsLTIuNzgxOTgyIC0yMC4yNjY5OTgsLTguMzQ2MDA4bC0xNDguNDI1OTk1LC0xNDguNDI0OTg4Yy01LjU2MzAxOSwtNS41NjI5ODggLTguMzQ2MDA4LC0xMi4zMTkwMzEgLTguMzQ2MDA4LC0yMC4yNjcwMjlzMi43ODIwMTMsLTE0LjcwMjk3MiA4LjM0NjAwOCwtMjAuMjY1OTkxbDQwLjUzMzk5NywtNDAuNTM1MDA0YzUuNTYyOTg4LC01LjU2Mjk4OCAxMi4zMTksLTguMzQ1OTc4IDIwLjI2Njk5OCwtOC4zNDU5NzhzMTQuNzAzMDAzLDIuNzgxOTgyIDIwLjI2Njk5OCw4LjM0NTk3OGw4Ny42MjYwMDcsODcuOTI1OTk1bDE5NS41MTc5NzUsLTE5NS44MTc5NjNjNS41NjQwMjYsLTUuNTYzMDE5IDEyLjMxOTAzMSwtOC4zNDYwMDggMjAuMjY4MDA1LC04LjM0NjAwOHMxNC43MDA5ODksMi43ODE5ODIgMjAuMjY0MDM4LDguMzQ2MDA4bDQwLjUzNDk3Myw0MC41MzM5OTdjNS41NjIwMTIsNS41NjM5OTUgOC4zNDUwMzIsMTIuMzE5IDguMzQ2MDA4LDIwLjI2Njk5OGwwLDBsMCwtMC4wMDIwMTR6IiBmaWxsPSIjNGI5ZmQ1Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
-
-  &.icon-checkbox-single {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03MDUuNzU1MDA1LDMxOC4yNDQ5OTVjLTE3LjYxNzk4MSwtMTcuNjE5OTk1IC0zOC44MzU5OTksLTI2LjQyOTAxNiAtNjMuNjQ4MDEsLTI2LjQyOTAxNmwtMjYwLjIxNzk4NywwYy0yNC44MTI5ODgsMCAtNDYuMDI3OTg1LDguODA5MDIxIC02My42NDY5NzMsMjYuNDI5MDE2Yy0xNy42MTgwMTEsMTcuNjE4MDExIC0yNi40MjgwMDksMzguODM0MDE1IC0yNi40MjgwMDksNjMuNjQ3MDAzbDAsMjYwLjIxODk2NGMwLDI0LjgxNDAyNiA4LjgwOTk5OCw0Ni4wMjcwMzkgMjYuNDI4OTg2LDYzLjY0ODAxYzE3LjYxODAxMSwxNy42MTgwNDIgMzguODM0MDE1LDI2LjQyODA0IDYzLjY0NzAwMywyNi40MjgwNGwyNjAuMjE4MDE4LDBjMjQuODExOTUxLDAgNDYuMDI4OTkyLC04LjgwOTk5OCA2My42NDc5NDksLTI2LjQyODA0YzE3LjYxODA0MiwtMTcuNjIwOTcyIDI2LjQyODA0LC0zOC44MzQ5NjEgMjYuNDI4MDQsLTYzLjY0ODAxbDAsLTI2MC4yMTg5NjRjMCwtMjQuODEyOTg4IC04LjgwOTk5OCwtNDYuMDI4MDE1IC0yNi40MjkwMTYsLTYzLjY0NzAwM3oiIGZpbGw9IiM0YjlmZDUiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==),
-                      url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDkuNzE1MDI3LDE4Mi44NTY5OTVsLTQ3NS40Mjg5ODYsMGMtMjUuMTQzMDA1LDAgLTQ2LjY2Niw4Ljk1MTk5NiAtNjQuNTcwOTk5LDI2Ljg1Njk5NXMtMjYuODU2OTk1LDM5LjQyNzk5NCAtMjYuODU2OTk1LDY0LjU3MDAwN2wwLDQ3NS40Mjg5NTVjMCwyNS4xNDMwMDUgOC45NTE5OTYsNDYuNjY3MDUzIDI2Ljg1Njk5NSw2NC41NzEwNDVzMzkuNDI3OTk0LDI2Ljg1Njk5NSA2NC41NzA5OTksMjYuODU2OTk1bDQ3NS40Mjg5ODYsMGMyNS4xNDMwMDUsMCA0Ni42NjYwMTYsLTguOTUzMDAzIDY0LjU3MjAyMSwtMjYuODU2OTk1YzE3LjkwMzk5MiwtMTcuOTAzOTkyIDI2Ljg1NDk4LC0zOS40MjkwMTYgMjYuODU0OTgsLTY0LjU3MTA0NWwwLC00NzUuNDI3OTc5YzAsLTI1LjE0MzAyMSAtOC45NTA5ODksLTQ2LjY2NiAtMjYuODU0OTgsLTY0LjU3MDAwN2MtMTcuOTA2MDA2LC0xNy45MDQ5OTkgLTM5LjQyOTk5MywtMjYuODU4MDAyIC02NC41NzIwMjEsLTI2Ljg1ODAwMmwwLDBsMCwwLjAwMDAzMXptMTY0LjU3MTk2LDkxLjQyODAwOWwwLDQ3NS40Mjg5ODZjMCw0NS4zMzM5ODQgLTE2LjA5NjAwOCw4NC4wOTYwMDggLTQ4LjI4Njk4NywxMTYuMjg2MDExYy0zMi4xODkwMjYsMzIuMTkwOTc5IC03MC45NTMwMDMsNDguMjg2MDExIC0xMTYuMjg1MDM0LDQ4LjI4NjAxMWwtNDc1LjQyOTk2MiwwYy00NS4zMzMwMDgsMCAtODQuMDk1MDE2LC0xNi4wOTUwMzIgLTExNi4yODYwMTEsLTQ4LjI4NjAxMXMtNDguMjg1OTk1LC03MC45NTIwMjYgLTQ4LjI4NTk5NSwtMTE2LjI4NjAxMWwwLC00NzUuNDI4OTg2YzAsLTQ1LjMzMzAwOCAxNi4wOTUwMDEsLTg0LjA5NTAwMSA0OC4yODU5OTUsLTExNi4yODUwMDRjMzIuMTkwMDAyLC0zMi4xOTEwMDIgNzAuOTUzMDAzLC00OC4yODYwMDMgMTE2LjI4NjAxMSwtNDguMjg2MDAzbDQ3NS40Mjk5NjIsMGM0NS4zMzIwMzEsMCA4NC4wOTYwMDgsMTYuMDk1MDAxIDExNi4yODUwMzQsNDguMjg2MDAzYzMyLjE5MDk3OSwzMi4xOTAwMDIgNDguMjg2OTg3LDcwLjk1MTk5NiA0OC4yODY5ODcsMTE2LjI4NTAwNGwwLDB6IiBmaWxsPSIjNzc3Nzc3Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
-  }
-}
-
-// Used for align elements
-.icon-checkbox-invisible {
-  visibility: hidden;
-}
-
-
-/*
- * Common
- */
-
-.icon-list:before {
-  content: "\f039";
-  font-size: @iconSmallFontSize;
-}
-.icon-bullet-list:before {
-  content: "\f03a";
-}
-.icon-settings:before {
-  content: "\f015";
-}
-.icon-bulk-change:before {
-  content: "\f085";
-  font-size: @iconSmallFontSize;
-}
-.icon-arrow-down:before {
-  content: "\f0d7";
-  position: relative;
-  top: -2px;
-}
-.icon-arrow-up:before {
-  content: "\f0d8";
-  position: relative;
-  top: -2px;
-}
-.icon-arrow-left:before {
-  content: "\f0d9";
-}
-.icon-arrow-right:before {
-  content: "\f0da";
-}
-.icon-dropdown:before {
-  content: "\f0d7";
-  position: relative;
-  top: -1px;
-}
-.icon-sort-desc:before {
-  content: "\f0d7";
-  position: relative;
-  top: -1px;
-}
-.icon-sort-asc:before {
-  content: "\f0d8";
-  position: relative;
-  top: -1px;
-}
-.icon-emoticon-smiley:before {
-  content: "\f118";
-}
-.icon-emoticon-sad:before {
-  content: "\f119";
-}
-.icon-emoticon-speechless:before {
-  content: "\f11a";
-}
-.icon-rect-check:before {
-  content: "\f046";
-}
-.icon-check:before {
-  content: "\f00c";
-  color: @green;
-  font-size: @iconFontSize;
-}
-.icon-default:before {
-  position: relative;
-  top: -0.1em;
-  content: "\f00c";
-}
-.icon-lang:before {
-  content: "\f024";
-  font-size: @iconSmallFontSize;
-}
-.icon-quality-profile:before {
-  content: "\f022";
-  font-size: @iconSmallFontSize;
-}
-.icon-tags:before {
-  content: "\f02c";
-  font-size: @iconSmallFontSize;
-}
-.icon-calendar:before {
-  content: "\f073";
-  font-size: @iconFontSize;
-}
-.icon-favorite { font-size: @iconFontSize; }
-.icon-favorite:before {
-  content: "\f005";
-  color: @orange;
-  font-size: @iconFontSize;
-}
-.icon-not-favorite { font-size: @iconFontSize; }
-.icon-not-favorite:before {
-  content: "\f005";
-  color: @darkGrey;
-  font-size: @iconFontSize;
-}
-.icon-help:before {
-  content: "\f059";
-  color: @blue;
-  font-size: @iconFontSize;
-}
-.icon-info:before {
-  content: "\f05a";
-  color: @blue;
-  font-size: @iconFontSize;
-}
-.icon-uniF060:before {
-  content: "\f060";
-}
-.icon-uniF061:before {
-  content: "\f061";
-}
-.icon-uniF062:before {
-  content: "\f062";
-}
-.icon-uniF063:before {
-  content: "\f063";
-}
-.icon-comment:before {
-  content: "\f075";
-  font-size: @iconSmallFontSize;
-}
-.icon-delete:before {
-  content: "\f00d";
-  color: @red;
-  font-size: @iconFontSize;
-}
-.icon-close:before {
-  content: "\f00d";
-  font-size: @iconFontSize;
-}
-.icon-compare:before {
-  content: "\f0c5";
-  font-size: @iconSmallFontSize;
-}
-.icon-restore:before {
-  content: "\f122";
-  font-size: @iconSmallFontSize;
-}
-.icon-inheritance:before {
-  content: "\f126";
-}
-.icon-plus:before {
-  content: "\f067";
-  font-size: @iconFontSize;
-}
-.icon-link:before {
-  content: "\f127";
-  font-size: @iconSmallFontSize;
-}
-.icon-move-down:before {
-  content: "\f063";
-  color: @darkBlue;
-  font-size: @iconFontSize;
-}
-.icon-move-up:before {
-  content: "\f062";
-  color: @darkBlue;
-  font-size: @iconFontSize;
-}
-.icon-move-left:before {
-  content: "\f060";
-  color: @darkBlue;
-  font-size: @iconFontSize;
-}
-.icon-move-right:before {
-  content: "\f061";
-  color: @darkBlue;
-  font-size: @iconFontSize;
-}
-.icon-scm:before {
-  content: "\f017";
-  font-size: @iconSmallFontSize;
-}
-.icon-scm_dev:before {
-  content: "\f015";
-  font-size: @iconSmallFontSize;
-}
-.icon-ci:before {
-  content: "\f021";
-  font-size: @iconSmallFontSize;
-}
-.icon-issue:before {
-  content: "\f188";
-  font-size: @iconSmallFontSize;
-}
-.icon-homepage:before {
-  content: "\f016";
-  font-size: @iconSmallFontSize;
-}
-.icon-resizer:before {
-  content: "\f142";
-  color: @darkGrey;
-  font-size: @iconFontSize;
-}
-.icon-expand:before {
-  content: "\e60b";
-  font-size: @iconFontSize;
-}
-.icon-period:before {
-  content: "\f018";
-  font-size: @iconFontSize;
-}
-.icon-filter:before {
-  content: "\f03a";
-  font-size: @iconFontSize;
-}
-.icon-detach:before {
-  content: "\f08e";
-  font-size: @iconSmallFontSize;
-}
-.icon-chevron-left:before {
-  content: "\f104";
-  font-size: @iconSmallFontSize;
-}
-.icon-chevron-right:before {
-  content: "\f105";
-  font-size: @iconSmallFontSize;
-}
-.icon-double-chevron-left:before {
-  content: "\f100";
-  font-size: @iconSmallFontSize;
-}
-.icon-double-chevron-right:before {
-  content: "\f101";
-  font-size: @iconSmallFontSize;
-}
-.icon-extension:before {
-  content: "\f069";
-  font-size: @iconFontSize;
-}
-.icon-home:before {
-  content: "\f016";
-  font-size: @iconFontSize;
-}
-.icon-component-viewer-filter:before {
-  content: "\e60e";
-  color: #999;
-  font-size: @iconSmallFontSize;
-}
-.icon-filters:before {
-  content: "\f039";
-  font-size: @iconSmallFontSize;
-}
-.icon-next:before {
-  content: "\f0d7";
-  font-size: @iconFontSize;
-}
-.icon-prev:before {
-  content: "\f0d8";
-  font-size: @iconFontSize;
-}
-.icon-search:before {
-  content: "\f002";
-  font-size: @iconFontSize;
-}
-.icon-edit:before {
-  content: "\f040";
-  font-size: @iconFontSize;
-}
-.icon-ellipsis-h:before {
-  position: relative;
-  top: 1px;
-  content: "\f141";
-  font-size: @iconSmallFontSize;
-}
-
-
-/*
- * Spinner
- */
-
-.spinner {
-  position: relative;
-  vertical-align: middle;
-  .square(16px);
-  border: 2px solid #0cf;
-  border-radius: 50%;
-  .animation(spin 0.75s infinite linear);
-
-  // For IE9 only, because it does not support css animations
-  // Show animated gif
-  .ie9 & {
-    background-image: url(../images/loading.gif);
-    background-repeat: no-repeat;
-    background-position: 0 0;
-    border: none;
-  }
-}
-
-.spinner:before,
-.spinner:after {
-  left: -2px;
-  top: -2px;
-  display: none;
-  position: absolute;
-  content: '';
-  width: inherit;
-  height: inherit;
-  border: inherit;
-  border-radius: inherit;
-}
-
-.spinner,
-.spinner:before,
-.spinner:after {
-  display: inline-block;
-  .box-sizing(border-box);
-  border-color: transparent;
-  border-top-color: @blue;
-  .animation-duration(1.2s);
-}
-.spinner:before {
-  .rotate(120deg);
-}
-.spinner:after {
-  .rotate(240deg);
-}
-
-.spinner-margin {
-  margin: 10px;
-}
-
-@-webkit-keyframes spin {
-  from { .rotate(0deg); }
-  to { .rotate(360deg); }
-}
-@keyframes spin {
-  from { .rotate(0deg); }
-  to { .rotate(360deg); }
-}
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/init/icons.less b/server/sonar-web/src/main/less/init/icons.less
new file mode 100644
index 00000000000..20d9e0e1947
--- /dev/null
+++ b/server/sonar-web/src/main/less/init/icons.less
@@ -0,0 +1,617 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+@font-face {
+	font-family: 'sonar';
+	src:url('../fonts/sonar-5.1.eot?');
+	src:url('../fonts/sonar-5.1.eot?#iefix') format('embedded-opentype'),
+		  url('../fonts/sonar-5.1.woff?') format('woff'),
+		  url('../fonts/sonar-5.1.ttf?') format('truetype'),
+		  url('../fonts/sonar-5.1.svg?#sonar') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'sonar';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: middle;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a[class^="icon-"], a[class*=" icon-"] {
+  .link-no-underline;
+}
+
+.icon-half-transparent {
+  opacity: 0.5;
+}
+
+
+/*
+ * Colors
+ */
+
+
+.icon-black { color: @baseFontColor; }
+.icon-red { color: @red; }
+.icon-green { color: @green; }
+
+
+/*
+ * Severity
+ */
+
+[class^="icon-severity-"], [class*=" icon-severity"] {
+  position: relative;
+  top: -1px;
+}
+
+.icon-severity-blocker:before,
+.icon-severity-4:before {
+  content: "\f000";
+  color: @severityBlockerColor;
+  font-size: @iconSmallFontSize;
+}
+.icon-severity-critical:before,
+.icon-severity-3:before {
+  content: "\f001";
+  color: @severityCriticalColor;
+  font-size: @iconSmallFontSize;
+}
+.icon-severity-major:before,
+.icon-severity-2:before {
+  content: "\f003";
+  color: @severityMajorColor;
+  font-size: @iconSmallFontSize;
+}
+.icon-severity-minor:before,
+.icon-severity-1:before {
+  content: "\f006";
+  color: @severityMinorColor;
+  font-size: @iconSmallFontSize;
+}
+.icon-severity-info:before,
+.icon-severity-0:before {
+  content: "\f004";
+  color: @severityInfoColor;
+  font-size: @iconSmallFontSize;
+}
+
+
+/*
+ * Status
+ */
+
+[class^="icon-status-"], [class*=" icon-status"] {
+  position: relative;
+  top: -1px;
+}
+
+.icon-status-open:before {
+  content: "\f010";
+  color: @statusOpenColor;
+  font-size: @iconSmallFontSize;
+  line-height: @iconLineHeight;
+}
+.icon-status-confirmed:before {
+  content: "\f011";
+  color: @statusConfirmedColor;
+  font-size: @iconSmallFontSize;
+  line-height: @iconLineHeight;
+}
+.icon-status-reopened:before {
+  content: "\f012";
+  color: @statusReopenedColor;
+  font-size: @iconSmallFontSize;
+  line-height: @iconLineHeight;
+}
+.icon-status-resolved:before {
+  content: "\f013";
+  color: @statusResolvedColor;
+  font-size: @iconSmallFontSize;
+  line-height: @iconLineHeight;
+}
+.icon-status-closed:before {
+  content: "\f014";
+  color: @statusClosedColor;
+  font-size: @iconSmallFontSize;
+  line-height: @iconLineHeight;
+}
+
+
+/*
+ * Test Status
+ */
+
+.icon-test-status-ok:before {
+  content: "\f013";
+  color: @green;
+  font-size: @iconFontSize;
+}
+.icon-test-status-failure:before {
+  content: "\f000";
+  color: @orange;
+  font-size: @iconFontSize;
+}
+.icon-test-status-error:before {
+  content: "\f057";
+  color: @red;
+  font-size: @iconFontSize;
+}
+.icon-test-status-skipped:before {
+  content: "\f056";
+  color: @middleGrey;
+  font-size: @iconFontSize;
+}
+
+
+/*
+ * Alert
+ */
+
+.icon-alert-ok:before {
+  content: "\f013";
+  color: @green;
+  font-size: @iconFontSize;
+}
+.icon-alert-warn:before {
+  content: "\f000";
+  color: @orange;
+  font-size: @iconFontSize;
+}
+.icon-alert-error:before {
+  content: "\f057";
+  color: @red;
+  font-size: @iconFontSize;
+}
+.icon-alert-none:before {
+  content: "\f056";
+  color: @middleGrey;
+  font-size: @iconFontSize;
+}
+
+
+/*
+ * Qualifier
+ */
+
+[class^="icon-qualifier-"], [class*=" icon-qualifier-"] {
+  position: relative;
+  top: -1px;
+  color: @baseFontColor;
+  font-size: @iconFontSize;
+}
+
+.icon-qualifier-dir:before,
+.icon-qualifier-pac:before { content: "\f114"; }
+.icon-qualifier-trk:before,
+.icon-qualifier-brc:before,
+.icon-qualifier-dev_prj:before { content: "\e600"; }
+.icon-qualifier-cla:before,
+.icon-qualifier-fil:before { content: "\f0f6"; }
+.icon-qualifier-uts:before { content: "\e602"; }
+.icon-qualifier-lib:before { content: "\e604"; }
+.icon-qualifier-vw:before,
+.icon-qualifier-svw:before { content: "\e608"; }
+.icon-qualifier-dev:before { content: "\e60a"; }
+
+.icon-qualifier-dir:before,
+.icon-qualifier-pac:before { color: @orange; }
+.icon-qualifier-cla:before,
+.icon-qualifier-fil:before,
+.icon-qualifier-trk:before,
+.icon-qualifier-brc:before,
+.icon-qualifier-uts:before,
+.icon-qualifier-lib:before,
+.icon-qualifier-vw:before,
+.icon-qualifier-svw:before,
+.icon-qualifier-dev:before,
+.icon-qualifier-dev_prj:before { color: darken(@blue, 10%); }
+
+
+/*
+ * Trends
+ */
+
+[class^="icon-trend-"], [class*=" icon-trend-"] {
+  position: relative;
+  top: -1px;
+  font-size: @iconSmallFontSize;
+}
+
+.icon-trend-big {
+  font-size: @iconFontSize;
+}
+
+.icon-trend-0:before {
+  // alignment trick
+  content: "\e605";
+  visibility: hidden;
+}
+.icon-trend-1:before {
+  content: "\e605";
+}
+.icon-trend--1:before {
+  content: "\e601";
+}
+.icon-trend-2:before {
+  content: "\e606";
+}
+.icon-trend--2:before {
+  content: "\e603";
+}
+
+
+/*
+ * Checkbox
+ */
+
+.icon-checkbox {
+  position: relative;
+  top: -2px;
+  display: inline-block;
+  .square(16px);
+  background-size: 16px 16px;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDkuNzE1MDI3LDE4Mi44NTY5OTVsLTQ3NS40Mjg5ODYsMGMtMjUuMTQzMDA1LDAgLTQ2LjY2Niw4Ljk1MTk5NiAtNjQuNTcwOTk5LDI2Ljg1Njk5NXMtMjYuODU2OTk1LDM5LjQyNzk5NCAtMjYuODU2OTk1LDY0LjU3MDAwN2wwLDQ3NS40Mjg5NTVjMCwyNS4xNDMwMDUgOC45NTE5OTYsNDYuNjY3MDUzIDI2Ljg1Njk5NSw2NC41NzEwNDVzMzkuNDI3OTk0LDI2Ljg1Njk5NSA2NC41NzA5OTksMjYuODU2OTk1bDQ3NS40Mjg5ODYsMGMyNS4xNDMwMDUsMCA0Ni42NjYwMTYsLTguOTUzMDAzIDY0LjU3MjAyMSwtMjYuODU2OTk1YzE3LjkwMzk5MiwtMTcuOTAzOTkyIDI2Ljg1NDk4LC0zOS40MjkwMTYgMjYuODU0OTgsLTY0LjU3MTA0NWwwLC00NzUuNDI3OTc5YzAsLTI1LjE0MzAyMSAtOC45NTA5ODksLTQ2LjY2NiAtMjYuODU0OTgsLTY0LjU3MDAwN2MtMTcuOTA2MDA2LC0xNy45MDQ5OTkgLTM5LjQyOTk5MywtMjYuODU4MDAyIC02NC41NzIwMjEsLTI2Ljg1ODAwMmwwLDBsMCwwLjAwMDAzMXptMTY0LjU3MTk2LDkxLjQyODAwOWwwLDQ3NS40Mjg5ODZjMCw0NS4zMzM5ODQgLTE2LjA5NjAwOCw4NC4wOTYwMDggLTQ4LjI4Njk4NywxMTYuMjg2MDExYy0zMi4xODkwMjYsMzIuMTkwOTc5IC03MC45NTMwMDMsNDguMjg2MDExIC0xMTYuMjg1MDM0LDQ4LjI4NjAxMWwtNDc1LjQyOTk2MiwwYy00NS4zMzMwMDgsMCAtODQuMDk1MDE2LC0xNi4wOTUwMzIgLTExNi4yODYwMTEsLTQ4LjI4NjAxMXMtNDguMjg1OTk1LC03MC45NTIwMjYgLTQ4LjI4NTk5NSwtMTE2LjI4NjAxMWwwLC00NzUuNDI4OTg2YzAsLTQ1LjMzMzAwOCAxNi4wOTUwMDEsLTg0LjA5NTAwMSA0OC4yODU5OTUsLTExNi4yODUwMDRjMzIuMTkwMDAyLC0zMi4xOTEwMDIgNzAuOTUzMDAzLC00OC4yODYwMDMgMTE2LjI4NjAxMSwtNDguMjg2MDAzbDQ3NS40Mjk5NjIsMGM0NS4zMzIwMzEsMCA4NC4wOTYwMDgsMTYuMDk1MDAxIDExNi4yODUwMzQsNDguMjg2MDAzYzMyLjE5MDk3OSwzMi4xOTAwMDIgNDguMjg2OTg3LDcwLjk1MTk5NiA0OC4yODY5ODcsMTE2LjI4NTAwNGwwLDB6IiBmaWxsPSIjNzc3Nzc3Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
+}
+
+.icon-checkbox-checked {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDkuNzE1MDI3LDE4Mi44NTY5OTVsLTQ3NS40Mjg5ODYsMGMtMjUuMTQzMDA1LDAgLTQ2LjY2Niw4Ljk1MTk5NiAtNjQuNTcwOTk5LDI2Ljg1Njk5NXMtMjYuODU2OTk1LDM5LjQyNzk5NCAtMjYuODU2OTk1LDY0LjU3MDAwN2wwLDQ3NS40Mjg5NTVjMCwyNS4xNDMwMDUgOC45NTE5OTYsNDYuNjY3MDUzIDI2Ljg1Njk5NSw2NC41NzEwNDVzMzkuNDI3OTk0LDI2Ljg1Njk5NSA2NC41NzA5OTksMjYuODU2OTk1bDQ3NS40Mjg5ODYsMGMyNS4xNDMwMDUsMCA0Ni42NjYwMTYsLTguOTUzMDAzIDY0LjU3MjAyMSwtMjYuODU2OTk1YzE3LjkwMzk5MiwtMTcuOTAzOTkyIDI2Ljg1NDk4LC0zOS40MjkwMTYgMjYuODU0OTgsLTY0LjU3MTA0NWwwLC00NzUuNDI3OTc5YzAsLTI1LjE0MzAyMSAtOC45NTA5ODksLTQ2LjY2NiAtMjYuODU0OTgsLTY0LjU3MDAwN2MtMTcuOTA2MDA2LC0xNy45MDQ5OTkgLTM5LjQyOTk5MywtMjYuODU4MDAyIC02NC41NzIwMjEsLTI2Ljg1ODAwMmwwLDBsMCwwLjAwMDAzMXptMTY0LjU3MTk2LDkxLjQyODAwOWwwLDQ3NS40Mjg5ODZjMCw0NS4zMzM5ODQgLTE2LjA5NjAwOCw4NC4wOTYwMDggLTQ4LjI4Njk4NywxMTYuMjg2MDExYy0zMi4xODkwMjYsMzIuMTkwOTc5IC03MC45NTMwMDMsNDguMjg2MDExIC0xMTYuMjg1MDM0LDQ4LjI4NjAxMWwtNDc1LjQyOTk2MiwwYy00NS4zMzMwMDgsMCAtODQuMDk1MDE2LC0xNi4wOTUwMzIgLTExNi4yODYwMTEsLTQ4LjI4NjAxMXMtNDguMjg1OTk1LC03MC45NTIwMjYgLTQ4LjI4NTk5NSwtMTE2LjI4NjAxMWwwLC00NzUuNDI4OTg2YzAsLTQ1LjMzMzAwOCAxNi4wOTUwMDEsLTg0LjA5NTAwMSA0OC4yODU5OTUsLTExNi4yODUwMDRjMzIuMTkwMDAyLC0zMi4xOTEwMDIgNzAuOTUzMDAzLC00OC4yODYwMDMgMTE2LjI4NjAxMSwtNDguMjg2MDAzbDQ3NS40Mjk5NjIsMGM0NS4zMzIwMzEsMCA4NC4wOTYwMDgsMTYuMDk1MDAxIDExNi4yODUwMzQsNDguMjg2MDAzYzMyLjE5MDk3OSwzMi4xOTAwMDIgNDguMjg2OTg3LDcwLjk1MTk5NiA0OC4yODY5ODcsMTE2LjI4NTAwNGwwLDB6IiBmaWxsPSIjNzc3Nzc3Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=),
+                    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDIuOTg0OTg1LDQwNC4xMDY5OTVjMCw3Ljk0Nzk5OCAtMi43ODEwMDYsMTQuNzAzMDAzIC04LjM0NDk3MSwyMC4yNjY5OThsLTI1Ni4zMjEwNDUsMjU2LjMxOWMtNS41NjI5ODgsNS41NjI5ODggLTEyLjMxOSw4LjM0NjAwOCAtMjAuMjY1OTkxLDguMzQ2MDA4cy0xNC43MDMwMDMsLTIuNzgxOTgyIC0yMC4yNjY5OTgsLTguMzQ2MDA4bC0xNDguNDI1OTk1LC0xNDguNDI0OTg4Yy01LjU2MzAxOSwtNS41NjI5ODggLTguMzQ2MDA4LC0xMi4zMTkwMzEgLTguMzQ2MDA4LC0yMC4yNjcwMjlzMi43ODIwMTMsLTE0LjcwMjk3MiA4LjM0NjAwOCwtMjAuMjY1OTkxbDQwLjUzMzk5NywtNDAuNTM1MDA0YzUuNTYyOTg4LC01LjU2Mjk4OCAxMi4zMTksLTguMzQ1OTc4IDIwLjI2Njk5OCwtOC4zNDU5NzhzMTQuNzAzMDAzLDIuNzgxOTgyIDIwLjI2Njk5OCw4LjM0NTk3OGw4Ny42MjYwMDcsODcuOTI1OTk1bDE5NS41MTc5NzUsLTE5NS44MTc5NjNjNS41NjQwMjYsLTUuNTYzMDE5IDEyLjMxOTAzMSwtOC4zNDYwMDggMjAuMjY4MDA1LC04LjM0NjAwOHMxNC43MDA5ODksMi43ODE5ODIgMjAuMjY0MDM4LDguMzQ2MDA4bDQwLjUzNDk3Myw0MC41MzM5OTdjNS41NjIwMTIsNS41NjM5OTUgOC4zNDUwMzIsMTIuMzE5IDguMzQ2MDA4LDIwLjI2Njk5OGwwLDBsMCwtMC4wMDIwMTR6IiBmaWxsPSIjNGI5ZmQ1Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
+
+  &.icon-checkbox-single {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03MDUuNzU1MDA1LDMxOC4yNDQ5OTVjLTE3LjYxNzk4MSwtMTcuNjE5OTk1IC0zOC44MzU5OTksLTI2LjQyOTAxNiAtNjMuNjQ4MDEsLTI2LjQyOTAxNmwtMjYwLjIxNzk4NywwYy0yNC44MTI5ODgsMCAtNDYuMDI3OTg1LDguODA5MDIxIC02My42NDY5NzMsMjYuNDI5MDE2Yy0xNy42MTgwMTEsMTcuNjE4MDExIC0yNi40MjgwMDksMzguODM0MDE1IC0yNi40MjgwMDksNjMuNjQ3MDAzbDAsMjYwLjIxODk2NGMwLDI0LjgxNDAyNiA4LjgwOTk5OCw0Ni4wMjcwMzkgMjYuNDI4OTg2LDYzLjY0ODAxYzE3LjYxODAxMSwxNy42MTgwNDIgMzguODM0MDE1LDI2LjQyODA0IDYzLjY0NzAwMywyNi40MjgwNGwyNjAuMjE4MDE4LDBjMjQuODExOTUxLDAgNDYuMDI4OTkyLC04LjgwOTk5OCA2My42NDc5NDksLTI2LjQyODA0YzE3LjYxODA0MiwtMTcuNjIwOTcyIDI2LjQyODA0LC0zOC44MzQ5NjEgMjYuNDI4MDQsLTYzLjY0ODAxbDAsLTI2MC4yMTg5NjRjMCwtMjQuODEyOTg4IC04LjgwOTk5OCwtNDYuMDI4MDE1IC0yNi40MjkwMTYsLTYzLjY0NzAwM3oiIGZpbGw9IiM0YjlmZDUiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==),
+                      url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzEiPgogICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im03NDkuNzE1MDI3LDE4Mi44NTY5OTVsLTQ3NS40Mjg5ODYsMGMtMjUuMTQzMDA1LDAgLTQ2LjY2Niw4Ljk1MTk5NiAtNjQuNTcwOTk5LDI2Ljg1Njk5NXMtMjYuODU2OTk1LDM5LjQyNzk5NCAtMjYuODU2OTk1LDY0LjU3MDAwN2wwLDQ3NS40Mjg5NTVjMCwyNS4xNDMwMDUgOC45NTE5OTYsNDYuNjY3MDUzIDI2Ljg1Njk5NSw2NC41NzEwNDVzMzkuNDI3OTk0LDI2Ljg1Njk5NSA2NC41NzA5OTksMjYuODU2OTk1bDQ3NS40Mjg5ODYsMGMyNS4xNDMwMDUsMCA0Ni42NjYwMTYsLTguOTUzMDAzIDY0LjU3MjAyMSwtMjYuODU2OTk1YzE3LjkwMzk5MiwtMTcuOTAzOTkyIDI2Ljg1NDk4LC0zOS40MjkwMTYgMjYuODU0OTgsLTY0LjU3MTA0NWwwLC00NzUuNDI3OTc5YzAsLTI1LjE0MzAyMSAtOC45NTA5ODksLTQ2LjY2NiAtMjYuODU0OTgsLTY0LjU3MDAwN2MtMTcuOTA2MDA2LC0xNy45MDQ5OTkgLTM5LjQyOTk5MywtMjYuODU4MDAyIC02NC41NzIwMjEsLTI2Ljg1ODAwMmwwLDBsMCwwLjAwMDAzMXptMTY0LjU3MTk2LDkxLjQyODAwOWwwLDQ3NS40Mjg5ODZjMCw0NS4zMzM5ODQgLTE2LjA5NjAwOCw4NC4wOTYwMDggLTQ4LjI4Njk4NywxMTYuMjg2MDExYy0zMi4xODkwMjYsMzIuMTkwOTc5IC03MC45NTMwMDMsNDguMjg2MDExIC0xMTYuMjg1MDM0LDQ4LjI4NjAxMWwtNDc1LjQyOTk2MiwwYy00NS4zMzMwMDgsMCAtODQuMDk1MDE2LC0xNi4wOTUwMzIgLTExNi4yODYwMTEsLTQ4LjI4NjAxMXMtNDguMjg1OTk1LC03MC45NTIwMjYgLTQ4LjI4NTk5NSwtMTE2LjI4NjAxMWwwLC00NzUuNDI4OTg2YzAsLTQ1LjMzMzAwOCAxNi4wOTUwMDEsLTg0LjA5NTAwMSA0OC4yODU5OTUsLTExNi4yODUwMDRjMzIuMTkwMDAyLC0zMi4xOTEwMDIgNzAuOTUzMDAzLC00OC4yODYwMDMgMTE2LjI4NjAxMSwtNDguMjg2MDAzbDQ3NS40Mjk5NjIsMGM0NS4zMzIwMzEsMCA4NC4wOTYwMDgsMTYuMDk1MDAxIDExNi4yODUwMzQsNDguMjg2MDAzYzMyLjE5MDk3OSwzMi4xOTAwMDIgNDguMjg2OTg3LDcwLjk1MTk5NiA0OC4yODY5ODcsMTE2LjI4NTAwNGwwLDB6IiBmaWxsPSIjNzc3Nzc3Ii8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
+  }
+}
+
+// Used for align elements
+.icon-checkbox-invisible {
+  visibility: hidden;
+}
+
+
+/*
+ * Common
+ */
+
+.icon-list:before {
+  content: "\f039";
+  font-size: @iconSmallFontSize;
+}
+.icon-bullet-list:before {
+  content: "\f03a";
+}
+.icon-settings:before {
+  content: "\f015";
+}
+.icon-bulk-change:before {
+  content: "\f085";
+  font-size: @iconSmallFontSize;
+}
+.icon-arrow-down:before {
+  content: "\f0d7";
+  position: relative;
+  top: -2px;
+}
+.icon-arrow-up:before {
+  content: "\f0d8";
+  position: relative;
+  top: -2px;
+}
+.icon-arrow-left:before {
+  content: "\f0d9";
+}
+.icon-arrow-right:before {
+  content: "\f0da";
+}
+.icon-dropdown:before {
+  content: "\f0d7";
+  position: relative;
+  top: -1px;
+}
+.icon-sort-desc:before {
+  content: "\f0d7";
+  position: relative;
+  top: -1px;
+}
+.icon-sort-asc:before {
+  content: "\f0d8";
+  position: relative;
+  top: -1px;
+}
+.icon-emoticon-smiley:before {
+  content: "\f118";
+}
+.icon-emoticon-sad:before {
+  content: "\f119";
+}
+.icon-emoticon-speechless:before {
+  content: "\f11a";
+}
+.icon-rect-check:before {
+  content: "\f046";
+}
+.icon-check:before {
+  content: "\f00c";
+  color: @green;
+  font-size: @iconFontSize;
+}
+.icon-default:before {
+  position: relative;
+  top: -0.1em;
+  content: "\f00c";
+}
+.icon-lang:before {
+  content: "\f024";
+  font-size: @iconSmallFontSize;
+}
+.icon-quality-profile:before {
+  content: "\f022";
+  font-size: @iconSmallFontSize;
+}
+.icon-tags:before {
+  content: "\f02c";
+  font-size: @iconSmallFontSize;
+}
+.icon-calendar:before {
+  content: "\f073";
+  font-size: @iconFontSize;
+}
+.icon-favorite { font-size: @iconFontSize; }
+.icon-favorite:before {
+  content: "\f005";
+  color: @orange;
+  font-size: @iconFontSize;
+}
+.icon-not-favorite { font-size: @iconFontSize; }
+.icon-not-favorite:before {
+  content: "\f005";
+  color: @darkGrey;
+  font-size: @iconFontSize;
+}
+.icon-help:before {
+  content: "\f059";
+  color: @blue;
+  font-size: @iconFontSize;
+}
+.icon-info:before {
+  content: "\f05a";
+  color: @blue;
+  font-size: @iconFontSize;
+}
+.icon-uniF060:before {
+  content: "\f060";
+}
+.icon-uniF061:before {
+  content: "\f061";
+}
+.icon-uniF062:before {
+  content: "\f062";
+}
+.icon-uniF063:before {
+  content: "\f063";
+}
+.icon-comment:before {
+  content: "\f075";
+  font-size: @iconSmallFontSize;
+}
+.icon-delete:before {
+  content: "\f00d";
+  color: @red;
+  font-size: @iconFontSize;
+}
+.icon-close:before {
+  content: "\f00d";
+  font-size: @iconFontSize;
+}
+.icon-compare:before {
+  content: "\f0c5";
+  font-size: @iconSmallFontSize;
+}
+.icon-restore:before {
+  content: "\f122";
+  font-size: @iconSmallFontSize;
+}
+.icon-inheritance:before {
+  content: "\f126";
+}
+.icon-plus:before {
+  content: "\f067";
+  font-size: @iconFontSize;
+}
+.icon-link:before {
+  content: "\f127";
+  font-size: @iconSmallFontSize;
+}
+.icon-move-down:before {
+  content: "\f063";
+  color: @darkBlue;
+  font-size: @iconFontSize;
+}
+.icon-move-up:before {
+  content: "\f062";
+  color: @darkBlue;
+  font-size: @iconFontSize;
+}
+.icon-move-left:before {
+  content: "\f060";
+  color: @darkBlue;
+  font-size: @iconFontSize;
+}
+.icon-move-right:before {
+  content: "\f061";
+  color: @darkBlue;
+  font-size: @iconFontSize;
+}
+.icon-scm:before {
+  content: "\f017";
+  font-size: @iconSmallFontSize;
+}
+.icon-scm_dev:before {
+  content: "\f015";
+  font-size: @iconSmallFontSize;
+}
+.icon-ci:before {
+  content: "\f021";
+  font-size: @iconSmallFontSize;
+}
+.icon-issue:before {
+  content: "\f188";
+  font-size: @iconSmallFontSize;
+}
+.icon-homepage:before {
+  content: "\f016";
+  font-size: @iconSmallFontSize;
+}
+.icon-resizer:before {
+  content: "\f142";
+  color: @darkGrey;
+  font-size: @iconFontSize;
+}
+.icon-expand:before {
+  content: "\e60b";
+  font-size: @iconFontSize;
+}
+.icon-period:before {
+  content: "\f018";
+  font-size: @iconFontSize;
+}
+.icon-filter:before {
+  content: "\f03a";
+  font-size: @iconFontSize;
+}
+.icon-detach:before {
+  content: "\f08e";
+  font-size: @iconSmallFontSize;
+}
+.icon-chevron-left:before {
+  content: "\f104";
+  font-size: @iconSmallFontSize;
+}
+.icon-chevron-right:before {
+  content: "\f105";
+  font-size: @iconSmallFontSize;
+}
+.icon-double-chevron-left:before {
+  content: "\f100";
+  font-size: @iconSmallFontSize;
+}
+.icon-double-chevron-right:before {
+  content: "\f101";
+  font-size: @iconSmallFontSize;
+}
+.icon-extension:before {
+  content: "\f069";
+  font-size: @iconFontSize;
+}
+.icon-home:before {
+  content: "\f016";
+  font-size: @iconFontSize;
+}
+.icon-component-viewer-filter:before {
+  content: "\e60e";
+  color: #999;
+  font-size: @iconSmallFontSize;
+}
+.icon-filters:before {
+  content: "\f039";
+  font-size: @iconSmallFontSize;
+}
+.icon-next:before {
+  content: "\f0d7";
+  font-size: @iconFontSize;
+}
+.icon-prev:before {
+  content: "\f0d8";
+  font-size: @iconFontSize;
+}
+.icon-search:before {
+  content: "\f002";
+  font-size: @iconFontSize;
+}
+.icon-edit:before {
+  content: "\f040";
+  font-size: @iconFontSize;
+}
+.icon-ellipsis-h:before {
+  position: relative;
+  top: 1px;
+  content: "\f141";
+  font-size: @iconSmallFontSize;
+}
+
+
+/*
+ * Spinner
+ */
+
+.spinner {
+  position: relative;
+  vertical-align: middle;
+  .square(16px);
+  border: 2px solid #0cf;
+  border-radius: 50%;
+  .animation(spin 0.75s infinite linear);
+
+  // For IE9 only, because it does not support css animations
+  // Show animated gif
+  .ie9 & {
+    background-image: url(../images/loading.gif);
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    border: none;
+  }
+}
+
+.spinner:before,
+.spinner:after {
+  left: -2px;
+  top: -2px;
+  display: none;
+  position: absolute;
+  content: '';
+  width: inherit;
+  height: inherit;
+  border: inherit;
+  border-radius: inherit;
+}
+
+.spinner,
+.spinner:before,
+.spinner:after {
+  display: inline-block;
+  .box-sizing(border-box);
+  border-color: transparent;
+  border-top-color: @blue;
+  .animation-duration(1.2s);
+}
+.spinner:before {
+  .rotate(120deg);
+}
+.spinner:after {
+  .rotate(240deg);
+}
+
+.spinner-margin {
+  margin: 10px;
+}
+
+@-webkit-keyframes spin {
+  from { .rotate(0deg); }
+  to { .rotate(360deg); }
+}
+@keyframes spin {
+  from { .rotate(0deg); }
+  to { .rotate(360deg); }
+}
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/issues.less b/server/sonar-web/src/main/less/issues.less
deleted file mode 100644
index 26f8043e1d3..00000000000
--- a/server/sonar-web/src/main/less/issues.less
+++ /dev/null
@@ -1,136 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
-
-@sideWidth: 300px;
-
-
-.issues {
-
-  &.sticky {
-
-    .issues-workspace-list,
-    .issues-workspace-component-viewer {
-      padding-top: 22px + 5px + 5px + 1px + 10px;
-    }
-
-  }
-}
-
-.issues-workspace-list-component {
-  line-height: 1.5;
-}
-
-.issues-workspace-list-component + .issue {
-  margin-top: 10px;
-}
-
-.issue + .issues-workspace-list-component {
-  margin-top: 25px;
-}
-
-.issues-workspace-list-component-part {
-  margin-right: 10px;
-  border-bottom: none;
-}
-
-.issues-workspace-component-viewer {
-  display: none;
-  padding: 1px 10px;
-  min-height: 100vh;
-
-  .code-issue-modern {
-    margin: 5px 0;
-  }
-}
-
-.issues-workspace-component-viewer-header {
-  position: relative;
-}
-
-.issues-workspace-component-viewer-close {
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  margin-top: -8px;
-}
-
-.issues-extended-view {
-
-  .search-navigator-workspace-list {
-    display: none;
-  }
-
-  .issues-workspace-component-viewer {
-    display: block;
-  }
-}
-
-.issues-header-component {
-  padding-left: 10px;
-}
-
-.issue-box {
-  .clearfix;
-  outline: 1px solid @barBorderColor;
-  border-left: 2px solid transparent;
-  overflow: hidden;
-
-  &.selected {
-    outline-color: @blue;
-    border-color: @blue;
-  }
-
-  .code-issue {
-    border: none;
-    outline: none;
-  }
-}
-
-.issue-box + .issue-box {
-  margin-top: 12px;
-}
-
-.issue-box-details {
-
-}
-
-.code-issue-modern {
-  outline: 1px solid @barBorderColor;
-  border-left: 2px solid transparent;
-
-  .code-issue-name,
-  .code-issue-actions,
-  .code-issue-details,
-  .code-issue-comment {
-    border: none;
-    background: transparent;
-  }
-
-  &.selected {
-    outline-color: @blue;
-    border-color: @blue;
-  }
-}
-
-.issue-box-snippet {
-  padding: 3px 0;
-  overflow: hidden;
-  cursor: pointer;
-
-  .code {
-    border: none;
-  }
-}
-
-.issue-box-component {
-  padding: 5px;
-}
-
-.code .has-issues > pre {
-  display: inline-block;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M2Rjk4M0M3QUYxMUUzODkzRUREMUM5OTNDMjY4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M2Rjk4NEM3QUYxMUUzODkzRUREMUM5OTNDMjY4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzQzZGOTgxQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQzZGOTgyQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bcqJtQAAAEhJREFUeNpi+G+swwDGDAwgbAWlwZiJAQFCgfgwEIfDRaC67ID4NRDnQ2kQnwFZwgFqnANMAQOUYY9sF0wBiCGH5CBkrAgQYACuWi4sSGW8yAAAAABJRU5ErkJggg==);
-  background-repeat: repeat-x;
-  background-size: 4px;
-  background-position: bottom;
-}
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/libraries.less b/server/sonar-web/src/main/less/libraries.less
deleted file mode 100644
index 9d659fad749..00000000000
--- a/server/sonar-web/src/main/less/libraries.less
+++ /dev/null
@@ -1,105 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-
-
-.libraries-header {
-  margin-bottom: 20px;
-  font-size: 0;
-}
-
-.libraries-header-filter,
-.libraries-header-test,
-.libraries-header-actions {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: @baseFontSize;
-}
-
-.libraries-header-test,
-.libraries-header-actions {
-  margin-left: 30px;
-}
-
-.libraries-header-actions {
-  margin-right: -10px;
-
-  a { margin-right: 10px; }
-}
-
-
-.libraries-tree {
-
-  & > ul ul {
-    padding-left: 24px;
-  }
-
-  & > ul ul ul {
-    margin: 4px 0 4px 8px;
-    padding-left: 16px;
-    border-left: 1px dashed #ddd;
-  }
-
-  & > ul > li + li {
-    margin-top: 15px;
-  }
-
-  & > ul > li > .libraries-tree-name {
-    font-weight: 500;
-  }
-
-  li {
-    padding: 3px 0;
-  }
-
-  li:last-child {
-    padding-bottom: 0;
-  }
-
-  .icon-dropdown {
-    display: inline-block;
-    width: 10px;
-    visibility: hidden;
-  }
-}
-
-.libraries-tree-subtree-hidden {
-  display: none;
-}
-
-.libraries-tree-with-subtree {
-
-  & > .libraries-tree-name {
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
-    .trans;
-
-    &:hover { border-color: #ddd; }
-  }
-
-  & > a > .icon-dropdown {
-    visibility: visible;
-  }
-}
-
-.libraries-tree-subtree-collapsed {
-
-  & > ul {
-    display: none;
-  }
-
-  & > a > .icon-dropdown:before {
-    content: "\f0da";
-  }
-}
-
-.libraries-tree-test {
-  display: none;
-
-  .libraries-tree-show-tests & { display: list-item; }
-}
-
-.libraries-tree-version {
-  margin: 0 3px;
-  padding: 0 4px;
-  background: @barBackgroundColor;
-}
diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less
deleted file mode 100644
index 14d7504da6d..00000000000
--- a/server/sonar-web/src/main/less/navbar.less
+++ /dev/null
@@ -1,212 +0,0 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-
-@navbarGlobalBackground: #262626;
-@navbarContextBackground: @barBackgroundColor;
-
-@navbarHeight: 30px;
-@navbarLineHeight: 20px;
-@navbarTopPadding: (@navbarHeight - @navbarLineHeight) / 2;
-
-.navbar, [class^="navbar-"], [class*=" navbar-"] {
-  .box-sizing(border-box);
-}
-
-.navbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  .clearfix;
-  height: @navbarHeight;
-}
-
-.navbar-fade {
-  .navbar-nav {
-    opacity: 0;
-    .trans(opacity);
-  }
-
-  .navbar-favorite {
-    margin-right: -23px;
-    .trans(margin);
-  }
-
-  &.in {
-    .navbar-nav {
-      opacity: 1;
-    }
-
-    .navbar-favorite {
-      margin-right: 0;
-    }
-  }
-}
-
-.navbar a {
-  .link-no-underline;
-  .trans(none);
-}
-
-.navbar-header {
-  float: left;
-}
-
-.navbar-brand {
-  display: block;
-
-  img {
-    vertical-align: top;
-  }
-}
-
-.navbar-nav {
-  float: left;
-}
-
-.navbar-nav > li {
-  float: left;
-}
-
-.navbar-nav > li > a {
-  padding: @navbarTopPadding 10px;
-  line-height: @navbarLineHeight;
-}
-
-.navbar-nav > li.navbar-more > a {
-  padding-right: 17px;
-}
-
-.navbar-nav > li.navbar-more + li {
-  margin-left: -17px;
-}
-
-.navbar-nav > li.navbar-more + li > a {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.navbar-icon:before {
-  color: #fff !important;
-  font-size: @iconFontSize;
-}
-
-.navbar-favorite {
-  position: relative;
-  top: -2px;
-}
-
-.navbar-right {
-  float: right;
-}
-
-.navbar-search {
-  position: relative;
-  width: 480px;
-  .box-sizing(border-box);
-  .trans(width);
-}
-
-.navbar-search-input {
-  width: 100%;
-  padding: 0 20px 0 40px !important;
-  border: none !important;
-}
-
-.navbar-search-icon {
-  position: absolute;
-  top: 4px;
-  left: 20px;
-  color: @secondFontColor;
-
-  &:before {
-    font-size: @iconSmallFontSize;
-  }
-}
-
-.navbar-search-extra {
-  display: inline-block;
-  width: 90px;
-  margin-right: 10px;
-  text-align: right;
-}
-
-.navbar-search-subtitle {
-  position: absolute;
-  top: 5px;
-  right: 40px;
-}
-
-
-.navbar-global {
-  top: 0;
-  z-index: 499;
-  background-color: @navbarGlobalBackground;
-
-  .navbar-nav > li > a {
-    color: #fff;
-    font-size: 12px;
-    font-weight: 300;
-    letter-spacing: 0.05em;
-
-    &:hover, &:focus {
-      color: #fff;
-    }
-  }
-
-  .navbar-nav > .active > a,
-  .navbar-nav > .dropdown.open > a {
-    color: #fff;
-  }
-
-  .navbar-brand:hover,
-  .navbar-brand:focus {
-    background-color: darken(@navbarGlobalBackground, 20%);
-  }
-
-  .navbar-nav > li > a:hover,
-  .navbar-nav > li > a:focus,
-  .navbar-nav > .active > a,
-  .navbar-nav > .dropdown.open > a {
-    background-color: @blue;
-  }
-
-  .navbar-search-dropdown {
-    background-color: @blue !important;
-  }
-
-  .navbar-admin-link:hover,
-  .navbar-admin-link:focus,
-  .active > .navbar-admin-link {
-    background-color: @orange !important;
-  }
-}
-
-
-.navbar-context {
-  top: @navbarHeight;
-  z-index: 498;
-  height: 57px;
-  background-color: @navbarContextBackground;
-
-  .nav-tabs {
-    width: 100%;
-  }
-
-  .navbar-nav > li > a {
-    padding-top: 2px;
-    padding-bottom: 2px;
-  }
-}
-
-.navbar-context-favorite {
-  float: left;
-  padding: 6px 0 0 10px;
-}
-
-.navbar-context-meta {
-  line-height: @navbarHeight;
-  padding: 0 10px;
-  color: @secondFontColor;
-  font-size: @smallFontSize;
-}
diff --git a/server/sonar-web/src/main/less/navigator.less b/server/sonar-web/src/main/less/navigator.less
deleted file mode 100644
index ddb1478deaa..00000000000
--- a/server/sonar-web/src/main/less/navigator.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-
-@import "navigator/config";
-@import "navigator/base";
-@import "navigator/filters";
diff --git a/server/sonar-web/src/main/less/navigator/base.less b/server/sonar-web/src/main/less/navigator/base.less
deleted file mode 100644
index cad9782ab81..00000000000
--- a/server/sonar-web/src/main/less/navigator/base.less
+++ /dev/null
@@ -1,460 +0,0 @@
-@import "../variables";
-@import "../mixins";
-
-@import "config";
-
-
-.navigator { }
-
-
-.navigator-element() {
-  position: fixed;
-  z-index: 2;
-  .box-sizing(border-box);
-}
-
-.navigator-header {
-  height: @navigatorHeaderHeight;
-  margin: @navigatorPadding;
-  border: 1px solid @navigatorBorderLightColor;
-  .box-sizing(border-box);
-}
-
-.navigator-filters {
-  position: relative;
-  margin: @navigatorPadding;
-  border: 1px solid @navigatorBorderLightColor;
-  .box-sizing(border-box);
-}
-
-.navigator-content {
-  display: table;
-  width: 100%;
-}
-
-.navigator-side {
-  position: relative;
-  display: table-cell;
-  vertical-align: top;
-  width: @navigatorResultsWidth + 2 * @navigatorPadding;
-  min-width: 275px + 2 * @navigatorPadding;
-  max-width: 600px + 2 * @navigatorPadding;
-}
-
-.navigator-main {
-  display: table-cell;
-  vertical-align: top;
-}
-
-.navigator-facets {
-  margin: @navigatorPadding;
-  border: 1px solid @navigatorBorderLightColor;
-  .box-sizing(border-box);
-}
-
-.navigator-results {
-  position: relative;
-  z-index: 2;
-  width: @navigatorResultsWidth;
-  min-width: 275px;
-  max-width: 600px;
-  margin: @navigatorPadding @navigatorPadding 0;
-  .box-sizing(border-box);
-}
-
-.navigator-actions {
-  position: relative;
-  z-index: 4;
-  margin: 0 @navigatorPadding @navigatorPadding;
-  border: 1px solid @navigatorBorderLightColor;
-  .box-sizing(border-box);
-  .clearfix;
-}
-
-.navigator-details {
-  position: relative;
-  margin: 0 @navigatorPadding @navigatorPadding;
-}
-
-.navigator-resizer {
-  position: absolute;
-  top: 50%; right: -1px;
-  cursor: col-resize;
-}
-
-.navigator-notes {
-  display: none;
-}
-
-.navigator-with-notes {
-
-  .navigator-notes {
-    display: block;
-  }
-}
-
-
-.measures-page {
-  .navigator-details { overflow: visible; }
-  .page { padding: 0 0 0 @navigatorPadding; }
-}
-
-
-.navigator-fetching {
-  &:before {
-    content: " ";
-    position: absolute;
-    z-index: 3;
-    top: 0; bottom: 0; left: 0; right: 0;
-    background: #fff url(../images/loading.gif) no-repeat 4px 4px;
-  }
-
-  &#tab-issue-rule {
-    position: relative;
-
-    &:before {
-      z-index: 3;
-      background-color: #EFEFEF;
-    }
-  }
-
-  &.code-issue-actions {
-    position: relative;
-
-    &:before {
-      z-index: 3;
-      background-color: #E4ECF3;
-    }
-  }
-}
-
-
-.navigator-page-loader {
-  padding: @navigatorPadding 0 0 @navigatorPadding;
-}
-
-
-
-// Header
-.navigator-header {
-  padding: 0 @navigatorPadding;
-  background-color: @navigatorBarBackground;
-  font-size: 0;
-
-  .page-title,
-  .page-actions {
-    margin: (@navigatorHeaderHeight - @formControlHeight) / 2 0;
-  }
-}
-
-.navigator-header-favorite {
-  padding-left: 58px;
-}
-
-.navigator-header-title {
-  display: inline-block;
-  vertical-align: middle;
-  color: @navigatorHeaderColor;
-  font-size: 20px;
-  line-height: @navigatorHeaderLineHeight;
-}
-
-.navigator-header-title-note {
-  vertical-align: middle;
-  color: #777;
-  font-size: @smallFontSize;
-}
-
-.navigator-header-description {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 70%;
-  margin-left: 16px;
-  font-size: @smallFontSize;
-  font-style: italic;
-}
-
-.navigator-header-actions {
-  margin: 8px 0 8px 20px;
-
-  & > a {
-    vertical-align: middle;
-    margin: 0 8px;
-    font-size: @smallFontSize;
-  }
-}
-
-.navigator-header-menu-toggle {
-  display: inline-block;
-  vertical-align: top;
-  height: 36px;
-  margin-right: 10px;
-  margin-left: -10px;
-  padding: 10px;
-  border-right: 1px solid transparent;
-  .box-sizing(border-box);
-  cursor: pointer;
-  .trans;
-
-  &:hover {
-    background-color: @navigatorHover;
-  }
-
-  &.active {
-    border-color: #cdcdcd;
-    background-color: #fff;
-  }
-
-  [class^="icon-"], [class*=" icon-"] {
-    font-size: 16px;
-  }
-}
-
-
-
-// Notes
-.navigator-notes {
-  margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding;
-  padding: 0 @navigatorPadding;
-  border: 1px solid @navigatorBorderColor;
-  background-color: @navigatorBarBackground;
-
-  color: #777;
-  font-size: @smallFontSize;
-  line-height: @navigatorNotesHeight;
-}
-
-
-
-// Facets
-.navigator-facets {
-  padding: @navigatorPadding;
-  border-bottom: 1px solid @navigatorBorderColor;
-  background-color: @navigatorBarBackground;
-}
-
-.navigator-facets-list {
-
-}
-
-.navigator-facets-list-item {
-  font-size: 0;
-  margin-bottom: -6px;
-}
-
-.navigator-facets-list-item + .navigator-facets-list-item {
-  margin-top: @navigatorPadding;
-}
-
-.navigator-facets-list-item-name {
-  float: left;
-  line-height: 22px;
-  min-width: 120px;
-  margin-right: @navigatorPadding;
-  font-size: @smallFontSize;
-  font-weight: normal;
-  text-transform: uppercase;
-}
-
-.navigator-facets-list-item-options {
-  overflow: hidden;
-}
-
-
-
-// Results
-.navigator-results {
-  background-color: @white;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  &.fetching {
-    .navigator-results-list { visibility: hidden; }
-    .navigator-results-loader { display: block; }
-  }
-}
-
-.navigator-results-loader {
-  position: fixed;
-  z-index: 10;
-  display: none;
-  background-color: #fff;
-}
-
-.navigator-results-list {
-
-  & > li {
-    position: relative;
-    z-index: 1;
-    padding: @navigatorPadding / 2 0;
-    border: 1px solid;
-    border-color: @navigatorBorderLightColor transparent;
-    cursor: pointer;
-    .trans;
-
-    .line {
-      padding: @navigatorPadding / 2 @navigatorPadding;
-      line-height: 1.2;
-    }
-
-    .line-small {
-      font-size: 11px;
-      line-height: 14px;
-    }
-
-    .line-right {
-      float: right;
-    }
-
-    .line-nowrap {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &:hover {
-      background-color: @navigatorBarBackground;
-    }
-
-    &.active {
-      z-index: 2;
-      background-color: #CAE3F2;
-      border-color: #4B9FD5;
-    }
-  }
-
-  & > li + li { margin-top: -1px; }
-}
-
-.navigator-results-no-results {
-  padding-top: 20% !important;
-  background: #fff !important;
-  border-color: transparent !important;
-  color: #999;
-  cursor: default !important;
-  text-align: center;
-}
-
-
-
-// Details
-.navigator-details {
-  background-color: @white;
-  overflow: auto;
-
-  &.loading {
-    background: @white url("../images/loading.gif") no-repeat 4px 2px;
-  }
-
-  .code-issue-name {
-    border-bottom: none;
-  }
-
-  .code-issue-actions {
-    background-color: #E4ECF3;
-  }
-
-  .source_title {
-    z-index: 3;
-    top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight;
-    left: @navigatorResultsWidth;
-    right: 0;
-    padding: 0 0 @navigatorPadding 0;
-    background-color: #fff;
-  }
-
-  .source {
-    & > table {
-      border: 1px solid #DDD;
-    }
-  }
-
-  .scm .author {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-
-
-// Status
-.navigator-actions {
-  padding: 0 @navigatorPadding 0 0;
-
-  border-right: 1px solid @navigatorBorderLightColor;
-  border-bottom: 1px solid @navigatorBorderLightColor;
-  background-color: @navigatorBarBackground;
-  font-size: @smallFontSize;
-
-  strong { font-weight: bold; }
-}
-
-.navigator-actions-order {
-  float: left;
-  padding: 0 @navigatorPadding;
-  line-height: @navigatorStatusHeight;
-  cursor: pointer;
-  .trans;
-
-  &:hover {
-    background-color: @navigatorHover;
-  }
-}
-
-.navigator-actions-order-choices {
-  position: absolute;
-  top: 100%;
-  left: -1px;
-  min-width: @navigatorResultsWidth / 2;
-  background-color: #fff;
-  border: 1px solid @navigatorBorderLightColor;
-  box-shadow: @defaultShadow;
-  overflow: hidden;
-  display: none;
-
-  & > li {
-    height: @navigatorStatusHeight;
-    line-height: @navigatorStatusHeight;
-    padding: 0 10px;
-    cursor: pointer;
-    .trans;
-
-    &:hover {
-      background-color: @navigatorBarBackground;
-    }
-  }
-
-  &.open {
-    display: block;
-  }
-}
-
-.navigator-actions-total {
-  float: right;
-  height: @navigatorStatusHeight;
-  line-height: @navigatorStatusHeight;
-}
-
-.navigator-actions-bulk {
-  position: relative;
-  top: -1px;
-  margin-left: 8px;
-  font-size: 16px;
-  text-decoration: none;
-}
-
-
-
-// Footer
-.navigator-page #footer {
-  margin: 0;
-  border-top: 1px solid @navigatorBorderLightColor;
-}
-
-.navigator-page #ftlinks {
-  margin-top: 0;
-}
diff --git a/server/sonar-web/src/main/less/navigator/config.less b/server/sonar-web/src/main/less/navigator/config.less
deleted file mode 100644
index a973cbdebb8..00000000000
--- a/server/sonar-web/src/main/less/navigator/config.less
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "../variables";
-
-// Layout
-@navigatorTopOffset: 80px;
-@navigatorBottomOffset: 35px;
-
-@navigatorHeaderHeight: 40px;
-@navigatorHeaderLineHeight: @navigatorHeaderHeight - 3px;
-@navigatorFiltersHeight: 40px;
-@navigatorFiltersLineHeight: @navigatorFiltersHeight - 3px;
-@navigatorFacetsHeight: 90px;
-@navigatorStatusHeight: 30px;
-@navigatorNotesHeight: 20px;
-
-@navigatorResultsWidth: 320px;
-
-@navigatorPadding: 10px;
-
-
-// Colors
-@navigatorBarBackground: @barBackgroundColor;
-@navigatorBorderColor: @barBorderColor;
-@navigatorBorderLightColor: @barBorderColor;
-
-@navigatorHeaderColor: @baseFontColor;
-
-@navigatorFacetStatColor: @secondFontColor;
-@navigatorFacetInactiveBackground: lighten(@barBackgroundColor, 4%);
-
-
-@navigatorHover: darken(@navigatorBarBackground, 5%);
-@navigatorFilterPadding: @navigatorPadding;
diff --git a/server/sonar-web/src/main/less/navigator/filters.less b/server/sonar-web/src/main/less/navigator/filters.less
deleted file mode 100644
index f56739867ef..00000000000
--- a/server/sonar-web/src/main/less/navigator/filters.less
+++ /dev/null
@@ -1,333 +0,0 @@
-@import "../variables";
-@import "../mixins";
-
-@import "config";
-
-
-.navigator-filters {
-  padding-right: 85px;
-  background-color: @navigatorBarBackground;
-  font-size: 0;
-}
-
-.navigator-filters-list {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 0;
-  margin-bottom: -1px;
-}
-
-.navigator-filter-submit,
-.navigator-filter-new-search {
-  vertical-align: middle;
-  margin-left: 15px;
-  font-size: @baseFontSize;
-}
-
-.navigator-filter-submit {
-  position: absolute;
-  bottom: 0; right: 0;
-  .size(85px, @navigatorFiltersHeight);
-  margin: -1px -1px -1px 0;
-  padding: 0;
-  border: 1px solid darken(@blue, 10%);
-  background: @blue;
-  color: #fff;
-  font-weight: normal;
-  .trans;
-
-  &::-moz-focus-inner { border: 0; }
-
-  &:hover, &:focus {
-    border-color: @blue;
-    background-color: lighten(@blue, 10%);
-  }
-}
-
-.navigator-filter-list-favorite {
-  position: relative;
-  padding-left: 36px;
-  overflow: hidden;
-}
-
-.navigator-filters-actions {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 20px;
-  font-size: @baseFontSize;
-}
-
-.navigator-filter {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-  vertical-align: top;
-  height: @navigatorFiltersHeight;
-  line-height: @navigatorFiltersLineHeight;
-  margin: -1px 0 0 -1px;
-  padding: 0 1.5 * @navigatorFilterPadding;
-  border: 1px solid @navigatorBorderLightColor;
-  .box-sizing(border-box);
-  white-space: nowrap;
-  cursor: pointer;
-  .trans;
-
-  &:hover {
-    z-index: 2;
-    border-color: @navigatorBorderColor;
-    background-color: @navigatorHover;
-  }
-
-  &.active {
-    border-color: @darkGrey;
-    background: #fff;
-  }
-
-}
-
-.navigator-filter-disabled {
-  display: none;
-}
-
-.navigator-filter-optional {
-  padding-right: 0;
-}
-
-.navigator-filter-inline,
-.navigator-filter-read-only,
-.navigator-filter-inactive {
-  cursor: default;
-
-  &:hover,
-  &.active {
-    border-color: transparent;
-    background: transparent;
-  }
-}
-
-.navigator-filter-inline .navigator-filter-label:after {
-    content: "";
-}
-
-.navigator-filter-inactive {
-  opacity: 0.5;
-}
-
-.navigator-filter-context {
-  z-index: 3;
-  background-color: @contextBackground;
-  border-color: @contextBorder;
-}
-
-.navigator-filter-label {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 5px;
-  color: #333;
-  font-size: @baseFontSize;
-
-  &:after { content: ":"; }
-}
-
-.navigator-filter-value {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 120px;
-  color: #333;
-  font-size: @baseFontSize;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.default {
-    color: #666;
-  }
-}
-
-.navigator-filter-disable {
-  display: inline-block;
-  vertical-align: middle;
-  .square(20px);
-  line-height: 20px;
-  margin: 0 0 0 5px;
-  font-size: 18px;
-  text-align: center;
-  transition: background 0.3s ease;
-
-  &:hover {
-    background-color: darken(@navigatorHover, 7%);
-  }
-}
-
-.navigator-filter-range-input {
-  width: 120px;
-}
-
-.navigator-filter-details {
-  display: none;
-  position: absolute;
-  z-index: 1200;
-  min-width: 100px;
-  border: 1px solid @darkGrey;
-  background: #fff;
-  box-shadow: @defaultShadow;
-  font-size: @baseFontSize;
-  transition: opacity 0.3s ease;
-
-  &.active {
-    display: block;
-  }
-}
-
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  /* IE10+ specific styles go here */
-  .navigator-filter-details {
-    width: 250px;
-  }
-}
-
-.navigator-filter-details-inner {
-  max-width: 300px;
-  padding: 5px @navigatorFilterPadding;
-
-  .select2-container,
-  input {
-    margin: 5px 0;
-    vertical-align: middle;
-  }
-}
-
-.navigator-filter-select-list {
-  min-width: 150px;
-  max-width: 300px;
-  max-height: 182px;
-  padding: 5px 0;
-  overflow-y: auto;
-  .webkit-scrollbar;
-  -ms-overflow-style: scrollbar;
-
-  label {
-    display: block;
-    padding: 5px @navigatorFilterPadding;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    .trans(background);
-
-    &:hover,
-    &.current {
-      background-color: darken(#fff, 7%);
-    }
-
-    & > input[type=checkbox] {
-      vertical-align: baseline;
-      cursor: pointer;
-    }
-
-    & > img {
-      vertical-align: text-bottom;
-    }
-
-//    & > span {
-//      display: inline-block;
-//      vertical-align: top;
-//      width: 86%;
-//      white-space: nowrap;
-//      overflow: hidden;
-//      text-overflow: ellipsis;
-//    }
-
-    &.special {
-      font-style: italic;
-
-      & > span {
-        text-decoration: underline;
-      }
-    }
-
-    &.inactive {
-      cursor: default;
-      opacity: 0.5;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-
-  .single {
-    padding: 5px @navigatorFilterPadding;
-  }
-
-  .line {
-    height: 1px;
-    margin: 5px 0;
-    background: @darkGrey;
-  }
-}
-
-.navigator-filter-select-list:not(.hidden) + .navigator-filter-select-list {
-  margin-top: 5px;
-  border-top: 1px solid @darkGrey;
-}
-
-.navigator-filter-search {
-  position: relative;
-  margin: @navigatorFilterPadding 26px @navigatorFilterPadding @navigatorFilterPadding;
-
-  input {
-    .size(100%, 26px);
-    padding: 0 7px;
-    border: 1px solid @darkGrey;
-    .box-sizing(border-box);
-  }
-
-  .fetching &:after {
-    content: ' ';
-    position: absolute;
-    top: 6px; right: -21px;
-    display: block;
-    .square(16px);
-    background: #fff url(../images/loading.gif) no-repeat center center;
-  }
-
-  &.fetching-error {
-
-    input { border: 2px solid @red; }
-  }
-}
-
-.navigator-filter-load-more {
-  display: none;
-  height: 26px;
-  line-height: 26px;
-  background-color: @grey;
-  text-align: center;
-  cursor: pointer;
-  transition: background 0.3s ease;
-
-  &:hover {
-    background-color: darken(@grey, 7%);
-  }
-}
-
-.navigator-filter-favorite {
-  position: absolute;
-  top: -@navigatorPadding - @navigatorFiltersHeight;
-  left: 0;
-}
-
-.navigator-filter-favorite-toggle {
-  .size(16px, @navigatorFiltersHeight);
-  background: url('../images/navigator/favorite-filters.png') no-repeat center center;
-
-  @media @retina {
-    background-image: url(../images/navigator/favorite-filters@2x.png);
-    background-size: 16px 14px;
-  }
-}
-
-.navigator-filter-more-criteria {
-  font-size: @baseFontSize;
-}
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/pages/analysis-reports.less b/server/sonar-web/src/main/less/pages/analysis-reports.less
new file mode 100644
index 00000000000..5740253305e
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/analysis-reports.less
@@ -0,0 +1,93 @@
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "../components/ui";
+@import (reference) "../components/navigator/base";
+
+
+@pendingColor: #fdfce2;
+@workingColor: #ecf9fc;
+@doneColor: #ecfced;
+@failedColor: #fcecec;
+
+
+.analysis-reports-actions {
+  margin-bottom: 10px;
+}
+
+.analysis-reports-total {
+  float: right;
+  margin-top: -20px;
+}
+
+.analysis-reports-results .navigator-results-list > li {
+  cursor: default;
+}
+
+.analysis-reports-no-results {
+  border: none !important;
+}
+
+.analysis-reports-report-pending {
+  background-color: @pendingColor !important;
+}
+
+.analysis-reports-report-working {
+  background-color: @workingColor !important;
+}
+
+.analysis-reports-report-done {
+  background-color: @doneColor !important;
+}
+
+.analysis-reports-report-failed {
+  background-color: @failedColor !important;
+
+  .analysis-reports-report-id { color: darken(@failedColor, 60%); }
+}
+
+.analysis-reports-project {
+  display: inline-block;
+  vertical-align: middle;
+  width: 30%;
+  .text-ellipsis;
+}
+
+.analysis-reports-timestamp {
+  display: inline-block;
+  vertical-align: middle;
+  width: 220px;
+  margin-left: 15px;
+}
+
+.analysis-reports-report-id {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  opacity: 0.3;
+  font-size: @bigFontSize;
+
+  &:before { content: '#'; }
+}
+
+.analysis-reports-spinner {
+  .size(200px, 200px);
+  margin-top: 20px;
+}
+
+.analysis-reports-spinner,
+.analysis-reports-spinner:before
+.analysis-reports-spinner:after {
+  -webkit-animation-duration: 6s;
+  animation-duration: 6s;
+}
+
+.analysis-reports-timestamp-spinner {
+  margin-left: 10px;
+}
+
+.analysis-reports-timestamp-spinner,
+.analysis-reports-timestamp-spinner:before,
+.analysis-reports-timestamp-spinner:after {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
diff --git a/server/sonar-web/src/main/less/pages/api-documentation.less b/server/sonar-web/src/main/less/pages/api-documentation.less
new file mode 100644
index 00000000000..e30f8bd8e10
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/api-documentation.less
@@ -0,0 +1,154 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/navigator/config";
+
+@apiDocumentationSidebarWidth: 230px;
+
+.api-documentation-navigator {
+
+  .navigator-side {
+    display: table-cell;
+    vertical-align: top;
+    width: @apiDocumentationSidebarWidth + 2 * @navigatorPadding;
+    min-width: 0;
+  }
+
+  .navigator-header {
+    margin-left: 0;
+    .spinner { margin-top: 9px; }
+  }
+
+  .navigator-actions {
+    height: @navigatorHeaderHeight;
+    width: @apiDocumentationSidebarWidth;
+    margin: @navigatorPadding;
+    padding: 0 @navigatorPadding;
+
+    .navigator-header-title {
+      color: @baseFontColor;
+      font-size: 13px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .api-documentation-show-internals {
+    margin: @navigatorPadding;
+    padding: 0 @navigatorPadding;
+  }
+
+  .navigator-results {
+    width: @apiDocumentationSidebarWidth;
+    min-width: 0;
+  }
+
+  .navigator-details { margin-left: 0; }
+
+  .internal {
+    color: @navigatorBarBackground;
+    background-color: rgb(127, 127, 127);
+    border-radius: 2px;
+    padding: 1px 5px;
+  }
+}
+
+
+.api-documentation-nav {
+
+  .navigator-results-list {
+
+    & > li {
+      border-color: transparent;
+
+      &:hover:not(.active):not(.empty) {
+        background-color: @navigatorBarBackground;
+      }
+
+      &.active {
+        border-color: #4B9FD5;
+      }
+
+      &.empty {
+        cursor: default;
+      }
+
+      .line {
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+    }
+  }
+}
+
+.api-documentation-actions {
+  margin-top: 10px;
+  margin-left: 5px;
+
+  ol {
+    li {
+      list-style: decimal;
+      margin-left: 2em;
+    }
+  }
+
+  .api-documentation-action {
+    margin-top: 30px;
+
+    & > p, & > h3 {
+      margin-top: 5px;
+    }
+
+    table {
+      width: 100%;
+
+      tr {
+        border-top: 1px solid @navigatorBorderLightColor;
+
+        td {
+          padding: 10px 0 10px 5px;
+          margin: 5px;
+          vertical-align: top;
+
+          ul {
+            li {
+              list-style: square;
+              margin-left: 2em;
+            }
+          }
+
+          ul.possible-values {
+            display: inline;
+
+            li {
+              display: inline;
+              margin: 0;
+
+              &:before {
+                content: ', '
+              }
+
+              &:first-child:before {
+                content: ''
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .example-response {
+      text-decoration: underline;
+    }
+
+    .example-response-content {
+      margin: 10px 0;
+      padding: 5px;
+      background-color: @navigatorBarBackground;
+      border: 1px solid @navigatorBorderLightColor;
+
+      code {
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
diff --git a/server/sonar-web/src/main/less/pages/coding-rules.less b/server/sonar-web/src/main/less/pages/coding-rules.less
new file mode 100644
index 00000000000..e32da3d4c33
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/coding-rules.less
@@ -0,0 +1,413 @@
+@import (reference) '../mixins';
+@import (reference) '../variables';
+@import (reference) '../init/links';
+@import (reference) '../components/ui';
+@import (reference) '../components/navigator/config';
+
+@facetsHeight: 36px;
+
+.coding-rules-page {
+
+  .navigator-facets {
+    min-height: 3 * @facetsHeight;
+  }
+
+  .navigator-results .spinner {
+    margin: @navigatorPadding;
+  }
+
+  .navigator-results .line-right {
+    margin-top: -14px;
+    float: none;
+    text-align: right;
+  }
+
+  .navigator-results-list .line {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
+  .navigator-results-list .line + .line {
+    padding-top: 0;
+  }
+
+  .navigator-results-list .line-small {
+    color: @secondFontColor;
+  }
+
+}
+
+.navigator-filter-query {
+  min-width: 40em;
+  padding: 0 5px;
+
+  input {
+    height: 80%;
+    width: 100%;
+    font-size: @baseFontSize;
+    vertical-align: middle;
+    vertical-align: -webkit-baseline-middle;
+  }
+}
+
+
+/*
+ * Detail
+ */
+
+.coding-rules-detail-header,
+.coding-rules-detail-title {
+  position: relative;
+  margin: 1em 0;
+  line-height: 1.5;
+  font-size: @bigFontSize;
+  font-weight: 400;
+}
+
+.coding-rules-detail-header {
+  margin: 0;
+  padding-right: 100px;
+  font-size: 18px;
+}
+
+.coding-rules-detail-title {
+  display: inline-block;
+  margin-top: 2em;
+}
+
+.coding-rules-detail-permalink {
+  position: absolute;
+  top: 0; right: 0;
+  font-size: @baseFontSize;
+  font-weight: normal;
+  text-decoration: none;
+  .trans;
+
+  &:hover { color: @highlighted; }
+}
+
+.coding-rules-detail-context {
+  margin-bottom: @navigatorPadding;
+  padding: @navigatorPadding / 2;
+  border: 1px solid @contextBorder;
+  background-color: @contextBackground;
+
+  .coding-rules-detail-quality-profile { margin-left: 0; }
+  .coding-rules-detail-quality-profile-name,
+  .coding-rules-detail-quality-profile-severity,
+  .coding-rules-detail-quality-profile-parameters,
+  .coding-rules-detail-quality-profile-actions {
+    vertical-align: top;
+  }
+  .coding-rules-detail-quality-profile-name,
+  .coding-rules-detail-quality-profile-severity {
+    width: 1px;
+    padding-right: @navigatorPadding;
+    white-space: nowrap;
+  }
+
+  .coding-rules-detail-quality-profile-parameter {
+    display: table-cell;
+  }
+}
+
+.coding-rules-detail-quality-profile-parameter {
+  display: block;
+  height: 100%;
+  padding-top: 0;
+  padding-right: @navigatorPadding;
+
+  .key, .value, .sep {
+    display: inline;
+    vertical-align: top;
+  }
+
+  .value {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 23px;
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: @monoFontFamily;
+  }
+}
+.coding-rules-detail-quality-profile-parameter + .coding-rules-detail-quality-profile-parameter { margin-top: 0; }
+
+.coding-rules-detail-context-actions {
+
+  padding: @navigatorPadding / 2;
+  background-color: @contextBackground;
+  border: 1px solid @contextBorder;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.coding-rules-detail-context-actions-quality-profile {
+  vertical-align: middle;
+  margin-right: @navigatorPadding;
+  font-weight: bold;
+}
+
+.coding-rules-detail-context-actions-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: @navigatorPadding;
+
+  .limited {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 180px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .limited-big {
+    max-width: 480px;
+  }
+}
+
+.coding-rules-detail-properties {
+  margin: @navigatorPadding 0;
+  font-size: 0;
+}
+
+.coding-rules-detail-properties + .coding-rules-detail-properties {
+  margin-top: -@navigatorPadding;
+}
+
+.coding-rules-detail-property {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 2 * @navigatorPadding;
+  font-size: @smallFontSize;
+  height: 22px;
+  line-height: 22px;
+
+  .select2-search-field { line-height: 1; }
+}
+
+.coding-rules-subcharacteristic {
+  cursor: pointer;
+}
+
+.coding-rules-debt-popup {
+  h3 {
+    display: inline
+  }
+}
+
+.coding-rules-detail-tag + .coding-rules-detail-tag {
+  margin-left: @navigatorPadding;
+}
+
+.coding-rules-detail-tags-change {
+  cursor: pointer;
+
+  &:hover {
+    span { text-decoration: underline; }
+  }
+}
+
+.coding-rules-detail-tag-edit {
+  line-height: 1;
+}
+
+.coding-rules-details-tag-edit-cancel {
+  vertical-align: middle;
+}
+
+.coding-rules-detail-description {
+  margin: 2 * @navigatorPadding 0;
+}
+
+.coding-rules-detail-description-extra {
+  margin-top: -@navigatorPadding;
+}
+
+.coding-rules-detail-extend-description-form {
+  margin: @navigatorPadding 0;
+}
+
+.coding-rules-detail-parameters {
+  width: 100%;
+  margin: @navigatorPadding 0 @navigatorPadding * 2;
+}
+
+.coding-rules-detail-parameter {
+
+}
+
+.coding-rules-detail-parameter-name {
+  width: 1px;
+  vertical-align: top;
+  padding: 5px 10px 5px 0;
+  font-weight: bold;
+}
+
+.coding-rules-detail-parameter-description {
+  vertical-align: top;
+  padding: 5px 5px;
+
+  .subtitle {
+    margin-top: @navigatorPadding;
+    font-size: @baseFontSize;
+  }
+}
+
+.coding-rules-detail-parameter-value {
+  font-family: @monoFontFamily;
+  word-break: break-all;
+}
+
+.coding-rules-detail-parameter-details {
+  display: inline-block;
+  font-size: @baseFontSize;
+  padding-left: 5px;
+}
+
+.coding-rules-detail-parameter-original {
+  margin-left: @navigatorPadding;
+  font-size: @smallFontSize;
+}
+
+
+// Quality Profiles
+.coding-rules-detail-quality-profiles-section {
+
+}
+
+.coding-rules-detail-quality-profiles-header {
+  margin-top: 3 * @navigatorPadding;
+}
+
+.coding-rules-detail-quality-profiles,
+.coding-rules-detail-list {
+  width: 100%;
+  line-height: 22px;
+
+  td {
+    border-top: 1px solid @barBorderColor;
+  }
+
+  tr:first-child td {
+    border-top: none;
+  }
+}
+
+.coding-rules-detail-quality-profile-name,
+.coding-rules-detail-list-name {
+  vertical-align: top;
+  width: 1px;
+  padding: 8px 5px 8px 0;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.coding-rules-detail-quality-profile-severity,
+.coding-rules-detail-list-severity {
+  vertical-align: top;
+  width: 1px;
+  padding: 8px 5px;
+  white-space: nowrap;
+}
+
+.coding-rules-detail-quality-profile-parameters,
+.coding-rules-detail-list-parameters {
+  vertical-align: top;
+  padding: 8px 5px;
+}
+
+.coding-rules-detail-quality-profile-actions,
+.coding-rules-detail-list-actions {
+  vertical-align: top;
+  width: 1px;
+  padding: 8px 0 8px 5px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.coding-rules-detail-quality-profile-inheritance {
+  margin-top: 4px;
+  font-size: @smallFontSize;
+  font-weight: normal;
+
+  i {
+    position: relative;
+    top: -1px;
+    font-size: @iconSmallFontSize;
+  }
+}
+
+.coding-rules-detail-quality-profiles-activation {
+  margin-top: -3px;
+  margin-left: @navigatorPadding;
+}
+
+.coding-rules-detail-quality-profiles-template-caption {
+  margin-bottom: @navigatorPadding;
+}
+
+// Bulk Change
+.coding-rules-bulk-change-dropdown {
+  position: absolute;
+  z-index: 10;
+  width: 200px;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+  background-color: #fff;
+}
+
+.coding-rules-bulk-change-dropdown-link {
+  display: block;
+  max-width: 190px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 @navigatorPadding;
+  font-size: @smallFontSize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  .link-no-underline;
+  .trans;
+
+  &:hover { background-color: @navigatorBarBackground; }
+
+  strong {
+    font-weight: bold;
+  }
+}
+
+input.coding-rules-name-key {
+  width: 30em;
+}
+
+textarea.coding-rules-markdown-description {
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.coding-rules-modal .property {
+  input, textarea {
+    width: 100%;
+  }
+}
+
+.coding-rules-subcharacteristic-more {
+  display: none;
+}
+
+.coding-rules-list-tags {
+  display: inline-block;
+  vertical-align: top;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .icon-tags:before { font-size: 12px; }
+}
diff --git a/server/sonar-web/src/main/less/pages/dashboard.less b/server/sonar-web/src/main/less/pages/dashboard.less
new file mode 100644
index 00000000000..8afe0efbb23
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/dashboard.less
@@ -0,0 +1,438 @@
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "../components/ui";
+
+.dashboard-page,
+.dashboard-page body {
+  background-color: @barBackgroundColor;
+}
+
+.dashboard-page #ftlinks {
+  border-top-color: @barBorderColor;
+  background-color: @barBackgroundColor;
+}
+
+/* LAYOUT */
+#dashboard .transparent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: url('../images/transparent.gif') repeat;
+  z-index: 1000;
+}
+
+/* WIDGETS */
+#dashboard .widget {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 10px;
+  margin: 0;
+}
+
+#dashboard .widget .big {
+  line-height: 1.5;
+  font-size: 24px;
+  font-weight: 300;
+}
+
+#dashboard .block {
+  margin: 0 0 10px 0;
+  border: 1px solid @barBorderColor;
+  background-color: @white;
+}
+
+#dashboard .configure_widget {
+  display: block;
+  position: relative;
+}
+
+#dashboard .widget_props {
+  background-color: #FFFBE2;
+  border: 1px solid #FCE174;
+  margin: 5px;
+  padding: 5px;
+}
+
+#dashboard .widget-title {
+  padding: 10px;
+  line-height: 1;
+  border-bottom: 1px solid @barBorderColor;
+  color: @baseFontColor;
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: uppercase;
+
+  a { .link-no-underline; }
+}
+
+/*CONFIGURATION*/
+#dashboard #configure {
+  position: relative;
+  height: 260px;
+  margin: 5px 0 10px 0;
+}
+
+#dashboard #widget_defs, #dashboard #edit-layout {
+  background-color: #FFFBE2;
+  border: 1px solid #FCE174;
+  padding: 5px;
+  overflow-x: hidden;
+}
+
+#dashboard #widget_defs {
+  margin-right: 104px;
+  overflow-y: auto;
+  height: 250px;
+}
+
+#dashboard #edit-layout {
+  width: 86px;
+  height: 248px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-top: 5px;
+}
+
+#dashboard #edit-layout p {
+  margin-bottom: 5px;
+}
+
+#dashboard .widget_def {
+  display: inline-block;
+  vertical-align: top;
+  border: 1px solid #FCE174;
+  padding: 5px;
+  margin: 5px;
+  white-space: normal;
+  width: 250px;
+  min-height: 100px;
+}
+
+#dashboard ul.widget_categs li {
+  padding-right: 5px;
+}
+
+#dashboard ul.widget_categs li.selected a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+#dashboard .select-layout {
+  float: left;
+}
+
+#dashboard .select-layout img {
+  border: 3px solid #FFF6BF;
+}
+
+#dashboard .select-layout.selected img {
+  border: 3px solid #4B9FD5;
+}
+
+.admin_page {
+    position: relative;
+}
+
+.admin_page table {
+  margin-top: 10px;
+  margin-bottom: 50px;
+}
+
+.admin_page .empty {
+  font-style: italic;
+}
+
+.admin_page .operations {
+  width: 260px;
+  text-align: right;
+}
+
+.admin_page .operations .link-action { margin-left: 4px; }
+
+.admin_page .owner {
+  width: 140px;
+  text-align: center;
+}
+
+.admin_page .shared {
+  width: 40px;
+  text-align: center;
+}
+
+.admin_page .order, .admin_page .global {
+  width: 45px;
+  text-align: center;
+}
+
+/*OPERATIONS*/
+#dashboard #dashboard-operations {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+#dashboard #dashboard-operations ul.operations {
+  float: left;
+  list-style-type: none;
+  border: 1px solid #cdcdcd;
+  padding: 0;
+  margin: 0;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+#dashboard #dashboard-operations ul.operations li {
+  float: left;
+  margin: 0;
+  padding: 2px 10px;
+  position: relative;
+  background-color: #f4f4f4;
+  font-size: 85%;
+  border-right: 1px solid #cdcdcd;
+}
+
+#dashboard #dashboard-operations ul.operations li.last {
+  border-right-width: 0;
+}
+
+#dashboard #dashboard-operations ul.operations li.selected {
+  background-color: #d4d4d4;
+}
+
+#dashboard #dashboard-operations ul.operations li a {
+  color: #555;
+}
+
+#dashboard .dashboard-column {
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+}
+
+#dashboard .dashboard-column-wrapper {
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+
+#dashboard .column-handle {
+  height: 30px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: x-large;
+  vertical-align: middle;
+  background-color: #eee;
+}
+
+#dashboard .block {
+  position: relative;
+  width: 100%;
+}
+
+#dashboard .widget-header {
+  line-height: 16px;
+  padding: 3px 5px 5px;
+  background-color: #efefef;
+  border-bottom: 0;
+}
+
+#dashboard .widget-handle {
+  cursor: move;
+  margin: 0;
+  background-image: url('../images/move.png');
+  background-position: left center;
+  background-repeat: no-repeat;
+  padding-left: 20px;
+}
+
+#dashboard .widget-actions {
+  float: right;
+}
+
+#dashboard .widget-actions a {
+  cursor: pointer;
+}
+
+#dashboard .block-hover {
+  outline: 2px dashed #ddd;
+}
+
+#dashboard .shadow-block {
+  box-shadow: 8px 8px 8px #ddd;
+  box-shadow: 8px 8px 8px #ddd;
+  -moz-box-shadow: 8px 8px 8px #ddd;
+  -webkit-box-shadow: 8px 8px 8px #ddd;
+}
+
+
+
+/*
+ * Widget Components
+ */
+
+.widget-row {
+  font-size: 0;
+  margin: 0 -10px -20px;
+}
+
+.widget-span {
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 10px 20px;
+  .box-sizing(border-box);
+  font-size: @baseFontSize;
+}
+
+.widget-span-1  { width: 8.33333333333333%; }
+.widget-span-2  { width: 16.66666666666667%; }
+.widget-span-3  { width: 25%; }
+.widget-span-3-5  { width: 29.16666666666667%; }
+.widget-span-4  { width: 33.33333333333333%; }
+.widget-span-5  { width: 41.66666666666667%; }
+.widget-span-6  { width: 50%; }
+.widget-span-7  { width: 58.33333333333333%; }
+.widget-span-8  { width: 66.666666666667%; }
+.widget-span-9  { width: 75%; }
+.widget-span-10 { width: 83.333333333333%; }
+.widget-span-11 { width: 91.666666666667%; }
+.widget-span-12 { width: 100%; }
+
+@media (max-width: 1279px) {
+  .widget-span-1  { width: 50%; }
+  .widget-span-2  { width: 50%; }
+  .widget-span-3  { width: 50%; }
+  .widget-span-3-5  { width: 50%; }
+  .widget-span-4  { width: 50%; }
+  .widget-span-5  { width: 50%; }
+  .widget-span-6  { width: 50%; }
+  .widget-span-7  { width: 100%; }
+  .widget-span-8  { width: 100%; }
+  .widget-span-9  { width: 100%; }
+  .widget-span-10 { width: 100%; }
+  .widget-span-11 { width: 100%; }
+  .widget-span-12 { width: 100%; }
+}
+
+.widget-label {
+  display: block;
+  font-size: @baseFontSize;
+  line-height: 1.2;
+  font-weight: 300;
+}
+
+.widget-number {
+  color: @darkBlue;
+}
+
+.widget-big {
+  line-height: 1.5;
+  font-size: 24px;
+  font-weight: 300;
+}
+
+.widget-medium {
+  line-height: 1.5;
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.widget-measure {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 15px 10px 0;
+
+  .widget-link, .widget-number { .widget-medium; }
+  .widget-label { text-transform: capitalize; }
+}
+
+.widget-measure-main {
+  display: block;
+  margin-top: 10px;
+
+  .widget-link, .widget-number { .widget-big; }
+  .widget-label { font-size: @bigFontSize; }
+}
+
+.widget-measure-container {
+  margin: -10px 0;
+}
+
+.widget-measure-delta {
+  margin-top: -5px;
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+
+// Widget Histogram
+
+.widget-barchar {
+  line-height: 1;
+
+  td {
+    vertical-align: middle !important;
+  }
+
+  div.barchart div { height: 1em; }
+}
+
+.widget-measure-container .widget-barchar { margin-bottom: 10px; }
+
+.widget-measure-container .widget-barchart-more {
+  margin-top: -5px;
+  margin-bottom: 10px;
+  padding-left: 5px;
+}
+
+// Description Widget
+
+.description-widget-project {
+  display: inline-block;
+  line-height: 1.5;
+  margin-right: 10px;
+  font-size: @bigFontSize;
+  font-weight: 300;
+  white-space: nowrap;
+}
+
+.description-widget-description {
+  margin: 7px 0;
+  line-height: 1.5;
+}
+
+.description-widget-key {
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+  font-weight: 300;
+  white-space: nowrap;
+}
+
+.description-widget-links {
+
+  & > li {
+    display: inline-block;
+    vertical-align: top;
+    padding: 5px 25px 5px 0;
+
+    & > a {
+      font-size: @baseFontSize;
+
+      & > i, & > i:before {
+        vertical-align: top;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.description-widget-link-data {
+  margin-top: 7px;
+}
diff --git a/server/sonar-web/src/main/less/pages/dsm.less b/server/sonar-web/src/main/less/pages/dsm.less
new file mode 100644
index 00000000000..f17fca17ebd
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/dsm.less
@@ -0,0 +1,125 @@
+@import (reference) '../variables';
+@import (reference) '../mixins';
+@import (reference) '../components/ui';
+
+@cellSize: 22px;
+
+.dsm {
+
+}
+
+
+.dsm-legend {
+  margin: 10px 0;
+
+  & > li {
+    display: inline-block;
+  }
+
+  & > li + li {
+    margin-left: 20px;
+  }
+}
+
+.dsm-legend-square {
+  display: inline-block;
+  vertical-align: middle;
+  .size(14px, 14px);
+
+  &.gray { background-color: @grey; }
+  &.red { background-color: @red; }
+  &.green { .dsm-usage-mixin; }
+  &.blue { background-color: @blue; }
+  &.yellow { .dsm-dependency-mixin; }
+}
+
+.dsm-legend-label {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: @baseFontSize;
+}
+
+
+.dsm-body td {
+  border: 1px solid @barBorderColor;
+}
+
+
+.dsm-body-title {
+  position: relative;
+  vertical-align: middle;
+  padding: 2px 32px 2px 4px;
+  border-right: 2px solid darken(@barBorderColor, 8%) !important;
+  color: @baseFontColor;
+  cursor: pointer;
+  white-space: nowrap;
+  .link-no-underline;
+  .trans(background-color);
+
+  &:hover { background-color: @barBackgroundColor; }
+}
+
+.dsm-body-cell {
+  min-width: 23px;
+  padding: 2px 4px;
+  .box-sizing(border-box);
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  .trans(background-color);
+}
+
+.dsm-body-cell-dependency {
+  background-color: @grey;
+}
+
+.dsm-body-cell-cycle {
+  background-color: @red !important;
+  color: #fff !important;
+}
+
+
+.dsm-body-highlighted {
+  background-color: #dff2fd;
+
+  &:hover { background-color: #dff2fd; }
+}
+
+.dsm-body-usage, .dsm-body-usage:hover { .dsm-usage-mixin; }
+.dsm-body-dependency, .dsm-body-dependency:hover { .dsm-dependency-mixin; }
+
+
+.dsm-usage-mixin() {
+  background-color: #e2ffbe;
+}
+
+.dsm-dependency-mixin() {
+  background-color: #fde9cc;
+}
+
+
+.dsm-info {
+  margin-top: 25px;
+
+  th {
+    padding: 2px 5px 7px;
+    font-weight: 500;
+  }
+
+  td {
+    padding: 2px 5px;
+
+    &.changed { padding-top: 7px; }
+  }
+}
+
+.dsm-body-title-package-tangles {
+  position: absolute;
+  top: 50%; right: 4px;
+  margin-top: -10px;
+  padding: 2px 5px;
+  border-radius: 20px;
+  background: @red;
+  font-size: @smallFontSize;
+  color: #fff;
+}
diff --git a/server/sonar-web/src/main/less/pages/issues.less b/server/sonar-web/src/main/less/pages/issues.less
new file mode 100644
index 00000000000..5f22d04455a
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/issues.less
@@ -0,0 +1,136 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+@sideWidth: 300px;
+
+
+.issues {
+
+  &.sticky {
+
+    .issues-workspace-list,
+    .issues-workspace-component-viewer {
+      padding-top: 22px + 5px + 5px + 1px + 10px;
+    }
+
+  }
+}
+
+.issues-workspace-list-component {
+  line-height: 1.5;
+}
+
+.issues-workspace-list-component + .issue {
+  margin-top: 10px;
+}
+
+.issue + .issues-workspace-list-component {
+  margin-top: 25px;
+}
+
+.issues-workspace-list-component-part {
+  margin-right: 10px;
+  border-bottom: none;
+}
+
+.issues-workspace-component-viewer {
+  display: none;
+  padding: 1px 10px;
+  min-height: 100vh;
+
+  .code-issue-modern {
+    margin: 5px 0;
+  }
+}
+
+.issues-workspace-component-viewer-header {
+  position: relative;
+}
+
+.issues-workspace-component-viewer-close {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  margin-top: -8px;
+}
+
+.issues-extended-view {
+
+  .search-navigator-workspace-list {
+    display: none;
+  }
+
+  .issues-workspace-component-viewer {
+    display: block;
+  }
+}
+
+.issues-header-component {
+  padding-left: 10px;
+}
+
+.issue-box {
+  .clearfix;
+  outline: 1px solid @barBorderColor;
+  border-left: 2px solid transparent;
+  overflow: hidden;
+
+  &.selected {
+    outline-color: @blue;
+    border-color: @blue;
+  }
+
+  .code-issue {
+    border: none;
+    outline: none;
+  }
+}
+
+.issue-box + .issue-box {
+  margin-top: 12px;
+}
+
+.issue-box-details {
+
+}
+
+.code-issue-modern {
+  outline: 1px solid @barBorderColor;
+  border-left: 2px solid transparent;
+
+  .code-issue-name,
+  .code-issue-actions,
+  .code-issue-details,
+  .code-issue-comment {
+    border: none;
+    background: transparent;
+  }
+
+  &.selected {
+    outline-color: @blue;
+    border-color: @blue;
+  }
+}
+
+.issue-box-snippet {
+  padding: 3px 0;
+  overflow: hidden;
+  cursor: pointer;
+
+  .code {
+    border: none;
+  }
+}
+
+.issue-box-component {
+  padding: 5px;
+}
+
+.code .has-issues > pre {
+  display: inline-block;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M2Rjk4M0M3QUYxMUUzODkzRUREMUM5OTNDMjY4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M2Rjk4NEM3QUYxMUUzODkzRUREMUM5OTNDMjY4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzQzZGOTgxQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQzZGOTgyQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bcqJtQAAAEhJREFUeNpi+G+swwDGDAwgbAWlwZiJAQFCgfgwEIfDRaC67ID4NRDnQ2kQnwFZwgFqnANMAQOUYY9sF0wBiCGH5CBkrAgQYACuWi4sSGW8yAAAAABJRU5ErkJggg==);
+  background-repeat: repeat-x;
+  background-size: 4px;
+  background-position: bottom;
+}
diff --git a/server/sonar-web/src/main/less/pages/libraries.less b/server/sonar-web/src/main/less/pages/libraries.less
new file mode 100644
index 00000000000..d67dc0c9b5a
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/libraries.less
@@ -0,0 +1,105 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+
+.libraries-header {
+  margin-bottom: 20px;
+  font-size: 0;
+}
+
+.libraries-header-filter,
+.libraries-header-test,
+.libraries-header-actions {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: @baseFontSize;
+}
+
+.libraries-header-test,
+.libraries-header-actions {
+  margin-left: 30px;
+}
+
+.libraries-header-actions {
+  margin-right: -10px;
+
+  a { margin-right: 10px; }
+}
+
+
+.libraries-tree {
+
+  & > ul ul {
+    padding-left: 24px;
+  }
+
+  & > ul ul ul {
+    margin: 4px 0 4px 8px;
+    padding-left: 16px;
+    border-left: 1px dashed #ddd;
+  }
+
+  & > ul > li + li {
+    margin-top: 15px;
+  }
+
+  & > ul > li > .libraries-tree-name {
+    font-weight: 500;
+  }
+
+  li {
+    padding: 3px 0;
+  }
+
+  li:last-child {
+    padding-bottom: 0;
+  }
+
+  .icon-dropdown {
+    display: inline-block;
+    width: 10px;
+    visibility: hidden;
+  }
+}
+
+.libraries-tree-subtree-hidden {
+  display: none;
+}
+
+.libraries-tree-with-subtree {
+
+  & > .libraries-tree-name {
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    .trans;
+
+    &:hover { border-color: #ddd; }
+  }
+
+  & > a > .icon-dropdown {
+    visibility: visible;
+  }
+}
+
+.libraries-tree-subtree-collapsed {
+
+  & > ul {
+    display: none;
+  }
+
+  & > a > .icon-dropdown:before {
+    content: "\f0da";
+  }
+}
+
+.libraries-tree-test {
+  display: none;
+
+  .libraries-tree-show-tests & { display: list-item; }
+}
+
+.libraries-tree-version {
+  margin: 0 3px;
+  padding: 0 4px;
+  background: @barBackgroundColor;
+}
diff --git a/server/sonar-web/src/main/less/pages/quality-gates.less b/server/sonar-web/src/main/less/pages/quality-gates.less
new file mode 100644
index 00000000000..9734d8f5b8e
--- /dev/null
+++ b/server/sonar-web/src/main/less/pages/quality-gates.less
@@ -0,0 +1,128 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/navigator/config";
+
+@qualityGateSidebarWidth: 230px;
+
+.quality-gates-navigator {
+
+  .navigator-side {
+    display: table-cell;
+    vertical-align: top;
+    width: @qualityGateSidebarWidth + 2 * @navigatorPadding;
+    min-width: 0;
+  }
+
+  .navigator-header {
+    margin-left: 0;
+    .spinner { margin-top: 9px; }
+  }
+
+  .navigator-actions {
+    height: @navigatorHeaderHeight;
+    width: @qualityGateSidebarWidth;
+    margin: @navigatorPadding;
+    padding: (@navigatorHeaderHeight - @formControlHeight) / 2 @navigatorPadding;
+
+    .navigator-header-title {
+      color: @baseFontColor;
+      font-size: 13px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .navigator-results {
+    width: @qualityGateSidebarWidth;
+    min-width: 0;
+  }
+
+  .navigator-details { margin-left: 0; }
+
+}
+
+
+.quality-gates-nav {
+
+  .navigator-results-list {
+
+    & > li {
+      border-color: transparent;
+
+      &:hover:not(.active):not(.empty) {
+        background-color: @navigatorBarBackground;
+      }
+
+      &.active {
+        border-color: #4B9FD5;
+      }
+
+      &.empty {
+        cursor: default;
+      }
+
+      .line {
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+
+      .subtitle {
+        text-transform: lowercase;
+      }
+    }
+  } 
+}
+
+
+.quality-gate-section + .quality-gate-section {
+  margin-top: @navigatorPadding;
+  padding-top: 2 * @navigatorPadding;
+}
+
+.quality-gate-section-empty + .quality-gate-section {
+  border-top: 1px solid @navigatorBorderLightColor;
+}
+
+.quality-gate-section-name {
+  margin-bottom: @navigatorPadding;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+
+.quality-gate-introduction {
+  margin-bottom: 2 * @navigatorPadding;
+}
+
+
+.quality-gate-new-condition {
+  margin-bottom: @navigatorPadding;
+}
+
+.quality-gate-condition-actions {
+  position: relative;
+}
+
+.quality-gate-default-message {
+  padding: 6px 5px;
+  border: 1px solid #ddd;
+  background-color: #efefef;
+}
+
+.quality-gate-conditions-wrap {
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+}
+
+.quality-gate-conditions {
+  & .deprecated {
+    color: #777;
+    text-transform: lowercase;
+    font-variant: small-caps;
+  }
+
+  tbody {
+    border-left: none !important;
+    border-right: none !important;
+  }
+}
diff --git a/server/sonar-web/src/main/less/quality-gates.less b/server/sonar-web/src/main/less/quality-gates.less
deleted file mode 100644
index 2039c85c50b..00000000000
--- a/server/sonar-web/src/main/less/quality-gates.less
+++ /dev/null
@@ -1,128 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "navigator/config";
-
-@qualityGateSidebarWidth: 230px;
-
-.quality-gates-navigator {
-
-  .navigator-side {
-    display: table-cell;
-    vertical-align: top;
-    width: @qualityGateSidebarWidth + 2 * @navigatorPadding;
-    min-width: 0;
-  }
-
-  .navigator-header {
-    margin-left: 0;
-    .spinner { margin-top: 9px; }
-  }
-
-  .navigator-actions {
-    height: @navigatorHeaderHeight;
-    width: @qualityGateSidebarWidth;
-    margin: @navigatorPadding;
-    padding: (@navigatorHeaderHeight - @formControlHeight) / 2 @navigatorPadding;
-
-    .navigator-header-title {
-      color: @baseFontColor;
-      font-size: 13px;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-  }
-
-  .navigator-results {
-    width: @qualityGateSidebarWidth;
-    min-width: 0;
-  }
-
-  .navigator-details { margin-left: 0; }
-
-}
-
-
-.quality-gates-nav {
-
-  .navigator-results-list {
-
-    & > li {
-      border-color: transparent;
-
-      &:hover:not(.active):not(.empty) {
-        background-color: @navigatorBarBackground;
-      }
-
-      &.active {
-        border-color: #4B9FD5;
-      }
-
-      &.empty {
-        cursor: default;
-      }
-
-      .line {
-        padding-top: 2px;
-        padding-bottom: 2px;
-      }
-
-      .subtitle {
-        text-transform: lowercase;
-      }
-    }
-  } 
-}
-
-
-.quality-gate-section + .quality-gate-section {
-  margin-top: @navigatorPadding;
-  padding-top: 2 * @navigatorPadding;
-}
-
-.quality-gate-section-empty + .quality-gate-section {
-  border-top: 1px solid @navigatorBorderLightColor;
-}
-
-.quality-gate-section-name {
-  margin-bottom: @navigatorPadding;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-
-.quality-gate-introduction {
-  margin-bottom: 2 * @navigatorPadding;
-}
-
-
-.quality-gate-new-condition {
-  margin-bottom: @navigatorPadding;
-}
-
-.quality-gate-condition-actions {
-  position: relative;
-}
-
-.quality-gate-default-message {
-  padding: 6px 5px;
-  border: 1px solid #ddd;
-  background-color: #efefef;
-}
-
-.quality-gate-conditions-wrap {
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-.quality-gate-conditions {
-  & .deprecated {
-    color: #777;
-    text-transform: lowercase;
-    font-variant: small-caps;
-  }
-
-  tbody {
-    border-left: none !important;
-    border-right: none !important;
-  }
-}
diff --git a/server/sonar-web/src/main/less/select-list.less b/server/sonar-web/src/main/less/select-list.less
deleted file mode 100644
index e03bd93ba59..00000000000
--- a/server/sonar-web/src/main/less/select-list.less
+++ /dev/null
@@ -1,194 +0,0 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
-
-.select-list-container {
-  min-width: 500px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.select-list-control {
-  margin-bottom: 10px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.select-list-list-container {
-  border: 1px solid #bfbfbf;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.select-list-list-container.loading .select-list-list {
-  visibility: hidden;
-}
-
-.select-list-list-container-readonly {
-  border: none;
-}
-
-.select-list-list-container-readonly .select-list-list {
-  overflow: visible;
-}
-
-.select-list-list-container-readonly .select-list-list > li {
-  border: none;
-}
-
-.select-list-list {
-  overflow-x: hidden;
-}
-
-  .select-list-list > li {
-    position: relative;
-    display: block;
-    margin-top: -1px;
-    padding: 5px 10px;
-    border-top: 1px solid #e0e0e0;
-    color: #404040;
-    transition: -webkit-transform 0.3s ease;
-    transition: -ms-transform 0.3s ease;
-    transition: transform 0.3s ease;
-  }
-
-  .select-list-list > li.removed {
-    -webkit-transform: translateX(100%);
-       -moz-transform: translateX(100%);
-        -ms-transform: translateX(100%);
-         -o-transform: translateX(100%);
-            transform: translateX(100%);
-  }
-
-  .select-list-list > li.added {
-    -webkit-transform: translateX(-100%);
-       -moz-transform: translateX(-100%);
-        -ms-transform: translateX(-100%);
-         -o-transform: translateX(-100%);
-            transform: translateX(-100%);
-  }
-
-  .select-list-list > li.progress {
-    background: url(../images/loading.gif) no-repeat 10px 5px;
-  }
-
-  .select-list-list > li.progress .select-list-list-checkbox {
-    visibility: hidden;
-  }
-
-  .select-list-list > li.empty-message {
-    padding: 6px 5px;
-    border: 1px solid #ddd;
-    background-color: #efefef;
-  }
-
-
-.select-list-list-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 10px;
-}
-
-.select-list-list-item {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.select-list-control {
-  height: 27px;
-}
-
-.select-list-check-control {
-  float: left;
-}
-
-.select-list-check-control.disabled {
-  filter: alpha(opacity=60);
-  opacity: 0.6;
-}
-
-.select-list-check-control.disabled .select-list-control-button {
-  background-color: #fff !important;
-}
-
-.select-list-control-button {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-  vertical-align: middle;
-  width: 110px;
-  height: 27px;
-  line-height: 25px;
-  .box-sizing(border-box);
-  border: 1px solid #bfbfbf;
-  color: @baseFontColor;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.select-list-control-button:hover {
-  background-color: #f6f6f6;
-  color: @baseFontColor;
-}
-
-.select-list-control-button:active,
-.select-list-control-button.active {
-  z-index: 2;
-  background-color: #efefef;
-  color: @baseFontColor;
-}
-
-.select-list-control-button + .select-list-control-button {
-  margin-left: -1px;
-}
-
-
-.select-list-search-control {
-  position: relative;
-  float: right;
-  height: 27px;
-}
-
-.select-list-search-control input {
-  width: 170px;
-  height: 100%;
-  line-height: 27px\9;
-  padding: 0 40px 0 10px;
-  border: 1px solid #bfbfbf;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  transition: all 0.3s ease;
-}
-
-.select-list-search-control input:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.select-list-search-control input::-ms-clear {
-  display: none;
-}
-
-.select-list-search-control-clear {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 23px;
-  height: 23px;
-  line-height: 24px;
-  background-color: #e0e0e0;
-  color: #fff;
-  cursor: pointer;
-  font-size: 18px;
-  text-align: center;
-  transition: all 0.3s ease;
-}
-
-  .select-list-search-control.disabled .select-list-search-control-clear {
-    filter: alpha(opacity=0);
-    opacity: 0;
-  }
-
-  .select-list-search-control-clear:hover {
-    background-color: #d6d6d6;
-  }
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,839 +100,11 @@ 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");
-  background-repeat: no-repeat;
-  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;
+/* ------------------- SETUP / MIGRATION PAGES ------------------- */
+.migration {
+  background-image: url("../images/logo.png");
+  background-repeat: no-repeat;
+  background-position: top right;
 }
 
 /* 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/ui.less b/server/sonar-web/src/main/less/ui.less
deleted file mode 100644
index bb375e2946a..00000000000
--- a/server/sonar-web/src/main/less/ui.less
+++ /dev/null
@@ -1,503 +0,0 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-
-
-/*
- * Common
- */
-
-.nowrap { white-space: nowrap; }
-
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.justify {
-  margin-bottom: -1em;
-  text-align: justify;
-
-  & > .ib { display: inline-block; }
-
-  &:after { display: inline-block; width: 100%; content: " "; }
-}
-
-.no-transform {
-  text-transform: none;
-}
-
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.first-letter-uppercase::first-letter {
-  text-transform: uppercase;
-}
-
-.disabled-pointer-events {
-  pointer-events: none !important;
-}
-
-
-/*
- * Links
- */
-
-.link() {
-  outline: none;
-  text-decoration: none;
-  .trans;
-
-  &:hover { color: @blue; }
-
-  &:active, &:focus {
-    color: @darkBlue;
-  }
-}
-
-.base-link {
-  color: @baseFontColor;
-  .link;
-}
-
-.highlighted-link() {
-  color: @darkBlue;
-  .link;
-}
-
-.underlined-link() {
-  .highlighted-link;
-  border-bottom: 1px solid @lightBlue;
-
-  &.link-red { .widget-link-red; }
-}
-
-.icon-with-link {
-  outline: none;
-  text-decoration: none;
-}
-
-.widget-link {
-  .highlighted-link;
-  border-bottom: 1px solid @lightBlue;
-}
-
-.widget-link-red {
-  color: @red;
-  border-bottom-color: @lightRed;
-
-  &:hover, &:active, &:focus {
-    color: @red;
-    border-bottom-color: @red;
-  }
-}
-
-.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;
-}
-
-
-
-/*
- * Inputs
- */
-
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=search],
-textarea {
-  border: 1px solid @darkGrey;
-  .box-sizing(border-box);
-  background: #fff;
-  color: @baseFontColor;
-  .trans(border-color);
-
-  &:active,
-  &:focus {
-    border-color: @highlighted;
-    box-shadow: none;
-    outline: none;
-  }
-
-  &.invalid { border-color: @red; }
-}
-
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=search] {
-  height: @formControlHeight;
-  padding: 0 3px;
-}
-
-input[type=search] {
-  -webkit-appearance: none;
-}
-
-textarea {
-  padding: 3px;
-}
-
-button,
-.button,
-input[type=submit],
-input[type=button] {
-  display: inline-block;
-  vertical-align: baseline;
-  height: @formControlHeight;
-  margin: 0 1px;
-  padding: 0 10px;
-
-  border: 1px solid @darkGrey;
-  .box-sizing(border-box);
-
-  background: #f4f4f4;
-
-  color: @baseFontColor;
-  font-weight: bold;
-  font-size: @baseFontSize;
-  text-align: center;
-  text-decoration: none;
-
-  cursor: pointer;
-  outline: none;
-  .trans(border-color);
-
-  &:hover, &.active {
-    border-color: #5281a0;
-    background: #4b9fd5;
-    color: #fff;
-  }
-
-  &:active {
-    border-color: #2790c0;
-    background: #78bdea;
-    color: #fff;
-  }
-
-  &:focus {
-    border-color: @highlighted;
-  }
-
-  &[disabled],
-  &[disabled]:hover,
-  &[disabled]:active,
-  &[disabled]:focus {
-    color: #bbb;
-    border-color: #ddd;
-    background: #ebebeb;
-    cursor: default;
-  }
-}
-
-.button { line-height: @formControlHeight; }
-
-.button-red {
-  &:hover, &:focus {
-    border-color: #900;
-    background: lighten(#900, 10%);
-    color: #fff;
-  }
-
-  &:active {
-    border-color: #900;
-    background: lighten(#900, 20%);
-  }
-}
-
-.button-clean,
-.button-clean:hover,
-.button-clean:focus {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: @baseFontColor;
-}
-
-.button-group {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 0;
-  white-space: nowrap;
-
-  & > button,
-  & > .button {
-    position: relative;
-    z-index: 2;
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0;
-    padding: 2px 8px;
-    font-size: @smallFontSize;
-    font-weight: normal;
-    cursor: pointer;
-
-    &:hover, &:focus, &:active, &.active {
-      z-index: 3;
-    }
-  }
-
-  & > .button { line-height: 16px; }
-
-  & > button + button,
-  & > button + .button,
-  & > .button + button,
-  & > .button + .button {
-    margin-left: -1px;
-  }
-
-  & > a:not(.button) {
-    vertical-align: middle;
-    margin: 0 8px;
-    font-size: @smallFontSize;
-  }
-}
-
-
-.message-notice {
-  display: block;
-  padding: 5px 8px;
-  border: 2px solid @blue;
-}
-
-.message-alert {
-  display: block;
-  padding: 5px 8px;
-  border: 2px solid @orange;
-}
-
-.message-error {
-  display: block;
-  padding: 5px 8px;
-  background-color: @red;
-  color: #fff;
-}
-
-.message-notice + .message-notice,
-.message-notice + .message-alert,
-.message-notice + .message-error,
-.message-alert + .message-notice,
-.message-alert + .message-alert,
-.message-alert + .message-error,
-.message-error + .message-notice,
-.message-error + .message-alert,
-.message-error + .message-error {
-  margin-top: 5px;
-}
-
-
-
-/*
- * Display SQALE Rating (also used by the SQALE plugin)
- */
-
-.rating {
-  display: inline-block;
-  .size(1em, 1.3em);
-  line-height: 1.3;
-  color: #fff;
-  font-weight: 300;
-  text-align: center;
-
-  a > & {
-    margin-bottom: -1px;
-    border-bottom: 1px solid;
-    .trans;
-
-    &:hover { opacity: 0.8; }
-  }
-}
-
-.rating-A {
-  background-color: #00AA00;
-  a & { border-bottom-color: #00AA00; }
-}
-
-.rating-B {
-  background-color: #80CC00;
-  a & { border-bottom-color: #80CC00; }
-}
-
-.rating-C {
-  background-color: #FFEE00;
-  color: @baseFontColor;
-  a & { border-bottom-color: #FFEE00; }
-}
-
-.rating-D {
-  background-color: #F77700;
-  a & { border-bottom-color: #F77700; }
-}
-
-.rating-E {
-  background-color: #EE0000;
-  a & { border-bottom-color: #EE0000; }
-}
-
-
-.processes-container {
-  position: fixed;
-  z-index: 9999;
-  top: 0;
-  left: 50%;
-  width: 350px;
-  margin-left: -175px;
-}
-
-.process-spinner {
-  padding: 0 10px;
-  line-height: @formControlHeight;
-  border-radius: 0 0 3px 3px;
-  .box-sizing(border-box);
-  background-color: #f0e8ac;
-  text-align: center;
-  opacity: 0;
-  .trans;
-
-  &.shown { opacity: 1; }
-}
-
-.process-spinner + .process-spinner {
-  margin-top: 5px;
-  border-radius: 3px;
-}
-
-.process-spinner-failed {
-  padding-right: 30px;
-  background-color: @red;
-  color: @white;
-}
-
-.process-spinner-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 3px;
-  background: none !important;
-  border: none !important;
-  line-height: 1;
-}
-
-
-
-.shortcuts-section {
-
-}
-
-.shortcuts-section + .shortcuts-section {
-  margin-top: 20px;
-}
-
-.shortcuts-section-title {
-  margin-bottom: 5px;
-}
-
-.shortcuts-list {
-  > li + li {
-    margin-top: 5px;
-  }
-}
-
-.shortcut-button {
-  display: inline-block;
-  .square(24px);
-  line-height: 24px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  .vertical-gradient(#f5f5f5, #eee);
-  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
-  color: @secondFontColor;
-  font-size: @baseFontSize;
-  font-weight: 500;
-  text-align: center;
-}
-
-
-.nav {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.nav > li {
-  position: relative;
-  display: block;
-}
-
-.nav > li > a {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 10px 15px;
-}
-
-
-.nav-crumbs {
-  padding: 2px 0;
-
-  a {
-    color: @baseLightFontColor;
-
-    &:hover, &:focus {
-      color: @blue !important;
-    }
-  }
-
-  > li + li:before {
-    content: "/";
-    float: left;
-    padding: 4px 0;
-    color: fade(@baseFontColor, 30%);
-  }
-
-  > li:first-child {
-    font-size: 18px;
-    font-weight: 300;
-
-    > a {
-      color: @baseFontColor;
-    }
-  }
-}
-
-.nav-tabs {
-  border-bottom: 1px solid @barBorderColor;
-
-  > li {
-    float: left;
-    margin-bottom: -1px;
-  }
-
-  > li > a {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    margin-right: 2px;
-    border-bottom: 3px solid transparent;
-    color: @baseLightFontColor;
-
-    &:hover {
-      border-color: @blue;
-    }
-  }
-
-  > li.active > a {
-    border-color: @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' %>