[IMP] website snippet: create snippets.sass, imrpove css and resizing layout

bzr revid: chm@openerp.com-20140115125923-eggv51bsvokc7a06

7 files changed, 1046 insertions, 859 deletions

diff --git a/addons/website/static/src/css/Makefile b/addons/website/static/src/css/Makefile
index 44d0e1af989..18ce9e4154e 100644
--- a/addons/website/static/src/css/Makefile
+++ b/addons/website/static/src/css/Makefile
@@ -1,3 +1,4 @@
 sass:
 	sass -t expanded --compass --unix-newlines --watch website.sass:website.css&
 	sass -t expanded --compass --unix-newlines --watch editor.sass:editor.css&
+	sass -t expanded --compass --unix-newlines --watch snippets.sass:snippets.css&
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index d786830c8f5..6e1a25c2045 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -248,387 +248,6 @@ ul.oe_menu_editor .disclose {
   z-index: 1000;
 }
 
-/* ---- SNIPPET EDITOR ---- {{{ */
-#oe_snippets {
-  position: fixed;
-  left: 0px;
-  right: 0px;
-  background: #282828;
-  -webkit-box-shadow: 0px 10px 10px -10px black inset;
-  -moz-box-shadow: 0px 10px 10px -10px black inset;
-  box-shadow: 0px 10px 10px -10px black inset;
-  z-index: 1010;
-  overflow: hidden;
-}
-#oe_snippets:hover {
-  height: auto;
-}
-#oe_snippets .scroll {
-  white-space: nowrap;
-  overflow-y: none;
-}
-#oe_snippets .nav {
-  display: inline-block;
-  border-bottom: none !important;
-  vertical-align: middle;
-  min-width: 120px;
-  z-index: 1;
-}
-#oe_snippets .nav > li {
-  display: block;
-  float: none;
-}
-#oe_snippets .nav > li.active {
-  background: black !important;
-}
-#oe_snippets .nav > li > a {
-  padding: 2px 10px !important;
-  width: 100%;
-  display: block;
-  border: 0;
-}
-#oe_snippets .pill-content {
-  border: 0;
-}
-#oe_snippets .tab-content {
-  display: inline-block;
-  white-space: nowrap;
-  background: black;
-}
-#oe_snippets .tab-content > div {
-  background: black;
-}
-#oe_snippets .tab-content > div label {
-  width: 44px;
-  color: white;
-  padding-left: 10px;
-}
-#oe_snippets .tab-content > div label div {
-  width: 100px;
-  text-align: center;
-  -webkit-transform: translate(-39px, 44px);
-  -moz-transform: translate(-39px, 44px);
-  -ms-transform: translate(-39px, 44px);
-  -o-transform: translate(-39px, 44px);
-  transform: translate(-39px, 44px);
-  -webkit-transform-origin: 50% 50% 50%;
-  -moz-transform-origin: 50% 50% 50%;
-  -ms-transform-origin: 50% 50% 50%;
-  -o-transform-origin: 50% 50% 50%;
-  transform-origin: 50% 50% 50%;
-}
-
-.oe_snippet {
-  float: left;
-  vertical-align: top;
-  width: 93px;
-  margin-left: 1px;
-  margin-top: 0px;
-  position: relative;
-  overflow: hidden;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  cursor: move;
-  pointer-events: none;
-}
-.oe_snippet .oe_snippet_thumbnail {
-  pointer-events: auto;
-  text-align: center;
-  height: 100%;
-  background: transparent;
-  color: white;
-  position: relative;
-}
-.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
-  -webkit-transform: scale(0.95, 0.95);
-  -moz-transform: scale(0.95, 0.95);
-  -ms-transform: scale(0.95, 0.95);
-  -o-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;
-  -webkit-transition: all 150ms linear;
-  -moz-transition: all 150ms linear;
-  -o-transition: all 150ms linear;
-  transition: all 150ms linear;
-  -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
-  -moz-box-shadow: inset 0px 0px 0px 3px #333333;
-  box-shadow: inset 0px 0px 0px 3px #333333;
-  -webkit-transform: scale(1, 1);
-  -moz-transform: scale(1, 1);
-  -ms-transform: scale(1, 1);
-  -o-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_snippets .oe_snippet_thumbnail {
-  background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, 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, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  background: #747474, -o-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;
-  -webkit-transition: margin 250ms linear;
-  -moz-transition: margin 250ms linear;
-  -o-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_overlay {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-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);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-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;
-  position: absolute;
-  background: transparent;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-transition: opacity 100ms linear;
-  -moz-transition: opacity 100ms linear;
-  -o-transition: opacity 100ms linear;
-  transition: opacity 100ms linear;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  pointer-events: none;
-}
-.oe_overlay.oe_active {
-  display: block;
-  border-style: dashed;
-  border-width: 1px;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  border-color: rgba(0, 0, 0, 0.5);
-}
-.oe_overlay .oe_handle {
-  display: block !important;
-  pointer-events: auto;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 12px;
-  height: 12px;
-  margin: -2px;
-}
-.oe_overlay .oe_handle:before {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  display: block;
-  background: white;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-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);
-  -webkit-transition: background 100ms linear;
-  -moz-transition: background 100ms linear;
-  -o-transition: background 100ms linear;
-  transition: background 100ms linear;
-}
-.oe_overlay .oe_handle:hover:before {
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
-  -moz-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 {
-  left: auto;
-  top: 2px;
-  height: 100%;
-  right: -4px;
-  cursor: w-resize;
-}
-.oe_overlay .oe_handle.e:before {
-  content: "\F061";
-}
-.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.size {
-  top: auto;
-  left: 2px;
-  width: 100%;
-  bottom: -4px;
-  cursor: n-resize;
-}
-.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.size:before {
-  content: "\F063";
-}
-.oe_overlay .oe_handle.size {
-  border-style: dashed;
-  border-width: 0 0 1px 0;
-  border-color: rgba(0, 0, 0, 0.5);
-}
-.oe_overlay .oe_handle.size:before {
-  content: "Resize";
-  width: 64px;
-  text-align: center;
-  margin-left: -32px;
-  margin-top: -4px;
-}
-.oe_overlay .oe_handle.w {
-  top: 2px;
-  height: 100%;
-  left: -4px;
-  cursor: e-resize;
-}
-.oe_overlay .oe_handle.w:before {
-  content: "\F060";
-}
-.oe_overlay .oe_handle.n {
-  left: 2px;
-  width: 100%;
-  top: -4px;
-  cursor: s-resize;
-}
-.oe_overlay .oe_handle.n:before {
-  content: "\F062";
-}
-.oe_overlay .icon.btn {
-  display: inline-block;
-}
-.oe_overlay .oe_overlay_options {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-  top: -11px;
-  z-index: 1002;
-}
-.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
-  pointer-events: auto;
-  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_handle {
-  pointer-events: auto;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: block;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 8px;
-  height: 8px;
-  margin: -4px;
-}
-
-.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;
-}
-
 /* ---- MOBILE PREVIEW ---- {{{ */
 .oe_mobile_preview.modal .modal-content {
   height: 660px;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 66665252379..e3e3f27166b 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -216,281 +216,6 @@ ul.oe_menu_editor
 
 // }}}
 
-/* ---- SNIPPET EDITOR ---- {{{ */
-
-#oe_snippets
-    position: fixed
-    left: 0px
-    right: 0px
-    // top property is set programmatically
-    background: rgb(40,40,40)
-    +box-shadow(0px 10px 10px -10px black inset)
-    z-index: 1010
-    overflow: hidden
-    &:hover
-        height: auto
-    .scroll
-        white-space: nowrap
-        overflow-y: none
-    .nav
-        display: inline-block
-        border-bottom: none !important
-        vertical-align: middle
-        min-width: 120px
-        > li
-            display: block
-            float: none
-            &.active
-                background: black !important
-            > a
-                padding: 2px 10px !important
-                width: 100%
-                display: block
-                border: 0
-        z-index: 1
-    .pill-content
-        border: 0
-    .tab-content
-        display: inline-block
-        white-space: nowrap
-        background: black
-        > 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% 50%)
-
-.oe_snippet
-    float: left
-    vertical-align: top
-    width: 93px
-    margin-left: 1px
-    margin-top: 0px
-    position: relative
-    overflow: hidden
-    +user-select(none)
-    cursor: move
-    pointer-events: none
-    .oe_snippet_thumbnail
-        pointer-events: auto
-        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
-            @include transition(all 150ms linear)
-            +box-shadow(inset 0px 0px 0px 3px #333333)
-            @include transform( scale(1,1))
-        span, div
-            line-height: 18px
-    & > :not(.oe_snippet_thumbnail)
-        display: none !important
-
-#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_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
-    position: absolute
-    background: transparent
-    //@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)
-    pointer-events: none
-    &.oe_active
-        display: block
-        border-style: dashed
-        border-width: 1px
-        +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
-        border-color: rgba(0, 0, 0, 0.5)
-    .oe_handle
-        display: block !important
-        pointer-events: auto
-        position: absolute
-        top: 50%
-        left: 50%
-        +box-sizing(border-box)
-        width: 12px
-        height: 12px
-        margin: -2px
-        &:before
-            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)
-        &:hover:before
-            background: rgba(0, 0, 0, .5)
-            color: #fff
-            +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-    .oe_handle.e
-        left: auto
-        top: 2px
-        height: 100%
-        right: -4px
-        cursor: w-resize
-        &:before
-            content: "\F061"
-    .oe_handle.s, .oe_handle.size
-        top: auto
-        left: 2px
-        width: 100%
-        bottom: -4px
-        cursor: n-resize
-        &:before
-            content: "\F063"
-    .oe_handle.size
-        border-style: dashed
-        border-width: 0 0 1px 0
-        border-color: rgba(0, 0, 0, 0.5)
-        &:before
-            content: "Resize"
-            width: 64px
-            text-align: center
-            margin-left: -32px
-            margin-top: -4px
-    .oe_handle.w
-        top: 2px
-        height: 100%
-        left: -4px
-        cursor: e-resize
-        &:before
-            content: "\F060"
-    .oe_handle.n
-        left: 2px
-        width: 100%
-        top: -4px
-        cursor: s-resize
-        &:before
-            content: "\F062"
-
-    .icon.btn
-        display: inline-block
-
-    .oe_overlay_options
-        position: absolute
-        width: 100%
-        text-align: center
-        top: -11px
-        z-index: 1002
-        .btn, a
-            pointer-events: auto
-            cursor: pointer
-        .dropdown
-            display: inline-block
-        .dropdown-menu
-            text-align: left
-            min-width: 180px
-        .dropdown-menu select,.dropdown-menu input
-            display: block
-
-.oe_handle
-    pointer-events: auto
-    position: absolute
-    top: 50%
-    left: 50%
-    display: block
-    +box-sizing(border-box)
-    width: 8px
-    height: 8px
-    margin: -4px
-
-.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
-
-// }}}
-
 /* ---- MOBILE PREVIEW ---- {{{ */
 
 $mobile_preview_background: #000000
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 63e8fbefa76..00235b3f028 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -1,220 +1,588 @@
+/* ---- SNIPPET EDITOR ---- {{{ */
+#oe_snippets {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  background: #282828;
+  -webkit-box-shadow: 0px 10px 10px -10px black inset;
+  -moz-box-shadow: 0px 10px 10px -10px black inset;
+  box-shadow: 0px 10px 10px -10px black inset;
+  z-index: 1010;
+  overflow: hidden;
+}
+#oe_snippets:hover {
+  height: auto;
+}
+#oe_snippets .scroll {
+  white-space: nowrap;
+  overflow-y: none;
+}
+#oe_snippets .nav {
+  display: inline-block;
+  border-bottom: none !important;
+  vertical-align: middle;
+  min-width: 120px;
+  z-index: 1;
+}
+#oe_snippets .nav > li {
+  display: block;
+  float: none;
+}
+#oe_snippets .nav > li.active {
+  background: black !important;
+}
+#oe_snippets .nav > li > a {
+  padding: 2px 10px !important;
+  width: 100%;
+  display: block;
+  border: 0;
+}
+#oe_snippets .pill-content {
+  border: 0;
+}
+#oe_snippets .tab-content {
+  display: inline-block;
+  white-space: nowrap;
+  background: black;
+}
+#oe_snippets .tab-content > div {
+  background: black;
+}
+#oe_snippets .tab-content > div label {
+  width: 44px;
+  color: white;
+  padding-left: 10px;
+}
+#oe_snippets .tab-content > div label div {
+  width: 100px;
+  text-align: center;
+  -webkit-transform: translate(-39px, 44px);
+  -moz-transform: translate(-39px, 44px);
+  -ms-transform: translate(-39px, 44px);
+  -o-transform: translate(-39px, 44px);
+  transform: translate(-39px, 44px);
+  -webkit-transform-origin: 50% 50% 50%;
+  -moz-transform-origin: 50% 50% 50%;
+  -ms-transform-origin: 50% 50% 50%;
+  -o-transform-origin: 50% 50% 50%;
+  transform-origin: 50% 50% 50%;
+}
+
+.oe_snippet {
+  float: left;
+  vertical-align: top;
+  width: 93px;
+  margin-left: 1px;
+  margin-top: 0px;
+  position: relative;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: move;
+  pointer-events: none;
+}
+.oe_snippet .oe_snippet_thumbnail {
+  pointer-events: auto;
+  text-align: center;
+  height: 100%;
+  background: transparent;
+  color: white;
+  position: relative;
+}
+.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
+  -webkit-transform: scale(0.95, 0.95);
+  -moz-transform: scale(0.95, 0.95);
+  -ms-transform: scale(0.95, 0.95);
+  -o-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;
+  -webkit-transition: all 150ms linear;
+  -moz-transition: all 150ms linear;
+  -o-transition: all 150ms linear;
+  transition: all 150ms linear;
+  -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
+  -moz-box-shadow: inset 0px 0px 0px 3px #333333;
+  box-shadow: inset 0px 0px 0px 3px #333333;
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  -o-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_snippets .oe_snippet_thumbnail {
+  background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, 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, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, -o-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;
+  -webkit-transition: margin 250ms linear;
+  -moz-transition: margin 250ms linear;
+  -o-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_overlay {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-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);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-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;
+  position: absolute;
+  background: transparent;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-transition: opacity 100ms linear;
+  -moz-transition: opacity 100ms linear;
+  -o-transition: opacity 100ms linear;
+  transition: opacity 100ms linear;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.oe_overlay.oe_active {
+  display: block;
+  border-style: dashed;
+  border-width: 1px;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
+  border-color: rgba(0, 0, 0, 0.5);
+}
+.oe_overlay .oe_handle {
+  display: block !important;
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin: -2px;
+}
+.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 {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: block;
+  background: white;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-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);
+  -webkit-transition: background 100ms linear;
+  -moz-transition: background 100ms linear;
+  -o-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: white;
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -moz-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 {
+  left: auto;
+  top: 2px;
+  height: 100%;
+  right: -6px;
+  cursor: w-resize;
+}
+.oe_overlay .oe_handle.e:before {
+  content: "\F061";
+}
+.oe_overlay .oe_handle.s {
+  top: auto;
+  left: 2px;
+  width: 100%;
+  bottom: -6px;
+  cursor: n-resize;
+}
+.oe_overlay .oe_handle.s:before {
+  z-index: 0;
+  content: "\F063";
+}
+.oe_overlay .oe_handle.size {
+  top: auto;
+  left: 2px;
+  width: 100%;
+  bottom: -6px;
+}
+.oe_overlay .oe_handle.size .oe_handle_button {
+  z-index: 1;
+  content: "Resize";
+  width: 64px;
+  text-align: center;
+  margin-left: -32px;
+  margin-top: -10px;
+  cursor: row-resize;
+}
+.oe_overlay .oe_handle.size .oe_handle_button:hover {
+  background: rgba(30, 30, 30, 0.8);
+  color: white;
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -moz-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 div {
+  border-style: dashed;
+  border-width: 0 0 1px 0;
+  border-color: rgba(0, 0, 0, 0.5);
+  position: relative;
+  top: 8px;
+}
+.oe_overlay .oe_handle.w {
+  top: 2px;
+  height: 100%;
+  left: -6px;
+  cursor: e-resize;
+}
+.oe_overlay .oe_handle.w:before {
+  content: "\F060";
+}
+.oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+  top: -6px;
+  cursor: s-resize;
+}
+.oe_overlay .oe_handle.n:before {
+  content: "\F062";
+}
+.oe_overlay .icon.btn {
+  display: inline-block;
+}
+.oe_overlay .oe_overlay_options {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: -11px;
+  z-index: 1002;
+}
+.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
+  pointer-events: auto;
+  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;
+}
+
+.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;
+}
+
 /* add CSS for bootstrap dropdown multi level */
-.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;}
-.dropdown-submenu:hover>.dropdown-menu{display:block;}
-.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;}
-.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
-.dropdown-submenu.pull-left{float:none;}
-.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;}
-
-
-/*
-.oe_snippet_demo .oe_page{
-    margin-top: 50px;
-    margin-bottom: 300px;
-    padding-bottom: 10px;
-
-}
-.oe_snippet_demo .oe_page .oe_container{
-    min-height: 200px;
-}
-.oe_snippet_demo .oe_page *{
-    outline: 1px solid transparent;
-    -webkit-transiton: all 150ms linear;
-}
-.oe_snippet_demo .oe_page .oe_selected{
-    position: relative;
-    outline: 2px dashed rgba(151, 137, 255,0.5) !important;
-    cursor: pointer;
-}
-.oe_snippet_demo .oe_page .oe_selected:after{
-    content:'Insert Snippet Here';
-    position: absolute;
-    height:20px; left:-2px; right:-2px; bottom:-10px;
-    background: rgba(151, 137, 255, 1);
-    border-radius: 2px;
-    z-index: 800;
-    pointer-events :none;
-    color: white;
-    text-shadow: none;
-    font-size: 14px;
-    line-height: 20px;
-    text-align: center;
-}
-.oe_snippet_demo.oe_new .oe_page .oe_selected:after{
-    content:'';
-    height:100%;
-    top:0px; left:0px; right:0px; bottom:0px;
-    background: rgba(151, 137, 255, 0.2);
-}
-*/
-
-.oe_snippet_editor{
-    position: fixed;    
-    z-index: 1000;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 214px;
-    background: rgb(160,160,160);
-    box-shadow: 0 1px 3px rgb(100,100,100) inset;
-}
-
-.oe_snippet_list{
-    width: auto;
-    white-space: nowrap;
-    margin-left: 20px;
-}
-.oe_snippet_editor .oe_snippet{
-    box-sizing: border-box;
-    display: inline-block;
-    width: 220px;
-    height: 160px;
-    border-radius: 3px;
-    background: white;
-    margin: 20px 20px 20px 0;
-    cursor: pointer;
-    border: 2px solid transparent;
-    box-shadow: 0 1px 3px rgb(100,100,100);
-    position: relative;
-    top: 0;
-    overflow: hidden;
-    vertical-align: top;
-    user-select: none;
-    white-space: normal;
-}
-
-
-
-.oe_snippet_editor .oe_snippet:after{
-    content: attr(name);
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background: rgba(255,255,255,0.8);
-    text-align: center;
-    color: black;
-    padding: 8px;
-
-}
-.oe_snippet_editor .oe_snippet.oe_selected, .oe_snippet_editor .oe_snippet.oe_active{
-    border: 2px solid rgb(151, 137, 255);
-    box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
-
-}
-.oe_snippet_editor .oe_snippet > *{
-    pointer-events: none;
-    margin-top: 16px;
-    line-height: 1em;
-    zoom: 0.6;
-}
-.oe_snippet_editor .oe_snippet > .container{
-    margin-top: 15px;
-    zoom: 0.17;
-    line-height: 0.999em;
-    line-height: 1em;
-}
-.oe_snippet_editor .oe_snippet > .row{
-    margin-top: 0px;
-    zoom: 0.23;
-    line-height: 0.999em;
-}
-.oe_snippet_editor .oe_snippet > .span6{
-    margin-top: 18px;
-    zoom: 0.34;
-}
-.oe_snippet_editor .oe_snippet > .span12{
-    margin-top: 16px;
-    zoom: 0.23;
-}
-.oe_snippet_editor .oe_snippet > p{
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    font-size: 20px;
-    padding: 16px;
-    zoom: 1;
-    margin: 0px;
-}
-.oe_snippet_editor .oe_snippet.oe_new{
-    background: gray;
-    box-shadow: 0px 1px 3px rgb(90,90,90) inset;
-    border: 0px;
-}
-.oe_snippet_editor .oe_snippet.oe_new.oe_selected, .oe_snippet_editor .oe_snippet.oe_new.oe_active{
-    box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset;
-}
-.oe_snippet_editor .oe_snippet.oe_new > *{
-    zoom:1;
-    margin: 0;
-    line-height: 160px;
-    text-align: center;
-    color: white;
-    font-size: 48px;
-}
-.oe_snippet_editor .oe_snippet.oe_new:after{
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
-    background: transparent;
-    color: white;
-    text-shadow: 0px 1px 3px black;
-    line-height: 160px;
-    padding: 0px;
+.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;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: white;
+}
+.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;
+}
+.dropdown-submenu.pull-left {
+  float: none;
+}
+.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;
+}
+
+.oe_snippet_list {
+  width: auto;
+  white-space: nowrap;
+  margin-left: 20px;
+}
+
+.oe_snippet_editor {
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 214px;
+  background: #a0a0a0;
+  box-shadow: 0 1px 3px #646464 inset;
+}
+.oe_snippet_editor .oe_snippet {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 220px;
+  height: 160px;
+  border-radius: 3px;
+  background: white;
+  margin: 20px 20px 20px 0;
+  cursor: pointer;
+  border: 2px solid transparent;
+  box-shadow: 0 1px 3px #646464;
+  position: relative;
+  top: 0;
+  overflow: hidden;
+  vertical-align: top;
+  user-select: none;
+  white-space: normal;
+}
+.oe_snippet_editor .oe_snippet:after {
+  content: attr(name);
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  color: black;
+  padding: 8px;
+}
+.oe_snippet_editor .oe_snippet.oe_selected, .oe_snippet_editor .oe_snippet.oe_active {
+  border: 2px solid #9789ff;
+  box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
+}
+.oe_snippet_editor .oe_snippet > * {
+  pointer-events: none;
+  margin-top: 16px;
+  line-height: 1em;
+  zoom: 0.6;
+}
+.oe_snippet_editor .oe_snippet > .container {
+  margin-top: 15px;
+  zoom: 0.17;
+  line-height: 0.999em;
+  line-height: 1em;
+}
+.oe_snippet_editor .oe_snippet > .row {
+  margin-top: 0px;
+  zoom: 0.23;
+  line-height: 0.999em;
+}
+.oe_snippet_editor .oe_snippet > .span6 {
+  margin-top: 18px;
+  zoom: 0.34;
+}
+.oe_snippet_editor .oe_snippet > .span12 {
+  margin-top: 16px;
+  zoom: 0.23;
+}
+.oe_snippet_editor .oe_snippet > p {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  font-size: 20px;
+  padding: 16px;
+  zoom: 1;
+  margin: 0px;
+}
+.oe_snippet_editor .oe_snippet.oe_new {
+  background: gray;
+  box-shadow: 0px 1px 3px #5a5a5a inset;
+  border: 0px;
+}
+.oe_snippet_editor .oe_snippet.oe_new.oe_selected, .oe_snippet_editor .oe_snippet.oe_new.oe_active {
+  box-shadow: 0px 2px 0px 0px #9789ff inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset;
+}
+.oe_snippet_editor .oe_snippet.oe_new > * {
+  zoom: 1;
+  margin: 0;
+  line-height: 160px;
+  text-align: center;
+  color: white;
+  font-size: 48px;
+}
+.oe_snippet_editor .oe_snippet.oe_new:after {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  background: transparent;
+  color: white;
+  text-shadow: 0px 1px 3px black;
+  line-height: 160px;
+  padding: 0px;
 }
 
 .oe_snippet_drop {
-    position: relative;
-    border: 2px dashed rgb(174, 52, 255);
-    background: rgba(147, 52, 255, 0.1);
-    min-height: 28px;
-    margin: -16px auto;
-    border-radius: 5px;
-    max-width: 50%;
+  position: relative;
+  border: 2px dashed #ae34ff;
+  background: rgba(147, 52, 255, 0.1);
+  min-height: 28px;
+  margin: -16px auto;
+  border-radius: 5px;
+  max-width: 50%;
 }
 .oe_snippet_drop.oe_accepting {
-    border: 2px dashed rgb(52, 255, 166);
-    background: rgba(52, 255, 190, 0.1);
-}
-/*
-[class*="span"]{
-    margin-left: 0px !important;
+  border: 2px dashed #34ffa6;
+  background: rgba(52, 255, 190, 0.1);
 }
-*/
 
 #website-top-edit li.oe_snippet_editorbar {
-    padding: 1px 8px 2px;
-    font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
-    float: left;
-    margin-top: 6px;
-    border: 1px solid #a6a6a6;
-    border-bottom-color: #979797;
-    background: #eeeeee;
-    border-radius: 3px;
+  padding: 1px 8px 2px;
+  font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+  float: left;
+  margin-top: 6px;
+  border: 1px solid #a6a6a6;
+  border-bottom-color: #979797;
+  background: #eeeeee;
+  border-radius: 3px;
 }
 #website-top-edit li.oe_snippet_editorbar > * {
-    display: inline-block;
-    height: 22px;
-    padding: 4px 6px;
-    outline: 0;
-    border: 0;
+  display: inline-block;
+  height: 22px;
+  padding: 4px 6px;
+  outline: 0;
+  border: 0;
 }
 #website-top-edit li.oe_snippet_editorbar a.button .icon {
-    cursor: inherit;
-    background-repeat: no-repeat;
-    margin-top: 1px;
-    width: 16px;
-    height: 16px;
-    display: inline-block;
+  cursor: inherit;
+  background-repeat: no-repeat;
+  margin-top: 1px;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
 }
 
 [data-snippet-id] {
-    min-height: 10px;
-    min-width: 10px;
+  min-height: 10px;
+  min-width: 10px;
 }
-
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
new file mode 100644
index 00000000000..ed9c38731db
--- /dev/null
+++ b/addons/website/static/src/css/snippets.sass
@@ -0,0 +1,467 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+
+
+/* ---- SNIPPET EDITOR ---- {{{ */
+
+#oe_snippets
+    position: fixed
+    left: 0px
+    right: 0px
+    // top property is set programmatically
+    background: rgb(40,40,40)
+    +box-shadow(0px 10px 10px -10px black inset)
+    z-index: 1010
+    overflow: hidden
+    &:hover
+        height: auto
+    .scroll
+        white-space: nowrap
+        overflow-y: none
+    .nav
+        display: inline-block
+        border-bottom: none !important
+        vertical-align: middle
+        min-width: 120px
+        > li
+            display: block
+            float: none
+            &.active
+                background: black !important
+            > a
+                padding: 2px 10px !important
+                width: 100%
+                display: block
+                border: 0
+        z-index: 1
+    .pill-content
+        border: 0
+    .tab-content
+        display: inline-block
+        white-space: nowrap
+        background: black
+        > 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% 50%)
+
+.oe_snippet
+    float: left
+    vertical-align: top
+    width: 93px
+    margin-left: 1px
+    margin-top: 0px
+    position: relative
+    overflow: hidden
+    +user-select(none)
+    cursor: move
+    pointer-events: none
+    .oe_snippet_thumbnail
+        pointer-events: auto
+        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
+            @include transition(all 150ms linear)
+            +box-shadow(inset 0px 0px 0px 3px #333333)
+            @include transform( scale(1,1))
+        span, div
+            line-height: 18px
+    & > :not(.oe_snippet_thumbnail)
+        display: none !important
+
+#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_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
+    position: absolute
+    background: transparent
+    //@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)
+    pointer-events: none
+    &.oe_active
+        display: block
+        border-style: dashed
+        border-width: 1px
+        +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
+        border-color: rgba(0, 0, 0, 0.5)
+    .oe_handle
+        display: block !important
+        pointer-events: auto
+        position: absolute
+        top: 50%
+        left: 50%
+        +box-sizing(border-box)
+        width: 16px
+        height: 16px
+        margin: -2px
+        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            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
+            left: auto
+            top: 2px
+            height: 100%
+            right: -6px
+            cursor: w-resize
+            &:before
+                content: "\F061"
+        &.s
+            top: auto
+            left: 2px
+            width: 100%
+            bottom: -6px
+            cursor: n-resize
+            &:before
+                z-index: 0
+                content: "\F063"
+        &.size
+            top: auto
+            left: 2px
+            width: 100%
+            bottom: -6px
+            .oe_handle_button
+                z-index: 1
+                content: "Resize"
+                width: 64px
+                text-align: center
+                margin-left: -32px
+                margin-top: -10px
+                cursor: row-resize
+                &:hover
+                    background: rgba(30, 30, 30, .8)
+                    color: #fff
+                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+            div
+                border-style: dashed
+                border-width: 0 0 1px 0
+                border-color: rgba(0, 0, 0, 0.5)
+                position: relative
+                top: 8px
+        &.w
+            top: 2px
+            height: 100%
+            left: -6px
+            cursor: e-resize
+            &:before
+                content: "\F060"
+        &.n
+            left: 2px
+            width: 100%
+            top: -6px
+            cursor: s-resize
+            &:before
+                content: "\F062"
+
+    .icon.btn
+        display: inline-block
+
+    .oe_overlay_options
+        position: absolute
+        width: 100%
+        text-align: center
+        top: -11px
+        z-index: 1002
+        .btn, a
+            pointer-events: auto
+            cursor: pointer
+        .dropdown
+            display: inline-block
+        .dropdown-menu
+            text-align: left
+            min-width: 180px
+        .dropdown-menu select,.dropdown-menu input
+            display: block
+
+.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
+
+// }}}
+
+
+/* add CSS for bootstrap dropdown multi level */
+.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
+
+.oe_snippet_list
+    width: auto
+    white-space: nowrap
+    margin-left: 20px
+
+.oe_snippet_editor
+    position: fixed
+    z-index: 1000
+    bottom: 0
+    left: 0
+    right: 0
+    height: 214px
+    background: rgb(160,160,160)
+    box-shadow: 0 1px 3px rgb(100,100,100) inset
+    .oe_snippet
+        box-sizing: border-box
+        display: inline-block
+        width: 220px
+        height: 160px
+        border-radius: 3px
+        background: white
+        margin: 20px 20px 20px 0
+        cursor: pointer
+        border: 2px solid transparent
+        box-shadow: 0 1px 3px rgb(100,100,100)
+        position: relative
+        top: 0
+        overflow: hidden
+        vertical-align: top
+        user-select: none
+        white-space: normal
+        &:after
+            content: attr(name)
+            position: absolute
+            bottom: 0px
+            left: 0px
+            right: 0px
+            background: rgba(255,255,255,0.8)
+            text-align: center
+            color: black
+            padding: 8px
+        &.oe_selected, &.oe_active
+            border: 2px solid rgb(151, 137, 255)
+            box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
+        & > *
+            pointer-events: none
+            margin-top: 16px
+            line-height: 1em
+            zoom: 0.6
+        & > .container
+            margin-top: 15px
+            zoom: 0.17
+            line-height: 0.999em
+            line-height: 1em
+        & > .row
+            margin-top: 0px
+            zoom: 0.23
+            line-height: 0.999em
+        & > .span6
+            margin-top: 18px
+            zoom: 0.34
+        & > .span12
+            margin-top: 16px
+            zoom: 0.23
+        & > p
+            position: absolute
+            top: 0
+            right: 0
+            left: 0
+            bottom: 0
+            font-size: 20px
+            padding: 16px
+            zoom: 1
+            margin: 0px
+        &.oe_new
+            background: gray
+            box-shadow: 0px 1px 3px rgb(90,90,90) inset
+            border: 0px
+            &.oe_selected, &.oe_active
+                box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset
+            & > *
+                zoom: 1
+                margin: 0
+                line-height: 160px
+                text-align: center
+                color: white
+                font-size: 48px
+            &:after
+                position: absolute
+                left: 0px
+                right: 0px
+                top: 0px
+                bottom: 0px
+                background: transparent
+                color: white
+                text-shadow: 0px 1px 3px black
+                line-height: 160px
+                padding: 0px
+
+.oe_snippet_drop 
+    position: relative
+    border: 2px dashed rgb(174, 52, 255)
+    background: rgba(147, 52, 255, 0.1)
+    min-height: 28px
+    margin: -16px auto
+    border-radius: 5px
+    max-width: 50%
+    &.oe_accepting 
+        border: 2px dashed rgb(52, 255, 166)
+        background: rgba(52, 255, 190, 0.1)
+
+#website-top-edit
+    li.oe_snippet_editorbar 
+        padding: 1px 8px 2px
+        font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif
+        float: left
+        margin-top: 6px
+        border: 1px solid #a6a6a6
+        border-bottom-color: #979797
+        background: #eeeeee
+        border-radius: 3px
+        & > * 
+            display: inline-block
+            height: 22px
+            padding: 4px 6px
+            outline: 0
+            border: 0
+
+        a.button .icon 
+            cursor: inherit
+            background-repeat: no-repeat
+            margin-top: 1px
+            width: 16px
+            height: 16px
+            display: inline-block
+
+[data-snippet-id] 
+    min-height: 10px
+    min-width: 10px
+
+
+
+
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 65b322bd9e9..539b7488f39 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -324,6 +325,10 @@ ul.nav-stacked > li > a {
   right: 10px;
 }
 
+.quotecarousel {
+  padding-bottom: 16px;
+}
+
 /* Parallax Theme */
 div.carousel[data-snippet-id="slider"] .carousel-indicators li {
   border: 1px solid grey;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 7422a9008ba..441db1d244a 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -256,6 +256,8 @@ ul.nav-stacked > li > a
         &.right span
             right: 10px
 
+.quotecarousel
+    padding-bottom: 16px
 
 /* Parallax Theme */