--- a/ckanext/ga_report/templates/ga_report/ga_util.html
+++ b/ckanext/ga_report/templates/ga_report/ga_util.html
@@ -8,13 +8,13 @@
 
 <select name="month" py:def="month_selector(current_month, months, day)">
     <option value='' py:attrs="{'selected': 'selected' if not current_month else None}">All months</option>
-  <py:for each="i, (val,desc) in enumerate(months)">
-    <option value='${val}' py:attrs="{'selected': 'selected' if current_month == val else None}">${desc}<py:if test="i == 0 and day"> (up to ${day})</py:if></option>
+  <py:for each="(iso_code,string_name) in months">
+    <option value='${iso_code}' py:attrs="{'selected': 'selected' if current_month == iso_code else None}">${h.month_option_title(iso_code,months,day)}</option>
   </py:for>
 </select>
 
 
-<table py:def="social_table(items, with_source=False)" class="table table-condensed table-bordered table-striped">
+<table py:def="social_table(items, with_source=False)" class="ga-reports-table table table-condensed table-bordered table-striped">
     <tr>
         <th>Name</th>
         <th py:if="with_source">Source</th>
@@ -24,76 +24,74 @@
     <tr>
         <td><a href="${url}">${name}</a></td>
         <td py:if="with_source">${source}</td>
-        <td>${count}</td>
+        <td class="td-numeric">${count}</td>
     </tr>
     </py:for>
  </table>
 
 
-<div py:def="rickshaw_graph(items_json,id,mode='line')">
+<div py:def="rickshaw_graph(items_json,id,mode='line',colorscheme='munin')">
   <div id="chart_container_$id" class="rickshaw_chart_container">
     <div id="y_axis_$id" class="rickshaw_y_axis"></div>
     <div id="chart_$id" class="rickshaw_chart"></div>
-    <div id="legend_$id" class="rickshaw_legend"></div>
     <script type="text/javascript">
       $(function() {
-          var all_series = ${items_json};
-          var palette = new Rickshaw.Color.Palette( { scheme: 'munin' } );
-          $.each(all_series, function(i, object) {
-              object['color'] = palette.color();
-          });
-          var graph = new Rickshaw.Graph( {
-              element: document.querySelector("#chart_$id"),
-              renderer: '$mode',
-              series: all_series ,
-              height: 328
-          });
-          var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
-          var y_axis = new Rickshaw.Graph.Axis.Y( {
-              graph: graph,
-              orientation: 'left',
-              tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-              element: document.getElementById('y_axis_$id'),
-          } );
-          var legend = new Rickshaw.Graph.Legend( {
-              element: document.querySelector('#legend_$id'),
-              graph: graph
-          } );
-          graph.render();
+          var items = $items_json;
+          CKAN.GA_Reports.render_rickshaw('$id', items, '$mode', '$colorscheme');
       });
     </script>
   </div>
 </div>
 
 
-<table py:def="stat_table(items, title='Views')" class="table table-condensed table-bordered table-striped">
+<table py:def="stat_table(items, title='Views')" class="ga-reports-table table table-condensed table-bordered table-striped">
     <tr>
         <th>Name</th>
-        <th>% ${title}</th>
+        <th class="td-numeric">% ${title}</th>
     </tr>
     <py:for each="name, value in items">
     <tr>
         <td>${name}</td>
-        <td>${value}</td>
+        <td class="td-numeric">${value}</td>
     </tr>
     </py:for>
  </table>
 
 
-<div py:def="usage_nav(active_name)" id="minornavigation">
-    <div id="minornavigation-bg-left">
-    <div id="minornavigation-bg-right">
-      <ul class="nav nav-pills">
-        <li py:attrs="{'class': 'active' if active_name=='Site-wide' else None}"><a py:attrs="{'class': 'active' if active_name=='Site-wide' else None}"  href="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Site-wide</a></li>
-        <li py:attrs="{'class': 'active' if active_name=='Publishers' else None}">
-                <a py:attrs="{'class': 'active' if active_name=='Publishers' else None}"  href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Publishers</a>
-        </li>
-        <li py:attrs="{'class': 'active' if active_name=='Datasets' else None}">
-                <a py:attrs="{'class': 'active' if active_name=='Datasets' else None}"  href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Datasets</a>
-        </li>
+<div py:def="usage_nav(active_name)">
+  <span class="subheading">
+    <img src="/images/arrow-down-right.png" />
+    <a class="${if_(active_name=='Site-wide','active')}" href="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}${if_(c.month,'?month='+c.month)}">Site-wide</a>
+    <span class="divider">|</span>
+    <a class="${if_(active_name=='Publishers','active')}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}${if_(c.month,'?month='+c.month)}">Publishers</a>
+    <span class="divider">|</span>
+    <a class="${if_(active_name=='Datasets','active')}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}${if_(c.month,'?month='+c.month)}">Datasets</a>
+  </span>
+</div>
+
+<div py:def="ga_sidebar(download_link)">
+    <div class="widget-container widget_text">
+      <h4>Download</h4>
+      <p><center>
+        <a class="btn button btn-primary" href="${download_link}">Download as CSV</a></center>
+      </p>
+    </div>
+    <div class="widget-container widget_text">
+      <h4>Graph Legend</h4>
+      <div id="graph-legend-container">
+        <div style="display: none;" id="legend_none">(No graph is loaded)</div>
+      </div>
+    </div>
+    <div class="widget-container widget_text">
+      <h4>Notes</h4>
+      <ul>
+          <li>"Views" is the number of times a page was loaded in users' browsers.</li>
+          <li>"Downloads" is the number of times a user has clicked to download either an original or cached resource for a particular dataset. Download information is only available from 2nd December 2012; 'No data' is shown for records before that date.</li>
+          <li>These usage statistics are confined to users with javascript enabled, which excludes web crawlers and API calls.</li>
+          <li>The results are not shown when the number of views/visits is tiny. Where these relate to site pages, results are available in full in the CSV download. Where these relate to users' web browser information, results are not disclosed, for privacy reasons.</li>
       </ul>
     </div>
-    </div>
+
 </div>