diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less
index 22a4d0f4ffd..b62c2aaaf94 100644
--- a/addons/web/static/src/less/utils.less
+++ b/addons/web/static/src/less/utils.less
@@ -206,16 +206,6 @@
     animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
 }
 
-// ------------------------------------------------------------------
-// Transition
-// ------------------------------------------------------------------
-.o-transition(@property: all, @duration: 0s, @timing-function: easy, @transition-delay: 0s) {
-    -webkit-transition: @property @duration @timing-function @transition-delay;
-    -moz-transition: @property @duration @timing-function @transition-delay;
-    -o-transition: @property @duration @timing-function @transition-delay;
-    transition: @property @duration @timing-function @transition-delay;
-}
-
 // ------------------------------------------------------------------
 // Columns
 // ------------------------------------------------------------------
diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
index ac45698cd62..189dc1707aa 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -31,9 +31,11 @@ define([
       var title = options.title;
       var className = options.className;
       var dropdown = options.dropdown;
+      var dropdown2 = options.dropdown2;
+      var wrapper = options.wrapper;
       var hide = options.hide;
 
-      return (dropdown ? '<div class="btn-group' +
+      var btn = (dropdown ? '<div class="btn-group' +
                (className ? ' ' + className : '') + '">' : '') +
                '<button type="button"' +
                  ' class="btn btn-default btn-sm' +
@@ -51,6 +53,10 @@ define([
                '</button>' +
                (dropdown || '') +
              (dropdown ? '</div>' : '');
+
+        if (wrapper) btn = $(wrapper).html(btn).prop('outerHTML');
+
+        return btn;
     };
 
     /**
@@ -216,36 +222,85 @@ define([
       color: function (lang, options) {
         var colorButtonLabel = '<i class="' +
                                   options.iconPrefix + options.icons.color.recent +
-                                '" style="color:black;background-color:yellow;"></i>';
-
+                                '" id="colors_preview" style="color:white;background-color:#B35E9B"></i>';
         var colorButton = tplButton(colorButtonLabel, {
           className: 'note-recent-color',
           title: lang.color.recent,
           event: 'color',
-          value: '{"backColor":"yellow"}'
+          value: '{"backColor":"#B35E9B"}'
         });
 
-        var items = [
-          '<li><div class="btn-group">',
-          '<div class="note-palette-title">' + lang.color.background + '</div>',
-          '<div class="note-color-reset" data-event="backColor"',
-          ' data-value="inherit" title="' + lang.color.transparent + '">' + lang.color.setTransparent + '</div>',
-          '<div class="note-color-palette" data-target-event="backColor"></div>',
-          '</div><div class="btn-group">',
-          '<div class="note-palette-title">' + lang.color.foreground + '</div>',
-          '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">',
-          lang.color.resetToDefault,
-          '</div>',
-          '<div class="note-color-palette" data-target-event="foreColor"></div>',
-          '</div></li>'
-        ];
+        var foreground =  '<ul class="dropdown-menu">' +
+                             '<li>' +
+                               '<div class="note-palette-title">' + lang.color.foreground + '</div>' +
+                               '<div class="btn-group palette-reset">' +
+                                 '<div class="note-color-reset" data-event="foreColor"' +
+                                   ' data-value="inherit" title="' + lang.color.reset + '"><i class="material-icons">&#xE23B;</i> '+
+                                 '</div>' +
+                               '</div>' +
 
-        var moreButton = tplButton('', {
-          title: lang.color.more,
-          dropdown: tplDropdown(items)
+                               '<div class="tabs_container">' +
+                                 '<ul class="tabs_toggles">'+
+                                   '<li class="on"><a href="#" data-tab-target=".palette_theme"><i class="material-icons">&#xE3B7;</i></a></li>' +
+                                   '<li><a href="#" data-tab-target=".palette_grayscale"><i class="material-icons">&#xE3E9;</i></a></li>' +
+                                   '<li><a href="#" data-tab-target=".palette_ui"><i class="material-icons">&#xE41D;</i></a></li>' +
+                                   '<li><a href="#" data-tab-target=".palette_spectrum"><i class="material-icons">&#xE3B8;</i></a></li>' +
+                                 '</ul>' +
+                                 '<div class="tabs">' +
+                                   '<div class="tab palette_theme on"/>'+
+                                   '<div class="tab palette_grayscale"/>'+
+                                   '<div class="tab palette_ui"/>'+
+                                   '<div class="tab palette_spectrum">'+
+                                     '<div class="note-color-palette" data-target-event="foreColor"></div>' +
+                                   '</div>' +
+                                 '</div>' +
+                               '</div>' +
+
+                             '</div>' +
+                           '</li>' +
+                         '</ul>';
+
+        var background = '<ul class="dropdown-menu">' +
+                          '<li>' +
+                            '<div class="note-palette-title">' + lang.color.background + '</div>' +
+                            '<div class="btn-group palette-reset">' +
+                              '<div class="note-color-reset" data-event="backColor"' +
+                                ' data-value="inherit" title="' + lang.color.transparent + '"><i class="material-icons">&#xE23B;</i> '+
+                              '</div>' +
+                            '</div>' +
+
+                            '<div class="tabs_container">' +
+                              '<ul class="tabs_toggles">'+
+                                '<li class="on"><a href="#" data-tab-target=".palette_theme"><i class="material-icons">&#xE3B7;</i></a></li>' +
+                                '<li><a href="#" data-tab-target=".palette_grayscale"><i class="material-icons">&#xE3E9;</i></a></li>' +
+                                '<li><a href="#" data-tab-target=".palette_ui"><i class="material-icons">&#xE41D;</i></a></li>' +
+                                '<li><a href="#" data-tab-target=".palette_spectrum"><i class="material-icons">&#xE3B8;</i></a></li>' +
+                              '</ul>' +
+                              '<div class="tabs">' +
+                                '<div class="tab palette_theme on"/>'+
+                                '<div class="tab palette_grayscale"/>'+
+                                '<div class="tab palette_ui"/>'+
+                                '<div class="tab palette_spectrum">'+
+                                  '<div class="note-color-palette" data-target-event="backColor"></div>' +
+                                '</div>' +
+                              '</div>' +
+                            '</div>' +
+
+                          '</li>' +
+                        '</ul>';
+
+        var foregroundButton = tplButton('', {
+          title: lang.color.foreground,
+          wrapper: '<span class="btn-group foreground_toggle" />',
+          dropdown: foreground
+        });
+        var backgroundButton = tplButton('', {
+          title: lang.color.background,
+          wrapper: '<span class="btn-group background_toggle" />',
+          dropdown: background
         });
 
-        return colorButton + moreButton;
+        return colorButton + foregroundButton + backgroundButton;
       },
       bold: function (lang, options) {
         return tplIconButton(options.iconPrefix + options.icons.font.bold, {
@@ -793,12 +848,13 @@ define([
       });
 
       var body = document.body;
+      var container = $('#web_editor-toolbars')
 
       // create Popover
       var $popover = $(this.tplPopovers(langInfo, options)); // ODOO: user (maybe) overrided method
       $popover.addClass('note-air-layout');
       $popover.attr('id', 'note-popover-' + id);
-      $popover.appendTo(body);
+      $popover.appendTo(container);
       createTooltip($popover, keyMap);
       this.createPalette($popover, options); // ODOO: use (maybe) overrided method
 
@@ -806,7 +862,7 @@ define([
       var $handle = $(tplHandles(options));
       $handle.addClass('note-air-layout');
       $handle.attr('id', 'note-handle-' + id);
-      $handle.appendTo(body);
+      $handle.appendTo(container);
 
       // create Dialog
       var $dialog = $(tplDialogs(langInfo, options));
@@ -815,7 +871,7 @@ define([
       $dialog.find('button.close, a.modal-close').click(function () {
         $(this).closest('.modal').modal('hide');
       });
-      $dialog.appendTo(body);
+      $dialog.appendTo(container);
     };
 
     /**
diff --git a/addons/web_editor/static/lib/summernote/src/js/defaults.js b/addons/web_editor/static/lib/summernote/src/js/defaults.js
index f7b0c0c6379..9d8e0bab661 100644
--- a/addons/web_editor/static/lib/summernote/src/js/defaults.js
+++ b/addons/web_editor/static/lib/summernote/src/js/defaults.js
@@ -357,7 +357,7 @@ define('summernote/defaults', function () {
         },
         style: {
           style: 'Style',
-          normal: 'Normal',
+          normal: 'Paragraph',
           blockquote: 'Quote',
           pre: 'Code',
           h1: 'Header 1',
diff --git a/addons/web_editor/static/lib/summernote/src/less/elements.less b/addons/web_editor/static/lib/summernote/src/less/elements.less
deleted file mode 100644
index 2ece26af004..00000000000
--- a/addons/web_editor/static/lib/summernote/src/less/elements.less
+++ /dev/null
@@ -1,156 +0,0 @@
-/*---------------------------------------------------
-    LESS Elements 0.9
-  ---------------------------------------------------
-    A set of useful LESS mixins
-    More info at: http://lesselements.com
-  ---------------------------------------------------*/
-
-.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
-  background: @color;
-  background: -webkit-gradient(linear,
-                               left bottom,
-                               left top,
-                               color-stop(0, @start),
-                               color-stop(1, @stop));
-  background: -ms-linear-gradient(bottom,
-                                  @start,
-                                  @stop);
-  background: -moz-linear-gradient(center bottom,
-                                   @start 0%,
-                                   @stop 100%);
-  background: -o-linear-gradient(@stop,
-                                 @start);
-  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
-}
-.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
-  background: @color;
-  background: -webkit-gradient(linear,
-                               left bottom,
-                               left top,
-                               color-stop(0, rgb(@start,@start,@start)),
-                               color-stop(1, rgb(@stop,@stop,@stop)));
-  background: -ms-linear-gradient(bottom,
-                                  rgb(@start,@start,@start) 0%,
-                                  rgb(@stop,@stop,@stop) 100%);
-  background: -moz-linear-gradient(center bottom,
-                                   rgb(@start,@start,@start) 0%,
-                                   rgb(@stop,@stop,@stop) 100%);
-  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
-                                 rgb(@start,@start,@start));
-  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
-}
-.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
-  border-top: solid 1px @top-color;
-  border-left: solid 1px @left-color;
-  border-right: solid 1px @right-color;
-  border-bottom: solid 1px @bottom-color;
-}
-.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
-  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-}
-.rounded(@radius: 2px) {
-  -webkit-border-radius: @radius;
-  -moz-border-radius: @radius;
-  border-radius: @radius;
-}
-.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-  -webkit-border-top-right-radius: @topright;
-  -webkit-border-bottom-right-radius: @bottomright;
-  -webkit-border-bottom-left-radius: @bottomleft;
-  -webkit-border-top-left-radius: @topleft;
-  -moz-border-radius-topright: @topright;
-  -moz-border-radius-bottomright: @bottomright;
-  -moz-border-radius-bottomleft: @bottomleft;
-  -moz-border-radius-topleft: @topleft;
-  border-top-right-radius: @topright;
-  border-bottom-right-radius: @bottomright;
-  border-bottom-left-radius: @bottomleft;
-  border-top-left-radius: @topleft;
-  .background-clip(padding-box);
-}
-.opacity(@opacity: 0.5) {
-  -webkit-opacity: @opacity;
-  -khtml-opacity: @opacity;
-  -moz-opacity: @opacity;
-  opacity: @opacity;
-  @opperc: @opacity * 100;
-  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
-  filter: ~"alpha(opacity=@{opperc})";
-}
-.transition-duration(@duration: 0.2s) {
-  -moz-transition-duration: @duration;
-  -webkit-transition-duration: @duration;
-  -o-transition-duration: @duration;
-  transition-duration: @duration;
-}
-.transform(...) {
-  -webkit-transform: @arguments;
-  -moz-transform: @arguments;
-  -o-transform: @arguments;
-  -ms-transform: @arguments;
-  transform: @arguments;
-}
-.rotation(@deg:5deg){
-  .transform(rotate(@deg));
-}
-.scale(@ratio:1.5){
-  .transform(scale(@ratio));
-}
-.transition(@duration:0.2s, @ease:ease-out) {
-  -webkit-transition: all @duration @ease;
-  -moz-transition: all @duration @ease;
-  -o-transition: all @duration @ease;
-  transition: all @duration @ease;
-}
-.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
-  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-}
-.box-shadow(@arguments) {
-  -webkit-box-shadow: @arguments;
-  -moz-box-shadow: @arguments;
-  box-shadow: @arguments;
-}
-.box-sizing(@sizing: border-box) {
-  -ms-box-sizing: @sizing;
-  -moz-box-sizing: @sizing;
-  -webkit-box-sizing: @sizing;
-  box-sizing: @sizing;
-}
-.user-select(@argument: none) {
-  -webkit-user-select: @argument;
-  -moz-user-select: @argument;
-  -ms-user-select: @argument;
-  user-select: @argument;
-}
-.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
-  -moz-column-width: @colwidth;
-  -moz-column-count: @colcount;
-  -moz-column-gap: @colgap;
-  -moz-column-rule-color: @columnRuleColor;
-  -moz-column-rule-style: @columnRuleStyle;
-  -moz-column-rule-width: @columnRuleWidth;
-  -webkit-column-width: @colwidth;
-  -webkit-column-count: @colcount;
-  -webkit-column-gap: @colgap;
-  -webkit-column-rule-color: @columnRuleColor;
-  -webkit-column-rule-style: @columnRuleStyle;
-  -webkit-column-rule-width: @columnRuleWidth;
-  column-width: @colwidth;
-  column-count: @colcount;
-  column-gap: @colgap;
-  column-rule-color: @columnRuleColor;
-  column-rule-style: @columnRuleStyle;
-  column-rule-width: @columnRuleWidth;
-}
-.translate(@x:0, @y:0) {
-  .transform(translate(@x, @y));
-}
-.background-clip(@argument: padding-box) {
-  -moz-background-clip: @argument;
-  -webkit-background-clip: @argument;
-  background-clip: @argument;
-}
diff --git a/addons/web_editor/static/lib/summernote/src/less/summernote.less b/addons/web_editor/static/lib/summernote/src/less/summernote.less
index 806d1860ed7..caf66215d3f 100644
--- a/addons/web_editor/static/lib/summernote/src/less/summernote.less
+++ b/addons/web_editor/static/lib/summernote/src/less/summernote.less
@@ -1,4 +1,30 @@
 /* @_import "elements.less"; ODOO: removed call directly */
+/* Mixins */
+
+.box-sizing(@boxmodel) {
+  -webkit-box-sizing: @boxmodel;
+     -moz-box-sizing: @boxmodel;
+          box-sizing: @boxmodel;
+}
+.rounded(@radius: 2px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+.opacity(@opacity: 0.5) {
+  -webkit-opacity: @opacity;
+  -khtml-opacity: @opacity;
+  -moz-opacity: @opacity;
+  opacity: @opacity;
+  @opperc: @opacity * 100;
+  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
+  filter: ~"alpha(opacity=@{opperc})";
+}
+.box-shadow(@arguments) {
+  -webkit-box-shadow: @arguments;
+  -moz-box-shadow: @arguments;
+  box-shadow: @arguments;
+}
 
 /* Theme Variables
  ------------------------------------------*/
diff --git a/addons/web_editor/static/lib/summernote/summernote.css b/addons/web_editor/static/lib/summernote/summernote.css
deleted file mode 100644
index f22f83c5acd..00000000000
--- a/addons/web_editor/static/lib/summernote/summernote.css
+++ /dev/null
@@ -1 +0,0 @@
-.note-editor{position:relative;border:1px solid #a9a9a9}.note-editor .note-dropzone{position:absolute;z-index:1;display:none;color:#87cefa;background-color:white;border:2px dashed #87cefa;opacity:.95;pointer-event:none}.note-editor .note-dropzone .note-dropzone-message{display:table-cell;font-size:28px;font-weight:bold;text-align:center;vertical-align:middle}.note-editor .note-dropzone.hover{color:#098ddf;border:2px dashed #098ddf}.note-editor.dragover .note-dropzone{display:table}.note-editor .note-toolbar{background-color:#f5f5f5;border-bottom:1px solid #a9a9a9}.note-editor.fullscreen{position:fixed;top:0;left:0;z-index:1050;width:100%}.note-editor.fullscreen .note-editable{background-color:white}.note-editor.fullscreen .note-resizebar{display:none}.note-editor.codeview .note-editable{display:none}.note-editor.codeview .note-codable{display:block}.note-editor .note-statusbar{background-color:#f5f5f5}.note-editor .note-statusbar .note-resizebar{width:100%;height:8px;cursor:ns-resize;border-top:1px solid #a9a9a9}.note-editor .note-statusbar .note-resizebar .note-icon-bar{width:20px;margin:1px auto;border-top:1px solid #a9a9a9}.note-editor .note-editable{padding:10px;overflow:auto;outline:0}.note-editor .note-editable[contenteditable="false"]{background-color:#e5e5e5}.note-editor .note-codable{display:none;width:100%;padding:10px;margin-bottom:0;font-family:Menlo,Monaco,monospace,sans-serif;font-size:14px;color:#ccc;background-color:#222;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;resize:none}.note-air-editor{outline:0}.note-popover .popover{max-width:none}.note-popover .popover .popover-content a{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.note-popover .popover .arrow{left:20px}.note-popover .popover .popover-content,.note-toolbar{padding:0 0 5px 5px;margin:0}.note-popover .popover .popover-content>.btn-group,.note-toolbar>.btn-group{margin-top:5px;margin-right:5px;margin-left:0}.note-popover .popover .popover-content .note-table .dropdown-menu,.note-toolbar .note-table .dropdown-menu{min-width:0;padding:5px}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker,.note-toolbar .note-table .dropdown-menu .note-dimension-picker{font-size:18px}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher,.note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher{position:absolute!important;z-index:3;width:10em;height:10em;cursor:pointer}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted,.note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted{position:relative!important;z-index:1;width:5em;height:5em;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted,.note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted{position:absolute!important;z-index:2;width:1em;height:1em;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat}.note-popover .popover .popover-content .note-style h1,.note-toolbar .note-style h1,.note-popover .popover .popover-content .note-style h2,.note-toolbar .note-style h2,.note-popover .popover .popover-content .note-style h3,.note-toolbar .note-style h3,.note-popover .popover .popover-content .note-style h4,.note-toolbar .note-style h4,.note-popover .popover .popover-content .note-style h5,.note-toolbar .note-style h5,.note-popover .popover .popover-content .note-style h6,.note-toolbar .note-style h6,.note-popover .popover .popover-content .note-style blockquote,.note-toolbar .note-style blockquote{margin:0}.note-popover .popover .popover-content .note-color .dropdown-toggle,.note-toolbar .note-color .dropdown-toggle{width:20px;padding-left:5px}.note-popover .popover .popover-content .note-color .dropdown-menu,.note-toolbar .note-color .dropdown-menu{min-width:340px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group,.note-toolbar .note-color .dropdown-menu .btn-group{margin:0}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group:first-child,.note-toolbar .note-color .dropdown-menu .btn-group:first-child{margin:0 5px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-palette-title,.note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title{margin:2px 7px;font-size:12px;text-align:center;border-bottom:1px solid #eee}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset,.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset{padding:0 3px;margin:3px;font-size:11px;cursor:pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-row,.note-toolbar .note-color .dropdown-menu .btn-group .note-color-row{height:20px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset:hover,.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover{background:#eee}.note-popover .popover .popover-content .note-para .dropdown-menu,.note-toolbar .note-para .dropdown-menu{min-width:216px;padding:5px}.note-popover .popover .popover-content .note-para .dropdown-menu>div:first-child,.note-toolbar .note-para .dropdown-menu>div:first-child{margin-right:5px}.note-popover .popover .popover-content .dropdown-menu,.note-toolbar .dropdown-menu{min-width:90px}.note-popover .popover .popover-content .dropdown-menu.right,.note-toolbar .dropdown-menu.right{right:0;left:auto}.note-popover .popover .popover-content .dropdown-menu.right::before,.note-toolbar .dropdown-menu.right::before{right:9px;left:auto!important}.note-popover .popover .popover-content .dropdown-menu.right::after,.note-toolbar .dropdown-menu.right::after{right:10px;left:auto!important}.note-popover .popover .popover-content .dropdown-menu li a i,.note-toolbar .dropdown-menu li a i{color:deepskyblue;visibility:hidden}.note-popover .popover .popover-content .dropdown-menu li a.checked i,.note-toolbar .dropdown-menu li a.checked i{visibility:visible}.note-popover .popover .popover-content .note-fontsize-10,.note-toolbar .note-fontsize-10{font-size:10px}.note-popover .popover .popover-content .note-color-palette,.note-toolbar .note-color-palette{line-height:1}.note-popover .popover .popover-content .note-color-palette div .note-color-btn,.note-toolbar .note-color-palette div .note-color-btn{width:20px;height:20px;padding:0;margin:0;border:1px solid #fff}.note-popover .popover .popover-content .note-color-palette div .note-color-btn:hover,.note-toolbar .note-color-palette div .note-color-btn:hover{border:1px solid #000}.note-dialog>div{display:none}.note-dialog .note-image-dialog .note-dropzone{min-height:100px;margin-bottom:10px;font-size:30px;line-height:4;color:lightgray;text-align:center;border:4px dashed lightgray}.note-dialog .note-help-dialog{font-size:12px;color:#ccc;background:transparent;background-color:#222!important;border:0;-webkit-opacity:.9;-khtml-opacity:.9;-moz-opacity:.9;opacity:.9;-ms-filter:alpha(opacity=90);filter:alpha(opacity=90)}.note-dialog .note-help-dialog .modal-content{background:transparent;border:1px solid white;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.note-dialog .note-help-dialog a{font-size:12px;color:white}.note-dialog .note-help-dialog .title{padding-bottom:5px;font-size:14px;font-weight:bold;color:white;border-bottom:white 1px solid}.note-dialog .note-help-dialog .modal-close{font-size:14px;color:#dd0;cursor:pointer}.note-dialog .note-help-dialog .note-shortcut-layout{width:100%}.note-dialog .note-help-dialog .note-shortcut-layout td{vertical-align:top}.note-dialog .note-help-dialog .note-shortcut{margin-top:8px}.note-dialog .note-help-dialog .note-shortcut th{font-size:13px;color:#dd0;text-align:left}.note-dialog .note-help-dialog .note-shortcut td:first-child{min-width:110px;padding-right:10px;font-family:"Courier New";color:#dd0;text-align:right}.note-handle .note-control-selection{position:absolute;display:none;border:1px solid black}.note-handle .note-control-selection>div{position:absolute}.note-handle .note-control-selection .note-control-selection-bg{width:100%;height:100%;background-color:black;-webkit-opacity:.3;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3;-ms-filter:alpha(opacity=30);filter:alpha(opacity=30)}.note-handle .note-control-selection .note-control-handle{width:7px;height:7px;border:1px solid black}.note-handle .note-control-selection .note-control-holder{width:7px;height:7px;border:1px solid black}.note-handle .note-control-selection .note-control-sizing{width:7px;height:7px;background-color:white;border:1px solid black}.note-handle .note-control-selection .note-control-nw{top:-5px;left:-5px;border-right:0;border-bottom:0}.note-handle .note-control-selection .note-control-ne{top:-5px;right:-5px;border-bottom:0;border-left:none}.note-handle .note-control-selection .note-control-sw{bottom:-5px;left:-5px;border-top:0;border-right:0}.note-handle .note-control-selection .note-control-se{right:-5px;bottom:-5px;cursor:se-resize}.note-handle .note-control-selection .note-control-selection-info{right:0;bottom:0;padding:5px;margin:5px;font-size:12px;color:white;background-color:black;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-opacity:.7;-khtml-opacity:.7;-moz-opacity:.7;opacity:.7;-ms-filter:alpha(opacity=70);filter:alpha(opacity=70)}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/css/common.sass b/addons/web_editor/static/src/css/common.sass
deleted file mode 100644
index 264f0166c49..00000000000
--- a/addons/web_editor/static/src/css/common.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "compass/css3"
-@import "compass/css3/user-interface"
-@import "compass/css3/transition"
-@import "compass/support"
diff --git a/addons/web_editor/static/src/css/inline.css b/addons/web_editor/static/src/css/web_editor.iframe.inline.css
similarity index 100%
rename from addons/web_editor/static/src/css/inline.css
rename to addons/web_editor/static/src/css/web_editor.iframe.inline.css
diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass
deleted file mode 100644
index 2b5b4a8ee2f..00000000000
--- a/addons/web_editor/static/src/css/web_editor.sass
+++ /dev/null
@@ -1,141 +0,0 @@
-@charset "utf-8"
-@import "common"
-
-/* ----- EDITOR ----- */
-
-.css_non_editable_mode_hidden
-    display: none !important
-
-/* ----- Editor (for public user, like forum) ----- */
-
-.note-toolbar
-    margin-left: 0 !important
-
-.note-popover .popover > .arrow
-    display: none
-
-/* ----- GENERIC LAYOUTING HELPERS ---- */
-
-.hidden
-    display: none !important
-
-/* table */
-
-#wrapwrap, .o_editable
-    table.table
-        table-layout: fixed
-        td
-            min-width: 20px
-
-/* Media */
-
-img.shadow
-    +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
-
-img, .img, span.fa, iframe
-    &.padding-small
-        padding: 4px
-    &.padding-medium
-        padding: 8px
-    &.padding-large
-        padding: 16px
-    &.padding-xl
-        padding: 32px
-div.media_iframe_video
-    &.padding-small iframe
-        padding: 4px
-    &.padding-medium iframe
-        padding: 8px
-    &.padding-large iframe
-        padding: 16px
-    &.padding-xl iframe
-        padding: 32px
-
-/* font awsome */
-
-.fa-6x
-    font-size: 6em
-.fa-7x
-    font-size: 7em
-.fa-8x
-    font-size: 8em
-.fa-9x
-    font-size: 9em
-.fa-10x
-    font-size: 10em
-.fa.center-block
-    text-align: center
-
-/* video */
-
-div.media_iframe_video
-    margin: 0 auto
-    text-align: center
-    position: relative
-    overflow: hidden
-    iframe
-        width: 100%
-        height: 100%
-        top: 0
-        position: absolute
-        margin: 0 auto
-        margin-left: -50%
-    .media_iframe_video_size
-        padding-bottom: 66.5%
-        position: relative
-        width: 100%
-        height: 0
-    .css_editable_mode_display
-        position: absolute
-        width: 100%
-        height: 100%
-        display: none
-        z-index: 2
-
-html[data-browser^="msie"] div.media_iframe_video iframe
-    margin-left: 0
-
-/* Mobile view */
-
-@media (max-width: 768px)
-    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
-        -webkit-transform: none !important
-        -moz-transform: none !important
-        -ms-transform: none !important
-        -o-transform: none !important
-        transform: none !important
-
-/* ---- fields --- */
-
-address
-    .fa.fa-mobile-phone
-        margin: 0 3px 0 2px
-    .fa.fa-file-text-o
-        margin-right: 1px
-
-span[data-oe-type="monetary"]
-    white-space: nowrap
-
-/* ---- MENU ---- {{{ */
-
-div.oe_menu_buttons
-    top: -8px
-    right: -8px
-
-ul.oe_menu_editor
-    .fa-home
-        display: none
-    > li:first-child > div > span > .fa-home
-        display: block
-    .oe_menu_placeholder
-        outline: 1px dashed #4183C4
-    ul
-        list-style: none
-    li div
-        cursor: move
-    .disclose
-        cursor: pointer
-        width: 10px
-        display: none
-
-// }}}
diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index 094d13340dc..28e1a32a55e 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -45,13 +45,26 @@ renderer.createPalette = function ($container, options) {
     }
 
     var $color = $container.find('.note-color');
-    var html = QWeb.render('web_editor.colorpicker');
-    $color.find('.note-color-palette').prepend(html);
-    var $bg = $color.find('.colorpicker:first button');
-    var $fore = $color.find('.colorpicker:last button');
+    var html = $(QWeb.render('web_editor.colorpicker'));
+    var theme = html.find('.theme')
 
-    $bg.each(function () { $(this).attr('data-event', 'backColor').attr('data-value', $(this).attr('class')); });
-    $fore.each(function () { $(this).attr('data-event', 'foreColor').attr('data-value', $(this).attr('class').replace(/bg-/, 'text-')); });
+    $color.find('.palette_theme').prepend(html.find('.theme'));
+    $color.find('.palette_ui').prepend(html.find('.ui'));
+    $color.find('.palette_grayscale').prepend(html.find('.grayscale'));
+
+    var $bg = $color.find('.background_toggle .dropdown-menu button');
+    var $fore = $color.find('.foreground_toggle .dropdown-menu button');
+
+    $bg.each(function () {
+        $(this).attr('data-event', 'backColor').attr('data-value',
+             $(this).attr($(this).attr('class') == 'note-color-btn' ?'title':'class')
+        );
+    });
+    $fore.each(function () {
+        $(this).attr('data-event', 'foreColor').attr('data-value',
+            $(this).attr($(this).attr('class') == 'note-color-btn' ?'title':'class').replace(/bg-/, 'text-')
+        );
+     });
 };
 
 var fn_tplPopovers = renderer.tplPopovers;
@@ -144,7 +157,7 @@ renderer.tplPopovers = function (lang, options) {
     $imagePopover.find('.popover-content').append($airPopover.find(".note-history").clone());
 
     $imagePopover.find('[data-event="showImageDialog"]').before($airPopover.find('[data-event="showLinkDialog"]').clone());
-    
+
     //////////////// link popover
 
     $linkPopover.find('.popover-content').append($airPopover.find(".note-history").clone());
@@ -196,7 +209,24 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
     fn_boutton_update.call(this, $container, oStyle);
 
-    $container.find('.note-color').removeClass("hidden");
+    $container.find('.note-color').removeClass("hidden")
+
+    // ACTIVATE TABS
+    $container.find('[data-tab-target]').each(function(){
+      var $el = $(this);
+      var target = $el.data('tab-target');
+      var $parent = $el.parent().closest('.tabs_container');
+      var $parentLi = $el.parent().closest('li');
+
+      $parentLi.on('click', function(){return false});
+
+      $el.on('click', function(){
+        $parent.find('.tab, .tabs_toggles li').removeClass('on');
+        $parent.find(target).add($parentLi).addClass('on')
+        return false;
+      })
+    })
+
 
     if (oStyle.image) {
         $container.find('[data-event]').parent().removeClass("active");
@@ -343,7 +373,7 @@ eventHandler.modules.editor.imageShape = function ($editable, sValue) {
 eventHandler.modules.linkDialog.showLinkDialog = function ($editable, $dialog, linkInfo) {
     $editable.data('range').select();
     $editable.data('NoteHistory').recordUndo();
-    
+
     var editor = new widgets.LinkDialog($editable, linkInfo);
     editor.appendTo(document.body);
 
@@ -586,7 +616,7 @@ function summernote_mousedown (event) {
     rte.history.splitNext();
 
     var $editable = $(event.target).closest(".o_editable, .note-editor");
-    
+
     if (!!document.documentMode) {
         summernote_ie_fix(event, function (node) { return node.tagName === "DIV" || node.tagName === "IMG" || (node.dataset && node.dataset.oeModel); });
     } else if (last_div && event.target !== last_div) {
@@ -714,6 +744,7 @@ eventHandler.attach = function (oLayoutInfo, options) {
         }
     });
     $(document).on("keyup", reRangeSelectKey);
+
     var clone_data = false;
     var $node = oLayoutInfo.editor();
     if ($node.data('oe-model') || $node.data('oe-translation-id')) {
diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js
index 79db510bf6a..93e09c4e7f0 100644
--- a/addons/web_editor/static/src/js/snippets.editor.js
+++ b/addons/web_editor/static/src/js/snippets.editor.js
@@ -377,7 +377,7 @@ var BuildingBlock = Widget.extend({
             var $last = $scroll.children(":visible").last().children(".o_panel_body");
             $last.css({'min-height': (height-$last.prev().outerHeight())+'px'});
             if ($scroll[0].scrollHeight + $ul[0].scrollHeight > document.body.clientHeight) {
-                $scroll.css("overflow", "auto").css("width", "226px");
+                $scroll.css("overflow", "auto").css("width", "100%");
             } else {
                 $scroll.css("width", "");
             }
diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index 04477f3b768..cbf8fea5c4e 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -70,7 +70,7 @@ var Option = Class.extend({
             this.$target.trigger("snippet-option-preview", [this]);
         }
     },
-    /* 
+    /*
     *  select and set item active or not (add highlight item and his parents)
     *  called before start
     */
@@ -276,8 +276,59 @@ var colorpicker = Option.extend({
         var self = this;
         var res = this._super();
 
+        var paletteTemplate = '<div class="colorpicker">'+
+                       '<div class="note-palette-title">Background Color</div>' +
+                       '<div class="btn-group palette-reset">' +
+                         '<div class="note-color-reset" data-event="foreColor"' +
+                           ' data-value="inherit" title="None"><i class="material-icons">&#xE23B;</i> '+
+                         '</div>' +
+                       '</div>' +
+
+                       '<div class="tabs_container">' +
+                         '<ul class="tabs_toggles">'+
+                           '<li class="on"><a href="#" data-tab-target=".palette_theme"><i class="material-icons">&#xE3B7;</i></a></li>' +
+                           '<li><a href="#" data-tab-target=".palette_grayscale"><i class="material-icons">&#xE3E9;</i></a></li>' +
+                           '<li><a href="#" data-tab-target=".palette_ui"><i class="material-icons">&#xE41D;</i></a></li>' +
+                           '<li><a href="#" data-tab-target=".palette_spectrum"><i class="material-icons">&#xE3B8;</i></a></li>' +
+                         '</ul>' +
+                         '<div class="tabs">' +
+                           '<div class="tab palette_theme on"/>'+
+                           '<div class="tab palette_grayscale"/>'+
+                           '<div class="tab palette_ui"/>'+
+                           '<div class="tab palette_spectrum">'+
+                             '<div class="note-color-palette"></div>' +
+                           '</div>' +
+                         '</div>' +
+                       '</div>' +
+
+                     '</div></div>';
+        var $pt = $(paletteTemplate);
+
         if (!this.$el.find('.colorpicker').length) {
-            this.$el.find('li').append( qweb.render('web_editor.colorpicker') );
+            var $clpicker = $(qweb.render('web_editor.colorpicker'))
+            var pTheme = $clpicker.find('.theme')
+            var pGray = $clpicker.find('.grayscale')
+            var pUi = $clpicker.find('.ui')
+            $pt.find('.palette_theme').append(pTheme).end()
+               .find('.palette_grayscale').append(pGray).end()
+               .find('.palette_ui').append(pUi)
+            this.$el.find('li').append($pt);
+
+            // ACTIVATE TABS
+            this.$el.find('[data-tab-target]').each(function(){
+              var $el = $(this);
+              var target = $el.data('tab-target');
+              var $parent = $el.parent().closest('.tabs_container');
+              var $parentLi = $el.parent().closest('li');
+
+              $parentLi.on('click', function(){return false});
+
+              $el.on('click', function(){
+                $parent.find('.tab, .tabs_toggles li').removeClass('on');
+                $parent.find(target).add($parentLi).addClass('on')
+                return false;
+              })
+            })
         }
         if (this.$el.data('area')) {
             this.$target = this.$target.find(this.$el.data('area'));
@@ -301,7 +352,7 @@ var colorpicker = Option.extend({
     },
     bind_events: function () {
         var self = this;
-        var $td = this.$el.find(".colorpicker td");
+        var $td = this.$el.find(".tab");
         var $colors = this.$el.find(".colorpicker button");
         $colors
             .mouseenter(function () {
@@ -309,16 +360,184 @@ var colorpicker = Option.extend({
             })
             .mouseleave(function () {
                 self.$target.removeClass(self.classes)
-                    .addClass($td.filter(".selected").children().attr("class"));
+                    .addClass($colors.filter(".selected").attr("class"));
             })
             .click(function () {
-                $td.removeClass("selected");
-                $(this).parent().addClass("selected");
+                $colors.removeClass("selected");
+                $(this).addClass("selected");
                 self.$target.closest(".o_editable").trigger("content_changed");
             });
     }
 });
 
+var background_position = Option.extend({
+    start: function(){
+        var self = this;
+        var $btn = self.$overlay.find('.oe_options');
+        $btn.on('show.bs.dropdown', function(){
+            if (self.$target.css('background-image') == 'none'){
+                $btn.find('.background_position_li').addClass('hidden')
+            } else {
+                $btn.find('.background_position_li').removeClass('hidden')
+            }
+        })
+    },
+    background_position: function(type, value, $li){
+        if (type != 'click') return;
+        var self = this;
+        var $modal = $(qweb.render('web_editor.dialog.background_position'));
+        $modal.modal()
+        $modal.on('hidden.bs.modal', function(){
+            setTimeout(function(){
+                $modal.remove()
+            },2000)
+        })
+        self.editing(self, $modal)
+    },
+    editing: function(self, $modal){
+        // Init main collapse
+        $modal.find(".panel-collapse.collapse").collapse({
+            toggle: false,
+            parent: $('#bg_image_opt_accordition')
+        })
+
+        // Fetch data form $target
+        if(self.$target.hasClass('o_bg_img_contain')){
+            $modal.find("#bg_size").val('o_bg_img_contain').end()
+                  .find("#radio2").prop('checked', true).end()
+                  .find("#collapse_contain").collapse('show');
+
+        } else if (self.$target.hasClass('o_bg_img_cover')){
+            $modal.find("#bg_size").val('o_bg_img_cover').end()
+                  .find("#radio1").prop('checked', true).end()
+                  .find("#collapse_cover").collapse('show');
+        } else if (self.$target.hasClass('o_bg_img_custom')){
+            $modal.find("#bg_size").val('o_bg_img_custom').end()
+                  .find("#radio3").prop('checked', true).end()
+                  .find("#collapse_custom").collapse('show');
+        }
+        if(self.$target.hasClass("o_bg_img_repeat")){
+            $modal.find("#contain_repeat").prop('checked', true);
+            $modal.find("#custom_repeat").val('o_bg_img_repeat')
+        } else if (self.$target.hasClass("o_bg_img_no_repeat")){
+            $modal.find("#custom_repeat").val('o_bg_img_no_repeat')
+        } else if (self.$target.hasClass("o_bg_img_repeat_x")){
+            $modal.find("#custom_repeat").val('o_bg_img_repeat_x')
+        } else if (self.$target.hasClass("o_bg_img_repeat_y")){
+            $modal.find("#custom_repeat").val('o_bg_img_repeat_y')
+        }
+
+        var bg_pos = self.$target.css('background-position').split(' '),
+            bg_siz = self.$target.css('background-size').split(' ');
+
+        if( bg_pos.length > 1 ) {
+            $modal.find("#custom_pos_x").val(bg_pos[0].replace('%',''))
+            $modal.find("#custom_pos_y").val(bg_pos[1].replace('%',''))
+        }
+        if( bg_siz.length > 1 ) {
+            $modal.find("#custom_size_x").val(bg_siz[0].replace('%',''))
+            $modal.find("#custom_size_y").val(bg_siz[1].replace('%',''))
+        }
+
+        // Collapse events
+        $('#collapse_cover').on('show.bs.collapse', function(){
+            $('#radio1').prop('checked', true);
+            $modal.find("#bg_size").val('o_bg_img_cover');
+        });
+
+        $('#collapse_contain').on('show.bs.collapse', function(){
+            $('#radio2').prop('checked', true);
+            $modal.find("#bg_size").val('o_bg_img_contain');
+        });
+
+        $('#collapse_custom').on('show.bs.collapse', function(){
+            $('#radio3').prop('checked', true);
+            $modal.find("#bg_size").val('o_bg_img_custom');
+        });
+
+        // Focus Point
+        var img_url  = self.$target.css('background-image').replace(/url\(['"]*|['"]*\)|^none$/g, "");
+
+        var $object  = $modal.find(".object"),
+            $focus   = $modal.find(".focus_point");
+
+        $modal.find("#pos_x").val(bg_pos[0]).end()
+              .find("#pos_y").val(bg_pos[1]).end()
+              .find(".ui_info .x").text(bg_pos[0]).end()
+              .find(".ui_info .y").text(bg_pos[1])
+        $focus.css({
+            left: bg_pos[0],
+            top:  bg_pos[1]
+        })
+        setTimeout(function(){$focus.addClass("ready") },50)
+
+        var $img = $('<img class="img-responsive" src="'+ img_url +'"/>')
+        $img.prependTo($object)
+        $img.on('load',function(){
+            self.retrive_click($img, $focus, $modal, self);
+        })
+
+        // Save
+        $modal.find('.save').on('click',function(){self.save($modal, self) })
+    },
+    retrive_click: function($img, $focus, $modal, self){
+        // Prevent clicks on ui items
+        $focus.on('click', function(){$img.mousedown(); })
+        $modal.find('.ui_info').on('click', function(){$img.mousedown(); })
+        $modal.find('.grid').on('click', function(){$img.mousedown(); })
+
+        // Retrive click position
+        $img.click(function (e) {
+            var posX  = e.pageX - $(this).offset().left,
+                posY  = e.pageY - $(this).offset().top;
+            var res = {
+                x: (self.range_value(posX/$img.width()*100).toFixed(2)) + '%',
+                y: (self.range_value(posY/$img.height()*100).toFixed(2)) + '%'
+            };
+            $focus.css({top:  res.y, left: res.x })
+
+            $modal.find("#pos_x").val(res.x).end()
+                  .find("#pos_y").val(res.y).end()
+                  .find(".ui_info .x").text(res.x).end()
+                  .find(".ui_info .y").text(res.y).end()
+                  .find(".ui_info").hide()
+
+            setTimeout(function(){$modal.find(".ui_info").show() },50)
+        });
+    },
+    range_value: function(value){
+        if (value < 0)   value = 0;
+        if (value > 100) value = 100;
+        return (value)
+    },
+    save: function($modal, self){
+        self.clean(self.$target);
+        self.$target.addClass($modal.find("#bg_size").val());
+        switch ($modal.find("#bg_size").val()) {
+            case "o_bg_img_cover":
+                self.$target.css('background-position', $modal.find("#pos_x").val() + ' ' +$modal.find("#pos_y").val())
+                break;
+            case "o_bg_img_contain":
+                if ($modal.find("#contain_repeat").is(":checked")){
+                    self.$target.addClass('o_bg_img_repeat')
+                } else {
+                    self.$target.addClass('o_bg_img_no_repeat')
+                }
+                break;
+            case "o_bg_img_custom":
+                self.$target.addClass($modal.find("#custom_repeat").val());
+                self.$target.css('background-size',     $modal.find("#custom_size_x").val() + '% ' + $modal.find("#custom_size_y").val() + '%');
+                self.$target.css('background-position', $modal.find("#custom_pos_x").val()  + '% ' + $modal.find("#custom_pos_y").val()  + '%');
+                break;
+        }
+    },
+    clean: function($target){
+        $target.removeClass('o_bg_img_cover o_bg_img_contain o_bg_img_custom o_bg_img_repeat o_bg_img_repeat_x o_bg_img_repeat_y o_bg_img_no_repeat')
+               .css('background-size', '')
+               .css('background-position', '');
+    },
+});
+
 var background = Option.extend({
     start: function ($change_target) {
         this.$target = $change_target || this.$target;
@@ -537,6 +756,7 @@ return {
     'registry': {
         'media': media,
         'colorpicker': colorpicker,
+        'background_position': background_position,
         'background': background,
         'many2one': many2one,
     },
diff --git a/addons/web_editor/static/src/js/summernote.js b/addons/web_editor/static/src/js/summernote.js
index e4d1c5b27c4..775c4398268 100644
--- a/addons/web_editor/static/src/js/summernote.js
+++ b/addons/web_editor/static/src/js/summernote.js
@@ -210,7 +210,7 @@ dom.merge = function (node, begin, so, end, eo, mergeFilter, all) {
         while(end.lastChild) {end = end.lastChild;}
         eo = end.textContent.length-1;
     } else if (end.tagName) {
-        
+
     } else if (end.tagName && end.childNodes[so]) {
         end = end.childNodes[so];
         so = 0;
@@ -234,7 +234,7 @@ dom.merge = function (node, begin, so, end, eo, mergeFilter, all) {
             if (cur === begin) {
                 if (!all) add = true;
             }
-            
+
             __merge(cur);
             dom.orderClass(dom.node(cur));
 
@@ -1501,7 +1501,7 @@ $.summernote.pluginEvents.backspace = function (event, editor, layoutInfo) {
 
         dom.removeSpace(temp2.parentNode, temp2, 0, temp, 0); // clean before jump for not select invisible space between 2 tag
         temp2 = dom.lastChild(temp2);
-    
+
         r = range.create(temp2, temp2.textContent.length, temp2, temp2.textContent.length);
         r.select();
 
@@ -1876,11 +1876,11 @@ eventHandler.modules.toolbar.button.updateRecentColor = function (elBtn, sEvent,
             font.style.color = sValue !== 'inherit' ? sValue : "";
         }
     } else {
+        font.className = font.className.replace(/(^|\s+)bg-\S+/, '');
         if (sValue.indexOf('bg-') !== -1) {
             font.className += ' ' + sValue;
             font.style.backgroundColor = "";
         } else {
-            font.className = font.className.replace(/(^|\s+)bg-\S+/);
             font.style.backgroundColor = sValue !== 'inherit' ? sValue : "";
         }
     }
diff --git a/addons/web_editor/static/src/css/backend.css b/addons/web_editor/static/src/less/web_editor.backend.less
similarity index 62%
rename from addons/web_editor/static/src/css/backend.css
rename to addons/web_editor/static/src/less/web_editor.backend.less
index 2512b1de9c0..e9043dc138e 100644
--- a/addons/web_editor/static/src/css/backend.css
+++ b/addons/web_editor/static/src/less/web_editor.backend.less
@@ -1,9 +1,16 @@
-.oe_form_field_html_text .note-editable {
+.oe_form_field_html_text {
+  .note-editable {
     min-height: 180px;
     font: initial !important;
     font-family: inherit !important;
     line-height: initial !important;
     color: initial !important;
+    p {
+      margin: initial;
+    }
+    a, a:hover {
+      color: initial;
+    }
 }
 .oe_form_field_html_text .o_readonly {
     min-height: 1em;
@@ -19,16 +26,17 @@
 }
 
 .oe_form_field_html iframe {
-    display: block;
-    width: 100%;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    min-height: 300px;
-    min-height: -webkit-calc(100vh - 170px);
-    min-height: calc(100vh - 170px);
+  display: block;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-height: 300px;
+  min-height: -webkit-calc(100vh - 170px);
+  min-height: calc(100vh - 170px);
 }
-.o_form_FieldTextHtml_fullscreen .oe_form_field_html.o_form_fullscreen_ancestor iframe {
+.o_form_FieldTextHtml_fullscreen{
+  .oe_form_field_html.o_form_fullscreen_ancestor iframe {
     position: absolute !important;
     left: 0 !important;
     right: 0 !important;
@@ -38,12 +46,11 @@
     min-height: 100% !important;
     z-index: 1001 !important;
     border: 0;
-}
-
-.o_form_FieldTextHtml_fullscreen * {
+  }
+  * {
     display: none;
-}
-.o_form_FieldTextHtml_fullscreen .o_form_fullscreen_ancestor {
+  }
+  .o_form_fullscreen_ancestor {
     display: block !important;
     position: static !important;
     top: 0 !important;
@@ -51,29 +58,31 @@
     overflow: visible !important;
     width: auto !important;
     overflow: hidden !important;
+  }
 }
 
 .openerp .oe_form .oe_form_field_html_translate textarea {
-    min-width: 60px;
-    width: 100%;
-    color: #4c4c4c;
-    font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  min-width: 60px;
+  width: 100%;
+  color: #4c4c4c;
+  font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
 }
 .openerp .oe_form_readonly .oe_form .oe_form_field_html_translate textarea {
-    border:0;
-    background: #fff;
+  border:0;
+  background: #fff;
 }
-.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > button {
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate {
+  > button {
     float: right;
     margin: -6px -3px 0 0;
-}
-.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > .note-editable {
+  }
+  > .note-editable {
     border: 1px solid #ccc;
     min-height: 22px;
     border-radius: 3px;
+  }
 }
+
 .openerp .oe_form_editable .oe_form .oe_form_field_html_translate .note-editable [contentEditable='true']:hover {
-    -moz-box-shadow: #DDCC33 0 0 5px 2px inset;
-    -webkit-box-shadow: #DDCC33 0 0 5px 2px inset;
-    box-shadow: #DDCC33 0 0 5px 2px inset;
-}
\ No newline at end of file
+  .box-shadow(#DDCC33 0 0 5px 2px inset);
+}
diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/less/web_editor.common.less
similarity index 100%
rename from addons/web_editor/static/src/css/web_editor.css
rename to addons/web_editor/static/src/less/web_editor.common.less
diff --git a/addons/web_editor/static/src/less/web_editor.components.less b/addons/web_editor/static/src/less/web_editor.components.less
new file mode 100644
index 00000000000..d24df7ac99f
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.components.less
@@ -0,0 +1,276 @@
+#web_editor-top-actions  {
+  a {
+    .transition(all 0.3s);
+    color: darken(@we_color-primary, 10%);
+    &:hover, &:active {
+      text-decoration: none;
+      color: darken(@we_color-primary, 20%);
+    }
+  }
+  // BUTTONS
+  // ====================
+  .btn {
+    font-size: 12px;
+    color: #999999;
+    font-weight: bold;
+    text-decoration: none;
+    .transition(all 0.3s);
+    &:hover, &:focus {
+      color: white;
+      text-decoration: none;
+    }
+    &.accent {
+      .button-variant(white, @we_color-accent, @we_color-accent)
+    }
+    &.compl {
+      .button-variant(white, @we_color-primary, @we_color-primary)
+    }
+    &.full {
+      margin-top: 0;
+      margin-bottom: 0;
+      border-radius: 0;
+      .box-shadow(none);
+    }
+    &.btn-primary {
+      .button-variant(white, @we_color-accent, @we_color-accent);
+      text-transform: uppercase;
+    }
+    &.btn-danger {
+      .button-variant(white, @we_color-danger, @we_color-danger);
+      text-transform: uppercase;
+    }
+    &.btn-success {
+      .button-variant(white, @we_color-success, @we_color-success);
+      text-transform: uppercase;
+    }
+  }
+  .dropdown-toggle {
+    color: @we_dropdown-toggle-color;
+    height: @we_editor-bar-height - @we_editor-dropdown-border-height;
+    line-height: @we_editor-bar-height - @we_editor-dropdown-border-height;
+    border-top: @we_editor-dropdown-border-height solid transparent;
+    text-shadow:0 1px 0 @we_dropdown-toggle-shadow-color;
+  }
+  .dropdown-menu {
+    margin: 0;
+    overflow: hidden;
+    border-radius: 0;
+    border: none;
+    background-color: @we_dropdown-menu-color;
+    .box-shadow(@we_box-shadow);
+    li {
+      a {
+        color: @we_dropdown-toggle-color;
+      }
+      &:hover {
+        a {
+          color: @we_dropdown--open-toggle-color;
+          background: transparent;
+        }
+      }
+    }
+    li.divider {
+      margin: 3px 20px;
+      background-color: @we_color-inactive;
+    }
+  }
+  .open {
+    > .dropdown-toggle {
+      background-color: @we_dropdown--open-toggle-bg-color;
+      color:  @we_dropdown--open-toggle-color;
+      border-top: @we_editor-dropdown-border-height solid white;
+      text-shadow:0 1px 0 @we_dropdown--open-toggle-shadow-color;
+    }
+  }
+  .dropdown-menu {
+    position: absolute;
+    left: auto;
+    right: 0;
+  }
+
+  // ICONS
+  // ======================
+  .material-icons {
+    font-size: 1em;
+    .translateY(2px);
+    margin-right: 5px;
+  }
+
+  // POPOVERS
+  // ======================
+  .popover {
+    border-radius: 3px;
+    .popover-title{
+      color: @we_color-text-dark
+    }
+  }
+
+  // INPUTS
+  // ======================
+  .form-control {
+    font-weight: bold;
+    color: @we_color-text-dark;
+  }
+  .input-group-addon{
+    color: @we_color-text-dark;
+    font-weight: bold;
+  }
+}
+
+// INPUTS
+// ==================
+.switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 0.5em;
+  padding: 0;
+  height: 1.5em;
+  cursor: pointer;
+  .translateY(0.2em);
+  .switch_track {
+    background: #bababa;
+    border-radius: 0.4em;
+    height: 1em;
+    width: 2.5em;
+    display: inline-block;
+    .transition(all 0.3s @we_md-ease);
+    &:after {
+      content: "";
+      background: #fafafa;
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+      border-radius: 100em;
+      margin-top: -0.3em;
+      margin-left: -0.1em;
+      .transition(all 0.3s @we_md-ease);
+      .box-shadow(@we_box-shadow);
+    }
+  }
+  .switch_input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+  }
+  &.checked {
+    .switch_track {
+      background-color: rgb(142, 224, 212);
+      background-color: transparentize(@we_color-accent, 0.5);
+      &:after {
+        background-color: @we_color-accent;
+        margin-left: 1.1em;
+      }
+    }
+  }
+  &:hover {
+    .switch_track {
+      &:after {
+        background-color: mix(@we_color-accent, #fafafa);
+      }
+    }
+  }
+}
+
+
+
+// TEXT INPUT
+// ==========================
+
+// <div class="text-input-group">
+//   <input type="text" required="true"/>
+//   <span class="highlight"></span>
+//   <span class="bar"></span>
+//   <label>Name</label>
+// </div>
+
+.text-input-group {
+  position:relative;
+  margin-bottom:45px;
+
+  input{
+    font-size:18px;
+    padding:10px 10px 10px 5px;
+    display:block;
+    width:300px;
+    border:none;
+    border-bottom:1px solid #757575;
+  }
+  input:focus{ outline:none; }
+
+  /* LABEL ======================================= */
+  label{
+    color:#999;
+    font-size:18px;
+    font-weight:normal;
+    position:absolute;
+    pointer-events:none;
+    left:5px;
+    top:10px;
+    .transition(0.2s ease all)
+  }
+
+  /* active state */
+  input:focus ~ label, input:valid ~ label{
+    top:-20px;
+    font-size:14px;
+    color:#5264AE;
+  }
+
+  /* BOTTOM BARS ================================= */
+  .bar    { position:relative; display:block; width:300px; }
+  .bar:before, .bar:after{
+    content:'';
+    height:2px;
+    width:0;
+    bottom:1px;
+    position:absolute;
+    background:#5264AE;
+    .transition(0.2s ease all);
+  }
+  .bar:before {
+    left:50%;
+  }
+  .bar:after {
+    right:50%;
+  }
+
+  /* active state */
+  input:focus ~ .bar:before, input:focus ~ .bar:after {
+    width:50%;
+  }
+
+  /* HIGHLIGHTER ================================== */
+  .highlight {
+    position:absolute;
+    height:60%;
+    width:100px;
+    top:25%;
+    left:0;
+    pointer-events:none;
+    opacity:0.5;
+  }
+
+  /* active state */
+  input:focus ~ .highlight {
+    .animation(inputHighlighter 0.3s ease);
+  }
+
+}
+
+
+// DRAG&DROP ANIMATIONS
+// ==========================
+
+.oe_snippet_body {
+  .opacity(0);
+  .animation(fadeInDownSmall 1s forwards);
+}
diff --git a/addons/web_editor/static/src/less/web_editor.interactions.less b/addons/web_editor/static/src/less/web_editor.interactions.less
new file mode 100644
index 00000000000..20e70c6a095
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.interactions.less
@@ -0,0 +1,61 @@
+// Transitions
+// ======================
+
+@we_md-ease: cubic-bezier(0.19, 1, 0.22, 1);
+
+// Animation
+// ======================
+
+@-webkit-keyframes fadeInDownSmall {
+  0% {
+    opacity: 0;
+    .translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    .translateY(0);
+  }
+}
+@keyframes fadeInDownSmall {
+  0% {
+    opacity: 0;
+    .translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    .translateY(0);
+  }
+}
+@-webkit-keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes inputHighlighter {
+  from { background: @we_color-accent; }
+  to   { width:0; background:transparent; }
+}
diff --git a/addons/web_editor/static/src/less/web_editor.mixins.less b/addons/web_editor/static/src/less/web_editor.mixins.less
new file mode 100644
index 00000000000..2c4c78b4703
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.mixins.less
@@ -0,0 +1,204 @@
+// Button variants
+// ========================
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+.button-variant(@color, @background, @border) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+  &:focus,
+  &.focus {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 25%);
+  }
+  &:hover {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 12%);
+    &:hover,
+    &:focus,
+    &.focus {
+      color: @color;
+      background-color: darken(@background, 17%);
+      border-color: darken(@border, 25%);
+    }
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: @background;
+      border-color: @border;
+    }
+  }
+  .badge {
+    color: @background;
+    background-color: @color;
+  }
+}
+
+// Button sizes
+.button-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+}
+
+// Opacity
+.opacity(@opacity) {
+  opacity: @opacity;
+  // IE8 filter
+  @opacity-ie: (@opacity * 100);
+  filter: ~"alpha(opacity=@{opacity-ie})";
+}
+
+// Transitions
+.transition(@transition...) {
+  -moz-transition: @transition;
+  -o-transition: @transition;
+  -webkit-transition: @transition;
+  transition: @transition;
+}
+
+.transition-property(@property...) {
+  -moz-transition-property: @property;
+  -o-transition-property: @property;
+  -webkit-transition-property: @property;
+  transition-property: @property;
+}
+
+.transition-duration(@duration...) {
+  -moz-transition-property: @duration;
+  -o-transition-property: @duration;
+  -webkit-transition-property: @duration;
+  transition-property: @duration;
+}
+
+.transition-timing-function(@timing...) {
+  -moz-transition-timing-function: @timing;
+  -o-transition-timing-function: @timing;
+  -webkit-transition-timing-function: @timing;
+  transition-timing-function: @timing;
+}
+
+.transition-delay(@delay...) {
+  -moz-transition-delay: @delay;
+  -o-transition-delay: @delay;
+  -webkit-transition-delay: @delay;
+  transition-delay: @delay;
+}
+
+// ANIMATIONS
+// ===========================
+
+.animation(@str) {
+  -webkit-animation: @str;
+  -moz-animation: @str;
+  -ms-animation: @str;
+  -o-animation: @str;
+  animation: @str;
+}
+
+
+// BACKGROUND GRADIENT
+// =======================
+
+.linear-gradient(@start-color: #555; @end-color: #333; @deg: 45deg) {
+  background-repeat: repeat-x;
+  background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
+  background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}
+
+.box-shadow(@string) {
+  -webkit-box-shadow: @string;
+  -moz-box-shadow: @string;
+  box-shadow: @string;
+}
+
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
+// TRANSFORM
+// ===================================
+.transform(@transforms) {
+  -moz-transform: @transforms;
+  -o-transform: @transforms;
+  -ms-transform: @transforms;
+  -webkit-transform: @transforms;
+  transform: @transforms;
+}
+
+// rotate
+.rotate(@deg) {
+  .transform(rotate(@deg));
+}
+
+// scale
+.scale(@scale) {
+  .transform(scale(@scale));
+}
+
+// translate
+.translate(@x, @y) {
+  .transform(translate(@x, @y));
+}
+
+// translate
+.translateY(@y) {
+  .transform(translateY(@y));
+}
+
+// skew
+.skew(@x, @y) {
+  .transform(skew(@xdeg, @ydeg));
+}
+
+// transform origin
+.transform-origin(@origin) {
+  moz-transform-origin: @origin;
+  -o-transform-origin: @origin;
+  -ms-transform-origin: @origin;
+  -webkit-transform-origin: @origin;
+  transform-origin: @origin;
+}
+
+// HELPERS
+// ======================================
+
+.user-select(@str) {
+  -moz-user-select: @str;
+  -webkit-user-select: @str;
+  -ms-user-select: @str;
+  user-select: @str;
+}
+
+// Box sizing
+.box-sizing(@boxmodel) {
+  -webkit-box-sizing: @boxmodel;
+     -moz-box-sizing: @boxmodel;
+          box-sizing: @boxmodel;
+}
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
new file mode 100644
index 00000000000..75410d27eb0
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -0,0 +1,976 @@
+
+
+#web_editor-top-edit {
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  background-color: @we_color-dark;
+  height: @we_editor-bar-height;
+  font-family: @we_font-default;
+  min-height: initial;
+  border: none;
+
+  form.navbar-form {
+    margin: 0;
+    padding: 0;
+    border: none;
+    text-align: right;
+    position: absolute;
+    height: @we_editor-bar-height;
+    right: -@we_sidebar-width;
+    .transition(right 0.4s @we_md-ease);
+    .full {
+      margin-top: 0;
+      margin-bottom: 0;
+      border-radius: 0;
+      padding: 0 15px;
+      height: @we_editor-bar-height;
+      &.accent {
+        .button-variant(white, @we_color-accent, @we_color-accent)
+      }
+      &.compl {
+        .button-variant(white, @we_color-primary, @we_color-primary)
+      }
+    }
+    a, button {
+      font-weight: 600;
+      font-size: 11px;
+    }
+    .btn-group {
+      button {
+        height: @we_editor-bar-height;
+        padding: 0 10px 0 10px;
+        line-height: 1;
+        border-radius: 0;
+        margin: 0;
+        border: none;
+        .button-variant(white, @we_color-primary, @we_color-primary);
+      }
+    }
+  }
+}
+
+#web_editor_snippets {
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  bottom: 0;
+  width: @we_sidebar-width;
+  left: -@we_sidebar-width;
+  top: 0;
+  z-index: 1030;
+  font-family: @we_font-default;
+  position: fixed;
+  .transition(left 0.4s @we_md-ease);
+  #o_left_bar {
+    top: @we_editor-bar-height;
+    width: @we_sidebar-width;
+    left: 0px;
+    bottom: 0;
+    .linear-gradient(@we_color-normal, darken(@we_color-normal, 10%));
+    .box-shadow(0px 10px 10px -10px black inset);
+  }
+}
+
+#snippets_menu {
+  border: 1px solid @we_color-divider;
+  border-width: 0 1px 1px 0;
+  background: @we_color-dark;
+  height: @we_editor-bar-height + 1;
+  text-align: center;
+  margin: 0;
+  padding: 7px 0;
+  list-style-type: none;
+  li {
+    display: inline-block;
+    padding: 0 9px;
+    font-size: 0;
+    a i {
+      color: #999999;
+      &:hover{ color: white; }
+    }
+    &.structure a i{
+      font-size: 25px;
+      .translateY(3px);
+    }
+    &.content a i{
+      font-size: 19px;
+    }
+    &.feature a i{
+      font-size: 19px;
+    }
+    &.effect a i{
+      font-size: 16px;
+      .translateY(-3px);
+    }
+  }
+  li.active a {
+    color: white;
+  }
+}
+
+
+#o_scroll {
+  .o_panel {
+    margin: 0;
+    border: 0;
+    width: 210px;
+  }
+  .o_panel_header {
+    padding: 1px 8px;
+    color: #999999;
+    text-align: center;
+  }
+  .o_panel_body {
+    white-space: normal;
+    background: transparent;
+    padding: 7px 3px;
+  }
+}
+
+.oe_snippet {
+  display: inline-block;
+  vertical-align: top;
+  width: 93px;
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-top: 1px;
+  position: relative;
+  overflow: hidden;
+  .user-select(none);
+  cursor: move;
+  cursor: copy;
+  color: @we_color-text-normal;
+  font-weight: 600;
+  margin-bottom: 0.5em;
+  .oe_snippet_thumbnail {
+    text-align: center;
+    height: 100%;
+    background: transparent;
+    position: relative;
+    .oe_snippet_thumbnail_img {
+      height: 74px;
+      width: 92px;
+      background-size: cover;
+      opacity: 0.9;
+    }
+    .oe_snippet_thumbnail_title {
+      font-size: 12px;
+      display: block;
+      text-shadow: none;
+      color: @we_color-text-normal;
+    }
+    &:hover {
+      .oe_snippet_thumbnail_img {
+        opacity: 1;
+        .scale(1);
+      }
+      .oe_snippet_thumbnail_title {
+        color: white;
+      }
+    }
+  }
+  > :not(.oe_snippet_thumbnail) {
+    display: none !important;
+  }
+  &.disable {
+    .oe_snippet_thumbnail {
+      background-color: rgba(255, 0, 0, 0.75);
+    }
+    .oe_snippet_thumbnail_img {
+      opacity: 0.8;
+    }
+  }
+}
+
+
+.oe_drop_zone.oe_insert{
+  display: block;
+  height: 48px;
+  margin: 0px;
+  margin-top: -4px;
+  margin-bottom: -44px;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
+  .transition(margin 250ms linear);
+  &:not(.oe_vertical):before{
+    content: "";
+    display: block;
+    border-top: dashed 2px rgba(209, 178, 255, 0.72);
+    position: relative;
+    top: 0px}
+  &.oe_hover:before{
+    border-top: dashed 2px rgba(116, 255, 161, 0.72)}
+  &.oe_vertical{
+    width: 48px;
+    float: left;
+    position: relative;
+    margin: 0px -24px !important}
+  &.oe_vertical_text{
+    width: 48px;
+    float: none;
+    display: inline-block;
+    position: relative;
+    margin: 0px -24px !important}
+  &.oe_overlay{
+    .border-radius(3px);
+    background: rgba(153, 0, 255,.5)}
+}
+.oe_drop_zone, .oe_drop_zone_style{
+  border: none;
+  background: rgba(153, 0, 255, .3);
+  .border-radius(4px);
+  &.oe_hover{
+    background: rgba(0, 255, 133, .3);
+    z-index: 1001}
+}
+.oe_drop_zone_style{
+  color: white;
+  height: 48px;
+  margin-bottom: 32px;
+  padding-top: 12px
+}
+
+
+
+
+/* ---- SNIPPET MANIPULATOR ----  {{{ */
+
+#oe_manipulators {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.oe_overlay {
+  display:none;
+  height:0;
+  position:absolute;
+  background:transparent;
+  z-index:1001;
+  border-radius:3px;
+  .transition(opacity 100ms linear);
+  .box-sizing(border-box);
+  &.o_keypress {
+    .transition(0.8s);
+  }
+}
+
+
+/* ---- HANDLES ----  {{{ */
+
+.oe_handle {
+  display:block;
+  width:16px;
+  height:16px;
+  margin:-2px;
+  .o-position-absolute(50%, auto, auto, 50%);
+  .box-sizing(border-box);
+  .opacity(0.6);
+  .transition(opacity 0.3s ease);
+  &:hover {
+    .opacity(0.9);
+  }
+  // Orizontal lines
+  > div {
+    z-index:1;
+    position:absolute;
+    border-style:dashed;
+    border-width:1px;
+    border-color:#666666;
+    .box-shadow(inset 0px 0px 0px 1px rgba(255,255,255,0.5) 0px 0px 0px 1px rgba(255,255,255,0.5));
+  }
+  // Vertical lines
+  &.e > div, &.w > div {
+    width:0;
+    height:100%;
+    top:2px;
+    left:8px;
+  }
+  &.readonly {
+    cursor:auto !important;
+  }
+  &.readonly:before, &.readonly.size {
+    display:none !important;
+  }
+}
+
+.oe_handle.e, .oe_handle.w, .oe_handle.s, .oe_handle.n {
+  &:before {
+    z-index:2;
+    position:relative;
+    top:50%;
+    left:50%;
+    display:block;
+    border:solid 1px rgba(0,0,0,0.2);
+    width:18px;
+    height:18px;
+    margin:-9px;
+    font-size:14px;
+    line-height:16px;
+    font-family:FontAwesome;
+    content:"";
+    text-align:center;
+    padding:1px;
+    border-radius: 3px;
+    background-color: @we_color-light;
+    color: @we_color-text-light;
+    .transition(background 100ms linear);
+  }
+  &:hover:before{
+    background-color: @we_color-dark;
+    color:#ffffff;
+    .box-shadow(0 0 5px 3px rgba(255,255,255,0.7));
+  }
+}
+
+// SPECIFIC HANDLERS POSITION
+// ===========================
+
+.oe_handle.e {
+  top:4px;
+  height:100%;
+  left:auto;
+  right:-6px;
+  cursor:w-resize;
+}
+.oe_handle.w {
+  top:4px;
+  height:100%;
+  left:-6px;
+  cursor:e-resize;
+}
+.oe_handle.s {
+  left:2px;
+  width:100%;
+  top:auto;
+  cursor:n-resize;
+  > div {
+    width:100%;
+    height:0;
+    top:7px;
+    left:1px;
+  }
+}
+.oe_handle.n {
+  left:2px;
+  width:100%;
+  cursor:s-resize;
+  > div {
+    width:100%;
+    height:0;
+    top:5px;
+    left:1px;
+  }
+}
+
+// SIZE HANDLERS
+// ===========================
+
+.oe_handle.size {
+  z-index: 3;
+  margin-left: -50px;
+  .auto_size, .size {
+    font-weight: 600;
+    font-size: 9px;
+    line-height: 9px;
+    text-transform: uppercase;
+    line-height: 9px;
+    padding: 4px;
+    border-radius: 3px;
+    border: none;
+    height: 18px;
+    text-align: center;
+    margin-top: -10px;
+    background-color: @we_color-light;
+    color: @we_color-text-light;
+    .o-position-absolute(9px);
+    .box-shadow(none);
+    &:hover {
+      background-color: @we_color-dark;
+      color: white;
+    }
+  }
+  .size {
+    width:64px;
+    cursor:row-resize;
+    margin-left:52px;
+    margin-left: 60px;
+  }
+  .auto_size {
+    margin-left: -63px;
+    width:100px;
+    cursor:pointer;
+    .transition(all 1s ease);
+  }
+}
+
+
+// HANDLERS ICONS
+// ===========================
+
+.oe_overlay{
+  .w:before, .e:before {
+    content:"\f07e";
+  }
+  .s:before, .n:before {
+    content:"\f07d";
+  }
+}
+
+.oe_overlay.oe_active {
+  display:block;
+}
+
+.oe_overlay.block-w-left .w:before {
+  content:"" !important;
+}
+.oe_overlay.block-w-right .w:before {
+  content:"" !important;
+}
+.oe_overlay.block-w-left.block-w-right .w:before {
+  display:none !important;
+}
+.oe_overlay.block-e-left .e:before {
+  content:"" !important;
+}
+.oe_overlay.block-e-right .e:before {
+  content:"" !important;
+}
+.oe_overlay.block-e-left.block-e-right .e:before {
+  display:none !important;
+}
+.oe_overlay.block-s-top .s:before {
+  content:"" !important;
+}
+.oe_overlay.block-s-bottom .s:before {
+  content:"" !important;
+}
+.oe_overlay.block-n-top .n:before {
+  content:"" !important;
+}
+.oe_overlay.block-n-bottom .n:before {
+  content:"" !important;
+}
+
+.s-resize-important {
+  & * {
+    cursor:s-resize !important;
+  }
+}
+.n-resize-important {
+  & * {
+    cursor:n-resize !important;
+  }
+}
+.e-resize-important {
+  & * {
+    cursor:e-resize !important;
+  }
+}
+.w-resize-important {
+  & * {
+    cursor:w-resize !important;
+  }
+}
+.move-important {
+  & * {
+    cursor:move !important;
+  }
+}
+
+.block-s-top .s:before,
+.block-s-bottom .s:before,
+.block-n-top .n:before,
+.block-n-bottom .n:before,
+.block-w-left .w:before,
+.block-e-right .e:before {
+  font-size: 10px;
+}
+
+
+
+
+// OVERLAY OPTIONS
+// ===========================
+
+.oe_overlay_options {
+  text-align:center;
+  margin-top: -17px;
+  z-index:1002;
+  .o-position-absolute(-20px, auto, auto, 50%);
+  > .btn-group {
+    left:-50%;
+    white-space:nowrap;
+    // default buttons (not customize)
+    > a.btn {
+      cursor:pointer;
+      display:inline-block;
+      background-color: @we_color-light;
+      color: @we_color-text-light;
+      border: 1px solid lighten(@we_color-dark, 10%);
+      border-left-width: 0;
+      border-radius: 0;
+      margin: 0;
+      float: left;
+      font-weight: 600;
+      .transition(all 0.4s ease);
+      &:first-child {
+        border-left-width: 1px;
+      }
+      &:hover {
+        color: white;
+        background-color: lighten(@we_color-dark, 10%);
+      }
+      &.oe_snippet_remove {
+        color: white;
+        background-color: @we_color-danger;
+        border-color: darken(@we_color-danger, 20%);
+        &:hover{
+          background-color: darken(@we_color-danger, 20%);
+        }
+      }
+    }
+  }
+}
+
+// CUTOMIZE MENU BUTTON
+// ===========================
+
+.oe_options{
+  float: left;
+  display:inline-block;
+  .btn.btn-primary {
+    background-color: @we_color-dark;
+    border: 1px solid @we_color-dark;
+    color: @we_color-text-light;
+    width: 110px;
+    font-weight: bold;
+    text-align: left;
+    text-transform: uppercase;
+    font-size: 10px;
+    line-height: 18px;
+    .transition(all 0.3s ease);
+    &:hover, &:active, &:focus {
+      background-color: lighten(@we_color-dark, 5%);
+      border-color: lighten(@we_color-dark, 10%);
+      color: white;
+      outline: none;
+      .transition(all 0.3s ease);
+    }
+    &:before, &:after {
+      content: "";
+      background-color: @we_color-text-light;
+      border-radius: 5px;
+      margin-top: -1px;
+      height: 2px;
+      width: 7px;
+      .o-position-absolute(50%);
+      .transition(all 0.3s);
+    }
+    &:before {
+      right: 21px;
+      .rotate(45deg);
+    }
+    &:after {
+      right: 17px;
+      .rotate(-45deg);
+    }
+  }
+  // Open menu
+  &.open .btn.btn-primary {
+    background-color: @we_color-light;
+    &:before {
+      right: 22px;
+      width: 9px;
+      transform: translateX(5px) rotate(-45deg);
+      background-color: white;
+    }
+    &:after {
+      width: 9px;
+      background-color: white;
+      .rotate(45deg);
+    }
+  }
+}
+
+// CUTOMIZE MENU
+// ===========================
+.oe_options {
+  .dropdown-menu {
+    text-align:left;
+    background-color: @we_color-light;
+    min-width: 192px;
+    .border-radius(0);
+    margin: -1px 0 0 0;
+    padding: 0;
+    border-color: @we_color-light;
+    border: 1px solid @we_color-dark;
+    select, input {
+      display:block;
+    }
+    a {
+      color: @we_color-text-light;
+      font-weight: 600;
+      font-size: 12px;
+      padding: 5px 20px;
+    }
+  }
+}
+
+// CUTOMIZE MENU LI
+// ===========================
+
+.oe_options .dropdown-menu li {
+  background-color: @we_color-light;
+  position: relative;
+  a {
+    cursor: pointer;
+    background-color: transparent;
+  }
+  &:last-child a {
+    padding-bottom: 8px;
+  }
+  &:hover {
+    background-color: fadeOut(@we_color-dark, 50%);
+    &.dropdown-submenu:after{
+      border-left-color: white;
+    }
+    > a {
+      color: white;
+      background: transparent;
+    }
+    > .dropdown-menu{
+      display: block;
+      left: 100%;
+      top: 1px;
+    }
+  }
+  &.dropdown-submenu:after{
+    content: "";
+    .o-position-absolute(10px, 10px);
+    .o-caret-right(3px);
+    border-left-color: @we_color-text-light;
+  }
+  &.divider {
+    background-color: @we_color-divider;
+    margin: -1px 0;
+  }
+  &.active {
+    > a {
+      color: white;
+      background-color: fadeOut(@we_color-dark, 50%);
+      &:after {
+        content: "\E876";
+        font-family: "Material Icons";
+        float: right;
+        color: @we_color-accent;
+      }
+    }
+  }
+}
+
+
+
+// NOTE EDITOR
+// =========================
+
+.note-popover .popover {
+  height: @we_editor-bar-height;
+  top: 0 !important;
+  left: 0 !important;
+  padding: 0;
+  margin: 0 0 0 @we_sidebar-width;
+  background-color: @we_color-dark;
+  border-radius: 0;
+  border-width: 0 1px;
+  width: auto;
+  text-align: center;
+  .box-shadow(none);
+  .popover-content {
+    height: @we_editor-bar-height;
+    .btn {
+      height: @we_editor-bar-height;
+      border: none;
+      border-radius: 0;
+      background-color: @we_color-dark;
+      color: @we_color-text-normal;
+      border-top: 2px solid transparent;
+      .transition(all 0.3s);
+      &:hover {
+        border-top: 2px solid @we_color-text-normal;
+        color: @we_color-text-normal;
+      }
+    }
+    .btn.active {
+      border-top: 2px solid white;
+      background-color: @we_color-dark;
+      color: @we_color-text-light;
+      .box-shadow(inset 0 3px 10px rgba(0, 0, 0, 0.5));
+    }
+    >.btn-group {
+      margin-top: -2px
+    }
+    .btn-group.open .dropdown-toggle {
+      border-top: 2px solid white;
+      background-color: @we_color-darker;
+      color: white;
+      .box-shadow(none);
+    }
+    .dropdown-menu {
+      margin: 11px 0 0;
+      border: 0;
+      border-top: 7px solid darken(@we_color-accent,10%);
+      background-color: @we_color-darker;
+      border-radius: 2px 2px 0 0;
+      &:before{
+        .o-caret-up(8px);
+        border-bottom-color: darken(@we_color-accent,10%);
+        .o-position-absolute(-15px, auto, auto, 5px);
+      }
+      > li > a {
+        color: @we_color-text-light;
+        &:hover {
+          color: white;
+        }
+      }
+    }
+    #colors_preview {
+      padding: 4px;
+      border-radius: 2px;
+      border: 1px solid #989898;
+      border-color:fadeOut(@we_color-text-normal, 0.5);
+    }
+    .note-color-palette td > button, .note-color-palette div .note-color-btn {
+      border-color: fadeOut(white, 50%);
+      border-radius: 0;
+      margin: 1px;
+    }
+  }
+}
+
+.foreground_toggle, .background_toggle{
+  > button {
+    width: 30px!important;
+    text-align: center;
+  }
+  > button > .caret {
+    display: none;
+  }
+}
+.foreground_toggle > button:before{
+  font-family:FontAwesome;
+  content:'\f1fc';
+}
+.background_toggle > button:before{
+  font-family:'Material Icons';
+  content:'\E23A';
+}
+.note-popover .popover-content{
+  .note-color{
+    border: 1px solid @we_color-divider;
+    border-width: 0 1px;
+    .dropdown-menu{
+      min-width: 250px!important;
+      padding: 0!important;
+      .note-palette-title{
+        padding: 10px 0px 10px 10px;
+        color: @we_color-text-light;
+        font-weight: bold;
+        position: absolute;
+      }
+      .palette-reset{
+        text-align: right;
+        width: 100%;
+        margin: 0;
+        padding: 5px 10px 0;
+        .note-color-reset{
+          float: right;
+          margin: 3px 0 0;
+          padding: 0;
+          &:hover{
+            background: transparent!important;
+            color: @we_color-danger;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.note-popover .popover-content .dropdown-menu, #oe_manipulators .snippet-option-colorpicker .dropdown-menu{
+  > li{
+    background-color: @we_color-darker;
+    min-width: 250px!important
+  }
+  .tabs_container{
+    background-color: @we_color-darker;
+    font-size: 0;
+    background-color: @we_tab--active-bg;
+    border: 1px solid darken(@we_tab-bg,10%);
+    border-width: 1px 0 0;
+    margin: 5px 0 0;
+    .tabs_toggles{
+      display: table-cell;
+      font-size: 14px;
+      width: 50px;
+      padding:0;
+      margin: 0;
+      list-style: none;
+      height: 100%;
+      vertical-align: top;
+      background-color: @we_tab-bg;
+      li{
+        background: transparent;
+        margin-bottom: 10px;
+        &:last-child{
+          margin-bottom: 0;
+        }
+        > a {
+          padding: 5px 10px;
+          display: block;
+        }
+        > a > i {
+          visibility: visible;
+          color: darken(@we_color-text-light, 10%);
+        }
+        &:hover, &.active{
+          > a > i {color: white}
+        }
+        &.active > a{
+          background-color: @we_tab--active-bg;
+        }
+      }
+    }
+    .tabs{
+      display: table-cell;
+      font-size: 14px;
+      height: 100%;
+      width: 200px;
+    }
+    .tab{
+      display: none;
+      padding: 5px 10px;
+      background-color: @we_tab--active-bg;
+    }
+    .tab.on{
+      display: block;
+    }
+  }
+}
+
+
+// COLORPICKER
+// ====================================
+
+#oe_manipulators .snippet-option-colorpicker .dropdown-menu{
+
+  .note-palette-title{
+    padding: 10px 0px 10px 10px;
+    color: @we_color-text-light;
+    font-weight: bold;
+    position: absolute;
+  }
+  .palette-reset{
+    text-align: right;
+    width: 100%;
+    margin: 0;
+    padding: 5px 10px 0;
+    cursor: pointer;
+    .note-color-reset{
+      float: right;
+      margin: 3px 0 0;
+      padding: 0;
+      &:hover{
+        background: transparent!important;
+        color: @we_color-danger;
+      }
+    }
+  }
+}
+.popover-content, .dropdown-menu {
+  .palette_theme, .palette_ui, .palette_grayscale {
+    button {
+      display: block;
+      font-size: 12px;
+      width: 100%;
+      max-width: 180px;
+      padding: 5px 20px;
+      margin: 0;
+      position: relative;
+      text-align: left;
+      background-color:  @we_color-normal;
+      border: 1px solid @we_color-dark;
+      height: 30px;
+      color: @we_color-text-light;
+      white-space: nowrap;
+      overflow: auto;
+      font-weight: 600;
+      -webkit-font-smoothing: antialiased;
+      .border-radius(3px);
+      margin-bottom: 5px;
+      span {
+        height: 20px;
+        width: 25px;
+        float: right;
+        display: inline-block;
+        border: 1px solid #393c44;
+        .o-position-absolute(4px, 5px);
+        box-shadow: -10px 0px 10px  @we_color-normal;
+      }
+      &:hover {
+        border: 1px solid @we_color-dark;
+        background: @we_color-light;
+        color: white;
+        span {
+          box-shadow: -10px 0px 10px @we_color-light;
+        }
+      }
+    }
+    button.selected{
+      border: 1px solid @we_color-dark;
+      background: @we_color-light;
+      color: white;
+      span {
+        box-shadow: -10px 0px 10px @we_color-light;
+      }
+      &:before{
+        content: "\f00c";
+        font-family: "FontAwesome";
+        color: @we_color-accent;
+        position: absolute;
+        left: 5px;
+        line-height: 1.7;
+        font-size: 0.8em;
+      }
+    }
+  }
+}
+
+
+
+
+
+// ENTER IN EDIT MODE
+// ============================================
+
+body.editor_enable {
+  #web_editor-top-edit {
+    background-color: transparent;
+  }
+  #web_editor_snippets {
+    .transition(left 0.4s @we_md-ease);
+  }
+}
+
+body.editor_enable.editor_has_snippets {
+  #web_editor-top-edit {
+    .transition(background 0.4s @we_md-ease);
+    background-color: @we_color-dark;
+    .navbar-form {
+      right: 0;
+    }
+  }
+  #web_editor_snippets {
+    left: 0;
+  }
+}
diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less
new file mode 100644
index 00000000000..d72d63931bd
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.variables.less
@@ -0,0 +1,76 @@
+
+// Fonts
+// =======================
+@we_font-default  : "Roboto", Roboto, sans-serif;
+@we_font-size-def : 14px;
+
+// COLORS UI
+// =======================
+@we_color-dark    : #2c2c36;
+@we_color-darker  : darken(@we_color-dark,2%);
+@we_color-divider : #33363e;
+@we_color-normal  : #50545d;
+@we_color-light   : #4e525b;
+
+@we_color-paper    : #fbfbfd;
+@we_color-inactive : #646465;
+
+@we_color-text-normal : #999999;
+@we_color-text-light  : #d4d5d7;
+@we_color-text-dark   : #505050;
+
+@we_color-accent         : #1cc1a9;
+@we_color-accent-d10     : darken(@we_color-accent, 10%);
+@we_color-primary        : #b35e9b;
+@we_color-primary-d10    : darken(@we_color-primary, 10%);
+@we_color-primary-l10    : lighten(@we_color-primary, 10%);
+@we_color-primary-hover  : #7e376b;
+
+@we_color-danger  : #e6586c;
+@we_color-success : #4ab980;
+
+
+// LAYOUT
+// =======================
+@we_screen_xs : 480px;
+@we_screen_sm : 768px;
+@we_screen_md : 992px;
+@we_screen_lg : 1200px;
+
+
+// TOP BAR
+// =======================
+@we_editor-bar-height             : 45px;
+@we_editor-dropdown-border-height : 2px;
+@we_editor-bar-bg                 : @we_color-primary;
+@we_editor-bar-link-color         : @we_color-paper;
+@we_editor-bar-link-shadow        : @we_color-primary-d10;
+
+
+// EDITOR
+// =======================
+@we_sidebar-width: 210px;
+
+
+// SHADOWS
+// =======================
+@we_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+
+// DROPDOWNS
+// =======================
+@we_dropdown-toggle-color        : @we_color-paper;
+@we_dropdown-toggle-shadow-color : @we_color-primary-d10;
+@we_dropdown-menu-color          : @we_color-primary-hover;
+    // open
+    @we_dropdown--open-toggle-color        : white;
+    @we_dropdown--open-toggle-bg-color     : @we_color-primary-hover;
+    @we_dropdown--open-toggle-shadow-color : @we_color-primary-hover;
+
+
+// TABS
+// =======================
+@we_tab-bg: @we_color-darker;
+@we_tab--active-bg: #3D4048;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 44abb32caf1..3891e7caf89 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,41 +1,375 @@
 <templates id="template" xml:space="preserve">
     <t t-name="web_editor.editorbar">
-        <div id="web_editor-top-edit" class="o_css_editor navbar navbar-inverse navbar-fixed-top hidden-xs">
+        <div class="o_css_editor navbar navbar-fixed-top hidden-xs" id="web_editor-top-edit">
+            <div id="web_editor-toolbars" />
             <form class="navbar-form text-muted">
-                <button type="button" data-action="save"
-                        class="btn btn-primary btn-xs">Save</button>
-                <span> or </span>
-                <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a>
+                <div id="web_editor-top-actions">
+                    <a class="btn btn-link btn-xs" data-action="cancel" href="#">
+                        <i class="material-icons">clear</i>DISCARD</a>
+                    <button class="btn full compl btn-xs" data-action="save" type="button">
+                        <i class="fa fa-floppy-o"></i>  SAVE</button>
+                </div>
             </form>
         </div>
     </t>
-
     <t t-name="web_editor.dialog">
-        <div class="modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal web_editor-dialog" role="dialog" tabindex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title"><t t-esc="title"/></h3>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">
+                            <t t-esc="title"/>
+                        </h3>
+                    </div>
+                    <div class="modal-body">
+                        <t t-raw="0"/>
                     </div>
-                    <div class="modal-body"><t t-raw="0"/></div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-primary save" t-if="!button">Save</button>
-                        <button type="button" class="btn btn-primary save" t-if="button"><t t-raw="button"/></button>
-                        <button type="button" class="btn hidden wait" disabled="disabled"/>
-                        <span> or </span>
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                        <button class="btn btn-primary save" t-if="!button" type="button">Save</button>
+                        <button class="btn btn-primary save" t-if="button" type="button">
+                            <t t-raw="button"/>
+                        </button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>
+                        <span>or </span>
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
                     </div>
                 </div>
             </div>
         </div>
     </t>
+    <t t-name="web_editor.dialog.background_position">
+        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">Background Image Options</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_cover">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
+                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
+                                    <div class="panel-body">
+
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="cover_help">
+
+                                            <div class="simulator cover_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
+                                            </div>
+                                        </div>
+                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+                                        <div class="cover_editing_container">
+                                            <h6>Click on the picture</h6>
+                                            <div class="object">
+                                                <span class="grid grid-1"/>
+                                                <span class="grid grid-2"/>
+                                                <span class="grid grid-3"/>
+                                                <span class="grid grid-4"/>
+                                                <span class="focus_point"/>
+                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_contain">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
+                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
+                                    <div class="panel-body">
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="contain_help">
+
+                                            <div class="simulator contain_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
+                                            </div>
+                                        </div>
+
+                                        <form class="form-horizontal">
+                                          <div class="form-group">
+                                            <label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
+                                            <div class="col-sm-5">
+                                                <div class="checkbox">
+                                                    <label>
+                                                      <input id="contain_repeat"  type="checkbox"/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                          </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_custom">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
+                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
+                                    <div class="panel-body">
+                                        <form class="form-horizontal">
+                                            <fieldset>
+                                                <legend>Background size</legend>
+                                                <p>Sets the width and height of the background image in percent of the parent element.</p>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_size_x">Background width</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_x" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_size_y">Background height</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_y" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </fieldset>
+                                            <fieldset>
+                                                <legend>Background position</legend>
+                                                <p>Set the starting position of the background image.</p>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_pos_x">Horizontal</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_x" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_pos_x">Vertical</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_y" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </fieldset>
+                                            <fieldset>
+                                                <legend>Background repeat</legend>
+                                                <p>Define if/how the background image will be repeated</p>
+                                                <select class="form-control" id="custom_repeat">
+                                                    <option value="o_bg_img_no_repeat">No repeat</option>
+                                                    <option value="o_bg_img_repeat">Repeat both</option>
+                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
+                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
+                                                </select>
+                                            </fieldset>
+                                        </form>
+
+                                    </div>
+                                </div>
+                            </div> <!-- / .panel -->
+                        </div> <!-- / .panel-group -->
+                        <input id="pos_x" type="hidden"/>
+                        <input id="pos_y" type="hidden"/>
+                        <input id="bg_size" type="hidden"/>
+                    </div> <!-- /.modal-body -->
+
+                    <div class="modal-footer">
+                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.background_position">
+        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">Background Image Options</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_cover">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
+                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
+                                    <div class="panel-body">
+
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="cover_help">
+
+                                            <div class="simulator cover_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
+                                            </div>
+                                        </div>
+                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+                                        <div class="cover_editing_container">
+                                            <h6>Click on the picture</h6>
+                                            <div class="object">
+                                                <span class="grid grid-1"/>
+                                                <span class="grid grid-2"/>
+                                                <span class="grid grid-3"/>
+                                                <span class="grid grid-4"/>
+                                                <span class="focus_point"/>
+                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_contain">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
+                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
+                                    <div class="panel-body">
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="contain_help">
+
+                                            <div class="simulator contain_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
+                                            </div>
+                                        </div>
+
+                                        <form class="form-horizontal">
+                                          <div class="form-group">
+                                            <label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
+                                            <div class="col-sm-5">
+                                                <div class="checkbox">
+                                                    <label>
+                                                      <input id="contain_repeat"  type="checkbox"/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                          </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_custom">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
+                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
+                                    <div class="panel-body">
+                                        <form class="form-horizontal">
+                                            <fieldset>
+                                                <legend>Background size</legend>
+                                                <p>Sets the width and height of the background image in percent of the parent element.</p>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_size_x">Background width</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_x" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_size_y">Background height</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_y" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </fieldset>
+                                            <fieldset>
+                                                <legend>Background position</legend>
+                                                <p>Set the starting position of the background image.</p>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_pos_x">Horizontal</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_x" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="form-group">
+                                                    <label class="col-sm-3 control-label" for="custom_pos_x">Vertical</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_y" placeholder="auto"/>
+                                                            <div class="input-group-addon">%</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </fieldset>
+                                            <fieldset>
+                                                <legend>Background repeat</legend>
+                                                <p>Define if/how the background image will be repeated</p>
+                                                <select class="form-control" id="custom_repeat">
+                                                    <option value="o_bg_img_no_repeat">No repeat</option>
+                                                    <option value="o_bg_img_repeat">Repeat both</option>
+                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
+                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
+                                                </select>
+                                            </fieldset>
+                                        </form>
+
+                                    </div>
+                                </div>
+                            </div> <!-- / .panel -->
+                        </div> <!-- / .panel-group -->
+                        <input id="pos_x" type="hidden"/>
+                        <input id="pos_y" type="hidden"/>
+                        <input id="bg_size" type="hidden"/>
+                    </div> <!-- /.modal-body -->
+
+                    <div class="modal-footer">
+                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </t>
     <t t-name="web_editor.dialog.media">
-        <div class="modal note-image-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal note-image-dialog" role="dialog" tabindex="-1">
             <div class="modal-dialog select-media">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Select a Media</h3>
                     </div>
                     <div class="modal-body">
@@ -46,37 +380,34 @@
                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
                             <li class="search" style="float: right;">
                                 <ul class="pager mb0 mt0">
-                                    <li class="previous disabled"><a href="#">← Previous</a></li>
-                                    <li class="next disabled"><a href="#">Next →</a></li>
+                                    <li class="previous disabled">
+                                        <a href="#">← Previous</a>
+                                    </li>
+                                    <li class="next disabled">
+                                        <a href="#">Next →</a>
+                                    </li>
                                 </ul>
                             </li>
                             <li class="search" style="float: right;">
                                 <form action="#">
                                     <div class="form-group font-icons fa fa-search mb0">
-                                        <input type="search" class="form-control" id="icon-search"/>
+                                        <input class="form-control" id="icon-search" type="search"/>
                                     </div>
                                 </form>
                             </li>
                         </ul>
-
                         <!-- Tab panes -->
                         <div class="tab-content">
-                            <div class="tab-pane fade in active" id="editor-media-image">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-document">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-icon">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-video">
-                            </div>
+                            <div class="tab-pane fade in active" id="editor-media-image"/>
+                            <div class="tab-pane fade" id="editor-media-icon"/>
+                            <div class="tab-pane fade" id="editor-media-video"/>
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-primary save">Save</button>
-                        <button type="button" class="btn hidden wait" disabled="disabled"/>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
-                    </div>
+                        <button class="btn btn-primary save" type="button">Save</button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>or
+
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a></div>
                 </div>
             </div>
         </div>
@@ -94,41 +425,43 @@
                         <input type="file" name="upload" t-att-accept="widget.accept" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
                         <input type="hidden" name="disable_optimization" value=""/>
                         <div class="btn-group">
-                            <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
-                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-                                <span class="caret"></span>
+                            <button class="btn btn-primary filepicker" type="button">Upload an image from your computer</button>
+                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
+                                <span class="caret"/>
                                 <span class="sr-only">Alternate Upload</span>
                             </button>
                             <ul class="dropdown-menu" role="menu">
-                                <li><a href="#" class="js_disable_optimization">Upload image without optimization</a></li>
+                                <li>
+                                    <a class="js_disable_optimization" href="#">Upload image without optimization</a>
+                                </li>
                             </ul>
                         </div>
-                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
+                        <button class="btn hidden wait" disabled="disabled" type="button">Uploading...</button>
                     </div>
                     <div>
-                        <span class="text-muted"> — or — </span>
+                        <span class="text-muted">— or — </span>
                         <label for="iamgeurl">Add an image URL</label>
                         <div class="form-group btn-group">
-                            <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
+                            <input class="form-control url pull-left" id="iamgeurl" name="url" placeholder="http://openerp.com/logo.png" style="width: 320px;" type="text"/>
                             <button class="btn btn-default" type="submit">Add</button>
                         </div>
                     </div>
                 </div>
-                <input type="hidden" name="func"/>
+                <input name="func" type="hidden"/>
                 <div class="help-block"/>
                 <div class="existing-attachments">
                     <t t-call="web_editor.dialog.image.existing"/>
                 </div>
             </form>
         </div>
-        <iframe src="about:blank" name="fileframe" class="hidden"/>
+        <iframe class="hidden" name="fileframe" src="about:blank"/>
     </t>
     <t t-name="web_editor.dialog.image.existing">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
             <div class="modal-dialog select-image">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Select a Picture</h3>
                     </div>
                     <div class="modal-body has-error">
@@ -136,7 +469,7 @@
                         <div class="help-block"/>
                     </div>
                     <div class="modal-footer">
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
                     </div>
                 </div>
             </div>
@@ -144,9 +477,8 @@
     </t>
     <t t-name="web_editor.dialog.image.existing.content">
         <div class="existing-attachments">
-            <div class="row mt16" t-foreach="rows" t-as="row">
-                <div class="col-sm-2 existing-attachment-cell"
-                     t-foreach="row" t-as="attachment">
+            <div class="row mt16" t-as="row" t-foreach="rows">
+                <div class="col-sm-2 existing-attachment-cell" t-as="attachment" t-foreach="row">
                     <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/>
                     <div class="o_attachment_border"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image"/></div>
                 </div>
@@ -157,7 +489,7 @@
         <div class="help-block">
             <p>The image could not be deleted because it is used in the
                following pages or views:</p>
-            <ul t-foreach="views" t-as="view">
+            <ul t-as="view" t-foreach="views">
                 <li>
                     <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
                         <t t-esc="view.name"/>
@@ -166,52 +498,51 @@
             </ul>
         </div>
     </t>
-
     <t t-name="web_editor.discard">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Discard edition</h3>
                     </div>
                     <div class="modal-body">
-                        <p>
-                            If you discard the current edition, <em>all</em>
-                            unsaved changes will be lost.
-                        </p>
+                        <p>If you discard the current edition,
+                            <em>all</em>
+                            unsaved changes will be lost.</p>
                         <p>You can cancel to return to the edition mode.</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-danger">Discard</button>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Cancel</a>
-                    </div>
+                        <button class="btn btn-danger" type="button">Discard</button>or
+
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Cancel</a></div>
                 </div>
             </div>
         </div>
     </t>
-
     <t t-name="web_editor.dialog.alt">
         <t t-call="web_editor.dialog">
             <t t-set="title">Change media Alt and Title</t>
             <form action="#" class="form-horizontal">
                 <div class="form-group">
-                    <label for="alt" class="col-sm-2 control-label">Alt:</label>
-                    <div class="col-sm-9"><input id="alt" type="text" class="form-control" required="required" t-att-value="widget.alt"/></div>
+                    <label class="col-sm-2 control-label" for="alt">Alt:</label>
+                    <div class="col-sm-9">
+                        <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
+                    </div>
                 </div>
                 <div class="form-group">
-                    <label for="title" class="col-sm-2 control-label">Title:</label>
-                    <div class="col-sm-9"><input id="title" type="text" class="form-control" required="required" t-att-value="widget.title"/></div>
+                    <label class="col-sm-2 control-label" for="title">Title:</label>
+                    <div class="col-sm-9">
+                        <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
+                    </div>
                 </div>
             </form>
         </t>
     </t>
-
     <t t-name="web_editor.dialog.font-icons">
         <form action="#">
-            <input type="hidden" id="fa-icon"/>
-            <input type="hidden" id="fa-size" value="fa-1x"/>
+            <input id="fa-icon" type="hidden"/>
+            <input id="fa-size" type="hidden" value="fa-1x"/>
             <div class="font-icons-icons">
                 <t t-call="web_editor.dialog.font-icons.icons">
                     <t t-set="iconsParser" t-value="widget.iconsParser"/>
@@ -220,61 +551,40 @@
         </form>
     </t>
     <t t-name="web_editor.dialog.font-icons.icons">
-        <t t-foreach="iconsParser" t-as="data">
-          <span t-foreach="data.cssData" t-as="cssData"
-                t-attf-class="#{data.base} font-icons-icon #{cssData[2]}"
-                t-attf-data-alias=",#{cssData[3]},"
-                t-att-title="cssData[3].join(', ')"
-                t-att-data-id="cssData[2]"/>
+        <t t-as="data" t-foreach="iconsParser">
+            <span t-as="cssData" t-att-data-id="cssData[2]" t-att-title="cssData[3].join(', ')" t-attf-class="#{data.base} font-icons-icon #{cssData[2]}" t-attf-data-alias=",#{cssData[3]}," t-foreach="data.cssData"/>
         </t>
     </t>
-
     <t t-name="web_editor.dialog.video">
         <form action="#" class="form-inline">
             <div class="well">
                 <div class="form-group btn-group">
                     <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
-                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left">Set a video URL</label>
-                    <input type="text"
-                        name="url"
-                        class="form-control url pull-left"
-                        style="width: 400px;"
-                        id="urlvideo"
-                        placeholder="//www.youtube.com/embed/yws1tbgNV7k"
-                        t-translation="off"/>
+                    <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">Set a video URL</label>
+                    <input class="form-control url pull-left" id="urlvideo" name="url" placeholder="//www.youtube.com/embed/yws1tbgNV7k" style="width: 400px;" t-translation="off" type="text"/>
                     <button class="btn btn-default">Preview</button>
                 </div>
                 <div class="form-group btn-group">
-                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
-                    <input type="text"
-                        name="embed"
-                        class="form-control url pull-left"
-                        style="width: 400px;"
-                        id="embedvideo"
-                        placeholder='&lt;iframe src="//www.youtube.com/embed/yws1tbgNV7k"&gt;&lt;/iframe&gt;'
-                        t-translation="off"/>
+                    <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">
+                        <span class="text-muted">— or —</span>Embed Video (HTML)</label>
+                    <input class="form-control url pull-left" id="embedvideo" name="embed" placeholder="&lt;iframe src=&quot;//www.youtube.com/embed/yws1tbgNV7k&quot;&gt;&lt;/iframe&gt;" style="width: 400px;" t-translation="off" type="text"/>
                     <button class="btn btn-default">Preview</button>
                 </div>
             </div>
-            
             <div id="video-preview" style="width: 450px; margin: 0 auto;">
                 <div class="media_iframe_video">
-                    <div class="media_iframe_video_size"></div>
-                    <iframe
-                        src=""
-                        frameborder="0"
-                        allowfullscreen="allowfullscreen"></iframe>
+                    <div class="media_iframe_video_size"/>
+                    <iframe allowfullscreen="allowfullscreen" frameborder="0" src=""/>
                 </div>
             </div>
-
             <div class="text-center mt32">
                 <div class="checkbox">
-                    <label><input type="checkbox" id="autoplay"/> Autoplay</label>
+                    <label>
+                        <input id="autoplay" type="checkbox"/>Autoplay</label>
                 </div>
             </div>
         </form>
     </t>
-
     <t t-name="web_editor.dialog.link">
         <t t-call="web_editor.dialog">
             <t t-set="title">Link to</t>
@@ -282,78 +592,85 @@
                 <div class="list-group">
                     <div class="form-group list-group-item active">
                         <h3 class="list-group-item-heading">
-                            <label for="link-new" class="control-label">
-                                Link Label
+                            <label class="control-label" for="link-new">Link Label
                             </label>
                         </h3>
-                        <input type="text" class="form-control" id="link-text" required="required"/>
+                        <input class="form-control" id="link-text" required="required" type="text"/>
                     </div>
                 </div>
                 <ul class="list-group">
                     <li class="list-group-item form-group clearfix active">
                         <div class="pull-right" style="display: none;">
                             <label>
-                                <input type="checkbox" class="window-new"/>
-                                Open in new window
-                            </label>
+                                <input class="window-new" type="checkbox"/>Open in new window</label>
                         </div>
                         <h4 class="list-group-item-heading">
-                            <label for="link-external" class="control-label">
-                                URL or Email Address
+                            <label class="control-label" for="link-external">URL or Email Address
                             </label>
                         </h4>
-                        <input type="text" class="form-control url email-address url-source"
-                               id="link-external" placeholder="http://openerp.com"/>
+                        <input class="form-control url email-address url-source" id="link-external" placeholder="http://openerp.com" type="text"/>
                     </li>
                 </ul>
                 <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Style
+                        <label class="col-sm-2 control-label">Style
                         </label>
                         <div class="col-sm-4">
                             <div class="dropdown" style="line-height: 2em;">
-                                <a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                <a class="btn btn-default" data-toggle="dropdown" href="#">Color Style
+                                    <span class="caret"/></a>
+                                <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
                                     <li>
-                                        <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
+                                        <label class="btn btn-link">Link
+                                            <input checked="checked" class="link-style" name="link-style-type" type="radio" value=""/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-default">Basic
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-default"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-success">Success<input value="btn-success" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-success">Success
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-success"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-primary">Primary
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-primary"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-info">Info
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-info"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-warning">Warning
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-warning"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <label class="btn btn-danger">Danger
+                                            <input class="link-style" name="link-style-type" type="radio" value="btn-danger"/></label>
                                     </li>
                                 </ul>
                             </div>
                         </div>
                         <div class="col-sm-4">
                             <div class="dropdown" style="line-height: 2em;">
-                                <a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                <a class="btn btn-default" data-toggle="dropdown" href="#">Size
+                                    <span class="caret"/></a>
+                                <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
                                     <li>
-                                        <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <label class="btn btn-default btn-xs">Extra Small
+                                            <input class="link-style" name="link-style-size" type="radio" value="btn-xs"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <label class="btn btn-default btn-sm">Small
+                                            <input class="link-style" name="link-style-size" type="radio" value="btn-sm"/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
+                                        <label class="btn btn-default">Default
+                                            <input checked="checked" class="link-style" name="link-style-size" type="radio" value=""/></label>
                                     </li>
                                     <li>
-                                        <label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <label class="btn btn-default btn-lg">Large
+                                            <input class="link-style" name="link-style-size" type="radio" value="btn-lg"/></label>
                                     </li>
                                 </ul>
                             </div>
@@ -362,12 +679,11 @@
                 </div>
                 <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Preview
+                        <label class="col-sm-2 control-label">Preview
                         </label>
                         <div class="col-sm-10" style="line-height: 2em;">
                             <div style="overflow: auto; max-width: 100%; max-height: 200px;">
-                                <a id="link-preview" href="#"></a>
+                                <a href="#" id="link-preview"/>
                             </div>
                         </div>
                     </div>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 0b194de6af9..3ec1bf42308 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -14,15 +14,8 @@
     </t>
 
     <t t-name="web_editor.snippets">
-        <div id='oe_snippets' class="hidden-xs o_open">
-            <div id="o_arrow">
-                <span class="fa fa-angle-double-right fa-1x" style="top: 10px;"></span>
-                <div>Insert Blocks</div>
-                <span class="fa fa-angle-double-right fa-1x" style="bottom: 10px;"></span>
-            </div>
-            <div id="o_left_bar">
-                <span class='snippets_loading'>Snippets are loading...</span>
-            </div>
+        <div id='web_editor_snippets' class="hidden-xs o_open">
+            <div id="o_left_bar"></div>
         </div>
     </t>
 
@@ -32,7 +25,7 @@
                 <div class="btn-group">
                     <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"></i></a>
                     <div class="dropdown oe_options hidden btn-group">
-                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
+                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize  </a>
                         <ul class="dropdown-menu" role="menu"></ul>
                     </div>
                     <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 4daca69cb2e..1e84a3c010e 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -13,7 +13,7 @@
                 var args = Array.prototype.slice.call(arguments);
                 var factorie = args.pop();
                 var id = args[0];
-                
+
                 if (id instanceof Array) {
                     var name = "summernote_factorie_" + (++uniqId);
                     odoo[name] = factorie;
@@ -50,14 +50,22 @@
         delete odoo.__define__;
         delete odoo.website_next_define;
     </script>
-
-    <!--link rel="stylesheet" href="/web_editor/static/lib/summernote/src/less/summernote.less"/-->
-    <link rel="stylesheet" href="/web_editor/static/lib/summernote/summernote.css"/>
+    <link rel="stylesheet" href="/web_editor/static/lib/summernote/src/less/summernote.less"/>
+    <!-- <link rel="stylesheet" href="/web_editor/static/lib/summernote/summernote.css"/> -->
 </template>
 
 <template id="editor" name="Editor">
-    <link rel='stylesheet' href='/web_editor/static/src/css/snippets.css'/>
-    <link rel="stylesheet" href='/web_editor/static/src/css/editor.css'/>
+    <!-- Call default mixins from WEB module -->
+    <link rel="stylesheet" href='/web/static/src/less/utils.less'/>
+
+    <!-- Web Editor style -->
+    <link rel='stylesheet' href='/web_editor/static/src/less/web_editor.variables.less'/>
+    <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.interactions.less'/>
+    <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.mixins.less'/>
+    <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.backend.less'/>
+    <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.components.less'/>
+    <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.ui.less'/>
+
     <script type="text/javascript" src='/web_editor/static/lib/nearest/jquery.nearest.js' />
     <script type="text/javascript" src="/web_editor/static/src/js/editor.js" />
     <script type="text/javascript" src="/web_editor/static/src/js/rte.js" />
@@ -72,7 +80,7 @@
 
 <template id="assets_common" inherit_id="web.assets_common" name="web_editor base assets_common">
     <xpath expr="." position="inside">
-        <link rel="stylesheet" href='/web_editor/static/src/css/web_editor.css'/>
+        <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.common.less'/>
         <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.less'/>
         <script type="text/javascript" src="/web_editor/static/src/js/base.js" />
         <script type="text/javascript" src="/web_editor/static/src/js/snippets.animation.js" />
@@ -91,7 +99,7 @@
     <xpath expr="." position="inside">
         <t t-call="web_editor.summernote"/>
         <t t-call="web_editor.editor"/>
-        <link rel="stylesheet" href="/web_editor/static/src/css/backend.css"/>
+        <link rel="stylesheet" href="/web_editor/static/src/less/web_editor.backend.less"/>
         <script type="text/javascript" src="/web_editor/static/src/js/backend.js" />
     </xpath>
 </template>
@@ -100,17 +108,31 @@
 <!-- HTML class to hide option for one mode : only-text, only-bg -->
 
 <template id="web_editor.colorpicker" name="Color-Picker">
-    <table class="colorpicker">
-        <tr>
-            <td><button class="bg-primary" title="Primary Color"/></td>
-            <td><button class="bg-success" title="Success Color"/></td>
-            <td><button class="bg-info" title="Info Color"/></td>
-            <td><button class="bg-warning" title="Warning Color"/></td>
-            <td><button class="bg-danger" title="Danger Color"/></td>
-            <!-- retrocompatibility v8 -->
-            <td><button class="oe_dark" title="Light"/></td>
-        </tr>
-    </table>
+    <div class="colorpicker">
+        <div class="theme">
+            <button class="bg-accent">Accent <span></span></button>
+            <button class="bg-compl">Complementary<span></span></button>
+            <button class="bg-alpha">Alpha <span></span></button>
+            <button class="bg-beta">Beta <span></span></button>
+            <button class="bg-gamma">Gamma <span></span></button>
+        </div>
+        <div class="grayscale">
+            <button class="bg-white">White <span></span></button>
+            <button class="bg-gray_lighter">Gray Lighter <span></span></button>
+            <button class="bg-gray_light">Gray Light <span></span></button>
+            <button class="bg-gray">Gray <span></span></button>
+            <button class="bg-gray_dark">Gray Dark <span></span></button>
+            <button class="bg-gray_darker">Gray Darker <span></span></button>
+            <button class="bg-black">Black <span></span></button>
+        </div>
+        <div class="ui">
+            <button class="bg-primary">Primary Color <span></span></button>
+            <button class="bg-success">Success Color <span></span></button>
+            <button class="bg-info">Info Color <span></span></button>
+            <button class="bg-warning">Warning Color <span></span></button>
+            <button class="bg-danger">Danger Color <span></span></button>
+        </div>
+    </div>
 </template>
 
 </openerp>
diff --git a/addons/web_editor/views/iframe.xml b/addons/web_editor/views/iframe.xml
index f216e4db588..43a2861ca78 100644
--- a/addons/web_editor/views/iframe.xml
+++ b/addons/web_editor/views/iframe.xml
@@ -15,7 +15,7 @@
                 var snippets_url = '<t t-esc="snippets or ''"/>';
                 var callback = window.location.href.match(/callback=([^&amp;=]+)/)[1];
             </script>
-            <link t-if="enable_editor and inline_mode" rel="stylesheet" href="/web_editor/static/src/css/inline.css" type="text/css"/>
+            <link t-if="enable_editor and inline_mode" rel="stylesheet" href="/web_editor/static/src/css/web_editor.iframe.inline.css" type="text/css"/>
             <t t-if="not dont_load_assets">
                 <t t-call-assets="web_editor.assets_editor"/>
                 <style>
diff --git a/addons/website/static/src/css/common.sass b/addons/website/static/src/css/common.sass
deleted file mode 100644
index 4d5f0673e33..00000000000
--- a/addons/website/static/src/css/common.sass
+++ /dev/null
@@ -1,69 +0,0 @@
-@import "compass/css3"
-@import "compass/css3/user-interface"
-@import "compass/css3/transition"
-@import "compass/support"
-
-//smartphones, iPhone, portrait 480x320 phones
-$smart_phone: 320px
-//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
-$small-tablet: 481px
-//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
-$portrait-tablet: 641px
-//tablet, landscape iPad, lo-res laptops ands desktops
-$tablet: 961px
-//big landscape tablets, laptops, and desktops
-$desktop: 1025px
-
-@mixin editor-font
-    font-size: 14px
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
-    line-height: normal
-
-@mixin selection()
-    ::-moz-selection
-        @content
-    ::selection
-        @content
-
-// Lifted from compass-animation
-// LICENSED UNDER THE MIT LICENSE (MIT)
-//
-// Copyright (c) 2012 Eric Meyer
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false)
-    $experimental-support-for-mozilla: $moz
-    $experimental-support-for-webkit: $webkit
-    $experimental-support-for-microsoft: $ms
-    $experimental-support-for-opera: $o
-    $experimental-support-for-khtml: $khtml
-
-@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false)
-    // Capture the current state
-    $original-moz: $experimental-support-for-mozilla
-    $original-webkit: $experimental-support-for-webkit
-    $original-o: $experimental-support-for-opera
-    $original-ms: $experimental-support-for-microsoft
-    $original-khtml: $experimental-support-for-khtml
-
-    @include set-experimental-support($moz, $webkit, $ms, $o, $khtml)
-    @content
-    @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml)
-
-@mixin keyframes($name)
-    @-moz-keyframes #{$name}
-        +with-only-support-for($moz: true)
-            @content
-    @-webkit-keyframes #{$name}
-        +with-only-support-for($webkit: true)
-            @content
-    @-o-keyframes #{$name}
-        +with-only-support-for($o: true)
-            @content
-    @keyframes #{$name}
-        +with-only-support-for
-            @content
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
deleted file mode 100644
index 4d946d1b7fa..00000000000
--- a/addons/website/static/src/css/editor.css
+++ /dev/null
@@ -1,657 +0,0 @@
-/* ---- SummerNote Minimal Reset ---- {{{ */
-.note-popover .popover {
-  position: fixed !important;
-  top: -9px !important;
-  right: auto !important;
-  left: 300px !important;
-  border: 0;
-  background: transparent;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  z-index: 1040;
-}
-.note-popover .popover-content {
-  padding: 0 !important;
-  margin: 0 0 0 6px !important;
-}
-.note-popover .popover-content > div {
-  padding-top: 0 !important;
-  margin-top: 0 !important;
-}
-.note-popover .popover-content > a {
-  border-radius: 3px;
-  background-color: #fff;
-  border-color: #ccc;
-  padding: 4px 10px;
-  font-size: 14px;
-  line-height: 1.5;
-}
-.note-popover .popover-content .note-para .dropdown-menu {
-  min-width: 148px !important;
-  padding: 5px 0 5px 5px !important;
-}
-.note-popover .popover-content .note-ul .dropdown-menu {
-  min-width: 150px !important;
-  padding: 5px 0 5px 5px !important;
-}
-.note-popover .popover-content .note-ul .dropdown-menu .note-li {
-  margin-right: 5px;
-}
-.note-popover .popover-content > span {
-  display: inline-block;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-  border-radius: 3px;
-  background-color: white;
-  border-color: #cccccc;
-  padding: 4px 10px;
-  font-size: 14px;
-  line-height: 1.5;
-}
-.note-popover .popover-content .colorpicker {
-  margin: 0;
-}
-.note-popover .popover-content .colorpicker td > * {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  margin: 0;
-  border: 1px solid #fff;
-}
-.note-popover .popover .popover-content .dropdown-menu a {
-  display: block;
-}
-.note-popover .arrow {
-  display: none;
-}
-
-.o_editable:not(:empty):not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover, .o_editable[data-oe-type]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
-  /* to do change into primary color in less */
-  -moz-box-shadow: #3071a9 0 0 5px 2px inset;
-  -webkit-box-shadow: #3071a9 0 0 5px 2px inset;
-  box-shadow: #3071a9 0 0 5px 2px inset;
-}
-.o_editable:focus, .o_editable[data-oe-type] {
-  min-height: 0.8em;
-  min-width: 8px;
-}
-.o_editable.o_is_inline_editable {
-  display: inline-block;
-}
-
-.editor_enable [data-oe-readonly]:hover {
-  cursor: default;
-}
-
-/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
-.o_editable[placeholder]:empty:not(:focus):before {
-  content: attr(placeholder);
-  opacity: 0.3;
-}
-
-/* Prevent the text contents of draggable elements from being selectable. */
-[draggable] {
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-/* Prevent firefox handler. */
-.o_editable .btn {
-  -webkit-user-select: auto;
-  -moz-user-select: auto;
-  -ms-user-select: auto;
-  user-select: auto;
-}
-
-/* ---- OpenERP Style ---- {{{ */
-.oe_website_editorbar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  display: block;
-  width: 100%;
-  padding: 2px;
-  margin: 0;
-  z-index: 20000;
-  background: #414141, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY0NjA2MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626));
-  background: #414141, -moz-linear-gradient(#646060, #262626);
-  background: #414141, -webkit-linear-gradient(#646060, #262626);
-  background: #414141, linear-gradient(#646060, #262626);
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.oe_website_editorbar li {
-  display: inline;
-  color: #eee;
-}
-.oe_website_editorbar li:hover {
-  background: rgba(0, 0, 0, 0.2);
-  text-shadow: black 0px 0px 3px;
-  color: white;
-}
-
-.oe_website_editorbar .oe_rte_toolbar div.dropdown {
-  display: inline-block;
-}
-.oe_website_editorbar .oe_rte_toolbar div.dropdown li {
-  display: list-item;
-}
-.oe_website_editorbar .oe_rte_toolbar button {
-  font-family: FontAwesome;
-  font-weight: normal;
-  font-style: normal;
-  text-decoration: inherit;
-}
-.oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
-  padding-right: 3px;
-}
-.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
-  content: "";
-  padding-left: 6px;
-}
-
-.oe_editable:focus {
-  outline: none !important;
-}
-
-.css_editable_display {
-  display: block !important;
-}
-
-.css_editable_hidden {
-  display: none !important;
-}
-
-.editor_enable .css_editable_mode_hidden {
-  display: none;
-}
-
-.editor_enable .css_non_editable_mode_hidden {
-  display: block !important;
-}
-
-.o_editable .media_iframe_video .css_editable_mode_display {
-  display: block !important;
-}
-
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  background-image: url("/website/static/src/img/edit_here.png") !important;
-}
-.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
-  content: "Press The Top-Left Edit Button" !important;
-}
-
-.o_editable.oe_structure.oe_empty > p:empty:only-child, .o_editable[data-oe-type=html] > p:empty:only-child {
-  color: #aaa;
-}
-.o_editable.oe_structure.oe_empty:empty, .o_editable[data-oe-type=html]:empty, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child, .o_editable.oe_structure.oe_empty > p:empty:only-child, .o_editable[data-oe-type=html] > p:empty:only-child {
-  background-image: none !important;
-}
-.o_editable.oe_structure.oe_empty:empty:before, .o_editable[data-oe-type=html]:empty:before, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before, .o_editable.oe_structure.oe_empty > p:empty:only-child:before, .o_editable[data-oe-type=html] > p:empty:only-child:before {
-  content: "Write your text here" !important;
-}
-.o_editable.oe_structure.oe_empty:empty:focus:before, .o_editable[data-oe-type=html]:empty:focus:before, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:focus:before, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:focus:before, .o_editable.oe_structure.oe_empty > p:empty:only-child:focus:before, .o_editable[data-oe-type=html] > p:empty:only-child:focus:before {
-  display: none;
-}
-
-#oe_snippets ~ #wrapwrap .oe_structure.oe_empty:empty, #oe_snippets ~ #wrapwrap [data-oe-type=html]:empty, #oe_snippets ~ #wrapwrap .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, #oe_snippets ~ #wrapwrap [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  background-image: url("/website/static/src/img/drag_here.png") !important;
-}
-#oe_snippets ~ #wrapwrap .oe_structure.oe_empty:empty:before, #oe_snippets ~ #wrapwrap [data-oe-type=html]:empty:before, #oe_snippets ~ #wrapwrap .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, #oe_snippets ~ #wrapwrap [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
-  content: "Drag Building Blocks Here" !important;
-}
-
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  background-image: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 220px !important;
-}
-
-[data-oe-type=html].oe_no_empty:empty:before {
-  content: "" !important;
-}
-
-[data-oe-type=html].oe_no_empty:empty {
-  background-image: none !important;
-  height: 16px !important;
-}
-
-#website-top-edit {
-  width: 100%;
-}
-#website-top-edit > ul > li {
-  margin: 0;
-}
-
-#website-top-navbar {
-  min-height: 34px;
-  height: 34px;
-}
-#website-top-navbar form {
-  margin: 0;
-}
-#website-top-navbar form button, #website-top-navbar form a {
-  padding: 4px 8px 4px 8px;
-  margin-top: 2px;
-  font-size: 13px;
-}
-
-/* ---- EDITOR BAR ---- {{{ */
-table.editorbar-panel {
-  cursor: pointer;
-  width: 100%;
-}
-table.editorbar-panel td {
-  border: 1px solid #aaa;
-}
-table.editorbar-panel td.selected {
-  background-color: #b1c9d9;
-}
-
-.link-style .dropdown > .btn {
-  min-width: 160px;
-}
-.link-style .link-style {
-  display: none;
-}
-.link-style li {
-  text-align: center;
-}
-.link-style li label {
-  width: 100px;
-  margin: 0 5px;
-}
-.link-style .col-sm-2 > * {
-  line-height: 2em;
-}
-
-/* ---- MENU ---- {{{ */
-div.oe_menu_buttons {
-  top: -8px;
-  right: -8px;
-}
-
-ul.oe_menu_editor .fa-home {
-  display: none;
-}
-ul.oe_menu_editor > li:first-child > div > span > .fa-home {
-  display: block;
-}
-ul.oe_menu_editor .oe_menu_placeholder {
-  outline: 1px dashed #4183C4;
-}
-ul.oe_menu_editor ul {
-  list-style: none;
-}
-ul.oe_menu_editor li div {
-  cursor: move;
-}
-ul.oe_menu_editor .disclose {
-  cursor: pointer;
-  width: 10px;
-  display: none;
-}
-
-/* ---- RTE ---- {{{ */
-.oe_editable .btn, .btn.oe_editable {
-  -moz-user-select: auto;
-  -ms-user-select: auto;
-  -webkit-user-select: auto;
-  user-select: auto;
-  cursor: text !important;
-}
-
-.modal-dialog.select-media {
-  width: 80%;
-}
-
-.modal .existing-attachments .pager {
-  margin: 0;
-}
-
-.modal .image-preview {
-  margin-bottom: 0.5em;
-}
-
-.modal-footer {
-  text-align: left;
-}
-
-.modal.nosave .wait {
-  display: inline-block !important;
-  visibility: visible !important;
-}
-.modal.nosave .modal-body .filepicker, .modal.nosave .modal-body .image-preview {
-  display: none;
-}
-.modal.nosave .modal-body .wait {
-  width: 100%;
-}
-.modal.nosave .modal-footer .save {
-  display: none;
-}
-
-.modal .font-icons-icons {
-  font-size: 2em;
-  max-height: 9em;
-  overflow: auto;
-}
-.modal .font-icons-icons .font-icons-icon {
-  display: inline-block;
-  width: 2em;
-  padding: 0.25em;
-  text-align: center;
-  cursor: pointer;
-}
-.modal .font-icons {
-  position: relative;
-  display: block;
-}
-.modal .font-icons:before {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-  opacity: 0.7;
-  position: absolute;
-  top: 2px;
-  left: 3px;
-  font-size: 2em;
-}
-.modal #icon-search {
-  padding-left: 2.5em;
-}
-.modal .font-icons-selected {
-  background-color: #ddd;
-}
-
-.oe_carlos_danger {
-  outline: 1px solid red !important;
-  background-color: #ffd9dd !important;
-}
-
-.hover-edition {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1001;
-}
-
-.preview-container {
-  text-align: center;
-  line-height: 100px;
-  height: 100px;
-}
-.preview-container > * {
-  max-height: 100px;
-  line-height: 100px;
-  margin: 0 auto;
-  display: inline-block;
-}
-
-.note-editable .fa {
-  cursor: pointer;
-}
-
-.img-responsive {
-  text-align: center;
-}
-
-.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
-  min-height: 24px;
-}
-
-/* ---- MOBILE PREVIEW ---- {{{ */
-.oe_mobile_preview.modal .modal-content {
-  height: 660px;
-  background-color: #000000;
-  border: 2px solid #1C1F1F;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  margin: auto;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  max-width: 330px;
-}
-.oe_mobile_preview.modal .modal-content .modal-header {
-  background-color: #000000;
-  border-bottom: 0;
-  -moz-border-radius-topleft: 10px;
-  -webkit-border-top-left-radius: 10px;
-  border-top-left-radius: 10px;
-  -moz-border-radius-topright: 10px;
-  -webkit-border-top-right-radius: 10px;
-  border-top-right-radius: 10px;
-}
-.oe_mobile_preview.modal .modal-content .modal-header .modal-title {
-  color: #1C1F1F;
-}
-.oe_mobile_preview.modal .modal-content .modal-header .close {
-  color: lightgrey;
-  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
-  opacity: 1;
-}
-.oe_mobile_preview.modal .modal-content .modal-header .close:hover {
-  color: #E00101;
-  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
-  opacity: 1;
-}
-.oe_mobile_preview.modal .modal-content .modal-body {
-  background-color: #000000;
-  max-height: 600px;
-  padding: 0;
-  margin: 0;
-}
-.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
-  width: 320px;
-  height: 568px;
-  padding: 5px;
-  border: none;
-}
-.oe_mobile_preview.modal .modal-content .modal-footer {
-  background-color: #000000;
-}
-
-/* ---- SEO TOOLS ---- {{{ */
-.oe_seo_configuration .modal-dialog {
-  width: 80%;
-}
-.oe_seo_configuration .oe_remove {
-  color: #E00101;
-}
-.oe_seo_configuration .oe_seo_suggestion {
-  cursor: pointer;
-}
-.oe_seo_configuration .oe_seo_keyword {
-  padding: 0.2em 0.4em 0.2em 0.5em;
-  -moz-border-radius: 0.4em;
-  -webkit-border-radius: 0.4em;
-  border-radius: 0.4em;
-}
-.oe_seo_configuration li.oe_seo_preview_g {
-  line-height: 1.2;
-  list-style: none;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  font-size: small;
-  font-family: arial, sans-serif;
-}
-.oe_seo_configuration li.oe_seo_preview_g h3 {
-  font-size: medium;
-}
-.oe_seo_configuration li.oe_seo_preview_g .r {
-  margin: 0;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.oe_seo_configuration li.oe_seo_preview_g .r a {
-  color: #1e0fbe;
-  text-decoration: underline;
-  text-transform: none;
-}
-.oe_seo_configuration li.oe_seo_preview_g .r a em {
-  font-style: normal !important;
-}
-.oe_seo_configuration li.oe_seo_preview_g .s {
-  color: #444;
-  max-width: 42em;
-}
-.oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
-  display: block;
-  margin-bottom: 1px;
-}
-.oe_seo_configuration li.oe_seo_preview_g .f {
-  color: #666;
-  margin-bottom: 1px;
-}
-.oe_seo_configuration li.oe_seo_preview_g .f cite {
-  color: #006621;
-  font-style: normal;
-  font-size: 14px;
-}
-.oe_seo_configuration li.oe_seo_preview_g .st {
-  line-height: 1.24;
-}
-
-/* ---- ACE EDITOR ---- {{{ */
-.oe_ace_view_editor {
-  position: fixed;
-  right: 0;
-  z-index: 1001;
-  height: 100%;
-  background: #2F3129;
-  color: white;
-}
-.oe_ace_view_editor .oe_ace_view_editor_title {
-  width: 100%;
-  padding-top: 0;
-  padding-left: 0;
-  height: 30px;
-}
-.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
-  width: 50%;
-  height: 30px;
-  font-size: 14px;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
-  line-height: normal;
-}
-.oe_ace_view_editor .oe_ace_view_editor_title .btn {
-  height: 30px;
-  padding: 0 4px 0 4px;
-  font-size: 14px;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
-  line-height: normal;
-}
-.oe_ace_view_editor .ace_editor {
-  position: absolute;
-  top: 50px;
-  right: 0;
-  left: 0;
-}
-.oe_ace_view_editor .ace_editor .ace_gutter {
-  cursor: ew-resize;
-}
-.oe_ace_view_editor #ace-view-id {
-  padding: 0 1em;
-}
-.oe_ace_view_editor.oe_ace_open {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
-  opacity: 0.97;
-}
-.oe_ace_view_editor.oe_ace_closed {
-  z-index: -1000;
-  display: none;
-}
-
-.oe_include_bundles {
-  font-weight: normal;
-  padding: 0 8px;
-}
-
-/* ---- CUSTOMIZE THEME ---- {{{ */
-#theme_error {
-  background: #ffc;
-}
-
-#theme_customize_modal {
-  overflow: auto;
-  z-index: 1020;
-  background: transparent;
-  display: block;
-}
-#theme_customize_modal .modal-dialog {
-  top: 75px;
-  width: auto;
-  margin: 0;
-  position: absolute;
-  right: 10px;
-  font-family: "Lato-Regular";
-  font-weight: normal;
-  text-transform: capitalize;
-  letter-spacing: normal;
-}
-#theme_customize_modal .modal-h5 {
-  color: #ffffff;
-  font-family: "Lato-Regular";
-  font-weight: normal;
-  text-transform: uppercase;
-  letter-spacing: normal;
-  font-size: 14px;
-  color: white;
-  padding: 4px 0 4px 4px;
-  background-color: #bdc3c7;
-}
-#theme_customize_modal table {
-  width: 100%;
-  margin-bottom: 8px;
-}
-#theme_customize_modal label {
-  display: block;
-  text-align: center;
-}
-#theme_customize_modal label > div, #theme_customize_modal label > img {
-  border: 1px solid #fff;
-  line-height: 30px;
-  font-size: 0.9em;
-  margin: 2px 4px;
-}
-#theme_customize_modal label.checked > div, #theme_customize_modal label.checked > img {
-  box-shadow: 2px 2px 3px #888;
-  border: 1px solid #666;
-}
-#theme_customize_modal label img {
-  width: 60px;
-  height: 35px;
-  margin: 2px;
-  border: 1px solid rgba(136, 136, 136, 0.5);
-}
-#theme_customize_modal label input {
-  display: none;
-}
-#theme_customize_modal .loading_backdrop {
-  display: none;
-}
-#theme_customize_modal.loading .loading_backdrop {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  opacity: 0.3;
-  position: absolute;
-  z-index: 1;
-}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
deleted file mode 100644
index e4bc4631ad7..00000000000
--- a/addons/website/static/src/css/editor.sass
+++ /dev/null
@@ -1,567 +0,0 @@
-@import "common"
-
-/* ---- SummerNote Minimal Reset ---- {{{ */
-
-.note-popover
-    .popover
-        position: fixed !important
-        top: -9px !important
-        right: auto !important
-        left: 300px !important
-        border: 0
-        background: transparent
-        box-shadow: none
-        -webkit-box-shadow: none
-        z-index: 1040
-    .popover-content
-        padding: 0 !important
-        margin: 0 0 0 6px !important
-        > div
-            padding-top: 0 !important
-            margin-top: 0 !important
-        > a
-            border-radius: 3px
-            background-color: #fff
-            border-color: #ccc
-            padding: 4px 10px
-            font-size: 14px
-            line-height: 1.5
-        .note-para .dropdown-menu
-            min-width: 148px !important
-            padding: 5px 0 5px 5px !important
-        .note-ul .dropdown-menu
-            min-width: 150px !important
-            padding: 5px 0 5px 5px !important
-            .note-li
-                margin-right: 5px
-        > span
-            display: inline-block
-            max-width: 200px
-            overflow: hidden
-            text-overflow: ellipsis
-            white-space: nowrap
-            vertical-align: middle
-            border-radius: 3px
-            background-color: white
-            border-color: #cccccc
-            padding: 4px 10px
-            font-size: 14px
-            line-height: 1.5
-
-        .colorpicker
-            margin: 0
-            td > *
-                width: 20px
-                height: 20px
-                padding: 0
-                margin: 0
-                border: 1px solid #fff
-
-    .popover .popover-content .dropdown-menu a
-        display: block
-    .arrow
-        display: none
-
-.o_editable
-    &:not(:empty),&[data-oe-type]
-        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover
-            /* to do change into primary color in less */
-            -moz-box-shadow: #3071a9 0 0 5px 2px inset
-            -webkit-box-shadow: #3071a9 0 0 5px 2px inset
-            box-shadow: #3071a9 0 0 5px 2px inset
-    &:focus,&[data-oe-type]
-        min-height: 0.8em
-        min-width: 8px
-    &.o_is_inline_editable
-        display: inline-block
-.editor_enable [data-oe-readonly]:hover
-    cursor: default
-
-// }}}
-/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
-.o_editable[placeholder]:empty:not(:focus):before
-    content: attr(placeholder)
-    opacity: 0.3
-
-/* Prevent the text contents of draggable elements from being selectable. */
-[draggable]
-    -moz-user-select: none
-    -khtml-user-select: none
-    -webkit-user-select: none
-    user-select: none
-
-/* Prevent firefox handler. */
-.o_editable .btn
-    -webkit-user-select: auto
-    -moz-user-select: auto
-    -ms-user-select: auto
-    user-select: auto
-
-/* ---- OpenERP Style ---- {{{ */
-
-.oe_website_editorbar
-    position: fixed
-    top: 0
-    right: 0
-    display: block
-    width: 100%
-    padding: 2px
-    margin: 0
-    z-index: 20000
-    @include background(#414141, linear-gradient(#646060, #262626))
-    +box-sizing(border-box)
-    li
-        display: inline
-        color: #eee
-        &:hover
-            background: rgba(0,0,0,0.2)
-            +text-shadow(black 0px 0px 3px)
-            color: white
-
-.oe_website_editorbar .oe_rte_toolbar
-    div.dropdown
-        display: inline-block
-        li
-            display: list-item
-
-    button
-        font-family: FontAwesome
-        font-weight: normal
-        font-style: normal
-        text-decoration: inherit
-        &.oe_button_list
-            padding-right: 3px
-            &:after
-                content: "\F0D7"
-                padding-left: 6px
-
-.oe_editable:focus
-    outline: none !important
-
-.css_editable_display
-    display: block !important
-
-.css_editable_hidden
-    display: none !important
-
-.editor_enable .css_editable_mode_hidden
-    display: none
-
-.editor_enable .css_non_editable_mode_hidden
-    display: block !important
-
-.o_editable .media_iframe_video .css_editable_mode_display
-    display: block !important
- 
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    background-image: url('/website/static/src/img/edit_here.png') !important
-    &:before
-        content: 'Press The Top-Left Edit Button' !important
-
-.o_editable
-    &.oe_structure.oe_empty > p:empty:only-child, &[data-oe-type=html] > p:empty:only-child
-        color: #aaa
-    &.oe_structure.oe_empty:empty, &[data-oe-type=html]:empty, &.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, &[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child, &.oe_structure.oe_empty > p:empty:only-child, &[data-oe-type=html] > p:empty:only-child
-        background-image: none !important
-        &:before
-            content: 'Write your text here' !important
-        &:focus:before
-            display: none
-
-#oe_snippets ~ #wrapwrap
-    .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-        background-image: url('/website/static/src/img/drag_here.png') !important
-        &:before
-            content: 'Drag Building Blocks Here' !important
-
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    background-image: none
-    background-repeat: no-repeat
-    background-position: center
-    height: 220px !important
-
-[data-oe-type=html].oe_no_empty:empty:before
-    content: '' !important
-
-[data-oe-type=html].oe_no_empty:empty
-    background-image: none !important
-    height: 16px !important
-
-#website-top-edit
-    width: 100%
-    > ul > li
-        margin: 0
-
-#website-top-navbar
-    min-height: 34px
-    height: 34px
-    form
-        margin: 0
-        button, a
-            padding: 4px 8px 4px 8px
-            margin-top: 2px
-            font-size: 13px
-
-// }}}
-
-/* ---- EDITOR BAR ---- {{{ */
-
-table.editorbar-panel
-    cursor: pointer
-    width: 100%
-    td
-        border: 1px solid #aaa
-    td.selected
-        background-color: #b1c9d9
-
-.link-style
-    .dropdown > .btn
-        min-width: 160px
-    .link-style
-        display: none
-    li
-        text-align: center
-        label
-            width: 100px
-            margin: 0 5px
-    .col-sm-2 > *
-        line-height: 2em
-
-// }}}
-
-/* ---- MENU ---- {{{ */
-
-div.oe_menu_buttons
-    top: -8px
-    right: -8px
-
-ul.oe_menu_editor
-    .fa-home
-        display: none
-    > li:first-child > div > span > .fa-home
-        display: block
-    .oe_menu_placeholder
-        outline: 1px dashed #4183C4
-    ul
-        list-style: none
-    li div
-        cursor: move
-    .disclose
-        cursor: pointer
-        width: 10px
-        display: none
-
-// }}}
-
-/* ---- RTE ---- {{{ */
-
-// bootstrap makes .btn elements unselectable -> RTE double-click can't know
-// about them either
-.oe_editable .btn, .btn.oe_editable
-    +user-select(auto)
-    cursor: text !important
-
-.modal-dialog.select-media
-    width: 80%
-
-.modal .existing-attachments
-    .pager
-        margin: 0
-
-.modal .image-preview
-    margin-bottom: 0.5em
-
-.modal-footer
-    text-align: left
-
-.modal.nosave
-    .wait
-        display: inline-block !important
-        visibility: visible !important
-    .modal-body
-        .filepicker, .image-preview
-            display: none
-        .wait
-            width: 100%
-    .modal-footer .save
-        display: none
-
-// fontawesome modal
-.modal
-    .font-icons-icons
-        font-size: 2em
-        max-height: 9em
-        overflow: auto
-
-        .font-icons-icon
-            display: inline-block
-            width: 2em
-            padding: 0.25em
-            text-align: center
-            cursor: pointer
-
-    .font-icons
-        position: relative
-        display: block
-
-        &:before
-            +opacity(0.7)
-            position: absolute
-            top: 2px
-            left: 3px
-            font-size: 2em
-    #icon-search
-        padding-left: 2.5em
-
-    .font-icons-selected
-        background-color: #ddd
-
-.oe_carlos_danger
-    outline: 1px solid red !important
-    background-color: #ffd9dd !important
-
-.hover-edition
-    display: inline-block
-    position: absolute
-    top: 0
-    left: 0
-    // This z-index is due to .navbar of bootstrap & jQuery-transfo
-    z-index: 1001
-.preview-container
-    text-align: center
-    line-height: 100px
-    height: 100px
-    > *
-        max-height: 100px
-        line-height: 100px
-        margin: 0 auto
-        display: inline-block
-
-// fontawesome
-.note-editable .fa
-    cursor: pointer
-
-.img-responsive
-    text-align: center
-
-.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
-    min-height: 24px
-
-// }}}
-
-/* ---- MOBILE PREVIEW ---- {{{ */
-
-$mobile_preview_background: #000000
-$mobile_preview_border: #1C1F1F
-$icon_close: #E00101
-.oe_mobile_preview
-    &.modal .modal-content
-        height: 660px
-        background-color: $mobile_preview_background
-        border: 2px solid $mobile_preview_border
-        +border-radius(10px)
-        margin: auto
-        top: 0
-        left: 0
-        bottom: 0
-        right: 0
-        max-width: 330px
-        .modal-header
-            background-color: $mobile_preview_background
-            border-bottom: 0
-            +border-top-left-radius(10px)
-            +border-top-right-radius(10px)
-            .modal-title
-                color: $mobile_preview_border
-            .close
-                color: lightgrey
-                +opacity(1)
-            .close:hover
-                color: $icon_close
-                +opacity(1)
-        .modal-body
-            background-color: $mobile_preview_background
-            max-height: 600px
-            padding: 0
-            margin: 0
-            .oe_mobile_viewport
-                width: 320px
-                height: 568px
-                padding: 5px
-                border: none
-        .modal-footer
-            background-color: $mobile_preview_background
-
-// }}}
-
-/* ---- SEO TOOLS ---- {{{ */
-
-$remove_color: $icon_close
-$in_title_color: #5cb85c
-$in_description_color: #428bca
-$in_body_color: #5bc0de
-$highlighted_text_color: #ffffff
-.oe_seo_configuration
-    .modal-dialog
-        width: 80%
-    .oe_remove
-        color: $remove_color
-    .oe_seo_suggestion
-        cursor: pointer
-    .oe_seo_keyword
-        padding: .2em .4em .2em .5em
-        +border-radius(.4em)
-    li.oe_seo_preview_g
-        line-height: 1.2
-        list-style: none
-        list-style-image: none
-        list-style-position: outside
-        list-style-type: none
-        font-size: small
-        font-family: arial,sans-serif
-        h3
-            font-size: medium
-        .r
-            margin: 0
-            font-size: 16px
-            font-style: normal
-            font-weight: normal
-            overflow: hidden
-            text-overflow: ellipsis
-            -webkit-text-overflow: ellipsis
-            white-space: nowrap
-            a
-                color: rgb(30, 15, 190)
-                text-decoration: underline
-                text-transform: none
-                em
-                    font-style: normal !important
-        .s
-            color: #444
-            max-width: 42em
-        .kv,.slp
-            display: block
-            margin-bottom: 1px
-        .f
-            color: #666
-            margin-bottom: 1px
-            cite
-                color: #006621
-                font-style: normal
-                font-size: 14px
-        .st
-            line-height: 1.24
-
-
-// }}}
-
-/* ---- ACE EDITOR ---- {{{ */
-
-$editorbar_height: 30px
-$infobar_height: 20px
-// TODO Fix => might break with themes
-
-.oe_ace_view_editor
-    position: fixed
-    // top property is set programmatically
-    right: 0
-    z-index: 1001
-    height: 100%
-    background: #2F3129
-    color: white
-    .oe_ace_view_editor_title
-        width: 100%
-        padding-top: 0
-        padding-left: 0
-        height: $editorbar_height
-        .oe_view_list
-            width: 50%
-            height: $editorbar_height
-            @include editor-font
-        .btn
-            height: $editorbar_height
-            padding: 0 4px 0 4px
-            @include editor-font
-    .ace_editor
-        position: absolute
-        top: $editorbar_height + $infobar_height
-        right: 0
-        // bottom property is set programmatically
-        left: 0
-        .ace_gutter
-            cursor: ew-resize
-    #ace-view-id
-        padding: 0 1em
-    &.oe_ace_open
-        +opacity(0.97)
-    &.oe_ace_closed
-        z-index: -1000
-        display: none
-
-.oe_include_bundles
-    font-weight: normal
-    padding: 0 8px
-
-// }}}
-
-/* ---- CUSTOMIZE THEME ---- {{{ */
-#theme_error
-    background: #ffc
-#theme_customize_modal
-    overflow: auto
-    z-index: 1020
-    background: transparent
-    display: block
-    .modal-dialog
-        top: 75px
-        width: auto
-        margin: 0
-        position: absolute
-        right: 10px
-        font-family: 'Lato-Regular'
-        font-weight: normal
-        text-transform: capitalize
-        letter-spacing: normal
-    .modal-h5
-        color: #ffffff
-        font-family: 'Lato-Regular'
-        font-weight: normal
-        text-transform: uppercase
-        letter-spacing: normal
-        font-size: 14px
-        color: white
-        padding: 4px 0 4px 4px
-        background-color: #bdc3c7
-    table
-        width: 100%
-        margin-bottom: 8px
-    label
-        display: block
-        text-align: center
-        > div, > img
-            border: 1px solid #fff
-            line-height: 30px
-            font-size: 0.9em
-            margin: 2px 4px
-        &.checked
-            > div, > img
-                box-shadow: 2px 2px 3px #888
-                border: 1px solid #666
-        img
-            width: 60px
-            height: 35px
-            margin: 2px
-            border: 1px solid rgba(136, 136, 136, 0.5)
-        input
-            display: none
-    .loading_backdrop
-        display: none
-    &.loading
-        .loading_backdrop
-            display: block
-            width: 100%
-            height: 100%
-            background: #000
-            opacity: 0.3
-            position: absolute
-            z-index: 1
diff --git a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.eot b/addons/website/static/src/css/fonts/glyphicons-halflings-regular.eot
deleted file mode 100644
index 87eaa434234..00000000000
Binary files a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.eot and /dev/null differ
diff --git a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.svg b/addons/website/static/src/css/fonts/glyphicons-halflings-regular.svg
deleted file mode 100644
index 5fee0685496..00000000000
--- a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.svg
+++ /dev/null
@@ -1,228 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata></metadata>
-<defs>
-<font id="glyphicons_halflingsregular" horiz-adv-x="1200" >
-<font-face units-per-em="1200" ascent="960" descent="-240" />
-<missing-glyph horiz-adv-x="500" />
-<glyph />
-<glyph />
-<glyph unicode=" " />
-<glyph unicode="*" d="M1100 500h-259l183 -183l-141 -141l-183 183v-259h-200v259l-183 -183l-141 141l183 183h-259v200h259l-183 183l141 141l183 -183v259h200v-259l183 183l141 -141l-183 -183h259v-200z" />
-<glyph unicode="+" d="M1100 400h-400v-400h-300v400h-400v300h400v400h300v-400h400v-300z" />
-<glyph unicode="&#xa0;" />
-<glyph unicode="&#x2000;" horiz-adv-x="652" />
-<glyph unicode="&#x2001;" horiz-adv-x="1304" />
-<glyph unicode="&#x2002;" horiz-adv-x="652" />
-<glyph unicode="&#x2003;" horiz-adv-x="1304" />
-<glyph unicode="&#x2004;" horiz-adv-x="434" />
-<glyph unicode="&#x2005;" horiz-adv-x="326" />
-<glyph unicode="&#x2006;" horiz-adv-x="217" />
-<glyph unicode="&#x2007;" horiz-adv-x="217" />
-<glyph unicode="&#x2008;" horiz-adv-x="163" />
-<glyph unicode="&#x2009;" horiz-adv-x="260" />
-<glyph unicode="&#x200a;" horiz-adv-x="72" />
-<glyph unicode="&#x202f;" horiz-adv-x="260" />
-<glyph unicode="&#x205f;" horiz-adv-x="326" />
-<glyph unicode="&#x20ac;" d="M800 500h-300q9 -74 33 -132t52.5 -91t62 -54.5t59 -29t46.5 -7.5q29 0 66 13t75 37t63.5 67.5t25.5 96.5h174q-31 -172 -128 -278q-107 -117 -274 -117q-205 0 -324 158q-36 46 -69 131.5t-45 205.5h-217l100 100h113q0 47 5 100h-218l100 100h135q37 167 112 257 q117 141 297 141q242 0 354 -189q60 -103 66 -209h-181q0 55 -25.5 99t-63.5 68t-75 36.5t-67 12.5q-24 0 -52.5 -10t-62.5 -32t-65.5 -67t-50.5 -107h379l-100 -100h-300q-6 -46 -6 -100h406z" />
-<glyph unicode="&#x2212;" d="M1100 700h-900v-300h900v300z" />
-<glyph unicode="&#x2601;" d="M178 300h750q120 0 205 86t85 208q0 120 -85 206.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5q0 -80 56.5 -137t135.5 -57z" />
-<glyph unicode="&#x2709;" d="M1200 1100h-1200l600 -603zM300 600l-300 -300v600zM1200 900v-600l-300 300zM800 500l400 -400h-1200l400 400l200 -200z" />
-<glyph unicode="&#x270f;" d="M1101 889l99 92q13 13 13 32.5t-13 33.5l-153 153q-15 13 -33 13t-33 -13l-94 -97zM401 189l614 614l-214 214l-614 -614zM-13 -13l333 112l-223 223z" />
-<glyph unicode="&#xe000;" horiz-adv-x="500" d="M0 0z" />
-<glyph unicode="&#xe001;" d="M700 100h300v-100h-800v100h300v550l-500 550h1200l-500 -550v-550z" />
-<glyph unicode="&#xe002;" d="M1000 934v-521q-64 16 -138 -7q-79 -26 -122.5 -83t-25.5 -111q17 -55 85.5 -75.5t147.5 4.5q70 23 111.5 63.5t41.5 95.5v881q0 10 -7 15.5t-17 2.5l-752 -193q-10 -3 -17 -12.5t-7 -19.5v-689q-64 17 -138 -7q-79 -25 -122.5 -82t-25.5 -112t86 -75.5t147 5.5 q65 21 109 69t44 90v606z" />
-<glyph unicode="&#xe003;" d="M913 432l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342t142 342t342 142t342 -142t142 -342q0 -142 -78 -261zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233z" />
-<glyph unicode="&#xe005;" d="M649 949q48 69 109.5 105t121.5 38t118.5 -20.5t102.5 -64t71 -100.5t27 -123q0 -57 -33.5 -117.5t-94 -124.5t-126.5 -127.5t-150 -152.5t-146 -174q-62 85 -145.5 174t-149.5 152.5t-126.5 127.5t-94 124.5t-33.5 117.5q0 64 28 123t73 100.5t104.5 64t119 20.5 t120 -38.5t104.5 -104.5z" />
-<glyph unicode="&#xe006;" d="M791 522l145 -449l-384 275l-382 -275l146 447l-388 280h479l146 400h2l146 -400h472zM168 71l2 1z" />
-<glyph unicode="&#xe007;" d="M791 522l145 -449l-384 275l-382 -275l146 447l-388 280h479l146 400h2l146 -400h472zM747 331l-74 229l193 140h-235l-77 211l-78 -211h-239l196 -142l-73 -226l192 140zM168 71l2 1z" />
-<glyph unicode="&#xe008;" d="M1200 143v-143h-1200v143l400 257v100q-37 0 -68.5 74.5t-31.5 125.5v200q0 124 88 212t212 88t212 -88t88 -212v-200q0 -51 -31.5 -125.5t-68.5 -74.5v-100z" />
-<glyph unicode="&#xe009;" d="M1200 1100v-1100h-1200v1100h1200zM200 1000h-100v-100h100v100zM900 1000h-600v-400h600v400zM1100 1000h-100v-100h100v100zM200 800h-100v-100h100v100zM1100 800h-100v-100h100v100zM200 600h-100v-100h100v100zM1100 600h-100v-100h100v100zM900 500h-600v-400h600 v400zM200 400h-100v-100h100v100zM1100 400h-100v-100h100v100zM200 200h-100v-100h100v100zM1100 200h-100v-100h100v100z" />
-<glyph unicode="&#xe010;" d="M500 1050v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5zM1100 1050v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5h400 q21 0 35.5 -14.5t14.5 -35.5zM500 450v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5zM1100 450v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5v400 q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5z" />
-<glyph unicode="&#xe011;" d="M300 1050v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM700 1050v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200 q21 0 35.5 -14.5t14.5 -35.5zM1100 1050v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM300 650v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200 q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM700 650v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM1100 650v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200 q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM300 250v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM700 250v-200 q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM1100 250v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5 t14.5 -35.5z" />
-<glyph unicode="&#xe012;" d="M300 1050v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM1200 1050v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h700 q21 0 35.5 -14.5t14.5 -35.5zM300 450v200q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5t-14.5 -35.5v-200q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5zM1200 650v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5v200 q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5zM300 250v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5zM1200 250v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700 q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5z" />
-<glyph unicode="&#xe013;" d="M448 34l818 820l-212 212l-607 -607l-206 207l-212 -212z" />
-<glyph unicode="&#xe014;" d="M882 106l-282 282l-282 -282l-212 212l282 282l-282 282l212 212l282 -282l282 282l212 -212l-282 -282l282 -282z" />
-<glyph unicode="&#xe015;" d="M913 432l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342t142 342t342 142t342 -142t142 -342q0 -142 -78 -261zM507 363q137 0 233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5t-234 -97t-97 -233 t97 -233t234 -97zM600 800h100v-200h-100v-100h-200v100h-100v200h100v100h200v-100z" />
-<glyph unicode="&#xe016;" d="M913 432l300 -299q7 -7 7 -18t-7 -18l-109 -109q-8 -8 -18 -8t-18 8l-300 299q-120 -77 -261 -77q-200 0 -342 142t-142 342t142 342t342 142t342 -142t142 -342q0 -141 -78 -262zM176 694q0 -136 97 -233t234 -97t233.5 97t96.5 233t-96.5 233t-233.5 97t-234 -97 t-97 -233zM300 801v-200h400v200h-400z" />
-<glyph unicode="&#xe017;" d="M700 750v400q0 21 -14.5 35.5t-35.5 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-400q0 -21 14.5 -35.5t35.5 -14.5h100q21 0 35.5 14.5t14.5 35.5zM800 975v166q167 -62 272 -210t105 -331q0 -118 -45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123 t-123 184t-45.5 224.5q0 183 105 331t272 210v-166q-103 -55 -165 -155t-62 -220q0 -177 125 -302t302 -125t302 125t125 302q0 120 -62 220t-165 155z" />
-<glyph unicode="&#xe018;" d="M1200 1h-200v1200h200v-1200zM900 1h-200v800h200v-800zM600 1h-200v500h200v-500zM300 301h-200v-300h200v300z" />
-<glyph unicode="&#xe019;" d="M488 183l38 -151q40 -5 74 -5q27 0 74 5l38 151l6 2q46 13 93 39l5 3l134 -81q56 44 104 105l-80 134l3 5q24 44 39 93l1 6l152 38q5 40 5 74q0 28 -5 73l-152 38l-1 6q-16 51 -39 93l-3 5l80 134q-44 58 -104 105l-134 -81l-5 3q-45 25 -93 39l-6 1l-38 152q-40 5 -74 5 q-27 0 -74 -5l-38 -152l-5 -1q-50 -14 -94 -39l-5 -3l-133 81q-59 -47 -105 -105l80 -134l-3 -5q-25 -47 -38 -93l-2 -6l-151 -38q-6 -48 -6 -73q0 -33 6 -74l151 -38l2 -6q14 -49 38 -93l3 -5l-80 -134q45 -59 105 -105l133 81l5 -3q45 -26 94 -39zM600 815q89 0 152 -63 t63 -151q0 -89 -63 -152t-152 -63t-152 63t-63 152q0 88 63 151t152 63z" />
-<glyph unicode="&#xe020;" d="M900 1100h275q10 0 17.5 -7.5t7.5 -17.5v-50q0 -11 -7 -18t-18 -7h-1050q-11 0 -18 7t-7 18v50q0 10 7.5 17.5t17.5 7.5h275v100q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5v-100zM800 1100v100h-300v-100h300zM200 900h900v-800q0 -41 -29.5 -71 t-70.5 -30h-700q-41 0 -70.5 30t-29.5 71v800zM300 100h100v700h-100v-700zM500 100h100v700h-100v-700zM700 100h100v700h-100v-700zM900 100h100v700h-100v-700z" />
-<glyph unicode="&#xe021;" d="M1301 601h-200v-600h-300v400h-300v-400h-300v600h-200l656 644z" />
-<glyph unicode="&#xe022;" d="M600 700h400v-675q0 -11 -7 -18t-18 -7h-850q-11 0 -18 7t-7 18v1150q0 11 7 18t18 7h475v-500zM1000 800h-300v300z" />
-<glyph unicode="&#xe023;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM600 600h200 v-100h-300v400h100v-300z" />
-<glyph unicode="&#xe024;" d="M721 400h-242l-40 -400h-539l431 1200h209l-21 -300h162l-20 300h208l431 -1200h-538zM712 500l-27 300h-170l-27 -300h224z" />
-<glyph unicode="&#xe025;" d="M1100 400v-400h-1100v400h490l-290 300h200v500h300v-500h200l-290 -300h490zM988 300h-175v-100h175v100z" />
-<glyph unicode="&#xe026;" d="M600 1199q122 0 233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233t47.5 233t127.5 191t191 127.5t233 47.5zM600 1012q-170 0 -291 -121t-121 -291t121 -291t291 -121t291 121 t121 291t-121 291t-291 121zM700 600h150l-250 -300l-250 300h150v300h200v-300z" />
-<glyph unicode="&#xe027;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM850 600h-150 v-300h-200v300h-150l250 300z" />
-<glyph unicode="&#xe028;" d="M0 500l200 700h800q199 -700 200 -700v-475q0 -11 -7 -18t-18 -7h-1150q-11 0 -18 7t-7 18v475zM903 1000h-606l-97 -500h200l50 -200h300l50 200h200z" />
-<glyph unicode="&#xe029;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5zM797 598 l-297 -201v401z" />
-<glyph unicode="&#xe030;" d="M1177 600h-150q0 -177 -125 -302t-302 -125t-302 125t-125 302t125 302t302 125q136 0 246 -81l-146 -146h400v400l-145 -145q-157 122 -355 122q-118 0 -224.5 -45.5t-184 -123t-123 -184t-45.5 -224.5t45.5 -224.5t123 -184t184 -123t224.5 -45.5t224.5 45.5t184 123 t123 184t45.5 224.5z" />
-<glyph unicode="&#xe031;" d="M700 800l147 147q-112 80 -247 80q-177 0 -302 -125t-125 -302h-150q0 118 45.5 224.5t123 184t184 123t224.5 45.5q198 0 355 -122l145 145v-400h-400zM500 400l-147 -147q112 -80 247 -80q177 0 302 125t125 302h150q0 -118 -45.5 -224.5t-123 -184t-184 -123 t-224.5 -45.5q-198 0 -355 122l-145 -145v400h400z" />
-<glyph unicode="&#xe032;" d="M100 1200v-1200h1100v1200h-1100zM1100 100h-900v900h900v-900zM400 800h-100v100h100v-100zM1000 800h-500v100h500v-100zM400 600h-100v100h100v-100zM1000 600h-500v100h500v-100zM400 400h-100v100h100v-100zM1000 400h-500v100h500v-100zM400 200h-100v100h100v-100 zM1000 300h-500v-100h500v100z" />
-<glyph unicode="&#xe034;" d="M200 0h-100v1100h100v-1100zM1100 600v500q-40 -81 -101.5 -115.5t-127.5 -29.5t-138 25t-139.5 40t-125.5 25t-103 -29.5t-65 -115.5v-500q60 60 127.5 84t127.5 17.5t122 -23t119 -30t110 -11t103 42t91 120.5z" />
-<glyph unicode="&#xe035;" d="M1200 275v300q0 116 -49.5 227t-131 192.5t-192.5 131t-227 49.5t-227 -49.5t-192.5 -131t-131 -192.5t-49.5 -227v-300q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 127 70.5 231.5t184.5 161.5t245 57t245 -57t184.5 -161.5t70.5 -231.5v-300q0 -11 7 -18t18 -7h50 q11 0 18 7t7 18zM400 480v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14zM1000 480v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14z" />
-<glyph unicode="&#xe036;" d="M0 800v-400h300l300 -200v800l-300 -200h-300zM971 600l141 -141l-71 -71l-141 141l-141 -141l-71 71l141 141l-141 141l71 71l141 -141l141 141l71 -71z" />
-<glyph unicode="&#xe037;" d="M0 800v-400h300l300 -200v800l-300 -200h-300zM700 857l69 53q111 -135 111 -310q0 -169 -106 -302l-67 54q86 110 86 248q0 146 -93 257z" />
-<glyph unicode="&#xe038;" d="M974 186l6 8q142 178 142 405q0 230 -144 408l-6 8l-83 -64l7 -8q123 -151 123 -344q0 -189 -119 -339l-7 -8zM300 801l300 200v-800l-300 200h-300v400h300zM702 858l69 53q111 -135 111 -310q0 -170 -106 -303l-67 55q86 110 86 248q0 145 -93 257z" />
-<glyph unicode="&#xe039;" d="M100 700h400v100h100v100h-100v300h-500v-600h100v100zM1200 700v500h-600v-200h100v-300h200v-300h300v200h-200v100h200zM100 1100h300v-300h-300v300zM800 800v300h300v-300h-300zM200 900h100v100h-100v-100zM900 1000h100v-100h-100v100zM300 600h-100v-100h-200 v-500h500v500h-200v100zM900 200v-100h-200v100h-100v100h100v200h-200v100h300v-300h200v-100h-100zM400 400v-300h-300v300h300zM300 200h-100v100h100v-100zM1100 300h100v-100h-100v100zM600 100h100v-100h-100v100zM1200 100v-100h-300v100h300z" />
-<glyph unicode="&#xe040;" d="M100 1200h-100v-1000h100v1000zM300 200h-100v1000h100v-1000zM700 200h-200v1000h200v-1000zM900 200h-100v1000h100v-1000zM1200 1200v-1000h-200v1000h200zM400 100v-100h-300v100h300zM500 91h100v-91h-100v91zM700 91h100v-91h-100v91zM1100 91v-91h-200v91h200z " />
-<glyph unicode="&#xe041;" d="M1200 500l-500 -500l-699 700v475q0 10 7.5 17.5t17.5 7.5h474zM320 882q29 29 29 71t-29 71q-30 30 -71.5 30t-71.5 -30q-29 -29 -29 -71t29 -71q30 -30 71.5 -30t71.5 30z" />
-<glyph unicode="&#xe042;" d="M1201 500l-500 -500l-699 700v475q0 11 7 18t18 7h474zM1501 500l-500 -500l-50 50l450 450l-700 700h100zM320 882q30 29 30 71t-30 71q-29 30 -71 30t-71 -30q-30 -29 -30 -71t30 -71q29 -30 71 -30t71 30z" />
-<glyph unicode="&#xe043;" d="M1200 1200v-1000l-100 -100v1000h-750l-100 -100h750v-1000h-900v1025l175 175h925z" />
-<glyph unicode="&#xe045;" d="M947 829l-94 346q-2 11 -10 18t-18 7h-450q-10 0 -18 -7t-10 -18l-94 -346l40 -124h592zM1200 800v-700h-200v200h-800v-200h-200v700h200l100 -200h600l100 200h200zM881 176l38 -152q2 -10 -3.5 -17t-15.5 -7h-600q-10 0 -15.5 7t-3.5 17l38 152q2 10 11.5 17t19.5 7 h500q10 0 19.5 -7t11.5 -17z" />
-<glyph unicode="&#xe047;" d="M1200 0v66q-34 1 -74 43q-18 19 -33 42t-21 37l-6 13l-385 998h-93l-399 -1006q-24 -48 -52 -75q-12 -12 -33 -25t-36 -20l-15 -7v-66h365v66q-41 0 -72 11t-49 38t1 71l92 234h391l82 -222q16 -45 -5.5 -88.5t-74.5 -43.5v-66h417zM416 521l178 457l46 -140l116 -317 h-340z" />
-<glyph unicode="&#xe048;" d="M100 1199h471q120 0 213 -88t93 -228q0 -55 -11.5 -101.5t-28 -74t-33.5 -47.5t-28 -28l-12 -7q8 -3 21.5 -9t48 -31.5t60.5 -58t47.5 -91.5t21.5 -129q0 -84 -59 -156.5t-142 -111t-162 -38.5h-500v89q41 7 70.5 32.5t29.5 65.5v827q0 28 -1 39.5t-5.5 26t-15.5 21 t-29 14t-49 14.5v70zM400 1079v-379h139q76 0 130 61.5t54 138.5q0 82 -84 130.5t-239 48.5zM400 200h161q89 0 153 48.5t64 132.5q0 90 -62.5 154.5t-156.5 64.5h-159v-400z" />
-<glyph unicode="&#xe049;" d="M877 1200l2 -57q-33 -8 -62 -25.5t-46 -37t-29.5 -38t-17.5 -30.5l-5 -12l-128 -825q-10 -52 14 -82t95 -36v-57h-500v57q77 7 134.5 40.5t65.5 80.5l173 849q10 56 -10 74t-91 37q-6 1 -10.5 2.5t-9.5 2.5v57h425z" />
-<glyph unicode="&#xe050;" d="M1150 1200h150v-300h-50q0 29 -8 48.5t-18.5 30t-33.5 15t-39.5 5.5t-50.5 1h-200v-850l100 -50v-100h-400v100l100 50v850h-200q-34 0 -50.5 -1t-40 -5.5t-33.5 -15t-18.5 -30t-8.5 -48.5h-49v300h150h700zM100 1000v-800h75l-125 -167l-125 167h75v800h-75l125 167 l125 -167h-75z" />
-<glyph unicode="&#xe051;" d="M950 1201h150v-300h-50q0 29 -8 48.5t-18 30t-33.5 15t-40 5.5t-50.5 1h-200v-650l100 -50v-100h-400v100l100 50v650h-200q-34 0 -50.5 -1t-39.5 -5.5t-33.5 -15t-18.5 -30t-8 -48.5h-50v300h150h700zM200 101h800v75l167 -125l-167 -125v75h-800v-75l-167 125l167 125 v-75z" />
-<glyph unicode="&#xe052;" d="M700 950v100q0 21 -14.5 35.5t-35.5 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h600q21 0 35.5 15t14.5 35zM1100 650v100q0 21 -14.5 35.5t-35.5 14.5h-1000q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h1000 q21 0 35.5 15t14.5 35zM900 350v100q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35zM1200 50v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35 t35.5 -15h1100q21 0 35.5 15t14.5 35z" />
-<glyph unicode="&#xe053;" d="M1000 950v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35zM1200 650v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h1100 q21 0 35.5 15t14.5 35zM1000 350v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35zM1200 50v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35 t35.5 -15h1100q21 0 35.5 15t14.5 35z" />
-<glyph unicode="&#xe054;" d="M500 950v100q0 21 14.5 35.5t35.5 14.5h600q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-600q-21 0 -35.5 15t-14.5 35zM100 650v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1000q-21 0 -35.5 15 t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100 q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe055;" d="M0 950v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15 t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100 q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe056;" d="M0 950v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM300 950v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM300 650v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800 q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15 h-800q-21 0 -35.5 15t-14.5 35zM0 50v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM300 50v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15 h-800q-21 0 -35.5 15t-14.5 35z" />
-<glyph unicode="&#xe057;" d="M400 1100h-100v-1100h100v1100zM700 950v100q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35zM1100 650v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15 h500q20 0 35 15t15 35zM100 425v75h-201v100h201v75l166 -125zM900 350v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35zM1200 50v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5 v-100q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35z" />
-<glyph unicode="&#xe058;" d="M201 950v100q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35zM801 1100h100v-1100h-100v1100zM601 650v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15 h500q20 0 35 15t15 35zM1101 425v75h200v100h-200v75l-167 -125zM401 350v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35zM701 50v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5 v-100q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35z" />
-<glyph unicode="&#xe059;" d="M900 925v-650q0 -31 -22 -53t-53 -22h-750q-31 0 -53 22t-22 53v650q0 31 22 53t53 22h750q31 0 53 -22t22 -53zM1200 300l-300 300l300 300v-600z" />
-<glyph unicode="&#xe060;" d="M1200 1056v-1012q0 -18 -12.5 -31t-31.5 -13h-1112q-18 0 -31 13t-13 31v1012q0 18 13 31t31 13h1112q19 0 31.5 -13t12.5 -31zM1100 1000h-1000v-737l247 182l298 -131l-74 156l293 318l236 -288v500zM476 750q0 -56 -39 -95t-95 -39t-95 39t-39 95t39 95t95 39t95 -39 t39 -95z" />
-<glyph unicode="&#xe062;" d="M600 1213q123 0 227 -63t164.5 -169.5t60.5 -229.5t-73 -272q-73 -114 -166.5 -237t-150.5 -189l-57 -66q-10 9 -27 26t-66.5 70.5t-96 109t-104 135.5t-100.5 155q-63 139 -63 262q0 124 60.5 231.5t165 172t226.5 64.5zM599 514q107 0 182.5 75.5t75.5 182.5t-75.5 182 t-182.5 75t-182 -75.5t-75 -181.5q0 -107 75.5 -182.5t181.5 -75.5z" />
-<glyph unicode="&#xe063;" d="M600 1199q122 0 233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233t47.5 233t127.5 191t191 127.5t233 47.5zM600 173v854q-176 0 -301.5 -125t-125.5 -302t125.5 -302t301.5 -125z " />
-<glyph unicode="&#xe064;" d="M554 1295q21 -71 57.5 -142.5t76 -130.5t83 -118.5t82 -117t70 -116t50 -125.5t18.5 -136q0 -89 -39 -165.5t-102 -126.5t-140 -79.5t-156 -33.5q-114 6 -211.5 53t-161.5 138.5t-64 210.5q0 94 34 186t88.5 172.5t112 159t115 177t87.5 194.5zM455 296q-7 6 -18 17 t-34 48t-33 77q-15 73 -14 143.5t10 122.5l9 51q-92 -110 -119.5 -185t-12.5 -156q14 -82 59.5 -136t136.5 -80z" />
-<glyph unicode="&#xe065;" d="M1108 902l113 113l-21 85l-92 28l-113 -113zM1100 625v-225q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5v300q0 165 117.5 282.5t282.5 117.5q366 -6 397 -14l-186 -186h-311q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5 t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v125zM436 341l161 50l412 412l-114 113l-405 -405z" />
-<glyph unicode="&#xe066;" d="M1100 453v-53q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5v300q0 165 117.5 282.5t282.5 117.5h261l2 -80q-133 -32 -218 -120h-145q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5z M813 431l360 324l-359 318v-216q-7 0 -19 -1t-48 -8t-69.5 -18.5t-76.5 -37t-76.5 -59t-62 -88t-39.5 -121.5q30 38 81.5 64t103 35.5t99 14t77.5 3.5l29 -1v-209z" />
-<glyph unicode="&#xe067;" d="M1100 569v-169q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5v300q0 165 117.5 282.5t282.5 117.5h300q60 0 127 -23l-178 -177h-349q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v69z M625 348l566 567l-136 137l-430 -431l-147 147l-136 -136z" />
-<glyph unicode="&#xe068;" d="M900 303v198h-200v-200h195l-295 -300l-300 300h200v200h-200v-198l-300 300l300 296v-198h200v200h-200l300 300l295 -300h-195v-200h200v198l300 -296z" />
-<glyph unicode="&#xe069;" d="M900 0l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-1100z" />
-<glyph unicode="&#xe070;" d="M1200 0l-500 488v-488l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-487l500 487v-1100z" />
-<glyph unicode="&#xe071;" d="M1200 0l-500 488v-488l-564 550l564 550v-487l500 487v-1100z" />
-<glyph unicode="&#xe072;" d="M1100 550l-900 550v-1100z" />
-<glyph unicode="&#xe073;" d="M500 150v800q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5t-14.5 -35.5v-800q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5zM900 150v800q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5t-14.5 -35.5v-800q0 -21 14.5 -35.5t35.5 -14.5h200 q21 0 35.5 14.5t14.5 35.5z" />
-<glyph unicode="&#xe074;" d="M1100 150v800q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5v-800q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35z" />
-<glyph unicode="&#xe075;" d="M500 0v488l-500 -488v1100l500 -487v487l564 -550z" />
-<glyph unicode="&#xe076;" d="M1050 1100h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438l-500 -488v488l-500 -488v1100l500 -487v487l500 -487v437q0 21 14.5 35.5t35.5 14.5z" />
-<glyph unicode="&#xe077;" d="M850 1100h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438l-500 -488v1100l500 -487v437q0 21 14.5 35.5t35.5 14.5z" />
-<glyph unicode="&#xe078;" d="M650 1064l-550 -564h1100zM1200 350v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5z" />
-<glyph unicode="&#xe079;" d="M777 7l240 240l-353 353l353 353l-240 240l-592 -594z" />
-<glyph unicode="&#xe080;" d="M513 -46l-241 240l353 353l-353 353l241 240l572 -571l21 -22l-1 -1v-1z" />
-<glyph unicode="&#xe081;" d="M600 1197q162 0 299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5t80 299.5t217.5 217.5t299.5 80zM500 900v-200h-200v-200h200v-200h200v200h200v200h-200v200h-200z" />
-<glyph unicode="&#xe082;" d="M600 1197q162 0 299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5t80 299.5t217.5 217.5t299.5 80zM300 700v-200h600v200h-600z" />
-<glyph unicode="&#xe083;" d="M600 1197q162 0 299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5t80 299.5t217.5 217.5t299.5 80zM247 741l141 -141l-142 -141l213 -213l141 142l141 -142l213 213l-142 141l142 141l-213 212l-141 -141 l-141 142z" />
-<glyph unicode="&#xe084;" d="M600 1197q162 0 299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5t80 299.5t217.5 217.5t299.5 80zM546 623l-102 102l-174 -174l276 -277l411 411l-175 174z" />
-<glyph unicode="&#xe085;" d="M600 1197q162 0 299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5t80 299.5t217.5 217.5t299.5 80zM500 500h200q5 3 14 8t31.5 25.5t39.5 45.5t31 69t14 94q0 51 -17.5 89t-42 58t-58.5 32t-58.5 15t-51.5 3 q-105 0 -172 -56t-67 -183h144q4 0 11.5 -1t11 -1t6.5 3t3 9t1 11t3.5 8.5t3.5 6t5.5 4t6.5 2.5t9 1.5t9 0.5h11.5h12.5q19 0 30 -10t11 -26q0 -22 -4 -28t-27 -22q-5 -1 -12.5 -3t-27 -13.5t-34 -27t-26.5 -46t-11 -68.5zM500 400v-100h200v100h-200z" />
-<glyph unicode="&#xe086;" d="M600 1197q162 0 299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5t80 299.5t217.5 217.5t299.5 80zM500 900v-100h200v100h-200zM400 700v-100h100v-200h-100v-100h400v100h-100v300h-300z" />
-<glyph unicode="&#xe087;" d="M1200 700v-200h-203q-25 -102 -116.5 -186t-180.5 -117v-197h-200v197q-140 27 -208 102.5t-98 200.5h-194v200h194q15 60 36 104.5t55.5 86t88 69t126.5 40.5v200h200v-200q54 -20 113 -60t112.5 -105.5t71.5 -134.5h203zM700 500v-206q149 48 201 206h-201v200h200 q-25 74 -76 127.5t-124 76.5v-204h-200v203q-75 -24 -130 -77.5t-79 -125.5h209v-200h-210q24 -73 79.5 -127.5t130.5 -78.5v206h200z" />
-<glyph unicode="&#xe088;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM844 735 l-135 -135l135 -135l-109 -109l-135 135l-135 -135l-109 109l135 135l-135 135l109 109l135 -135l135 135z" />
-<glyph unicode="&#xe089;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM896 654 l-346 -345l-228 228l141 141l87 -87l204 205z" />
-<glyph unicode="&#xe090;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM248 385l568 567q-100 62 -216 62q-171 0 -292.5 -121.5t-121.5 -292.5q0 -115 62 -215zM955 809l-564 -564q97 -59 209 -59q171 0 292.5 121.5 t121.5 292.5q0 112 -59 209z" />
-<glyph unicode="&#xe091;" d="M1200 400h-600v-301l-600 448l600 453v-300h600v-300z" />
-<glyph unicode="&#xe092;" d="M600 400h-600v300h600v300l600 -453l-600 -448v301z" />
-<glyph unicode="&#xe093;" d="M1098 600h-298v-600h-300v600h-296l450 600z" />
-<glyph unicode="&#xe094;" d="M998 600l-449 -600l-445 600h296v600h300v-600h298z" />
-<glyph unicode="&#xe095;" d="M600 199v301q-95 -2 -183 -20t-170 -52t-147 -92.5t-100 -135.5q6 132 41 238.5t103.5 193t184 138t271.5 59.5v271l600 -453z" />
-<glyph unicode="&#xe096;" d="M1200 1200h-400l129 -129l-294 -294l142 -142l294 294l129 -129v400zM565 423l-294 -294l129 -129h-400v400l129 -129l294 294z" />
-<glyph unicode="&#xe097;" d="M871 730l129 -130h-400v400l129 -129l295 295l142 -141zM200 600h400v-400l-129 130l-295 -295l-142 141l295 295z" />
-<glyph unicode="&#xe101;" d="M600 1177q118 0 224.5 -45.5t184 -123t123 -184t45.5 -224.5t-45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5t45.5 224.5t123 184t184 123t224.5 45.5zM686 549l58 302q4 20 -8 34.5t-33 14.5h-207q-20 0 -32 -14.5t-8 -34.5 l58 -302q4 -20 21.5 -34.5t37.5 -14.5h54q20 0 37.5 14.5t21.5 34.5zM700 400h-200v-100h200v100z" />
-<glyph unicode="&#xe102;" d="M1200 900h-111v6t-1 15t-3 18l-34 172q-11 39 -41.5 63t-69.5 24q-32 0 -61 -17l-239 -144q-22 -13 -40 -35q-19 24 -40 36l-238 144q-33 18 -62 18q-39 0 -69.5 -23t-40.5 -61l-35 -177q-2 -8 -3 -18t-1 -15v-6h-111v-100h100v-200h400v300h200v-300h400v200h100v100z M731 900l202 197q5 -12 12 -32.5t23 -64t25 -72t7 -28.5h-269zM481 900h-281q-3 0 14 48t35 96l18 47zM100 0h400v400h-400v-400zM700 400h400v-400h-400v400z" />
-<glyph unicode="&#xe103;" d="M0 121l216 193q-9 53 -13 83t-5.5 94t9 113t38.5 114t74 124q47 60 99.5 102.5t103 68t127.5 48t145.5 37.5t184.5 43.5t220 58.5q0 -189 -22 -343t-59 -258t-89 -181.5t-108.5 -120t-122 -68t-125.5 -30t-121.5 -1.5t-107.5 12.5t-87.5 17t-56.5 7.5l-99 -55l-201 -202 v143zM692 611q70 38 118.5 69.5t102 79t99 111.5t86.5 148q22 50 24 60t-6 19q-7 5 -17 5t-26.5 -14.5t-33.5 -39.5q-35 -51 -113.5 -108.5t-139.5 -89.5l-61 -32q-369 -197 -458 -401q-48 -111 -28.5 -117.5t86.5 76.5q55 66 367 234z" />
-<glyph unicode="&#xe105;" d="M1261 600l-26 -40q-6 -10 -20 -30t-49 -63.5t-74.5 -85.5t-97 -90t-116.5 -83.5t-132.5 -59t-145.5 -23.5t-145.5 23.5t-132.5 59t-116.5 83.5t-97 90t-74.5 85.5t-49 63.5t-20 30l-26 40l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5 t145.5 -23.5t132.5 -59t116.5 -83.5t97 -90t74.5 -85.5t49 -63.5t20 -30zM600 240q64 0 123.5 20t100.5 45.5t85.5 71.5t66.5 75.5t58 81.5t47 66q-1 1 -28.5 37.5t-42 55t-43.5 53t-57.5 63.5t-58.5 54q49 -74 49 -163q0 -124 -88 -212t-212 -88t-212 88t-88 212 q0 85 46 158q-102 -87 -226 -258q7 -10 40.5 -58t56 -78.5t68 -77.5t87.5 -75t103 -49.5t125 -21.5zM484 762l-107 -106q49 -124 154 -191l105 105q-37 24 -75 72t-57 84z" />
-<glyph unicode="&#xe106;" d="M906 1200l-314 -1200h-148l37 143q-82 21 -165 71.5t-140 102t-109.5 112t-72 88.5t-29.5 43l-26 40l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5q61 0 121 -17l37 142h148zM1261 600l-26 -40q-7 -12 -25.5 -38t-63.5 -79.5t-95.5 -102.5 t-124 -100t-146.5 -79l38 145q22 15 44.5 34t46 44t40.5 44t41 50.5t33.5 43.5t33 44t24.5 34q-97 127 -140 175l39 146q67 -54 131.5 -125.5t87.5 -103.5t36 -52zM513 264l37 141q-107 18 -178.5 101.5t-71.5 193.5q0 85 46 158q-102 -87 -226 -258q210 -282 393 -336z M484 762l-107 -106q49 -124 154 -191l47 47l23 87q-30 28 -59 69t-44 68z" />
-<glyph unicode="&#xe107;" d="M-47 0h1294q37 0 50.5 35.5t-7.5 67.5l-642 1056q-20 33 -48 36t-48 -29l-642 -1066q-21 -32 -7.5 -66t50.5 -34zM700 200v100h-200v-100h-345l445 723l445 -723h-345zM700 700h-200v-100l100 -300l100 300v100z" />
-<glyph unicode="&#xe108;" d="M800 711l363 -325q15 -14 26 -38.5t11 -44.5v-41q0 -20 -12 -26.5t-29 5.5l-359 249v-263q100 -91 100 -113v-64q0 -21 -13 -29t-32 1l-94 78h-222l-94 -78q-19 -9 -32 -1t-13 29v64q0 22 100 113v263l-359 -249q-17 -12 -29 -5.5t-12 26.5v41q0 20 11 44.5t26 38.5 l363 325v339q0 62 44 106t106 44t106 -44t44 -106v-339z" />
-<glyph unicode="&#xe110;" d="M941 800l-600 -600h-341v200h259l600 600h241v198l300 -295l-300 -300v197h-159zM381 678l141 142l-181 180h-341v-200h259zM1100 598l300 -295l-300 -300v197h-241l-181 181l141 142l122 -123h159v198z" />
-<glyph unicode="&#xe111;" d="M100 1100h1000q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-596l-304 -300v300h-100q-41 0 -70.5 29.5t-29.5 70.5v600q0 41 29.5 70.5t70.5 29.5z" />
-<glyph unicode="&#xe112;" d="M400 900h-300v300h300v-300zM1100 900h-300v300h300v-300zM1100 800v-200q0 -42 -3 -83t-15 -104t-31.5 -116t-58 -109.5t-89 -96.5t-129 -65.5t-174.5 -25.5t-174.5 25.5t-129 65.5t-89 96.5t-58 109.5t-31.5 116t-15 104t-3 83v200h300v-250q0 -113 6 -145 q17 -92 102 -117q39 -11 92 -11q37 0 66.5 5.5t50 15.5t36 24t24 31.5t14 37.5t7 42t2.5 45t0 47v25v250h300z" />
-<glyph unicode="&#xe113;" d="M902 184l226 227l-578 579l-580 -579l227 -227l352 353z" />
-<glyph unicode="&#xe114;" d="M650 218l578 579l-226 227l-353 -353l-352 353l-227 -227z" />
-<glyph unicode="&#xe115;" d="M1198 400v600h-796l215 -200h381v-400h-198l299 -283l299 283h-200zM-198 700l299 283l300 -283h-203v-400h385l215 -200h-800v600h-196z" />
-<glyph unicode="&#xe116;" d="M1050 1200h94q20 0 35 -14.5t15 -35.5t-15 -35.5t-35 -14.5h-54l-201 -961q-2 -4 -6 -10.5t-19 -17.5t-33 -11h-31v-50q0 -20 -14.5 -35t-35.5 -15t-35.5 15t-14.5 35v50h-300v-50q0 -20 -14.5 -35t-35.5 -15t-35.5 15t-14.5 35v50h-50q-21 0 -35.5 15t-14.5 35 q0 21 14.5 35.5t35.5 14.5h535l48 200h-633q-32 0 -54.5 21t-27.5 43l-100 475q-5 24 10 42q14 19 39 19h896l38 162q5 17 18.5 27.5t30.5 10.5z" />
-<glyph unicode="&#xe117;" d="M1200 1000v-100h-1200v100h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500zM0 800h1200v-800h-1200v800z" />
-<glyph unicode="&#xe118;" d="M201 800l-200 -400v600h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-200h-1000zM1501 700l-300 -700h-1200l300 700h1200z" />
-<glyph unicode="&#xe119;" d="M302 300h198v600h-198l298 300l298 -300h-198v-600h198l-298 -300z" />
-<glyph unicode="&#xe120;" d="M900 303v197h-600v-197l-300 297l300 298v-198h600v198l300 -298z" />
-<glyph unicode="&#xe121;" d="M31 400l172 739q5 22 23 41.5t38 19.5h672q19 0 37.5 -22.5t23.5 -45.5l172 -732h-1138zM100 300h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM900 200h-100v-100h100v100z M1100 200h-100v-100h100v100z" />
-<glyph unicode="&#xe122;" d="M1100 200v850q0 21 14.5 35.5t35.5 14.5q20 0 35 -14.5t15 -35.5v-850q0 -20 -15 -35t-35 -15q-21 0 -35.5 15t-14.5 35zM325 800l675 250v-850l-675 200h-38l47 -276q2 -12 -3 -17.5t-11 -6t-21 -0.5h-8h-83q-20 0 -34.5 14t-18.5 35q-56 337 -56 351v250v5 q0 13 0.5 18.5t2.5 13t8 10.5t15 3h200zM-101 600v50q0 24 25 49t50 38l25 13v-250l-11 5.5t-24 14t-30 21.5t-24 27.5t-11 31.5z" />
-<glyph unicode="&#xe124;" d="M445 1180l-45 -233l-224 78l78 -225l-233 -44l179 -156l-179 -155l233 -45l-78 -224l224 78l45 -233l155 179l155 -179l45 233l224 -78l-78 224l234 45l-180 155l180 156l-234 44l78 225l-224 -78l-45 233l-155 -180z" />
-<glyph unicode="&#xe125;" d="M700 1200h-50q-27 0 -51 -20t-38 -48l-96 -198l-145 -196q-20 -26 -20 -63v-400q0 -75 100 -75h61q123 -100 139 -100h250q46 0 83 57l238 344q29 31 29 74v100q0 44 -30.5 84.5t-69.5 40.5h-328q28 118 28 125v150q0 44 -30.5 84.5t-69.5 40.5zM700 925l-50 -225h450 v-125l-250 -375h-214l-136 100h-100v375l150 212l100 213h50v-175zM0 800v-600h200v600h-200z" />
-<glyph unicode="&#xe126;" d="M700 0h-50q-27 0 -51 20t-38 48l-96 198l-145 196q-20 26 -20 63v400q0 75 100 75h61q123 100 139 100h250q46 0 83 -57l238 -344q29 -31 29 -74v-100q0 -44 -30.5 -84.5t-69.5 -40.5h-328q28 -118 28 -125v-150q0 -44 -30.5 -84.5t-69.5 -40.5zM200 400h-200v600h200 v-600zM700 275l-50 225h450v125l-250 375h-214l-136 -100h-100v-375l150 -212l100 -213h50v175z" />
-<glyph unicode="&#xe127;" d="M364 873l362 230q14 6 25 6q17 0 29 -12l109 -112q14 -14 14 -34q0 -18 -11 -32l-85 -121h302q85 0 138.5 -38t53.5 -110t-54.5 -111t-138.5 -39h-107l-130 -339q-7 -22 -20.5 -41.5t-28.5 -19.5h-341q-7 0 -90 81t-83 94v525q0 17 14 35.5t28 28.5zM408 792v-503 l100 -89h293l131 339q6 21 19.5 41t28.5 20h203q16 0 25 15t9 36q0 20 -9 34.5t-25 14.5h-457h-6.5h-7.5t-6.5 0.5t-6 1t-5 1.5t-5.5 2.5t-4 4t-4 5.5q-5 12 -5 20q0 14 10 27l147 183l-86 83zM208 200h-200v600h200v-600z" />
-<glyph unicode="&#xe128;" d="M475 1104l365 -230q7 -4 16.5 -10.5t26 -26t16.5 -36.5v-526q0 -13 -85.5 -93.5t-93.5 -80.5h-342q-15 0 -28.5 20t-19.5 41l-131 339h-106q-84 0 -139 39t-55 111t54 110t139 37h302l-85 121q-11 16 -11 32q0 21 14 34l109 113q13 12 29 12q11 0 25 -6zM370 946 l145 -184q10 -11 10 -26q0 -11 -5 -20q-1 -3 -3.5 -5.5l-4 -4t-5 -2.5t-5.5 -1.5t-6.5 -1t-6.5 -0.5h-7.5h-6.5h-476v-100h222q15 0 28.5 -20.5t19.5 -40.5l131 -339h293l106 89v502l-342 237zM1199 201h-200v600h200v-600z" />
-<glyph unicode="&#xe129;" d="M1100 473v342q0 15 -20 28.5t-41 19.5l-339 131v106q0 84 -39 139t-111 55t-110 -53.5t-38 -138.5v-302l-121 84q-15 12 -33.5 11.5t-32.5 -13.5l-112 -110q-22 -22 -6 -53l230 -363q4 -6 10.5 -15.5t26 -25t36.5 -15.5h525q13 0 94 83t81 90zM911 400h-503l-236 339 l83 86l183 -146q22 -18 47 -5q3 1 5.5 3.5l4 4t2.5 5t1.5 5.5t1 6.5t0.5 6v7.5v7v456q0 22 25 31t50 -0.5t25 -30.5v-202q0 -16 20 -29.5t41 -19.5l339 -130v-294zM1000 200v-200h-600v200h600z" />
-<glyph unicode="&#xe130;" d="M305 1104v200h600v-200h-600zM605 310l339 131q20 6 40.5 19.5t20.5 28.5v342q0 7 -81 90t-94 83h-525q-17 0 -35.5 -14t-28.5 -28l-10 -15l-230 -362q-15 -31 7 -53l112 -110q13 -13 32 -13.5t34 10.5l121 85l-1 -302q0 -84 38.5 -138t110.5 -54t111 55t39 139v106z M905 804v-294l-340 -130q-20 -6 -40 -20t-20 -29v-202q0 -22 -25 -31t-50 0t-25 31v456v14.5t-1.5 11.5t-5 12t-9.5 7q-24 13 -46 -5l-184 -146l-83 86l237 339h503z" />
-<glyph unicode="&#xe131;" d="M603 1195q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5zM598 701h-298v-201h300l-2 -194l402 294l-402 298v-197z" />
-<glyph unicode="&#xe132;" d="M597 1195q122 0 232.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-218 -217.5t-300 -80t-299.5 80t-217.5 217.5t-80 299.5q0 122 47.5 232.5t127.5 190.5t190.5 127.5t231.5 47.5zM200 600l400 -294v194h302v201h-300v197z" />
-<glyph unicode="&#xe133;" d="M603 1195q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5zM300 600h200v-300h200v300h200l-300 400z" />
-<glyph unicode="&#xe134;" d="M603 1195q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5zM500 900v-300h-200l300 -400l300 400h-200v300h-200z" />
-<glyph unicode="&#xe135;" d="M603 1195q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5zM627 1101q-15 -12 -36.5 -21t-34.5 -12t-44 -8t-39 -6 q-15 -3 -45.5 0.5t-45.5 -2.5q-21 -7 -52 -26.5t-34 -34.5q-3 -11 6.5 -22.5t8.5 -18.5q-3 -34 -27.5 -90.5t-29.5 -79.5q-8 -33 5.5 -92.5t7.5 -87.5q0 -9 17 -44t16 -60q12 0 23 -5.5t23 -15t20 -13.5q24 -12 108 -42q22 -8 53 -31.5t59.5 -38.5t57.5 -11q8 -18 -15 -55 t-20 -57q42 -71 87 -80q0 -6 -3 -15.5t-3.5 -14.5t4.5 -17q102 -2 221 112q30 29 47 47t34.5 49t20.5 62q-14 9 -37 9.5t-36 7.5q-14 7 -49 15t-52 19q-9 0 -39.5 -0.5t-46.5 -1.5t-39 -6.5t-39 -16.5q-50 -35 -66 -12q-4 2 -3.5 25.5t0.5 25.5q-6 13 -26.5 17t-24.5 7 q2 22 -2 41t-16.5 28t-38.5 -20q-23 -25 -42 4q-19 28 -8 58q6 16 22 22q6 -1 26 -1.5t33.5 -4t19.5 -13.5q12 -19 32 -37.5t34 -27.5l14 -8q0 3 9.5 39.5t5.5 57.5q-4 23 14.5 44.5t22.5 31.5q5 14 10 35t8.5 31t15.5 22.5t34 21.5q-6 18 10 37q8 0 23.5 -1.5t24.5 -1.5 t20.5 4.5t20.5 15.5q-10 23 -30.5 42.5t-38 30t-49 26.5t-43.5 23q11 41 1 44q31 -13 58.5 -14.5t39.5 3.5l11 4q6 36 -17 53.5t-64 28.5t-56 23q-19 -3 -37 0zM613 994q0 -18 8 -42.5t16.5 -44t9.5 -23.5q-9 2 -31 5t-36 5t-32 8t-30 14q3 12 16 30t16 25q10 -10 18.5 -10 t14 6t14.5 14.5t16 12.5z" />
-<glyph unicode="&#xe137;" horiz-adv-x="1220" d="M100 1196h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM1100 1096h-200v-100h200v100zM100 796h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM1100 696h-500v-100h500v100zM100 396h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5v100q0 41 29.5 70.5t70.5 29.5zM1100 296h-300v-100h300v100z " />
-<glyph unicode="&#xe138;" d="M1100 1200v-100h-1000v100h1000zM150 1000h900l-350 -500v-300l-200 -200v500z" />
-<glyph unicode="&#xe140;" d="M329 729l142 142l-200 200l129 129h-400v-400l129 129zM1200 1200v-400l-129 129l-200 -200l-142 142l200 200l-129 129h400zM271 129l129 -129h-400v400l129 -129l200 200l142 -142zM1071 271l129 129v-400h-400l129 129l-200 200l142 142z" />
-<glyph unicode="&#xe141;" d="M596 1192q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM596 1010q-171 0 -292.5 -121.5t-121.5 -292.5q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5zM455 905 q22 0 38 -16t16 -39t-16 -39t-38 -16q-23 0 -39 16.5t-16 38.5t16 38.5t39 16.5zM708 821l1 1q-9 14 -9 28q0 22 16 38.5t39 16.5q22 0 38 -16t16 -39t-16 -39t-38 -16q-14 0 -29 10l-55 -145q17 -22 17 -51q0 -36 -25.5 -61.5t-61.5 -25.5t-61.5 25.5t-25.5 61.5 q0 32 20.5 56.5t51.5 29.5zM855 709q23 0 38.5 -15.5t15.5 -38.5t-16 -39t-38 -16q-23 0 -39 16t-16 39q0 22 16 38t39 16zM345 709q23 0 39 -16t16 -38q0 -23 -16 -39t-39 -16q-22 0 -38 16t-16 39t15.5 38.5t38.5 15.5z" />
-<glyph unicode="&#xe143;" d="M649 54l-16 22q-90 125 -293 323q-71 70 -104.5 105.5t-77 89.5t-61 99t-17.5 91q0 131 98.5 229.5t230.5 98.5q143 0 241 -129q103 129 246 129q129 0 226 -98.5t97 -229.5q0 -46 -17.5 -91t-61 -99t-77 -89.5t-104.5 -105.5q-203 -198 -293 -323zM844 524l12 12 q64 62 97.5 97t64.5 79t31 72q0 71 -48 119t-105 48q-74 0 -132 -82l-118 -171l-114 174q-51 79 -123 79q-60 0 -109.5 -49t-49.5 -118q0 -27 30.5 -70t61.5 -75.5t95 -94.5l22 -22q93 -90 190 -201q82 92 195 203z" />
-<glyph unicode="&#xe144;" d="M476 406l19 -17l105 105l-212 212l389 389l247 -247l-95 -96l18 -18q46 -46 77 -99l29 29q35 35 62.5 88t27.5 96q0 93 -66 159l-141 141q-66 66 -159 66q-95 0 -159 -66l-283 -283q-66 -64 -66 -159q0 -93 66 -159zM123 193l141 -141q66 -66 159 -66q95 0 159 66 l283 283q66 66 66 159t-66 159l-141 141q-12 12 -19 17l-105 -105l212 -212l-389 -389l-247 248l95 95l-18 18q-46 45 -75 101l-55 -55q-66 -66 -66 -159q0 -94 66 -160z" />
-<glyph unicode="&#xe145;" d="M200 100v953q0 21 30 46t81 48t129 38t163 15t162 -15t127 -38t79 -48t29 -46v-953q0 -41 -29.5 -70.5t-70.5 -29.5h-600q-41 0 -70.5 29.5t-29.5 70.5zM900 1000h-600v-700h600v700zM600 46q43 0 73.5 30.5t30.5 73.5t-30.5 73.5t-73.5 30.5t-73.5 -30.5t-30.5 -73.5 t30.5 -73.5t73.5 -30.5z" />
-<glyph unicode="&#xe148;" d="M700 1029v-307l64 -14q34 -7 64 -16.5t70 -31.5t67.5 -52t47.5 -80.5t20 -112.5q0 -139 -89 -224t-244 -96v-77h-100v78q-152 17 -237 104q-40 40 -52.5 93.5t-15.5 139.5h139q5 -77 48.5 -126.5t117.5 -64.5v335l-27 7q-46 14 -79 26.5t-72 36t-62.5 52t-40 72.5 t-16.5 99q0 92 44 159.5t109 101t144 40.5v78h100v-79q38 -4 72.5 -13.5t75.5 -31.5t71 -53.5t51.5 -84t24.5 -118.5h-159q-8 72 -35 109.5t-101 50.5zM600 755v274q-61 -8 -97.5 -37.5t-36.5 -102.5q0 -29 8 -51t16.5 -34t29.5 -22.5t31 -13.5t38 -10q7 -2 11 -3zM700 548 v-311q170 18 170 151q0 64 -44 99.5t-126 60.5z" />
-<glyph unicode="&#xe149;" d="M866 300l50 -147q-41 -25 -80.5 -36.5t-59 -13t-61.5 -1.5q-23 0 -128 33t-155 29q-39 -4 -82 -17t-66 -25l-24 -11l-55 145l16.5 11t15.5 10t13.5 9.5t14.5 12t14.5 14t17.5 18.5q48 55 54 126.5t-30 142.5h-221v100h166q-24 49 -44 104q-10 26 -14.5 55.5t-3 72.5 t25 90t68.5 87q97 88 263 88q129 0 230 -89t101 -208h-153q0 52 -34 89.5t-74 51.5t-76 14q-37 0 -79 -14.5t-62 -35.5q-41 -44 -41 -101q0 -11 2.5 -24.5t5.5 -24t9.5 -26.5t10.5 -25t14 -27.5t14 -25.5t15.5 -27t13.5 -24h242v-100h-197q8 -50 -2.5 -115t-31.5 -94 q-41 -59 -99 -113q35 11 84 18t70 7q32 1 102 -16t104 -17q76 0 136 30z" />
-<glyph unicode="&#xe150;" d="M300 0l298 300h-198v900h-200v-900h-198zM900 1200l298 -300h-198v-900h-200v900h-198z" />
-<glyph unicode="&#xe151;" d="M400 300h198l-298 -300l-298 300h198v900h200v-900zM1000 1200v-500h-100v100h-100v-100h-100v500h300zM901 1100h-100v-200h100v200zM700 500h300v-200h-99v-100h-100v100h99v100h-200v100zM800 100h200v-100h-300v200h100v-100z" />
-<glyph unicode="&#xe152;" d="M400 300h198l-298 -300l-298 300h198v900h200v-900zM1000 1200v-200h-99v-100h-100v100h99v100h-200v100h300zM800 800h200v-100h-300v200h100v-100zM700 500h300v-500h-100v100h-100v-100h-100v500zM801 200h100v200h-100v-200z" />
-<glyph unicode="&#xe153;" d="M300 0l298 300h-198v900h-200v-900h-198zM900 1100h-100v100h200v-500h-100v400zM1100 500v-500h-100v100h-200v400h300zM1001 400h-100v-200h100v200z" />
-<glyph unicode="&#xe154;" d="M300 0l298 300h-198v900h-200v-900h-198zM1100 1200v-500h-100v100h-200v400h300zM1001 1100h-100v-200h100v200zM900 400h-100v100h200v-500h-100v400z" />
-<glyph unicode="&#xe155;" d="M300 0l298 300h-198v900h-200v-900h-198zM900 1000h-200v200h200v-200zM1000 700h-300v200h300v-200zM1100 400h-400v200h400v-200zM1200 100h-500v200h500v-200z" />
-<glyph unicode="&#xe156;" d="M300 0l298 300h-198v900h-200v-900h-198zM1200 1000h-500v200h500v-200zM1100 700h-400v200h400v-200zM1000 400h-300v200h300v-200zM900 100h-200v200h200v-200z" />
-<glyph unicode="&#xe157;" d="M400 1100h300q162 0 281 -118.5t119 -281.5v-300q0 -165 -118.5 -282.5t-281.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5v300q0 165 117.5 282.5t282.5 117.5zM800 900h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5 t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5z" />
-<glyph unicode="&#xe158;" d="M700 0h-300q-163 0 -281.5 117.5t-118.5 282.5v300q0 163 119 281.5t281 118.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5zM800 900h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5 t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5zM400 800v-500l333 250z" />
-<glyph unicode="&#xe159;" d="M0 400v300q0 163 117.5 281.5t282.5 118.5h300q163 0 281.5 -119t118.5 -281v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM900 300v500q0 41 -29.5 70.5t-70.5 29.5h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5 t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5zM800 700h-500l250 -333z" />
-<glyph unicode="&#xe160;" d="M1100 700v-300q0 -162 -118.5 -281t-281.5 -119h-300q-165 0 -282.5 118.5t-117.5 281.5v300q0 165 117.5 282.5t282.5 117.5h300q165 0 282.5 -117.5t117.5 -282.5zM900 300v500q0 41 -29.5 70.5t-70.5 29.5h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5 t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5zM550 733l-250 -333h500z" />
-<glyph unicode="&#xe161;" d="M500 1100h400q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-400v200h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-500v200zM700 550l-400 -350v200h-300v300h300v200z" />
-<glyph unicode="&#xe162;" d="M403 2l9 -1q13 0 26 16l538 630q15 19 6 36q-8 18 -32 16h-300q1 4 78 219.5t79 227.5q2 17 -6 27l-8 8h-9q-16 0 -25 -15q-4 -5 -98.5 -111.5t-228 -257t-209.5 -238.5q-17 -19 -7 -40q10 -19 32 -19h302q-155 -438 -160 -458q-5 -21 4 -32z" />
-<glyph unicode="&#xe163;" d="M800 200h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h500v185q-14 4 -114 7.5t-193 5.5l-93 2q-165 0 -282.5 -117.5t-117.5 -282.5v-300q0 -165 117.5 -282.5t282.5 -117.5h300q47 0 100 15v185zM900 200v200h-300v300h300v200l400 -350z" />
-<glyph unicode="&#xe164;" d="M1200 700l-149 149l-342 -353l-213 213l353 342l-149 149h500v-500zM1022 571l-122 -123v-148q0 -41 -29.5 -70.5t-70.5 -29.5h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h156l118 122l-74 78h-100q-165 0 -282.5 -117.5t-117.5 -282.5v-300 q0 -165 117.5 -282.5t282.5 -117.5h300q163 0 281.5 117.5t118.5 282.5v98z" />
-<glyph unicode="&#xe165;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM600 794 q80 0 137 -57t57 -137t-57 -137t-137 -57t-137 57t-57 137t57 137t137 57z" />
-<glyph unicode="&#xe166;" d="M700 800v400h-300v-400h-300l445 -500l450 500h-295zM25 300h1048q11 0 19 -7.5t8 -17.5v-275h-1100v275q0 11 7 18t18 7zM1000 200h-100v-50h100v50z" />
-<glyph unicode="&#xe167;" d="M400 700v-300h300v300h295l-445 500l-450 -500h300zM25 300h1048q11 0 19 -7.5t8 -17.5v-275h-1100v275q0 11 7 18t18 7zM1000 200h-100v-50h100v50z" />
-<glyph unicode="&#xe168;" d="M405 400l596 596l-154 155l-442 -442l-150 151l-155 -155zM25 300h1048q11 0 19 -7.5t8 -17.5v-275h-1100v275q0 11 7 18t18 7zM1000 200h-100v-50h100v50z" />
-<glyph unicode="&#xe169;" d="M409 1103l-97 97l-212 -212l97 -98zM650 861l-149 149l-212 -212l149 -149l-238 -248h700v699zM25 300h1048q11 0 19 -7.5t8 -17.5v-275h-1100v275q0 11 7 18t18 7zM1000 200h-100v-50h100v50z" />
-<glyph unicode="&#xe170;" d="M539 950l-149 -149l212 -212l149 148l248 -237v700h-699zM297 709l-97 -97l212 -212l98 97zM25 300h1048q11 0 19 -7.5t8 -17.5v-275h-1100v275q0 11 7 18t18 7zM1000 200h-100v-50h100v50z" />
-<glyph unicode="&#xe171;" d="M1200 1199v-1079l-475 272l-310 -393v416h-392zM1166 1148l-672 -712v-226z" />
-<glyph unicode="&#xe172;" d="M1100 1000v-850q0 -21 -15 -35.5t-35 -14.5h-150v400h-700v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100zM700 1200h-100v-200h100v200z" />
-<glyph unicode="&#xe173;" d="M578 500h-378v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-218l-276 -275l-120 120zM700 1200h-100v-200h100v200zM1300 538l-475 -476l-244 244l123 123l120 -120l353 352z" />
-<glyph unicode="&#xe174;" d="M529 500h-329v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-269l-103 -103l-170 170zM700 1200h-100v-200h100v200zM1167 6l-170 170l-170 -170l-127 127l170 170l-170 170l127 127l170 -170l170 170l127 -128 l-170 -169l170 -170z" />
-<glyph unicode="&#xe175;" d="M700 500h-500v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-300h-400v-200zM700 1000h-100v200h100v-200zM1000 600h-200v-300h-200l300 -300l300 300h-200v300z" />
-<glyph unicode="&#xe176;" d="M602 500h-402v-400h-150q-21 0 -35.5 14.5t-14.5 35.5v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-402l-200 200zM700 1000h-100v200h100v-200zM1000 300h200l-300 300l-300 -300h200v-300h200v300z" />
-<glyph unicode="&#xe177;" d="M1200 900v150q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-150h1200zM0 800v-550q0 -21 14.5 -35.5t35.5 -14.5h1100q21 0 35.5 14.5t14.5 35.5v550h-1200zM100 500h400v-200h-400v200z" />
-<glyph unicode="&#xe178;" d="M500 1000h400v198l300 -298l-300 -298v198h-400v200zM100 800v200h100v-200h-100zM400 800h-100v200h100v-200zM700 300h-400v-198l-300 298l300 298v-198h400v-200zM800 500h100v-200h-100v200zM1000 500v-200h100v200h-100z" />
-<glyph unicode="&#xe179;" d="M1200 50v1106q0 31 -18 40.5t-44 -7.5l-276 -117q-25 -16 -43.5 -50.5t-18.5 -65.5v-359q0 -29 10.5 -55.5t25 -43t29 -28.5t25.5 -18l10 -5v-397q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5zM550 1200l50 -100v-400l-100 -203v-447q0 -21 -14.5 -35.5 t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v447l-100 203v400l50 100l50 -100v-300h100v300l50 100l50 -100v-300h100v300z" />
-<glyph unicode="&#xe180;" d="M1100 106v888q0 22 25 34.5t50 13.5l25 2v56h-400v-56q75 0 87.5 -6t12.5 -44v-394h-500v394q0 38 12.5 44t87.5 6v56h-400v-56q4 0 11 -0.5t24 -3t30 -7t24 -15t11 -24.5v-888q0 -22 -25 -34.5t-50 -13.5l-25 -2v-56h400v56q-75 0 -87.5 6t-12.5 44v394h500v-394 q0 -38 -12.5 -44t-87.5 -6v-56h400v56q-4 0 -11 0.5t-24 3t-30 7t-24 15t-11 24.5z" />
-<glyph unicode="&#xe181;" d="M675 1000l-100 100h-375l-100 -100h400l200 -200v-98l295 98h105v200h-425zM500 300v500q0 41 -29.5 70.5t-70.5 29.5h-300q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h300q41 0 70.5 29.5t29.5 70.5zM100 800h300v-200h-300v200zM700 565l400 133 v-163l-400 -133v163zM100 500h300v-200h-300v200zM805 300l295 98v-298h-425l-100 -100h-375l-100 100h400l200 200h105z" />
-<glyph unicode="&#xe182;" d="M179 1169l-162 -162q-1 -11 -0.5 -32.5t16 -90t46.5 -140t104 -177.5t175 -208q103 -103 207.5 -176t180 -103.5t137 -47t92.5 -16.5l31 1l163 162q16 17 13 40.5t-22 37.5l-192 136q-19 14 -45 12t-42 -19l-119 -118q-143 103 -267 227q-126 126 -227 268l118 118 q17 17 20 41.5t-11 44.5l-139 194q-14 19 -36.5 22t-40.5 -14z" />
-<glyph unicode="&#xe183;" d="M1200 712v200q-6 8 -19 20.5t-63 45t-112 57t-171 45t-235 20.5q-92 0 -175 -10.5t-141.5 -27t-108.5 -36.5t-81.5 -40t-53.5 -36.5t-31 -27.5l-9 -10v-200q0 -21 14.5 -33.5t34.5 -8.5l202 33q20 4 34.5 21t14.5 38v146q141 24 300 24t300 -24v-146q0 -21 14.5 -38 t34.5 -21l202 -33q20 -4 34.5 8.5t14.5 33.5zM800 650l365 -303q14 -14 24.5 -39.5t10.5 -45.5v-212q0 -21 -15 -35.5t-35 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5v212q0 20 10.5 45.5t24.5 39.5l365 303v50q0 4 1 10.5t12 22.5t30 28.5t60 23t97 10.5t97 -10t60 -23.5 t30 -27.5t12 -24l1 -10v-50z" />
-<glyph unicode="&#xe184;" d="M175 200h950l-125 150v250l100 100v400h-100v-200h-100v200h-200v-200h-100v200h-200v-200h-100v200h-100v-400l100 -100v-250zM1200 100v-100h-1100v100h1100z" />
-<glyph unicode="&#xe185;" d="M600 1100h100q41 0 70.5 -29.5t29.5 -70.5v-1000h-300v1000q0 41 29.5 70.5t70.5 29.5zM1000 800h100q41 0 70.5 -29.5t29.5 -70.5v-700h-300v700q0 41 29.5 70.5t70.5 29.5zM400 0v400q0 41 -29.5 70.5t-70.5 29.5h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-400h300z" />
-<glyph unicode="&#xe186;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM200 800v-300h200v-100h-200v-100h300v300h-200v100h200v100h-300zM800 800h-200v-500h200v100h100v300h-100 v100zM800 700v-300h-100v300h100z" />
-<glyph unicode="&#xe187;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM400 600h-100v200h-100v-500h100v200h100v-200h100v500h-100v-200zM800 800h-200v-500h200v100h100v300h-100 v100zM800 700v-300h-100v300h100z" />
-<glyph unicode="&#xe188;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM200 800v-500h300v100h-200v300h200v100h-300zM600 800v-500h300v100h-200v300h200v100h-300z" />
-<glyph unicode="&#xe189;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM500 700l-300 -150l300 -150v300zM600 400l300 150l-300 150v-300z" />
-<glyph unicode="&#xe190;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM900 800v-500h-700v500h700zM300 400h130q41 0 68 42t27 107t-28.5 108t-66.5 43h-130v-300zM800 700h-130 q-38 0 -66.5 -43t-28.5 -108t27 -107t68 -42h130v300z" />
-<glyph unicode="&#xe191;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM200 800v-300h200v-100h-200v-100h300v300h-200v100h200v100h-300zM800 300h100v500h-200v-100h100v-400z M601 300h100v100h-100v-100z" />
-<glyph unicode="&#xe192;" d="M1200 800v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212zM1000 900h-900v-700h900v700zM300 700v100h-100v-500h300v400h-200zM800 300h100v500h-200v-100h100v-400zM401 400h-100v200h100v-200z M601 300h100v100h-100v-100z" />
-<glyph unicode="&#xe193;" d="M200 1100h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212v500q0 124 88 212t212 88zM1000 900h-900v-700h900v700zM400 700h-200v100h300v-300h-99v-100h-100v100h99v200zM800 700h-100v100h200v-500h-100v400zM201 400h100v-100 h-100v100zM701 300h-100v100h100v-100z" />
-<glyph unicode="&#xe194;" d="M600 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM600 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM800 700h-300 v-200h300v-100h-300l-100 100v200l100 100h300v-100z" />
-<glyph unicode="&#xe195;" d="M596 1196q162 0 299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299t80 299t217 217t299 80zM596 1014q-171 0 -292.5 -121.5t-121.5 -292.5t121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5zM800 700v-100 h-100v100h-200v-100h200v-100h-200v-100h-100v400h300zM800 400h-100v100h100v-100z" />
-<glyph unicode="&#xe197;" d="M800 300h128q120 0 205 86t85 208q0 120 -85 206.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5q0 -80 56.5 -137t135.5 -57h222v300h400v-300zM700 200h200l-300 -300 l-300 300h200v300h200v-300z" />
-<glyph unicode="&#xe198;" d="M600 714l403 -403q94 26 154.5 104t60.5 178q0 121 -85 207.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5q0 -80 56.5 -137t135.5 -57h8zM700 -100h-200v300h-200l300 300 l300 -300h-200v-300z" />
-<glyph unicode="&#xe199;" d="M700 200h400l-270 300h170l-270 300h170l-300 333l-300 -333h170l-270 -300h170l-270 -300h400v-155l-75 -45h350l-75 45v155z" />
-<glyph unicode="&#xe200;" d="M700 45v306q46 -30 100 -30q74 0 126.5 52.5t52.5 126.5q0 24 -9 55q50 32 79.5 83t29.5 112q0 90 -61.5 155.5t-150.5 71.5q-26 89 -99.5 145.5t-167.5 56.5q-116 0 -197.5 -81.5t-81.5 -197.5q0 -4 1 -12t1 -11q-14 2 -23 2q-74 0 -126.5 -52.5t-52.5 -126.5 q0 -53 28.5 -97t75.5 -65q-4 -16 -4 -38q0 -74 52.5 -126.5t126.5 -52.5q56 0 100 30v-306l-75 -45h350z" />
-<glyph unicode="&#x1f4bc;" d="M800 1000h300q41 0 70.5 -29.5t29.5 -70.5v-400h-500v100h-200v-100h-500v400q0 41 29.5 70.5t70.5 29.5h300v100q0 41 29.5 70.5t70.5 29.5h200q41 0 70.5 -29.5t29.5 -70.5v-100zM500 1000h200v100h-200v-100zM1200 400v-200q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5v200h1200z" />
-<glyph unicode="&#x1f4c5;" d="M1100 900v150q0 21 -14.5 35.5t-35.5 14.5h-150v100h-100v-100h-500v100h-100v-100h-150q-21 0 -35.5 -14.5t-14.5 -35.5v-150h1100zM0 800v-750q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v750h-1100zM100 600h100v-100h-100v100zM300 600h100v-100h-100v100z M500 600h100v-100h-100v100zM700 600h100v-100h-100v100zM900 600h100v-100h-100v100zM100 400h100v-100h-100v100zM300 400h100v-100h-100v100zM500 400h100v-100h-100v100zM700 400h100v-100h-100v100zM900 400h100v-100h-100v100zM100 200h100v-100h-100v100zM300 200 h100v-100h-100v100zM500 200h100v-100h-100v100zM700 200h100v-100h-100v100zM900 200h100v-100h-100v100z" />
-<glyph unicode="&#x1f4cc;" d="M902 1185l283 -282q15 -15 15 -36t-15 -35q-14 -15 -35 -15t-35 15l-36 35l-279 -267v-300l-212 210l-208 -207l-380 -303l303 380l207 208l-210 212h300l267 279l-35 36q-15 14 -15 35t15 35q14 15 35 15t35 -15z" />
-<glyph unicode="&#x1f4ce;" d="M518 119l69 -60l517 511q67 67 95 157t11 183q-16 87 -67 154t-130 103q-69 33 -152 33q-107 0 -197 -55q-40 -24 -111 -95l-512 -512q-68 -68 -81 -163t35 -173q35 -57 94 -89t129 -32q63 0 119 28q33 16 65 40.5t52.5 45.5t59.5 64q40 44 57 61l394 394q35 35 47 84 t-3 96q-27 87 -117 104q-20 2 -29 2q-46 0 -79.5 -17t-67.5 -51l-388 -396l-7 -7l69 -67l377 373q20 22 39 38q23 23 50 23q38 0 53 -36q16 -39 -20 -75l-547 -547q-52 -52 -125 -52q-55 0 -100 33t-54 96q-5 35 2.5 66t31.5 63t42 50t56 54q24 21 44 41l348 348 q52 52 82.5 79.5t84 54t107.5 26.5q25 0 48 -4q95 -17 154 -94.5t51 -175.5q-7 -101 -98 -192l-252 -249l-253 -256z" />
-<glyph unicode="&#x1f4f7;" d="M1200 200v600q0 41 -29.5 70.5t-70.5 29.5h-150q-4 8 -11.5 21.5t-33 48t-53 61t-69 48t-83.5 21.5h-200q-41 0 -82 -20.5t-70 -50t-52 -59t-34 -50.5l-12 -20h-150q-41 0 -70.5 -29.5t-29.5 -70.5v-600q0 -41 29.5 -70.5t70.5 -29.5h1000q41 0 70.5 29.5t29.5 70.5z M1000 700h-100v100h100v-100zM844 500q0 -100 -72 -172t-172 -72t-172 72t-72 172t72 172t172 72t172 -72t72 -172zM706 500q0 44 -31 75t-75 31t-75 -31t-31 -75t31 -75t75 -31t75 31t31 75z" />
-<glyph unicode="&#x1f512;" d="M900 800h100q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-900q-41 0 -70.5 29.5t-29.5 70.5v600q0 41 29.5 70.5t70.5 29.5h100v200q0 82 59 141t141 59h300q82 0 141 -59t59 -141v-200zM400 800h300v150q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-150z" />
-<glyph unicode="&#x1f514;" d="M1062 400h17q20 0 33.5 -14.5t13.5 -35.5q0 -20 -13 -40t-31 -27q-22 -9 -63 -23t-167.5 -37t-251.5 -23t-245.5 20.5t-178.5 41.5l-58 20q-18 7 -31 27.5t-13 40.5q0 21 13.5 35.5t33.5 14.5h17l118 173l63 327q15 77 76 140t144 83l-18 32q-6 19 3 32t29 13h94 q20 0 29 -10.5t3 -29.5l-18 -37q83 -19 144 -82.5t76 -140.5l63 -327zM600 104q-54 0 -103 6q12 -49 40 -79.5t63 -30.5t63 30.5t39 79.5q-48 -6 -102 -6z" />
-<glyph unicode="&#x1f516;" d="M200 0l450 444l450 -443v1150q0 20 -14.5 35t-35.5 15h-800q-21 0 -35.5 -15t-14.5 -35v-1151z" />
-<glyph unicode="&#x1f525;" d="M400 755q2 -12 8 -41.5t8 -43t6 -39.5t3.5 -39.5t-1 -33.5t-6 -31.5t-13.5 -24t-21 -20.5t-31 -12q-38 -10 -67 13t-40.5 61.5t-15 81.5t10.5 75q-52 -46 -83.5 -101t-39 -107t-7.5 -85t5 -63q9 -56 44 -119.5t105 -108.5q31 -21 64 -16t62 23.5t57 49.5t48 61.5t35 60.5 q32 66 39 184.5t-13 157.5q79 -80 122 -164t26 -184q-5 -33 -20.5 -69.5t-37.5 -80.5q-10 -19 -14.5 -29t-12 -26t-9 -23.5t-3 -19t2.5 -15.5t11 -9.5t19.5 -5t30.5 2.5t42 8q57 20 91 34t87.5 44.5t87 64t65.5 88.5t47 122q38 172 -44.5 341.5t-246.5 278.5q22 -44 43 -129 q39 -159 -32 -154q-15 2 -33 9q-79 33 -120.5 100t-44 175.5t48.5 257.5q-13 -8 -34 -23.5t-72.5 -66.5t-88.5 -105.5t-60 -138t-8 -166.5z" />
-<glyph unicode="&#x1f527;" d="M948 778l251 126q13 -175 -151 -267q-123 -70 -253 -23l-596 -596q-15 -16 -36.5 -16t-36.5 16l-111 110q-15 15 -15 36.5t15 37.5l600 599q-33 101 6 201.5t135 154.5q164 92 306 -9l-259 -138z" />
-</font>
-</defs></svg> 
\ No newline at end of file
diff --git a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.ttf b/addons/website/static/src/css/fonts/glyphicons-halflings-regular.ttf
deleted file mode 100644
index be784dc1d5b..00000000000
Binary files a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.ttf and /dev/null differ
diff --git a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.woff b/addons/website/static/src/css/fonts/glyphicons-halflings-regular.woff
deleted file mode 100644
index 2cc3e4852a5..00000000000
Binary files a/addons/website/static/src/css/fonts/glyphicons-halflings-regular.woff and /dev/null differ
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
deleted file mode 100644
index d549cd1d3d3..00000000000
--- a/addons/website/static/src/css/snippets.css
+++ /dev/null
@@ -1,166 +0,0 @@
-@charset "UTF-8";
-#oe_manipulators {
-  position: absolute;
-  top: 0;
-  z-index: 1050;
-}
-
-/* ---- Table Snippet ----  {{{ */
-.table_desc {
-  margin: 0 0 20px 0;
-  width: 100%;
-  word-break: break-all;
-  border: 1px solid #dddddd;
-}
-
-.table_heading {
-  background-color: #f5f5f5;
-  border: 1px solid #dddddd;
-  color: #666666;
-  font-size: 14px;
-  padding: 4px;
-}
-
-table.table_desc tr td {
-  text-align: left;
-  padding: 5px;
-  font-size: 13px;
-}
-table.table_desc tr td:first-child {
-  width: 25%;
-  font-weight: bold;
-  border-bottom: 1px solid #c9c9c9;
-  border-right: 1px solid #c9c9c9;
-  border-left: none;
-}
-table.table_desc tr td:last-child {
-  border-bottom: 1px solid #c9c9c9;
-}
-
-/* ---- thumbnail ----  {{{ */
-.oe_snippet.o_block_banner .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_banner.png");
-}
-.oe_snippet.o_block_text_image .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_text_image.png");
-}
-.oe_snippet.o_block_image_text .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_image_text.png");
-}
-.oe_snippet.o_block_jumbotron .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_jumbotron.png");
-}
-.oe_snippet.o_block_text_block .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_text_block.png");
-}
-.oe_snippet.o_block_title .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_title.png");
-}
-.oe_snippet.o_block_features .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_features.png");
-}
-.oe_snippet.o_block_big_picture .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_big_picture.png");
-}
-.oe_snippet.o_block_three_columns .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_three_columns.png");
-}
-.oe_snippet.o_block_well .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_well.png");
-}
-.oe_snippet.o_block_quote .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_quote.png");
-}
-.oe_snippet.o_block_panel .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_panel.png");
-}
-.oe_snippet.o_block_image_float .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_text_image.png");
-}
-.oe_snippet.o_block_image_floating .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_text_image.png");
-}
-.oe_snippet.o_block_separator .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_separator.png");
-}
-.oe_snippet.o_block_button .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_button.png");
-}
-.oe_snippet.o_block_image_gallery .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_image_gallery.png");
-}
-.oe_snippet.o_block_comparison .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_comparison.png");
-}
-.oe_snippet.o_block_button .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_button.png");
-}
-.oe_snippet.o_block_faq .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_faq.png");
-}
-.oe_snippet.o_block_references .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_references.png");
-}
-.oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
-}
-.oe_snippet.o_block_features .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_features.png");
-}
-.oe_snippet.o_block_parallax .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_parallax.png");
-}
-.oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
-  background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
-}
-
-/* snippets default margins */
-.s_banner {
-  margin-bottom: 32px;
-}
-
-.s_big_message {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-.s_text_block {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-.s_features {
-  margin-top: 16px;
-}
-
-.s_big_picture {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-.s_three_columns {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-.s_references {
-  margin-top: 16px;
-  margin-bottom: 32px;
-}
-
-.s_quotes_slider {
-  margin-bottom: 0px;
-}
-
-.s_features_grid {
-  margin-bottom: 16px;
-}
-
-/* other snippet styles */
-.s_comparisons .panel .list-group-item:not(.active) {
-  color: #666;
-}
-
-.s_references .img-thumbnail {
-  border: none;
-}
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
deleted file mode 100644
index c5bd2a2b569..00000000000
--- a/addons/website/static/src/css/snippets.sass
+++ /dev/null
@@ -1,142 +0,0 @@
-@import "compass/css3"
-@import "compass/css3/user-interface"
-@import "compass/css3/transition"
-
-#oe_manipulators
-    position: absolute
-    top: 0
-    z-index: 1050
-
-
-/* ---- Table Snippet ----  {{{ */
-
-.table_desc
-    margin: 0 0 20px 0
-    width: 100%
-    word-break: break-all
-    border: 1px solid #dddddd
-
-.table_heading
-    background-color: #f5f5f5
-    border: 1px solid #dddddd
-    color: #666666
-    font-size: 14px
-    padding: 4px
-
-table.table_desc tr td
-    text-align: left
-    padding: 5px
-    font-size: 13px
-    &:first-child
-        width: 25%
-        font-weight: bold
-        border-bottom: 1px solid #c9c9c9
-        border-right: 1px solid #c9c9c9
-        border-left: none
-    &:last-child
-        border-bottom: 1px solid #c9c9c9
-
-// }}}
-
-/* ---- thumbnail ----  {{{ */
-
-.oe_snippet
-    &.o_block_banner .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_banner.png')
-    &.o_block_text_image .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_text_image.png')
-    &.o_block_image_text .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_image_text.png')
-    &.o_block_jumbotron .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_jumbotron.png')
-    &.o_block_text_block .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_text_block.png')
-    &.o_block_title .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_title.png')
-    &.o_block_features .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_features.png')
-    &.o_block_big_picture .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_big_picture.png')
-    &.o_block_three_columns .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_three_columns.png')
-
-    &.o_block_well .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_well.png')
-    &.o_block_quote .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_quote.png')
-    &.o_block_panel .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_panel.png')
-    &.o_block_image_float .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_text_image.png')
-    &.o_block_image_floating .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_text_image.png')
-    &.o_block_separator .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_separator.png')
-    &.o_block_button .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_button.png')
-
-    &.o_block_image_gallery .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_image_gallery.png')
-    &.o_block_comparison .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_comparison.png')
-    &.o_block_button .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_button.png')
-    &.o_block_faq .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_faq.png')
-    &.o_block_references .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_references.png')
-    &.o_block_quotes_slider .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
-    &.o_block_features .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_features.png')
-
-    &.o_block_parallax .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_parallax.png')
-    &.o_block_quotes_slider .oe_snippet_thumbnail_img
-        background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
-// }}}
-
-/* snippets default margins */
-.s_banner
-    margin-bottom: 32px
-
-.s_big_message
-    margin-top: 16px
-    margin-bottom: 16px
-
-.s_text_block
-    margin-top: 16px
-    margin-bottom: 16px
-
-.s_features
-    margin-top: 16px
-
-.s_big_picture
-    margin-top: 16px
-    margin-bottom: 16px
-
-.s_three_columns
-    margin-top: 16px
-    margin-bottom: 16px
-
-.s_references
-    margin-top: 16px
-    margin-bottom: 32px
-
-.s_quotes_slider
-    margin-bottom: 0px
-
-.s_features_grid
-    margin-bottom: 16px
-
-
-/* other snippet styles */
-
-.s_comparisons
-    .panel
-        .list-group-item:not(.active)
-            color: #666
-
-.s_references
-    .img-thumbnail
-        border: none
diff --git a/addons/website/static/src/css/website.editor.css b/addons/website/static/src/css/website.editor.css
deleted file mode 100644
index f1436929da1..00000000000
--- a/addons/website/static/src/css/website.editor.css
+++ /dev/null
@@ -1,255 +0,0 @@
-@charset "utf-8";
-/* ---- Common---- {{{ */
-.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
-  min-height: 24px;
-}
-
-/* ---- MOBILE PREVIEW ---- {{{ */
-.oe_mobile_preview.modal .modal-content {
-  height: 660px;
-  background-color: #000000;
-  border: 2px solid #1C1F1F;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  margin: auto;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  max-width: 330px;
-}
-.oe_mobile_preview.modal .modal-content .modal-header {
-  background-color: #000000;
-  border-bottom: 0;
-  -moz-border-radius-topleft: 10px;
-  -webkit-border-top-left-radius: 10px;
-  border-top-left-radius: 10px;
-  -moz-border-radius-topright: 10px;
-  -webkit-border-top-right-radius: 10px;
-  border-top-right-radius: 10px;
-}
-.oe_mobile_preview.modal .modal-content .modal-header .modal-title {
-  color: #1C1F1F;
-}
-.oe_mobile_preview.modal .modal-content .modal-header .close {
-  color: lightgrey;
-  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
-  opacity: 1;
-}
-.oe_mobile_preview.modal .modal-content .modal-header .close:hover {
-  color: #E00101;
-  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
-  opacity: 1;
-}
-.oe_mobile_preview.modal .modal-content .modal-body {
-  background-color: #000000;
-  max-height: 600px;
-  padding: 0;
-  margin: 0;
-}
-.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
-  width: 320px;
-  height: 568px;
-  padding: 5px;
-  border: none;
-}
-.oe_mobile_preview.modal .modal-content .modal-footer {
-  background-color: #000000;
-}
-
-/* ---- SEO TOOLS ---- {{{ */
-.oe_seo_configuration .modal-dialog {
-  width: 80%;
-}
-.oe_seo_configuration .oe_remove {
-  color: #E00101;
-}
-.oe_seo_configuration .oe_seo_suggestion {
-  cursor: pointer;
-}
-.oe_seo_configuration .oe_seo_keyword {
-  padding: 0.2em 0.4em 0.2em 0.5em;
-  -moz-border-radius: 0.4em;
-  -webkit-border-radius: 0.4em;
-  border-radius: 0.4em;
-}
-.oe_seo_configuration li.oe_seo_preview_g {
-  line-height: 1.2;
-  list-style: none;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  font-size: small;
-  font-family: arial, sans-serif;
-}
-.oe_seo_configuration li.oe_seo_preview_g h3 {
-  font-size: medium;
-}
-.oe_seo_configuration li.oe_seo_preview_g .r {
-  margin: 0;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.oe_seo_configuration li.oe_seo_preview_g .r a {
-  color: #1e0fbe;
-  text-decoration: underline;
-  text-transform: none;
-}
-.oe_seo_configuration li.oe_seo_preview_g .r a em {
-  font-style: normal !important;
-}
-.oe_seo_configuration li.oe_seo_preview_g .s {
-  color: #444;
-  max-width: 42em;
-}
-.oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
-  display: block;
-  margin-bottom: 1px;
-}
-.oe_seo_configuration li.oe_seo_preview_g .f {
-  color: #666;
-  margin-bottom: 1px;
-}
-.oe_seo_configuration li.oe_seo_preview_g .f cite {
-  color: #006621;
-  font-style: normal;
-  font-size: 14px;
-}
-.oe_seo_configuration li.oe_seo_preview_g .st {
-  line-height: 1.24;
-}
-
-/* ---- ACE EDITOR ---- {{{ */
-.oe_ace_view_editor {
-  position: fixed;
-  right: 0;
-  z-index: 1001;
-  height: 100%;
-  background: #2F3129;
-  color: white;
-}
-.oe_ace_view_editor .oe_ace_view_editor_title {
-  width: 100%;
-  padding-top: 0;
-  padding-left: 0;
-  height: 30px;
-}
-.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
-  width: 50%;
-  height: 30px;
-  font-size: 14px;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
-  line-height: normal;
-}
-.oe_ace_view_editor .oe_ace_view_editor_title .btn {
-  height: 30px;
-  padding: 0 4px 0 4px;
-  font-size: 14px;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
-  line-height: normal;
-}
-.oe_ace_view_editor .ace_editor {
-  position: absolute;
-  top: 50px;
-  right: 0;
-  left: 0;
-}
-.oe_ace_view_editor .ace_editor .ace_gutter {
-  cursor: ew-resize;
-}
-.oe_ace_view_editor #ace-view-id {
-  padding: 0 1em;
-}
-.oe_ace_view_editor.oe_ace_open {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
-  opacity: 0.97;
-}
-.oe_ace_view_editor.oe_ace_closed {
-  z-index: -1000;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-  opacity: 0;
-}
-
-.oe_include_bundles {
-  font-weight: normal;
-  padding: 0 8px;
-}
-
-/* ---- CUSTOMIZE THEME ---- {{{ */
-#theme_error {
-  background: #ffc;
-}
-
-#theme_customize_modal {
-  overflow: auto;
-  z-index: 1020;
-  background: transparent;
-  display: block;
-}
-#theme_customize_modal .modal-dialog {
-  top: 75px;
-  width: auto;
-  margin: 0;
-  position: absolute;
-  right: 10px;
-  font-family: "Lato-Regular";
-  font-weight: normal;
-  text-transform: capitalize;
-  letter-spacing: normal;
-}
-#theme_customize_modal .modal-h5 {
-  color: #ffffff;
-  font-family: "Lato-Regular";
-  font-weight: normal;
-  text-transform: uppercase;
-  letter-spacing: normal;
-  font-size: 14px;
-  color: white;
-  padding: 4px 0 4px 4px;
-  background-color: #bdc3c7;
-}
-#theme_customize_modal table {
-  width: 100%;
-  margin-bottom: 8px;
-}
-#theme_customize_modal label {
-  display: block;
-  text-align: center;
-}
-#theme_customize_modal label > div, #theme_customize_modal label > img {
-  border: 1px solid #fff;
-  line-height: 30px;
-  font-size: 0.9em;
-  margin: 2px 4px;
-}
-#theme_customize_modal label.checked > div, #theme_customize_modal label.checked > img {
-  box-shadow: 2px 2px 3px #888;
-  border: 1px solid #666;
-}
-#theme_customize_modal label img {
-  width: 60px;
-  height: 35px;
-  margin: 2px;
-  border: 1px solid rgba(136, 136, 136, 0.5);
-}
-#theme_customize_modal label input {
-  display: none;
-}
-#theme_customize_modal .loading_backdrop {
-  display: none;
-}
-#theme_customize_modal.loading .loading_backdrop {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  opacity: 0.3;
-  position: absolute;
-  z-index: 1;
-}
diff --git a/addons/website/static/src/css/website.editor.sass b/addons/website/static/src/css/website.editor.sass
deleted file mode 100644
index b7d2d28edda..00000000000
--- a/addons/website/static/src/css/website.editor.sass
+++ /dev/null
@@ -1,226 +0,0 @@
-@charset "utf-8"
-@import "common"
-
-/* ---- Common---- {{{ */
-
-.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
-    min-height: 24px
-
-// }}}
-
-/* ---- MOBILE PREVIEW ---- {{{ */
-
-$mobile_preview_background: #000000
-$mobile_preview_border: #1C1F1F
-$icon_close: #E00101
-.oe_mobile_preview
-    &.modal .modal-content
-        height: 660px
-        background-color: $mobile_preview_background
-        border: 2px solid $mobile_preview_border
-        +border-radius(10px)
-        margin: auto
-        top: 0
-        left: 0
-        bottom: 0
-        right: 0
-        max-width: 330px
-        .modal-header
-            background-color: $mobile_preview_background
-            border-bottom: 0
-            +border-top-left-radius(10px)
-            +border-top-right-radius(10px)
-            .modal-title
-                color: $mobile_preview_border
-            .close
-                color: lightgrey
-                +opacity(1)
-            .close:hover
-                color: $icon_close
-                +opacity(1)
-        .modal-body
-            background-color: $mobile_preview_background
-            max-height: 600px
-            padding: 0
-            margin: 0
-            .oe_mobile_viewport
-                width: 320px
-                height: 568px
-                padding: 5px
-                border: none
-        .modal-footer
-            background-color: $mobile_preview_background
-
-// }}}
-
-/* ---- SEO TOOLS ---- {{{ */
-
-$remove_color: $icon_close
-$in_title_color: #5cb85c
-$in_description_color: #428bca
-$in_body_color: #5bc0de
-$highlighted_text_color: #ffffff
-.oe_seo_configuration
-    .modal-dialog
-        width: 80%
-    .oe_remove
-        color: $remove_color
-    .oe_seo_suggestion
-        cursor: pointer
-    .oe_seo_keyword
-        padding: .2em .4em .2em .5em
-        +border-radius(.4em)
-    li.oe_seo_preview_g
-        line-height: 1.2
-        list-style: none
-        list-style-image: none
-        list-style-position: outside
-        list-style-type: none
-        font-size: small
-        font-family: arial,sans-serif
-        h3
-            font-size: medium
-        .r
-            margin: 0
-            font-size: 16px
-            font-style: normal
-            font-weight: normal
-            overflow: hidden
-            text-overflow: ellipsis
-            -webkit-text-overflow: ellipsis
-            white-space: nowrap
-            a
-                color: rgb(30, 15, 190)
-                text-decoration: underline
-                text-transform: none
-                em
-                    font-style: normal !important
-        .s
-            color: #444
-            max-width: 42em
-        .kv,.slp
-            display: block
-            margin-bottom: 1px
-        .f
-            color: #666
-            margin-bottom: 1px
-            cite
-                color: #006621
-                font-style: normal
-                font-size: 14px
-        .st
-            line-height: 1.24
-
-
-// }}}
-
-/* ---- ACE EDITOR ---- {{{ */
-
-$editorbar_height: 30px
-$infobar_height: 20px
-// TODO Fix => might break with themes
-
-.oe_ace_view_editor
-    position: fixed
-    // top property is set programmatically
-    right: 0
-    z-index: 1001
-    height: 100%
-    background: #2F3129
-    color: white
-    .oe_ace_view_editor_title
-        width: 100%
-        padding-top: 0
-        padding-left: 0
-        height: $editorbar_height
-        .oe_view_list
-            width: 50%
-            height: $editorbar_height
-            @include editor-font
-        .btn
-            height: $editorbar_height
-            padding: 0 4px 0 4px
-            @include editor-font
-    .ace_editor
-        position: absolute
-        top: $editorbar_height + $infobar_height
-        right: 0
-        // bottom property is set programmatically
-        left: 0
-        .ace_gutter
-            cursor: ew-resize
-    #ace-view-id
-        padding: 0 1em
-    &.oe_ace_open
-        +opacity(0.97)
-    &.oe_ace_closed
-        z-index: -1000
-        +opacity(0)
-
-.oe_include_bundles
-    font-weight: normal
-    padding: 0 8px
-
-// }}}
-
-/* ---- CUSTOMIZE THEME ---- {{{ */
-#theme_error
-    background: #ffc
-#theme_customize_modal
-    overflow: auto
-    z-index: 1020
-    background: transparent
-    display: block
-    .modal-dialog
-        top: 75px
-        width: auto
-        margin: 0
-        position: absolute
-        right: 10px
-        font-family: 'Lato-Regular'
-        font-weight: normal
-        text-transform: capitalize
-        letter-spacing: normal
-    .modal-h5
-        color: #ffffff
-        font-family: 'Lato-Regular'
-        font-weight: normal
-        text-transform: uppercase
-        letter-spacing: normal
-        font-size: 14px
-        color: white
-        padding: 4px 0 4px 4px
-        background-color: #bdc3c7
-    table
-        width: 100%
-        margin-bottom: 8px
-    label
-        display: block
-        text-align: center
-        > div, > img
-            border: 1px solid #fff
-            line-height: 30px
-            font-size: 0.9em
-            margin: 2px 4px
-        &.checked
-            > div, > img
-                box-shadow: 2px 2px 3px #888
-                border: 1px solid #666
-        img
-            width: 60px
-            height: 35px
-            margin: 2px
-            border: 1px solid rgba(136, 136, 136, 0.5)
-        input
-            display: none
-    .loading_backdrop
-        display: none
-    &.loading
-        .loading_backdrop
-            display: block
-            width: 100%
-            height: 100%
-            background: #000
-            opacity: 0.3
-            position: absolute
-            z-index: 1
diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 54a7e041538..3cbcaefbb14 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -22,6 +22,24 @@ var TopBarContent = Widget.extend({
             var $content_item = $(this);
             self[$content_item.data('action')]();
         });
+
+        // Build 'ADD PAGE' modal
+        var $cont    = $('#website_addPage_modal .website_addPage_ul');
+        var $defIcon = $('<i class="fa fa-cube"></i>')
+
+        $("#website_addPage_list").nextAll().each(function(){
+            var $clone = $(this).clone().appendTo($cont).attr("data-dismiss","modal").addClass('animated')
+            var $a     = $clone.find('a')
+            var text   = $a.text()
+
+            if($clone.find('i').length < 1){ $defIcon.clone().prependTo($a)}
+            if($clone.find('p').length < 1){ $a.html($a.html().replace($a.text(),'')).append('<p>' + text + '</p>')}
+
+            $a.on('click', function(){
+                var $content_item = $(this);
+                self[$content_item.data('action')]();
+            })
+        })
         return this._super();
     },
     edit_menu: function() {
@@ -63,12 +81,16 @@ var TopBarContent = Widget.extend({
 
                 var $add = $(
                     '<div class="form-group mb0">'+
-                        '<label class="col-sm-offset-3 col-sm-9 text-left">'+
-                        '    <input type="checkbox" checked="checked" required="required"/> '+
-                        '</label>'+
+                        '<span class="col-sm-offset-3 col-sm-9 text-left">'+
+                            '<label class="switch checked" for="switch_addTo_menu">' +
+                              '<input type="checkbox" id="switch_addTo_menu" class="switch_input" checked="checked" />' +
+                              '<span class="switch_track"></span>' +
+                            '</label>' +
+                        '</span>'+
                     '</div>');
-                $add.find('label').append(_t("Add page in menu"));
+                $add.find('label').after(_t("Add page in menu"));
                 $group.after($add);
+                console.log(website)
             }
         }).then(function (val, field, $dialog) {
             if (val) {
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 9dca29619b7..a670f53bef1 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -38,16 +38,63 @@ website.TopBar.include({
             .attr("data-oe-placeholder", _t("Press The Top-Left Edit Button"));
 
         if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang') === "en_US") {
-            this.$el.hide();
+            this.$el.addClass('editing_mode');
         }
 
+        self.init_components()
+
+        self.resize()
+        $(window).on("resize", function(){
+            self.resize()
+        })
+
         return this._super();
     },
+    init_components: function(){
+        $(".switch").each(function(){
+            var $el = $(this)
+            $el.on('click', function(){
+                var $i = $el.find('.switch_input')
+                $el.toggleClass('checked')
+                if($i.prop("checked")){
+                    $i.prop("checked", false);
+                } else {
+                    $i.prop("checked", true);
+                }
+                return false;
+            })
+        });
+    },
     edit: function () {
         this.$('button[data-action=edit]').prop('disabled', true);
-        this.$el.hide();
+        this.$el.addClass('editing_mode');
         editor.editor_bar = new editor.Class(this);
         editor.editor_bar.prependTo(document.body);
+    },
+    resize: function() {
+        var wW = $(window).width(),
+            $sys = $('#oe_systray'),
+            $nav = $('#website_main_menu_navbar');
+
+        // Adapt dropdown-menu orientation to fit screen size
+        $sys.find('> li.wb_dropdown, >li.dropdown').each(function(){
+          var $el = $(this),
+           offset = $el.offset(),
+            width = $el.width();
+          var centerX = offset.left + width / 2;
+          if(centerX > wW/2){
+            $el.addClass('right')
+          } else {
+            $el.removeClass('right')
+          }
+        })
+        // Resize oe_systray
+        var totalWidth = null;
+        $nav.find('>*').not($sys).each(function(index) {
+            totalWidth += parseInt($(this).outerWidth() , 10);
+        });
+        $sys.width((wW - totalWidth)-50).addClass('ready')
+
     }
 });
 
@@ -79,8 +126,18 @@ website.TopBarCustomize = Widget.extend({
                     if (item.header) {
                         self.$menu.append('<li class="dropdown-header">' + item.name + '</li>');
                     } else {
-                        self.$menu.append(_.str.sprintf('<li role="presentation"><a href="#" data-view-id="%s" role="menuitem"><strong class="fa fa%s-square-o"></strong> %s</a></li>',
-                            item.id, item.active ? '-check' : '', item.name));
+                         self.$menu.append(_.str.sprintf(
+                                                '<li role="presentation">'+
+                                                    '<a href="#" data-view-id="%s" role="menuitem">' +
+                                                        '<span class="toggle_container">' +
+                                                            '<label class="switch %s" for="switch-%s">' +
+                                                                '<input type="checkbox" id="switch-%s" class="switch_input" checked="%s">' +
+                                                                '<span class="switch_track"></span>' +
+                                                            '</label>' +
+                                                        '</span> %s'+
+                                                    '</a>' +
+                                                '</li>',
+                            item.id, item.active ? 'checked' : '', item.id, item.id, item.active ? 'true' : 'false', item.name));
                     }
                 });
                 self.loaded = true;
@@ -89,6 +146,7 @@ website.TopBarCustomize = Widget.extend({
     },
     do_customize: function (event) {
         var view_id = $(event.currentTarget).data('view-id');
+        $('#website_loading').addClass('active')
         return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
             model: 'ir.ui.view',
             method: 'toggle',
@@ -117,7 +175,7 @@ widget.LinkDialog.include({
         var self = this;
         var href = this.data.url;
         var last;
-        
+
         this.$('#link-page').select2({
             minimumInputLength: 1,
             placeholder: _t("New or existing page"),
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 7c2ad6cc48c..e26ba130f52 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -177,7 +177,7 @@ ajax.loadXML('/web/static/src/xml/base_common.xml', qweb);
  
 base.ready().then(function () {
     data.topBar = new TopBar();
-    data.topBar.attachTo($("#oe_main_menu_navbar"));
+    data.topBar.attachTo($("#website_main_menu_navbar"));
 });
 
 /**
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index fa61feb7ec9..15311cb8dc8 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -26,6 +26,48 @@ function load_called_template () {
     }
 }
 
+
+// Ripple animation
+animation.registry.ripple = animation.Class.extend({
+  selector: ".wb_dropdown-toggle, #oe_systray .dropdown-toggle",
+
+  start: function(){
+
+    var timeout,
+        btn = this.$target;
+
+    btn
+    .css({ position: 'relative', overflow: 'hidden'})
+    .bind('mousedown', function(e) {
+      var ripple;
+      if (btn.find('.ripple').length === 0) {
+        ripple = $('<span class="ripple"/>');
+        btn.prepend(ripple);
+      } else {
+        ripple = btn.find('.ripple');
+      }
+      ripple.removeClass('animate');
+
+      if (!ripple.height() && !ripple.width()) {
+        var diameter = Math.max(btn.outerWidth(), btn.outerHeight());
+        ripple.css({ height: diameter, width: diameter });
+      }
+
+      var x = e.pageX - btn.offset().left - ripple.width() / 2;
+      var y = e.pageY - btn.offset().top - ripple.height() / 2;
+
+      ripple
+        .css({ top: y + 'px',left: x + 'px'})
+        .addClass('animate');
+
+      setTimeout(function() {
+        //ripple.removeClass('animate');
+      }, 700);
+    });
+  },
+}),
+
+
 /*-------------------------------------------------------------------------*/
 
 base.ready().then(function () {
@@ -150,10 +192,10 @@ animation.registry.ul = animation.Class.extend({
 });
 
 /* -------------------------------------------------------------------------
-Gallery Animation  
+Gallery Animation
 
-This ads a Modal window containing a slider when an image is clicked 
-inside a gallery 
+This ads a Modal window containing a slider when an image is clicked
+inside a gallery
 -------------------------------------------------------------------------*/
 animation.registry.gallery = animation.Class.extend({
     selector: ".o_gallery:not(.o_slideshow)",
@@ -165,7 +207,7 @@ animation.registry.gallery = animation.Class.extend({
         var self = this;
         var $cur = $(event.currentTarget);
         var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
-        
+
         // show it only if not in edition mode
         if (!edition_mode) {
             var urls = [],
@@ -213,7 +255,7 @@ animation.registry.gallery = animation.Class.extend({
 
             this.carousel = new animation.registry.gallery_slider($modal.find(".carousel").carousel());
         }
-    } // click_handler  
+    } // click_handler
 });
 animation.registry.gallery_slider = animation.Class.extend({
     selector: ".o_slideshow",
diff --git a/addons/website/static/src/js/website.translator.js b/addons/website/static/src/js/website.translator.js
index fe720622431..1c5d0252dbb 100644
--- a/addons/website/static/src/js/website.translator.js
+++ b/addons/website/static/src/js/website.translator.js
@@ -61,7 +61,7 @@ var Translate = translate.Class.include({
         this._super();
     },
     edit: function () {
-        $("#oe_main_menu_navbar").hide();
+        $("#website_main_menu_navbar").hide();
         if (!localStorage[nodialog]) {
             var dialog = new TranslatorDialog();
             dialog.appendTo($(document.body));
@@ -77,7 +77,7 @@ var Translate = translate.Class.include({
         return this._super();
     },
     cancel: function () {
-        $("#oe_main_menu_navbar").show();
+        $("#website_main_menu_navbar").show();
         return this._super();
     }
 });
diff --git a/addons/website/static/src/less/website.edit_mode.less b/addons/website/static/src/less/website.edit_mode.less
new file mode 100644
index 00000000000..1835f3ff47b
--- /dev/null
+++ b/addons/website/static/src/less/website.edit_mode.less
@@ -0,0 +1,153 @@
+.o_editable{
+  &:not(:empty),&[data-oe-type]{
+    &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover{
+      /* to do change into primary color in less */;
+      -moz-box-shadow: #3071a9 0 0 5px 2px inset;
+      -webkit-box-shadow: #3071a9 0 0 5px 2px inset;
+      box-shadow: #3071a9 0 0 5px 2px inset;
+    }
+  }
+  &:focus,&[data-oe-type]{
+    min-height: 0.8em;
+    min-width: 8px;
+  }
+  &.o_is_inline_editable{
+    display: inline-block;
+  }
+}
+.editor_enable [data-oe-readonly]:hover{
+  cursor: default;
+}
+
+/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */;
+.o_editable[placeholder]:empty:not(:focus):before{
+  content: attr(placeholder);
+  opacity: 0.3;
+}
+
+/* Prevent the text contents of draggable elements from being selectable. */;
+[draggable]{
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Prevent firefox handler. */;
+.o_editable .btn{
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+
+.oe_editable:focus,
+.css_editable_hidden,
+.editor_enable .css_editable_mode_hidden{
+    outline: none !important
+}
+
+.css_editable_display,
+.editor_enable .css_non_editable_mode_hidden,
+.o_editable .media_iframe_video .css_editable_mode_display{
+    display: block !important
+}
+
+.oe_structure.oe_empty:empty,
+[data-oe-type=html]:empty,
+.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child,
+[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child{
+    background-image: url('/website/static/src/img/edit_here.png') !important;
+    &:before{
+      content: 'Press The Top-Left Edit Button' !important
+    }
+}
+
+.o_editable{
+  &.oe_structure.oe_empty > p:empty:only-child, &[data-oe-type=html] > p:empty:only-child{
+    color: #aaa
+  }
+  &.oe_structure.oe_empty:empty,
+  &[data-oe-type=html]:empty,
+  &.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child,
+  &[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child,
+  &.oe_structure.oe_empty > p:empty:only-child,
+  &[data-oe-type=html] > p:empty:only-child{
+    background-image: none !important;
+    &:before { content: 'Write your text here' !important}
+    &:focus:before { display: none}
+  }
+}
+#oe_snippets ~ #wrapwrap{
+  .oe_structure.oe_empty:empty,
+  [data-oe-type=html]:empty,
+  .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child,
+  [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child{
+    background-image: url('/website/static/src/img/drag_here.png') !important;
+    &:before{
+      content: 'Drag Building Blocks Here' !important
+    }
+  }
+}
+
+.oe_structure.oe_empty:empty,
+[data-oe-type=html]:empty,
+.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child,
+[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child{
+  background-image: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 220px !important;
+}
+
+[data-oe-type=html].oe_no_empty:empty{
+  background-image: none !important;
+  height: 16px !important;
+  &:before{
+    content: '' !important
+  }
+}
+
+
+
+/* ---- EDITOR BAR ---- {{{ */
+
+table.editorbar-panel{
+  cursor: pointer;
+  width: 100%;
+  td{ border: 1px solid #aaa}
+  td.selected{ background-color: #b1c9d9}
+}
+.link-style{
+  .dropdown > .btn{
+    min-width: 160px;
+  }
+  .link-style{
+    display: none;
+  }
+  li{
+    text-align: center;
+    label{
+      width: 100px;
+      margin: 0 5px;
+    }
+  }
+  .col-sm-2 > *{
+    line-height: 2em;
+  }
+}
+
+/* ---- RTE ---- {{{ */
+
+// bootstrap makes .btn elements unselectable -> RTE double-click can't know
+// about them either
+.oe_editable .btn,
+.btn.oe_editable{
+  .user-select(auto);
+  cursor: text !important;
+}
+
+// fontawesome
+.note-editable .fa{
+  cursor: pointer;
+}
diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
new file mode 100644
index 00000000000..de57aa7da97
--- /dev/null
+++ b/addons/website/static/src/less/website.snippets.less
@@ -0,0 +1,407 @@
+// General rules
+// =============================
+
+.carousel, .parallax, .blockquote {
+  overflow: hidden;
+}
+
+@media (max-width: 400px) {
+  section, .parallax, .row, .hr, .blockquote {
+    height: auto !important;
+  }
+}
+
+
+// Table Snippet
+// =============================
+
+.table_desc {
+  margin: 0 0 20px 0;
+  width: 100%;
+  word-break: break-all;
+  border: 1px solid #dddddd;
+}
+
+.table_heading {
+  background-color: #f5f5f5;
+  border: 1px solid #dddddd;
+  color: #666666;
+  font-size: 14px;
+  padding: 4px;
+}
+
+table.table_desc tr td {
+  text-align: left;
+  padding: 5px;
+  font-size: 13px;
+  &:first-child{
+    width: 25%;
+    font-weight: bold;
+    border-bottom: 1px solid #c9c9c9;
+    border-right: 1px solid #c9c9c9;
+    border-left: none;
+  }
+  &:last-child{
+    border-bottom: 1px solid #c9c9c9;
+  }
+}
+
+/* other snippet styles */
+.s_comparisons .panel .list-group-item:not(.active) {
+  color: #666;
+}
+
+.s_references .img-thumbnail {
+  border: none;
+}
+
+// o_image_floating
+// =============================
+
+.o_image_floating {
+  width: 40%;
+  margin: 4px;
+  div.o_container {
+    position: relative;
+    mark {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background-color: rgba(86, 61, 124, 0.25);
+      a {
+        color: white;
+      }
+    }
+  }
+}
+.o_image_floating.o_hide_link div.o_container mark {
+  display: none;
+}
+.o_image_floating.o_margin_s {
+  margin-bottom: 4px;
+}
+.o_image_floating.o_margin_s.pull-right {
+  margin-left: 8px;
+}
+.o_image_floating.o_margin_s.pull-left {
+  margin-right: 8px;
+}
+.o_image_floating.o_margin_m {
+  margin-bottom: 8px;
+}
+.o_image_floating.o_margin_m.pull-right {
+  margin-left: 12px;
+}
+.o_image_floating.o_margin_m.pull-left {
+  margin-right: 12px;
+}
+.o_image_floating.o_margin_l {
+  margin-bottom: 12px;
+}
+.o_image_floating.o_margin_l.pull-right {
+  margin-left: 16px;
+}
+.o_image_floating.o_margin_l.pull-left {
+  margin-right: 16px;
+}
+.o_image_floating.o_margin_xl {
+  margin-bottom: 24px;
+}
+.o_image_floating.o_margin_xl.pull-right {
+  margin-left: 32px;
+}
+.o_image_floating.o_margin_xl.pull-left {
+  margin-right: 32px;
+}
+
+
+// carousel
+// =============================
+
+.carousel-inner {
+  height: 100%;
+  .item {
+    height: 100%;
+    background-size: cover;
+  }
+  .carousel-control {
+    cursor: pointer;
+    span {
+      top: 50%;
+      position: absolute;
+      margin-top: -8px;
+    }
+  }
+}
+.carousel .carousel-control.left {
+  left: -10px;
+  * {
+    position: absolute;
+    top: 50%;
+    z-index: 5;
+    right: 50%;
+  }
+}
+.carousel .carousel-control.right {
+  right: -10px;
+  * {
+    position: absolute;
+    top: 50%;
+    z-index: 5;
+    left: 50%;
+  }
+}
+.quotecarousel {
+  padding-bottom: 16px;
+}
+
+div.carousel .container{
+  > .carousel-caption {
+    position: absolute;
+    right: 50%;
+    left: 50%;
+    bottom: 20px;
+    > div {
+      position: absolute;
+      text-align: left;
+      padding: 20px;
+      background: rgba(0, 0, 0, 0.4);
+      bottom: 20px;
+    }
+  }
+  > .carousel-image {
+    top: 5%;
+    bottom: 5%;
+    position: absolute;
+    max-height: 90%;
+    margin: 0 auto;
+  }
+  .item.text_image .container > .carousel-caption {
+    left: 10%;
+    > div {
+      right: 50%;
+      margin-right: -20%;
+      max-width: 550px;
+    }
+  }
+  .item.text_image .container > .carousel-image {
+    right: 10%;
+    left: 50%;
+  }
+  .item.image_text .container > .carousel-caption {
+    right: 10%;
+    > div {
+      left: 50%;
+      margin-left: -20%;
+      max-width: 550px;
+    }
+  }
+  .item.image_text .container > .carousel-image {
+    right: 50%;
+    left: 10%;
+  }
+  .item.text_only .container > .carousel-caption {
+    left: 10%;
+    right: 10%;
+    top: 10%;
+    bottom: auto;
+    > div {
+      text-align: center;
+      background: transparent;
+      bottom: auto;
+      width: 100%;
+    }
+  }
+  .item.text_only .container > .carousel-image {
+    display: none !important;
+  }
+}
+
+// Gallery
+// ====================================
+
+.o_gallery.o_grid .img,
+.o_gallery.o_masonry .img {
+  width: 100%;
+}
+
+.o_gallery.o_grid.o_spc-none div.row {
+  margin: 0;
+  * {
+    padding: 0;
+  }
+}
+.o_gallery.o_grid.o_spc-small div.row {
+  margin: 5px 0;
+  * {
+    padding: 0 5px;
+  }
+}
+.o_gallery.o_grid.o_spc-medium div.row {
+  margin: 10px 0;
+  * {
+    padding: 0 10px;
+  }
+}
+.o_gallery.o_grid.o_spc-big div.row {
+  margin: 15px 0;
+  * {
+    padding: 0 15px;
+  }
+}
+.o_gallery.o_masonry.o_spc-none div.col {
+  padding: 0;
+  > img {
+    margin: 0 !important;
+  }
+}
+.o_gallery.o_masonry.o_spc-small div.col {
+  padding: 0 5px;
+  > img {
+    margin: 5px 0 !important;
+  }
+}
+.o_gallery.o_masonry.o_spc-medium div.col {
+  padding: 0 10px;
+  > img {
+    margin: 10px 0 !important;
+  }
+}
+.o_gallery.o_masonry.o_spc-big div.col {
+  padding: 0 15px;
+  > img {
+    margin: 15px 0 !important;
+  }
+}
+.o_gallery.o_grid.size-auto .row {
+  height: auto;
+}
+.o_gallery.o_grid.size-small .row {
+  height: 100px;
+}
+.o_gallery.o_grid.size-medium .row {
+  height: 250px;
+}
+.o_gallery.o_grid.size-big .row {
+  height: 400px;
+}
+.o_gallery.o_grid.size-small .img,
+.o_gallery.o_grid.size-medium .img,
+.o_gallery.o_grid.size-big .img {
+  height: 100%;
+}
+
+.o_gallery.o_nomode.o_spc-none .img {
+  padding: 0;
+}
+.o_gallery.o_nomode.o_spc-small .img {
+  padding: 5px;
+}
+.o_gallery.o_nomode.o_spc-medium .img {
+  padding: 10px;
+}
+.o_gallery.o_nomode.o_spc-big .img {
+  padding: 15px;
+}
+
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li {
+  border: 1px solid #aaa;
+}
+.o_gallery .carousel-inner .item img {
+  max-width: none;
+}
+.o_gallery.o_slideshow > .container {
+  height: 100%;
+}
+
+.o_gallery.o_slideshow .carousel,
+.modal-body.o_slideshow .carousel {
+  height: 100%;
+}
+.o_gallery.o_slideshow .carousel .item,
+.modal-body.o_slideshow .carousel .item {
+  padding-bottom: 64px;
+}
+.o_gallery.o_slideshow .carousel img,
+.modal-body.o_slideshow .carousel img {
+  max-height: 100%;
+  max-width: 100%;
+  margin: auto;
+  position: relative;
+  top: 50%;
+  .translateY(-50%);
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators,
+.modal-body.o_slideshow .carousel ul.carousel-indicators {
+  display: block;
+  height: auto;
+  padding: 0;
+  border-width: 0;
+  position: absolute;
+  bottom: 0;
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators > *,
+.modal-body.o_slideshow .carousel ul.carousel-indicators > * {
+  list-style-image: none;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin: 0 0px 5px 5px;
+  padding: 0;
+  border: 1px solid #aaa;
+  text-indent: initial;
+  background-size: cover;
+  background-color: #fff;
+  border-radius: 0;
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators > *:not(.active),
+.modal-body.o_slideshow .carousel ul.carousel-indicators > *:not(.active) {
+  opacity: 0.8;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: gray;
+  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
+}
+.o_gallery.o_slideshow .carousel .carousel-control.left,
+.o_gallery.o_slideshow .carousel .carousel-control.right,
+.modal-body.o_slideshow .carousel .carousel-control.left,
+.modal-body.o_slideshow .carousel .carousel-control.right {
+  background-image: none;
+  background-color: transparent;
+}
+
+// Parallax Theme
+// ==========================
+
+div.carousel{
+  .carousel-indicators{
+    li { border: 1px solid grey; }
+    .active { background-color: grey; }
+  }
+  span.carousel-img img,
+  div.carousel-content {
+    max-height: 95%;
+    padding: 10px;
+  }
+  div.carousel-content {
+    background-color: black;
+    color: white;
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.parallax {
+  background-size: cover;
+  > div {
+    position: relative;
+    display: table;
+    width: 100%;
+    min-height: 200px;
+    > div {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 32px 0;
+    }
+  }
+}
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
new file mode 100644
index 00000000000..e67201d8bf7
--- /dev/null
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -0,0 +1,855 @@
+
+// COMPONENTS USED BY THE WEBSITE BUILDER USER INTERFACE (menu and modals)
+
+
+
+#website_editor_container, body .modal {
+  a {
+    .transition(all 0.3s);
+    color: darken(@wb_color-primary, 10%);
+    &:hover, &:active {
+      text-decoration: none;
+      color: darken(@wb_color-primary, 20%);
+    }
+  }
+  // BUTTONS
+  // ====================
+  .btn {
+    font-size: 12px;
+    color: #999999;
+    font-weight: 800;
+    text-decoration: none;
+    .transition(all 0.3s);
+    &:hover, &:focus {
+      color: white;
+      text-decoration: none;
+    }
+    &.accent {
+      .button-variant(white, @wb_color-accent, @wb_color-accent)
+    }
+    &.primary {
+      .button-variant(white, @wb_color-primary, @wb_color-primary)
+    }
+    &.full {
+      margin-top: 0;
+      margin-bottom: 0;
+      border-radius: 0;
+    }
+    &.btn-primary {
+      .button-variant(white, @wb_color-accent, @wb_color-accent);
+      text-transform: uppercase;
+      box-shadow: @wb_box-shadow;
+    }
+    &.btn-danger {
+      .button-variant(white, @wb_color-danger, @wb_color-danger);
+      text-transform: uppercase;
+      box-shadow: @wb_box-shadow;
+    }
+    &.btn-success {
+      .button-variant(white, @wb_color-success, @wb_color-success);
+      text-transform: uppercase;
+      box-shadow: @wb_box-shadow;
+    }
+  }
+
+
+  // ICONS
+  // ======================
+  .material-icons {
+    font-size: 1em;
+    .translateY(2px);
+    margin-right: 5px;
+  }
+
+  // POPOVERS
+  // ======================
+  .popover {
+    border-radius: 3px;
+    .popover-title{
+      color: @wb_color-text-dark
+    }
+  }
+
+  // INPUTS
+  // ======================
+  .form-control {
+    font-weight: bold;
+    color: @wb_color-text-dark;
+  }
+  .input-group-addon{
+    color: @wb_color-text-dark;
+    font-weight: bold;
+  }
+
+}
+
+// MODALS, main style
+// =================================
+body .modal-backdrop.in {
+  opacity: 0.6;
+}
+
+body .modal-backdrop.in {
+  opacity: 0.6;
+}
+
+body .modal.website_modal {
+  font-family: @wb_font-default;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  margin: 0 auto ;
+  .modal-dialog {
+    margin-top: @wb_modal-margin-top;
+    border: none;
+    .box-shadow(none);
+    .modal-content {
+      border: none;
+      background-color: @wb_color-paper;
+      .box-shadow(none);
+
+      .modal-header {
+        .border-radius(2px 2px 0 0);
+        padding:  @wb_modal-header-padding;
+        background: @wb_modal-header-bg;
+        h1, h2, .h1, .h2, .modal-title {
+          text-align: center;
+          margin-top: 0;
+          font-weight: 600;
+          color: @wb_modal-header-color;
+          line-height: @wb_modal-title-line-height;
+        }
+        .close {
+          font-size: 1.2em;
+          top: 6px;
+          position: absolute;
+          right: 8px;
+          color: @wb_modal-header-color;
+          font-family: sans-serif;
+          font-weight: 600;
+          text-shadow: none;
+          opacity: 1;
+        }
+      }
+
+      .modal-body {
+        padding: @wb_modal-body-padding;
+      }
+
+      .modal-footer {
+        .border-radius(0 0 2px 2px);
+        padding: @wb_modal-footer-padding;
+        background: @wb_modal-footer-bg;
+      }
+
+    }
+  }
+}
+
+@media (min-width: @wb_screen_sm) {
+  // Automatically set modal's width for larger viewports
+  .website_modal {
+    .modal-dialog {
+      width: @wb_modal-md;
+      margin: 30px auto;
+    }
+  }
+    // Modal sizes
+  .website_modal.modal-sm {
+    width: @wb_modal-sm;
+  }
+
+}
+
+@media (min-width: @wb_screen_md) {
+  .website_modal.modal-lg {
+    width: @wb_modal-lg;
+  }
+}
+
+// INPUTS
+// ==================
+
+.switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 0.5em;
+  padding: 0;
+  height: 1.5em;
+  cursor: pointer;
+  .translateY(0.2em);
+  .switch_track {
+    background: #bababa;
+    border-radius: 0.4em;
+    height: 1em;
+    width: 2.5em;
+    display: inline-block;
+    .transition(all 0.3s @wb_md-ease);
+    &:after {
+      content: "";
+      background: #fafafa;
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+      border-radius: 100em;
+      margin-top: -0.3em;
+      margin-left: -0.1em;
+      .transition(all 0.3s @wb_md-ease);
+      .box-shadow(@wb_box-shadow);
+    }
+  }
+  .switch_input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+  }
+  &.checked {
+    .switch_track {
+      background-color: rgb(142, 224, 212);
+      background-color: transparentize(@wb_color-accent, 0.5);
+      &:after {
+        background-color: @wb_color-accent;
+        margin-left: 1.1em;
+      }
+    }
+  }
+  &:hover {
+    .switch_track {
+      &:after {
+        background-color: mix(@wb_color-accent, #fafafa);
+      }
+    }
+  }
+}
+
+
+
+// TEXT INPUT
+// ==========================
+
+// <div class="text-input-group">
+//   <input type="text" required="true"/>
+//   <span class="highlight"></span>
+//   <span class="bar"></span>
+//   <label>Name</label>
+// </div>
+
+.text-input-group {
+  position:relative;
+  margin-bottom:45px;
+
+  input{
+    font-size:18px;
+    padding:10px 10px 10px 5px;
+    display:block;
+    width:300px;
+    border:none;
+    border-bottom:1px solid #757575;
+  }
+  input:focus{ outline:none; }
+
+  /* LABEL ======================================= */
+  label{
+    color:#999;
+    font-size:18px;
+    font-weight:normal;
+    position:absolute;
+    pointer-events:none;
+    left:5px;
+    top:10px;
+    .transition(0.2s ease all)
+  }
+
+  /* active state */
+  input:focus ~ label, input:valid ~ label{
+    top:-20px;
+    font-size:14px;
+    color:#5264AE;
+  }
+
+  /* BOTTOM BARS ================================= */
+  .bar    { position:relative; display:block; width:300px; }
+  .bar:before, .bar:after{
+    content:'';
+    height:2px;
+    width:0;
+    bottom:1px;
+    position:absolute;
+    background:#5264AE;
+    .transition(0.2s ease all);
+  }
+  .bar:before {
+    left:50%;
+  }
+  .bar:after {
+    right:50%;
+  }
+
+  /* active state */
+  input:focus ~ .bar:before, input:focus ~ .bar:after {
+    width:50%;
+  }
+
+  /* HIGHLIGHTER ================================== */
+  .highlight {
+    position:absolute;
+    height:60%;
+    width:100px;
+    top:25%;
+    left:0;
+    pointer-events:none;
+    opacity:0.5;
+  }
+
+  /* active state */
+  input:focus ~ .highlight {
+    .animation(inputHighlighter 0.3s ease);
+  }
+
+}
+
+
+// DRAG&DROP ANIMATIONS
+// ==========================
+
+// .oe_snippet_body {
+//   .opacity(0);
+//   .animation(fadeInDownSmall 1s forwards);
+// }
+
+
+// Login form
+// =================================
+
+.oe_login_form{
+  max-width: 300px;
+  position: relative;
+  margin: 50px auto;
+}
+
+
+// Add new page modal
+// =================================
+
+#website_addPage_modal {
+  text-align: center;
+
+  li {
+    opacity: 0;
+    list-style: none;
+    display: inline-block;
+    margin: 3em;
+    text-align: center;
+    .animation(fadeInDownSmall 1s forwards);
+    &:hover {
+      cursor: pointer;
+      i {
+        border: 3px solid #1cc1a9;
+        box-shadow: 0 0 10px rgba(28, 193, 169, 0.46);
+      }
+    }
+    p {
+      color: white;
+      margin-top: 0.7em;
+    }
+    i {
+      border: 3px solid #2c2c36;
+      width: 80px;
+      height: 80px;
+      font-size: 34px;
+      color: white;
+      display: table-cell;
+      vertical-align: middle;
+      padding: 20px;
+      background-color: #2c2c36;
+      border-radius: 100em;
+      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+    }
+  }
+}
+
+// Select media
+// =========================
+
+.select-media {
+  .modal-body {
+    li.search {
+      ul.pager {
+        margin: 0;
+        li.previous a, li.next a {
+          border-radius: 3px;
+          margin-left: 2px;
+          padding: 6px 14px;
+        }
+      }
+    }
+    .form-group {
+      margin: 0 10px 0 0;
+      input {
+        border-radius: 3px;
+        box-shadow: none;
+      }
+      &:before {
+        font-size: 1.3em;
+        top: 8px;
+        left: 10px;
+      }
+    }
+    .dropdown-toggle {
+      line-height: 0;
+      height: 34px;
+    }
+    .panel {
+      // TODO: element to add in xml
+      padding: 20px;
+      border: 1px solid #dddddd;
+      border-top: none;
+      border-radius: 0;
+    }
+  }
+}
+
+
+// oe_mobile_preview
+// =========================
+
+body .modal.website_modal.oe_mobile_preview .modal-dialog .modal-content {
+  .modal-body{
+    padding: 0;
+  }
+}
+
+// SEO CONFIGURATION
+// TODO: adapt to new style
+// ==================================
+
+.oe_seo_configuration {
+  .oe_remove { color: #E00101;}
+  .oe_seo_suggestion { cursor: pointer; }
+  .oe_seo_keyword {
+    padding: 0.2em 0.4em 0.2em 0.5em;
+    .border-radius(0.4em);
+  }
+  li.oe_seo_preview_g {
+    line-height: 1.2;
+    font-size: small;
+    font-family: arial, sans-serif;
+    h3 { font-size: medium}
+    .r{
+      margin: 0;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-text-overflow: ellipsis;
+      white-space: nowrap;
+      a{
+        color: #1e0fbe;
+        text-decoration: underline;
+        text-transform: none;
+        em {
+          font-style: normal !important;
+        }
+      }
+    }
+    .s{
+      color: #444;
+      max-width: 42em;
+    }
+    li.oe_seo_preview_g .kv, li.oe_seo_preview_g .slp {
+      display: block;
+      margin-bottom: 1px;
+    }
+    li.oe_seo_preview_g .f {
+      color: #666;
+      margin-bottom: 1px;
+      cite {
+        color: #006621;
+        font-style: normal;
+        font-size: 14px;
+      }
+    }
+    li.oe_seo_preview_g .st {
+      line-height: 1.24;
+    }
+  }
+}
+
+
+// Background position
+// ===================================
+
+.web_editor-background_position{
+  .modal-body {
+    padding: 0!important;
+  }
+  .panel-group {
+    margin-bottom: -1px;
+  }
+  .panel-group .panel{
+    border-radius: 0;
+    margin: 0;
+    overflow: hidden;
+    &:first-child{
+      border-radius: 2px 2px 0 0;
+    }
+    &:last-child{
+      border-radius: 0 0 2px 2px;
+    }
+    .panel-heading{
+      padding: 5px 0 5px 30px;
+      cursor: pointer;
+      label.radio {
+        margin: 0;
+      }
+    }
+    .panel-body{
+      position: relative;
+    }
+  }
+
+  .help-controll{
+    position: absolute;
+    top: 5px;
+    right: 2px;
+  }
+
+  .help.collapse, .help.collapsing{
+    width: 100%;
+    .simulator, .help-text{
+      display: inline-block;
+      width: 30%;
+      position: relative;
+      overflow: hidden;
+      height: 120px;
+    }
+    .help-text{
+      width: 60%;
+      height: 100px;
+    }
+  }
+  .simulator{
+    .bg{
+      position: relative;
+      height: 100px;
+      background-color: #A3F1DA;
+      background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAGSgAwAEAAAAAQAAAEIAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAAAAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAAAAEWzFhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPZGVzYwAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRlc2MAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAACxSZWZlcmVuY2UgVmlld2luZyBDb25kaXRpb24gaW4gSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdmlldwAAAAAAE6T+ABRfLgAQzxQAA+3MAAQTCwADXJ4AAAABWFlaIAAAAAAATAlWAFAAAABXH+dtZWFzAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAACjwAAAAJzaWcgAAAAAENSVCBjdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHBAckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsECywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQTBCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYFtQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZB6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14Peg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLDEuMTAxMjE0MTYxODE6QTxRPlFAYUJxRJFGoUixStFM4U8BUSFTQVVhV4FZsVvRXgFgMWJhZJFmwWjxayFtYW+hcdF0EXZReJF64X0hf3GBsYQBhlGIoYrxjVGPoZIBlFGWsZkRm3Gd0aBBoqGlEadxqeGsUa7BsUGzsbYxuKG7Ib2hwCHCocUhx7HKMczBz1HR4dRx1wHZkdwx3sHhYeQB5qHpQevh7pHxMfPh9pH5Qfvx/qIBUgQSBsIJggxCDwIRwhSCF1IaEhziH7IiciVSKCIq8i3SMKIzgjZiOUI8Ij8CQfJE0kfCSrJNolCSU4JWgllyXHJfcmJyZXJocmtyboJxgnSSd6J6sn3CgNKD8ocSiiKNQpBik4KWspnSnQKgIqNSpoKpsqzysCKzYraSudK9EsBSw5LG4soizXLQwtQS12Last4S4WLkwugi63Lu4vJC9aL5Evxy/+MDUwbDCkMNsxEjFKMYIxujHyMioyYzKbMtQzDTNGM38zuDPxNCs0ZTSeNNg1EzVNNYc1wjX9Njc2cjauNuk3JDdgN5w31zgUOFA4jDjIOQU5Qjl/Obw5+To2OnQ6sjrvOy07azuqO+g8JzxlPKQ84z0iPWE9oT3gPiA+YD6gPuA/IT9hP6I/4kAjQGRApkDnQSlBakGsQe5CMEJyQrVC90M6Q31DwEQDREdEikTORRJFVUWaRd5GIkZnRqtG8Ec1R3tHwEgFSEtIkUjXSR1JY0mpSfBKN0p9SsRLDEtTS5pL4kwqTHJMuk0CTUpNk03cTiVObk63TwBPSU+TT91QJ1BxULtRBlFQUZtR5lIxUnxSx1MTU19TqlP2VEJUj1TbVShVdVXCVg9WXFapVvdXRFeSV+BYL1h9WMtZGllpWbhaB1pWWqZa9VtFW5Vb5Vw1XIZc1l0nXXhdyV4aXmxevV8PX2Ffs2AFYFdgqmD8YU9homH1YklinGLwY0Njl2PrZEBklGTpZT1lkmXnZj1mkmboZz1nk2fpaD9olmjsaUNpmmnxakhqn2r3a09rp2v/bFdsr20IbWBtuW4SbmtuxG8eb3hv0XArcIZw4HE6cZVx8HJLcqZzAXNdc7h0FHRwdMx1KHWFdeF2Pnabdvh3VnezeBF4bnjMeSp5iXnnekZ6pXsEe2N7wnwhfIF84X1BfaF+AX5ifsJ/I3+Ef+WAR4CogQqBa4HNgjCCkoL0g1eDuoQdhICE44VHhauGDoZyhteHO4efiASIaYjOiTOJmYn+imSKyoswi5aL/IxjjMqNMY2Yjf+OZo7OjzaPnpAGkG6Q1pE/kaiSEZJ6kuOTTZO2lCCUipT0lV+VyZY0lp+XCpd1l+CYTJi4mSSZkJn8mmia1ZtCm6+cHJyJnPedZJ3SnkCerp8dn4uf+qBpoNihR6G2oiailqMGo3aj5qRWpMelOKWpphqmi6b9p26n4KhSqMSpN6mpqhyqj6sCq3Wr6axcrNCtRK24ri2uoa8Wr4uwALB1sOqxYLHWskuywrM4s660JbSctRO1irYBtnm28Ldot+C4WbjRuUq5wro7urW7LrunvCG8m70VvY++Cr6Evv+/er/1wHDA7MFnwePCX8Lbw1jD1MRRxM7FS8XIxkbGw8dBx7/IPci8yTrJuco4yrfLNsu2zDXMtc01zbXONs62zzfPuNA50LrRPNG+0j/SwdNE08bUSdTL1U7V0dZV1tjXXNfg2GTY6Nls2fHadtr724DcBdyK3RDdlt4c3qLfKd+v4DbgveFE4cziU+Lb42Pj6+Rz5PzlhOYN5pbnH+ep6DLovOlG6dDqW+rl63Dr++yG7RHtnO4o7rTvQO/M8Fjw5fFy8f/yjPMZ86f0NPTC9VD13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23////CABEIAEIAZAMBEgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAADAgQBBQAGBwgJCgv/xADDEAABAwMCBAMEBgQHBgQIBnMBAgADEQQSIQUxEyIQBkFRMhRhcSMHgSCRQhWhUjOxJGIwFsFy0UOSNIII4VNAJWMXNfCTc6JQRLKD8SZUNmSUdMJg0oSjGHDiJ0U3ZbNVdaSVw4Xy00Z2gONHVma0CQoZGigpKjg5OkhJSldYWVpnaGlqd3h5eoaHiImKkJaXmJmaoKWmp6ipqrC1tre4ubrAxMXGx8jJytDU1dbX2Nna4OTl5ufo6erz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAECAAMEBQYHCAkKC//EAMMRAAICAQMDAwIDBQIFAgQEhwEAAhEDEBIhBCAxQRMFMCIyURRABjMjYUIVcVI0gVAkkaFDsRYHYjVT8NElYMFE4XLxF4JjNnAmRVSSJ6LSCAkKGBkaKCkqNzg5OkZHSElKVVZXWFlaZGVmZ2hpanN0dXZ3eHl6gIOEhYaHiImKkJOUlZaXmJmaoKOkpaanqKmqsLKztLW2t7i5usDCw8TFxsfIycrQ09TV1tfY2drg4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwACAQECAQECAgECAgICAgMFAwMDAwMGBAQDBQcGBwcHBgYGBwgLCQcICggGBgkNCQoLCwwMDAcJDQ4NDA4LDAwL/9sAQwECAgIDAgMFAwMFCwgGCAsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsL/9oADAMBAAIRAxEAAAE1Hwe70/Zex4jj2s4+Kehqfjn3vm6vlj7LF8Q/Rgbw76T0w+OPszox+IfrxG+SfYnVVOund/OPPr9g+rp6byz38fomBRiE0L4O/mea4PRr67h7O982fP6UrvpvmeeIblrt1+dvdnHwL9t8+vdFE7Q6v21SIGbXh7fH7nl7/GOoTqpL3yOr19p9P8zZtOjnWJS3cR817dNLtW2CsYojShSxIm/ifqqv4L7UG8+9E5emwd9nnIcwGakmqHQk7fOYhOrYM2yO3mLbUuRO5Kg0VYA2M7y3/9oACAEBAAEFApZM9m8O+Gk3Isfq5RbXPinwfbpi8TeGk3s58Gpxu702scX1j7za2FjfC3lvpRdS7YeVLsfij9Gx/wBP3u6ptmV9WW5x7m12yZBve3iWO58DC/TZeGbJGzX/ANSO1lPhv6sbSysdw+q+wuHL9UlgB4g+rT3G73faRtW3K3JeVht6PFd54W2eHYbbmabgvJw238VmT176oBPgfdtJ8Si9TRe4WAu0eOPCs67aTw7dIXYWMO2W9sp8zSc5q3KYWkF971cb94osebb7Le+63vvPOguBkVR1E6UrcmywLWkVMWjz0BrN4lg58cG4CG93XxXzleGESqOxz8zapNXR3dvzU3O/G2maS8nlRd2v3i1mmFnPaJh93ilTGvaFcjbVTVfMq8ncbTb3sh0aS6sqe57nLZ2G+7jvt3Hss+42rsCffUTEoQslpDDSk0pqnXt5yJyc1uFLVtaQqGwTDImPFhLAoQAwGWn95+dXCQ/SEM8T+/UKGMuPWRo4f//aAAgBAxEBPwH+ZCN7OHqCZS5eUWCxkD5ZwPpFhil+TkGw8xZbZeUSiE5QGPUW+7J6j5Q/w+nsQ9LZyMzZ0D02IyPDLJKFccOPPXEeXruijmjvj5SK4LScbGG3spAelz+yXPkEwKDvjDiITMSj4eso5jTTTSNvr2wIjyRb7n5Mcpj6s+ruNB47L+t//9oACAECEQE/AZQjI+XDMQhUU5rbBHLLjwwyQ9ZOTqYngFxneOJOOU8fhkJT5LHDfkM+li+1BjiHmXlAA8a9TlERywxxyAkHlzdPfMuHoetlilsn4Qb5dxRlTk3CmkakvU4fdD00PbJ3Fy1lj5dhjK7ejsYRuSW3cmUuwpt2j1ZQjL0f0kd25pppp2/W/9oACAEBAAY/AglWqlAeT5aE1Uf5LCroRkf2WJIUpqn4OumjqkjR8mE8PNmG0nGJFK8vVqVf5FSjUn1ZMYoxQ0dOPbkSErwYEGqkpov4F9TpUsqRJQ1fuwEQqKKVxNfVnHc7gLJ9El4gc+mmRTxf0luB9jOEYdYK4PIallqu4BVMooSxFZpA/r7+mtWvH1YVFUKBYgWrIrL1D6XRXFn3QE/BkGJX4NMNkkIQgUA+4B9jtVWF0I4Iir3iLGvN001cS5ZVRCKXmmn5h6H4OJVuagmoLSpP5hXvSQOuCfuJ+b6R8WpE6FpUUdKqaF8z6WTGsdBH0k/NpVcf8M0V7ko9plEgoQ9PuHHzalSI6mpE6ax5kj8WORoPRxp+37mcyAVfdV7kgySHy9GQn3aL7CWtO5pQrLgUaNAkTU19Xr931evfV8KvQDV6AVPfqHbSn3D2LS099e//xAAzEAEAAwACAgICAgMBAQAAAgsBEQAhMUFRYXGBkaGxwfDREOHxIDBAUGBwgJCgsMDQ4P/aAAgBAQABPyF8WhWoK+cPD3Wyvo1fhauQfV47cax/AbntOIckXmSQyJ8z/VmG9Flb5qBgt5ArCj730P3czWcWGqQib77/AEnV6i+a8KcB1xepFRL2T5ru6lf1CKsJPKA+1XZqo4jRGN6dUEhBzWfJYYcpMzxRovKhy/5wYrk1z99jR8yajUoU8U9VDK8PihUTReMVMBUNz352fFKic0FirWIDtrvYyiqP3kLGPSGGsIyHrSfMn9U1GCzQOpArkf8AkGJmvlp6vOZX9P8AhsfCrHwGvFyWmG/j4p8B24T74mc0Q4now9KktMKfu6f8PwkZ7rGHwjTjgWPObouROTbAeYqClzHjxz8BQzMG5iZR9N9UE8rhkMS+/wDjnGaxsx4ImKxfyVB0ujOqh1F6nclHy2jnMTkWP4qYaoBAXyNmXXZqCnAZFUlsnA0qw7RaswwQvLqrDsPc1d8J6vG/C9+FjbAuuYNvNFSME3IOvMWZkBCvwEcXtWU3C8CuijCHNQUNJZBX9jRMnuhiG1IdeCuTlXqnXzf/2gAMAwEAAhEDEQAAEHQAHieAHJ0h2gsI7APNbifmvugT9LhuU5lJNdWQCBisb//EADMRAQEBAAMAAQIFBQEBAAEBCQEAESExEEFRYSBx8JGBobHRweHxMEBQYHCAkKCwwNDg/9oACAEDEQE/EPmz9WcXBkA6Z8Ji8GzeF/aEKr9n/FxFLqMfgXQOSrM22+CLqB6LX/EsXW2Gtsv5zRV90SOA4PM24Cfokb2QXsg+IFtpMnob825Uuf4/X6+8sNB3wH64sUY/PuKvWHbj64Z4W2j4T2H82/6SRvDPynB1a5J/P/JfotLbYjfW+Y7jr8L3+D//2gAIAQIRAT8Qz7z/ADhWF8icoRVsFyH73An9y5TbLsJ/M9oTDgYAvUDxrM4z8kbg4sJcLFfwhk/Z8ya62px8x7sv6YgB4kumc7n5EwB3DbcGX5+S8I/vfcH339c3Og/l1P5F/r4hkxi0cMEecC0MHI+5/OGxNgQWz5t/X8WZ8PHr178b/9oACAEBAAE/ECv7wCc5+7NjLCh5S8UMCGaDPalk8YhfNARQ4Bw52sYKFJKH9WfkGMfSerwtciOjCCfaqOj0E6VV5VsvvwJDWVoaTDXVsNk7YvB92JhMRw8Tx6qmFg6Mou569U1CEO0RVFYRDwrHcmNJLnp2rWiikZCRLLfXFV54WmOJne2awNhPlnEu+ayNO8xUSBMVQ+WvJUh2u9T27qqOc8iFlQs9dwjKr233dVk0z4spTh7piE+aDkOP0VFu2OeEP82cHU13Q9QUUkC4aJ6paSMzmxuwYOPhR6E2VlM0YGMCKSG9N6qatgpopiXGxXOyCbwkDx1mHiat2o9kHk6HkNzKDREO/wCqBEUfksy0CQb1VXhmlZKfRRF07ssxKW9rgkjMfd3tm+B3XeQYzCCYS2Mk0FqhRozJjCP3DDcrqWhCh8gP7q5ktHgFlgp5qB0pBhOHVQDZFo0wMhyvmlFe3u75gg+6diYfdFZHfPyVwmx8QQAdEAWJTDnORfI/Fh9I4I9IOrNQdE+UrW0jM+OKsg4OeLjyQ77qAYEoKE/7oJlQeGZymhhPxXBOcbk3Q7PweaagCxAwySDXLzA8ooTIiCoiHdVBKefI1TgQRBOYe/5raDgg4PTWUuECx+aryHcuURqXH1cCLIIgh8pSQpJicE+rDksJBZn4rkYrvp6fPdwgcQhmLLlqdAZ8QhYGOcRWThwgXXPdipVZAlDyFNUhiHHz+bgARAdlks4B16XxYH7it+If6qJFURK3M4Ln20zoCEQ02kKBBk0QQRMJ3LWnlkF96UhASXHUgQ15ExMETUCwSc15lgd75q/Ip8Ji/q//2Q==');
+      background-size: cover;
+      margin: 10px auto 10px 0;
+      width: 120px;
+      border: 1px dotted #888787;
+    }
+    .el{
+      position: absolute;
+      height: 77px;
+      background-color: rgba(255, 255, 255, 0);
+      top: 20px;
+      left: 10px;
+      width: 100px;
+      border: 1px solid #222;
+      box-shadow: 0 0 0 100em rgba(255, 255, 255, 0.66);
+    }
+    &.contain_bg{
+      .bg{
+        height: 77px;
+        margin: 10px auto 10px 10px;
+        width: 80px;
+      }
+      .el {
+        top: 10px;
+        left: 0px;
+      }
+    }
+  }
+
+  .cover_editing_container {
+    border-top: 1px solid black;
+    border-bottom: 1px solid white;
+    padding: 0px 25px 25px 25px;
+    .linear-gradient(lighten(@wb_color-dark,5%), darken(@wb_color-dark, 10%), -150deg);
+    h6 {
+      color: white;
+      font-weight: bold;
+    }
+    .object{
+      width: 100%;
+      background: white;
+      min-height: 10px;
+      position:relative;
+      overflow: hidden;
+      .box-shadow(0 0 10px #000);
+      > img{
+        cursor: crosshair;
+        border-top: 1px solid #5A5A5A;
+        border-bottom: 1px solid #111;
+        .o_noSelect();
+      }
+      &:hover .focus_point:before{
+        opacity: 0.5
+      }
+    }
+    .ui_info {
+      .animation(fadeInOut 2s ease forwards);
+      display: block;
+      position: absolute;
+      bottom: 1px;
+      color: #333;
+      background-color: rgba(255, 255, 255, 0.8);
+      right: 0;
+      padding: 3px 13px;
+      text-align: center;
+      font-weight: bold;
+      pointer-events: none;
+      span {
+        font-weight: normal;
+      }
+      .x {
+        margin-right: 10px
+      }
+    }
+    .grid{
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      background: fadeOut(lighten(@wb_color-accent, 30%), 50%);
+      display: block;
+      top: 33.33%;
+      left: 0;
+      .o_noSelect();
+      pointer-events: none;
+      &.grid-2{
+        top: 66.66%
+      }
+      &.grid-3{
+        top: 0;
+        left: 33.33%;
+        width: 1px;
+        height: 100%
+      }
+      &.grid-4{
+        top: 0;
+        left: 66.66%;
+        width: 1px;
+        height: 100%
+      }
+    }
+    .focus_point{
+      position: absolute;
+      border: 2px solid white;
+      border-radius: 100em;
+      width: 30px;
+      height: 30px;
+      top: 0;
+      left: 0;
+      margin-top: -15px;
+      margin-left: -15px;
+      .box-shadow(0 0 1px #333);
+      pointer-events: none;
+      .o_noSelect();
+      &.ready {
+        .transition(all 0.2s ease);
+      }
+      &:before {
+        pointer-events: none;
+        .o_noSelect();
+        content: "";
+        display: block;
+        width: 100px;
+        height: 100px;
+        margin-top: -37px;
+        margin-left: -37px;
+        border: 1px solid #EAEAEA;
+        background: rgba(247, 76, 76, 0);
+        border-radius: 100em;
+        opacity: 1;
+        .box-shadow(0 0 0 100em rgba(0, 0, 0, 0.33));
+        .transition(opacity 0.2s ease);
+      }
+    }
+  } // cover_editing_container
+  #collapse_custom {
+    .panel-body{
+      padding: 15px 30px;
+    }
+    legend{
+      margin-bottom: 5px;
+    }
+    fieldset {
+      padding-bottom: 20px;
+      label.control-label {
+        font-size: 0.9em;
+      }
+      > p {
+        margin: 0 0 15px;
+        font-size: 0.9em;
+      }
+    }
+  }
+}
+
+// CUSTOMIZE THEME
+// TODO: adapt to new style
+// ==================================
+
+#theme_error {
+  background: #ffc;
+}
+
+#theme_customize_modal {
+  overflow: visible;
+  z-index: 1020;
+  background: transparent;
+  display: block;
+  .modal-dialog {
+    top: 75px;
+    width: auto;
+    margin: 0;
+    position: absolute;
+    right: 10px;
+    font-family: "Lato-Regular";
+    font-weight: normal;
+    text-transform: capitalize;
+    letter-spacing: normal;
+  }
+  .modal-h5 {
+    color: #ffffff;
+    font-family: "Lato-Regular";
+    font-weight: normal;
+    text-transform: uppercase;
+    letter-spacing: normal;
+    font-size: 14px;
+    color: white;
+    padding: 4px 0 4px 4px;
+    background-color: #bdc3c7;
+  }
+  table {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  label {
+    display: block;
+    text-align: center;
+    > div, > img {
+      border: 1px solid #fff;
+      line-height: 30px;
+      font-size: 0.9em;
+      margin: 2px 4px;
+    }
+    &.checked > div, &.checked > img {
+      box-shadow: 2px 2px 3px #888;
+      border: 1px solid #666;
+    }
+    img {
+      width: 60px;
+      height: 35px;
+      margin: 2px;
+      border: 1px solid rgba(136, 136, 136, 0.5);
+    }
+    input {
+      display: none;
+    }
+  }
+  .loading_backdrop {
+    display: none;
+  }
+  &.loading .loading_backdrop {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.3;
+    position: absolute;
+    z-index: 1;
+  }
+}
+
+/* ---- force the browse to re-compute the stylesheets ---- */
+body.theme_customize_css_loading {
+  magin-top: 1px;
+  #wrapwrap {
+    magin-top: -1px;
+  }
+}
+
+// ACE EDITOR
+// ================================
+.oe_ace_view_editor {
+  position: fixed;
+  right: 0;
+  z-index: 1001;
+  height: 100%;
+  background: #2F3129;
+  color: white;
+  .oe_ace_view_editor_title {
+    width: 100%;
+    padding-top: 0;
+    padding-left: 0;
+    height: 30px;
+    .oe_view_list {
+      width: 50%;
+      height: 30px;
+      font-size: 14px;
+      font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+      line-height: normal;
+    }
+    .btn {
+      height: 30px;
+      padding: 0 4px 0 4px;
+      font-size: 14px;
+      font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+      line-height: normal;
+    }
+  }
+  .ace_editor {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    left: 0;
+    .ace_gutter {
+      cursor: ew-resize;
+    }
+  }
+  #ace-view-id {
+    padding: 0 1em;
+  }
+  &.oe_ace_open {
+    .opacity(0.97);
+  }
+  &.oe_ace_closed {
+    z-index: -1000;
+    .opacity(0);
+  }
+}
+.oe_include_bundles {
+  font-weight: normal;
+  padding: 0 8px;
+}
+
+
+
+
+// PLANNER DIALOG
+// ==============================
+
+#PlannerDialog {
+  top: @wb_editor-bar-height + 10px;
+  -webkit-box-shadow: 0 3px 9px #666666;
+  box-shadow: 0 3px 9px #666666;
+}
+
+
+// POPOVER _NAVIGATION
+// ==============================
+.tour .popover-navigation {
+  margin-left: 13px;
+  margin-bottom: 8px;
+}
diff --git a/addons/website/static/src/less/website.ui.interactions.less b/addons/website/static/src/less/website.ui.interactions.less
new file mode 100644
index 00000000000..edab3b4d6ec
--- /dev/null
+++ b/addons/website/static/src/less/website.ui.interactions.less
@@ -0,0 +1,61 @@
+// Transitions
+// ======================
+
+@wb_md-ease: cubic-bezier(0.19, 1, 0.22, 1);
+
+// Animation
+// ======================
+
+@-webkit-keyframes fadeInDownSmall {
+  0% {
+    opacity: 0;
+    .translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    .translateY(0);
+  }
+}
+@keyframes fadeInDownSmall {
+  0% {
+    opacity: 0;
+    .translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    .translateY(0);
+  }
+}
+@-webkit-keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes inputHighlighter {
+  from { background: @wb_color-accent; }
+  to   { width:0; background:transparent; }
+}
diff --git a/addons/website/static/src/less/website.ui.less b/addons/website/static/src/less/website.ui.less
new file mode 100644
index 00000000000..a54505f2bf6
--- /dev/null
+++ b/addons/website/static/src/less/website.ui.less
@@ -0,0 +1,334 @@
+// Fonts
+// ============================
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+
+// Layouting
+// ============================
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+#wrapwrap {
+  width: auto;
+  min-height: 100%;
+  overflow-x: hidden;
+  margin-bottom: -160px;
+  padding-bottom: 160px;
+}
+
+main {
+  max-width: 100%;
+}
+
+// Main menu style
+// ========================================================
+#website_editor_container {
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  position: relative;
+  height: @wb_editor-bar-height;
+  width: 100%;
+  #website_main_menu_navbar {
+    background: @wb_editor-bar-bg;
+    width: 100%;
+    height: @wb_editor-bar-height;
+    min-height: @wb_editor-bar-height;
+    font-family: @wb_font-default;
+    font-weight: 600;
+    z-index: 9999;
+    position: fixed;
+    color: @wb_color-text-normal;
+    border: none;
+    position: fixed;
+    z-index: 1001;
+    .border-radius(0px);
+    margin-bottom: 0px;
+    .o-transition(opacity 0.4s @wb_md-ease);
+    &.editing_mode > ul {
+      opacity: 0;
+    }
+  }
+}
+
+
+// Applications switcher
+// ========================================================
+#website_main_menu_navbar {
+  .o_menu_toggle {
+    position: relative;
+    padding: 10px 15px;
+    color: white;
+    text-shadow:0 1px 0 @wb_color-primary-d10;
+    &:hover{
+      background-color: @wb_color-primary-d10;
+      color: white;
+    }
+  }
+  .o_menu_brand {
+    .user-select(none);
+    position: relative;
+    cursor: default;
+    margin-right: 25px;
+    font-size: 22px;
+    font-weight: 800;
+    float: left;
+    padding: 13px 0px;
+    line-height: 18px;
+    height: @wb_editor-bar-height;
+    color: white;
+    text-shadow:0 1px 0 @wb_color-primary-d10;
+  }
+}
+
+
+// Menu UL
+// ========================================================
+#website_main_menu_navbar {
+  > ul {
+    height: @wb_editor-bar-height;
+    display: inline-block;
+    float: left;
+    padding: 0 0 0 5px;
+    opacity: 1;
+    font-size: 0; // remove default browser margin beetwen inline-block elements
+    &.right {
+      float: right;
+      padding: 0;
+    }
+  }
+}
+
+
+// General 'li' + animated edit button (.ui-effects-wrapper)
+// ==========================================================
+#website_main_menu_navbar {
+  > ul > li,
+  > ul > .ui-effects-wrapper {
+    font-size: @wb_font-size-def; // restore default font-size
+    height: @wb_editor-bar-height;
+    display: inline-block;
+    position: relative;
+    list-style: none;
+    > a, > button {
+      color: @wb_editor-bar-link-color;
+      text-shadow:0 1px 0 @wb_editor-bar-link-shadow;
+      padding: 0 10px;
+      font-weight: 600;
+      height: @wb_editor-bar-height;
+      line-height: @wb_editor-bar-height - 5px;
+      display: inline-block;
+      margin: 0;
+      font-size: 11px;
+      text-decoration: none;
+      text-transform: uppercase;
+      border: none;
+      outline: none;
+      .o-transition(all 0.2s ease);
+      &.full {
+        color: white;
+      }
+      &.accent{
+        text-shadow:0 1px 0 @wb_color-accent-d10;
+      }
+    }
+    &:hover, &:active, &:focus {
+      > a, > button {
+        color: white;
+        text-decoration: none;
+        border: none;
+        outline: none;
+      }
+    }
+  }
+}
+
+
+// Menu dropdowns
+// ==========================================================
+#website_main_menu_navbar > ul {
+   > li.dropdown {
+    font-size: @wb_font-size-def;
+    position: relative;
+    > .dropdown-toggle {
+      color: @wb_dropdown-toggle-color;
+      height: @wb_editor-bar-height;
+      line-height: @wb_editor-bar-height - @wb_editor-dropdown-border-height;
+      border-top: @wb_editor-dropdown-border-height solid transparent;
+      text-shadow:0 1px 0 @wb_dropdown-toggle-shadow-color;
+      border-top: @wb_editor-dropdown-border-height solid transparent;
+      .box-shadow(inset 0 9px 16px -32px transparent);
+      &:hover, &:focus, &:active {
+        outline: 0;
+      }
+      .caret{}
+    }
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      display: none; // none by default, but block on "open" of the menu
+      float: left;
+      min-width: 160px;
+      padding: @wb_dropdown-menu-padding;
+      list-style: none;
+      text-align: left;
+      background-clip: padding-box;
+      margin: 0;
+      overflow: hidden;
+      border-radius: 0;
+      border: none;
+      background-color: @wb_dropdown-menu-color;
+      .box-shadow(@wb_dropdown-shadow);
+      li {
+        display: block;
+        white-space: nowrap;
+        > a {
+          padding: @wb_dropdown-li-padding;
+          color: @wb_dropdown-li-color;
+          display: block;
+        }
+        &:hover {
+          background: @wb_dropdown-li-hover-bg;
+          > a {
+            color: @wb_dropdown-li-hover-color;
+            background: transparent;
+          }
+        }
+      }
+      li > ul {
+        background: @wb_dropdown-menu-color;
+        padding: 2px 0 0 0;
+        &:before{
+          content: "";
+          margin: @wb_dropdown-li-padding;
+          margin-top: 0;
+          display: block;
+          background: fadeout(@wb_dropdown-li-color, 50%);
+          height: 1px;
+        }
+        > li > a {
+          padding: @wb_dropdown-li-wrapped-padding;
+        }
+      }
+
+      li.divider {
+        pointer-events: none;
+        margin: @wb_dropdown-li-divider-margin;
+        padding: 0;
+        background-color: fadeout(@wb_dropdown-li-color, 50%);
+      }
+      li.dropdown-header{
+        pointer-events: none;
+        margin: @wb_dropdown-li-divider-margin;
+        padding: 0;
+        color: fadeout(@wb_dropdown-li-color, 50%);
+        &:hover {
+          background: transparent;
+        }
+      }
+    } // /.wb_dropdown-menu, .dropdown-menu
+    &.right{
+      .dropdown-menu {
+        position: absolute;
+        text-align: right;
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+// Menu dropdowns OPEN
+// ==========================================================
+#website_main_menu_navbar > ul {
+  > li.dropdown.open {
+    > .dropdown-toggle {
+      background-color: @wb_dropdown--open-toggle-bg-color;
+      color:  @wb_dropdown--open-toggle-color;
+      text-shadow:0 1px 0 @wb_dropdown--open-toggle-shadow-color;
+      border-top: @wb_editor-dropdown-border-height solid white;
+      .box-shadow(inset 0 9px 16px -12px fadeOut(white, 30%));
+    }
+    > .dropdown-menu{
+      display: block;
+    }
+  }
+}
+
+// Ripples
+// ==========================================================
+.ripple {
+	display: block;
+  position: absolute;
+	background: hsl(180, 40%, 80%);
+	border-radius: 100%;
+	.scale(0);
+  &.animate{
+    .animation(ripple 0.3s linear);
+  }
+}
+
+// Child unique elements
+// ==========================================================
+#website_main_menu_navbar {
+  #oe_editzone {
+    padding: 0;
+  }
+  #oe_systray {
+    .transition(opacity 0.3s @wb_md-ease);
+    .opacity(0);
+    &.ready{
+      .opacity(1);
+    }
+  }
+  .o_planner_systray {
+    float: right;
+    width: 45px;
+    margin-right: 5px;
+    .progress {
+      margin: ((@wb_editor-bar-height/2)-3px) 0;
+      height: 8px;
+      background-color: @wb_color-primary-d10;
+      .progress-bar {
+        box-shadow: none;
+        background-color: @wb_color-accent;
+      }
+    }
+  }
+  .o_mobile_preview{
+    float: right;
+    margin: 0 10px 0 20px;
+    a{
+      font-size: 20px;
+      line-height: @wb_editor-bar-height;
+    }
+  }
+  li.content{
+    #website_addPage_list ~ li{
+      display: none;
+    }
+  }
+}
+
+
+// Entering in 'Edit Mode'
+// ==========================================================
+body.editor_enable {
+  #wrapwrap {
+    .o-transition(margin-left 0.4s @wb_md-ease);
+  }
+}
+
+body.editor_enable.editor_has_snippets {
+  #wrapwrap {
+    margin-left: 210px;
+  }
+}
+
+// UTILITY CLASSES
+// ==========================================================
+.wb_hidden_xs{
+  @media screen and (max-width: @wb_screen_sm){
+    display: none;
+  }
+}
diff --git a/addons/website/static/src/less/website.ui.mixins.less b/addons/website/static/src/less/website.ui.mixins.less
new file mode 100644
index 00000000000..b8d3890d920
--- /dev/null
+++ b/addons/website/static/src/less/website.ui.mixins.less
@@ -0,0 +1,190 @@
+// Button variants
+// ========================
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+.button-variant(@color, @background, @border) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+  &:focus,
+  &.focus {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 25%);
+  }
+  &:hover {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: @color;
+    background-color: darken(@background, 10%);
+    border-color: darken(@border, 12%);
+    &:hover,
+    &:focus,
+    &.focus {
+      color: @color;
+      background-color: darken(@background, 17%);
+      border-color: darken(@border, 25%);
+    }
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: @background;
+      border-color: @border;
+    }
+  }
+  .badge {
+    color: @background;
+    background-color: @color;
+  }
+}
+
+// Button sizes
+.button-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+}
+
+// Transitions
+.transition(@transition...) {
+  -moz-transition: @transition;
+  -o-transition: @transition;
+  -webkit-transition: @transition;
+  transition: @transition;
+}
+
+.transition-property(@property...) {
+  -moz-transition-property: @property;
+  -o-transition-property: @property;
+  -webkit-transition-property: @property;
+  transition-property: @property;
+}
+
+.transition-duration(@duration...) {
+  -moz-transition-property: @duration;
+  -o-transition-property: @duration;
+  -webkit-transition-property: @duration;
+  transition-property: @duration;
+}
+
+.transition-timing-function(@timing...) {
+  -moz-transition-timing-function: @timing;
+  -o-transition-timing-function: @timing;
+  -webkit-transition-timing-function: @timing;
+  transition-timing-function: @timing;
+}
+
+.transition-delay(@delay...) {
+  -moz-transition-delay: @delay;
+  -o-transition-delay: @delay;
+  -webkit-transition-delay: @delay;
+  transition-delay: @delay;
+}
+
+// ANIMATIONS
+// ===========================
+
+.animation(@str) {
+  -webkit-animation: @str;
+  -moz-animation: @str;
+  -ms-animation: @str;
+  -o-animation: @str;
+  animation: @str;
+}
+
+
+// BACKGROUND GRADIENT
+// =======================
+
+.linear-gradient(@start-color: #555; @end-color: #333; @deg: 45deg) {
+  background-repeat: repeat-x;
+  background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
+  background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}
+
+
+.box-shadow(@string) {
+  -webkit-box-shadow: @string;
+  -moz-box-shadow: @string;
+  box-shadow: @string;
+}
+
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
+// TRANSFORM
+// ===================================
+.transform(@transforms) {
+  -moz-transform: @transforms;
+  -o-transform: @transforms;
+  -ms-transform: @transforms;
+  -webkit-transform: @transforms;
+  transform: @transforms;
+}
+
+// rotate
+.rotate(@deg) {
+  .transform(rotate(@deg));
+}
+
+// scale
+.scale(@scale) {
+  .transform(scale(@scale));
+}
+
+// translate
+.translate(@x, @y) {
+  .transform(translate(@x, @y));
+}
+
+// translate
+.translateY(@y) {
+  .transform(translateY(@y));
+}
+
+// skew
+.skew(@x, @y) {
+  .transform(skew(@xdeg, @ydeg));
+}
+
+// transform origin
+.transform-origin(@origin) {
+  moz-transform-origin: @origin;
+  -o-transform-origin: @origin;
+  -ms-transform-origin: @origin;
+  -webkit-transform-origin: @origin;
+  transform-origin: @origin;
+}
+
+// HELPERS
+// ======================================
+
+.user-select(@str) {
+  -moz-user-select: @str;
+  -webkit-user-select: @str;
+  -ms-user-select: @str;
+  user-select: @str;
+}
diff --git a/addons/website/static/src/less/website.ui.variables.less b/addons/website/static/src/less/website.ui.variables.less
new file mode 100644
index 00000000000..dc933921b24
--- /dev/null
+++ b/addons/website/static/src/less/website.ui.variables.less
@@ -0,0 +1,105 @@
+body {
+  visibility: visible;
+}
+
+// Fonts
+// =======================
+@wb_font-default  : "Roboto", Roboto, sans-serif;
+@wb_font-size-def : 12px;
+
+// COLORS UI
+// =======================
+@wb_color-dark    : #2c2c36;
+@wb_color-darker  : darken(#2c2c36,10%);
+@wb_color-divider : #33363e;
+@wb_color-normal  : #50545d;
+@wb_color-light   : #4e525b;
+
+@wb_color-paper    : #fbfbfd;
+@wb_color-inactive : #646465;
+
+@wb_color-text-normal : #999999;
+@wb_color-text-light  : #d4d5d7;
+@wb_color-text-dark   : #505050;
+
+@wb_color-accent         : #1cc1a9;
+@wb_color-accent-d10     : darken(@wb_color-accent, 10%);
+@wb_color-primary        : #a24689;
+@wb_color-primary-d5     : darken(@wb_color-primary, 5%);
+@wb_color-primary-d10    : darken(@wb_color-primary, 10%);
+@wb_color-primary-l10    : lighten(@wb_color-primary, 10%);
+
+@wb_color-danger  : #e6586c;
+@wb_color-success : #4ab980;
+
+
+// LAYOUT
+// =======================
+@wb_screen_xs : 480px;
+@wb_screen_sm : 768px;
+@wb_screen_md : 992px;
+@wb_screen_lg : 1200px;
+
+
+// TOP BAR
+// =======================
+@wb_editor-bar-height             : 45px;
+@wb_editor-dropdown-border-height : 1px;
+@wb_editor-bar-bg                 : @wb_color-primary;
+@wb_editor-bar-link-color         : @wb_color-paper;
+@wb_editor-bar-link-shadow        : @wb_color-primary-d10;
+
+
+// EDITOR
+// =======================
+@wb_sidebar-width: 210px;
+
+
+// SHADOWS
+// =======================
+@wb_box-shadow:       0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                      0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+@wb_dropdown-shadow:  0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                      transparent;
+
+
+// DROPDOWNS
+// =======================
+@wb_dropdown-toggle-color        : @wb_color-paper;
+@wb_dropdown-toggle-shadow-color : @wb_color-primary-d10;
+    // open
+    @wb_dropdown--open-toggle-color        : white;
+    @wb_dropdown--open-toggle-bg-color     : @wb_color-primary-d5;
+    @wb_dropdown--open-toggle-shadow-color : @wb_color-primary-d10;
+    // menu
+    @wb_dropdown-menu-color          : @wb_color-primary-d5;
+    @wb_dropdown-menu-padding        : 8px 0 4px;
+    @wb_dropdown-li-padding          : 9px 15px 9px 10px;
+    @wb_dropdown-li-wrapped-padding  : 4px 15px 4px 10px;
+    @wb_dropdown-li-divider-margin   : 5px 15px 3px 10px;
+    @wb_dropdown-li-color            : @wb_color-paper;
+    @wb_dropdown-li-hover-color      : @wb_color-paper;
+    @wb_dropdown-li-hover-bg         : @wb_color-primary;
+
+
+// MODALS
+// =======================
+@wb_modal-header-color      : @wb_color-text-dark;
+@wb_modal-title-line-height : 1.42857143;
+
+@wb_modal-lg                : 900px;
+@wb_modal-md                : 600px;
+@wb_modal-sm                : 300px;
+
+@wb_modal-header-padding    : 15px;
+@wb_modal-body-padding      : 15px;
+@wb_modal-footer-padding    : 15px;
+
+@wb_modal-margin-top        : @wb_editor-bar-height + (@wb_editor-bar-height / 5);
+
+@wb_modal-content-bg        : @wb_color-paper;
+@wb_modal-header-bg         : #fff;
+@wb_modal-footer-bg         : #fff;
diff --git a/addons/website/static/src/less/website.wrapwrap.less b/addons/website/static/src/less/website.wrapwrap.less
new file mode 100644
index 00000000000..d9e29f3e935
--- /dev/null
+++ b/addons/website/static/src/less/website.wrapwrap.less
@@ -0,0 +1,454 @@
+
+/*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY  */
+
+@footer-bg: lighten(@gray-lighter, 18%);
+@footer-border-top: 1px solid lighten(@gray-lighter, 10%);
+
+
+// Default Style
+// ===========================
+
+header {
+  a.navbar-brand.logo {
+    padding: 0 15px;
+  }
+  a.navbar-brand {
+    img {
+      max-height: 50px;
+    }
+  }
+}
+
+.logo-img {
+  width: 220px;
+}
+
+#wrapwrap {
+  .container {
+    max-width: 100% !important;
+  }
+  > footer {
+    background-color: @footer-bg;
+    border-top: @footer-border-top;
+    padding-top: 3em;
+  }
+}
+
+// Odoo utility classes
+// ===========================
+
+.o_hidden {
+  display: none!important;
+}
+.o_noSelect {
+  &::-moz-selection {
+    background-color: transparent;
+  }
+  &::selection {
+    background-color: transparent;
+  }
+}
+
+// Odoo options classes
+// ===========================
+
+.para_large {
+  font-size: 120%;
+}
+
+.jumbotron.para_large p{
+  font-size: 150%;
+}
+
+.readable {
+  font-size: 120%;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+// Odoo image background classes
+// ===============================
+.o_bg_img_cover {
+  background-size: cover;
+}
+
+.o_bg_img_contain {
+  background-size: contain;
+  &.o_bg_img_no_repeat{
+    background-position: center center;
+  }
+}
+
+.o_bg_img_repeat{
+  background-repeat: repeat;
+}
+.o_bg_img_repeat_x{
+  background-repeat: repeat-x;
+}
+.o_bg_img_repeat_y{
+  background-repeat: repeat-y;
+}
+.o_bg_img_no_repeat{
+  background-repeat: no-repeat;
+}
+
+
+
+// COLORS
+// ===========================
+
+@brand-primary:         darken(#428bca, 6.5%); // #337ab7
+@brand-success:         #5cb85c;
+@brand-info:            #5bc0de;
+@brand-warning:         #f0ad4e;
+@brand-danger:          #d9534f;
+
+
+@white:                  #fff;
+@black:                  #000;
+@gray-darker:            lighten(@gray-base, 13.5%); // #222
+@gray-dark:              lighten(@gray-base, 20%);   // #333
+@gray:                   lighten(@gray-base, 33.5%); // #555
+@gray-light:             lighten(@gray-base, 46.7%); // #777
+@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
+
+@color-accent        : #1cc1a9;
+@color-complementary : #a24689;
+@color-alpha         : #BA3C3D;
+@color-beta          : #0D6759;
+@color-gamma         : #0B2E59;
+
+
+
+//  Background (kept for 8.0 compatibility)
+// =============================================
+
+.oe_dark {
+  background-color: rgba(200, 200, 200, 0.14);
+}
+
+.oe_black {
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+}
+
+.oe_green {
+  background-color: #169C78;
+  color: white;
+}
+.oe_green .text-muted {
+  color: #ddd;
+}
+
+.oe_blue_light {
+  background-color: #41b6ab;
+  color: white;
+}
+.oe_blue_light .text-muted {
+  color: #ddd;
+}
+
+.oe_blue {
+  background-color: #34495e;
+  color: white;
+}
+
+.oe_orange {
+  background-color: #f05442;
+  color: white;
+}
+.oe_orange .text-muted {
+  color: #ddd;
+}
+
+.oe_purple {
+  background-color: #b163a3;
+  color: white;
+}
+.oe_purple .text-muted {
+  color: #ddd;
+}
+
+.oe_red {
+  background-color: #9C1b31;
+  color: white;
+}
+.oe_red .text-muted {
+  color: #ddd;
+}
+
+.oe_none {
+  background-color: #FFFFFF;
+}
+
+.oe_yellow {
+  background-color: #A2A51B;
+}
+
+.oe_green {
+  background-color: #149F2C;
+}
+
+
+.createColorClasses(@class_name, @color) {
+  .text-@{class_name} {
+    color: @color;
+  }
+  .bg-@{class_name} {
+    background-color: @color
+  }
+  .tab .text-@{class_name},
+  .tab .bg-@{class_name}   {
+    span{
+      background-color: @color
+    }
+  }
+}
+
+// Create classes for theme colors
+.createColorClasses(accent, @color-accent);
+.createColorClasses(compl, @color-complementary);
+.createColorClasses(alpha, @color-alpha);
+.createColorClasses(beta, @color-beta);
+.createColorClasses(gamma, @color-gamma);
+
+// Create classes for UI colors
+.createColorClasses(primary, @brand-primary);
+.createColorClasses(success, @brand-success);
+.createColorClasses(info, @brand-info);
+.createColorClasses(warning, @brand-warning);
+.createColorClasses(danger, @brand-danger);
+
+// Create classes for greyscale colors
+.createColorClasses(white, @white);
+.createColorClasses(black, @black);
+.createColorClasses(gray_darker, @gray-darker);
+.createColorClasses(gray_dark, @gray-dark);
+.createColorClasses(gray, @gray);
+.createColorClasses(gray_light, @gray-light);
+.createColorClasses(gray_lighter, @gray-lighter);
+
+
+
+
+// Typography
+// ===========================
+
+ul {
+  list-style-type: disc;
+}
+
+li > ul {
+  list-style-type: circle;
+}
+
+li > * > li > ul {
+  list-style-type: square;
+}
+
+li > * > li > * > li > ul {
+  list-style-type: disc;
+}
+
+li > * > li > * > li > * > li > ul {
+  list-style-type: circle;
+}
+
+li > * > li > * > li > * > li > * > li > ul {
+  list-style-type: square;
+}
+
+li > * > li > * > li > * > li > * > li > * > li > ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+li > ol {
+  list-style-type: lower-alpha;
+}
+
+li > * > li > ol {
+  list-style-type: lower-greek;
+}
+
+li > * > li > * > li > ol {
+  list-style-type: decimal;
+}
+
+li > * > li > * > li > * > li > ol {
+  list-style-type: lower-alpha;
+}
+
+li > * > li > * > li > * > li > * > li > ol {
+  list-style-type: lower-greek;
+}
+
+li > * > li > * > li > * > li > * > li > * > li > ol {
+  list-style-type: decimal;
+}
+
+li > p {
+  margin: 0;
+}
+
+font[style*='background'], font[class*='bg-'] {
+  padding: 0 2px;
+}
+
+
+hr {
+  padding: 4px 0;
+}
+
+
+// O_UL
+// ===========================
+
+.o_ul_toggle_self, .o_ul_toggle_next {
+  display: none;
+}
+
+.o_ul_folded .o_close {
+  display: none !important;
+}
+.o_ul_folded .o_ul_toggle_self, .o_ul_folded .o_ul_toggle_next {
+  display: inline-block;
+  line-height: inherit;
+  float: left;
+  position: relative;
+  margin-left: -1em;
+  z-index: 1;
+  top: -0.15em;
+  left: 0.2em;
+  font-size: 1.4em;
+  text-decoration: none;
+  &.open{
+    left: 0em;
+    &:before{
+      content: "";
+    }
+  }
+  &:before{
+    content: "";
+  }
+}
+
+
+// Bootsrtap hacks
+// ===========================
+
+// container inside container
+.container, .readable{
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
+  }
+}
+
+// HEADER NAV BAR
+.navbar.navbar-static-top {
+  margin-bottom: 0;
+  ul.nav > li.divider {
+    margin-top: 15px;
+    padding-top: 20px;
+    border-right: 1px solid grey;
+  }
+}
+ul.nav-stacked > li > a {
+  padding: 2px 15px;
+}
+
+// Columns min height
+[class^="col-md-"] {
+  min-height: 24px;
+}
+
+
+
+// PUBLISH
+// ===========================
+
+.css_published .btn-danger,
+.css_published .css_publish {
+  display: none;
+}
+
+.css_unpublished .btn-success,
+.css_unpublished .css_unpublish {
+  display: none;
+}
+
+[data-publish='off'] > *:not(.css_options) {
+  .opacity(0.5);
+}
+
+// Hack for removing double scrollbar from mobile preview
+// TODO: move to website.ui.components.less
+// ===========================
+
+div#mobile-preview.modal {
+  overflow: hidden;
+}
+#customize-menu .dropdown-header {
+  text-transform: uppercase;
+}
+
+// END of PUBLISH
+// ===========================
+
+::-moz-selection {
+  background: rgba(150, 150, 220, 0.3);
+}
+
+::selection {
+  background: rgba(150, 150, 220, 0.3);
+}
+
+.logo-img {
+  width: 220px;
+}
+
+.oe_demo {
+  position: relative;
+  img {
+    width: 100%;
+  }
+  div {
+    position: absolute;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0.85;
+    bottom: 0px;
+    width: 100%;
+    padding: 7px;
+    color: white;
+    font-weight: bold;
+    a {
+      color: white;
+    }
+  }
+}
+
+// OE search
+// ===========================
+
+.oe_search_clear {
+  position: absolute;
+  display: none;
+  cursor: pointer;
+  z-index: 2;
+  right: 42px;
+  color: #939393;
+  padding: 10px 0;
+  top: 1px;
+}
+
+.oe_search_box {
+  padding-right: 23px;
+}
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index caf3f4e620b..36a81cd9bf5 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -10,7 +10,7 @@
      -->
 
     <t t-name="website.gallery.dialog.upload">
-        <div class="modal fade" >
+        <div class="modal website_modal fade" >
             <div class="modal-dialog" style="max-width: 50%;">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -88,7 +88,7 @@
     -->
     <t t-name="website.gallery.slideshow.lightbox">
 
-        <div class="modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
+        <div class="modal website_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
 
             <div class="modal-dialog modal-lg" role="Picture Gallery"
                 t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 6e6e9438945..2d817f67720 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -10,9 +10,9 @@
             <option t-att-value="lang[0]" t-att-selected="lang[0] == def_lang ? 'selected' : null"><t t-esc="lang[1]" /></option>
         </t>
     </t>
-    
+
     <t t-name="website.seo_configuration">
-        <div class="modal fade oe_seo_configuration js_seo_configuration" tabindex="-1" role="dialog">
+        <div class="modal website_modal fade oe_seo_configuration js_seo_configuration" tabindex="-1" role="dialog">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
diff --git a/addons/website/static/src/xml/website.translator.xml b/addons/website/static/src/xml/website.translator.xml
index 3e5d896faf9..9506813b7b1 100644
--- a/addons/website/static/src/xml/website.translator.xml
+++ b/addons/website/static/src/xml/website.translator.xml
@@ -6,7 +6,7 @@
 </t>
 
 <t t-name="website.TranslatorDialog">
-    <div class="modal fade oe_website_translator" tabindex="-1" role="dialog">
+    <div class="modal website_modal fade oe_website_translator" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index bfd20240677..184b6f037a5 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="website.mobile_preview">
-        <div class="modal fade oe_mobile_preview" tabindex="-1" role="dialog">
+        <div class="modal website_modal fade oe_mobile_preview" tabindex="-1" role="dialog">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -17,7 +17,7 @@
     </t>
 
     <t t-name="website.error_dialog">
-        <div class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal website_modal fade" tabindex="-1" role="dialog">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -63,7 +63,7 @@
     </t>
 
     <t t-name="website.modal_base">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal website_modal " tabindex="-1" role="dialog" aria-hidden="true">
                 <div class="modal-dialog">
                 <div class="modal-content">
                     <t t-call="website.modal_header" />
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 23f92225da5..6e49bc09601 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -3,7 +3,7 @@
 <data>
 
 <template id="s_banner" name="Banner">
-    <div id="myCarousel" class="carousel slide s_banner oe_custom_bg" data-interval="10000" style="height: 320px;">
+    <div id="myCarousel" class="carousel slide s_banner oe_custom_bg mb32" data-interval="10000" style="height: 320px;">
         <!-- Indicators -->
         <ol class="carousel-indicators hidden">
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@@ -121,7 +121,7 @@
 </template>
 
 <template id="s_big_message" name="Big message">
-    <section class="jumbotron s_big_message">
+    <section class="jumbotron s_big_message mt16 mb16">
         <div class="container">
             <h1>Sell Online. Easily.</h1>
             <p>
@@ -183,7 +183,7 @@
 </template>
 
 <template id="s_features" name="Features">
-    <section class="s_features">
+    <section class="s_features mt16">
         <div class="container">
             <div class="row mt16 mb16">
                 <div class="col-md-4 text-center">
@@ -207,7 +207,7 @@
 </template>
 
 <template id="s_big_picture" name="Big Picture">
-    <section class="s_big_picture bg-primary">
+    <section class="s_big_picture bg-primary mt16 mb16">
         <div class="container">
             <div class="row">
                 <div class="col-md-12 text-center mt32 mb32">
@@ -235,7 +235,7 @@
 </template>
 
 <template id="s_three_columns" name="Three Columns">
-    <section class="s_three_columns">
+    <section class="s_three_columns mt16 mb16">
         <div class="container">
             <div class="row">
                 <div class="col-md-4">
@@ -570,7 +570,7 @@ great way to build confidence in your products or services.
 </template>
 
 <template id="s_references" name="References">
-    <section class="s_references">
+    <section class="s_references mt16 mb32">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
@@ -623,7 +623,7 @@ Things are better organized and more visible with it.
 </template>
 
 <template id="s_quotes_slider" name="Quotes Slider">
-    <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider" data-interval="10000">
+    <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider mb0" data-interval="10000">
         <!-- Indicators -->
         <ol class="carousel-indicators mb0">
             <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
@@ -787,37 +787,25 @@ Things are better organized and more visible with it.
 
 
 <template id="snippets">
-<ul>
-    <li class="active">
+<ul id="snippets_menu">
+    <li class="active structure">
         <a href="#snippet_structure" class="scroll-link">
-            <span class="fa-stack fa-lg">
-                <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                <i class="fa fa-th-large fa-stack-1x"></i>
-            </span>
+            <i class="material-icons">&#xE8F1;</i>
         </a>
     </li>
-    <li>
+    <li class="content">
         <a href="#snippet_content" class="scroll-link">
-            <span class="fa-stack fa-lg">
-                <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                <i class="fa fa-align-justify fa-stack-1x"></i>
-            </span>
+            <i class="material-icons">&#xE8AA;</i>
         </a>
     </li>
-    <li>
+    <li class="feature">
         <a href="#snippet_feature" class="scroll-link">
-            <span class="fa-stack fa-lg">
-                <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                <i class="fa fa-pie-chart fa-stack-1x"></i>
-            </span>
+            <i class="material-icons">&#xE8B8;</i>
         </a>
     </li>
-    <li>
+    <li class="effect">
         <a href="#snippet_effect" class="scroll-link">
-            <span class="fa-stack fa-lg">
-                <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                <i class="fa fa-paper-plane fa-stack-1x"></i>
-            </span>
+            <i class="fa fa-magic icon-fix"></i>
         </a>
     </li>
 </ul>
@@ -825,9 +813,7 @@ Things are better organized and more visible with it.
 <div id="o_scroll">
 <div id="snippet_structure" class="o_panel">
     <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-th-large fa-stack-1x"></i>
-        </span> Structure
+        <i class="material-icons">&#xE8F1;</i> Structure
     </div>
     <div class="o_panel_body">
         <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
@@ -846,9 +832,7 @@ Things are better organized and more visible with it.
 
 <div id="snippet_content" class="o_panel">
     <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-align-justify fa-stack-1x"></i>
-        </span> Content
+        <i class="material-icons">&#xE8AA;</i> Content
     </div>
     <div class="o_panel_body">
         <t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
@@ -861,9 +845,7 @@ Things are better organized and more visible with it.
 
 <div id="snippet_feature" class="o_panel">
     <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-pie-chart fa-stack-1x"></i>
-        </span> Feature
+        <i class="material-icons">&#xE8B8;</i> Feature
     </div>
     <div class="o_panel_body">
         <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/>
@@ -879,9 +861,7 @@ Things are better organized and more visible with it.
 
 <div id="snippet_effect" class="o_panel">
     <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-paper-plane fa-stack-1x"></i>
-        </span> Effect
+        <i class="fa fa-magic icon-fix"></i> Effect
     </div>
     <div class="o_panel_body">
         <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/>
@@ -896,7 +876,7 @@ Things are better organized and more visible with it.
 </template>
 
 <template id="snippet_options">
-    
+
     <t t-call="web_editor.snippet_options"/>
 
     <div data-js='blog-style'
@@ -913,8 +893,10 @@ Things are better organized and more visible with it.
     <div data-js='background'
         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu">
-            <a tabindex="-1" href="#">Background</a>
+            <a tabindex="-1" href="#">Background Image</a>
             <ul class="dropdown-menu">
+                <li data-background=""><a>None</a></li>
+                <li class="divider"></li>
                 <li data-background="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
                 <li data-background="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
                 <li data-background="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
@@ -932,17 +914,23 @@ Things are better organized and more visible with it.
                 <li data-background="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
                 <li data-background="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
                 <li data-background="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
-                <li data-background=""><a>None</a></li>
-                <li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"></a></li>
+                <li class="divider"></li>
                 <li data-choose_image="choose_image"><a><b>Choose an image...</b></a></li>
             </ul>
         </li>
     </div>
 
+    <div data-js='background_position'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
+        <li class="background_position_li" data-background_position="background_position">
+            <a tabindex="-1" href="#">Background Image Options</a>
+        </li>
+    </div>
+
     <div data-js='colorpicker'
         data-selector="section:not(.jumbotron), :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu">
-            <a tabindex="-1" href="#">Color</a>
+            <a tabindex="-1" href="#">Background Color</a>
             <ul class="dropdown-menu">
                 <li></li>
             </ul>
diff --git a/addons/website/views/website_backend_navbar.xml b/addons/website/views/website_backend_navbar.xml
index ad476a55b43..afef4c81ee9 100644
--- a/addons/website/views/website_backend_navbar.xml
+++ b/addons/website/views/website_backend_navbar.xml
@@ -1,117 +1,156 @@
 <?xml version="1.0" encoding="utf-8"?>
 <openerp>
-<data>
-<!-- Front-end/Back-end integration -->
-<template id="user_navbar" inherit_id="website.layout" groups="base.group_user">
-<xpath expr="//body/div['id=wrawrap']" position="before">
-<t t-if="website and menu_data">
-    <nav id="oe_main_menu_navbar" class="navbar navbar-inverse hidden-xs" role="navigation">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#oe_applications">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>    
-        </div>
-
-        <ul id="oe_applications" class="nav navbar-nav navbar-left navbar-collapse collapse">
-            <li class="dropdown active">
-                <a href="#" class="dropdown-toggle hidden-xs" data-toggle="dropdown"><i class="fa fa-th-large"></i> Website<b class="caret"/></a>
-                <ul class="dropdown-menu">
-                    <li t-foreach="menu_data['children']" t-as="menu">
-                        <t t-set="debug_param" t-value="'?&amp;debug=' if debug else ''"/>
-                        <a t-att-href="'/web%s#menu_id=%s&amp;action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')"
-                            t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'"
-                            t-att-data-menu="menu['id']"
-                            t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or ''"
-                            t-att-data-action-id="menu['action'] and menu['action'].split(',')[1] or ''">
-                            <i t-if="menu.get('icon')" t-attf-class="fa #{menu.get('icon')} fa-lg fa-fw"/>
-                            <span class="oe_menu_text">
-                                <t t-esc="menu['name']"/>
-                            </span>
-                        </a>
+  <data>
+    <!-- Front-end/Back-end integration -->
+    <template groups="base.group_user" id="user_navbar" inherit_id="website.layout">
+      <xpath expr="//body/div['id=wrawrap']" position="before">
+        <t t-if="website and menu_data">
+          <div id="website_editor_container" class="wb_hidden_xs">
+            <nav id="website_main_menu_navbar" role="navigation">
+              <ul id="oe_applications">
+                <li class="dropdown active">
+                  <a class="dropdown full hidden-xs" data-toggle="dropdown" href="#">
+                    <i class="fa fa-th-large"/> WEBSITE
+                    <b class="caret"/></a>
+                  <ul class="dropdown-menu">
+                    <li t-as="menu" t-foreach="menu_data['children']">
+                      <t t-set="debug_param" t-value="'?&amp;debug=' if debug else ''"/>
+                      <a t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'" t-att-data-action-id="menu['action'] and menu['action'].split(',')[1] or ''" t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or ''" t-att-data-menu="menu['id']" t-att-href="'/web%s#menu_id=%s&amp;action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')">
+                        <i t-attf-class="fa #{menu.get('icon')} fa-lg fa-fw" t-if="menu.get('icon')"/>
+                        <span class="oe_menu_text">
+                          <t t-esc="menu['name']"/>
+                        </span>
+                      </a>
                     </li>
-                </ul>
-            </li>
-        </ul>
-
-        <ul id="oe_editzone" class="nav navbar-nav hidden-xs" style="padding-left: 20px;" groups="base.group_website_publisher">
-            <li t-if="not translatable"><button type="button" data-action="edit" class="btn btn-primary btn-xs">Edit</button></li>
-            <li t-if="translatable"><button type="button" data-action="translate" class="btn btn-primary btn-xs">Translate</button></li>
-            <li t-if="translatable"><a class="btn btn-link" data-action="edit_master" href="#"> or Edit Master</a></li>
-        </ul>
-
-        <ul id="oe_systray" class="nav navbar-nav navbar-right pull-right hidden-xs">
-            <!-- Mobile -->
-            <li>
-                <a data-action="show-mobile-preview" href="#">
-                    <span title="Mobile preview"><i class="fa fa-mobile"/></span>
-                </a>
-            </li>
-
-            <!-- Promote -->
-
-            <li groups="base.group_website_designer">
-                <a id="promote-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">
-                    Promote <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu oe_promote_menu" role="menu">
+                  </ul>
+                </li>
+              </ul> <!-- / #oe_applications -->
+              <ul>
+                <li class="o_menu_brand">Website</li>
+              </ul>
+              <ul id="oe_systray">
+                <!-- Mobile preview -->
+                <li class="o_mobile_preview">
+                  <a data-action="show-mobile-preview" href="#">
+                    <span title="Mobile preview">
+                      <i class="fa fa-mobile"/>
+                    </span>
+                  </a>
+                </li>
+                <!-- Promote -->
+                <li class="dropdown" groups="base.group_website_designer">
+                  <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="promote-menu-button">
+                    <span class="title">PROMOTE</span>
+                    <span class="caret"/>
+                  </a>
+                  <ul class="dropdown-menu oe_promote_menu" role="menu">
                     <li>
-                        <a data-action="promote-current-page" href="#">
-                            <span title="Promote page on the web">Optimize SEO</span>
-                        </a>
+                      <a data-action="promote-current-page" href="#">
+                        <span title="Promote page on the web">Optimize SEO</span>
+                      </a>
                     </li>
                     <li>
-                        <a href="https://www.adspike.com">
-                            <span title="Optimize your AdWords account">Optimize AdWords Campaign</span>
-                        </a>
+                      <a href="https://www.adspike.com">
+                        <span title="Optimize your AdWords account">Optimize AdWords Campaign</span>
+                      </a>
                     </li>
-                </ul>
-            </li>
+                  </ul>
+                </li>
 
-            <!-- Content -->
-            <li class="dropdown" groups="base.group_website_publisher" t-if="editable">
-                <a id="content-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">
-                    Content <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu oe_content_menu" role="menu">
-                    <li groups="base.group_website_designer"><a data-action="edit_menu" href="#"><span title="Edit Top Menu">Edit Menu</span></a></li>
-                    <li class="divider" groups="base.group_website_designer"> </li>
+                <!-- Content -->
+                <!-- All the li  after #website_addPage_list will be automatically
+                     hidden and cloned to #website_addPage_modal  -->
+
+                <li class="dropdown content" groups="base.group_website_publisher" t-if="editable">
+                  <a id="content-menu-button" class="dropdown-toggle waves" data-toggle="dropdown" href="#">CONTENT <span class="caret"></span></a>
+                  <ul class="dropdown-menu oe_content_menu" role="menu">
+                    <li groups="base.group_website_designer">
+                      <a data-action="edit_menu" href="#"><span title="Edit Top Menu">Edit Menu</span></a>
+                    </li>
                     <t t-if="deletable">
-                        <li groups="base.group_website_designer"><a href="#" data-action="rename_page">Rename Page</a></li>
-                        <li groups="base.group_website_designer"><a href="#" data-action="delete_page">Delete Page</a></li>
-                        <li class="divider" groups="base.group_website_designer"> </li>
+                      <li>
+                        <ul>
+                          <li groups="base.group_website_designer">
+                            <a href="#" data-action="rename_page">Rename Page</a>
+                          </li>
+                          <li groups="base.group_website_designer">
+                            <a href="#" data-action="delete_page">Delete Page</a>
+                          </li>
+                        </ul>
+                      </li>
+                      <li groups="base.group_website_designer"></li>
                     </t>
-                    <li groups="base.group_website_designer"><a href="#" data-action="new_page">New Page</a></li>
-                </ul>
-            </li>
-
-            <!-- Customize -->
-            <li class="dropdown" id="customize-menu" groups="base.group_website_designer">
-                <a id="customize-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">
-                    Customize <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu" role="menu">
-                    <li id="html_editor"><a href="#advanced-view-editor" data-action='ace'>HTML Editor</a></li>
-                    <li id="theme_customize"><a href="#">Customize Theme</a></li>
-                    <li id="install_apps"><a href="/web#return_label=Website&amp;action=website.action_module_website">Install Apps</a></li>
-                    <li class="divider"></li>
-                </ul>
-            </li>
-
-            <!-- Help -->
-            <li class="dropdown">
-                <a id="help-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">
-                    Help <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu" role="menu" id="help-menu">
+                    <li id="website_addPage_list"></li>
+                    <li groups="base.group_website_designer" class="animated" data-dismiss="modal">
+                      <a href="#" data-action="new_page">
+                        <i class="fa fa-file-o"/>
+                        <p>Empty Page</p>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <!-- Customize -->
+                <li class="dropdown" groups="base.group_website_designer" id="customize-menu">
+                  <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="customize-menu-button">
+                    <span class="title">CUSTOMIZE</span>
+                    <span class="caret"/>
+                  </a>
+                  <ul class="dropdown-menu" role="menu">
+                    <li id="html_editor">
+                      <a data-action="ace" href="#advanced-view-editor">HTML Editor</a>
+                    </li>
+                    <li id="theme_customize">
+                      <a href="#">Customize Theme</a>
+                    </li>
+                    <li id="install_apps">
+                      <a href="/web#return_label=Website&amp;action=website.action_module_website">Install Apps</a>
+                    </li>
+                    <li class="divider"/>
+                  </ul>
+                </li>
+                <!-- Help -->
+                <li class="dropdown">
+                  <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="help-menu-button">
+                    <span class="title">HELP</span>
+                    <span class="caret"/>
+                  </a>
+                  <ul class="dropdown-menu" id="help-menu" role="menu">
                     <li class="dropdown-header">HELP &amp; TUTORIALS</li>
-                </ul>
-            </li>
-        </ul>
-    </nav>
-</t>
-</xpath>
-</template>
-</data>
+                  </ul>
+                </li>
+              </ul> <!-- / #oe_systray -->
+
+              <ul id="oe_editzone" class="right" groups="base.group_website_publisher">
+                <li groups="base.group_website_designer">
+                  <button data-action="new_page" class="btn primary full" href="#" data-toggle="modal" data-target="#website_addPage_modal">
+                    <i class="material-icons">&#xE145;</i>NEW PAGE</button>
+                </li>
+                <li t-if="not translatable">
+                  <button class="btn full accent" data-action="edit" type="button">
+                    <i class="material-icons">&#xE254;</i>EDIT PAGE</button>
+                </li>
+                <li t-if="translatable">
+                  <button class="btn full accent btn-xs" data-action="translate" type="button">TRANSLATE</button>
+                </li>
+                <li t-if="translatable">
+                  <a class="btn btn-link" data-action="edit_master" href="#">or Edit Master</a>
+                </li>
+              </ul> <!-- / #oe_editzone -->
+
+            </nav> <!-- / #website_main_menu_navbar -->
+          </div>
+        </t>
+      </xpath>
+
+      <!-- Add new page/content modal -->
+      <xpath expr="//body/div['id=wrawrap']" position="after">
+        <div class="modal" id="website_addPage_modal">
+          <div class="modal-dialog" data-dismiss="modal">
+            <ul class="website_addPage_ul"></ul>
+          </div>
+        </div>
+      </xpath>
+
+    </template>
+  </data>
 </openerp>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index bd838d13c1c..a321fe60384 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -10,15 +10,26 @@
     </xpath>
 </template>
 
+<template id="less_assets" name="Website Less Assets">
+    <link rel="stylesheet" href='/website/static/src/less/website.ui.mixins.less'/>
+    <link rel="stylesheet" href='/website/static/src/less/website.ui.variables.less'/>
+    <link rel="stylesheet" href='/website/static/src/less/website.ui.interactions.less'/>
+    <link rel="stylesheet" href='/website/static/src/less/website.ui.components.less'/>
+    <link rel="stylesheet" href='/website/static/src/less/website.ui.less'/>
+    <link rel="stylesheet" href='/website/static/src/less/website.snippets.less'/>
+    <link rel="stylesheet" href='/website/static/src/less/website.wrapwrap.less'/>
+</template>
+
 <template id="assets_frontend" name="Website assets">
     <link id="bootstrap_css" rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
+    <link rel="stylesheet" href="/web/static/src/less/utils.less"/>
 
-    <link rel="stylesheet" href='/website/static/src/css/website.css'/>
+    <link rel="stylesheet" href="/web/static/src/less/mimetypes.less"/>
+    <t id="assets_frontend_less" t-call="website.less_assets"/>
 
     <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.share.js"></script>
-
     <script type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
 
     <t t-call="web.bootstrap"/>
@@ -34,6 +45,16 @@
 </template>
 
 <template id="assets_editor" name="Editor assets">
+    <!-- Call default mixins from WEB module -->
+    <link rel="stylesheet" href='/web/static/src/less/utils.less'/>
+    <!-- Call mixins from frontend bundle -->
+    <link rel="stylesheet" href='/website/static/src/less/website.ui.mixins.less'/>
+
+    <link rel='stylesheet' href='/web_editor/static/src/less/web_editor.common.less'/>
+    <link rel='stylesheet' href='/web_editor/static/src/less/web_editor.less'/>
+
+    <link rel='stylesheet' href='/website/static/src/less/website.edit_mode.less'/>
+
     <script type="text/javascript" src="/website/static/src/js/website.editor.js"></script>
     <script type="text/javascript" src="/website/static/lib/jQuery.transfo.js"></script>
     <script type="text/javascript" src="/website/static/lib/ace/ace.js"></script>
@@ -50,9 +71,7 @@
     <script type="text/javascript" src="/website/static/src/js/website.theme.js"></script>
     <script type="text/javascript" src="/website/static/src/js/web_planner_website.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.contentMenu.js"></script>
-    <link rel='stylesheet' href='/web_editor/static/src/css/web_editor.css'/>
-    <link rel='stylesheet' href='/web_editor/static/src/less/web_editor.less'/>
-    <link rel="stylesheet" href="/website/static/src/css/website.editor.css"/>
+
     <script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.snippets.gallery.js"></script>
 </template>
@@ -230,6 +249,9 @@
     </xpath>
 </template>
 
+
+
+
 <!--
     Optional Bundle for PDFJS lib
     Since PDFJS is quite huge (40000 lines), please only load it when it is necessary.