Add styles for device settings

Hey @jebeck, here is a first pass at adding some styles to the device settings visualization.

A few things to note:

- I had to change some of the classes, as well as add a "table footer" element. Can I let you look through the HTML at the end of this post and mirror those changes in the D3 code?
- I wanted to get something "done" before the end of day, that you can use, so I stopped before adding the "click to collapse/expand" on the basal patterns. We can do that later this week. If you add "overflow: scroll" to the fixed-height "tidelineContainer" (see example.less), it will allow the user to see any basal patterns that flow out of the bottom of the visualization box.
- I had to diminish font size to 14px (from the app's default 16px), or else things would wrap a bit too much.
- If you copy the HTML below to `example/settings.html`, build `example/example.less` you can see a preview of this.

![screen shot 2014-04-14 at 4 51 01 pm](https://cloud.githubusercontent.com/assets/1306536/2696664/124b77ec-c3e5-11e3-80e0-114507673778.png)

```html
<!DOCTYPE html>
<html>

  <head>
    <title>Tideline: Settings</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="example.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="vSpace"></div>
    <div class="container" id="tidelineMain">
      <div class="row tidelineNav">
        <div class="col-md-3">
          <span class="tidelineNavLabel"><a href="#" id="oneDayView">One Day</a></span>
          <span class="tidelineNavLabel"><a href="#" id="twoWeekView">Two Weeks</a></span>
        </div>
        <div class="col-md-6" id="tidelineLabel">
          <img src="blip_icons_back.svg" id="tidelineNavBack" class="tideline-nav"/>
          <div class="tidelineNavLabelWrapper">
            <span class="tidelineNavLabel" id="tidelineNavString">Current Settings</span>
          </div>
          <img src="blip_icons_next.svg" id="tidelineNavForward" class="tideline-nav"/>
        </div>
        <div class="col-md-3 tidelineNavRightLabel">
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" id="tidelineOuterContainer">
          <div class="col-md-12" id="tidelineContainer"></div>
        </div>
      </div>
      <div class="row tidelineNav">
        <div class="col-md-3">
          <span class="tidelineNavLabel active"><a href="#" id="deviceSettings">Device Settings</a></span>
        </div>
        <div class="col-md-3 col-md-offset-6 two-week tidelineNavRightLabel">
        </div>
      </div>
    </div>
    <div class="vSpace"></div>

<script type="text/javascript">
window.settingsData = {
  "type": "settings",
  "deviceTime": "February 17th, 2014",
  "activeBasalSchedule": "standard",
  "units": {
    "carb": "grams",
    "bg": "mg dL"
  },
  "basalSchedules": {
    "pattern a": [
      {"start": "12:00 am", "rate": "0.85"},
      {"start": "1:00 am", "rate": "0.80"},
      {"start": "3:00 am", "rate": "0.85"},
      {"start": "4:00 am", "rate": "0.90"},
      {"start": "5:00 am", "rate": "1.00"},
      {"start": "6:00 am", "rate": "1.05"},
      {"start": "9:00 am", "rate": "1.00"},
      {"start": "3:00 pm", "rate": "1.05"},
      {"start": "5:00 pm", "rate": "0.90"}
    ],
    "standard": [
      {"start": "12:00 am", "rate": "0.65"},
      {"start": "1:00 am", "rate": "0.60"},
      {"start": "3:00 am", "rate": "0.65"},
      {"start": "4:00 am", "rate": "0.70"},
      {"start": "5:00 am", "rate": "0.75"},
      {"start": "6:00 am", "rate": "0.85"},
      {"start": "8:00 am", "rate": "0.80"},
      {"start": "9:00 am", "rate": "0.75"},
      {"start": "3:00 pm", "rate": "0.85"},
      {"start": "5:00 pm", "rate": "0.80"}
    ]
    },
    "carbRatio" : [
      {"start": "12:00 am", "amount": "13"},
      {"start": "6:00 am", "amount": "9"},
      {"start": "9:00 am", "amount": "13"},
      {"start": "5:00 pm", "amount": "13"},
      {"start": "10:30 pm", "amount": "13"}
    ],
    "insulinSensitivity" : [
      {"start": "12:00 am", "amount": "60"},
      {"start": "5:00 am", "amount": "50"},
      {"start": "11:00 pm", "amount": "60"}
    ],
    "bgTarget": [
      {"start": "12:00 am", "low": "90", "high": "110"},
      {"start": "6:00 am", "low": "80", "high": "100"},
      {"start": "11:00 pm", "low": "80", "high": "100"}
    ]
};
</script>

<script id="settingsTemplate" type="text/template">
<div id="tidelineSettings" class="d3-settings">
  <div id="basalSettings" class="d3-settings-section d3-settings-section-basal">
    <div class="d3-settings-section-label">BASAL RATES</div>
    <% _.forEach(basalSchedules, function(items, name) { %>
    <div id="pattern_" class="d3-settings-col d3-settings-basal-schedule">
      <div class="d3-settings-col-label"><%= name %></div>
      <table>
        <tr>
          <th class="d3-settings-table-head">Start time</th>
          <th class="d3-settings-table-head">Value (U/hr)</th>
        </tr>
        <% _.forEach(items, function(item) { %>
        <tr class="d3-settings-table-row-data">
          <td><%= item.start %></td>
          <td><%= item.rate %></td>
        </tr>
        <% }); %>
        <tr class="d3-settings-table-footer"></tr>
      </table>
    </div>
    <% }); %>
  </div><!--
  --><div id="wizardSettings" class="d3-settings-section d3-settings-section-bolus">
    <div class="d3-settings-section-label">BOLUS WIZARD</div>
    <div id="carbRatioSettings" class="d3-settings-col d3-settings-carb-ratio">
      <div class="d3-settings-col-label">Insulin to Carb Ratio (I:C)</div>
      <table>
        <tr>
          <th class="d3-settings-table-head">Start time</th>
          <th class="d3-settings-table-head">Value (g/U)</th>
        </tr>
        <% _.forEach(carbRatio, function(item) { %>
        <tr class="d3-settings-table-row-data">
          <td><%= item.start %></td>
          <td><%= item.amount %></td>
        </tr>
        <% }); %>
        <tr class="d3-settings-table-footer"></tr>
      </table>
    </div><!--
    --><div id="insulinSensitivitySettings" class="d3-settings-col d3-settings-insulin-sensitivity">
      <div class="d3-settings-col-label">Sensitivity (ISF, Correction)</div>
      <table>
        <tr>
          <th class="d3-settings-table-head">Start time</th>
          <th class="d3-settings-table-head">Value (mg/dL/U)</th>
        </tr>
        <% _.forEach(insulinSensitivity, function(item) { %>
        <tr class="d3-settings-table-row-data">
          <td><%= item.start %></td>
          <td><%= item.amount %></td>
        </tr>
        <% }); %>
        <tr class="d3-settings-table-footer"></tr>
      </table>
    </div><!--
    --><div id="bgTargetSettings" class="d3-settings-col d3-settings-bg-target">
      <div class="d3-settings-col-label">BG Target</div>
      <table>
        <tr>
          <th class="d3-settings-table-head">Start time</th>
          <th class="d3-settings-table-head">Low (mg/dL)</th>
          <th class="d3-settings-table-head">High (mg/dL)</th>
        </tr>
        <% _.forEach(bgTarget, function(item) { %>
        <tr class="d3-settings-table-row-data">
          <td><%= item.start %></td>
          <td><%= item.low %></td>
          <td><%= item.high %></td>
        </tr>
        <% }); %>
        <tr class="d3-settings-table-footer"></tr>
      </table>
    </div>
  </div>
</div>
</script>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/lodash/dist/lodash.min.js"></script>

<script type="text/javascript">

var render = function() {
  var $container = $('#tidelineContainer');
  var $template = $('#settingsTemplate');
  var data = window.settingsData;
  var template = _.template($template.text());

  var html = template(data);
  $container.html(html);
};

render();

</script>

    </body>
</html>
```