3 files changed, 44 insertions, 30 deletions
diff --git a/budget/static/main.css b/budget/static/main.css
index 70547e1..2c7d4a4 100644
--- a/budget/static/main.css
+++ b/budget/static/main.css
@@ -80,3 +80,10 @@ a {
         .negative{
             color: red;
         }
+
+.flash{
+    padding:8px;
+    background-color: #ffc;
+    font-weight: bold;
+    font-size:15px;-moz-border-radius: 6px;-webkit-border-radius: 6px;
+}
diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index 9036de3..3ab6f1f 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -5,7 +5,17 @@
 <title>Account manager</title>
 <link rel=stylesheet type=text/css href="{{ url_for('static', filename='main.css') }}">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
-<script type="text/javascript" charset="utf-8">{% block js %}{% endblock %}</script>
+<script type="text/javascript" charset="utf-8">
+$(document).ready(function(){
+    setTimeout(function(){
+        $(".flash").fadeOut("slow", function () {
+            $(".flash").remove();
+        });
+    }, 2000);
+
+    {% block js %}{% endblock %}
+});
+</script>
 </head>
 <body>
 
@@ -17,7 +27,7 @@
     </div>
     <hr>
     {% for message in get_flashed_messages() %}
-        <div class=info>{{ message }}</div>
+        <div class="flash">{{ message }}</div>
     {% endfor %}
     {% block content %}
     {% endblock %}
diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html
index 7e96ca7..fe564e1 100644
--- a/budget/templates/list_bills.html
+++ b/budget/templates/list_bills.html
@@ -1,38 +1,35 @@
 {% extends "layout.html" %}
 
 {% block js %}
-$(document).ready(function(){
-
-    // display the form when clicking on the "add bill" button
-    $('#add_bill_button').click(function(){
-        $('#add_bill').show(200);
-        $(this).hide();
-        $('#hide_bill_form').show();
-        return false;
-    });
+// display the form when clicking on the "add bill" button
+$('#add_bill_button').click(function(){
+    $('#add_bill').show(200);
+    $(this).hide();
+    $('#hide_bill_form').show();
+    return false;
+});
 
-    // and provide a mechanism to hide it back
-    $('#hide_bill_form').click(function(){
-        $('#add_bill').hide(200);
-        $(this).hide();
-        $('#add_bill_button').show();
-        return false;
-    });
+// and provide a mechanism to hide it back
+$('#hide_bill_form').click(function(){
+    $('#add_bill').hide(200);
+    $(this).hide();
+    $('#add_bill_button').show();
+    return false;
+});
 
-    // ask for confirmation before removing an user
-    $('a.remove').each(function(){
-        $(this).hide();
-        $(this).click(function(){
-            return confirm("are you sure?");
-        });
+// ask for confirmation before removing an user
+$('a.remove').each(function(){
+    $(this).hide();
+    $(this).click(function(){
+        return confirm("are you sure?");
     });
+});
 
-    // display the remove button on mouse over (and hide them per default)
-    $('.members li').hover(function(){
-        $(this).children('a.remove').show();
-    }, function(){
-        $(this).children('a.remove').hide();
-    });
+// display the remove button on mouse over (and hide them per default)
+$('.members li').hover(function(){
+    $(this).children('a.remove').show();
+}, function(){
+    $(this).children('a.remove').hide();
 });
 {% endblock %}