50 files changed, 714 insertions, 623 deletions

diff --git a/plugins/API/API.php b/plugins/API/API.php
index 8348724cc4..cdc6f4492e 100644
--- a/plugins/API/API.php
+++ b/plugins/API/API.php
@@ -57,7 +57,7 @@ class Piwik_API extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/API/stylesheets/listAllAPI.css";
+        $cssFiles[] = "plugins/API/stylesheets/listAllAPI.less";
     }
 }
 
diff --git a/plugins/API/stylesheets/listAllAPI.css b/plugins/API/stylesheets/listAllAPI.less
index 06a3c9f435..06a3c9f435 100644
--- a/plugins/API/stylesheets/listAllAPI.css
+++ b/plugins/API/stylesheets/listAllAPI.less
diff --git a/plugins/Annotations/Annotations.php b/plugins/Annotations/Annotations.php
index f95617937d..bfbe9a60c1 100755
--- a/plugins/Annotations/Annotations.php
+++ b/plugins/Annotations/Annotations.php
@@ -50,7 +50,7 @@ class Piwik_Annotations extends Piwik_Plugin
      */
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/Annotations/stylesheets/annotations.css";
+        $cssFiles[] = "plugins/Annotations/stylesheets/annotations.less";
     }
 
     /**
diff --git a/plugins/Annotations/stylesheets/annotations.css b/plugins/Annotations/stylesheets/annotations.less
index 089a8ef6c3..089a8ef6c3 100755
--- a/plugins/Annotations/stylesheets/annotations.css
+++ b/plugins/Annotations/stylesheets/annotations.less
diff --git a/plugins/CoreAdminHome/CoreAdminHome.php b/plugins/CoreAdminHome/CoreAdminHome.php
index bce5c3caaf..8fbbbe89e6 100644
--- a/plugins/CoreAdminHome/CoreAdminHome.php
+++ b/plugins/CoreAdminHome/CoreAdminHome.php
@@ -57,9 +57,9 @@ class Piwik_CoreAdminHome extends Piwik_Plugin
     public function getCssFiles(&$cssFiles)
     {
         $cssFiles[] = "libs/jquery/themes/base/jquery-ui.css";
-        $cssFiles[] = "plugins/CoreAdminHome/stylesheets/menu.css";
+        $cssFiles[] = "plugins/CoreAdminHome/stylesheets/menu.less";
         $cssFiles[] = "plugins/Zeitgeist/stylesheets/common.css";
-        $cssFiles[] = "plugins/CoreAdminHome/stylesheets/generalSettings.css";
+        $cssFiles[] = "plugins/CoreAdminHome/stylesheets/generalSettings.less";
         $cssFiles[] = "plugins/CoreHome/stylesheets/donate.css";
     }
 
diff --git a/plugins/CoreAdminHome/stylesheets/generalSettings.css b/plugins/CoreAdminHome/stylesheets/generalSettings.less
index 71871038b0..71871038b0 100644
--- a/plugins/CoreAdminHome/stylesheets/generalSettings.css
+++ b/plugins/CoreAdminHome/stylesheets/generalSettings.less
diff --git a/plugins/CoreAdminHome/stylesheets/menu.css b/plugins/CoreAdminHome/stylesheets/menu.less
index 207263f86a..207263f86a 100644
--- a/plugins/CoreAdminHome/stylesheets/menu.css
+++ b/plugins/CoreAdminHome/stylesheets/menu.less
diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 20312002c2..f7acd848fd 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -47,14 +47,14 @@ class Piwik_CoreHome extends Piwik_Plugin
     {
         $cssFiles[] = "libs/jquery/themes/base/jquery-ui.css";
         $cssFiles[] = "plugins/Zeitgeist/stylesheets/common.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/corehome.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/menu.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/datatable.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/cloud.css";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/coreHome.less";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/menu.less";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/dataTable.less";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/cloud.less";
         $cssFiles[] = "plugins/CoreHome/stylesheets/jquery.ui.autocomplete.css";
         $cssFiles[] = "plugins/CoreHome/stylesheets/jqplot.css";
         $cssFiles[] = "plugins/CoreHome/stylesheets/donate.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/promo.css";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/promo.less";
     }
 
     public function getJsFiles(&$jsFiles)
diff --git a/plugins/CoreHome/stylesheets/cloud.css b/plugins/CoreHome/stylesheets/cloud.less
index b17741e1cf..b17741e1cf 100644
--- a/plugins/CoreHome/stylesheets/cloud.css
+++ b/plugins/CoreHome/stylesheets/cloud.less
diff --git a/plugins/CoreHome/stylesheets/corehome.css b/plugins/CoreHome/stylesheets/coreHome.less
index 732f1a9def..732f1a9def 100644
--- a/plugins/CoreHome/stylesheets/corehome.css
+++ b/plugins/CoreHome/stylesheets/coreHome.less
diff --git a/plugins/CoreHome/stylesheets/datatable.css b/plugins/CoreHome/stylesheets/dataTable.less
index c658b5022a..c658b5022a 100644
--- a/plugins/CoreHome/stylesheets/datatable.css
+++ b/plugins/CoreHome/stylesheets/dataTable.less
diff --git a/plugins/CoreHome/stylesheets/donate.css b/plugins/CoreHome/stylesheets/donate.css
index f3f7faa443..5d5e5215c9 100755
--- a/plugins/CoreHome/stylesheets/donate.css
+++ b/plugins/CoreHome/stylesheets/donate.css
@@ -1,11 +1,7 @@
 .piwik-donate-call {
-    padding: 1em 1em 1em 1em;
+    padding: 1em;
     border: 1px solid #CCC;
-
     border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-
     max-width: 432px;
     position: relative;
 }
@@ -32,8 +28,6 @@
     background-color: #f7f7f7;
 
     border-radius: 6px;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
 
     height: 14px;
     width: 270px;
@@ -46,8 +40,6 @@
     background-color: #CCC;
 
     border-radius: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
 
     height: 18px;
     width: 10px;
diff --git a/plugins/CoreHome/stylesheets/menu.css b/plugins/CoreHome/stylesheets/menu.less
index f702b95409..f702b95409 100644
--- a/plugins/CoreHome/stylesheets/menu.css
+++ b/plugins/CoreHome/stylesheets/menu.less
diff --git a/plugins/CoreHome/stylesheets/promo.css b/plugins/CoreHome/stylesheets/promo.less
index f12c4b2b81..f12c4b2b81 100644
--- a/plugins/CoreHome/stylesheets/promo.css
+++ b/plugins/CoreHome/stylesheets/promo.less
diff --git a/plugins/DBStats/DBStats.php b/plugins/DBStats/DBStats.php
index 05f72ada33..9908323ecc 100644
--- a/plugins/DBStats/DBStats.php
+++ b/plugins/DBStats/DBStats.php
@@ -75,7 +75,7 @@ class Piwik_DBStats extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/DBStats/stylesheets/dbstatsTable.css";
+        $cssFiles[] = "plugins/DBStats/stylesheets/dbStatsTable.less";
     }
 
     /** Returns the date when the cacheDataByArchiveNameReports was last run. */
diff --git a/plugins/DBStats/stylesheets/dbstatsTable.css b/plugins/DBStats/stylesheets/dbStatsTable.less
index 9d897c8405..9d897c8405 100644
--- a/plugins/DBStats/stylesheets/dbstatsTable.css
+++ b/plugins/DBStats/stylesheets/dbStatsTable.less
diff --git a/plugins/Dashboard/Dashboard.php b/plugins/Dashboard/Dashboard.php
index 5ad1c74b7f..6caf04e7c7 100644
--- a/plugins/Dashboard/Dashboard.php
+++ b/plugins/Dashboard/Dashboard.php
@@ -237,8 +237,8 @@ class Piwik_Dashboard extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/CoreHome/stylesheets/datatable.css";
-        $cssFiles[] = "plugins/Dashboard/stylesheets/dashboard.css";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/dataTable.less";
+        $cssFiles[] = "plugins/Dashboard/stylesheets/dashboard.less";
     }
 
     public function deleteDashboardLayout($userLogin)
diff --git a/plugins/Dashboard/stylesheets/dashboard.css b/plugins/Dashboard/stylesheets/dashboard.less
index a60ca32947..a60ca32947 100644
--- a/plugins/Dashboard/stylesheets/dashboard.css
+++ b/plugins/Dashboard/stylesheets/dashboard.less
diff --git a/plugins/ExampleRssWidget/ExampleRssWidget.php b/plugins/ExampleRssWidget/ExampleRssWidget.php
index 0df7ebb5d0..2fe4381d35 100644
--- a/plugins/ExampleRssWidget/ExampleRssWidget.php
+++ b/plugins/ExampleRssWidget/ExampleRssWidget.php
@@ -47,7 +47,7 @@ class Piwik_ExampleRssWidget extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/ExampleRssWidget/stylesheets/rss.css";
+        $cssFiles[] = "plugins/ExampleRssWidget/stylesheets/rss.less";
     }
 
     public function addWidgets()
diff --git a/plugins/ExampleRssWidget/stylesheets/rss.css b/plugins/ExampleRssWidget/stylesheets/rss.less
index 5676571a7e..5676571a7e 100644
--- a/plugins/ExampleRssWidget/stylesheets/rss.css
+++ b/plugins/ExampleRssWidget/stylesheets/rss.less
diff --git a/plugins/Feedback/Feedback.php b/plugins/Feedback/Feedback.php
index 50bab49f99..97a1e35c82 100644
--- a/plugins/Feedback/Feedback.php
+++ b/plugins/Feedback/Feedback.php
@@ -48,7 +48,7 @@ class Piwik_Feedback extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/Feedback/stylesheets/feedback.css";
+        $cssFiles[] = "plugins/Feedback/stylesheets/feedback.less";
     }
 
     public function getJsFiles(&$jsFiles)
diff --git a/plugins/Feedback/stylesheets/feedback.css b/plugins/Feedback/stylesheets/feedback.less
index 258f078ca1..258f078ca1 100644
--- a/plugins/Feedback/stylesheets/feedback.css
+++ b/plugins/Feedback/stylesheets/feedback.less
diff --git a/plugins/Installation/Installation.php b/plugins/Installation/Installation.php
index 660be7c8ed..b7648ef25b 100644
--- a/plugins/Installation/Installation.php
+++ b/plugins/Installation/Installation.php
@@ -89,6 +89,6 @@ class Piwik_Installation extends Piwik_Plugin
      */
     public function getCss(&$cssFiles)
     {
-        $cssFiles[] = "plugins/Installation/stylesheets/systemCheckPage.css";
+        $cssFiles[] = "plugins/Installation/stylesheets/systemCheckPage.less";
     }
 }
diff --git a/plugins/Installation/stylesheets/systemCheckPage.css b/plugins/Installation/stylesheets/systemCheckPage.less
index 579bd888ae..579bd888ae 100755
--- a/plugins/Installation/stylesheets/systemCheckPage.css
+++ b/plugins/Installation/stylesheets/systemCheckPage.less
diff --git a/plugins/Live/Live.php b/plugins/Live/Live.php
index 95a86d96e2..6fdb81dc55 100644
--- a/plugins/Live/Live.php
+++ b/plugins/Live/Live.php
@@ -37,7 +37,7 @@ class Piwik_Live extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/Live/stylesheets/live.css";
+        $cssFiles[] = "plugins/Live/stylesheets/live.less";
     }
 
     public function getJsFiles(&$jsFiles)
diff --git a/plugins/Live/stylesheets/live.css b/plugins/Live/stylesheets/live.less
index 29d4b03e03..29d4b03e03 100644
--- a/plugins/Live/stylesheets/live.css
+++ b/plugins/Live/stylesheets/live.less
diff --git a/plugins/Login/stylesheets/login.css b/plugins/Login/stylesheets/login.css
index 14e0f8f25b..a3401620b9 100644
--- a/plugins/Login/stylesheets/login.css
+++ b/plugins/Login/stylesheets/login.css
@@ -14,14 +14,11 @@ form {
 }
 
 #login form input.submit {
-    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
     float: right;
     height: 35px;
     padding: 0 20px;
     cursor: pointer;
-    font: bold 15px Arial, Helvetica;
+    font: bold 15px Arial, Helvetica, sans-serif;
 }
 
 #login form div {
diff --git a/plugins/MobileMessaging/MobileMessaging.php b/plugins/MobileMessaging/MobileMessaging.php
index 6cc34fe5c4..9d9673e5b3 100644
--- a/plugins/MobileMessaging/MobileMessaging.php
+++ b/plugins/MobileMessaging/MobileMessaging.php
@@ -111,7 +111,7 @@ class Piwik_MobileMessaging extends Piwik_Plugin
 
     public function getCssFiles($cssFiles)
     {
-        $cssFiles[] = "plugins/MobileMessaging/stylesheets/MobileMessagingSettings.css";
+        $cssFiles[] = "plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less";
     }
     
     public function validateReportParameters(&$parameters, $info)
diff --git a/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.css b/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less
index 028c8fa804..028c8fa804 100644
--- a/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.css
+++ b/plugins/MobileMessaging/stylesheets/MobileMessagingSettings.less
diff --git a/plugins/MultiSites/MultiSites.php b/plugins/MultiSites/MultiSites.php
index 6d3f65af77..eac109d35a 100644
--- a/plugins/MultiSites/MultiSites.php
+++ b/plugins/MultiSites/MultiSites.php
@@ -84,6 +84,6 @@ class Piwik_MultiSites extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/MultiSites/stylesheets/multiSites.css";
+        $cssFiles[] = "plugins/MultiSites/stylesheets/multiSites.less";
     }
 }
diff --git a/plugins/MultiSites/stylesheets/multiSites.css b/plugins/MultiSites/stylesheets/multiSites.less
index 958256c67a..958256c67a 100644
--- a/plugins/MultiSites/stylesheets/multiSites.css
+++ b/plugins/MultiSites/stylesheets/multiSites.less
diff --git a/plugins/PleineLune/PleineLune.php b/plugins/PleineLune/PleineLune.php
index aab35a03d6..4420095902 100644
--- a/plugins/PleineLune/PleineLune.php
+++ b/plugins/PleineLune/PleineLune.php
@@ -34,6 +34,6 @@ class Piwik_PleineLune extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/PleineLune/stylesheets/theme.css";
+        $cssFiles[] = "plugins/PleineLune/stylesheets/theme.less";
     }
 }
diff --git a/plugins/PleineLune/stylesheets/theme.css b/plugins/PleineLune/stylesheets/theme.less
index 974d9700da..974d9700da 100644
--- a/plugins/PleineLune/stylesheets/theme.css
+++ b/plugins/PleineLune/stylesheets/theme.less
diff --git a/plugins/SegmentEditor/SegmentEditor.php b/plugins/SegmentEditor/SegmentEditor.php
index ce1825a524..98bf1040a6 100644
--- a/plugins/SegmentEditor/SegmentEditor.php
+++ b/plugins/SegmentEditor/SegmentEditor.php
@@ -95,8 +95,8 @@ class Piwik_SegmentEditor extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/SegmentEditor/stylesheets/segmentation.css";
+        $cssFiles[] = "plugins/SegmentEditor/stylesheets/segmentation.less";
         $cssFiles[] = "plugins/SegmentEditor/stylesheets/jquery.jscrollpane.css";
-        $cssFiles[] = "plugins/SegmentEditor/stylesheets/scroll.css";
+        $cssFiles[] = "plugins/SegmentEditor/stylesheets/scroll.less";
     }
 }
diff --git a/plugins/SegmentEditor/stylesheets/scroll.css b/plugins/SegmentEditor/stylesheets/scroll.less
index 508adb4c7a..508adb4c7a 100644
--- a/plugins/SegmentEditor/stylesheets/scroll.css
+++ b/plugins/SegmentEditor/stylesheets/scroll.less
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.css b/plugins/SegmentEditor/stylesheets/segmentation.css
deleted file mode 100644
index 4160090cd6..0000000000
--- a/plugins/SegmentEditor/stylesheets/segmentation.css
+++ /dev/null
@@ -1,578 +0,0 @@
-/* ADDITIONAL STYLES*/
-.youMustBeLoggedIn {
-    font-size:8pt;
-    font-style: italic;
-
-}
-.segment-footer .segmentFooterNote {
-    display:none;
-    float: left;
-    padding-top: 9px;
-}
-.segment-footer .segmentFooterNote, .segment-element .segment-footer .segmentFooterNote a {
-    font-size: 8pt;
-    color: #888172;
-}
-.segment-element .segment-footer .segmentFooterNote a {
-    padding:0; margin:0;
-    text-decoration:underline;
-}
-.searchFound {
-  border: 0px solid red;
-}
-.others {
-  border: 0px solid green;
-}
-.clear {
-  clear: both;
-}
-.segment-row-inputs {
-  margin-bottom: 5px;
-}
-.hovered {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  border: 2px dashed #000 !important;
-  padding: 0px;
-}
-.metricListBlock {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  width: 292px;
-  margin-right: 11px;
-  border: 2px dashed #EFEFEB;
-}
-.metricListBlock > select {
-  margin: 0 !important;
-  width: 98% !important;
-  margin-left: 2px !important;
-}
-.metricMatchBlock {
-  width: 120px;
-  margin-right: 11px;
-}
-.metricValueBlock {
-  width: 352px;
-}
-div.scrollable {
-  height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
-}
-.no_results {
-  position: absolute;
-  margin: -225px 0 0 10px;
-}
-.segment-element {
-  border: 1px solid #a9a399;
-  background-color: #f1f0eb;
-  padding: 6px 4px;
-  border-radius: 3px 3px 3px 3px;
-}
-.segment-element .custom_select_search {
-  width: 146px;
-  height: 21px;
-  background: url(../images/bg-segment-search.png) 0 10px no-repeat;
-  padding: 10px 0 0 0;
-  margin: 10px 0 10px 15px;
-  border-top: 1px solid #dcdacf;
-  position: relative;
-}
-.segment-element .custom_select_search input[type="text"] {
-  font: 11px Arial;
-  color: #454545;
-  width: 125px;
-  padding: 4px 0 3px 7px;
-  border: none;
-  background: none;
-}
-.segment-element .custom_select_search a {
-  position: absolute;
-  width: 13px;
-  height: 13px;
-  right: 5px;
-  top: 14px;
-  background: url(../images/reset_search.png);
-}
-.segment-element .segment-nav {
-  width: 180px;
-  position: absolute;
-  top: 7px;
-  left: 5px;
-  bottom: 135px;
-  float: left;
-  width: 170px;
-}
-.segment-element .segment-nav h4 {
-  font: bold 14px Arial;
-  padding: 0 0 8px 0;
-}
-.segment-element .segment-nav h4.visits {
-  padding-left: 28px;
-  background: url(../images/icon-users.png) 0 0 no-repeat;
-}
-.segment-element .segment-nav h4 a {
-  color: #255792;
-  text-decoration: none;
-}
-.segment-element .segment-nav div > ul {
-  padding: 0 0 0 15px;
-}
-.segment-element .segment-nav div > ul  > li {
-  padding: 2px 0;
-  line-height: 14px;
-}
-.segment-element .segment-nav div > ul  > li li {
-  padding: 1px;
-  border-radius: 3px 3px 3px 3px;
-}
-.segment-element .segment-nav div > ul  > li li:hover {
-  padding: 0;
-  border: 1px solid #cfccbd;
-  border-bottom: 1px solid #7c7a72;
-  background-color: #e9e7e3;
-}
-.segment-element .segment-nav div > ul  > li li:hover a {
-  cursor: move;
-  padding: 1px 0 2px 8px;
-  border-top: 1px solid #fff;
-  background: #eae8e3 url(../images/segment-move.png) 100% 50% no-repeat;
-}
-.segment-element .segment-nav div > ul  > li li a {
-  padding: 2px 0 2px 8px;
-  font-weight: normal;
-  display: block;
-}
-.segment-element .segment-nav div > ul  > li ul {
-  margin: 2px 0 -3px 10px;
-}
-.segment-element .segment-nav div > ul  > li a {
-  color: #5d5342;
-  font: bold 11px Arial;
-  text-decoration: none;
-  text-shadow: 0 1px 0 #fff;
-}
-.segment-element .segment-content {
-  min-height: 300px;
-  padding: 0 0 20px 203px;
-}
-.segment-element .segment-content h3 {
-  font: bold 16px Arial;
-  color: #505050;
-  margin: 11px 0 0 0;
-  text-shadow: 0 1px 0 #fff;
-}
-.segment-element .segment-content h3 a {
-  font-size: 11px;
-  text-decoration: none;
-  margin: -1px 0 0 0;
-}
-.segment-element .segment-content .segment-rows {
-  padding: 4px;
-  margin: 0 3px 0 0;
-  background: #fff;
-  border: 1px solid #a9a399;
-  border-radius: 3px 3px 3px 3px;
-  position: relative;
-  box-shadow: 0 12px 6px -10px rgba(0, 0, 0, 0.42);
-}
-.segment-element .segment-content .segment-add-row,
-.segment-element .segment-content .segment-add-or {
-  font: bold 14px Arial;
-  background: #fff;
-  color: #b9b9b9;
-  text-align: center;
-  position: relative;
-}
-.segment-element .segment-content .segment-add-row  > div,
-.segment-element .segment-content .segment-add-or  > div {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  border: 2px dashed #fff;
-  padding: 10px 0;
-}
-.segment-element .segment-content .segment-add-row  > div a,
-.segment-element .segment-content .segment-add-or  > div a {
-  color: #b9b9b9;
-  text-decoration: none;
-}
-.segment-element .segment-content .segment-add-row  > div a span,
-.segment-element .segment-content .segment-add-or  > div a span {
-  color: #255792;
-}
-.segment-element .segment-content .segment-add-row {
-  margin: 0 3px 0 0;
-  padding: 0 12px;
-  border: 1px solid #a9a399;
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0 12px 6px -10px rgba(0, 0, 0, 0.42);
-}
-.segment-element .segment-content .segment-add-or {
-  text-shadow: 0 1px 0 #fff;
-  display: inline-block;
-  width: 98%;
-  padding: 0 1%;
-  background: #efefeb;
-  border-radius: 3px 3px 3px 3px;
-}
-.segment-element .segment-content .segment-add-or  > div {
-  border: 2px dashed #EFEFEB;
-}
-.segment-element .segment-content .segment-row {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  display: inline-block;
-  position: relative;
-  width: 811px;
-  padding: 12px 1%;
-  background: #efefeb;
-  padding: 7px 5px 0 5px;
-}
-.segment-element .segment-content .segment-row .segment-close {
-    top: 15px;
-    right: 6px;
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    background: url(../images/segment-close.png) 0 0 no-repeat;
-}
-.segment-element .segment-content .segment-row .segment-loading {
-    display:none;
-    top: 25px;
-    right: 30px;
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    background: url(../../MultiSites/images/loading-blue.gif) 0 0 no-repeat;
-}
-
-.segment-element .segment-content .segment-or {
-  display: inline-block;
-  margin: 0 0 0 6%;
-  position: relative;
-  background: #efefeb;
-  padding: 5px 28px;
-  color: #4f4f4f;
-  font: bold 14px Arial;
-  text-shadow: 0 1px 0 #fff;
-}
-.segment-element .segment-content .segment-or:before,
-.segment-element .segment-content .segment-or:after {
-  content: '';
-  position: absolute;
-  background: #fff;
-  border: 1px solid #efefeb;
-  width: 10px;
-  top: -1px;
-  bottom: -1px;
-}
-.segment-element .segment-content .segment-or:before {
-  border-left: none;
-  left: 0px;
-  border-radius: 0 5px 5px 0;
-}
-.segment-element .segment-content .segment-or:after {
-  border-right: none;
-  right: 0px;
-  border-radius: 5px 0 0 5px;
-}
-.segment-element .segment-content .segment-and {
-  display: inline-block;
-  margin: -1px 0 -1px 6%;
-  z-index: 1;
-  position: relative;
-  background: #fff;
-  padding: 5px 35px;
-  color: #4f4f4f;
-  font: bold 14px Arial;
-  text-shadow: 0 1px 0 #fff;
-}
-.segment-element .segment-content .segment-and:before,
-.segment-element .segment-content .segment-and:after {
-  content: '';
-  position: absolute;
-  background: url(../images/bg-inverted-corners.png);
-  background: #f1f0eb\0/;
-  border: 1px solid #a9a399;
-  width: 10px;
-  top: 0px;
-  bottom: 0px;
-}
-.segment-element .segment-content .segment-and:before {
-  border-left: none;
-  left: 0px;
-  border-radius: 0 5px 5px 0;
-}
-.segment-element .segment-content .segment-and:after {
-  border-right: none;
-  right: 0px;
-  border-radius: 5px 0 0 5px;
-}
-.segment-element .segment-content .segment-input {
-  float: left;
-  padding: 6px 0 5px 3px;
-  border: 2px dashed #EFEFEB;
-  margin-right: 3px;
-}
-.segment-element .segment-content .segment-input label {
-  display: block;
-  margin: 0 0 5px 0;
-  font: 11px Arial;
-  color: #505050;
-}
-.segment-element .segment-content .segment-input select,
-.segment-element .segment-content .segment-input input {
-  display: block;
-  font: 16px Arial;
-  color: #255792;
-  width: 96%;
-  padding: 7px 2%;
-  border-radius: 2px 2px 2px 2px;
-}
-.segment-element .segment-content .segment-input input {
-  padding: 8px 2%;
-}
-.segment-element .segment-top {
-  font: 11px Arial;
-  color: #505050;
-  text-align: right;
-  padding: 3px 7px 0 0;
-}
-.segment-element .segment-top a {
-  text-decoration: none;
-}
-.segment-element .segment-top a.dropdown {
-  padding: 0 17px 0 0;
-  background: url(../../Zeitgeist/images/sort_subtable_desc.png) 100% -2px no-repeat;
-}
-.segment-element .segment-footer {
-  background: #eae8e3;
-  border-top: 1px solid #a9a399;
-  text-align: right;
-  padding: 7px 10px;
-  margin: 0 -4px -6px -4px;
-}
-.segment-element .segment-footer a.delete {
-    color:red;
-}
-.segment-element .segment-footer a {
-  font: 14px Arial;
-  color: #255792;
-  margin: 0 5px;
-  text-decoration: none;
-}
-
-.segment-element .segment-footer button {
-  min-width: 178px;
-  height: 30px;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE3OCAzMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjODM3OTZiIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWJhMzkzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNzgiIGhlaWdodD0iMzAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
-  background-image: -moz-linear-gradient(bottom, #83796b 0%, #aba393 100%);
-  background-image: -o-linear-gradient(bottom, #83796b 0%, #aba393 100%);
-  background-image: -webkit-linear-gradient(bottom, #83796b 0%, #aba393 100%);
-  background-image: linear-gradient(bottom, #83796b 0%, #aba393 100%);
-  color: #fff;
-  font-family: "Arial";
-  font-size: 16px;
-  font-weight: bold;
-  text-shadow: 0 1px 0px #251e15;
-  border-radius: 4px 4px 4px 4px;
-  border: none;
-  margin: 0 0 0 15px;
-  background: #978f80\0/;
-}
-.segmentationContainer {
-  position: absolute;
-  z-index: 2;
-  background: #f7f7f7;
-  border: 1px solid #e4e5e4;
-  padding: 5px 10px 6px 10px;
-  border-radius: 4px;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  color: #444;
-  font-size: 14px;
-}
-.segmentationContainer:hover {
-  background: #f1f0eb;
-  border-color: #a9a399;
-}
-.segmentationContainer  > span > b {
-  color: #255792;
-}
-.segmentationContainer .submenu {
-  font-size: 13px;
-  min-width: 180px;
-}
-.segmentationContainer .submenu ul {
-  color: #5D5342;
-  float: none;
-  font-size: 11px;
-  font-weight: normal;
-  line-height: 20px;
-  list-style: none outside none;
-  margin-left: 5px;
-  margin-right: 0px;
-  padding-top: 10px;
-}
-.segmentationContainer .submenu ul li {
-  padding: 2px 0px 1px 6px;
-  margin: 3px 0 0 0;
-  cursor: pointer;
-}
-.segmentationContainer .submenu ul li:hover {
-  color: #255792;
-  margin: 0;
-  margin-left:-3px;
-  border: 1px solid #d5d2c6;
-  border-bottom: 2px solid #918f88;
-  border-radius: 4px;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  background: #eae8e3;
-}
-.segmentationContainer ul.submenu {
-  padding-top: 5px;
-  display: none;
-  float: left;
-}
-.segmentationContainer ul.submenu  > li span.editSegment {
-  display: block;
-  float: right;
-  width: 45px;
-  text-align: center;
-  font-weight: normal;
-}
-.segmentationContainer.visible {
-  width: 180px;
-}
-.segmentationContainer.visible ul.submenu {
-  display: block;
-  list-style: none;
-}
-.segmentationContainer.visible .add_new_segment {
-  display: block;
-  background: url("../images/dashboard_h_bg_hover.png") repeat-x scroll 0 0 #847b6d;
-  border: 0 none;
-  border-radius: 4px 4px 4px 4px;
-  clear: both;
-  color: #FFFFFF;
-  float: right;
-  margin: 12px 0 10px;
-  padding: 3px 10px;
-  text-decoration: none;
-  width:130px;
-}
-.segmentationContainer  > ul.submenu > li {
-  padding: 5px 0;
-  clear: both;
-  cursor: pointer;
-}
-span.segmentationTitle {
-  background: url(../../Zeitgeist/images/sort_subtable_desc.png) right center no-repeat !important;
-  padding-right: 20px !important;
-  width: 160px !important;
-  display: block !important;
-  cursor: pointer;
-}
-.add_new_segment {
-  display: none;
-}
-.segmentList {
-  max-height: 250px;
-}
-.jspVerticalBar {
-  background: transparent!important;
-}
-/* ADDITIONAL STYLES*/
-body > a.ddmetric {
-  display: block;
-  cursor: move;
-  padding: 1px 0 2px 18px;
-  background: #eae8e3 url(../images/segment-move.png) 100% 50% no-repeat;
-  color: #5d5342;
-  font: normal 11px Arial;
-  text-decoration: none;
-  text-shadow: 0 1px 0 #fff;
-  border: 1px solid #cfccbd;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #7c7a72;
-}
-.segment-element .segment-nav div > ul > li ul {
-  margin-left: 0;
-}
-.segment-element .segment-nav div > ul > li li a,
-.segment-element .segment-nav div > ul > li li a:hover {
-  padding-right: 18px;
-}
-.hovered {
-  border-color: #a0a0a0 !important;
-}
-a.metric_category {
-  display: block;
-  width: 100%;
-}
-.segment-content > h3 {
-  padding-bottom: 7px;
-}
-.no_results {
-  margin: 0;
-  position: relative;
-}
-.no_results a {
-  cursor: default;
-}
-.ui-widget-segmentation {
-  border: 1px solid #D4D4D4 !important;
-}
-.clearfix {
-  zoom: 1;
-}
-.clearfix:after {
-  display: block;
-  visibility: hidden;
-  height: 0;
-  clear: both;
-  content: ".";
-}
-
-#available_segments a.dropdown {
-    background: url("../../Zeitgeist/images/sort_subtable_desc.png") no-repeat scroll 100% -2px transparent !important;
-    padding: 0 17px 0 0 !important;
-}
-.notification{
-    float: left;
-}
-.metricValueBlock input
-{
-    padding:8px !important;
-}
-.ajaxError {
-    border: 0 !important;
-    width: auto !important;
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-.segmentationContainer{
-    z-index:99!important;
-}
-.segment-element{
-    z-index:999!important;
-}
-#dashboardSettings{
-    z-index:120;
-}
-#periodString{
-    z-index:121;
-}
-.segmentationSelectorContainer {
-    margin: 8px;
-}
-.segmentSelected, .segmentSelected:hover{
-    font-weight:bold;
-}
-.ui-autocomplete { position: absolute; cursor: default;z-index:1000 !important;}
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
new file mode 100644
index 0000000000..f21403b59e
--- /dev/null
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -0,0 +1,680 @@
+/* ADDITIONAL STYLES*/
+.youMustBeLoggedIn {
+    font-size: 8pt;
+    font-style: italic;
+
+}
+
+.segment-footer .segmentFooterNote {
+    display: none;
+    float: left;
+    padding-top: 9px;
+}
+
+.segment-footer .segmentFooterNote, .segment-element .segment-footer .segmentFooterNote a {
+    font-size: 8pt;
+    color: #888172;
+}
+
+.segment-element .segment-footer .segmentFooterNote a {
+    padding: 0;
+    margin: 0;
+    text-decoration: underline;
+}
+
+.searchFound {
+    border: 0px solid red;
+}
+
+.others {
+    border: 0px solid green;
+}
+
+.clear {
+    clear: both;
+}
+
+.segment-row-inputs {
+    margin-bottom: 5px;
+}
+
+.hovered {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 2px dashed #000 !important;
+    padding: 0px;
+}
+
+.metricListBlock {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    width: 292px;
+    margin-right: 11px;
+    border: 2px dashed #EFEFEB;
+}
+
+.metricListBlock > select {
+    margin: 0 !important;
+    width: 98% !important;
+    margin-left: 2px !important;
+}
+
+.metricMatchBlock {
+    width: 120px;
+    margin-right: 11px;
+}
+
+.metricValueBlock {
+    width: 352px;
+}
+
+div.scrollable {
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+}
+
+.no_results {
+    position: absolute;
+    margin: -225px 0 0 10px;
+}
+
+.segment-element {
+    border: 1px solid #a9a399;
+    background-color: #f1f0eb;
+    padding: 6px 4px;
+    border-radius: 3px 3px 3px 3px;
+}
+
+.segment-element .custom_select_search {
+    width: 146px;
+    height: 21px;
+    background: url(../images/bg-segment-search.png) 0 10px no-repeat;
+    padding: 10px 0 0 0;
+    margin: 10px 0 10px 15px;
+    border-top: 1px solid #dcdacf;
+    position: relative;
+}
+
+.segment-element .custom_select_search input[type="text"] {
+    font: 11px Arial;
+    color: #454545;
+    width: 125px;
+    padding: 4px 0 3px 7px;
+    border: none;
+    background: none;
+}
+
+.segment-element .custom_select_search a {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    right: 5px;
+    top: 14px;
+    background: url(../images/reset_search.png);
+}
+
+.segment-element .segment-nav {
+    width: 180px;
+    position: absolute;
+    top: 7px;
+    left: 5px;
+    bottom: 135px;
+    float: left;
+    width: 170px;
+}
+
+.segment-element .segment-nav h4 {
+    font: bold 14px Arial;
+    padding: 0 0 8px 0;
+}
+
+.segment-element .segment-nav h4.visits {
+    padding-left: 28px;
+    background: url(../images/icon-users.png) 0 0 no-repeat;
+}
+
+.segment-element .segment-nav h4 a {
+    color: #255792;
+    text-decoration: none;
+}
+
+.segment-element .segment-nav div > ul {
+    padding: 0 0 0 15px;
+}
+
+.segment-element .segment-nav div > ul  > li {
+    padding: 2px 0;
+    line-height: 14px;
+}
+
+.segment-element .segment-nav div > ul  > li li {
+    padding: 1px;
+    border-radius: 3px 3px 3px 3px;
+}
+
+.segment-element .segment-nav div > ul  > li li:hover {
+    padding: 0;
+    border: 1px solid #cfccbd;
+    border-bottom: 1px solid #7c7a72;
+    background-color: #e9e7e3;
+}
+
+.segment-element .segment-nav div > ul  > li li:hover a {
+    cursor: move;
+    padding: 1px 0 2px 8px;
+    border-top: 1px solid #fff;
+    background: #eae8e3 url(../images/segment-move.png) 100% 50% no-repeat;
+}
+
+.segment-element .segment-nav div > ul  > li li a {
+    padding: 2px 0 2px 8px;
+    font-weight: normal;
+    display: block;
+}
+
+.segment-element .segment-nav div > ul  > li ul {
+    margin: 2px 0 -3px 10px;
+}
+
+.segment-element .segment-nav div > ul  > li a {
+    color: #5d5342;
+    font: bold 11px Arial;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.segment-element .segment-content {
+    min-height: 300px;
+    padding: 0 0 20px 203px;
+}
+
+.segment-element .segment-content h3 {
+    font: bold 16px Arial;
+    color: #505050;
+    margin: 11px 0 0 0;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.segment-element .segment-content h3 a {
+    font-size: 11px;
+    text-decoration: none;
+    margin: -1px 0 0 0;
+}
+
+.segment-element .segment-content .segment-rows {
+    padding: 4px;
+    margin: 0 3px 0 0;
+    background: #fff;
+    border: 1px solid #a9a399;
+    border-radius: 3px 3px 3px 3px;
+    position: relative;
+    box-shadow: 0 12px 6px -10px rgba(0, 0, 0, 0.42);
+}
+
+.segment-element .segment-content .segment-add-row,
+.segment-element .segment-content .segment-add-or {
+    font: bold 14px Arial;
+    background: #fff;
+    color: #b9b9b9;
+    text-align: center;
+    position: relative;
+}
+
+.segment-element .segment-content .segment-add-row  > div,
+.segment-element .segment-content .segment-add-or  > div {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 2px dashed #fff;
+    padding: 10px 0;
+}
+
+.segment-element .segment-content .segment-add-row  > div a,
+.segment-element .segment-content .segment-add-or  > div a {
+    color: #b9b9b9;
+    text-decoration: none;
+}
+
+.segment-element .segment-content .segment-add-row  > div a span,
+.segment-element .segment-content .segment-add-or  > div a span {
+    color: #255792;
+}
+
+.segment-element .segment-content .segment-add-row {
+    margin: 0 3px 0 0;
+    padding: 0 12px;
+    border: 1px solid #a9a399;
+    border-radius: 3px 3px 3px 3px;
+    box-shadow: 0 12px 6px -10px rgba(0, 0, 0, 0.42);
+}
+
+.segment-element .segment-content .segment-add-or {
+    text-shadow: 0 1px 0 #fff;
+    display: inline-block;
+    width: 98%;
+    padding: 0 1%;
+    background: #efefeb;
+    border-radius: 3px 3px 3px 3px;
+}
+
+.segment-element .segment-content .segment-add-or  > div {
+    border: 2px dashed #EFEFEB;
+}
+
+.segment-element .segment-content .segment-row {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    display: inline-block;
+    position: relative;
+    width: 811px;
+    padding: 12px 1%;
+    background: #efefeb;
+    padding: 7px 5px 0 5px;
+}
+
+.segment-element .segment-content .segment-row .segment-close {
+    top: 15px;
+    right: 6px;
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background: url(../images/segment-close.png) 0 0 no-repeat;
+}
+
+.segment-element .segment-content .segment-row .segment-loading {
+    display: none;
+    top: 25px;
+    right: 30px;
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background: url(../../MultiSites/images/loading-blue.gif) 0 0 no-repeat;
+}
+
+.segment-element .segment-content .segment-or {
+    display: inline-block;
+    margin: 0 0 0 6%;
+    position: relative;
+    background: #efefeb;
+    padding: 5px 28px;
+    color: #4f4f4f;
+    font: bold 14px Arial;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.segment-element .segment-content .segment-or:before,
+.segment-element .segment-content .segment-or:after {
+    content: '';
+    position: absolute;
+    background: #fff;
+    border: 1px solid #efefeb;
+    width: 10px;
+    top: -1px;
+    bottom: -1px;
+}
+
+.segment-element .segment-content .segment-or:before {
+    border-left: none;
+    left: 0px;
+    border-radius: 0 5px 5px 0;
+}
+
+.segment-element .segment-content .segment-or:after {
+    border-right: none;
+    right: 0px;
+    border-radius: 5px 0 0 5px;
+}
+
+.segment-element .segment-content .segment-and {
+    display: inline-block;
+    margin: -1px 0 -1px 6%;
+    z-index: 1;
+    position: relative;
+    background: #fff;
+    padding: 5px 35px;
+    color: #4f4f4f;
+    font: bold 14px Arial;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.segment-element .segment-content .segment-and:before,
+.segment-element .segment-content .segment-and:after {
+    content: '';
+    position: absolute;
+    background: url(../images/bg-inverted-corners.png);
+    background: #f1f0eb\0/;
+    border: 1px solid #a9a399;
+    width: 10px;
+    top: 0px;
+    bottom: 0px;
+}
+
+.segment-element .segment-content .segment-and:before {
+    border-left: none;
+    left: 0px;
+    border-radius: 0 5px 5px 0;
+}
+
+.segment-element .segment-content .segment-and:after {
+    border-right: none;
+    right: 0px;
+    border-radius: 5px 0 0 5px;
+}
+
+.segment-element .segment-content .segment-input {
+    float: left;
+    padding: 6px 0 5px 3px;
+    border: 2px dashed #EFEFEB;
+    margin-right: 3px;
+}
+
+.segment-element .segment-content .segment-input label {
+    display: block;
+    margin: 0 0 5px 0;
+    font: 11px Arial;
+    color: #505050;
+}
+
+.segment-element .segment-content .segment-input select,
+.segment-element .segment-content .segment-input input {
+    display: block;
+    font: 16px Arial;
+    color: #255792;
+    width: 96%;
+    padding: 7px 2%;
+    border-radius: 2px 2px 2px 2px;
+}
+
+.segment-element .segment-content .segment-input input {
+    padding: 8px 2%;
+}
+
+.segment-element .segment-top {
+    font: 11px Arial;
+    color: #505050;
+    text-align: right;
+    padding: 3px 7px 0 0;
+}
+
+.segment-element .segment-top a {
+    text-decoration: none;
+}
+
+.segment-element .segment-top a.dropdown {
+    padding: 0 17px 0 0;
+    background: url(../../Zeitgeist/images/sort_subtable_desc.png) 100% -2px no-repeat;
+}
+
+.segment-element .segment-footer {
+    background: #eae8e3;
+    border-top: 1px solid #a9a399;
+    text-align: right;
+    padding: 7px 10px;
+    margin: 0 -4px -6px -4px;
+}
+
+.segment-element .segment-footer a.delete {
+    color: red;
+}
+
+.segment-element .segment-footer a {
+    font: 14px Arial;
+    color: #255792;
+    margin: 0 5px;
+    text-decoration: none;
+}
+
+.segment-element .segment-footer button {
+    min-width: 178px;
+    height: 30px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE3OCAzMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjODM3OTZiIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWJhMzkzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNzgiIGhlaWdodD0iMzAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
+    background-image: -moz-linear-gradient(bottom, #83796b 0%, #aba393 100%);
+    background-image: -o-linear-gradient(bottom, #83796b 0%, #aba393 100%);
+    background-image: -webkit-linear-gradient(bottom, #83796b 0%, #aba393 100%);
+    background-image: linear-gradient(bottom, #83796b 0%, #aba393 100%);
+    color: #fff;
+    font-family: "Arial";
+    font-size: 16px;
+    font-weight: bold;
+    text-shadow: 0 1px 0px #251e15;
+    border-radius: 4px 4px 4px 4px;
+    border: none;
+    margin: 0 0 0 15px;
+    background: #978f80\0/;
+}
+
+.segmentationContainer {
+    position: absolute;
+    z-index: 2;
+    background: #f7f7f7;
+    border: 1px solid #e4e5e4;
+    padding: 5px 10px 6px 10px;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    color: #444;
+    font-size: 14px;
+}
+
+.segmentationContainer:hover {
+    background: #f1f0eb;
+    border-color: #a9a399;
+}
+
+.segmentationContainer  > span > b {
+    color: #255792;
+}
+
+.segmentationContainer .submenu {
+    font-size: 13px;
+    min-width: 180px;
+}
+
+.segmentationContainer .submenu ul {
+    color: #5D5342;
+    float: none;
+    font-size: 11px;
+    font-weight: normal;
+    line-height: 20px;
+    list-style: none outside none;
+    margin-left: 5px;
+    margin-right: 0px;
+    padding-top: 10px;
+}
+
+.segmentationContainer .submenu ul li {
+    padding: 2px 0px 1px 6px;
+    margin: 3px 0 0 0;
+    cursor: pointer;
+}
+
+.segmentationContainer .submenu ul li:hover {
+    color: #255792;
+    margin: 0;
+    margin-left: -3px;
+    border: 1px solid #d5d2c6;
+    border-bottom: 2px solid #918f88;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    background: #eae8e3;
+}
+
+.segmentationContainer ul.submenu {
+    padding-top: 5px;
+    display: none;
+    float: left;
+}
+
+.segmentationContainer ul.submenu  > li span.editSegment {
+    display: block;
+    float: right;
+    width: 45px;
+    text-align: center;
+    font-weight: normal;
+}
+
+.segmentationContainer.visible {
+    width: 180px;
+}
+
+.segmentationContainer.visible ul.submenu {
+    display: block;
+    list-style: none;
+}
+
+.segmentationContainer.visible .add_new_segment {
+    display: block;
+    background: url("../images/dashboard_h_bg_hover.png") repeat-x scroll 0 0 #847b6d;
+    border: 0 none;
+    border-radius: 4px 4px 4px 4px;
+    clear: both;
+    color: #FFFFFF;
+    float: right;
+    margin: 12px 0 10px;
+    padding: 3px 10px;
+    text-decoration: none;
+    width: 130px;
+}
+
+.segmentationContainer  > ul.submenu > li {
+    padding: 5px 0;
+    clear: both;
+    cursor: pointer;
+}
+
+span.segmentationTitle {
+    background: url(../../Zeitgeist/images/sort_subtable_desc.png) right center no-repeat !important;
+    padding-right: 20px !important;
+    width: 160px !important;
+    display: block !important;
+    cursor: pointer;
+}
+
+.add_new_segment {
+    display: none;
+}
+
+.segmentList {
+    max-height: 250px;
+}
+
+.jspVerticalBar {
+    background: transparent !important;
+}
+
+/* ADDITIONAL STYLES*/
+body > a.ddmetric {
+    display: block;
+    cursor: move;
+    padding: 1px 0 2px 18px;
+    background: #eae8e3 url(../images/segment-move.png) 100% 50% no-repeat;
+    color: #5d5342;
+    font: normal 11px Arial;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #fff;
+    border: 1px solid #cfccbd;
+    border-top: 1px solid #fff;
+    border-bottom: 1px solid #7c7a72;
+}
+
+.segment-element .segment-nav div > ul > li ul {
+    margin-left: 0;
+}
+
+.segment-element .segment-nav div > ul > li li a,
+.segment-element .segment-nav div > ul > li li a:hover {
+    padding-right: 18px;
+}
+
+.hovered {
+    border-color: #a0a0a0 !important;
+}
+
+a.metric_category {
+    display: block;
+    width: 100%;
+}
+
+.segment-content > h3 {
+    padding-bottom: 7px;
+}
+
+.no_results {
+    margin: 0;
+    position: relative;
+}
+
+.no_results a {
+    cursor: default;
+}
+
+.ui-widget-segmentation {
+    border: 1px solid #D4D4D4 !important;
+}
+
+.clearfix {
+    zoom: 1;
+}
+
+.clearfix:after {
+    display: block;
+    visibility: hidden;
+    height: 0;
+    clear: both;
+    content: ".";
+}
+
+#available_segments a.dropdown {
+    background: url("../../Zeitgeist/images/sort_subtable_desc.png") no-repeat scroll 100% -2px transparent !important;
+    padding: 0 17px 0 0 !important;
+}
+
+.notification {
+    float: left;
+}
+
+.metricValueBlock input {
+    padding: 8px !important;
+}
+
+.ajaxError {
+    border: 0 !important;
+    width: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.segmentationContainer {
+    z-index: 99 !important;
+}
+
+.segment-element {
+    z-index: 999 !important;
+}
+
+#dashboardSettings {
+    z-index: 120;
+}
+
+#periodString {
+    z-index: 121;
+}
+
+.segmentationSelectorContainer {
+    margin: 8px;
+}
+
+.segmentSelected, .segmentSelected:hover {
+    font-weight: bold;
+}
+
+.ui-autocomplete {
+    position: absolute;
+    cursor: default;
+    z-index: 1000 !important;
+}
diff --git a/plugins/SitesManager/SitesManager.php b/plugins/SitesManager/SitesManager.php
index c7ddbb55ba..12c335e3da 100644
--- a/plugins/SitesManager/SitesManager.php
+++ b/plugins/SitesManager/SitesManager.php
@@ -53,7 +53,7 @@ class Piwik_SitesManager extends Piwik_Plugin
      */
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/SitesManager/stylesheets/SitesManager.css";
+        $cssFiles[] = "plugins/SitesManager/stylesheets/SitesManager.less";
         $cssFiles[] = "plugins/Zeitgeist/stylesheets/styles.css";
     }
 
diff --git a/plugins/SitesManager/stylesheets/SitesManager.css b/plugins/SitesManager/stylesheets/SitesManager.less
index 4866c98d94..4866c98d94 100644
--- a/plugins/SitesManager/stylesheets/SitesManager.css
+++ b/plugins/SitesManager/stylesheets/SitesManager.less
diff --git a/plugins/Transitions/Transitions.php b/plugins/Transitions/Transitions.php
index 2eabcbc643..7d48e7dff4 100644
--- a/plugins/Transitions/Transitions.php
+++ b/plugins/Transitions/Transitions.php
@@ -35,7 +35,7 @@ class Piwik_Transitions extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = 'plugins/Transitions/stylesheets/transitions.css';
+        $cssFiles[] = 'plugins/Transitions/stylesheets/transitions.less';
     }
 
     public function getJsFiles(&$jsFiles)
diff --git a/plugins/Transitions/stylesheets/transitions.css b/plugins/Transitions/stylesheets/transitions.less
index 6a02d1659f..6a02d1659f 100644
--- a/plugins/Transitions/stylesheets/transitions.css
+++ b/plugins/Transitions/stylesheets/transitions.less
diff --git a/plugins/UserCountry/UserCountry.php b/plugins/UserCountry/UserCountry.php
index bd74c18f79..24055c1aff 100644
--- a/plugins/UserCountry/UserCountry.php
+++ b/plugins/UserCountry/UserCountry.php
@@ -60,7 +60,7 @@ class Piwik_UserCountry extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/UserCountry/stylesheets/userCountry.css";
+        $cssFiles[] = "plugins/UserCountry/stylesheets/userCountry.less";
     }
 
     public function getJsFiles(&$jsFiles)
diff --git a/plugins/UserCountry/stylesheets/userCountry.css b/plugins/UserCountry/stylesheets/userCountry.less
index 50c26af3a3..50c26af3a3 100755
--- a/plugins/UserCountry/stylesheets/userCountry.css
+++ b/plugins/UserCountry/stylesheets/userCountry.less
diff --git a/plugins/UserCountryMap/UserCountryMap.php b/plugins/UserCountryMap/UserCountryMap.php
index 20cc857961..254182acd8 100644
--- a/plugins/UserCountryMap/UserCountryMap.php
+++ b/plugins/UserCountryMap/UserCountryMap.php
@@ -67,7 +67,7 @@ class Piwik_UserCountryMap extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/UserCountryMap/stylesheets/visitor-map.css";
-        $cssFiles[] = "plugins/UserCountryMap/stylesheets/realtime-map.css";
+        $cssFiles[] = "plugins/UserCountryMap/stylesheets/visitor-map.less";
+        $cssFiles[] = "plugins/UserCountryMap/stylesheets/realtime-map.less";
     }
 }
diff --git a/plugins/UserCountryMap/stylesheets/realtime-map.css b/plugins/UserCountryMap/stylesheets/realtime-map.less
index c9d3aa47b0..c9d3aa47b0 100644
--- a/plugins/UserCountryMap/stylesheets/realtime-map.css
+++ b/plugins/UserCountryMap/stylesheets/realtime-map.less
diff --git a/plugins/UserCountryMap/stylesheets/visitor-map.css b/plugins/UserCountryMap/stylesheets/visitor-map.less
index 534db96fd5..534db96fd5 100644
--- a/plugins/UserCountryMap/stylesheets/visitor-map.css
+++ b/plugins/UserCountryMap/stylesheets/visitor-map.less
diff --git a/plugins/UsersManager/UsersManager.php b/plugins/UsersManager/UsersManager.php
index 59c46b911e..6eb57322a5 100644
--- a/plugins/UsersManager/UsersManager.php
+++ b/plugins/UsersManager/UsersManager.php
@@ -101,7 +101,7 @@ class Piwik_UsersManager extends Piwik_Plugin
      */
     function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/UsersManager/stylesheets/usersManager.css";
+        $cssFiles[] = "plugins/UsersManager/stylesheets/usersManager.less";
     }
 
     /**
diff --git a/plugins/UsersManager/stylesheets/usersManager.css b/plugins/UsersManager/stylesheets/usersManager.less
index 0c3fc1c9f1..0c3fc1c9f1 100644
--- a/plugins/UsersManager/stylesheets/usersManager.css
+++ b/plugins/UsersManager/stylesheets/usersManager.less
diff --git a/plugins/Widgetize/Widgetize.php b/plugins/Widgetize/Widgetize.php
index c8ba33afeb..d9de4d64a3 100644
--- a/plugins/Widgetize/Widgetize.php
+++ b/plugins/Widgetize/Widgetize.php
@@ -56,10 +56,10 @@ class Piwik_Widgetize extends Piwik_Plugin
 
     public function getCssFiles(&$cssFiles)
     {
-        $cssFiles[] = "plugins/Widgetize/stylesheets/widgetize.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/corehome.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/datatable.css";
-        $cssFiles[] = "plugins/CoreHome/stylesheets/cloud.css";
-        $cssFiles[] = "plugins/Dashboard/stylesheets/dashboard.css";
+        $cssFiles[] = "plugins/Widgetize/stylesheets/widgetize.less";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/coreHome.less";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/dataTable.less";
+        $cssFiles[] = "plugins/CoreHome/stylesheets/cloud.less";
+        $cssFiles[] = "plugins/Dashboard/stylesheets/dashboard.less";
     }
 }
diff --git a/plugins/Widgetize/stylesheets/widgetize.css b/plugins/Widgetize/stylesheets/widgetize.less
index bd23615d33..bd23615d33 100644
--- a/plugins/Widgetize/stylesheets/widgetize.css
+++ b/plugins/Widgetize/stylesheets/widgetize.less