3 files changed, 62 insertions, 34 deletions
diff --git a/budget/static/main.css b/budget/static/main.css
index 8520d94..bd59b2a 100644
--- a/budget/static/main.css
+++ b/budget/static/main.css
@@ -7,39 +7,64 @@
 @import url(http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here);
 
 
+a {
+    color: #a45900;
+}
+
 #title{
     margin-top: 10px;
 }
 
-.container h1{
-    text-align: center;
-    font-family: 'Lobster', arial, serif;
-}
+    #title h1{
+        font-family: 'Lobster', arial, serif;
+    }
 
-.fleft{
-    float: left;
-    margin-right: 20px;
+#topmenu{
+    margin-top: 30px;
 }
 
-#content h2 {
-    font-weight: bold;
-    text-shadow:  #DDD 2px 5px 2px;
-}
+    #topmenu ul{
+        float: right;
+    }
 
-#topmenu{
-    margin-top: 15px;
-}
+    #topmenu ul li{
+        float: right;
+        list-style-type: none;
+        margin-left: 10px;
+    }
 
-#topmenu ul{
-    float: right;
+
+#leftmenu input{
+    width: 150px;
 }
-#topmenu ul li{
-    float: right;
+
+.members {
     list-style-type: none;
-    margin-left: 10px;
+    margin: 0;
+    padding: 0;
+    width: 80%;
 }
 
-/** links **/
-a {
-    color: #a45900;
-}
+    .members li{
+        padding: 5px;
+    }
+
+    .members .odd{
+        background-color: #efefef;
+    }
+
+    .members .remove{
+        float: right;
+    }
+
+    .members .balance{
+        margin-right: 10px;
+        font-weight: bold;
+    }
+
+        .positive{
+            color: green;
+        }
+        .negative{
+            color: red;
+        }
diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index 34e7f8b..19af8ca 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -8,13 +8,12 @@
 <body>
 
 <div class="container" class="span-24">
-    <div id="title">
-            <a href="/"><h1>Account manager ! <span class="small">Manage your shared expenses.</span></h1></a>
-    <hr>
-        <div class="fright" id="topmenu">
-            {% block top_menu %}{% endblock %}
-        </div>
+    <div id="title" class="span-20">
+        <a href="/"><h1>Account manager ! <span class="small">Manage your shared expenses.</span></h1></a></div>
+    <div class="span-4 last" id="topmenu">
+        {% block top_menu %}{% endblock %}
     </div>
+    <hr>
     {% for message in get_flashed_messages() %}
         <div class=info>{{ message }}</div>
     {% endfor %}
diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html
index 6c0ac59..ad6cee9 100644
--- a/budget/templates/list_bills.html
+++ b/budget/templates/list_bills.html
@@ -2,23 +2,27 @@
 
 {% block top_menu %}
 <ul>
-    <li><a class="awesome button" href="{{ url_for('add_bill', project_id=project.id) }}">Add a bill</a></li>
+    <li><a href="{{ url_for("exit") }}">logout</a></li>
 </ul>
 {% endblock %}
 
 {% block content %}
-<div id="leftmenu" class="span-4">
-    <ul>
+<div id="leftmenu" class="span-6">
+    <ul class="members">
     {% set balance = project.get_balance() %}
     {% for member in project.active_members %}
-    <li> {{ member.name }} {{ balance[member] }} <a href="{{ url_for("remove_member", project_id=project.id, member_id=member.id) }}">x</a></li>
+    <li class="{{ loop.cycle("even", "odd") }}">
+    <span class="balance {% if balance[member] < 0 %}positive{% elif balance[member] > 0 %}negative{% endif %}">{{ balance[member] }}</span>
+    {{ member.name }}
+    <a class="remove" href="{{ url_for("remove_member", project_id=project.id, member_id=member.id) }}">delete</a></li>
     {% endfor %}
     </ul>
     <form action="{{ url_for("add_member", project_id=project.id) }}" method="post">
         {{ forms.add_member(member_form) }}
     </form>
 </div>
-<div id="content" class="uniForm span-20 last">
+<div id="content" class="uniForm span-18 last">
+<a class="awesome button fright" href="{{ url_for('add_bill', project_id=project.id) }}">Add a bill</a>
     <form id="add_bill" action="{{ url_for('add_bill', project_id=project.id) }}" method="post" style="width: 400px; display: none">
         {{ forms.add_bill(bill_form) }}
     </form>