[IMP] web_editor: create a css for editor and can be used without bootstrap.css and without change with themes

2 files changed, 2167 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/css/editor.css b/addons/web_editor/static/src/css/editor.css
new file mode 100644
index 00000000000..be264550f0f
--- /dev/null
+++ b/addons/web_editor/static/src/css/editor.css
@@ -0,0 +1,1183 @@
+/* ---- 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 .img {
+  border: 1px solid #848490;
+}
+.note-image-dialog .existing-attachments .existing-attachment-cell .existing-attachment-remove {
+  position: absolute;
+  top: 0;
+  left: 15px;
+  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 > i, .note-image-dialog .existing-attachments .existing-attachment-cell.media_selected > img {
+  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;
+}
+
+/* }}} */
+/* ---- Default 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 {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  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;
+}
+
+/* }}} */
+/* ---- 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;
+}
+
+.img-responsive {
+  text-align: center;
+}
+
+.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;
+}
+
+.oe_empty[data-oe-placeholder]:empty {
+  min-height: 220px !important;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.oe_empty[data-oe-placeholder]:empty:not(.o_editable) {
+  background-image: url("/web_editor/static/src/img/edit_here.png") !important;
+}
+.oe_empty[data-oe-placeholder]:empty:after, .oe_empty[data-oe-placeholder]:empty:before {
+  opacity: 0.4;
+  overflow: hidden;
+  z-index: -1;
+  min-height: 1em;
+}
+.oe_empty[data-oe-placeholder]:empty:after {
+  text-align: center;
+  padding-top: 160px;
+  display: block;
+  content: "  " attr(data-oe-placeholder);
+  font-size: 24px;
+}
+.oe_empty[data-oe-placeholder]:empty.o_no_placeholder_image {
+  background-image: none;
+  text-align: left;
+  padding-top: 0;
+}
+.oe_empty[data-oe-placeholder]:empty[data-oe-type=html]:after {
+  font-size: 16px;
+}
+
+.editor_has_snippets .oe_empty[data-oe-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
new file mode 100644
index 00000000000..da05b02145e
--- /dev/null
+++ b/addons/web_editor/static/src/css/editor.sass
@@ -0,0 +1,984 @@
+@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
+            .img
+                border: 1px solid $attachment-border-color
+            .existing-attachment-remove
+                position: absolute
+                top: 0
+                left: 15px // padding-left on col-*
+
+                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
+                > i, > img 
+                    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
+
+/* }}} */
+
+/* ---- Default values ----  {{{ */
+
+.tooltip
+    position: absolute
+    z-index: 1070
+    display: block
+    visibility: visible
+    font-size: 12px
+    line-height: 1.4
+    opacity: 0
+    filter: alpha(opacity=0)
+    &.in
+        opacity: .9
+        filter: alpha(opacity=90)
+    &.bottom
+        margin-top: 3px
+        padding: 5px 0
+        .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
+    opacity: 0
+    -webkit-transition: opacity .15s linear
+    -o-transition: opacity .15s linear
+    transition: opacity .15s linear
+.fade.in
+    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.42857143
+    background-color: #fff
+    border: 1px solid #ddd
+    border-radius: 4px
+    -webkit-transition: all .2s ease-in-out
+    -o-transition: all .2s ease-in-out
+    transition: all .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
+
+/* }}} */
+
+/* ---- 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
+
+.img-responsive
+    text-align: center
+
+.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
+ 
+.oe_empty[data-oe-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
+        content: " \00a0 " attr(data-oe-placeholder)
+        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[data-oe-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
+
+/* }}} */