Add background color for alternate rows in tables

src/static/css/main.css

@@ -78,3 +78,15 @@ FORM {
     padding: 10px 5px;
     border-top: 2px solid #9BE;
 }
+
+TABLE {
+    margin: 20px 0;
+}
+
+TH, TD {
+    padding: 5px 8px;
+}
+
+TR.even {
+    background-color: #ACE;
+}

src/static/js/main.js

@@ -0,0 +1,3 @@
+jQuery(document).ready(function() {
+    jQuery('table.with-color tr:even').addClass('even');
+});

src/templates/clues.html

@@ -18,7 +18,7 @@ <h1>Clues for {{ hunt_name }}</h1>
         <div class="tab-content">
         {% if started %}
         <form action="" method="post">
-            <table>
+            <table class="with-color">
                 <tr>
                     <th>Question</th>
                     <th>Answer</th>

src/templates/hunt.html

@@ -20,11 +20,7 @@ <h2>Hunt has started!</h2>
                 <input type="submit" value="Start hunt" />
             </form>
         {% endif %}
-        <div>
-            <a href="/hunt/{{ hunt.key.id }}/clues">Clues</a>
-            <a href="/hunt/{{ hunt.key.id }}/teams">Teams</a>
-        </div>
-        <table>
+        <table class="with-color">
             <tr><th>Question/Team</th>
                 {% for team in hunt.teams %}
                     <th>{{ team.name }}</th>

src/templates/include-head.html

@@ -1 +1,3 @@
+<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
+<script type="text/javascript" src="/js/main.js"></script>
 <link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" />

src/templates/index.html

@@ -17,7 +17,7 @@ <h2>Create a new Hunt:</h2>
         </div>
         <div>
             <h2>Your Hunts:</h2>
-            <table>
+            <table class="with-color">
                 <tr>
                     <th style="width: 130px">Hunt Name</th>
                     <th style="width: 130px">Status</th>

src/templates/teams.html

@@ -18,7 +18,7 @@ <h1>Teams for {{ hunt_name }}</h1>
         <div class="tab-content">
         {% if started %}
         <form action="" method="post">
-            <table>
+            <table class="with-color">
                 <tr>
                     <th>Name</th>
                     <th>Phone Number</th>