diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index e2a8c8fc81..d1ad8ee8ff 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -1,16 +1,13 @@
-.nested-content
-{
+.umb-nested-content {
     text-align: center;
 }
 
-.nested-content--not-supported
-{
+.umb-nested-content--not-supported {
     opacity: 0.3;
     pointer-events: none;
 }
 
-.nested-content-overlay
-{
+.umb-nested-content-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -19,47 +16,39 @@
     z-index: 1000;
 }
 
-.nested-content__item
-{
+.umb-nested-content__item {
     position: relative;
     text-align: left;
     border-top: solid 1px transparent;
-    background: white;
-
-
+    background: @white;
 }
 
-.nested-content__item--active:not(.nested-content__item--single)
-{
-    background: #f8f8f8;
+.umb-nested-content__item--active:not(.umb-nested-content__item--single) {
+    background: @gray-10;
 }
 
-.nested-content__item.ui-sortable-placeholder
-{
-    background: #f8f8f8;
-    border: 1px dashed #d9d9d9;
+.umb-nested-content__item.ui-sortable-placeholder {
+    background: @gray-10;
+    border: 1px dashed @gray-8;
     visibility: visible !important;
     height: 55px;
     margin-top: -1px;
 }
 
-.nested-content__item--single > .nested-content__content
-{
+.umb-nested-content__item--single > .umb-nested-content__content {
     border: 0;
 }
 
-.nested-content__item--single > .nested-content__content > .umb-pane
-{
+.umb-nested-content__item--single > .umb-nested-content__content > .umb-pane {
     margin: 0;
 }
 
-.nested-content__header-bar
-{
+.umb-nested-content__header-bar {
     padding: 15px 20px;
-    border-bottom: 1px dashed #e0e0e0;
+    border-bottom: 1px dashed @gray-8;
     text-align: right;
     cursor: pointer;
-    background-color: white;
+    background-color: @white;
 
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -67,24 +56,21 @@
     -o-user-select: none;
 }
 
-.nested-content__heading {
+.umb-nested-content__heading {
     line-height: 20px;
     position: relative;
 
-    &.-with-icon
-    {
+    &.-with-icon {
         padding-left: 20px;
     }
 
-    i
-    {
-        color: #999; /* same icon color as the icons in the item type picker */
+    i {
+        color: @gray-2;
         position: absolute;
         left: 0;
     }
 
-    .nested-content__item-name
-    {
+    .umb-nested-content__item-name {
         max-height: 20px;
         text-align: left;
         white-space: nowrap;
@@ -94,22 +80,16 @@
     }
 }
 
-.nested-content__icons
-{
+.umb-nested-content__icons {
     opacity: 0;
-
     transition: opacity .15s ease-in-out;
-   -moz-transition: opacity .15s ease-in-out;
-   -webkit-transition: opacity .15s ease-in-out;
-
     position: absolute;
     right: 0px;
     top: 2px;
-    background-color: white;
+    background-color: @white;
     padding: 5px;
 
-    &:before
-    {
+    &:before {
         content: ' ';
         position: absolute;
         display: block;
@@ -117,126 +97,118 @@
         left: -30px;
         top: 0;
         bottom: 0;
-        background: -webkit-linear-gradient(90deg, rgba(255,255,255,0), white);
-        background: -moz-linear-gradient(90deg, rgba(255,255,255,0), white);
         background: linear-gradient(90deg, rgba(255,255,255,0), white);
     }
 }
 
 
-.nested-content__header-bar:hover .nested-content__icons,
-.nested-content__item--active > .nested-content__header-bar .nested-content__icons
-{
+.umb-nested-content__header-bar:hover .umb-nested-content__icons,
+.umb-nested-content__item--active > .umb-nested-content__header-bar .umb-nested-content__icons {
     opacity: 1;
 }
 
-.nested-content__icon,
-.nested-content__icon.nested-content__icon--disabled:hover
-{
+.umb-nested-content__icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
     display: inline-block;
     padding: 4px 6px;
     margin: 2px;
     cursor: pointer;
-    background: #fff;
-    border: 1px solid #b6b6b6;
+    background: @white;
+    border: 1px solid @gray-7;
     border-radius: 200px;
     text-decoration: none !important;
 }
 
-.nested-content__icon:hover,
-.nested-content__icon--active
+.umb-nested-content__icon:hover,
+.umb-nested-content__icon--active
 {
-    color: white;
-    background: #2e8aea;
-    border-color: #2e8aea;
+    color: @white;
+    background: @turquoise-d1;
+    border-color: @turquoise-d1;
     text-decoration: none;
 }
 
-.nested-content__icon .icon,
-.nested-content__icon.nested-content__icon--disabled:hover .icon
-{
+.umb-nested-content__icon .icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover .icon {
     display: block;
     font-size: 16px !important;
-    color: #5f5f5f;
+    color: @gray-3;
 }
 
-.nested-content__icon:hover .icon,
-.nested-content__icon--active .icon
-{
-    color: white;
+.umb-nested-content__icon:hover .icon,
+.umb-nested-content__icon--active .icon {
+    color: @white;
 }
 
-.nested-content__icon--disabled
-{
+.umb-nested-content__icon--disabled {
     opacity: 0.3;
 }
 
 
-.nested-content__footer-bar
-{
+.umb-nested-content__footer-bar {
     text-align: center;
     padding-top: 20px;
 }
 
-.nested-content__content
-{
-    border-bottom: 1px dashed #e0e0e0;
+.umb-nested-content__content {
+    border-bottom: 1px dashed @gray-8;
 }
 
-.nested-content__content .umb-control-group {
+.umb-nested-content__content .umb-control-group {
     padding-bottom: 0;
 }
 
-.nested-content__item.ui-sortable-helper .nested-content__content
-{
+.umb-nested-content__item.ui-sortable-helper .umb-nested-content__content {
     display: none !important;
 }
 
-.nested-content__help-text
-{
+.umb-nested-content__help-text {
     display: inline-block;
     padding: 10px 20px 10px 20px;
     clear: both;
     font-size: 14px;
-    color: #555;
-    background: #f8f8f8;
+    color: @gray-3;
+    background: @gray-10;
     border-radius: 15px;
 }
 
-.nested-content__doctypepicker table input, .nested-content__doctypepicker table select {
+.umb-nested-content__doctypepicker table input, 
+.umb-nested-content__doctypepicker table select {
     width: 100%;
     padding-right: 0;
 }
 
-.nested-content__doctypepicker table td.icon-navigation, .nested-content__doctypepicker i.nested-content__help-icon {
+.umb-nested-content__doctypepicker table td.icon-navigation, 
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     vertical-align: middle;
-    color: #CCC;
+    color: @gray-7;
 }
 
-.nested-content__doctypepicker table td.icon-navigation:hover, .nested-content__doctypepicker i.nested-content__help-icon:hover {
-    color: #343434;
+.umb-nested-content__doctypepicker table td.icon-navigation:hover, 
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
+    color: @gray-2;
 }
 
-.nested-content__doctypepicker i.nested-content__help-icon {
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     margin-left: 10px;
 }
 
-.form-horizontal .nested-content--narrow .controls-row
+.form-horizontal .umb-nested-content--narrow .controls-row
 {
     margin-left: 40% !important;
 }
 
-.form-horizontal .nested-content--narrow .controls-row .umb-textstring,
-.form-horizontal .nested-content--narrow .controls-row .umb-textarea
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-textstring,
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-textarea
 {
     width: 95%;
 }
 
-.form-horizontal .nested-content--narrow .controls-row .umb-dropdown {
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-dropdown {
     width: 99%;
 }
 
-.usky-grid.nested-content__node-type-picker .cell-tools-menu {
+.usky-grid.umb-nested-content__node-type-picker .cell-tools-menu {
     position: relative;
     transform: translate(-50%, -25%);
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
index efafb9066d..0a44a9fcaa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
@@ -229,10 +229,10 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
         $scope.sortableOptions = {
             axis: 'y',
             cursor: "move",
-            handle: ".nested-content__icon--move",
+            handle: ".umb-nested-content__icon--move",
             start: function (ev, ui) {
                 // Yea, yea, we shouldn't modify the dom, sue me
-                $("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
+                $("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
                     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                     $(this).css("visibility", "hidden");
                 });
@@ -244,7 +244,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
                 $scope.setDirty();
             },
             stop: function (ev, ui) {
-                $("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
+                $("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
                     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                     $(this).css("visibility", "visible");
                 });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
index 4b43df9c93..0617331682 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
@@ -1,4 +1,4 @@
-<div id="{{model.alias}}" class="nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
+<div id="{{model.alias}}" class="umb-nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
     <div>
         <table class="table table-striped">
             <thead>
@@ -45,11 +45,11 @@
             <a class="btn" ng-click="add()">
                 <localize key="general_add">Add</localize>
             </a>
-            <i class="icon icon-help-alt medium nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
+            <i class="icon icon-help-alt medium umb-nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
         </div>
     </div>
     <br/>
-    <div class="nested-content__help-text" ng-show="showHelpText">
+    <div class="umb-nested-content__help-text" ng-show="showHelpText">
         <p>
             <b><localize key="editcontenttype_tab">Tab</localize>:</b><br/>
             Select the tab who's properties should be displayed. If left blank, the first tab on the doc type will be used.
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
index 29d8c882d1..5d89da51b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
@@ -1,11 +1,11 @@
 <div class="umb-pane">
   <div ng-repeat="property in tab.properties" style="position: relative;">
 
-    <umb-property property="property" ng-class="{'nested-content--not-supported': property.notSupported}">
+    <umb-property property="property" ng-class="{'umb-nested-content--not-supported': property.notSupported}">
       <umb-editor model="property"></umb-editor>
     </umb-property>
 
-    <div ng-if="property.notSupported" class="nested-content-overlay"></div>
+    <div ng-if="property.notSupported" class="umb-nested-content-overlay"></div>
 
     <p ng-if="property.notSupported">{{property.notSupportedMessage}}</p>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
index 03dc7d47ab..9a5d75ae92 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
@@ -1,48 +1,48 @@
-<div id="nested-content--{{model.id}}" class="nested-content"
+<div id="umb-nested-content--{{model.id}}" class="umb-nested-content"
      ng-controller="Umbraco.PropertyEditors.NestedContent.PropertyEditorController"
-     ng-class="{'nested-content--narrow':!wideMode, 'nested-content--wide':wideMode}">
+     ng-class="{'umb-nested-content--narrow':!wideMode, 'umb-nested-content--wide':wideMode}">
     <ng-form>
 
-        <div class="nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
+        <div class="umb-nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
 
-            <div class="nested-content__item" ng-repeat="node in nodes" ng-class="{ 'nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'nested-content__item--single' : $parent.singleMode }">
+            <div class="umb-nested-content__item" ng-repeat="node in nodes" ng-class="{ 'umb-nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'umb-nested-content__item--single' : $parent.singleMode }">
 
-                <div class="nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
+                <div class="umb-nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
-                    <div class="nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
+                    <div class="umb-nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
 
-                    <div class="nested-content__icons">
-                        <a class="nested-content__icon nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
+                    <div class="umb-nested-content__icons">
+                        <a class="umb-nested-content__icon umb-nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'umb-nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
                             <i class="icon icon-edit"></i>
                         </a>
-                        <a class="nested-content__icon nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
+                        <a class="umb-nested-content__icon umb-nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
                             <i class="icon icon-navigation"></i>
                         </a>
-                        <a class="nested-content__icon nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
+                        <a class="umb-nested-content__icon umb-nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
                             <i class="icon icon-trash"></i>
                         </a>
                     </div>
 
                 </div>
 
-                <div class="nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
+                <div class="umb-nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
                     <umb-nested-content-editor ng-model="node" tab-alias="ncTabAlias" />
                 </div>
             </div>
 
         </div>
 
-        <div class="nested-content__help-text" ng-show="nodes.length == 0">
+        <div class="umb-nested-content__help-text" ng-show="nodes.length == 0">
             <localize key="grid_addElement"></localize>
         </div>
 
-        <div class="nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
-            <a class="nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
+        <div class="umb-nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
+            <a class="umb-nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
                 <i class="icon icon-add"></i>
             </a>
         </div>
 
-        <div class="usky-grid nested-content__node-type-picker" ng-if="overlayMenu.show">
+        <div class="usky-grid umb-nested-content__node-type-picker" ng-if="overlayMenu.show">
             <div class="cell-tools-menu" ng-style="overlayMenu.style" style="margin: 0;" delayed-mouseleave="closeNodeTypePicker()" on-delayed-mouseleave="closeNodeTypePicker()">
                 <h5>
                     <localize key="grid_insertControl" />