From c4a896a8a0e2219879903d212f2324d0b85d7f00 Mon Sep 17 00:00:00 2001
From: stefanorigano <stefano.rigano@gmail.com>
Date: Thu, 3 Sep 2015 13:29:04 +0200
Subject: [PATCH 1/8] [REF] website,web_editor: complete restyling

---
 addons/web/static/src/less/utils.less         |  10 -
 .../static/lib/summernote/src/js/Renderer.js  | 106 +-
 .../static/lib/summernote/src/js/defaults.js  |   2 +-
 .../lib/summernote/src/less/elements.less     | 156 ---
 .../lib/summernote/src/less/summernote.less   |  26 +
 .../static/lib/summernote/summernote.css      |   1 -
 addons/web_editor/static/src/css/common.sass  |   4 -
 ...nline.css => web_editor.iframe.inline.css} |   0
 .../web_editor/static/src/css/web_editor.sass | 141 ---
 .../static/src/js/rte.summernote.js           |  51 +-
 .../static/src/js/snippets.editor.js          |   2 +-
 .../static/src/js/snippets.options.js         | 232 ++++-
 addons/web_editor/static/src/js/summernote.js |   8 +-
 .../web_editor.backend.less}                  |  65 +-
 .../web_editor.common.less}                   |   0
 .../src/less/web_editor.components.less       | 276 +++++
 .../src/less/web_editor.interactions.less     |  61 ++
 .../static/src/less/web_editor.mixins.less    | 204 ++++
 .../static/src/less/web_editor.ui.less        | 976 ++++++++++++++++++
 .../static/src/less/web_editor.variables.less |  76 ++
 addons/web_editor/static/src/xml/editor.xml   | 578 ++++++++---
 addons/web_editor/static/src/xml/snippets.xml |  13 +-
 addons/web_editor/views/editor.xml            |  60 +-
 addons/web_editor/views/iframe.xml            |   2 +-
 addons/website/static/src/css/common.sass     |  69 --
 addons/website/static/src/css/editor.css      | 657 ------------
 addons/website/static/src/css/editor.sass     | 567 ----------
 .../fonts/glyphicons-halflings-regular.eot    | Bin 14079 -> 0 bytes
 .../fonts/glyphicons-halflings-regular.svg    | 228 ----
 .../fonts/glyphicons-halflings-regular.ttf    | Bin 29512 -> 0 bytes
 .../fonts/glyphicons-halflings-regular.woff   | Bin 16448 -> 0 bytes
 addons/website/static/src/css/snippets.css    | 166 ---
 addons/website/static/src/css/snippets.sass   | 142 ---
 .../website/static/src/css/website.editor.css | 255 -----
 .../static/src/css/website.editor.sass        | 226 ----
 .../static/src/js/website.contentMenu.js      |  30 +-
 .../website/static/src/js/website.editor.js   |  68 +-
 addons/website/static/src/js/website.js       |   2 +-
 .../src/js/website.snippets.animation.js      |  52 +-
 .../static/src/js/website.translator.js       |   4 +-
 .../static/src/less/website.edit_mode.less    | 153 +++
 .../static/src/less/website.snippets.less     | 407 ++++++++
 .../src/less/website.ui.components.less       | 855 +++++++++++++++
 .../src/less/website.ui.interactions.less     |  61 ++
 .../website/static/src/less/website.ui.less   | 334 ++++++
 .../static/src/less/website.ui.mixins.less    | 190 ++++
 .../static/src/less/website.ui.variables.less | 105 ++
 .../static/src/less/website.wrapwrap.less     | 454 ++++++++
 .../static/src/xml/website.gallery.xml        |   4 +-
 addons/website/static/src/xml/website.seo.xml |   4 +-
 .../static/src/xml/website.translator.xml     |   2 +-
 addons/website/static/src/xml/website.xml     |   6 +-
 addons/website/views/snippets.xml             |  78 +-
 .../website/views/website_backend_navbar.xml  | 249 +++--
 addons/website/views/website_templates.xml    |  32 +-
 55 files changed, 5412 insertions(+), 3038 deletions(-)
 delete mode 100644 addons/web_editor/static/lib/summernote/src/less/elements.less
 delete mode 100644 addons/web_editor/static/lib/summernote/summernote.css
 delete mode 100644 addons/web_editor/static/src/css/common.sass
 rename addons/web_editor/static/src/css/{inline.css => web_editor.iframe.inline.css} (100%)
 delete mode 100644 addons/web_editor/static/src/css/web_editor.sass
 rename addons/web_editor/static/src/{css/backend.css => less/web_editor.backend.less} (62%)
 rename addons/web_editor/static/src/{css/web_editor.css => less/web_editor.common.less} (100%)
 create mode 100644 addons/web_editor/static/src/less/web_editor.components.less
 create mode 100644 addons/web_editor/static/src/less/web_editor.interactions.less
 create mode 100644 addons/web_editor/static/src/less/web_editor.mixins.less
 create mode 100644 addons/web_editor/static/src/less/web_editor.ui.less
 create mode 100644 addons/web_editor/static/src/less/web_editor.variables.less
 delete mode 100644 addons/website/static/src/css/common.sass
 delete mode 100644 addons/website/static/src/css/editor.css
 delete mode 100644 addons/website/static/src/css/editor.sass
 delete mode 100644 addons/website/static/src/css/fonts/glyphicons-halflings-regular.eot
 delete mode 100644 addons/website/static/src/css/fonts/glyphicons-halflings-regular.svg
 delete mode 100644 addons/website/static/src/css/fonts/glyphicons-halflings-regular.ttf
 delete mode 100644 addons/website/static/src/css/fonts/glyphicons-halflings-regular.woff
 delete mode 100644 addons/website/static/src/css/snippets.css
 delete mode 100644 addons/website/static/src/css/snippets.sass
 delete mode 100644 addons/website/static/src/css/website.editor.css
 delete mode 100644 addons/website/static/src/css/website.editor.sass
 create mode 100644 addons/website/static/src/less/website.edit_mode.less
 create mode 100644 addons/website/static/src/less/website.snippets.less
 create mode 100644 addons/website/static/src/less/website.ui.components.less
 create mode 100644 addons/website/static/src/less/website.ui.interactions.less
 create mode 100644 addons/website/static/src/less/website.ui.less
 create mode 100644 addons/website/static/src/less/website.ui.mixins.less
 create mode 100644 addons/website/static/src/less/website.ui.variables.less
 create mode 100644 addons/website/static/src/less/website.wrapwrap.less

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 87eaa434234e2a984c261e0450a2f4ad837aa7b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14079
zcma)jRa_K6^zJUrQcHI&-Agwt-Q6i&BGL^KOLw;{-AD_FG)Q-gGzdrvN-EcX-iP~g
z&*b^eH{Y4xyv%PN=0ykqC=mnzkp2}Ez<(I(fA#<X5ReK4{KM3>{~JL1@9|&czbr17
z?0>QUi2(qt040DrzyzQTPzI;~<N#U#O@JPN?w@B3a0NL0Yt8^SfFr=`-x6GaF2MfZ
z+~*%^4e<Pj_yY|8A)f!D&VaZ7cys_>05<^oukZrI|7re*(tmmX7j^o_^aj}eC*Svf
zS8xM_|1re@Z~iI2{-^mL9EX2e|B>GY!1r$^_@7M#!2iz^{g+$h|9j_j|IfYw09iey
z|2e7uJq%=kUm`%z3m_N(;2I^EK8c@Rz+WzA_5K>K_A~&N-y3An#=6kB0L1`ghg@hn
zZl7)JRrzdfN4}^l((rOb8!6cPsFL3<+h>Ko$*N(B`~JnKcb$DjB~XQQFl-maOT7?|
z=??-O{TBG@KcAzmSNxsJz-Lt-`@AJr0kN!Di;SF6C_P<|x%6Q{;498Vwc}wHl?UCr
z{Q~3fpz|ayjwAvkULRl`8oaqCD1Wz4@8$~fj$UC?mYD}9H~K)mrxoe9!WwG7+6D1~
zu)}%fLgSy{-z-;>e_xUdTzZz=OI{SZWnRf9!Z!c1f25WUO+5X9vri&A$czeCIfk$M
z9$(eLNbUdRcqZ=w)1@@tN<^z0pQP-fOfjvjK3hvorqiV%Rl2xSOKU%hzr6ahgV9*$
zJlgSvPU509MBT=C+`yifpkEyy8#9c4UL5|r5gWS_tr}Av>(G)ZhAtjcTRS3?SSA9N
z_Kegnh`V2N6RU=69p<{&He6g~O%E<CJB&H}8Eop546bifR8;v1%~W_+gbb%4;F*P$
z`79dCon2_6C{3^^wnS`RnX>Z5+2OH{@ca1ru$Z)c3E&|1G!5~|4CfxK{)bF7rn^i`
zwcKpWlzAHWR{;3USb36)e|%;$T55rp9tZ<6==s|-B*BebGk#$IYB|(ZrzrewrIl2Q
zcVZsN=FLe{6k5m7YDaR%(#gdFf#BlrKVjI$R-nNKpd*2(T6`_?7Tr%rq~E9(yIypk
z15x#%OfK;;uk|PQR~)DEppbSH6DmW;v@k*#ZhaG5{w7e$S`ot*K<^C*oB^co5cNr-
z84k3(uHIXMy>++r-IRV%?Vpo$*r`8<nh8H|!}<zB3cZ16t>)jmh{vx(My9BI&4V4t
z@q&H_L`zH3p725(a{oTG;rYk3%_{r*|8>5_6G?cTr)|<NQurG^bSVGmfVv9zyD;pC
zRgB;F?6#@C+W3nx2P+oo52W(;=I2sHEEkFulJC5t@fdKzbQab()gj#z*xh)A_PAMC
z-xlR6t47kxBx4Fum?y9wiEivc0chkcQ3_~t<FbHA);zwJom&NIpuewR`D^DOZODR3
ziW1_rvAXu!NSMNvlv3)F*+8%deWC3U$6IJO$T|ikA+*Z8v5j0j|C%2El>U^XlDg8z
zm^W6r3{qR3liJadUw%-DfiMsiV2YTxYOPA_X1lBkNTo&NjbQ(_zP!Rimikpp%G~h_
ztU^LLtxb8e!>D>CG^8eZ_@-EFi+JA&%Ym}4^tY?&sz92_hbFAune34RX{tbjogYXK
zb;~ja9%4IE{_iiY6WdJ>_PH&3&@yDo2T(p1E`%?ub^PQ3)diW6ii}#+*!<!42+jSS
z&zB>=`BpbGP_1R+t&;29S$UAcpH3h}2^>rGvH){c0jJtjcaSiIpFl?|Ykw|FXrNy%
zn~l3m7e4&RgrOCH+jCRW=Ls5PATEyA`J8Ad?TVOG`l@pE({KV)pF3Z7;oa4-Hx3nk
z^j1RZ{N?bQZy$cYv6=A&0^)qVweZ{+Bno|~E=9j=k-GDXeQ3qsW?N%I&@}1?wxuHf
zA|Ro-_+d*C6M-#@VpM30RTEPdo!APpRrFObUDP^Ic|AJ;)&LVdnWX#RxiFb+zGKCQ
zI_Kger%ADWvepR*8TGZ{JN(1K9%&P;^!XU4tSvkgGe_{JR~^f9$<0Tklc9<ZUw;~W
z5p*^NVO8v@BOIic@6j-oQA9o#Nv>6r9x1B=VltaV_PCB77l_0tL3{`BdedCe5j3CF
zO*e3HwE9GE<^LnU6k=*E%b)otxd+9+t<9)#+ze$kGPmX41&oF?8tHV!<nE242JAO$
zwQJ94#*kw)Ad-Wbv#rR45_wFbMvV{66V8zH9K9ofp^^au-H!P1Q%UTlMe8?;BQ&Sh
zI(1q^c|XL<T3<$<Wm&I5j~KeBHgdW7affz>$ntX{*8aX^eeP@F2xMvpFGcra42@FI
zDr{tW)yt3)P*7pvoD&$N2UDat?KH#6Zr3Wj1ocGNeW7Gj^2e)tH;o4O)FyAx_b=b8
zd=9(x+S@-Ai=UJC?i@DuZ0CtTtAU!S<4~e$K4CsxC85Tve7fHoj%T!vPv{JHch5_Y
zM%K`rC>1Uk_m<yMVX=0NHGv3_mcKW~yzuOKZx$Uy{i=*W!{{>|u`%z4L~W*R<1JgN
zI(cyXr))hytWI9~bat*Gf;?_avFr#*aq=$;3DEl;rBBbSfL&s-CmEN9Z=FWBPq|*w
zV=1XfmME`nZtgN@DBWrbTSnz2oWcA9yL*=L#%fP3TXt!c0F%_>FvWM9H}5Urg0WkI
zNt&dRN)2J@03gGYXLU}Ws1SoLa(2xNG04O@u`3C?42=UF%K^ZmD2OcrLpkyPD{zkZ
zqZSrZ%U#vZMaTD{N9>OdGG?lPL;z?aQq&oxZHacwkYDWEjRc9X)Mg4w1*sqqdytQc
z;>DOou1OedrNNb->@o%dNQsBess9-iEOg6MCTz%8RuuTHw%yfj66ap};<<q2=d~{o
z`z=wi@@vsSmg2qG1v+%G6j-Qk<`4{DLW{0J+nZ6%?=P*aTS15sI@K^%s{l)rJp)+T
zBYc>tL)BjF!!xYDU^iC@^Rt2BMhA>^Oluv#5vBd^doV(|U*_eW!Fpo^kadb~1qfM1
z-4xV$$`eWJMc%3OjU5A{fCA-11x&T35;A``cBD@_K+AfYp`ItY-nO9GFXyk(6H&gC
zgVP-%-^o=btFjCC^slGFm}WC)1Fkw6WT{3uKjkNm`0Q%U67%Y#OLYbxB}u8qEXyBf
z+jt?k7GWf9V1;7X7NJF^$kk!j@XFwhY;np}TTfKNM)sdEtVZLgSNz~z0}w_y_MM$P
z{7ZPot7f{~deqdkb!?PO@3M6uVpZ)~0PM!uFW*8tGxGouYU+idM&+mch>1YWrfYbw
zNHh7S!OA3^0A)hxl7xkSusWMIn}pAG7sVY<1G(8sqQS{%57LmXJp-HiSyD=l$*Riw
zY+20T)}-|#pikZ7^U!gc1p%vkX1Q*!C%Ns1AbUha>5MtQHVJ(Q7;^mZrN_`4&gR#d
z*GMiPozmbFnk7GQMUfb1z-LiF4xQ67RJ<1As!AEvs7ht4PG7P&xpL)JUK!S%jeUiX
ziGEQ1j5YCz%;X#HVS2_}6~%)EQ*SZCzV-TqZo<Kjk6kf;bDbarXtH}1=lzqX%;z1?
zkQcXro7{vrnWQ<cGsJ~I!*Zxl_VUNAX(!{FuEN-gpdwM36Ue5Z^V@n)m+7E-Ws&b}
z6`LximUBHQgTt+`cigaunG8i5?*82zDk^f_pK6IRDe`p1cKA=XK!gq$&N+x3869Sg
zVn*Q+;aCK_!|arQRgoXXpn&iRV>{O6%{r8|Py{vm3>zZHrnDT-D+S?Jo!n<`QZ%7N
z6#HY((OAs1v%<)LZ%T1o@hclr9U{s$FY2`$#A222+iwA0^_<Q`nNJnx89GvYeGoe{
z9M*C05Z(1NHc!0ILQ0Q~UW+>ZWa}Sp$~Z`tSR<KCrU9(jz2fW2XI<d4LRRK*&;V^B
zr7Y!fs&Z*w{Ak5bdQ_G6lx6E`EG|DtKbs#DV()CXFfZ>z?fYd)Prtgp>DC@x&win*
zYx)}AGLxzuz+^6ox_-KQe7OJaF4>UhEn2<^kp=1~zSKf2O8lsvgwt(+%dH&YE^$~{
zmIZuN4KWfnT+eLo`$Ntu+@_4dx-xCn%;H+*qI*rz{Pj+IMWV4q&4&v_vDJ?KnuhT?
zp`HFH-{i7G<K%KkR6$;brQ4)t<Pc-*N7&qYe(hM`$dWFB*rEqS@9Vrt5=IQP@V#mi
zPt@~rjR`-+=i$8mk;Zj~5|6`0S`%WjIj_6$j{A;aW!246_?JxR^m;@RO26-r$f5u|
zX(+AoJXr^y()TQ&CP#a|M6O-@cBU{0$zQ~ZUukN?LG$48GSbYjYr7X$yA*TIV1f{>
z&cb3tRVzJC2)Aj&v-_2I=-cTnDad;U%gi?|r{%q8M3=JWIA4A_$1xksNX8fGQ0MXv
z7jsG@yqP^YVXh~FGG7ztRofbb%v-Y2Oa0c4{DoEW2+ghB#=X?sC)zOnd<$FcA;P}k
z!&0wB1tjlcu)sC=F=AuzvQsD3oXvch4Ur<e71Q;Vk3pXP_rSt_eFKvP1^W*nz}n_D
zR7Mh`d34DOLZC5EMF>;5+K@a2;bjf`X@%InJU~*7p!QXL|3UP=)q(sV!;RVRF4eC(
z5w2y7m}t3+flB}{o?fK>I$D|ykMw@kZumiw3J18$_<EKzml3ncamK;wXo#sr=UHe4
zLI(5BZ`Xu~(y+1x5GPY|%jP8|(y7m$vBwH+zO@uM7chy4v*%i<OUMaCebpV@o0=7R
z;ie({1Gjf0u}9yr7zb2kbup7*H;Ie>+UA|-{#xqT-R~i?db}=&OhR9(;d>s&5GJ-M
zuHl@XB;EHQ^c`j#<zVIr<8($`OdN6BL=G>mM47s|SScy-SD&Q0s(780*ui5*B(NU{
z1JAM6oymA%{(T`Qwoer|4`e4fbXpw=Ujf|X8hmq7E&vxv*}=+Rye%5X2xD0*^}YEf
zEGd7~le2mpyS%mw8xl<d%#X&C_-d^L32vN(JD=-}g3dGY(oe;gx7%vn&5~T$EPq~D
z1;$|v8mX)_W}#2sr>44hIvof|Pxp1T*z47AL}K^XlL>J6(gyYOmc|;VYs(tHAWpG7
znr9Tel(H$KV%()2(VBNVoP!o~|Gd)(^S&Q{PCqTk&dV;xZm_-lB_hr!QE$$#GqKT6
zV~RS4<7x-=tx0m&jE1BDqd(cc2iA@B7Ib0!{b&v`-5`t7XEV6UG7WdVy)z(@VR3p<
zDC1lTpXHX3oE}5<e(Z_>E3V7yx^8>jVnwr!<vm#OK*Yzfxi=U23XdqMEo^eY+9kHK
zyYZfH&)Lmt&M^TI<Fb)-YQgrMVebT>w1_he&_17RJW+}R?{niZFG|4RyT7ZmC!Y^%
zbR{57inS^QNGx!}+P3f7%?Sionp@*#h+8;FTaj1<!)nk4;_@cE_-bIA1TUA)(O>>q
z1~X!#NO{YL-6+QR)z_o*SW%A+v-XebXs8&@TRzyDRieHy_t(B}bl)uwdFg%YXZ-^#
zMWTYOwIkzv%>xr%$CBM=*m$T9k}!UxqnsS6rl-gw-*rU&V2or^ZkP6vPI|0njAB4O
zn5CyBPHvXL)29>zpPkhW{`Qw3B?(G-TWfAV0^+}Ji$*Wob6n`WzRTBhd{);=mfm^%
z{;`v`S>9Z(j2Nv-VL<Xz4m_}NO?B?@_0Az1@$NdIqsf{@rhRQ>KD3~iA$Oj{Dq0(I
z8U*-!Po9%GdOD|LVS~3(q-_)biNZxTiT)GN)YVr!4f4IRLNhAD48qw@0S#E{-e>UP
z!dWH9**gQ$DqT?TkKNJl#J(f~7r6JAfSveml{UZ6jueeC&zR#Vi@e*Z==rWJgp@xj
zDdR~Hd=3W?q0l(VMfRu(XreTXK*$pogtsuagZUmp^U^=wp0PM}Wf8W^Fm9n^8S4AS
z7GJfQ<n|&mK#~#_1S%sW$P5ewiJSE5jQc+i`isn%`X5<zUpgNYJLtJb3V-$lBXZt|
zCbP1TMKLXbyb;<Q5w7Ka_#*NRyoA&Re}5M`Qv9Y1$2QtZSv27#Y3gvb*~h#apq*eX
zImi_>qzDgu-5C9o_f0zKKx$9L$|nGrE2rf%PLxV|c5LZ}PzELiSVok_zxZdiw78@4
zczsV08yXH>t5P&u(+XYPsiu48SXe7a3yEBGFiS7KFN#T`R)LMID_lZrUwvIx-Jfbw
zW&lwF<wXh^tak!%Nv^pSf$d4;F!C6nw$a_Mn}+VV0F>FkZK~+S9BQcb`8iqN%$0O{
zd_R#~i~MUF@fY!H4LxF+H=SJ{%h^?na-7Yogv2T6317oP^NJ}Jbg&)D&P;P^w8oe#
zDNHRAqcPe>x<P0M!WSU&HU$(!@h@lY@VgABeV`^HT1K^YV}Iz=o+J|bjDI*-%BRY>
zP|B*V4YPfm)deuX7-N@-7Mz4N1KmAfyYI78#jS0>Bkd}i9TWLsIZgXQY}1jqm+pG`
zy{JiBImlPiF($3(sE&p7ntgNWLh&&5y{|mea7L8%c<ptyHp2<`2w05~#O>);7R2$T
z_HrZz<g|1G{<%(cm9X=XB`k$5d{5ZEe-4(a@x_V>(`Nx;xE)N<I6|kj<X0+d^?F8-
z3{aw-9>tPgF(IH0m#(y)Npg}NBkIWpJb(OJq&ymq^iBIHfZB+V!qd}3EnxDKf_XvD
zT3tuka_2>|KJ_Qr(qpGJAf}w3%5Qo=u)K?~`O2CzZnMD_J96QGYE`74E@)I~ODsKK
zH%}vL(dJC~ZUF3t99-z<+)r4yfgnU{Y-RryR^-SYY95;xsg#!aUC-Afy-0t<rTPHA
z1*0~^0FoYfkm$!JILxzOPAcezBgpiho{+VB53$|6MSydhb2Ih01GV<^GC9M1Hrm+m
zs*H-J!BnpFfioNfC=~U;L4XiNtB_Pv1ak}uWRd&9kls&vLyN`&K{xUh-=;X6pgU6s
z^;^h6O(;(0r8?9Dl7jt6ul%_W3KwZQ`590khL_|`gijOgYAU0qbY<43%S1Fztqo?{
zf5svt-%sVrSnoV8Ga<~t<gAI>%`Ccv_)YQ)A}F@oIMmu2ZX7PQ72ukwf(Cvsr!%uk
z?~fxQtYEo0ehCIE`*_+|rxqV~hPV#FQyC(#HP&p@G#fKOUMp?w>)uN0&^pgnu4xwA
z{+=Wo;`6mUi`y&O^6j1|StaDJHzuv-uBNf~cik{Jl#-tM_hJ^k+>c0kMduSMRtVAB
zXTfh&yMOb>MNO5I1PZ0o!i;G4!y_^YHKHq6oX4a^KR@ocvM24QDH>)gQ-zdAXg{pR
zt7?3h$uSFFv$4~lRcBSlUCKIO9p9VFeN}^EPQrbB!iSk~Ba2aSpMlf7sUnT!2PnKp
z*Z0Gpr%sIM*x*BP?6E2Zk^y$a@Bl!Rt4YArYn_Po5M;&@gJz097wEglfz`ESLsIET
zBs|I>ZJ0yIG}&DmAFB*@>{;;yJ_vO?f1N3M;xsLT(}SOFekLA$9KWf&-o<J4>N<SJ
z$q%i~u-*3#oh-*thahb0!JOWT&f8d!XzwAzGQL!nkO#Mtg)IYm<INu#8VSTE_*@@#
z^uUOq#LR7q%@R1C#q%@7<f~!b7mP$P%NoH>L?8X4J4oyU8tKa|1>*wEyh6Ebf)U!Z
zYdS#`zoaL-RrPmx!}8501YZ{qj!4m&Y7SrdF&73udbUZylkG?gV+qAaszsvHEe+{D
z<45m&hYod<m=Z$ln9Vr%+)N-L1i@@mXhUv7xeI&ytO9zi@c7AzV;_8sV6(x9eRZMh
z54S*6?{Btf*z)oTF=~kW4(C#k+K)tU>O2}g4E7>W2VeQ&n7!#30RJ8KbdK<Y0H)5I
zM$0m)vqy7@vi^IrfH;#Gsxem4BK?my&!<<`T(8~zo9%GSur(I~)<U&1J;p52lU+S@
zNb{klSy(rx6!qkGrF+&~BfPT!ub=PezA%JMJw;P}W0<OT#6AeNXc{6A${=rK#IXC4
zxFj9wtwB(P6Lv>;T;5$lg`8J^y4jw3DP%j^Drg_woO{_t+eT$<K)EZTq;Nt)FnwC(
zdn9e^bYfVe#xgi0N14F*JX57NCv)*)RpB=Mf~V?NWSU#UQawY+66mc3++R~7B!E-7
zq9Rk`BU2B@B3I9v$&U}~6mSfCfOciaK{TRBz@f|y38H*LA`)p=^TRGgJmZNMhL;Ts
zO-Dz)1ZmBXQ6=y5VB!H(Uj2n!=!yeH=Jot>A)(~X?aCV(oI(=tpI1st*S@&~g6?&k
z>s|?NRJcDff1`1?-Jc?K@U3-!Ys+&;g!A9IYGA|)zLH&vmifA**}mdVQFo{e8U~b2
zO2E010oyxaVfzV>!DiaH1em79k8chs%8c=txP&UaPiGwS0WcWl(|%w+^T*t*H|mk8
zz)Ak3o-PR;*!0I#w>D*9!+3J9$A|8=Ap!W>(U}g$h&Z!YOggAp^3=wF!Yaz_P($@?
z(<jcFH9DBeN-&Fkf1gIHrSgES1NzQM9^-*Fa0|tb4&U`ll^pZmjY_|EK2*O-cb}iG
zg-e!hJ)>n!BM5i+f_^FX8~nrY$)=ZB<nbx<?JzWA{BKS+lAbd0+&*5h0*wz>TKHqm
zVdAIS4fs!QL{-<ape^U8Dp=DYod6%UFYuIjj9tP)Pkk}jd-_~V{_sUsP<0ABRg~+4
z0X2^ZNHR`}f`#1M;up#D{;I{Ab2aXwk85BIEn`~?IQUqZ3JZVSjlUb3;wwE8U=ZUS
zG#r1zHrN3)_zYe66N;*37J|M7fK=TPqa1+Q5Ebu>!F1~xy(})<xPM;nmTAZtXW~n6
zMIaBf)*hGhxcB~gOjkOV#&R71#fs7iv@7C{&4+fk{qe!C^%->Hxa6p?Rjwv#-#Pvf
zm8TQQeBr%Pn(2S+vFpu&c%{Rrk4#{RycSckZsn7q)i-C?s^e~Pur<DUK(|h>Onw~O
zv`sbAk*TMuA3Lo&9S}C+NVe+lL`zRzEuw^L!#*K_R{1j-SsyFUDFnW}3R%$<u<_4l
zU@XB5UYbs8wyrIz*FJJxR6)Z2+bw2fRUC_<erN#4)=(=!?@jug)_iQE@5QQ@xr+O-
zKXwD-&iy{L-hlV7`y#h+e8~ieQ1fx_2)tgs6DHrcRWRYyAY*JD13w4BI7nuq3EQ|>
zis0vASSvzW7Jd2#61)h4#M6URkA_A3SsK4n#`cE2<J=L+g&y^!UXn1x!7u(}5(nol
zj@;WSjqkKz_aULIkqn{zv5UXqLF&=v33q+z$qMO|;?Ojr{!n*KH1eY7L4d1iRWV~<
zi)PV%UesJiR@ZyDP5)h#^ETT_QNYR%ON~5abLuKQ<S+6ho$2MzAiI^GkK@SN_Jd>$
zLWp@8V}aGF=zO!}e(^Si*LlMGu3Si8)@_u+nrICpR-ng^i~GNd$UP_6*gd;57I81d
zqLuuFat(5+->FEsY>{47M=^M$XX_r^DhHhyoVF&%)642YK9oHn`28XL@oD6zTRCr_
zQj#&uvxDDr@MK}Rs%^cX(zMsDRa3RzUQqW?O#N@x@1442leTwu=(D`c&~bPJX1eJx
zR}5A8N$9Bq;W2HP`r4=%i4+)}>MCN-g9+FaIfz4#pX3o<Jd1LlE43z`xvt1-s53?h
z=zD%eb%((V)g$?MyB-3FVp7)DA}SP%YOxQ>%gk8jR#?u%4F3+u2WCA{+7b24rYuJ1
zwW3Y9w-Bt2a(91Hcuj#<QaVwt!dL^(I|@eF#}M8QQNhhgck1+OvI;3!rgoL3#7#i4
z;lM6pF%AQ{Jz?A*7ZVG%oA^GNu!+u9?uiHgw9sx<@=Feteh89ck@C#4$jy-E_ubvs
zr|>xdB*q8Hy&$|)<1KPvN*|iiK~tq?ka$u;jeH>1QR}^dUxIFtyRN6z{I4L_o?enJ
zFR95EMp$tQTUr!1vOm|XcjELh%@1qHj^++_t7XehC^Kxgs_HUQqFOBndGbf*;KnrP
z>1BrQ)f5<<d!$XYkzJBa(0KA8ajE__4rp+AO!R(Vn?_Hde7Y5z!lvA<ALEqD)T1uf
z4m`?0&DC6(Du;=nx%CgE{A45~MZE>&={TbN%QdERb6ljEbbCGjdd@5M#n06;VPP)$
z>chCAA@WK55n7o^L|)RL4<9m6lWth#q>&#GG5)ftZ#UzvbU+$2(jP)!o(zaw#;sdv
z^%g(${-K@o670tu4>IZELt3#`+>9j?qf(`5Ch+>S&;~QQKzkSNY)16RqV;^f>T9$m
zdqgaB84{#YEI4zWG)0m2{JP4snKf5{q~3>X2#QxOjG=sO9EHimSic@4V^<|@R-5Hy
zE<q59;Z}qdne&QrqQ-dH5N)2HCxMX9OQDHo#YeO<efRGkB}szRD2Aoh?UCSVwa#nB
z>p^BF6R52jd09ovYpsaxywq*xnqd^%9fxrz=LFuUgxW6tSBC@dGWefD{H&>5oMjlj
z6Ud@Q2;X<$!M}!W1R~uQvtTfS6QH%6nlH&~+q&RAWmVP$rbyZI&7MJD!MWh1sb*t;
z&V+sSq(hi;g5~PTh!VqP_4Zlgx`%k?t19FqAJy6{$9?t}qv_oZP(+mjL!&s9hsSi0
z`1hZBgO1QyH=#|A^)bdk-w<5x6J#hivLy8_sDXLZ9cyp#>1cVkuO~R8$$=T!YcnR*
z2IK3z=tD9$YM0E;xMYvjGX;DYEKeMPAY0k(Lwzo{Vh7}c15$J|s~_D_e%+RH^Zh!m
zk4lp6r#OascmM8jGUcEAXfHU(neLo*wABl3)3I;N>=s`|zJAW<B)9n(Nq8K7a~ea}
zG9NKV8xhN<1MA~niP?q?6tiyR2XZ&@Dtwm8n!atX9i>wZHZtQNH-HR7WUvwmZrG!N
z6@C{M0eWXL%2LZxW5tb=HS-8XP81s4JBB@;v&wkf0l#Qa_S5T7lahYrpP#_4z4ku!
z%79{Wf8-DjEOK`d7PC)LJqBs(n-#-j1cvFr54a3Sabtu+VZ|9mz#=H?Or~eq<AkwZ
zX|j-sY}(}D8zwAjjbH1FktUaTLc-Bk{>xl$PQ@(j-#K-^vA1?!cVSYHiqjG%wgoo{
z;V>B_%aMBK*fx*zO(E~G2V^Rge0k6DE6)El91p>sh#YPjHEIdf%#qo8d;2q;-PEL#
zM$qSYuUAeQ2&IGK;PK6zotMsO$LC!pl>@QKlp--=jQIkEwD||8ke1rQc)#gAZCdSP
zbp|sBqb`OyD=c13US7+@&9PO~KE57bfoh^{0jOecez`2lpKQh@(KW*IF9t5p(vD6;
zqC<&N{Yb0E4bC_{JpkUsO@rlnQkGCgPZc&=!#+=sq3)AE1cd=a-Lo&kH67=u3f~^x
z$gvF;{hY5N=zW-MGNTT=kuvj=Eeje|_OvDefcre>sl=DrFKM*}wkk;l`}4haQL%D&
zozLBx7UB^7A2;9x3fXkFDG|nU!vVTV#n;l`sA<8?C44E$S_CvCJyIKcbBTSJm2-dp
z+A@d77melYFx?WF=8D}pZGaBq7o{5e+?i$`$d&UL1MLb{9o$$YA(U~As5FJ(o8zOW
zjycOOtBY}?CJP+$sVEXp?BZ2aL1i4K0obmwIcc&4(62jbW8swa9f?DjTSetJS_F2B
z5Z$cKkvqo(>(e|^<$|2NpV%tz7CM|Ai^m?Kd>Yu-{R!v%f8<Vs&C?0$!xE=mn5FWj
zk!}A9uIz_(b|oWEXA(<?YY@1GFSwO)Qt!7$p$G1Y5Pe^FaW@UJ<;(@?iAqdyV$Rj;
z&BUa>RBr7rWNtfZ^9vKm!u^d<U#*#UY2=<Q+Z3!#f(mQ)#kepkr^)DZdQjdk(pm5x
zfaNO{mMZ@oNgP=nH>P~TR}A-E{C@XK9TX7!)BcW+IpovW>PA7tEh)jxk?zJUM*2{Y
zN?T}i@F{LR5-+vp%IKQlcB3Ym)7}cJ12(U+D}MPeLlGDyvcfbe8%LPEy)G!?=e1L=
zDJJoWSy{8;p|+#$)~16&EB2)`e$!tX1y-N{WXm?gwG*OnD!ci3u-9+(iLd7=7;7jR
zmcY=*?xB}|#asYF%EX6t2{+RK&4M4{66KihGOAs;ij@mK&3Uu)3^b|?B;3B+z!38I
z93x_C6}@3&mJvH)!lIq0oQQL86oWy_A|U@GvyD(NwO$c!`%U{`)TMN_Jau#t*Y0lu
z0c4~`*Vxk$tP&+W8%8kVnREOkJevuHD;AI8ltWOEzPR%_#f5(Y$jArOxfd2TY42x(
zvdviv@hBSfQLqM3;mpaTz|811VlQ7jQEm?Is1NzX>fhX*)3?iglf#v5#%li7DBSDs
z9yr*Son&|AfaSp^FHcK!iyS|rW|~Ho3BGnwfGSacSD-Pd3HZx4^Tn{rw@X)t0G#!L
z)6pFajr<=k25R8M>3^D^?Vl5V6+B+5p3Y=}-8meaQr23s5Ci^QiE_I#JND7F{`x)Z
z${rPtj&q-)Eg1mQ&R^d8PLmmpTs0_NfM;Ld9p`~M`3B|`d)KSkHhIgWGh4h9V(M!E
zprOL?IrlHS-Zj#5YaezY^EfJop++5!6~dG@VczVZsShn@a<RH$o|pyl>!H)^)mLap
zN-5d|ZA^-9-}C0NQY-(>WWq2>z$nZ#9f)04o}#fdrZX(@%ws*mvWvY{x|!V;M+h(u
zc(X?j+n3l}NT?SeX>yk#wP026HlrMO$^jJSY9}JbsQW`La`|uCRVgB?-<s<izr{wo
z%|H6F3zMMJ-ilO~ALx|sm;Ti(oz#Voh}L!^<jKYW;vnJ3e5Q@~#>NUkr!Q62rlZJ0
z4(P@;r`r%R2v%XcY4gwA4RY5cS9^>;1!-;WRHH6?A9H4nS~L6+E<h2Ijd^9)9)Wu?
z&Z6rnUTQHBcb2TYq9Y(pf}+ukvGKbZquE$GbO7&Q8`7`4TwN}4e!wxA*DDP2De~9D
z82d8#>rf{kNRARp0%v#mG!BN`{Z0DT(;hL>q2tUur3n4FyKJATTZeC)I7~MlF{vYq
zP#u$a?65C<HK2j1FmNrc^%2E-g7nHvs;r{njk!V^l52euGetz<d5~&ZIN9zNDKe_e
z51es~gi{x)CYmDdc7`emK9`XBg)CJu*>Y1gX<_^dp<Vn0d3^Z+=6=~%);t9$v<y|-
zI)!A&?J<-)8deA2+cj&guE?~1zXkSJl7un7!o~>m$T93g7cEiaEzJi=f(PP7*$Cf<
z3e!q;mMXoy);Hc<e*}Z{ZL8U%uZEB5o6@ZbGkc4qsWXi~<QpSD)5_6lbqjPt;Pfdp
z3oeJfM9$g2CzeYT#Nqt$KLFdt8f2K(&B{yfEii{a=TEmQG~y#AA9ZD_-^%wfCvD(B
zs4R&-hQtuou@U{SX5Z&1*nJ!`^oGs4IEq@IG>=X!%VmT-e!^igX6GoDK`Lrz#=>sc
zkvcN?I-(oNR%$y<5v;+H$CX{e0F$s;-Dc+ckzFlEF7xK<7+Ij5F~FWrmDWsXraDch
zDC0G}@xv|q?bH-m|Mjy0Ms)dZNpHw-DvLp2+c4S+O0)kVJ7zx(o)JrS?zKB>t||@D
zeBgbVopB;#ax&umSZS)xCuXSI)HhTG6R!eRH?)QacpQ5#6L!rNa(`x=`VUEj)U|nB
z1MMG_Tv{ZK#mpijK)fq&ckNP|V4+@K=S)c}ve;M#Pdu?5l^rr)DvUwV0PT?vKYzR%
zGPWilY;hyPpFoR|5JP6?I@iC3Vq6S&sN@s)yy2Kk_{_=#E{tj(A~6Gn2o~=^zMyvs
zejH=*na5H)n8DO#XSngd{F-OXphTbN9bu!~RA1@WgFi`~<6C$z-&Eg~>%F!po2S1_
ze(jCXcwQ%!S`|5^h}24Cf%DGYlJ8~b8L?zf;0`mM@)Jd|9&jr#{?*Qg1XJuUM}jTV
zML9{SGQW{o>!LsKk$gTo3em@>#xK?}8b9NgS<ry>$?dN7ub9st#1lf=`*RfERqiz(
z<l1q(yGP^}AidYR(^()UAdQhNY;4Rq^I+aRUGBkXFoKgzKGcZ`rg#N1u_a@Y2K4DN
zBw%H}Ps<I~9qsjGB5if>%zTB8hI6(Wpm4#3HbZ{z&OHArOIRM>JR?w6>jxW$d~1R(
z8=RTg(0-+#XZ>UEu5%s=xi<v)>U`S%_}9ZcU{{C`IHp8yqFeq7L^5hHPf(B>{qz0U
zx75z&dEB?!YvH!0%yFPn0dnvtlCDFL)%Bh>h0|%OxMnXF0(`E_T1cWldfPUNA#532
zF_UFlhm*4BwrzGZgWp~l89&g1;$Os_(e;Y|xl=2m@`F6(@A7#Zg$6~4{MITfoS(mY
z#oK2mo@6)ugHMq+fCN82iP%cl>0rRR$+U-6UX}VIBZ_N3v^l9y2J@~+nXeeKV5tl_
z58#~`c(ljwfpHzaef#fbnkmRlut=er45g1&uFAxlaV4_Qd(S_*vcPY6fo5V{29CqR
zh0CQnCWemD$tb;75jw?v?k%iaE$Zb*lYKU|?cRSJjsw=kp)Q^<sQboq$-%Wb4S&MA
zlVdnimU4$mbkskQdx7Q|dlV{Xv#mL0koOpL!O>XpVWYrI2cu!TG~H7n=oNXG9I#<8
z2XoyS^Mf6^!*Rvnvc8xyFfpcXmSrE)F%hEOCa_GWBD#KOV3`AJX5v%eZiII@eMG4w
zP{6>u6syX2q5<y!f@45L7h}s!zYCwk>9xdCM#LN@M@N#|``%$kWIB0~(ROY~Ve=g*
zNO-8sq+gRLR{DVwQ!Jfm!U>SpZI$h+6PlG3&djhh9*Vu$hD=4jV#(`EepWBB)od_U
z1z*Wewx!;!ADjqaCwDW1G6@8ht6c*A{M}l8%l0jf?jh`J4b);-n=1;fmgB)4p1;ZG
zDDk{q6&;eqX;tp_US%-mWh|)q)i{eHZbo|{^0}=bKxC@sGOV$YXz)91vn7~h<-uH&
zQb0dByDZJPD<P@o=71^M7X0(IKZcMzC!vF}0lt$t$giqgbXZr=%4zPJFJiM}{F_ZF
z*&-^LZ&#*PWb_z+hmPdXQo#@b=$(#KQ+r%U4q@%YiLcwDr_O=l@s2C_D=O+ra)x4I
z3GyzgJ^F9eyn!@wwT-J}R=Z8tnT5a6KG5R5gG-pfiY0a5((S9zz8|v4#3i1?L);Pg
zdF)P$3PFHJV?33dgZll=vm}2}slzx&vTNIkrKQ!Ekm0@k&{#YvH_dc{sS4ABJG)Ce
z+<xo&D-M47SRp@maX`CuqgF&GK%p{}y+vcXHiFvxV@=%l-atXO(z=p`lxu+IO}}-z
ze5<MolPsqa68b#n<kNSx*_Y`~{$cNu8@`-&0pMrXRVCQr<_};{X<1fu;{x()s=Sg1
z0NDk=PI`fAmyx>`EGPd`kqAvI?*g=B3fqa9H9Rd{L`va?B=t~Y&l0h{I!^E9pG>!S
z#>{UpLngb5T`Uqt6sO=~BOjkJh)+u0qiSo-es@5}f!h*a9Gx*&<5{Eoxc-WF!jSyn
zM@qOve{Y;Ok^%FZ<Jk*5wFrlsSo;wSnALjEIo#*uFxIv!9FLgKac2&3E%_Qv(<jUV
zBGN23RiExtBKd@9Xm1Uk8^ed3-SS`7rk&o+|13*j>K{2K;y}YNN_;1tethBv;U%(w
z%RNe4t*ldJayql#MMurNn<C?CUfrqZP>NoO;%!n-U0V4mzVpPdGu`LKf+RWv>l>VJ
zh|rXJv9Mk&iDk|e!hBRh$KiV}utL&Nkp<UkmLmghbTR#Y0c{s3umoszTYgF55#U!(
z<fni&o_z6(ySXcTqFDI9jZVa2iN(IfM~3XCn>tF@GM$|`t<xr@wa!k3jww5$R<!+D
zuV-W`>R)5FxI<fDaa7c@{yrV)A>igOLHS7vqDnsGiFl7bTk4baLCJDyHe`hWp4JT~
zxRJRy9oc;pw2eW?wv3s^8AsUEk+&zZY`Ez-Lo@iJt=-gFZhS`U&Ct+KB$VGUar1N*
z@v1?8ygBYN+o*ZMCgDHM7MC=Korw86(S<n-YDn>B>G1fFAvHmj{-oZNU|ZY7bG?7%
za!4;s_~l~@pOTy7Zo^+6AY`23W==`h_ME&XEh#dIqn)Ei1rAP5;j0oaGirRuwQysr
zBa#0yNX`7Po5nBsn|`gMKsYvFEKdsi0e?F_b6jl8h=+@ms+m|v$is-!NWtw6(@?$V
zl_q&yu*vK7NYkl6M5O+M8>hB}h=2U?wrE48%##YSN^?I=0+$V|M7{IRFWf36;()R*
zxJPdQDzTQ8c<pmMP%6OqbyzAq<ZDEbc9?=Nck%cwf6%OQ-IbZ8m4s?PkKV`8VWO8p
z-AVcu6val}s3!40BGV60KP{Yu)Au9>-0|B0$0G*)swoM=@rL%&=A*ZOgwL>7z1a%8
zFKtztnNhe(UFtdIA>1N=eN!pq;(cN?j@4UgtmpU_OVf+Lt5A!~Q-4!7z4rNbGV*<4
z`3S~~rTA$L`Bs@(J%h0xlX-Cme-na$&VA?CWqV?s!6CpeZMEoe$7DyV^%f(Y$CD^&
zqb+UVeb3zQ$3puFCqi%M<_{j4`f><VSfjE7!~OIt!jp20Xjt5G2&d`T@zo6%0MBWp
z@Tqo6D5rq~=Pw$eS>6W>Qts%OZ(sH37e1+(`!sDT=vci2*%*lcnLfGx#FXv!uiQm`
zC&DPMh8FaCMRu3k7P2;P<>)CU&Sw8mr%`j%w6%l28(zv})E#p^r{~M)l3_X_Eef#9
z!fgwyX5@Oqx9=Waz>)cTxBx#FRZ7Q4&|@q3fbSjP*Pt|Bw)q1)JAG_&4Bc0~QYI5;
z9l5@3gJ7IgX2*bCLz?mlb1Z8!pV-p58bZOp4MrH)-?C4BM%<U9MAlWn2K&<&E+s3D
zdnF^iQAJrzi4WPaBq|N6tK>`bn_bw_v8c^mNSm=5<TiiF@*H}5<p&!?`5xp18mLpQ
zD#$iMzF%MkS_O%)VV5M8n9h2z&M9<OqeFZY5TER+P!-arNT$GM-4qV}s0eqq#4xo*
z^%C8*r2&l=nRE_UCE~A{j2lEusmt}16@n{goE-_}Sf=eTc9U)Ns<W->N}{I(?E;74
zX%b#E#TsuQAAXq1n>W8vD~|I|L(Aqg?g=aXtg!r5BXJq%+P*yi5*0j^`Ml4I6;HT7
z5db0$wG~_=*tJmS#%smF=#xa&&Jz8fS=qB8x{B|9vz!fwmKbQU8&%pTg}ZM=3#kzV
z_ZQ6}eE9}~T4%V0Xs%r}Jw9AwZlZ~)%<j(y;5w3jzE?jZ=Po~mKlkmPf>XtE(9Q39
z5S-nO>sGi>EdT88T`M*cJ-QO2)(J{jpdX2j!noU=B@Ze69N9Z*ygRJ((WnKT=0Xa4
z5>HTd{3T)O`V-xs9(FA8^R$B+<_d`Zg!1rg#WK2+HXS(SR!(O)SwKq@O>%tXdp}KT
zpzS>sB$N=B!h1`B*_hr3l_}mcGqYM@5PwPL1j^?PC&BQ_KvG0v0}CmL3|yC_fNyLi
zaib~0C!;P<x}7qYL~Nm^oiZAf)p!bqHe;Yzlro`{d>Y#bDnTXvPWs+Y5`ZCeOAdxX
zCQNr*a)lN~1JDbninPT|6#xvPr!u6P!D6j#QGyAlSi+iMZzAA8s4!|Oo;I<&P#87f
z1}&8+%t~ev%@`NRwfE8lg1+grWmTX#j0Luf0bat{$*Vv6?Oll&1AW4N=p!A<Oq3JH
z15i?_Y5)?+p>ztoBEDh8Zbul!(v09dV^(vw_m;E~n7Ix72vc`pWtfDyKs=Ist`7lb
zYP5YlV6WodgY`h<jT;r45Jsdsus|E=1qBk)0a|vDq7W!`0QBWBJPrVvE`T)`pu!4>
z&;}e>0a?Pt@c>>_fJG=UQ(rXrUsV^iQy0~j7nOpEOwo~<;9xV3M&qR&z^trFp|Dga
z%#afXVTGYE$^|P&Bhs+bBC)Q+6RvGR*Dzw6Fg8?xZ5*H<o2(y1)&?T0M<Oe^<>lD1
zp==t)lZj-JiTHwSbr}Zi=tnw-A&Z3toC4Q#(PpeD$iv(YfbFqpp>$-%VOD!U+gMaL
z0Fg03#R`b$j_fdp`mKrB7p7qXn6*PHa>q32r&t2sKcoxsl=5LGrqWU=$$(DfX?Z*-
zZDL9~XrfbHDB*7s)JG)=$rjZu)RQU*#d&mL*HpM3ux+Bz<4Qp}-b(Vs)G51Y8=Uo+
z7zZlqTu0xvo&(e>I!;k&;b#AbQzV}1(2(z1y>Fk6KE@waF^K<U_&~i;=(QK=NJM&%
z=vc9~sE!DN60C>q{d@b-3Ge{J{jt>gwJni6ufU{X-fc+B2-`YjYGsmBSgS6oO)Aq;
zI7J~w=8hx-a2*4z3=5D&uDPO|4O?(UBedeq1L}`~nEDmC0d1YYpF1Hr$ZOS9QLtrp
z6nW>C@!SbU@@ZZaznY-{-@R|GhS4I()!-?p@Vi*TJjF`oVea-G1X<!}u}JfP>Nzd!
y-^Vp%pcMc>T*9)K0*<gkF<00Bd$o=vL*`B(>lM!C8AZPg+G7PFFQ7O_Sp6RwD_p|>

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 be784dc1d5bcb92ab155f578f3723524a3dd9688..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 29512
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%0DQ&GeghWoFLr
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
DlhOCh

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 2cc3e4852a5a42e6aadd6284e067b66e14a57bc7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 16448
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
SpmL}^|C{CHXC=u2fd30xD#Mci

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.

From a64f64aba449efed5c6e3d56dd29c2c05cfb5bef Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 11:46:21 +0100
Subject: [PATCH 2/8] [REF] website: snippets

* Delete useless snippets
* Delete default mb,mt on snippets
* Delete useless options
* Reorganize snippets order
* Style improvements
---
 .../static/src/img/blocks/block_separator.png | Bin 338 -> 0 bytes
 .../static/src/less/website.snippets.less     | 685 +++++++++---------
 addons/website/views/snippets.xml             | 164 +----
 3 files changed, 370 insertions(+), 479 deletions(-)
 delete mode 100644 addons/website/static/src/img/blocks/block_separator.png

diff --git a/addons/website/static/src/img/blocks/block_separator.png b/addons/website/static/src/img/blocks/block_separator.png
deleted file mode 100644
index 468d75656e06cc9b7b572be9da50b4f6a18bd891..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 338
zcmV-Y0j>UtP)<h;3K|Lk000e1NJLTq003kF002)20{{R3Dp!z`00004XF*Lt006O%
z3;baP0000pP)t-sud%Z2?(TYif8^!m!NbGT)YQt$%%-WSjE|7^_V${Zny06y`1tti
z>+5lKc9WBn|Ns93IPJ3l007EKL_t(o!|m8n4udcZ15j_U(J(r=|7mxDeI)L%hU9!B
zJ*j|d2Zvx_#E20iMt+6#?R=!KukCE4ulrtBP&eud2&1fkF{%nEqo{y0Y6?iBq<}Rl
z3TUICfH(3A28^_V5hJT$$Ve)_8I4>Axn&V7v@zZ1B=UUo(;|CZ14^XdNeGZ=g5zpm
zpG-}(C5b$O|AZs_#~b-OL=z+wkw_EnG%-~ZxHZ*5Q-U;gPE$-Z6<f0`(5yW)3mnZV
kO0!h+&1l4k5hGVaK3gW|n0RdwWdHyG07*qoM6N<$f>!&H)Bpeg

diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
index de57aa7da97..f9fa1b6cbf2 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.snippets.less
@@ -1,407 +1,396 @@
 // General rules
-// =============================
-
 .carousel, .parallax, .blockquote {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 @media (max-width: 400px) {
-  section, .parallax, .row, .hr, .blockquote {
-    height: auto !important;
-  }
+    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;
+    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;
+    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;
-  }
+    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 */
+// Other snippet styles
 .s_comparisons .panel .list-group-item:not(.active) {
-  color: #666;
+    color: #666;
 }
 
 .s_references .img-thumbnail {
-  border: none;
+    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;
-      }
+    width: 40%;
+    margin: 4px;
+    div.o_container {
+        position: relative;
     }
-  }
-}
-.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;
-}
 
+    &.o_margin_s {
+        margin-bottom: 4px;
+    }
+    &.o_margin_s.pull-right {
+        margin-left: 8px;
+    }
+    &.o_margin_s.pull-left {
+        margin-right: 8px;
+    }
+    &.o_margin_m {
+        margin-bottom: 8px;
+    }
+    &.o_margin_m.pull-right {
+        margin-left: 12px;
+    }
+    &.o_margin_m.pull-left {
+        margin-right: 12px;
+    }
+    &.o_margin_l {
+        margin-bottom: 12px;
+    }
+    &.o_margin_l.pull-right {
+        margin-left: 16px;
+    }
+    &.o_margin_l.pull-left {
+        margin-right: 16px;
+    }
+    &.o_margin_xl {
+        margin-bottom: 24px;
+    }
+    &.o_margin_xl.pull-right {
+        margin-left: 32px;
+    }
+    &.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;
+    .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%;
-  }
+.carousel .carousel-control {
+    &.left {
+        left: -10px;
+        * {
+            position: absolute;
+            top: 50%;
+            z-index: 5;
+            right: 50%;
+        }
+    }
+    &.right {
+        right: -10px;
+        * {
+            position: absolute;
+            top: 50%;
+            z-index: 5;
+            left: 50%;
+        }
+    }
 }
 .quotecarousel {
-  padding-bottom: 16px;
+    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;
+div.carousel .container {
+    > .carousel-caption {
+        .o-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;
+    > .carousel-image {
+        .o-position-absolute(@top: 5%, @bottom: 5%);
+        max-height: 90%;
+        margin: 0 auto;
     }
-  }
-  .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.text_image .container {
+        > .carousel-caption {
+            left: 10%;
+            > div {
+                right: 50%;
+                margin-right: -20%;
+                max-width: 550px;
+            }
+        }
+        > .carousel-image {
+            right: 10%;
+            left: 50%;
+        }
     }
-  }
-  .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.image_text .container {
+        > .carousel-caption {
+            right: 10%;
+            > div {
+                left: 50%;
+                margin-left: -20%;
+                max-width: 550px;
+            }
+        }
+        > .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%;
+            }
+        }
+        > .carousel-image {
+            display: none !important;
+        }
     }
-  }
-  .item.text_only .container > .carousel-image {
-    display: none !important;
-  }
 }
 
 // Gallery
-// ====================================
+.o_gallery {
+    &.o_grid, &.o_masonry {
+        .img {
+            width: 100%;
+        }
+    }
+    &.o_grid {
+        &.o_spc-none div.row {
+            margin: 0;
+            * {
+                padding: 0;
+            }
+        }
+        &.o_spc-small div.row {
+            margin: 5px 0;
+            * {
+                padding: 0 5px;
+            }
+        }
+        &.o_spc-medium div.row {
+            margin: 10px 0;
+            * {
+                padding: 0 10px;
+            }
+        }
+        &.o_spc-big div.row {
+            margin: 15px 0;
+            * {
+                padding: 0 15px;
+            }
+        }
 
-.o_gallery.o_grid .img,
-.o_gallery.o_masonry .img {
-  width: 100%;
+        &.size-auto .row {
+            height: auto;
+        }
+        &.size-small .row {
+            height: 100px;
+        }
+        &.size-medium .row {
+            height: 250px;
+        }
+        &.size-big .row {
+            height: 400px;
+        }
+        &.size-small, &.size-medium, &.size-big {
+            img {
+                height: 100%;
+            }
+        }
+    }
+    &.o_masonry {
+        &.o_spc-none div.col {
+            padding: 0;
+            > img {
+                margin: 0 !important;
+            }
+        }
+        &.o_spc-small div.col {
+            padding: 0 5px;
+            > img {
+                margin: 5px 0 !important;
+            }
+        }
+        &.o_spc-medium div.col {
+            padding: 0 10px;
+            > img {
+                margin: 10px 0 !important;
+            }
+        }
+        &.o_spc-big div.col {
+            padding: 0 15px;
+            > img {
+                margin: 15px 0 !important;
+            }
+        }
+    }
+    &.o_nomode {
+        &.o_spc-none .img {
+            padding: 0;
+        }
+        &.o_spc-small .img {
+            padding: 5px;
+        }
+        &.o_spc-medium .img {
+            padding: 10px;
+        }
+        &.o_spc-big .img {
+            padding: 15px;
+        }
+    }
+    &.o_slideshow {
+        .carousel ul.carousel-indicators li {
+            border: 1px solid #aaa;
+        }
+        > .container {
+            height: 100%;
+        }
+    }
+    .carousel-inner .item img {
+        max-width: none;
+    }
 }
+.o_gallery, .modal-body {
+    &.o_slideshow {
+        .carousel {
+            height: 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%;
-}
+            .item {
+                padding-bottom: 64px;
+            }
 
-.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;
-}
+            img {
+                max-height: 100%;
+                max-width: 100%;
+                margin: auto;
+                position: relative;
+                top: 50%;
+                .translate(0, -50%);
+            }
 
-.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%;
-}
+            ul.carousel-indicators {
+                display: block;
+                height: auto;
+                padding: 0;
+                border-width: 0;
+                position: absolute;
+                bottom: 0;
 
-.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;
+                > * {
+                    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;
+
+                    &: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");
+                    }
+                }
+            }
+
+            .carousel-control {
+                &.right, &.left {
+                    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);
-  }
+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;
+    background-size: cover;
     > div {
-      display: table-cell;
-      vertical-align: middle;
-      padding: 32px 0;
+        position: relative;
+        display: table;
+        width: 100%;
+        min-height: 200px;
+        > div {
+            display: table-cell;
+            vertical-align: middle;
+            padding: 32px 0;
+        }
     }
-  }
 }
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 6e49bc09601..62269ba2a6c 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
-
+<odoo>
 <template id="s_banner" name="Banner">
-    <div id="myCarousel" class="carousel slide s_banner oe_custom_bg mb32" data-interval="10000" style="height: 320px;">
+    <div id="myCarousel" class="carousel slide s_banner oe_custom_bg" data-interval="10000" style="height: 320px;">
         <!-- Indicators -->
         <ol class="carousel-indicators hidden">
             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@@ -77,51 +75,8 @@
     </section>
 </template>
 
-<template id="s_text_image_floating" name="Image Float">
-    <section class="s_text_image_floating">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12 mb16 mt16">
-                    <div class="o_image_floating o_margin_l pull-right">
-                        <div class="o_container">
-                            <img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"  alt="Odoo Members"/>
-                            <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
-                        </div>
-                        <div class="o_footer">
-                            <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
-                        </div>
-                    </div>
-                    <h3>What a day it was yesterday - such a big day for us!</h3>
-                    <p style="text-align: justify;">
-                        In case you still feel a bit puzzled about all
-                        of our yesterday's announcements, here is a little
-                        summary for you. <br/>
-                        We have decided to change the
-                        name because <b>"OpenERP"</b> didn't reflect the offering
-                        of the company anymore. With our newest apps, such
-                        as Website Builder, PoS or eCommerce, we have
-                        moved beyond the ERP territory. <br/>
-                        But <u>don't worry</u>, <b>Odoo</b> is and always will be
-                        fully open source. You can read more about the new name here.
-                        We have also prepared a short FAQ to explain all these changes
-                        to all of you. <br/>
-                    </p>
-                    <h3>Discover more about Odoo</h3>
-                    <p style="text-align: justify;">
-                        With Odoo's fully integrated software, you can easily manage your
-                        meetings, schedule business calls, create recurring meetings,
-                        synchronize your agenda and easily keep in touch with your colleagues,
-                        partners and other people involved in projects or business discussions.
-                        <br/><br/><a href="#">Check now and discover more today!</a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </section>
-</template>
-
 <template id="s_big_message" name="Big message">
-    <section class="jumbotron s_big_message mt16 mb16">
+    <section class="jumbotron s_big_message">
         <div class="container">
             <h1>Sell Online. Easily.</h1>
             <p>
@@ -183,7 +138,7 @@
 </template>
 
 <template id="s_features" name="Features">
-    <section class="s_features mt16">
+    <section class="s_features">
         <div class="container">
             <div class="row mt16 mb16">
                 <div class="col-md-4 text-center">
@@ -207,7 +162,7 @@
 </template>
 
 <template id="s_big_picture" name="Big Picture">
-    <section class="s_big_picture bg-primary mt16 mb16">
+    <section class="s_big_picture bg-primary">
         <div class="container">
             <div class="row">
                 <div class="col-md-12 text-center mt32 mb32">
@@ -235,10 +190,10 @@
 </template>
 
 <template id="s_three_columns" name="Three Columns">
-    <section class="s_three_columns mt16 mb16">
+    <section class="s_three_columns">
         <div class="container">
             <div class="row">
-                <div class="col-md-4">
+                <div class="col-md-4 mt16">
                     <img class="img img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg" alt="Odoo - Sample 1 for three columns"/>
                     <h4 class="mt16">Feature One</h4>
                     <p>
@@ -247,7 +202,7 @@
                         column and use the top icons to perform your action.
                     </p>
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-4 mt16">
                     <img class="img img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg" alt="Odoo - Sample 2 for three columns"/>
                     <h4 class="mt16">Feature Two</h4>
                     <p>
@@ -257,7 +212,7 @@
                         one as a copy.
                     </p>
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-4 mt16">
                     <img class="img img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg" alt="Odoo - Sample 3 for three columns"/>
                     <h4 class="mt16">Feature Three</h4>
                     <p>
@@ -283,8 +238,8 @@
 <template id="s_quote" name="Quote">
     <blockquote class="s_quote">
         <p>
-Write a quote here from one of your customers. Quotes are a
-great way to build confidence in your products or services.
+            Write a quote here from one of your customers. Quotes are a
+            great way to build confidence in your products or services.
         </p>
         <p><small>Author of this quote</small></p>
     </blockquote>
@@ -308,7 +263,6 @@ great way to build confidence in your products or services.
     <div class="o_image_floating o_margin_l pull-right s_image_floating">
         <div class="o_container">
             <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png" alt="Odoo CMS- Sample image floating"/>
-            <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
         </div>
         <div class="o_footer">
             <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
@@ -316,10 +270,6 @@ great way to build confidence in your products or services.
     </div>
 </template>
 
-<template id="s_separator" name="Separator">
-    <hr class="s_separator"/>
-</template>
-
 <template id="s_share" name="Share">
     <div class="oe_share s_share">
         <h3>
@@ -465,48 +415,6 @@ great way to build confidence in your products or services.
     </section>
 </template>
 
-<template id="s_faq" name="FAQ">
-    <section class="s_faq">
-        <div class="container">
-            <h2 class="page-header">
-                Point of Sale Questions <small>v7</small>
-            </h2>
-            <h3>
-                Which hardware does Odoo POS support?
-            </h3>
-            <p>
-                Odoo's POS is a web application that can run on any device that
-                can display websites with little to no setup required.
-            </p><p>
-                The Point of Sale works perfectly on any kind of touch enabled
-                device, whether it's multi-touch tablets like an iPad or
-                keyboardless resistive touchscreen terminals.
-            </p>
-            <h3>
-                Does it works offline?
-            </h3>
-            <p>
-                Deploy new stores with just an internet connection: no
-                installation, no specific hardware required. It works with any
-                iPad, Tablet PC, laptop or industrial POS machine.
-            </p><p>
-                While an internet connection is required to start the Point of
-                Sale, it will stay operational even after a complete disconnection.
-            </p>
-
-            <h2 class="page-header">
-                Project Management Questions <small>v7</small>
-            </h2>
-            <h3>
-                Can I use it to manage projects based on agile methodologies?
-            </h3>
-            <p>
-                Yes.
-            </p>
-        </div>
-    </section>
-</template>
-
 <template id="s_faq_collapse" name="FAQ Roller">
     <section class="s_faq_collapse">
         <div class="container">
@@ -570,7 +478,7 @@ great way to build confidence in your products or services.
 </template>
 
 <template id="s_references" name="References">
-    <section class="s_references mt16 mb32">
+    <section class="s_references">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
@@ -581,11 +489,13 @@ great way to build confidence in your products or services.
                         More than 500 happy customers.
                     </h3>
                 </div>
+            </div>
+            <div class="row">
                 <div class="col-md-4 col-xs-12 col-md-offset-1 mt16 mb32">
                     <blockquote>
                         <p>
-Write a quote here from one of your customers. Quotes are a
-great way to build confidence in your products or services.
+                            Write a quote here from one of your customers. Quotes are a
+                            great way to build confidence in your products or services.
                         </p>
                         <small>Author of this quote</small>
                     </blockquote>
@@ -593,12 +503,14 @@ great way to build confidence in your products or services.
                 <div class="col-md-4 col-xs-12 col-md-offset-2 mt16 mb32">
                     <blockquote>
                         <p>
-Odoo provides essential platform for our project management.
-Things are better organized and more visible with it.
+                            Odoo provides essential platform for our project management.
+                            Things are better organized and more visible with it.
                         </p>
                         <small>John Doe, CEO</small>
                     </blockquote>
                 </div>
+            </div>
+            <div class="row">
                 <div class="col-md-2 col-sm-4 col-xs-6">
                   <img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
                 </div>
@@ -623,7 +535,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 mb0" data-interval="10000">
+    <div id="myQuoteCarousel" class="carousel quotecarousel slide s_quotes_slider" data-interval="10000">
         <!-- Indicators -->
         <ol class="carousel-indicators mb0">
             <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
@@ -638,8 +550,8 @@ Things are better organized and more visible with it.
                         <div class="row">
                             <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
                                     <p>
-Write a quote here from one of your customers. Quotes are a
-great way to build confidence in your products or services.
+                                        Write a quote here from one of your customers. Quotes are a
+                                        great way to build confidence in your products or services.
                                     </p>
                                     <small>Author of this quote</small>
                             </blockquote>
@@ -656,8 +568,8 @@ great way to build confidence in your products or services.
                         <div class="row">
                             <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
                                     <p>
-Odoo provides essential platform for our project management.
-Things are better organized and more visible with it.
+                                        Odoo provides essential platform for our project management.
+                                        Things are better organized and more visible with it.
                                     </p>
                                     <small>John Doe, CEO</small>
                             </blockquote>
@@ -675,7 +587,7 @@ Things are better organized and more visible with it.
     <section class="s_feature_grid">
         <div class="container">
             <div class="row">
-                <div class="col-md-5 text-center">
+                <div class="col-md-5">
                     <div class="col-md-12 mt16 mb16">
                         <h2>List of Features</h2>
                         <h4 class="text-muted">Add a great slogan</h4>
@@ -696,7 +608,7 @@ Things are better organized and more visible with it.
                         <p class="text-muted">Select and delete blocks to remove some features.</p>
                     </div>
                 </div>
-                <div class="col-md-5 text-center col-md-offset-2">
+                <div class="col-md-5 col-md-offset-2">
                     <div class="col-md-12 mt16 mb16">
                         <h2>Second List</h2>
                         <h4 class="text-muted">Add a great slogan</h4>
@@ -750,8 +662,8 @@ Things are better organized and more visible with it.
                                     <div class="row">
                                         <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
                                             <p>
-Write a quote here from one of your customers. Quotes are a
-great way to build confidence in your products or services.
+                                                Write a quote here from one of your customers. Quotes are a
+                                                great way to build confidence in your products or services.
                                             </p>
                                             <small>Author of this quote</small>
                                         </blockquote>
@@ -768,8 +680,8 @@ great way to build confidence in your products or services.
                                     <div class="row">
                                         <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
                                             <p>
-Odoo provides essential platform for our project management.
-Things are better organized and more visible with it.
+                                                Odoo provides essential platform for our project management.
+                                                Things are better organized and more visible with it.
                                             </p>
                                             <small>John Doe, CEO</small>
                                         </blockquote>
@@ -816,17 +728,15 @@ Things are better organized and more visible with it.
         <i class="material-icons">&#xE8F1;</i> Structure
     </div>
     <div class="o_panel_body">
+        <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
         <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
         <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
         <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
-        <t t-snippet="website.s_text_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
         <t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
         <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/blocks/block_text_block.png"/>
-        <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
         <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
         <t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
         <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
-        <t t-snippet="website.s_separator" t-thumbnail="/website/static/src/img/blocks/block_separator.png"/>
     </div>
 </div>
 
@@ -852,7 +762,6 @@ Things are better organized and more visible with it.
         <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/blocks/block_comparison.png"/>
         <t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
         <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
-        <t t-snippet="website.s_faq" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
         <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
         <t t-snippet="website.s_quotes_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
         <t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
@@ -1062,10 +971,6 @@ Things are better organized and more visible with it.
         </li>
     </div>
 
-    <div data-selector=".o_image_floating">
-        <li data-toggle_class="o_hide_link"><a>Hide link</a></li>
-    </div>
-
     <div data-selector=".o_image_floating">
         <li class="dropdown-submenu">
             <a tabindex="-2" href="#">Float</a>
@@ -1101,7 +1006,4 @@ Things are better organized and more visible with it.
          data-drop-in='.panel-group:has(> .panel > .panel-collapse)'>
     </div>
 </template>
-
-
-</data>
-</openerp>
+</odoo>

From 40334b3342df66ff93e511a97107e6df6c209e21 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 12:39:00 +0100
Subject: [PATCH 3/8] [REF] web_editor,website,mass_mailing: editor UI
 unification

Before, the whole editor UI was redefined for web_editor, each
mass_mailing template, website builder, ... Now they all inherit
from the web_editor one.
---
 addons/mass_mailing/views/snippets_themes.xml | 964 +++++++++---------
 addons/web_editor/views/snippets.xml          |  58 +-
 addons/website/views/snippets.xml             | 165 +--
 3 files changed, 587 insertions(+), 600 deletions(-)

diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 2bce3bb239b..c718d5d2955 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -1,512 +1,510 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
-<template id="email_designer_snippets">
-<ul>
-    <li class="active">
-        <a href="#email_designer_default_headers" 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" style="margin-top: -0.15em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
-                <i class="fa fa-arrow-up fa-stack-1x text-muted" style="margin-top: 0.25em; display: inline-block; font-size: 0.6em;"></i>
-            </span>
-        </a>
-    </li>
-    <li>
-        <a href="#email_designer_default_body" 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-left fa-stack-1x" style="margin-top: 0.05em;"></i>
-            </span>
-        </a>
-    </li>
-    <li>
-        <a href="#email_designer_default_extra" 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-left fa-stack-1x" style="display: inline-block; height: 0.93em; margin-top: 0.3em; overflow: hidden;"></i>
-            </span>
-        </a>
-    </li>
-    <li>
-        <a href="#email_designer_default_footer" 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" style=" margin-top: 0.7em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
-                <i class="fa fa-arrow-down fa-stack-1x text-muted" style="display: inline-block; font-size: 0.6em; margin-top: -0.15em;"></i>
-            </span>
-        </a>
-    </li>
-</ul>
+<odoo>
+<template id="email_designer_snippets" inherit_id="web_editor.snippets" primary="True">
+    <xpath expr="//ul[@id='snippets_menu']" position="replace">
+        <ul id="snippets_menu">
+            <li class="active">
+                <a href="#email_designer_default_headers" 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" style="margin-top: -0.15em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
+                        <i class="fa fa-arrow-up fa-stack-1x text-muted" style="margin-top: 0.25em; display: inline-block; font-size: 0.6em;"></i>
+                    </span>
+                </a>
+            </li>
+            <li>
+                <a href="#email_designer_default_body" 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-left fa-stack-1x" style="margin-top: 0.05em;"></i>
+                    </span>
+                </a>
+            </li>
+            <li>
+                <a href="#email_designer_default_extra" 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-left fa-stack-1x" style="display: inline-block; height: 0.93em; margin-top: 0.3em; overflow: hidden;"></i>
+                    </span>
+                </a>
+            </li>
+            <li>
+                <a href="#email_designer_default_footer" 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" style=" margin-top: 0.7em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
+                        <i class="fa fa-arrow-down fa-stack-1x text-muted" style="display: inline-block; font-size: 0.6em; margin-top: -0.15em;"></i>
+                    </span>
+                </a>
+            </li>
+        </ul>
+    </xpath>
 
-<div id="o_scroll">
+    <xpath expr="//div[@id='o_scroll']" position="replace">
+        <div id="o_scroll">
+            <div id="email_designer_default_headers" class="o_panel">
+                <div class="o_panel_header">
+                    <span class="fa-stack">
+                        <i class="fa fa-align-justify fa-stack-1x" style="margin-top: -0.15em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
+                        <i class="fa fa-arrow-up fa-stack-1x" style="margin-top: 0.25em; display: inline-block; font-size: 0.6em;"></i>
+                    </span> Headers
+                </div>
+                <div class="o_panel_body">
+                    <div name="Center Logo" class="basic_theme o_mail_block_header_center_logo">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
+                            <table style="margin: 0 auto;border-collapse:collapse;background:inherit;width:600px;color:inherit" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    <tr>
+                                        <td valign="center" style="text-align:center">
+                                            &amp;nbsp;
+                                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
+                                                <img class="padding-medium" src="/logo.png" style="height:auto;max-width:600px;width:200px" alt="Your Logo" />
+                                            </a>
+                                            &amp;nbsp;
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
 
-<div id="email_designer_default_headers" class="o_panel">
-    <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-align-justify fa-stack-1x" style="margin-top: -0.15em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
-            <i class="fa fa-arrow-up fa-stack-1x" style="margin-top: 0.25em; display: inline-block; font-size: 0.6em;"></i>
-        </span> Headers
-    </div>
-    <div class="o_panel_body">
-        <div name="Center Logo" class="basic_theme o_mail_block_header_center_logo">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
-                <table style="margin: 0 auto;border-collapse:collapse;background:inherit;width:600px;color:inherit" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td valign="center" style="text-align:center">
-                                &amp;nbsp;
-                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
-                                    <img class="padding-medium" src="/logo.png" style="height:auto;max-width:600px;width:200px" alt="Your Logo" />
-                                </a>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
+                    <div name="Center Text" class="basic_theme o_mail_block_header_center_text">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
+                            <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px;color:inherit" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    <tr>
+                                        <td valign="center" style="text-align:center;font-size: 30px">
+                                            &amp;nbsp;
+                                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit;">
+                                                <strong>My Company</strong>
+                                            </a>
+                                            &amp;nbsp;
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
 
-        <div name="Center Text" class="basic_theme o_mail_block_header_center_text">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
-                <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px;color:inherit" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td valign="center" style="text-align:center;font-size: 30px">
-                                &amp;nbsp;
-                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit;">
-                                    <strong>My Company</strong>
-                                </a>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Logo - Social" class="basic_theme o_mail_block_header_social">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
-                <table cellspacing="0" cellpadding="0" style="width:600px;border-collapse:collapse;background:inherit;color:inherit">
-                    <tr>
-                        <td valign="center" width="270" style="padding:10px 10px 10px 5px;">
-                            &amp;nbsp;
-                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
-                                <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
-                            </a>
-                            &amp;nbsp;
-                        </td>
-                        <td valign="center" width="270" style="padding:10px 15px 10px 10px">
-                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
+                    <div name="Logo - Social" class="basic_theme o_mail_block_header_social">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
+                            <table cellspacing="0" cellpadding="0" style="width:600px;border-collapse:collapse;background:inherit;color:inherit">
                                 <tr>
-                                    <td align="right">
-                                        <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/></a>
+                                    <td valign="center" width="270" style="padding:10px 10px 10px 5px;">
+                                        &amp;nbsp;
+                                        <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
+                                            <img src="/logo.png" style="padding:10px;height:auto;max-width:600px;width:200px" alt="Your Logo" />
+                                        </a>
+                                        &amp;nbsp;
                                     </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
-                                    </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
-                                    </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
-                                    </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                    <td valign="center" width="270" style="padding:10px 15px 10px 10px">
+                                        <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
+                                            <tr>
+                                                <td align="right">
+                                                    <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon"/></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                            </tr>
+                                        </table>
                                     </td>
                                 </tr>
                             </table>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
+                        </div>
+                    </div>
 
-        <div name="Text - Social" class="basic_theme o_mail_block_header_text_social">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
-                <table cellspacing="0" cellpadding="0" style="width:600px;border-collapse:collapse;background:inherit;color:inherit">
-                    <tr>
-                        <td valign="center" width="270" style="padding:10px 10px 10px 5px;font-size: 30px">
-                            &amp;nbsp;
-                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit">
-                                <strong>My Company</strong>
-                            </a>
-                            &amp;nbsp;
-                        </td>
-                        <td valign="center" width="270" style="padding:10px 15px 10px 10px">
-                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
+                    <div name="Text - Social" class="basic_theme o_mail_block_header_text_social">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
+                            <table cellspacing="0" cellpadding="0" style="width:600px;border-collapse:collapse;background:inherit;color:inherit">
                                 <tr>
-                                    <td align="right">
-                                        <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                    <td valign="center" width="270" style="padding:10px 10px 10px 5px;font-size: 30px">
+                                        &amp;nbsp;
+                                        <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;color: inherit">
+                                            <strong>My Company</strong>
+                                        </a>
+                                        &amp;nbsp;
                                     </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
-                                    </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
-                                    </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
-                                    </td>
-                                    <td align="right" style="padding-left:5px">
-                                        <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                    <td valign="center" width="270" style="padding:10px 15px 10px 10px">
+                                        <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;background:inherit;color:inherit">
+                                            <tr>
+                                                <td align="right">
+                                                    <a t-att-href="(website.social_facebook) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a t-att-href="(website.social_twitter) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a t-att-href="(website.social_googleplus) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a t-att-href="(website.social_linkedin) or '#'"><img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                                <td align="right" style="padding-left:5px">
+                                                    <a href="#"><img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" /></a>
+                                                </td>
+                                            </tr>
+                                        </table>
                                     </td>
                                 </tr>
                             </table>
-                        </td>
-                    </tr>
-                </table>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
-</div>
-<div id="email_designer_default_body" class="o_panel">
-    <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-align-left fa-stack-1x"></i>
-        </span> Body
-        </div>
-    <div class="o_panel_body">
-        <div name="Title - Subtitle" class="basic_theme o_mail_block_title_sub">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777">
-                <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td style="text-align:center;padding-bottom:10px">
-                                <p style="margin:0;font-size:36px">Check this out!</p>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="font-size:20px; text-align:center; padding: 0 5px">
-                                <p style="margin:0">Come check out my stuff!</p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
+            <div id="email_designer_default_body" class="o_panel">
+                <div class="o_panel_header">
+                    <span class="fa-stack">
+                        <i class="fa fa-align-left fa-stack-1x"></i>
+                    </span> Body
+                    </div>
+                <div class="o_panel_body">
+                    <div name="Title - Subtitle" class="basic_theme o_mail_block_title_sub">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777">
+                            <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td style="text-align:center;padding-bottom:10px">
+                                            <p style="margin:0;font-size:36px">Check this out!</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td style="font-size:20px; text-align:center; padding: 0 5px">
+                                            <p style="margin:0">Come check out my stuff!</p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
 
-        <div name="Text-Image" class="basic_theme o_mail_block_text_image">
-            <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
-                <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td align="left" style="padding:20px;font-size:14px" class="col_mv bg-color">
-                                <p style="margin:0;font-size:30px">Your order has shipped!</p>
-                                <p style="margin:0">Dear Bob,</p>
-                                <p style="margin:0">
-                                    We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
-                                </p>
-                                <a href="#" style="-webkit-user-select: none; padding: 6px 12px; font-size: 14px; line-height: 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; color: rgb(255, 255, 255); border: 1px solid rgb(228, 55, 37); text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: rgb(231, 76, 60);">Your Order</a>
-                                &amp;nbsp;
-                            </td>
-                            <td style="padding-top:20px;padding-bottom:0;vertical-align:middle;width:200px;" class="bg-color col_mv">
-                                <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse;background:inherit">
+                    <div name="Text-Image" class="basic_theme o_mail_block_text_image">
+                        <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
+                            <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td align="left" style="padding:20px;font-size:14px" class="col_mv bg-color">
+                                            <p style="margin:0;font-size:30px">Your order has shipped!</p>
+                                            <p style="margin:0">Dear Bob,</p>
+                                            <p style="margin:0">
+                                                We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
+                                            </p>
+                                            <a href="#" style="-webkit-user-select: none; padding: 6px 12px; font-size: 14px; line-height: 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; color: rgb(255, 255, 255); border: 1px solid rgb(228, 55, 37); text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: rgb(231, 76, 60);">Your Order</a>
+                                            &amp;nbsp;
+                                        </td>
+                                        <td style="padding-top:20px;padding-bottom:0;vertical-align:middle;width:200px;" class="bg-color col_mv">
+                                            <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse;background:inherit">
+                                                <tbody>
+                                                    <tr>
+                                                        <td style="vertical-align:middle;text-align:center">
+                                                            &amp;nbsp;
+                                                            <span class="fa fa-10x fa-music"></span>
+                                                            &amp;nbsp;
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Image Title" class="basic_theme o_mail_block_title_text">
+                        <div class="snippet_row bg-color" style="padding:0px; margin:auto;width:600px;background: #fff repeat top /100%;color:#777777">
+                            <table cellpadding="0" cellspacing="0" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit;width:600px">
+                                <tbody>
+                                    <tr>
+                                        <td align="left" style="padding:20px">
+                                            <p style="margin:0;font-size:30px">Your order has shipped!</p>
+                                            <p style="margin:0;font-size:14px">
+                                                Dear Bob,<br/>
+                                                We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
+                                            </p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td style="text-align:center;width:200px;">
+                                            &amp;nbsp;
+                                            <span class="fa fa-10x fa-music"></span>
+                                            &amp;nbsp;
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Content Image" class="basic_theme o_mail_block_text_image">
+                        <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
+                            <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td align="left" style="padding:20px" class="col_mv bg-color">
+                                            <p style="margin:0;font-size:14px">
+                                                We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
+                                            </p>
+                                        </td>
+                                        <td style="text-align:center;vertical-align:middle;width:200px;" class="col_mv bg-color">
+                                            &amp;nbsp;
+                                            <span class="fa fa-10x fa-music"></span>
+                                            &amp;nbsp;
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Image Content" class="basic_theme o_mail_block_image_text">
+                        <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
+                            <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td style="text-align:center;vertical-align:middle;width:200px;" class="col_mv bg-color">
+                                            &amp;nbsp;
+                                            <span class="fa fa-10x fa-music"></span>
+                                            &amp;nbsp;
+                                        </td>
+                                        <td style="padding:20px" class="col_mv bg-color">
+                                            <p style="margin:0;font-size:14px">
+                                                We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
+                                            </p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Button" class="basic_theme o_mail_block_button">
+                        <div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#777777">
+                            <table style="width:600px;text-align:center;margin:0 auto;border-collapse:collapse;background:inherit;color:inherit">
+                                <tr>
+                                    <td class="row" style="padding:10px 0;text-align:center">
+                                        &amp;nbsp;
+                                        <a href="#" style="-webkit-user-select: none; padding: 6px 12px; font-size: 14px; line-height: 20px; color: rgb(255,255,255); border: none; text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: rgb(101,101,101);border-radius:4px">My Account</a>
+                                        &amp;nbsp;
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Three Columns" class="basic_theme o_mail_block_three_cols">
+                        <div style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#000;color:#777777">
+                            <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td style="padding:30px 15px;width:33%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color">
+                                            &amp;nbsp;
+                                            <span class="fa fa-check fa-3x"></span>
+                                            &amp;nbsp;
+                                            <p style="margin:0;font-size:24px;font-weight:bold">Step 1</p>
+                                            <p style="margin:0">    
+                                                We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+                                            </p>
+                                        </td>
+                                        <td style="vertical-align:top; padding: 30px 15px; width:34%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color">
+                                            &amp;nbsp;
+                                            <span class="fa fa-truck fa-3x"></span>
+                                            &amp;nbsp;
+                                            <p style="margin:0;font-size:24px;font-weight:bold">Step 2</p>
+                                            <p style="margin:0">
+                                                We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+                                            </p>
+                                        </td>
+                                        <td style="vertical-align:top; padding: 30px 15px; width:33%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color">
+                                            &amp;nbsp;
+                                            <span class="fa fa-usd fa-3x"></span>
+                                            &amp;nbsp;
+                                            <p style="margin:0;font-size:24px;font-weight:bold">Step 3</p>
+                                            <p style="margin:0">
+                                                We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+                                            </p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Text Block" class="basic_theme o_mail_block_simple_text">
+                        <div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#777777">
+                            <table style="width:100%;text-align:justify;margin:0 auto;background:inherit;color:inherit;border-collapse:collapse;color:inherit">
+                                <tr>
+                                    <td style="padding:10px 30px;font-size:14px">
+                                        <p style="margin:0">Dear ${object.name}</p>
+                                        <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
+                                        <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
+                                        <p style="margin:0">Kind Regards,</p>
+                                        <p style="margin:0">Michael Fletcher</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="email_designer_default_extra" class="o_panel">
+                <div class="o_panel_header">
+                    <span class="fa-stack">
+                        <i class="fa fa-align-left fa-stack-1x" style="display: inline-block; height: 0.93em; margin-top: 0.3em; overflow: hidden;"></i>
+                    </span> Extra
+                </div>
+                <div class="o_panel_body">
+                    <div name="Separator" class="basic_theme o_mail_block_footer_seprator">
+                        <div style="padding:0px;width:600px;margin:auto;color:#777777;background-color:#FFFFFF">
+                            <table cellspacing="0" cellpadding="0" style="vertical-align:top;padding:0px;font-family:arial;font-size:12px;border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td valign="top" style="width:600px">
+                                            <div>
+                                                <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0;margin:15px auto;padding:0"/>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Tag Line" class="basic_theme o_mail_block_footer_tag_line">
+                        <div class="bg-color" style="padding:0px;width:600px;margin:auto;background:#fff;color:#777777">
+                            <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    <tr>
+                                        <td valign="center" style="text-align:center;padding:5px">
+                                            <p style="margin:0;color:inherit;font-size:18px">Apps That Help You Grow Your Business</p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="email_designer_default_footer" class="o_panel">
+                <div class="o_panel_header">
+                    <span class="fa-stack">
+                        <i class="fa fa-align-justify fa-stack-1x" style=" margin-top: 0.7em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
+                        <i class="fa fa-arrow-down fa-stack-1x" style="display: inline-block; font-size: 0.6em; margin-top: -0.15em;"></i>
+                    </span> Footers
+                </div>
+                <div class="o_panel_body">
+                    <div t-if="website" name="Social + Text" class="basic_theme o_mail_block_footer_social">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
+                            <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    <tr>
+                                        <td valign="center" style="padding:10px 15px 10px 10px">
+                                            <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;color:inherit">
+                                                <tr>
+                                                    <td align="right">
+                                                        &amp;nbsp;
+                                                        <a t-att-href="(website.social_facebook) or '#'">
+                                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                        </a>
+                                                    </td>
+                                                    <td align="right" style="padding-left:5px">
+                                                        <a t-att-href="(website.social_twitter) or '#'">
+                                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                        </a>
+                                                    </td>
+                                                    <td align="right" style="padding-left:5px">
+                                                        <a t-att-href="(website.social_googleplus) or '#'">
+                                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                        </a>
+                                                    </td>
+                                                    <td align="right" style="padding-left:5px">
+                                                        <a t-att-href="(website.social_linkedin) or '#'">
+                                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                        </a>
+                                                    </td>
+                                                    <td align="right" style="padding-left:5px">
+                                                        <a href="#">
+                                                            <img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" />
+                                                        </a>
+                                                        &amp;nbsp;
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td style="font-size:12px;text-align:center;padding:10px">
+                                            &amp;nbsp;
+                                            <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:inherit" href="/page/contactus">Contact</a>
+                                            &amp;nbsp;
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Text + Copyright" class="basic_theme o_mail_block_footer_copyright">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777">
+                            <table cellspacing="0" cellpadding="0" style="margin:auto;width:600px;border-collapse:collapse;background:inherit;color:inherit">
+                                <tbody>
+                                    <tr>
+                                        <td style="font-size:12px;text-align:center;padding:10px">
+                                            &amp;nbsp;
+                                            <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a>
+                                            <t t-if="website"> | <a style="color:inherit" href="/page/contactus">Contact</a> </t>
+                                            &amp;nbsp;
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td style="font-size:12px;text-align:center;padding-bottom:10px">
+                                            <p style="margin:0">© 2014 All Rights Reserved</p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div name="Text Only" class="basic_theme o_mail_block_footer_text">
+                        <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777">
+                            <center>
+                                <table width="600" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto; width:600px; border-collapse:collapse;background:inherit;color:inherit">
                                     <tbody>
                                         <tr>
-                                            <td style="vertical-align:middle;text-align:center">
+                                            <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                                 &amp;nbsp;
-                                                <span class="fa fa-10x fa-music"></span>
+                                                <t t-if="website">
+                                                    <a style="color:inherit" href="/page/contactus">Contact Us</a> | 
+                                                    <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> | 
+                                                    <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> | 
+                                                    <a style="color:inherit" href="#">Support</a> | 
+                                                </t>
+                                                <a href="/unsubscribe_from_list" style="color:inherit">Unsubscribe</a>
                                                 &amp;nbsp;
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                            </center>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+    </xpath>
 
-        <div name="Image Title" class="basic_theme o_mail_block_title_text">
-            <div class="snippet_row bg-color" style="padding:0px; margin:auto;width:600px;background: #fff repeat top /100%;color:#777777">
-                <table cellpadding="0" cellspacing="0" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit;width:600px">
-                    <tbody>
-                        <tr>
-                            <td align="left" style="padding:20px">
-                                <p style="margin:0;font-size:30px">Your order has shipped!</p>
-                                <p style="margin:0;font-size:14px">
-                                    Dear Bob,<br/>
-                                    We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
-                                </p>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="text-align:center;width:200px;">
-                                &amp;nbsp;
-                                <span class="fa fa-10x fa-music"></span>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Content Image" class="basic_theme o_mail_block_text_image">
-            <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
-                <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td align="left" style="padding:20px" class="col_mv bg-color">
-                                <p style="margin:0;font-size:14px">
-                                    We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
-                                </p>
-                            </td>
-                            <td style="text-align:center;vertical-align:middle;width:200px;" class="col_mv bg-color">
-                                &amp;nbsp;
-                                <span class="fa fa-10x fa-music"></span>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Image Content" class="basic_theme o_mail_block_image_text">
-            <div style="padding:0px; margin:auto;width:600px;background-color:#fff;color:#777777">
-                <table cellpadding="0" cellspacing="0" width="600" style="margin:auto;border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td style="text-align:center;vertical-align:middle;width:200px;" class="col_mv bg-color">
-                                &amp;nbsp;
-                                <span class="fa fa-10x fa-music"></span>
-                                &amp;nbsp;
-                            </td>
-                            <td style="padding:20px" class="col_mv bg-color">
-                                <p style="margin:0;font-size:14px">
-                                    We would like you to know that your order has shipped! To track your order or make any changes please click the "my order" button below.
-                                </p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Button" class="basic_theme o_mail_block_button">
-            <div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#777777">
-                <table style="width:600px;text-align:center;margin:0 auto;border-collapse:collapse;background:inherit;color:inherit">
-                    <tr>
-                        <td class="row" style="padding:10px 0;text-align:center">
-                            &amp;nbsp;
-                            <a href="#" style="-webkit-user-select: none; padding: 6px 12px; font-size: 14px; line-height: 20px; color: rgb(255,255,255); border: none; text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: rgb(101,101,101);border-radius:4px">My Account</a>
-                            &amp;nbsp;
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-
-        <div name="Three Columns" class="basic_theme o_mail_block_three_cols">
-            <div style="padding:0px;width:600px;margin:auto;background-color:#fff;color:#000;color:#777777">
-                <table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td style="padding:30px 15px;width:33%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color">
-                                &amp;nbsp;
-                                <span class="fa fa-check fa-3x"></span>
-                                &amp;nbsp;
-                                <p style="margin:0;font-size:24px;font-weight:bold">Step 1</p>
-                                <p style="margin:0">    
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
-                                </p>
-                            </td>
-                            <td style="vertical-align:top; padding: 30px 15px; width:34%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color">
-                                &amp;nbsp;
-                                <span class="fa fa-truck fa-3x"></span>
-                                &amp;nbsp;
-                                <p style="margin:0;font-size:24px;font-weight:bold">Step 2</p>
-                                <p style="margin:0">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
-                                </p>
-                            </td>
-                            <td style="vertical-align:top; padding: 30px 15px; width:33%;text-align:center;background-color:#fff;color:#777777;font-size:14px" class="col_mv bg-color">
-                                &amp;nbsp;
-                                <span class="fa fa-usd fa-3x"></span>
-                                &amp;nbsp;
-                                <p style="margin:0;font-size:24px;font-weight:bold">Step 3</p>
-                                <p style="margin:0">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
-                                </p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Text Block" class="basic_theme o_mail_block_simple_text">
-            <div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#777777">
-                <table style="width:100%;text-align:justify;margin:0 auto;background:inherit;color:inherit;border-collapse:collapse;color:inherit">
-                    <tr>
-                        <td style="padding:10px 30px;font-size:14px">
-                            <p style="margin:0">Dear ${object.name}</p>
-                            <p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
-                            <p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
-                            <p style="margin:0">Kind Regards,</p>
-                            <p style="margin:0">Michael Fletcher</p>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-    </div>
-</div>
-<div id="email_designer_default_extra" class="o_panel">
-    <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-align-left fa-stack-1x" style="display: inline-block; height: 0.93em; margin-top: 0.3em; overflow: hidden;"></i>
-        </span> Extra
-    </div>
-    <div class="o_panel_body">
-        <div name="Separator" class="basic_theme o_mail_block_footer_seprator">
-            <div style="padding:0px;width:600px;margin:auto;color:#777777;background-color:#FFFFFF">
-                <table cellspacing="0" cellpadding="0" style="vertical-align:top;padding:0px;font-family:arial;font-size:12px;border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td valign="top" style="width:600px">
-                                <div>
-                                    <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0;margin:15px auto;padding:0"/>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Tag Line" class="basic_theme o_mail_block_footer_tag_line">
-            <div class="bg-color" style="padding:0px;width:600px;margin:auto;background:#fff;color:#777777">
-                <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td valign="center" style="text-align:center;padding:5px">
-                                <p style="margin:0;color:inherit;font-size:18px">Apps That Help You Grow Your Business</p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</div>
-<div id="email_designer_default_footer" class="o_panel">
-    <div class="o_panel_header">
-        <span class="fa-stack">
-            <i class="fa fa-align-justify fa-stack-1x" style=" margin-top: 0.7em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
-            <i class="fa fa-arrow-down fa-stack-1x" style="display: inline-block; font-size: 0.6em; margin-top: -0.15em;"></i>
-        </span> Footers
-    </div>
-    <div class="o_panel_body">
-        <div t-if="website" name="Social + Text" class="basic_theme o_mail_block_footer_social">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #FFFFFF repeat top /100%;color:#777777">
-                <table style="margin: 0 auto;border-collapse:collapse;background:inherit;color:inherit;width:600px" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td valign="center" style="padding:10px 15px 10px 10px">
-                                <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;color:inherit">
-                                    <tr>
-                                        <td align="right">
-                                            &amp;nbsp;
-                                            <a t-att-href="(website.social_facebook) or '#'">
-                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_facebook.png" style="height:auto;max-width:70px" alt="social icon" />
-                                            </a>
-                                        </td>
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="(website.social_twitter) or '#'">
-                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_twitter.png" style="height:auto;max-width:70px" alt="social icon" />
-                                            </a>
-                                        </td>
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="(website.social_googleplus) or '#'">
-                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_googleplus.png" style="height:auto;max-width:70px" alt="social icon" />
-                                            </a>
-                                        </td>
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="(website.social_linkedin) or '#'">
-                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_linkedin.png" style="height:auto;max-width:70px" alt="social icon" />
-                                            </a>
-                                        </td>
-                                        <td align="right" style="padding-left:5px">
-                                            <a href="#">
-                                                <img src="/mass_mailing/static/src/img/theme_imgs/social_rss.png" style="height:auto;max-width:70px" alt="social icon" />
-                                            </a>
-                                            &amp;nbsp;
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="font-size:12px;text-align:center;padding:10px">
-                                &amp;nbsp;
-                                <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a> | <a style="color:inherit" href="/page/contactus">Contact</a>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Text + Copyright" class="basic_theme o_mail_block_footer_copyright">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777">
-                <table cellspacing="0" cellpadding="0" style="margin:auto;width:600px;border-collapse:collapse;background:inherit;color:inherit">
-                    <tbody>
-                        <tr>
-                            <td style="font-size:12px;text-align:center;padding:10px">
-                                &amp;nbsp;
-                                <a style="color:inherit" href="/unsubscribe_from_list">Unsubscribe</a>
-                                <t t-if="website"> | <a style="color:inherit" href="/page/contactus">Contact</a> </t>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="font-size:12px;text-align:center;padding-bottom:10px">
-                                <p style="margin:0">© 2014 All Rights Reserved</p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div name="Text Only" class="basic_theme o_mail_block_footer_text">
-            <div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #fff repeat top /100%;color:#777777">
-                <center>
-                    <table width="600" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto; width:600px; border-collapse:collapse;background:inherit;color:inherit">
-                        <tbody>
-                            <tr>
-                                <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
-                                    &amp;nbsp;
-                                    <t t-if="website">
-                                        <a style="color:inherit" href="/page/contactus">Contact Us</a> | 
-                                        <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> | 
-                                        <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> | 
-                                        <a style="color:inherit" href="#">Support</a> | 
-                                    </t>
-                                    <a href="/unsubscribe_from_list" style="color:inherit">Unsubscribe</a>
-                                    &amp;nbsp;
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </center>
-            </div>
-        </div>
-    </div>
-</div>
-
-</div>
-
-<div id="snippet_options" class="hidden">
-    <t t-call="web_editor.snippet_options"/>
-    <t t-call="mass_mailing.snippet_options"/>
-</div>
+    <xpath expr="//div[@id='snippet_options']" position="inside">
+        <t t-call="mass_mailing.snippet_options"/>
+    </xpath>
 </template>
-
-</data>
-</openerp>
+</odoo>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 9a1fd1200a6..f177f1149fd 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -1,49 +1,35 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
+<odoo>
 <template id="snippets">
+    <ul id="snippets_menu">
+        <li class="active">
+            <a href="#snippet_structure" class="scroll-link">
+                <span class="fa-stack fa-lg">
+                    <i class="fa fa-square fa-stack-2x fa-inverse"></i>
+                </span>
+            </a>
+        </li>
+    </ul>
 
-
-<ul>
-    <li class="active">
-        <a href="#snippet_structure" class="scroll-link">
-            <span class="fa-stack fa-lg">
-                <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-            </span>
-        </a>
-    </li>
-</ul>
-
-
-<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> First Panel
-        </div>
-        <div class="o_panel_body">
-
+    <div id="o_scroll">
+        <div id="snippet_structure" class="o_panel">
+            <div class="o_panel_header">
+                <i class="fa fa-th-large"/> First Panel
+            </div>
+            <div class="o_panel_body"/>
         </div>
     </div>
-</div>
 
-
-<div id="snippet_options" class="hidden">
-    <t t-call="web_editor.snippet_options"/>
-</div>
+    <div id="snippet_options" class="hidden">
+        <t t-call="web_editor.snippet_options"/>
+    </div>
 </template>
 
 <!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
-
 <template id="snippet_options">
     <!-- t-field -->
-
     <div data-js='many2one'
-        data-selector="[data-oe-many2one-model]:not([data-oe-readonly])"
-        data-no-check="true">
-    </div>
+         data-selector="[data-oe-many2one-model]:not([data-oe-readonly])"
+         data-no-check="true"/>
 </template>
-
-</data>
-</openerp>
+</odoo>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 62269ba2a6c..f75146a4a5d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -697,95 +697,98 @@
     </section>
 </template>
 
+<!-- Snippets menu -->
+<template id="snippets" inherit_id="web_editor.snippets" primary="True">
+    <xpath expr="//ul[@id='snippets_menu']" position="replace">
+        <ul id="snippets_menu">
+            <li class="active structure">
+                <a href="#snippet_structure" class="scroll-link">
+                    <i class="fa fa-th-large"/>
+                </a>
+            </li>
+            <li class="content">
+                <a href="#snippet_content" class="scroll-link">
+                    <i class="fa fa-indent"/>
+                </a>
+            </li>
+            <li class="feature">
+                <a href="#snippet_feature" class="scroll-link">
+                    <i class="fa fa-check-square"/>
+                </a>
+            </li>
+            <li class="effect">
+                <a href="#snippet_effect" class="scroll-link">
+                    <i class="fa fa-magic icon-fix"/>
+                </a>
+            </li>
+        </ul>
+    </xpath>
 
-<template id="snippets">
-<ul id="snippets_menu">
-    <li class="active structure">
-        <a href="#snippet_structure" class="scroll-link">
-            <i class="material-icons">&#xE8F1;</i>
-        </a>
-    </li>
-    <li class="content">
-        <a href="#snippet_content" class="scroll-link">
-            <i class="material-icons">&#xE8AA;</i>
-        </a>
-    </li>
-    <li class="feature">
-        <a href="#snippet_feature" class="scroll-link">
-            <i class="material-icons">&#xE8B8;</i>
-        </a>
-    </li>
-    <li class="effect">
-        <a href="#snippet_effect" class="scroll-link">
-            <i class="fa fa-magic icon-fix"></i>
-        </a>
-    </li>
-</ul>
+    <xpath expr="//div[@id='o_scroll']" position="replace">
+        <div id="o_scroll">
+            <div id="snippet_structure" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-th-large"/> Structure
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
+                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
+                    <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
+                    <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
+                    <t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
+                    <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/blocks/block_text_block.png"/>
+                    <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
+                    <t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
+                    <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
+                </div>
+            </div>
 
-<div id="o_scroll">
-<div id="snippet_structure" class="o_panel">
-    <div class="o_panel_header">
-        <i class="material-icons">&#xE8F1;</i> Structure
-    </div>
-    <div class="o_panel_body">
-        <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
-        <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
-        <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
-        <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
-        <t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
-        <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/blocks/block_text_block.png"/>
-        <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
-        <t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
-        <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
-    </div>
-</div>
+            <div id="snippet_content" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-indent"/> Content
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
+                    <t t-snippet="website.s_quote" t-thumbnail="/website/static/src/img/blocks/block_quote.png"/>
+                    <t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
+                    <t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
+                    <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
+                </div>
+            </div>
 
-<div id="snippet_content" class="o_panel">
-    <div class="o_panel_header">
-        <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"/>
-        <t t-snippet="website.s_quote" t-thumbnail="/website/static/src/img/blocks/block_quote.png"/>
-        <t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
-        <t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
-        <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
-    </div>
-</div>
+            <div id="snippet_feature" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-check-square"/> 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"/>
+                    <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/blocks/block_comparison.png"/>
+                    <t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
+                    <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
+                    <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
+                    <t t-snippet="website.s_quotes_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
+                    <t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
+                </div>
+            </div>
 
-<div id="snippet_feature" class="o_panel">
-    <div class="o_panel_header">
-        <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"/>
-        <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/blocks/block_comparison.png"/>
-        <t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
-        <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
-        <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
-        <t t-snippet="website.s_quotes_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
-        <t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
-    </div>
-</div>
+            <div id="snippet_effect" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-magic icon-fix"/> Effect
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/>
+                    <t t-snippet="website.s_parallax_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
+                </div>
+            </div>
+        </div>
+    </xpath>
 
-<div id="snippet_effect" class="o_panel">
-    <div class="o_panel_header">
-        <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"/>
-        <t t-snippet="website.s_parallax_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
-    </div>
-</div>
-</div>
-
-<div id="snippet_options" class="hidden">
-    <t t-call="website.snippet_options"/>
-</div>
+    <xpath expr="//div[@id='snippet_options']/t" position="attributes">
+        <attribute name="t-call">website.snippet_options</attribute>
+    </xpath>
 </template>
 
 <template id="snippet_options">
-
     <t t-call="web_editor.snippet_options"/>
 
     <div data-js='blog-style'

From 5b65befcd889139152c590490fb8965c9f4b5279 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 11:51:43 +0100
Subject: [PATCH 4/8] [REF] web,web_editor,website,report,mass_mailing,mail:
 LESS

* Convert some CSS to LESS
* Split/Join LESS files
* Remove duplicates between website and web_editor
* UI improvements
* Allow simple customizations thanks to LESS var&mixins for website
---
 .../static/src/css/mass_mailing_editor.css    |  116 --
 .../static/src/less/mass_mailing_editor.less  |  121 ++
 .../report/static/src/css/report.editor.css   |   11 -
 .../report/static/src/less/report.editor.less |   17 +
 .../src/{css/report.css => less/report.less}  |   13 +-
 .../static/src/less/customize_modal.less      |   18 +
 addons/web/static/src/less/utils.less         |   32 +-
 addons/web/static/src/less/variables.less     |   25 +-
 .../lib/summernote/src/less/summernote.less   |   46 +-
 addons/web_editor/static/src/css/editor.css   | 1010 ---------
 addons/web_editor/static/src/css/editor.sass  |  876 --------
 addons/web_editor/static/src/css/snippets.css |  499 -----
 .../web_editor/static/src/css/snippets.sass   |  384 ----
 .../src/css/web_editor.iframe.inline.css      |  265 ---
 .../web_editor/static/src/img/drag_here.png   |  Bin 619 -> 0 bytes
 .../web_editor/static/src/img/edit_here.png   |  Bin 491 -> 0 bytes
 .../static/src/less/web_editor.backend.less   |  145 +-
 .../static/src/less/web_editor.common.less    |  297 ++-
 .../src/less/web_editor.components.less       |  276 ---
 .../src/less/web_editor.interactions.less     |   61 -
 .../static/src/less/web_editor.less           |   63 -
 .../static/src/less/web_editor.mixins.less    |  204 --
 .../src/less/web_editor.ui.components.less    |  339 +++
 .../static/src/less/web_editor.ui.less        | 1839 ++++++++---------
 .../static/src/less/web_editor.variables.less |  139 +-
 .../static/src/less/web_planner_common.less   |    2 +-
 addons/website/static/src/css/common.css      |    0
 addons/website/static/src/css/website.css     |  800 -------
 addons/website/static/src/css/website.sass    |  656 ------
 .../static/src/less/import_bootstrap.less     |    1 -
 .../static/src/less/website.edit_mode.less    |  249 ++-
 .../src/less/website.ui.components.less       | 1120 +++-------
 .../src/less/website.ui.interactions.less     |   61 -
 .../website/static/src/less/website.ui.less   |  353 +---
 .../static/src/less/website.ui.mixins.less    |  190 --
 .../static/src/less/website.ui.variables.less |  105 -
 .../static/src/less/website.wrapwrap.less     |  553 ++---
 37 files changed, 2446 insertions(+), 8440 deletions(-)
 delete mode 100644 addons/mass_mailing/static/src/css/mass_mailing_editor.css
 create mode 100644 addons/mass_mailing/static/src/less/mass_mailing_editor.less
 delete mode 100644 addons/report/static/src/css/report.editor.css
 create mode 100644 addons/report/static/src/less/report.editor.less
 rename addons/report/static/src/{css/report.css => less/report.less} (74%)
 create mode 100644 addons/theme_default/static/src/less/customize_modal.less
 delete mode 100644 addons/web_editor/static/src/css/editor.css
 delete mode 100644 addons/web_editor/static/src/css/editor.sass
 delete mode 100644 addons/web_editor/static/src/css/snippets.css
 delete mode 100644 addons/web_editor/static/src/css/snippets.sass
 delete mode 100644 addons/web_editor/static/src/css/web_editor.iframe.inline.css
 delete mode 100644 addons/web_editor/static/src/img/drag_here.png
 delete mode 100644 addons/web_editor/static/src/img/edit_here.png
 delete mode 100644 addons/web_editor/static/src/less/web_editor.components.less
 delete mode 100644 addons/web_editor/static/src/less/web_editor.interactions.less
 delete mode 100644 addons/web_editor/static/src/less/web_editor.less
 delete mode 100644 addons/web_editor/static/src/less/web_editor.mixins.less
 create mode 100644 addons/web_editor/static/src/less/web_editor.ui.components.less
 delete mode 100644 addons/website/static/src/css/common.css
 delete mode 100644 addons/website/static/src/css/website.css
 delete mode 100644 addons/website/static/src/css/website.sass
 delete mode 100644 addons/website/static/src/less/import_bootstrap.less
 delete mode 100644 addons/website/static/src/less/website.ui.interactions.less
 delete mode 100644 addons/website/static/src/less/website.ui.mixins.less
 delete mode 100644 addons/website/static/src/less/website.ui.variables.less

diff --git a/addons/mass_mailing/static/src/css/mass_mailing_editor.css b/addons/mass_mailing/static/src/css/mass_mailing_editor.css
deleted file mode 100644
index e2efcf87efa..00000000000
--- a/addons/mass_mailing/static/src/css/mass_mailing_editor.css
+++ /dev/null
@@ -1,116 +0,0 @@
-#email_theme_list, #email_template_list {
-    clear: both;
-    text-align: center;
-}
-
-#email_theme_list > div, #email_template_list > div {
-    width: 200px;
-    display: inline-block;
-    position: relative;
-}
-
-.theme_thumbnail{
-    position:inherit;
-    margin-top:15px;
-}
-.theme_thumbnail div{
-    -webkit-transition: opacity 0.5s;
-    transition: opacity 0.5s;
-}
-.theme_thumbnail img.img{
-    height: 180px;
-    width: auto;
-}
-
-.modal-body  .theme_thumbnail img.img{
-    height: 100px;
-}
-
-.theme_thumbnail div.overlay{
-    z-index: 2;
-    max-height: 135px;
-    position:absolute;
-    padding:25% 0;
-    opacity: 0;
-    width: 100%;
-}
-.theme_thumbnail div.overlay p{
-    color:#616161;
-    font-weight:bold;
-    text-transform: capitalize;
-}
-.theme_thumbnail:hover>img.img{
-    opacity:0.3;
-}
-.theme_thumbnail:hover>div.overlay{
-    opacity: 1;
-}
-
-.email_head {
-    border-width: 0px 0px 2px 0px;
-}
-.email_head div{
-    font-size:14px;
-}
-.email_head .popover-title{
-    font-weight:bold;
-}
-
-.template_name{
-    width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.email_template *{
-    -webkit-transition: opacity 0.5s;
-    transition: opacity 0.5s;
-}
-.email_template:hover .template_thumbnail{
-    opacity:0.3;
-}
-.email_template:hover .template_options{
-    opacity:1;
-}
-
-/***************************/
-
-#templates{
-    margin-top: 50px;
-    width: 98%;
-}
-#choose_template{
-    display: none;
-    margin: 5px;
-    position: fixed;
-    top: 0;
-    right: 28px;
-    z-index: 2000;
-}
-#choose_template span{
-    padding: 1px 5px;
-    height: 24px;
-}
-#templates .template_preview_border{
-    overflow: hidden !important;
-    border: 2px solid grey;
-    height: 300px;
-}
-#email_template_list > div{
-    overflow: hidden;
-    height: 300px;
-}
-#email_template_list .theme_thumbnail div.overlay{
-    max-height: 300px;
-}
-#templates .template_preview{
-    -webkit-transform: scale(.33);
-    -ms-transform: scale(.33);
-    transform: scale(.33);
-    -webkit-transform-origin: 0 0;
-    -ms-transform-origin: 0 0;
-    transform-origin: 0 0;
-}
-.theme_thumbnail:hover>.template_preview{
-    opacity:0.3;
-}
diff --git a/addons/mass_mailing/static/src/less/mass_mailing_editor.less b/addons/mass_mailing/static/src/less/mass_mailing_editor.less
new file mode 100644
index 00000000000..e463ec1b6d1
--- /dev/null
+++ b/addons/mass_mailing/static/src/less/mass_mailing_editor.less
@@ -0,0 +1,121 @@
+
+#email_theme_list, #email_template_list {
+    clear: both;
+    text-align: center;
+
+    > div {
+        width: 200px;
+        display: inline-block;
+        position: relative;
+    }
+}
+.theme_thumbnail {
+    position: inherit;
+    margin-top: 15px;
+
+    div {
+        .o-transition(opacity, 0.5s);
+
+        &.overlay {
+            z-index: 2;
+            max-height: 135px;
+            position:absolute;
+            padding:25% 0;
+            opacity: 0;
+            width: 100%;
+
+            p {
+                color:#616161;
+                font-weight:bold;
+                text-transform: capitalize;
+            }
+        }
+    }
+    img.img {
+        width: auto;
+        height: 180px;
+    }
+
+    &:hover {
+        > img.img {
+            opacity:0.3;
+        }
+        > div.overlay {
+            opacity: 1;
+        }
+        > .template_preview {
+            opacity:0.3;
+        }
+    }
+}
+.modal-body  .theme_thumbnail img.img {
+    height: 100px;
+}
+.email_head {
+    border-width: 0px 0px 2px 0px;
+    div {
+        font-size:14px;
+    }
+    .popover-title {
+        font-weight:bold;
+    }
+}
+.template_name {
+    width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.email_template * {
+    .o-transition(opacity, 0.5s);
+    &:hover {
+        .template_thumbnail {
+            opacity:0.3;
+        }
+        .template_options {
+            opacity:1;
+        }
+    }
+}
+#templates {
+    margin: -@odoo-navbar-height 0 0 -@o-we-sidebar-width;
+    padding: 10px @odoo-horizontal-padding;
+    border: 1px solid @odoo-brand-secondary;
+    background-color: white;
+
+    .template_preview_border {
+        overflow: hidden !important;
+        border: 2px solid grey;
+        height: 300px;
+    }
+    .template_preview {
+        -webkit-transform: scale(.33);
+        -ms-transform: scale(.33);
+        transform: scale(.33);
+        -webkit-transform-origin: 0 0;
+        -ms-transform-origin: 0 0;
+        transform-origin: 0 0;
+    }
+}
+#choose_template {
+    display: none;
+    margin: 5px;
+    position: fixed;
+    top: 0;
+    right: 28px;
+    z-index: 2000;
+
+    span {
+        padding: 1px 5px;
+        height: 24px;
+    }
+}
+#email_template_list {
+    > div {
+        overflow: hidden;
+        height: 300px;
+    }
+    .theme_thumbnail div.overlay {
+        max-height: 300px;
+    }
+}
diff --git a/addons/report/static/src/css/report.editor.css b/addons/report/static/src/css/report.editor.css
deleted file mode 100644
index 762cf93ed97..00000000000
--- a/addons/report/static/src/css/report.editor.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.o_editable:not(:empty)[data-oe-model="ir.ui.view"]:hover,
-.o_editable:not(:empty)[data-oe-model="ir.ui.view"] th:hover,
-.o_editable:not(:empty)[data-oe-model="ir.ui.view"] td:hover,
-.o_editable[data-oe-type][data-oe-model="ir.ui.view"]:hover,
-.o_editable[data-oe-type][data-oe-model="ir.ui.view"] th:hover,
-.o_editable[data-oe-type][data-oe-model="ir.ui.view"] td: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;
-}
-
diff --git a/addons/report/static/src/less/report.editor.less b/addons/report/static/src/less/report.editor.less
new file mode 100644
index 00000000000..c0384cde103
--- /dev/null
+++ b/addons/report/static/src/less/report.editor.less
@@ -0,0 +1,17 @@
+.o_editable {
+    &:not(:empty), &[data-oe-type] {
+        &[date-oe-model="ir.ui.view"] {
+            &, th, td {
+                &: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;
+                }
+            }
+        }
+    }
+}
+
+body {
+    margin-top: 40px!important;
+}
diff --git a/addons/report/static/src/css/report.css b/addons/report/static/src/less/report.less
similarity index 74%
rename from addons/report/static/src/css/report.css
rename to addons/report/static/src/less/report.less
index 5565625b7fc..2382d069799 100644
--- a/addons/report/static/src/css/report.css
+++ b/addons/report/static/src/less/report.less
@@ -6,11 +6,13 @@ body {
     border-top: 1px solid black !important;
 }
 /* See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524 */
-.table-condensed > tbody > tr {
-    page-break-inside: avoid !important;
-}
-.table-condensed > thead > tr > th {
-    border-bottom: 1px solid black !important;
+.table-condensed {
+    > thead > tr > th {
+        border-bottom: 1px solid black !important;
+    }
+    > tbody > tr {
+        page-break-inside: avoid !important;
+    }
 }
 .zero_min_height {
     min-height: 0px !important;
@@ -24,4 +26,3 @@ body {
 .hidden-print{
     display: none;
 }
-
diff --git a/addons/theme_default/static/src/less/customize_modal.less b/addons/theme_default/static/src/less/customize_modal.less
new file mode 100644
index 00000000000..ce963f659a3
--- /dev/null
+++ b/addons/theme_default/static/src/less/customize_modal.less
@@ -0,0 +1,18 @@
+
+#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;
+    }
+    table {
+        width: 100%;
+        margin-bottom: 8px;
+    }
+}
diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less
index b62c2aaaf94..302f79edf03 100644
--- a/addons/web/static/src/less/utils.less
+++ b/addons/web/static/src/less/utils.less
@@ -1,16 +1,3 @@
-// ------------------------------------------------------------------
-// Margin
-// ------------------------------------------------------------------
-.utils-margin-loop(@index) when (@index < 256) {
-    .o-mt@{index} {margin-top: @index px;}
-    .o-mb@{index} {margin-bottom: @index px;}
-    .o-mr@{index} {margin-right: @index px;}
-    .o-ml@{index} {margin-left: @index px;}
-
-    .utils-margin-loop(@index * 2);
-}
-.utils-margin-loop(2);
-
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------
@@ -122,7 +109,6 @@
 }
 
 // Background-size
-// https://css-tricks.com/perfect-full-page-background-image/
 .o-background-size(@size) {
     -webkit-background-size: @size;
     -moz-background-size: @size;
@@ -130,6 +116,14 @@
     background-size: @size;
 }
 
+// Background gradient
+.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) {
+    background-repeat: repeat-x;
+    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color);
+    background-image: -o-linear-gradient(@deg, @start-color, @end-color);
+    background-image: linear-gradient(@deg, @start-color, @end-color);
+}
+
 // ------------------------------------------------------------------
 // Dropdowns
 // ------------------------------------------------------------------
@@ -196,16 +190,6 @@
     transition: @property @duration @timing-function @transition-delay;
 }
 
-// ------------------------------------------------------------------
-// Animation
-// ------------------------------------------------------------------
-.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
-    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-}
-
 // ------------------------------------------------------------------
 // Columns
 // ------------------------------------------------------------------
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
index 1984696aafb..4bea799e5ec 100644
--- a/addons/web/static/src/less/variables.less
+++ b/addons/web/static/src/less/variables.less
@@ -1,19 +1,28 @@
+@odoo-font-size-base: 13px;
+@odoo-font-size-base-touch: 15px;
+
+// Colors
 @odoo-brand-primary: #337ab7;
 @odoo-brand-optional: @odoo-brand-primary;
 @odoo-brand-secondary: #8f8f8f;
 @odoo-brand-lightsecondary: #e2e2e0;
-@odoo-list-grey: @odoo-brand-lightsecondary; // FIXME: listview thead background color
-@odoo-webclient-background-color: #F0EEEE;
+
+@odoo-main-color-muted: #a8a8a8;
+@odoo-main-text-color: #555555;
+
 @odoo-view-background-color: white;
 @odoo-shadow-color: #303030;
+@odoo-webclient-background-color: #F0EEEE;
+@odoo-list-grey: @odoo-brand-lightsecondary;
 
-@odoo-font-size-base: 13px;
-@odoo-font-size-base-touch: 15px;
-@odoo-main-text-color: #555555;
-@odoo-main-color-muted: #a8a8a8;
+// Layout
+@screen-xs-min: 475px;
+@screen-xxs-max: (@screen-xs-min - 1);
 
 @odoo-form-group-cols: 12;
 @odoo-horizontal-padding: 16px;
 
-@screen-xs-min: 475px;
-@screen-xxs-max: (@screen-xs-min - 1);
+// Compatibility
+@odoo-navbar-height: 46px;
+@odoo-navbar-inverse-link-hover-bg: darken(@odoo-brand-primary, 10%);
+@odoo-dropdown-hpadding: 25px;
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 caf66215d3f..512216845b2 100644
--- a/addons/web_editor/static/lib/summernote/src/less/summernote.less
+++ b/addons/web_editor/static/lib/summernote/src/less/summernote.less
@@ -1,31 +1,3 @@
-/* @_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
  ------------------------------------------*/
 @border-color: #a9a9a9;
@@ -128,8 +100,8 @@
       resize: none;
 
       /* override BS2 default style */
-      .box-sizing(border-box);
-      .rounded(0);
+      box-sizing: border-box;
+      border-radius: 0;
       margin-bottom: 0;
     }
   }
@@ -250,7 +222,7 @@
           margin: 3px;
           padding: 0 3px;
           cursor: pointer;
-          .rounded(5px);
+          border-radius: 5px;
         }
 
         .note-color-row {
@@ -350,12 +322,12 @@
     font-size: 12px;
     color: #ccc;
     background-color: #222 !important;
-    .opacity(0.9);
+    opacity: 0.9;
     .modal-content {
       background: transparent;
       border: 1px solid white;
-      .box-shadow(none);
-      .rounded(5px);
+      box-shadow: none;
+      border-radius: 5px;
     }
 
     /* BS2's background pacth. */
@@ -429,7 +401,7 @@
       width: 100%;
       height: 100%;
       background-color: black;
-      .opacity(0.30)
+      opacity: 0.3;
     }
 
     .note-control-handle {
@@ -488,8 +460,8 @@
       color: white;
       background-color: black;
       font-size: 12px;
-      .rounded(5px);
-      .opacity(0.7);
+      border-radius: 5px;
+      opacity: 0.7;
     }
   }
 }
diff --git a/addons/web_editor/static/src/css/editor.css b/addons/web_editor/static/src/css/editor.css
deleted file mode 100644
index ab39d4e1e37..00000000000
--- a/addons/web_editor/static/src/css/editor.css
+++ /dev/null
@@ -1,1010 +0,0 @@
-/* ---- EDITOR BAR ---- {{{ */
-.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog {
-  /* button */
-  /* form */
-  /* col */
-  /* dropdown */
-  /* list-group */
-  /* tab */
-  /* pager */
-  /* add submenu css */
-  /* global */
-}
-.note-popover *, .o_css_editor *, .web_editor-dialog *, .note-image-dialog * {
-  box-sizing: border-box;
-}
-.note-popover a, .o_css_editor a, .web_editor-dialog a, .note-image-dialog a {
-  text-decoration: none;
-}
-.note-popover ul, .note-popover ol, .o_css_editor ul, .o_css_editor ol, .web_editor-dialog ul, .web_editor-dialog ol, .note-image-dialog ul, .note-image-dialog ol {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-.note-popover .clearfix:before, .note-popover .clearfix:after, .note-popover .dl-horizontal dd:before, .note-popover .dl-horizontal dd:after, .note-popover .container:before, .note-popover .container:after, .note-popover .container-fluid:before, .note-popover .container-fluid:after, .note-popover .row:before, .note-popover .row:after, .note-popover .form-horizontal .form-group:before, .note-popover .form-horizontal .form-group:after, .note-popover .btn-toolbar:before, .note-popover .btn-toolbar:after, .note-popover .btn-group-vertical > .btn-group:before, .note-popover .btn-group-vertical > .btn-group:after, .note-popover .nav:before, .note-popover .nav:after, .note-popover .navbar:before, .note-popover .navbar:after, .note-popover .navbar-header:before, .note-popover .navbar-header:after, .note-popover .navbar-collapse:before, .note-popover .navbar-collapse:after, .note-popover .pager:before, .note-popover .pager:after, .note-popover .panel-body:before, .note-popover .panel-body:after, .note-popover .modal-footer:before, .note-popover .modal-footer:after, .o_css_editor .clearfix:before, .o_css_editor .clearfix:after, .o_css_editor .dl-horizontal dd:before, .o_css_editor .dl-horizontal dd:after, .o_css_editor .container:before, .o_css_editor .container:after, .o_css_editor .container-fluid:before, .o_css_editor .container-fluid:after, .o_css_editor .row:before, .o_css_editor .row:after, .o_css_editor .form-horizontal .form-group:before, .o_css_editor .form-horizontal .form-group:after, .o_css_editor .btn-toolbar:before, .o_css_editor .btn-toolbar:after, .o_css_editor .btn-group-vertical > .btn-group:before, .o_css_editor .btn-group-vertical > .btn-group:after, .o_css_editor .nav:before, .o_css_editor .nav:after, .o_css_editor .navbar:before, .o_css_editor .navbar:after, .o_css_editor .navbar-header:before, .o_css_editor .navbar-header:after, .o_css_editor .navbar-collapse:before, .o_css_editor .navbar-collapse:after, .o_css_editor .pager:before, .o_css_editor .pager:after, .o_css_editor .panel-body:before, .o_css_editor .panel-body:after, .o_css_editor .modal-footer:before, .o_css_editor .modal-footer:after, .web_editor-dialog .clearfix:before, .web_editor-dialog .clearfix:after, .web_editor-dialog .dl-horizontal dd:before, .web_editor-dialog .dl-horizontal dd:after, .web_editor-dialog .container:before, .web_editor-dialog .container:after, .web_editor-dialog .container-fluid:before, .web_editor-dialog .container-fluid:after, .web_editor-dialog .row:before, .web_editor-dialog .row:after, .web_editor-dialog .form-horizontal .form-group:before, .web_editor-dialog .form-horizontal .form-group:after, .web_editor-dialog .btn-toolbar:before, .web_editor-dialog .btn-toolbar:after, .web_editor-dialog .btn-group-vertical > .btn-group:before, .web_editor-dialog .btn-group-vertical > .btn-group:after, .web_editor-dialog .nav:before, .web_editor-dialog .nav:after, .web_editor-dialog .navbar:before, .web_editor-dialog .navbar:after, .web_editor-dialog .navbar-header:before, .web_editor-dialog .navbar-header:after, .web_editor-dialog .navbar-collapse:before, .web_editor-dialog .navbar-collapse:after, .web_editor-dialog .pager:before, .web_editor-dialog .pager:after, .web_editor-dialog .panel-body:before, .web_editor-dialog .panel-body:after, .web_editor-dialog .modal-footer:before, .web_editor-dialog .modal-footer:after, .note-image-dialog .clearfix:before, .note-image-dialog .clearfix:after, .note-image-dialog .dl-horizontal dd:before, .note-image-dialog .dl-horizontal dd:after, .note-image-dialog .container:before, .note-image-dialog .container:after, .note-image-dialog .container-fluid:before, .note-image-dialog .container-fluid:after, .note-image-dialog .row:before, .note-image-dialog .row:after, .note-image-dialog .form-horizontal .form-group:before, .note-image-dialog .form-horizontal .form-group:after, .note-image-dialog .btn-toolbar:before, .note-image-dialog .btn-toolbar:after, .note-image-dialog .btn-group-vertical > .btn-group:before, .note-image-dialog .btn-group-vertical > .btn-group:after, .note-image-dialog .nav:before, .note-image-dialog .nav:after, .note-image-dialog .navbar:before, .note-image-dialog .navbar:after, .note-image-dialog .navbar-header:before, .note-image-dialog .navbar-header:after, .note-image-dialog .navbar-collapse:before, .note-image-dialog .navbar-collapse:after, .note-image-dialog .pager:before, .note-image-dialog .pager:after, .note-image-dialog .panel-body:before, .note-image-dialog .panel-body:after, .note-image-dialog .modal-footer:before, .note-image-dialog .modal-footer:after {
-  content: " ";
-  display: table;
-  clear: both;
-}
-.note-popover .caret, .o_css_editor .caret, .web_editor-dialog .caret, .note-image-dialog .caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  border-top: 4px solid;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-}
-.note-popover .btn.dropdown-toggle, .o_css_editor .btn.dropdown-toggle, .web_editor-dialog .btn.dropdown-toggle, .note-image-dialog .btn.dropdown-toggle {
-  position: relative;
-  float: left;
-}
-.note-popover .btn, .o_css_editor .btn, .web_editor-dialog .btn, .note-image-dialog .btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 400;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border-radius: 4px;
-}
-.note-popover .btn .caret, .o_css_editor .btn .caret, .web_editor-dialog .btn .caret, .note-image-dialog .btn .caret {
-  margin-left: 0;
-}
-.note-popover .btn.disabled, .note-popover .btn[disabled], .note-popover .btn.disabled:hover, .note-popover .btn[disabled]:active, .o_css_editor .btn.disabled, .o_css_editor .btn[disabled], .o_css_editor .btn.disabled:hover, .o_css_editor .btn[disabled]:active, .web_editor-dialog .btn.disabled, .web_editor-dialog .btn[disabled], .web_editor-dialog .btn.disabled:hover, .web_editor-dialog .btn[disabled]:active, .note-image-dialog .btn.disabled, .note-image-dialog .btn[disabled], .note-image-dialog .btn.disabled:hover, .note-image-dialog .btn[disabled]:active {
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: 0.65;
-  filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.note-popover .btn-sm, .o_css_editor .btn-sm, .web_editor-dialog .btn-sm, .note-image-dialog .btn-sm {
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-.note-popover .btn-group, .o_css_editor .btn-group, .web_editor-dialog .btn-group, .note-image-dialog .btn-group {
-  padding-top: 0;
-  margin-top: 0;
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-}
-.note-popover .btn-group > .btn, .o_css_editor .btn-group > .btn, .web_editor-dialog .btn-group > .btn, .note-image-dialog .btn-group > .btn {
-  position: relative;
-  float: left;
-}
-.note-popover .btn-group > .btn:first-child, .o_css_editor .btn-group > .btn:first-child, .web_editor-dialog .btn-group > .btn:first-child, .note-image-dialog .btn-group > .btn:first-child {
-  margin-left: 0;
-}
-.note-popover .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .o_css_editor .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .web_editor-dialog .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .note-image-dialog .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.note-popover .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .o_css_editor .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .web_editor-dialog .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .note-image-dialog .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-  border-radius: 0;
-}
-.note-popover .btn-group > .btn:last-child:not(:first-child), .note-popover .btn-group > .btn > .dropdown-toggle:not(:first-child), .o_css_editor .btn-group > .btn:last-child:not(:first-child), .o_css_editor .btn-group > .btn > .dropdown-toggle:not(:first-child), .web_editor-dialog .btn-group > .btn:last-child:not(:first-child), .web_editor-dialog .btn-group > .btn > .dropdown-toggle:not(:first-child), .note-image-dialog .btn-group > .btn:last-child:not(:first-child), .note-image-dialog .btn-group > .btn > .dropdown-toggle:not(:first-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-.note-popover .btn-group > .btn + .dropdown-toggle, .o_css_editor .btn-group > .btn + .dropdown-toggle, .web_editor-dialog .btn-group > .btn + .dropdown-toggle, .note-image-dialog .btn-group > .btn + .dropdown-toggle {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.note-popover .btn-group > .btn.active, .o_css_editor .btn-group > .btn.active, .web_editor-dialog .btn-group > .btn.active, .note-image-dialog .btn-group > .btn.active {
-  color: #333;
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-.note-popover .btn-group .btn + .btn, .note-popover .btn-group .btn + .btn-group, .note-popover .btn-group + .btn, .note-popover .btn-group + .btn-group, .o_css_editor .btn-group .btn + .btn, .o_css_editor .btn-group .btn + .btn-group, .o_css_editor .btn-group + .btn, .o_css_editor .btn-group + .btn-group, .web_editor-dialog .btn-group .btn + .btn, .web_editor-dialog .btn-group .btn + .btn-group, .web_editor-dialog .btn-group + .btn, .web_editor-dialog .btn-group + .btn-group, .note-image-dialog .btn-group .btn + .btn, .note-image-dialog .btn-group .btn + .btn-group, .note-image-dialog .btn-group + .btn, .note-image-dialog .btn-group + .btn-group {
-  margin-left: -1px;
-}
-.note-popover .btn-link, .o_css_editor .btn-link, .web_editor-dialog .btn-link, .note-image-dialog .btn-link {
-  border-color: transparent;
-  color: #428bca;
-}
-.note-popover .btn-link:hover, .note-popover .btn-link:focus, .o_css_editor .btn-link:hover, .o_css_editor .btn-link:focus, .web_editor-dialog .btn-link:hover, .web_editor-dialog .btn-link:focus, .note-image-dialog .btn-link:hover, .note-image-dialog .btn-link:focus {
-  color: #2a6496;
-  text-decoration: underline;
-  background-color: transparent;
-}
-.note-popover .form-group, .o_css_editor .form-group, .web_editor-dialog .form-group, .note-image-dialog .form-group {
-  margin-bottom: 15px;
-}
-.note-popover .form-control, .o_css_editor .form-control, .web_editor-dialog .form-control, .note-image-dialog .form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857;
-  color: #555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.note-popover .form-horizontal .form-group, .o_css_editor .form-horizontal .form-group, .web_editor-dialog .form-horizontal .form-group, .note-image-dialog .form-horizontal .form-group {
-  margin-left: -15px;
-  margin-right: -15px;
-}
-.note-popover .form-group, .o_css_editor .form-group, .web_editor-dialog .form-group, .note-image-dialog .form-group {
-  margin-bottom: 15px;
-}
-.note-popover .form-control.select2-container, .o_css_editor .form-control.select2-container, .web_editor-dialog .form-control.select2-container, .note-image-dialog .form-control.select2-container {
-  height: auto !important;
-  padding: 0;
-}
-.note-popover label, .o_css_editor label, .web_editor-dialog label, .note-image-dialog label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: 700;
-}
-.note-popover .col-sm-1, .note-popover .col-sm-2, .note-popover .col-sm-3, .note-popover .col-sm-4, .note-popover .col-sm-5, .note-popover .col-sm-6, .note-popover .col-sm-7, .note-popover .col-sm-8, .note-popover .col-sm-9, .note-popover .col-sm-10, .note-popover .col-sm-11, .note-popover .col-sm-12, .note-popover .col-lg-12, .o_css_editor .col-sm-1, .o_css_editor .col-sm-2, .o_css_editor .col-sm-3, .o_css_editor .col-sm-4, .o_css_editor .col-sm-5, .o_css_editor .col-sm-6, .o_css_editor .col-sm-7, .o_css_editor .col-sm-8, .o_css_editor .col-sm-9, .o_css_editor .col-sm-10, .o_css_editor .col-sm-11, .o_css_editor .col-sm-12, .o_css_editor .col-lg-12, .web_editor-dialog .col-sm-1, .web_editor-dialog .col-sm-2, .web_editor-dialog .col-sm-3, .web_editor-dialog .col-sm-4, .web_editor-dialog .col-sm-5, .web_editor-dialog .col-sm-6, .web_editor-dialog .col-sm-7, .web_editor-dialog .col-sm-8, .web_editor-dialog .col-sm-9, .web_editor-dialog .col-sm-10, .web_editor-dialog .col-sm-11, .web_editor-dialog .col-sm-12, .web_editor-dialog .col-lg-12, .note-image-dialog .col-sm-1, .note-image-dialog .col-sm-2, .note-image-dialog .col-sm-3, .note-image-dialog .col-sm-4, .note-image-dialog .col-sm-5, .note-image-dialog .col-sm-6, .note-image-dialog .col-sm-7, .note-image-dialog .col-sm-8, .note-image-dialog .col-sm-9, .note-image-dialog .col-sm-10, .note-image-dialog .col-sm-11, .note-image-dialog .col-sm-12, .note-image-dialog .col-lg-12 {
-  position: relative;
-  min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
-  width: 100%;
-}
-.note-popover .dropdown, .o_css_editor .dropdown, .web_editor-dialog .dropdown, .note-image-dialog .dropdown {
-  position: relative;
-}
-.note-popover .dropdown > .btn, .note-popover .btn-group > .btn, .o_css_editor .dropdown > .btn, .o_css_editor .btn-group > .btn, .web_editor-dialog .dropdown > .btn, .web_editor-dialog .btn-group > .btn, .note-image-dialog .dropdown > .btn, .note-image-dialog .btn-group > .btn {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-  text-decoration: none;
-}
-.note-popover .dropdown > .btn-primary, .note-popover .btn-group > .btn-primary, .o_css_editor .dropdown > .btn-primary, .o_css_editor .btn-group > .btn-primary, .web_editor-dialog .dropdown > .btn-primary, .web_editor-dialog .btn-group > .btn-primary, .note-image-dialog .dropdown > .btn-primary, .note-image-dialog .btn-group > .btn-primary {
-  color: #fff;
-  background-color: #428bca;
-  border-color: #357ebd;
-}
-.note-popover .dropdown-menu, .o_css_editor .dropdown-menu, .web_editor-dialog .dropdown-menu, .note-image-dialog .dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 160px;
-  padding: 5px 0;
-  margin: 2px 0 0;
-  list-style: none;
-  font-size: 14px;
-  text-align: left;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  background-clip: padding-box;
-}
-.note-popover .dropdown-menu > li > a, .o_css_editor .dropdown-menu > li > a, .web_editor-dialog .dropdown-menu > li > a, .note-image-dialog .dropdown-menu > li > a {
-  display: block !important;
-  padding: 3px 20px;
-  clear: both;
-  font-weight: normal;
-  color: #666;
-  white-space: nowrap;
-  background: transparent;
-}
-.note-popover .dropdown-menu > li.active > a, .o_css_editor .dropdown-menu > li.active > a, .web_editor-dialog .dropdown-menu > li.active > a, .note-image-dialog .dropdown-menu > li.active > a {
-  color: #fff;
-  text-decoration: none;
-  background-color: #428bca;
-  outline: 0;
-}
-.note-popover .open > .dropdown-menu, .o_css_editor .open > .dropdown-menu, .web_editor-dialog .open > .dropdown-menu, .note-image-dialog .open > .dropdown-menu {
-  display: block;
-}
-.note-popover .list-group, .o_css_editor .list-group, .web_editor-dialog .list-group, .note-image-dialog .list-group {
-  margin-bottom: 20px;
-  padding-left: 0;
-}
-.note-popover .list-group-item, .o_css_editor .list-group-item, .web_editor-dialog .list-group-item, .note-image-dialog .list-group-item {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-  margin-bottom: -1px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-}
-.note-popover .list-group-item:first-child, .o_css_editor .list-group-item:first-child, .web_editor-dialog .list-group-item:first-child, .note-image-dialog .list-group-item:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.note-popover .list-group-item:last-child, .o_css_editor .list-group-item:last-child, .web_editor-dialog .list-group-item:last-child, .note-image-dialog .list-group-item:last-child {
-  margin-bottom: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.note-popover .list-group-item-heading, .o_css_editor .list-group-item-heading, .web_editor-dialog .list-group-item-heading, .note-image-dialog .list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-.note-popover .list-group-item.active, .o_css_editor .list-group-item.active, .web_editor-dialog .list-group-item.active, .note-image-dialog .list-group-item.active {
-  z-index: 2;
-  color: #fff;
-  background-color: #428bca;
-  border-color: #428bca;
-}
-.note-popover .tab-content > .tab-pane, .o_css_editor .tab-content > .tab-pane, .web_editor-dialog .tab-content > .tab-pane, .note-image-dialog .tab-content > .tab-pane {
-  display: none;
-}
-.note-popover .tab-content > .active, .o_css_editor .tab-content > .active, .web_editor-dialog .tab-content > .active, .note-image-dialog .tab-content > .active {
-  display: block;
-}
-.note-popover .nav, .o_css_editor .nav, .web_editor-dialog .nav, .note-image-dialog .nav {
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-}
-.note-popover .nav > li, .o_css_editor .nav > li, .web_editor-dialog .nav > li, .note-image-dialog .nav > li {
-  position: relative;
-  display: block;
-}
-.note-popover .nav > li > a, .o_css_editor .nav > li > a, .web_editor-dialog .nav > li > a, .note-image-dialog .nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-}
-.note-popover .nav-tabs, .o_css_editor .nav-tabs, .web_editor-dialog .nav-tabs, .note-image-dialog .nav-tabs {
-  border-bottom: 1px solid #ddd;
-}
-.note-popover .nav-tabs > li, .o_css_editor .nav-tabs > li, .web_editor-dialog .nav-tabs > li, .note-image-dialog .nav-tabs > li {
-  float: left;
-  margin-bottom: -1px;
-}
-.note-popover .nav-tabs > li > a, .o_css_editor .nav-tabs > li > a, .web_editor-dialog .nav-tabs > li > a, .note-image-dialog .nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: 1.42857;
-  border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
-}
-.note-popover .nav-tabs > li.active > a, .note-popover .nav-tabs > li.active > a:hover, .note-popover .nav-tabs > li.active > a:focus, .o_css_editor .nav-tabs > li.active > a, .o_css_editor .nav-tabs > li.active > a:hover, .o_css_editor .nav-tabs > li.active > a:focus, .web_editor-dialog .nav-tabs > li.active > a, .web_editor-dialog .nav-tabs > li.active > a:hover, .web_editor-dialog .nav-tabs > li.active > a:focus, .note-image-dialog .nav-tabs > li.active > a, .note-image-dialog .nav-tabs > li.active > a:hover, .note-image-dialog .nav-tabs > li.active > a:focus {
-  color: #8c8c8c;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-.note-popover .pager, .o_css_editor .pager, .web_editor-dialog .pager, .note-image-dialog .pager {
-  padding-left: 0;
-  margin: 20px 0;
-  list-style: none;
-  text-align: center;
-}
-.note-popover .pager li, .o_css_editor .pager li, .web_editor-dialog .pager li, .note-image-dialog .pager li {
-  display: inline;
-}
-.note-popover .pager li > a, .note-popover .pager li > span, .o_css_editor .pager li > a, .o_css_editor .pager li > span, .web_editor-dialog .pager li > a, .web_editor-dialog .pager li > span, .note-image-dialog .pager li > a, .note-image-dialog .pager li > span {
-  display: inline-block;
-  padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 15px;
-}
-.note-popover .pager .previous > a, .note-popover .pager .previous > span, .o_css_editor .pager .previous > a, .o_css_editor .pager .previous > span, .web_editor-dialog .pager .previous > a, .web_editor-dialog .pager .previous > span, .note-image-dialog .pager .previous > a, .note-image-dialog .pager .previous > span {
-  float: left;
-}
-.note-popover .pager .disabled > a, .note-popover .pager .disabled > a:hover, .note-popover .pager .disabled > a:focus, .note-popover .pager .disabled > span, .o_css_editor .pager .disabled > a, .o_css_editor .pager .disabled > a:hover, .o_css_editor .pager .disabled > a:focus, .o_css_editor .pager .disabled > span, .web_editor-dialog .pager .disabled > a, .web_editor-dialog .pager .disabled > a:hover, .web_editor-dialog .pager .disabled > a:focus, .web_editor-dialog .pager .disabled > span, .note-image-dialog .pager .disabled > a, .note-image-dialog .pager .disabled > a:hover, .note-image-dialog .pager .disabled > a:focus, .note-image-dialog .pager .disabled > span {
-  color: #b3b3b3;
-  background-color: #fff;
-  cursor: not-allowed;
-}
-.note-popover .dropdown-submenu, .o_css_editor .dropdown-submenu, .web_editor-dialog .dropdown-submenu, .note-image-dialog .dropdown-submenu {
-  position: relative;
-  z-index: 1000;
-}
-.note-popover .dropdown-submenu > .dropdown-menu, .o_css_editor .dropdown-submenu > .dropdown-menu, .web_editor-dialog .dropdown-submenu > .dropdown-menu, .note-image-dialog .dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  -webkit-border-radius: 0 6px 6px 6px;
-  -moz-border-radius: 0 6px 6px 6px;
-  border-radius: 0 6px 6px 6px;
-}
-.note-popover .dropdown-submenu:hover > .dropdown-menu, .o_css_editor .dropdown-submenu:hover > .dropdown-menu, .web_editor-dialog .dropdown-submenu:hover > .dropdown-menu, .note-image-dialog .dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-.note-popover .dropdown-submenu:hover > a:after, .o_css_editor .dropdown-submenu:hover > a:after, .web_editor-dialog .dropdown-submenu:hover > a:after, .note-image-dialog .dropdown-submenu:hover > a:after {
-  border-left-color: #ffffff;
-}
-.note-popover .dropdown-submenu > a:after, .o_css_editor .dropdown-submenu > a:after, .web_editor-dialog .dropdown-submenu > a:after, .note-image-dialog .dropdown-submenu > a:after {
-  display: block;
-  content: " ";
-  float: right;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #cccccc;
-  margin-top: 5px;
-  margin-right: -10px;
-}
-.note-popover .dropdown-submenu.pull-left, .o_css_editor .dropdown-submenu.pull-left, .web_editor-dialog .dropdown-submenu.pull-left, .note-image-dialog .dropdown-submenu.pull-left {
-  float: none;
-}
-.note-popover .dropdown-submenu.pull-left > .dropdown-menu, .o_css_editor .dropdown-submenu.pull-left > .dropdown-menu, .web_editor-dialog .dropdown-submenu.pull-left > .dropdown-menu, .note-image-dialog .dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  -webkit-border-radius: 6px 0 6px 6px;
-  -moz-border-radius: 6px 0 6px 6px;
-  border-radius: 6px 0 6px 6px;
-}
-.note-popover .hidden, .o_css_editor .hidden, .web_editor-dialog .hidden, .note-image-dialog .hidden {
-  display: none !important;
-}
-.note-popover .img-responsive, .o_css_editor .img-responsive, .web_editor-dialog .img-responsive, .note-image-dialog .img-responsive {
-  display: block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-.note-popover .well, .o_css_editor .well, .web_editor-dialog .well, .note-image-dialog .well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-.note-popover .sr-only, .o_css_editor .sr-only, .web_editor-dialog .sr-only, .note-image-dialog .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.note-popover .text-center, .o_css_editor .text-center, .web_editor-dialog .text-center, .note-image-dialog .text-center {
-  text-align: center;
-}
-.note-popover .text-muted, .o_css_editor .text-muted, .web_editor-dialog .text-muted, .note-image-dialog .text-muted {
-  color: #b3b3b3;
-}
-
-.note-popover .btn {
-  height: 30px;
-}
-
-.note-popover, .o_css_editor {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.42857;
-  color: #666;
-}
-.note-popover button, .o_css_editor button {
-  margin: 0;
-}
-.note-popover a, .o_css_editor a {
-  color: #428bca;
-}
-.note-popover a:hover, .note-popover a:focus, .o_css_editor a:hover, .o_css_editor a:focus {
-  color: #2a6496;
-  text-decoration: underline;
-}
-.note-popover .popover, .o_css_editor .popover {
-  position: fixed !important;
-  top: 1px !important;
-  right: auto !important;
-  left: 300px !important;
-  margin-top: 0 !important;
-  border: 0;
-  background: transparent;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  z-index: 1040;
-  padding: 1px;
-  text-align: left;
-  white-space: normal;
-  border-radius: 6px;
-  max-width: none;
-}
-.note-popover .popover .popover-content, .o_css_editor .popover .popover-content {
-  padding: 0;
-  margin: 0 0 0 6px;
-}
-.note-popover .popover .popover-content .note-para .dropdown-menu, .o_css_editor .popover .popover-content .note-para .dropdown-menu {
-  min-width: 148px !important;
-  padding: 5px 0 5px 5px !important;
-}
-.note-popover .popover .popover-content .note-ul .dropdown-menu, .o_css_editor .popover .popover-content .note-ul .dropdown-menu {
-  min-width: 150px !important;
-  padding: 5px 0 5px 5px !important;
-}
-.note-popover .popover .popover-content .note-ul .dropdown-menu .note-li, .o_css_editor .popover .popover-content .note-ul .dropdown-menu .note-li {
-  margin-right: 5px;
-}
-.note-popover .popover .popover-content .colorpicker, .o_css_editor .popover .popover-content .colorpicker {
-  margin: 0;
-}
-.note-popover .popover .popover-content .colorpicker td > *, .o_css_editor .popover .popover-content .colorpicker td > * {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  margin: 0;
-  border: 1px solid #fff;
-}
-.note-popover .popover .popover-content .btn-group, .o_css_editor .popover .popover-content .btn-group {
-  margin: 0 5px 0 0;
-}
-.note-popover .popover .popover-content > a, .o_css_editor .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 .popover-content > span, .o_css_editor .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 .arrow, .o_css_editor .arrow {
-  display: none;
-}
-
-.note-popover .btn-default, .o_css_editor .btn-default, .web_editor-dialog .modal-footer .btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-.note-popover .btn-primary, .o_css_editor .btn-primary, .web_editor-dialog .modal-footer .btn-primary {
-  color: #fff;
-  background-color: #428bca;
-  border-color: #357ebd;
-}
-
-.web_editor-dialog, .note-image-dialog {
-  color: #666;
-  display: none;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1050;
-  -webkit-overflow-scrolling: touch;
-  outline: 0;
-}
-.web_editor-dialog .btn, .note-image-dialog .btn {
-  border-color: #ccc;
-}
-.web_editor-dialog .btn-link, .note-image-dialog .btn-link {
-  border-color: transparent;
-}
-.web_editor-dialog .btn-primary, .note-image-dialog .btn-primary {
-  color: #fff;
-  background-color: #428bca;
-  border-color: #357ebd;
-}
-.web_editor-dialog .btn-danger, .note-image-dialog .btn-danger {
-  color: #fff;
-  background-color: #d9534f;
-  border-color: #d43f3a;
-}
-.web_editor-dialog .modal-header a, .web_editor-dialog .modal-footer a, .note-image-dialog .modal-header a, .note-image-dialog .modal-footer a {
-  color: #428bca;
-}
-.web_editor-dialog .modal-header a:hover, .web_editor-dialog .modal-header a:focus, .web_editor-dialog .modal-footer a:hover, .web_editor-dialog .modal-footer a:focus, .note-image-dialog .modal-header a:hover, .note-image-dialog .modal-header a:focus, .note-image-dialog .modal-footer a:hover, .note-image-dialog .modal-footer a:focus {
-  color: #2a6496;
-  text-decoration: underline;
-}
-.web_editor-dialog .modal-header .btn, .web_editor-dialog .modal-footer .btn, .note-image-dialog .modal-header .btn, .note-image-dialog .modal-footer .btn {
-  border-color: #ccc;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857;
-  border-radius: 4px;
-}
-.web_editor-dialog .link-style .dropdown > .btn, .note-image-dialog .link-style .dropdown > .btn {
-  min-width: 160px;
-}
-.web_editor-dialog .link-style li, .note-image-dialog .link-style li {
-  text-align: center;
-}
-.web_editor-dialog .link-style li label, .note-image-dialog .link-style li label {
-  width: 100px;
-  margin: 0 5px;
-}
-.web_editor-dialog .link-style li label input.link-style, .note-image-dialog .link-style li label input.link-style {
-  display: none;
-}
-.web_editor-dialog .modal-title, .note-image-dialog .modal-title {
-  margin: 0;
-  line-height: 1.42857;
-}
-.web_editor-dialog .modal-dialog, .note-image-dialog .modal-dialog {
-  position: relative;
-  width: auto;
-  margin: 10px;
-}
-.web_editor-dialog .modal-content, .note-image-dialog .modal-content {
-  position: relative;
-  background-color: #fff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-  background-clip: padding-box;
-  outline: 0;
-}
-.web_editor-dialog .modal-header, .note-image-dialog .modal-header {
-  padding: 15px;
-  border-bottom: 1px solid #e5e5e5;
-  min-height: 16.43px;
-}
-.web_editor-dialog .modal-header .close, .note-image-dialog .modal-header .close {
-  margin-top: -2px;
-}
-.web_editor-dialog .modal-body, .note-image-dialog .modal-body {
-  position: relative;
-  padding: 15px;
-}
-.web_editor-dialog .modal-footer, .note-image-dialog .modal-footer {
-  text-align: left;
-  padding: 15px;
-  border-top: 1px solid #e5e5e5;
-}
-.web_editor-dialog .close, .note-image-dialog .close {
-  float: right;
-  font-size: 21px;
-  font-weight: 700;
-  line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 #fff;
-  opacity: 0.2;
-  filter: alpha(opacity=20);
-}
-.web_editor-dialog button.close, .note-image-dialog button.close {
-  padding: 0;
-  cursor: pointer;
-  background: 0 0;
-  border: 0;
-  -webkit-appearance: none;
-}
-
-.note-image-dialog .btn {
-  height: 34px;
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  .web_editor-dialog .modal-dialog, .note-image-dialog .modal-dialog {
-    width: 600px;
-    margin: 30px auto;
-  }
-  .web_editor-dialog .modal-content, .note-image-dialog .modal-content {
-    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  }
-
-  .note-popover .col-sm-1, .note-popover .col-sm-2, .note-popover .col-sm-3, .note-popover .col-sm-4, .note-popover .col-sm-5, .note-popover .col-sm-6, .note-popover .col-sm-7, .note-popover .col-sm-8, .note-popover .col-sm-9, .note-popover .col-sm-10, .note-popover .col-sm-11, .note-popover .col-sm-12, .o_css_editor .col-sm-1, .o_css_editor .col-sm-2, .o_css_editor .col-sm-3, .o_css_editor .col-sm-4, .o_css_editor .col-sm-5, .o_css_editor .col-sm-6, .o_css_editor .col-sm-7, .o_css_editor .col-sm-8, .o_css_editor .col-sm-9, .o_css_editor .col-sm-10, .o_css_editor .col-sm-11, .o_css_editor .col-sm-12, .web_editor-dialog .col-sm-1, .web_editor-dialog .col-sm-2, .web_editor-dialog .col-sm-3, .web_editor-dialog .col-sm-4, .web_editor-dialog .col-sm-5, .web_editor-dialog .col-sm-6, .web_editor-dialog .col-sm-7, .web_editor-dialog .col-sm-8, .web_editor-dialog .col-sm-9, .web_editor-dialog .col-sm-10, .web_editor-dialog .col-sm-11, .web_editor-dialog .col-sm-12, .note-image-dialog .col-sm-1, .note-image-dialog .col-sm-2, .note-image-dialog .col-sm-3, .note-image-dialog .col-sm-4, .note-image-dialog .col-sm-5, .note-image-dialog .col-sm-6, .note-image-dialog .col-sm-7, .note-image-dialog .col-sm-8, .note-image-dialog .col-sm-9, .note-image-dialog .col-sm-10, .note-image-dialog .col-sm-11, .note-image-dialog .col-sm-12 {
-    float: left;
-  }
-  .note-popover .col-sm-12, .o_css_editor .col-sm-12, .web_editor-dialog .col-sm-12, .note-image-dialog .col-sm-12 {
-    width: 100%;
-  }
-  .note-popover .col-sm-11, .o_css_editor .col-sm-11, .web_editor-dialog .col-sm-11, .note-image-dialog .col-sm-11 {
-    width: 91.66667%;
-  }
-  .note-popover .col-sm-10, .o_css_editor .col-sm-10, .web_editor-dialog .col-sm-10, .note-image-dialog .col-sm-10 {
-    width: 83.33333%;
-  }
-  .note-popover .col-sm-9, .o_css_editor .col-sm-9, .web_editor-dialog .col-sm-9, .note-image-dialog .col-sm-9 {
-    width: 75%;
-  }
-  .note-popover .col-sm-8, .o_css_editor .col-sm-8, .web_editor-dialog .col-sm-8, .note-image-dialog .col-sm-8 {
-    width: 66.66667%;
-  }
-  .note-popover .col-sm-7, .o_css_editor .col-sm-7, .web_editor-dialog .col-sm-7, .note-image-dialog .col-sm-7 {
-    width: 58.33333%;
-  }
-  .note-popover .col-sm-6, .o_css_editor .col-sm-6, .web_editor-dialog .col-sm-6, .note-image-dialog .col-sm-6 {
-    width: 50%;
-  }
-  .note-popover .col-sm-5, .o_css_editor .col-sm-5, .web_editor-dialog .col-sm-5, .note-image-dialog .col-sm-5 {
-    width: 41.66667%;
-  }
-  .note-popover .col-sm-4, .o_css_editor .col-sm-4, .web_editor-dialog .col-sm-4, .note-image-dialog .col-sm-4 {
-    width: 33.33333%;
-  }
-  .note-popover .col-sm-3, .o_css_editor .col-sm-3, .web_editor-dialog .col-sm-3, .note-image-dialog .col-sm-3 {
-    width: 25%;
-  }
-  .note-popover .col-sm-2, .o_css_editor .col-sm-2, .web_editor-dialog .col-sm-2, .note-image-dialog .col-sm-2 {
-    width: 16.66667%;
-  }
-  .note-popover .col-sm-1, .o_css_editor .col-sm-1, .web_editor-dialog .col-sm-1, .note-image-dialog .col-sm-1 {
-    width: 8.33333%;
-  }
-  .note-popover .form-horizontal .control-label, .o_css_editor .form-horizontal .control-label, .web_editor-dialog .form-horizontal .control-label, .note-image-dialog .form-horizontal .control-label {
-    text-align: right;
-    margin-bottom: 0;
-    padding-top: 7px;
-  }
-  .note-popover .form-inline .form-group, .o_css_editor .form-inline .form-group, .web_editor-dialog .form-inline .form-group, .note-image-dialog .form-inline .form-group {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-}
-.modal-open .web_editor-dialog, .modal-open .note-image-dialog {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.editor_enable .modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1040;
-  background-color: #000;
-}
-.editor_enable .modal-backdrop.in {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-
-.note-image-dialog .select-media {
-  width: 80%;
-}
-.note-image-dialog .existing-attachments .pager {
-  margin: 0;
-}
-.note-image-dialog .existing-attachments .pager .disabled {
-  display: none;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell {
-  position: relative;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell .o_attachment_border {
-  border: 1px solid #848490;
-  text-align: center;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell .o_image {
-  max-width: 100%;
-  padding-top: 80%;
-  max-height: 100%;
-  display: inline-block;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell .o_image img {
-  width: 100%;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell .o_webimage {
-  background-image: none;
-  padding-top: 0;
-  width: 100%;
-  height: initial;
-  vertical-align: middle;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell .existing-attachment-remove {
-  position: absolute;
-  top: 0;
-  left: 15px;
-  z-index: 1;
-  cursor: pointer;
-  background: white;
-  padding: 2px;
-  border: 1px solid #848490;
-  border-top: none;
-  border-left: none;
-  -moz-border-radius-bottomright: 8px;
-  -webkit-border-bottom-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-.note-image-dialog .existing-attachments .existing-attachment-cell.media_selected > * {
-  border-width: 5px;
-  border-color: #00f8f8;
-}
-.note-image-dialog .image-preview {
-  margin-bottom: 0.5em;
-}
-.note-image-dialog .font-icons-icons {
-  font-size: 2em;
-  max-height: 9em;
-  overflow: auto;
-}
-.note-image-dialog .font-icons-icons .font-icons-icon {
-  display: inline-block;
-  width: 2em;
-  padding: 0.25em;
-  text-align: center;
-  cursor: pointer;
-}
-.note-image-dialog .font-icons {
-  position: relative;
-  display: block;
-}
-.note-image-dialog .font-icons:before {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-  opacity: 0.7;
-  position: absolute;
-  top: 2px;
-  left: 3px;
-  font-size: 2em;
-}
-.note-image-dialog #icon-search {
-  padding-left: 2.5em;
-}
-.note-image-dialog .font-icons-selected {
-  background-color: #ddd;
-}
-.note-image-dialog.nosave .wait {
-  display: inline-block !important;
-  visibility: visible !important;
-}
-.note-image-dialog.nosave .modal-body .filepicker, .note-image-dialog.nosave .modal-body .image-preview {
-  display: none;
-}
-.note-image-dialog.nosave .modal-body .wait {
-  width: 100%;
-}
-.note-image-dialog.nosave .modal-footer .save {
-  display: none;
-}
-.note-image-dialog .preview-container {
-  text-align: center;
-  line-height: 100px;
-  height: 100px;
-}
-.note-image-dialog .preview-container > * {
-  max-height: 100px;
-  line-height: 100px;
-  margin: 0 auto;
-  display: inline-block;
-}
-
-/* }}} */
-/* ---- COLOR-PICKER ----  {{{ */
-.colorpicker {
-  margin: 0 auto;
-  background: transparent;
-  border: 0;
-}
-.colorpicker td {
-  padding: 0;
-  background: transparent;
-}
-.colorpicker td > * {
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  margin: 3px;
-  padding: 0;
-  border-width: 1px;
-  display: block;
-}
-.colorpicker .only-text {
-  display: none;
-}
-.colorpicker .automatic-color {
-  background: #fff;
-  border-left: 7px solid #f33;
-  border-top: 7px solid #0e0;
-  border-right: 8px solid #33f;
-  border-bottom: 8px solid #fe0;
-  margin: 4px 3px 3px 3px;
-  width: 0;
-  height: 0;
-}
-
-/* }}} */
-/* ---- TRANSLATIONS ---- {{{ */
-.oe_translate_examples li {
-  margin: 10px;
-  padding: 4px;
-}
-
-html[lang] > body.editor_enable [data-oe-translation-state] {
-  background: rgba(255, 255, 90, 0.5) !important;
-}
-html[lang] > body.editor_enable [data-oe-translation-state]:hover {
-  background: inherit !important;
-  cursor: text;
-}
-html[lang] > body.editor_enable [data-oe-translation-state="translated"] {
-  background: rgba(120, 215, 110, 0.5) !important;
-}
-
-html[data-translatable] .oe_field_translate {
-  display: block;
-}
-
-html[data-translatable] .oe_field_translate {
-  display: none;
-}
-
-/* }}} */
-/* ---- editable ----  {{{ */
-.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;
-}
-.o_editable:focus {
-  outline: none !important;
-}
-
-/* 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;
-}
-
-.o_editable .btn, .btn.o_editable {
-  -webkit-user-select: auto;
-  -moz-user-select: auto;
-  -ms-user-select: auto;
-  user-select: auto;
-  cursor: text !important;
-}
-
-.o_editable .fa {
-  cursor: pointer;
-}
-
-.css_editable_display {
-  display: block !important;
-}
-
-.css_editable_hidden {
-  display: none !important;
-}
-
-.editor_enable [data-oe-readonly]:hover {
-  cursor: default;
-}
-.editor_enable .css_editable_mode_hidden {
-  display: none;
-}
-.editor_enable .css_non_editable_mode_hidden {
-  display: block !important;
-}
-.editor_enable .media_iframe_video .css_editable_mode_display {
-  display: block !important;
-}
-
-.editor_enable [placeholder]:empty:after {
-  content: "  " attr(placeholder);
-  opacity: 0.5;
-}
-.editor_enable [placeholder]:empty:active:after, [placeholder]:empty:focus:after {
-  content: none;
-}
-.editor_enable input[placeholder]:empty:after, .editor_enable textarea[placeholder]:empty:after, .editor_enable select[placeholder]:empty:after {
-  content: none;
-}
-.oe_empty[placeholder]:empty {
-  min-height: 220px !important;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.oe_empty[placeholder]:empty:not(.o_editable) {
-  background-image: url("/web_editor/static/src/img/edit_here.png") !important;
-}
-.oe_empty[placeholder]:empty:after, .oe_empty[placeholder]:empty:before {
-  opacity: 0.4;
-  overflow: hidden;
-  z-index: -1;
-  min-height: 1em;
-}
-.oe_empty[placeholder]:empty:after {
-  text-align: center;
-  padding-top: 160px;
-  display: block;
-  font-size: 24px;
-}
-.oe_empty[placeholder]:empty.o_no_placeholder_image {
-  background-image: none;
-  text-align: left;
-  padding-top: 0;
-}
-.oe_empty[placeholder]:empty[data-oe-type=html]:after {
-  font-size: 16px;
-}
-
-.editor_has_snippets .oe_empty[placeholder]:empty {
-  background-image: url("/web_editor/static/src/img/drag_here.png") !important;
-}
-
-#web_editor-top-edit {
-  width: 100%;
-  min-height: 34px;
-  height: 34px;
-  background-color: #222;
-  border-color: #080808;
-  border-width: 0 0 1px;
-  position: fixed;
-  border-radius: 0;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-#web_editor-top-edit .btn-link {
-  color: #b3b3b3;
-}
-#web_editor-top-edit > ul > li {
-  margin: 0;
-}
-#web_editor-top-edit form {
-  padding: 0 10px 0 15px;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  margin: 0;
-}
-#web_editor-top-edit form button, #web_editor-top-edit form a {
-  padding: 4px 8px 4px 8px;
-  margin-top: 2px;
-  font-size: 13px;
-}
-
-#editable_area {
-  margin-top: 34px;
-}
-
-/* }}} */
-/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */
-.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  position: static;
-}
-
-.css_editable_display {
-  display: none;
-}
-
-.oe_carlos_danger {
-  outline: 1px solid red !important;
-  background-color: #ffd9dd !important;
-}
-
-/* }}} */
diff --git a/addons/web_editor/static/src/css/editor.sass b/addons/web_editor/static/src/css/editor.sass
deleted file mode 100644
index bf929e89002..00000000000
--- a/addons/web_editor/static/src/css/editor.sass
+++ /dev/null
@@ -1,876 +0,0 @@
-@import "compass/css3"
-@import "compass/css3/user-interface"
-@import "compass/css3/transition"
-@import "compass/support"
-
-
-/* ---- EDITOR BAR ---- {{{ */
-
-.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog
-    *
-        box-sizing: border-box
-    a
-        text-decoration: none
-    ul, ol
-        margin-top: 0
-        margin-bottom: 10px
-
-    .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after
-        content: " "
-        display: table
-        clear: both
-
-    .caret
-        display: inline-block
-        width: 0
-        height: 0
-        vertical-align: middle
-        border-top: 4px solid
-        border-right: 4px solid transparent
-        border-left: 4px solid transparent
-
-    /* button */
-
-    .btn.dropdown-toggle
-        position: relative
-        float: left
-    .btn
-        display: inline-block
-        margin-bottom: 0
-        font-weight: 400
-        text-align: center
-        vertical-align: middle
-        cursor: pointer
-        background-image: none
-        border: 1px solid transparent
-        white-space: nowrap
-        -webkit-user-select: none
-        -moz-user-select: none
-        -ms-user-select: none
-        user-select: none
-        border-radius: 4px
-        .caret
-            margin-left: 0
-        &.disabled, &[disabled], &.disabled:hover, &[disabled]:active
-            cursor: not-allowed
-            pointer-events: none
-            opacity: .65
-            filter: alpha(opacity=65)
-            -webkit-box-shadow: none
-            box-shadow: none
-    .btn-sm
-        padding: 5px 10px
-        font-size: 12px
-        line-height: 1.5
-        border-radius: 3px
-    .btn-group
-        padding-top: 0
-        margin-top: 0
-        position: relative
-        display: inline-block
-        vertical-align: middle
-        > .btn
-            position: relative
-            float: left
-            &:first-child
-                margin-left: 0
-            &:first-child:not(:last-child):not(.dropdown-toggle)
-                border-top-right-radius: 0
-                border-bottom-right-radius: 0
-            &:not(:first-child):not(:last-child):not(.dropdown-toggle)
-                border-radius: 0
-            &:last-child:not(:first-child), >.dropdown-toggle:not(:first-child)
-                border-bottom-left-radius: 0
-                border-top-left-radius: 0
-            &+.dropdown-toggle
-                padding-left: 8px
-                padding-right: 8px
-            &.active
-                color: #333
-                background-color: #e6e6e6
-                border-color: #adadad
-        .btn+.btn, .btn+.btn-group, +.btn, +.btn-group
-            margin-left: -1px
-    .btn-link
-        border-color: transparent
-        color: #428bca
-        &:hover, &:focus
-            color: #2a6496
-            text-decoration: underline
-            background-color: transparent
-
-    /* form */
-
-    .form-group
-        margin-bottom: 15px
-    .form-control
-        display: block
-        width: 100%
-        height: 34px
-        padding: 6px 12px
-        font-size: 14px
-        line-height: 1.42857143
-        color: #555
-        background-color: #fff
-        background-image: none
-        border: 1px solid #ccc
-        border-radius: 4px
-        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
-    .form-horizontal .form-group
-        margin-left: -15px
-        margin-right: -15px
-    .form-group
-        margin-bottom: 15px
-    .form-control.select2-container
-        height: auto !important
-        padding: 0
-    label
-        display: inline-block
-        max-width: 100%
-        margin-bottom: 5px
-        font-weight: 700
-
-    /* col */
-
-    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-lg-12
-        position: relative
-        min-height: 1px
-        padding-left: 15px
-        padding-right: 15px
-        width: 100%
-
-    /* dropdown */
-
-    .dropdown
-        position: relative
-    .dropdown, .btn-group
-        > .btn
-            color: #333
-            background-color: #fff
-            border-color: #ccc
-            text-decoration: none
-        > .btn-primary
-            color: #fff
-            background-color: #428bca
-            border-color: #357ebd
-    .dropdown-menu
-        position: absolute
-        top: 100%
-        left: 0
-        z-index: 1000
-        display: none
-        float: left
-        min-width: 160px
-        padding: 5px 0
-        margin: 2px 0 0
-        list-style: none
-        font-size: 14px
-        text-align: left
-        background-color: #fff
-        border: 1px solid #ccc
-        border: 1px solid rgba(0,0,0,.15)
-        border-radius: 4px
-        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175)
-        box-shadow: 0 6px 12px rgba(0,0,0,.175)
-        background-clip: padding-box
-        > li > a
-            display: block !important
-            padding: 3px 20px
-            clear: both
-            font-weight: normal
-            color: #666
-            white-space: nowrap
-            background: transparent
-        > li.active > a
-            color: #fff
-            text-decoration: none
-            background-color: #428bca
-            outline: 0
-    .open > .dropdown-menu
-        display: block
-
-    /* list-group */
-
-    .list-group
-        margin-bottom: 20px
-        padding-left: 0
-    .list-group-item
-        position: relative
-        display: block
-        padding: 10px 15px
-        margin-bottom: -1px
-        background-color: #fff
-        border: 1px solid #ddd
-    .list-group-item:first-child
-        border-top-right-radius: 4px
-        border-top-left-radius: 4px
-    .list-group-item:last-child
-        margin-bottom: 0
-        border-bottom-right-radius: 4px
-        border-bottom-left-radius: 4px
-    .list-group-item-heading
-        margin-top: 0
-        margin-bottom: 5px
-    .list-group-item.active
-        z-index: 2
-        color: #fff
-        background-color: #428bca
-        border-color: #428bca
-
-    /* tab */
-
-    .tab-content > .tab-pane
-        display: none
-    .tab-content > .active
-        display: block
-    .nav
-        margin-bottom: 0
-        padding-left: 0
-        list-style: none
-    .nav > li
-        position: relative
-        display: block
-    .nav > li > a
-        position: relative
-        display: block
-        padding: 10px 15px
-    .nav-tabs
-        border-bottom: 1px solid #ddd
-    .nav-tabs > li
-        float: left
-        margin-bottom: -1px
-    .nav-tabs > li > a
-        margin-right: 2px
-        line-height: 1.42857143
-        border: 1px solid transparent
-        border-radius: 4px 4px 0 0
-    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
-        color: #8c8c8c
-        background-color: #fff
-        border: 1px solid #ddd
-        border-bottom-color: transparent
-        cursor: default
-
-    /* pager */
-
-    .pager
-        padding-left: 0
-        margin: 20px 0
-        list-style: none
-        text-align: center
-        li
-            display: inline
-        li > a, li > span
-            display: inline-block
-            padding: 5px 14px
-            background-color: #fff
-            border: 1px solid #ddd
-            border-radius: 15px
-        .previous > a, .previous > span
-            float: left
-        .disabled > a, .disabled > a:hover, .disabled > a:focus, .disabled > span
-            color: #b3b3b3
-            background-color: #fff
-            cursor: not-allowed
-
-    /* add submenu css */
-
-    .dropdown-submenu
-        position: relative
-        z-index: 1000
-    .dropdown-submenu
-        &>.dropdown-menu
-            top: 0
-            left: 100%
-            margin-top: -6px
-            margin-left: -1px
-            -webkit-border-radius: 0 6px 6px 6px
-            -moz-border-radius: 0 6px 6px 6px
-            border-radius: 0 6px 6px 6px
-        &:hover
-            &>.dropdown-menu
-                display: block
-            &>a:after
-                border-left-color: #ffffff
-        &>a:after
-            display: block
-            content: " "
-            float: right
-            width: 0
-            height: 0
-            border-color: transparent
-            border-style: solid
-            border-width: 5px 0 5px 5px
-            border-left-color: #cccccc
-            margin-top: 5px
-            margin-right: -10px
-        &.pull-left
-            float: none
-            &>.dropdown-menu
-                left: -100%
-                margin-left: 10px
-                -webkit-border-radius: 6px 0 6px 6px
-                -moz-border-radius: 6px 0 6px 6px
-                border-radius: 6px 0 6px 6px
-
-    /* global */
-
-    .hidden
-        display: none !important
-    .img-responsive
-        display: block
-        width: 100% \9
-        max-width: 100%
-        height: auto
-    .well
-        min-height: 20px
-        padding: 19px
-        margin-bottom: 20px
-        background-color: #f5f5f5
-        border: 1px solid #e3e3e3
-        border-radius: 4px
-        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05)
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.05)
-    .sr-only
-        position: absolute
-        width: 1px
-        height: 1px
-        margin: -1px
-        padding: 0
-        overflow: hidden
-        clip: rect(0,0,0,0)
-        border: 0
-    .text-center
-        text-align: center
-    .text-muted
-        color: #b3b3b3
-
-.note-popover .btn
-    height: 30px
-.note-popover, .o_css_editor
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
-    font-size: 14px
-    line-height: 1.42857143
-    color: #666
-    button
-        margin: 0
-    a
-        color: #428bca
-        &:hover, &:focus
-            color: #2a6496
-            text-decoration: underline
-
-    .popover
-        position: fixed !important
-        top: 1px !important
-        right: auto !important
-        left: 300px !important
-        margin-top: 0 !important
-        border: 0
-        background: transparent
-        box-shadow: none
-        -webkit-box-shadow: none
-        z-index: 1040
-        padding: 1px
-        text-align: left
-        white-space: normal
-        border-radius: 6px
-        max-width: none
-        .popover-content
-            padding: 0
-            margin: 0 0 0 6px
-            .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
-            .colorpicker
-                margin: 0
-                td > *
-                    width: 20px
-                    height: 20px
-                    padding: 0
-                    margin: 0
-                    border: 1px solid #fff
-            .btn-group
-                margin: 0 5px 0 0
-            > a
-                border-radius: 3px
-                background-color: #fff
-                border-color: #ccc
-                padding: 4px 10px
-                font-size: 14px
-                line-height: 1.5
-            > 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
-    .arrow
-        display: none
-
-.note-popover, .o_css_editor, .web_editor-dialog .modal-footer
-    .btn-default
-        color: #333
-        background-color: #fff
-        border-color: #ccc
-    .btn-primary
-        color: #fff
-        background-color: #428bca
-        border-color: #357ebd
-
-.web_editor-dialog, .note-image-dialog
-    color: #666
-    display: none
-    overflow: hidden
-    position: fixed
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    z-index: 1050
-    -webkit-overflow-scrolling: touch
-    outline: 0
-    .btn
-        border-color: #ccc
-    .btn-link
-        border-color: transparent
-    .btn-primary
-        color: #fff
-        background-color: #428bca
-        border-color: #357ebd
-    .btn-danger
-        color: #fff
-        background-color: #d9534f
-        border-color: #d43f3a
-    .modal-header, .modal-footer
-        a
-            color: #428bca
-            &:hover, &:focus
-                color: #2a6496
-                text-decoration: underline
-        .btn
-            border-color: #ccc
-            padding: 6px 12px
-            font-size: 14px
-            line-height: 1.42857143
-            border-radius: 4px
-    .link-style
-        .dropdown > .btn
-            min-width: 160px
-        li
-            text-align: center
-            label
-                width: 100px
-                margin: 0 5px
-                input.link-style
-                    display: none
-    .modal-title
-        margin: 0
-        line-height: 1.42857143
-    .modal-dialog 
-        position: relative
-        width: auto
-        margin: 10px
-    .modal-content
-        position: relative
-        background-color: #fff
-        border: 1px solid #999
-        border: 1px solid rgba(0,0,0,.2)
-        border-radius: 6px
-        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5)
-        box-shadow: 0 3px 9px rgba(0,0,0,.5)
-        background-clip: padding-box
-        outline: 0
-    .modal-header
-        padding: 15px
-        border-bottom: 1px solid #e5e5e5
-        min-height: 16.43px
-        .close
-            margin-top: -2px
-    .modal-body
-        position: relative
-        padding: 15px
-    .modal-footer
-        text-align: left
-        padding: 15px
-        border-top: 1px solid #e5e5e5
-    .close
-        float: right
-        font-size: 21px
-        font-weight: 700
-        line-height: 1
-        color: #000
-        text-shadow: 0 1px 0 #fff
-        opacity: .2
-        filter: alpha(opacity=20)
-    button.close
-        padding: 0
-        cursor: pointer
-        background: 0 0
-        border: 0
-        -webkit-appearance: none
-
-.note-image-dialog .btn
-    height: 34px
-    font-size: 14px
-
-@media (min-width: 768px)
-    .web_editor-dialog, .note-image-dialog
-        .modal-dialog
-            width: 600px
-            margin: 30px auto
-        .modal-content
-            -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5)
-            box-shadow: 0 5px 15px rgba(0,0,0,.5)
-    .note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog
-        .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
-            float: left
-        .col-sm-12
-            width: 100%
-        .col-sm-11
-            width: 91.66666667%
-        .col-sm-10
-            width: 83.33333333%
-        .col-sm-9
-            width: 75%
-        .col-sm-8
-            width: 66.66666667%
-        .col-sm-7
-            width: 58.33333333%
-        .col-sm-6
-            width: 50%
-        .col-sm-5
-            width: 41.66666667%
-        .col-sm-4
-            width: 33.33333333%
-        .col-sm-3
-            width: 25%
-        .col-sm-2
-            width: 16.66666667%
-        .col-sm-1
-            width: 8.33333333%
-        .form-horizontal .control-label
-            text-align: right
-            margin-bottom: 0
-            padding-top: 7px
-        .form-inline .form-group
-            display: inline-block
-            margin-bottom: 0
-            vertical-align: middle
-
-.modal-open
-    .web_editor-dialog, .note-image-dialog
-        overflow-x: hidden
-        overflow-y: auto
-.editor_enable
-    .modal-backdrop
-        position: fixed
-        top: 0
-        right: 0
-        bottom: 0
-        left: 0
-        z-index: 1040
-        background-color: #000
-    .modal-backdrop.in
-        opacity: .5
-        filter: alpha(opacity=50)
-
-$attachment-border-color: #848490
-.note-image-dialog
-    .select-media
-        width: 80%
-
-    .existing-attachments .pager
-        margin: 0
-    .existing-attachments
-        .pager .disabled
-            display: none
-
-        .existing-attachment-cell
-            position: relative
-            .o_attachment_border
-                border: 1px solid $attachment-border-color
-                text-align: center
-            .o_image
-                max-width: 100%
-                padding-top: 80%
-                max-height: 100%
-                display: inline-block
-                img
-                    width: 100%
-            .o_webimage
-                background-image: none
-                padding-top: 0
-                width: 100%
-                height: initial
-                vertical-align: middle
-            .existing-attachment-remove
-                position: absolute
-                top: 0
-                left: 15px // padding-left on col-*
-                z-index: 1
-                cursor: pointer
-                background: white
-                padding: 2px
-                border: 1px solid $attachment-border-color
-                border-top: none
-                border-left: none
-                +border-bottom-right-radius(8px)
-            &.media_selected
-                > *
-                    border-width: 5px
-                    border-color: rgb(0, 248, 248)
-
-    .image-preview
-        margin-bottom: 0.5em
-    .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
-    &.nosave
-        .wait
-            display: inline-block !important
-            visibility: visible !important
-        .modal-body
-            .filepicker, .image-preview
-                display: none
-            .wait
-                width: 100%
-        .modal-footer .save
-            display: none
-    .preview-container
-        text-align: center
-        line-height: 100px
-        height: 100px
-        > *
-            max-height: 100px
-            line-height: 100px
-            margin: 0 auto
-            display: inline-block
-
-/* }}} */
-
-/* ---- COLOR-PICKER ----  {{{ */
-
-.colorpicker
-    margin: 0 auto
-    background: transparent
-    border: 0
-    td
-        padding: 0
-        background: transparent
-        > *
-            width: 16px
-            height: 16px
-            border-radius: 2px
-            margin: 3px
-            padding: 0
-            border-width: 1px
-            display: block
-    .only-text
-        display: none
-    .automatic-color
-        background: #fff
-        border-left: 7px solid #f33
-        border-top: 7px solid #0e0
-        border-right: 8px solid #33f
-        border-bottom: 8px solid #fe0
-        margin: 4px 3px 3px 3px
-        width: 0
-        height: 0
-
-/* }}} */
-
-/* ---- TRANSLATIONS ---- {{{ */
-
-o_translatable_translated
-
-.oe_translate_examples li
-    margin: 10px
-    padding: 4px
-html[lang] > body.editor_enable
-    [data-oe-translation-state]
-        background: rgba(255, 255, 90, 0.5) !important
-        &:hover
-            background: inherit !important
-            cursor: text
-    [data-oe-translation-state="translated"]
-        background: rgba(120, 215, 110, 0.5) !important
-html[data-translatable] .oe_field_translate
-    display: block
-html[data-translatable] .oe_field_translate
-    display: none
-
-/* }}} */
-
-/* ---- editable ----  {{{ */
-
-.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
-    &:focus
-        outline: none !important
-
-/* 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
-
-// bootstrap makes .btn elements unselectable -> RTE double-click can't know
-// about them either
-.o_editable .btn, .btn.o_editable
-    -webkit-user-select: auto
-    -moz-user-select: auto
-    -ms-user-select: auto
-    user-select: auto
-    cursor: text !important
-.o_editable .fa
-    cursor: pointer
-
-.css_editable_display
-    display: block !important
-
-.css_editable_hidden
-    display: none !important
-
-.editor_enable
-    [data-oe-readonly]:hover
-        cursor: default
-    .css_editable_mode_hidden
-        display: none
-    .css_non_editable_mode_hidden
-        display: block !important
-    .media_iframe_video .css_editable_mode_display
-        display: block !important
-
-    [placeholder]:empty
-        content: " \00a0 " attr(placeholder)
-    [placeholder]:empty:active:after, [placeholder]:empty:focus:after
-        content: none
-    input, textarea, select
-        &[placeholder]:empty
-            content: none
-
-.oe_empty[placeholder]:empty
-    min-height: 220px !important
-    background-repeat: no-repeat
-    background-position: center
-
-    &:not(.o_editable)
-        background-image: url('/web_editor/static/src/img/edit_here.png') !important
-
-    &:after, &:before
-        opacity: 0.4
-        overflow: hidden
-        z-index: -1
-        min-height: 1em
-
-    &:after
-        text-align: center
-        padding-top: 160px
-        display: block
-        font-size: 24px
-
-    &.o_no_placeholder_image
-        background-image: none
-        text-align: left
-        padding-top: 0
-
-    &[data-oe-type=html]
-        &:after
-            font-size: 16px
-.editor_has_snippets .oe_empty[placeholder]:empty
-    background-image: url('/web_editor/static/src/img/drag_here.png') !important
-
-#web_editor-top-edit
-    width: 100%
-    min-height: 34px
-    height: 34px
-    background-color: #222
-    border-color: #080808
-    border-width: 0 0 1px
-    position: fixed
-    border-radius: 0
-    top: 0
-    right: 0
-    left: 0
-    z-index: 1030
-    -webkit-transform: translate3d(0,0,0)
-    transform: translate3d(0,0,0)
-    .btn-link
-        color: #b3b3b3
-    > ul > li
-        margin: 0
-    form
-        padding: 0 10px 0 15px
-        border-top: 1px solid transparent
-        border-bottom: 1px solid transparent
-        margin: 0
-        button, a
-            padding: 4px 8px 4px 8px
-            margin-top: 2px
-            font-size: 13px
-
-#editable_area
-    margin-top: 34px
-
-/* }}} */
-
-
-/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */
-
-.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    position: static
-
-.css_editable_display
-    display: none
-
-.oe_carlos_danger
-    outline: 1px solid red !important
-    background-color: #ffd9dd !important
-
-/* }}} */
diff --git a/addons/web_editor/static/src/css/snippets.css b/addons/web_editor/static/src/css/snippets.css
deleted file mode 100644
index e203e514e87..00000000000
--- a/addons/web_editor/static/src/css/snippets.css
+++ /dev/null
@@ -1,499 +0,0 @@
-@charset "UTF-8";
-/* ---- SNIPPET EDITOR ---- {{{ */
-#oe_snippets #o_left_bar, #oe_snippets #o_arrow {
-  position: fixed;
-  top: 34px;
-  left: 0px;
-  bottom: 0;
-  background: #282828;
-  -moz-box-shadow: 0px 10px 10px -10px black inset;
-  -webkit-box-shadow: 0px 10px 10px -10px black inset;
-  box-shadow: 0px 10px 10px -10px black inset;
-  font-size: 14px;
-}
-#oe_snippets #o_left_bar .snippets_loading, #oe_snippets #o_arrow .snippets_loading {
-  color: white;
-}
-#oe_snippets #o_arrow {
-  z-index: 1009;
-  width: 24px;
-  opacity: 0.75;
-}
-#oe_snippets #o_arrow > * {
-  position: absolute;
-  color: white;
-}
-#oe_snippets #o_arrow div {
-  -moz-transform: translateX(-36%) rotate(-90deg);
-  -ms-transform: translateX(-36%) rotate(-90deg);
-  -webkit-transform: translateX(-36%) rotate(-90deg);
-  transform: translateX(-36%) rotate(-90deg);
-  top: 50%;
-  white-space: nowrap;
-}
-#oe_snippets #o_arrow .fa {
-  width: 100%;
-  left: 40%;
-}
-#oe_snippets #o_left_bar {
-  left: -228px;
-  z-index: 1010;
-  width: 210px;
-  -moz-transition: all 500ms ease;
-  -o-transition: all 500ms ease;
-  -webkit-transition: all 500ms ease;
-  transition: all 500ms ease;
-}
-#oe_snippets #o_left_bar ul {
-  text-align: center;
-  margin: 0;
-  padding: 6px 0;
-  list-style-type: none;
-}
-#oe_snippets #o_left_bar ul li {
-  display: inline-block;
-  padding: 0 3px;
-}
-#oe_snippets #o_left_bar ul li a {
-  color: #aaa;
-}
-#oe_snippets #o_left_bar ul li .fa-stack {
-  overflow: hidden;
-}
-#oe_snippets #o_left_bar ul li.active a.fa, #oe_snippets #o_left_bar ul li.active .fa-stack-1x {
-  color: #428bca;
-}
-#oe_snippets.o_open #o_left_bar {
-  left: 0;
-}
-#oe_snippets .o_panel {
-  margin: 0;
-  border: 0;
-  width: 210px;
-}
-#oe_snippets .o_panel_header {
-  background: #dff0d8;
-  padding: 1px 8px;
-  color: #414141;
-  text-align: center;
-}
-#oe_snippets .o_panel_header .fa-stack {
-  overflow: hidden;
-  font-size: 1em;
-}
-#oe_snippets .o_panel_body {
-  white-space: normal;
-  background: black;
-  padding: 7px 3px;
-}
-#oe_snippets .o_panel_body > div {
-  background: black;
-}
-#oe_snippets .o_panel_body > div label {
-  width: 44px;
-  color: #fff;
-  padding-left: 10px;
-}
-#oe_snippets .o_panel_body > div label div {
-  width: 100px;
-  text-align: center;
-  -moz-transform: translate(-39px, 44px);
-  -webkit-transform: translate(-39px, 44px);
-  transform: translate(-39px, 44px);
-  -moz-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  -webkit-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-}
-
-.oe_snippet {
-  display: inline-block;
-  vertical-align: top;
-  width: 93px;
-  margin-left: 3px;
-  margin-right: 3px;
-  margin-top: 1px;
-  position: relative;
-  overflow: hidden;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: move;
-}
-.oe_snippet .oe_snippet_thumbnail {
-  text-align: center;
-  height: 100%;
-  background: transparent;
-  color: white;
-  position: relative;
-}
-.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
-  -moz-transform: scale(0.95, 0.95);
-  -ms-transform: scale(0.95, 0.95);
-  -webkit-transform: scale(0.95, 0.95);
-  transform: scale(0.95, 0.95);
-}
-.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
-  font-size: 12px;
-  display: block;
-  text-shadow: 0 0 2px black;
-}
-.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
-  height: 74px;
-  width: 92px;
-  background-size: cover;
-  -moz-transform: scale(1, 1);
-  -ms-transform: scale(1, 1);
-  -webkit-transform: scale(1, 1);
-  transform: scale(1, 1);
-}
-.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
-  line-height: 18px;
-}
-.oe_snippet > :not(.oe_snippet_thumbnail) {
-  display: none !important;
-}
-.oe_snippet.disable .oe_snippet_thumbnail {
-  background-color: rgba(255, 0, 0, 0.75);
-}
-.oe_snippet.disable .oe_snippet_thumbnail_img {
-  opacity: 0.8;
-}
-
-#oe_snippets .oe_snippet_thumbnail {
-  background: #747474, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-}
-
-/* ---- SNIPPETS DROP ZONES ---- {{{ */
-.oe_drop_zone.oe_insert {
-  display: block;
-  height: 48px;
-  margin: 0px;
-  margin-top: -4px;
-  margin-bottom: -44px;
-  -moz-transition: margin 250ms linear;
-  -o-transition: margin 250ms linear;
-  -webkit-transition: margin 250ms linear;
-  transition: margin 250ms linear;
-  width: 100%;
-  position: absolute;
-  z-index: 1000;
-}
-.oe_drop_zone.oe_insert:not(.oe_vertical):before {
-  content: "";
-  display: block;
-  border-top: dashed 2px rgba(209, 178, 255, 0.72);
-  position: relative;
-  top: 0px;
-}
-.oe_drop_zone.oe_insert.oe_hover:before {
-  border-top: dashed 2px rgba(116, 255, 161, 0.72);
-}
-.oe_drop_zone.oe_insert.oe_vertical {
-  width: 48px;
-  float: left;
-  position: relative;
-  margin: 0px -24px !important;
-}
-.oe_drop_zone.oe_insert.oe_vertical_text {
-  width: 48px;
-  float: none;
-  display: inline-block;
-  position: relative;
-  margin: 0px -24px !important;
-}
-.oe_drop_zone.oe_insert.oe_overlay {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background: rgba(153, 0, 255, 0.5);
-}
-
-.oe_drop_zone, .oe_drop_zone_style {
-  border: none;
-  background: rgba(153, 0, 255, 0.3);
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-}
-.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
-  background: rgba(0, 255, 133, 0.3);
-  z-index: 1001;
-}
-
-.oe_drop_zone_style {
-  color: white;
-  height: 48px;
-  margin-bottom: 32px;
-  padding-top: 12px;
-}
-
-/* ---- SNIPPET MANIPULATOR ----  {{{ */
-.resize_editor_busy {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.oe_overlay {
-  display: none;
-  height: 0;
-  position: absolute;
-  background: transparent;
-  z-index: 1001;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: opacity 100ms linear;
-  -o-transition: opacity 100ms linear;
-  -webkit-transition: opacity 100ms linear;
-  transition: opacity 100ms linear;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.oe_overlay.oe_active {
-  display: block;
-}
-.oe_overlay .oe_handle {
-  display: block !important;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  margin: -2px;
-}
-.oe_overlay .oe_handle > div {
-  z-index: 1;
-  position: absolute;
-  border-style: dashed;
-  border-width: 1px;
-  border-color: #666666;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
-}
-.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
-  z-index: 2;
-  position: relative;
-  top: 50%;
-  left: 50%;
-  display: block;
-  background: white;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  width: 18px;
-  height: 18px;
-  margin: -9px;
-  padding-left: 1px;
-  font-size: 14px;
-  line-height: 14px;
-  font-family: FontAwesome;
-  color: rgba(0, 0, 0, 0.5);
-  -moz-transition: background 100ms linear;
-  -o-transition: background 100ms linear;
-  -webkit-transition: background 100ms linear;
-  transition: background 100ms linear;
-}
-.oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before {
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-}
-.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w {
-  top: 4px;
-  height: 100%;
-}
-.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
-  content: "";
-  line-height: 16px;
-}
-.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
-  width: 0;
-  height: 100%;
-  top: 2px;
-  left: 8px;
-}
-.oe_overlay .oe_handle.e {
-  left: auto;
-  right: -6px;
-  cursor: w-resize;
-}
-.oe_overlay .oe_handle.w {
-  left: -6px;
-  cursor: e-resize;
-}
-.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
-  left: 2px;
-  width: 100%;
-}
-.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
-  content: "";
-  text-align: center;
-  padding: 1px;
-}
-.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
-  width: 100%;
-  height: 0;
-  top: 7px;
-  left: 1px;
-}
-.oe_overlay .oe_handle.s {
-  top: auto;
-  cursor: n-resize;
-}
-.oe_overlay .oe_handle.n {
-  cursor: s-resize;
-}
-.oe_overlay .oe_handle.n > div {
-  top: 5px;
-}
-.oe_overlay .oe_handle.size {
-  z-index: 3;
-  top: auto;
-  left: 50%;
-  bottom: -6px;
-  margin-left: -50px;
-}
-.oe_overlay .oe_handle.size .oe_handle_button {
-  position: relative;
-  z-index: 3;
-  text-align: center;
-  margin-left: -52px;
-  margin-top: -10px;
-  left: 0px;
-}
-.oe_overlay .oe_handle.size .oe_handle_button:hover {
-  background: rgba(30, 30, 30, 0.8);
-  color: #fff;
-  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-}
-.oe_overlay .oe_handle.size .size {
-  position: absolute;
-  width: 64px;
-  cursor: row-resize;
-  top: 9px;
-  margin-left: 52px;
-  padding: 0 5px;
-}
-.oe_overlay .oe_handle.size .auto_size {
-  position: absolute;
-  width: 100px;
-  top: 9px;
-  cursor: pointer;
-}
-.oe_overlay .oe_handle.readonly {
-  cursor: auto !important;
-}
-.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size {
-  display: none !important;
-}
-.oe_overlay .icon.btn {
-  display: inline-block;
-}
-.oe_overlay .oe_overlay_options {
-  position: absolute;
-  width: 100%;
-  top: -35px;
-  z-index: 1002;
-}
-.oe_overlay .oe_overlay_options > .btn-group {
-  display: -ms-flexbox;
-  display: -moz-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -moz-justify-content: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-.oe_overlay .oe_overlay_options > .btn-group > * {
-  cursor: pointer;
-  -ms-flex: 0 0 auto;
-  -moz-flex: 0 0 auto;
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
-  cursor: pointer;
-}
-.oe_overlay .oe_overlay_options .dropdown {
-  display: inline-block;
-}
-.oe_overlay .oe_overlay_options .dropdown-menu {
-  text-align: left;
-  min-width: 180px;
-}
-.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
-  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;
-}
-.oe_overlay.o_keypress {
-  opacity: 0;
-  -webkit-transition: 0.8s;
-  -moz-transition: 0.8s;
-  -o-transition: 0.8s;
-  -transition: 0.8s;
-}
-
-.s-resize-important, .s-resize-important * {
-  cursor: s-resize !important;
-}
-
-.n-resize-important, .n-resize-important * {
-  cursor: n-resize !important;
-}
-
-.e-resize-important, .e-resize-important * {
-  cursor: e-resize !important;
-}
-
-.w-resize-important, .w-resize-important * {
-  cursor: w-resize !important;
-}
-
-.move-important, .move-important * {
-  cursor: move !important;
-}
diff --git a/addons/web_editor/static/src/css/snippets.sass b/addons/web_editor/static/src/css/snippets.sass
deleted file mode 100644
index 710c358a527..00000000000
--- a/addons/web_editor/static/src/css/snippets.sass
+++ /dev/null
@@ -1,384 +0,0 @@
-@import "compass/css3"
-@import "compass/css3/user-interface"
-@import "compass/css3/transition"
-
-
-/* ---- SNIPPET EDITOR ---- {{{ */
-
-#oe_snippets
-    #o_left_bar, #o_arrow
-        position: fixed
-        top: 34px
-        left: 0px
-        bottom: 0
-        background: rgb(40,40,40)
-        +box-shadow(0px 10px 10px -10px black inset)
-        font-size: 14px
-        .snippets_loading
-            color: white
-    #o_arrow
-        z-index: 1009
-        width: 24px
-        opacity: 0.75
-        > *
-            position: absolute
-            color: white
-        div
-            @include transform( translateX(-36%) rotate(-90deg) )
-            top: 50%
-            white-space: nowrap
-        .fa
-            width: 100%
-            left: 40%
-    #o_left_bar
-        left:  -228px
-        z-index: 1010
-        width: 210px
-        @include transition(all 500ms ease)
-        ul
-            text-align: center
-            margin: 0
-            padding: 6px 0
-            list-style-type: none
-            li
-                display: inline-block
-                padding: 0 3px
-                a
-                    color: #aaa
-                .fa-stack
-                    overflow: hidden
-            li.active a.fa, li.active .fa-stack-1x
-                color: #428bca
-
-    &.o_open #o_left_bar
-        left: 0
-    .o_panel
-        margin: 0
-        border: 0
-        width: 210px
-    .o_panel_header
-        background: #dff0d8
-        padding: 1px 8px
-        color: #414141
-        text-align: center
-        .fa-stack
-            overflow: hidden
-            font-size: 1em
-    .o_panel_body
-        white-space: normal
-        background: black
-        padding: 7px 3px
-        > div
-            background: rgb(0,0,0)
-            label
-                width: 44px
-                color: #fff
-                padding-left: 10px
-
-                div
-                    width: 100px
-                    text-align: center
-                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
-                    @include transform-origin(50%)
-
-.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
-    .oe_snippet_thumbnail
-        text-align: center
-        height: 100%
-        background: transparent
-        color: white
-        position: relative
-        &:hover
-            .oe_snippet_thumbnail_img
-                @include transform( scale(.95,.95))
-        .oe_snippet_thumbnail_title
-            font-size: 12px
-            display: block
-            +text-shadow(0 0 2px rgb(0,0,0))
-        .oe_snippet_thumbnail_img
-            height: 74px
-            width: 92px
-            background-size: cover
-            @include transform( scale(1,1))
-        span, div
-            line-height: 18px
-    & > :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_snippets .oe_snippet_thumbnail
-    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
-
-// }}}}
-
-/* ---- SNIPPETS DROP ZONES ---- {{{ */
-
-.oe_drop_zone.oe_insert
-    display: block
-    height: 48px
-    margin: 0px
-    margin-top: -4px
-    margin-bottom: -44px
-    @include transition(margin 250ms linear)
-    width: 100%
-    position: absolute
-    z-index: 1000
-    &: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)
-        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
-        //background-size: 100px 100px
-        background: rgba(153, 0, 255,.5)
-
-.oe_drop_zone, .oe_drop_zone_style
-    border: none
-    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
-    //background-size: 100px 100px
-    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 ----  {{{ */
-
-.resize_editor_busy
-    background-color: rgba(0,0,0,0.3)
-
-.oe_overlay
-    display: none
-    height: 0
-    position: absolute
-    background: transparent
-    z-index: 1001
-    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
-    +border-radius(3px)
-    @include transition(opacity 100ms linear)
-    +box-sizing(border-box)
-    &.oe_active
-        display: block
-    .oe_handle
-        display: block !important
-        position: absolute
-        top: 50%
-        left: 50%
-        +box-sizing(border-box)
-        width: 16px
-        height: 16px
-        margin: -2px
-        > div
-            z-index: 1
-            position: absolute
-            border-style: dashed
-            border-width: 1px
-            border-color: #666666
-            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
-        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
-            z-index: 2
-            position: relative
-            top: 50%
-            left: 50%
-            display: block
-            background: rgba(255, 255, 255, 1)
-            border: solid 1px rgba(0, 0, 0, .2)
-            +border-radius(5px)
-            width: 18px
-            height: 18px
-            margin: -9px
-            padding-left: 1px
-            font-size: 14px
-            line-height: 14px
-            font-family: FontAwesome
-            color: rgba(0,0,0,.5)
-            @include transition(background 100ms linear)
-        &.e, &.w, &.s, &.n
-            &:hover:before
-                background: rgba(0, 0, 0, .5)
-                color: #fff
-                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-        &.e, &.w
-            top: 4px
-            height: 100%
-            &:before
-                content: "\f07e"
-                line-height: 16px
-            > div
-                width: 0
-                height: 100%
-                top: 2px
-                left: 8px
-        &.e
-            left: auto
-            right: -6px
-            cursor: w-resize
-        &.w
-            left: -6px
-            cursor: e-resize
-        &.s, &.n
-            left: 2px
-            width: 100%
-            &:before
-                content: "\f07d"
-                text-align: center
-                padding: 1px
-            > div
-                width: 100%
-                height: 0
-                top: 7px
-                left: 1px
-        &.s
-            top: auto
-            cursor: n-resize
-        &.n
-            cursor: s-resize
-            > div
-                top: 5px
-        &.size
-            z-index: 3
-            top: auto
-            left: 50%
-            bottom: -6px
-            margin-left: -50px
-            .oe_handle_button
-                position: relative
-                z-index: 3
-                text-align: center
-                margin-left: -52px
-                margin-top: -10px
-                left: 0px
-                &:hover
-                    background: rgba(30, 30, 30, .8)
-                    color: #fff
-                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-            .size
-                position: absolute
-                width: 64px
-                cursor: row-resize
-                top: 9px
-                margin-left: 52px
-                padding: 0 5px
-            .auto_size
-                position: absolute
-                width: 100px
-                top: 9px
-                cursor: pointer
-        &.readonly
-            cursor: auto !important
-            &:before, &.size
-                display: none !important
-
-    .icon.btn
-        display: inline-block
-
-    .oe_overlay_options
-        position: absolute
-        width: 100%
-        top: -35px
-        z-index: 1002
-        > .btn-group
-            display: -ms-flexbox
-            display: -moz-box
-            display: -webkit-box
-            display: -webkit-flex
-            display: flex
-            -moz-justify-content: center
-            -webkit-justify-content: center
-            justify-content: center
-            > *
-                cursor: pointer
-                -ms-flex: 0 0 auto
-                -moz-flex: 0 0 auto
-                -webkit-box-flex: 0
-                -webkit-flex: 0 0 auto
-                flex: 0 0 auto
-        .btn, a
-            cursor: pointer
-        .dropdown
-            display: inline-block
-        .dropdown-menu
-            text-align: left
-            min-width: 180px
-        .dropdown-menu select,.dropdown-menu input
-            display: block
-
-    &.block-w-left .w:before
-        content: "\F061" !important
-    &.block-w-right .w:before
-        content: "\F060" !important
-    &.block-w-left.block-w-right .w:before
-        display: none !important
-    &.block-e-left .e:before
-        content: "\F061" !important
-    &.block-e-right .e:before
-        content: "\F060" !important
-    &.block-e-left.block-e-right .e:before
-        display: none !important
-
-    &.block-s-top .s:before
-        content: "\F063" !important
-    &.block-s-bottom .s:before
-        content: "\f062" !important
-    &.block-n-top .n:before
-        content: "\F063" !important
-    &.block-n-bottom .n:before
-        content: "\f062" !important
-
-    &.o_keypress
-        opacity: 0
-        -webkit-transition: .8s
-        -moz-transition: .8s
-        -o-transition: .8s
-        -transition: .8s
-
-
-.s-resize-important, .s-resize-important *
-    cursor: s-resize !important
-.n-resize-important, .n-resize-important *
-    cursor: n-resize !important
-.e-resize-important, .e-resize-important *
-    cursor: e-resize !important
-.w-resize-important, .w-resize-important *
-    cursor: w-resize !important
-.move-important, .move-important *
-    cursor: move !important
-
-// }}}
diff --git a/addons/web_editor/static/src/css/web_editor.iframe.inline.css b/addons/web_editor/static/src/css/web_editor.iframe.inline.css
deleted file mode 100644
index cba6343becb..00000000000
--- a/addons/web_editor/static/src/css/web_editor.iframe.inline.css
+++ /dev/null
@@ -1,265 +0,0 @@
-body {
-    background-color: #fff;
-}
-#editable_area p {
-    margin: initial;
-}
-#editable_area a {
-    color: inherit;
-}
-#editable_area a:hover {
-    color: inherit;
-}
-#editable_area {
-    margin-top: 0 !important;
-    font: inherit !important;
-    line-height: inherit !important;
-    color: inherit !important;
-}
-#oe_snippets ~ #wrapwrap #editable_area {
-    margin-bottom: 100px;
-}
-
-#wrapwrap > main > div:first-child {
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-}
-
-.editor_enable #wrapwrap > main > div:first-child {
-    border-top: 1px dashed #888;
-    margin-top: 50px;
-}
-
-.editor_enable #wrapwrap > main > div:first-child:before, #wrapwrap > main > div:first-child:after {
-    content: " ";
-    display: block;
-    height: 100%;
-    vertical-align: top;
-    position: fixed;
-    top: -4px;
-    overflow: hidden;
-    z-index: -1;
-    margin-top: 54px;
-}
-.editor_enable #wrapwrap > main > div:first-child[data-oe-placeholder]:empty:before {
-    content: " \00a0 " attr(data-oe-placeholder);
-}
-
-.editor_enable #wrapwrap > main > div:first-child:before {
-    border-left: 1px dashed #000;
-    opacity: 0.4;
-    margin-left: -5px;
-}
-.editor_enable #wrapwrap > main > div:first-child:after {
-    border-left: 1px dashed #000;
-    opacity: 0.4;
-    margin-left: 605px;
-    width: 0;
-}
-
-.note-color-palette .colorpicker {
-    display: none;
-}
-
-/* ---- Default bootstrap values ----  {{{ */
-.tooltip {
-  position: absolute;
-  z-index: 1070;
-  display: block;
-  visibility: visible;
-  font-size: 12px;
-  line-height: 1.4;
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-.tooltip.in {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-.tooltip.bottom {
-  margin-top: 3px;
-  padding: 5px 0;
-}
-.tooltip.bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.tooltip-inner {
-  max-width: 200px;
-  padding: 3px 8px;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  background-color: #000;
-  border-radius: 4px;
-}
-
-.fade:not(.modal-backdrop) {
-  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-}
-
-.fade.in:not(.modal-backdrop) {
-  opacity: 1;
-}
-
-.pull-right {
-  float: right;
-}
-
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.pull-left {
-  float: left;
-}
-
-.img-responsive {
-  display: block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-
-.img-rounded {
-  border-radius: 6px;
-}
-
-.img-thumbnail {
-  padding: 4px;
-  line-height: 1.42857;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  -webkit-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  display: inline-block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-
-.img-circle {
-  border-radius: 50%;
-}
-
-.img-responsive {
-  text-align: center;
-}
-
-img.shadow {
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-}
-
-.fa-1x {
-  font-size: 1em;
-}
-
-.fa-2x {
-  font-size: 2em;
-}
-
-.fa-3x {
-  font-size: 3em;
-}
-
-.fa-4x {
-  font-size: 4em;
-}
-
-.fa-5x {
-  font-size: 5em;
-}
-
-.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;
-}
-
-.text-primary {
-  color: #428bca;
-}
-
-.text-success {
-  color: #3c763d;
-}
-
-.text-info {
-  color: #31708f;
-}
-
-.text-warning {
-  color: #8a6d3b;
-}
-
-.text-danger {
-  color: #a94442;
-}
-
-.bg-primary {
-  color: #fff;
-  background-color: #428bca;
-}
-
-.bg-success {
-  background-color: #dff0d8;
-}
-
-.bg-info {
-  background-color: #d9edf7;
-}
-
-.bg-warning {
-  background-color: #fcf8e3;
-}
-
-.bg-danger {
-  background-color: #f2dede;
-}
-
-.hidden {
-  display: none;
-}
-
-.img-responsive {
-  text-align: center;
-}
-
-/* }}} */
\ No newline at end of file
diff --git a/addons/web_editor/static/src/img/drag_here.png b/addons/web_editor/static/src/img/drag_here.png
deleted file mode 100644
index 335c3a571bb19f4f42bab0acd2ac596a6a3fa4bb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq002|~003MF0{{R3$L3<500004XF*Lt006O%
z3;baP0001=P)t-s@9*&G>gwz4?d<LC>FVq1>g(?B@9ysJ0002W%+Ax**4y0P-rwNh
z;o{8B(BI+W*xB38(9*@o%GB1^($v++%goEo&(G1*(bLt@)7015+S}dU($v<~*4W+O
z;Lp+0=I7|t)z{F{)7IG8+1lLb>FV0t-N?$!;o{@a($vY!&EDYQ$H~jd%gyEH=grU2
z|NsBs;Narp<i*Fy=;-J^u7+;_000SeQchDM?y89H%tS;05cr#40004ENkl<ZSi|kv
zX-~pH5C-6?6uj>nkekxm_U-@wZMIoZDOSVsj&b8oQrhe$&xh_Xv)MX_0^w9YNzRL8
zi6&r1qR<?LirVz63Lwj}>QeFX^yMgW^H652P-;HCqn%<sI+`PEXi*Q%5sO;XIJ8}x
zZEKEvLR0F0KUHX#+D^L59wpNFeiuEO3ZUrm(HZ7^bb*|Y&N1VoeHfEc7BvIKKmzq8
z(6I!Xnu4C+*yOh;x$!OdXbU2n310$@1ke-$=-H`F{{M`=_yXtv4j;{NBJfV(382Rs
zTl61M*Bjd8HwE4EnhzmkR}+oDJKBsjQDD+E^$cjE+s*wYv>)Bl(Mh>L4{Y?lT6Q*i
zS(;-W+ETaC^&{_{_5%LuA7JDBXLmHkhOsj`tQP%>j0UTZBjtV|B%v3oEL9ufCm`gY
z(X!Z$_V21&$Uvv{N*bC_r6{OC<rnEuZqRH7y4`f!cmv~w0o?R4+SLF6002ovPDHLk
FV1gq*Sb6{e

diff --git a/addons/web_editor/static/src/img/edit_here.png b/addons/web_editor/static/src/img/edit_here.png
deleted file mode 100644
index 77beff11c7b610f9fa87184bec541df86cb0103f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 491
zcmeAS@N?(olHy`uVBq!ia0vp^AwV3%!3-piKTDbiq*&4&eH|GXHuiJ>Nn{1`ivoN?
zTyNgGO*}e!{N#yKr-@e&R0*`_>9gnm|NnpV_z92;G@<2<E+0@-u_VYZ_?q#q<8j}=
z6<_o@^L76Dw~Wk(e;wtm=Q;NCgQRNe=KT%~{FhIM0u_Jvba4!cIQ;hJO}-`r0oH&!
z-+38XTY@D2{TH9>mg$r8WudrfVjjoCmnu(<-ZDF0bz~~OY^wLG@fDk7t$VgcRP>i$
zQ{op~IrcN-B3qYPeRExp>%^BrTR(4IUv|&<SCi5wQInIOS^DHUwsG~&`}sOnl&inU
zi`6C6I$KpBR=Qx<kwwx<b&TSo%+vG3>K}36s>{(zlDM@`Yv(uRKt}n?+<~(eUetNI
z>VdS^!|18pU)P=5`SoYmQ<vJ+MT_=@?kulcm&M^8>M@z|PmfffMf2jv3Hurr2hMY^
swfW8}8WP}$M%-T%`)5Mq^5-vj7j<2$5^3eL0|o(ur>mdKI;Vst03pNqKL7v#

diff --git a/addons/web_editor/static/src/less/web_editor.backend.less b/addons/web_editor/static/src/less/web_editor.backend.less
index e9043dc138e..0ff97e327aa 100644
--- a/addons/web_editor/static/src/less/web_editor.backend.less
+++ b/addons/web_editor/static/src/less/web_editor.backend.less
@@ -1,88 +1,85 @@
 .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;
+    .note-editable {
+        min-height: 180px;
+        font: initial !important;
+        font-family: inherit !important;
+        line-height: initial !important;
+        color: initial !important;
+        p {
+            margin: initial;
+            font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif;
+            -webkit-margin-before: 0;
+            font-size: 13px;
+        }
+        a, a:hover {
+            color: initial;
+        }
     }
-    a, a:hover {
-      color: initial;
+    .o_readonly {
+        min-height: 1em;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        border: 0;
     }
 }
-.oe_form_field_html_text .o_readonly {
-    min-height: 1em;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-.oe_form_field_html_text .note-editable p {
-    font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif;
-    -webkit-margin-before: 0;
-    font-size: 13px;
-}
-
 .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);
-}
-.o_form_FieldTextHtml_fullscreen{
-  .oe_form_field_html.o_form_fullscreen_ancestor iframe {
-    position: absolute !important;
-    left: 0 !important;
-    right: 0 !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    width: 100% !important;
-    min-height: 100% !important;
-    z-index: 1001 !important;
+    display: block;
+    width: 100%;
     border: 0;
-  }
-  * {
-    display: none;
-  }
-  .o_form_fullscreen_ancestor {
-    display: block !important;
-    position: static !important;
-    top: 0 !important;
-    left: 0 !important;
-    overflow: visible !important;
-    width: auto !important;
-    overflow: hidden !important;
-  }
+    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 {
+        position: absolute !important;
+        left: 0 !important;
+        right: 0 !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        min-height: 100% !important;
+        z-index: 1001 !important;
+        border: 0;
+    }
+    * {
+        display: none;
+    }
+    .o_form_fullscreen_ancestor {
+        display: block !important;
+        position: static !important;
+        top: 0 !important;
+        left: 0 !important;
+        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 {
-    float: right;
-    margin: -6px -3px 0 0;
-  }
-  > .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 {
-  .box-shadow(#DDCC33 0 0 5px 2px inset);
+    > button {
+        float: right;
+        margin: -6px -3px 0 0;
+    }
+    > .note-editable {
+        border: 1px solid #ccc;
+        min-height: 22px;
+        border-radius: 3px;
+    }
+    .note-editable [contentEditable='true']:hover {
+        box-shadow: #DDCC33 0 0 5px 2px inset;
+    }
 }
diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less
index f83b5628b4e..a7dc0edb622 100644
--- a/addons/web_editor/static/src/less/web_editor.common.less
+++ b/addons/web_editor/static/src/less/web_editor.common.less
@@ -1,166 +1,279 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
 /* ----- EDITOR ----- */
 .css_non_editable_mode_hidden {
-  display: none !important;
+    display: none !important;
 }
 
 /* ----- Editor (for public user, like forum) ----- */
 .note-toolbar {
-  margin-left: 0 !important;
+    margin-left: 0 !important;
 }
 
 .note-popover .popover > .arrow {
-  display: none;
+    display: none;
 }
 
 /* ----- GENERIC LAYOUTING HELPERS ---- */
-.hidden {
-  display: none !important;
-}
-
 /* table */
-#wrapwrap table.table, .o_editable table.table {
-  table-layout: fixed;
-}
-#wrapwrap table.table td, .o_editable table.table td {
-  min-width: 20px;
+#wrapwrap, .o_editable {
+    table.table {
+        table-layout: fixed;
+        td {
+            min-width: 20px;
+        }
+    }
 }
 
 /* Media */
 img.shadow {
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 }
 
 img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
-  padding: 4px;
+    padding: 4px;
 }
 img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
-  padding: 8px;
+    padding: 8px;
 }
 img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
-  padding: 16px;
+    padding: 16px;
 }
 img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
-  padding: 32px;
+    padding: 32px;
 }
 
-div.media_iframe_video.padding-small iframe {
-  padding: 4px;
-}
-div.media_iframe_video.padding-medium iframe {
-  padding: 8px;
-}
-div.media_iframe_video.padding-large iframe {
-  padding: 16px;
-}
-div.media_iframe_video.padding-xl iframe {
-  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;
+    font-size: 6em;
 }
 
 .fa-7x {
-  font-size: 7em;
+    font-size: 7em;
 }
 
 .fa-8x {
-  font-size: 8em;
+    font-size: 8em;
 }
 
 .fa-9x {
-  font-size: 9em;
+    font-size: 9em;
 }
 
 .fa-10x {
-  font-size: 10em;
+    font-size: 10em;
 }
 
 .fa.center-block {
-  text-align: center;
+    text-align: center;
 }
 
 /* video */
 div.media_iframe_video {
-  margin: 0 auto;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-div.media_iframe_video iframe {
-  width: 100%;
-  height: 100%;
-  top: 0;
-  position: absolute;
-  margin: 0 auto;
-  margin-left: -50%;
-}
-div.media_iframe_video .media_iframe_video_size {
-  padding-bottom: 66.5%;
-  position: relative;
-  width: 100%;
-  height: 0;
-}
-div.media_iframe_video .css_editable_mode_display {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: none;
-  z-index: 2;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        .o-position-absolute(@top: 0);
+        margin: 0 auto;
+        margin-left: -50%;
+    }
+
+    .media_iframe_video_size {
+        padding-bottom: 66.5%;
+        position: relative;
+        width: 100%;
+        height: 0;
+    }
+
+    .css_editable_mode_display {
+        .o-position-absolute();
+        width: 100%;
+        height: 100%;
+        display: none;
+        z-index: 2;
+    }
 }
 
 html[data-browser^="msie"] div.media_iframe_video iframe {
-  margin-left: 0;
+    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;
-  }
+@media (max-width: @screen-xs-max) {
+    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;
-}
-address .fa.fa-file-text-o {
-  margin-right: 1px;
+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;
+    white-space: nowrap;
 }
 
 /* ---- MENU ---- {{{ */
 div.oe_menu_buttons {
-  top: -8px;
-  right: -8px;
+    top: -8px;
+    right: -8px;
 }
 
-ul.oe_menu_editor .fa-home {
-  display: none;
+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;
+    }
 }
-ul.oe_menu_editor > li:first-child > div > span > .fa-home {
-  display: block;
+
+// Generate all margins for all sizes
+.o-margins-all(@factor: 1) {
+    // Unfortunately, the margins sizes are not
+    // mathematically related by a single function
+    .o-margins(128, @factor);
+    .o-margins(96, @factor);
+    .o-margins(92, @factor);
+    .o-margins(64, @factor);
+    .o-margins(48, @factor);
+    .o-margins(32, @factor);
+    .o-margins(24, @factor);
+    .o-margins(16, @factor);
+    .o-margins(8, @factor);
+    .o-margins(4, @factor);
+    .o-margins(0, @factor);
 }
-ul.oe_menu_editor .oe_menu_placeholder {
-  outline: 1px dashed #4183C4;
+
+// Generate all margins for one size, scalled by a
+// given factor (0 <= factor <= 1)
+.o-margins(@name, @factor: 1) {
+    .o-margins-define(@name, @factor * @name);
 }
-ul.oe_menu_editor ul {
-  list-style: none;
+
+// Generate all margins for one size, given
+// the name of the margin and intended size
+.o-margins-define(@name, @size: @name) {
+    .mt@{name} {margin-top: ~"@{size}px"!important;}
+    .mb@{name} {margin-bottom: ~"@{size}px"!important;}
+    .ml@{name} {margin-left: ~"@{size}px"!important;}
+    .mr@{name} {margin-right: ~"@{size}px"!important;}
 }
-ul.oe_menu_editor li div {
-  cursor: move;
+
+// Generate all margins
+.o-margins-all();
+
+// Possibility to change the margins ratio for small screen sizes, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-all(0.75);
+// }
+// Possibility to only redefine single margins for small screen sizes, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins(64, 0.50);
+//     .o-margins(48, 0.50);
+// }
+// Possibility to directly redefine the size of single margins instead of refering to a factor for small screen sizes, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-define(128, 48);
+//     .o-margins-define(96, 48);
+//     .o-margins-define(64, 48);
+// }
+
+a.o_underline {
+    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
 }
-ul.oe_menu_editor .disclose {
-  cursor: pointer;
-  width: 10px;
-  display: none;
+
+// Colors
+@gray-white: #fff;
+
+@color-alpha: #1cc1a9;
+@color-beta: #a24689;
+@color-gamma: #BA3C3D;
+@color-delta: #0D6759;
+@color-epsilon: #0B2E59;
+
+.o-create-color-classes(@class_name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%)) {
+    .bg-@{class_name} {
+        background-color: @color;
+        color: @complementary;
+        .text-muted {
+            color: fade(@complementary, 40%);
+        }
+    }
+    body .text-@{class_name} { // html to make the rules more important that bg-* ones
+        color: @color;
+    }
 }
+
+// Create classes for theme colors
+.o-create-color-classes(alpha, @color-alpha);
+.o-create-color-classes(beta, @color-beta);
+.o-create-color-classes(gamma, @color-gamma);
+.o-create-color-classes(delta, @color-delta);
+.o-create-color-classes(epsilon, @color-epsilon);
+
+// Create classes for UI colors
+.o-create-color-classes(primary, @brand-primary);
+.o-create-color-classes(success, @brand-success);
+.o-create-color-classes(info, @brand-info);
+.o-create-color-classes(warning, @brand-warning);
+.o-create-color-classes(danger, @brand-danger);
+
+// Create classes for greyscale colors
+.o-create-color-classes(~'black', @gray-base);
+.o-create-color-classes(~'gray-darker', @gray-darker);
+.o-create-color-classes(~'gray-dark', @gray-dark);
+.o-create-color-classes(~'gray', @gray);
+.o-create-color-classes(~'gray-light', @gray-light);
+.o-create-color-classes(~'gray-lighter', @gray-lighter);
+.o-create-color-classes(~'white', @gray-white);
diff --git a/addons/web_editor/static/src/less/web_editor.components.less b/addons/web_editor/static/src/less/web_editor.components.less
deleted file mode 100644
index d24df7ac99f..00000000000
--- a/addons/web_editor/static/src/less/web_editor.components.less
+++ /dev/null
@@ -1,276 +0,0 @@
-#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
deleted file mode 100644
index 20e70c6a095..00000000000
--- a/addons/web_editor/static/src/less/web_editor.interactions.less
+++ /dev/null
@@ -1,61 +0,0 @@
-// 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.less b/addons/web_editor/static/src/less/web_editor.less
deleted file mode 100644
index 760108b9e61..00000000000
--- a/addons/web_editor/static/src/less/web_editor.less
+++ /dev/null
@@ -1,63 +0,0 @@
-// Generate all margins for all sizes
-.o-margins-all(@factor: 1) {
-    // Unfortunately, the margins sizes are not
-    // mathematically related by a single function
-    .o-margins(128, @factor);
-    .o-margins(96, @factor);
-    .o-margins(92, @factor);
-    .o-margins(64, @factor);
-    .o-margins(48, @factor);
-    .o-margins(32, @factor);
-    .o-margins(24, @factor);
-    .o-margins(16, @factor);
-    .o-margins(8, @factor);
-    .o-margins(4, @factor);
-    .o-margins(0, @factor);
-}
-
-// Generate all margins for one size, scalled by a
-// given factor (0 <= factor <= 1)
-.o-margins(@name, @factor: 1) {
-    .o-margins-define(@name, @factor * @name);
-}
-
-// Generate all margins for one size, given
-// the name of the margin and intended size
-.o-margins-define(@name, @size: @name) {
-    .mt@{name} {margin-top: ~"@{size}px"!important;}
-    .mb@{name} {margin-bottom: ~"@{size}px"!important;}
-    .ml@{name} {margin-left: ~"@{size}px"!important;}
-    .mr@{name} {margin-right: ~"@{size}px"!important;}
-}
-
-// Generate all margins
-.o-margins-all();
-
-// It is possible to change the margins ratio for
-// small screen sizes using media queries, e.g.:
-// @media (max-width: 768px) {
-//     .o-margins-all(0.75);
-// }
-
-// It is also possible to only redefine single margins
-// for small screen sizes using media queries, e.g.:
-// @media (max-width: 768px) {
-//     .o-margins(64, 0.50);
-//     .o-margins(48, 0.50);
-// }
-
-// It is also possible to directly redefine the size
-// of single margins instead of refering to a factor
-// for small screen sizes using media queries, e.g.:
-// @media (max-width: 768px) {
-//     .o-margins-define(128, 48);
-//     .o-margins-define(96, 48);
-//     .o-margins-define(64, 48);
-// }
-
-a.o_underline {
-    text-decoration: underline;
-    &:hover {
-        text-decoration: underline;
-    }
-}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/less/web_editor.mixins.less b/addons/web_editor/static/src/less/web_editor.mixins.less
deleted file mode 100644
index 2c4c78b4703..00000000000
--- a/addons/web_editor/static/src/less/web_editor.mixins.less
+++ /dev/null
@@ -1,204 +0,0 @@
-// 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.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
new file mode 100644
index 00000000000..6cf994e2f03
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -0,0 +1,339 @@
+
+// INPUTS
+.o_switch {
+    .o-flex-display();
+    .o-align-items(center);
+    font-weight: normal;
+    height: 1.5em;
+    cursor: pointer;
+
+    > input {
+        display: none;
+
+        + span {
+            background: #bababa;
+            border-radius: 0.4em;
+            height: 1em;
+            width: 2.5em;
+            margin-right: 0.5em;
+            display: inline-block;
+            .transition(all 0.3s @o-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 @o-we-md-ease);
+                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);
+            }
+        }
+
+        &:checked + span {
+            background-color: rgb(142, 224, 212);
+            background-color: transparentize(@odoo-brand-optional, 0.5);
+            &:after {
+                background-color: @odoo-brand-optional;
+                margin-left: 1.1em;
+            }
+        }
+    }
+    &:hover > input + span:after {
+        background-color: mix(@odoo-brand-optional, #fafafa);
+    }
+}
+.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;
+        .o-position-absolute(@top: 10px, @left: 5px);
+        pointer-events: none;
+        .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;
+        .o-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 {
+        .o-position-absolute(@top: 25%, @left: 0);
+        height: 60%;
+        width: 100px;
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    /* active state */
+    input:focus ~ .highlight {
+        .animation(inputHighlighter 0.3s ease);
+    }
+}
+
+// DRAG&DROP ANIMATIONS
+.oe_snippet_body {
+    opacity: 0;
+    .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+}
+
+// MODALS
+body .modal {
+    // SELECT MEDIA
+    .o_select_media_dialog {
+        width: 80%;
+
+        .modal-body {
+            li.search {
+                float: right;
+
+                ul.pager {
+                    margin: 0;
+                    > li > a {
+                        border-radius: 3px;
+                        margin-left: 2px;
+                        padding: 6px 14px;
+                    }
+                }
+                .form-group {
+                    position: relative;
+                    margin: 0 10px 0 0;
+                    > input {
+                        padding-right: 30px;
+                    }
+                    > span {
+                        .o-position-absolute(7px, 7px);
+                        font-size: 1.3em;
+                    }
+                }
+            }
+            .dropdown-toggle {
+                line-height: 0;
+                height: 34px;
+            }
+            .o_existing_attachment_cell {
+                @odoo-border-image: 1px;
+                .o_existing_attachment_remove {
+                    .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
+                    padding: 3px 3px 12px 12px;
+                    background-color: white;
+                    border-bottom: 1px solid black;
+                    border-left: 1px solid black;
+                    border-radius: 0 0 0 100%;
+                    opacity: 0.8;
+                }
+                .o_image {
+                    border: @odoo-border-image solid transparent;
+                    cursor: pointer;
+
+                    &.o_webimage {
+                        width: 100%;
+                        height: auto;
+                    }
+                }
+                &.o_selected .o_image {
+                    border-color: @odoo-brand-primary;
+                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+                }
+            }
+            .font-icons-icons > span {
+                font-size: 30px;
+                margin: 5px;
+                padding: 3px;
+                cursor: pointer;
+
+                &.o_selected {
+                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+                }
+            }
+        }
+    }
+
+    // BACKGROUND IMAGE OPTIONS
+    .o_bg_img_opt_modal .o_bg_img_opt {
+        margin: 15px 0;
+
+        .help-control {
+            .o-position-absolute(15px, 15px);
+        }
+        .help {
+            margin: 15px 0;
+
+            .simulator {
+                position: relative;
+                float: left;
+                margin-right: 15px;
+                width: 120px;
+                height: 100px;
+                .bg {
+                    .o-position-absolute(0, 0, 0, 0);
+                    border: 1px dotted #888787;
+                    background-image: url(/web/image);
+                    background-position: center center;
+                    .o-background-size(cover);
+                }
+                .el {
+                    .o-position-absolute(10px, 0, 10px, 0);
+                    border: 1px solid #222;
+                }
+                &.contain_bg {
+                    .bg {
+                        .o-position-absolute(0, 12px, 20px, 12px);
+                    }
+                    .el {
+                        .o-position-absolute(0, 0, 20px, 0);
+                    }
+                }
+            }
+            + * {
+                clear: left;
+            }
+        }
+
+        .o_bg_img_opt_cover_edition {
+            border-top: 1px solid black;
+            border-bottom: 1px solid white;
+            padding: 0px 25px 25px 25px;
+            .o-linear-gradient(-150deg, lighten(#2c2c36, 5%), darken(#2c2c36, 10%));
+            h6 {
+                color: white;
+                font-weight: bold;
+            }
+            .o_bg_img_opt_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;
+                }
+                &:hover .o_focus_point:before {
+                    opacity: 0.5;
+                }
+            }
+            .o_bg_img_opt_ui_info {
+                .animation(fadeInOut 2s ease forwards);
+                .o-position-absolute(@bottom: 1px, @right: 0);
+                display: block;
+                padding: 3px 13px;
+                background-color: rgba(255, 255, 255, 0.8);
+                color: #333;
+                text-align: center;
+                font-weight: bold;
+                pointer-events: none;
+                span {
+                    font-weight: normal;
+                }
+                .o_x {
+                    margin-right: 10px
+                }
+            }
+            .grid {
+                .o-position-absolute(@top: 33.33%, @left: 0);
+                display: block;
+                width: 100%;
+                height: 1px;
+                background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
+                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%
+                }
+            }
+            .o_focus_point {
+                .o-position-absolute(@top: 0, @left: 0);
+                width: 30px;
+                height: 30px;
+                border: 2px solid white;
+                border-radius: 100%;
+                margin-top: -15px;
+                margin-left: -15px;
+                box-shadow: 0 0 1px #333;
+                pointer-events: none;
+                &.o_with_transition {
+                    .o-transition(all, 0.2s);
+                }
+                &:before {
+                    pointer-events: none;
+                    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);
+                    .o-transition(opacity, 0.2s);
+                }
+            }
+        }
+    }
+
+    &.web_editor-dialog {
+        li > label {
+            width: 96%;
+            margin: 4px 2% 0;
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index 75410d27eb0..33edd55dc61 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -1,976 +1,937 @@
 
-
+// TOP BAR (EDIT)
 #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;
+    .o-position-absolute(0, 0, auto, 0);
+    position: fixed;
+    height: @odoo-navbar-height;
+    z-index: 1003;
 
-  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;
+    background-color: rgba(0,0,0,0);
+    .o-transition(background-color, 400ms, @o-we-md-ease);
+    font-family: Roboto, @font-family-sans-serif;
+
+    form.navbar-form {
+        height: 100%;
         margin: 0;
-        border: none;
-        .button-variant(white, @we_color-primary, @we_color-primary);
-      }
-    }
-  }
-}
+        padding: 0;
+        .o-position-absolute(@right: -@o-we-sidebar-width);
+        .o-transition(right, 0.4s, @o-we-md-ease);
 
-#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%);
+        .btn-group {
+            height: 100%;
+        }
+
+        .btn {
+            height: 100%;
+            margin: 0;
+            padding: 10px;
+            line-height: 1;
+            font-weight: bold;
+
+            .o-transition(all, 0.3s);
+            border: none;
+            border-radius: 0;
+
+            &.btn-primary {
+                .button-variant(white, @odoo-brand-primary, @odoo-brand-primary);
+                text-transform: uppercase;
+            }
+            &.btn-default {
+                .button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+                text-transform: uppercase;
+            }
+
+            &:focus, &:active, &:focus:active {
+                outline: none;
+            }
+        }
+        .dropdown-menu {
+            left: auto;
+            right: 0;
         }
-      }
     }
-  }
 }
 
-// CUTOMIZE MENU BUTTON
-// ===========================
+// SNIPPET PANEL
+#oe_snippets {
+    .o-flex-display();
+    .o-flex-flow(column, nowrap);
+    .o-position-absolute(0, auto, 0, -@o-we-sidebar-width);
+    position: fixed;
+    width: @o-we-sidebar-width;
+    z-index: 1003;
 
-.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);
+    font-family: Roboto, @font-family-sans-serif;
+    border-right: 1px solid @o-we-color-divider;
+    .o-transition(left, 400ms, @o-we-md-ease);
+    .o-linear-gradient(45deg, @o-we-color-normal, darken(@o-we-color-normal, 10%));
+    box-shadow: 0px 10px 10px -10px black inset;
+
+    #snippets_menu {
+        .o-flex(0, 0, auto);
+        height: @odoo-navbar-height;
+        margin: 0;
+        padding: 0;
+        background: @o-we-color-dark;
+        list-style-type: none;
+        li {
+            display: block;
+            float: left;
+            width: 25%;
+            height: 100%;
+
+            a {
+                display: block;
+                width: 100%;
+                height: 100%;
+                .o-flex-display();
+                .o-align-items(center);
+                .o-justify-content(center);
+                text-decoration: none!important;
+
+                i {
+                    font-size: 20px;
+                    color: #999999;
+                    + i {
+                        color: white;
+                    }
+                }
+            }
+
+            &.active, &:hover {
+                a i {
+                    color: white;
+                    + i {
+                        color: @odoo-brand-primary;
+                    }
+                }
+            }
+        }
     }
-    &: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);
+
+    #o_scroll {
+        height: 100%;
+        overflow: auto;
+
+        .o_panel_header {
+            color: #999999;
+            .o-flex-display();
+            .o-align-items(center);
+            .o-justify-content(center);
+            padding: 3%;
+
+            i {
+                margin-right: 5px;
+            }
+        }
+        .o_panel_body {
+            &:after {
+                content: " ";
+                display: table;
+                clear: both;
+            }
+
+            .oe_snippet {
+                float: left;
+                width: 45.5%;
+                margin: 0 0 3% 3%;
+                box-shadow: none;
+                background-color: transparent;
+                .user-select(none);
+
+                cursor: pointer;
+                cursor: copy;
+                cursor: grab;
+
+                .oe_snippet_thumbnail {
+                    .oe_snippet_thumbnail_img {
+                        border: none;
+                    }
+                    .oe_snippet_thumbnail_title {
+                        border: none;
+                        padding: 0px;
+                    }
+
+                    &:hover .oe_snippet_thumbnail_img {
+                        .o-transition(transform, 200ms, ease);
+                        .scale(1.05);
+                    }
+                }
+
+                &.disable {
+                    .oe_snippet_thumbnail {
+                        background-color: rgba(255, 0, 0, 0.75);
+                    }
+                    .oe_snippet_thumbnail_img {
+                        opacity: 0.8;
+                    }
+                }
+            }
+        }
     }
+}
+.oe_snippet { // No root because can be drag and drop (and the helper is in the body)
+    position: relative;
+    width: 100px;
+    background-color: @o-we-color-normal;
+
+    > :not(.oe_snippet_thumbnail) {
+        display: none!important;
+    }
+
+    .oe_snippet_thumbnail {
+        width: 100%;
+
+        .oe_snippet_thumbnail_img {
+            width: 100%;
+            height: 0;
+            border: 1px solid @o-we-color-normal;
+            padding-bottom: 75%;
+            background-size: cover;
+            background-position: center center;
+            text-align: center;
+            overflow: hidden;
+        }
+        img.oe_snippet_thumbnail_img {
+            height: auto;
+            padding-bottom: 0;
+        }
+        .oe_snippet_thumbnail_title {
+            display: block;
+            border: 1px solid @o-we-color-normal;
+            padding: 5px;
+            font-size: 12px;
+            font-weight: 600;
+            text-shadow: none;
+            color: @o-we-color-text-normal;
+        }
+        &:hover .oe_snippet_thumbnail_title {
+            color: white;
+        }
+    }
+}
+
+// DROPZONES
+@-webkit-keyframes dropZoneInsert {
+    to {
+        background-color: fade(@odoo-brand-primary, 20%);
+    }
+}
+@keyframes dropZoneInsert {
+    to {
+        background-color: fade(@odoo-brand-primary, 20%);
+    }
+}
+#wrapwrap .oe_drop_zone {
+    background-color: fade(@odoo-brand-primary, 5%);
+    .o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate);
+
+    &.oe_insert {
+        @odoo-dropzone-size: 40px;
+        @odoo-dropzone-border-width: 2px;
+        @odoo-dropzone-border: @odoo-dropzone-border-width dashed @odoo-brand-primary;
+
+        z-index: 999;
+
+        border: @odoo-dropzone-border;
+        border-top: none;
+        border-bottom: none;
+
+        position: relative;
+        width: 100%;
+        height: @odoo-dropzone-size;
+        margin: -@odoo-dropzone-size/2 0;
+
+        .o-transition(margin, 400ms, linear);
+
+        &:after {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 50%;
+            border-bottom: @odoo-dropzone-border;
+            box-sizing: content-box;
+        }
+
+        &.oe_vertical {
+            border: 2px dashed @odoo-brand-primary;
+            border-left: none;
+            border-right: none;
+
+            width: @odoo-dropzone-size;
+            float: left;
+            margin: 0 -@odoo-dropzone-size/2;
+
+            &:after {
+                width: 50%;
+                height: 100%;
+                border-bottom: none;
+                border-right: @odoo-dropzone-border;
+            }
+        }
+    }
+}
+
+// MANIPULATORS
+#oe_manipulators {
+    @odoo-handle-edge-size: 8px;
+    @odoo-handle-border-width: 3px;
+
+    // SNIPPET MANIPULATORS
+    .oe_overlay {
+        .o-position-absolute();
+        z-index: 1002;
+        display: none;
+        height: 0;
+        background: transparent;
+        text-align: center;
+        .o-transition(opacity, 400ms, linear);
+        &.o_keypress {
+            opacity: 0;
+        }
+        &.oe_active {
+            display: block;
+        }
+
+        // OVERLAY OPTIONS
+        > .oe_overlay_options {
+            .o-position-absolute(@bottom: 0, @left: 0);
+
+            > .btn-group {
+                white-space: nowrap;
+
+                .btn {
+                    @o-overlay-option-size: 25px;
+
+                    display: inline-block;
+                    width: @o-overlay-option-size;
+                    height: @o-overlay-option-size;
+                    padding: 0;
+                    border: 1px solid @o-we-color-dark;
+                    line-height: @o-overlay-option-size;
+                    font-size: 11px;
+                    border-radius: 0;
+                    font-weight: 600;
+
+                    .o-transition(all, 400ms);
+                    color: @o-we-color-text-light;
+                    background-color: @o-we-color-light;
+                    &:hover {
+                        color: white;
+                        background-color: lighten(@o-we-color-dark, 10%);
+                    }
+
+                    &.oe_snippet_remove {
+                        color: white;
+                        background-color: @o-we-color-danger;
+                        border-color: darken(@o-we-color-danger, 20%);
+                        &:hover {
+                            background-color: darken(@o-we-color-danger, 20%);
+                        }
+                    }
+                }
+
+                // CUSTOMIZE MENU BUTTON
+                > .oe_options {
+                    .btn {
+                        width: auto;
+                        padding: 0 25px 0 5px;
+                        background-color: @o-we-color-dark;
+                        text-transform: uppercase;
+                        &:hover, &:active, &:focus {
+                            background-color: lighten(@o-we-color-dark, 5%);
+                            border-color: lighten(@o-we-color-dark, 10%);
+                            color: white;
+                        }
+                        &:active, &:focus, &:active:focus {
+                            outline: none;
+                        }
+                        &:before, &:after {
+                            content: "";
+                            width: 7px;
+                            height: 2px;
+                            background-color: @o-we-color-text-light;
+                            .o-position-absolute(46%);
+                            .o-transition(all, 0.3s);
+                        }
+                        &:before {
+                            right: 9px;
+                            .rotate(45deg);
+                        }
+                        &:after {
+                            right: 5px;
+                            .rotate(-45deg);
+                        }
+                    }
+                    // Open menu
+                    &.open .btn {
+                        background-color: @o-we-color-light;
+                        &:before, &:after {
+                            width: 9px;
+                        }
+                        &:before {
+                            right: 10px;
+                            transform: translateX(5px) rotate(-45deg);
+                        }
+                        &:after {
+                            .rotate(45deg);
+                        }
+                    }
+
+                    // CUSTOMIZE MENU
+                    .dropdown-menu {
+                        margin: -1px 0 0 0;
+                        padding: 0;
+                        border: 1px solid @o-we-color-dark;
+                        border-radius: 0;
+                        background-color: @o-we-color-light;
+                        a {
+                            color: @o-we-color-text-light;
+                            font-weight: 600;
+                            font-size: 12px;
+                            padding: 5px 20px;
+                        }
+
+                        > li {
+                            position: relative;
+                            &:hover {
+                                background-color: fadeOut(@o-we-color-dark, 50%);
+                                > a {
+                                    color: white;
+                                    background: transparent;
+                                    cursor: pointer;
+                                }
+                                > .dropdown-menu {
+                                    display: block;
+                                    left: 100%;
+                                    top: 0;
+                                }
+                            }
+                            &.dropdown-submenu:before {
+                                .o-position-absolute(@top: 10px, @right: 10px);
+                                .o-caret-right(3px);
+                                border-left-color: @o-we-color-text-light;
+                            }
+                            &.divider {
+                                background-color: @o-we-color-divider;
+                                margin: 0;
+                            }
+                            &.active > a {
+                                color: white;
+                                background-color: fadeOut(@o-we-color-dark, 50%);
+                                &:before {
+                                    .o-position-absolute(@top: 5px, @left: 5px);
+                                    content: "\f00c";
+                                    font-family: "FontAwesome";
+                                    color: @odoo-brand-optional;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &.o_top_cover > .oe_overlay_options {
+            bottom: auto;
+            top: @odoo-handle-border-width;
+            right: @odoo-handle-border-width;
+        }
+
+        // HANDLES
+        > .oe_handles {
+            @o-handles-offset-to-hide: 10000px;
+            .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
+
+            > .oe_handle {
+                @o-handle-size: 18px;
+
+                opacity: 0.5;
+                .o-transition(opacity, 400ms);
+                &:hover {
+                    opacity: 0.9;
+                }
+                border: 0 dashed black;
+
+                &:after {
+                    display: block;
+                    width: @o-handle-size;
+                    height: @o-handle-size;
+                    border: solid 1px rgba(0, 0, 0, 0.2);
+                    line-height: @o-handle-size - 2;
+                    font-size: 14px;
+                    font-family: FontAwesome;
+                    background-color: @o-we-color-light;
+                    color: @o-we-color-text-light;
+                }
+                &:hover:after {
+                    background-color: @o-we-color-dark;
+                    color: white;
+                    box-shadow: 0 0 5px 3px rgba(255,255,255,0.7);
+                }
+                &.w:after, &.e:after {
+                    content: "\f07e";
+                }
+                &.s:after, &.n:after {
+                    content: "\f07d";
+                }
+
+                &.w {
+                    border-left-width: @odoo-handle-border-width;
+                    cursor: e-resize;
+                    width: @odoo-handle-edge-size;
+                    .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
+                
+                    &:after {
+                        .o-position-absolute(@top: 50%, @left: -@odoo-handle-border-width);
+                        margin-top: -@o-handle-size/2;
+                    }
+                }
+                &.e {
+                    border-right-width: @odoo-handle-border-width;
+                    cursor: w-resize;
+                    width: @odoo-handle-edge-size;
+                    .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto);
+                
+                    &:after {
+                        .o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width);
+                        margin-top: -@o-handle-size/2;
+                    }
+                }
+                &.n {
+                    border-top-width: @odoo-handle-border-width;
+                    cursor: s-resize;
+                    height: @odoo-handle-edge-size;
+                    .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
+
+                    &:after {
+                        .o-position-absolute(@left: 50%, @top: -@odoo-handle-border-width);
+                        margin-left: -@o-handle-size/2;
+                    }
+                }
+                &.s {
+                    border-bottom-width: @odoo-handle-border-width;
+                    cursor: n-resize;
+                    height: @odoo-handle-edge-size;
+                    .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
+
+                    &:after {
+                        .o-position-absolute(@left: 50%, @bottom: -@odoo-handle-border-width);
+                        margin-left: -@o-handle-size/2;
+                    }
+                }
+
+                // SIZE HANDLERS
+                &.size {
+                    @o-handle-size-height: 15px;
+
+                    height: 0;
+                    background: transparent;
+                    .o-position-absolute(@bottom: -@o-handles-offset-to-hide + @o-handle-size-height, @left: 50%);
+                    width: 250px;
+                    margin-left: -125px;
+
+                    > .oe_handle_button {
+                        display: block;
+                        width: 100px;
+                        height: @o-handle-size-height;
+                        padding-top: 2px;
+                        font-weight: 600;
+                        font-size: 9px;
+                        text-transform: uppercase;
+                        background-color: @o-we-color-light;
+                        color: @o-we-color-text-light;
+                        &:hover {
+                            background-color: @o-we-color-dark;
+                            color: white;
+                        }
+                        &.auto_size {
+                            cursor: pointer;
+                            float: left;
+                        }
+                        &.size {
+                            cursor: row-resize;
+                            float: right;
+                        }
+                    }
+                }
+
+                &.readonly {
+                    cursor: auto !important;
+
+                    &:after, &.size {
+                        display: none !important;
+                    }
+                    &:hover {
+                        opacity: 0.5;
+                    }
+                }
+            }
+        }
+
+        // HANDLERS ICONS
+        &.block-w-left .w:after {
+            content: "" !important;
+        }
+        &.block-w-right .w:after {
+            content: "" !important;
+        }
+        &.block-w-left.block-w-right .w:after {
+            display: none !important;
+        }
+        &.block-e-left .e:after {
+            content: "" !important;
+        }
+        &.block-e-right .e:after {
+            content: "" !important;
+        }
+        &.block-e-left.block-e-right .e:after {
+            display: none !important;
+        }
+        &.block-s-top .s:after {
+            content: "" !important;
+        }
+        &.block-s-bottom .s:after {
+            content: "" !important;
+        }
+        &.block-n-top .n:after {
+            content: "" !important;
+        }
+        &.block-n-bottom .n:after {
+            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,
+.block-s-bottom .s,
+.block-n-top .n,
+.block-n-bottom .n,
+.block-w-left .w,
+.block-e-right .e {
     &:before {
-      right: 21px;
-      .rotate(45deg);
+        font-size: 10px;
     }
-    &: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;
+    height: @odoo-navbar-height;
+    top: 0 !important;
+    left: 0 !important;
+    padding: 0;
+    margin: 0 0 0 @o-we-sidebar-width;
+    background-color: @o-we-color-dark;
+    border-radius: 0;
+    border-width: 0 1px;
+    width: auto;
+    text-align: center;
+    box-shadow: none;
+    .popover-content {
+        height: @odoo-navbar-height;
+        .btn {
+            height: @odoo-navbar-height;
+            border: none;
+            border-radius: 0;
+            background-color: @o-we-color-dark;
+            color: @o-we-color-text-normal;
+            border-top: 2px solid transparent;
+            .o-transition(all, 0.3s);
+            &:hover {
+                border-top: 2px solid @o-we-color-text-normal;
+                color: @o-we-color-text-normal;
+            }
+        }
+        .btn.active {
+            border-top: 2px solid white;
+            background-color: @o-we-color-dark;
+            color: @o-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: @o-we-color-darker;
+            color: white;
+            box-shadow: none;
+        }
+        .dropdown-menu {
+            margin: 0;
+            border-radius: 0;
+            background-color: @o-we-color-darker;
+            > li > a {
+                width: 100%;
+                color: @o-we-color-text-light;
+                &:hover {
+                    background-color: @o-we-tab-active-bg;
+                    color: white;
+                }
+
+                > i {
+                    visibility: hidden;
+                }
+                &.checked > i {
+                    visibility: visible;
+                }
+            }
+        }
+        #colors_preview {
+            padding: 4px;
+            border-radius: 2px;
+            border: 1px solid #989898;
+            border-color: fadeOut(@o-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;
+        }
+
+        // COLORPICKER
+        .note-color {
+            .dropdown-toggle {
+                width: auto;
+            }
+            .o_foreground_toggle > button:before {
+                font-family: FontAwesome;
+                content: '\f1fc';
+            }
+            .o_background_toggle > button:before {
+                font-family: FontAwesome;
+                content: '\f0c3';
+            }
+
+            border: 1px solid @o-we-color-divider;
+            border-width: 0 1px;
+            .dropdown-menu {
+                min-width: 250px!important;
+                padding: 0!important;
+            }
         }
-      }
     }
-    #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;
-  }
+table.colorpicker {
+    width: 100%;
+    td {
+        padding: 0 2px 2px 0;
+        > button {
+            width: 100%;
+            border: 1px solid black;
+            padding: 0;
+            &::after {
+                content: "A";
+                font-weight: bold;
+                vertical-align: sub;
+            }
+        }
+    }
 }
-.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{
+.colorpicker {
+    background-color: @o-we-color-dark!important;
+
+    .o_colorpicker_sections {
+        border: 1px solid darken(@o-we-color-dark, 12%);
+        border-width: 1px 0 0;
+        font-size: 14px;
+
+        .o_colorpicker_section_menu {
+            width: 50px;
+            height: 100%;
+            float: left;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-align: center;
+            
+            > li {
+                display: block;
+                float: none;
+                margin: 0;
+                background-color: transparent;
+                > a {
+                    display: block;
+                    padding: 5px 10px!important;
+                    border-radius: 0;
+                    background-color: transparent;
+                    color: darken(@o-we-color-text-light, 10%);
+                    > i.fa {
+                        font-size: 20px;
+                    }
+
+                    &:focus, &:active, &:focus:active {
+                        outline: none;
+                    }
+                }
+                &:hover, &.active {
+                    > a {
+                        color: white;
+                    }
+                }
+                &.active > a {
+                    background-color: @o-we-tab-active-bg!important;
+                }
+            }
+        }
+        .o_colorpicker_section_tabs {
+            width: 200px;
+            height: 100%;
+            margin-left: 50px;
+            .tab-pane {
+                padding: 5px 10px;
+                background-color: @o-we-tab-active-bg;
+            }
+        }
+    }
+    .o_colorpicker_section {
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        > button {
+            position: relative;
+            display: block;
+            width: 100%;
+            height: 30px;
+            border: 1px solid @o-we-color-dark;
+            border-radius: 3px;
+            margin: 0 0 5px;
+            padding: 0 20px;
+            line-height: 28px;
+            font-size: 12px;
+            font-weight: bold;
+            text-align: left;
+            &:hover, &.selected {
+                box-shadow: 0px 0px 2px 2px @o-we-color-light;
+            }
+            &.selected:before {
+                content: "\f00c";
+                font-family: "FontAwesome";
+                color: @odoo-brand-optional;
+                .o-position-absolute(@top: 0, @left: 3px);
+                font-size: 13px;
+                line-height: 28px;
+            }
+
+            &:after {
+                content: "A";
+                .o-position-absolute(0, 0);
+                width: 25px;
+                text-align: center;
+                line-height: 28px;
+                font-weight: normal;
+            }
+
+            &[data-event="foreColor"] {
+                background-color: @o-we-color-normal;
+                &:after {
+                    background-color: fade(white, 30%);
+                }
+            }
+
+            &.o_small {
+                float: left;
+                width: auto;
+                min-width: 27px;
+                padding: 0;
+                margin-right: 5px;
+            }
+        }
+    }
+    .note-palette-title {
         padding: 10px 0px 10px 10px;
-        color: @we_color-text-light;
+        color: @o-we-color-text-light;
         font-weight: bold;
-        position: absolute;
-      }
-      .palette-reset{
-        text-align: right;
-        width: 100%;
+    }
+    .palette-reset {
+        .o-position-absolute(0, 0);
         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-color-reset {
+            font-size: 20px!important;
+            margin: 3px 0 0;
+            padding: 0;
+            &:hover {
+                background: transparent!important;
+                color: @o-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);
-  }
+    padding-top: @odoo-navbar-height!important;
+
+    #web_editor-top-edit {
+        background-color: @o-we-color-dark;
+        form.navbar-form {
+            right: 0;
+        }
+    }
+
+    &.editor_has_snippets {
+        .o-transition(padding-left, 400ms, @o-we-md-ease);
+        padding-left: @o-we-sidebar-width!important;
+
+        #oe_snippets {
+            left: 0;
+        }
+    }
 }
 
-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_inside_iframe {
+    background-color: @odoo-brand-secondary;
+
+    #editable_area {
+        font: inherit !important;
+        line-height: inherit !important;
+        color: inherit !important;
+
+        p {
+            margin: initial;
+        }
+        a, a:hover {
+            color: inherit;
+        }
+    }
+    &.editor_enable #wrapwrap {
+        height: 100%;
+        padding-top: @odoo-navbar-height;
+        > main {
+            height: 100%;
+            #editable_area {  
+                position: relative;
+                overflow: hidden;
+                max-width: 600px;
+                min-height: 100%;
+                margin: auto;
+
+                background-color: white;
+            }
+        }
+    }
+    .note-color-palette .colorpicker {
+        display: none;
     }
-  }
-  #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
index d72d63931bd..043dd0f404e 100644
--- a/addons/web_editor/static/src/less/web_editor.variables.less
+++ b/addons/web_editor/static/src/less/web_editor.variables.less
@@ -1,76 +1,77 @@
 
-// Fonts
-// =======================
-@we_font-default  : "Roboto", Roboto, sans-serif;
-@we_font-size-def : 14px;
+@o-we-color-dark: #2c2c36;
+@o-we-color-darker: darken(@o-we-color-dark, 2%);
+@o-we-color-divider: #33363e;
+@o-we-color-light: #4e525b;
+@o-we-color-normal: #50545d;
+@o-we-color-paper: #fbfbfd;
+@o-we-color-text-normal: #999999;
+@o-we-color-text-light: #d4d5d7;
+@o-we-color-danger: #e6586c;
 
-// 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;
+@o-we-sidebar-width: 210px;
 
-@we_color-paper    : #fbfbfd;
-@we_color-inactive : #646465;
+@o-we-tab-active-bg: #3D4048;
 
-@we_color-text-normal : #999999;
-@we_color-text-light  : #d4d5d7;
-@we_color-text-dark   : #505050;
+// Transitions
+@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
 
-@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;
+// Animations
+@-webkit-keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        .translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        .translate(0, 0);
+    }
+}
+@keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        .translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        .translate(0, 0);
+    }
+}
 
-@we_color-danger  : #e6586c;
-@we_color-success : #4ab980;
+@-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;
+    }
+}
 
-
-// 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;
+@-webkit-keyframes inputHighlighter {
+    from { background: @odoo-brand-optional; }
+    to   { width: 0; background: transparent; }
+}
+@keyframes inputHighlighter {
+    from { background: @odoo-brand-optional; }
+    to   { width: 0; background: transparent; }
+}
diff --git a/addons/web_planner/static/src/less/web_planner_common.less b/addons/web_planner/static/src/less/web_planner_common.less
index a716f5c420a..abc3d3122f3 100644
--- a/addons/web_planner/static/src/less/web_planner_common.less
+++ b/addons/web_planner/static/src/less/web_planner_common.less
@@ -48,7 +48,7 @@
 }
 
 // community
-#oe_main_menu_navbar {
+#oe_main_menu_navbar:not(.o_main_navbar) {
     .o_planner_systray {
         > .progress {
             margin-top: 10px;
diff --git a/addons/website/static/src/css/common.css b/addons/website/static/src/css/common.css
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
deleted file mode 100644
index c6f9b2d9add..00000000000
--- a/addons/website/static/src/css/website.css
+++ /dev/null
@@ -1,800 +0,0 @@
-@charset "UTF-8";
-/*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
- *
- * css for editor buttons, openerp widget included in the website and other
- * stuff must go to the editor.css
- *
- */
-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;
-}
-
-.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;
-}
-.o_ul_folded .o_ul_toggle_self:before, .o_ul_folded .o_ul_toggle_next:before {
-  content: "";
-}
-.o_ul_folded .o_ul_toggle_self.o_open, .o_ul_folded .o_ul_toggle_next.o_open {
-  left: 0em;
-}
-.o_ul_folded .o_ul_toggle_self.o_open:before, .o_ul_folded .o_ul_toggle_next.o_open:before {
-  content: "";
-}
-
-/* Extra Styles */
-h1.text-muted, h2.text-muted, h3.text-muted {
-  margin-top: 10px;
-}
-
-header a.navbar-brand.logo {
-  padding: 0 15px;
-}
-header a.navbar-brand img {
-  max-height: 50px;
-}
-
-hr {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-}
-
-/* ----- Snippets Styles ----- */
-.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;
-}
-
-/* ----- BOOTSTRAP FIX ----- */
-.container .container, .readable .container {
-  padding-left: 0;
-  padding-right: 0;
-  width: auto!important;
-}
-
-/* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
-.navbar.navbar-static-top {
-  margin-bottom: 0;
-}
-.navbar.navbar-static-top ul.nav > li.divider {
-  margin-top: 15px;
-  padding-top: 20px;
-  border-right: 1px solid grey;
-}
-
-/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
-html, body, #wrapwrap {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  height: 100%;
-}
-
-#wrapwrap {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-}
-#wrapwrap > * {
-  display: table-row;
-}
-#wrapwrap > main {
-  height: 100%;
-}
-#wrapwrap > footer {
-  height: 100%;
-  background: rgba(200, 200, 200, 0.1);
-}
-
-body > nav.navbar {
-  width: 100%;
-  position: absolute;
-  z-index: 10000;
-}
-
-@media (min-width: 767px) {
-  nav.navbar + #wrapwrap {
-    padding-top: 34px;
-  }
-}
-/* ----- BOOTSTRAP FIX ----- */
-@-moz-document url-prefix() {
-  .table .img-responsive {
-    width: 100%;
-  }
-}
-.navbar .nav > li > p {
-  margin-bottom: 0px;
-}
-
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-.nav-hierarchy {
-  padding-left: 16px;
-}
-
-/* -- Hack for removing double scrollbar from mobile preview -- */
-div#mobile-preview.modal {
-  overflow: hidden;
-}
-
-ul.nav-stacked > li > a {
-  padding: 2px 15px;
-}
-
-#customize-menu .dropdown-header {
-  text-transform: uppercase;
-}
-
-/* ---- 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) {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-  opacity: 0.5;
-}
-
-/* ---- END of PUBLISH ---- */
-::-moz-selection {
-  background: rgba(150, 150, 220, 0.3);
-}
-
-::selection {
-  background: rgba(150, 150, 220, 0.3);
-}
-
-.logo-img {
-  width: 220px;
-}
-
-.o_normalwhitespace {
-  white-space: normal;
-}
-
-.oe_demo {
-  position: relative;
-}
-.oe_demo img {
-  width: 100%;
-}
-.oe_demo 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;
-}
-.oe_demo div a {
-  color: white;
-}
-
-/* ---- SNIPPETS --- */
-.oe_img_bg {
-  background-size: cover;
-}
-
-.carousel, .parallax, .blockquote {
-  overflow: hidden;
-}
-
-@media (max-width: 400px) {
-  section, .parallax, .row, .hr, .blockquote {
-    height: auto !important;
-  }
-}
-.carousel-inner {
-  height: 100%;
-}
-.carousel-inner .item {
-  height: 100%;
-  background-size: cover;
-}
-
-.carousel .carousel-control {
-  cursor: pointer;
-}
-.carousel .carousel-control span {
-  top: 50%;
-  position: absolute;
-  margin-top: -8px;
-}
-.carousel .carousel-control.left {
-  left: -10px;
-}
-.carousel .carousel-control.left * {
-  position: absolute;
-  top: 50%;
-  z-index: 5;
-  right: 50%;
-}
-.carousel .carousel-control.right {
-  right: -10px;
-}
-.carousel .carousel-control.right * {
-  position: absolute;
-  top: 50%;
-  z-index: 5;
-  left: 50%;
-}
-
-.quotecarousel {
-  padding-bottom: 16px;
-}
-
-.hr {
-  padding: 4px 0;
-}
-
-.o_image_floating {
-  width: 40%;
-  margin: 4px;
-}
-.o_image_floating div.o_container {
-  position: relative;
-}
-.o_image_floating div.o_container mark {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(86, 61, 124, 0.25);
-}
-.o_image_floating div.o_container mark 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;
-}
-
-/* gallery */
-.o_gallery.o_grid .img, .o_gallery.o_masonry .img {
-  width: 100%;
-}
-.o_gallery.o_grid.o_spc-none div.row {
-  margin: 0;
-}
-.o_gallery.o_grid.o_spc-none div.row > * {
-  padding: 0;
-}
-.o_gallery.o_grid.o_spc-small div.row {
-  margin: 5px 0;
-}
-.o_gallery.o_grid.o_spc-small div.row > * {
-  padding: 0 5px;
-}
-.o_gallery.o_grid.o_spc-medium div.row {
-  margin: 10px 0;
-}
-.o_gallery.o_grid.o_spc-medium div.row > * {
-  padding: 0 10px;
-}
-.o_gallery.o_grid.o_spc-big div.row {
-  margin: 15px 0;
-}
-.o_gallery.o_grid.o_spc-big div.row > * {
-  padding: 0 15px;
-}
-.o_gallery.o_masonry.o_spc-none div.col {
-  padding: 0;
-}
-.o_gallery.o_masonry.o_spc-none div.col > img {
-  margin: 0 !important;
-}
-.o_gallery.o_masonry.o_spc-small div.col {
-  padding: 0 5px;
-}
-.o_gallery.o_masonry.o_spc-small div.col > img {
-  margin: 5px 0 !important;
-}
-.o_gallery.o_masonry.o_spc-medium div.col {
-  padding: 0 10px;
-}
-.o_gallery.o_masonry.o_spc-medium div.col > img {
-  margin: 10px 0 !important;
-}
-.o_gallery.o_masonry.o_spc-big div.col {
-  padding: 0 15px;
-}
-.o_gallery.o_masonry.o_spc-big div.col > 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%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: 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;
-}
-div.carousel .carousel-indicators .active {
-  background-color: grey;
-}
-div.carousel span.carousel-img img, div.carousel div.carousel-content {
-  max-height: 95%;
-  padding: 10px;
-}
-div.carousel div.carousel-content {
-  background-color: black;
-  color: white;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.parallax {
-  background-size: cover;
-}
-.parallax > div {
-  position: relative;
-  display: table;
-  width: 100%;
-  min-height: 200px;
-}
-.parallax > div > div {
-  display: table-cell;
-  vertical-align: middle;
-  padding: 32px 0;
-}
-
-/* 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;
-}
-
-/* Misc */
-.texttop {
-  vertical-align: top;
-}
-
-table.well tr th {
-  text-align: right;
-  padding-right: 10px;
-}
-table.well tr td {
-  padding-right: 5px;
-}
-
-.logo-img {
-  width: 220px;
-}
-
-.oe_demo {
-  position: relative;
-}
-.oe_demo img {
-  width: 100%;
-}
-.oe_demo 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;
-}
-.oe_demo div a {
-  color: white;
-}
-
-.oe_template_fallback {
-  -moz-column-count: 3;
-  -webkit-column-count: 3;
-  column-count: 3;
-}
-
-.oe_website_login_container {
-  width: 400px;
-  margin: 40px auto;
-}
-
-.oe_website_overflow_ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.oe_website_spinner {
-  width: 121px;
-}
-.oe_website_spinner input {
-  text-align: center;
-  min-width: 50px;
-}
-
-div.carousel .container > .carousel-caption {
-  position: absolute;
-  right: 50%;
-  left: 50%;
-  bottom: 20px;
-}
-div.carousel .container > .carousel-caption > div {
-  position: absolute;
-  text-align: left;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
-  bottom: 20px;
-}
-div.carousel .container > .carousel-image {
-  top: 5%;
-  bottom: 5%;
-  position: absolute;
-  max-height: 90%;
-  margin: 0 auto;
-}
-div.carousel .item.text_image .container > .carousel-caption {
-  left: 10%;
-}
-div.carousel .item.text_image .container > .carousel-caption > div {
-  right: 50%;
-  margin-right: -20%;
-  max-width: 550px;
-}
-div.carousel .item.text_image .container > .carousel-image {
-  right: 10%;
-  left: 50%;
-}
-div.carousel .item.image_text .container > .carousel-caption {
-  right: 10%;
-}
-div.carousel .item.image_text .container > .carousel-caption > div {
-  left: 50%;
-  margin-left: -20%;
-  max-width: 550px;
-}
-div.carousel .item.image_text .container > .carousel-image {
-  right: 50%;
-  left: 10%;
-}
-div.carousel .item.text_only .container > .carousel-caption {
-  left: 10%;
-  right: 10%;
-  top: 10%;
-  bottom: auto;
-}
-div.carousel .item.text_only .container > .carousel-caption > div {
-  text-align: center;
-  background: transparent;
-  bottom: auto;
-  width: 100%;
-}
-div.carousel .item.text_only .container > .carousel-image {
-  display: none !important;
-}
-
-/* ---- Menu nav bar ---- {{{ */
-#oe_main_menu_navbar {
-  position: fixed;
-  min-height: 34px;
-  z-index: 1001;
-  -moz-border-radius: 0px;
-  -webkit-border-radius: 0px;
-  border-radius: 0px;
-  margin-bottom: 0px;
-}
-#oe_main_menu_navbar li a, #oe_main_menu_navbar li button {
-  padding: 4px 8px 4px 8px;
-  margin-top: 2px;
-  font-size: 13px;
-}
-#oe_main_menu_navbar .navbar-nav.navbar-right:last-child {
-  margin-right: 0 !important;
-}
-
-/* ---- footer style ---- {{{ */
-#footer div.row {
-  word-wrap: break-word;
-}
-.container nav#oe_main_menu_navbar {
-  position: inherit;
-}
-
-.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;
-}
-
-.note-editor button {
-  height: 30px;
-}
-
-.o_hidden {
-  display: none !important;
-}
-
-#PlannerDialog {
-  top: 35px;
-  -webkit-box-shadow: 0 3px 9px #666666;
-  box-shadow: 0 3px 9px #666666;
-}
-
-.tour .popover-navigation {
-  margin-left: 13px;
-  margin-bottom: 8px;
-}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
deleted file mode 100644
index 8b03d1d86cd..00000000000
--- a/addons/website/static/src/css/website.sass
+++ /dev/null
@@ -1,656 +0,0 @@
-@charset "utf-8"
-
-@import "common"
-
-/*
- *       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
- *
- * css for editor buttons, openerp widget included in the website and other
- * stuff must go to the editor.css
- *
- */
-
-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
-
-.o_ul_toggle_self, .o_ul_toggle_next
-    display: none
-.o_ul_folded
-    .o_close
-        display: none !important
-    .o_ul_toggle_self, .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
-        &:before
-            content: "\f0da"
-        &.o_open
-            left: 0em
-            &:before
-                content: "\f0d7"
-
-/* Extra Styles */
-
-h1.text-muted, h2.text-muted, h3.text-muted
-    margin-top: 10px
-
-header
-    a.navbar-brand.logo
-        padding: 0 15px
-    a.navbar-brand
-        img
-            max-height: 50px
-
-hr
-    margin-bottom: 10px
-    padding-bottom: 10px
-
-/* ----- Snippets Styles ----- */
-
-.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
-
-/* ----- BOOTSTRAP FIX ----- */
-
-.container, .readable
-    .container
-        padding-left: 0
-        padding-right: 0
-        width: auto!important
-
-/* ----- BOOTSTRAP HACK FOR 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
-
-/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
-
-html,body, #wrapwrap
-    +box-sizing(border-box)
-    height: 100%
-
-#wrapwrap
-    display: table
-    table-layout: fixed
-    width: 100%
-    > *
-        display: table-row
-    > main
-        height: 100%
-    > footer
-        height: 100%
-        background: rgba(200, 200, 200, 0.1)
-body > nav.navbar
-    width: 100%
-    position: absolute
-    z-index: 10000
-@media (min-width: 767px)
-    nav.navbar + #wrapwrap
-        padding-top: 34px
-
-/* ----- BOOTSTRAP FIX ----- */
-
-@-moz-document url-prefix()
-    .table .img-responsive
-        width: 100%
-
-.navbar .nav > li > p
-    margin-bottom: 0px
-
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-
-.nav-hierarchy
-    padding-left: 16px
-
-/* -- Hack for removing double scrollbar from mobile preview -- */
-div#mobile-preview.modal
-    overflow: hidden
-
-ul.nav-stacked > li > a
-    padding: 2px 15px
-
-#customize-menu .dropdown-header
-    text-transform: uppercase
-
-/* ---- PUBLISH ---- */
-.css_published
-    .btn-danger, .css_publish
-        display: none
-.css_unpublished
-    .btn-success, .css_unpublish
-        display: none
-
-[data-publish='off']>*:not(.css_options)
-    +opacity(0.5)
-
-/* ---- END of PUBLISH ---- */
-
-@include selection
-    background: rgba(150, 150, 220, 0.3)
-
-.logo-img
-    width: 220px
-
-.o_normalwhitespace
-    white-space: normal
-
-.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
-
-
-/* ---- SNIPPETS --- */
-
-.oe_img_bg
-    background-size: cover
-
-.carousel, .parallax, .blockquote
-    overflow: hidden
-
-@media (max-width: 400px)
-    section, .parallax, .row, .hr, .blockquote
-        height: auto !important
-
-.carousel-inner
-    height: 100%
-    .item
-        height: 100%
-        background-size: cover
-.carousel
-    .carousel-control
-        cursor: pointer
-        span
-            top: 50%
-            position: absolute
-            margin-top: -8px
-        &.left
-            left: -10px
-            *
-                position: absolute
-                top: 50%
-                z-index: 5
-                right: 50%
-        &.right
-            right: -10px
-            *
-                position: absolute
-                top: 50%
-                z-index: 5
-                left: 50%
-
-.quotecarousel
-    padding-bottom: 16px
-
-.hr
-    padding: 4px 0
-
-
-.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,.25)
-            a
-                color: white
-    &.o_hide_link div.o_container mark
-        display: none
-    &.o_margin_s
-        margin-bottom: 4px
-        &.pull-right
-            margin-left: 8px
-        &.pull-left
-            margin-right: 8px
-    &.o_margin_m
-        margin-bottom: 8px
-        &.pull-right
-            margin-left: 12px
-        &.pull-left
-            margin-right: 12px
-    &.o_margin_l
-        margin-bottom: 12px
-        &.pull-right
-            margin-left: 16px
-        &.pull-left
-            margin-right: 16px
-    &.o_margin_xl
-        margin-bottom: 24px
-        &.pull-right
-            margin-left: 32px
-        &.pull-left
-            margin-right: 32px
-
-
-/* gallery */
-
-.o_gallery
-    &.o_grid, &.o_masonry
-        .img
-            width: 100%
-    &.o_grid
-        &.o_spc-none
-            div.row
-                margin: 0
-                > *
-                    padding: 0
-        &.o_spc-small
-            div.row
-                margin: 5px 0
-                > *
-                    padding: 0 5px
-        &.o_spc-medium
-            div.row
-                margin: 10px 0
-                > *
-                    padding: 0 10px
-        &.o_spc-big
-            div.row
-                margin: 15px 0
-                > *
-                    padding: 0 15px
-    &.o_masonry
-        &.o_spc-none
-            div.col
-                padding: 0
-                > img
-                    margin: 0 !important
-        &.o_spc-small
-            div.col
-                padding: 0 5px
-                > img
-                    margin: 5px 0 !important
-        &.o_spc-medium
-            div.col
-                padding: 0 10px
-                > img
-                    margin: 10px 0 !important
-        &.o_spc-big
-            div.col
-                padding: 0 15px
-                > img
-                    margin: 15px 0 !important
-    &.o_grid
-        &.size-auto .row
-            height: auto
-        &.size-small .row
-            height: 100px
-        &.size-medium .row
-            height: 250px
-        &.size-big .row
-            height: 400px
-        &.size-small, &.size-medium, &.size-big
-            .img
-                height: 100%
-    &.o_nomode
-        &.o_spc-none
-            .img
-                padding: 0
-        &.o_spc-small
-            .img
-                padding: 5px
-        &.o_spc-medium
-            .img
-                padding: 10px
-        &.o_spc-big
-            .img
-                padding: 15px
-
-    &.o_slideshow .carousel ul.carousel-indicators li
-        border: 1px solid #aaa
-    .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%
-    .item
-        padding-bottom: 64px
-    img
-        max-height: 100%
-        max-width: 100%
-        margin: auto
-        position: relative
-        top: 50%
-        -webkit-transform: translateY(-50%)
-        -ms-transform: translateY(-50%)
-        transform: translateY(-50%)
-    ul.carousel-indicators
-        display: block
-        height: auto
-        padding: 0
-        border-width: 0
-        position: absolute
-        bottom: 0
-        > *
-            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
-        > *: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")
-    .carousel-control.left, .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
-
-/* 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
-    .text-muted
-        color: #ddd
-
-.oe_blue_light
-    background-color: #41b6ab
-    color: white
-    .text-muted
-        color: #ddd
-
-.oe_blue
-    background-color: #34495e
-    color: white
-
-.oe_orange
-    background-color: #f05442
-    color: white
-    .text-muted
-        color: #ddd
-
-.oe_purple
-    background-color: #b163a3
-    color: white
-    .text-muted
-        color: #ddd
-
-.oe_red
-    background-color: #9C1b31
-    color: white
-    .text-muted
-        color: #ddd
-
-.oe_none
-    background-color: #FFFFFF
-
-.oe_yellow
-    background-color: #A2A51B
-
-.oe_green
-    background-color: #149F2C
-
-/* Misc */
-
-.texttop
-    vertical-align: top
-
-table.well tr
-    th
-        text-align: right
-        padding-right: 10px
-    td
-        padding-right: 5px
-
-.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_template_fallback
-    @include column-count(3)
-
-.oe_website_login_container
-    width: 400px
-    margin: 40px auto
-
-.oe_website_overflow_ellipsis
-    white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
-
-.oe_website_spinner
-    width: 121px
-    input
-        text-align: center
-        min-width: 50px
-
-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
-            > .carousel-image
-                right: 10%
-                left: 50%
-    .item.image_text
-        .container
-            > .carousel-caption
-                right: 10%
-                > div
-                    left: 50%
-                    margin-left: -20%
-                    max-width: 550px
-            > .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%
-            > .carousel-image
-                display: none !important
-
-/* ---- Menu nav bar ---- {{{ */
-
-#oe_main_menu_navbar
-    position: fixed
-    min-height: 34px
-    z-index: 1001
-    +border-radius(0px)
-    margin-bottom: 0px
-    li a, li button
-        padding: 4px 8px 4px 8px
-        margin-top: 2px
-        font-size: 13px
-    .navbar-nav.navbar-right:last-child
-        margin-right: 0 !important
-
-/* ---- footer style ---- {{{ */
-#footer div.row
-    word-wrap: break-word
-
-.container
-    nav#oe_main_menu_navbar
-        position: inherit
-
-.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
-
-.note-editor button
-    height: 30px
-
-.o_hidden
-    display: none !important
-
-#PlannerDialog
-    top: 35px
-    -webkit-box-shadow: 0 3px 9px #666666
-    box-shadow: 0 3px 9px #666666
-
-.tour
-    .popover-navigation
-        margin-left: 13px
-        margin-bottom: 8px
diff --git a/addons/website/static/src/less/import_bootstrap.less b/addons/website/static/src/less/import_bootstrap.less
deleted file mode 100644
index cbd46a7afcf..00000000000
--- a/addons/website/static/src/less/import_bootstrap.less
+++ /dev/null
@@ -1 +0,0 @@
-@import "bootstrap";
diff --git a/addons/website/static/src/less/website.edit_mode.less b/addons/website/static/src/less/website.edit_mode.less
index 1835f3ff47b..0f3d2e726c6 100644
--- a/addons/website/static/src/less/website.edit_mode.less
+++ b/addons/website/static/src/less/website.edit_mode.less
@@ -1,153 +1,148 @@
-.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;
+
+@-webkit-keyframes dragAndDrop {
+    0% {
+        top: -10px;
+        left: -20px;
+        .rotate(0);
+        opacity: 0;
+    }
+    50% {
+        top: -10px;
+        left: -20px;
+        .rotate(0);
+        opacity: 0;
+    }
+    100% {
+        top: 30px;
+        left: 20px;
+        .rotate(45deg);
+        opacity: 1;
     }
-  }
-  &: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;
+@keyframes dragAndDrop {
+    0% {
+        top: -10px;
+        left: -20px;
+        .rotate(0);
+        opacity: 0;
+    }
+    50% {
+        top: -10px;
+        left: -20px;
+        .rotate(0);
+        opacity: 0;
+    }
+    100% {
+        top: 30px;
+        left: 20px;
+        .rotate(45deg);
+        opacity: 1;
+    }
 }
 
-/* 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;
+.o_editable {
+    &:not(:empty), &[data-oe-type] {
+        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
+            box-shadow: @odoo-brand-primary 0 0 5px 2px inset;
+        }
+    }
+    &:focus, &[data-oe-type] {
+        min-height: 0.8em;
+        min-width: 8px;
+    }
+    &.o_is_inline_editable {
+        display: inline-block;
+    }
+    .btn, &.btn {
+        .user-select(auto);
+        cursor: text!important;
+    }
+    /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
+    &[placeholder]:empty:not(:focus):before {
+        content: attr(placeholder);
+        opacity: 0.3;
+    }
+
+    &.oe_structure.oe_empty, &[data-oe-type=html] {
+        > p:empty:only-child {
+            color: #aaa;
+        }
+    }
+    &.oe_structure.oe_empty, &[data-oe-type=html] {
+        &:empty,
+        > .oe_drop_zone.oe_insert:only-child,
+        > p:empty:only-child {
+            position: relative;
+            &:before {
+                display: block;
+                font-family: FontAwesome;
+                content: "\f061";
+                color: @odoo-brand-primary;
+                font-size: 30px;
+
+                position: absolute;
+                z-index: 1031;
+                .o-animation(dragAndDrop, 1s, linear, 0s, infinite, alternate);
+            }
+            &:focus:before { display: none; }
+        }
+    }
+}
+.editor_enable [data-oe-readonly]:hover {
+    cursor: default;
 }
 
-/* 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;
+/* Prevent the text contents of draggable elements from being selectable. */
+[draggable] {
+    .user-select(none);
 }
 
 .oe_editable:focus,
 .css_editable_hidden,
-.editor_enable .css_editable_mode_hidden{
-    outline: none !important
+.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
+.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
+[data-oe-type=html].oe_no_empty:empty {
+    height: 16px!important;
+    &:before {
+        content: ''!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}
-  }
+// EDITOR BAR
+table.editorbar-panel {
+    cursor: pointer;
+    width: 100%;
+    td { border: 1px solid #aaa}
+    td.selected { background-color: #b1c9d9}
 }
-#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
+.link-style {
+    .dropdown > .btn {
+        min-width: 160px;
     }
-  }
-}
-
-.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;
+    .link-style {
+        display: none;
+    }
+    li {
+        text-align: center;
+        label {
+            width: 100px;
+            margin: 0 5px;
+        }
+    }
+    .col-sm-2 > * {
+        line-height: 2em;
     }
-  }
-  .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;
+.note-editable .fa {
+    cursor: pointer;
 }
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index e67201d8bf7..fcca905eeca 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -1,855 +1,353 @@
-
-// 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;
+// MODALS
+body .modal {
+    a {
+        &:focus, &:active, &:focus:active {
+            outline: none!important;
         }
-        .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;
+    }
+
+    &.o_website_modal {
+        font-family: "Roboto", Roboto, sans-serif;
+
+        .modal-content {
+            border-radius: 0;
+            background-color: @o-we-color-paper;
+            .modal-header .o_subtitle {
+                margin-left: 10px;
+            }
+            .modal-body {
+                .o_modal_header {
+                    .o-webclient-padding(@top: 10px, @bottom: 10px);
+                    .clearfix();
+                }
+            }
+            .modal-footer {
+                text-align: left;
+
+                .btn {
+                    border-radius: 0;
+
+                    &.btn-primary {
+                        .button-variant(white, @odoo-brand-optional, @odoo-brand-optional);
+                        text-transform: uppercase;
+                    }
+                    &.btn-default {
+                        .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+                        text-transform: uppercase;
+                    }
+                    &.btn-link {
+                        .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+                    }
+                }
+            }
         }
-      }
+        
+        @media (min-width: @screen-sm-min) {
+            .modal-dialog {
+                height: 100%;
+                padding: 30px 0;
+                margin: 0 auto;
 
-      .modal-body {
-        padding: @wb_modal-body-padding;
-      }
+                .modal-content {
+                    max-height: 100%;
+                    .o-flex-display();
+                    .o-flex-flow(column, nowrap);
 
-      .modal-footer {
-        .border-radius(0 0 2px 2px);
-        padding: @wb_modal-footer-padding;
-        background: @wb_modal-footer-bg;
-      }
+                    .modal-header, .modal-footer {
+                        .o-flex(0, 0, auto);
+                    }
 
-    }
-  }
-}
-
-@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;
+                    .modal-body {
+                        overflow: auto;
+                    }
+                }
+            }
         }
-      }
     }
-    .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;
-    }
-  }
-}
 
+    // MOBILE PREVIEW
+    &.oe_mobile_preview {
+        text-align: center;
 
-// oe_mobile_preview
-// =========================
+        .modal-dialog {
+            display: inline-block;
+            width: auto;
 
-body .modal.website_modal.oe_mobile_preview .modal-dialog .modal-content {
-  .modal-body{
-    padding: 0;
-  }
-}
+            .close {
+                color: lightgray;
+            }
 
-// SEO CONFIGURATION
-// TODO: adapt to new style
-// ==================================
+            .modal-content {
+                background-color: black;
+                color: lightgray;
+                border: 3px outset gray;
+                border-radius: 20px;
+                box-shadow: 0 0 100em 0 white;
 
-.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;
+                .modal-header {
+                    border: none;
+                    cursor: pointer;
+                }
+
+                .modal-body {
+                    padding: 15px;
+
+                    @mobile-preview-width: 320px;
+                    @mobile-preview-height: 530px;
+
+                    > iframe {
+                        display: block;
+                        width: @mobile-preview-width + 15;
+                        height: @mobile-preview-height;
+                        max-height: 100%;
+                        border: none;
+
+                        .o-transition(all, 400ms);
+                    }
+
+                    &.o_invert_orientation > iframe {
+                        width: @mobile-preview-height + 15;
+                        height: @mobile-preview-width;
+                    }
+                }
+
+                .modal-footer {
+                    display: none;
+                }
+            }
         }
-      }
     }
-    .s{
-      color: #444;
-      max-width: 42em;
+
+    // ADD NEW PAGE MODAL
+    &#o_website_add_page_modal {
+        text-align: center;
+        line-height: 100%;
+
+        .modal-dialog {
+            line-height: 100vh;
+            margin: 0 auto;
+            ul {
+                display: inline-block;
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                vertical-align: middle;
+                line-height: 1;
+                list-style: none;
+                text-align: center;
+
+                li {
+                    opacity: 0;
+                    .animation(fadeInDownSmall 1s forwards);
+                    display: inline-block;
+                    width: 33%;
+                    margin: 2em 0;
+                    padding: 0 15px;
+                    
+                    a {
+                        display: block;
+                        font-size: 34px;
+                        margin: auto;
+
+                        i {
+                            width: 110px;
+                            height: 110px;
+                            border: 3px solid lighten(#2C2C36, 10%);
+                            border-radius: 100%;
+                            line-height: 104px;
+                            background-color: #2C2C36;
+                            color: white;
+                            
+                            .o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1));
+                        }
+                        p {
+                            color: white;
+                            margin-top: 0.7em;
+                            font-size: 0.5em;
+                        }
+
+                        &:hover, &:focus {
+                            text-decoration: none;
+                            i {
+                                border-color: #1cc1a9;
+                                box-shadow: 0 0 10px rgba(28, 193, 169, 0.46);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        ~ .modal-backdrop {
+            opacity: 0.8;
+        }
     }
-    li.oe_seo_preview_g .kv, li.oe_seo_preview_g .slp {
-      display: block;
-      margin-bottom: 1px;
+
+    // SEO CONFIGURATION
+    &.oe_seo_configuration {
+        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 {
+                &, .st {
+                    line-height: 1.24;
+                }
+                .kv, .slp {
+                    display: block;
+                    margin-bottom: 1px;
+                }
+                .f {
+                    color: #666;
+                    margin-bottom: 1px;
+                    cite {
+                        color: #006621;
+                        font-style: normal;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
     }
-    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,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');
-      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;
-      }
-    }
-  }
+// LOGIN FORM
+.oe_login_form {
+    max-width: 300px;
+    position: relative;
+    margin: 50px auto;
 }
 
 // CUSTOMIZE THEME
-// TODO: adapt to new style
-// ==================================
-
 #theme_error {
-  background: #ffc;
+    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 {
+    overflow: visible;
+    z-index: 1020;
     display: block;
-    text-align: center;
-    > div, > img {
-      border: 1px solid #fff;
-      line-height: 30px;
-      font-size: 0.9em;
-      margin: 2px 4px;
+    .modal-dialog {
+        .o-position-absolute(@odoo-navbar-height + 10, 10px);
+        width: auto;
+        margin: 0;
+        font-family: Roboto;
     }
-    &.checked > div, &.checked > img {
-      box-shadow: 2px 2px 3px #888;
-      border: 1px solid #666;
+    .loading_backdrop {
+        display: none;
     }
-    img {
-      width: 60px;
-      height: 35px;
-      margin: 2px;
-      border: 1px solid rgba(136, 136, 136, 0.5);
+    &.loading .loading_backdrop {
+        .o-position-absolute(0, 0, 0, 0);
+        display: block;
+        background: black;
+        opacity: 0.3;
+        z-index: 1;
     }
-    input {
-      display: none;
+    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;
+    .o-position-absolute(@odoo-navbar-height, 0, 0);
+    position: fixed;
+    z-index: 1001;
+    background: #2F3129;
+    color: white;
+    .oe_ace_view_editor_title {
+        width: 100%;
+        height: 30px;
+        padding-top: 0;
+        padding-left: 0;
+        .oe_view_list, .btn {
+            font-size: 14px;
+            font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+            line-height: normal;
+        }
+        .oe_view_list {
+            width: 50%;
+            height: 30px;
+        }
+        .btn {
+            height: 100%;
+            padding: 0 4px;
+        }
     }
-    .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 {
+        .o-position-absolute(50px, 0, 0, 0);
+        .ace_gutter {
+            cursor: ew-resize;
+        }
     }
-  }
-  .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;
     }
-  }
-  #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;
+    top: @odoo-navbar-height + 10;
+    box-shadow: 0 3px 9px #666666;
 }
 
-
-// POPOVER _NAVIGATION
-// ==============================
+// POPOVER NAVIGATION
 .tour .popover-navigation {
-  margin-left: 13px;
-  margin-bottom: 8px;
+    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
deleted file mode 100644
index edab3b4d6ec..00000000000
--- a/addons/website/static/src/less/website.ui.interactions.less
+++ /dev/null
@@ -1,61 +0,0 @@
-// 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
index a54505f2bf6..4ff9bfce6e3 100644
--- a/addons/website/static/src/less/website.ui.less
+++ b/addons/website/static/src/less/website.ui.less
@@ -1,334 +1,45 @@
-// Fonts
-// ============================
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 
-// Layouting
-// ============================
-html, body {
-  width: 100%;
-  height: 100%;
+// LAYOUTING
+body.o_connected_user {
+    padding-top: @odoo-navbar-height!important;
 }
 
-#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;
+// MAIN MENU STYLE (added above navbar.less)
+#oe_main_menu_navbar {
+    .o-position-absolute(0, 0, auto, 0);
     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;
+    font-family: Roboto, @font-family-sans-serif;
+    font-size: @odoo-font-size-base;
+    a:hover, a:focus {
         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;
+        font-size: inherit;
+        border-radius: 0;
+    }
+
+    .o_menu_systray {
+        a[data-action="edit"], a[data-action="translate"] {
+            background-color: @odoo-brand-optional;
+            outline: 1px solid @odoo-brand-optional;
+            &:hover, &:focus {
+                background-color: darken(@odoo-brand-optional, 10%);
+                outline-color: darken(@odoo-brand-optional, 10%);
+            }
+
+            @media (max-width: @screen-xs-max) {
+                &, &:hover, &:focus {
+                    outline: none;
+                }
+            }
         }
-        &:hover {
-          background: @wb_dropdown-li-hover-bg;
-          > a {
-            color: @wb_dropdown-li-hover-color;
-            background: transparent;
-          }
+
+        .o_mobile_preview a {
+            width: @odoo-navbar-height - 2;
+            text-align: center;
+            font-size: 20px;
         }
-      }
-      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
deleted file mode 100644
index b8d3890d920..00000000000
--- a/addons/website/static/src/less/website.ui.mixins.less
+++ /dev/null
@@ -1,190 +0,0 @@
-// 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
deleted file mode 100644
index dc933921b24..00000000000
--- a/addons/website/static/src/less/website.ui.variables.less
+++ /dev/null
@@ -1,105 +0,0 @@
-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
index d9e29f3e935..205d881acc9 100644
--- a/addons/website/static/src/less/website.wrapwrap.less
+++ b/addons/website/static/src/less/website.wrapwrap.less
@@ -1,454 +1,301 @@
 
-/*       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;
-  }
+    position: relative;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: 100%;
+    
+    > * {
+        display: table-row;
+    }
+    > main {
+        height: 100%;
+    }
+}
+
+// Default Style
+header a.navbar-brand {
+    &.logo {
+        padding: 0 15px;
+    }
+    img {
+        max-height: 50px;
+    }
+}
+footer {
+    background-color: #F8F8F8;
+
+    #footer {
+        padding-top: 32px;
+    }
 }
 
 // Odoo utility classes
-// ===========================
-
 .o_hidden {
-  display: none!important;
-}
-.o_noSelect {
-  &::-moz-selection {
-    background-color: transparent;
-  }
-  &::selection {
-    background-color: transparent;
-  }
+    display: none!important;
 }
 
 // Odoo options classes
-// ===========================
-
 .para_large {
-  font-size: 120%;
+    font-size: 120%;
 }
-
-.jumbotron.para_large p{
-  font-size: 150%;
+.jumbotron {
+    margin-bottom: 0;
+    .para_large p {
+        font-size: 150%;
+    }
 }
 
 .readable {
-  font-size: 120%;
-  max-width: 700px;
-  margin-left: auto;
-  margin-right: auto;
+    font-size: 120%;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-
 // Odoo image background classes
-// ===============================
-.o_bg_img_cover {
-  background-size: cover;
+.oe_img_bg {
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    &.o_bg_img_opt_contain {
+        background-size: contain;
+        background-position: center center;
+    }
+    &.o_bg_img_opt_custom {
+        background-size: auto;
+    }
+    &.o_bg_img_opt_repeat {
+        background-repeat: repeat;
+    }
+    &.o_bg_img_opt_repeat_x {
+        background-repeat: repeat-x;
+    }
+    &.o_bg_img_opt_repeat_y {
+        background-repeat: repeat-y;
+    }
 }
 
-.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);
+    background-color: rgba(200, 200, 200, 0.14);
 }
-
 .oe_black {
-  background-color: rgba(0, 0, 0, 0.9);
-  color: white;
+    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
+    background-color: #169C78;
+    color: white;
+    .text-muted {
+        color: #ddd;
     }
-  }
 }
-
-// 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);
-
-
-
+.oe_blue_light {
+    background-color: #41b6ab;
+    color: white;
+    .text-muted {
+        color: #ddd;
+    }
+}
+.oe_blue {
+    background-color: #34495e;
+    color: white;
+}
+.oe_orange {
+    background-color: #f05442;
+    color: white;
+    .text-muted {
+        color: #ddd;
+    }
+}
+.oe_purple {
+    background-color: #b163a3;
+    color: white;
+    .text-muted {
+        color: #ddd;
+    }
+}
+.oe_red {
+    background-color: #9C1b31;
+    color: white;
+    .text-muted {
+        color: #ddd;
+    }
+}
+.oe_none {
+    background-color: #FFFFFF;
+}
+.oe_yellow {
+    background-color: #A2A51B;
+}
+.oe_green {
+    background-color: #149F2C;
+}
 
 // Typography
-// ===========================
-
 ul {
-  list-style-type: disc;
+    list-style-type: disc;
 }
-
 li > ul {
-  list-style-type: circle;
+    list-style-type: circle;
 }
-
 li > * > li > ul {
-  list-style-type: square;
+    list-style-type: square;
 }
-
 li > * > li > * > li > ul {
-  list-style-type: disc;
+    list-style-type: disc;
 }
-
 li > * > li > * > li > * > li > ul {
-  list-style-type: circle;
+    list-style-type: circle;
 }
-
 li > * > li > * > li > * > li > * > li > ul {
-  list-style-type: square;
+    list-style-type: square;
 }
-
 li > * > li > * > li > * > li > * > li > * > li > ul {
-  list-style-type: disc;
+    list-style-type: disc;
 }
-
 ol {
-  list-style-type: decimal;
+    list-style-type: decimal;
 }
-
 li > ol {
-  list-style-type: lower-alpha;
+    list-style-type: lower-alpha;
 }
-
 li > * > li > ol {
-  list-style-type: lower-greek;
+    list-style-type: lower-greek;
 }
-
 li > * > li > * > li > ol {
-  list-style-type: decimal;
+    list-style-type: decimal;
 }
-
 li > * > li > * > li > * > li > ol {
-  list-style-type: lower-alpha;
+    list-style-type: lower-alpha;
 }
-
 li > * > li > * > li > * > li > * > li > ol {
-  list-style-type: lower-greek;
+    list-style-type: lower-greek;
 }
-
 li > * > li > * > li > * > li > * > li > * > li > ol {
-  list-style-type: decimal;
+    list-style-type: decimal;
 }
-
 li > p {
-  margin: 0;
+    margin: 0;
 }
 
 font[style*='background'], font[class*='bg-'] {
-  padding: 0 2px;
+    padding: 0 2px;
 }
-
-
 hr {
-  padding: 4px 0;
+    padding: 4px 0;
 }
 
-
 // O_UL
-// ===========================
-
 .o_ul_toggle_self, .o_ul_toggle_next {
-  display: none;
+    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: "";
+.o_ul_folded {
+    .o_close {
+        display: none!important;
+    }
+    .o_ul_toggle_self, .o_ul_toggle_next {
+        display: inline-block;
+        line-height: inherit;
+        float: left;
+        position: relative;
+        margin-left: -1em;
+        top: -0.15em;
+        left: 0.2em;
+        font-size: 1.4em;
+        text-decoration: none;
+        &.o_open:before {
+            content: "";
+        }
+        &:before {
+            content: "";
+        }
     }
-  }
-  &:before{
-    content: "";
-  }
 }
 
-
-// Bootsrtap hacks
-// ===========================
-
+// Bootstrap hacks
+.container {
+    max-width: 100%;
+}
 // container inside container
-.container, .readable{
-  .container {
-    padding-left: 0;
-    padding-right: 0;
-    width: auto;
-  }
+.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;
-  }
+    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;
+    padding: 2px 15px;
 }
 
 // Columns min height
 [class^="col-md-"] {
-  min-height: 24px;
+    min-height: 24px;
 }
 
-
-
 // PUBLISH
-// ===========================
-
-.css_published .btn-danger,
-.css_published .css_publish {
-  display: none;
+.css_published {
+    .btn-danger, .css_publish {
+        display: none;
+    }
 }
-
-.css_unpublished .btn-success,
-.css_unpublished .css_unpublish {
-  display: none;
+.css_unpublished {
+    .btn-success, .css_unpublish {
+        display: none;
+    }
 }
-
 [data-publish='off'] > *:not(.css_options) {
-  .opacity(0.5);
+    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
-// ===========================
-
+// Others
 ::-moz-selection {
-  background: rgba(150, 150, 220, 0.3);
+    background: rgba(150, 150, 220, 0.3);
 }
-
 ::selection {
-  background: rgba(150, 150, 220, 0.3);
-}
-
-.logo-img {
-  width: 220px;
+    background: rgba(150, 150, 220, 0.3);
 }
 
 .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;
+    position: relative;
+    img {
+        width: 100%;
+    }
+    div {
+        .o-position-absolute(@left: 0, @bottom: 0);
+        background-color: rgba(0, 0, 0, 0.4);
+        opacity: 0.85;
+        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;
+    padding-right: 23px;
+}
+.oe_search_clear {
+    .o-position-absolute(1px, 42px);
+    z-index: 2;
+    display: none;
+    cursor: pointer;
+    color: #939393;
+    padding: 10px 0;
 }

From 88c2b6843a09ba087a10388fc39cb69dac4e2949 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 12:03:49 +0100
Subject: [PATCH 5/8] [REF] web,web_editor,website(_*),report,pos,mass_mailing:
 assets

* Remove recursive assets inclusions (i.e. assets_editor was including
assets_common, summernote, ...)
* Better construct the assets (link, then script + type attribute)
* Better include the assets (split js / css, always use t-call-assets)
* Simplifies the number of assets
* Move bootstrap js to assets common
* assets_frontend is now created by web module to allow using it on the
connexion page but also in the web_editor, where colors have to be
bootstrap/theme ones. Note: if a module depends on website, then keep
using the inherit_id="WEBSITE.assets_frontend"
---
 .../mass_mailing/views/editor_field_html.xml  |  24 +-
 addons/point_of_sale/views/pos_templates.xml  |   6 +-
 addons/report/views/layouts.xml               |  42 +-
 addons/theme_default/views/templates.xml      |  12 +-
 addons/web/views/webclient_templates.xml      | 701 +++++++++---------
 addons/web_editor/views/editor.xml            |  91 +--
 addons/web_editor/views/iframe.xml            |  19 +-
 addons/website/controllers/main.py            |   2 +-
 addons/website/views/website_templates.xml    | 116 +--
 addons/website_forum/views/website_forum.xml  |  13 +-
 .../view/website_slides_embed.xml             |  12 +-
 11 files changed, 514 insertions(+), 524 deletions(-)

diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
index 11224aa4fbb..77244586669 100644
--- a/addons/mass_mailing/views/editor_field_html.xml
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-    <data>
+<odoo>
+<template id="assets_editor" inherit_id="web_editor.assets_editor">
+    <xpath expr="link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/mass_mailing/static/src/less/mass_mailing_editor.less"/>
+    </xpath>
+</template>
 
 <!-- Template Choice page -->
 <template id="FieldTextHtmlInline" name="Editor layout">
-    
     <t t-set="head">
         <t t-if="enable_editor">
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor.css" type="text/css"/>
             <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor_thumb.css" type="text/css"/>
             <script type="text/javascript" src="/mass_mailing/static/src/js/mass_mailing_editor.js"></script>
         </t>
@@ -23,10 +25,9 @@
     </t>
 
     <t t-call="web_editor.layout">
-        <div>
-            <div t-if="not edit_translations" id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
-            <div t-if="edit_translations" id="editable_area"><t t-raw="content"/></div>
-        </div>
+        <div t-if="not edit_translations" id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
+        <div t-if="edit_translations" id="editable_area"><t t-raw="content"/></div>
+        
         <div id="templates" class="o_not_editable o_css_editor hidden" t-if="enable_editor">
             <h1 class="page-header mt16 email_head panel-primary">
                 Select a theme 
@@ -51,13 +52,11 @@
                 </div>
             </div>
         </div>
-
     </t>
 </template>
 
 <template id="FieldTextHtmlPopupContent" name="Editor layout">
     <t t-set="head">
-        <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor.css" type="text/css"/>
         <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_editor_thumb.css" type="text/css"/>
         <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_popup.css" type="text/css"/>
      </t>
@@ -77,7 +76,4 @@
         </div>
     </t>
  </template>
-
-    </data>
-</openerp>
-
+</odoo>
diff --git a/addons/point_of_sale/views/pos_templates.xml b/addons/point_of_sale/views/pos_templates.xml
index 528db600ed5..44529d4f09e 100644
--- a/addons/point_of_sale/views/pos_templates.xml
+++ b/addons/point_of_sale/views/pos_templates.xml
@@ -23,8 +23,10 @@
 
         <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
 
-        <t t-call-assets="web.assets_common" t-css="false" />
-        <t t-call-assets="web.assets_backend" t-css="false" />
+        <t t-call-assets="web.assets_common" t-css="false"/>
+        <t t-call-assets="web.assets_backend" t-css="false"/>
+        <t t-call-assets="web_editor.summernote" t-css="false"/>
+        <t t-call-assets="web_editor.assets_editor" t-css="false"/>
         <t t-call-assets="point_of_sale.assets"/>
 
         <script type="text/javascript" id="loading-script" t-raw="init">
diff --git a/addons/report/views/layouts.xml b/addons/report/views/layouts.xml
index 9a0546bc5d6..85077214bd8 100644
--- a/addons/report/views/layouts.xml
+++ b/addons/report/views/layouts.xml
@@ -2,11 +2,16 @@
 <openerp>
 <data>
 <template id="report.assets_common">
-    <link href="/web/static/lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
-    <link href="/website/static/src/css/website.css" rel="stylesheet"/>
-    <link href="/web/static/lib/fontawesome/css/font-awesome.css" rel="stylesheet"/>
-    <link href="/base/static/src/css/description.css" rel="stylesheet"/>
-    <link href="/report/static/src/css/report.css" rel="stylesheet"/>
+    <t t-call="web.less_helpers"/>
+
+    <link href="/web/static/src/less/import_bootstrap.less" rel="stylesheet" type="text/less"/>
+    <link href="/base/static/src/css/description.css" rel="stylesheet" type="text/css"/>
+
+    <!-- FIXME remove website dependency ..? -->
+    <link href="/website/static/src/less/website.wrapwrap.less" rel="stylesheet" type="text/less"/>
+    <link href="/website/static/src/less/website.snippets.less" rel="stylesheet" type="text/less"/>
+
+    <link href="/report/static/src/less/report.less" rel="stylesheet" type="text/less"/>
 </template>
 
 <template id="report.assets_pdf">
@@ -14,7 +19,10 @@
 </template>
 
 <template id="report.assets_editor">
-    <link href="/report/static/src/css/report.editor.css" rel="stylesheet"/>
+    <t t-call="web.less_helpers"/>
+
+    <link href="/report/static/src/less/report.editor.less" rel="stylesheet" type="text/less"/>
+
     <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
     <script type="text/javascript" src='/report/static/src/js/report.editor.js' />
 </template>
@@ -32,13 +40,21 @@
             <meta charset="utf-8" />
             <meta name="viewport" content="initial-scale=1"/>
             <title><t t-esc="title or 'Odoo Report'"/></title>
-            <t t-call-assets="report.assets_common"/>
+            <t t-call-assets="web.assets_common" t-js="false"/>
+            <t t-call-assets="report.assets_common" t-js="false"/>
             <t t-if="editable">
-                <t t-call-assets="web_editor.assets_editor"/>
-                <t t-call-assets="report.assets_editor"/>
+                <t t-call-assets="web_editor.summernote" t-js="false"/>
+                <t t-call-assets="web_editor.assets_editor" t-js="false"/>
+                <t t-call-assets="report.assets_editor" t-js="false"/>
+            </t>
+            <t t-if="editable">
+                <t t-call-assets="web.assets_common" t-css="false"/>
+                <t t-call-assets="web_editor.summernote" t-css="false"/>
+                <t t-call-assets="web_editor.assets_editor" t-css="false"/>
+                <t t-call-assets="report.assets_editor" t-css="false"/>
             </t>
         </head>
-        <body class="container" t-att-style="editable and 'margin-top: 40px;'">
+        <body class="container">
             <div id="wrapwrap">
                 <main>
                     <t t-raw="0"/>
@@ -163,8 +179,10 @@
     &lt;!DOCTYPE html&gt;
     <html style="height: 0;">
         <head>
-            <t t-call-assets="report.assets_pdf"/>
-            <t t-call-assets="report.assets_common"/>
+            <t t-call-assets="report.assets_pdf" t-js="false"/>
+            <t t-call-assets="report.assets_common" t-js="false"/>
+            <t t-call-assets="report.assets_pdf" t-css="false"/>
+            <t t-call-assets="report.assets_common" t-css="false"/>
             <meta charset="utf-8"/>
             <t t-if="subst is True">
                 <script>
diff --git a/addons/theme_default/views/templates.xml b/addons/theme_default/views/templates.xml
index b1866c81844..e9ed1f62d6b 100644
--- a/addons/theme_default/views/templates.xml
+++ b/addons/theme_default/views/templates.xml
@@ -1,6 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
+<odoo>
+<template id="assets_frontend" inherit_id="website.assets_frontend" name="Theme Default Assets Frontend">
+  <xpath expr="link[last()]" position="after">
+    <link rel="stylesheet" href="/theme_default/static/src/less/customize_modal.less"/>
+  </xpath>
+</template>
 
 <template id="customize_modal" inherit_id="website.theme_customize" name="treehouse Customize Modal" priority="1">
   <xpath expr="div" position="replace">
@@ -165,6 +169,4 @@
     <link href="/theme_default/static/src/less/option_font.less" rel="stylesheet" type="text/less"/>
   </xpath>
 </template>
-
-</data>
-</openerp>
+</odoo>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 7a9f608b36c..f3de50cb56a 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -1,182 +1,188 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-    <data>
-        <template id="web.assets_common">
-            <script type="text/javascript" src="/web/static/lib/es5-shim/es5-shim.min.js"></script>
-            <script type="text/javascript" src="/web/static/lib/underscore/underscore.js"></script>
-            <script type="text/javascript" src="/web/static/lib/underscore.string/lib/underscore.string.js"></script>
-            <script type="text/javascript" src="/web/static/lib/moment/moment.js"></script>
+<odoo>
+    <template id="web.less_helpers">
+        <link rel="stylesheet" type="text/less" href="/web/static/lib/bootstrap/less/variables.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/lib/bootstrap/less/mixins/vendor-prefixes.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/lib/bootstrap/less/mixins/buttons.less"/>
 
-            <!-- jQuery stuff -->
-            <script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
-            <link rel="stylesheet" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
-            <script type="text/javascript" src="/web/static/lib/jquery.ui/jquery-ui.js"></script>
-            <script type="text/javascript" src="/web/static/lib/jquery/jquery.browser.js"></script>
-            <script type="text/javascript" src="/web/static/lib/jquery.blockUI/jquery.blockUI.js"></script>
-            <script type="text/javascript" src="/web/static/lib/jquery.hotkeys/jquery.hotkeys.js"></script>
-            <script type="text/javascript" src="/web/static/lib/jquery.placeholder/jquery.placeholder.js"></script>
-            <script type="text/javascript" src="/web/static/lib/jquery.form/jquery.form.js"></script>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/variables.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/utils.less"/>
+    </template>
 
-            <script type="text/javascript" src="/web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js"></script>
+    <template id="web.assets_common">
+        <t t-call="web.less_helpers"/>
 
-            <script type="text/javascript" src="/web/static/lib/qweb/qweb2.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/boot.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/class.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/translation.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/ajax.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/time.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/mixins.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/widget.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/registry.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/session.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/model.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/utils.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/core.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/dialog.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/tour.js"></script>
-            <script type="text/javascript" src="/web/static/test/menu.js"></script>
-            <script type="text/javascript" src="/web/static/test/x2many.js"></script>
+        <link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
 
-            <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
-            <link rel="stylesheet" href="/web/static/src/fonts/lato/stylesheet.css" />
+        <link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
+        <link rel="stylesheet" type="text/css" href="/web/static/src/fonts/lato/stylesheet.css" />
 
-            <link rel="stylesheet" href="/web/static/src/less/mimetypes.less"/>
-            <link rel="stylesheet" href="/web/static/src/less/animation.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/mimetypes.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/animation.less"/>
 
-            <!-- Datetime Picker -->
-            <link rel="stylesheet" href="/web/static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"/>
-            <script type="text/javascript" src="/web/static/lib/bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
+        <link rel="stylesheet" type="text/css" href="/web/static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"/>
+        <link rel="stylesheet" type="text/css" href="/web/static/lib/select2/select2.css"/>
+        <link rel="stylesheet" type="text/css" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
 
-            <!-- Select 2 -->
-            <link rel="stylesheet" href="/web/static/lib/select2/select2.css"/>
-            <link rel="stylesheet" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
-            <script type="text/javascript" src="/web/static/lib/select2/select2.js"></script>
-        </template>
+        <script type="text/javascript" src="/web/static/lib/es5-shim/es5-shim.min.js"></script>
+        <script type="text/javascript" src="/web/static/lib/underscore/underscore.js"></script>
+        <script type="text/javascript" src="/web/static/lib/underscore.string/lib/underscore.string.js"></script>
+        <script type="text/javascript" src="/web/static/lib/moment/moment.js"></script>
 
-        <template id="web.bootstrap">
-            <script src="/web/static/lib/bootstrap/js/affix.js"></script>
-            <script src="/web/static/lib/bootstrap/js/alert.js"></script>
-            <script src="/web/static/lib/bootstrap/js/button.js"></script>
-            <script src="/web/static/lib/bootstrap/js/carousel.js"></script>
-            <script src="/web/static/lib/bootstrap/js/collapse.js"></script>
-            <script src="/web/static/lib/bootstrap/js/dropdown.js"></script>
-            <script src="/web/static/lib/bootstrap/js/modal.js"></script>
-            <script src="/web/static/lib/bootstrap/js/tooltip.js"></script>
-            <script src="/web/static/lib/bootstrap/js/popover.js"></script>
-            <script src="/web/static/lib/bootstrap/js/scrollspy.js"></script>
-            <script src="/web/static/lib/bootstrap/js/tab.js"></script>
-            <script src="/web/static/lib/bootstrap/js/transition.js"></script>
-        </template>
+        <script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.ui/jquery-ui.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery/jquery.browser.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.blockUI/jquery.blockUI.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.hotkeys/jquery.hotkeys.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.placeholder/jquery.placeholder.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.form/jquery.form.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js"></script>
 
-        <template id="web.assets_backend">
-            <!-- jQuery addons -->
-            <script type="text/javascript" src="/web/static/lib/jquery.scrollTo/jquery.scrollTo.js"></script>
+        <script src="/web/static/lib/bootstrap/js/affix.js"></script>
+        <script src="/web/static/lib/bootstrap/js/alert.js"></script>
+        <script src="/web/static/lib/bootstrap/js/button.js"></script>
+        <script src="/web/static/lib/bootstrap/js/carousel.js"></script>
+        <script src="/web/static/lib/bootstrap/js/collapse.js"></script>
+        <script src="/web/static/lib/bootstrap/js/dropdown.js"></script>
+        <script src="/web/static/lib/bootstrap/js/modal.js"></script>
+        <script src="/web/static/lib/bootstrap/js/tooltip.js"></script>
+        <script src="/web/static/lib/bootstrap/js/popover.js"></script>
+        <script src="/web/static/lib/bootstrap/js/scrollspy.js"></script>
+        <script src="/web/static/lib/bootstrap/js/tab.js"></script>
+        <script src="/web/static/lib/bootstrap/js/transition.js"></script>
 
-            <t t-call="web.bootstrap"/>
+        <script type="text/javascript" src="/web/static/lib/qweb/qweb2.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/boot.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/class.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/translation.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/ajax.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/time.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/mixins.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/widget.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/registry.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/session.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/model.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/utils.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/core.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/dialog.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/tour.js"></script>
+        <script type="text/javascript" src="/web/static/test/menu.js"></script>
+        <script type="text/javascript" src="/web/static/test/x2many.js"></script>
 
-            <!-- nv.d3 -->
-            <link rel="stylesheet" href="/web/static/lib/nvd3/nv.d3.css"/>
-            <script type="text/javascript" src="/web/static/lib/nvd3/d3.v3.js"></script>
-            <script type="text/javascript" src="/web/static/lib/nvd3/nv.d3.js"></script>
+        <script type="text/javascript" src="/web/static/lib/bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
+        <script type="text/javascript" src="/web/static/lib/select2/select2.js"></script>
+    </template>
 
-            <!-- Backbone -->
-            <script type="text/javascript" src="/web/static/lib/backbone/backbone.js"></script>
+    <template id="web.assets_backend">
+        <t t-call="web.less_helpers"/>
 
-            <!-- Internals -->
-            <script type="text/javascript" charset="utf-8">
-                odoo._modules = <t t-raw="get_modules_order()"/>;
-            </script>
-            <link rel="stylesheet" href="/web/static/src/css/base.css"/>
-            <link rel="stylesheet" href="/web/static/src/css/data_export.css"/>
-            <link rel="stylesheet" href="/base/static/src/css/modules.css"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/import_bootstrap.less"/>
 
-            <link rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
-            <link rel="stylesheet" href="/web/static/src/less/variables.less"/>
-            <link rel="stylesheet" href="/web/static/src/less/enterprise_compatibility.less"/>
-            <link rel="stylesheet" href="/web/static/src/less/utils.less"/>
-            <link rel="stylesheet" href="/web/static/src/less/modal.less"/>
-            <link rel="stylesheet" href="/web/static/src/less/notification.less"/>
-            <link rel="stylesheet" href="/web/static/src/less/switch_company_menu.less"/>
+        <link rel="stylesheet" type="text/css" href="/web/static/lib/nvd3/nv.d3.css"/>
 
-            <script type="text/javascript" src="/web/static/lib/py.js/lib/py.js"></script>
+        <link rel="stylesheet" type="text/css" href="/web/static/src/css/base.css"/>
+        <link rel="stylesheet" type="text/css" href="/web/static/src/css/data_export.css"/>
+        <link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/>
 
-            <!-- Special case: core.js declares $.browser needed by ba-bbq -->
-            <script type="text/javascript" src="/web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js"></script>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/enterprise_compatibility.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/modal.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/notification.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/switch_company_menu.less"/>
 
-            <script type="text/javascript" src="/web/static/src/js/framework/data_model.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/formats.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/pyeval.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/action_manager.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/control_panel.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/view_manager.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/web_client.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/data.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/compatibility.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/misc.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/framework/crash_manager.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/change_password.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/debug_manager.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/data_export.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/date_picker.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/loading.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/notification.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/sidebar.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/priority.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/progress_bar.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/pager.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/systray_menu.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/switch_company_menu.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/widgets/user_menu.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/menu.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/list_common.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/list_view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/form_view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/form_common.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/form_widgets.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/form_relational_widgets.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/list_view_editable.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/pivot_view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/graph_view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/graph_widget.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/search_view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/search_filters.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/search_inputs.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/search_menus.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/views/tree_view.js"></script>
-            <script type="text/javascript" src="/web/static/src/js/apps.js"></script>
+        <script type="text/javascript" src="/web/static/lib/jquery.scrollTo/jquery.scrollTo.js"></script>
+        <script type="text/javascript" src="/web/static/lib/nvd3/d3.v3.js"></script>
+        <script type="text/javascript" src="/web/static/lib/nvd3/nv.d3.js"></script>
+        <script type="text/javascript" src="/web/static/lib/backbone/backbone.js"></script>
 
-        </template>
+        <script type="text/javascript" charset="utf-8">
+            odoo._modules = <t t-raw="get_modules_order()"/>;
+        </script>
 
-        <template id="web.layout" name="Web layout">&lt;!DOCTYPE html&gt;
-            <html style="height: 100%">
-                <head>
-                    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-                    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-                    <title>Odoo</title>
-                    <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
-                    <link rel="stylesheet" href="/web/static/src/css/full.css" />
-                    <t t-raw="head or ''"/>
-                </head>
-                <body t-att-class="body_classname">
-                    <t t-raw="0"/>
-                </body>
-            </html>
-        </template>
+        <script type="text/javascript" src="/web/static/lib/py.js/lib/py.js"></script>
+        <!-- Special case: core.js declares $.browser needed by ba-bbq -->
+        <script type="text/javascript" src="/web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js"></script>
 
-        <template id="web.login_layout" name="Login Layout">
-            <t t-call="web.layout">
-                <t t-set="head">
-                  <link rel="stylesheet" href="/web/static/lib/bootstrap/css/bootstrap.css"/>
-                  <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
-                  <script src="/web/static/lib/jquery/jquery.js" type="text/javascript"/>
-                </t>
-                <t t-set="body_classname" t-value="'container'"/>
-                <div class="row">
-                  <div class="col-md-6 col-md-offset-3 o_database_list">
+        <script type="text/javascript" src="/web/static/src/js/framework/data_model.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/formats.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/pyeval.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/action_manager.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/view_manager.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/web_client.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/data.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/compatibility.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/misc.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/framework/crash_manager.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/change_password.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/debug_manager.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/data_export.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/date_picker.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/loading.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/notification.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/sidebar.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/priority.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/progress_bar.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/pager.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/systray_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/switch_company_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/user_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/list_common.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/list_view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/form_view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/form_common.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/form_widgets.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/form_relational_widgets.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/list_view_editable.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/pivot_view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/graph_view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/graph_widget.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/search_view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/search_filters.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/search_inputs.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/search_menus.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/views/tree_view.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/apps.js"></script>
+    </template>
+
+    <template id="web.assets_frontend">
+        <t t-call="web.less_helpers"/>
+
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/import_bootstrap.less"/>
+        <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
+    </template>
+
+    <template id="web.layout" name="Web layout">&lt;!DOCTYPE html&gt;
+        <html style="height: 100%">
+            <head>
+                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+                <title>Odoo</title>
+                <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
+                <link rel="stylesheet" href="/web/static/src/css/full.css" />
+                <t t-raw="head or ''"/>
+            </head>
+            <body t-att-class="body_classname">
+                <t t-raw="0"/>
+            </body>
+        </html>
+    </template>
+
+    <template id="web.login_layout" name="Login Layout">
+        <t t-call="web.layout">
+            <t t-set="head">
+                <t t-call-assets="web.assets_common" t-js="false"/>
+                <t t-call-assets="web.assets_frontend" t-js="false"/>
+                <t t-call-assets="web.assets_common" t-css="false"/>
+                <t t-call-assets="web.assets_frontend" t-css="false"/>
+            </t>
+            <t t-set="body_classname" t-value="'container'"/>
+            <div class="row">
+                <div class="col-md-6 col-md-offset-3 o_database_list">
                     <div class="text-center">
-                      <img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}"/>
+                        <img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}"/>
                     </div>
                     <t t-raw="0"/>
                     <div class="text-center" t-if="not disable_footer">
@@ -185,179 +191,130 @@
                         </t>
                         <a href="https://www.odoo.com" target="_blank">Powered by <span>Odoo</span></a>
                     </div>
-
-                  </div>
                 </div>
-            </t>
-        </template>
+            </div>
+        </t>
+    </template>
 
-        <template id="web.login" name="Login">
-            <t t-call="web.login_layout">
+    <template id="web.login" name="Login">
+        <t t-call="web.login_layout">
+            <form class="oe_login_form" role="form" t-attf-action="/web/login{{ '?debug' if debug else '' }}" method="post" onsubmit="this.action = this.action + location.hash">
+               <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
 
-                <form class="oe_login_form" role="form" t-attf-action="/web/login{{ '?debug' if debug else '' }}" method="post" onsubmit="this.action = this.action + location.hash">
-                   <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                <div class="form-group field-db" t-if="databases and len(databases) &gt; 1">
+                    <label for="db" class="control-label">Database</label>
+                    <div class="input-group">
+                        <input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/>
+                        <span class="input-group-btn">
+                          <a href="/web/database/selector" class="btn btn-default">Select <i class="fa fa-database"></i></a>
+                        </span>
+                    </div>
+                </div>
 
-                    <div class="form-group field-db" t-if="databases and len(databases) &gt; 1">
-                        <label for="db" class="control-label">Database</label>
-                        <div class="input-group">
-                            <input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/>
-                            <span class="input-group-btn">
-                              <a href="/web/database/selector" class="btn btn-default">Select <i class="fa fa-database"></i></a>
-                            </span>
+                <div class="form-group field-login">
+                    <label for="login" class="control-label">Email</label>
+                    <input type="text" name="login" t-att-value="login" id="login" class="form-control" required="required" autofocus="autofocus"/>
+                </div>
+
+                <div class="form-group field-password">
+                    <label for="password" class="control-label">Password</label>
+                    <input type="password" name="password" id="password" class="form-control" required="required" t-att-autofocus="'autofocus' if login else None"/>
+                </div>
+
+                <p class="alert alert-danger" t-if="error">
+                    <t t-esc="error"/>
+                </p>
+                <p class="alert alert-success" t-if="message">
+                    <t t-esc="message"/>
+                </p>
+
+                <input type="hidden" name="redirect" t-att-value="redirect"/>
+                <div class="clearfix oe_login_buttons">
+                    <button type="submit" class="btn btn-primary">Log in</button>
+                </div>
+            </form>
+        </t>
+    </template>
+
+    <template id="web.menu">
+        <ul class="nav navbar-nav navbar-left oe_application_menu_placeholder" style="display: none;">
+            <li t-foreach="menu_data['children']" t-as="menu">
+                <t t-call="web.menu_link"/>
+            </li>
+            <li id="menu_more_container" class="dropdown" style="display: none;">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
+                <ul id="menu_more" class="dropdown-menu"></ul>
+            </li>
+        </ul>
+
+        <ul class="nav navbar-nav navbar-right oe_user_menu_placeholder" style="display: none;"/>
+        <ul class="nav navbar-nav navbar-right oe_systray" style="display: none;"/>
+    </template>
+    <template id="web.menu_secondary">
+        <a class="oe_logo" t-att-href="'/web/?debug' if debug else '/web'">
+            <span class="oe_logo_edit">Edit Company data</span>
+            <img src='/web/binary/company_logo'/>
+        </a>
+        <div class="oe_secondary_menus_container">
+            <t t-foreach="menu_data['children']" t-as="menu">
+                <div style="display: none" class="oe_secondary_menu" t-att-data-menu-parent="menu['id']">
+                    <t t-foreach="menu['children']" t-as="menu">
+                        <div class="oe_secondary_menu_section">                                
+                            <t t-if="menu['children']"><t t-esc="menu['name']"/></t>
+                            <t t-if="not menu['children']"><t t-call="web.menu_link"/></t>
                         </div>
-                    </div>
-
-                    <div class="form-group field-login">
-                        <label for="login" class="control-label">Email</label>
-                        <input type="text" name="login" t-att-value="login" id="login" class="form-control" required="required" autofocus="autofocus"/>
-                    </div>
-
-                    <div class="form-group field-password">
-                        <label for="password" class="control-label">Password</label>
-                        <input type="password" name="password" id="password" class="form-control" required="required" t-att-autofocus="'autofocus' if login else None"/>
-                    </div>
-
-                    <p class="alert alert-danger" t-if="error">
-                        <t t-esc="error"/>
-                    </p>
-                    <p class="alert alert-success" t-if="message">
-                        <t t-esc="message"/>
-                    </p>
-
-                    <input type="hidden" name="redirect" t-att-value="redirect"/>
-                    <div class="clearfix oe_login_buttons">
-                        <button type="submit" class="btn btn-primary">Log in</button>
-                    </div>
-
-                </form>
-            </t>
-        </template>
-
-        <template id="web.menu">
-            <ul class="nav navbar-nav navbar-left oe_application_menu_placeholder" style="display: none;">
-                <li t-foreach="menu_data['children']" t-as="menu">
-                    <t t-call="web.menu_link"/>
-                </li>
-                <li id="menu_more_container" class="dropdown" style="display: none;">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
-                    <ul id="menu_more" class="dropdown-menu"></ul>
-                </li>
-            </ul>
-
-            <ul class="nav navbar-nav navbar-right oe_user_menu_placeholder" style="display: none;"/>
-            <ul class="nav navbar-nav navbar-right oe_systray" style="display: none;"/>
-        </template>
-        <template id="web.menu_secondary">
-            <a class="oe_logo" t-att-href="'/web/?debug' if debug else '/web'">
-                <span class="oe_logo_edit">Edit Company data</span>
-                <img src='/web/binary/company_logo'/>
-            </a>
-            <div class="oe_secondary_menus_container">
-                <t t-foreach="menu_data['children']" t-as="menu">
-                    <div style="display: none" class="oe_secondary_menu" t-att-data-menu-parent="menu['id']">
-                        <t t-foreach="menu['children']" t-as="menu">
-                            <div class="oe_secondary_menu_section">                                
-                                <t t-if="menu['children']"><t t-esc="menu['name']"/></t>
-                                <t t-if="not menu['children']"><t t-call="web.menu_link"/></t>
-                            </div>
-                            <t t-call="web.menu_secondary_submenu"/>
-                        </t>
-                    </div>
-                </t>
-            </div>
-            <div class="oe_footer">
-                Powered by <a href="http://www.odoo.com" target="_blank"><span>Odoo</span></a>
-            </div>
-        </template>
-        <template id="web.menu_secondary_submenu">
-            <ul t-if="menu['children']" class="oe_secondary_submenu nav nav-pills nav-stacked">
-                <li t-foreach="menu['children']" t-as="menu">
-                    <t t-call="web.menu_link"/>
-                    <t t-call="web.menu_secondary_submenu"/>
-                </li>
-            </ul>
-        </template>
-        <template id="web.menu_link">
-            <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 ''">
-                <span class="oe_menu_text">
-                    <t t-esc="menu['name']"/>
-                </span>
-            </a>
-        </template>
-
-        <template id="web.webclient_bootstrap" name="Webclient Bootstrap">
-            <t t-call="web.layout">
-                <t t-set="head">
-                    <t t-call-assets="web.assets_common"/>
-                    <script type="text/javascript">
-                        odoo.define('web.csrf', function (require) {
-                            var token = "<t t-esc="request.csrf_token(None)"/>";
-                            require('web.core').csrf_token = token;
-                            require('qweb').default_dict.csrf_token = token;
-                        });
-                        odoo.db_info = <t t-raw="db_info"/>;
-                    </script>
-                    <t t-call-assets="web.assets_backend"/>
-                    &lt;!--[if lte IE 9]&gt; <link rel="stylesheet" href="/web/static/src/css/ie.css"/> &lt;![endif]--&gt;
-                    <script type="text/javascript">
-                        $(function() {
-                            <t t-if="init">
-                                <t t-raw="init"/>
-                            </t>
-                            <t t-if="not init">
-                                odoo.define('web.web_client', function (require) {
-                                    var WebClient = require('web.WebClient');
-                                    var web_client = new WebClient();
-                                    web_client.setElement($(document.body));
-                                    web_client.start();
-                                    return web_client;
-                                });
-                            </t>
-                        });
-                    </script>
-                </t>
-
-                <nav id="oe_main_menu_navbar" class="navbar navbar-inverse" role="navigation" groups="base.group_user,base.group_portal">
-                    <div class="navbar-header">
-                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                        </button>
-                    </div>
-                    <div class="navbar-collapse collapse" id="oe_main_menu_placeholder">
-                        <t t-call="web.menu"/>
-                    </div>
-                </nav>
-                <div class="openerp openerp_webclient_container oe_webclient">
-                    <div class="oe_leftbar" groups="base.group_user,base.group_portal">
-                        <t t-call="web.menu_secondary"/>
-                    </div><div class="oe_application"/>
+                        <t t-call="web.menu_secondary_submenu"/>
+                    </t>
                 </div>
             </t>
-        </template>
+        </div>
+        <div class="oe_footer">
+            Powered by <a href="http://www.odoo.com" target="_blank"><span>Odoo</span></a>
+        </div>
+    </template>
+    <template id="web.menu_secondary_submenu">
+        <ul t-if="menu['children']" class="oe_secondary_submenu nav nav-pills nav-stacked">
+            <li t-foreach="menu['children']" t-as="menu">
+                <t t-call="web.menu_link"/>
+                <t t-call="web.menu_secondary_submenu"/>
+            </li>
+        </ul>
+    </template>
+    <template id="web.menu_link">
+        <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 ''">
+            <span class="oe_menu_text">
+                <t t-esc="menu['name']"/>
+            </span>
+        </a>
+    </template>
 
-        <template id="web.qunit_suite">
-            &lt;!DOCTYPE html&gt;
-            <html style="height: 100%">
-                <head>
-                    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-                    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-                    <title>Odoo Web Tests</title>
+    <template id="web.webclient_bootstrap" name="Webclient Bootstrap">
+        <t t-call="web.layout">
+            <t t-set="head">
+                <t t-call-assets="web.assets_common" t-js="false"/>
+                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-call-assets="web.assets_common" t-css="false"/>
+                <script type="text/javascript">
+                    odoo.define('web.csrf', function (require) {
+                        var token = "<t t-esc="request.csrf_token(None)"/>";
+                        require('web.core').csrf_token = token;
+                        require('qweb').default_dict.csrf_token = token;
+                    });
+                    odoo.db_info = <t t-raw="db_info"/>;
+                </script>
+                <t t-call-assets="web.assets_backend" t-css="false"/>
 
-                    <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
-                    <link rel="stylesheet" href="/web/static/lib/qunit/qunit-1.17.1.css"/>
-                    <script src="/web/static/lib/qunit/qunit-1.17.1.js"></script>
-
-                    <t t-call="web.assets_common"/>
-                    <t t-call="web.assets_backend"/>
-                    <script type="text/javascript">
-                        $(function() {
+                <script type="text/javascript">
+                    $(function() {
+                        <t t-if="init">
+                            <t t-raw="init"/>
+                        </t>
+                        <t t-if="not init">
                             odoo.define('web.web_client', function (require) {
                                 var WebClient = require('web.WebClient');
                                 var web_client = new WebClient();
@@ -365,35 +322,81 @@
                                 web_client.start();
                                 return web_client;
                             });
+                        </t>
+                    });
+                </script>
+                &lt;!--[if lte IE 9]&gt; <link rel="stylesheet" href="/web/static/src/css/ie.css"/> &lt;![endif]--&gt;
+            </t>
+
+            <nav id="oe_main_menu_navbar" class="navbar navbar-inverse" role="navigation" groups="base.group_user,base.group_portal">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                </div>
+                <div class="navbar-collapse collapse" id="oe_main_menu_placeholder">
+                    <t t-call="web.menu"/>
+                </div>
+            </nav>
+            <div class="openerp openerp_webclient_container oe_webclient">
+                <div class="oe_leftbar" groups="base.group_user,base.group_portal">
+                    <t t-call="web.menu_secondary"/>
+                </div><div class="oe_application"/>
+            </div>
+        </t>
+    </template>
+
+    <template id="web.qunit_suite">
+        &lt;!DOCTYPE html&gt;
+        <html style="height: 100%">
+            <head>
+                <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+                <title>Odoo Web Tests</title>
+
+                <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
+                <link rel="stylesheet" href="/web/static/lib/qunit/qunit-1.17.1.css"/>
+                <script src="/web/static/lib/qunit/qunit-1.17.1.js"></script>
+
+                <t t-call="web.assets_common"/>
+                <t t-call="web.assets_backend"/>
+                <script type="text/javascript">
+                    $(function() {
+                        odoo.define('web.web_client', function (require) {
+                            var WebClient = require('web.WebClient');
+                            var web_client = new WebClient();
+                            web_client.setElement($(document.body));
+                            web_client.start();
+                            return web_client;
                         });
-                    </script>
+                    });
+                </script>
 
-                    <style>
-                        body { overflow: auto !important; }
-                    </style>
-                    <script type="text/javascript" src="/web/static/test/testing.js"></script>
+                <style>
+                    body { overflow: auto !important; }
+                </style>
+                <script type="text/javascript" src="/web/static/test/testing.js"></script>
 
-                    <script type="text/javascript" src="/web/static/test/registry.js"></script>
-                    <script type="text/javascript" src="/web/static/test/rpc-misordered.js"></script>
-                    <script type="text/javascript" src="/web/static/test/mutex.js"></script>
-                    <script type="text/javascript" src="/web/static/test/data.js"></script>
-                    <script type="text/javascript" src="/web/static/test/evals.js"></script>
-                    <script type="text/javascript" src="/web/static/test/form.js"></script>
-                    <script type="text/javascript" src="/web/static/test/formats.js"></script>
-                    <script type="text/javascript" src="/web/static/test/framework.js"></script>
-                    <script type="text/javascript" src="/web/static/test/list.js"></script>
-                    <script type="text/javascript" src="/web/static/test/list-utils.js"></script>
-                    <script type="text/javascript" src="/web/static/test/list-editable.js"></script>
-                    <script type="text/javascript" src="/web/static/test/search.js"></script>
-                </head>
+                <script type="text/javascript" src="/web/static/test/registry.js"></script>
+                <script type="text/javascript" src="/web/static/test/rpc-misordered.js"></script>
+                <script type="text/javascript" src="/web/static/test/mutex.js"></script>
+                <script type="text/javascript" src="/web/static/test/data.js"></script>
+                <script type="text/javascript" src="/web/static/test/evals.js"></script>
+                <script type="text/javascript" src="/web/static/test/form.js"></script>
+                <script type="text/javascript" src="/web/static/test/formats.js"></script>
+                <script type="text/javascript" src="/web/static/test/framework.js"></script>
+                <script type="text/javascript" src="/web/static/test/list.js"></script>
+                <script type="text/javascript" src="/web/static/test/list-utils.js"></script>
+                <script type="text/javascript" src="/web/static/test/list-editable.js"></script>
+                <script type="text/javascript" src="/web/static/test/search.js"></script>
+            </head>
 
-                <body id="oe" class="openerp">
-                    <div id="qunit"></div>
-                    <div id="qunit-fixture"></div>
-                </body>
-            </html>
-
-        </template>
-
-    </data>
-</openerp>
+            <body id="oe" class="openerp">
+                <div id="qunit"></div>
+                <div id="qunit-fixture"></div>
+            </body>
+        </html>
+    </template>
+</odoo>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 1e84a3c010e..5755649334d 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-
+<odoo>
 <template id="summernote" name="Summernote">
     <script type="text/javascript">
         (function () {
@@ -50,57 +49,64 @@
         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" type="text/less" href="/web_editor/static/lib/summernote/src/less/summernote.less"/>
 </template>
 
-<template id="editor" name="Editor">
-    <!-- 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" />
-    <script type="text/javascript" src="/web_editor/static/src/js/rte.summernote.js" />
-    <script type="text/javascript" src="/web_editor/static/src/js/widgets.js" />
-    <script type="text/javascript" src="/web_editor/static/src/js/snippets.editor.js" />
-    <script type="text/javascript" src="/web_editor/static/src/js/snippets.options.js" />
-    <script type="text/javascript" src="/web_editor/static/src/js/tour.rte.js" />
-    <script type="text/javascript" src="/web_editor/static/src/js/transcoder.js"></script>
-    <script type="text/javascript" src="/web_editor/static/src/js/translator.js"></script>
+<template id="less_helpers" inherit_id="web.less_helpers">
+    <xpath expr="." position="inside">
+        <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.variables.less"/>
+    </xpath>
 </template>
 
 <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/less/web_editor.common.less'/>
-        <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.less'/>
+    <xpath expr="script[last()]" position="after">
         <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" />
     </xpath>
 </template>
 
-<template id="assets_editor" name="web_editor assets for editor">
-    <t t-call="web.assets_common"/>
-    <t t-call="web.bootstrap"/>
-    <script type="text/javascript" src="/web/static/lib/select2/select2.js"></script>
-    <t t-call="web_editor.summernote"/>
-    <t t-call="web_editor.editor"/>
+<template id="assets_backend" inherit_id="web.assets_backend" name="web_editor assets for backend">
+    <xpath expr="link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.common.less"/> <!-- not in common because compiled diffently with context -->
+        <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.backend.less"/>
+    </xpath>
+    <xpath expr="script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/src/js/backend.js" />
+    </xpath>
 </template>
 
-<template id="assets_backend" name="web_editor assets for backend" inherit_id="web.assets_backend">
-    <xpath expr="." position="inside">
-        <t t-call="web_editor.summernote"/>
-        <t t-call="web_editor.editor"/>
-        <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" />
+<template id="assets_frontend" inherit_id="web.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.common.less"/> <!-- not in common because compiled diffently with context -->
+    </xpath>
+</template>
+
+<template id="assets_editor" name="Full web_editor assets">
+    <t t-call="web.less_helpers"/>
+    
+    <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.less"/>
+    <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.components.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"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/rte.summernote.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/widgets.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/snippets.editor.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/snippets.options.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/tour.rte.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/transcoder.js"></script>
+    <script type="text/javascript" src="/web_editor/static/src/js/translator.js"></script>
+</template>
+
+<template id="webclient_bootstrap" inherit_id="web.webclient_bootstrap">
+    <xpath expr="//t[@t-call-assets='web.assets_backend'][@t-js='false']" position="after">
+        <t t-call-assets="web_editor.summernote" t-js="false"/>
+        <t t-call-assets="web_editor.assets_editor" t-js="false"/>
+    </xpath>
+    <xpath expr="//t[@t-call-assets='web.assets_backend'][@t-css='false']" position="after">
+        <t t-call-assets="web_editor.summernote" t-css="false"/>
+        <t t-call-assets="web_editor.assets_editor" t-css="false"/>
     </xpath>
 </template>
 
@@ -134,5 +140,4 @@
         </div>
     </div>
 </template>
-
-</openerp>
+</odoo>
diff --git a/addons/web_editor/views/iframe.xml b/addons/web_editor/views/iframe.xml
index 43a2861ca78..0bd2bbcf789 100644
--- a/addons/web_editor/views/iframe.xml
+++ b/addons/web_editor/views/iframe.xml
@@ -15,21 +15,20 @@
                 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/web_editor.iframe.inline.css" type="text/css"/>
             <t t-if="not dont_load_assets">
-                <t t-call-assets="web_editor.assets_editor"/>
-                <style>
-                    .note-popover .popover { left: 5px !important; }
-                    html[data-translatable] .note-popover .popover { left: 150px !important; }
-                </style>
+                <t t-call-assets="web.assets_common" t-js="false"/>
+                <t t-call-assets="web.assets_frontend" t-js="false"/>
+                <t t-call-assets="web_editor.summernote" t-js="false"/>
+                <t t-call-assets="web_editor.assets_editor" t-js="false"/>
+
+                <t t-call-assets="web.assets_common" t-css="false"/>
+                <t t-call-assets="web_editor.summernote" t-css="false"/>
+                <t t-call-assets="web_editor.assets_editor" t-css="false"/>
+
                 <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
                 <script type="text/javascript" src="/web_editor/static/src/js/iframe.js"></script>
                 <script t-if="enable_editor and inline_mode" type="text/javascript" src="/web_editor/static/src/js/inline.js"></script>
             </t>
-            <script type="text/javascript">
-                var snippets_url = '<t t-esc="snippets or ''"/>';
-                var callback = window.location.href.match(/callback=([^&amp;=]+)/)[1];
-            </script>
             <script>
                 if (window.top.odoo &amp;&amp; !window.top.odoo[callback+"_updown"]) {
                     window.top.odoo[callback+"_updown"] = function (value, fields_values) {
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index a6a2e4092a5..e73cc55bc9f 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -317,7 +317,7 @@ class Website(openerp.addons.web.controllers.main.Home):
         set_active(enable, True)
 
         if get_bundle:
-            bundle = AssetsBundle('website.assets_frontend', cr=http.request.cr, uid=http.request.uid, context={}, registry=http.request.registry)
+            bundle = AssetsBundle('web.assets_frontend', cr=http.request.cr, uid=http.request.uid, context={}, registry=http.request.registry)
             return bundle.to_html()
 
         return True
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index a321fe60384..5a6b0d20604 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1,59 +1,33 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-    <data>
-
+<odoo>
 <!-- Assets -->
-
-<template id="assets_common" inherit_id="web.assets_common" name="Website assets">
-    <xpath expr="." position="inside">
+<template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/js/website.backend.js"></script>
         <script type="text/javascript" src="/website/static/src/js/website.tour.rte.js"></script>
     </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="/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"/>
-
-    <link rel="stylesheet" href="/web/static/src/less/variables.less"/>
-    <link rel="stylesheet" href="/web/static/src/less/utils.less"/>
-</template>
-
-<template id="assets_backend" name="website assets for backend" inherit_id="web.assets_backend">
-    <xpath expr="." position="inside">
-        <script type="text/javascript" src="/website/static/src/js/website.backend.js"></script>
+<template id="assets_frontend" inherit_id="web.assets_frontend" name="Website Frontend Assets">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.ui.less"/>
+        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.ui.components.less"/>
+        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.wrapwrap.less"/>
+        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.snippets.less"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <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>
     </xpath>
 </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'/>
+<template id="website.assets_editor" name="Website Editor Assets">
+    <t t-call="web.less_helpers"/>
 
-    <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" type="text/less" href="/website/static/src/less/website.edit_mode.less"/>
 
-    <link rel='stylesheet' href='/website/static/src/less/website.edit_mode.less'/>
+    <script type="text/javascript" src="/website/static/src/js/website.tour.rte.js"></script>
 
     <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>
@@ -77,7 +51,6 @@
 </template>
 
 <!-- Layout -->
-
 <template id="submenu" name="Submenu">
     <li t-if="not submenu.child_id" t-att-class="
         'active' if submenu.url and submenu.url != '/' and request.httprequest.path == submenu.url.replace('/page/website.', '/page/') else None
@@ -121,9 +94,6 @@
             <t t-if="not title">
                 <t t-set="title"><t t-if="additional_title"><t t-raw="additional_title"/> | </t><t t-esc="(website or res_company).name"/></t>
             </t>
-            <t groups="base.group_website_designer">
-                <t t-set="load_editor" t-value="True"/>
-            </t>
 
             <meta name="viewport" content="initial-scale=1"/>
             <meta name="description" t-att-content="main_object and 'website_meta_description' in main_object
@@ -152,14 +122,17 @@
             </t>
 
             <t t-call-assets="web.assets_common" t-js="false"/>
-            <t t-call-assets="website.assets_frontend" t-js="false"/>
+            <t t-call-assets="web.assets_frontend" t-js="false"/>
+            <t t-call-assets="web_editor.summernote" t-js="false" groups="base.group_website_designer"/>
+            <t t-call-assets="web_editor.assets_editor" t-js="false" groups="base.group_website_designer"/>
+            <t t-call-assets="website.assets_editor" t-js="false" groups="base.group_website_publisher"/>
+
             <t t-call-assets="web.assets_common" t-css="false"/>
-            <t t-if="load_editor">
-                <t t-call-assets="web_editor.summernote"/>
-            </t>
-            <t groups="base.group_website_designer" t-call-assets="web_editor.editor"/>
-            <t t-call-assets="website.assets_frontend" t-css="false"/>
-            <t groups="base.group_website_publisher" t-call-assets="website.assets_editor" async="True"/>
+            <t t-call-assets="web.assets_frontend" t-css="false"/>
+            <t t-call-assets="web_editor.summernote" t-css="false" groups="base.group_website_designer"/>
+            <t t-call-assets="web_editor.assets_editor" t-css="false" groups="base.group_website_designer"/>
+            <t t-call-assets="website.assets_editor" t-css="false" groups="base.group_website_publisher"/>
+
             <script type="text/javascript">
                 odoo.define('web.csrf', function (require) {
                     var token = "<t t-esc="request.csrf_token(None)"/>";
@@ -249,9 +222,6 @@
     </xpath>
 </template>
 
-
-
-
 <!--
     Optional Bundle for PDFJS lib
     Since PDFJS is quite huge (40000 lines), please only load it when it is necessary.
@@ -325,7 +295,6 @@
 </template>
 
 <!-- Features template -->
-
 <template id="login_layout" inherit_id="web.login_layout" name="Website Login Layout">
     <xpath expr="t" position="replace">
         <t t-call="website.layout">
@@ -450,7 +419,6 @@
 </template>
 
 <!-- Util template -->
-
 <template id="publish_management">
     <div groups="base.group_website_publisher" t-ignore="true" class="pull-right css_editable_mode_hidden" t-att-style="style or ''">
         <div t-attf-class="btn-group js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-controller="publish_controller">
@@ -504,7 +472,7 @@
     'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
     'data-reload="/"' (optional) force the reloading of the page if the url match with
         the string ( = regexp).
-        Otherwise, only the '/web/content/website.assets_frontend' is reloaded
+        Otherwise, only the '/web/content/web.assets_frontend' is reloaded
 
     For the sets (data-enable and/or data-disable without data-xmlid), the set is
     automatically checked if:
@@ -519,7 +487,6 @@
     - 'out': on the container 1 second before removed from ths DOM
     - 'loading': on the container/modal when the new css is loading
 -->
-
 <template id="website.theme_customize" name="Theme Modal for Customization">
   <div id="theme_customize_modal" class="modal fade">
       <div class="modal-dialog">
@@ -584,19 +551,15 @@
 </template>
 
 <!-- Error and special pages -->
-
 <template id="info" name="Odoo Information">
     <t t-call="website.layout">
-      <div id="wrap">
-      </div>
+        <div id="wrap"/>
     </t>
 </template>
 
 <template id="show_website_info" inherit_id="website.info" customize_show="True" name="Show Odoo Information">
     <xpath expr="//div[@id='wrap']" position="inside">
-
         <div class="oe_structure">
-
             <section class="container">
                 <h1><t t-esc="res_company.name"/>
                     <small>Odoo Version <t t-raw="version.get('server_version')"/></small>
@@ -645,18 +608,14 @@
                         </t>
                     </dl>
                 </div>
-
-
             </section>
-
         </div>
-
     </xpath>
 </template>
 
 <template id="default_page">
     <t t-call="website.layout">
-      <div id="wrap" class="oe_structure oe_empty"></div>
+        <div id="wrap" class="oe_structure oe_empty"/>
     </t>
 </template>
 
@@ -679,7 +638,6 @@
             <div class="oe_structure">
                 <h1 class="container mt32"><t t-esc="status_code"/>: <t t-esc="status_message"/></h1>
             </div>
-
             <t t-if="editable or request.debug">
                 <t t-call="website.http_error_debug"/>
             </t>
@@ -800,8 +758,10 @@
         <head>
             <title t-esc="status_message">Internal Server Error</title>
             <t t-set="debug" t-value="True"/>
-            <t t-call-assets="web.assets_common"/>
-            <t t-call-assets="website.assets_frontend"/>
+            <t t-call-assets="web.assets_common" t-js="false"/>
+            <t t-call-assets="web.assets_frontend" t-js="false"/>
+            <t t-call-assets="web.assets_common" t-css="false"/>
+            <t t-call-assets="web.assets_frontend" t-css="false"/>
             <script>
                 $(document).ready(function() {
                     var button = $('#reset_templates_button');
@@ -929,7 +889,6 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
 </template>
 
 <!-- Actual pages -->
-
 <template id="homepage" name="Homepage" page="True" priority="29">
     <t t-call="website.layout">
       <div id="wrap" class="oe_structure oe_empty"></div>
@@ -1030,5 +989,4 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
         </span>
     </div>
 </template>
-     </data>
-</openerp>
+</odoo>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 1f78a069988..a0216121b0c 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -37,10 +37,19 @@
     </form>
 </template>
 
+<!-- website_forum.layout removes the access right check for summernote bundle -->
+<template id="layout" inherit_id="website.layout" name="Forum Layout" primary="True">
+    <xpath expr="//t[@t-call-assets='web_editor.summernote'][@t-js='false']" position="attributes">
+        <attribute name="groups"/>
+    </xpath>
+    <xpath expr="//t[@t-call-assets='web_editor.summernote'][@t-css='false']" position="attributes">
+        <attribute name="groups"/>
+    </xpath>
+</template>
+
 <!-- Page Index -->
 <template id="header" name="Forum Index">
-    <t t-set="load_editor" t-value="True"/>
-    <t t-call="website.layout">
+    <t t-call="website_forum.layout">
         <div t-if="is_public_user and not forum_welcome_message" class="forum_intro">
             <div t-field="forum.welcome_message"/>
         </div>
diff --git a/addons/website_slides/view/website_slides_embed.xml b/addons/website_slides/view/website_slides_embed.xml
index 4dd3036d2d6..1826193bf2d 100644
--- a/addons/website_slides/view/website_slides_embed.xml
+++ b/addons/website_slides/view/website_slides_embed.xml
@@ -1,15 +1,11 @@
 <?xml version="1.0" ?>
 <openerp>
     <data>
-
         <!-- Bundle (minimal) for embedded slide iframe -->
         <template id="website_slides.slide_embed_assets" name="Website slides embed assets">
-            <link rel='stylesheet' href='/web/static/lib/fontawesome/css/font-awesome.css'/>
-            <link rel='stylesheet' href='/web/static/lib/bootstrap/css/bootstrap.css'/>
+            <link type="text/less" rel='stylesheet' href='/web/static/src/less/import_bootstrap.less'/>
             <link type="text/less" href="/website_slides/static/src/less/website_slides.less" rel="stylesheet" t-ignore="true"/>
 
-            <script type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
-            <t t-call="web.bootstrap"/>
             <t t-call="website.pdf_js_lib"></t>
             <script type="text/javascript" src="/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js"></script>
             <script type="text/javascript" src="/website_slides/static/src/js/slides_embed.js"></script>
@@ -23,8 +19,10 @@
             <html>
                 <head t-if="not private">
                     <title><t t-esc="slide.name"/></title>
-                    <script type="text/javascript" src="/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js"></script>
-                    <t t-call-assets="website_slides.slide_embed_assets"/>
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="website_slides.slide_embed_assets" t-js="false"/>
+                    <t t-call-assets="web.assets_common" t-css="false"/>
+                    <t t-call-assets="website_slides.slide_embed_assets" t-css="false"/>
                 </head>
                 <body t-if="private" style="position: inherit;">
                     <title><t t-esc="slide.name"/></title>

From 58c5ff1d4f64f16d43106e6b00f0b94fe63506c2 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 13:15:19 +0100
Subject: [PATCH 6/8] [REF] website*: frontend user navbar

* Remove use of bootstrap navbar
* Add navbar.less file for compatibility with enterprise
* Modify the location of the "new page/product/..." elements
---
 .../mail/static/src/less/client_action.less   |   9 -
 addons/web/static/src/less/navbar.less        | 174 +++++++++++++
 addons/web/views/webclient_templates.xml      |   2 +
 .../website/views/website_backend_navbar.xml  | 239 +++++++-----------
 .../views/website_blog_templates.xml          |   4 +-
 addons/website_event/views/website_event.xml  |   4 +-
 addons/website_forum/views/website_forum.xml  |   4 +-
 .../views/templates.xml                       |   4 +-
 addons/website_sale/views/templates.xml       |   4 +-
 9 files changed, 280 insertions(+), 164 deletions(-)
 create mode 100644 addons/web/static/src/less/navbar.less

diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index 8811eb28f4f..b2749199ca4 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -312,15 +312,6 @@
     .o_mail_navbar_dropdown {
         width: 350px;
         padding: 0;
-        @media (max-width: @screen-xs-max) {
-            background-color: white!important;
-            max-height: none!important;
-            position: fixed!important;
-            top: @navbar-height;
-            right: 0;
-            bottom: 0;
-            left: 0;
-        }
 
         .o_spinner {
             .o-flex-display();
diff --git a/addons/web/static/src/less/navbar.less b/addons/web/static/src/less/navbar.less
new file mode 100644
index 00000000000..8dcacd1c45c
--- /dev/null
+++ b/addons/web/static/src/less/navbar.less
@@ -0,0 +1,174 @@
+
+.o_main_navbar {
+    position: relative;
+    height: @odoo-navbar-height;
+    border: 1px solid @odoo-navbar-inverse-link-hover-bg;
+    background-color: @odoo-brand-primary;
+    color: white;
+    .box-shadow(0px 0px 8px @odoo-main-text-color);
+
+    > button {
+        float: left;
+        width: @odoo-navbar-height - 2;
+        height: @odoo-navbar-height - 2;
+        border: none;
+        padding: 0;
+        line-height: @odoo-navbar-height - 2;
+        background-color: transparent;
+        
+        font-size: 18px;
+        .user-select(none);
+
+        &:hover, &:focus {
+            background-color: @odoo-navbar-inverse-link-hover-bg;
+        }
+        &:focus, &:active, &:focus:active {
+            outline: none;
+        }
+
+        &.o_menu_toggle {
+            margin-right: 5px;
+        }
+    }
+
+    > ul {
+        display: block;
+        float: left;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        > li {
+            position: relative;
+            display: block;
+            float: left;
+
+            > a {
+                display: block;
+                height: @odoo-navbar-height - 2;
+                padding: 0 10px;
+                color: white;
+                line-height: @odoo-navbar-height - 2;
+
+                &:hover {
+                    background-color: @odoo-navbar-inverse-link-hover-bg;
+                }
+
+                &:focus, &:active, &:focus:active {
+                    outline: none;
+                }
+            }
+        }
+
+        &.o_menu_systray {
+            float: right;
+            .open .dropdown-menu {
+                left: auto;
+                right: 0;
+            }
+            .o_user_menu {
+                float: right;
+                .oe_topbar_avatar {
+                    height: 15px;
+                }
+            }
+        }
+    }
+
+    .o_menu_brand {
+        display: none;
+    }
+
+    .open .dropdown-menu {
+        max-height: 90vh; // the dropdown should not overstep the viewport
+        overflow: auto;
+        margin-top: 0;
+
+        .o-menu-indentation(@index) when (@index < 6) {
+            > li.o_menu_header_lvl_@{index}, > li .o_menu_entry_lvl_@{index} {
+                padding-left: @odoo-dropdown-hpadding + (@index - 2)*12px;
+            }
+            .o-menu-indentation(@index + 1);
+        }
+        .o-menu-indentation(3);
+    }
+
+    @media (max-width: @screen-xs-max) {
+        .o-transition(height, 200ms, linear);
+
+        position: relative;
+        height: @odoo-navbar-height;
+        overflow: hidden;
+
+        > ul {
+            > li {
+                float: none;
+                .dropdown-backdrop {
+                    display: none;
+                }
+
+                &.open .dropdown-menu {
+                    max-height: none;
+                }
+            }
+
+            &.o_menu_sections {
+                width: 100%;
+
+                > li.open .dropdown-menu {
+                    position: static;
+                    float: none;
+                    background-color: transparent;
+                    box-shadow: none;
+                    border: none;
+                    overflow: visible;
+
+                    > li > a {
+                        background-color: transparent;
+                        color: inherit;
+                    }
+                }
+            }
+
+            &.o_menu_systray {
+                .o-position-absolute(0px, @odoo-navbar-height - 2, auto, @odoo-navbar-height - 2);
+                height: @odoo-navbar-height - 2;
+                text-align: right;
+
+                > li {
+                    display: inline-block;
+
+                    &.open .dropdown-menu {
+                        .o-position-absolute(@odoo-navbar-height, 0, 0, 0);
+                        position: fixed;
+                        width: auto;
+                    }
+                }
+
+                .o_user_menu .oe_topbar_name {
+                    display: none;
+                }
+            }
+        }
+
+        .o_menu_brand {
+            float: none;
+            margin: 0;
+            border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
+            color: transparent;
+        }
+    }
+}
+
+@media (max-width: @screen-xs-max) {
+    body.o_mobile_menu_opened {
+        overflow: hidden;
+        height: 100%;
+        height: 100vh;
+
+        .o_main_navbar {
+            height: 100%;
+            overflow: auto;
+        }
+    }
+}
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index f3de50cb56a..5ce50bd8f94 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -151,6 +151,8 @@
         <t t-call="web.less_helpers"/>
 
         <link rel="stylesheet" type="text/less" href="/web/static/src/less/import_bootstrap.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/navbar.less"/> <!-- Compatibility -->
+        
         <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
     </template>
 
diff --git a/addons/website/views/website_backend_navbar.xml b/addons/website/views/website_backend_navbar.xml
index afef4c81ee9..c60caf9af36 100644
--- a/addons/website/views/website_backend_navbar.xml
+++ b/addons/website/views/website_backend_navbar.xml
@@ -1,156 +1,105 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-  <data>
+<odoo>
     <!-- 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> <!-- / #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>
-                    </li>
-                    <li>
-                      <a href="https://www.adspike.com">
-                        <span title="Optimize your AdWords account">Optimize AdWords Campaign</span>
-                      </a>
-                    </li>
-                  </ul>
-                </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>
-                        <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>
+        <xpath expr="//body" position="attributes">
+            <attribute name="class">o_connected_user</attribute>
+        </xpath>
+        <xpath expr="//body/div['id=wrawrap']" position="before">
+            <nav t-if="website and menu_data" id="oe_main_menu_navbar" class="o_main_navbar">
+                <ul id="oe_applications">
+                    <li class="dropdown active">
+                        <a class="dropdown full" 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>
-                      <li groups="base.group_website_designer"></li>
-                    </t>
-                    <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>
+                </ul>
+
+                <button type="button" class="fa fa-bars pull-right visible-xs-block o_mobile_menu_toggle"/>
+
+                <div class="o_menu_brand">Website</div>
+
+                <ul class="o_menu_sections">
+                    <!-- Promote -->
+                    <li class="dropdown" groups="base.group_website_designer">
+                        <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="promote-menu-button">Promote</a>
+                        <ul class="dropdown-menu oe_promote_menu" role="menu">
+                            <li><a data-action="promote-current-page" href="#" title="Promote page on the web">Optimize SEO</a></li>
+                            <li><a href="https://www.adspike.com" title="Optimize your AdWords account">Optimize AdWords Campaign</a></li>
+                        </ul>
                     </li>
-                    <li id="theme_customize">
-                      <a href="#">Customize Theme</a>
+                    <!-- Content -->
+                    <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</a>
+                        <ul class="dropdown-menu oe_content_menu" role="menu">
+                            <li groups="base.group_website_designer">
+                                <a data-action="edit_menu" href="#" title="Edit Top Menu">Edit Menu</a>
+                            </li>
+                            <li t-if="deletable" groups="base.group_website_designer"><a href="#" data-action="rename_page">Rename Page</a></li>
+                            <li t-if="deletable" groups="base.group_website_designer"><a href="#" data-action="delete_page">Delete Page</a></li>
+                        </ul>
                     </li>
-                    <li id="install_apps">
-                      <a href="/web#return_label=Website&amp;action=website.action_module_website">Install Apps</a>
+                    <!-- 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">Customize</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>
-                    <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> <!-- / #oe_systray -->
+                    <!-- Help -->
+                    <li class="dropdown">
+                        <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="help-menu-button">Help</a>
+                        <ul class="dropdown-menu" id="help-menu" role="menu">
+                            <li class="dropdown-header">HELP &amp; TUTORIALS</li>
+                        </ul>
+                    </li>
+                </ul>
 
-              <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>
+                <ul class="o_menu_systray">
+                    <!-- Mobile preview -->
+                    <li class="o_mobile_preview hidden-xs">
+                        <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" class="fa fa-mobile"/></a>
+                    </li>
+                    <!-- Page Edition -->
+                    <li groups="base.group_website_publisher,base.group_website_designer">
+                        <a data-action="new_page" href="#" data-toggle="modal" data-target="#o_website_add_page_modal"><span class="fa fa-plus"/> NEW PAGE</a>
+                    </li>
+                    <li t-if="not translatable" groups="base.group_website_publisher">
+                        <a data-action="edit" href="#"><span class="fa fa-pencil"/> EDIT PAGE</a>
+                    </li>
+                    <li t-if="translatable" groups="base.group_website_publisher">
+                        <a data-action="translate" href="#">TRANSLATE</a>
+                    </li>
+                    <li t-if="translatable" groups="base.group_website_publisher">
+                        <a data-action="edit_master" href="#">or Edit Master</a>
+                    </li>
+                </ul>
+            </nav>
+        </xpath>
 
+        <!-- Add new page/content modal -->
+        <xpath expr="//body/div['id=wrawrap']" position="after">
+            <div class="modal" id="o_website_add_page_modal">
+                <div class="modal-dialog modal-lg" data-dismiss="modal">
+                    <ul>
+                        <li groups="base.group_website_designer"><a href="#" data-action="new_page"><i class="fa fa-file-o"/><p>New Page</p></a></li>
+                    </ul>
+                </div>
+            </div>
+        </xpath>
     </template>
-  </data>
-</openerp>
+</odoo>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index c5366eb4d5b..ed305fbf61d 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -458,8 +458,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_blogpost" inherit_id="website.user_navbar" groups="base.group_website_designer">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-         <li><a href="#" data-action="new_blog_post">New Blog Post</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="#" data-action="new_blog_post"><i class="fa fa-rss"/><p>New Blog Post</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index 637117e4076..f771a456fce 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -623,8 +623,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_event" inherit_id="website.user_navbar" groups="event.group_event_manager">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-         <li><a href="#" data-action="new_event">New Event</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="#" data-action="new_event"><i class="fa fa-glass"/><p>New Event</p></a></li>
     </xpath>
 </template>
 </data>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index a0216121b0c..66902c2d2fb 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1537,8 +1537,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_forum" inherit_id="website.user_navbar" groups="base.group_user">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-        <li><a href="#" data-action="new_forum">New Forum</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="#" data-action="new_forum"><i class="fa fa-comment"/><p>New Forum</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_hr_recruitment/views/templates.xml b/addons/website_hr_recruitment/views/templates.xml
index 9165c7992f4..01d9f6acc30 100644
--- a/addons/website_hr_recruitment/views/templates.xml
+++ b/addons/website_hr_recruitment/views/templates.xml
@@ -294,8 +294,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_job_offer" inherit_id="website.user_navbar" groups="base.group_hr_manager">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-         <li><a href="/jobs/add" class="js_link2post">New Job Offer</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="/jobs/add" class="js_link2post"><i class="fa fa-briefcase"/><p>New Job Offer</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index e042cfd7a0b..db71fbff153 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1471,8 +1471,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_product" inherit_id="website.user_navbar" groups="base.group_sale_manager">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-        <li><a id="create-new-product" href="#" data-action="new_product">New Product</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a id="create-new-product" href="#" data-action="new_product"><i class="fa fa-shopping-cart"/><p>New Product</p></a></li>
     </xpath>
 </template>
 

From 6610d05549e347fbb548e606fa66cfb113df9e67 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 13:13:12 +0100
Subject: [PATCH 7/8] [REF] web_editor,website,mass_mailing: JS/XML update

* Adapt DOM selectors
* Refactore dialog XMLs to have odoo styling
* New editor options (background-position, ...)
* Various improvements
---
 .../static/src/js/mass_mailing_editor.js      |   10 +-
 .../static/lib/summernote/src/js/Renderer.js  |  116 +-
 addons/web_editor/static/src/js/backend.js    |   22 +-
 addons/web_editor/static/src/js/base.js       |   10 +-
 addons/web_editor/static/src/js/editor.js     |   13 +-
 addons/web_editor/static/src/js/inline.js     |    6 +-
 addons/web_editor/static/src/js/rte.js        |    6 +-
 .../static/src/js/rte.summernote.js           |  114 +-
 .../static/src/js/snippets.animation.js       |    4 +-
 .../static/src/js/snippets.editor.js          |  195 +--
 .../static/src/js/snippets.options.js         | 1369 ++++++++---------
 addons/web_editor/static/src/js/summernote.js |    6 +-
 addons/web_editor/static/src/js/translator.js |    4 +-
 addons/web_editor/static/src/js/widgets.js    |   38 +-
 addons/web_editor/static/src/xml/editor.xml   |  510 ++----
 addons/web_editor/static/src/xml/snippets.xml |   47 +-
 .../web_editor/static/src/xml/translator.xml  |   13 +-
 addons/web_editor/views/editor.xml            |   58 +-
 .../static/src/js/web_planner_website.js      |   18 +-
 addons/website/static/src/js/website.ace.js   |   27 +-
 .../website/static/src/js/website.backend.js  |    4 +-
 .../static/src/js/website.contentMenu.js      |   57 +-
 .../website/static/src/js/website.editor.js   |  113 +-
 addons/website/static/src/js/website.js       |  432 +++---
 .../website/static/src/js/website.mobile.js   |   46 +-
 addons/website/static/src/js/website.seo.js   |  143 +-
 addons/website/static/src/js/website.share.js |    6 +-
 .../src/js/website.snippets.animation.js      |   63 +-
 .../static/src/js/website.snippets.editor.js  |   29 +-
 .../static/src/js/website.snippets.gallery.js |   42 +-
 addons/website/static/src/js/website.theme.js |   36 +-
 .../static/src/js/website.translator.js       |    6 +-
 .../static/src/xml/website.gallery.xml        |    8 +-
 addons/website/static/src/xml/website.seo.xml |  119 +-
 .../static/src/xml/website.translator.xml     |    2 +-
 addons/website/static/src/xml/website.xml     |   65 +-
 .../src/js/website_mail_channel.editor.js     |    1 -
 .../src/js/website_mass_mailing.editor.js     |    2 -
 38 files changed, 1646 insertions(+), 2114 deletions(-)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index 7b312373e8d..7e84ff62594 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -165,7 +165,7 @@ web_editor.Class.include({
         }
         var $editable = $("#editable_area");
         $(".o_table_handler").remove();
-        $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
+        $editable.add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
         $("#choose_template").children().toggleClass("hidden");
         $("body").trigger("resize");
         $(window.top).trigger('resize');
@@ -177,7 +177,7 @@ web_editor.Class.include({
         var $editable = $("#editable_area");
         this.rte.historyRecordUndo($editable);
         $editable.html( $(event.target).closest(".theme_thumbnail").find(".js_content").html() );
-        $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
+        $editable.add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
         $("#choose_template").children().toggleClass("hidden");
         setTimeout(function () {
             $("body").trigger("resize");
@@ -191,8 +191,8 @@ web_editor.Class.include({
         event.preventDefault();
     },
     set_snippet_theme: function (theme) {
-        $("#o_left_bar .o_panel_body > div").addClass("hidden");
-        $("#o_left_bar .o_panel_body > div."+theme).removeClass("hidden");
+        $("#oe_snippets .o_panel_body > div").addClass("hidden");
+        $("#oe_snippets .o_panel_body > div."+theme).removeClass("hidden");
         $("#editable_area").trigger("content_changed");
     },
     get_snippet_template: function (mailing_model) {
@@ -225,7 +225,7 @@ snippets_editor.Class.include({
     clean_for_save: function () {
         this._super();
         var $editable = $("#editable_area");
-        var theme = ($("#o_left_bar .o_panel_body > div:not(.hidden)").attr("class") || "").replace(/^\s*|\s*o_mail_block[^\s]+\s*|\s*oe_snippet\s*|\s*ui-draggable\s*|\s*$/g, '');
+        var theme = ($("#oe_snippets .o_panel_body > div:not(.hidden)").attr("class") || "").replace(/^\s*|\s*o_mail_block[^\s]+\s*|\s*oe_snippet\s*|\s*ui-draggable\s*|\s*$/g, '');
         var $theme = $("#editable_area [data-snippet-theme]").removeAttr("data-snippet-theme").removeData("snippet-theme");
         $editable.children().first().attr("data-snippet-theme", theme);
         $editable.find(":not(br):hidden").remove();
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 189dc1707aa..52d0975ee47 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -31,11 +31,10 @@ define([
       var title = options.title;
       var className = options.className;
       var dropdown = options.dropdown;
-      var dropdown2 = options.dropdown2;
-      var wrapper = options.wrapper;
+      var no_caret = options.no_caret;
       var hide = options.hide;
 
-      var btn = (dropdown ? '<div class="btn-group' +
+      return (dropdown ? '<div class="btn-group' +
                (className ? ' ' + className : '') + '">' : '') +
                '<button type="button"' +
                  ' class="btn btn-default btn-sm' +
@@ -49,14 +48,10 @@ define([
                  (hide ? ' data-hide=\'' + hide + '\'' : '') +
                  ' tabindex="-1">' +
                  label +
-                 (dropdown ? ' <span class="caret"></span>' : '') +
+                 ((dropdown && !no_caret)? ' <span class="caret"></span>' : '') +
                '</button>' +
                (dropdown || '') +
              (dropdown ? '</div>' : '');
-
-        if (wrapper) btn = $(wrapper).html(btn).prop('outerHTML');
-
-        return btn;
     };
 
     /**
@@ -230,77 +225,52 @@ define([
           value: '{"backColor":"#B35E9B"}'
         });
 
-        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>' +
+        // This is a copy of web_editor.snippet.option.colorpicker qweb template
+        var colorpicker_template = '' +
+          '<div class="dropdown-menu">' +
+            '<div class="colorpicker">' +
+              '<div class="note-palette-title">{0}</div>' +
+              '<div class="btn-group palette-reset">' +
+                '<div class="note-color-reset" data-event="{2}" data-value="inherit" title="{1}">' +
+                  '<i class="fa fa-ban"></i>' +
+                '</div>' +
+              '</div>' +
+              '<div class="o_colorpicker_sections">' +
+                '<ul class="nav nav-pills o_colorpicker_section_menu">' +
+                  '<li><a href="#o_palette_spectrum"><i class="fa fa-eyedropper"></i></a></li>' +
+                '</ul>' +
+                '<div class="tab-content o_colorpicker_section_tabs">' +
+                  '<div class="tab-pane" id="o_palette_spectrum">' +
+                    '<div class="note-color-palette" data-target-event="{2}"></div>' +
+                  '</div>' +
+                '</div>' +
+              '</div>' +
+            '</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="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 foreground = formatStr(colorpicker_template, [lang.color.foreground, lang.color.reset, 'foreColor']);
+        var background = formatStr(colorpicker_template, [lang.color.background, lang.color.transparent, 'backColor']);
 
         var foregroundButton = tplButton('', {
           title: lang.color.foreground,
-          wrapper: '<span class="btn-group foreground_toggle" />',
-          dropdown: foreground
+          className: 'o_foreground_toggle',
+          dropdown: foreground,
+          no_caret: true,
         });
         var backgroundButton = tplButton('', {
           title: lang.color.background,
-          wrapper: '<span class="btn-group background_toggle" />',
-          dropdown: background
+          className: 'o_background_toggle',
+          dropdown: background,
+          no_caret: true,
         });
 
         return colorButton + foregroundButton + backgroundButton;
+
+        function formatStr(str, values) {
+          return str.replace(/{(\d+)}/g, function (match, number) { 
+            return (values[number] !== undefined)? values[number] : match;
+          });
+        };
       },
       bold: function (lang, options) {
         return tplIconButton(options.iconPrefix + options.icons.font.bold, {
@@ -848,13 +818,13 @@ define([
       });
 
       var body = document.body;
-      var container = $('#web_editor-toolbars')
+      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(container);
+      $popover.appendTo($container);
       createTooltip($popover, keyMap);
       this.createPalette($popover, options); // ODOO: use (maybe) overrided method
 
@@ -862,7 +832,7 @@ define([
       var $handle = $(tplHandles(options));
       $handle.addClass('note-air-layout');
       $handle.attr('id', 'note-handle-' + id);
-      $handle.appendTo(container);
+      $handle.appendTo($container);
 
       // create Dialog
       var $dialog = $(tplDialogs(langInfo, options));
@@ -871,7 +841,7 @@ define([
       $dialog.find('button.close, a.modal-close').click(function () {
         $(this).closest('.modal').modal('hide');
       });
-      $dialog.appendTo(container);
+      $dialog.appendTo($container);
     };
 
     /**
diff --git a/addons/web_editor/static/src/js/backend.js b/addons/web_editor/static/src/js/backend.js
index 72bf61cbb7f..08712a05d0e 100644
--- a/addons/web_editor/static/src/js/backend.js
+++ b/addons/web_editor/static/src/js/backend.js
@@ -51,7 +51,7 @@ var FieldTextHtmlSimple = widget.extend({
         }
         return config;
     },
-    start: function() {
+    start: function () {
         var def = this._super.apply(this, arguments);
         this.$translate.remove();
         this.$translate = $();
@@ -59,7 +59,7 @@ var FieldTextHtmlSimple = widget.extend({
         this.$content.trigger('mouseup');
         return def;
     },
-    initialize_content: function() {
+    initialize_content: function () {
         var self = this;
         this.$textarea = this.$("textarea").val(this.get('value') || "<p><br/></p>");
         this.$content = $();
@@ -118,20 +118,20 @@ var FieldTextHtmlSimple = widget.extend({
         return value;
     },
     focus: function() {
-        if (this.get("effective_readonly")) {
+        if (!(!this.get("effective_readonly") && this.$textarea)) {
             return false;
         }
         // on IE an error may occur when creating range on not displayed element
         try {
-            return this.$content.focusInEnd();
+            return this.$textarea.focusInEnd();
         } catch (e) {
-            return this.$content.focus();
+            return this.$textarea.focus();
         }
     },
     resize: function() {
         this.$('iframe').css('height', '0px').css('height', Math.max(30, Math.min(this.$content[0] ? this.$content[0].scrollHeight : 0, 500)) + 'px');
     },
-    render_value: function() {
+    render_value: function () {
         var value = this.get('value');
         this.$textarea.val(value || '');
         this.$content.html(this.text_to_html(value));
@@ -148,10 +148,10 @@ var FieldTextHtmlSimple = widget.extend({
             this.$('.note-toolbar').find('button[data-event="undo"]').attr('disabled', false);
         }
     },
-    is_false: function() {
+    is_false: function () {
         return !this.get('value') || this.get('value') === "<p><br/></p>" || !this.get('value').match(/\S/);
     },
-    before_save: function() {
+    before_save: function () {
         if (this.options['style-inline']) {
             transcoder.class_to_style(this.$content);
             transcoder.font_to_img(this.$content);
@@ -268,7 +268,7 @@ var FieldTextHtml = widget.extend({
 
         return src;
     },
-    initialize_content: function() {
+    initialize_content: function () {
         this.$el.closest('.modal-body').css('max-height', 'none');
         this.$iframe = this.$el.find('iframe');
         this.document = null;
@@ -334,7 +334,7 @@ var FieldTextHtml = widget.extend({
             self.initialize_content();
         });
     },
-    render_value: function() {
+    render_value: function () {
         if (this.lang !== this.view.dataset.context.lang || this.$iframe.attr('src').match(/[?&]edit_translations=1/)) {
             return;
         }
@@ -354,7 +354,7 @@ var FieldTextHtml = widget.extend({
             }
         }
     },
-    is_false: function() {
+    is_false: function () {
         return this.get('value') === false || !this.$content.html() || !this.$content.html().match(/\S/);
     },
     before_save: function () {
diff --git a/addons/web_editor/static/src/js/base.js b/addons/web_editor/static/src/js/base.js
index 4d8d128f60c..f65ecaa7c02 100644
--- a/addons/web_editor/static/src/js/base.js
+++ b/addons/web_editor/static/src/js/base.js
@@ -30,7 +30,7 @@ data.dom_ready = dom_ready;
 
 // todo: remove and load a bundle of translated templates
 var all_ready;
-data.ready = function() {
+data.ready = function () {
     if (!all_ready) {
         all_ready = $.when(dom_ready, ajax.loadXML()).then(translations);
     } else if(all_ready.state() === "resolved") { // can add async template
@@ -40,9 +40,9 @@ data.ready = function() {
 };
 
 function translations() {
-    function translate_node(node){
+    function translate_node(node) {
         if(node.nodeType === 3) { // TEXT_NODE
-            if(node.nodeValue.match(/\S/)){
+            if(node.nodeValue.match(/\S/)) {
                 var space = node.nodeValue.match(/^([\s]*)([\s\S]*?)([\s]*)$/);
                 node.nodeValue = space[1] + $.trim(_t(space[2])) + space[3];
             }
@@ -55,11 +55,11 @@ function translations() {
             'mods': ['web_editor'],
             'lang': data.get_context().lang
         })
-        .then(function(trans) {
+        .then(function (trans) {
             _t.database.set_bundle(trans);
         }).then(function () {
             var keys = _.keys(qweb.templates);
-            for (var i = 0; i < keys.length; i++){
+            for (var i = 0; i < keys.length; i++) {
                 translate_node(qweb.templates[keys[i]]);
             }
         }).promise();
diff --git a/addons/web_editor/static/src/js/editor.js b/addons/web_editor/static/src/js/editor.js
index 88d86bc825b..9e842bed4bc 100644
--- a/addons/web_editor/static/src/js/editor.js
+++ b/addons/web_editor/static/src/js/editor.js
@@ -63,9 +63,9 @@ editor.Class = Widget.extend({
     template: 'web_editor.editorbar',
     events: {
         'click button[data-action=save]': 'save',
-        'click a[data-action=cancel]': 'cancel',
+        'click button[data-action=cancel]': 'cancel',
     },
-    init: function(parent) {
+    init: function (parent) {
         var self = this;
         var res = this._super.apply(this, arguments);
         this.parent = parent;
@@ -75,7 +75,7 @@ editor.Class = Widget.extend({
         });
         return res;
     },
-    start: function() {
+    start: function () {
         var self = this;
 
         $('.dropdown-toggle').dropdown();
@@ -86,14 +86,13 @@ editor.Class = Widget.extend({
         this.rte.start();
 
         var flag = false;
-        window.onbeforeunload = function(event) {
+        window.onbeforeunload = function (event) {
             if (rte.history.getEditableHasUndo().length && !flag) {
                 flag = true;
                 setTimeout(function () {flag=false;},0);
                 return _t('This document is not saved!');
             }
         };
-        this.$('button[data-action="save"]').prop('disabled', true);
         return this._super();
     },
     display_placeholder: function () {
@@ -119,9 +118,7 @@ editor.Class = Widget.extend({
             }
         });
     },
-    rte_changed: function () {
-        this.$('button[data-action=save]').prop('disabled', !rte.history.getEditableHasUndo().length);
-    },
+    rte_changed: function () {},
     save: function () {
         return this.rte.save().then(function () {
             editor.reload();
diff --git a/addons/web_editor/static/src/js/inline.js b/addons/web_editor/static/src/js/inline.js
index 2b6ee1c6595..8f63d603b20 100644
--- a/addons/web_editor/static/src/js/inline.js
+++ b/addons/web_editor/static/src/js/inline.js
@@ -57,10 +57,10 @@ snippet_editor.Class.include({
         transcoder.class_to_style($editable);
 
         // fix outlook image rendering bug
-        _.each(['width', 'height'], function(attribute) {
-            $editable.find('img[style*="width"], img[style*="height"]').attr(attribute, function(){
+        _.each(['width', 'height'], function (attribute) {
+            $editable.find('img[style*="width"], img[style*="height"]').attr(attribute, function () {
                 return $(this)[attribute]();
-            }).css(attribute, function(){
+            }).css(attribute, function () {
                 return $(this).get(0).style[attribute] || 'auto';
             });
         });
diff --git a/addons/web_editor/static/src/js/rte.js b/addons/web_editor/static/src/js/rte.js
index becaf978d17..bbd5e6616aa 100644
--- a/addons/web_editor/static/src/js/rte.js
+++ b/addons/web_editor/static/src/js/rte.js
@@ -203,7 +203,7 @@ var history = new History();
 // add focusIn to jQuery to allow to move caret into a div of a contentEditable area
 
 $.extend($.expr[':'],{
-    o_editable: function(node,i,m){
+    o_editable: function (node,i,m) {
         while (node) {
             if (node.className) {
                 if (node.className.indexOf('o_not_editable')!==-1 ) {
@@ -423,11 +423,11 @@ var RTE = Widget.extend({
     /**
      * Get HTML cloned element with text nodes escaped for XML storage
      */
-    getEscapedElement: function($el) {
+    getEscapedElement: function ($el) {
         var escaped_el = $el.clone();
         var to_escape = escaped_el.find('*').addBack();
         to_escape = to_escape.not(to_escape.filter('object,iframe,script,style,[data-oe-model][data-oe-model!="ir.ui.view"]').find('*').addBack());
-        to_escape.contents().each(function(){
+        to_escape.contents().each(function () {
             if(this.nodeType == 3) {
                 this.nodeValue = $('<div />').text(this.nodeValue).html();
             }
diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index 28e1a32a55e..31ee5db72fe 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -44,27 +44,68 @@ renderer.createPalette = function ($container, options) {
         return;
     }
 
-    var $color = $container.find('.note-color');
-    var html = $(QWeb.render('web_editor.colorpicker'));
-    var theme = html.find('.theme')
+    var $clpicker = $(QWeb.render('web_editor.colorpicker'));
 
-    $color.find('.palette_theme').prepend(html.find('.theme'));
-    $color.find('.palette_ui').prepend(html.find('.ui'));
-    $color.find('.palette_grayscale').prepend(html.find('.grayscale'));
+    $container.find('.colorpicker').each(function (i, picker) {
+        var $picker = $(picker);
 
-    var $bg = $color.find('.background_toggle .dropdown-menu button');
-    var $fore = $color.find('.foreground_toggle .dropdown-menu button');
+        var $sections = $clpicker.find('.o_colorpicker_section').clone(true);
+
+        var $toggles = $picker.find('.o_colorpicker_section_menu');
+        var $tabs = $picker.find('.o_colorpicker_section_tabs');
+        var $defaultToggle = $toggles.find('li');
+        var $defaultTab = $tabs.find('.tab-pane');
+
+        var newDefaultID = _.uniqueId();
+        $defaultToggle.children('a').attr('href', $defaultToggle.children('a').attr('href') + newDefaultID);
+        $defaultTab.attr('id', $defaultTab.attr('id') + newDefaultID);
+
+        if ($sections.length) {
+            $sections.each(function () {
+                var $section = $(this);
+                var id = 'o_palette_' + $section.data('name') + _.uniqueId();
+
+                var $li = $('<li/>')
+                            .append($('<a/>', {href: '#' + id})
+                                .append($('<i/>', {'class': $section.data('iconClass') || '', html: $section.data('iconContent') || ''})));
+                $defaultToggle.before($li);
+
+                $defaultTab.before($section.addClass('tab-pane').attr('id', id));
+            });
+        } else {
+            var id = 'o_palette_other' + _.uniqueId();
+
+            var $li = $('<li/>')
+                        .append($('<a/>', {href: '#' + id, 'aria-controls': id})
+                            .append($('<i/>', {'class': 'fa fa-magic'})));
+            $toggles.prepend($li);
+
+            $tabs.prepend($('<div/>', {'class': 'tab-pane', id: id}).append($clpicker.clone(true)));
+        }
+
+        $toggles.find('li:first-child').addClass('active');
+        $tabs.find('div:first-child').addClass('active');
+
+        $toggles.on('click mouseover', '> li > a', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            $(this).tab('show');
+        });
+    });
+
+    var $bg = $container.find('.o_background_toggle .dropdown-menu button');
+    var $fore = $container.find('.o_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')
-        );
+        var $el = $(this);
+        var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('bg-' + $el.data('color'));
+        $el.attr('data-event', 'backColor').attr('data-value', className).addClass(className);
     });
     $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 $el = $(this);
+        var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('text-' + $el.data('color'));
+        $el.attr('data-event', 'foreColor').attr('data-value', className).addClass(className);
+    });
 };
 
 var fn_tplPopovers = renderer.tplPopovers;
@@ -92,7 +133,7 @@ renderer.tplPopovers = function (lang, options) {
 
     var $alt = $('<div class="btn-group"/>');
     $alt.prependTo($imagePopover.find('.popover-content'));
-    $alt.append('<button class="btn btn-default btn-sm btn-small" data-event="alt"><strong>Alt: </strong><span class="o_image_alt"></span></button>');
+    $alt.append('<button class="btn btn-default btn-sm btn-small" data-event="alt"><strong>' + _t('Description') + ': </strong><span class="o_image_alt"/></button>');
 
     // padding button
     var $padding = $('<div class="btn-group"/>');
@@ -209,24 +250,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
     fn_boutton_update.call(this, $container, oStyle);
 
-    $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;
-      })
-    })
-
+    $container.find('.note-color').removeClass("hidden");
 
     if (oStyle.image) {
         $container.find('[data-event]').parent().removeClass("active");
@@ -728,17 +752,33 @@ eventHandler.attach = function (oLayoutInfo, options) {
     $(document).on('mousedown', summernote_mousedown);
     $(document).on('mouseup', summernote_mouseup);
     oLayoutInfo.editor().off('click').on('click', function (e) {e.preventDefault();}); // if the content editable is a link
-    oLayoutInfo.editor().on('dblclick', 'img, .media_iframe_video, span.fa, i.fa, span.fa, a.o_image', function (event) {
+    var imageSelector = 'img, .media_iframe_video, span.fa, i.fa, span.fa, a.o_image';
+    var show_tooltip = true;
+    oLayoutInfo.editor().on('dblclick', imageSelector, function (event) {
+        show_tooltip = false;
         if (!$(event.target).closest(".note-toolbar").length) { // prevent icon edition of top bar for default summernote
             new widgets.MediaDialog(oLayoutInfo.editor(), event.target).appendTo(document.body);
         }
     });
+    oLayoutInfo.editor().on('click', imageSelector, function (event) {
+        if (!$(event.target).closest(".note-toolbar").length) { // prevent icon edition of top bar for default summernote
+            setTimeout(function () {
+                if (show_tooltip) {
+                    $(event.target).tooltip({title: _t('Double-click to edit'), trigger: 'manuel', container: 'body'}).tooltip('show');
+                    setTimeout(function () {
+                        $(event.target).tooltip('destroy');
+                    }, 800);
+                }
+            }, 400);
+            show_tooltip = true;
+        }
+    });
     if(oLayoutInfo.editor().is('[data-oe-model][data-oe-type="image"]')) {
         oLayoutInfo.editor().on('click', 'img', function (event) {
             $(event.target).trigger("dblclick");
         });
     }
-    oLayoutInfo.editable().on('mousedown', function(e) {
+    oLayoutInfo.editable().on('mousedown', function (e) {
         if(dom.isImg(e.target)) {
             range.createFromNode(e.target).select();
         }
@@ -898,7 +938,7 @@ $.summernote.lang.odoo = {
       recent: _t('Recent Color'),
       more: _t('More Color'),
       background: _t('Background Color'),
-      foreground: _t('Foreground Color'),
+      foreground: _t('Font Color'),
       transparent: _t('Transparent'),
       setTransparent: _t('Set transparent'),
       reset: _t('Reset'),
diff --git a/addons/web_editor/static/src/js/snippets.animation.js b/addons/web_editor/static/src/js/snippets.animation.js
index bb67d026e3c..f396bafcc30 100644
--- a/addons/web_editor/static/src/js/snippets.animation.js
+++ b/addons/web_editor/static/src/js/snippets.animation.js
@@ -43,7 +43,7 @@ var start = function (editable_mode, $target) {
             else continue;
         }
 
-        $(selector).each(function() {
+        $(selector).each(function () {
             var $snipped_id = $(this);
             if (    !$snipped_id.parents("#oe_snippets").length &&
                     !$snipped_id.parent("body").length &&
@@ -58,7 +58,7 @@ var start = function (editable_mode, $target) {
 };
 
 var stop = function () {
-    $(ready).each(function() {
+    $(ready).each(function () {
         var $snipped_id = $(this);
         if ($snipped_id.data("snippet-view")) {
             $snipped_id.data("snippet-view").stop();
diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js
index 93e09c4e7f0..ef033dc07f3 100644
--- a/addons/web_editor/static/src/js/snippets.editor.js
+++ b/addons/web_editor/static/src/js/snippets.editor.js
@@ -18,7 +18,7 @@ var dummy = editor.dummy;
 ajax.loadXML('/web_editor/static/src/xml/snippets.xml', qweb);
 
 editor.Class.include({
-    init: function() {
+    init: function () {
         var self = this;
         var res = this._super.apply(this, arguments);
         var $editable = this.rte.editable();
@@ -46,10 +46,10 @@ editor.Class.include({
 /* ----- SNIPPET SELECTOR ---- */
 
 $.extend($.expr[':'],{
-    hasData: function(node,i,m){
+    hasData: function (node,i,m) {
         return !!_.toArray(node.dataset).length;
     },
-    data: function(node,i,m){
+    data: function (node,i,m) {
         return $(node).data(m[3]);
     }
 });
@@ -75,28 +75,23 @@ $.fn.extend({
 /* ----- BuildingBlock (managment of drag&drop and focus/blur snippets) ---- */
 
 var BuildingBlock = Widget.extend({
-    template: 'web_editor.snippets',
+    id: "oe_snippets",
     activeSnippets: [],
     init: function (parent, $editable) {
         this.parent = parent;
         this.$editable = $editable;
 
         this._super.apply(this, arguments);
-        if(!$('#oe_manipulators').length){
-            $("<div id='oe_manipulators' class='o_css_editor'></div>").appendTo('body');
+        if(!$('#oe_manipulators').length) {
+            $("<div/>", {id: "oe_manipulators",  'class': "o_css_editor"}).appendTo('body');
         }
         this.$active_snipped_id = false;
         this.snippets = [];
         
         data.instance = this;
     },
-    start: function() {
+    start: function () {
         var self = this;
-        this.$snippet = $("#oe_snippets");
-
-        this.$el
-            .on("mouseenter", function () { self.show(); })
-            .on("mouseleave", function (event) { if (event.clientX>0 && event.clientY>0) self.hide(); });
 
         $(window).resize(function () {
             setTimeout('$(document).click()',0);
@@ -130,8 +125,7 @@ var BuildingBlock = Widget.extend({
                 self.$active_snipped_id.data("snippet-editor").$overlay.addClass('o_keypress');
             }
             if ((event.metaKey || (event.ctrlKey && !event.altKey)) && event.shiftKey && event.keyCode >= 48 && event.keyCode <= 57) {
-                self.$snippet.find('.scroll:first > ul li:eq('+(event.keyCode-49)+') a').trigger("click");
-                self.show();
+                self.$('.scroll:first > ul li:eq('+(event.keyCode-49)+') a').trigger("click");
                 event.preventDefault();
             }
         });
@@ -188,22 +182,19 @@ var BuildingBlock = Widget.extend({
         var self = this;
         var url = this._get_snippet_url();
         if (!url || !url.length) {
-            this.$snippet.detach();
+            this.$el.detach();
             return;
         }
-        this.$el.find("#o_left_bar").addClass("hidden");
         return ajax.jsonRpc(url, 'call', {}).then(function (html) {
             self.compute_snippet_templates(html);
             self.trigger("snippets:ready");
         }, function () {
-            self.$snippet.hide();
             console.warn('Snippets template not found:', url);
         });
     },
     compute_snippet_templates: function (html) {
         var self = this;
         var $html = $(html);
-        var $left_bar = this.$el.find("#o_left_bar");
         var $ul = $html.siblings("ul");
         var $scroll = $html.siblings("#o_scroll");
 
@@ -309,16 +300,14 @@ var BuildingBlock = Widget.extend({
 
         // hide scroll if no snippets defined
         if (!number) {
-            this.$snippet.detach();
-        } else {
-            this.$el.find("#o_left_bar").removeClass("hidden");
+            this.$el.detach();
         }
         $("body").toggleClass("editor_has_snippets", !!number);
 
         // select all default text to edit (if snippet default text)
         self.$snippets.find('.oe_snippet_body, .oe_snippet_body *')
             .contents()
-            .filter(function() {
+            .filter(function () {
                 return this.nodeType === 3 && this.textContent.match(/\S/);
             }).parent().addClass("o_default_snippet_text");
         $(document).on("mouseup", ".o_default_snippet_text", function (event) {
@@ -328,7 +317,6 @@ var BuildingBlock = Widget.extend({
             var r = $.summernote.core.range.create();
             $(r && r.sc).closest(".o_default_snippet_text").removeClass("o_default_snippet_text");
         });
-        // end
 
         // clean t-oe
         $html.find('[data-oe-model], [data-oe-type]').each(function () {
@@ -339,14 +327,13 @@ var BuildingBlock = Widget.extend({
                 }
             }
         });
-        // end
 
         $html.find('.o_not_editable').attr("contentEditable", false);
 
-        $left_bar.html($html);
+        this.$el.html($html);
 
         // animate for list of snippet blocks
-        $left_bar.on('click', '.scroll-link', function (event) {
+        this.$el.on('click', '.scroll-link', function (event) {
             event.preventDefault();
             var targetOffset =  $($(this).attr("href")).position().top - $ul.outerHeight() + $scroll[0].scrollTop;
             $scroll.animate({'scrollTop': targetOffset}, 750);
@@ -367,55 +354,33 @@ var BuildingBlock = Widget.extend({
             }
             $(last).addClass("active");
         });
-        // end
-
-        // display scrollbar
-        $(window).on('resize', function () {
-            $scroll.css("overflow", "");
-            var height = $left_bar.height() - $ul.outerHeight();
-            $scroll.css("height", height);
-            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", "100%");
-            } else {
-                $scroll.css("width", "");
-            }
-        }).trigger('resize');
-        // end
 
         self.make_snippet_draggable(self.$snippets);
     },
 
-    cover_target: function ($el, $target){
-        if($el.data('not-cover_target')) return;
+    cover_target: function ($el, $target) {
+        if ($el.data('not-cover_target')) {
+            return;
+        }
         var pos = $target.offset();
         var mt = parseInt($target.css("margin-top") || 0);
         var mb = parseInt($target.css("margin-bottom") || 0);
-        var width = $target.outerWidth();
-        var bigger = pos.left+width > $("body").outerWidth()-8;
         $el.css({
-            'width': width,
-            'top': pos.top - mt - 5,
-            'left': pos.left-1
+            width: $target.outerWidth(),
+            left: pos.left,
+            top: pos.top - mt,
         });
-        $el.find(".oe_handle.e,.oe_handle.w").css({'height': $target.outerHeight() + mt + mb+1});
-        if (bigger) {
-            $el.find(".oe_handle.e").css({right: 0, margin: 0})
-                .find("div").css({right: 0, left: 'auto'});
-        } else {
-            $el.find(".oe_handle.e").css({right: "", margin: ""})
-                .find("div").css({right: "", left: ""});
-        }
-        $el.find(".oe_handle.s").css({'top': $target.outerHeight() + mt + mb});
-        $el.find(".oe_handle.size").css({'top': $target.outerHeight() + mt});
-        $el.find(".oe_handle.s,.oe_handle.n").css({'width': width-2});
+        $el.find('.oe_handles').css({
+            height: $target.outerHeight(true),
+        });
+
+        $el.toggleClass('o_top_cover', pos.top <= (this.$('#o_scroll').position().top + 15));
     },
 
     show_blocks: function () {
         var self = this;
         var cache = {};
-        this.$snippet.find(".o_panel").each(function () {
+        this.$(".o_panel").each(function () {
             var catcheck = false;
             var $category = $(this);
             $category.find(".oe_snippet_body").each(function () {
@@ -450,15 +415,6 @@ var BuildingBlock = Widget.extend({
             $('#oe_snippets .scroll a[data-toggle="tab"][href="#' + $category.attr("id") + '"]').toggle(catcheck);
         });
     },
-    show: function () {
-        var self = this;
-        this.make_active(false);
-        this.$el.addClass("o_open");
-        this.show_blocks();
-    },
-    hide: function () {
-        this.$el.removeClass("o_open");
-    },
     bind_snippet_click_editor: function () {
         var self = this;
         var snipped_event_flag;
@@ -541,7 +497,7 @@ var BuildingBlock = Widget.extend({
             this.cover_target($snippet.data('overlay'), $snippet);
             this.snippet_focus($snippet);
         }
-        this.$snippet.trigger('snippet-activated', $snippet);
+        this.$el.trigger('snippet-activated', $snippet);
         if ($snippet) {
             $snippet.trigger('snippet-activated', $snippet);
         }
@@ -554,7 +510,7 @@ var BuildingBlock = Widget.extend({
     },
 
     // activate drag and drop for the snippets in the snippet toolbar
-    make_snippet_draggable: function($snippets){
+    make_snippet_draggable: function ($snippets) {
         var self = this;
         var $tumb = $snippets.find(".oe_snippet_thumbnail_img:first");
         var left = $tumb.outerWidth()/2;
@@ -572,8 +528,7 @@ var BuildingBlock = Widget.extend({
                 'left': left,
                 'top': top
             },
-            start: function(){
-                self.hide();
+            start: function () {
                 dropped = false;
                 // snippet_selectors => to get drop-near, drop-in
                 $snippet = $(this);
@@ -602,23 +557,25 @@ var BuildingBlock = Widget.extend({
                     return;
                 }
 
+                self.make_active(false);
                 self.activate_insertion_zones($selector_siblings, $selector_children);
 
                 $('.oe_drop_zone').droppable({
-                    over:   function(){
+                    over: function () {
                         dropped = true;
-                        $(this).first().after($toInsert);
+                        $(this).first().after($toInsert).addClass('hidden');
                     },
-                    out:    function(){
+                    out: function () {
                         var prev = $toInsert.prev();
-                        if(this === prev[0]){
+                        if(this === prev[0]) {
                             dropped = false;
                             $toInsert.detach();
+                            $(this).removeClass('hidden');
                         }
-                    }
+                    },
                 });
             },
-            stop: function(ev, ui){
+            stop: function (ev, ui) {
                 $toInsert.removeClass('oe_snippet_body');
                 
                 if (! dropped && self.$editable.find('.oe_drop_zone') && ui.position.top > 3) {
@@ -658,7 +615,7 @@ var BuildingBlock = Widget.extend({
                     $target = $toInsert;
 
                     setTimeout(function () {
-                        self.$snippet.trigger('snippet-dropped', $target);
+                        self.$el.trigger('snippet-dropped', $target);
 
                         animation.start(true, $target);
 
@@ -693,8 +650,8 @@ var BuildingBlock = Widget.extend({
     },
 
     // return the original snippet in the editor bar from a snippet id (string)
-    get_snippet_from_id: function(id){
-        return $('.oe_snippet').filter(function(){
+    get_snippet_from_id: function (id) {
+        return $('.oe_snippet').filter(function () {
                 return $(this).data('option') === id;
             }).first();
     },
@@ -704,12 +661,12 @@ var BuildingBlock = Widget.extend({
     //   in case the selected elements have children themselves, dropzones will be interleaved
     //   with them.
     // selector.siblings -> will insert drop zones after and before selected elements
-    activate_insertion_zones: function($selector_siblings, $selector_children){
+    activate_insertion_zones: function ($selector_siblings, $selector_children) {
         var self = this;
-        var zone_template = $("<div class='oe_drop_zone oe_insert'></div>");
+        var zone_template = $("<div class='oe_drop_zone oe_insert'/>");
 
         if ($selector_children) {
-            $selector_children.each(function (){
+            $selector_children.each(function () {
                 var $zone = $(this);
                 var css = window.getComputedStyle(this);
                 var float = css.float || css.cssFloat;
@@ -719,7 +676,7 @@ var BuildingBlock = Widget.extend({
                 var node = $drop[0].previousSibling;
                 var test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === "BR"));
                 if (test) {
-                    $drop.addClass("oe_vertical oe_vertical_text").css({
+                    $drop.addClass("oe_vertical").css({
                             'height': parseInt(window.getComputedStyle($zone[0]).lineHeight),
                             'float': 'none',
                             'display': 'inline-block'
@@ -734,7 +691,7 @@ var BuildingBlock = Widget.extend({
                 var node = $drop[0].nextSibling;
                 var test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === "BR"));
                 if (test) {
-                    $drop.addClass("oe_vertical oe_vertical_text").css({
+                    $drop.addClass("oe_vertical").css({
                             'height': parseInt(window.getComputedStyle($zone[0]).lineHeight),
                             'float': 'none',
                             'display': 'inline-block'
@@ -752,20 +709,20 @@ var BuildingBlock = Widget.extend({
         }
 
         if ($selector_siblings) {
-            $selector_siblings.filter(':not(.oe_drop_zone):not(.oe_drop_clone)').each(function (){
+            $selector_siblings.filter(':not(.oe_drop_zone):not(.oe_drop_clone)').each(function () {
                 var $zone = $(this);
                 var $drop;
                 var css = window.getComputedStyle(this);
                 var float = css.float || css.cssFloat;
 
-                if($zone.prev('.oe_drop_zone:visible').length === 0){
+                if($zone.prev('.oe_drop_zone:visible').length === 0) {
                     $drop = zone_template.clone();
                     if (float === "left" || float === "right") {
                         $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
                     }
                     $zone.before($drop);
                 }
-                if($zone.next('.oe_drop_zone:visible').length === 0){
+                if($zone.next('.oe_drop_zone:visible').length === 0) {
                     $drop = zone_template.clone();
                     if (float === "left" || float === "right") {
                         $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
@@ -785,7 +742,7 @@ var BuildingBlock = Widget.extend({
 
         // Cleaning consecutive zone and up zones placed between floating or inline elements. We do not like these kind of zones.
         var $zones = self.$editable.find('.oe_drop_zone:not(.oe_vertical)');
-        $zones.each(function (){
+        $zones.each(function () {
             var zone = $(this);
             var prev = zone.prev();
             var next = zone.next();
@@ -799,12 +756,12 @@ var BuildingBlock = Widget.extend({
             var disp_prev  = prev.css('display') ||  null;
             var disp_next  = next.css('display') ||  null;
             if(     (float_prev === 'left' || float_prev === 'right')
-                &&  (float_next === 'left' || float_next === 'right')  ){
+                &&  (float_next === 'left' || float_next === 'right')  ) {
                 zone.remove();
             }else if( !( disp_prev === null
                       || disp_next === null
                       || disp_prev === 'block'
-                      || disp_next === 'block' )){
+                      || disp_next === 'block' )) {
                 zone.remove();
             }
         });
@@ -812,21 +769,21 @@ var BuildingBlock = Widget.extend({
 
     // generate drop zones covering the elements selected by the selector
     // we generate overlay drop zones only to get an idea of where the snippet are, the drop
-    activate_overlay_zones: function($targets){
+    activate_overlay_zones: function ($targets) {
         var self = this;
 
-        function is_visible($el){
+        function is_visible($el) {
             return     $el.css('display')    != 'none'
                     && $el.css('opacity')    != '0'
                     && $el.css('visibility') != 'hidden';
         }
 
         // filter out invisible elements
-        $targets = $targets.filter(function(){ return is_visible($(this)); });
+        $targets = $targets.filter(function () { return is_visible($(this)); });
 
         // filter out elements with invisible parents
-        $targets = $targets.filter(function(){
-            var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
+        $targets = $targets.filter(function () {
+            var parents = $(this).parents().filter(function () { return !is_visible($(this)); });
             return parents.length === 0;
         });
 
@@ -839,7 +796,7 @@ var BuildingBlock = Widget.extend({
                 if (document.body && document.body.addEventListener) {
                     $zone.on("click mousedown mousedown", function passThrough(event) {
                         event.preventDefault();
-                        $target.each(function() {
+                        $target.each(function () {
                            // check if clicked point (taken from event) is inside element
                             event.srcElement = this;
                             $(this).trigger(event.type);
@@ -849,8 +806,8 @@ var BuildingBlock = Widget.extend({
                 }
 
                 $zone.appendTo('#oe_manipulators');
-                $zone.data('target',$target);
-                $target.data('overlay',$zone);
+                $zone.data('target', $target);
+                $target.data('overlay', $zone);
 
                 var timer;
                 $target.closest('.o_editable').on("content_changed", function (event) {
@@ -890,7 +847,7 @@ var Editor = Class.extend({
     },
 
     // activate drag and drop for the snippets in the snippet toolbar
-    _drag_and_drop: function(){
+    _drag_and_drop: function () {
         var self = this;
         this.dropped = false;
         this.$overlay.draggable({
@@ -902,7 +859,7 @@ var Editor = Class.extend({
                 left: 18,
                 top: 14
             },
-            helper: function() {
+            helper: function () {
                 var $clone = $(this).clone().css({width: "24px", height: "24px", border: 0});
                 $clone.find(".oe_overlay_options >:not(:contains(.oe_snippet_move)), .oe_handle").remove();
                 $clone.find(":not(.glyphicon)").css({position: 'absolute', top: 0, left: 0});
@@ -913,25 +870,24 @@ var Editor = Class.extend({
             stop: _.bind(self._drag_and_drop_stop, self)
         });
     },
-    _drag_and_drop_after_insert_dropzone: function (){},
-    _drag_and_drop_active_drop_zone: function ($zones){
+    _drag_and_drop_after_insert_dropzone: function () {},
+    _drag_and_drop_active_drop_zone: function ($zones) {
         var self = this;
         $zones.droppable({
-            over:   function(){
+            over:   function () {
                 $(".oe_drop_zone.hide").removeClass("hide");
                 $(this).addClass("hide").first().after(self.$target);
                 self.dropped = true;
             },
-            out:    function(){
+            out:    function () {
                 $(this).removeClass("hide");
                 self.$target.detach();
                 self.dropped = false;
             },
         });
     },
-    _drag_and_drop_start: function (){
+    _drag_and_drop_start: function () {
         var self = this;
-        self.buildingBlock.hide();
         self.buildingBlock.editor_busy = true;
         self.size = {
             width: self.$target.width(),
@@ -952,6 +908,7 @@ var Editor = Class.extend({
             else $selector_children = $selector_children.add(self.selector_children[i].all());
         }
 
+        self.buildingBlock.make_active(false);
         self.buildingBlock.activate_insertion_zones($selector_siblings, $selector_children);
 
         $("body").addClass('move-important');
@@ -959,7 +916,7 @@ var Editor = Class.extend({
         self._drag_and_drop_after_insert_dropzone();
         self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
     },
-    _drag_and_drop_stop: function (){
+    _drag_and_drop_stop: function () {
         var self = this;
         var $dropzone = this.$target.prev();
         var prev = $dropzone.length && $dropzone[0].previousSibling;
@@ -984,7 +941,7 @@ var Editor = Class.extend({
                 $parent.prepend(this.$target);
             }
 
-            for (var i in this.styles){
+            for (var i in this.styles) {
                 this.styles[i].on_move();
             }
         }
@@ -992,9 +949,9 @@ var Editor = Class.extend({
         self.buildingBlock.editor_busy = false;
 
         self.get_parent_block();
-        setTimeout(function () {
+        _.defer(function () {
             self.buildingBlock.cover_target(self.$target.data('overlay'), self.$target);
-        },0);
+        });
     },
 
     load_style_options: function () {
@@ -1071,7 +1028,7 @@ var Editor = Class.extend({
 
         this.$target.after($clone);
         this.buildingBlock.call_for_all_snippets($clone, function (editor, $snippet) {
-            for (var i in editor.styles){
+            for (var i in editor.styles) {
                 editor.styles[i].on_clone($snippet);
             }
         });
@@ -1086,7 +1043,7 @@ var Editor = Class.extend({
 
         var index = _.indexOf(this.buildingBlock.snippets, this.$target.get(0));
         this.buildingBlock.call_for_all_snippets(this.$target, function (editor, $snippet) {
-            for (var i in editor.styles){
+            for (var i in editor.styles) {
                 editor.styles[i].on_remove();
             }
         });
@@ -1120,7 +1077,7 @@ var Editor = Class.extend({
     *  (after the insertion of this.$body, if this.$body exists)
     */
     drop_and_build_snippet: function () {
-        for (var i in this.styles){
+        for (var i in this.styles) {
             this.styles[i].drop_and_build_snippet();
         }
     },
@@ -1130,7 +1087,7 @@ var Editor = Class.extend({
     */
     on_focus : function () {
         this.$overlay.addClass('oe_active');
-        for (var i in this.styles){
+        for (var i in this.styles) {
             this.styles[i].on_focus();
         }
     },
@@ -1139,7 +1096,7 @@ var Editor = Class.extend({
     *  This method is called when the user click outside the snippet in the dom, after a focus
     */
     on_blur : function () {
-        for (var i in this.styles){
+        for (var i in this.styles) {
             this.styles[i].on_blur();
         }
         this.$overlay.removeClass('oe_active');
diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index cbf8fea5c4e..811d0e9c175 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -1,766 +1,747 @@
 odoo.define('web_editor.snippets.options', function (require) {
-'use strict';
+    'use strict';
 
-var Class = require('web.Class');
-var ajax = require('web.ajax');
-var core = require('web.core');
-var base = require('web_editor.base');
-var editor = require('web_editor.editor');
-var widget = require('web_editor.widget');
-var animation = require('web_editor.snippets.animation');
+    var Class = require('web.Class');
+    var ajax = require('web.ajax');
+    var core = require('web.core');
+    var Dialog = require('web.Dialog');
+    var base = require('web_editor.base');
+    var editor = require('web_editor.editor');
+    var widget = require('web_editor.widget');
+    var animation = require('web_editor.snippets.animation');
 
-var qweb = core.qweb;
+    var qweb = core.qweb;
+    var _t = core._t;
 
-/* ----- Editor option (object link the the xml with data-js) ---- */
+    /* ----- Editor option (object link the the xml with data-js) ---- */
 
-var Option = Class.extend({
-    // initialisation (don't overwrite)
-    init: function (BuildingBlock, editor, $target, option_id) {
-        this.buildingBlock = BuildingBlock;
-        this.editor = editor;
-        this.$target = $target;
-        var option = this.buildingBlock.templateOptions[option_id];
-        var styles = this.$target.data("snippet-option-ids") || {};
-        styles[option_id] = this;
-        this.$target.data("snippet-option-ids", styles);
-        this.$overlay = this.$target.data('overlay') || $('<div>');
-        this.option= option_id;
-        this.$el = option.$el.find(">li").clone();
-        this.data = option.$el.data();
-    },
+    var SnippetOption = Class.extend({
+        // initialisation (don't overwrite)
+        init: function (BuildingBlock, editor, $target, option_id) {
+            this.buildingBlock = BuildingBlock;
+            this.editor = editor;
+            this.$target = $target;
+            var option = this.buildingBlock.templateOptions[option_id];
+            var styles = this.$target.data("snippet-option-ids") || {};
+            styles[option_id] = this;
+            this.$target.data("snippet-option-ids", styles);
+            this.$overlay = this.$target.data('overlay') || $('<div>');
+            this.option= option_id;
+            this.$el = option.$el.find(">li").clone();
+            this.data = option.$el.data();
+        },
 
-    // helper for this.$target.find
-    $: function (selector) {
-        return this.$target(selector);
-    },
+        // helper for this.$target.find
+        $: function (selector) {
+            return this.$target(selector);
+        },
 
-    _bind_li_menu: function () {
-        this.$el.filter("li:hasData").find('a:first')
-            .off('mouseenter click')
-            .on('mouseenter click', _.bind(this._mouse, this));
+        _bind_li_menu: function () {
+            this.$el.filter("li:hasData").find('a:first')
+                .off('mouseenter click')
+                .on('mouseenter click', _.bind(this._mouse, this));
 
-        this.$el
-            .off('mouseenter click', "li:hasData a")
-            .on('mouseenter click', "li:hasData a", _.bind(this._mouse, this));
+            this.$el
+                .off('mouseenter click', "li:hasData a")
+                .on('mouseenter click', "li:hasData a", _.bind(this._mouse, this));
 
-        this.$el.closest("ul").add(this.$el)
-            .off('mouseleave')
-            .on('mouseleave', _.bind(this.reset, this));
+            this.$el.closest("ul").add(this.$el)
+                .off('mouseleave')
+                .on('mouseleave', _.bind(this.reset, this));
 
-        this.$el
-            .off('mouseleave', "ul")
-            .on('mouseleave', "ul", _.bind(this.reset, this));
+            this.$el
+                .off('mouseleave', "ul")
+                .on('mouseleave', "ul", _.bind(this.reset, this));
 
-        this.reset_methods = [];
-    },
+            this.reset_methods = [];
+        },
 
-    /**
-     * this method handles mouse:over and mouse:leave on the snippet editor menu
-     */
-     _time_mouseleave: null,
-    _mouse: function (event) {
-        var $next = $(event.currentTarget).parent();
+        /**
+         * this method handles mouse:over and mouse:leave on the snippet editor menu
+         */
+         _time_mouseleave: null,
+        _mouse: function (event) {
+            var $next = $(event.currentTarget).parent();
 
-        // triggers preview or apply methods if a menu item has been clicked
-        this.select(event.type === "click" ? "click" : "over", $next);
-        if (event.type === 'click') {
+            // triggers preview or apply methods if a menu item has been clicked
+            this.select(event.type === "click" ? "click" : "over", $next);
+            if (event.type === 'click') {
+                this.set_active();
+                this.$target.trigger("snippet-option-change", [this]);
+            } else {
+                this.$target.trigger("snippet-option-preview", [this]);
+            }
+        },
+        /*
+        *  select and set item active or not (add highlight item and his parents)
+        *  called before start
+        */
+        set_active: function () {
+            var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
+            this.$el.find('[data-toggle_class], [data-select_class]')
+                .add(this.$el)
+                .filter('[data-toggle_class], [data-select_class]')
+                .removeClass("active")
+                .filter('[data-toggle_class="' + classes.join('"], [data-toggle_class="') + '"] ,'+
+                    '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
+                .addClass("active");
+        },
+
+        start: function () {
             this.set_active();
-            this.$target.trigger("snippet-option-change", [this]);
-        } else {
-            this.$target.trigger("snippet-option-preview", [this]);
-        }
-    },
-    /*
-    *  select and set item active or not (add highlight item and his parents)
-    *  called before start
-    */
-    set_active: function () {
-        var classes = _.uniq((this.$target.attr("class") || '').split(/\s+/));
-        this.$el.find('[data-toggle_class], [data-select_class]')
-            .add(this.$el)
-            .filter('[data-toggle_class], [data-select_class]')
-            .removeClass("active")
-            .filter('[data-toggle_class="' + classes.join('"], [data-toggle_class="') + '"] ,'+
-                '[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
-            .addClass("active");
-    },
+            this.$target.on('snippet-option-reset', _.bind(this.set_active, this));
+            this._bind_li_menu();
+        },
 
-    start: function () {
-        this.set_active();
-        this.$target.on('snippet-option-reset', _.bind(this.set_active, this));
-        this._bind_li_menu();
-    },
+        on_focus : function () {
+            this._bind_li_menu();
+        },
 
-    on_focus : function () {
-        this._bind_li_menu();
-    },
+        on_blur : function () {
+        },
 
-    on_blur : function () {
-    },
+        on_clone: function ($clone) {
+        },
 
-    on_clone: function ($clone) {
-    },
+        on_move: function () {
+        },
 
-    on_move: function () {
-    },
+        on_remove: function () {
+        },
 
-    on_remove: function () {
-    },
+        drop_and_build_snippet: function () {
+        },
 
-    drop_and_build_snippet: function () {
-    },
+        reset: function () {
+            var self = this;
+            var lis = self.$el.add(self.$el.find('li')).filter('.active').get();
+            lis.reverse();
+            _.each(lis, function (li) {
+                var $li = $(li);
+                for (var k in self.reset_methods) {
+                    var method = self.reset_methods[k];
+                    if ($li.is('[data-'+method+']') || $li.closest('[data-'+method+']').size()) {
+                        delete self.reset_methods[k];
+                    }
+                }
+                self.select("reset", $li);
+            });
 
-    reset: function () {
-        var self = this;
-        var lis = self.$el.add(self.$el.find('li')).filter('.active').get();
-        lis.reverse();
-        _.each(lis, function (li) {
-            var $li = $(li);
             for (var k in self.reset_methods) {
                 var method = self.reset_methods[k];
-                if ($li.is('[data-'+method+']') || $li.closest('[data-'+method+']').size()) {
-                    delete self.reset_methods[k];
+                if (method) {
+                    self[method]("reset", null);
                 }
             }
-            self.select("reset", $li);
-        });
+            self.reset_methods = [];
+            self.$target.trigger("snippet-option-reset", [this]);
+        },
 
-        for (var k in self.reset_methods) {
-            var method = self.reset_methods[k];
-            if (method) {
-                self[method]("reset", null);
+        // call data-method args as method (data-only can be used)
+        select: function (type, $li) {
+            var self = this,
+                $methods = [],
+                el = $li[0];
+
+            if ($li.data('only') && type !== $li.data('only')) {
+                return;
             }
-        }
-        self.reset_methods = [];
-        self.$target.trigger("snippet-option-reset", [this]);
-    },
 
-    // call data-method args as method (data-only can be used)
-    select: function (type, $li) {
-        var self = this,
-            $methods = [],
-            el = $li[0];
-
-        if ($li.data('only') && type !== $li.data('only')) {
-            return;
-        }
-
-        if (type==="click") {
-            this.reset();
-            this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
-        }
-
-        function filter (k) { return k !== 'oeId' && k !== 'oeModel' && k !== 'oeField' && k !== 'oeXpath' && k !== 'oeSourceId' && k !== 'only';}
-        function hasData(el) {
-            for (var k in el.dataset) {
-                if (filter (k)) {
-                    return true;
-                }
+            if (type==="click") {
+                this.reset();
+                this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
             }
-            return false;
-        }
-        function method(el) {
-            var data = {};
-            for (var k in el.dataset) {
-                if (filter (k)) {
-                    data[k] = el.dataset[k];
-                }
-            }
-            return data;
-        }
 
-        while (el && this.$el.is(el) || _.some(this.$el.map(function () {return $.contains(this, el);}).get()) ) {
-            if (hasData(el)) {
-                $methods.push(el);
-            }
-            el = el.parentNode;
-        }
-
-        $methods.reverse();
-
-        _.each($methods, function (el) {
-            var $el = $(el);
-            var methods = method(el);
-
-            for (var k in methods) {
-                if (self[k]) {
-                    if (type !== "reset" && self.reset_methods.indexOf(k) === -1) {
-                        self.reset_methods.push(k);
+            function filter (k) { return k !== 'oeId' && k !== 'oeModel' && k !== 'oeField' && k !== 'oeXpath' && k !== 'oeSourceId' && k !== 'only';}
+            function hasData(el) {
+                for (var k in el.dataset) {
+                    if (filter (k)) {
+                        return true;
                     }
-                    self[k](type, methods[k], $el);
-                } else {
-                    console.error("'"+self.option+"' snippet have not method '"+k+"'");
                 }
-            }
-        });
-    },
-
-    // default method for snippet
-    toggle_class: function (type, value, $li) {
-        var $lis = this.$el.find('[data-toggle_class]').add(this.$el).filter('[data-toggle_class]');
-
-        function map ($lis) {
-            return $lis.map(function () {return $(this).data("toggle_class");}).get().join(" ");
-        }
-        var classes = map($lis);
-        var active_classes = map($lis.filter('.active, :has(.active)'));
-
-        this.$target.removeClass(classes);
-        this.$target.addClass(active_classes);
-
-        if (type !== 'reset') {
-            this.$target.toggleClass(value);
-        }
-    },
-    select_class: function (type, value, $li) {
-        var $lis = this.$el.find('[data-select_class]').add(this.$el).filter('[data-select_class]');
-
-        var classes = $lis.map(function () {return $(this).data('select_class');}).get();
-
-        this.$target.removeClass(classes.join(" "));
-        if(value) this.$target.addClass(value);
-    },
-    eval: function (type, value, $li) {
-        var fn = new Function("node", "type", "value", "$li", value);
-        fn.call(this, this, type, value, $li);
-    },
-
-    clean_for_save: editor.dummy
-});
-
-/* ----- default options ---- */
-
-// to remove after 9.0 (keep for compatibility without update with -u)
-var media = Option.extend({
-    start: function () {
-        var self =this;
-        this._super();
-        animation.start(true, this.$target);
-        this.$target.closest(".o_editable").on("content_changed", function () {
-            if (!self.$target.parent().length) {
-                self.$target.remove();
-                self.$overlay.remove();
-            }
-        });
-    },
-    edition: function (type, value) {
-        if(type !== "click") return;
-        var self = this;
-        var _editor = new widget.MediaDialog(this.$target.closest('.o_editable'), this.$target[0]);
-        _editor.appendTo(document.body);
-        _editor.on('saved', this, function (item, old) {
-            self.editor.on_blur();
-            self.buildingBlock.make_active(false);
-            if (self.$target.parent().data("oe-field") !== "image") {
-                setTimeout(function () {
-                    self.buildingBlock.make_active($(item));
-                },0);
-            }
-            $(item).trigger("content_changed");
-        });
-    },
-    on_focus : function () {
-        var self = this;
-        var $parent = this.$target.parent();
-
-        if ($parent.data("oe-field") === "image" && $parent.hasClass('o_editable')) {
-            this.$overlay.addClass("hidden");
-            self.edition('click', null);
-            self.buildingBlock.make_active(false);
-        }
-    }
-});
-
-var colorpicker = Option.extend({
-    start: function () {
-        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) {
-            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'));
-            this.$el.removeData('area').removeAttr('area');
-        }
-
-        var classes = [];
-        this.$el.find(".colorpicker button").map(function () {
-            var $color = $(this);
-            var color = $color.attr("class");
-            if (self.$target.hasClass(color)) {
-                self.color = color;
-                $color.parent().addClass("selected");
             }
-            classes.push(color);
-        });
-        this.classes = classes.join(" ");
+            function method(el) {
+                var data = {};
+                for (var k in el.dataset) {
+                    if (filter (k)) {
+                        data[k] = el.dataset[k];
+                    }
+                }
+                return data;
+            }
 
-        this.bind_events();
-        return res;
-    },
-    bind_events: function () {
-        var self = this;
-        var $td = this.$el.find(".tab");
-        var $colors = this.$el.find(".colorpicker button");
-        $colors
-            .mouseenter(function () {
-                self.$target.removeClass(self.classes).addClass($(this).attr("class"));
-            })
-            .mouseleave(function () {
-                self.$target.removeClass(self.classes)
-                    .addClass($colors.filter(".selected").attr("class"));
-            })
-            .click(function () {
-                $colors.removeClass("selected");
-                $(this).addClass("selected");
-                self.$target.closest(".o_editable").trigger("content_changed");
+            while (el && this.$el.is(el) || _.some(this.$el.map(function () {return $.contains(this, el);}).get()) ) {
+                if (hasData(el)) {
+                    $methods.push(el);
+                }
+                el = el.parentNode;
+            }
+
+            $methods.reverse();
+
+            _.each($methods, function (el) {
+                var $el = $(el);
+                var methods = method(el);
+
+                for (var k in methods) {
+                    if (self[k]) {
+                        if (type !== "reset" && self.reset_methods.indexOf(k) === -1) {
+                            self.reset_methods.push(k);
+                        }
+                        self[k](type, methods[k], $el);
+                    } else {
+                        console.error("'"+self.option+"' snippet have not method '"+k+"'");
+                    }
+                }
             });
-    }
-});
+        },
 
-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')
+        // default method for snippet
+        toggle_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-toggle_class]').add(this.$el).filter('[data-toggle_class]');
+
+            function map ($lis) {
+                return $lis.map(function () {return $(this).data("toggle_class");}).get().join(" ");
             }
-        })
-    },
-    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')
-        })
+            var classes = map($lis);
+            var active_classes = map($lis.filter('.active, :has(.active)'));
 
-        // 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');
+            this.$target.removeClass(classes);
+            this.$target.addClass(active_classes);
 
-        } 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')
+            if (type !== 'reset') {
+                this.$target.toggleClass(value);
+            }
+        },
+        select_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-select_class]').add(this.$el).filter('[data-select_class]');
+
+            var classes = $lis.map(function () {return $(this).data('select_class');}).get();
+
+            this.$target.removeClass(classes.join(" "));
+            if(value) this.$target.addClass(value);
+        },
+        eval: function (type, value, $li) {
+            var fn = new Function("node", "type", "value", "$li", value);
+            fn.call(this, this, type, value, $li);
+        },
+
+        clean_for_save: editor.dummy
+    });
+    var registry = {};
+
+    /* ----- default options ---- */
+
+    // to remove after 9.0 (keep for compatibility without update with -u)
+    registry.media = SnippetOption.extend({
+        start: function () {
+            var self =this;
+            this._super();
+            animation.start(true, this.$target);
+            this.$target.closest(".o_editable").on("content_changed", function () {
+                if (!self.$target.parent().length) {
+                    self.$target.remove();
+                    self.$overlay.remove();
+                }
+            });
+        },
+        edition: function (type, value) {
+            if(type !== "click") return;
+            var self = this;
+            var _editor = new widget.MediaDialog(this.$target.closest('.o_editable'), this.$target[0]);
+            _editor.appendTo(document.body);
+            _editor.on('saved', this, function (item, old) {
+                self.editor.on_blur();
+                self.buildingBlock.make_active(false);
+                if (self.$target.parent().data("oe-field") !== "image") {
+                    setTimeout(function () {
+                        self.buildingBlock.make_active($(item));
+                    },0);
+                }
+                $(item).trigger("content_changed");
+            });
+        },
+        on_focus : function () {
+            var self = this;
+            var $parent = this.$target.parent();
+
+            if ($parent.data("oe-field") === "image" && $parent.hasClass('o_editable')) {
+                this.$overlay.addClass("hidden");
+                self.edition('click', null);
+                self.buildingBlock.make_active(false);
+            }
         }
+    });
 
-        var bg_pos = self.$target.css('background-position').split(' '),
-            bg_siz = self.$target.css('background-size').split(' ');
+    registry.colorpicker = SnippetOption.extend({
+        start: function () {
+            var self = this;
+            var res = this._super();
 
-        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('%',''))
-        }
+            if (!this.$el.find('.colorpicker').length) {
+                var $pt = $(qweb.render('web_editor.snippet.option.colorpicker'));
+                var $clpicker = $(qweb.render('web_editor.colorpicker'));
 
-        // Collapse events
-        $('#collapse_cover').on('show.bs.collapse', function(){
-            $('#radio1').prop('checked', true);
-            $modal.find("#bg_size").val('o_bg_img_cover');
-        });
+                var $toggles = $pt.find('.o_colorpicker_section_menu');
+                var $tabs = $pt.find('.o_colorpicker_section_tabs');
 
-        $('#collapse_contain').on('show.bs.collapse', function(){
-            $('#radio2').prop('checked', true);
-            $modal.find("#bg_size").val('o_bg_img_contain');
-        });
+                var $sections = $clpicker.find('.o_colorpicker_section');
+                if ($sections.length) {
+                    $sections.each(function () {
+                        var $section = $(this);
+                        var id = 'o_palette_' + $section.data('name') + _.uniqueId();
 
-        $('#collapse_custom').on('show.bs.collapse', function(){
-            $('#radio3').prop('checked', true);
-            $modal.find("#bg_size").val('o_bg_img_custom');
-        });
+                        var $li = $('<li/>')
+                                    .append($('<a/>', {href: '#' + id})
+                                        .append($('<i/>', {'class': $section.data('iconClass') || '', html: $section.data('iconContent') || ''})));
+                        $toggles.append($li);
 
-        // Focus Point
-        var img_url  = self.$target.css('background-image').replace(/url\(['"]*|['"]*\)|^none$/g, "");
+                        $tabs.append($section.addClass('tab-pane').attr('id', id));
+                    });
+                    $toggles.find('li').first().addClass('active');
+                    $tabs.find('div').first().addClass('active');
 
-        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')
+                    $toggles.on('click mouseover', '> li > a', function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        $(this).tab('show');
+                    });
                 } else {
-                    self.$target.addClass('o_bg_img_no_repeat')
+                    $toggles.parent().empty().append($clpicker);
                 }
-                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;
-        this._super();
-        var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
-        if (this.$target.hasClass('oe_custom_bg')) {
-            this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
-        }
-    },
-    background: function(type, value, $li) {
-        if (value && value.length) {
-            this.$target.attr("style", 'background-image: url(' + value + '); ' + (this.$target.attr("style") || '').replace(/background-image:[^;]+/, '') );
-            this.$target.addClass("oe_img_bg");
-        } else {
-            this.$target.css("background-image", "");
-            this.$target.removeClass("oe_img_bg").removeClass("oe_custom_bg");
-        }
-    },
-    select_class : function(type, value, $li) {
-        this.background(type, '', $li);
-        this._super(type, value, $li);
-    },
-    choose_image: function(type, value, $li) {
-        if(type !== "click") return;
+                this.$el.find('li').append($pt);
+            }
+            if (this.$el.data('area')) {
+                this.$target = this.$target.find(this.$el.data('area'));
+                this.$el.removeData('area').removeAttr('area');
+            }
 
-        var self = this;
-        var $image = $('<img class="hidden"/>');
-        $image.attr("src", value);
-        $image.appendTo(self.$target);
+            var classes = [];
+            this.$el.find(".colorpicker button").map(function () {
+                var $color = $(this);
+                var className = 'bg-' + $color.data('color');
 
-        var _editor = new widget.MediaDialog(null, $image[0]);
-        _editor.appendTo(document.body);
-        _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
+                $color.addClass(className);
 
-        _editor.on('saved', self, function () {
-            var value = $image.attr("src");
-            $image.remove();
-            self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value);
-            self.background(type, value,$li);
-            self.$target.addClass('oe_custom_bg');
-            self.$target.trigger("snippet-option-change", [self]);
-            self.set_active();
-        });
-        _editor.on('cancel', self, function () {
-            $image.remove();
-        });
-    },
-    set_active: function () {
-        var self = this;
-        var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
-        this._super();
-
-        if (this.$target.hasClass('oe_custom_bg')) {
-            this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
-        }
-
-        this.$el.find('li[data-background]:not([data-background=""])')
-            .removeClass("active")
-            .each(function () {
-                var background = $(this).data("background") || $(this).attr("data-background");
-                if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
-                    $(this).addClass("active");
+                if (self.$target.hasClass(className)) {
+                    self.color = className;
+                    $color.addClass("selected");
                 }
+                classes.push(className);
             });
+            this.classes = classes.join(" ");
 
-        if (!this.$el.find('li[data-background].active').size()) {
-            this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active");
-        } else {
-            this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active");
-        }
-    }
-});
-
-/* t-field options */
-
-var many2one = Option.extend({
-    start: function () {
-        var self = this;
-
-        this.Model = this.$target.data('oe-many2one-model');
-        this.ID = +this.$target.data('oe-many2one-id');
-
-        // create search button and bind search bar
-        this.$btn = $(qweb.render("web_editor.many2one.button"))
-            .insertAfter(this.$overlay.find('.oe_options'));
-
-        this.$ul = this.$btn.find("ul");
-        this.$search = this.$ul.find('li:first');
-        this.$search.find('input').on('mousedown click mouseup keyup keydown', function (e) {
-            e.stopPropagation();
-        });
-
-        // move menu item
-        setTimeout(function () {
-            if (self.$overlay.find('.oe_options').hasClass('hidden')) {
-                self.$btn.css('height', '0').find('> a').addClass('hidden');
-                self.$ul.show().css({
-                    'top': '-24px', 'margin': '0', 'padding': '2px 0', 'position': 'relative'
+            this.bind_events();
+            return res;
+        },
+        bind_events: function () {
+            var self = this;
+            var $colors = this.$el.find(".colorpicker button");
+            $colors
+                .mouseenter(function () {
+                    self.$target.removeClass(self.classes).addClass('bg-' + $(this).data("color"));
+                })
+                .mouseleave(function () {
+                    self.$target.removeClass(self.classes)
+                        .addClass('bg-' + $colors.filter(".selected").data("color"));
+                })
+                .click(function () {
+                    $colors.removeClass("selected");
+                    $(this).addClass("selected");
+                    self.$target.closest(".o_editable").trigger("content_changed");
                 });
-            } else {
-                self.$btn.find('a').on('click', function (e) {
-                    self.clear();
-                });
-            }
-        },0);
 
-        // bind search input
-        this.$search.find('input')
-            .focus()
-            .on('keyup', function(e) {
-                self.find_existing($(this).val());
+            this.$el.find('.note-color-reset').on('click', function () {
+                self.$target.removeClass(self.classes);
             });
-
-        // bind result
-        this.$ul.on('click', "li:not(:first) a", function (e) {
-            self.select_record(this);
-        });
-    },
-
-    on_focus: function () {
-        this.$target.attr('contentEditable', 'false');
-        this.clear();
-        this._super();
-    },
-
-    clear: function () {
-        var self = this;
-        this.$search.siblings().remove();
-        self.$search.find('input').val("");
-        setTimeout(function () {
-            self.$search.find('input').focus();
-        },0);
-    },
-
-    find_existing: function (name) {
-        var self = this;
-        var domain = [];
-        if (!name || !name.length) {
-            self.$search.siblings().remove();
-            return;
         }
-        if (isNaN(+name)) {
-            if (this.Model !== "res.partner") {
-                domain.push(['name', 'ilike', name]);
+    });
+
+    registry.background = SnippetOption.extend({
+        start: function ($change_target) {
+            this.$target = $change_target || this.$target;
+            this._super();
+            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+            if (this.$target.hasClass('oe_custom_bg')) {
+                this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
+            }
+        },
+        background: function (type, value, $li) {
+            if (value && value.length) {
+                this.$target.attr("style", 'background-image: url(' + value + '); ' + (this.$target.attr("style") || '').replace(/background-image:[^;]+/, '') );
+                this.$target.addClass("oe_img_bg");
             } else {
-                domain.push('|', ['name', 'ilike', name], ['email', 'ilike', name]);
+                this.$target.css("background-image", "");
+                this.$target.removeClass("oe_img_bg oe_custom_bg");
             }
-        } else {
-            domain.push(['id', '=', name]);
-        }
+        },
+        select_class : function (type, value, $li) {
+            this.background(type, '', $li);
+            this._super(type, value, $li);
+        },
+        choose_image: function (type, value, $li) {
+            if(type !== "click") return;
 
-        ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: this.Model,
-            method: 'search_read',
-            args: [domain, this.Model === "res.partner" ? ['name', 'display_name', 'city', 'country_id'] : ['name', 'display_name']],
-            kwargs: {
-                order: 'name DESC',
-                limit: 5,
-                context: base.get_context(),
+            var self = this;
+            var $image = $('<img class="hidden"/>');
+            $image.attr("src", value);
+            $image.appendTo(self.$target);
+
+            var _editor = new widget.MediaDialog(null, $image[0]);
+            _editor.appendTo(document.body);
+            _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
+
+            _editor.on('saved', self, function () {
+                var value = $image.attr("src");
+                $image.remove();
+                self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value);
+                self.background(type, value,$li);
+                self.$target.addClass('oe_custom_bg');
+                self.$target.trigger("snippet-option-change", [self]);
+                self.set_active();
+            });
+            _editor.on('cancel', self, function () {
+                $image.remove();
+            });
+        },
+        set_active: function () {
+            var self = this;
+            var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+            this._super();
+
+            if (this.$target.hasClass('oe_custom_bg')) {
+                this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src);
             }
-        }).then(function (result){
-            self.$search.siblings().remove();
-            self.$search.after(qweb.render("web_editor.many2one.search",{contacts:result}));
-        });
-    },
 
-    get_contact_rendering: function (options) {
-        return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: 'ir.qweb.field.contact',
-            method: 'get_record_to_html',
-            args: [[this.ID]],
-            kwargs: {
-                options: options,
-                context: base.get_context(),
-            }
-        });
-    },
-
-    select_record: function (li) {
-        var self = this;
-
-        this.ID = +$(li).data("id");
-        this.$target.attr('data-oe-many2one-id', this.ID).data('oe-many2one-id', this.ID);
-
-        this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
-        this.$target.trigger('content_changed');
-
-        if (self.$target.data('oe-type') === "contact") {
-            $('[data-oe-contact-options]')
-                .filter('[data-oe-model="'+self.$target.data('oe-model')+'"]')
-                .filter('[data-oe-id="'+self.$target.data('oe-id')+'"]')
-                .filter('[data-oe-field="'+self.$target.data('oe-field')+'"]')
-                .filter('[data-oe-contact-options!="'+self.$target.data('oe-contact-options')+'"]')
-                .add(self.$target)
-                .attr('data-oe-many2one-id', self.ID).data('oe-many2one-id', self.ID)
+            this.$el.find('li[data-background]:not([data-background=""])')
+                .removeClass("active")
                 .each(function () {
-                    var $node = $(this);
-                    self.get_contact_rendering($node.data('oe-contact-options'))
-                        .then(function (html){
-                            $node.html(html);
-                        });
+                    var background = $(this).data("background") || $(this).attr("data-background");
+                    if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) {
+                        $(this).addClass("active");
+                    }
                 });
-        } else {
-            self.$target.html($(li).data("name"));
+
+            if (!this.$el.find('li[data-background].active').size()) {
+                this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active");
+            } else {
+                this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active");
+            }
         }
+    });
 
-        setTimeout(function () {
-            self.buildingBlock.make_active(false);
-        },0);
-    }
-});
-
-/* end*/
-
-return {
-    'registry': {
-        'media': media,
-        'colorpicker': colorpicker,
-        'background_position': background_position,
-        'background': background,
-        'many2one': many2one,
-    },
-    'Class': Option
-};
-
+    registry.background_position = SnippetOption.extend({
+        start: function () {
+            var self = this;
+            var $btn = this.$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;
+
+            this.previous_state = [this.$target.attr('class'), this.$target.css('background-size'), this.$target.css('background-position')];
+
+            this.bg_pos = self.$target.css('background-position').split(' ');
+            this.bg_siz = self.$target.css('background-size').split(' ');
+
+            this.modal = new Dialog(null, {
+                title: _t("Background Image Options"),
+                $content: $(qweb.render('web_editor.dialog.background_position')),
+                buttons: [
+                    {text: _t("Ok"), classes: "btn-primary", close: true, click: _.bind(this.save, this)},
+                    {text: _t("Discard"), close: true, click: _.bind(this.discard, this)},
+                ],
+            }).open();
+
+            this.modal.opened().then(function () {
+                // Fetch data form $target
+                var value = ((self.$target.hasClass('o_bg_img_opt_contain'))? 'contain' : ((self.$target.hasClass('o_bg_img_opt_custom'))? 'custom' : 'cover'));
+                self.modal.$("> label > input[value=" + value + "]").prop('checked', true);
+
+                if(self.$target.hasClass("o_bg_img_opt_repeat")) {
+                    self.modal.$("#o_bg_img_opt_contain_repeat").prop('checked', true);
+                    self.modal.$("#o_bg_img_opt_custom_repeat").val('o_bg_img_opt_repeat');
+                } else if (self.$target.hasClass("o_bg_img_opt_repeat_x")) {
+                    self.modal.$("#o_bg_img_opt_custom_repeat").val('o_bg_img_opt_repeat_x');
+                } else if (self.$target.hasClass("o_bg_img_opt_repeat_y")) {
+                    self.modal.$("#o_bg_img_opt_custom_repeat").val('o_bg_img_opt_repeat_y');
+                }
+
+                if(self.bg_pos.length > 1) {
+                    self.bg_pos = {
+                        x: self.bg_pos[0],
+                        y: self.bg_pos[1],
+                    };
+                    self.modal.$("#o_bg_img_opt_custom_pos_x").val(self.bg_pos.x.replace('%', ''));
+                    self.modal.$("#o_bg_img_opt_custom_pos_y").val(self.bg_pos.y.replace('%', ''));
+                }
+                if(self.bg_siz.length > 1) {
+                    self.modal.$("#o_bg_img_opt_custom_size_x").val(self.bg_siz[0].replace('%', ''));
+                    self.modal.$("#o_bg_img_opt_custom_size_y").val(self.bg_siz[1].replace('%', ''));
+                }
+
+                // Focus Point
+                self.$focus  = self.modal.$(".o_focus_point");
+                self.update_pos_information();
+
+                var img_url = /\(['"]?([^'"]+)['"]?\)/g.exec(self.$target.css('background-image'));
+                img_url = (img_url && img_url[1]) || '';
+                var $img = $('<img/>', {'class': 'img img-responsive', src: img_url});
+                $img.on('load', function () {
+                    self.bind_img_events($img);
+                });
+                $img.prependTo(self.modal.$(".o_bg_img_opt_object"));
+
+                // Bind events
+                self.modal.$el.on('change', '> label > input', function (e) {
+                    self.modal.$('> .o_bg_img_opt').addClass('o_hidden')
+                                                   .filter("[data-value=" + e.target.value + "]")
+                                                   .removeClass('o_hidden');
+                });
+                self.modal.$el.on('change', 'input, select', function (e) {
+                    self.save();
+                });
+                self.modal.$("> label > input:checked").trigger('change');
+            });
+        },
+        bind_img_events: function ($img) {
+            var self = this;
+
+            var mousedown = false;
+            $img.on('mousedown', function (e) {
+                mousedown = true;
+            });
+            $img.on('mousemove', function (e) {
+                if (mousedown) {
+                    _update(e);
+                }
+            });
+            $img.on('mouseup', function (e) {
+                self.$focus.addClass('o_with_transition');
+                _update(e);
+                setTimeout(function () {
+                    self.$focus.removeClass('o_with_transition');
+                }, 200);
+                mousedown = false;
+            });
+
+            function _update(e) {
+                var posX = e.pageX - $(e.target).offset().left;
+                var posY = e.pageY - $(e.target).offset().top;
+                self.bg_pos = {
+                    x: clip_value(posX/$img.width()*100).toFixed(2) + '%',
+                    y: clip_value(posY/$img.height()*100).toFixed(2) + '%',
+                };
+                self.update_pos_information();
+                self.save();
+            }
+
+            function clip_value(value) {
+                return Math.max(0, Math.min(value, 100));
+            }
+        },
+        update_pos_information: function () {
+            this.modal.$(".o_bg_img_opt_ui_info .o_x").text(this.bg_pos.x);
+            this.modal.$(".o_bg_img_opt_ui_info .o_y").text(this.bg_pos.y);
+            this.$focus.css({
+                left: this.bg_pos.x,
+                top: this.bg_pos.y,
+            });
+        },
+        save: function () {
+            this.clean();
+
+            var bg_img_size = this.modal.$('> :not(label):not(.o_hidden)').data('value') || 'cover';
+            switch (bg_img_size) {
+                case "cover":
+                    this.$target.css('background-position', this.bg_pos.x + ' ' + this.bg_pos.y);
+                    break;
+                case "contain":
+                    this.$target.addClass('o_bg_img_opt_contain');
+                    this.$target.toggleClass('o_bg_img_opt_repeat', this.modal.$("#o_bg_img_opt_contain_repeat").prop("checked"));
+                    break;
+                case "custom":
+                    this.$target.addClass('o_bg_img_opt_custom');
+                    var sizeX = this.modal.$("#o_bg_img_opt_custom_size_x").val();
+                    var sizeY = this.modal.$("#o_bg_img_opt_custom_size_y").val();
+                    var posX = this.modal.$("#o_bg_img_opt_custom_pos_x").val();
+                    var posY = this.modal.$("#o_bg_img_opt_custom_pos_y").val();
+                    this.$target.addClass(this.modal.$("#o_bg_img_opt_custom_repeat").val())
+                                .css({
+                                    'background-size': ((sizeX)? sizeX + '%' : 'auto') + " " + ((sizeY)? sizeY + '%' : 'auto'),
+                                    'background-position': ((posX)? posX + '%' : 'auto') + " " + ((posY)? posY + '%' : 'auto'),
+                                });
+                    break;
+            }
+        },
+        discard: function () {
+            this.clean();
+            if (this.previous_state) {
+                this.$target.addClass(this.previous_state[0]).css({
+                    'background-size': this.previous_state[1],
+                    'background-position': this.previous_state[2],
+                });
+            }
+        },
+        clean: function () {
+            this.$target.removeClass('o_bg_img_opt_contain o_bg_img_opt_custom o_bg_img_opt_repeat o_bg_img_opt_repeat_x o_bg_img_opt_repeat_y')
+                        .css({
+                            'background-size': '',
+                            'background-position': '',
+                        });
+        },
+    });
+
+    /* t-field options */
+
+    registry.many2one = SnippetOption.extend({
+        start: function () {
+            var self = this;
+
+            this.Model = this.$target.data('oe-many2one-model');
+            this.ID = +this.$target.data('oe-many2one-id');
+
+            // create search button and bind search bar
+            this.$btn = $(qweb.render("web_editor.many2one.button"))
+                .insertAfter(this.$overlay.find('.oe_options'));
+
+            this.$ul = this.$btn.find("ul");
+            this.$search = this.$ul.find('li:first');
+            this.$search.find('input').on('mousedown click mouseup keyup keydown', function (e) {
+                e.stopPropagation();
+            });
+
+            // move menu item
+            setTimeout(function () {
+                if (self.$overlay.find('.oe_options').hasClass('hidden')) {
+                    self.$btn.css('height', '0').find('> a').addClass('hidden');
+                    self.$ul.show().css({
+                        'top': '-24px', 'margin': '0', 'padding': '2px 0', 'position': 'relative'
+                    });
+                } else {
+                    self.$btn.find('a').on('click', function (e) {
+                        self.clear();
+                    });
+                }
+            },0);
+
+            // bind search input
+            this.$search.find('input')
+                .focus()
+                .on('keyup', function (e) {
+                    self.find_existing($(this).val());
+                });
+
+            // bind result
+            this.$ul.on('click', "li:not(:first) a", function (e) {
+                self.select_record(this);
+            });
+        },
+
+        on_focus: function () {
+            this.$target.attr('contentEditable', 'false');
+            this.clear();
+            this._super();
+        },
+
+        clear: function () {
+            var self = this;
+            this.$search.siblings().remove();
+            self.$search.find('input').val("");
+            setTimeout(function () {
+                self.$search.find('input').focus();
+            },0);
+        },
+
+        find_existing: function (name) {
+            var self = this;
+            var domain = [];
+            if (!name || !name.length) {
+                self.$search.siblings().remove();
+                return;
+            }
+            if (isNaN(+name)) {
+                if (this.Model !== "res.partner") {
+                    domain.push(['name', 'ilike', name]);
+                } else {
+                    domain.push('|', ['name', 'ilike', name], ['email', 'ilike', name]);
+                }
+            } else {
+                domain.push(['id', '=', name]);
+            }
+
+            ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+                model: this.Model,
+                method: 'search_read',
+                args: [domain, this.Model === "res.partner" ? ['name', 'display_name', 'city', 'country_id'] : ['name', 'display_name']],
+                kwargs: {
+                    order: 'name DESC',
+                    limit: 5,
+                    context: base.get_context(),
+                }
+            }).then(function (result) {
+                self.$search.siblings().remove();
+                self.$search.after(qweb.render("web_editor.many2one.search",{contacts:result}));
+            });
+        },
+
+        get_contact_rendering: function (options) {
+            return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+                model: 'ir.qweb.field.contact',
+                method: 'get_record_to_html',
+                args: [[this.ID]],
+                kwargs: {
+                    options: options,
+                    context: base.get_context(),
+                }
+            });
+        },
+
+        select_record: function (li) {
+            var self = this;
+
+            this.ID = +$(li).data("id");
+            this.$target.attr('data-oe-many2one-id', this.ID).data('oe-many2one-id', this.ID);
+
+            this.buildingBlock.parent.rte.historyRecordUndo(this.$target);
+            this.$target.trigger('content_changed');
+
+            if (self.$target.data('oe-type') === "contact") {
+                $('[data-oe-contact-options]')
+                    .filter('[data-oe-model="'+self.$target.data('oe-model')+'"]')
+                    .filter('[data-oe-id="'+self.$target.data('oe-id')+'"]')
+                    .filter('[data-oe-field="'+self.$target.data('oe-field')+'"]')
+                    .filter('[data-oe-contact-options!="'+self.$target.data('oe-contact-options')+'"]')
+                    .add(self.$target)
+                    .attr('data-oe-many2one-id', self.ID).data('oe-many2one-id', self.ID)
+                    .each(function () {
+                        var $node = $(this);
+                        self.get_contact_rendering($node.data('oe-contact-options'))
+                            .then(function (html) {
+                                $node.html(html);
+                            });
+                    });
+            } else {
+                self.$target.html($(li).data("name"));
+            }
+
+            setTimeout(function () {
+                self.buildingBlock.make_active(false);
+            },0);
+        }
+    });
+
+    return {
+        registry: registry,
+        Class: SnippetOption,
+    };
 });
diff --git a/addons/web_editor/static/src/js/summernote.js b/addons/web_editor/static/src/js/summernote.js
index 775c4398268..5c9e86dc8df 100644
--- a/addons/web_editor/static/src/js/summernote.js
+++ b/addons/web_editor/static/src/js/summernote.js
@@ -977,7 +977,7 @@ $.summernote.pluginEvents.tab = function (event, editor, layoutInfo, outdent) {
                 $.summernote.pluginEvents.indent(event, editor, layoutInfo);
             }
         } else {
-            if (!outdent){
+            if (!outdent) {
                 if(dom.isText(r.sc)) {
                     var next = r.sc.splitText(r.so);
                 } else {
@@ -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 : "";
         }
     }
@@ -1905,7 +1905,7 @@ eventHandler.modules.editor.redo = function ($popover) {
 
 // use image toolbar if current range is on image
 var fn_editor_currentstyle = eventHandler.modules.editor.currentStyle;
-eventHandler.modules.editor.currentStyle = function(target) {
+eventHandler.modules.editor.currentStyle = function (target) {
     var styleInfo = fn_editor_currentstyle.apply(this, arguments);
     // with our changes for inline editor, the targeted element could be a button of the editor
     if(!styleInfo.image || !dom.isEditable(styleInfo.image)) {
diff --git a/addons/web_editor/static/src/js/translator.js b/addons/web_editor/static/src/js/translator.js
index 39efbe1db2f..6932d5f9ed2 100644
--- a/addons/web_editor/static/src/js/translator.js
+++ b/addons/web_editor/static/src/js/translator.js
@@ -116,7 +116,6 @@ var Translate = Widget.extend({
     },
     start: function () {
         this._super();
-        this.$('button[data-action=save]').prop('disabled', true);
         return this.edit();
     },
     setTarget: function ($target) {
@@ -158,7 +157,7 @@ var Translate = Widget.extend({
     },
     edit: function () {
         var flag = false;
-        window.onbeforeunload = function(event) {
+        window.onbeforeunload = function (event) {
             if ($('.o_editable.o_dirty').length && !flag) {
                 flag = true;
                 setTimeout(function () {flag=false;},0);
@@ -179,7 +178,6 @@ var Translate = Widget.extend({
         var $node = $(node);
         var trans = this.getTranlationObject($node[0]);
         $node.toggleClass('o_dirty', trans.value !== $node.html().replace(/[ \t\n\r]+/, ' '));
-        this.$('button[data-action=save]').prop('disabled', !$('.o_editable.o_dirty').length);
     },
     getTranlationObject: function (node) {
         var $node = $(node);
diff --git a/addons/web_editor/static/src/js/widgets.js b/addons/web_editor/static/src/js/widgets.js
index 165f0b0e914..8db4c66180c 100644
--- a/addons/web_editor/static/src/js/widgets.js
+++ b/addons/web_editor/static/src/js/widgets.js
@@ -39,8 +39,8 @@ var Dialog = Widget.extend({
     close: function () {
         this.$el.modal('hide');
     },
-    stop_escape: function(event) {
-        if($(".modal.in").length>0 && event.which == 27){
+    stop_escape: function (event) {
+        if($(".modal.in").length>0 && event.which == 27) {
             event.stopPropagation();
         }
     }
@@ -72,7 +72,7 @@ var alt = Dialog.extend({
     },
 });
 
-var click_event = function(el, type) {
+var click_event = function (el, type) {
     var evt = document.createEvent("MouseEvents");
     evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
     el.dispatchEvent(evt);
@@ -239,14 +239,14 @@ var ImageDialog = Widget.extend({
         },
         'click button.filepicker': function () {
             var filepicker = this.$('input[type=file]');
-            if (!_.isEmpty(filepicker)){
+            if (!_.isEmpty(filepicker)) {
                 filepicker[0].click();
             }
         },
         'click .js_disable_optimization': function () {
             this.$('input[name="disable_optimization"]').val('1');
             var filepicker = this.$('button.filepicker');
-            if (!_.isEmpty(filepicker)){
+            if (!_.isEmpty(filepicker)) {
                 filepicker[0].click();
             }
         },
@@ -256,8 +256,8 @@ var ImageDialog = Widget.extend({
         'keyup input.url': "change_input",
         //'change select.image-style': 'preview_image',
         'click .existing-attachments [data-src]': 'select_existing',
-        'click .existing-attachment-remove': 'try_remove',
-        'keydown.dismiss.bs.modal': function(){},
+        'click .o_existing_attachment_remove': 'try_remove',
+        'keydown.dismiss.bs.modal': function () {},
     }),
     init: function (parent, media, options) {
         this._super();
@@ -417,7 +417,7 @@ var ImageDialog = Widget.extend({
         this.$('button.filepicker').removeClass('btn-danger btn-success');
         this.$('form').submit();
     },
-    file_selected: function(attachment, error) {
+    file_selected: function (attachment, error) {
         var $button = this.$('button.filepicker');
         if (!error) {
             $button.addClass('btn-success');
@@ -497,14 +497,14 @@ var ImageDialog = Widget.extend({
     },
     selected_existing: function () {
         var self = this;
-        this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
-        var $select = this.$('.existing-attachment-cell [data-src]').filter(function () {
+        this.$('.o_existing_attachment_cell.o_selected').removeClass("o_selected");
+        var $select = this.$('.o_existing_attachment_cell [data-src]').filter(function () {
             var $img = $(this);
             return !!_.find(self.images, function (v) {
                 return (v.url === $img.data("src") || ($img.data("url") && v.url === $img.data("url")) || v.id === $img.data("id"));
             });
         });
-        $select.closest('.existing-attachment-cell').addClass("media_selected");
+        $select.closest('.o_existing_attachment_cell').addClass("o_selected");
         return $select;
     },
     try_remove: function (e) {
@@ -535,7 +535,7 @@ var ImageDialog = Widget.extend({
 
 
 var cacheCssSelectors = {};
-var getCssSelectors = function(filter) {
+var getCssSelectors = function (filter) {
     var css = [];
     if (cacheCssSelectors[filter]) {
         return cacheCssSelectors[filter];
@@ -580,7 +580,7 @@ var getCssSelectors = function(filter) {
     }
     return cacheCssSelectors[filter] = css;
 };
-var computeFonts = _.once(function() {
+var computeFonts = _.once(function () {
     _.each(fontIcons, function (data) {
         data.cssData = getCssSelectors(data.parser);
         data.alias = [];
@@ -628,14 +628,14 @@ var fontIconsDialog = Widget.extend({
             e.stopPropagation();
 
             this.$('#fa-icon').val(e.target.getAttribute('data-id'));
-            $(".font-icons-icon").removeClass("font-icons-selected");
-            $(e.target).addClass("font-icons-selected");
+            $(".font-icons-icon").removeClass("o_selected");
+            $(e.target).addClass("o_selected");
         },
-        'keydown.dismiss.bs.modal': function(){},
+        'keydown.dismiss.bs.modal': function () {},
     }),
 
     // extract list of font (like awsome) from the cheatsheet.
-    renderElement: function() {
+    renderElement: function () {
         this.iconsParser = fontIcons;
         this.icons = _.flatten(_.map(fontIcons, function (data) {
                 return data.icons;
@@ -750,7 +750,7 @@ var fontIconsDialog = Widget.extend({
                     continue;
                 case '': continue;
                 default:
-                    $(".font-icons-icon").removeClass("font-icons-selected").filter("[data-alias*=',"+cls+",']").addClass("font-icons-selected");
+                    $(".font-icons-icon").removeClass("o_selected").filter("[data-alias*=',"+cls+",']").addClass("o_selected");
                     for (var k=0; k<this.icons.length; k++) {
                         if (this.icons.indexOf(cls) !== -1) {
                             this.$('#fa-icon').val(cls);
@@ -852,7 +852,7 @@ var VideoDialog = Widget.extend({
         'keyup input#urlvideo': 'change_input',
         'change input#embedvideo': 'change_input',
         'keyup input#embedvideo': 'change_input',
-        'keydown.dismiss.bs.modal': function(){},
+        'keydown.dismiss.bs.modal': function () {},
     }),
     init: function (parent, media) {
         this._super();
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 3891e7caf89..765d3d15354 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,23 +1,19 @@
 <templates id="template" xml:space="preserve">
     <t t-name="web_editor.editorbar">
-        <div class="o_css_editor navbar navbar-fixed-top hidden-xs" id="web_editor-top-edit">
-            <div id="web_editor-toolbars" />
+        <div id="web_editor-top-edit" class="o_css_editor">
+            <div id="web_editor-toolbars"/>
             <form class="navbar-form text-muted">
-                <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>
+                <button type="button" class="btn btn-sm btn-default" data-action="cancel"><i class="fa fa-times"/> Discard</button>
+                <button type="button" class="btn btn-sm btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
             </form>
         </div>
     </t>
     <t t-name="web_editor.dialog">
-        <div aria-hidden="true" class="modal web_editor-dialog" role="dialog" tabindex="-1">
+        <div class="modal o_website_modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <h3 class="modal-title">
                             <t t-esc="title"/>
                         </h3>
@@ -26,350 +22,129 @@
                         <t t-raw="0"/>
                     </div>
                     <div class="modal-footer">
-                        <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 btn-sm btn-primary save" t-if="!button" type="button">Save</button>
+                        <button class="btn btn-sm 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>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">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">
+    <div t-name="web_editor.dialog.background_position" class="o_bg_img_opt_modal">
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="cover"/> Cover</label>
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="contain"/> Contain</label>
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="custom"/> Custom</label>
 
-                                        <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 class="o_bg_img_opt" data-value="cover">
+            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><span class="fa fa-question-circle"/></a>
+            <div class="help collapse" id="cover_help">
+                <div class="simulator cover_bg">
+                    <div class="bg"/>
+                    <div class="el"/>
+                </div>
+                <p class="help-text">Scale the image to be as large as it needs to fill the whole content area. Part of the image may not be visible.</p>
+            </div>
 
+            <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+            <div class="o_bg_img_opt_cover_edition">
+                <h6>Click on the picture</h6>
+                <div class="o_bg_img_opt_object">
+                    <span class="grid grid-1"/>
+                    <span class="grid grid-2"/>
+                    <span class="grid grid-3"/>
+                    <span class="grid grid-4"/>
+                    <span class="o_focus_point"/>
+                    <div class="o_bg_img_opt_ui_info">X: <span class="o_x"/> Y: <span class="o_y"/></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 class="o_bg_img_opt" data-value="contain">
+            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><span class="fa fa-question-circle"/></a>
+            <div class="help collapse" id="contain_help">
+                <div class="simulator contain_bg">
+                    <div class="bg"/>
+                    <div class="el"/>
                 </div>
+                <p class="help-text">Scale the image to the largest size such that both its width and height can fit inside the content area</p>
             </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 type="checkbox" id="o_bg_img_opt_contain_repeat"/>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </form>
         </div>
-    </t>
+        <form class="o_bg_img_opt form-horizontal" data-value="custom">
+            <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="o_bg_img_opt_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="o_bg_img_opt_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="o_bg_img_opt_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="o_bg_img_opt_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="o_bg_img_opt_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="o_bg_img_opt_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="o_bg_img_opt_custom_pos_y">Vertical</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_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="o_bg_img_opt_custom_repeat">
+                    <option value="">No repeat</option>
+                    <option value="o_bg_img_opt_repeat">Repeat both</option>
+                    <option value="o_bg_img_opt_repeat_x">Repeat x</option>
+                    <option value="o_bg_img_opt_repeat_y">Repeat y</option>
+                </select>
+            </fieldset>
+        </form>
+    </div>
     <t t-name="web_editor.dialog.media">
-        <div aria-hidden="true" class="modal note-image-dialog" role="dialog" tabindex="-1">
-            <div class="modal-dialog select-media">
+        <div class="modal note-image-dialog o_website_modal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-lg o_select_media_dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <h3 class="modal-title">Select a Media</h3>
                     </div>
                     <div class="modal-body">
@@ -378,7 +153,7 @@
                             <li><a href="#editor-media-document" data-toggle="tab">Document</a></li>
                             <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
-                            <li class="search" style="float: right;">
+                            <li class="search">
                                 <ul class="pager mb0 mt0">
                                     <li class="previous disabled">
                                         <a href="#">← Previous</a>
@@ -388,10 +163,11 @@
                                     </li>
                                 </ul>
                             </li>
-                            <li class="search" style="float: right;">
+                            <li class="search">
                                 <form action="#">
-                                    <div class="form-group font-icons fa fa-search mb0">
+                                    <div class="form-group">
                                         <input class="form-control" id="icon-search" type="search"/>
+                                        <span class="fa fa-search"/>
                                     </div>
                                 </form>
                             </li>
@@ -399,15 +175,16 @@
                         <!-- Tab panes -->
                         <div class="tab-content">
                             <div class="tab-pane fade in active" id="editor-media-image"/>
+                            <div class="tab-pane fade" id="editor-media-document"/>
                             <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 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>
+                        <button class="btn btn-sm btn-primary save" type="button">Save</button>
+                        <button class="btn btn-sm hidden wait" disabled="disabled" type="button"/>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
+                    </div>
                 </div>
             </div>
         </div>
@@ -425,7 +202,7 @@
                         <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 class="btn btn-primary filepicker" type="button">Upload an image from your computer</button>
+                            <button class="btn btn-primary filepicker" type="button">Upload an image</button>
                             <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
                                 <span class="caret"/>
                                 <span class="sr-only">Alternate Upload</span>
@@ -447,7 +224,7 @@
                         </div>
                     </div>
                 </div>
-                <input name="func" type="hidden"/>
+                <input type="hidden" name="func"/>
                 <div class="help-block"/>
                 <div class="existing-attachments">
                     <t t-call="web_editor.dialog.image.existing"/>
@@ -457,11 +234,11 @@
         <iframe class="hidden" name="fileframe" src="about:blank"/>
     </t>
     <t t-name="web_editor.dialog.image.existing">
-        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
+        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog select-image">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <h3 class="modal-title">Select a Picture</h3>
                     </div>
                     <div class="modal-body has-error">
@@ -469,7 +246,7 @@
                         <div class="help-block"/>
                     </div>
                     <div class="modal-footer">
-                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                        <a data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
                     </div>
                 </div>
             </div>
@@ -478,8 +255,8 @@
     <t t-name="web_editor.dialog.image.existing.content">
         <div class="existing-attachments">
             <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="col-sm-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row">
+                    <i class="fa fa-times o_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>
             </div>
@@ -499,39 +276,37 @@
         </div>
     </t>
     <t t-name="web_editor.discard">
-        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
+        <div class="modal o_website_modal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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 class="btn btn-danger" type="button">Discard</button>or
-
-                        <a aria-hidden="true" data-dismiss="modal" href="#">Cancel</a></div>
+                        <button class="btn btn-sm btn-danger" type="button">Discard</button>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">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>
+            <t t-set="title">Change media description and tooltip</t>
             <form action="#" class="form-horizontal">
                 <div class="form-group">
-                    <label class="col-sm-2 control-label" for="alt">Alt:</label>
+                    <label class="col-sm-2 control-label" for="alt">Description</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 class="col-sm-2 control-label" for="title">Title:</label>
+                    <label class="col-sm-2 control-label" for="title">Tooltip</label>
                     <div class="col-sm-9">
                         <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
                     </div>
@@ -541,8 +316,8 @@
     </t>
     <t t-name="web_editor.dialog.font-icons">
         <form action="#">
-            <input id="fa-icon" type="hidden"/>
-            <input id="fa-size" type="hidden" value="fa-1x"/>
+            <input type="hidden" id="fa-icon"/>
+            <input type="hidden" id="fa-size" 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"/>
@@ -691,4 +466,11 @@
             </form>
         </t>
     </t>
+    <t t-name="web_editor.components.switch">
+        <label class="o_switch" t-att-for="id">
+            <input type="checkbox" t-att-id="id"/>
+            <span/>
+            <t t-if="label"><t t-esc="label"/></t>
+        </label>
+    </t>
 </templates>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 3ec1bf42308..cbf1e6bef70 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -13,36 +13,30 @@
         </li>
     </t>
 
-    <t t-name="web_editor.snippets">
-        <div id='web_editor_snippets' class="hidden-xs o_open">
-            <div id="o_left_bar"></div>
-        </div>
-    </t>
-
     <t t-name="web_editor.snippet_overlay">
         <div class="oe_overlay">
+            <div class="oe_handles">
+                <div class="oe_handle n readonly"/>
+                <div class="oe_handle e readonly"/>
+                <div class="oe_handle w readonly"/>
+                <div class="oe_handle s readonly"/>
+                <div class="oe_handle size readonly">
+                    <div class="oe_handle_button auto_size">Auto Resize</div>
+                    <div class="oe_handle_button size">Resize</div>
+                </div>
+            </div>
             <div class="oe_overlay_options" contentEditable="false">
                 <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>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"/></a>
                     <div class="dropdown oe_options hidden btn-group">
-                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize  </a>
-                        <ul class="dropdown-menu" role="menu"></ul>
+                        <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize</a>
+                        <ul class="dropdown-menu" role="menu"/>
                     </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>
                     <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a>
                     <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a>
                 </div>
             </div>
-            <div class='oe_handles'>
-                <div class='oe_handle n readonly'><div></div></div>
-                <div class='oe_handle e readonly'><div></div></div>
-                <div class='oe_handle w readonly'><div></div></div>
-                <div class='oe_handle size readonly'>
-                    <div class="oe_handle_button auto_size">Auto Resize</div>
-                    <div class="oe_handle_button size">Resize</div>
-                </div>
-                <div class='oe_handle s readonly'><div></div></div>
-            </div>
         </div>
     </t>
 
@@ -50,8 +44,21 @@
         <div class='oe_snippet_manipulator'></div>
     </t>
 
-    <!-- t-field options -->
+    <!-- options -->
+    <div t-name="web_editor.snippet.option.colorpicker" 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="fa fa-ban"/>
+            </div>
+        </div>
+        <div class="o_colorpicker_sections">
+            <ul class="nav nav-pills o_colorpicker_section_menu"/>
+            <div class="tab-content o_colorpicker_section_tabs"/>
+        </div>
+    </div>
 
+    <!-- t-field options -->
     <t t-name="web_editor.many2one.button">
         <div class="dropdown">
             <a href="#" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact"><i class="fa fa-search"></i></a>
diff --git a/addons/web_editor/static/src/xml/translator.xml b/addons/web_editor/static/src/xml/translator.xml
index 244fc67ec4a..c3aad20471c 100644
--- a/addons/web_editor/static/src/xml/translator.xml
+++ b/addons/web_editor/static/src/xml/translator.xml
@@ -1,14 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="web_editor.translator">
-    <div id="web_editor-top-edit" class="o_css_editor o_translate navbar navbar-inverse navbar-fixed-top hidden-xs">
-        <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>
-        </form>
-    </div>
+<t t-name="web_editor.translator" t-extend="web_editor.editorbar">
+    <t t-jquery="#web_editor-top-edit">
+        $(this).addClass('o_translate');
+    </t>
+    <t t-jquery="#web_editor-toolbars" t-operation="replace"/>
 </t>
 
 <t t-name="web_editor.translator.attributes">
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 5755649334d..40454359fe7 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -110,34 +110,44 @@
     </xpath>
 </template>
 
-<!-- color-picker -->
-<!-- HTML class to hide option for one mode : only-text, only-bg -->
+<!--
+    The web_editor.colorpicker template regroups section of colorpicker menu for website customization
+    (text foreground/background but also snippet background color option).
+    As it is presentend below, the colorpicker tag regroups a set of .o_colorpicker_section with name,
+    icon-class and icon-content as data. These will be used to build the colorpicker dropdowns.
 
+    Redefinition can edit section content, add sections or even remove them. If no section is found when
+    building a colorpicker dropdown, the template content will be used without changes as the colorpicker
+    dropdown content.
+
+    Sections should contain a set of button with a data-color attribute. When selecting such a button to
+    edit style, the "bg-x" class or the "text-x" will be automatically added.
+-->
 <template id="web_editor.colorpicker" name="Color-Picker">
-    <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>
+    <colorpicker>
+        <div class="o_colorpicker_section" data-name="theme" data-icon-class="fa fa-flask">
+            <button data-color="alpha">Alpha</button>
+            <button data-color="beta">Beta</button>
+            <button data-color="gamma">Gamma</button>
+            <button data-color="delta">Delta</button>
+            <button data-color="epsilon">Epsilon</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 class="o_colorpicker_section" data-name="grayscale" data-icon-class="fa fa-database">
+            <button data-color="white">White</button>
+            <button data-color="gray-lighter">Gray Lighter</button>
+            <button data-color="gray-light">Gray Light</button>
+            <button data-color="gray">Gray</button>
+            <button data-color="gray-dark">Gray Dark</button>
+            <button data-color="gray-darker">Gray Darker</button>
+            <button data-color="black">Black</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 class="o_colorpicker_section" data-name="ui" data-icon-class="fa fa-paint-brush">
+            <button data-color="primary">Primary</button>
+            <button data-color="success">Success</button>
+            <button data-color="info">Info</button>
+            <button data-color="warning">Warning</button>
+            <button data-color="danger">Danger</button>
         </div>
-    </div>
+    </colorpicker>
 </template>
 </odoo>
diff --git a/addons/website/static/src/js/web_planner_website.js b/addons/website/static/src/js/web_planner_website.js
index 835e26594f7..58da5432a66 100644
--- a/addons/website/static/src/js/web_planner_website.js
+++ b/addons/website/static/src/js/web_planner_website.js
@@ -10,13 +10,13 @@ require('web_editor.base');  // wait for implicit dependencies to load
 
 var qweb = core.qweb;
 
-if(!$('#oe_systray').length) {
-    return $.Deferred().reject("DOM doesn't contain '#oe_systray'");
+if(!$('#oe_main_menu_navbar').length) {
+    return $.Deferred().reject("DOM doesn't contain #oe_main_menu_navbar");
 }
 
 var WebsitePlannerLauncher = Widget.extend({
     template: "PlannerLauncher",
-    start: function() {
+    start: function () {
         var self = this;
         var res = this._super.apply(this, arguments);
         this.$('.progress').show();
@@ -29,22 +29,22 @@ var WebsitePlannerLauncher = Widget.extend({
             }
         });
     },
-    get_website_planner: function() {
+    get_website_planner: function () {
         return (new Model('web.planner')).call('search_read', [[['planner_application', '=', 'planner_website']]]);
     },
-    setup: function() {
+    setup: function () {
         var self = this;
         this.dialog = new planner.PlannerDialog(this, this.planner);
         this.dialog.appendTo($('<div>'));
         this.$(".progress").tooltip({html: true, title: this.planner.tooltip_planner, placement: 'bottom', container: 'body', delay: {'show': 700}});
-        this.dialog.on("planner_progress_changed", this, function(percent) {
+        this.dialog.on("planner_progress_changed", this, function (percent) {
             self.update_parent_progress_bar(percent);
         });
     },
-    update_parent_progress_bar: function(percent) {
+    update_parent_progress_bar: function (percent) {
         this.$(".progress-bar").css('width', percent+"%");
     },
-    show_dialog: function() {
+    show_dialog: function () {
         this.dialog.$el.appendTo(document.body);
         this.dialog.$el.modal('show');
     },
@@ -52,7 +52,7 @@ var WebsitePlannerLauncher = Widget.extend({
 
 return ajax.loadXML('/web_planner/static/src/xml/web_planner.xml', qweb).then(function() {
     var websitePlannerLauncher = new WebsitePlannerLauncher();
-    websitePlannerLauncher.prependTo($('#oe_systray'));
+    websitePlannerLauncher.prependTo($('#oe_main_menu_navbar .o_menu_systray'));
 });
 
 });
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index 77a4ac27446..73ea30b91fd 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -105,10 +105,6 @@ var ViewEditor = Widget.extend({
             self.aceEditor.resize();
             self.$el.width(width);
         }
-        function resizeEditorHeight(height) {
-            self.$el.css('top', height);
-            self.$('.ace_editor').css('bottom', height);
-        }
         function storeEditorWidth() {
             window.localStorage.setItem('ace_editor_width', self.$el.width());
         }
@@ -136,13 +132,9 @@ var ViewEditor = Widget.extend({
         self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
         $(document).mousemove(updateWidth);
         $('button[data-action=edit]').click(function () {
-           self.close();
-        });
-        this.getParent().on('change:height', this, function () {
-            resizeEditorHeight(this.getParent().$el.outerHeight()+2);
+            self.close();
         });
         resizeEditor(readEditorWidth());
-        resizeEditorHeight(this.getParent().$el.outerHeight()+2);
     },
     loadTemplates: function () {
         var self = this;
@@ -220,7 +212,7 @@ var ViewEditor = Widget.extend({
             model: 'ir.ui.view',
             method: 'read',
             args: [[viewId], ['arch'], _.extend(base.get_context(), {'lang': null})],
-        }).then(function(result) {
+        }).then(function (result) {
             var editingSession = self.buffers[viewId] = new ace.EditSession(result[0].arch);
             editingSession.setMode("ace/mode/xml");
             editingSession.setUndoManager(new ace.UndoManager());
@@ -359,12 +351,7 @@ var ViewEditor = Widget.extend({
             this.$("#ace-view-list").val(session.id).change();
         }
 
-        var $dialog = $(qweb.render('website.error_dialog', {
-            title: session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1],
-            message:"<b>Malformed XML document</b>:<br/>" + message
-        }));
-        $dialog.appendTo("body");
-        $dialog.modal('show');
+        website.error(session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1], "<b>Malformed XML document</b>:<br/>" + message);
     },
     open: function () {
         this.$el.removeClass('oe_ace_closed').addClass('oe_ace_open');
@@ -378,9 +365,11 @@ var ViewEditor = Widget.extend({
 website.TopBar.include({
     start: function () {
         this.ace = new Ace();
-        var def = this.ace.attachTo($('#html_editor'));
-        return $.when(this._super(), def);
-    }
+        return $.when(
+            this._super.apply(this, arguments),
+            this.ace.attachTo($('#html_editor'))
+        );
+    },
 });
 
 });
diff --git a/addons/website/static/src/js/website.backend.js b/addons/website/static/src/js/website.backend.js
index 7a3b6a6e580..a50b838854c 100644
--- a/addons/website/static/src/js/website.backend.js
+++ b/addons/website/static/src/js/website.backend.js
@@ -9,7 +9,7 @@ var _t = core._t;
 
 var WidgetWebsiteButton = form_common.AbstractField.extend({
     template: 'WidgetWebsiteButton',
-    render_value: function() {
+    render_value: function () {
         this._super.apply(this, arguments);
 
         var $value = this.$('.o_value');
@@ -28,7 +28,7 @@ var WidgetWebsiteButton = form_common.AbstractField.extend({
             this.$el.addClass(this.node.attrs.class);
         }
     },
-    is_false: function() {
+    is_false: function () {
         return false;
     },
 });
diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 3cbcaefbb14..01deb49977c 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -15,34 +15,18 @@ var qweb = core.qweb;
 ajax.loadXML('/website/static/src/xml/website.contentMenu.xml', qweb);
 
 var TopBarContent = Widget.extend({
-    start: function() {
+    start: function () {
         var self = this;
-        self.$el.on('click', 'a[data-action]', function(ev) {
-            ev.preventDefault();
-            var $content_item = $(this);
-            self[$content_item.data('action')]();
+
+        // Add page modal + menu content event
+        this.$el.add($('#o_website_add_page_modal')).on('click', 'a[data-action]', function (e) {
+            e.preventDefault();
+            self[$(this).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() {
+    edit_menu: function () {
         var self = this;
         var context = base.get_context();
         var def = $.Deferred();
@@ -70,7 +54,7 @@ var TopBarContent = Widget.extend({
             });
         });
     },
-    new_page: function() {
+    new_page: function () {
         website.prompt({
             id: "editor_new_page",
             window_title: _t("New Page"),
@@ -79,18 +63,11 @@ var TopBarContent = Widget.extend({
                 var $group = this.$dialog.find("div.form-group");
                 $group.removeClass("mb0");
 
-                var $add = $(
-                    '<div class="form-group mb0">'+
-                        '<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').after(_t("Add page in menu"));
+                var $add = $('<div/>', {'class': 'form-group mb0'})
+                            .append($('<span/>', {'class': 'col-sm-offset-3 col-sm-9 text-left'})
+                                    .append(qweb.render('web_editor.components.switch', {id: 'switch_addTo_menu', label: _t("Add page in menu")})));
+                $add.find('input').prop('checked', true);
                 $group.after($add);
-                console.log(website)
             }
         }).then(function (val, field, $dialog) {
             if (val) {
@@ -100,7 +77,7 @@ var TopBarContent = Widget.extend({
             }
         });
     },
-    rename_page: function() {
+    rename_page: function () {
         var self = this;
         var context = base.get_context();
         self.mo_id = self.getMainObject().id;
@@ -134,7 +111,7 @@ var TopBarContent = Widget.extend({
             });
         });
     },
-    delete_page: function() {
+    delete_page: function () {
         var self = this;
         var context = base.get_context();
         self.mo_id = self.getMainObject().id;
@@ -144,17 +121,17 @@ var TopBarContent = Widget.extend({
             method: 'page_search_dependencies',
             args: [self.mo_id],
             kwargs: {
-                context: context
+                context: context,
             },
         }).then(function (deps) {
             website.prompt({
                 id: "editor_delete_page",
                 window_title: _t("Delete Page"),
                 dependencies: deps,
-                    init: function() { $('.btn-continue').prop("disabled", true)},
+                    init: function () { $('.btn-continue').prop("disabled", true)},
             }, 'website.delete_page').then(function (val, field, $dialog) {
 
-                if ($dialog.find('input[type="checkbox"]').is(':checked')){
+                if ($dialog.find('input[type="checkbox"]').is(':checked')) {
                     ajax.jsonRpc('/web/dataset/call_kw', 'call', {
                         model: 'website',
                         method: 'delete_page',
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index a670f53bef1..b40c2deac9f 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -23,47 +23,16 @@ website.TopBar.include({
     },
     start: function () {
         var self = this;
-        $("#wrapwrap").on('click', '.o_editable, [data-oe-model]', function (event) {
-            var $this = $(event.srcElement);
-            var tag = $this[0] && $this[0].tagName.toLowerCase();
-            if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
-                self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
-            }
-        });
-
         $("#wrapwrap").find("[data-oe-model] .oe_structure.oe_empty, [data-oe-model].oe_structure.oe_empty, [data-oe-type=html]:empty")
             .filter(".oe_not_editable")
             .filter(".oe_no_empty")
-            .addClass("oe_empty")
-            .attr("data-oe-placeholder", _t("Press The Top-Left Edit Button"));
+            .addClass("oe_empty");
 
         if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang') === "en_US") {
             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;
-            })
-        });
+        return this._super.apply(this, arguments);
     },
     edit: function () {
         this.$('button[data-action=edit]').prop('disabled', true);
@@ -71,31 +40,6 @@ website.TopBar.include({
         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')
-
-    }
 });
 
 /* ----- Customize Template ---- */
@@ -105,7 +49,7 @@ website.TopBarCustomize = Widget.extend({
         'mousedown a.dropdown-toggle': 'load_menu',
         'click ul a[data-view-id]': 'do_customize',
     },
-    start: function() {
+    start: function () {
         var self = this;
         this.$menu = self.$el.find('ul');
         this.view_name = $(document.documentElement).data('view-xmlid');
@@ -119,43 +63,36 @@ website.TopBarCustomize = Widget.extend({
         if(this.loaded) {
             return;
         }
-        ajax.jsonRpc('/website/customize_template_get', 'call', { 'key': this.view_name }).then(
-            function(result) {
-                _.each(result, function (item) {
-                    if (item.key === "website.debugger" && !window.location.search.match(/[&?]debug(&|$)/)) return;
-                    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">' +
-                                                        '<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;
-            }
-        );
+        ajax.jsonRpc('/website/customize_template_get', 'call', {
+            key: this.view_name,
+        }).then(function (result) {
+            _.each(result, function (item) {
+                if (item.key === "website.debugger" && !window.location.search.match(/[&?]debug(&|$)/)) return;
+                if (item.header) {
+                    self.$menu.append('<li class="dropdown-header">' + item.name + '</li>');
+                } else {
+                    var $li = $('<li/>', {role: 'presentation'})
+                                .append($('<a/>', {href: '#', 'data-view-id': item.id, role: 'menuitem'})
+                                    .append(qweb.render('web_editor.components.switch', {id: 'switch-' + item.id, label: item.name})));
+                    $li.find('input').prop('checked', !!item.active);
+                    self.$menu.append($li);
+                }
+            });
+            self.loaded = true;
+        });
     },
-    do_customize: function (event) {
-        var view_id = $(event.currentTarget).data('view-id');
-        $('#website_loading').addClass('active')
+    do_customize: function (e) {
+        e.preventDefault();
+        var view_id = $(e.currentTarget).data('view-id');
         return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
             model: 'ir.ui.view',
             method: 'toggle',
             args: [],
             kwargs: {
                 ids: [parseInt(view_id, 10)],
-                context: base.get_context()
+                context: base.get_context(),
             }
-        }).then( function() {
+        }).then(function () {
             window.location.reload();
         });
     },
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index e26ba130f52..08501d3b48e 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -1,189 +1,178 @@
 odoo.define('website.website', function (require) {
-"use strict";
+    "use strict";
 
-var ajax = require('web.ajax');
-var core = require('web.core');
-var Widget = require('web.Widget');
-var session = require('web.session');
-var base = require('web_editor.base');
-var Tour = require('web.Tour');
+    var ajax = require('web.ajax');
+    var core = require('web.core');
+    var Widget = require('web.Widget');
+    var session = require('web.session');
+    var base = require('web_editor.base');
+    var Tour = require('web.Tour');
 
-var qweb = core.qweb;
-var _t = core._t;
-base.url_translations = '/website/translations';
+    var qweb = core.qweb;
+    var _t = core._t;
+    base.url_translations = '/website/translations';
 
-/* --- Set the browser into the dom for css selectors --- */
-var browser;
-if ($.browser.webkit) browser = "webkit";
-else if ($.browser.safari) browser = "safari";
-else if ($.browser.opera) browser = "opera";
-else if ($.browser.msie || ($.browser.mozilla && +$.browser.version.replace(/^([0-9]+\.[0-9]+).*/, '\$1') < 20)) browser = "msie";
-else if ($.browser.mozilla) browser = "mozilla";
-browser += ","+$.browser.version;
-if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) browser += ",mobile";
-document.documentElement.setAttribute('data-browser', browser);
+    /* --- Set the browser into the dom for css selectors --- */
+    var browser;
+    if ($.browser.webkit) browser = "webkit";
+    else if ($.browser.safari) browser = "safari";
+    else if ($.browser.opera) browser = "opera";
+    else if ($.browser.msie || ($.browser.mozilla && +$.browser.version.replace(/^([0-9]+\.[0-9]+).*/, '\$1') < 20)) browser = "msie";
+    else if ($.browser.mozilla) browser = "mozilla";
+    browser += ","+$.browser.version;
+    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) browser += ",mobile";
+    document.documentElement.setAttribute('data-browser', browser);
 
 
-/* ----------------------------------------------------
-   Helpers
-   ---------------------------------------------------- */
-
-var get_context = base.get_context;
-base.get_context = base.get_context = function (dict) {
-    var html = document.documentElement;
-    return _.extend({
-        'website_id': html.getAttribute('data-website-id')|0
-    }, get_context(dict), dict);
-};
-
-/* ----------------------------------------------------
-   Widgets
-   ---------------------------------------------------- */ 
-
-var prompt = function (options, _qweb) {
-    /**
-     * A bootstrapped version of prompt() albeit asynchronous
-     * This was built to quickly prompt the user with a single field.
-     * For anything more complex, please use editor.Dialog class
-     *
-     * Usage Ex:
-     *
-     * website.prompt("What... is your quest ?").then(function (answer) {
-     *     arthur.reply(answer || "To seek the Holy Grail.");
-     * });
-     *
-     * website.prompt({
-     *     select: "Please choose your destiny",
-     *     init: function() {
-     *         return [ [0, "Sub-Zero"], [1, "Robo-Ky"] ];
-     *     }
-     * }).then(function (answer) {
-     *     mame_station.loadCharacter(answer);
-     * });
-     *
-     * @param {Object|String} options A set of options used to configure the prompt or the text field name if string
-     * @param {String} [options.window_title=''] title of the prompt modal
-     * @param {String} [options.input] tell the modal to use an input text field, the given value will be the field title
-     * @param {String} [options.textarea] tell the modal to use a textarea field, the given value will be the field title
-     * @param {String} [options.select] tell the modal to use a select box, the given value will be the field title
-     * @param {Object} [options.default=''] default value of the field
-     * @param {Function} [options.init] optional function that takes the `field` (enhanced with a fillWith() method) and the `dialog` as parameters [can return a deferred]
-     */
-    if (typeof options === 'string') {
-        options = {
-            text: options
-        };
-    }
-    if (_.isUndefined(_qweb)) {
-        _qweb = 'website.prompt';
-    }
-    options = _.extend({
-        window_title: '',
-        field_name: '',
-        'default': '', // dict notation for IE<9
-        init: function() {},
-    }, options || {});
-
-    var type = _.intersection(Object.keys(options), ['input', 'textarea', 'select']);
-    type = type.length ? type[0] : 'input';
-    options.field_type = type;
-    options.field_name = options.field_name || options[type];
-
-    var def = $.Deferred();
-    var dialog = $(qweb.render(_qweb, options)).appendTo("body");
-    options.$dialog = dialog;
-    var field = dialog.find(options.field_type).first();
-    field.val(options['default']); // dict notation for IE<9
-    field.fillWith = function (data) {
-        if (field.is('select')) {
-            var select = field[0];
-            data.forEach(function (item) {
-                select.options[select.options.length] = new Option(item[1], item[0]);
-            });
-        } else {
-            field.val(data);
-        }
+    /* ----------------------------------------------------
+       Helpers
+       ---------------------------------------------------- */
+    var get_context = base.get_context;
+    base.get_context = base.get_context = function (dict) {
+        var html = document.documentElement;
+        return _.extend({
+            'website_id': html.getAttribute('data-website-id')|0
+        }, get_context(dict), dict);
     };
-    var init = options.init(field, dialog);
-    $.when(init).then(function (fill) {
-        if (fill) {
-            field.fillWith(fill);
+
+    /* ----------------------------------------------------
+       Widgets
+       ---------------------------------------------------- */ 
+    var prompt = function (options, _qweb) {
+        /**
+         * A bootstrapped version of prompt() albeit asynchronous
+         * This was built to quickly prompt the user with a single field.
+         * For anything more complex, please use editor.Dialog class
+         *
+         * Usage Ex:
+         *
+         * website.prompt("What... is your quest ?").then(function (answer) {
+         *     arthur.reply(answer || "To seek the Holy Grail.");
+         * });
+         *
+         * website.prompt({
+         *     select: "Please choose your destiny",
+         *     init: function () {
+         *         return [ [0, "Sub-Zero"], [1, "Robo-Ky"] ];
+         *     }
+         * }).then(function (answer) {
+         *     mame_station.loadCharacter(answer);
+         * });
+         *
+         * @param {Object|String} options A set of options used to configure the prompt or the text field name if string
+         * @param {String} [options.window_title=''] title of the prompt modal
+         * @param {String} [options.input] tell the modal to use an input text field, the given value will be the field title
+         * @param {String} [options.textarea] tell the modal to use a textarea field, the given value will be the field title
+         * @param {String} [options.select] tell the modal to use a select box, the given value will be the field title
+         * @param {Object} [options.default=''] default value of the field
+         * @param {Function} [options.init] optional function that takes the `field` (enhanced with a fillWith() method) and the `dialog` as parameters [can return a deferred]
+         */
+        if (typeof options === 'string') {
+            options = {
+                text: options
+            };
         }
-        dialog.modal('show');
-        field.focus();
-        dialog.on('click', '.btn-primary', function () {
+        if (_.isUndefined(_qweb)) {
+            _qweb = 'website.prompt';
+        }
+        options = _.extend({
+            window_title: '',
+            field_name: '',
+            'default': '', // dict notation for IE<9
+            init: function () {},
+        }, options || {});
+
+        var type = _.intersection(Object.keys(options), ['input', 'textarea', 'select']);
+        type = type.length ? type[0] : 'input';
+        options.field_type = type;
+        options.field_name = options.field_name || options[type];
+
+        var def = $.Deferred();
+        var dialog = $(qweb.render(_qweb, options)).appendTo("body");
+        options.$dialog = dialog;
+        var field = dialog.find(options.field_type).first();
+        field.val(options['default']); // dict notation for IE<9
+        field.fillWith = function (data) {
+            if (field.is('select')) {
+                var select = field[0];
+                data.forEach(function (item) {
+                    select.options[select.options.length] = new Option(item[1], item[0]);
+                });
+            } else {
+                field.val(data);
+            }
+        };
+        var init = options.init(field, dialog);
+        $.when(init).then(function (fill) {
+            if (fill) {
+                field.fillWith(fill);
+            }
+            dialog.modal('show');
+            field.focus();
+            dialog.on('click', '.btn-primary', function () {
+                    var backdrop = $('.modal-backdrop');
+                def.resolve(field.val(), field, dialog);
+                dialog.modal('hide').remove();
+                    backdrop.remove();
+            });
+        });
+        dialog.on('hidden.bs.modal', function () {
                 var backdrop = $('.modal-backdrop');
-            def.resolve(field.val(), field, dialog);
-            dialog.modal('hide').remove();
+            def.reject();
+            dialog.remove();
                 backdrop.remove();
         });
-    });
-    dialog.on('hidden.bs.modal', function () {
-            var backdrop = $('.modal-backdrop');
-        def.reject();
-        dialog.remove();
-            backdrop.remove();
-    });
-    if (field.is('input[type="text"], select')) {
-        field.keypress(function (e) {
-            if (e.which == 13) {
-                e.preventDefault();
-                dialog.find('.btn-primary').trigger('click');
-            }
+        if (field.is('input[type="text"], select')) {
+            field.keypress(function (e) {
+                if (e.which == 13) {
+                    e.preventDefault();
+                    dialog.find('.btn-primary').trigger('click');
+                }
+            });
+        }
+        return def;
+    };
+
+    var error = function (title, message, url) {
+        return new Dialog(null, {
+            title: data.data ? data.data.arguments[0] : "",
+            $content: $(qweb.render('website.error_dialog', {
+                message: data.data ? data.data.arguments[1] : data.statusText,
+                backend_url: url,
+            })),
+        }).open();
+    };
+
+    function _add_input(form, name, value) {
+        var param = document.createElement('input');
+        param.setAttribute('type', 'hidden');
+        param.setAttribute('name', name);
+        param.setAttribute('value', value);
+        form.appendChild(param);
+    }
+    var form = function (url, method, params) {
+        var form = document.createElement('form');
+        form.setAttribute('action', url);
+        form.setAttribute('method', method);
+
+        if (core.csrf_token) {
+            _add_input(form, 'csrf_token', core.csrf_token);
+        }
+        _.each(params, function (v, k) {
+            _add_input(form, k, v);
         });
-    }
-    return def;
-};
+        document.body.appendChild(form);
+        form.submit();
+    };
 
-var error = function(data, url) {
-    var $error = $(qweb.render('website.error_dialog', {
-        'title': data.data ? data.data.arguments[0] : "",
-        'message': data.data ? data.data.arguments[1] : data.statusText,
-        'backend_url': url
-    }));
-    $error.appendTo("body");
-    $error.modal('show');
-};
 
-function _add_input(form, name, value) {
-    var param = document.createElement('input');
-    param.setAttribute('type', 'hidden');
-    param.setAttribute('name', name);
-    param.setAttribute('value', value);
-    form.appendChild(param);
-}
-var form = function (url, method, params) {
-    var form = document.createElement('form');
-    form.setAttribute('action', url);
-    form.setAttribute('method', method);
-
-    if (core.csrf_token) {
-        _add_input(form, 'csrf_token', core.csrf_token);
-    }
-    _.each(params, function (v, k) {
-        _add_input(form, k, v);
+    ajax.loadXML('/website/static/src/xml/website.xml', qweb);
+    ajax.loadXML('/web/static/src/xml/base_common.xml', qweb);
+    
+    base.ready().then(function () {
+        data.topBar = new TopBar();
+        return data.topBar.attachTo($("#oe_main_menu_navbar"));
     });
-    document.body.appendChild(form);
-    form.submit();
-};
-
-
-ajax.loadXML('/website/static/src/xml/website.xml', qweb);
-ajax.loadXML('/web/static/src/xml/base_common.xml', qweb);
-
-/**
- * Cancel the auto run of Tour (test) and launch the tour after tob bar all bind events
- */
- 
-base.ready().then(function () {
-    data.topBar = new TopBar();
-    data.topBar.attachTo($("#website_main_menu_navbar"));
-});
-
-/**
- * Returns a deferred resolved when the templates are loaded
- * and the Widgets can be instanciated.
- */
 
     /* ----- PUBLISHING STUFF ---- */
     $(document).on('click', '.js_publish_management .js_publish_btn', function () {
@@ -194,22 +183,22 @@ base.ready().then(function () {
                 $data.toggleClass("css_unpublished css_published");
                 $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off');
             }).fail(function (err, data) {
-                error(data, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id'));
+                error(data.data ? data.data.arguments[0] : "", data.data ? data.data.arguments[1] : data.statusText, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id'));
             });
         });
 
         if (!$('.js_change_lang').length) {
             // in case template is not up to date...
             var links = $('ul.js_language_selector li a:not([data-oe-id])');
-            var m = $(_.min(links, function(l) { return $(l).attr('href').length; })).attr('href');
-            links.each(function() {
+            var m = $(_.min(links, function (l) { return $(l).attr('href').length; })).attr('href');
+            links.each(function () {
                 var t = $(this).attr('href');
                 var l = (t === m) ? "default" : t.split('/')[1];
                 $(this).data('lang', l).addClass('js_change_lang');
             });
         }
 
-        $(document).on('click', '.js_change_lang', function(e) {
+        $(document).on('click', '.js_change_lang', function (e) {
             e.preventDefault();
 
             var self = $(this);
@@ -227,54 +216,65 @@ base.ready().then(function () {
         init_kanban(this);
     });
 
-    $('.js_website_submit_form').on('submit', function() {
+    $('.js_website_submit_form').on('submit', function () {
         var $buttons = $(this).find('button[type="submit"], a.a-submit');
-        _.each($buttons, function(btn) {
+        _.each($buttons, function (btn) {
             $(btn).attr('data-loading-text', '<i class="fa fa-spinner fa-spin"></i> ' + $(btn).text()).button('loading');
         });
     });
 
-    setTimeout(function () {
+    _.defer(function () {
         if (window.location.hash.indexOf("scrollTop=") > -1) {
             window.document.body.scrollTop = +location.hash.match(/scrollTop=([0-9]+)/)[1];
         }
-    },0);
-
-// display image thumbnail
-$(".o_image[data-mimetype^='image']").each(function () {
-    var $img = $(this);
-    if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
-        $img.css('background-image', "url('" + $img.data('src') + "')");
-    }
-});
-
-/**
- * Object who contains all method and bind for the top bar, the template is create server side.
- */
-
-var TopBar = Widget.extend({
-    start: function () {
-        var $collapse = this.$('#oe_applications ul.dropdown-menu').clone()
-                .attr("id", "oe_applications_collapse")
-                .attr("class", "nav navbar-nav navbar-left navbar-collapse collapse");
-        this.$('#oe_applications').before($collapse);
-        $collapse.wrap('<div class="visible-xs"/>');
-        this.$('[data-target="#oe_applications"]').attr("data-target", "#oe_applications_collapse");
-
-        return this._super();
-    }
-});
-
-
-var data = {
-    prompt: prompt,
-    form: form,
-    TopBar: TopBar,
-    ready: function () {
-        console.warn("website.ready is deprecated: Please use require('web_editor.base').ready()");
-        return base.ready();
-    }
-};
-return data;
+    });
 
+    // display image thumbnail
+    $(".o_image[data-mimetype^='image']").each(function () {
+        var $img = $(this);
+        if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
+            $img.css('background-image', "url('" + $img.data('src') + "')");
+        }
+    });
+
+    /**
+     * Object who contains all method and bind for the top bar, the template is create server side.
+     */
+    var TopBar = Widget.extend({
+        start: function () {
+            var $collapse = this.$('#oe_applications ul.dropdown-menu').clone()
+                    .attr("id", "oe_applications_collapse")
+                    .attr("class", "nav navbar-nav navbar-left navbar-collapse collapse");
+            this.$('#oe_applications').before($collapse);
+            $collapse.wrap('<div class="visible-xs"/>');
+            this.$('[data-target="#oe_applications"]').attr("data-target", "#oe_applications_collapse");
+
+            var self = this;
+            this.$el.on('mouseover', '> ul > li.dropdown:not(.open)', function (e) {
+                var $opened = self.$('> ul > li.dropdown.open');
+                if($opened.length) {
+                    $opened.removeClass('open');
+                    $(e.currentTarget).find('.dropdown-toggle').mousedown().focus().mouseup().click();
+                }
+            });
+
+            this.$el.on('click', '.o_mobile_menu_toggle', function (ev) {
+                self.$el.parent().toggleClass('o_mobile_menu_opened');
+            });
+
+            return this._super.apply(this, arguments);
+        }
+    });
+
+    var data = {
+        prompt: prompt,
+        error: error,
+        form: form,
+        TopBar: TopBar,
+        ready: function () {
+            console.warn("website.ready is deprecated: Please use require('web_editor.base').ready()");
+            return base.ready();
+        },
+    };
+    return data;
 });
diff --git a/addons/website/static/src/js/website.mobile.js b/addons/website/static/src/js/website.mobile.js
index d784ea3fafc..1392f0981ad 100644
--- a/addons/website/static/src/js/website.mobile.js
+++ b/addons/website/static/src/js/website.mobile.js
@@ -1,39 +1,49 @@
 odoo.define('website.mobile', function (require) {
 'use strict';
 
-var core = require('web.core');
 var ajax = require('web.ajax');
+var core = require('web.core');
+var Dialog = require('web.Dialog');
 var Widget = require('web.Widget');
 var base = require('web_editor.base');
 var website = require('website.website');
 
-var qweb = core.qweb;
+var _t = core._t;
 
-var MobilePreview = Widget.extend({
+var MobilePreviewDialog = Dialog.extend({
     template: 'website.mobile_preview',
-    events: {
-        'hidden.bs.modal': 'destroy'
+
+    init: function () {
+        this._super.apply(this, arguments);
+        this.mobile_src = $.param.querystring(window.location.href, 'mobilepreview');
     },
-    start: function() {
-        if (!window.location.origin) { // fix for ie9
-            window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
-        }
-        document.getElementById("mobile-viewport").src = window.location.origin + window.location.pathname + window.location.search + "#mobile-preview";
-        this.$el.modal();
-    },
-    destroy: function() {
-        $('.modal-backdrop').remove();
-        this._super();
+
+    start: function () {
+        var self = this;
+        this.$modal.addClass('oe_mobile_preview');
+        this.$modal.on('click', '.modal-header', function () {
+            self.$el.toggleClass('o_invert_orientation');
+        });
+        this.$iframe = this.$('iframe');
+        this.$iframe.on('load', function (e) {
+            self.$iframe.contents().find('body').removeAttr('user');
+            self.$iframe.contents().find('#oe_main_menu_navbar, #o_website_add_page_modal').remove();
+        });
+
+        return this._super.apply(this, arguments);
     },
 });
 
 website.TopBar.include({
     start: function () {
-        this.$el.on('click', 'a[data-action=show-mobile-preview]', function() {
-            new MobilePreview().appendTo($(document.body));
+        var self = this;
+        this.$el.on('click', 'a[data-action=show-mobile-preview]', function () {
+            new MobilePreviewDialog(self, {
+                title: _t('Mobile preview') + " <span class='fa fa-repeat'/>",
+            }).open();
         });
         return this._super();
-    }
+    },
 });
 
 });
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index d2b7683645f..da7a4149862 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -4,6 +4,7 @@ odoo.define('website.seo', function (require) {
 var core = require('web.core');
 var ajax = require('web.ajax');
 var Class = require('web.Class');
+var Dialog = require('web.Dialog');
 var mixins = require('web.mixins');
 var Model = require('web.Model');
 var Widget = require('web.Widget');
@@ -84,11 +85,11 @@ var SuggestionList = Widget.extend({
         ajax.jsonRpc('/website/seo_suggest', 'call', {
             'keywords': self.root,
             'lang': language,
-        }).then(function(keyword_list){
+        }).then(function (keyword_list) {
             self.addSuggestions(JSON.parse(keyword_list));
         });
     },
-    addSuggestions: function(keywords) {
+    addSuggestions: function (keywords) {
         var self = this;
         self.$el.empty();
         // TODO Improve algorithm + Ajust based on custom user keywords
@@ -222,7 +223,6 @@ var Image = Widget.extend({
     },
 });
 
-
 var ImageList = Widget.extend({
     init: function (parent, options) {
         this.htmlPage = options.page;
@@ -339,15 +339,13 @@ var Tip = Widget.extend({
     },
 });
 
-var Configurator = Widget.extend({
+var Configurator = Dialog.extend({
     template: 'website.seo_configuration',
     events: {
         'keyup input[name=seo_page_keywords]': 'confirmKeyword',
         'keyup input[name=seo_page_title]': 'titleChanged',
         'keyup textarea[name=seo_page_description]': 'descriptionChanged',
         'click button[data-action=add]': 'addKeyword',
-        'click button[data-action=update]': 'update',
-        'hidden.bs.modal': 'destroy',
     },
     canEditTitle: false,
     canEditDescription: false,
@@ -355,44 +353,51 @@ var Configurator = Widget.extend({
     canEditLanguage: false,
     maxTitleSize: 65,
     maxDescriptionSize: 150,
+
+    init: function (parent, options) {
+        options = options || {};
+        _.defaults(options, {
+            title: _t('Promote This Page'),
+            subtitle: _t('Get this page efficiently referenced in Google to attract more visitors.'),
+            buttons: [
+                {text: _t('Save'), classes: 'btn-primary', click: this.update},
+                {text: _t('Discard'), close: true},
+            ],
+        });
+
+        this._super(parent, options);
+    },
     start: function () {
         var self = this;
-        var $modal = self.$el;
-        var htmlPage = this.htmlPage = new HtmlPage();
-        $modal.find('.js_seo_page_url').text(htmlPage.url());
-        $modal.find('input[name=seo_page_title]').val(htmlPage.title());
-        $modal.find('textarea[name=seo_page_description]').val(htmlPage.description());
-        // self.suggestImprovements();
-        // self.imageList = new ImageList(self, { page: htmlPage });
-        // if (htmlPage.images().length === 0) {
-        //     $modal.find('.js_image_section').remove();
-        // } else {
-        //     self.imageList.appendTo($modal.find('.js_seo_image_list'));
-        // }
-        self.keywordList = new KeywordList(self, { page: htmlPage });
-        self.keywordList.on('list-full', self, function () {
-            $modal.find('input[name=seo_page_keywords]')
-                .attr('readonly', "readonly")
-                .attr('placeholder', "Remove a keyword first");
-            $modal.find('button[data-action=add]')
-                .prop('disabled', true).addClass('disabled');
+
+        this.$modal.addClass('oe_seo_configuration js_seo_configuration');
+
+        this.htmlPage = new HtmlPage();
+        this.$('.js_seo_page_url').text(this.htmlPage.url());
+        this.$('input[name=seo_page_title]').val(this.htmlPage.title());
+        this.$('textarea[name=seo_page_description]').val(this.htmlPage.description());
+
+        this.keywordList = new KeywordList(self, { page: this.htmlPage });
+        this.keywordList.on('list-full', self, function () {
+            self.$('input[name=seo_page_keywords]').attr({
+                readonly: "readonly",
+                placeholder: "Remove a keyword first"
+            });
+            self.$('button[data-action=add]').prop('disabled', true).addClass('disabled');
         });
-        self.keywordList.on('list-not-full', self, function () {
-            $modal.find('input[name=seo_page_keywords]')
-                .removeAttr('readonly').attr('placeholder', "");
-            $modal.find('button[data-action=add]')
-                .prop('disabled', false).removeClass('disabled');
+        this.keywordList.on('list-not-full', self, function () {
+            self.$('input[name=seo_page_keywords]').removeAttr('readonly').attr('placeholder', "");
+            self.$('button[data-action=add]').prop('disabled', false).removeClass('disabled');
         });
-        self.keywordList.on('selected', self, function (word, language) {
+        this.keywordList.on('selected', self, function (word, language) {
             self.keywordList.add(word, language);
         });
-        self.keywordList.appendTo($modal.find('.js_seo_keywords_list'));
-        self.disableUnsavableFields();
-        self.renderPreview();
-        $modal.modal();
-        self.getLanguages();
+        this.keywordList.appendTo(this.$('.js_seo_keywords_list'));
+        this.disableUnsavableFields();
+        this.renderPreview();
+        this.getLanguages();
     },
-    getLanguages: function(){
+    getLanguages: function () {
         var self = this;
         ajax.jsonRpc('/web/dataset/call_kw', 'call', {
             model: 'website',
@@ -402,7 +407,7 @@ var Configurator = Widget.extend({
                 ids: [base.get_context().website_id],
                 context: base.get_context()
             }
-        }).then( function(data) {
+        }).then( function (data) {
             self.$('#language-box').html(core.qweb.render('Configurator.language_promote', {
                 'language': data,
                 'def_lang': base.get_context().lang
@@ -411,47 +416,34 @@ var Configurator = Widget.extend({
     },
     disableUnsavableFields: function () {
         var self = this;
-        var $modal = self.$el;
-        self.loadMetaData().then(function (data) {
+        this.loadMetaData().then(function (data) {
             self.canEditTitle = data && ('website_meta_title' in data);
             self.canEditDescription = data && ('website_meta_description' in data);
             self.canEditKeywords = data && ('website_meta_keywords' in data);
             if (!self.canEditTitle) {
-                $modal.find('input[name=seo_page_title]').attr('disabled', true);
+                self.$('input[name=seo_page_title]').attr('disabled', true);
             }
             if (!self.canEditDescription) {
-                $modal.find('textarea[name=seo_page_description]').attr('disabled', true);
+                self.$('textarea[name=seo_page_description]').attr('disabled', true);
             }
             if (!self.canEditTitle && !self.canEditDescription && !self.canEditKeywords) {
-                $modal.find('button[data-action=update]').attr('disabled', true);
+                self.$footer.find('button[data-action=update]').attr('disabled', true);
             }
         });
     },
     suggestImprovements: function () {
-        var tips = [];
         var self = this;
+        var tips = [];
+        _.each(tips, function (tip) {
+            displayTip(tip.message, tip.type);
+        });
+
         function displayTip(message, type) {
             new Tip(self, {
                message: message,
                type: type,
             }).appendTo(self.$('.js_seo_tips'));
         }
-        var htmlPage = this.htmlPage;
-
-        // Add message suggestions at the top of the dialog
-        // if necessary....
-        // if (htmlPage.headers('h1').length === 0) {
-        //     tips.push({
-        //         type: 'warning',
-        //         message: "This page seems to be missing a title.",
-        //     });
-        // }
-
-        if (tips.length > 0) {
-            _.each(tips, function (tip) {
-                displayTip(tip.message, tip.type);
-            });
-        }
     },
     confirmKeyword: function (e) {
         if (e.keyCode == 13) {
@@ -469,17 +461,17 @@ var Configurator = Widget.extend({
     update: function () {
         var self = this;
         var data = {};
-        if (self.canEditTitle) {
-            data.website_meta_title = self.htmlPage.title();
+        if (this.canEditTitle) {
+            data.website_meta_title = this.htmlPage.title();
         }
-        if (self.canEditDescription) {
-            data.website_meta_description = self.htmlPage.description();
+        if (this.canEditDescription) {
+            data.website_meta_description = this.htmlPage.description();
         }
-        if (self.canEditKeywords) {
-            data.website_meta_keywords = self.keywordList.keywords().join(", ");
+        if (this.canEditKeywords) {
+            data.website_meta_keywords = this.keywordList.keywords().join(", ");
         }
-        self.saveMetaData(data).then(function () {
-           self.$el.modal('hide');
+        this.saveMetaData(data).then(function () {
+           self.close();
         });
     },
     getMainObject: function () {
@@ -495,7 +487,6 @@ var Configurator = Widget.extend({
         }
     },
     loadMetaData: function () {
-        var self = this;
         var obj = this.getMainObject();
         var def = $.Deferred();
         if (!obj) {
@@ -527,19 +518,19 @@ var Configurator = Widget.extend({
     },
     titleChanged: function () {
         var self = this;
-        setTimeout(function () {
+        _.defer(function () {
             var title = self.$('input[name=seo_page_title]').val();
             self.htmlPage.changeTitle(title);
             self.renderPreview();
-        }, 0);
+        });
     },
     descriptionChanged: function () {
         var self = this;
-        setTimeout(function () {
+        _.defer(function () {
             var description = self.$('textarea[name=seo_page_description]').val();
             self.htmlPage.changeDescription(description);
             self.renderPreview();
-        }, 0);
+        });
     },
     renderPreview: function () {
         var preview = new Preview(this, {
@@ -553,14 +544,14 @@ var Configurator = Widget.extend({
     },
     destroy: function () {
         this.htmlPage.changeKeywords(this.keywordList.keywords());
-        this._super();
+        this._super.apply(this, arguments);
     },
 });
 
 website.TopBar.include({
     start: function () {
-        this.$el.on('click', 'a[data-action=promote-current-page]', function() {
-            new Configurator(this).appendTo($(document.body));
+        this.$el.on('click', 'a[data-action=promote-current-page]', function () {
+            new Configurator(this).open();
         });
         return this._super();
     }
diff --git a/addons/website/static/src/js/website.share.js b/addons/website/static/src/js/website.share.js
index daeeb757d93..4de4dd65117 100644
--- a/addons/website/static/src/js/website.share.js
+++ b/addons/website/static/src/js/website.share.js
@@ -59,7 +59,7 @@ var SocialShare = Widget.extend({
             }, 200);
         });
     },
-    renderSocial: function(social) {
+    renderSocial: function (social) {
         var url = document.URL.split(/[?#]/)[0];  // get current url without query string
         var title = document.title.split(" | ")[0];  // get the page title without the company name
         var hashtags = ' #'+ document.title.split(" | ")[1].replace(' ','') + ' ' + this.hashtags;  // company name without spaces (for hashtag)
@@ -76,8 +76,8 @@ var SocialShare = Widget.extend({
 });
 
 // Initialize all social_share links when ready
-base.ready().done(function() {
-    $('.oe_social_share').mouseenter(function() {
+base.ready().done(function () {
+    $('.oe_social_share').mouseenter(function () {
         new SocialShare($(this));
     });
 });
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 15311cb8dc8..87b7e6dce46 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -8,8 +8,6 @@ var animation = require('web_editor.snippets.animation');
 
 var qweb = core.qweb;
 
-/*-------------------------------------------------------------------------*/
-
 function load_called_template () {
     var ids_or_xml_ids = _.uniq($("[data-oe-call]").map(function () {return $(this).data('oe-call');}).get());
     if (ids_or_xml_ids.length) {
@@ -26,50 +24,6 @@ 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 () {
     load_called_template();
     if ($(".o_gallery:not(.oe_slideshow)").size()) {
@@ -78,8 +32,6 @@ base.ready().then(function () {
     }
 });
 
-/*-------------------------------------------------------------------------*/
-
 animation.registry.slider = animation.Class.extend({
     selector: ".carousel",
     start: function () {
@@ -199,11 +151,11 @@ inside a gallery
 -------------------------------------------------------------------------*/
 animation.registry.gallery = animation.Class.extend({
     selector: ".o_gallery:not(.o_slideshow)",
-    start: function() {
+    start: function () {
         var self = this;
         this.$el.on("click", "img", this.click_handler);
     },
-    click_handler : function(event) {
+    click_handler : function (event) {
         var self = this;
         var $cur = $(event.currentTarget);
         var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
@@ -225,7 +177,7 @@ animation.registry.gallery = animation.Class.extend({
                     height : Math.round( window.innerHeight *  size)
             };
 
-            $images.each(function() {
+            $images.each(function () {
                 urls.push($(this).attr("src"));
             });
             var $img = ($cur.is("img") === true) ? $cur : $cur.closest("img");
@@ -244,7 +196,7 @@ animation.registry.gallery = animation.Class.extend({
                 keyboard : true,
                 backdrop : true
             });
-            $modal.on('hidden.bs.modal', function() {
+            $modal.on('hidden.bs.modal', function () {
                 $(this).hide();
                 $(this).siblings().filter(".modal-backdrop").remove(); // bootstrap leaves a modal-backdrop
                 $(this).remove();
@@ -257,9 +209,10 @@ animation.registry.gallery = animation.Class.extend({
         }
     } // click_handler
 });
+
 animation.registry.gallery_slider = animation.Class.extend({
     selector: ".o_slideshow",
-    start: function() {
+    start: function () {
         var $carousel = this.$target.is(".carousel") ? this.$target : this.$target.find(".carousel");
         var self = this;
         var $indicator = $carousel.find('.carousel-indicators');
@@ -271,7 +224,7 @@ animation.registry.gallery_slider = animation.Class.extend({
         var nb = Math.ceil($lis.length / 10);
 
          // fix bootstrap use index insead of data-slide-to
-        $carousel.on('slide.bs.carousel', function() {
+        $carousel.on('slide.bs.carousel', function () {
             setTimeout(function () {
                 var $item = $carousel.find('.carousel-inner .prev, .carousel-inner .next');
                 var index = $item.index();
@@ -298,7 +251,7 @@ animation.registry.gallery_slider = animation.Class.extend({
         });
         hide();
 
-        $carousel.on('slid.bs.carousel', function() {
+        $carousel.on('slid.bs.carousel', function () {
             var index = ($lis.filter('.active').index() || 1) -1;
             page = Math.floor(index / 10);
             hide();
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 0da262f145e..bf6213aafb5 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -6,16 +6,14 @@ var animation = require('web_editor.snippets.animation');
 var options = require('web_editor.snippets.options');
 var snippet_editor = require('web_editor.snippet.editor');
 
-
 snippet_editor.Class.include({
     _get_snippet_url: function () {
         return '/website/snippets';
     }
 });
 
-
 var preventParentEmpty = {
-    hide_remove_button: function() {
+    hide_remove_button: function () {
         this.$overlay.find('.oe_snippet_remove, .oe_snippet_move').toggleClass("hidden", !this.$target.siblings().length);
     },
     on_focus : function () {
@@ -32,9 +30,8 @@ var preventParentEmpty = {
     },
 };
 
-
 options.registry.slider = options.Class.extend({
-    drop_and_build_snippet: function() {
+    drop_and_build_snippet: function () {
         this.id = "myCarousel" + new Date().getTime();
         this.$target.attr("id", this.id);
         this.$target.find("[data-slide]").attr("data-cke-saved-href", "#" + this.id);
@@ -96,14 +93,14 @@ options.registry.slider = options.Class.extend({
             });
         }
         else {
-            var s_class = selection.attr('class').split(' ').filter(function(o) { return _.str.startsWith(o, "s_") })[0]
+            var s_class = selection.attr('class').split(' ').filter(function (o) { return _.str.startsWith(o, "s_") })[0]
             selection = $snippets.find("." + s_class);
         }
         var $clone = $(selection).find('.item:first').clone();
 
         // insert
         $clone.removeClass('active').insertAfter($active);
-        setTimeout(function() {
+        setTimeout(function () {
             self.$target.carousel().carousel(++index);
             self.rebind_event();
         },0);
@@ -140,7 +137,7 @@ options.registry.slider = options.Class.extend({
             this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden");
         }
     },
-    interval : function(type, value) {
+    interval : function (type, value) {
         this.$target.attr("data-interval", value);
     },
     set_active: function () {
@@ -168,7 +165,7 @@ options.registry.carousel = options.registry.slider.extend({
         this._super();
 
         // set background and prepare to clean for save
-        var add_class = function (c){
+        var add_class = function (c) {
             if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c;
             return self._class || "";
         };
@@ -223,7 +220,7 @@ options.registry.marginAndResize = options.Class.extend({
         if (resize_values.w) this.$overlay.find(".oe_handle.w").removeClass("readonly");
         if (resize_values.size) this.$overlay.find(".oe_handle.size").removeClass("readonly");
 
-        this.$overlay.find(".oe_handle:not(.size), .oe_handle.size .size").on('mousedown', function (event){
+        this.$overlay.find(".oe_handle:not(.size), .oe_handle.size .size").on('mousedown', function (event) {
             event.preventDefault();
 
             var $handle = $(this);
@@ -284,7 +281,7 @@ options.registry.marginAndResize = options.Class.extend({
             var $body = $(document.body);
             $body.addClass(cursor);
 
-            var body_mousemove = function (event){
+            var body_mousemove = function (event) {
                 event.preventDefault();
                 if (compass === 'size') {
                     var dy = event.pageY-offset;
@@ -320,7 +317,7 @@ options.registry.marginAndResize = options.Class.extend({
                 }
             };
 
-            var body_mouseup = function(){
+            var body_mouseup = function () {
                 $body.unbind('mousemove', body_mousemove);
                 $body.unbind('mouseup', body_mouseup);
                 $body.removeClass(cursor);
@@ -335,7 +332,7 @@ options.registry.marginAndResize = options.Class.extend({
             $body.mousemove(body_mousemove);
             $body.mouseup(body_mouseup);
         });
-        this.$overlay.find(".oe_handle.size .auto_size").on('click', function (event){
+        this.$overlay.find(".oe_handle.size .auto_size").on('click', function (event) {
             self.$target.css("height", "");
             self.$target.css("overflow", "");
             self.buildingBlock.parent.rte.historyRecordUndo(self.$target, 'resize_Y');
@@ -419,7 +416,7 @@ options.registry["margin-x"] = options.registry.marginAndResize.extend(preventPa
 
         return this.grid;
     },
-    _drag_and_drop_after_insert_dropzone: function(){
+    _drag_and_drop_after_insert_dropzone: function () {
         var self = this;
         $(".row:has(> .oe_drop_zone)").each(function () {
             var $row = $(this);
@@ -729,7 +726,9 @@ options.registry.collapse = options.Class.extend(preventParentEmpty).extend({
         this.create_ids(this.$target);
     },
     on_clone: function ($clone) {
-        this._super();
+        this._super.apply(this, arguments);
+        $clone.find('[data-toggle="collapse"]').removeAttr('data-target').removeData('target');
+        $clone.find('.panel-collapse').removeAttr('id');
         this.create_ids($clone);
     },
     on_move: function () {
diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js
index 74f20e7a314..7bcc8f34c4d 100644
--- a/addons/website/static/src/js/website.snippets.gallery.js
+++ b/addons/website/static/src/js/website.snippets.gallery.js
@@ -24,7 +24,7 @@ ajax.loadXML('/website/static/src/xml/website.gallery.xml', qweb);
   Look at /website/views/snippets.xml for the available options
   ------------------------------------------------------------------------*/
 options.registry.gallery = options.Class.extend({
-    start  : function() {
+    start  : function () {
         this._super();
         this.bind_change();
         var index = Math.max(_.map(this.$target.find("img").get(), function (img) { return img.dataset.index | 0; }));
@@ -37,27 +37,27 @@ options.registry.gallery = options.Class.extend({
         this._temp_mode = this.$el.find("data-mode").data("mode");
         this._temp_col = this.$el.find("data-columns").data("columns");
     },
-    drop_and_build_snippet: function() {
+    drop_and_build_snippet: function () {
         var uuid = new Date().getTime();
         this.$target.find('.carousel').attr('id', 'slideshow_' + uuid);
         this.$target.find('[data-target]').attr('data-target', '#slideshow_' + uuid);
     },
-    styling  : function(type, value) {
+    styling  : function (type, value) {
         var classes = this.$el.find('li[data-styling]').map(function () {
             return $(this).data('styling');
         }).get().join(' ');
         this.$target.find("img").removeClass(classes).addClass(value);
     },
-    interval : function(type, value) {
+    interval : function (type, value) {
         this.$target.find('.carousel:first').attr("data-interval", value);
     },
-    reapply : function() {
+    reapply : function () {
         var self    = this,
             modes   = [ 'o_nomode', 'o_grid', 'o_masonry', 'o_slideshow' ],
             classes = this.$target.attr("class").split(/\s+/);
         this.cancel_masonry();
 
-        modes.forEach(function(mode) {
+        modes.forEach(function (mode) {
             if (classes.indexOf(mode) != -1) {
                 self.mode("reapply", mode.slice(2, Infinity));
                 return;
@@ -98,7 +98,7 @@ options.registry.gallery = options.Class.extend({
         $container.empty().append($content);
         return $container;
     },
-    nomode : function(type) {
+    nomode : function (type) {
         if (type !== "reapply" && !this.$target.attr('class').match(/o_grid|o_masonry|o_slideshow/)) return;
 
         var self = this,
@@ -126,7 +126,7 @@ options.registry.gallery = options.Class.extend({
         $(this.masonry_imgs).appendTo(this.$target);
         this.masonry_imgs = [];
     },
-    masonry : function(type) {
+    masonry : function (type) {
         var self     = this,
             imgs    = this.get_imgs(),
             columns  = this.get_columns(),
@@ -160,7 +160,7 @@ options.registry.gallery = options.Class.extend({
         if (imgs.length) add();
         this.$target.css("height", "");
     },
-    grid : function(type) {
+    grid : function (type) {
         if (type !== "reapply" && this.$target.hasClass('o_grid')) return;
 
         var self     = this,
@@ -171,7 +171,7 @@ options.registry.gallery = options.Class.extend({
             colClass = "col-md-"+(12/columns),
             $container = this.replace($row);
 
-        $imgs.each(function(index) { // 0 based index
+        $imgs.each(function (index) { // 0 based index
             $img = $(this);
             $col = $img.wrap('<div>').parent();
             self.img_preserve_styles($img);
@@ -190,7 +190,7 @@ options.registry.gallery = options.Class.extend({
 
         var self = this,
             $imgs    = $(this.get_imgs()),
-            urls = $imgs.map(function() { return $(this).attr("src"); } ).get();
+            urls = $imgs.map(function () { return $(this).attr("src"); } ).get();
         var params = {
                 srcs : urls,
                 index: 0,
@@ -215,14 +215,14 @@ options.registry.gallery = options.Class.extend({
             this.$target.data("snippet-view").start(true);
         }
     },
-    columns : function(type, value) {
+    columns : function (type, value) {
         this.$target.attr("data-columns", value);
         if (this._temp_col !== value) {
             this._temp_col = value;
             this.reapply();
         }
     },
-    images_add : function(type) {
+    images_add : function (type) {
         if(type !== "click") return;
         var self = this;
         var $container = this.$target.find(".container:first");
@@ -243,16 +243,16 @@ options.registry.gallery = options.Class.extend({
             },0);
         });
     },
-    images_rm   : function(type) {
+    images_rm   : function (type) {
         if(type !== "click") return;
         this.replace($('<div class="alert alert-info css_editable_mode_display"/>').text(_t("Add Images from the 'Customize' menu")));
     },
-    sizing : function() { // done via css, keep it to avoid undefined error
+    sizing : function () { // done via css, keep it to avoid undefined error
     },
     /*
      *  helpers
      */
-    styles_to_preserve : function($img) {
+    styles_to_preserve : function ($img) {
         var styles = [ 'img-rounded', 'img-thumbnail', 'img-circle', 'shadow', 'fa-spin' ];
         var preserved = [];
         
@@ -263,17 +263,17 @@ options.registry.gallery = options.Class.extend({
         }
         return preserved.join(' ');
     },
-    img_preserve_styles : function($img) {
+    img_preserve_styles : function ($img) {
         var classes = this.styles_to_preserve($img);
         $img.removeAttr("class");
         $img.addClass(classes);
         return $img;
     },
-    img_responsive : function(img) {
+    img_responsive : function (img) {
         img.addClass("img img-responsive");
         return img;
     },
-    lowest : function($cols) {
+    lowest : function ($cols) {
         var height = 0, min = -1, col=0, lowest = undefined;
         $cols.each(function () {
             var $col = $(this);
@@ -285,11 +285,11 @@ options.registry.gallery = options.Class.extend({
         });
         return lowest;
     },
-    get_columns : function() {
+    get_columns : function () {
         return parseInt(this.$target.attr("data-columns") || 3);
     },
 
-    clean_for_save: function() {
+    clean_for_save: function () {
         var self = this;
         if (this.$target.hasClass("slideshow")) {
             this.$target.removeAttr("style");
diff --git a/addons/website/static/src/js/website.theme.js b/addons/website/static/src/js/website.theme.js
index b392f27dc5b..6b4fd81c7ae 100644
--- a/addons/website/static/src/js/website.theme.js
+++ b/addons/website/static/src/js/website.theme.js
@@ -45,7 +45,6 @@ var Theme = Widget.extend({
         this.timer = null;
         this.reload = false;
         this.flag = false;
-        this.$el.addClass("theme_customize_modal");
         this.active_select_tags();
         this.$inputs = this.$("input[data-xmlid],input[data-enable],input[data-disable]");
         setTimeout(function () {self.$el.addClass('in');}, 0);
@@ -95,20 +94,20 @@ var Theme = Widget.extend({
         var self = this;
         $('#theme_error').remove();
         return ajax.jsonRpc('/website/theme_customize_get', 'call', {
-                'xml_ids': this.get_xml_ids(this.$inputs)
-            }).done(function (data) {
-                self.$inputs.filter('[data-xmlid=""]').prop("checked", true).change();
-                self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])').each(function () {
-                    if (!_.difference(self.get_xml_ids($(this)), data[1]).length) {
-                        $(this).prop("checked", false).trigger("change", true);
-                    }
-                    if (!_.difference(self.get_xml_ids($(this)), data[0]).length) {
-                        $(this).prop("checked", true).trigger("change", true);
-                    }
-                });
-            }).fail(function (d, error) {
-                $('body').prepend($('<div id="theme_error"/>').text(error.data.message));
+            'xml_ids': this.get_xml_ids(this.$inputs)
+        }).done(function (data) {
+            self.$inputs.filter('[data-xmlid=""]').prop("checked", true).change();
+            self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])').each(function () {
+                if (!_.difference(self.get_xml_ids($(this)), data[1]).length) {
+                    $(this).prop("checked", false).trigger("change", true);
+                }
+                if (!_.difference(self.get_xml_ids($(this)), data[0]).length) {
+                    $(this).prop("checked", true).trigger("change", true);
+                }
             });
+        }).fail(function (d, error) {
+            $('body').prepend($('<div id="theme_error"/>').text(error.data.message));
+        });
     },
     get_inputs: function (string) {
         return this.$inputs.filter('#'+string.split(/\s*,\s*/).join(", #"));
@@ -278,14 +277,7 @@ function themeError(message) {
         message = '<span class="text-muted">' + message + "</span><br/><br/>" + _t("Please install or update node-less");
     }
 
-    var $error = $( QWeb.render('website.error_dialog', {
-        title: _t("Theme Error"),
-        message: message
-    }));
-    $error.appendTo("body").modal();
-    $error.on('hidden.bs.modal', function () {
-        $(this).remove();
-    });
+    website.error(_t("Theme Error"), message);
 }
 
 function theme_customize() {
diff --git a/addons/website/static/src/js/website.translator.js b/addons/website/static/src/js/website.translator.js
index 1c5d0252dbb..eb53ebaaeef 100644
--- a/addons/website/static/src/js/website.translator.js
+++ b/addons/website/static/src/js/website.translator.js
@@ -55,13 +55,13 @@ var nodialog = 'website_translator_nodialog';
 
 var Translate = translate.Class.include({
     onTranslateReady: function () {
-        if(this.gengo_translate){
+        if(this.gengo_translate) {
             this.translation_gengo_display();
         }
         this._super();
     },
     edit: function () {
-        $("#website_main_menu_navbar").hide();
+        $("#oe_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 () {
-        $("#website_main_menu_navbar").show();
+        $("#oe_main_menu_navbar").show();
         return this._super();
     }
 });
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 36a81cd9bf5..2e879f0f7d5 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 website_modal fade" >
+        <div class="modal o_website_modal fade" >
             <div class="modal-dialog" style="max-width: 50%;">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -69,9 +69,9 @@
             <a class="carousel-control right" t-attf-href="##{id}" data-slide="next"><span class="fa fa-chevron-right" /></a>
         </div> <!-- carousel-id -->
         <script type="text/javascript">
-            (function() {
+            (function () {
             $(".slideshow").css("height", Math.round(window.innerHeight*0.7));
-            $(window).on("resize", function() { $(".slideshow").css("height", Math.round(window.innerHeight*0.7)); });
+            $(window).on("resize", function () { $(".slideshow").css("height", Math.round(window.innerHeight*0.7)); });
             })();
         </script>
     </t>
@@ -88,7 +88,7 @@
     -->
     <t t-name="website.gallery.slideshow.lightbox">
 
-        <div class="modal website_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
+        <div class="modal o_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 2d817f67720..57f3cc76a31 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -11,85 +11,58 @@
         </t>
     </t>
 
-    <t t-name="website.seo_configuration">
-        <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">
-                        <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
-                        <div class="h2">Promote This Page</div>
-                        <div class="text-muted">
-                            Get this page efficiently referenced in Google to attract more visitors.
+    <div t-name="website.seo_configuration">
+        <div class="js_seo_tips" />
+        <section class="js_seo_keywords_list">
+            <h3 class="page-header mt16">1. Define Keywords <small>describing your page content</small></h3>
+            <div class="form-horizontal" role="form">
+                <div class="form-group">
+                    <label for="seo_page_keywords" class="col-sm-3 control-label">Add keyword:</label>
+                    <div class="col-sm-4">
+                        <div>
+                          <input type="text" name="seo_page_keywords" class="form-control" maxlength="30"/>
                         </div>
                     </div>
-                    <div class="modal-body">
-                        <div class="js_seo_tips" />
-                        <section class="js_seo_keywords_list">
-                            <h3 class="page-header mt16">1. Define Keywords <small>describing your page content</small></h3>
-                            <div class="form-horizontal" role="form">
-                                <div class="form-group">
-                                    <label for="seo_page_keywords" class="col-sm-3 control-label">Add keyword:</label>
-                                    <div class="col-sm-4">
-                                        <div>
-                                          <input type="text" name="seo_page_keywords" class="form-control" maxlength="30"/>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row mt8">
-                                    <label for="seo_page_language" class="col-sm-3 control-label">Language:</label>
-                                    <div>
-                                        <div class="col-sm-4">
-                                            <select name="seo_page_language" id="language-box" class="form-control"/>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row mt8">
-                                    <div class="col-md-10 text-center">
-                                        <button data-action="add" class="btn btn-default" type="button">Add</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="text-muted">Most searched topics related to your keywords, ordered by importance:</span>
-                            <!-- filled in JS -->
-                        </section>
-                        <section>
-                            <h3 class="page-header">2. Reference Your Page <small>using above suggested keywords</small></h3>
-                            <div class="form-horizontal mt16" role="form">
-                                <div class="form-group">
-                                    <label for="seo_page_title" class="col-sm-2 control-label">Title</label>
-                                    <div class="col-sm-8">
-                                        <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <label for="seo_page_description" class="col-sm-2 control-label">Description</label>
-                                    <div class="col-sm-8">
-                                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" t-att-maxlength="widget.maxDescriptionSize"/>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                        <section>
-                            <h3 class="page-header">3. Preview <small>how your page will be listed on Google</small></h3>
-                            <div class="js_seo_preview"></div>
-                        </section>
-                        <!--
-                        <section class="js_image_section">
-                            <h3 class="page-header">4. Describe your images</h3>
-                            <div class="row js_seo_image_list">
-                            </div>
-                        </section>
-                        -->
+                </div>
+                <div class="row mt8">
+                    <label for="seo_page_language" class="col-sm-3 control-label">Language:</label>
+                    <div>
+                        <div class="col-sm-4">
+                            <select name="seo_page_language" id="language-box" class="form-control"/>
+                        </div>
                     </div>
-                    <div class="modal-footer">
-                        <button type="button" data-action="update" class="btn btn-primary">Save</button>
-                        or
-                        <a data-action="discard" data-dismiss="modal" href="#" >Discard</a>
+                </div>
+                <div class="row mt8">
+                    <div class="col-md-10 text-center">
+                        <button data-action="add" class="btn btn-default" type="button">Add</button>
                     </div>
                 </div>
             </div>
-        </div>
-    </t>
+            <span class="text-muted">Most searched topics related to your keywords, ordered by importance:</span>
+            <!-- filled in JS -->
+        </section>
+        <section>
+            <h3 class="page-header">2. Reference Your Page <small>using above suggested keywords</small></h3>
+            <div class="form-horizontal mt16" role="form">
+                <div class="form-group">
+                    <label for="seo_page_title" class="col-sm-2 control-label">Title</label>
+                    <div class="col-sm-8">
+                        <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="seo_page_description" class="col-sm-2 control-label">Description</label>
+                    <div class="col-sm-8">
+                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" t-att-maxlength="widget.maxDescriptionSize"/>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <h3 class="page-header">3. Preview <small>how your page will be listed on Google</small></h3>
+            <div class="js_seo_preview"></div>
+        </section>
+    </div>
 
     <t t-name="website.seo_suggestion_list">
         <ul class="list-inline mb0">
diff --git a/addons/website/static/src/xml/website.translator.xml b/addons/website/static/src/xml/website.translator.xml
index 9506813b7b1..4185f418fcc 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 website_modal fade oe_website_translator" tabindex="-1" role="dialog">
+    <div class="modal o_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 184b6f037a5..8bfccbd25dd 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -1,49 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <t t-name="website.mobile_preview">
-        <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">
-                        <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
-                        <h3 class="modal-title">Mobile preview</h3>
-                    </div>
-                    <div class="modal-body">
-                        <iframe id="mobile-viewport" class="oe_mobile_viewport" style="width: 326px"></iframe>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <t t-extend="Dialog">
+        <t t-jquery=".modal-dialog">
+            $(this).parent().addClass('o_website_modal');
+        </t>
     </t>
 
-    <t t-name="website.error_dialog">
-        <div class="modal website_modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
-                        <div class="h2"><t t-esc="title"/></div>
-                    </div>
-                    <div class="modal-body" t-if="message or backend_url">
-                        <section>
-                            <t t-raw="message"/>
-                        </section>
-                        <section class="mt32" t-if="backend_url">
-                            <p>The web site has encountered an error.</p>
-                            <p>
-                                It might be possible to edit the relevant items
-                                or fix the issue in <a t-attf-href="#{backend_url}">
-                                the classic Odoo interface</a>.
-                            </p>
-                        </section>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
+    <div t-name="website.mobile_preview">
+        <iframe id="mobile-viewport" t-att-src="widget.mobile_src"/>
+    </div>
+
+    <div t-name="website.error_dialog">
+        <section t-if="message">
+            <t t-raw="message"/>
+        </section>
+        <section class="mt32" t-if="backend_url">
+            <p>The web site has encountered an error.</p>
+            <p>It might be possible to edit the relevant items or fix the issue in <a t-attf-href="#{backend_url}"> the classic Odoo interface</a>.</p>
+        </section>
+    </div>
 
     <t t-name="website.prompt">
         <t t-call="website.modal_base">
@@ -63,7 +38,7 @@
     </t>
 
     <t t-name="website.modal_base">
-        <div class="modal website_modal " tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal o_website_modal " tabindex="-1" role="dialog" aria-hidden="true">
                 <div class="modal-dialog">
                 <div class="modal-content">
                     <t t-call="website.modal_header" />
@@ -84,8 +59,8 @@
 
     <t t-name="website.modal_footer">
         <div class="modal-footer">
-            <button type="button" class="btn btn-primary btn-continue">Continue</button>
-            <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+            <button type="button" class="btn btn-sm btn-primary btn-continue">Continue</button>
+            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
         </div>
     </t>
 
diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js b/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
index 900977348a2..9bd280cdde6 100644
--- a/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
+++ b/addons/website_mail_channel/static/src/js/website_mail_channel.editor.js
@@ -5,7 +5,6 @@ var core = require('web.core');
 var Model = require('web.Model');
 var base = require('web_editor.base');
 var options = require('web_editor.snippets.options');
-var snippet_editor = require('web_editor.snippet.editor');
 var website = require('website.website');
 
 var _t = core._t;
diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
index 10f5771139f..dac5bf785d8 100644
--- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
@@ -7,11 +7,9 @@ var core = require('web.core');
 var base = require('web_editor.base');
 var web_editor = require('web_editor.editor');
 var options = require('web_editor.snippets.options');
-var snippet_editor = require('web_editor.snippet.editor');
 var website = require('website.website');
 var _t = core._t;
 
-
 var mass_mailing_common = options.Class.extend({
     popup_template_id: "editor_new_mailing_list_subscribe_button",
     popup_title: _t("Add a Newsletter Subscribe Button"),

From ed46965dbe9813159f07e3a1abf5491ac24d387d Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 11:49:10 +0100
Subject: [PATCH 8/8] [FIX] web*: tours

Selector changes + No need to open the snippet panel anymore.
---
 addons/web/static/src/js/tour.js              | 16 +---------
 addons/web_editor/static/src/js/tour.rte.js   | 31 +++++++++++++------
 .../static/src/js/website.tour.banner.js      | 30 +++++++++++-------
 .../website/static/src/js/website.tour.rte.js | 11 ++++---
 .../static/src/js/website.tour.blog.js        | 26 ++++++++--------
 .../static/src/js/website.tour.event.js       | 17 +++-------
 .../static/src/js/website_tour_forum.js       | 20 ++++++------
 .../static/src/js/website_sale_tour_shop.js   | 16 +++++-----
 .../static/src/js/website_sale.test.js        |  2 +-
 9 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/addons/web/static/src/js/tour.js b/addons/web/static/src/js/tour.js
index 6dcac6f1c2b..4bb380f0556 100644
--- a/addons/web/static/src/js/tour.js
+++ b/addons/web/static/src/js/tour.js
@@ -172,21 +172,7 @@ var Tour = {
             if (snippet) {
                 step.snippet = snippet[1];
             } else if (step.snippet) {
-                step.element = '#o_left_bar '+step.snippet+' .oe_snippet_thumbnail';
-                tour.steps.splice(index, 0, {
-                    id: index,
-                    waitNot: step.waitNot,
-                    waitFor: step.waitFor,
-                    title: _t("Move your mouse"),
-                    content: _t("Move your mouse here to open the insert block"),
-                    element: '#o_left_bar',
-                    onend: function () {
-                        $("#oe_snippets").addClass("o_open");
-                    }
-                });
-                step.waitNot = null;
-                step.waitFor = null;
-                index++;
+                step.element = '#oe_snippets ' + step.snippet + ' .oe_snippet_thumbnail';
             }
 
             step.id = index;
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index 8c3c494a73f..2d85600e578 100644
--- a/addons/web_editor/static/src/js/tour.rte.js
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -10,7 +10,7 @@ var _t = core._t;
 
 base.ready().done(function () {
 
-var click_event = function(el, type) {
+var click_event = function (el, type) {
     var evt = document.createEvent("MouseEvents");
     evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
     el.dispatchEvent(evt);
@@ -61,7 +61,7 @@ Tour.register({
         },
         {
             waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
-            element:   '.note-color button.dropdown-toggle:visible',
+            element:   '.note-color button.dropdown-toggle:visible:first',
             title:     "change selection to change text color",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first:not(:has(p font)) h1 font');
@@ -70,12 +70,17 @@ Tour.register({
             }
         },
         {
-            element:   'div[data-target-event="foreColor"]:visible .note-color-row:eq(1) button[data-event="foreColor"]:first',
+            title:     "Select foreground spectrum colorpanel",
+            waitFor:   ".dropdown-menu:visible",
+            element:   ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
+        },
+        {
+            element:   ".dropdown-menu:visible .note-color-row:eq(1) button[data-event=foreColor]:first",
             title:     "change text color",
         },
         {
             waitFor:   '#editable_area > section .row > div:first h1 font:eq(2)',
-            element:   '.note-color button.dropdown-toggle:visible',
+            element:   '.note-color button.dropdown-toggle:visible:last',
             title:     "change selection to change text bg-color again",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first h1 font:eq(2)');
@@ -84,12 +89,17 @@ Tour.register({
             }
         },
         {
-            element:   'div[data-target-event="backColor"] .colorpicker button[data-event="backColor"]:first',
+            title:     "Select background spectrum colorpanel",
+            waitFor:   ".dropdown-menu:visible",
+            element:   ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
+        },
+        {
+            element:   ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=backColor]:first",
             title:     "change text backColor again",
         },
         {
             waitFor:   '#editable_area > section .row > div:first h1 font:eq(4)',
-            element:   '.note-color button.dropdown-toggle:visible',
+            element:   '.note-color button.dropdown-toggle:visible:first',
             title:     "change selection (h1 and p) to change text color with class",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first h1 font:eq(4)');
@@ -98,7 +108,8 @@ Tour.register({
             }
         },
         {
-            element:   'div[data-target-event="foreColor"]:visible button[data-event="foreColor"][data-value^="text-"]:first',
+            waitFor:   ".dropdown-menu:visible",
+            element:   ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=foreColor]:first",
             title:     "change text foreColor again",
         },
         {
@@ -170,7 +181,7 @@ Tour.register({
             title:     "select a pictogram",
         },
         {
-            waitFor:   '#editor-media-icon.active span.font-icons-selected',
+            waitFor:   '#editor-media-icon.active span.o_selected',
             element:   '.modal button.save',
             title:     "save pictogram",
         },
@@ -377,7 +388,7 @@ Tour.register({
             title:     "check the image style",
         },
         {
-            waitFor:   '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(66,139,202)/32"]',
+            waitFor:   '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]',
             title:     "check the font image src",
         },
         {
@@ -385,7 +396,7 @@ Tour.register({
             title:     "check the font class to css",
         },
         {
-            waitFor:   '#wrapwrap img:eq(2)[style*="float:right"]',
+            waitFor:   '#wrapwrap img:eq(2)[style*="float: right"]',
             title:     "check the second font class to css",
         },
     ]
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 6ba8de14dbf..18b4e5b7997 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -15,20 +15,21 @@ base.ready().done(function () {
         path: '/page/homepage',
         steps: [
             {
+                waitNot:   'body.editor_enable',
                 title:     _t("Welcome to your website!"),
                 content:   _t("This tutorial will guide you to build your home page. We will start by adding a banner."),
                 popover:   { next: _t("Start Tutorial"), end: _t("Skip It") },
             },
             {
                 waitNot:   '.popover.tour',
-                element:   'button[data-action=edit]',
+                element:   'a[data-action=edit]',
                 placement: 'bottom',
                 title:     _t("Edit this page"),
                 content:   _t("Every page of your website can be modified through the <i>Edit</i> button."),
                 popover:   { fixed: true },
             },
             {
-                snippet:   '#snippet_structure .oe_snippet:first',
+                snippet:   '#snippet_structure .oe_snippet:eq(1)',
                 placement: 'bottom',
                 title:     _t("Drag & Drop a Banner"),
                 content:   _t("Drag the Banner block and drop it in your page."),
@@ -36,7 +37,7 @@ base.ready().done(function () {
             },
             {
                 waitFor:   '.oe_overlay_options .oe_options:visible',
-                element:   '#wrapwrap .carousel:first div.carousel-content',
+                element:   '#wrapwrap .carousel:first div.carousel-content h3',
                 placement: 'top',
                 title:     _t("Customize banner's text"),
                 content:   _t("Click in the text and start editing it."),
@@ -54,14 +55,14 @@ base.ready().done(function () {
             },
             {
                 element:   '.oe_overlay_options .oe_options:visible',
-                placement: 'left',
+                placement: 'bottom',
                 title:     _t("Customize the banner"),
                 content:   _t("Customize any block through this menu. Try to change the background of the banner."),
                 popover:   { next: _t("Continue") },
             },
             {
                 waitNot:   '.popover.tour',
-                snippet:   '#snippet_structure .oe_snippet:eq(7)',
+                snippet:   '#snippet_structure .oe_snippet:eq(6)',
                 placement: 'bottom',
                 title:     _t("Drag & Drop This Block"),
                 content:   _t("Drag the <em>'Features'</em> block and drop it below the banner."),
@@ -70,13 +71,13 @@ base.ready().done(function () {
             {
                 waitFor:   '.oe_overlay_options .oe_options:visible',
                 element:   'button[data-action=save]',
-                placement: 'right',
+                placement: 'bottom',
                 title:     _t("Save your modifications"),
                 content:   _t("Publish your page by clicking on the <em>'Save'</em> button."),
                 popover:   { fixed: true },
             },
             {
-                waitFor:   'button[data-action=edit]:visible',
+                waitNot:   'body.editor_enable',
                 title:     _t("Good Job!"),
                 content:   _t("Well done, you created your homepage."),
                 popover:   { next: _t("Continue") },
@@ -94,14 +95,21 @@ base.ready().done(function () {
                 placement: 'right',
                 title:     _t("Check Mobile Preview"),
                 content:   _t("Scroll to check rendering and then close the mobile preview."),
-                popover:   { next: _t("Continue") },
             },
             {
                 waitNot:   '.modal-dialog:has(#mobile-viewport)',
                 element:   '#content-menu-button',
-                placement: 'left',
-                title:     _t("Add new pages and menus"),
-                content:   _t("The 'Content' menu allows you to add pages or add the top menu."),
+                placement: 'right',
+                title:     _t("Pages and menus"),
+                content:   _t("The 'Content' menu allows you to rename and delete pages or add them to the top menu."),
+                popover:   { next: _t("Continue") },
+            },
+            {
+                waitNot:   '.popover.tour',
+                element:   '#oe_main_menu_navbar a[data-action=new_page]',
+                placement: 'bottom',
+                title:     _t("Add new pages"),
+                content:   _t("Use this button to add pages"),
                 popover:   { next: _t("Close Tutorial") },
             },
         ]
diff --git a/addons/website/static/src/js/website.tour.rte.js b/addons/website/static/src/js/website.tour.rte.js
index 53bc4b1bcfe..b30f95e1fa2 100644
--- a/addons/website/static/src/js/website.tour.rte.js
+++ b/addons/website/static/src/js/website.tour.rte.js
@@ -31,12 +31,13 @@ Tour.register({
             }
         },
         {
-            title:     "Open content menu",
-            element:   '#content-menu-button',
+            waitFor:   'a[data-action="edit"]',
+            title:     "Open new page menu",
+            element:   '#oe_main_menu_navbar a[data-action=new_page]',
         },
         {
             title:     "click on new page",
-            element:   '[data-action="new_page"]',
+            element:   '.modal a[data-action="new_page"]',
         },
         {
             title:     "insert page name",
@@ -77,7 +78,7 @@ Tour.register({
         {
             title:     "translate",
             waitNot:   '#wrap p span',
-            element:   '#oe_editzone button[data-action="translate"]',
+            element:   '.o_menu_systray a[data-action="translate"]',
         },
         {
             title:     "check if translation is activate",
@@ -144,7 +145,7 @@ Tour.register({
         {
             title:     "edit english version",
             waitNot:   '#wrap p font:first:containsExact(paragraphs <b>describing</b>)',
-            element:   'button[data-action=edit]',
+            element:   'a[data-action=edit]',
         },
         {
             title:     "select text",
diff --git a/addons/website_blog/static/src/js/website.tour.blog.js b/addons/website_blog/static/src/js/website.tour.blog.js
index db05ea1a8a0..feeea18a527 100644
--- a/addons/website_blog/static/src/js/website.tour.blog.js
+++ b/addons/website_blog/static/src/js/website.tour.blog.js
@@ -19,10 +19,10 @@ base.ready().done(function () {
                 popover:   { next: _t("Start Tutorial"), end: _t("Skip") },
             },
             {
-                element:   '#content-menu-button',
-                placement: 'left',
+                element:   '#oe_main_menu_navbar a[data-action=new_page]',
+                placement: 'bottom',
                 title:     _t("Add Content"),
-                content:   _t("Use this <em>'Content'</em> menu to create a new blog post like any other document (page, menu, products, event, ...)."),
+                content:   _t("Use this button to create a new blog post like any other document (page, menu, products, event, ...)."),
                 popover:   { fixed: true },
             },
             {
@@ -49,28 +49,28 @@ base.ready().done(function () {
             {
                 waitNot:   '#wrap h1[data-oe-expression="blog_post.name"]:'+'containsExact("")',
                 element:   '#oe_manipulators .oe_overlay.oe_active a.btn.btn-primary.btn-sm',
-                placement: 'left',
+                placement: 'right',
                 title:     _t("Customize Cover"),
                 content:   _t("Change and customize your blog post cover."),
                 popover:   { fixed: true },
             },
             {
                 element:   'a:'+ 'containsExact(' + _t("Change Cover")+ '):eq(1)',
-                placement: 'left',
+                placement: 'right',
                 title:     _t("Cover"),
                 content:   _t("Select this menu item to change blog cover."),
                 popover:   { fixed: true },
             },
             {
-                waitFor:   '.modal:has(.existing-attachment-cell:nth(1))',
-                element:   '.modal .existing-attachment-cell:nth(1) img',
+                waitFor:   '.modal:has(.o_existing_attachment_cell:nth(1))',
+                element:   '.modal .o_existing_attachment_cell:nth(1) img',
                 placement: 'top',
                 title:     _t("Choose an image"),
                 content:   _t("Choose an image from the library."),
                 popover:   { fixed: true },
             },
             {
-                waitFor:   '.existing-attachment-cell.media_selected',
+                waitFor:   '.o_existing_attachment_cell.o_selected',
                 element:   '.modal-content button.save',
                 placement: 'top',
                 title:     _t("Save"),
@@ -82,15 +82,15 @@ base.ready().done(function () {
                 element:   '.blog_content section.mt16',
                 placement: 'top',
                 title:     _t("Content"),
-                content:   _t("Start writing your story here. Click on save in the upper left corner when you are done."),
+                content:   _t("Start writing your story here."),
                 sampleText: ' ',
                 popover:   { fixed: true },
             },
             {
-                waitNot:   '.blog_content section.mt16 p:'+'containsExact('+_t('Start writing here...')+')',
+                waitNot:   '#blog_content section:first p:first:containsExact(' + _t('Start writing here...') + ')',
                 element:   'button[data-action=save]',
-                placement: 'right',
-                title:     _t("Save Your Blog"),
+                placement: 'bottom',
+                title:     _t("Save your modifications once you are done"),
                 content:   _t("Click on '<em>Save</em>' button to record changes on the page."),
                 popover:   { fixed: true },
             },
@@ -120,7 +120,7 @@ base.ready().done(function () {
             {
                 waitFor:   '.js_publish_management button.js_publish_btn.btn-success:visible',
                 title:     "Thanks!",
-                content:   _t("This tutorial is over. To discover more features and improve the content of this page, go to the upper right customize menu. You can also add some cool content with your text by clicking on 'Insert Blocks' in the edit mode."),
+                content:   _t("This tutorial is over. To discover more features and improve the content of this page, go to the upper left customize menu. You can also add some cool content with your text in the edit mode with the upper right button."),
                 popover:   { next: _t("Close Tutorial") },
             },
         ]
diff --git a/addons/website_event/static/src/js/website.tour.event.js b/addons/website_event/static/src/js/website.tour.event.js
index d56c5c82013..bcee9f19511 100644
--- a/addons/website_event/static/src/js/website.tour.event.js
+++ b/addons/website_event/static/src/js/website.tour.event.js
@@ -20,10 +20,10 @@ base.ready().done(function () {
                 popover:   { next: _t("Start Tutorial"), end: _t("Skip It") },
             },
             {
-                element:   '#content-menu-button',
-                placement: 'left',
+                element:   '#oe_main_menu_navbar a[data-action=new_page]',
+                placement: 'bottom',
                 title:     _t("Add Content"),
-                content:   _t("The <em>Content</em> menu allows you to create new pages, events, menus, etc."),
+                content:   _t("This button allows you to create new pages, events, menus, etc."),
                 popover:   { fixed: true },
             },
             {
@@ -60,22 +60,15 @@ base.ready().done(function () {
                 content:   _t("Drag the 'Image-Text' block and drop it in your page."),
                 popover:   { fixed: true },
             },
-            {
-                snippet:   '#snippet_structure .oe_snippet:eq(4)',
-                placement: 'bottom',
-                title:     _t("Drag & Drop a block"),
-                content:   _t("Drag the 'Text Block' in your event page."),
-                popover:   { fixed: true },
-            },
             {
                 element:   'button[data-action=save]',
-                placement: 'right',
+                placement: 'bottom',
                 title:     _t("Save your modifications"),
                 content:   _t("Once you click on save, your event is updated."),
                 popover:   { fixed: true },
             },
             {
-                waitFor:   'button[data-action=edit]:visible',
+                waitNot:   '#web_editor-top-edit',
                 element:   'button.btn-danger.js_publish_btn',
                 placement: 'top',
                 title:     _t("Publish your event"),
diff --git a/addons/website_forum/static/src/js/website_tour_forum.js b/addons/website_forum/static/src/js/website_tour_forum.js
index 1dde57d5a01..6ec379f079e 100644
--- a/addons/website_forum/static/src/js/website_tour_forum.js
+++ b/addons/website_forum/static/src/js/website_tour_forum.js
@@ -17,9 +17,9 @@ Tour.register({
         },
         {
             title:     _t("Add Content"),
-            element:   '#content-menu-button',
-            placement: 'left',
-            content:   _t("Use this <em>'Content'</em> menu to create a new forum like any other document (page, menu, products, event, ...)."),
+            element:   '#oe_main_menu_navbar a[data-action=new_page]',
+            placement: 'bottom',
+            content:   _t("Use this button to create a new forum like any other document (page, menu, products, event, ...)."),
             popover:   { fixed: true },
         },
         {
@@ -34,7 +34,7 @@ Tour.register({
             element:   '.modal #editor_new_forum input[type=text]',
             sampleText:'New Forum',
             placement: 'right',
-            content:   _t("Enter a name for your new forum then click 'Continue'."),
+            content:   _t("Enter a name for your new forum."),
         },
         {
             title:     _t("Create Forum"),
@@ -45,7 +45,7 @@ Tour.register({
         },
         {
             title:     _t("New Forum Created"),
-            waitFor:   'body:not(.modal-open)',
+            waitNot:   '.modal:visible',
             content:   _t("This page contains all the information related to the new forum."),
             popover:   { next: _t("Continue") },
         },
@@ -72,7 +72,7 @@ Tour.register({
         },
         {
             title:     _t("Give Tag"),
-            waitFor:   '.note-editable:not(:has(br))',
+            waitNot:   '.note-editable p:containsExact("<br>")',
             element:   '.select2-choices',
             placement: 'top',
             content:   _t("Insert tags related to your question."),
@@ -86,7 +86,7 @@ Tour.register({
         },
         {
             title:     _t("New Question Created"),
-            waitFor:   'body:has(".fa-star")',
+            waitFor:   '.fa-star',
             content:   _t("This page contains the newly created questions."),
             popover:   { next: _t("Continue") },
         },
@@ -99,14 +99,14 @@ Tour.register({
         },
         {
             title:     _t("Post Answer"),
-            waitFor:   '.note-editable:not(:has(br))',
+            waitNot:   '.note-editable p:containsExact("<br>")',
             element:   'button:contains("Post Answer")',
             placement: 'bottom',
             content:   _t("Click to post your answer."),
         },
         {
             title:     _t("Answer Posted"),
-            waitFor:   'body:has(".fa-check-circle")',
+            waitFor:   '.fa-check-circle',
             content:   _t("This page contains the newly created questions and its answers."),
             popover:   { next: _t("Continue") },
         },
@@ -118,7 +118,7 @@ Tour.register({
         },
         {
             title:     _t("Congratulations"),
-            waitFor:   'body:has(".oe_answer_true")',
+            waitFor:   '.oe_answer_true',
             content:   _t("Congratulations! You just created and post your first question and answer."),
             popover:   { next: _t("Close Tutorial") },
         },
diff --git a/addons/website_sale/static/src/js/website_sale_tour_shop.js b/addons/website_sale/static/src/js/website_sale_tour_shop.js
index 4d533c1f609..216170085bc 100644
--- a/addons/website_sale/static/src/js/website_sale_tour_shop.js
+++ b/addons/website_sale/static/src/js/website_sale_tour_shop.js
@@ -19,8 +19,8 @@ base.ready().done(function () {
                 popover:   { next: _t("Start Tutorial"), end: _t("Skip It") },
             },
             {
-                element:   '#content-menu-button',
-                placement: 'left',
+                element:   '#oe_main_menu_navbar a[data-action=new_page]',
+                placement: 'bottom',
                 title:     _t("Create your first product"),
                 content:   _t("Click here to add a new product."),
                 popover:   { fixed: true },
@@ -53,21 +53,21 @@ base.ready().done(function () {
                 popover:   { next: _t("Continue") },
             },
             {
-                element:   '.product_price .oe_currency_value:visible',
+                element:   '.product_price .oe_currency_value:visible:first',
                 sampleText: '20.50',
-                placement: 'left',
+                placement: 'bottom',
                 title:     _t("Change the price"),
                 content:   _t("Edit the price of this product by clicking on the amount."),
             },
             {
-                waitNot:   '.product_price .oe_currency_value:visible:containsExact(1.00)',
+                waitNot:   '.product_price .oe_currency_value:visible:first:containsExact(1.00)',
                 element:   '#wrap img.product_detail_img',
                 placement: 'top',
                 title:     _t("Update image"),
                 content:   _t("Click here to set an image describing your product."),
             },
             {
-                element:   '.modal .existing-attachment-cell:nth(2) img',
+                element:   '.modal .o_existing_attachment_cell:nth(2) img',
                 placement: 'top',
                 title:     _t("Choose an image"),
                 content:   _t("Choose an image from the library."),
@@ -79,7 +79,7 @@ base.ready().done(function () {
             {
                 element:   '.modal .btn.save',
                 placement: 'right',
-                waitFor:   '.existing-attachment-cell.media_selected',
+                waitFor:   '.o_existing_attachment_cell.o_selected',
                 title:       _t("Save"),
                 content:     _t("Click on <em>Save</em> to add the image to the product description."),
             },
@@ -93,7 +93,7 @@ base.ready().done(function () {
             },
             {
                 element:   'button[data-action=save]',
-                placement: 'right',
+                placement: 'bottom',
                 title:     _t("Save your modifications"),
                 content:   _t("Once you click on <em>Save</em>, your product is updated."),
                 popover:   { fixed: true },
diff --git a/addons/website_sale_options/static/src/js/website_sale.test.js b/addons/website_sale_options/static/src/js/website_sale.test.js
index 69ddb27468c..a4a6bb267a3 100644
--- a/addons/website_sale_options/static/src/js/website_sale.test.js
+++ b/addons/website_sale_options/static/src/js/website_sale.test.js
@@ -88,7 +88,7 @@ Tour.register({
         },
         {
             title:     "remove 'Product Attribute's Filters'",
-            element:   "#customize-menu a:contains(Product Attribute's Filters):has(.fa-check-square-o)",
+            element:   "#customize-menu a:contains(Product Attribute's Filters):has(input:checked)",
         },
         {
             title:     "finish",