Make history tables clearer (#110)

Now we have credit and debit columns inside gittip. I think this is more
standard and normal and clearer.

www/%participant_id/history.html

@@ -176,16 +176,16 @@
  text-align: left;
  border-bottom: 1px solid #614C3E;
  }
- TD.out {
+ TD.debit {
  color: red;
  }
+ .head TD.debit {
+ color: #614C3E;
+ }
  TD.note {
  text-align: left;
  }
  .fee {
- border-left: 1px solid #614C3E;
- }
- .in-out {
  border-right: 1px solid #614C3E;
  text-align: right;
  }
@@ -211,53 +211,54 @@ <h3>{{ participant_id == user.id and "Your" or "Their" }} balance is
  ({{ utils.dt2age(event['timestamp']) }})</b></th>
  </tr>
  <tr class="head">
- <td colspan="3" class="outside">&larr; Outside</td>
- <td colspan="3" class="inside">Inside Gittip &rarr;</td>
+ <td colspan="2" class="outside">&larr; Outside</td>
+ <td colspan="4" class="inside">Inside Gittip &rarr;</td>
  </tr>
  <tr class="head">
  <td class="card">Card</td>
  <td class="fee">Fee</td>
- <td class="in-out">In/Out</td>
- <td class="tip">Tip</td>
+ <td class="credit">Credit</td>
+ <td class="debit">Debit</td>
  <td class="balance">Balance</td>
  <td class="note">Note</td>
  </tr>
  <tr>
  <td class="card"></td>
  <td class="fee"></td>
- <td class="in-out"></td>
- <td class="tip"></td>
+ <td class="credit"></td>
+ <td class="debit"></td>
  <td class="balance">{{ event['balance'] }}</td>
  <td class="note"></td>
  </tr>
  {% elif event['event'] == 'balance' %}
  <tr>
  <td class="card"></td>
  <td class="fee"></td>
- <td class="in-out"></td>
- <td class="tip"></td>
+ <td class="credit"></td>
+ <td class="debit"></td>
  <td class="balance">{{ event['balance'] }}</td>
  <td class="note"></td>
  </tr>
  {% elif event['event'] == 'exchange' %}
  <tr>
  <td class="card">{{ event['amount'] + event['fee'] }}</td>
  <td class="fee">{{ event['fee'] }}</td>
- <td class="in-out">{{ event['amount'] }}</td>
- <td class="tip"></td>
+ <td class="credit">{{ event['amount'] }}</td>
+ <td class="debit"></td>
  <td class="balance">{{ event['balance'] }}</td>
  <td class="note"></td>
  </tr>
  {% elif event['event'] == 'transfer' %}
  <tr>
  <td class="card"></td>
  <td class="fee"></td>
- <td class="in-out"></td>
 
  {% if event['tippee'] == participant_id %}
- <td class="tip in">{{ event['amount'] }}</td>
+ <td class="credit">{{ event['amount'] }}</td>
+ <td class="debit"></td>
  {% else %}
- <td class="tip out">{{ event['amount'] }}</td>
+ <td class="credit"></td>
+ <td class="debit">{{ event['amount'] }}</td>
  {% end %}
 
  <td class="balance">{{ event['balance'] }}</td>