diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js
index 64345f7f22..bd8ae1210a 100644
--- a/src/Umbraco.Web.UI.Client/gruntFile.js
+++ b/src/Umbraco.Web.UI.Client/gruntFile.js
@@ -145,6 +145,7 @@ module.exports = function (grunt) {
               { dest: '<%= distdir %>/preview', src: '**/*.html', expand: true, cwd: 'src/tuning' },
               { dest: '<%= distdir %>/assets/css', src: 'tuning.defaultStyle.css', expand: true, cwd: 'src/tuning' },
               { dest: '<%= distdir %>/assets/less', src: 'tuning.defaultStyle.less', expand: true, cwd: 'src/tuning' },
+              { dest: '<%= distdir %>/assets/less', src: 'tuning.gridRowStyle.less', expand: true, cwd: 'src/tuning' },
               { dest: '<%= distdir %>/js', src: 'tuning.config.js', expand: true, cwd: 'src/tuning/config' },
               { dest: '<%= distdir %>/js', src: 'tuning.palettes.js', expand: true, cwd: 'src/tuning/config' },
               { dest: '<%= distdir %>/js', src: 'tuning.front.js', expand: true, cwd: 'src/tuning' }
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js
index 3db7899b10..e5c97d190a 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js
@@ -240,6 +240,7 @@ var tuningConfig = {
             name: "General",
             subSections: [{
                 name: "Main",
+                schema: ".content",
                 fields: [{
                     name: "Layout",
                     alias: "stylingMainColumnBoxed",
@@ -304,6 +305,7 @@ var tuningConfig = {
             },
             {
                 name: "Header",
+                schema: "header",
                 fields: [{
                     name: "Top Border Size",
                     alias: "stylingHeaderTopBorderSize",
@@ -453,6 +455,7 @@ var tuningConfig = {
             },
             {
                 name: "Social Links",
+                schema: ".social-row",
                 fields: [{
                     name: "Display",
                     alias: "stySocialDisplay",
@@ -557,6 +560,7 @@ var tuningConfig = {
             },
             {
                 name: "Thumbnails",
+                schema: ".thumbnail",
                 fields: [{
                     name: "Background Color",
                     alias: "stylingThumbnailsBackgroundColor",
@@ -647,6 +651,7 @@ var tuningConfig = {
             },
             {
                 name: "Navigation",
+                schema: ".nav",
                 fields: [{
                     name: "Font Color",
                     alias: "FontNavFontColor",
@@ -694,6 +699,7 @@ var tuningConfig = {
             },
             {
                 name: "Social Link",
+                schema: "social-row",
                 fields: [{
                     name: "Font Color",
                     alias: "FontSocialFontColor",
@@ -1084,6 +1090,7 @@ var tuningConfig = {
                 }]
             }, {
                 name: "Medium",
+                schema: ".medium",
                 fields: [{
                     name: "Color",
                     alias: "FontMediumColor",
@@ -1139,6 +1146,7 @@ var tuningConfig = {
                 }]
             }, {
                 name: "Highlighted",
+                schema: ".highlighted",
                 fields: [{
                     name: "Color",
                     alias: "FontHighlightedColor",
@@ -1167,6 +1175,7 @@ var tuningConfig = {
                 }]
             }, {
                 name: "Big",
+                schema: ".big",
                 fields: [{
                     name: "Color",
                     alias: "FontBigColor",
@@ -1223,6 +1232,7 @@ var tuningConfig = {
                 }]
             }, {
                 name: "Button",
+                schema: ".button",
                 fields: [{
                     name: "Color",
                     alias: "FontButtonColor",
@@ -1293,6 +1303,7 @@ var tuningConfig = {
             },
             {
                 name: "Color2",
+                schema: ".color2",
                 fields: [{
                     name: "Color",
                     alias: "FontColor2Color",
@@ -1304,6 +1315,7 @@ var tuningConfig = {
             },
             {
                 name: "Color3",
+                schema: ".color3",
                 fields: [{
                     name: "Color",
                     alias: "FontColor3Color",
@@ -1315,6 +1327,7 @@ var tuningConfig = {
             },
             {
                 name: "Color4",
+                schema: ".color4",
                 fields: [{
                     name: "Color",
                     alias: "FontColor4Color",
@@ -1325,6 +1338,7 @@ var tuningConfig = {
             },
             {
                 name: "Link",
+                schema: "p a",
                 fields: [{
                     name: "Color",
                     alias: "FontLinkColor",
@@ -1343,3 +1357,67 @@ var tuningConfig = {
         }]
     }]
 }
+
+var rowModel = {
+    name: "Row",
+    schema: "",
+    fields: [
+        {
+            name: "Background color",
+            alias: "backgroundRowColor",
+            description: "Background body color",
+            type: "colorPicker",
+            value: "",
+            colorPaletteProperty: "colorBodyBackground"
+        },
+        {
+            name: "Background gradient",
+            alias: "backgroundRowGradientColor",
+            description: "Fade the background to this colour at the bottom",
+            type: "colorPicker",
+            value: ""
+        },
+        {
+            name: "Image/Pattern",
+            alias: "backgroundRowImageOrPattern",
+            description: "Use an image for the background instead of a solid colour/gradient",
+            type: "bgImagePicker",
+            value: ""
+        },
+        {
+            name: "Image position",
+            alias: "backgroundRowPosition",
+            description: "Background body position",
+            type: "bgPositionPicker",
+            value: ""
+        },
+        {
+            name: "Stretch background",
+            alias: "backgroundRowCover",
+            description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below",
+            type: "checkbox",
+            value: ""
+        },
+        {
+            name: "Background tiling",
+            alias: "backgroundRowRepeat",
+            description: "How to tile the background image",
+            type: "bgRepeatPicker",
+            value: ""
+        },
+        {
+            name: "Background scrolling behaviour",
+            alias: "backgroundRowAttachment",
+            description: "When fixed the background doesn't scroll with the content",
+            type: "bgAttachmentPicker",
+            value: ""
+        },
+        {
+            name: "Full size",
+            alias: "rowFullSize",
+            description: "",
+            type: "checkbox",
+            value: ""
+        }
+    ]
+};
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/tuning/index.html
index fe726c661f..574967c427 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:frameFirstLoaded}">
+    <div class="tuning">
 
         <div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">
 
@@ -27,15 +27,15 @@
                     <i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
+                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice', show:frameLoaded}" style="display:none">
                     <i class="icon icon-display"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
+                <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting', show:enableTuning > 0}" style="display:none">
                     <i class="icon icon-paint-roller"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('presetColors')" ng-class="{selected:settingIsOpen=='presetColors'}">
+                <div ng-if="isOpen" ng-click="settingOpen('presetColors')" ng-class="{selected:settingIsOpen=='presetColors', show:enableTuning > 0}" style="display:none">
                     <i class="icon icon-palette"></i>
                 </div>
 
@@ -73,7 +73,7 @@
                                                      is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
 
                                         <accordion-heading>
-                                            <span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">
+                                            <span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.schema)">
                                                 {{subSection.name}}
                                             </span>
                                         </accordion-heading>
@@ -84,14 +84,14 @@
 
                                             <div ng-if="field.type == 'colorPicker'">
                                                 <spectrum colorselected="field.value"></spectrum>
-                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="fa fa-times colorPickerDelete"></i>
+                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="icon icon-delete colorPickerDelete"></i>
                                             </div>
 
                                             <div ng-if="field.type == 'bgImagePicker'" class="imagePickerPreviewContainer">
                                                 <div class="imagePickerPreview" ng-click="open(field)" style="background-image:{{ field.value }}">
                                                     <i class="icon icon-add"></i>
                                                 </div>
-                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="fa fa-times colorPickerDelete"></i>
+                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="icon icon-delete colorPickerDelete"></i>
                                             </div>
 
                                             <div ng-if="field.type == 'bgPositionPicker'">
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js
index 22b1cef4e7..20df88000b 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js
@@ -1,6 +1,8 @@
-/*
- jQuery UI Slider plugin wrapper
-*/
+
+/*********************************************************************************************************/
+/* jQuery UI Slider plugin wrapper */
+/*********************************************************************************************************/
+
 angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider', ['uiSliderConfig', '$timeout', function (uiSliderConfig, $timeout) {
     uiSliderConfig = uiSliderConfig || {};
     return {
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js
index 52abe31714..2d357a4769 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js
@@ -1,3 +1,8 @@
+
+/*********************************************************************************************************/
+/* spectrum color picker directive */
+/*********************************************************************************************************/
+
 angular.module('spectrumcolorpicker', [])
   .directive('spectrum', function () {
       return {
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.baseStyles.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.baseStyles.less
deleted file mode 100644
index 27b696e32a..0000000000
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.baseStyles.less
+++ /dev/null
@@ -1,536 +0,0 @@
-
-    /**********************************************************/
-    /* 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);}
-
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 fc2c7f5741..73dd3b3e49 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
@@ -9,10 +9,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 = 0;
-    $scope.frameFirstLoaded = false;
+    $scope.frameLoaded = false;
+    $scope.enableTuning = 0;
     $scope.tuningParameterUrl = "";
-    $scope.tuningGridStyleUrl = "";
     $scope.tuningGridList = "";
     $scope.schemaFocus = "body";
     $scope.settingIsOpen = 'previewDevice';
@@ -37,7 +36,7 @@ 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/Load', { params: { tuningStyleUrl: $scope.tuningParameterUrl, tuningGridStyleUrl: $scope.tuningGridStyleUrl } })
+        $http.get('/Umbraco/Api/tuning/Load', { params: { tuningStyleUrl: $scope.tuningParameterUrl, pageId: $location.search().id } })
             .success(function (data) {
 
                 $.each(tuningConfig.categories, function (indexCategory, category) {
@@ -84,90 +83,33 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
     // Add Less parameters for each grid row
     var initGridConfig = function () {
 
-        var rowModel = {
-            name: "Grid",
-            sections: [{
-                name: "Main",
-                subSections: []
-            }]
-        };
+        if ($scope.tuningGridList) {
 
-        $.each($scope.tuningGridList, function (index, row) {
+            $.each($scope.tuningGridList, function (index, row) {
 
-            var newIndex = rowModel.sections[0].subSections.length + 1;
+                //TODO: not very clear, maybe put all styling together
+                var stylingSubSection = tuningConfig.categories[1].sections[0].subSections
+                var newIndex = stylingSubSection.length + 1;
+                var rowFieldModel = angular.copy(rowModel);
 
-            var rowFieldModel = {
-                name: "Row",
-                schema: "",
-                fields: [
-                    {
-                        name: "Background color",
-                        alias: "backgroundRowColor",
-                        description: "Background body color",
-                        type: "colorPicker",
-                        value: "",
-                        colorPaletteProperty: "colorBodyBackground"
-                    },
-                    {
-                        name: "Background gradient",
-                        alias: "backgroundRowGradientColor",
-                        description: "Fade the background to this colour at the bottom",
-                        type: "colorPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image/Pattern",
-                        alias: "backgroundRowImageOrPattern",
-                        description: "Use an image for the background instead of a solid colour/gradient",
-                        type: "bgImagePicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image position",
-                        alias: "backgroundRowPosition",
-                        description: "Background body position",
-                        type: "bgPositionPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Stretch background",
-                        alias: "backgroundRowCover",
-                        description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below",
-                        type: "checkbox",
-                        value: ""
-                    },
-                    {
-                        name: "Background tiling",
-                        alias: "backgroundRowRepeat",
-                        description: "How to tile the background image",
-                        type: "bgRepeatPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Background scrolling behaviour",
-                        alias: "backgroundRowAttachment",
-                        description: "When fixed the background doesn't scroll with the content",
-                        type: "bgAttachmentPicker",
-                        value: ""
-                    }
-                ]
-            };
+                var rowNumber = index + 1;
+                rowFieldModel.name = "Grid Row " + rowNumber;
+                stylingSubSection.splice(newIndex + 1, 0, rowFieldModel);
+                stylingSubSection[newIndex - 1].schema = "." + row;
 
-            rowModel.sections[0].subSections.splice(newIndex, 0, rowFieldModel);
-            rowModel.sections[0].subSections[newIndex - 1].schema = "." + row;
-            $.each(rowModel.sections[0].subSections[newIndex - 1].fields, function (indexField, field) {
-                field.alias = field.alias + "__" + row;
-            });
+                $.each(stylingSubSection[newIndex - 1].fields, function (indexField, field) {
+                    field.alias = field.alias + "__" + row;
+                });
 
-        })
-
-        tuningConfig.categories.splice(tuningConfig.categories.length + 1, 0, rowModel);
+            })
+        }
 
     }
 
     // Refresh all less parameters for every changes watching tuningModel 
     var refreshtuning = function () {
         var parameters = [];
+
         if ($scope.tuningModel) {
             $.each($scope.tuningModel.categories, function (indexCategory, category) {
                 $.each(category.sections, function (indexSection, section) {
@@ -189,7 +131,8 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
             });
 
             // Refrech page style
-            document.getElementById("resultFrame").contentWindow.refrechLayout(parameters);
+            if (document.getElementById("resultFrame").contentWindow.refrechLayout)
+                document.getElementById("resultFrame").contentWindow.refrechLayout(parameters);
         }
     }
 
@@ -239,7 +182,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
                 $.each(section.subSections, function (indexSubSection, subSection) {
                     $.each(subSection.fields, function (indexField, field) {
 
-                        if (subSection.schema && subSection.schema.indexOf("grid-row-") >= 0) {
+                        if (subSection.schema && subSection.schema.indexOf("gridrow_") >= 0) {
                             var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value;
                             parametersGrid.splice(parametersGrid.length + 1, 0, "@" + field.alias + ":" + value + ";");
                         }
@@ -291,15 +234,13 @@ 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.enableTuning++;
             $scope.pageId = $scope.pageId + "&n=123456";
             $('.btn-default-delete').attr("disabled", false);
         })
-
     }
 
     // Toggle panel
@@ -393,7 +334,9 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
 
     // Focus schema in front
     $scope.accordionWillBeOpened = function (schema) {
-        setSelectedSchema(schema);
+        if (schema) {
+            setSelectedSchema(schema);
+        }
     }
 
     // Preload of the google font
@@ -401,10 +344,12 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
         $scope.googleFontFamilies = data;
     })
 
-    // watch framLoaded
-    $scope.$watch("frameLoaded", function () {
-        if ($scope.frameLoaded > 0) {
-            initGridConfig();
+    // watch framLoaded, only if iframe page have EnableTuning()
+    $scope.$watch("enableTuning", function () {
+        if ($scope.enableTuning > 0) {
+            if ($scope.enableTuning == 1) {
+                initGridConfig();
+            }
             initTuning();
             $scope.$watch('tuningModel', function () {
                 refreshtuning();
@@ -412,11 +357,12 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
         }
     }, true)
 
-    // first panel init
-    initTuning();
-
-    // toggle panel
-    $scope.togglePanel();
+    // First default load
+    $timeout(function () {
+        // toggle panel
+        $scope.frameLoaded = true;
+        $timeout(function () { 1000, $scope.togglePanel(); });
+    }, 1000);
 
 })
 
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less
index 12745d5cb5..253ee9950d 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less
@@ -31,7 +31,7 @@
 @backgroundHeaderCover:true;
 @backgroundHeaderRepeat:'';
 @backgroundHeaderAttachment:fixed;
-@backgroundFooterColor:rgb(51, 51, 51);
+@backgroundFooterColor:rgb(51, 51, 51); 
 @backgroundFooterGradientColor:'';
 @backgroundFooterImageOrPattern:'';
 @backgroundFooterPosition:center;
@@ -235,7 +235,6 @@ h1 {
     }
 }
 
-
 /* Wrapper for wide or boxed view */
 
 .wrapper {
@@ -1044,7 +1043,7 @@ body {
 @media (min-width: 768px) {
 
     .wrapper { .wide-wrapper; }
-    usky-grid-full-size .container { .wide-usky-grid-full-size; }
+    .usky-grid-full-size .container { .wide-usky-grid-full-size; }
 
     .wrapper { .wide-wrapper-768; }
     .wrapper .container { .wide-container; }
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 444334632f..7dedfddfcc 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
@@ -6,7 +6,9 @@ var refrechLayout = function (parameters) {
 
     // Disable links
     $('a').addClass("myDisable");
-    $('a').bind("click.myDisable", function () { return false; });
+    $('a').bind("click.myDisable", function () {
+        return false;
+    });
 
     var string = "less.modifyVars({" + parameters.join(",") + "})";
     eval(string);
@@ -48,17 +50,13 @@ var getFont = function (font) {
 }
 
 var setSelectedSchema = function (schema) {
-    $("[tuning-over]").css('outline', 'none');
-    $(schema).css('outline', '2px solid blue');
+    outlinePosition($(schema));
 }
 
 var closeIntelTuning = function (tuningModel) {
 
     if (tuningModel) {
 
-        //$('a').removeClass("myDisable");
-        //$('a').unbind("click.myDisable");
-
         $("[tuning-over]").css('outline', 'none');
         $.each(tuningModel.categories, function (key, category) {
             $.each(category.sections, function (key, section) {
@@ -78,9 +76,7 @@ var initIntelTuning = function (tuningModel) {
 
     if (tuningModel) {
 
-        //$('a').addClass("myDisable");
-        //$('a').bind("click.myDisable", function () { return false; });
-
+        // Add tuning-over attr for each schema from config
         $.each(tuningModel.categories, function (key, category) {
             $.each(category.sections, function (key, section) {
                 $.each(section.subSections, function (key, subSection) {
@@ -91,47 +87,138 @@ var initIntelTuning = function (tuningModel) {
             });
         });
 
+        // Outline tuning-over
         $(document).mousemove(function (e) {
 
             e.stopPropagation();
 
-            $("[tuning-over]").css('outline', 'none');
-
             var target = $(e.target);
             while (target.length > 0 && (target.attr('tuning-over') == undefined || target.attr('tuning-over') == '')) {
                 target = target.parent();
             }
 
-            if (target.attr('tuning-over') != undefined || target.attr('tuning-over') != '') {
+            if (target.attr('tuning-over') != undefined && target.attr('tuning-over') != '') {
                 target.unbind();
-                target.css('outline', '2px solid blue');
+
+                outlinePosition(target);
+
                 target.click(function (e) {
                     e.stopPropagation();
+                    e.preventDefault();
                     console.info(target.attr('tuning-over'));
                     parent.refrechIntelTuning(target.attr('tuning-over'));
+                    return false;
                 });
             }
+            else {
+                outlineHide();
+            }
         });
 
     }
 
 }
 
+var outlinePosition = function (target) {
+
+    var localname = target[0].localName;
+    var height = $(target).height();
+    var width = $(target).width();
+    var position = $(target).offset();
+
+    console.info("element select " + localname);
+
+    $("#outline-data").html(localname);
+    $("#outline-data").css('position', 'fixed');
+    $("#outline-data").css('top', position.top);
+    $("#outline-data").css('left', position.left);
+    $("#outline-data").css('display', 'block');
+    $("#outline-data").css('position', 'fixed');
+    $("#outline-data").css('background-color', 'rgb(164, 198, 253)');
+    $("#outline-data").css('color', '#000000');
+    $("#outline-data").css('padding', '0px 5px 0px 5px');
+    $("#outline-data").css('font-size', '11px');
+    $("#outline-data").css('transition', 'all .05s ease-in-out');
+    $("#outline-data").css('-moz-transition', 'all .05s ease-in-out');
+    $("#outline-data").css('-webkit-transition', 'all .05s ease-in-out');
+
+    $("#outline-sup").css('display', "block");
+    $("#outline-sup").css('height', "2px");
+    $("#outline-sup").css('width', width + "px");
+    $("#outline-sup").css('position', 'fixed');
+    $("#outline-sup").css('top', position.top);
+    $("#outline-sup").css('left', position.left);
+    $("#outline-sup").css('background-color', '#a4c6fd');
+    $("#outline-sup").css('transition', 'all .05s ease-in-out');
+    $("#outline-sup").css('-moz-transition', 'all .05s ease-in-out');
+    $("#outline-sup").css('-webkit-transition', 'all .05s ease-in-out');
+
+    $("#outline-inf").css('display', "block");
+    $("#outline-inf").css('height', "2px");
+    $("#outline-inf").css('width', Number(width + 2) + "px");
+    $("#outline-inf").css('position', 'fixed');
+    $("#outline-inf").css('top', position.top + height);
+    $("#outline-inf").css('left', position.left);
+    $("#outline-inf").css('background-color', '#a4c6fd');
+    $("#outline-inf").css('transition', 'all .05s ease-in-out');
+    $("#outline-inf").css('-moz-transition', 'all .05s ease-in-out');
+    $("#outline-inf").css('-webkit-transition', 'all .05s ease-in-out');
+
+    $("#outline-left").css('display', "block");
+    $("#outline-left").css('height', height + "px");
+    $("#outline-left").css('width', "2px");
+    $("#outline-left").css('position', 'fixed');
+    $("#outline-left").css('top', position.top);
+    $("#outline-left").css('left', position.left);
+    $("#outline-left").css('background-color', '#a4c6fd');
+    $("#outline-left").css('transition', 'all .05s ease-in-out');
+    $("#outline-left").css('-moz-transition', 'all .05s ease-in-out');
+    $("#outline-left").css('-webkit-transition', 'all .05s ease-in-out');
+
+    $("#outline-right").css('display', "block");
+    $("#outline-right").css('height', height + "px");
+    $("#outline-right").css('width', "2px");
+    $("#outline-right").css('position', 'fixed');
+    $("#outline-right").css('top', position.top);
+    $("#outline-right").css('left', position.left + width);
+    $("#outline-right").css('background-color', '#a4c6fd');
+    $("#outline-right").css('transition', 'all .05s ease-in-out');
+    $("#outline-right").css('-moz-transition', 'all .05s ease-in-out');
+    $("#outline-right").css('-webkit-transition', 'all .05s ease-in-out');
+
+}
+
+var outlineHide = function () {
+
+    $("#outline-data").css('display', "none");
+    $("#outline-sup").css('display', "none");
+    $("#outline-inf").css('display', "none");
+    $("#outline-right").css('display', "none");
+    $("#outline-left").css('display', "none");
+
+}
+
 var initTuningPanel = function () {
 
     // Looking for grid row
     var tuningGridList = []
-    $("div[class^='grid-row-']").each(function (index, value) {
+    $("div[class^='gridrow_']").each(function (index, value) {
         tuningGridList.splice(tuningGridList.length + 1, 0, $(value).attr("class"))
     });
 
     // Init panel 
     if (parent.setFrameIsLoaded) {
-        parent.setFrameIsLoaded(tuningParameterUrl, tuningGridStyleUrl, tuningGridList);
+        parent.setFrameIsLoaded(tuningParameterUrl, tuningGridList);
     }
 }
 
 $(function () {
+
+    // Init ouline layer
+    $("body").append("<div id=\"outline-data\"></div><div id=\"outline-sup\"></div><div id=\"outline-inf\"></div><div id=\"outline-left\"></div><div id=\"outline-right\"></div>");
+
+    // Init tuning panel
     initTuningPanel();
+
 });
 
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 ae17690921..e9d9e36b8a 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js
@@ -3,50 +3,50 @@
 /* Global function and variable for panel/page com  */
 /*********************************************************************************************************/
 
-/* Refresh tuning panel with selected fieds */
+/* Called for every tuning-over rollover */
 var refrechIntelTuning = function (schema) {
 
     var scope = angular.element($("#tuningPanel")).scope();
 
-    var notFound = true;
-    angular.forEach(scope.tuningModel.categories, function (category, key) {
-        var isContainer = false;
-        angular.forEach(category.sections, function (section, key) {
-            angular.forEach(section.subSections, function (subSection, key) {
-                if (subSection.schema && schema.toLowerCase() == subSection.schema.toLowerCase()) {
-                    isContainer = true;
-                    notFound = false
-                }
+    if (scope.schemaFocus != schema.toLowerCase()) {
 
+        var notFound = true;
+        angular.forEach(scope.tuningModel.categories, function (category, key) {
+            var isContainer = false;
+            angular.forEach(category.sections, function (section, key) {
+                angular.forEach(section.subSections, function (subSection, key) {
+                    if (subSection.schema && schema.toLowerCase() == subSection.schema.toLowerCase()) {
+                        isContainer = true;
+                        notFound = false
+                    }
+
+                });
             });
+            if (!category.active) {
+                category.active = isContainer;
+            }
         });
-        if (!category.active) {
-            category.active = isContainer;
+        if (notFound) {
+            scope.tuningModel.categories[0].active = true;
         }
-    });
-    if (notFound) {
-        scope.tuningModel.categories[0].active = true;
-    }
-    scope.$apply();
+        scope.$apply();
 
-    if (notFound) {
-        scope.schemaFocus = "body";
-    }
-    else {
-        scope.schemaFocus = schema.toLowerCase();
-    }
-
-    scope.$apply();
+        if (notFound) {
+            scope.schemaFocus = "body";
+        }
+        else {
+            scope.schemaFocus = schema.toLowerCase();
+        }
 
+        scope.$apply();
+    }
 }
 
-var setFrameIsLoaded = function (tuningParameterUrl, tuningGridStyleUrl, tuningGridList) {
-    console.info("iframe id loaded " + tuningParameterUrl + " " + tuningGridStyleUrl);
+/* Called when the iframe is first loaded */
+var setFrameIsLoaded = function (tuningParameterUrl, tuningGridList) {
     var scope = angular.element($("#tuningPanel")).scope();
     scope.tuningParameterUrl = tuningParameterUrl;
-    scope.tuningGridStyleUrl = tuningGridStyleUrl;
     scope.tuningGridList = tuningGridList
-    scope.frameLoaded++;
-    scope.frameFirstLoaded = true;
+    scope.enableTuning++;
     scope.$apply();
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.config.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.config.js
deleted file mode 100644
index 3db7899b10..0000000000
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.config.js
+++ /dev/null
@@ -1,1345 +0,0 @@
-
-/*********************************************************************************************************/
-/* Tuning setting panel config */
-/*********************************************************************************************************/
-
-var tuningConfig = {
-    categories: [{
-        name: "Background",
-        sections: [{
-            name: "Main",
-            subSections: [{
-                name: "Body",
-                schema: "body",
-                fields: [
-                    {
-                        name: "Background color",
-                        alias: "backgroundBodyColor",
-                        description: "Background body color",
-                        type: "colorPicker",
-                        value: "",
-                        colorPaletteProperty: "colorBodyBackground"
-                    },
-                    {
-                        name: "Background gradient",
-                        alias: "backgroundBodyGradientColor",
-                        description: "Fade the background to this colour at the bottom",
-                        type: "colorPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image/Pattern",
-                        alias: "backgroundBodyImageOrPattern",
-                        description: "Use an image for the background instead of a solid colour/gradient",
-                        type: "bgImagePicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image position",
-                        alias: "backgroundBodyPosition",
-                        description: "Background body position",
-                        type: "bgPositionPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Stretch background",
-                        alias: "backgroundBodyCover",
-                        description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below",
-                        type: "checkbox",
-                        value: ""
-                    },
-                    {
-                        name: "Background tiling",
-                        alias: "backgroundBodyRepeat",
-                        description: "How to tile the background image",
-                        type: "bgRepeatPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Background scrolling behaviour",
-                        alias: "backgroundBodyAttachment",
-                        description: "When fixed the background doesn't scroll with the content",
-                        type: "bgAttachmentPicker",
-                        value: ""
-                    }
-                ]
-            },
-            {
-                name: "Main",
-                schema: ".content",
-                fields: [
-                    {
-                        name: "Color",
-                        alias: "backgroundMainColumnColor",
-                        description: "Background main column color",
-                        type: "colorPicker",
-                        value: "",
-                        colorPaletteProperty: "colorMainColumnBackground"
-                    },
-                    {
-                        name: "Gradient Color",
-                        alias: "backgroundMainColumnGradientColor",
-                        description: "Background main column gradient color",
-                        type: "colorPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image/Pattern",
-                        alias: "backgroundMainColumnImageOrPattern",
-                        description: "Background main column image/pattern",
-                        type: "bgImagePicker",
-                        value: ""
-                    },
-                    {
-                        name: "Position",
-                        alias: "backgroundMainColumnPosition",
-                        description: "Background main column position",
-                        type: "bgPositionPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Cover",
-                        alias: "backgroundMainColumnCover",
-                        description: "Background MainColumn cover",
-                        type: "checkbox",
-                        value: ""
-                    },
-                    {
-                        name: "Repeat",
-                        alias: "backgroundMainColumnRepeat",
-                        description: "Background main column repeat",
-                        type: "bgRepeatPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Attachment",
-                        alias: "backgroundMainColumnAttachment",
-                        description: "Background main column attachment",
-                        type: "bgAttachmentPicker",
-                        value: ""
-                    }
-                ]
-            },
-            {
-                name: "Header",
-                schema: "header",
-                fields: [
-                    {
-                        name: "Color",
-                        alias: "backgroundHeaderColor",
-                        description: "Background header color",
-                        type: "colorPicker",
-                        value: "",
-                        colorPaletteProperty: "colorHeaderBackground"
-                    },
-                    {
-                        name: "Gradient Color",
-                        alias: "backgroundHeaderGradientColor",
-                        description: "Background header gradient color",
-                        type: "colorPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image/Pattern",
-                        alias: "backgroundHeaderImageOrPattern",
-                        description: "Background header image/pattern",
-                        type: "bgImagePicker",
-                        value: ""
-                    },
-                    {
-                        name: "Position",
-                        alias: "backgroundHeaderPosition",
-                        description: "Background header position",
-                        type: "bgPositionPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Cover",
-                        alias: "backgroundHeaderCover",
-                        description: "Background Header cover",
-                        type: "checkbox",
-                        value: ""
-                    },
-                    {
-                        name: "Repeat",
-                        alias: "backgroundHeaderRepeat",
-                        description: "Background header repeat",
-                        type: "bgRepeatPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Attachment",
-                        alias: "backgroundHeaderAttachment",
-                        description: "Background header attachment",
-                        type: "bgAttachmentPicker",
-                        value: ""
-                    }
-                ]
-            },
-            {
-                name: "Footer",
-                schema: ".footer",
-                fields: [
-                    {
-                        name: "Color",
-                        alias: "backgroundFooterColor",
-                        description: "Background footer color",
-                        type: "colorPicker",
-                        value: "",
-                        colorPaletteProperty: "colorHeaderBackground"
-                    },
-                    {
-                        name: "Gradient Color",
-                        alias: "backgroundFooterGradientColor",
-                        description: "Background footer gradient color",
-                        type: "colorPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image/Pattern",
-                        alias: "backgroundFooterImageOrPattern",
-                        description: "Background footer image/pattern",
-                        type: "bgImagePicker",
-                        value: ""
-                    },
-                    {
-                        name: "Position",
-                        alias: "backgroundFooterPosition",
-                        description: "Background footer position",
-                        type: "bgPositionPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Cover",
-                        alias: "backgroundFooterCover",
-                        description: "Background Footer cover",
-                        type: "checkbox",
-                        value: ""
-                    },
-                    {
-                        name: "Repeat",
-                        alias: "backgroundFooterRepeat",
-                        description: "Background footer repeat",
-                        type: "bgRepeatPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Attachment",
-                        alias: "backgroundFooterAttachment",
-                        description: "Background footer attachment",
-                        type: "bgAttachmentPicker",
-                        value: ""
-                    }
-                ]
-            }]
-        }]
-    },
-    {
-        name: "Styling",
-        sections: [{
-            name: "General",
-            subSections: [{
-                name: "Main",
-                fields: [{
-                    name: "Layout",
-                    alias: "stylingMainColumnBoxed",
-                    description: "Main column layout",
-                    type: "layoutPicker",
-                    value: "boxed"
-                },
-                {
-                    name: "Header Top Margin",
-                    alias: "stylingHeaderTopMargin",
-                    description: "Header top margin",
-                    type: "slider",
-                    min: "0",
-                    max: "100",
-                    value: "0"
-                },
-                {
-                    name: "Main Top Margin",
-                    alias: "stylingMainColumnTopMargin",
-                    description: "Main column top margin",
-                    type: "slider",
-                    min: "0",
-                    max: "100",
-                    value: "0"
-                },
-                {
-                    name: "Footer Top Margin",
-                    alias: "stylingFooterTopMargin",
-                    description: "Footer top margin",
-                    type: "slider",
-                    min: "0",
-                    max: "100",
-                    value: "0"
-                },
-                {
-                    name: "Footer Bottom Margin",
-                    alias: "stylingFooterBottompMargin",
-                    description: "Footer Bottom margin",
-                    type: "slider",
-                    min: "0",
-                    max: "100",
-                    value: "0"
-                },
-                {
-                    name: "Radius",
-                    alias: "stylingMainColumnRadius",
-                    description: "Main column radius",
-                    type: "slider",
-                    min: "0",
-                    max: "20",
-                    value: "0"
-                },
-                {
-                    name: "Shadow",
-                    alias: "stylingMainColumnShadow",
-                    description: "Main column shadow",
-                    type: "slider",
-                    min: "0",
-                    max: "100",
-                    value: "0"
-                }]
-            },
-            {
-                name: "Header",
-                fields: [{
-                    name: "Top Border Size",
-                    alias: "stylingHeaderTopBorderSize",
-                    description: "Header top border size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Bottom Border Size",
-                    alias: "stylingHeaderBottomBorderSize",
-                    description: "Header bottom border size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Top Border color",
-                    alias: "stylingHeaderTopBorderColor",
-                    description: "Header top border color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Bottom Border color",
-                    alias: "stylingHeaderBottomBorderColor",
-                    description: "Header bottom border color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Min Height",
-                    alias: "stylingHeaderMinHeight",
-                    description: "Header min height",
-                    type: "slider",
-                    min: "0",
-                    max: "500",
-                    value: "0"
-                },
-                {
-                    name: "Logo Top Margin",
-                    alias: "stylingHeaderLogoTopMargin",
-                    description: "Header logo top margin",
-                    type: "slider",
-                    min: "-100",
-                    max: "100",
-                    value: "0"
-                }]
-            },
-            {
-                name: "Navigation",
-                schema: ".navbar-collapse",
-                fields: [{
-                    name: "Display",
-                    alias: "stylingNavDisplay",
-                    description: "Navigation display",
-                    type: "displayPicker",
-                    value: ""
-                },
-                {
-                    name: "Background Color",
-                    alias: "stylingNavBackgroundColor",
-                    description: "Navigation background color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorNavBackground"
-                },
-                {
-                    name: "Background Color L2",
-                    alias: "stylingNavBackgroundDdl",
-                    description: "Navigation background color for Level 2",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorNavBackground"
-                },
-                {
-                    name: "Active Background Color",
-                    alias: "stylingNavBackgroundActiveColor",
-                    description: "Navigation active background color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Margin Top",
-                    alias: "stylingNavMarginTop",
-                    description: "Navigation Margin Top",
-                    type: "slider",
-                    min: "-200",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Radius",
-                    alias: "stylingNavRadius",
-                    description: "Navigation radius",
-                    type: "slider",
-                    min: "0",
-                    max: "20",
-                    value: "0"
-                },
-                {
-                    name: "Radius Only Top",
-                    alias: "stylingNavRadiusOnlyTop",
-                    description: "Navigation radius only top",
-                    type: "checkbox",
-                    value: ""
-                },
-                {
-                    name: "Active Top Border Size",
-                    alias: "stylingNavItemTopBorderActiveSize",
-                    description: "Navigation active top border size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Active Bottom Border Size",
-                    alias: "stylingNavItemBottomBorderActiveSize",
-                    description: "Navigation active bottom border size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Active Top Border Color",
-                    alias: "stylingNavItemTopBorderActiveColor",
-                    description: "Navigation active top border color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Active Bottom Border Color",
-                    alias: "stylingNavItemBottomBorderActiveColor",
-                    description: "Navigation active bottom border color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                }]
-            },
-            {
-                name: "Social Links",
-                fields: [{
-                    name: "Display",
-                    alias: "stySocialDisplay",
-                    description: "Social links list display",
-                    type: "displayPicker",
-                    value: ""
-                },
-                {
-                    name: "Background Color",
-                    alias: "stySocialBackgroundColor",
-                    description: "Social links list background color",
-                    type: "colorPicker",
-                    value: ""
-                },
-                {
-                    name: "Top Margin",
-                    alias: "stySocialTopMargin",
-                    description: "Social links list top margin",
-                    type: "slider",
-                    min: "0",
-                    max: "500",
-                    value: "0"
-                },
-                {
-                    name: "Border Top Size",
-                    alias: "stySocialBorderTopSize",
-                    description: "Social links list border top size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Border Bottom Size",
-                    alias: "stySocialBorderBottomSize",
-                    description: "Social links list border bottom size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Border Top Color",
-                    alias: "stySocialBorderTopColor",
-                    description: "Social links list border top color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Border Bottom Color",
-                    alias: "stySocialBorderBottomColor",
-                    description: "Social links list border bottom color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                }]
-            },
-            {
-                name: "Boxes",
-                fields: [{
-                    name: "Background Color",
-                    alias: "stylingBoxesBackgroundColor",
-                    description: "Boxes background color",
-                    type: "colorPicker",
-                    value: ""
-                },
-                {
-                    name: "Min Height",
-                    alias: "stylingBoxesMinHeight",
-                    description: "Boxes min height",
-                    type: "slider",
-                    min: "0",
-                    max: "500",
-                    value: "0"
-                },
-                {
-                    name: "Radius",
-                    alias: "stylingBoxesRadius",
-                    description: "Boxes radius",
-                    type: "slider",
-                    min: "0",
-                    max: "20",
-                    value: "0"
-                },
-                {
-                    name: "Border Size",
-                    alias: "stylingBoxesBorderSize",
-                    description: "Boxes border size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Border Color",
-                    alias: "stylingBoxesBorderColor",
-                    description: "Boxes border color",
-                    type: "colorPicker",
-                    value: ""
-                }]
-            },
-            {
-                name: "Thumbnails",
-                fields: [{
-                    name: "Background Color",
-                    alias: "stylingThumbnailsBackgroundColor",
-                    description: "Thumbnails background color",
-                    type: "colorPicker",
-                    value: ""
-                },
-                {
-                    name: "Min Height",
-                    alias: "stylingThumbnailsMinHeight",
-                    description: "Thumbnails min height",
-                    type: "slider",
-                    min: "0",
-                    max: "500",
-                    value: "0"
-                },
-                {
-                    name: "Radius",
-                    alias: "stylingThumbnailsRadius",
-                    description: "Thumbnails radius",
-                    type: "slider",
-                    min: "0",
-                    max: "20",
-                    value: "0"
-                },
-                {
-                    name: "Border Size",
-                    alias: "stylingThumbnailsBorderSize",
-                    description: "Thumbnails border size",
-                    type: "slider",
-                    min: "0",
-                    max: "50",
-                    value: "0"
-                },
-                {
-                    name: "Border Color",
-                    alias: "stylingThumbnailsBorderColor",
-                    description: "Thumbnails border color",
-                    type: "colorPicker",
-                    value: ""
-                }]
-            }]
-        }]
-    },
-    {
-        name: "Fonts",
-        sections: [{
-            name: "Main",
-            subSections: [{
-                name: "Body",
-                schema: "p",
-                fields: [{
-                    name: "Color",
-                    alias: "FontBodyColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontDefault"
-                },
-                {
-                    name: "Size",
-                    alias: "FontBodySize",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontBodyLineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontBodyFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            },
-            {
-                name: "Navigation",
-                fields: [{
-                    name: "Font Color",
-                    alias: "FontNavFontColor",
-                    description: "Navigation font color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRev"
-                },
-                {
-                    name: "Active Font Color",
-                    alias: "FontNavFontActiveColor",
-                    description: "Navigation active font color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRevActive"
-                },
-                {
-                    name: "Size",
-                    alias: "FontNavSize",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontNavLineHeight",
-                    description: "Navigation line height",
-                    type: "slider",
-                    min: "20",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontNavFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            },
-            {
-                name: "Social Link",
-                fields: [{
-                    name: "Font Color",
-                    alias: "FontSocialFontColor",
-                    description: "Social links list font color",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRev"
-                },
-                {
-                    name: "Font Color Hover",
-                    alias: "FontSocialFontColorHover",
-                    description: "Social links list font color hover",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRevActive"
-                },
-                {
-                    name: "Font Size",
-                    alias: "FontSocialFontSize",
-                    description: "Social links list font size",
-                    type: "slider",
-                    min: "8",
-                    max: "36",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontSocialLineHeight",
-                    description: "Social links list line height",
-                    type: "slider",
-                    min: "20",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontSocialFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }
-                ]
-            },
-            {
-                name: "H1",
-                schema: "h1",
-                fields: [{
-                    name: "Color",
-                    alias: "FontH1Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Size",
-                    alias: "FontH1Size",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontH1LineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontH1TopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontH1BottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontH1Family",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "H2",
-                schema: "h2",
-                fields: [{
-                    name: "Color",
-                    alias: "FontH2Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Size",
-                    alias: "FontH2Size",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontH2LineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontH2TopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontH2BottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontH2Family",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "H3",
-                schema: "h3",
-                fields: [{
-                    name: "Color",
-                    alias: "FontH3Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Size",
-                    alias: "FontH3Size",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontH3LineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontH3TopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontH3BottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontH3Family",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "H4",
-                schema: "h4",
-                fields: [{
-                    name: "Color",
-                    alias: "FontH4Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontDefault"
-                },
-                {
-                    name: "Size",
-                    alias: "FontH4Size",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontH4LineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontH4TopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontH4BottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontH4Family",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "H5",
-                schema: "h5",
-                fields: [{
-                    name: "Color",
-                    alias: "FontH5Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontDefault"
-                },
-                {
-                    name: "Size",
-                    alias: "FontH5Size",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontH5LineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontH5TopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontH5BottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontH5Family",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "H6",
-                schema: "h6",
-                fields: [{
-                    name: "Color",
-                    alias: "FontH6Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontDefault"
-                },
-                {
-                    name: "Size",
-                    alias: "FontH6Size",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontH6LineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontH6TopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontH6BottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontH6Family",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "Medium",
-                fields: [{
-                    name: "Color",
-                    alias: "FontMediumColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontDefault"
-                }, {
-                    name: "Size",
-                    alias: "FontMediumSize",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontMediumLineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontMediumTopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontMediumBottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontMediumFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "Highlighted",
-                fields: [{
-                    name: "Color",
-                    alias: "FontHighlightedColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRev"
-                },
-                {
-                    name: "Background Color",
-                    alias: "FontHighlightedBackgroundColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Family",
-                    alias: "FontHighlightedFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "Big",
-                fields: [{
-                    name: "Color",
-                    alias: "FontBigColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Size",
-                    alias: "FontBigSize",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontBigLineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Top margin",
-                    alias: "FontBigTopMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Bottom margin",
-                    alias: "FontBigBottomMargin",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontBigFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            }, {
-                name: "Button",
-                fields: [{
-                    name: "Color",
-                    alias: "FontButtonColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRev"
-                },
-                {
-                    name: "Background Color",
-                    alias: "FontButtonBackgroundColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                },
-                {
-                    name: "Color Hover",
-                    alias: "FontButtonColorHover",
-                    description: "",
-                    type: "colorPicker",
-                    value: ""
-                },
-                {
-                    name: "Background Color Hover",
-                    alias: "FontButtonBackgroundColorHover",
-                    description: "",
-                    type: "colorPicker",
-                    value: ""
-                },
-                {
-                    name: "Size",
-                    alias: "FontButtonSize",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Line Height",
-                    alias: "FontButtonLineHeight",
-                    description: "",
-                    type: "slider",
-                    min: "8",
-                    max: "64",
-                    value: "0"
-                },
-                {
-                    name: "Padding",
-                    alias: "FontButtonPadding",
-                    description: "",
-                    type: "slider",
-                    min: "0",
-                    max: "200",
-                    value: "0"
-                },
-                {
-                    name: "Family",
-                    alias: "FontButtonFamily",
-                    description: "",
-                    type: "fontFamilyPicker",
-                    fontType: "",
-                    fontWeight: "",
-                    fontStyle: "",
-                    value: ""
-                }]
-            },
-            {
-                name: "Color2",
-                fields: [{
-                    name: "Color",
-                    alias: "FontColor2Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                }]
-            },
-            {
-                name: "Color3",
-                fields: [{
-                    name: "Color",
-                    alias: "FontColor3Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorFontRev"
-                }]
-            },
-            {
-                name: "Color4",
-                fields: [{
-                    name: "Color",
-                    alias: "FontColor4Color",
-                    description: "",
-                    type: "colorPicker",
-                    value: ""
-                }]
-            },
-            {
-                name: "Link",
-                fields: [{
-                    name: "Color",
-                    alias: "FontLinkColor",
-                    description: "",
-                    type: "colorPicker",
-                    value: "",
-                    colorPaletteProperty: "colorBase"
-                }, {
-                    name: "Color Hover",
-                    alias: "FontLinkColorHover",
-                    description: "",
-                    type: "colorPicker",
-                    value: ""
-                }]
-            }]
-        }]
-    }]
-}
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
deleted file mode 100644
index 5d53ae3674..0000000000
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/*********************************************************************************************************/
-/* Global function and variable for panel/page com  */
-/*********************************************************************************************************/
-
-var refrechLayout = function (parameters) {
-
-    // Disable links
-    $('a').addClass("myDisable");
-    $('a').bind("click.myDisable", function () { return false; });
-
-    var string = "less.modifyVars({" + parameters.join(",") + "})";
-    eval(string);
-}
-
-
-/* Fonts loaded in the tuning panel need to be loaded independently in
- * the content iframe to allow live previewing.
- */
-var webFontScriptLoaded = false;
-var getFont = function (font) {
-    if (!webFontScriptLoaded) {
-        $.getScript('http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js')
-        .done(function () {
-            webFontScriptLoaded = true;
-            // Recursively call once webfont script is available.
-            getFont(font);
-        })
-        .fail(function () {
-            console.log('error loading webfont');
-        });
-    }
-    else {
-        WebFont.load({
-            google: {
-                families: [font.fontFamily + ":" + font.variant]
-            },
-            loading: function () {
-                console.log('loading font' + font.fontFamily + ' in iframe');
-            },
-            active: function () {
-                console.log('loaded font ' + font.fontFamily + ' in iframe');
-            },
-            inactive: function () {
-                console.log('error loading font ' + font.fontFamily + ' in iframe');
-            }
-        });
-    }
-}
-
-var setSelectedSchema = function (schema) {
-    $("[tuning-over]").css('outline', 'none');
-    $(schema).css('outline', '2px solid blue');
-}
-
-var closeIntelTuning = function (tuningModel) {
-
-    if (tuningModel) {
-
-        //$('a').removeClass("myDisable");
-        //$('a').unbind("click.myDisable");
-
-        $("[tuning-over]").css('outline', 'none');
-        $.each(tuningModel.categories, function (key, category) {
-            $.each(category.sections, function (key, section) {
-                $.each(section.subSections, function (key, subSection) {
-                    if (subSection.schema) {
-                        $(subSection.schema).unbind();
-                        $(subSection.schema).removeAttr("tuning-over");
-                    }
-                });
-            });
-        });
-    }
-
-}
-
-var initIntelTuning = function (tuningModel) {
-
-    if (tuningModel) {
-
-        //$('a').addClass("myDisable");
-        //$('a').bind("click.myDisable", function () { return false; });
-
-        $.each(tuningModel.categories, function (key, category) {
-            $.each(category.sections, function (key, section) {
-                $.each(section.subSections, function (key, subSection) {
-                    if (subSection.schema) {
-                        $(subSection.schema).attr("tuning-over", subSection.schema);
-                    }
-                });
-            });
-        });
-
-        $(document).mousemove(function (e) {
-
-            e.stopPropagation();
-
-            $("[tuning-over]").css('outline', 'none');
-
-            var target = $(e.target);
-            while (target.length > 0 && (target.attr('tuning-over') == undefined || target.attr('tuning-over') == '')) {
-                target = target.parent();
-            }
-
-            if (target.attr('tuning-over') != undefined || target.attr('tuning-over') != '') {
-                target.unbind();
-                target.css('outline', '2px solid blue');
-                target.click(function (e) {
-                    e.stopPropagation();
-                    console.info(target.attr('tuning-over'));
-                    parent.refrechIntelTuning(target.attr('tuning-over'));
-                });
-            }
-        });
-
-    }
-
-}
-
-var initTuningPanel = function () {
-
-
-
-    $.each("div[class^='grid-row-']", function (index, value) {
-        alert("work");
-    });
-
-
-
-    // Init panel 
-    if (parent.setFrameIsLoaded) {
-        parent.setFrameIsLoaded(tuningParameterUrl, tuningGridStyleUrl);
-    }
-
-}
-
-initTuningPanel();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js
deleted file mode 100644
index 876b8f031d..0000000000
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js
+++ /dev/null
@@ -1,22 +0,0 @@
-LazyLoad.js([
-      '/Umbraco/lib/jquery/jquery-2.0.3.min.js',
-      '/Umbraco/lib/jquery/jquery-ui-1.10.4.custom.min.js',
-      '/Umbraco/lib/angular/1.1.5/angular.min.js',
-      '/Umbraco/lib/underscore/underscore.js',
-      '/Umbraco/js/app.js',
-      '/Umbraco/js/umbraco.resources.js',
-      '/Umbraco/js/umbraco.services.js',
-      '/Umbraco/js/umbraco.security.js',
-      '/Umbraco/ServerVariables',
-      '/Umbraco/lib/angular-bootstrap/ui-bootstrap-tpls-0.10.0.min.js',
-      '/Umbraco/lib/spectrum/spectrum.js',
-      'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js',
-      '/Umbraco/js/tuning.config.js',
-      '/Umbraco/js/tuning.palettes.js',
-      '/umbraco/js/tuning.panel.js'
-], function () {
-    jQuery(document).ready(function () {
-        angular.bootstrap(document, ['umbraco.tuning']);
-    });
-}
-);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js
deleted file mode 100644
index 56789d102e..0000000000
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js
+++ /dev/null
@@ -1,210 +0,0 @@
-
-/*********************************************************************************************************/
-/* Tuning palette tab config */
-/*********************************************************************************************************/
-
-var tuningPalette = [{
-    name: "orange",
-    mainColor: 'rgb(230, 126, 34)',
-    colors: [
-        { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" },
-        { alias: "backgroundBodyGradientColor", value: "" },
-        { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" },
-        { alias: "backgroundMainColumnGradientColor", value: "" },
-        { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundHeaderGradientColor", value: "" },
-        { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundFooterGradientColor", value: "" },
-        { alias: "stylingHeaderTopBorderColor", value: "rgb(230, 126, 34)" },
-        { alias: "stylingHeaderBottomBorderColor", value: "rgb(230, 126, 34)" },
-        { alias: "stylingNavBackgroundColor", value: "" },
-        { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" },
-        { alias: "stylingNavBackgroundActiveColor", value: "rgb(230, 126, 34)" },
-        { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(230, 126, 34)" },
-        { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(230, 126, 34)" },
-        { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" },
-        { alias: "stySocialBorderTopColor", value: "rgb(230, 126, 34)" },
-        { alias: "stySocialBorderBottomColor", value: "rgb(230, 126, 34)" },
-        { alias: "stylingBoxesBackgroundColor", value: "" },
-        { alias: "stylingBoxesBorderColor", value: "" },
-        { alias: "stylingThumbnailsBackgroundColor", value: "" },
-        { alias: "stylingThumbnailsBorderColor", value: "" },
-        { alias: "FontBodyColor", value: "" },
-        { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" },
-        { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" },
-        { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" },
-        { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" },
-        { alias: "FontH1Color", value: "rgb(230, 126, 34)" },
-        { alias: "FontH2Color", value: "rgb(230, 126, 34)" },
-        { alias: "FontH3Color", value: "rgb(230, 126, 34)" },
-        { alias: "FontH4Color", value: "" },
-        { alias: "FontH5Color", value: "" },
-        { alias: "FontH6Color", value: "" },
-        { alias: "FontMediumColor", value: "" },
-        { alias: "FontHighlightedColor", value: "" },
-        { alias: "FontHighlightedBackgroundColor", value: "rgb(230, 126, 34)" },
-        { alias: "FontBigColor", value: "rgb(230, 126, 34)" },
-        { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" },
-        { alias: "FontButtonBackgroundColor", value: "rgb(230, 126, 34)" },
-        { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" },
-        { alias: "FontButtonBackgroundColorHover", value: "rgba(230, 126, 34, 0.74)" },
-        { alias: "FontColor2Color", value: "rgb(230, 126, 34)" },
-        { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" },
-        { alias: "FontColor4Color", value: "rgb(170, 170, 170)" },
-        { alias: "FontLinkColor", value: "rgb(230, 126, 34)" },
-        { alias: "FontLinkColorHover", value: "rgba(230, 126, 34, 0.84)" }
-    ]
-}, {
-    name: "red",
-    mainColor: 'rgb(158, 22, 23)',
-    colors: [
-        { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" },
-        { alias: "backgroundBodyGradientColor", value: "" },
-        { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" },
-        { alias: "backgroundMainColumnGradientColor", value: "" },
-        { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundHeaderGradientColor", value: "" },
-        { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundFooterGradientColor", value: "" },
-        { alias: "stylingHeaderTopBorderColor", value: "rgb(158, 22, 23)" },
-        { alias: "stylingHeaderBottomBorderColor", value: "rgb(158, 22, 23)" },
-        { alias: "stylingNavBackgroundColor", value: "" },
-        { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" },
-        { alias: "stylingNavBackgroundActiveColor", value: "rgb(158, 22, 23)" },
-        { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(158, 22, 23)" },
-        { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(158, 22, 23)" },
-        { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" },
-        { alias: "stySocialBorderTopColor", value: "rgb(158, 22, 23)" },
-        { alias: "stySocialBorderBottomColor", value: "rgb(158, 22, 23)" },
-        { alias: "stylingBoxesBackgroundColor", value: "" },
-        { alias: "stylingBoxesBorderColor", value: "" },
-        { alias: "stylingThumbnailsBackgroundColor", value: "" },
-        { alias: "stylingThumbnailsBorderColor", value: "" },
-        { alias: "FontBodyColor", value: "" },
-        { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" },
-        { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" },
-        { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" },
-        { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" },
-        { alias: "FontH1Color", value: "rgb(158, 22, 23)" },
-        { alias: "FontH2Color", value: "rgb(158, 22, 23)" },
-        { alias: "FontH3Color", value: "rgb(158, 22, 23)" },
-        { alias: "FontH4Color", value: "" },
-        { alias: "FontH5Color", value: "" },
-        { alias: "FontH6Color", value: "" },
-        { alias: "FontMediumColor", value: "" },
-        { alias: "FontHighlightedColor", value: "" },
-        { alias: "FontHighlightedBackgroundColor", value: "rgb(158, 22, 23)" },
-        { alias: "FontBigColor", value: "rgb(158, 22, 23)" },
-        { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" },
-        { alias: "FontButtonBackgroundColor", value: "rgb(158, 22, 23)" },
-        { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" },
-        { alias: "FontButtonBackgroundColorHover", value: "rgba(158, 22, 23, 0.74)" },
-        { alias: "FontColor2Color", value: "rgb(158, 22, 23)" },
-        { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" },
-        { alias: "FontColor4Color", value: "rgb(170, 170, 170)" },
-        { alias: "FontLinkColor", value: "rgb(158, 22, 23)" },
-        { alias: "FontLinkColorHover", value: "rgba(158, 22, 23, 0.84)" }
-    ]
-}, {
-    name: "green",
-    mainColor: 'rgb(138, 198, 10)',
-    colors: [
-        { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" },
-        { alias: "backgroundBodyGradientColor", value: "" },
-        { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" },
-        { alias: "backgroundMainColumnGradientColor", value: "" },
-        { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundHeaderGradientColor", value: "" },
-        { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundFooterGradientColor", value: "" },
-        { alias: "stylingHeaderTopBorderColor", value: "rgb(138, 198, 10)" },
-        { alias: "stylingHeaderBottomBorderColor", value: "rgb(138, 198, 10)" },
-        { alias: "stylingNavBackgroundColor", value: "" },
-        { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" },
-        { alias: "stylingNavBackgroundActiveColor", value: "rgb(138, 198, 10)" },
-        { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(138, 198, 10)" },
-        { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(138, 198, 10)" },
-        { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" },
-        { alias: "stySocialBorderTopColor", value: "rgb(138, 198, 10)" },
-        { alias: "stySocialBorderBottomColor", value: "rgb(138, 198, 10)" },
-        { alias: "stylingBoxesBackgroundColor", value: "" },
-        { alias: "stylingBoxesBorderColor", value: "" },
-        { alias: "stylingThumbnailsBackgroundColor", value: "" },
-        { alias: "stylingThumbnailsBorderColor", value: "" },
-        { alias: "FontBodyColor", value: "" },
-        { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" },
-        { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" },
-        { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" },
-        { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" },
-        { alias: "FontH1Color", value: "rgb(138, 198, 10)" },
-        { alias: "FontH2Color", value: "rgb(138, 198, 10)" },
-        { alias: "FontH3Color", value: "rgb(138, 198, 10)" },
-        { alias: "FontH4Color", value: "" },
-        { alias: "FontH5Color", value: "" },
-        { alias: "FontH6Color", value: "" },
-        { alias: "FontMediumColor", value: "" },
-        { alias: "FontHighlightedColor", value: "" },
-        { alias: "FontHighlightedBackgroundColor", value: "rgb(138, 198, 10)" },
-        { alias: "FontBigColor", value: "rgb(138, 198, 10)" },
-        { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" },
-        { alias: "FontButtonBackgroundColor", value: "rgb(138, 198, 10)" },
-        { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" },
-        { alias: "FontButtonBackgroundColorHover", value: "rgba(138, 198, 10, 0.74)" },
-        { alias: "FontColor2Color", value: "rgb(138, 198, 10)" },
-        { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" },
-        { alias: "FontColor4Color", value: "rgb(170, 170, 170)" },
-        { alias: "FontLinkColor", value: "rgb(138, 198, 10)" },
-        { alias: "FontLinkColorHover", value: "rgba(138, 198, 10, 0.84)" }
-    ]
-}, {
-    name: "blue",
-    mainColor: 'rgb(24, 94, 101)',
-    colors: [
-        { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" },
-        { alias: "backgroundBodyGradientColor", value: "" },
-        { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" },
-        { alias: "backgroundMainColumnGradientColor", value: "" },
-        { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundHeaderGradientColor", value: "" },
-        { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" },
-        { alias: "backgroundFooterGradientColor", value: "" },
-        { alias: "stylingHeaderTopBorderColor", value: "rgb(24, 94, 101)" },
-        { alias: "stylingHeaderBottomBorderColor", value: "rgb(24, 94, 101)" },
-        { alias: "stylingNavBackgroundColor", value: "" },
-        { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" },
-        { alias: "stylingNavBackgroundActiveColor", value: "rgb(24, 94, 101)" },
-        { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(24, 94, 101)" },
-        { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(24, 94, 101)" },
-        { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" },
-        { alias: "stySocialBorderTopColor", value: "rgb(24, 94, 101)" },
-        { alias: "stySocialBorderBottomColor", value: "rgb(24, 94, 101)" },
-        { alias: "stylingBoxesBackgroundColor", value: "" },
-        { alias: "stylingBoxesBorderColor", value: "" },
-        { alias: "stylingThumbnailsBackgroundColor", value: "" },
-        { alias: "stylingThumbnailsBorderColor", value: "" },
-        { alias: "FontBodyColor", value: "" },
-        { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" },
-        { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" },
-        { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" },
-        { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" },
-        { alias: "FontH1Color", value: "rgb(24, 94, 101)" },
-        { alias: "FontH2Color", value: "rgb(24, 94, 101)" },
-        { alias: "FontH3Color", value: "rgb(24, 94, 101)" },
-        { alias: "FontH4Color", value: "" },
-        { alias: "FontH5Color", value: "" },
-        { alias: "FontH6Color", value: "" },
-        { alias: "FontMediumColor", value: "" },
-        { alias: "FontHighlightedColor", value: "" },
-        { alias: "FontHighlightedBackgroundColor", value: "rgb(24, 94, 101)" },
-        { alias: "FontBigColor", value: "rgb(24, 94, 101)" },
-        { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" },
-        { alias: "FontButtonBackgroundColor", value: "rgb(24, 94, 101)" },
-        { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" },
-        { alias: "FontButtonBackgroundColorHover", value: "rgba(24, 94, 101, 0.74)" },
-        { alias: "FontColor2Color", value: "rgb(24, 94, 101)" },
-        { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" },
-        { alias: "FontColor4Color", value: "rgb(170, 170, 170)" },
-        { alias: "FontLinkColor", value: "rgb(24, 94, 101)" },
-        { alias: "FontLinkColorHover", value: "rgba(24, 94, 101, 0.84)" }
-    ]
-}];
\ 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
deleted file mode 100644
index 3547b282b2..0000000000
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
+++ /dev/null
@@ -1,902 +0,0 @@
-
-/*********************************************************************************************************/
-/* Global function and variable for panel/page com  */
-/*********************************************************************************************************/
-
-/* Refresh tuning panel with selected fieds */
-var refrechIntelTuning = function (schema) {
-
-    var scope = angular.element($("#tuningPanel")).scope();
-
-    var notFound = true;
-    angular.forEach(scope.tuningModel.categories, function (category, key) {
-        var isContainer = false;
-        angular.forEach(category.sections, function (section, key) {
-            angular.forEach(section.subSections, function (subSection, key) {
-                if (subSection.schema && schema.toLowerCase() == subSection.schema.toLowerCase()) {
-                    isContainer = true;
-                    notFound = false
-                }
-
-            });
-        });
-        if (!category.active) {
-            category.active = isContainer;
-        }
-    });
-    if (notFound) {
-        scope.tuningModel.categories[0].active = true;
-    }
-    scope.$apply();
-
-    if (notFound) {
-        scope.schemaFocus = "body";
-    }
-    else {
-        scope.schemaFocus = schema.toLowerCase();
-    }
-
-    scope.$apply();
-
-}
-
-var setFrameIsLoaded = function (tuningParameterUrl, tuningGridStyleUrl, tuningGridList) {
-    console.info("iframe id loaded " + tuningParameterUrl + " " + tuningGridStyleUrl);
-    var scope = angular.element($("#tuningPanel")).scope();
-    scope.tuningParameterUrl = tuningParameterUrl;
-    scope.tuningGridStyleUrl = tuningGridStyleUrl;
-    scope.tuningGridList = tuningGridList
-    scope.frameLoaded++;
-    scope.frameFirstLoaded = true;
-    scope.$apply();
-}
-/*********************************************************************************************************/
-/* tuning panel app and controller */
-/*********************************************************************************************************/
-
-// tuning main app
-angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services'])
-
-// panel main controller
-.controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout, $location) {
-
-    $scope.isOpen = false;
-    $scope.frameLoaded = 0;
-    $scope.frameFirstLoaded = false;
-    $scope.tuningParameterUrl = "";
-    $scope.tuningGridStyleUrl = "";
-    $scope.tuningGridList = "";
-    $scope.schemaFocus = "body";
-    $scope.settingIsOpen = 'previewDevice';
-    $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right'];
-    $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'];
-    $scope.BackgroundAttachments = ['scroll', 'fixed'];
-    $scope.Layouts = ['boxed', 'wide', 'full'];
-    $scope.displays = ['float-left', 'float-right', 'block-left', 'block-right', 'none'];
-    $scope.optionHomes = ['icon', 'text', 'none'];
-    $scope.googleFontFamilies = {};
-    $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: "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" },
-        { name: "smartphone landscape  - 320px", css: "smartphone-landscape border", icon: "icon-iphone flip" }
-    ];
-    $scope.previewDevice = $scope.devices[0];
-
-    // Load parameters from GetLessParameters and init data of the tuning config
-    var initTuning = function () {
-
-        $http.get('/Umbraco/Api/tuning/Load', { params: { tuningStyleUrl: $scope.tuningParameterUrl, tuningGridStyleUrl: $scope.tuningGridStyleUrl } })
-            .success(function (data) {
-
-                $.each(tuningConfig.categories, function (indexCategory, category) {
-                    $.each(category.sections, function (indexSection, section) {
-                        $.each(section.subSections, function (indexSubSection, subSection) {
-                            $.each(subSection.fields, function (indexField, field) {
-
-                                try {
-
-                                    // value
-                                    field.value = eval("data." + field.alias.replace("@", ""));
-                                    if (field.value == "''") { field.value = ""; }
-
-                                    // special init for font family picker
-                                    if (field.type == "fontFamilyPicker") {
-                                        field.fontWeight = eval("data." + field.alias.replace("@", "") + "_weight");
-                                        field.fontStyle = eval("data." + field.alias.replace("@", "") + "_style");
-                                        field.fontType = eval("data." + field.alias.replace("@", "") + "_type");
-                                        if (field.fontWeight == "''") { field.fontWeight = ""; }
-                                        if (field.fontStyle == "''") { field.fontStyle = ""; }
-                                        if (field.fontType == "''") { field.fontType = ""; }
-                                    }
-                                }
-                                catch (err) {
-                                    console.info("Style parameter not found " + field.alias);
-                                }
-
-                            })
-                        })
-                    })
-                });
-
-                $scope.tuningModel = tuningConfig;
-                $scope.tuningPalette = tuningPalette;
-
-                if ($scope.settingIsOpen == "setting") {
-                    openIntelTuning();
-                }
-
-            });
-
-    }
-
-    // Add Less parameters for each grid row
-    var initGridConfig = function () {
-
-        var rowModel = {
-            name: "Grid",
-            sections: [{
-                name: "Main",
-                subSections: []
-            }]
-        };
-
-        $.each($scope.tuningGridList, function (index, row) {
-
-            var newIndex = rowModel.sections[0].subSections.length + 1;
-
-            var rowFieldModel = {
-                name: "Row",
-                schema: "",
-                fields: [
-                    {
-                        name: "Background color",
-                        alias: "backgroundRowColor",
-                        description: "Background body color",
-                        type: "colorPicker",
-                        value: "",
-                        colorPaletteProperty: "colorBodyBackground"
-                    },
-                    {
-                        name: "Background gradient",
-                        alias: "backgroundRowGradientColor",
-                        description: "Fade the background to this colour at the bottom",
-                        type: "colorPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image/Pattern",
-                        alias: "backgroundRowImageOrPattern",
-                        description: "Use an image for the background instead of a solid colour/gradient",
-                        type: "bgImagePicker",
-                        value: ""
-                    },
-                    {
-                        name: "Image position",
-                        alias: "backgroundRowPosition",
-                        description: "Background body position",
-                        type: "bgPositionPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Stretch background",
-                        alias: "backgroundRowCover",
-                        description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below",
-                        type: "checkbox",
-                        value: ""
-                    },
-                    {
-                        name: "Background tiling",
-                        alias: "backgroundRowRepeat",
-                        description: "How to tile the background image",
-                        type: "bgRepeatPicker",
-                        value: ""
-                    },
-                    {
-                        name: "Background scrolling behaviour",
-                        alias: "backgroundRowAttachment",
-                        description: "When fixed the background doesn't scroll with the content",
-                        type: "bgAttachmentPicker",
-                        value: ""
-                    }
-                ]
-            };
-
-            rowModel.sections[0].subSections.splice(newIndex, 0, rowFieldModel);
-            rowModel.sections[0].subSections[newIndex - 1].schema = "." + row;
-            $.each(rowModel.sections[0].subSections[newIndex - 1].fields, function (indexField, field) {
-                field.alias = field.alias + "__" + row;
-            });
-
-        })
-
-        tuningConfig.categories.splice(tuningConfig.categories.length + 1, 0, rowModel);
-
-    }
-
-    // Refresh all less parameters for every changes watching tuningModel 
-    var refreshtuning = function () {
-        var parameters = [];
-        if ($scope.tuningModel) {
-            $.each($scope.tuningModel.categories, function (indexCategory, category) {
-                $.each(category.sections, function (indexSection, section) {
-                    $.each(section.subSections, function (indexSubSection, subSection) {
-                        $.each(subSection.fields, function (indexField, field) {
-
-                            // value
-                            parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "':'" + field.value + "'");
-
-                            // special init for font family picker
-                            if (field.type == "fontFamilyPicker") {
-                                parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_weight':'" + field.fontWeight + "'");
-                                parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_Style':'" + field.fontStyle + "'");
-                            }
-
-                        })
-                    })
-                })
-            });
-
-            // Refrech page style
-            document.getElementById("resultFrame").contentWindow.refrechLayout(parameters);
-        }
-    }
-
-    var openIntelTuning = function () {
-        document.getElementById("resultFrame").contentWindow.initIntelTuning($scope.tuningModel);
-    }
-
-    var closeIntelTuning = function () {
-        document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel);
-    }
-
-    var setSelectedSchema = function (schema) {
-        document.getElementById("resultFrame").contentWindow.setSelectedSchema(schema);
-    }
-
-    // Refresh with selected tuning palette
-    $scope.refreshtuningByPalette = function (colors) {
-
-        $.each($scope.tuningModel.categories, function (indexCategory, category) {
-            $.each(category.sections, function (indexSection, section) {
-                $.each(section.subSections, function (indexSubSection, subSection) {
-                    $.each(subSection.fields, function (indexField, field) {
-
-                        if (field.type == "colorPicker") {
-                            $.each(colors, function (indexColor, color) {
-                                if (color.alias == field.alias) {
-                                    field.value = color.value;
-                                }
-                            });
-                        }
-
-                    })
-                })
-            })
-        });
-
-        refreshtuning();
-    }
-
-    // Save all parameter in tuningParameters.less file
-    $scope.saveLessParameters = function () {
-
-        var parameters = [];
-        var parametersGrid = [];
-        $.each($scope.tuningModel.categories, function (indexCategory, category) {
-            $.each(category.sections, function (indexSection, section) {
-                $.each(section.subSections, function (indexSubSection, subSection) {
-                    $.each(subSection.fields, function (indexField, field) {
-
-                        if (subSection.schema && subSection.schema.indexOf("grid-row-") >= 0) {
-                            var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value;
-                            parametersGrid.splice(parametersGrid.length + 1, 0, "@" + field.alias + ":" + value + ";");
-                        }
-                        else {
-                            // value
-                            var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value;
-                            parameters.splice(parameters.length + 1, 0, "@" + field.alias + ":" + value + ";");
-
-                            // special init for font family picker
-                            if (field.type == "fontFamilyPicker") {
-                                if (field.fontType == "google" && value != "''") {
-                                    var variant = field.fontWeight != "" || field.fontStyle != "" ? ":" + field.fontWeight + field.fontStyle : "";
-                                    var gimport = "@import url('http://fonts.googleapis.com/css?family=" + value + variant + "');";
-                                    if ($.inArray(gimport, parameters) < 0) {
-                                        parameters.splice(0, 0, gimport);
-                                    }
-                                }
-                                var fontWeight = (field.fontWeight != 0 && (field.fontWeight == undefined || field.fontWeight == "")) ? "''" : field.fontWeight;
-                                var fontStyle = (field.fontStyle != 0 && (field.fontStyle == undefined || field.fontStyle == "")) ? "''" : field.fontStyle;
-                                var fontType = (field.fontType != 0 && (field.fontType == undefined || field.fontType == "")) ? "''" : field.fontType;
-                                parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_weight:" + fontWeight + ";");
-                                parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_style:" + fontStyle + ";");
-                                parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_type:" + fontType + ";");
-                            }
-                        }
-
-                    })
-                })
-            })
-        });
-
-        var resultParameters = { parameters: parameters.join(""), parametersGrid: parametersGrid.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/Save', resultParameters, {
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
-            transformRequest: transform
-        })
-        .success(function (data) {
-            $('.btn-default-save').attr("disabled", false);
-            $('#speechbubble').fadeIn('slow').delay(5000).fadeOut('slow');
-        });
-
-    }
-
-    // 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) {
-            $scope.isOpen = false;
-            closeIntelTuning();
-        }
-        else {
-            $scope.isOpen = true;
-            $scope.settingOpen($scope.settingIsOpen);
-        }
-    }
-
-    // Toggle setting
-    $scope.settingOpen = function (a) {
-
-        if ($scope.settingIsOpen == "setting" && a != "setting") {
-            closeIntelTuning();
-        }
-
-        if (a == "setting") {
-            openIntelTuning();
-        }
-
-        $scope.settingIsOpen = a;
-    }
-
-    // Remove value from field
-    $scope.removeField = function (field) {
-        field.value = "";
-    }
-
-    // Open image picker modal
-    $scope.open = function (field) {
-        $scope.data = {
-            newFolder: "",
-            modalField: field
-        };
-
-        var modalInstance = $modal.open({
-            scope: $scope,
-            templateUrl: 'myModalContent.html',
-            controller: 'tuning.mediapickercontroller',
-            resolve: {
-                items: function () {
-                    return field.value;
-                }
-            }
-        });
-        modalInstance.result.then(function (selectedItem) {
-            field.value = selectedItem;
-        });
-    };
-
-    // Open font family picker modal
-    $scope.openFontFamilyPickerModal = function (field) {
-        $scope.data = {
-            modalField: field
-        };
-        var modalInstance = $modal.open({
-            scope: $scope,
-            templateUrl: 'fontFamilyPickerModel.html',
-            controller: 'tuning.fontfamilypickercontroller',
-            resolve: {
-                googleFontFamilies: function () {
-                    return $scope.googleFontFamilies;
-                },
-                item: function () {
-                    return field;
-                }
-            }
-        });
-        modalInstance.result.then(function (selectedItem) {
-            field.value = selectedItem.fontFamily;
-            field.fontType = selectedItem.fontType;
-            field.fontWeight = selectedItem.fontWeight;
-            field.fontStyle = selectedItem.fontStyle;
-        });
-    };
-
-    // Set preview device
-    $scope.updatePreviewDevice = function (device) {
-        $scope.previewDevice = device;
-    }
-
-    // Accordion open event
-    $scope.accordionOpened = function (schema) {
-        $scope.schemaFocus = schema;
-    }
-
-    // Focus schema in front
-    $scope.accordionWillBeOpened = function (schema) {
-        setSelectedSchema(schema);
-    }
-
-    // Preload of the google font
-    $http.get('/Umbraco/Api/tuning/GetGoogleFont').success(function (data) {
-        $scope.googleFontFamilies = data;
-    })
-
-    // watch framLoaded
-    $scope.$watch("frameLoaded", function () {
-        if ($scope.frameLoaded > 0) {
-            initGridConfig();
-            initTuning();
-            $scope.$watch('tuningModel', function () {
-                refreshtuning();
-            }, true);
-        }
-    }, true)
-
-    // first panel init
-    initTuning();
-
-    // toggle panel
-    $scope.togglePanel();
-
-})
-
-// Image picker controller
-.controller('tuning.mediapickercontroller', function ($scope, $modalInstance, items, $http, mediaResource, umbRequestHelper, entityResource, mediaHelper) {
-
-    if (mediaHelper && mediaHelper.registerFileResolver) {
-        mediaHelper.registerFileResolver("Umbraco.UploadField", function (property, entity, thumbnail) {
-            if (thumbnail) {
-
-                if (mediaHelper.detectIfImageByExtension(property.value)) {
-                    var thumbnailUrl = umbRequestHelper.getApiUrl(
-                        "imagesApiBaseUrl",
-                        "GetBigThumbnail",
-                        [{ originalImagePath: property.value }]);
-
-                    return thumbnailUrl;
-                }
-                else {
-                    return null;
-                }
-
-            }
-            else {
-                return property.value;
-            }
-        });
-    }
-
-    var modalFieldvalue = $scope.data.modalField.value;
-
-    $scope.currentFolder = {};
-    $scope.currentFolder.children = [];
-    $scope.currentPath = [];
-    $scope.startNodeId = -1;
-
-    $scope.options = {
-        url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
-        formData: {
-            currentFolder: $scope.startNodeId
-        }
-    };
-
-    //preload selected item
-    $scope.selectedMedia = undefined;
-
-    $scope.submitFolder = function (e) {
-        if (e.keyCode === 13) {
-            e.preventDefault();
-            $scope.$parent.data.showFolderInput = false;
-
-            if ($scope.$parent.data.newFolder && $scope.$parent.data.newFolder != "") {
-                mediaResource
-                    .addFolder($scope.$parent.data.newFolder, $scope.currentFolder.id)
-                    .then(function (data) {
-                        $scope.$parent.data.newFolder = undefined;
-                        $scope.gotoFolder(data);
-                    });
-            }
-        }
-    };
-
-    $scope.gotoFolder = function (folder) {
-
-        if (!folder) {
-            folder = { id: $scope.startNodeId, name: "Media", icon: "icon-folder" };
-        }
-
-        if (folder.id > 0) {
-            var matches = _.filter($scope.currentPath, function (value, index) {
-                if (value.id == folder.id) {
-                    value.indexInPath = index;
-                    return value;
-                }
-            });
-
-            if (matches && matches.length > 0) {
-                $scope.currentPath = $scope.currentPath.slice(0, matches[0].indexInPath + 1);
-            }
-            else {
-                $scope.currentPath.push(folder);
-            }
-        }
-        else {
-            $scope.currentPath = [];
-        }
-
-        //mediaResource.rootMedia()
-        mediaResource.getChildren(folder.id)
-            .then(function (data) {
-                folder.children = data.items ? data.items : [];
-
-                angular.forEach(folder.children, function (child) {
-                    child.isFolder = child.contentTypeAlias == "Folder" ? true : false;
-
-                    if (!child.isFolder) {
-                        child.thumbnail = mediaHelper.resolveFile(child, true);
-                        child.image = mediaHelper.resolveFile(child, false);
-                    }
-                });
-
-                $scope.options.formData.currentFolder = folder.id;
-                $scope.currentFolder = folder;
-            });
-    };
-
-    $scope.iconFolder = "glyphicons-icon folder-open"
-
-    $scope.selectMedia = function (media) {
-
-        if (!media.isFolder) {
-            //we have 3 options add to collection (if multi) show details, or submit it right back to the callback
-            $scope.selectedMedia = media;
-            $scope.data.modalField.value = "url(" + $scope.selectedMedia.image + ")";
-        }
-        else {
-            $scope.gotoFolder(media);
-        }
-    };
-
-    //default root item
-    if (!$scope.selectedMedia) {
-        $scope.gotoFolder();
-    }
-
-    $scope.ok = function () {
-        $modalInstance.close($scope.data.modalField.value);
-    };
-
-    $scope.cancel = function () {
-        $scope.data.modalField.value = modalFieldvalue;
-        $modalInstance.dismiss('cancel');
-    };
-
-})
-
-// Font picker controller
-.controller('tuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) {
-
-    $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"];
-    $scope.fonts = [];
-    $scope.selectedFont = {};
-
-    var originalFont = {};
-    originalFont.fontFamily = $scope.data.modalField.value;
-    originalFont.fontType = $scope.data.modalField.fontType;
-    originalFont.fontWeight = $scope.data.modalField.fontWeight;
-    originalFont.fontStyle = $scope.data.modalField.fontStyle;
-
-    var googleGetWeight = function (googleVariant) {
-        return (googleVariant != undefined && googleVariant != "") ? googleVariant.replace("italic", "") : "";
-    };
-
-    var googleGetStyle = function (googleVariant) {
-        var variantStyle = "";
-        if (googleVariant != undefined && googleVariant != "" && googleVariant.indexOf("italic") >= 0) {
-            variantWeight = googleVariant.replace("italic", "");
-            variantStyle = "italic";
-        }
-        return variantStyle;
-    };
-
-    angular.forEach($scope.safeFonts, function (value, key) {
-        $scope.fonts.push({
-            groupName: "Safe fonts",
-            fontType: "safe",
-            fontFamily: value,
-            fontWeight: "normal",
-            fontStyle: "normal",
-        });
-    });
-
-    angular.forEach(googleFontFamilies.items, function (value, key) {
-        var variants = value.variants;
-        var variant = value.variants.length > 0 ? value.variants[0] : "";
-        var fontWeight = googleGetWeight(variant);
-        var fontStyle = googleGetStyle(variant);
-        $scope.fonts.push({
-            groupName: "Google fonts",
-            fontType: "google",
-            fontFamily: value.family,
-            variants: value.variants,
-            variant: variant,
-            fontWeight: fontWeight,
-            fontStyle: fontStyle
-        });
-    });
-
-    $scope.setStyleVariant = function () {
-        if ($scope.selectedFont != undefined) {
-            return {
-                'font-family': $scope.selectedFont.fontFamily,
-                'font-weight': $scope.selectedFont.fontWeight,
-                'font-style': $scope.selectedFont.fontStyle
-            }
-        }
-    };
-
-    $scope.showFontPreview = function (font) {
-        if (font != undefined && font.fontFamily != "" && font.fontType == "google") {
-            // Font needs to be independently loaded in the iframe for live preview to work.
-            document.getElementById("resultFrame").contentWindow.getFont(font);
-
-            WebFont.load({
-                google: {
-                    families: [font.fontFamily + ":" + font.variant]
-                },
-                loading: function () {
-                    console.log('loading');
-                },
-                active: function () {
-                    // If $apply isn't called, the new font family isn't applied until the next user click.
-                    $scope.$apply(function () {
-                        $scope.selectedFont = font;
-                        $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant);
-                        $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant);
-                        // Apply to the page content as a preview.
-                        $scope.data.modalField.value = $scope.selectedFont.fontFamily;
-                        $scope.data.modalField.fontType = $scope.selectedFont.fontType;
-                        $scope.data.modalField.fontWeight = $scope.selectedFont.fontWeight;
-                        $scope.data.modalField.fontStyle = $scope.selectedFont.fontStyle;
-                    });
-                }
-            });
-        }
-        else {
-            // Font is available, apply it immediately in modal preview.
-            $scope.selectedFont = font;
-            // And to page content.
-            $scope.data.modalField.value = $scope.selectedFont.fontFamily;
-            $scope.data.modalField.fontType = $scope.selectedFont.fontType;
-            $scope.data.modalField.fontWeight = $scope.selectedFont.fontWeight;
-            $scope.data.modalField.fontStyle = $scope.selectedFont.fontStyle;
-        }
-    }
-
-    $scope.ok = function () {
-        $modalInstance.close({
-            fontFamily: $scope.selectedFont.fontFamily,
-            fontType: $scope.selectedFont.fontType,
-            fontWeight: $scope.selectedFont.fontWeight,
-            fontStyle: $scope.selectedFont.fontStyle,
-        });
-    };
-
-    $scope.cancel = function () {
-        // Discard font change.
-        $modalInstance.close({
-            fontFamily: originalFont.fontFamily,
-            fontType: originalFont.fontType,
-            fontWeight: originalFont.fontWeight,
-            fontStyle: originalFont.fontStyle,
-        });
-    };
-
-    if (item != undefined) {
-        angular.forEach($scope.fonts, function (value, key) {
-            if (value.fontFamily == item.value) {
-                $scope.selectedFont = value;
-                $scope.selectedFont.variant = item.fontWeight + item.fontStyle;
-                $scope.selectedFont.fontWeight = item.fontWeight;
-                $scope.selectedFont.fontStyle = item.fontStyle;
-            }
-        });
-    }
-
-});
-/*
- jQuery UI Slider plugin wrapper
-*/
-angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider', ['uiSliderConfig', '$timeout', function (uiSliderConfig, $timeout) {
-    uiSliderConfig = uiSliderConfig || {};
-    return {
-        require: 'ngModel',
-        compile: function () {
-            return function (scope, elm, attrs, ngModel) {
-
-                function parseNumber(n, decimals) {
-                    return (decimals) ? parseFloat(n) : parseInt(n);
-                };
-
-                var options = angular.extend(scope.$eval(attrs.uiSlider) || {}, uiSliderConfig);
-                // Object holding range values
-                var prevRangeValues = {
-                    min: null,
-                    max: null
-                };
-
-                // convenience properties
-                var properties = ['min', 'max', 'step'];
-                var useDecimals = (!angular.isUndefined(attrs.useDecimals)) ? true : false;
-
-                var init = function () {
-                    // When ngModel is assigned an array of values then range is expected to be true.
-                    // Warn user and change range to true else an error occurs when trying to drag handle
-                    if (angular.isArray(ngModel.$viewValue) && options.range !== true) {
-                        console.warn('Change your range option of ui-slider. When assigning ngModel an array of values then the range option should be set to true.');
-                        options.range = true;
-                    }
-
-                    // Ensure the convenience properties are passed as options if they're defined
-                    // This avoids init ordering issues where the slider's initial state (eg handle
-                    // position) is calculated using widget defaults
-                    // Note the properties take precedence over any duplicates in options
-                    angular.forEach(properties, function (property) {
-                        if (angular.isDefined(attrs[property])) {
-                            options[property] = parseNumber(attrs[property], useDecimals);
-                        }
-                    });
-
-                    elm.slider(options);
-                    init = angular.noop;
-                };
-
-                // Find out if decimals are to be used for slider
-                angular.forEach(properties, function (property) {
-                    // support {{}} and watch for updates
-                    attrs.$observe(property, function (newVal) {
-                        if (!!newVal) {
-                            init();
-                            elm.slider('option', property, parseNumber(newVal, useDecimals));
-                        }
-                    });
-                });
-                attrs.$observe('disabled', function (newVal) {
-                    init();
-                    elm.slider('option', 'disabled', !!newVal);
-                });
-
-                // Watch ui-slider (byVal) for changes and update
-                scope.$watch(attrs.uiSlider, function (newVal) {
-                    init();
-                    if (newVal != undefined) {
-                        elm.slider('option', newVal);
-                    }
-                }, true);
-
-                // Late-bind to prevent compiler clobbering
-                $timeout(init, 0, true);
-
-                // Update model value from slider
-                elm.bind('slidestop', function (event, ui) {
-                    ngModel.$setViewValue(ui.values || ui.value);
-                    scope.$apply();
-                });
-
-                // Update slider from model value
-                ngModel.$render = function () {
-                    init();
-                    var method = options.range === true ? 'values' : 'value';
-
-                    if (isNaN(ngModel.$viewValue) && !(ngModel.$viewValue instanceof Array))
-                        ngModel.$viewValue = 0;
-
-                    // Do some sanity check of range values
-                    if (options.range === true) {
-
-                        // Check outer bounds for min and max values
-                        if (angular.isDefined(options.min) && options.min > ngModel.$viewValue[0]) {
-                            ngModel.$viewValue[0] = options.min;
-                        }
-                        if (angular.isDefined(options.max) && options.max < ngModel.$viewValue[1]) {
-                            ngModel.$viewValue[1] = options.max;
-                        }
-
-                        // Check min and max range values
-                        if (ngModel.$viewValue[0] >= ngModel.$viewValue[1]) {
-                            // Min value should be less to equal to max value
-                            if (prevRangeValues.min >= ngModel.$viewValue[1])
-                                ngModel.$viewValue[0] = prevRangeValues.min;
-                            // Max value should be less to equal to min value
-                            if (prevRangeValues.max <= ngModel.$viewValue[0])
-                                ngModel.$viewValue[1] = prevRangeValues.max;
-                        }
-
-                        // Store values for later user
-                        prevRangeValues.min = ngModel.$viewValue[0];
-                        prevRangeValues.max = ngModel.$viewValue[1];
-
-                    }
-                    elm.slider(method, ngModel.$viewValue);
-                };
-
-                scope.$watch(attrs.ngModel, function () {
-                    if (options.range === true) {
-                        ngModel.$render();
-                    }
-                }, true);
-
-                function destroy() {
-                    elm.slider('destroy');
-                }
-                elm.bind('$destroy', destroy);
-            };
-        }
-    };
-}]);
-
-angular.module('spectrumcolorpicker', [])
-  .directive('spectrum', function () {
-      return {
-          restrict: 'E',
-          transclude: true,
-          scope: {
-              colorselected: '='
-          },
-          link: function (scope, $element) {
-
-              $element.find("input").spectrum({
-                  color: scope.colorselected,
-                  preferredFormat: "rgb",
-                  showAlpha: true,
-                  showInput: true,
-                  change: function (color) {
-                      scope.colorselected = color.toRgbString();
-                      scope.$apply();
-                  },
-                  move: function (color) {
-                  }
-              });
-
-              scope.$watch('colorselected', function () {
-                  $element.find("input").spectrum("set", scope.colorselected);
-              }, true);
-
-          },
-          template:
-          '<div><input type=\'text\' ng-model=\'colorselected\' /></div>',
-          replace: true
-      };
-  })
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/preview/index.html b/src/Umbraco.Web.UI/Umbraco/preview/index.html
index fe726c661f..574967c427 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:frameFirstLoaded}">
+    <div class="tuning">
 
         <div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">
 
@@ -27,15 +27,15 @@
                     <i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
+                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice', show:frameLoaded}" style="display:none">
                     <i class="icon icon-display"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
+                <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting', show:enableTuning > 0}" style="display:none">
                     <i class="icon icon-paint-roller"></i>
                 </div>
 
-                <div ng-if="isOpen" ng-click="settingOpen('presetColors')" ng-class="{selected:settingIsOpen=='presetColors'}">
+                <div ng-if="isOpen" ng-click="settingOpen('presetColors')" ng-class="{selected:settingIsOpen=='presetColors', show:enableTuning > 0}" style="display:none">
                     <i class="icon icon-palette"></i>
                 </div>
 
@@ -73,7 +73,7 @@
                                                      is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
 
                                         <accordion-heading>
-                                            <span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">
+                                            <span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.schema)">
                                                 {{subSection.name}}
                                             </span>
                                         </accordion-heading>
@@ -84,14 +84,14 @@
 
                                             <div ng-if="field.type == 'colorPicker'">
                                                 <spectrum colorselected="field.value"></spectrum>
-                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="fa fa-times colorPickerDelete"></i>
+                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="icon icon-delete colorPickerDelete"></i>
                                             </div>
 
                                             <div ng-if="field.type == 'bgImagePicker'" class="imagePickerPreviewContainer">
                                                 <div class="imagePickerPreview" ng-click="open(field)" style="background-image:{{ field.value }}">
                                                     <i class="icon icon-add"></i>
                                                 </div>
-                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="fa fa-times colorPickerDelete"></i>
+                                                <i ng-if="field.value != ''" ng-click="removeField(field)" class="icon icon-delete colorPickerDelete"></i>
                                             </div>
 
                                             <div ng-if="field.type == 'bgPositionPicker'">
diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml
index 202605c651..2e17f2bcee 100644
--- a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml
+++ b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml
@@ -5,6 +5,7 @@
 @if (Model != null && !string.IsNullOrEmpty(Model.ToString()))
 {
     var onlyOneColumn = Model.columns != null ? ((System.Collections.ICollection)Model.columns).Count : 0;
+    
     <div class="@(onlyOneColumn > 1 ? "container" : "")">
         <div class="row clearfix">
             @foreach (var column in Model.columns)
@@ -12,8 +13,8 @@
                 <div class="col-md-@column.grid column usky-grid-column">
                     @foreach (var row in column.rows)
                     {
-                        <div class="grid-row-@row.uniqueId @row.cssClass @(row.fullScreen == "True" ? "usky-grid-full-size" : "")">
-                            <div>
+                        <div class="gridrow_@row.uniqueId" >
+                            <div class="container">
                                 <div class="row clearfix usky-grid-row">
 
                                     @foreach (var cell in row.cells)
@@ -37,9 +38,9 @@
                                                                 break;
                                                             case "macro":
 
-                                                                string macroAlias = control.macro.macroAlias.ToString();
+                                                                string macroAlias = control.value.macroAlias.ToString();
                                                                 ViewDataDictionary parameters = new ViewDataDictionary();
-                                                                foreach (dynamic mpd in control.macro.marcoParamsDictionary)
+                                                                foreach (dynamic mpd in control.value.marcoParamsDictionary)
                                                                 {
                                                                     parameters.Add(mpd.Name, mpd.Value);
                                                                 }
@@ -82,7 +83,7 @@
                                                                 break;
                                                             case "embed":
                                                             <text>
-                                                                @Html.Raw(control.value);
+                                                                @Html.Raw(control.value)
                                                             </text>
                                                                 break;
                                                             default:
diff --git a/src/Umbraco.Web/Editors/TuningController.cs b/src/Umbraco.Web/Editors/TuningController.cs
index 0d95fe958b..781c65f96a 100644
--- a/src/Umbraco.Web/Editors/TuningController.cs
+++ b/src/Umbraco.Web/Editors/TuningController.cs
@@ -13,6 +13,10 @@ using System.Net.Http.Headers;
 using System.Web;
 using System.IO;
 using Umbraco.Core.Models;
+using System.Text.RegularExpressions;
+using System.Linq;
+using Umbraco.Core;
+using Umbraco.Core.Services;
 
 namespace Umbraco.Web.Editors
 {
@@ -20,14 +24,6 @@ namespace Umbraco.Web.Editors
     public class TuningController : UmbracoApiController
     {
 
-        static string basePath = HttpContext.Current.Server.MapPath(@"\Umbraco\assets\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 resultGridLessPath = @"\Css\tuning\grid_{0}.less";
-        static string resultGridCssPath = @"\Css\tuning\grid_{0}.css";
-        static string tuningStylePath = basePath + @"tuning.defaultStyle.less";
-
         [HttpGet]
         public HttpResponseMessage GetGoogleFont()
         {
@@ -58,27 +54,16 @@ namespace Umbraco.Web.Editors
         {
 
             // Get style less url 
+            var pageId = int.Parse(HttpContext.Current.Request["pageId"]);
             var tuningStyleUrl = HttpContext.Current.Request["tuningStyleUrl"];
-            var tuningGridStyleUrl = HttpContext.Current.Request["tuningGridStyleUrl"];
 
             if (string.IsNullOrEmpty(tuningStyleUrl))
-                tuningStyleUrl = tuningStylePath;
+                tuningStyleUrl = TuningUtility.tuningStylePath;
             else
                 tuningStyleUrl = HttpContext.Current.Server.MapPath(tuningStyleUrl);
 
             // Get all parameters
-            string paramBlock = string.Empty;
-            using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningStyleUrl))
-            {
-                paramBlock = GetStyleBloque("lessParam", sr.ReadToEnd());
-            }
-            if (!string.IsNullOrEmpty(tuningGridStyleUrl))
-            {
-                using (System.IO.StreamReader sr = new System.IO.StreamReader(HttpContext.Current.Server.MapPath(tuningGridStyleUrl)))
-                {
-                    paramBlock += GetStyleBloque("lessParam", sr.ReadToEnd());
-                }
-            }
+            string paramBlock = TuningUtility.GetLessParameters(tuningStyleUrl, pageId);
 
             // Prepare string parameter result
             string[] paramLines = paramBlock.Trim().Split(new string[] { "\r\n" }, StringSplitOptions.RemoveEmptyEntries);
@@ -105,98 +90,10 @@ namespace Umbraco.Web.Editors
             // Get parameters
             var parameters = HttpContext.Current.Request["parameters"];
             var parametersGrid = HttpContext.Current.Request["parametersGrid"];
-            var pageId = HttpContext.Current.Request["pageId"];
+            var pageId = int.Parse(HttpContext.Current.Request["pageId"]);
 
-            /*********************************************/
-            /* Grid parameters */
-            /*********************************************/
-
-            // Path to the new grid less
-            string newResultGridLessPath = HttpContext.Current.Server.MapPath(string.Format(resultGridLessPath, pageId));
-            string newResultGridCssPath = HttpContext.Current.Server.MapPath(string.Format(resultGridCssPath, pageId));
-
-            // Load current grid Less
-            string gridLessContent = string.Empty;
-            using (System.IO.StreamReader sr = new System.IO.StreamReader(newResultGridLessPath))
-            {
-                gridLessContent = sr.ReadToEnd();
-            }
-
-            // Prepare grid parameters
-            string newGridParamBlock = string.Empty;
-            foreach (string parameter in parametersGrid.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries))
-            {
-                newGridParamBlock += (parameter + ";").Replace(":;", ":'';") + Environment.NewLine;
-            }
-            gridLessContent = gridLessContent.Replace(GetStyleBloque("lessParam", gridLessContent), Environment.NewLine + newGridParamBlock);
-
-            // Save Grid less file
-            using (System.IO.StreamWriter file = new System.IO.StreamWriter(newResultGridLessPath))
-            {
-                file.Write(gridLessContent);
-            }
-
-            // Compile the Grid Less file
-            string compiledGridStyle = GetCssFromLessString(gridLessContent, false, true, true);
-
-            // Save compiled file
-            using (System.IO.StreamWriter file = new System.IO.StreamWriter(newResultGridCssPath))
-            {
-                file.Write(compiledGridStyle);
-            }
-
-            
-
-            /*********************************************/
-            /* Main parameters */
-            /*********************************************/
-
-            // 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));
-
-            // Load default Less content
-            string lessContent = string.Empty;
-            using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningStylePath))
-            {
-                lessContent = sr.ReadToEnd();
-            }
-
-            // Create front directory
-            if (!Directory.Exists(frontBasePath))
-                Directory.CreateDirectory(frontBasePath);
-
-            // Prepare parameters and gf block
-            string newParamBlock = string.Empty;
-            string newGfBlock = string.Empty;
-            foreach (string parameter in parameters.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries))
-            {
-                if (parameter.IndexOf("@import") < 0)
-                {
-                    newParamBlock += (parameter + ";").Replace(":;", ":'';") + Environment.NewLine;
-                }
-                else 
-                {
-                    newGfBlock += parameter + ";" + 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(lessContent, false, true, true).Replace("@import", "@IMPORT");
-
-            // Save compiled file
-            using (System.IO.StreamWriter file = new System.IO.StreamWriter(newResultCssPath))
-            {
-                file.Write(compiledStyle);
-            }
+            // Save and compile styles
+            TuningUtility.SaveAndPublishStyle(parameters, parametersGrid, pageId);
 
             var resp = new HttpResponseMessage()
             {
@@ -204,6 +101,7 @@ namespace Umbraco.Web.Editors
             };
             resp.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
             return resp;
+
         }
 
         [HttpGet]
@@ -212,13 +110,7 @@ namespace Umbraco.Web.Editors
 
             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);
+            TuningUtility.DeleteStyle(int.Parse(pageId));
 
             var resp = new HttpResponseMessage()
             {
@@ -229,124 +121,6 @@ namespace Umbraco.Web.Editors
 
         }
 
-        [HttpGet]
-        public HttpResponseMessage GridStyle() {
-
-            // Load current content
-            int pageId = int.TryParse(HttpContext.Current.Request["pageId"], out pageId) ? pageId : -1;
-            var contentService = Services.ContentService;
-            IContent content = contentService.GetById(pageId);
-
-            string lessParam = string.Empty;
-            string gridStyle = string.Empty;
-            // Path to the new grid less
-            string newResultGridLessPath = HttpContext.Current.Server.MapPath(string.Format(resultGridLessPath, pageId));
-            if (System.IO.File.Exists(newResultGridLessPath))
-            {
-
-                // Load current grid Less
-                string gridLessContent = string.Empty;
-                using (System.IO.StreamReader sr = new System.IO.StreamReader(newResultGridLessPath))
-                {
-                    gridLessContent = sr.ReadToEnd();
-                }
-
-                //Get parameter block
-                lessParam = GetStyleBloque("lessParam", gridLessContent);
-
-                //Get style block
-                gridStyle = GetStyleBloque("gridStyle", gridLessContent);
-            }
-
-            // Look after grid properies
-            foreach (var property in content.Properties)
-            {
-
-                if (property.PropertyType.PropertyEditorAlias == "Umbraco.Grid")
-                {
-                    dynamic grid = Newtonsoft.Json.Linq.JObject.Parse(property.Value.ToString());
-                    foreach (var column in grid.columns)
-                    {
-                        foreach (var row in column.rows)
-                        {
-
-                            string newTag = "grid-row-" + row.uniqueId;
-
-                            if (gridStyle.IndexOf(newTag + " ") < 0)
-                            {
-                                lessParam += string.Format("@backgroundRowColor__{0}:;\r\n" +
-                                    "@backgroundRowImageOrPattern__{0}:;\r\n" +
-                                    "@backgroundRowGradientColor__{0}:;\r\n" +
-                                    "@backgroundRowPosition__{0}:;\r\n" +
-                                    "@backgroundRowCover__{0}:;\r\n" +
-                                    "@backgroundRowRepeat__{0}:;\r\n" +
-                                    "@backgroundRowAttachment__{0}:;\r\n", newTag);
-
-                                gridStyle += string.Format("\r\n\r\n.Row-cover__{0} () when (@backgroundRowCover__{0} = true) {{ \r\n" +
-                                    "-webkit-background-size: cover; \r\n" +
-                                    "-moz-background-size: cover; \r\n" +
-                                    "-o-background-size: cover; \r\n" +
-                                    "background-size: cover; \r\n" +
-                                    "}} \r\n\r\n" +
-                                    ".{0} {{ \r\n" +
-                                    "background-color:@backgroundRowColor__{0}; \r\n" +
-                                    "background: -moz-linear-gradient(top, @backgroundRowColor__{0} 41%,@backgroundRowGradientColor__{0} 100%); \r\n" +
-                                    "background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,@backgroundRowColor__{0}), color-stop(100%,@backgroundRowGradientColor__{0})); \r\n" +
-                                    "background: -webkit-linear-gradient(top, @backgroundRowColor__{0} 41%,@backgroundRowGradientColor__{0} 100%); \r\n" +
-                                    "background: -o-linear-gradient(top, @backgroundRowColor__{0} 41%,@backgroundRowGradientColor__{0} 100%); \r\n" +
-                                    "background: -ms-linear-gradient(top, @backgroundRowColor__{0} 41%,@backgroundRowGradientColor__{0} 100%); \r\n" +
-                                    "background: linear-gradient(to bottom, @backgroundRowColor__{0} 41%,@backgroundRowGradientColor__{0} 100%); \r\n" +
-                                    "background-image: @backgroundRowImageOrPattern__{0}; \r\n" +
-                                    "background-position: @backgroundRowPosition__{0}; \r\n" +
-                                    "background-repeat: @backgroundRowRepeat__{0}; \r\n" +
-                                    "background-attachment: @backgroundRowAttachment__{0}; \r\n" +
-                                    ".Row-cover__{0};}}", newTag);
-                            }
-                        }
-                    }
-                }
-
-            }
-
-            string result = "/***start-lessParam***/\r\n{0}/***end-lessParam***/\r\n\r\n/***start-gridStyle***/{1}/***end-gridStyle***/";
-            result = string.Format(result, lessParam, gridStyle);
-
-            // Save compiled file
-            using (System.IO.StreamWriter file = new System.IO.StreamWriter(newResultGridLessPath))
-            {
-                file.Write(result);
-            }
-
-            return new HttpResponseMessage(HttpStatusCode.OK)
-            {
-                Content = new StringContent(result, Encoding.UTF8, "text/css")
-            };
-
-        }
-
-        private static string GetCssFromLessString(string css, Boolean cacheEnabled, Boolean minifyOutput, Boolean disableVariableRedefines)
-        {
-            var config = dotless.Core.configuration.DotlessConfiguration.GetDefaultWeb();
-            config.DisableVariableRedefines = disableVariableRedefines;
-            config.CacheEnabled = cacheEnabled;
-            config.MinifyOutput = minifyOutput;
-            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/TuningUtility.cs b/src/Umbraco.Web/TuningUtility.cs
new file mode 100644
index 0000000000..cb4468b600
--- /dev/null
+++ b/src/Umbraco.Web/TuningUtility.cs
@@ -0,0 +1,321 @@
+using System.Collections.Generic;
+using System.Net;
+using System.Net.Http;
+using System.Text;
+using System.Web.Http;
+using AutoMapper;
+using Umbraco.Web.Models.ContentEditing;
+using Umbraco.Web.Mvc;
+using umbraco;
+using Umbraco.Web.WebApi;
+using System;
+using System.Net.Http.Headers;
+using System.Web;
+using System.IO;
+using Umbraco.Core;
+using Umbraco.Core.Models;
+using Umbraco.Core.Services;
+using System.Linq;
+using System.Text.RegularExpressions;
+
+namespace Umbraco.Web
+{
+    internal static class TuningUtility
+    {
+
+        internal static string assetBasePath = HttpContext.Current.Server.MapPath(@"\Umbraco\assets\less\");
+        internal static string tuningDefaultLessPath = assetBasePath + @"tuning.defaultStyle.less";
+        internal static string tuningGridRowStyle = assetBasePath + @"tuning.gridRowStyle.less";
+        internal static string tuningStylePath = "/Css/tuning/";
+        internal static string resultLessPath = tuningStylePath + @"{0}.less";
+        internal static string resultCssPath = tuningStylePath + @"{0}.css";
+        internal static string frontBasePath = HttpContext.Current.Server.MapPath(@"\Css\tuning\");
+
+        // return the list of all grid's rows' guid for the current page 
+        internal static String[] GetGridRows(int pageId) 
+        {
+
+            List<string> result = new List<string>();
+
+            // Load current page
+            var contentService = ApplicationContext.Current.Services.ContentService;
+            IContent content = contentService.GetById(pageId);
+
+            // Look after grid properies into the current page
+            foreach (var property in content.Properties)
+            {
+                if (property.PropertyType.PropertyEditorAlias == "Umbraco.Grid" && !string.IsNullOrEmpty(property.Value.ToString()))
+                {
+                    dynamic grid = Newtonsoft.Json.Linq.JObject.Parse(property.Value.ToString());
+                    foreach (var column in grid.columns)
+                    {
+                        foreach (var row in column.rows)
+                        {
+                            if (row.uniqueId != null)
+                                result.Add(row.uniqueId.Value);
+                        }
+                    }
+                }
+            }
+
+            return result.ToArray();
+
+        }
+
+        // get style box by tag
+        internal static String GetStyleBlock(string source, string name) 
+        {
+
+            string startTag = string.Format("/***start-{0}***/", name);
+            string endTag = string.Format("/***end-{0}***/", name);
+
+            int indexStartTag = source.IndexOf(startTag);
+            int indexEndTag = source.IndexOf(endTag);
+
+            if (indexStartTag >= 0 && indexEndTag >= 0)
+                return source.Substring(indexStartTag, indexEndTag - indexStartTag).Replace(startTag, "").Replace(endTag, "");
+            else
+                return "";
+
+        }
+
+        // Create a new grid block
+        internal static string NewGridRowBlock(string name) 
+        {
+
+            string lessGridRowModel = string.Empty;
+            using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningGridRowStyle))
+            {
+                lessGridRowModel = sr.ReadToEnd();
+            }
+
+            string newTag = "gridrow_" + name;
+
+            return lessGridRowModel.Replace("-ID-", newTag);
+
+        }
+
+        // Get less parameters from lessPath file, both general parameters and grid parameters
+        internal static string GetLessParameters(string lessPath, int pageId) 
+        { 
+
+            // Get all parameters
+            string paramBlock = string.Empty;
+            if (System.IO.File.Exists(lessPath))
+            {
+                using (System.IO.StreamReader sr = new System.IO.StreamReader(lessPath))
+                {
+                    string lessContent = sr.ReadToEnd();
+                    paramBlock = GetStyleBlock(lessContent, "lessParam");
+                    foreach (var gridRow in GetGridRows(pageId))
+                    {
+                        paramBlock = paramBlock + GetStyleBlock(lessContent, "lessParam-" + "gridrow_" + gridRow);
+                    }
+                }
+            }
+            return paramBlock;
+
+        }
+
+        // Get inherited pageId with tuning
+        internal static int GetParentOrSelfTunedPageId(string[] path, bool preview) 
+        {
+
+            string styleTuning = preview ? @"{0}{1}.less" : "{0}{1}.css";
+            foreach (var page in path.OrderByDescending(r => path.IndexOf(r)))
+            {
+                string stylePath = HttpContext.Current.Server.MapPath(string.Format(styleTuning, tuningStylePath, page));
+                if (System.IO.File.Exists(stylePath))
+                {
+                    return int.Parse(page);
+                }
+            }
+
+            return int.Parse(path[path.Length - 1]);
+
+        }
+
+        // Get stylesheet path for current page
+        internal static string GetStylesheetPath(string[] path, bool preview)
+        {
+            string styleTuning = preview ? @"{0}{1}.less" : "{0}{1}.css";
+            return string.Format(styleTuning, tuningStylePath, GetParentOrSelfTunedPageId(path, preview));
+        }
+
+        // Create new less file
+        internal static string CreateOrUpdateLessFile(string[] path, int pageId)
+        {
+
+            string lessPath = GetStylesheetPath(path, true);
+
+            // If less file exist, Load its  content
+            string lessContent = string.Empty;
+            using (System.IO.StreamReader sr = new System.IO.StreamReader(System.IO.File.Exists(HttpContext.Current.Server.MapPath(lessPath)) 
+                ? HttpContext.Current.Server.MapPath(lessPath) : tuningDefaultLessPath))
+            {
+                lessContent = sr.ReadToEnd();
+            }
+
+            // Update with grid row style needs
+            string[] gridRows = TuningUtility.GetGridRows(pageId);
+            string parametersToAdd = string.Empty;
+            string styleToAdd = string.Empty;
+            foreach (var gridRow in gridRows)
+            {
+                if (string.IsNullOrEmpty(GetStyleBlock(lessContent, "gridStyle-" + "gridrow_" + gridRow))) 
+                {
+                    parametersToAdd += NewGridRowBlock(gridRow);
+                }
+            }
+
+            // Save less file
+            if (string.IsNullOrEmpty(lessPath)) lessPath = string.Format("{0}{1}.less", tuningStylePath, pageId);
+            lessContent = lessContent + Environment.NewLine + parametersToAdd;
+            using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(lessPath)))
+            {
+                file.Write(lessContent);
+            }
+
+            return lessPath;
+
+        }
+
+        // Save and publish less style
+        internal static void SaveAndPublishStyle(string parameters, string parametersGrid, int pageId) 
+        {
+
+            // Get inherited tuned pageId and path
+            var contentService = ApplicationContext.Current.Services.ContentService;
+            IContent content = contentService.GetById(pageId);
+            int inheritedTunedPageId = TuningUtility.GetParentOrSelfTunedPageId(content.Path.Split(','), true);
+
+            // Load inherited Less content
+            string inheritedLessContent = string.Empty;
+            using (System.IO.StreamReader sr = new System.IO.StreamReader(HttpContext.Current.Server.MapPath(string.Format(resultLessPath, inheritedTunedPageId))))
+            {
+                inheritedLessContent = sr.ReadToEnd();
+            }
+
+            // Update pageId if parameters have changed
+            if (inheritedTunedPageId != pageId)
+            {
+
+                // Parse inherited less parameters
+                Dictionary<string, string> dicInheritedParameters = new Dictionary<string, string>();
+                foreach (Match m in Regex.Matches(GetStyleBlock(inheritedLessContent,"lessParam"), @"@([^:\s\n]*?):([^@;\n]*?);"))
+                {
+                    if (m.Groups.Count > 2)
+                    {
+                        dicInheritedParameters.Add(m.Groups[1].Value, m.Groups[2].Value.Replace("''", string.Empty));
+                    }
+                }
+
+                // Read new parameters
+                Dictionary<string, string> dicNewParameters = new Dictionary<string, string>();
+                foreach (string parameter in parameters.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries))
+                {
+                    if (parameter.IndexOf("@import") < 0)
+                    {
+                        string name = parameter.Substring(1, parameter.IndexOf(":")).Replace("@", string.Empty).Replace(":", string.Empty);
+                        string value = parameter.Substring(parameter.IndexOf(":") + 1);
+                        dicNewParameters.Add(name, value);
+                    }
+                }
+
+                // Compare if parameters have changed
+                bool noChange = true;
+                foreach (string keys in dicNewParameters.Keys)
+                {
+                    if (!dicInheritedParameters.Keys.Where(r => r == keys).Any() || dicNewParameters[keys] != dicInheritedParameters[keys])
+                    {
+                        noChange = false;
+                        break;
+                    }
+                }
+
+                if (noChange)
+                    pageId = inheritedTunedPageId;
+
+
+
+                // Compare if parameters have changed
+                if (dicInheritedParameters.OrderBy(r => r.Key).SequenceEqual(dicNewParameters.OrderBy(r => r.Key)))
+                    pageId = inheritedTunedPageId;
+
+            }
+
+            // Create front directory if necesary
+            if (!Directory.Exists(frontBasePath))
+                Directory.CreateDirectory(frontBasePath);
+
+            // Prepare parameters and gf block and replace with the new value
+            string newParamBlock = string.Empty;
+            string newGfBlock = string.Empty;
+            foreach (string parameter in parameters.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries))
+            {
+                if (parameter.IndexOf("@import") < 0)
+                {
+                    newParamBlock += (parameter + ";").Replace(":;", ":'';") + Environment.NewLine;
+                }
+                else
+                {
+                    newGfBlock += parameter + ";" + Environment.NewLine;
+                }
+            }
+            inheritedLessContent = inheritedLessContent.Replace(GetStyleBlock(inheritedLessContent, "lessParam"), Environment.NewLine + newParamBlock);
+            inheritedLessContent = inheritedLessContent.Replace(GetStyleBlock(inheritedLessContent, "gf"), Environment.NewLine + newGfBlock);
+
+            // Prepare grid parameters
+            string newGridParamBlock = string.Empty;
+            foreach (string parameter in parametersGrid.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries))
+            {
+                string name = parameter.Substring(0, parameter.IndexOf(":"));
+                string value = parameter.Substring(parameter.IndexOf(":") + 1);
+                if (string.IsNullOrEmpty(value)) value = "''";
+                inheritedLessContent = Regex.Replace(inheritedLessContent, string.Format("{0}:([^;\n]*);", name), string.Format("{0}:{1};", name, value));
+
+            }
+
+            // Save less file
+            using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(string.Format(resultLessPath, pageId))))
+            {
+                file.Write(inheritedLessContent);
+            }
+
+            // Compile the Less file
+            string compiledStyle = GetCssFromLessString(inheritedLessContent, false, true, true).Replace("@import", "@IMPORT");
+
+            // Save compiled file
+            using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(string.Format(resultCssPath, pageId))))
+            {
+                file.Write(compiledStyle);
+            }
+
+        }
+
+        // Delete tuning style
+        internal static void DeleteStyle(int 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);
+
+        }
+
+        // Compile and compress less style
+        private static string GetCssFromLessString(string css, Boolean cacheEnabled, Boolean minifyOutput, Boolean disableVariableRedefines)
+        {
+            var config = dotless.Core.configuration.DotlessConfiguration.GetDefaultWeb();
+            config.DisableVariableRedefines = disableVariableRedefines;
+            config.CacheEnabled = cacheEnabled;
+            config.MinifyOutput = minifyOutput;
+            return dotless.Core.LessWeb.Parse(css, config);
+        }
+
+    }
+}
diff --git a/src/Umbraco.Web/Umbraco.Web.csproj b/src/Umbraco.Web/Umbraco.Web.csproj
index 301e018e65..7818019f2a 100644
--- a/src/Umbraco.Web/Umbraco.Web.csproj
+++ b/src/Umbraco.Web/Umbraco.Web.csproj
@@ -486,6 +486,7 @@
     <Compile Include="Models\Trees\MenuItemList.cs" />
     <Compile Include="Trees\TemplateTreeController.cs" />
     <Compile Include="Trees\TreeControllerBase.cs" />
+    <Compile Include="TuningUtility.cs" />
     <Compile Include="UI\JavaScript\AssetInitialization.cs" />
     <Compile Include="UI\JavaScript\CssInitialization.cs" />
     <Compile Include="UI\JavaScript\DependencyPathRenderer.cs" />
diff --git a/src/Umbraco.Web/UmbracoHelper.cs b/src/Umbraco.Web/UmbracoHelper.cs
index 3403c94675..0d53e49016 100644
--- a/src/Umbraco.Web/UmbracoHelper.cs
+++ b/src/Umbraco.Web/UmbracoHelper.cs
@@ -1306,13 +1306,12 @@ namespace Umbraco.Web
         public HtmlString EnableTuning()
         {
 
-            string previewLink = @"<link href=""/Umbraco/lib/bootstrap/css/bootstrap.min.3.0.1.css"" type=""text/css"" rel=""stylesheet"" />" + 
+            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"" />" +
-                                 @"<link href=""{1}"" rel=""stylesheet/less"" type=""text/css"" />" +
                                  @"<script src=""/Umbraco/lib/jquery/jquery-2.0.3.min.js"" type=""text/javascript""></script>" +
                                  @"<script src=""/Umbraco/lib/bootstrap/js/bootstrap.3.0.1.min.js"" type=""text/javascript""></script>" +
                                  @"<script src=""/Umbraco/lib/Less/less-1.7.0.min.js"" type=""text/javascript""></script>" +
-                                 @"<script type=""text/javascript"">var tuningParameterUrl='{0}';var tuningGridStyleUrl='{2}'</script>" +
+                                 @"<script type=""text/javascript"">var tuningParameterUrl='{0}';</script>" +
                                  @"<script src=""/umbraco/js/tuning.front.js"" type=""text/javascript""></script>";
 
             string noPreviewLinks = @"<link href=""/Umbraco/lib/bootstrap/css/bootstrap.min.3.0.1.css"" type=""text/css"" rel=""stylesheet"">" +
@@ -1320,63 +1319,24 @@ namespace Umbraco.Web
                                     @"<script src=""/Umbraco/lib/jquery/jquery-2.0.3.min.js"" type=""text/javascript""></script>" +
                                     @"<script src=""/Umbraco/lib/bootstrap/js/bootstrap.3.0.1.min.js"" type=""text/javascript""></script>";
 
-            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";
-
+            // Get page value
             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) {
-
-                string gridLessLink = string.Format("/Umbraco/Api/Tuning/GridStyle?pageId={0}", pageId);
-                string gridLessPath = string.Format("/Css/tuning/grid_{0}.less", pageId);
-                if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(gridLessPath)))
-                {
-                    gridLessLink = gridLessPath;
-                }
-                result = string.IsNullOrEmpty(linkResult) ? string.Format(previewLink, defaultLessStyle, gridLessLink, gridLessPath) : string.Format(previewLink, linkResult, gridLessLink, gridLessPath);
 
+            if (UmbracoContext.Current.InPreviewMode)
+            {
+                // Create or update current less file
+                string lessPath = TuningUtility.CreateOrUpdateLessFile(path, pageId);
+                result = string.Format(previewLink, lessPath);
             }
-            else {
-                result = string.IsNullOrEmpty(linkResult) ? string.Format(noPreviewLinks, defaultCssStyle, pageId) : string.Format(noPreviewLinks, linkResult, pageId);
+            else
+            {
+                // Get css path for current page
+                string cssPath = TuningUtility.GetStylesheetPath(path, false);
+                result = string.Format(noPreviewLinks, cssPath);
             }
 
-
-            //// Grid Styles
-            //var previewGridStyleLink = "/Umbraco/Api/Tuning/GridStyle?pageId={0}";
-
-            //if 
-
-            //var gridStyleLink = string.Empty;
-            //string styleGridPath = HttpContext.Current.Server.MapPath(string.Format(gridStyleLink, pageId));
-            //if (System.IO.File.Exists(styleGridPath))
-            //{
-            //    gridStyleLink = UmbracoContext.Current.InPreviewMode ? @"<link href=""/Css/tuning/grid{0}.less"" rel=""stylesheet/less"" type=""text/css"" />" : 
-            //                                           @"<link href=""/Css/tuning/grid{0}.css"" type=""text/css"" rel=""stylesheet"" />";
-            //    gridStyleLink = string.Format(gridStyleLink, pageId);                           
-            //}
-
-
-
             return new HtmlString(result);
 
         }