replacing css madness by bootstrap, homepage is mostly ok, ecommerce is broken

bzr revid: fva@openerp.com-20130730160317-j5aj1ktxt3u5rlyf

8 files changed, 177 insertions, 1962 deletions

diff --git a/addons/website/static/src/css/Makefile b/addons/website/static/src/css/Makefile
index 9be09407d32..238219f8906 100644
--- a/addons/website/static/src/css/Makefile
+++ b/addons/website/static/src/css/Makefile
@@ -1,2 +1,3 @@
 sass:
-	sass -t expanded --unix-newlines website.sass  > website.css
+	sass -t expanded --unix-newlines --watch website.sass:website.css&
+	sass -t expanded --unix-newlines --watch editor.sass:editor.css&
diff --git a/addons/website/static/src/css/base.css b/addons/website/static/src/css/base.css
deleted file mode 100644
index 17fedd8e5fa..00000000000
--- a/addons/website/static/src/css/base.css
+++ /dev/null
@@ -1,730 +0,0 @@
-@charset "utf-8";
-@font-face {
-  font-family: "mnmliconsRegular";
-  src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
-  src: url("/web/static/src/font/mnmliconsv21-webfont.woff") format("woff");
-  src: url("/web/static/src/font/mnmliconsv21-webfont.ttf") format("truetype");
-  src: url("/web/static/src/font/mnmliconsv21-webfont.svg") format("svg") active;
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "EntypoRegular";
-  src: url("/web/static/src/font/entypo-webfont.eot") format("eot");
-  src: url("/web/static/src/font/entypo-webfont.eot?#iefix") format("embedded-opentype");
-  src: url("/web/static/src/font/entypo-webfont.woff") format("woff");
-  src: url("/web/static/src/font/entypo-webfont.ttf") format("truetype");
-  src: url("/web/static/src/font/entypo-webfont.svg") format("svg") active;
-  font-weight: normal;
-  font-style: normal;
-}
-
-/* --------------------------------- *
- *           STYLING CONTEXT         *
- * --------------------------------- */
-/* --- Styling for the V8/Lato/White/Purple design --- */
-body.oe_styling_v8 {
-  background: #e9e9e9;
-  padding: 0;
-  margin: 0;
-}
-
-.oe_styling_v8 {
-  font-family: "Open Sans", "Helvetica", Sans;
-  font-weight: 300;
-  color: #646464;
-  background: white;
-  font-size: 16px;
-}
-.oe_styling_v8 .oe_website_contents {
-  background: whitesmoke;
-  padding-bottom: 1px;
-}
-.oe_styling_v8 b {
-  font-weight: 600;
-}
-.oe_styling_v8 a {
-  color: #6d57e0;
-  text-decoration: none;
-}
-.oe_styling_v8 a:visited {
-  color: #5b284f;
-}
-.oe_styling_v8 a:hover {
-  color: #0096eb;
-}
-.oe_styling_v8 .oe_title_font {
-  font-family: "Lato", "Open Sans", "Helvetica", Sans;
-}
-.oe_styling_v8 .oe_page {
-  background: white;
-  overflow: hidden;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  -ms-border-radius: 1px;
-  -o-border-radius: 1px;
-  border-radius: 1px;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-}
-.oe_styling_v8 .oe_emph {
-  font-weight: 400;
-}
-.oe_styling_v8 .oe_dark {
-  overflow: hidden;
-  background: #fcfcfc;
-  -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-  -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-  box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-}
-
-/* --------------------------------- *
- *               LAYOUT              *
- * --------------------------------- */
-/* ------ BASE GRID CONSTRUCTS ----- */
-.oe_page {
-  margin: 0px auto 64px auto;
-  max-width: 992px;
-}
-
-.oe_row {
-  width: 928px;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.oe_row.oe_fit {
-  width: auto;
-}
-
-.oe_clearfix:after, .oe_row:after {
-  content: ".";
-  display: block;
-  clear: both;
-  visibility: hidden;
-  line-height: 0;
-  height: 0;
-}
-
-[class*='oe_span'] {
-  float: left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0 16px;
-}
-
-.oe_span12 {
-  width: 928px;
-}
-
-.oe_span10 {
-  width: 773px;
-}
-
-.oe_span9 {
-  width: 696px;
-}
-
-.oe_span8 {
-  width: 618px;
-}
-
-.oe_span6 {
-  width: 464px;
-}
-
-.oe_span4 {
-  width: 309px;
-}
-
-.oe_span3 {
-  width: 232px;
-}
-
-.oe_span2 {
-  width: 154px;
-}
-
-[class*='oe_span'].oe_fit {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
-
-[class*='oe_span'].oe_right {
-  float: right;
-}
-
-.oe_row.oe_flex [class*='oe_span'] {
-  display: inline-block;
-  float: none;
-  vertical-align: top;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0 16px;
-  width: auto;
-}
-.oe_row.oe_flex .oe_span12 {
-  max-width: 928px;
-}
-.oe_row.oe_flex .oe_span10 {
-  max-width: 769px;
-}
-.oe_row.oe_flex .oe_span9 {
-  max-width: 692px;
-}
-.oe_row.oe_flex .oe_span8 {
-  max-width: 614px;
-}
-.oe_row.oe_flex .oe_span6 {
-  max-width: 460px;
-}
-.oe_row.oe_flex .oe_span4 {
-  max-width: 305px;
-}
-.oe_row.oe_flex .oe_span3 {
-  max-width: 228px;
-}
-.oe_row.oe_flex .oe_span2 {
-  max-width: 150px;
-}
-
-.oe_mb0 {
-  margin-bottom: 0px !important;
-}
-
-.oe_mb4 {
-  margin-bottom: 4px !important;
-}
-
-.oe_mb8 {
-  margin-bottom: 8px !important;
-}
-
-.oe_mb16 {
-  margin-bottom: 16px !important;
-}
-
-.oe_mb32 {
-  margin-bottom: 32px !important;
-}
-
-.oe_mb48 {
-  margin-bottom: 48px !important;
-}
-
-.oe_mb64 {
-  margin-bottom: 64px !important;
-}
-
-.oe_mt0 {
-  margin-top: 0px !important;
-}
-
-.oe_mt4 {
-  margin-top: 4px !important;
-}
-
-.oe_mt8 {
-  margin-top: 8px !important;
-}
-
-.oe_mt16 {
-  margin-top: 16px !important;
-}
-
-.oe_mt32 {
-  margin-top: 32px !important;
-}
-
-.oe_mt48 {
-  margin-top: 48px !important;
-}
-
-.oe_mt64 {
-  margin-top: 64px !important;
-}
-
-/* ------ GENERIC LAYOUT MODIFIERS ----- */
-.oe_rightfit {
-  padding-right: 0px !important;
-}
-
-.oe_leftfit {
-  padding-left: 0px !important;
-}
-
-.oe_leftalign {
-  text-align: left;
-}
-
-.oe_rightalign {
-  text-align: right;
-}
-
-.oe_centeralign {
-  text-align: center;
-}
-
-.oe_centered {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.oe_hidden {
-  display: none !important;
-  opacity: 0 !important;
-}
-
-.oe_invisible {
-  visibility: hidden !important;
-}
-
-.oe_transparent {
-  opacity: 0 !important;
-}
-
-.oe_mb0 {
-  margin-bottom: 0px !important;
-}
-
-.oe_mb4 {
-  margin-bottom: 4px !important;
-}
-
-.oe_mb8 {
-  margin-bottom: 8px !important;
-}
-
-.oe_mb16 {
-  margin-bottom: 16px !important;
-}
-
-.oe_mb32 {
-  margin-bottom: 32px !important;
-}
-
-.oe_mb64 {
-  margin-bottom: 64px !important;
-}
-
-.oe_spaced {
-  margin-top: 32px;
-  margin-bottom: 32px;
-}
-
-.oe_more_spaced {
-  margin-top: 64px;
-  margin-bottom: 64px;
-}
-
-.oe_padded {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-.oe_more_padded {
-  padding-top: 32px;
-  padding-bottom: 32px;
-}
-
-/* --------------------------------- *
- *      WEBPAGE COMPONENTS           *
- * --------------------------------- */
-/* ------ BUTTONS ----- */
-.oe_styling_v8 .oe_button, .oe_styling_v8 a.oe_button {
-  position: relative;
-  bottom: 0;
-  display: inline-block;
-  cursor: pointer;
-  padding: 8px 14px;
-  background: #8b72b6;
-  color: white;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-box-shadow: 0px 2px 0px #afa8cc;
-  -moz-box-shadow: 0px 2px 0px #afa8cc;
-  box-shadow: 0px 2px 0px #afa8cc;
-  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.44);
-  border: solid 1px rgba(0, 0, 0, 0.09);
-  -webkit-transition-property: bottom, background;
-  -moz-transition-property: bottom, background;
-  -o-transition-property: bottom, background;
-  transition-property: bottom, background;
-  -webkit-transition-duration: 250ms;
-  -moz-transition-duration: 250ms;
-  -o-transition-duration: 250ms;
-  transition-duration: 250ms;
-}
-.oe_styling_v8 .oe_button:hover, .oe_styling_v8 a.oe_button:hover {
-  background: #8b5bdd;
-  color: white;
-}
-.oe_styling_v8 .oe_button:active, .oe_styling_v8 a.oe_button:active {
-  background: #333333;
-  bottom: -3px;
-}
-.oe_styling_v8 .oe_button.oe_big, .oe_styling_v8 a.oe_button.oe_big {
-  font-size: 24px;
-}
-.oe_styling_v8 .oe_button.oe_bigger, .oe_styling_v8 a.oe_button.oe_bigger {
-  font-size: 32px;
-}
-.oe_styling_v8 .oe_button.oe_small, .oe_styling_v8 a.oe_button.oe_small {
-  font-size: 13px;
-  padding: 2px 4px;
-}
-.oe_styling_v8 .oe_button.oe_small:active, .oe_styling_v8 a.oe_button.oe_small:active {
-  bottom: -1px;
-}
-.oe_styling_v8 .oe_button.oe_medium, .oe_styling_v8 a.oe_button.oe_medium {
-  padding: 5px 12px;
-  font-size: 16px;
-}
-.oe_styling_v8 .oe_button.oe_tacky, .oe_styling_v8 a.oe_button.oe_tacky {
-  background: #ff4444;
-  -webkit-box-shadow: 0px 2px 0px #eba8a8;
-  -moz-box-shadow: 0px 2px 0px #eba8a8;
-  box-shadow: 0px 2px 0px #eba8a8;
-}
-.oe_styling_v8 .oe_button.oe_tacky:hover, .oe_styling_v8 a.oe_button.oe_tacky:hover {
-  background: #ff1010;
-}
-.oe_styling_v8 .oe_button.oe_tacky:active, .oe_styling_v8 a.oe_button.oe_tacky:active {
-  background: black;
-}
-.oe_styling_v8 .oe_button.oe_disabled, .oe_styling_v8 a.oe_button.oe_disabled {
-  background: #c8c8c8;
-  -webkit-box-shadow: 0px 2px 0px #b4b4b4;
-  -moz-box-shadow: 0px 2px 0px #b4b4b4;
-  box-shadow: 0px 2px 0px #b4b4b4;
-  cursor: default;
-}
-.oe_styling_v8 .oe_button.oe_disabled:hover, .oe_styling_v8 a.oe_button.oe_disabled:hover {
-  background: #c8c8c8;
-  -webkit-box-shadow: 0px 2px 0px #b4b4b4;
-  -moz-box-shadow: 0px 2px 0px #b4b4b4;
-  box-shadow: 0px 2px 0px #b4b4b4;
-}
-.oe_styling_v8 .oe_button.oe_disabled:active, .oe_styling_v8 a.oe_button.oe_disabled:active {
-  background: #c8c8c8;
-  bottom: 0px;
-  -webkit-box-shadow: 0px 2px 0px #b4b4b4;
-  -moz-box-shadow: 0px 2px 0px #b4b4b4;
-  box-shadow: 0px 2px 0px #b4b4b4;
-}
-
-.oe_styling_v8.oe_styling_black .oe_button {
-  -webkit-box-shadow: 0px 2px 0px #463555;
-  -moz-box-shadow: 0px 2px 0px #463555;
-  box-shadow: 0px 2px 0px #463555;
-}
-
-/* ------ FORMS ----- */
-.oe_styling_v8 {
-  /* FIXME: this is a quick hack for the release */
-}
-.oe_styling_v8 .oe_input {
-  padding: 4px 7px;
-  border-radius: 3px;
-  border: solid 1px #d6d6d6;
-  box-shadow: 0px 2px #e6e6e6;
-  background: #fafafa;
-  font-weight: 300;
-  outline: none;
-  -webkit-transition: all 150ms linear;
-  -moz-transition: all 150ms linear;
-  -o-transition: all 150ms linear;
-  transition: all 150ms linear;
-}
-.oe_styling_v8 .oe_input:focus {
-  border: solid 1px #969696;
-  box-shadow: 0px 2px #d2d2d2;
-}
-.oe_styling_v8 .oe_input.oe_valid {
-  background: #f2ffec;
-  border-color: #b1ebb6;
-  box-shadow: 0px 2px #e1f8e1;
-  color: #0f610f;
-}
-.oe_styling_v8 .oe_input.oe_invalid {
-  background: #fff2f2;
-  border-color: #ebb1b1;
-  box-shadow: 0px 2px #f8e1e1;
-  color: #610f0f;
-}
-.oe_styling_v8 .oe_input.oe_big {
-  padding: 8px 14px;
-}
-.oe_styling_v8 .oe_input_label {
-  font-weight: 300;
-  font-size: 16px;
-}
-.oe_styling_v8 .oe_input_label.oe_big {
-  font-size: 20px;
-}
-.oe_styling_v8 .oe_textarea {
-  width: 300px;
-  height: 80px;
-}
-.oe_styling_v8 .oe_form_layout_table {
-  width: 100%;
-}
-.oe_styling_v8 .oe_form_layout_table td {
-  padding-bottom: 16px;
-}
-.oe_styling_v8 .oe_form_layout_table td:first-child {
-  text-align: right;
-  padding-right: 16px;
-}
-
-/* ------ SLOGANS ----- */
-.oe_styling_v8 .oe_slogan {
-  color: #333333;
-  font-family: "Lato", "Open Sans", "Helvetica", Sans;
-  text-align: center;
-  margin-top: 32px;
-  margin-bottom: 32px;
-}
-.oe_styling_v8 h1.oe_slogan {
-  font-size: 64px;
-  font-weight: 900;
-  margin-top: 48px;
-  margin-bottom: 48px;
-}
-.oe_styling_v8 h2.oe_slogan {
-  font-size: 40px;
-  font-weight: 300;
-}
-.oe_styling_v8 h3.oe_slogan {
-  font-size: 26px;
-  font-weight: 300;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-  opacity: 0.5;
-}
-.oe_styling_v8 h4.oe_slogan {
-  font-size: 24px;
-  font-weight: 300;
-}
-.oe_styling_v8 h4.oe_slogan:before, .oe_styling_v8 h4.oe_slogan:after {
-  margin: 0 20px;
-  content: "";
-  display: inline-block;
-  width: 100px;
-  height: 0px;
-  border-top: solid 1px;
-  vertical-align: middle;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
-  opacity: 0.3;
-}
-.oe_styling_v8 h5.oe_slogan {
-  font-weight: 300;
-}
-.oe_styling_v8 h2.oe_slogan + h3.oe_slogan {
-  margin-top: -28px;
-}
-
-/* ------ QUOTES ----- */
-.oe_quote {
-  margin: 8px;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.02);
-  border: solid 1px rgba(0, 0, 0, 0.06);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
-  border-radius: 2px;
-}
-.oe_quote .oe_q, .oe_quote q {
-  margin: 10px;
-  display: block;
-  font-style: italic;
-  text-align: center;
-  font-size: 20px;
-  color: #4e66e7;
-}
-.oe_quote .oe_q:before, .oe_quote .oe_q:after, .oe_quote q:before, .oe_quote q:after {
-  content: """;
-  font-weight: 900;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
-  opacity: 0.2;
-}
-.oe_quote cite {
-  display: block;
-  font-style: normal;
-  margin-top: 16px;
-}
-.oe_quote .oe_photo {
-  float: left;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  margin-right: 16px;
-}
-.oe_quote .oe_author {
-  font-size: 20px;
-  padding-top: 6px;
-  color: #8d7bac;
-}
-
-.oe_dark .oe_quote {
-  background: white;
-  border: 1px solid #f0f0ff;
-}
-
-/* ------ PICTURES ----- */
-.oe_picture {
-  display: block;
-  max-width: 84%;
-  max-height: 400px;
-  margin: 16px 8%;
-}
-
-.oe_screenshot {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-}
-
-/*  ----- Link Image with Footer ----- */
-/* FIXME: Terrible CSS, rewrite this */
-.oe_demo {
-  position: relative;
-  border: 1px solid #dedede;
-}
-.oe_demo .oe_demo_play {
-  top: 50%;
-  left: 50%;
-  width: 80px;
-  height: 60px;
-  margin-top: -30px;
-  margin-left: -40px;
-  display: block;
-  position: absolute;
-  background: url("../img/layout/play-button.png") no-repeat left top transparent;
-  pointer-events: none;
-}
-.oe_demo img {
-  max-width: 100%;
-  width: 100%;
-}
-.oe_demo .oe_demo_footer {
-  position: absolute;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  opacity: 0.85;
-  bottom: -1px;
-  width: 100%;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  pointer-events: none;
-}
-.oe_demo:hover .oe_demo_play {
-  background: url("../img/layout/play-button-over.png") no-repeat left top transparent;
-}
-
-/*  ----- SEPARATOR ----- */
-.oe_styling_v8 .oe_container.oe_separator {
-  height: 64px;
-  margin-bottom: 16px;
-  /* @include background(linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.02))) */
-  -webkit-box-shadow: 0px -3px 10px -5px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px -3px 10px -5px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px -3px 10px -5px rgba(0, 0, 0, 0.1) inset;
-  overflow-y: hidden;
-}
-
-/*  ----- TABS -----    */
-.oe_row_tabs {
-  text-align: center;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  padding-top: 21px;
-}
-
-.oe_row_tab {
-  position: relative;
-  min-width: 120px;
-  padding: 8px;
-  font-size: 20px;
-  display: inline-block;
-  margin: 0px -2px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  border: solid 1px rgba(0, 0, 0, 0.1);
-  border-bottom: none;
-  background: #fafafa;
-  background-image: +linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
-  box-shadow: 0px -3px 10px -5px rgba(0, 0, 0, 0.1) inset;
-  cursor: pointer;
-  -webkit-transition: all 250ms linear;
-  -moz-transition: all 250ms linear;
-  -o-transition: all 250ms linear;
-  transition: all 250ms linear;
-}
-
-.oe_row_tab:hover {
-  padding-bottom: 12px;
-  top: -4px;
-  background-color: white;
-}
-
-.oe_row_tab.oe_active {
-  background-color: white;
-  background-image: none;
-  box-shadow: none;
-  border-top-color: #8272b6;
-  border-top-width: 2px;
-  cursor: default;
-}
-
-.oe_row_tab.oe_active:hover {
-  padding-bottom: 8px;
-  top: 0asx;
-}
-
-/* ------ CALL TO ACTION ----- */
-.oe_calltoaction {
-  height: 32px;
-  margin-top: -32px;
-  position: relative;
-}
-
-label, input, button, select, textarea {
-  line-height: 15px !important;
-}
-
-input[type='checkbox'] {
-  vertical-align: top !important;
-  margin-top: 2px !important;
-}
-
-.oe_form_status li {
-  height: 30px;
-}
-.oe_form_status .label {
-  background: none !important;
-  font-weight: normal !important;
-  line-height: 1.5em !important;
-}
diff --git a/addons/website/static/src/css/base.sass b/addons/website/static/src/css/base.sass
deleted file mode 100644
index d0bd1f10de5..00000000000
--- a/addons/website/static/src/css/base.sass
+++ /dev/null
@@ -1,706 +0,0 @@
-@charset "utf-8"
-
-// Variables {{{
-$facets-border: #afafb6
-$section-title-color: #7C7BAD
-$tag-bg-light: #f0f0fa
-$tag-bg-dark: #7C7BAD
-$tag-border: #afafb6
-$tag-border-selected: #a6a6fe
-$hover-background: #f0f0fa
-$link-color: #7C7BAD
-$sheet-max-width: 860px
-$sheet-min-width: 650px
-$sheet-padding: 16px
-// }}}
-// Mixins {{{
-@font-face
-    font-family: 'mnmliconsRegular'
-    src: url('/web/static/src/font/mnmliconsv21-webfont.eot') format('eot')
-    src: url('/web/static/src/font/mnmliconsv21-webfont.woff') format('woff')
-    src: url('/web/static/src/font/mnmliconsv21-webfont.ttf') format('truetype')
-    src: url('/web/static/src/font/mnmliconsv21-webfont.svg') format('svg') active
-    font-weight: normal
-    font-style: normal
-
-@font-face
-    font-family: 'EntypoRegular'
-    src: url('/web/static/src/font/entypo-webfont.eot') format('eot')
-    src: url('/web/static/src/font/entypo-webfont.eot?#iefix') format('embedded-opentype')
-    src: url('/web/static/src/font/entypo-webfont.woff') format('woff')
-    src: url('/web/static/src/font/entypo-webfont.ttf') format('truetype')
-    src: url('/web/static/src/font/entypo-webfont.svg') format('svg') active
-    font-weight: normal
-    font-style: normal
-
-@mixin reset()
-    border: none
-    padding: 0
-    margin: 0
-    background: none
-    @include radius(0)
-    @include box-shadow(none)
-
-@mixin vertical-gradient($startColor: #555, $endColor: #333)
-    background-color: mix($startColor, $endColor)
-    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
-    background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
-    background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
-    background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
-    background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
-    background-image:         linear-gradient(to bottom, $startColor, $endColor)
-
-@mixin radial-gradient($gradient)
-    background-position: center center
-    background-image: -webkit-radial-gradient(circle, $gradient)
-    background-image: -moz-radial-gradient($gradient)
-    background-image: -ms-radial-gradient($gradient)
-    background-image: radial-gradient($gradient)
-
-@mixin radius($radius: 5px)
-    -moz-border-radius: $radius
-    -webkit-border-radius: $radius
-    border-radius: $radius
-
-@mixin box-shadow($bsval: 0px 1px 4px #777)
-    -moz-box-shadow: $bsval
-    -webkit-box-shadow: $bsval
-    box-shadow: $bsval
-
-@mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
-    -webkit-transition: $transval
-    -moz-transition: $transval
-    -ms-transition: $transval
-    -o-transition: $transval
-    transition: $transval
-
-@mixin opacity($opacity: .5)
-    filter: alpha(opacity=$opacity * 100)
-    opacity: $opacity
-
-@mixin background-clip($clip: padding-box)
-    -webkit-background-clip: $clip
-    -moz-background-clip: $clip
-    background-clip: $clip
-
-@mixin box-sizing($type: content)
-    // type = border || content || padding
-    -webkit-box-sizing: #{$type}-box
-    -moz-box-sizing: #{$type}-box
-    -ms-box-sizing: #{$type}-box
-    box-sizing: #{$type}-box
-
-@mixin skew-gradient($startColor: #555, $endColor: #333)
-    background-color: $endColor
-    background: -moz-linear-gradient(135deg, $endColor, $startColor)
-    background: -o-linear-gradient(135deg, $startColor, $endColor)
-    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor))
-    background: -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
-
-@mixin transform($transform)
-    -webkit-transform: $transform
-    -moz-transform: $transform
-    -ms-transform: $transform
-    -o-transform: $transform
-    transform: $transform
-
-@mixin keyframes($name)
-    @-webkit-keyframes #{$name}
-        @content
-    @-moz-keyframes #{$name}
-        @content
-    @-ms-keyframes #{$name}
-        @content
-    @-o-keyframes #{$name}
-        @content
-    @keyframes #{$name}
-        @content
-
-
-// Transforms the (readable) text of an inline element into an mmlicons icon,
-// allows for actual readable text in-code (and in readers?) with iconic looks
-@mixin text-to-icon($icon-name, $color: #404040)
-    font-size: 1px
-    letter-spacing: -1px
-    color: transparent
-    text-shadow: none
-    font-weight: normal
-    &:before
-        font: 21px "mnmliconsRegular"
-        content: $icon-name
-        color: $color
-
-@mixin text-to-entypo-icon($icon-name, $color: #404040, $size: 21px)
-    font-size: 1px
-    letter-spacing: -1px
-    color: transparent
-    text-shadow: none
-    font-weight: normal
-    &:before
-        font: $size "entypoRegular"
-        content: $icon-name
-        color: $color
-
-// }}}
-
- // CMS and module descriptions {{{
- // Warning MOST of those classes will be deprecated in favor of bootstrap
- // before the relase of OpenERP v8. Dont use them.
-@import "compass/css3"
-
-
-/* --------------------------------- * 
- *           STYLING CONTEXT         *
- * --------------------------------- */
-
-/* --- Styling for the V8/Lato/White/Purple design --- */
- 
-$v8_footer_color: #e9e9e9
-$v8_title_font_color: rgb(51,51,51)
-$v8_text_font_color:    rgb(100,100,100)
-$v8_font_paragraph_color:    rgb(51,51,51)
-$v8_body_color:  rgb(245,245,245)
-$v8_bg_color:        rgb(255,255,255)
-$v8_text_font_family:   'Open Sans','Helvetica',Sans
-$v8_title_font_family:  'Lato','Open Sans','Helvetica',Sans
-$v8_anchor_color: #6D57E0
-$v8_anchor_visited_color: rgb(91, 40, 79)
-
-body.oe_styling_v8
-    background: $v8_footer_color
-    padding: 0
-    margin: 0
-
-.oe_styling_v8
-    font-family: $v8_text_font_family
-    font-weight: 300
-    color: $v8_text_font_color
-    background: $v8_bg_color
-    font-size: 16px
-
-    .oe_website_contents
-        background: $v8_body_color
-        padding-bottom: 1px
-
-    b
-        font-weight: 600
-    a
-        color: $v8_anchor_color
-        text-decoration: none
-    a:visited
-        color: $v8_anchor_visited_color
-    a:hover
-        color: #0096EB
-
-    .oe_title_font
-        font-family: $v8_title_font_family
-
-
-    .oe_page
-        background: $v8_bg_color
-        overflow: hidden
-        +border-radius(1px)
-        +box-shadow(0 1px 3px rgba(0,0,0,0.35))
-
-    .oe_emph
-        font-weight: 400
-
-    .oe_dark
-        overflow: hidden
-        background: #FCFCFC
-        +box-shadow(0px 5px 9px -7px rgba(0,0,255,0.5) inset, 0px -3px 9px -7px rgba(0,0,255,0.5) inset)
- 
-/* --------------------------------- * 
- *               LAYOUT              *
- * --------------------------------- */
-
-/* ------ BASE GRID CONSTRUCTS ----- */
-
-.oe_page
-    margin: 0px auto 64px auto
-    max-width: 992px
-
-.oe_row
-    width: 928px
-    margin-top: 16px
-    margin-bottom: 16px
-    margin-left: auto
-    margin-right: auto
-
-.oe_row.oe_fit
-    width: auto
-
-.oe_clearfix:after, .oe_row:after
-    content: "."
-    display: block
-    clear: both
-    visibility: hidden
-    line-height: 0
-    height: 0
-
-$oe_span12_width: 928px
-$oe_span10_width: 773px
-$oe_span9_width:    696px
-$oe_span8_width:    618px
-$oe_span6_width:    464px
-$oe_span4_width:    309px
-$oe_span3_width:    232px
-$oe_span2_width:    154px
-
-[class*='oe_span']
-    float: left
-    +box-sizing(border-box)
-    padding: 0 16px
-.oe_span12
-    width: $oe_span12_width
-.oe_span10
-    width: $oe_span10_width
-.oe_span9
-    width: $oe_span9_width
-.oe_span8
-    width: $oe_span8_width
-.oe_span6
-    width: $oe_span6_width
-.oe_span4
-    width: $oe_span4_width
-.oe_span3
-    width: $oe_span3_width
-.oe_span2
-    width: $oe_span2_width
-
-[class*='oe_span'].oe_fit
-    padding-left: 0px !important
-    padding-right: 0px !important
-
-[class*='oe_span'].oe_right
-    float: right
-
-.oe_row.oe_flex
-    [class*='oe_span']
-        display: inline-block
-        float: none
-        vertical-align: top
-        +box-sizing(border-box)
-        padding: 0 16px
-        width: auto
-    .oe_span12
-        max-width: $oe_span12_width
-    .oe_span10
-        max-width: ($oe_span10_width +-4px)
-    .oe_span9
-        max-width: ($oe_span9_width +-4px)
-    .oe_span8 
-        max-width: ($oe_span8_width +-4px)
-    .oe_span6
-        max-width: ($oe_span6_width +-4px)
-    .oe_span4
-        max-width: ($oe_span4_width +-4px)
-    .oe_span3
-        max-width: ($oe_span3_width +-4px)
-    .oe_span2
-        max-width: ($oe_span2_width +-4px)
-
-.oe_mb0
-    margin-bottom: 0px !important
-.oe_mb4
-    margin-bottom: 4px !important
-.oe_mb8
-    margin-bottom: 8px !important
-.oe_mb16
-    margin-bottom: 16px !important
-.oe_mb32
-    margin-bottom: 32px !important
-.oe_mb48
-    margin-bottom: 48px !important
-.oe_mb64
-    margin-bottom: 64px !important
-
-.oe_mt0
-    margin-top: 0px !important
-.oe_mt4
-    margin-top: 4px !important
-.oe_mt8
-    margin-top: 8px !important
-.oe_mt16
-    margin-top: 16px !important
-.oe_mt32
-    margin-top: 32px !important
-.oe_mt48
-    margin-top: 48px !important
-.oe_mt64
-    margin-top: 64px !important
-
-/* ------ GENERIC LAYOUT MODIFIERS ----- */
-
-.oe_rightfit
-    padding-right: 0px !important
-.oe_leftfit
-    padding-left: 0px !important
-.oe_leftalign 
-    text-align: left
-.oe_rightalign
-    text-align: right
-.oe_centeralign
-    text-align: center
-.oe_centered
-    margin-left: auto
-    margin-right: auto
-.oe_hidden
-    display: none !important
-    opacity: 0 !important
-.oe_invisible
-    visibility: hidden !important
-.oe_transparent
-    opacity: 0 !important
-
-.oe_mb0
-    margin-bottom: 0px !important
-.oe_mb4
-    margin-bottom: 4px !important
-.oe_mb8
-    margin-bottom: 8px !important
-.oe_mb16
-    margin-bottom: 16px !important
-.oe_mb32
-    margin-bottom: 32px !important
-.oe_mb64
-    margin-bottom: 64px !important
-
-.oe_spaced
-    margin-top: 32px 
-    margin-bottom: 32px 
-.oe_more_spaced
-    margin-top: 64px 
-    margin-bottom: 64px
-.oe_padded
-    padding-top: 16px 
-    padding-bottom: 16px
-.oe_more_padded
-    padding-top: 32px
-    padding-bottom: 32px
-
-/* --------------------------------- * 
- *      WEBPAGE COMPONENTS           *
- * --------------------------------- */
-
-/* ------ BUTTONS ----- */
-
-.oe_styling_v8 .oe_button, .oe_styling_v8 a.oe_button
-    position: relative
-    bottom: 0
-    display: inline-block
-    cursor: pointer
-    padding: 8px 14px
-    background: rgb(139, 114, 182)
-    color: white
-    +border-radius(2px)
-    +box-shadow(0px 2px 0px rgb(175, 168, 204))
-    +text-shadow(0px 1px 1px rgba(0,0,0, 0.44))
-    border: solid 1px rgba(0,0,0,0.09)
-    +transition-property((bottom, background))
-    +transition-duration(250ms)
-    &:hover
-        background: rgb(139,91,221)
-        color: white
-    &:active
-        background: rgb(51,51,51)
-        bottom: -3px
-    &.oe_big
-        font-size: 24px
-    &.oe_bigger
-        font-size: 32px
-    &.oe_small
-        font-size: 13px
-        padding: 2px 4px
-        &:active
-            bottom: -1px
-    &.oe_medium
-        padding: 5px 12px
-        font-size: 16px
-    &.oe_tacky
-        background: rgb(255,68,68)
-        +box-shadow(0px 2px 0px #eba8a8)
-        &:hover
-            background: rgb(255,16,16)
-        &:active
-            background: black
-    &.oe_disabled
-        background: rgb(200,200,200)
-        +box-shadow(0px 2px 0px rgb(180,180,180))
-        cursor: default
-        &:hover
-            background: rgb(200,200,200)
-            +box-shadow(0px 2px 0px rgb(180,180,180))
-        &:active
-            background: rgb(200,200,200)
-            bottom: 0px
-            +box-shadow(0px 2px 0px rgb(180,180,180))
-
-.oe_styling_v8.oe_styling_black .oe_button
-    +box-shadow(0px 2px 0px rgb(70,53,85))
-
-/* ------ FORMS ----- */
-
-.oe_styling_v8
-    .oe_input
-        padding: 4px 7px
-        border-radius: 3px
-        border: solid 1px rgb(214,214,214)
-        box-shadow: 0px 2px rgb(230,230,230)
-        background: rgb(250,250,250)
-        font-weight: 300
-        outline: none
-        @include transition( all 150ms linear )
-        &:focus
-            border: solid 1px rgb(150,150,150)
-            box-shadow: 0px 2px rgb(210,210,210)
-
-        &.oe_valid
-            background: #F2FFEC
-            border-color: rgb(177,235,182)
-            box-shadow: 0px 2px rgb(225,248,225)
-            color: rgb(15,97,15)
-
-        &.oe_invalid
-            background: rgb(255,242,242)
-            border-color: #EBB1B1
-            box-shadow: 0px 2px #F8E1E1
-            color: #610F0F
-        &.oe_big
-            padding: 8px 14px
-    .oe_input_label
-        font-weight: 300
-        font-size: 16px
-        &.oe_big
-            font-size: 20px
-
-    /* FIXME: this is a quick hack for the release */ 
-
-    .oe_textarea
-        width: 300px
-        height: 80px
-    .oe_form_layout_table
-        width: 100%
-        td
-            padding-bottom: 16px
-            &:first-child
-                text-align: right
-                padding-right: 16px
-
-/* ------ SLOGANS ----- */
-
-.oe_styling_v8 
-    .oe_slogan
-        color: $v8_title_font_color
-        font-family: $v8_title_font_family
-        text-align: center
-        margin-top: 32px
-        margin-bottom: 32px
-
-    h1.oe_slogan    
-        font-size: 64px
-        font-weight: 900
-        margin-top: 48px
-        margin-bottom: 48px
-
-    h2.oe_slogan
-        font-size: 40px
-        font-weight: 300
-
-    h3.oe_slogan
-        font-size: 26px
-        font-weight: 300
-        +opacity(0.5)
-
-    h4.oe_slogan
-        font-size: 24px
-        font-weight: 300
-    h4.oe_slogan:before, h4.oe_slogan:after
-        margin: 0 20px
-        content: ""
-        display: inline-block
-        width: 100px
-        height: 0px
-        border-top: solid 1px
-        vertical-align: middle
-        +opacity(0.3)
-
-    h5.oe_slogan
-        font-weight: 300
-        //TODO
-
-    h2.oe_slogan+h3.oe_slogan
-        margin-top: -28px
-
-/* ------ QUOTES ----- */
-
-.oe_quote
-    margin: 8px
-    padding: 16px
-    background: rgba(0,0,0,0.02)
-    border: solid 1px rgba(0,0,0,0.06)
-    +border-radius(2px)
-
-    .oe_q,q
-        margin: 10px
-        display: block
-        font-style: italic
-        text-align: center
-        font-size: 20px
-        color: rgb(78, 102, 231)
-        &:before, &:after
-            content: '"'
-            font-weight: 900
-            +opacity(0.2)
-
-    cite
-        display: block
-        font-style: normal
-        margin-top: 16px
-    
-    .oe_photo
-        float: left
-        +border-radius(3px)
-        margin-right: 16px
-
-    .oe_author
-        font-size: 20px
-        padding-top: 6px
-        color: rgb(141, 123, 172)
-
-.oe_dark .oe_quote
-    background: white
-    border: 1px solid rgb(240,240,255)
-
-/* ------ PICTURES ----- */
-
-// display a picture in a span
-.oe_picture
-    display: block
-    max-width: 84%
-    max-height: 400px
-    margin: 16px 8%
-
-// style the picture like a screenshot
-.oe_screenshot
-    +border-radius(3px)
-    +box-shadow(0px 3px 8px rgba(0,0,0,0.2))
-
-
-/*  ----- Link Image with Footer ----- */
-/* FIXME: Terrible CSS, rewrite this */
-
-.oe_demo
-    position: relative
-    border: 1px solid #dedede
-    .oe_demo_play
-        top: 50%
-        left: 50%
-        width: 80px
-        height: 60px
-        margin-top: -30px
-        margin-left: -40px
-        display: block
-        position: absolute
-        background: url("../img/layout/play-button.png") no-repeat left top transparent
-        pointer-events: none
-    img
-        max-width: 100%
-        width: 100%
-    .oe_demo_footer
-        position: absolute
-        left: 0
-        background-color: rgba(0,0,0,0.4)
-        opacity: 0.85
-        bottom: -1px
-        width: 100%
-        padding-top: 7px
-        padding-bottom: 7px
-        color: white
-        font-size: 14px
-        font-weight: bold
-        border-bottom-left-radius: 3px
-        border-bottom-right-radius: 3px
-        pointer-events: none
-    &:hover .oe_demo_play
-        background: url("../img/layout/play-button-over.png") no-repeat left top transparent
-
-/*  ----- SEPARATOR ----- */
-
-.oe_styling_v8 .oe_container.oe_separator
-    height: 64px
-    margin-bottom: 16px
-    /* @include background(linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.02))) */
-    +box-shadow(0px -3px 10px -5px rgba(0,0,0,0.1) inset)
-    overflow-y: hidden
-
-/*  ----- TABS -----    */
-
-.oe_row_tabs
-    text-align: center
-    margin-top: 0px
-    margin-bottom: 0px
-    padding-top: 21px
-
-.oe_row_tab
-    position: relative
-    min-width: 120px
-    padding: 8px
-    font-size: 20px
-    display: inline-block
-    margin: 0px -2px
-    border-top-left-radius: 4px
-    border-top-right-radius: 4px
-    border: solid 1px rgba(0,0,0,0.1)
-    border-bottom: none
-    background: rgb(250,250,250)
-    background-image: +linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.02))
-    box-shadow: 0px -3px 10px -5px rgba(0,0,0,0.1) inset
-    cursor: pointer
-    @include transition(all 250ms linear)
-
-.oe_row_tab:hover
-    padding-bottom: 12px
-    top: -4px
-    background-color: white
-
-.oe_row_tab.oe_active
-    background-color: white
-    background-image: none
-    box-shadow: none
-    border-top-color: rgb(130, 114, 182)
-    border-top-width: 2px
-    cursor: default
-
-.oe_row_tab.oe_active:hover
-    padding-bottom: 8px
-    top: 0asx
-
-/* ------ CALL TO ACTION ----- */
-
-.oe_calltoaction
-    height: 32px
-    margin-top: -32px
-    position: relative
- 
- 
-// }}}
-
-// BOOTSTRAP OVERIDDES
-label, input, button, select, textarea
-    line-height: 15px !important
-input[type='checkbox']
-    vertical-align: top !important
-    margin-top: 2px !important
-.oe_form_status
-    li
-        height: 30px
-    .label
-        background: none !important
-        font-weight: normal !important
-        line-height: 1.5em !important
-// au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
-// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
-
-
-
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
new file mode 100644
index 00000000000..e431b3db571
--- /dev/null
+++ b/addons/website/static/src/css/editor.css
@@ -0,0 +1,47 @@
+.oe_website_editorbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin: 0px;
+  z-index: 10000;
+  background-color: #414141;
+  background: -webkit-linear-gradient(#646060, #262626);
+  box-sizing: border-box;
+}
+.oe_website_editorbar li {
+  display: inline;
+  color: #eeeeee;
+}
+.oe_website_editorbar li:hover {
+  background: rgba(0, 0, 0, 0.2);
+  text-shadow: black 0px 0px 3px;
+  color: white;
+}
+
+.oe_website_editorbar .oe_rte_toolbar div.dropdown {
+  display: inline-block;
+}
+.oe_website_editorbar .oe_rte_toolbar div.dropdown li {
+  display: list-item;
+}
+.oe_website_editorbar .oe_rte_toolbar button {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+}
+.oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
+  padding-right: 3px;
+}
+.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
+  content: "\F0D7";
+  padding-left: 6px;
+}
+
+.oe_editable:focus {
+  outline: #80b5f2 solid 5px !important;
+}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
new file mode 100644
index 00000000000..3f672f822d7
--- /dev/null
+++ b/addons/website/static/src/css/editor.sass
@@ -0,0 +1,42 @@
+@charset "utf-8"
+
+.oe_website_editorbar
+    position: fixed
+    top: 0
+    right: 0
+    z-index: 10
+    display: block
+    width: 100%
+    padding: 10px
+    margin: 0px
+    z-index: 10000
+    background-color: #414141
+    background: -webkit-linear-gradient(#646060, #262626)
+    box-sizing: border-box
+    li
+        display: inline
+        color: #eee
+        &:hover
+            background: rgba(0,0,0,0.2)
+            text-shadow: black 0px 0px 3px
+            color: white
+
+.oe_website_editorbar .oe_rte_toolbar
+    div.dropdown
+        display: inline-block
+        li
+            display: list-item
+
+    button
+        font-family: FontAwesome
+        font-weight: normal
+        font-style: normal
+        text-decoration: inherit
+        &.oe_button_list
+            padding-right: 3px
+            &:after
+                content: "\F0D7"
+                padding-left: 6px
+
+.oe_editable:focus
+    outline: #80B5F2 solid 5px !important
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
deleted file mode 100644
index aea81b4f5f2..00000000000
--- a/addons/website/static/src/css/snippets.css
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
-.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: 0px;
-    left: 0px;
-    right: 0px;
-    height: 214px;
-    background: rgb(160,160,160);
-    box-shadow: 0px 1px 3px rgb(100,100,100) inset;
-    overflow-y: hidden;
-    overflow-x: scroll;
-}
-*/
-
-.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;
-    margin-left: 0px;
-    cursor: pointer;
-    border: 2px solid transparent;
-    box-shadow: 0px 1px 3px rgb(100,100,100);
-    position: relative;
-    top: 0px;
-    -webkit-transition: all 150ms linear;
-    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{
-    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 > .oe_container{
-    margin-top: 0px;
-    zoom: 0.23;
-    line-height: 0.999em;
-    line-height: 1em;
-}
-.oe_snippet_editor .oe_snippet > .oe_row{
-    margin-top: 0px;
-    zoom: 0.23;
-    line-height: 0.999em;
-}
-.oe_snippet_editor .oe_snippet > .oe_span6{
-    margin-top: 16px;
-    zoom: 0.47;
-}
-.oe_snippet_editor .oe_snippet > .oe_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{
-    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;
-}
-[class*="span"]{
-    margin-left: 0px !important;
-}
-
-    
-    
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index e11bd754a05..4d674569c01 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,155 +1,74 @@
-@charset "utf-8";
-@font-face {
-  font-family: "mnmliconsRegular";
-  src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
-  src: url("/web/static/src/font/mnmliconsv21-webfont.woff") format("woff");
-  src: url("/web/static/src/font/mnmliconsv21-webfont.ttf") format("truetype");
-  src: url("/web/static/src/font/mnmliconsv21-webfont.svg") format("svg") active;
-  font-weight: normal;
-  font-style: normal;
+.mt128 {
+  margin-top: 128px !important;
 }
 
-@font-face {
-  font-family: "EntypoRegular";
-  src: url("/web/static/src/font/entypo-webfont.eot") format("eot");
-  src: url("/web/static/src/font/entypo-webfont.eot?#iefix") format("embedded-opentype");
-  src: url("/web/static/src/font/entypo-webfont.woff") format("woff");
-  src: url("/web/static/src/font/entypo-webfont.ttf") format("truetype");
-  src: url("/web/static/src/font/entypo-webfont.svg") format("svg") active;
-  font-weight: normal;
-  font-style: normal;
+.mt92 {
+  margin-top: 92px !important;
 }
 
-@media print {
-  .oe_website {
-    padding-top: 0 !important;
-  }
-  .oe_website .oe_website_editorbar, .oe_website .css_noprint, .oe_website .oe_snippet_editor, .oe_website .oe_website_footer {
-    display: none !important;
-  }
-  .oe_website .oe_website_header > .container > .row, .oe_website .oe_website_body > .container > .row {
-    margin-left: 0px !important;
-  }
-}
-.oe_website {
-  background: #e9e9e9;
-  color: #646464;
+.mt64 {
+  margin-top: 64px !important;
 }
 
-.oe_website_header {
-  background: whitesmoke;
-  color: #333333;
-  padding-top: 8px;
+.mt48 {
+  margin-top: 48px !important;
 }
 
-/* Body {{{ */
-.oe_website_body {
-  background: white;
-  color: #333333;
-  padding-bottom: 32px;
+.mt32 {
+  margin-top: 32px !important;
 }
 
-/* }}} */
-/* Footer {{{ */
-.oe_website_footer {
-  border-top: solid 1px #e0e0e0;
-  padding-bottom: 32px;
-  padding-top: 32px;
+.mt16 {
+  margin-top: 16px !important;
 }
 
-.oe_website_footer h5 {
-  border-bottom: solid 1px rgba(0, 0, 0, 0.06);
-  margin-right: 24px;
-  padding-bottom: 6px;
-  margin-bottom: 6px;
-  margin-top: 24px;
+.mt8 {
+  margin-top: 8px !important;
 }
 
-.oe_website_footer ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.mt4 {
+  margin-top: 4px !important;
 }
 
-.oe_website_footer ul li {
-  display: block;
-  margin-bottom: 4px;
-  font-size: 14px;
-  margin-right: 32px;
+.mt0 {
+  margin-top: 0px !important;
 }
 
-.oe_website_footer ul li a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-.oe_website_footer ul li a:visited {
-  color: inherit;
-  text-decoration: inherit;
+html, body {
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
 }
 
-.oe_website_footer ul li a:hover {
-  color: black;
-  text-decoration: inherit;
+#wrap {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -300px;
 }
 
-.oe_website_copy {
-  margin-top: 24px;
-  margin-bottom: 6px;
+#push-footer {
+  height: 364px;
 }
 
-/* }}} */
-/* Editor {{{ */
-.oe_website_editorbar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  display: block;
-  width: 100%;
-  padding: 10px;
-  margin: 0px;
-  background-color: #414141;
-  background-color: #454343;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
-  background-image: -webkit-linear-gradient(top, #646060, #262626);
-  background-image: -moz-linear-gradient(top, #646060, #262626);
-  background-image: -ms-linear-gradient(top, #646060, #262626);
-  background-image: -o-linear-gradient(top, #646060, #262626);
-  background-image: linear-gradient(to bottom, #646060, #262626);
+footer {
   box-sizing: border-box;
-}
-.oe_website_editorbar li {
-  display: inline;
-  color: #eeeeee;
-}
-.oe_website_editorbar li:hover {
-  background: rgba(0, 0, 0, 0.2);
-  text-shadow: black 0px 0px 3px;
-  color: white;
+  height: 300px;
+  background: #ddebe3;
+  padding-top: 64px;
+  padding-bottom: 64px;
 }
 
-.oe_website_editorbar .oe_rte_toolbar div.dropdown {
-  display: inline-block;
+.subheader {
+  letter-spacing: 3px;
+  font-weight: 300;
 }
-.oe_website_editorbar .oe_rte_toolbar div.dropdown li {
-  display: list-item;
-}
-.oe_website_editorbar .oe_rte_toolbar button {
-  font-family: FontAwesome;
-  font-weight: normal;
-  font-style: normal;
-  text-decoration: inherit;
-}
-.oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
-  padding-right: 3px;
-}
-.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
-  content: "\F0D7";
-  padding-left: 6px;
+
+header.navbar-fixed-top {
+  position: static;
 }
 
-/* }}} */
-.oe_editable:focus {
-  outline: #80b5f2 solid 5px !important;
+.dark {
+  background: #eff8f8;
+  padding: 64px;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 9863264d692..95c5448440e 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -1,241 +1,52 @@
 @charset "utf-8"
 
-// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:fdl=0
-
-// Mixins {{{
-@font-face
-    font-family: 'mnmliconsRegular'
-    src: url('/web/static/src/font/mnmliconsv21-webfont.eot') format('eot')
-    src: url('/web/static/src/font/mnmliconsv21-webfont.woff') format('woff')
-    src: url('/web/static/src/font/mnmliconsv21-webfont.ttf') format('truetype')
-    src: url('/web/static/src/font/mnmliconsv21-webfont.svg') format('svg') active
-    font-weight: normal
-    font-style: normal
-
-@font-face
-    font-family: 'EntypoRegular'
-    src: url('/web/static/src/font/entypo-webfont.eot') format('eot')
-    src: url('/web/static/src/font/entypo-webfont.eot?#iefix') format('embedded-opentype')
-    src: url('/web/static/src/font/entypo-webfont.woff') format('woff')
-    src: url('/web/static/src/font/entypo-webfont.ttf') format('truetype')
-    src: url('/web/static/src/font/entypo-webfont.svg') format('svg') active
-    font-weight: normal
-    font-style: normal
-
-@mixin reset()
-    border: none
-    padding: 0
-    margin: 0
-    background: none
-    @include radius(0)
-    @include box-shadow(none)
-
-@mixin vertical-gradient($startColor: #555, $endColor: #333)
-    background-color: mix($startColor, $endColor)
-    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
-    background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
-    background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
-    background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
-    background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
-    background-image:         linear-gradient(to bottom, $startColor, $endColor)
-
-@mixin radial-gradient($gradient)
-    background-position: center center
-    background-image: -webkit-radial-gradient(circle, $gradient)
-    background-image: -moz-radial-gradient($gradient)
-    background-image: -ms-radial-gradient($gradient)
-    background-image: radial-gradient($gradient)
-
-@mixin radius($radius: 5px)
-    -moz-border-radius: $radius
-    -webkit-border-radius: $radius
-    border-radius: $radius
-
-@mixin box-shadow($bsval: 0px 1px 4px #777)
-    -moz-box-shadow: $bsval
-    -webkit-box-shadow: $bsval
-    box-shadow: $bsval
-
-@mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
-    -webkit-transition: $transval
-    -moz-transition: $transval
-    -ms-transition: $transval
-    -o-transition: $transval
-    transition: $transval
-
-@mixin opacity($opacity: .5)
-    filter: alpha(opacity=$opacity * 100)
-    opacity: $opacity
-
-@mixin background-clip($clip: padding-box)
-    -webkit-background-clip: $clip
-    -moz-background-clip: $clip
-    background-clip: $clip
-
-@mixin box-sizing($type: content)
-    // type = border || content || padding
-    -webkit-box-sizing: #{$type}-box
-    -moz-box-sizing: #{$type}-box
-    -ms-box-sizing: #{$type}-box
-    box-sizing: #{$type}-box
-
-@mixin skew-gradient($startColor: #555, $endColor: #333)
-    background-color: $endColor
-    background: -moz-linear-gradient(135deg, $endColor, $startColor)
-    background: -o-linear-gradient(135deg, $startColor, $endColor)
-    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor))
-    background: -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
-
-@mixin transform($transform)
-    -webkit-transform: $transform
-    -moz-transform: $transform
-    -ms-transform: $transform
-    -o-transform: $transform
-    transform: $transform
-
-@mixin keyframes($name)
-    @-webkit-keyframes #{$name}
-        @content
-    @-moz-keyframes #{$name}
-        @content
-    @-ms-keyframes #{$name}
-        @content
-    @-o-keyframes #{$name}
-        @content
-    @keyframes #{$name}
-        @content
-
-
-// Transforms the (readable) text of an inline element into an mmlicons icon,
-// allows for actual readable text in-code (and in readers?) with iconic looks
-@mixin text-to-icon($icon-name, $color: #404040)
-    font-size: 1px
-    letter-spacing: -1px
-    color: transparent
-    text-shadow: none
-    font-weight: normal
-    &:before
-        font: 21px "mnmliconsRegular"
-        content: $icon-name
-        color: $color
-
-@mixin text-to-entypo-icon($icon-name, $color: #404040, $size: 21px)
-    font-size: 1px
-    letter-spacing: -1px
-    color: transparent
-    text-shadow: none
-    font-weight: normal
-    &:before
-        font: $size "entypoRegular"
-        content: $icon-name
-        color: $color
-
-// }}}
-@media print
-    .oe_website
-        padding-top: 0 !important
-        .oe_website_editorbar, .css_noprint, .oe_snippet_editor, .oe_website_footer
-            display: none !important
-        .oe_website_header, .oe_website_body
-            > .container > .row
-                margin-left: 0px !important
-
-.oe_website
-    background: #e9e9e9
-    color: #646464
-
-.oe_website_header
-    background: whitesmoke
-    color: #333
-    padding-top: 8px
-
-/* Body {{{ */
-.oe_website_body
-    background: #fff
-    color: #333
-    padding-bottom: 32px
-/* }}} */
-
-/* Footer {{{ */
-.oe_website_footer
-    border-top: solid 1px #e0e0e0
-    padding-bottom: 32px
-    padding-top: 32px
-
-.oe_website_footer h5
-    border-bottom: solid 1px rgba(0, 0, 0, 0.06)
-    margin-right: 24px
-    padding-bottom: 6px
-    margin-bottom: 6px
-    margin-top: 24px
-
-.oe_website_footer ul
-    list-style: none
-    padding: 0
-    margin: 0
-
-.oe_website_footer ul li
-    display: block
-    margin-bottom: 4px
-    font-size: 14px
-    margin-right: 32px
-
-.oe_website_footer ul li a
-    color: inherit
-    text-decoration: inherit
-
-.oe_website_footer ul li a:visited
-    color: inherit
-    text-decoration: inherit
+.mt128
+    margin-top: 128px !important
+.mt92
+    margin-top: 92px !important
+.mt64
+    margin-top: 64px !important
+.mt48
+    margin-top: 48px !important
+.mt32
+    margin-top: 32px !important
+.mt16
+    margin-top: 16px !important
+.mt8
+    margin-top: 8px !important
+.mt4
+    margin-top: 4px !important
+.mt0
+    margin-top: 0px !important
+
+html,body
+    height: 100%
+    box-sizing: border-box
+    position: relative
 
-.oe_website_footer ul li a:hover
-    color: black
-    text-decoration: inherit
+#wrap
+    min-height: 100%
+    height: auto !important
+    height: 100%
+    margin: 0 auto -300px
 
-.oe_website_copy
-    margin-top: 24px
-    margin-bottom: 6px
-/* }}} */
+#push-footer
+    height: 364px
 
-/* Editor {{{ */
-.oe_website_editorbar
-    position: fixed
-    top: 0
-    right: 0
-    z-index: 10
-    display: block
-    width: 100%
-    padding: 10px
-    margin: 0px
-    background-color: #414141
-    @include vertical-gradient(#646060, #262626)
+footer
     box-sizing: border-box
-    li
-        display: inline
-        color: #eee
-        &:hover
-            background: rgba(0,0,0,0.2)
-            text-shadow: black 0px 0px 3px
-            color: white
-
-.oe_website_editorbar .oe_rte_toolbar
-    div.dropdown
-        display: inline-block
-        li
-            display: list-item
+    height: 300px
+    background: rgb(221, 235, 227)
+    padding-top: 64px
+    padding-bottom: 64px
 
-    button
-        font-family: FontAwesome
-        font-weight: normal
-        font-style: normal
-        text-decoration: inherit
-        &.oe_button_list
-            padding-right: 3px
-            &:after
-                content: "\F0D7"
-                padding-left: 6px
+.subheader
+    letter-spacing: 3px   
+    font-weight: 300
 
-/* }}} */
+header.navbar-fixed-top
+    position: static
 
-.oe_editable:focus
-    outline: #80B5F2 solid 5px !important
+.dark
+    background: rgb(239, 248, 248)
+    padding: 64px