From e6f0d4e056a3bd9de85597e7e4b2308f3cb3f489 Mon Sep 17 00:00:00 2001
From: antoine <antoine@lecoati.com>
Date: Wed, 21 May 2014 13:53:00 +0200
Subject: [PATCH] @Umbraco.EnableTuning() and Recursive less file

---
 .../src/less/tuning.panelStyles.less          | 490 +++++------
 .../src/tuning/index.html                     |   3 +-
 .../src/tuning/tuning.controller.js           |  43 +-
 .../src/tuning/tuning.defaultStyle.css        |   1 +
 ...icStyles.less => tuning.defaultStyle.less} | 759 +++++++++++++++++-
 .../src/tuning/tuning.front.js                |  26 +-
 .../src/tuning/tuning.global.js               |   8 +-
 .../src/tuning/tuning.lessParameters.less     | 187 -----
 src/Umbraco.Web.UI/Umbraco/js/tuning.front.js |  26 +-
 src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js |  49 +-
 src/Umbraco.Web.UI/Umbraco/preview/index.html |   5 +-
 .../config/umbracoSettings.Release.config     |   7 +-
 .../config/umbracoSettings.config             |   4 -
 src/Umbraco.Web/Editors/TuningController.cs   | 143 ++--
 src/Umbraco.Web/UmbracoHelper.cs              |  48 ++
 15 files changed, 1234 insertions(+), 565 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css
 rename src/Umbraco.Web.UI.Client/src/tuning/{tuning.dynamicStyles.less => tuning.defaultStyle.less} (66%)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/tuning/tuning.lessParameters.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
index c8ad6b876a..0b0a06133e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
@@ -1,122 +1,123 @@
 html {
-    height: 100%;
+  height: 100%;
 }
 
 body {
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-    background-color: #fafbfd;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  background-color: #fafbfd;
 }
 
 h2 {
-    margin-left: 10px;
-    font-size: 14px;
-    color: #d9d9d9;
-    text-align: center;
+  margin-left: 10px;
+  font-size: 14px;
+  color: #d9d9d9;
+  text-align: center;
 }
 
 .tuning #TuningBg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    width: 275px;
-    height: 100%;
-    padding: 0;
-    margin-left: -275px;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    line-height: 16px;
-    background: #1D1D1D;
-    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-    -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-    box-shadow: 0 0 14px rgba(0, 0, 0, 0);
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 275px;
+  height: 100%;
+  padding: 0;
+  margin-left: -275px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 16px;
+  background: #1D1D1D;
+  -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
+     -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0);
+          box-shadow: 0 0 14px rgba(0, 0, 0, 0);
+  -webkit-transition: all 0.2s ease-in-out;
+     -moz-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
 }
 
 .show {
-    display: block !important;
+  display: block !important;
 }
 
 .wait {
-    margin: 10px 0 0 0;
+  margin: 10px 0 0 0;
 }
 
 .tuning .tuning-wrapper {
-    height: 100%;
-    overflow-y: auto;
-    text-align: left;
+  height: 100%;
+  overflow-y: auto;
+  text-align: left;
 }
 
 .tuning .wrapper-pading {
-    padding: 10px;
+  padding: 10px;
 }
 
 .tuning #TuningBg.open {
-    margin-left: 0;
-    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  margin-left: 0;
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
 
 .tuning .colpick {
-    z-index: 99999999;
+  z-index: 99999999;
 }
 
 .tuning .nav {
-    margin-top: 12px;
-    margin-bottom: 30px;
-    border-bottom: none;
-    text-transform: uppercase;
-    padding:0 10px
+  padding: 0 10px;
+  margin-top: 12px;
+  margin-bottom: 30px;
+  text-transform: uppercase;
+  border-bottom: none;
 }
 
 .tuning .nav-tabs > li > a {
-    color: #d9d9d9 !important;
-    background-color: #1D1D1D !important;
-    border: none;
-    border-bottom: 3px solid transparent;
+  color: #d9d9d9 !important;
+  background-color: #1D1D1D !important;
+  border: none;
+  border-bottom: 3px solid transparent;
 }
 
 .tuning .nav-tabs > li.active > a,
 .tuning .nav-tabs > li.active > a:hover,
 .tuning .nav-tabs > li.active > a:focus {
-    color: #d9d9d9;
-    cursor: default;
-    background-color: #1D1D1D !important;
-    border: none;
-    border-bottom: 3px solid #d9d9d9;
+  color: #d9d9d9;
+  cursor: default;
+  background-color: #1D1D1D !important;
+  border: none;
+  border-bottom: 3px solid #d9d9d9;
 }
 
 .tuning .nav-tabs > li > a:hover {
-    color: #d9d9d9 !important;
-    background-color: #1D1D1D !important;
-    border: none !important;
-    border-bottom: 3px solid #d9d9d9 !important;
+  color: #d9d9d9 !important;
+  background-color: #1D1D1D !important;
+  border: none !important;
+  border-bottom: 3px solid #d9d9d9 !important;
 }
 
 .tuning .nav > li > a:hover,
 .tuning .nav > li > a:focus {
-    color: #d9d9d9 !important;
-    text-decoration: none !important;
-    background-color: #1D1D1D !important;
-    border: none !important;
-    border-bottom: 3px solid #d9d9d9 !important;
+  color: #d9d9d9 !important;
+  text-decoration: none !important;
+  background-color: #1D1D1D !important;
+  border: none !important;
+  border-bottom: 3px solid #d9d9d9 !important;
 }
 
 .tuning .nav-tabs > li > a {
-    border-bottom: 3px solid transparent;
-    /*border-radius: 2px 2px 0 0;*/
+  border-bottom: 3px solid transparent;
+  /*border-radius: 2px 2px 0 0;*/
+
 }
 
-.nav-tabs>li {
-    float: left;
-    margin-bottom: -1px;
-    margin-top: 1px;
+.nav-tabs > li {
+  float: left;
+  margin-top: 1px;
+  margin-bottom: -1px;
 }
 
 .tuning .nav-tabs > li > a {
@@ -139,71 +140,70 @@ h2 {
 /* .panel-heading */
 
 .tab-pane {
-    border-bottom: 1px solid #343434;
+  border-bottom: 1px solid #343434;
 }
 
 .tuning .panel-heading {
-    padding: 0;
+  padding: 0;
 }
 
 .tuning .panel-default > .panel-heading {
-    background-color: #1D1D1D;
-    color: #d9d9d9;
-    border-color: none;
-    border-radius: 0;
-    border-left: 4px transparent solid;
+  color: #d9d9d9;
+  background-color: #1D1D1D;
+  border-left: 4px transparent solid;
+  border-color: none;
+  border-radius: 0;
 }
 
 .tuning .panel-default > .panel-heading:hover,
-.tuning .panel-default.selected > .panel-heading
- {
-    text-decoration: none;
-    background-color: rgba(255, 255, 255, 0.09);
-    border-left: 4px #f57020 solid;
-    color: #d9d9d9;
-    -webkit-transition: all .3s linear;
-    -moz-transition: all .3s linear;
-    transition: all .3s linear;
+.tuning .panel-default.selected > .panel-heading {
+  color: #d9d9d9;
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.09);
+  border-left: 4px #f57020 solid;
+  -webkit-transition: all .3s linear;
+     -moz-transition: all .3s linear;
+          transition: all .3s linear;
 }
 
 .tuning .panel-title > a {
-    display: block;
-    font-size: 13px;
-    line-height: 22px;
-    color: #d9d9d9;
-    cursor: pointer;
-    padding: 5px 0 5px 17px;
+  display: block;
+  padding: 5px 0 5px 17px;
+  font-size: 13px;
+  line-height: 22px;
+  color: #d9d9d9;
+  cursor: pointer;
 }
 
 .tuning .panel-default > .panel-heading h4 {
-    margin: 0 0 0 -4px;
-    border-top: 1px solid #343434;
+  margin: 0 0 0 -4px;
+  border-top: 1px solid #343434;
 }
 
-.panel-group .panel+.panel {
-    margin-top: 0px;
+.panel-group .panel + .panel {
+  margin-top: 0;
 }
 
 .tuning .panel-default.selected {
-    margin:1px 0 0 0;
+  margin: 1px 0 0 0;
 }
 
 .tuning .panel-default.selected > .panel-heading h4 {
-    color: #d9d9d9;
-    border-bottom: 1px solid #6D6D6D; 
-    margin: 0 0 0 0;
-    border-top: none;
+  margin: 0 0 0 0;
+  color: #d9d9d9;
+  border-top: none;
+  border-bottom: 1px solid #6D6D6D;
 }
 
 .tuning .panel-default.selected > .panel-heading h4 a {
-    padding: 5px 0 5px 13px;
+  padding: 5px 0 5px 13px;
 }
 
 /* panel */
 
 .tuning .panel-default {
   background-color: #1D1D1D;
-  border: 0px solid rgba(217, 217, 217, 0.5);
+  border: 0 solid rgba(217, 217, 217, 0.5);
   border-radius: 0;
 }
 
@@ -220,11 +220,11 @@ h2 {
 .tuning .btn-default-save:focus {
   float: right;
   margin-top: 20px;
+  margin-right: 20px;
   color: #fff;
   background-color: #53a93f;
   border-color: #ccc;
   border-radius: 2px;
-  margin-right: 20px;
 }
 
 .tuning .btn-default-save:hover {
@@ -232,6 +232,22 @@ h2 {
   background-color: rgba(83, 169, 63, 0.81);
 }
 
+.tuning .btn-default-delete,
+.tuning .btn-default-delete:focus {
+  float: right;
+  margin-top: 20px;
+  margin-right: 10px;
+  color: #343434;
+  background: #e4e4e4;
+  border-color: #ccc;
+  border-radius: 2px;
+}
+
+.tuning .btn-default-delete:hover {
+  color: #343434;
+  background-color: rgba(228, 228, 228, 0.65);
+}
+
 .tuning .field-title {
   float: left;
   margin-right: 10px;
@@ -338,38 +354,38 @@ h2 {
 }
 
 .tuning .imagePickerPreview {
-    float: left;
-    width: 50px;
-    height: 30px;
-    clear: both;
-    color: rgba(217, 217, 217, 0.5);
-    text-align: center;
-    cursor: pointer;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    border: 1px solid rgba(217, 217, 217, 0.5);
+  float: left;
+  width: 50px;
+  height: 30px;
+  clear: both;
+  color: rgba(217, 217, 217, 0.5);
+  text-align: center;
+  cursor: pointer;
+  -webkit-background-size: cover;
+     -moz-background-size: cover;
+       -o-background-size: cover;
+          background-size: cover;
+  border: 1px solid rgba(217, 217, 217, 0.5);
 }
 
 .tuning .imagePickerPreview:hover {
-    color: #d9d9d9;
-    border: 1px solid #d9d9d9;
+  color: #d9d9d9;
+  border: 1px solid #d9d9d9;
 }
 
 .tuning .imagePickerPreview i {
-    font-size: 14px;
-    line-height: 30px;
-    cursor: pointer;
+  font-size: 14px;
+  line-height: 30px;
+  cursor: pointer;
 }
 
 .tuning .colorPickerDelete {
-    float: left;
-    margin-top: 5px;
-    margin-left: 3px;
-    font-size: 10px;
-    color: rgba(217, 217, 217, 0.5);
-    cursor: pointer;
+  float: left;
+  margin-top: 5px;
+  margin-left: 3px;
+  font-size: 10px;
+  color: rgba(217, 217, 217, 0.5);
+  cursor: pointer;
 }
 
 .tuning .colorPickerDelete:hover {
@@ -377,9 +393,9 @@ h2 {
 }
 
 .tuning .tuning-tools {
-    position: absolute;
-    right: -28px;
-    margin: 25px 0 0 0;
+  position: absolute;
+  right: -28px;
+  margin: 25px 0 0 0;
 }
 
 .tuning #TuningBg.open .tuning-tools {
@@ -410,125 +426,125 @@ h2 {
 /* image picker */
 
 .tuningImagePicker {
-    list-style: none;
-    margin-top: 10px;
-    padding: 0;
-    height: 500px;
-    overflow: auto;
-    text-align: left;
-}   
+  height: 500px;
+  padding: 0;
+  margin-top: 10px;
+  overflow: auto;
+  text-align: left;
+  list-style: none;
+}
 
 .tuningImagePicker ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    margin-left: 17px;
-}   
+  padding: 0;
+  margin: 0;
+  margin-left: 17px;
+  list-style: none;
+}
 
 .tuningImagePicker li {
-    display: inline-block;
-    margin-bottom: 10px;
+  display: inline-block;
+  margin-bottom: 10px;
 }
-   
+
 .tuningImagePicker ul.media-items li {
-    margin-right: 17px;
+  margin-right: 17px;
 }
 
 .tuningImagePicker .media-preview {
-    border: 2px solid #F3F2F2;
-    display: inline-block;
-    cursor: pointer;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    width: 110px;
-    height: 60px;
-    position: relative;
+  position: relative;
+  display: inline-block;
+  width: 110px;
+  height: 60px;
+  cursor: pointer;
+  -webkit-background-size: cover;
+     -moz-background-size: cover;
+       -o-background-size: cover;
+          background-size: cover;
+  border: 2px solid #F3F2F2;
 }
 
 .tuningImagePicker .media-preview .folder {
-    font-size: 40px;
-    color: gainsboro;
-    top: -5px;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    text-align: center;
+  position: absolute;
+  top: -5px;
+  left: 0;
+  width: 100%;
+  font-size: 40px;
+  color: gainsboro;
+  text-align: center;
 }
 
 .tuningImagePicker .media-preview .folder-name {
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-    font-size: 13px;
-    color: grey;
-    margin-top: -5px;
-    line-height: 0;
-
+  margin-top: -5px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 0;
+  color: grey;
 }
 
-.tuningImagePicker .media-preview:hover, .media-preview.selected {
-    border: 2px solid #84B8F0;
+.tuningImagePicker .media-preview:hover,
+.media-preview.selected {
+  border: 2px solid #84B8F0;
 }
 
 .bodyTuningImagePicker {
-    padding: 10px 20px 0px 15px;
+  padding: 10px 20px 0 15px;
 }
-   
+
 .tuningImagePicker .modal-dialog {
-    width: 618px;
-    font-weight:normal
+  width: 618px;
+  font-weight: normal;
 }
 
 .bodyTuningImagePicker .breadcrumb {
-    font-size: 16px;
-    margin-top: 4px;
-    margin-bottom: 10px;
-    text-align: left;
+  margin-top: 4px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  text-align: left;
 }
 
 .bodyTuningImagePicker .breadcrumb > li {
-    display: inline;
+  display: inline;
 }
 
 .bodyTuningImagePicker .breadcrumb > li a {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .bodyTuningImagePicker .breadcrumb input {
-    padding: 0;
-    margin: -4px -4px;
+  padding: 0;
+  margin: -4px -4px;
 }
 
 .bodyTuningImagePicker .fileinput-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 19px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 19px;
 }
 
 .bodyTuningImagePicker input.input-media {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0;
-    font-size: 23px;
-    cursor: pointer;
-    opacity: 0;
-    filter: alpha(opacity=0);
-    transform: translate(-300px,0) scale(4);
-    direction: ltr;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  font-size: 23px;
+  cursor: pointer;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  transform: translate(-300px, 0) scale(4);
+  direction: ltr;
 }
 
-.bodyTuningImagePicker .breadcrumb a.disabled, .bodyTuningImagePicker .breadcrumb a.disabled:hover {
-    color: grey;
-    text-decoration: none;
-    cursor: default;
+.bodyTuningImagePicker .breadcrumb a.disabled,
+.bodyTuningImagePicker .breadcrumb a.disabled:hover {
+  color: grey;
+  text-decoration: none;
+  cursor: default;
 }
 
-
 .tuningImagePicker h3 {
-    color: rgba(85, 85, 85, 1);
-    font-size: 18px;
+  font-size: 18px;
+  color: #555555;
 }
 
 /* font picker */
@@ -627,8 +643,8 @@ h2 {
 }
 
 .laptop {
-  width: 1366px;
-  height: 768px;
+  width: 1024px;
+  height: 740px;
 }
 
 .iPad-portrait {
@@ -688,15 +704,15 @@ ul.preview-device {
 }
 
 ul.preview-device li {
-    display: block;
-    overflow: hidden;
-    clear: both;
-    text-align: center;
-    cursor: pointer;
-    border-left: 4px solid transparent;
-    -webkit-transition: all .3s linear;
-    -moz-transition: all .3s linear;
-    transition: all .3s linear;
+  display: block;
+  overflow: hidden;
+  clear: both;
+  text-align: center;
+  cursor: pointer;
+  border-left: 4px solid transparent;
+  -webkit-transition: all .3s linear;
+     -moz-transition: all .3s linear;
+          transition: all .3s linear;
 }
 
 ul.preview-device li div {
@@ -724,33 +740,33 @@ ul.preview-device li span {
 /******* font-face *******/
 
 #speechbubble {
-    display:none;
-    position: absolute;
-    right: 0;
-    bottom: 40px;
-    left: 0;
-    z-index: 1000;
-    padding: 0;
-    margin: auto;
-    background: none;
-    border: none;
-    border-bottom: none;
-    margin-left: 300px;
-    text-align: left;
+  position: absolute;
+  right: 0;
+  bottom: 40px;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  padding: 0;
+  margin: auto;
+  margin-left: 300px;
+  text-align: left;
+  background: none;
+  border: none;
+  border-bottom: none;
 }
 
 #speechbubble p {
-    position: relative;
-    padding: 8px 30px 8px 20px;
-    margin: auto;
-    margin-top: 5px;
-    font-size: 12px;
-    text-shadow: none;
-    border: none;
-    border-radius: 5px;
-    color: #ffffff;
-    background-color: #46a546;
-    border-color: transparent;
+  position: relative;
+  padding: 8px 30px 8px 20px;
+  margin: auto;
+  margin-top: 5px;
+  font-size: 12px;
+  color: #ffffff;
+  text-shadow: none;
+  background-color: #46a546;
+  border: none;
+  border-color: transparent;
+  border-radius: 5px;
 }
 
 /******* font-face *******/
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/tuning/index.html
index 1464862ce4..25ee475086 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/index.html
+++ b/src/Umbraco.Web.UI.Client/src/tuning/index.html
@@ -16,7 +16,7 @@
         <iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
     </div>
 
-    <div class="tuning" style="display:none" ng-class="{show:frameLoaded}">
+    <div class="tuning" style="display:none" ng-class="{show:frameFirstLoaded}">
 
         <div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">
 
@@ -147,6 +147,7 @@
                     </tabset>
 
                     <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
+                    <button class="btn btn-default btn-default-delete" ng-click="deleteTuning()">reset</button>
 
                 </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
index 6f7dc8ab54..5d9fd6cfa5 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
@@ -10,7 +10,9 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 .controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout, $location) {
 
     $scope.isOpen = false;
-    $scope.frameLoaded = false;
+    $scope.frameLoaded = 0;
+    $scope.frameFirstLoaded = false;
+    $scope.tuningParameterUrl = "";
     $scope.schemaFocus = "body";
     $scope.settingIsOpen = 'previewDevice';
     $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right'];
@@ -23,7 +25,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
     $scope.pageId = "../dialogs/Preview.aspx?id=" + $location.search().id;
     $scope.devices = [
         { name: "desktop", css: "desktop", icon: "icon-display" },
-        { name: "laptop - 1366px", css: "laptop border", icon: "icon-laptop" },
+        { name: "laptop - 1024px", css: "laptop border", icon: "icon-laptop" },
         { name: "iPad portrait - 768px", css: "iPad-portrait border", icon: "icon-ipad" },
         { name: "iPad landscape - 1024px", css: "iPad-landscape border", icon: "icon-ipad flip" },
         { name: "smartphone portrait - 480px", css: "smartphone-portrait border", icon: "icon-iphone" },
@@ -33,7 +35,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 
     // Load parameters from GetLessParameters and init data of the tuning config
     var initTuning = function () {
-        $http.get('/Umbraco/Api/tuning/GetLessParameters')
+
+        console.info("url " + $scope.tuningParameterUrl);
+
+        $http.get('/Umbraco/Api/tuning/Load', { params: { param: $scope.tuningParameterUrl } })
             .success(function (data) {
 
                 $.each(tuningConfig.categories, function (indexCategory, category) {
@@ -63,6 +68,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
                 $scope.tuningModel = tuningConfig;
                 $scope.tuningPalette = tuningPalette;
 
+                if ($scope.settingIsOpen == "setting") {
+                    openIntelTuning();
+                }
+
             });
     }
 
@@ -164,14 +173,14 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
             })
         });
 
-        var resultParameters = { result: parameters.join("") };
+        var resultParameters = { result: parameters.join(""), pageId: $location.search().id };
         var transform = function (result) {
             return $.param(result);
         }
 
         $('.btn-default-save').attr("disabled", true);
         $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
-        $http.post('/Umbraco/Api/tuning/PostLessParameters', resultParameters, {
+        $http.post('/Umbraco/Api/tuning/Save', resultParameters, {
             headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
             transformRequest: transform
         })
@@ -182,6 +191,19 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 
     }
 
+    // Delete current page tuning
+    $scope.deleteTuning = function () {
+
+        $('.btn-default-delete').attr("disabled", true);
+        $http.get('/Umbraco/Api/tuning/Delete', { params: { pageId: $location.search().id } })
+        .success(function (data) {
+            $scope.frameLoaded++;
+            $scope.pageId = $scope.pageId + "&n=123456";
+            $('.btn-default-delete').attr("disabled", false);
+        })
+
+    }
+
     // Toggle panel
     $scope.togglePanel = function () {
         if ($scope.isOpen) {
@@ -277,18 +299,21 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
         $scope.googleFontFamilies = data;
     })
 
+    // watch framLoaded
     $scope.$watch("frameLoaded", function () {
-        if ($scope.frameLoaded) {
-            console.info("init tuning");
+        if ($scope.frameLoaded > 0) {
+            initTuning();
             $scope.$watch('tuningModel', function () {
                 refreshtuning();
             }, true);
-            $scope.togglePanel();
         }
     }, true)
 
+    // first panel init
     initTuning();
-    $("#tuningPanel").show();
+
+    // toggle panel
+    $scope.togglePanel();
 
 })
 
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css
new file mode 100644
index 0000000000..8df19cf3d3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css
@@ -0,0 +1 @@
+@IMPORT url('http://fonts.googleapis.com/css?family=Open Sans:300');h1,h2,h3,h4,h5,h6{text-rendering:optimizelegibility}h1{font-weight:300}.clear-container .container{padding-right:0px;padding-left:0px}.big,.medium{display:block}@media (max-width:767px){.hidden-phone{display:none !important}}@media (max-width:979px) and (min-width:768px){.hidden-tablet{display:none !important}}.wrapper{transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto}.social-row,logo-row,nav-row{padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto;width:100%;overflow:hidden}.wrapper.content,.wrapper.footer{overflow:hidden}.logo{max-width:350px;font-size:0px;margin:15px 0px 15px 0;float:left;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.logo img{max-width:100%}.navbar-default .navbar-nav>li>a.fa,.navbar-default .navbar-nav>li>a.fa:focus{font-family:FontAwesome}.navbar{background:none;border:none;min-height:0px;margin-bottom:0px;border-radius:0px;-webkit-border-radius:0px;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.navbar-default .navbar-collapse{border:none;max-height:none;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .dropdown-menu>li>a:hover{background:none}.navbar-default .dropdown-menu{border:none;margin:0;padding:0;min-width:initial}.navbar-default .nav>li>a{padding:0;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.navbar-default .dropdown-menu>li>a{padding:0}.navbar-default .dropdown-menu>li>a{padding:10px 10px 10px 10px}.navbar-default .navbar-nav>li>a{padding:0px 10px 0px 10px}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{background:none}@media (min-width:768px){.navbar-default .navbar-nav>li{margin-left:5px}.navbar-nav>li:first-child{margin-left:0px}.navbar-default .dropdown-menu{margin:0;padding:0}.navbar-collapse{padding-right:0px;padding-left:0px}}@media (max-width:768px){.navbar-default .navbar-nav li{margin-bottom:3px}.navbar-default .navbar-nav .open .dropdown-menu{-webkit-border-radius:0px;border-radius:0px;margin-top:3px}.navbar-default .navbar-nav{margin:0 -15px}.navbar-default .navbar-collapse{margin-left:-15px;margin-right:-15px}.navbar-default .navbar-nav>li>a,.navbar-default .dropdown-menu>li>a{padding:10px 10px 10px 10px}.navbar-default .navbar-nav .open .dropdown-menu>li>a{padding:10px 0px 10px 25px}.navbar-toggle{margin:15px 0 15px 0}}.social-bar{list-style:none;margin-top:0;padding:0 15px 0 10px;margin:0px -15px 0px -15px;line-height:0px;font-size:0px}.social-bar li{display:inline-block;margin-left:5px}.social-bar li a{cursor:pointer;padding:0 2px 0 2px}.social-bar li a:hover{text-decoration:none}.social-bar li a span{display:none}#nav-search-form{padding:15px}#nav-search-form button{padding:5px;-webkit-border-radius:2px;border-radius:2px;background:transparent;border:none}#nav-search-form a,#nav-search-form button{margin-left:5px}#nav-search-form input{padding:2px;-webkit-border-radius:2px;border-radius:2px}@media (min-width:768px){#nav-search-form{margin-left:-203px;width:238px}}@media (max-width:768px){#nav-search-form input{width:93%}}.usky-grid-cell{margin-top:30px;margin-bottom:30px;overflow:hidden}.usky-grid-row{margin-left:0px;margin-right:0px}.usky-grid-full-size .usky-grid-row:first-child{margin-top:0}.usky-grid-full-size .usky-grid-row:last-child{margin-bottom:0}.usky-grid-full-size .usky-grid-cell{margin-top:0px;margin-bottom:0px}.usky-grid-skip-top-margin{margin-top:0px}.usky-grid-skip-bottom-margin{margin-bottom:0px}.usky-grid-column{padding-right:0px;padding-left:0px}.jumbotron{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;background-color:#e3e1e1;margin-bottom:0px}.container .jumbotron{padding:15px}.thumbnail{margin-bottom:0px;min-height:400px}.thumbnail-container{margin:0 -15px}.thumbnail .caption{padding:0 10px 10px 10px;color:inherit}.thumbnail>a>img{display:block;height:auto;max-width:100%;margin-right:auto;margin-left:auto}@media (max-width:991px){.thumbnail-container .col-md-3{margin:30px 0 0 0}.thumbnail-container .col-md-3:first-child{margin:0 0 0 0}}.search-results-list{margin:0;padding:0;list-style:none}.search-results-list li p{margin-left:20px}.search-results-list i{margin-right:10px}.post-list img.post-image,.post-detail img.post-image{display:block;height:auto;max-width:100%;margin-right:auto;margin-left:auto}.post-list .meta{margin-bottom:10px}.post-list .meta .sep{margin:0 3px 0 3px}.post-list .meta .fn{margin:0 0 0 3px}.blog-list-widget{margin:0;padding:0;list-style:none}.blog-list-widget i{margin-right:10px}.post-detail{padding:0 15px 0 15px}.post-detail .meta{margin:0 0 20px 0}.blog-nav .fa-angle-double-left{float:left}.blog-nav .fa-angle-double-right{float:right}.blog-nav{margin:-15px 0 30px 0}.blog-nav a{font-size:28px}.blog-nav a:hover{text-decoration:none}.highlighted{padding:0 4px 2px}.button{border:0;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:12px 15px 14px;margin-top:10px;display:inline-block;margin-bottom:0;font-size:14px;text-align:center;vertical-align:middle;cursor:pointer}.copyright{text-align:center}.google-maps{height:400px;margin:0 0 30px}#contact-form .error{border:1px solid red}#contact-form .success{display:none}.go-top{position:fixed;bottom:0.5em;right:0.5em;text-decoration:none;color:white;background-color:rgba(0,0,0,0.3);font-size:30px;padding:0.1em 0.3em 0.1em;display:none;border-radius:3px;z-index:500;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.go-top:hover{background-color:rgba(0,0,0,0.6)}body{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:14px;color:'';line-height:18px}h1{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:24px;color:#e67e22;margin-top:20px;margin-bottom:20px;line-height:26px}h2{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:18px;color:#e67e22;margin-top:5px;margin-bottom:10px;line-height:18px}h3{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:18px;color:#e67e22;margin-top:10px;margin-bottom:10px;line-height:16px}h4{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:14px;color:'';margin-top:5px;margin-bottom:10px;line-height:14px}h5{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:12px;color:'';margin-top:5px;margin-bottom:10px;line-height:12px}h6{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:12px;color:'';margin-top:5px;margin-bottom:10px;line-height:12px}.medium{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:18px;color:'';margin-top:5px;margin-bottom:10px;line-height:24px}.highlighted{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';color:'';background-color:#e67e22}.big{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:26px;color:#e67e22;margin-top:5px;margin-bottom:15px;line-height:28px}.button{color:rgba(255,255,255,0.92);background-color:#e67e22;font-size:24px;line-height:24px;padding:10px;font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:''}.button:hover{color:rgba(255,255,255,0.55);background-color:rgba(230,126,34,0.74)}.color2{color:#e67e22}.color3{color:rgba(253,251,251,0.91)}.color4{color:#aaa}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{font-size:18px;font-family:Open Sans;font-weight:300;font-style:''}a{color:#e67e22}a:hover{color:rgba(230,126,34,0.84)}body{background-color:#dfdfdf;background:-moz-linear-gradient(top,#dfdfdf 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#dfdfdf),color-stop(100%,''));background:-webkit-linear-gradient(top,#dfdfdf 41%,'' 100%);background:-o-linear-gradient(top,#dfdfdf 41%,'' 100%);background:-ms-linear-gradient(top,#dfdfdf 41%,'' 100%);background:linear-gradient(to bottom,#dfdfdf 41%,'' 100%);background-image:'';background-position:top center;background-repeat:repeat;background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.content{background-color:#f6f6f6;background:-moz-linear-gradient(top,#f6f6f6 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#f6f6f6),color-stop(100%,''));background:-webkit-linear-gradient(top,#f6f6f6 41%,'' 100%);background:-o-linear-gradient(top,#f6f6f6 41%,'' 100%);background:-ms-linear-gradient(top,#f6f6f6 41%,'' 100%);background:linear-gradient(to bottom,#f6f6f6 41%,'' 100%);background-image:'';background-position:'';background-repeat:'';background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.header{background-color:#333;background:-moz-linear-gradient(top,#333 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#333),color-stop(100%,''));background:-webkit-linear-gradient(top,#333 41%,'' 100%);background:-o-linear-gradient(top,#333 41%,'' 100%);background:-ms-linear-gradient(top,#333 41%,'' 100%);background:linear-gradient(to bottom,#333 41%,'' 100%);background-image:'';background-position:'';background-repeat:'';background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.footer{background-color:#333;background:-moz-linear-gradient(top,#333 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#333),color-stop(100%,''));background:-webkit-linear-gradient(top,#333 41%,'' 100%);background:-o-linear-gradient(top,#333 41%,'' 100%);background:-ms-linear-gradient(top,#333 41%,'' 100%);background:linear-gradient(to bottom,#333 41%,'' 100%);background-image:'';background-position:center;background-repeat:'';background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.header{border-top:5px solid #e67e22;border-bottom:0px solid #e67e22}@media (min-width:768px){.wrapper{width:720px}.wrapper .container{width:100%}.wrapper.header,.wrapper.content,.wrapper.footer{-webkit-box-shadow:0 0 21px rgba(0,0,0,0.5);-moz-box-shadow:0 0 21px rgba(0,0,0,0.5);box-shadow:0 0 21px rgba(0,0,0,0.5)}.wrapper.header{margin-top:21px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0px;border-top-right-radius:0px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;min-height:0px}.wrapper.content{margin-top:0px}.wrapper.footer{margin-top:0px;margin-bottom:20px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;-webkit-border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-topleft:0;border-top-right-radius:0;border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;padding-bottom:0px}}@media (min-width:992px){.wrapper{width:940px}}@media (min-width:1200px){.wrapper{width:1140px}}.social-row{background-color:rgba(255,255,255,0.08);border-top:0px solid #e67e22;border-bottom:0px solid #e67e22}.social-bar{float:right}.contact-text{color:rgba(255,255,255,0.6);font-size:12px;line-height:34px;float:left;font-family:Arial,Helvetica;font-weight:normal;font-style:normal}.social-bar li a{color:rgba(255,255,255,0.6);font-size:12px;line-height:34px}.social-bar li a:hover{color:#fff}@media (min-width:768px){.social-row{}.social-container{background-color:rgba(255,255,255,0.08);margin-top:0px}}.nav-row{background-color:''}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:rgba(255,255,255,0.84)}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{background-color:#e67e22;color:#fff}.logo{}@media (min-width:768px){.nav-row{margin-top:-39px}.logo{margin-top:14px}.navbar{clear:both;margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}.navbar-default .navbar-nav{float:right}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus{border-top:0px solid transparent;border-bottom:0px solid transparent;line-height:43px}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{border-top:0px solid #e67e22;border-bottom:0px solid #e67e22;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}}.navbar-default .navbar-nav>.dropdown>a .caret,.navbar-default .navbar-nav>.dropdown>a:focus .caret{border-top-color:rgba(255,255,255,0.84);border-bottom-color:rgba(255,255,255,0.84)}.navbar-default .navbar-nav>.dropdown.open>a .caret,.navbar-default .navbar-nav>.dropdown>a:hover .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-default .dropdown-menu .divider{background-color:#e67e22}.navbar-default .dropdown-menu>li>a{color:rgba(255,255,255,0.84)}.navbar-default .dropdown-menu>li>a:hover{background-color:#e67e22;color:#fff}.navbar-default .navbar-nav>li>.dropdown-menu,language{background-color:rgba(97,97,97,0.85)}@media (min-width:768px){.navbar-default .navbar-nav>li>.dropdown-menu{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:0px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:0px;border-top-right-radius:0;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:0px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;padding-top:5px;padding-bottom:5px}}#nav-search-form a,#nav-search-form button{color:rgba(255,255,255,0.84)}#nav-search-form input{border:1px solid rgba(255,255,255,0.84)}.navbar-default .navbar-toggle{border-color:rgba(255,255,255,0.84);float:right}.navbar-default .navbar-toggle .icon-bar{background-color:rgba(255,255,255,0.84)}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#e67e22}.jumbotron{min-height:0px;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border:0px solid ''}.container .jumbotron{-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;background-color:''}.thumbnail{min-height:0px;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border:0px solid '';background-color:''}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.dynamicStyles.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less
similarity index 66%
rename from src/Umbraco.Web.UI.Client/src/tuning/tuning.dynamicStyles.less
rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less
index 11d20b7a87..12745d5cb5 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.dynamicStyles.less
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less
@@ -1,13 +1,719 @@
-
-/***************************************************************/
-/* IMPORTE LESS PARAMETERS */
-/***************************************************************/
+/************************************************************************/
+/* Google Fonts region */
+/************************************************************************/
+/***start-gf***/
+@import url('http://fonts.googleapis.com/css?family=Open Sans:300');
+/***end-gf***/
+/************************************************************************/
 
-@import "/Umbraco/assets/less/tuning.lessParameters.less";
+/************************************************************************/
+/* Less parameters */
+/************************************************************************/
+/***start-lessParam***/
+@backgroundBodyColor:rgb(223, 223, 223);
+@backgroundBodyGradientColor:'';
+@backgroundBodyImageOrPattern:'';
+@backgroundBodyPosition:top center;
+@backgroundBodyCover:true;
+@backgroundBodyRepeat:repeat;
+@backgroundBodyAttachment:fixed;
+@backgroundMainColumnColor:rgb(246, 246, 246);
+@backgroundMainColumnGradientColor:'';
+@backgroundMainColumnImageOrPattern:'';
+@backgroundMainColumnPosition:'';
+@backgroundMainColumnCover:true;
+@backgroundMainColumnRepeat:'';
+@backgroundMainColumnAttachment:fixed;
+@backgroundHeaderColor:rgb(51, 51, 51);
+@backgroundHeaderGradientColor:'';
+@backgroundHeaderImageOrPattern:'';
+@backgroundHeaderPosition:'';
+@backgroundHeaderCover:true;
+@backgroundHeaderRepeat:'';
+@backgroundHeaderAttachment:fixed;
+@backgroundFooterColor:rgb(51, 51, 51);
+@backgroundFooterGradientColor:'';
+@backgroundFooterImageOrPattern:'';
+@backgroundFooterPosition:center;
+@backgroundFooterCover:true;
+@backgroundFooterRepeat:'';
+@backgroundFooterAttachment:fixed;
+@stylingMainColumnBoxed:boxed;
+@stylingHeaderTopMargin:21;
+@stylingMainColumnTopMargin:0;
+@stylingFooterTopMargin:0;
+@stylingFooterBottompMargin:20;
+@stylingMainColumnRadius:0;
+@stylingMainColumnShadow:21;
+@stylingHeaderTopBorderSize:5;
+@stylingHeaderBottomBorderSize:0;
+@stylingHeaderTopBorderColor:rgb(230, 126, 34);
+@stylingHeaderBottomBorderColor:rgb(230, 126, 34);
+@stylingHeaderMinHeight:0;
+@stylingHeaderLogoTopMargin:14;
+@stylingNavDisplay:block-right;
+@stylingNavBackgroundColor:'';
+@stylingNavBackgroundDdl:rgba(97, 97, 97, 0.85);
+@stylingNavBackgroundActiveColor:rgb(230, 126, 34);
+@stylingNavMarginTop:-39;
+@stylingNavRadius:5;
+@stylingNavRadiusOnlyTop:true;
+@stylingNavItemTopBorderActiveSize:0;
+@stylingNavItemBottomBorderActiveSize:0;
+@stylingNavItemTopBorderActiveColor:rgb(230, 126, 34);
+@stylingNavItemBottomBorderActiveColor:rgb(230, 126, 34);
+@stySocialDisplay:block-right;
+@stySocialBackgroundColor:rgba(255, 255, 255, 0.08);
+@stySocialTopMargin:0;
+@stySocialBorderTopSize:0;
+@stySocialBorderBottomSize:0;
+@stySocialBorderTopColor:rgb(230, 126, 34);
+@stySocialBorderBottomColor:rgb(230, 126, 34);
+@stylingBoxesBackgroundColor:'';
+@stylingBoxesMinHeight:0;
+@stylingBoxesRadius:0;
+@stylingBoxesBorderSize:0;
+@stylingBoxesBorderColor:'';
+@stylingThumbnailsBackgroundColor:'';
+@stylingThumbnailsMinHeight:0;
+@stylingThumbnailsRadius:0;
+@stylingThumbnailsBorderSize:0;
+@stylingThumbnailsBorderColor:'';
+@FontBodyColor:'';
+@FontBodySize:14;
+@FontBodyLineHeight:18;
+@FontBodyFamily:Open Sans;
+@FontBodyFamily_weight:300;
+@FontBodyFamily_style:'';
+@FontBodyFamily_type:google;
+@FontNavFontColor:rgba(255, 255, 255, 0.84);
+@FontNavFontActiveColor:rgb(255, 255, 255);
+@FontNavSize:18;
+@FontNavLineHeight:43;
+@FontNavFamily:Open Sans;
+@FontNavFamily_weight:300;
+@FontNavFamily_style:'';
+@FontNavFamily_type:google;
+@FontSocialFontColor:rgba(255, 255, 255, 0.6);
+@FontSocialFontColorHover:rgb(255, 255, 255);
+@FontSocialFontSize:12;
+@FontSocialLineHeight:34;
+@FontSocialFamily:Arial, Helvetica;
+@FontSocialFamily_weight:normal;
+@FontSocialFamily_style:normal;
+@FontSocialFamily_type:safe;
+@FontH1Color:rgb(230, 126, 34);
+@FontH1Size:24;
+@FontH1LineHeight:26;
+@FontH1TopMargin:20;
+@FontH1BottomMargin:20;
+@FontH1Family:Open Sans;
+@FontH1Family_weight:300;
+@FontH1Family_style:'';
+@FontH1Family_type:google;
+@FontH2Color:rgb(230, 126, 34);
+@FontH2Size:18;
+@FontH2LineHeight:18;
+@FontH2TopMargin:5;
+@FontH2BottomMargin:10;
+@FontH2Family:Open Sans;
+@FontH2Family_weight:300;
+@FontH2Family_style:'';
+@FontH2Family_type:google;
+@FontH3Color:rgb(230, 126, 34);
+@FontH3Size:18;
+@FontH3LineHeight:16;
+@FontH3TopMargin:10;
+@FontH3BottomMargin:10;
+@FontH3Family:Open Sans;
+@FontH3Family_weight:300;
+@FontH3Family_style:'';
+@FontH3Family_type:google;
+@FontH4Color:'';
+@FontH4Size:14;
+@FontH4LineHeight:14;
+@FontH4TopMargin:5;
+@FontH4BottomMargin:10;
+@FontH4Family:Open Sans;
+@FontH4Family_weight:300;
+@FontH4Family_style:'';
+@FontH4Family_type:google;
+@FontH5Color:'';
+@FontH5Size:12;
+@FontH5LineHeight:12;
+@FontH5TopMargin:5;
+@FontH5BottomMargin:10;
+@FontH5Family:Open Sans;
+@FontH5Family_weight:300;
+@FontH5Family_style:'';
+@FontH5Family_type:google;
+@FontH6Color:'';
+@FontH6Size:12;
+@FontH6LineHeight:12;
+@FontH6TopMargin:5;
+@FontH6BottomMargin:10;
+@FontH6Family:Open Sans;
+@FontH6Family_weight:300;
+@FontH6Family_style:'';
+@FontH6Family_type:google;
+@FontMediumColor:'';
+@FontMediumSize:18;
+@FontMediumLineHeight:24;
+@FontMediumTopMargin:5;
+@FontMediumBottomMargin:10;
+@FontMediumFamily:Open Sans;
+@FontMediumFamily_weight:300;
+@FontMediumFamily_style:'';
+@FontMediumFamily_type:google;
+@FontHighlightedColor:'';
+@FontHighlightedBackgroundColor:rgb(230, 126, 34);
+@FontHighlightedFamily:Open Sans;
+@FontHighlightedFamily_weight:300;
+@FontHighlightedFamily_style:'';
+@FontHighlightedFamily_type:google;
+@FontBigColor:rgb(230, 126, 34);
+@FontBigSize:26;
+@FontBigLineHeight:28;
+@FontBigTopMargin:5;
+@FontBigBottomMargin:15;
+@FontBigFamily:Open Sans;
+@FontBigFamily_weight:300;
+@FontBigFamily_style:'';
+@FontBigFamily_type:google;
+@FontButtonColor:rgba(255, 255, 255, 0.92);
+@FontButtonBackgroundColor:rgb(230, 126, 34);
+@FontButtonColorHover:rgba(255, 255, 255, 0.55);
+@FontButtonBackgroundColorHover:rgba(230, 126, 34, 0.74);
+@FontButtonSize:24;
+@FontButtonLineHeight:24;
+@FontButtonPadding:10;
+@FontButtonFamily:Open Sans;
+@FontButtonFamily_weight:300;
+@FontButtonFamily_style:'';
+@FontButtonFamily_type:google;
+@FontColor2Color:rgb(230, 126, 34);
+@FontColor3Color:rgba(253, 251, 251, 0.91);
+@FontColor4Color:rgb(170, 170, 170);
+@FontLinkColor:rgb(230, 126, 34);
+@FontLinkColorHover:rgba(230, 126, 34, 0.84);
+/***end-lessParam***/
+/************************************************************************/
 
-/***************************************************************/
-/* FONT */
-/***************************************************************/
+/************************************************************************/
+/* Base Style */
+/************************************************************************/
+/***start-baseStyle***/
+
+/* General */
+
+h1, h2, h3, h4, h5, h6 {
+    text-rendering: optimizelegibility;
+}
+
+h1 {
+    font-weight:300;
+}
+
+.clear-container .container {
+    padding-right: 0px;
+    padding-left: 0px;
+}
+
+.big, .medium {
+    display:block;
+}
+
+@media (max-width: 767px) {
+    .hidden-phone {
+        display: none !important;
+    }
+}
+
+@media (max-width: 979px) and (min-width: 768px) {
+    .hidden-tablet {
+        display: none !important;
+    }
+}
+
+
+/* Wrapper for wide or boxed view */
+
+.wrapper {
+
+    transition: all .20s ease-in-out;
+    -moz-transition: all .20s ease-in-out;
+    -webkit-transition: all .20s ease-in-out;
+
+    padding-right: 0px;
+    padding-left: 0px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.social-row, logo-row, nav-row {
+    padding-right: 0px;
+    padding-left: 0px;
+    margin-right: auto;
+    margin-left: auto;
+    width: 100%;
+    overflow: hidden;
+}
+
+.wrapper.content,
+.wrapper.footer {
+    overflow:hidden;
+}
+
+
+/* logo */
+
+.logo {
+    max-width:350px;
+    font-size:0px;   
+    margin:15px 0px 15px 0;  
+    float:left;   
+
+    transition: all .20s ease-in-out;
+    -moz-transition: all .20s ease-in-out;
+    -webkit-transition: all .20s ease-in-out;
+}
+
+.logo img {
+    max-width:100%
+}
+
+/* navigation */
+
+.navbar-default .navbar-nav > li > a.fa,
+.navbar-default .navbar-nav > li > a.fa:focus {
+    font-family: FontAwesome;
+}
+
+.navbar {
+    background: none;
+    border:none;
+    min-height: 0px;
+    margin-bottom: 0px;
+    border-radius: 0px;
+    -webkit-border-radius: 0px;
+
+    transition: all .20s ease-in-out;
+    -moz-transition: all .20s ease-in-out;
+    -webkit-transition: all .20s ease-in-out;
+}
+
+.navbar-default .navbar-collapse {
+    border: none;
+    max-height: none;
+
+    transition: all .20s ease-in-out;
+    -moz-transition: all .20s ease-in-out;
+    -webkit-transition: all .20s ease-in-out;
+}   
+
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus,
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus,
+.navbar-default .dropdown-menu>li>a:hover {
+    background:none;
+}
+
+.navbar-default .dropdown-menu {
+    border: none;
+    margin:0;
+    padding:0;
+    min-width:initial;
+}   
+
+.navbar-default .nav > li > a {
+    padding: 0;
+    transition: all .20s ease-in-out;
+    -moz-transition: all .20s ease-in-out;
+    -webkit-transition: all .20s ease-in-out;
+}
+
+.navbar-default .dropdown-menu > li > a {
+    padding: 0;
+}   
+
+.navbar-default .dropdown-menu > li > a {
+    padding: 10px 10px 10px 10px;
+}
+
+.navbar-default .navbar-nav > li > a {
+    padding: 0px 10px 0px 10px;
+}
+
+.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {
+    background: none;
+}
+
+@media (min-width: 768px) {
+
+    .navbar-default .navbar-nav > li {
+        margin-left: 5px;
+    }
+
+    .navbar-nav > li:first-child {
+        margin-left: 0px;
+    }
+
+    .navbar-default .dropdown-menu {
+        margin:0;
+        padding:0;
+    }   
+
+    .navbar-collapse {
+        padding-right: 0px;
+        padding-left: 0px;
+    }
+
+}
+
+@media (max-width: 768px) {
+
+    .navbar-default .navbar-nav li {
+        margin-bottom: 3px;
+    }
+
+    .navbar-default .navbar-nav .open .dropdown-menu {
+        -webkit-border-radius: 0px;
+        border-radius: 0px;
+        margin-top:3px;
+    }
+
+    .navbar-default .navbar-nav {
+        margin: 0 -15px;
+    }
+
+    .navbar-default .navbar-collapse {
+        margin-left: -15px;
+        margin-right: -15px;
+    }   
+
+    .navbar-default .navbar-nav > li > a ,
+    .navbar-default .dropdown-menu > li > a {
+        padding: 10px 10px 10px 10px;
+    }
+
+    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+        padding: 10px 0px 10px 25px;
+    }
+
+    .navbar-toggle {
+        margin: 15px 0 15px 0;
+    }
+}
+
+/* social list */
+
+.social-bar {
+    list-style:none;
+    margin-top:0; 
+    padding: 0 15px 0 10px;
+    margin: 0px -15px 0px -15px;
+    line-height: 0px;
+    font-size: 0px;
+}
+
+.social-bar li {
+    display:inline-block;
+    margin-left:5px;
+}
+
+.social-bar li a {
+    cursor:pointer;
+    padding: 0 2px 0 2px;
+}
+
+.social-bar li a:hover {
+    text-decoration:none;
+}
+
+.social-bar li a span {
+    display:none;
+}
+
+/* nav search */
+
+#nav-search-form {
+    padding: 15px;
+}
+
+#nav-search-form button {
+    padding: 5px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    background: transparent;
+    border: none;
+}
+
+#nav-search-form a, #nav-search-form button {
+    margin-left:5px
+}
+    
+#nav-search-form input {
+    padding: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+}
+
+@media (min-width: 768px) {
+    #nav-search-form {
+        margin-left: -203px;
+        width:238px;
+    }
+}
+
+@media (max-width: 768px) {
+    #nav-search-form input {
+        width: 93%;
+    }
+}
+
+/* usky-grid */
+
+.usky-grid-cell{
+    margin-top: 30px;
+    margin-bottom: 30px;
+    overflow: hidden;
+}
+
+.usky-grid-row{
+    margin-left: 0px;
+    margin-right: 0px;
+} 
+
+.usky-grid-full-size .usky-grid-row:first-child{
+    margin-top: 0;
+} 
+
+.usky-grid-full-size .usky-grid-row:last-child{
+    margin-bottom: 0;
+} 
+
+.usky-grid-full-size .usky-grid-cell{
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+/*.usky-grid-full-size .usky-grid-row{
+    margin-left: -15px;
+    margin-right: -15px;
+}*/
+
+.usky-grid-skip-top-margin {
+    margin-top: 0px;
+}
+
+.usky-grid-skip-bottom-margin {
+    margin-bottom: 0px;
+}
+
+.usky-grid-column {
+    padding-right: 0px; padding-left: 0px;
+}
+
+/* jumbotron */
+
+.jumbotron {
+    font-size: inherit; 
+    font-weight: inherit; 
+    line-height: inherit; 
+    color: inherit;
+    background-color: #e3e1e1;
+    margin-bottom:0px;
+}
+
+.container .jumbotron {
+    padding: 15px;
+}
+
+/* thumbnail */
+
+.thumbnail {
+    margin-bottom:0px;
+    min-height:400px;
+}
+
+.thumbnail-container {
+    margin: 0 -15px;
+}
+
+.thumbnail .caption {
+    padding: 0 10px 10px 10px;
+    color: inherit;
+}
+
+.thumbnail>a>img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media (max-width: 991px) {
+    .thumbnail-container .col-md-3 {
+        margin: 30px 0 0 0;
+    }
+
+    .thumbnail-container .col-md-3:first-child {
+        margin: 0 0 0 0;
+    }
+}
+
+/* Search results list */
+
+.search-results-list {
+    margin:0;
+    padding:0;
+    list-style:none;
+}
+
+.search-results-list li p {
+    margin-left: 20px;
+}
+    
+.search-results-list i {
+    margin-right: 10px;
+}
+
+/* Blog list */
+
+.post-list img.post-image, .post-detail img.post-image
+    {
+    display: block;
+    height: auto;
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.post-list .meta {
+    margin-bottom:10px
+}
+
+.post-list .meta .sep {
+    margin:0 3px 0 3px;
+}
+
+.post-list .meta .fn {
+    margin:0 0 0 3px;
+}
+
+.blog-list-widget {
+    margin:0;
+    padding:0;
+    list-style:none;
+}
+
+.blog-list-widget i {
+    margin-right: 10px;
+}
+
+.post-detail {
+    padding: 0 15px 0 15px;
+}   
+
+.post-detail .meta {
+    margin: 0 0 20px 0;
+}
+
+.blog-nav .fa-angle-double-left {
+    float:left;
+}
+
+.blog-nav .fa-angle-double-right {
+    float:right;
+}
+
+.blog-nav {
+    margin:-15px 0 30px 0 ;
+}
+
+.blog-nav a {
+    font-size:28px;
+}
+
+.blog-nav a:hover {
+    text-decoration:none;
+}
+
+/* TinyStyle */
+
+.highlighted {
+    padding: 0 4px 2px;
+}
+
+.button {
+    border: 0;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    padding: 12px 15px 14px;
+    margin-top: 10px;
+    display: inline-block;
+    margin-bottom: 0;
+    font-size: 14px;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+/* Copyright */
+
+.copyright {
+    text-align: center;
+}
+
+/* maps */
+
+.google-maps {
+    height: 400px;
+    margin: 0 0 30px;
+}
+
+/* form */
+
+#contact-form .error {
+    border:1px solid red;
+}
+
+#contact-form .success {
+    display:none;
+}
+
+/* go up */
+
+.go-top {
+	position:fixed;
+	bottom:0.5em; right: 0.5em;
+	text-decoration: none;
+	color:white;
+	background-color: rgba(0, 0, 0, 0.3);
+	font-size:30px;
+	padding:0.1em 0.3em 0.1em;
+	display:none;
+	border-radius:3px; z-index:500;
+    transition: all .20s ease-in-out;
+    -moz-transition: all .20s ease-in-out;
+    -webkit-transition: all .20s ease-in-out;
+}
+    
+.go-top:hover { background-color:rgba(0, 0, 0, 0.6);}
+
+/***end-baseStyle***/
+/************************************************************************/
+
+/************************************************************************/
+/* Less parameters */
+/************************************************************************/
+/***start-lessFonts***/
 
 body {
     font-family:@FontBodyFamily,Verdana,Arial,Helvetica,sans-serif;
@@ -159,10 +865,14 @@ a {
 a:hover {
     color:@FontLinkColorHover;
 }
+/***end-lessFonts***/
+
+/************************************************************************/
+/* Less parameters */
+/************************************************************************/
+/***start-lessStyles***/
 
-/***************************************************************/
 /* BACKGROUND */
-/***************************************************************/
 
 .body-cover () when (@backgroundBodyCover = true) {
     -webkit-background-size: cover;
@@ -252,9 +962,7 @@ body {
     .footer-cover;
 }
 
-/***************************************************************/
 /* MAIN */
-/***************************************************************/
 
 .full () when (@stylingMainColumnBoxed = full) {
     width:100% !important;
@@ -384,9 +1092,7 @@ body {
     .wrapper { .wide-wrapper-1200 }
 }
 
-/***************************************************************/
 /* SOCIAL */
-/***************************************************************/
 
 .social-row-none () when (@stySocialDisplay = none) {
     display:none;
@@ -497,9 +1203,7 @@ body {
 
 }
 
-/***************************************************************/
 /* NAVIGATION */
-/***************************************************************/
 
 .condition1 () when  (@stylingNavDisplay = none) {
     display:none;
@@ -670,9 +1374,7 @@ body {
 
 }
 
-/***************************************************************/
 /* dropdown-menu */
-/***************************************************************/
 
 .condition22 () when  (@stylingNavRadiusOnlyTop = true) {
     .border-radius(0, @stylingNavRadius + 0px, @stylingNavRadius + 0px, 0px);
@@ -717,9 +1419,7 @@ body {
     }
 }
 
-/***************************************************************/
 /* Search */
-/***************************************************************/
 
 #nav-search-form a, #nav-search-form button {
     color: @FontNavFontColor;
@@ -729,9 +1429,7 @@ body {
     border:1px solid @FontNavFontColor;
 }
 
-/***************************************************************/
 /* SearchNavbar-Toggle */
-/***************************************************************/
 
 .condition23 () when  (@stylingNavDisplay = block-right) {
     float: right;
@@ -755,9 +1453,7 @@ body {
     background-color: @stylingNavBackgroundActiveColor;
 }
 
-/***************************************************************/
 /* Boxes */
-/***************************************************************/
 
 .jumbotron {
     min-height: @stylingBoxesMinHeight + 0px;
@@ -770,9 +1466,7 @@ body {
     background-color: @stylingBoxesBackgroundColor;
 }
 
-/***************************************************************/
 /* Thumbnail */
-/***************************************************************/
 
 .thumbnail {
     min-height: @stylingThumbnailsMinHeight + 0px;
@@ -781,9 +1475,14 @@ body {
     background-color: @stylingThumbnailsBackgroundColor;
 }
 
-/***************************************************************/
+/***end-lessStyles***/
+
+/************************************************************************/
+/* Less ELEMENT */
+/************************************************************************/
+/***start-lessElement***/
+
 /* ELEMENT */
-/***************************************************************/
 
 .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
   background: @color;
@@ -933,4 +1632,6 @@ body {
   -moz-background-clip: @argument;
   -webkit-background-clip: @argument;
   background-clip: @argument;
-}
\ No newline at end of file
+}
+
+/***end-lessElement***/
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
index a9770fbc00..6e56429d6b 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
@@ -3,6 +3,11 @@
 /*********************************************************************************************************/
 
 var refrechLayout = function (parameters) {
+
+    // Disable links
+    $('a').addClass("myDisable");
+    $('a').bind("click.myDisable", function () { return false; });
+
     var string = "less.modifyVars({" + parameters.join(",") + "})";
     eval(string);
 }
@@ -16,8 +21,8 @@ var closeIntelTuning = function (tuningModel) {
 
     if (tuningModel) {
 
-        $('a').removeClass("myDisable");
-        $('a').unbind("click.myDisable");
+        //$('a').removeClass("myDisable");
+        //$('a').unbind("click.myDisable");
 
         $("[tuning-over]").css('outline', 'none');
         $.each(tuningModel.categories, function (key, category) {
@@ -38,8 +43,8 @@ var initIntelTuning = function (tuningModel) {
 
     if (tuningModel) {
 
-        $('a').addClass("myDisable");
-        $('a').bind("click.myDisable", function () { return false; });
+        //$('a').addClass("myDisable");
+        //$('a').bind("click.myDisable", function () { return false; });
 
         $.each(tuningModel.categories, function (key, category) {
             $.each(category.sections, function (key, section) {
@@ -79,18 +84,11 @@ var initIntelTuning = function (tuningModel) {
 
 var initTuningPanel = function () {
 
-    // Disable tuning.style.css
-    var styleSheets = document.styleSheets;
-    var href = 'tuning.style.css';
-    for (var i = 0; i < styleSheets.length; i++) {
-        if (styleSheets[i].href.indexOf(href) > -1) {
-            styleSheets[i].disabled = true;
-            break;
-        }
+    // Init panel 
+    if (parent.setFrameIsLoaded) {
+        parent.setFrameIsLoaded(tuningParameterUrl);
     }
 
-    // Init panel 
-    parent.setFrameIsLoaded();
 }
 
 initTuningPanel();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js
index 389b9cb9cc..4a631d6224 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js
@@ -40,9 +40,11 @@ var refrechIntelTuning = function (schema) {
 
 }
 
-var setFrameIsLoaded = function () {
-    console.info("iframe id loaded");
+var setFrameIsLoaded = function (tuningParameterUrl) {
+    console.info("iframe id loaded " + tuningParameterUrl);
     var scope = angular.element($("#tuningPanel")).scope();
-    scope.frameLoaded = true;
+    scope.tuningParameterUrl = tuningParameterUrl;
+    scope.frameLoaded++;
+    scope.frameFirstLoaded = true;
     scope.$apply();
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.lessParameters.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.lessParameters.less
deleted file mode 100644
index 8cd225a445..0000000000
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.lessParameters.less
+++ /dev/null
@@ -1,187 +0,0 @@
-@import url('http://fonts.googleapis.com/css?family=Open Sans:300');
-@backgroundBodyColor:rgb(244, 234, 234);
-@backgroundBodyGradientColor:'';
-@backgroundBodyImageOrPattern:'';
-@backgroundBodyPosition:top center;
-@backgroundBodyCover:true;
-@backgroundBodyRepeat:repeat;
-@backgroundBodyAttachment:fixed;
-@backgroundMainColumnColor:rgb(246, 246, 246);
-@backgroundMainColumnGradientColor:'';
-@backgroundMainColumnImageOrPattern:'';
-@backgroundMainColumnPosition:'';
-@backgroundMainColumnCover:true;
-@backgroundMainColumnRepeat:'';
-@backgroundMainColumnAttachment:fixed;
-@backgroundHeaderColor:rgb(51, 51, 51);
-@backgroundHeaderGradientColor:'';
-@backgroundHeaderImageOrPattern:'';
-@backgroundHeaderPosition:'';
-@backgroundHeaderCover:true;
-@backgroundHeaderRepeat:'';
-@backgroundHeaderAttachment:fixed;
-@backgroundFooterColor:rgb(51, 51, 51);
-@backgroundFooterGradientColor:'';
-@backgroundFooterImageOrPattern:'';
-@backgroundFooterPosition:center;
-@backgroundFooterCover:true;
-@backgroundFooterRepeat:'';
-@backgroundFooterAttachment:fixed;
-@stylingMainColumnBoxed:boxed;
-@stylingHeaderTopMargin:21;
-@stylingMainColumnTopMargin:0;
-@stylingFooterTopMargin:0;
-@stylingFooterBottompMargin:20;
-@stylingMainColumnRadius:0;
-@stylingMainColumnShadow:21;
-@stylingHeaderTopBorderSize:5;
-@stylingHeaderBottomBorderSize:0;
-@stylingHeaderTopBorderColor:rgb(230, 126, 34);
-@stylingHeaderBottomBorderColor:rgb(230, 126, 34);
-@stylingHeaderMinHeight:0;
-@stylingHeaderLogoTopMargin:14;
-@stylingNavDisplay:block-right;
-@stylingNavBackgroundColor:'';
-@stylingNavBackgroundDdl:rgba(97, 97, 97, 0.85);
-@stylingNavBackgroundActiveColor:rgb(230, 126, 34);
-@stylingNavMarginTop:-39;
-@stylingNavRadius:5;
-@stylingNavRadiusOnlyTop:true;
-@stylingNavItemTopBorderActiveSize:0;
-@stylingNavItemBottomBorderActiveSize:0;
-@stylingNavItemTopBorderActiveColor:rgb(230, 126, 34);
-@stylingNavItemBottomBorderActiveColor:rgb(230, 126, 34);
-@stySocialDisplay:block-right;
-@stySocialBackgroundColor:rgba(255, 255, 255, 0.08);
-@stySocialTopMargin:0;
-@stySocialBorderTopSize:0;
-@stySocialBorderBottomSize:0;
-@stySocialBorderTopColor:rgb(230, 126, 34);
-@stySocialBorderBottomColor:rgb(230, 126, 34);
-@stylingBoxesBackgroundColor:'';
-@stylingBoxesMinHeight:0;
-@stylingBoxesRadius:0;
-@stylingBoxesBorderSize:0;
-@stylingBoxesBorderColor:'';
-@stylingThumbnailsBackgroundColor:'';
-@stylingThumbnailsMinHeight:0;
-@stylingThumbnailsRadius:0;
-@stylingThumbnailsBorderSize:0;
-@stylingThumbnailsBorderColor:'';
-@FontBodyColor:'';
-@FontBodySize:14;
-@FontBodyLineHeight:18;
-@FontBodyFamily:Open Sans;
-@FontBodyFamily_weight:300;
-@FontBodyFamily_style:'';
-@FontBodyFamily_type:google;
-@FontNavFontColor:rgba(255, 255, 255, 0.84);
-@FontNavFontActiveColor:rgb(255, 255, 255);
-@FontNavSize:18;
-@FontNavLineHeight:43;
-@FontNavFamily:Open Sans;
-@FontNavFamily_weight:300;
-@FontNavFamily_style:'';
-@FontNavFamily_type:google;
-@FontSocialFontColor:rgba(255, 255, 255, 0.6);
-@FontSocialFontColorHover:rgb(255, 255, 255);
-@FontSocialFontSize:12;
-@FontSocialLineHeight:34;
-@FontSocialFamily:Arial, Helvetica;
-@FontSocialFamily_weight:normal;
-@FontSocialFamily_style:normal;
-@FontSocialFamily_type:safe;
-@FontH1Color:rgb(230, 126, 34);
-@FontH1Size:24;
-@FontH1LineHeight:26;
-@FontH1TopMargin:20;
-@FontH1BottomMargin:20;
-@FontH1Family:Open Sans;
-@FontH1Family_weight:300;
-@FontH1Family_style:'';
-@FontH1Family_type:google;
-@FontH2Color:rgb(230, 126, 34);
-@FontH2Size:18;
-@FontH2LineHeight:18;
-@FontH2TopMargin:5;
-@FontH2BottomMargin:10;
-@FontH2Family:Open Sans;
-@FontH2Family_weight:300;
-@FontH2Family_style:'';
-@FontH2Family_type:google;
-@FontH3Color:rgb(230, 126, 34);
-@FontH3Size:18;
-@FontH3LineHeight:16;
-@FontH3TopMargin:10;
-@FontH3BottomMargin:10;
-@FontH3Family:Open Sans;
-@FontH3Family_weight:300;
-@FontH3Family_style:'';
-@FontH3Family_type:google;
-@FontH4Color:'';
-@FontH4Size:14;
-@FontH4LineHeight:14;
-@FontH4TopMargin:5;
-@FontH4BottomMargin:10;
-@FontH4Family:Open Sans;
-@FontH4Family_weight:300;
-@FontH4Family_style:'';
-@FontH4Family_type:google;
-@FontH5Color:'';
-@FontH5Size:12;
-@FontH5LineHeight:12;
-@FontH5TopMargin:5;
-@FontH5BottomMargin:10;
-@FontH5Family:Open Sans;
-@FontH5Family_weight:300;
-@FontH5Family_style:'';
-@FontH5Family_type:google;
-@FontH6Color:'';
-@FontH6Size:12;
-@FontH6LineHeight:12;
-@FontH6TopMargin:5;
-@FontH6BottomMargin:10;
-@FontH6Family:Open Sans;
-@FontH6Family_weight:300;
-@FontH6Family_style:'';
-@FontH6Family_type:google;
-@FontMediumColor:'';
-@FontMediumSize:18;
-@FontMediumLineHeight:24;
-@FontMediumTopMargin:5;
-@FontMediumBottomMargin:10;
-@FontMediumFamily:Open Sans;
-@FontMediumFamily_weight:300;
-@FontMediumFamily_style:'';
-@FontMediumFamily_type:google;
-@FontHighlightedColor:'';
-@FontHighlightedBackgroundColor:rgb(230, 126, 34);
-@FontHighlightedFamily:Open Sans;
-@FontHighlightedFamily_weight:300;
-@FontHighlightedFamily_style:'';
-@FontHighlightedFamily_type:google;
-@FontBigColor:rgb(230, 126, 34);
-@FontBigSize:26;
-@FontBigLineHeight:28;
-@FontBigTopMargin:5;
-@FontBigBottomMargin:15;
-@FontBigFamily:Open Sans;
-@FontBigFamily_weight:300;
-@FontBigFamily_style:'';
-@FontBigFamily_type:google;
-@FontButtonColor:rgba(255, 255, 255, 0.92);
-@FontButtonBackgroundColor:rgb(230, 126, 34);
-@FontButtonColorHover:rgba(255, 255, 255, 0.55);
-@FontButtonBackgroundColorHover:rgba(230, 126, 34, 0.74);
-@FontButtonSize:24;
-@FontButtonLineHeight:24;
-@FontButtonPadding:10;
-@FontButtonFamily:Open Sans;
-@FontButtonFamily_weight:300;
-@FontButtonFamily_style:'';
-@FontButtonFamily_type:google;
-@FontColor2Color:rgb(230, 126, 34);
-@FontColor3Color:rgba(253, 251, 251, 0.91);
-@FontColor4Color:rgb(170, 170, 170);
-@FontLinkColor:rgb(230, 126, 34);
-@FontLinkColorHover:rgba(230, 126, 34, 0.84);
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
index a9770fbc00..6e56429d6b 100644
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
@@ -3,6 +3,11 @@
 /*********************************************************************************************************/
 
 var refrechLayout = function (parameters) {
+
+    // Disable links
+    $('a').addClass("myDisable");
+    $('a').bind("click.myDisable", function () { return false; });
+
     var string = "less.modifyVars({" + parameters.join(",") + "})";
     eval(string);
 }
@@ -16,8 +21,8 @@ var closeIntelTuning = function (tuningModel) {
 
     if (tuningModel) {
 
-        $('a').removeClass("myDisable");
-        $('a').unbind("click.myDisable");
+        //$('a').removeClass("myDisable");
+        //$('a').unbind("click.myDisable");
 
         $("[tuning-over]").css('outline', 'none');
         $.each(tuningModel.categories, function (key, category) {
@@ -38,8 +43,8 @@ var initIntelTuning = function (tuningModel) {
 
     if (tuningModel) {
 
-        $('a').addClass("myDisable");
-        $('a').bind("click.myDisable", function () { return false; });
+        //$('a').addClass("myDisable");
+        //$('a').bind("click.myDisable", function () { return false; });
 
         $.each(tuningModel.categories, function (key, category) {
             $.each(category.sections, function (key, section) {
@@ -79,18 +84,11 @@ var initIntelTuning = function (tuningModel) {
 
 var initTuningPanel = function () {
 
-    // Disable tuning.style.css
-    var styleSheets = document.styleSheets;
-    var href = 'tuning.style.css';
-    for (var i = 0; i < styleSheets.length; i++) {
-        if (styleSheets[i].href.indexOf(href) > -1) {
-            styleSheets[i].disabled = true;
-            break;
-        }
+    // Init panel 
+    if (parent.setFrameIsLoaded) {
+        parent.setFrameIsLoaded(tuningParameterUrl);
     }
 
-    // Init panel 
-    parent.setFrameIsLoaded();
 }
 
 initTuningPanel();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
index 95ec60108c..c6682c55fd 100644
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
@@ -40,10 +40,12 @@ var refrechIntelTuning = function (schema) {
 
 }
 
-var setFrameIsLoaded = function () {
-    console.info("iframe id loaded");
+var setFrameIsLoaded = function (tuningParameterUrl) {
+    console.info("iframe id loaded " + tuningParameterUrl);
     var scope = angular.element($("#tuningPanel")).scope();
-    scope.frameLoaded = true;
+    scope.tuningParameterUrl = tuningParameterUrl;
+    scope.frameLoaded ++;
+    scope.frameFirstLoaded = true;
     scope.$apply();
 }
 
@@ -58,7 +60,9 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 .controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout, $location) {
 
     $scope.isOpen = false;
-    $scope.frameLoaded = false;
+    $scope.frameLoaded = 0;
+    $scope.frameFirstLoaded = false;
+    $scope.tuningParameterUrl = "";
     $scope.schemaFocus = "body";
     $scope.settingIsOpen = 'previewDevice';
     $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right'];
@@ -81,7 +85,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 
     // Load parameters from GetLessParameters and init data of the tuning config
     var initTuning = function () {
-        $http.get('/Umbraco/Api/tuning/GetLessParameters')
+
+        console.info("url " + $scope.tuningParameterUrl);
+        
+        $http.get('/Umbraco/Api/tuning/Load', { params: { param: $scope.tuningParameterUrl } })
             .success(function (data) {
 
                 $.each(tuningConfig.categories, function (indexCategory, category) {
@@ -111,6 +118,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
                 $scope.tuningModel = tuningConfig;
                 $scope.tuningPalette = tuningPalette;
 
+                if ($scope.settingIsOpen == "setting") {
+                    openIntelTuning();
+                }
+
             });
     }
 
@@ -212,14 +223,14 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
             })
         });
 
-        var resultParameters = { result: parameters.join("") };
+        var resultParameters = { result: parameters.join(""), pageId: $location.search().id };
         var transform = function (result) {
             return $.param(result);
         }
 
         $('.btn-default-save').attr("disabled", true);
         $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
-        $http.post('/Umbraco/Api/tuning/PostLessParameters', resultParameters, {
+        $http.post('/Umbraco/Api/tuning/Save', resultParameters, {
             headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
             transformRequest: transform
         })
@@ -230,6 +241,19 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 
     }
 
+    // Delete current page tuning
+    $scope.deleteTuning = function () {
+
+        $('.btn-default-delete').attr("disabled", true);
+        $http.get('/Umbraco/Api/tuning/Delete', { params: { pageId: $location.search().id } })
+        .success(function (data) {
+            $scope.frameLoaded ++;
+            $scope.pageId = $scope.pageId + "&n=123456";
+            $('.btn-default-delete').attr("disabled", false);
+        })
+
+    }
+
     // Toggle panel
     $scope.togglePanel = function () {
         if ($scope.isOpen) {
@@ -325,18 +349,21 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
         $scope.googleFontFamilies = data;
     })
 
+    // watch framLoaded
     $scope.$watch("frameLoaded", function () {
-        if ($scope.frameLoaded) {
-            console.info("init tuning");
+        if ($scope.frameLoaded > 0) {
+            initTuning();
             $scope.$watch('tuningModel', function () {
                 refreshtuning();
             }, true);
-            $scope.togglePanel();
         }
     }, true)
 
+    // first panel init
     initTuning();
-    $("#tuningPanel").show();
+
+    // toggle panel
+    $scope.togglePanel();
 
 })
 
diff --git a/src/Umbraco.Web.UI/Umbraco/preview/index.html b/src/Umbraco.Web.UI/Umbraco/preview/index.html
index 323310bfd5..4b4d0bf52c 100644
--- a/src/Umbraco.Web.UI/Umbraco/preview/index.html
+++ b/src/Umbraco.Web.UI/Umbraco/preview/index.html
@@ -16,7 +16,7 @@
         <iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
     </div>
 
-    <div class="tuning" style="display:none" ng-class="{show:frameLoaded}">
+    <div class="tuning" style="display:none" ng-class="{show:frameFirstLoaded}">
 
         <div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">
 
@@ -54,7 +54,7 @@
 
                 </div>
 
-                <div ng-show="settingIsOpen == 'setting'" >
+                <div ng-show="settingIsOpen == 'setting'">
 
                     <tabset vertical="false">
 
@@ -147,6 +147,7 @@
                     </tabset>
 
                     <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
+                    <button class="btn btn-default btn-default-delete" ng-click="deleteTuning()">reset</button>
 
                 </div>
 
diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
index e7a7cfc552..75d75cb434 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
@@ -30,12 +30,7 @@
 
     <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
     <PreviewBadge>
-      <![CDATA[<a id="umbracoPreviewBadge" style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{1}/preview/previewModeBadge.png') no-repeat;" href="#" OnClick="javascript:window.top.location.href = '{0}/endPreview.aspx?redir={2}'"><span style="display:none;">In Preview Mode - click to end</span></a>
-      <link href="/Umbraco/assets/less/tuning.style.less" rel="stylesheet/less" type="text/css" />
-      <script src="/Umbraco/lib/jquery/jquery-2.0.3.min.js"></script>
-      <script src="/Umbraco/lib/Less/less-1.7.0.min.js"></script>
-      <script src="/umbraco/js/tuning.front.js"></script>
-    ]]></PreviewBadge>
+      <![CDATA[<a id="umbracoPreviewBadge" style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{1}/preview/previewModeBadge.png') no-repeat;" href="#" OnClick="javascript:window.top.location.href = '{0}/endPreview.aspx?redir={2}'"><span style="display:none;">In Preview Mode - click to end</span></a>]]></PreviewBadge>
 
     <!-- Cache cycle of Media and Member data fetched from the umbraco.library methods -->
     <!-- In seconds. 0 will disable cache -->
diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config
index e07d9a9e86..c9d7119ef4 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.config
@@ -78,10 +78,6 @@
     <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
     <PreviewBadge>
       <![CDATA[<a id="umbracoPreviewBadge" style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{1}/preview/previewModeBadge.png') no-repeat;" href="#" OnClick="javascript:window.top.location.href = '{0}/endPreview.aspx?redir={2}'"><span style="display:none;">In Preview Mode - click to end</span></a>
-      <link href="/Umbraco/assets/less/tuning.style.less" rel="stylesheet/less" type="text/css" />
-      <script src="/Umbraco/lib/jquery/jquery-2.0.3.min.js"></script>
-      <script src="/Umbraco/lib/Less/less-1.7.0.min.js"></script>
-      <script src="/umbraco/js/tuning.front.js"></script>
     ]]></PreviewBadge>
 
     <!-- Cache cycle of Media and Member data fetched from the umbraco.library methods -->
diff --git a/src/Umbraco.Web/Editors/TuningController.cs b/src/Umbraco.Web/Editors/TuningController.cs
index dbaef7edaf..61840fecde 100644
--- a/src/Umbraco.Web/Editors/TuningController.cs
+++ b/src/Umbraco.Web/Editors/TuningController.cs
@@ -20,9 +20,10 @@ namespace Umbraco.Web.Editors
     {
 
         static string basePath = HttpContext.Current.Server.MapPath(@"\Umbraco\assets\less\");
-        static string resultCssPath = HttpContext.Current.Server.MapPath(@"\Css\tuning.style.css");
-        static string tuningStylePath = basePath + @"tuning.style.less";
-        static string tuningParametersPath = basePath + @"tuning.lessParameters.less";
+        static string frontBasePath = HttpContext.Current.Server.MapPath(@"\Css\tuning\");
+        static string resultCssPath = @"\Css\tuning\{0}.css";
+        static string resultLessPath = @"\Css\tuning\{0}.less";
+        static string tuningStylePath = basePath + @"tuning.defaultStyle.less";
 
         [HttpGet]
         public HttpResponseMessage GetGoogleFont()
@@ -50,24 +51,28 @@ namespace Umbraco.Web.Editors
         }
 
         [HttpGet]
-        public HttpResponseMessage GetLessParameters()
+        public HttpResponseMessage Load()
         {
 
-            if (!Directory.Exists(basePath))
-                Directory.CreateDirectory(basePath);
+            var tuningParametersPath = HttpContext.Current.Request["param"];
 
-            if (!File.Exists(tuningParametersPath))
-                File.Create(tuningParametersPath);
+            if (string.IsNullOrEmpty(tuningParametersPath))
+                tuningParametersPath = tuningStylePath;
+            else
+                tuningParametersPath = HttpContext.Current.Server.MapPath(tuningParametersPath);
 
-            IList<string> parameters = new List<string>();
+            string paramBlock = string.Empty;
             using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningParametersPath))
             {
-                String line;
-                while ((line = sr.ReadLine()) != null)
-                {
-                    if (!line.Contains("@import"))
-                        parameters.Add("\"" + line.Replace(":", "\":\"").Replace(";", "\"").Replace("@", "").Replace(";", ""));
-                }
+                paramBlock = GetStyleBloque("lessParam", sr.ReadToEnd());
+            }
+            
+            string[] paramLines = paramBlock.Trim().Split(new string[] { "\r\n" }, StringSplitOptions.RemoveEmptyEntries);
+            IList<string> parameters = new List<string>();          
+            foreach (var line in paramLines)
+            {
+                if (!line.Contains("@import"))
+                    parameters.Add("\"" + line.Replace(":", "\":\"").Replace(";", "\"").Replace("@", "").Replace(";", ""));
             }
 
             var resp = new HttpResponseMessage()
@@ -79,52 +84,57 @@ namespace Umbraco.Web.Editors
         }
 
         [HttpPost]
-        public HttpResponseMessage PostLessParameters()
+        public HttpResponseMessage Save()
         {
 
-            if (!Directory.Exists(basePath))
-                Directory.CreateDirectory(basePath);
-
-            if (!File.Exists(tuningParametersPath))
-                File.Create(tuningParametersPath);
-
-            if (!File.Exists(resultCssPath))
-                File.Create(resultCssPath);
-
             var result = HttpContext.Current.Request["result"];
+            var pageId = HttpContext.Current.Request["pageId"];
 
-            // Update less parameter file
-            string gaImportList = string.Empty;
-            using (System.IO.StreamWriter file = new System.IO.StreamWriter(tuningParametersPath))
-            {
-                foreach (string parameters in result.Trim().Split(';'))
-                {
-                    if (!string.IsNullOrEmpty(parameters))
-                    {
-                        file.WriteLine((parameters + ";").Replace(":;", ":'';"));
-                    }
-                    if (parameters.IndexOf("@import") >= 0)
-                    {
-                        // Hack for ClientDependency
-                        gaImportList = gaImportList + parameters.Replace("@import", "@IMPORT") + ";";
-                    }
-                }
-            }
+            // Path to the new less and css files
+            string newResultLessPath = HttpContext.Current.Server.MapPath(string.Format(resultLessPath, pageId));
+            string newResultCssPath = HttpContext.Current.Server.MapPath(string.Format(resultCssPath, pageId));
 
-            // Read Tuning style file
-            string tuningStyleString = string.Empty;
+            // Load default Less content
+            string lessContent = string.Empty;
             using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningStylePath))
             {
-                tuningStyleString = sr.ReadToEnd();
+                lessContent = sr.ReadToEnd();
+            }
+
+            // Create font directory
+            if (!Directory.Exists(frontBasePath))
+                Directory.CreateDirectory(frontBasePath);
+
+            // Prepare parameters and gf block
+            string newParamBlock = string.Empty;
+            string newGfBlock = string.Empty;
+            foreach (string parameters in result.Trim().Split(new string[] {";"}, StringSplitOptions.RemoveEmptyEntries))
+            {
+                if (parameters.IndexOf("@import") < 0)
+                {
+                    newParamBlock += (parameters + ";").Replace(":;", ":'';") + Environment.NewLine;
+                }
+                else 
+                {
+                    newGfBlock += parameters + ";" + Environment.NewLine;
+                }
+            }
+            lessContent = lessContent.Replace(GetStyleBloque("lessParam", lessContent), Environment.NewLine + newParamBlock);
+            lessContent = lessContent.Replace(GetStyleBloque("gf", lessContent), Environment.NewLine + newGfBlock);
+
+            // Save less file
+            using (System.IO.StreamWriter file = new System.IO.StreamWriter(newResultLessPath))
+            {
+                file.Write(lessContent);
             }
 
             // Compile the Less file
-            string compiledStyle = GetCssFromLessString(tuningStyleString, false, true, true);
+            string compiledStyle = GetCssFromLessString(lessContent, false, true, true).Replace("@import", "@IMPORT");
 
             // Save compiled file
-            using (System.IO.StreamWriter file = new System.IO.StreamWriter(resultCssPath))
+            using (System.IO.StreamWriter file = new System.IO.StreamWriter(newResultCssPath))
             {
-                file.Write(gaImportList + compiledStyle);
+                file.Write(compiledStyle);
             }
 
             var resp = new HttpResponseMessage()
@@ -135,6 +145,29 @@ namespace Umbraco.Web.Editors
             return resp;
         }
 
+        [HttpGet]
+        public HttpResponseMessage Delete()
+        {
+
+            var pageId = HttpContext.Current.Request["pageId"];
+
+            // Path to the less and css files
+            string newResultLessPath = HttpContext.Current.Server.MapPath(string.Format(resultLessPath, pageId));
+            string newResultCssPath = HttpContext.Current.Server.MapPath(string.Format(resultCssPath, pageId));
+
+            // Delete all style file for this page
+            System.IO.File.Delete(newResultLessPath);
+            System.IO.File.Delete(newResultCssPath);
+
+            var resp = new HttpResponseMessage()
+            {
+                Content = new StringContent("ok")
+            };
+            resp.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
+            return resp;
+
+        } 
+
         private static string GetCssFromLessString(string css, Boolean cacheEnabled, Boolean minifyOutput, Boolean disableVariableRedefines)
         {
             var config = dotless.Core.configuration.DotlessConfiguration.GetDefaultWeb();
@@ -144,6 +177,20 @@ namespace Umbraco.Web.Editors
             return dotless.Core.LessWeb.Parse(css, config);
         }
 
+        private static string GetStyleBloque(string tag, string input)
+        {
+            string startTag = string.Format("/***start-{0}***/", tag);
+            string endTag = string.Format("/***end-{0}***/", tag);
+
+            int indexStartTag = input.IndexOf(startTag);
+            int indexEndTag = input.IndexOf(endTag);
+
+            if (indexStartTag >= 0 && indexEndTag >= 0)
+                return input.Substring(indexStartTag, indexEndTag - indexStartTag).Replace(startTag, "").Replace(endTag, "");
+            else
+                return "";
+        }
+
     }
 
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web/UmbracoHelper.cs b/src/Umbraco.Web/UmbracoHelper.cs
index bfa57d5ab3..bb81aa96c7 100644
--- a/src/Umbraco.Web/UmbracoHelper.cs
+++ b/src/Umbraco.Web/UmbracoHelper.cs
@@ -1300,6 +1300,54 @@ namespace Umbraco.Web
 
         #endregion
 
+        #region tuning
+
+        public HtmlString EnableTuning()
+        {
+
+            string previewLink = @"<link href=""/Umbraco/lib/bootstrap/css/bootstrap.min.3.0.1.css"" type=""text/css"" rel=""stylesheet"" />" + 
+                                 @"<link href=""{0}"" rel=""stylesheet/less"" type=""text/css"" />" +
+                                 @"<script src=""/Umbraco/lib/jquery/jquery-2.0.3.min.js""></script>" +
+                                 @"<script src=""/Umbraco/lib/Less/less-1.7.0.min.js""></script>" +
+                                 @"<script type=""text/javascript"">var tuningParameterUrl='{0}';</script>" +
+                                 @"<script src=""/umbraco/js/tuning.front.js""></script>";
+
+            string noPreviewLinks = @"<link href=""/Umbraco/lib/bootstrap/css/bootstrap.min.3.0.1.css"" type=""text/css"" rel=""stylesheet"" />" + 
+                                    @"<link href=""{0}"" type=""text/css"" rel=""stylesheet"" />";
+
+            string defaultLessStyle = @"/Umbraco/assets/less/tuning.defaultStyle.less";
+            string defaultCssStyle = @"/Umbraco/assets/css/tuning.defaultStyle.css";
+
+            string styleTuning = UmbracoContext.Current.InPreviewMode ? @"/Css/tuning/{0}.less" : "/Css/tuning/{0}.css";
+
+            int pageId = UmbracoContext.PublishedContentRequest.UmbracoPage.PageID;
+            string[] path = UmbracoContext.PublishedContentRequest.UmbracoPage.SplitPath;
+
+            // Looking for style folder
+            string linkResult = string.Empty;
+            foreach (var page in path.OrderByDescending(r => path.IndexOf(r)))
+            {
+                string stylePath = HttpContext.Current.Server.MapPath(string.Format(styleTuning, page));
+                if (System.IO.File.Exists(stylePath))
+                {
+                    linkResult = string.Format(styleTuning, page);
+                    break;
+                }
+            }
+
+            string result = string.Empty;
+            if (UmbracoContext.Current.InPreviewMode) {
+                result = string.IsNullOrEmpty(linkResult) ? string.Format(previewLink, defaultLessStyle) : string.Format(previewLink, linkResult);
+            }
+            else {
+                result = string.IsNullOrEmpty(linkResult) ? string.Format(noPreviewLinks, defaultCssStyle) : string.Format(noPreviewLinks, linkResult);
+            }
+            return new HtmlString(result);
+
+        }
+
+        #endregion
+
         /// <summary>
         /// This is used in methods like BeginUmbracoForm and SurfaceAction to generate an encrypted string which gets submitted in a request for which
         /// Umbraco can decrypt during the routing process in order to delegate the request to a specific MVC Controller.