made flash messages awesome this time

app/views/layouts/application.html.haml

@@ -92,9 +92,10 @@
         ⇧
 
       #notifications
-
       - flash.each do |name, msg|
-        %div{:id => "flash_#{name}"}= msg
+        %div{:id => "flash_#{name}"}
+          .message
+            = msg
 
     %header{:class=>('landing' unless current_user)}
       = render 'layouts/header'

public/javascripts/widgets/flash-messages.js

@@ -10,7 +10,7 @@
       var flashMessages = $("#flash_notice, #flash_error, #flash_alert");
       flashMessages.animate({
         top: 0
-      }).delay(2000).animate({
+      }).delay(4000).animate({
         top: -100
       }, flashMessages.remove);
     };

public/stylesheets/sass/application.sass

@@ -73,36 +73,42 @@ form
 #flash_notice,
 #flash_error,
 #flash_alert
-  @include box-shadow(0, 1px, 2px, #333)
+  :z-index 999
-  :z-index 100
   :position fixed
-  :color #fff
+  :color #666
-
   :top -100px
+
   :left 0
 
   :width 100%
-  :padding 1em
 
   :font
     :weight bold
+  :text
+    :align center
+
+  .message
+    @include border-radius(6px)
+    @include box-shadow(0, 1px, 5px, rgba(0,0,0,0.4))
+    :display inline-block
+    :width 400px
+    :padding
+      :top 45px
+      :bottom 8px
 
 #flash_notice
-  :background
+  .message
-    :color rgb(126,240,77)
+    :background
-    :color rgba(126,240,77,0.98)
+      :color #F4F899
-  :text
+    :border 1px solid darken(#F4F899, 40%)
-    :shadow 0 1px #6C6
 
 #flash_error,
 #flash_alert
-  :background
+  .message
-    :color rgb(208,49,43)
+    :color #fff
-    :color rgba(208,49,43,0.98)
+    :background
-  :border
+      :color #CA410B
-    :bottom solid 1px #C66
+    :border 1px solid darken(#CA410B, 10%)
-  :text
-    :shadow 0 1px #C66
 
 .login_error,
 .login_alert