diff --git a/addons/note/static/src/css/Makefile b/addons/note/static/src/css/Makefile
deleted file mode 100644
index 91b3abc9333..00000000000
--- a/addons/note/static/src/css/Makefile
+++ /dev/null
@@ -1,3 +0,0 @@
-memo.css: memo.sass
-	sass -t expanded memo.sass memo.css
-
diff --git a/addons/note/static/src/css/note.css b/addons/note/static/src/css/note.css
index 6ada8d6cd14..d4b5f3d8d64 100644
--- a/addons/note/static/src/css/note.css
+++ b/addons/note/static/src/css/note.css
@@ -1,93 +1,53 @@
 @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;
-}
-
-@-moz-keyframes bounce {
-  0% {
-    -moz-transform: scale(0);
-    opacity: 0;
-  }
-
-  50% {
-    -moz-transform: scale(1.3);
-    opacity: 0.4;
-  }
-
-  75% {
-    -moz-transform: scale(0.9);
-    opacity: 0.7;
-  }
-
-  100% {
-    -moz-transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes bounce {
-  0% {
-    -webkit-transform: scale(0);
-    opacity: 0;
-  }
-
-  50% {
-    -webkit-transform: scale(1.3);
-    opacity: 0.4;
-  }
-
-  75% {
-    -webkit-transform: scale(0.9);
-    opacity: 0.7;
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.oe_kanban_color_2 {
-  background-color: red;
-}
-
 .oe_kanban_column .note_text_line_through {
   text-decoration: line-through;
 }
 
-.openerp .oe_fold_column .oe_kanban_card_fancy {
-  text-decoration: none;
-  color: black;
-  display: block;
-  padding: 1em;
-  margin-right: 1em;
-  margin-bottom: 1em;
-  -moz-box-shadow: 5px 5px 7px #212121;
-  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
-  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_0 {
+  box-shadow: 0px 4px 9px rgba(48, 48, 48, 0.15);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_1 {
+  box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_2 {
+  box-shadow: 0px 4px 9px rgba(48, 0, 0, 0.15);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_3 {
+  box-shadow: 0px 4px 9px rgba(97, 93, 0, 0.16);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_4 {
+  box-shadow: 0px 4px 9px rgba(77, 128, 0, 0.17);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_5 {
+  box-shadow: 0px 4px 9px rgba(0, 88, 11, 0.15);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_6 {
+  box-shadow: 0px 4px 9px rgba(0, 80, 95, 0.15);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_7 {
+  box-shadow: 0px 4px 9px rgba(3, 13, 133, 0.18);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_8 {
+  box-shadow: 0px 4px 9px rgba(56, 0, 128, 0.15);
+}
+.openerp .oe_kanban_view.oe_notes .oe_kanban_card_fancy.oe_kanban_color_9 {
+  box-shadow: 0px 4px 9px rgba(102, 0, 116, 0.15);
 }
-
 .openerp .oe_kanban_record .oe_kanban_card_fancy {
+  text-shadow: none;
+  border-radius: 2px;
+  padding: 12px;
+  margin-left: 3px;
+  margin-right: 3px;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
   -webkit-transform: rotate(-2deg);
   -o-transform: rotate(-2deg);
   -moz-transform: rotate(-2deg);
+  -webkit-transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
+  -moz-transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
+  -ms-transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
+  transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
 }
 .openerp .oe_kanban_record:nth-of-type(even) .oe_kanban_card_fancy {
   -webkit-transform: rotate(1deg);
@@ -132,12 +92,14 @@
 
 .openerp .oe_kanban_column .oe_fold_column .oe_kanban_card_fancy:hover,
 .openerp .oe_kanban_column .oe_fold_column .oe_kanban_card_fancy:focus {
-  box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
-  -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
   position: relative;
   z-index: 5;
-  -webkit-transform: rotate(0);
-  -o-transform: rotate(0);
-  -moz-transform: rotate(0);
+  border-color: rgba(0, 0, 0, 0.4);
+  -webkit-transition: all 150ms cubic-bezier(0.5, 0, 0.5, 1);
+  -moz-transition: all 150ms cubic-bezier(0.5, 0, 0.5, 1);
+  -ms-transition: all 150ms cubic-bezier(0.5, 0, 0.5, 1);
+  transition: all 150ms cubic-bezier(0.5, 0, 0.5, 1);
+  -webkit-transform: rotate(0) !important;
+  -o-transform: rotate(0) !important;
+  -moz-transform: rotate(0) !important;
 }
diff --git a/addons/note/static/src/css/note.sass b/addons/note/static/src/css/note.sass
index 56aa91abc44..cc4e44f6765 100644
--- a/addons/note/static/src/css/note.sass
+++ b/addons/note/static/src/css/note.sass
@@ -1,168 +1,54 @@
 @charset "utf-8"
 
-// Variables {{{
-$section-title-color: #8786b7
-$tag-bg-light: #f0f0fa
-$tag-bg-dark: #8786b7
-$tag-border: #afafb6
-$tag-border-selected: #a6a6fe
-$hover-background: #f0f0fa
-$link-color: #8a89ba
-$sheet-max-width: 860px
-// }}}
-// 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(none)
-  @include box-shadow(none)
-
-@mixin vertical-gradient($startColor: #555, $endColor: #333)
-  background-color: $startColor
-  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
-
-// 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
-  &: before
-    font: 21px "mnmliconsRegular"
-    content: $icon-name
-    color: $color
-        
-// }}}
-// CSS animation bounces {{{
-@-moz-keyframes bounce
-  0%
-    -moz-transform: scale(0)
-    opacity: 0
-  50%
-    -moz-transform: scale(1.3)
-    opacity: 0.4
-  75%
-    -moz-transform: scale(0.9)
-    opacity: 0.7
-  100%
-    -moz-transform: scale(1)
-    opacity: 1
-
-@-webkit-keyframes bounce
-  0%
-    -webkit-transform: scale(0)
-    opacity: 0
-  50%
-    -webkit-transform: scale(1.3)
-    opacity: 0.4
-  75%
-    -webkit-transform: scale(0.9)
-    opacity: 0.7
-  100%
-    -webkit-transform: scale(1)
-    opacity: 1
-// }}}
-
-
-.oe_kanban_color_2
-  background-color: red
-				  
-// au BufWritePost,FileWritePost *.sass : !sass --style expanded --line-numbers <afile> > "%: p: r.css"
-
 .oe_kanban_column
   .note_text_line_through
     text-decoration: line-through
 
-
-.openerp
-  .oe_fold_column
-    .oe_kanban_card_fancy 
-      text-decoration: none
-      color: #000
-      display: block
-      padding: 1em
-      margin-right: 1em
-      margin-bottom: 1em
-      -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1)
-      -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7)
-      box-shadow: 5px 5px 7px rgba(33,33,33,.7)
-
-
 @mixin rotate($a)
-  -webkit-transform: rotate($a)
-  -o-transform: rotate($a)
+  -webkit-transform: rotate($a) 
+  -o-transform: rotate($a) 
   -moz-transform: rotate($a)
 
+@mixin transition($what:all,$duration:100ms)
+  -webkit-transition: $what $duration cubic-bezier(0.5,0,0.5,1)
+  -moz-transition: $what $duration cubic-bezier(0.5,0,0.5,1)
+  -ms-transition: $what $duration cubic-bezier(0.5,0,0.5,1)
+  transition: $what $duration cubic-bezier(0.5,0,0.5,1)
+
+
 .openerp
+  .oe_kanban_view.oe_notes
+    .oe_kanban_card_fancy.oe_kanban_color_0
+      box-shadow: 0px 4px 9px rgba(48,48,48,0.15)
+    .oe_kanban_card_fancy.oe_kanban_color_1
+      box-shadow: 0px 4px 9px rgba(0,0,0,0.15)
+    .oe_kanban_card_fancy.oe_kanban_color_2
+      box-shadow: 0px 4px 9px rgba(48,0,0,0.15)
+    .oe_kanban_card_fancy.oe_kanban_color_3
+      box-shadow: 0px 4px 9px rgba(97,93,0,0.16)
+    .oe_kanban_card_fancy.oe_kanban_color_4
+      box-shadow: 0px 4px 9px rgba(77,128,0,0.17)
+    .oe_kanban_card_fancy.oe_kanban_color_5
+      box-shadow: 0px 4px 9px rgba(0,88,11,0.15)
+    .oe_kanban_card_fancy.oe_kanban_color_6
+      box-shadow: 0px 4px 9px rgba(0,80,95,0.15)
+    .oe_kanban_card_fancy.oe_kanban_color_7
+      box-shadow: 0px 4px 9px rgba(3,13,133,0.18)
+    .oe_kanban_card_fancy.oe_kanban_color_8
+      box-shadow: 0px 4px 9px rgba(56,0,128,0.15)
+    .oe_kanban_card_fancy.oe_kanban_color_9
+      box-shadow: 0px 4px 9px rgba(102,0,116,0.15)
   .oe_kanban_record
     .oe_kanban_card_fancy 
+      text-shadow: none
+      border-radius: 2px
+      padding: 12px
+      margin-left: 3px
+      margin-right: 3px
+      padding-bottom: 16px
+      margin-bottom: 16px
       @include rotate(-2deg)
+      @include transition($what:all, $duration:300ms)
   .oe_kanban_record:nth-of-type(even)
     .oe_kanban_card_fancy 
       @include rotate(1deg)
@@ -193,17 +79,16 @@ $sheet-max-width: 860px
         @include rotate(-1deg)
 
 
-@mixin oe_kanban_card_fancy
-  box-shadow: 10px 10px 7px rgba(0,0,0,.7)
-  -moz-box-shadow: 10px 10px 7px rgba(0,0,0,.7)
-  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7)
-  position: relative
-  z-index: 5
-  @include rotate(0)
-
 .openerp
   .oe_kanban_column
     .oe_fold_column
       .oe_kanban_card_fancy:hover,
       .oe_kanban_card_fancy:focus 
-        @include oe_kanban_card_fancy
+        position: relative
+        z-index: 5
+        border-color: rgba(0,0,0,0.4)
+        @include transition($what:all, $duration:150ms)
+        -webkit-transform: rotate(0) !important
+        -o-transform: rotate(0) !important
+        -moz-transform: rotate(0) !important
+