diff --git a/lib/assets/base.css b/lib/assets/base.css
index a6a2f328..0c0571da 100644
--- a/lib/assets/base.css
+++ b/lib/assets/base.css
@@ -1,107 +1,104 @@
 body, html {
-    margin:0; padding: 0;
+  margin:0; padding: 0;
+  height: 100%;
 }
 body {
-    font-family: Helvetica Neue, Helvetica,Arial;
-    font-size: 10pt;
-}
-div.header, div.footer {
-    background: #eee;
-    padding: 1em;
-}
-div.header {
-    z-index: 100;
-    position: fixed;
-    top: 0;
-    border-bottom: 1px solid #666;
-    width: 100%;
-}
-div.footer {
-    border-top: 1px solid #666;
-}
-div.body {
-    margin-top: 10em;
-}
-div.meta {
-    font-size: 90%;
-    text-align: center;
-}
-h1, h2, h3 {
-    font-weight: normal;
-}
-h1 {
-    font-size: 12pt;
-}
-h2 {
-    font-size: 10pt;
-}
+    font-family: Helvetica Neue, Helvetica, Arial;
+    font-size: 14px;
+    color:#333;
+}
+.small { font-size: 12px;; }
+*, *:after, *:before {
+  -webkit-box-sizing:border-box;
+     -moz-box-sizing:border-box;
+          box-sizing:border-box;
+  }
+h1 { font-size: 20px; margin: 0;}
+h2 { font-size: 14px; }
 pre {
-    font-family: Consolas, Menlo, Monaco, monospace;
+    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
     margin: 0;
     padding: 0;
-    line-height: 1.3;
-    font-size: 14px;
     -moz-tab-size: 2;
     -o-tab-size:  2;
     tab-size: 2;
 }
+a { color:#0074D9; text-decoration:none; }
+a:hover { text-decoration:underline; }
+.strong { font-weight: bold; }
+.space-top1 { padding: 10px 0 0 0; }
+.pad2y { padding: 20px 0; }
+.pad1y { padding: 10px 0; }
+.pad2x { padding: 0 20px; }
+.pad2 { padding: 20px; }
+.pad1 { padding: 10px; }
+.space-left2 { padding-left:55px; }
+.space-right2 { padding-right:20px; }
+.center { text-align:center; }
+.clearfix { display:block; }
+.clearfix:after {
+  content:'';
+  display:block;
+  height:0;
+  clear:both;
+  visibility:hidden;
+  }
+.fl { float: left; }
+@media only screen and (max-width:640px) {
+  .col3 { width:100%; max-width:100%; }
+  .hide-mobile { display:none!important; }
+}
+
+.quiet {
+  color: #7f7f7f;
+  color: rgba(0,0,0,0.5);
+}
+.quiet a { opacity: 0.7; }
+
+.fraction {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 10px;
+  color: #555;
+  background: #E8E8E8;
+  padding: 4px 5px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
 
-div.path { font-size: 110%; }
-div.path a:link, div.path a:visited { color: #000; }
-table.coverage { border-collapse: collapse; margin:0; padding: 0 }
+div.path a:link, div.path a:visited { color: #333; }
+table.coverage {
+  border-collapse: collapse;
+  margin: 10px 0 0 0;
+  padding: 0;
+}
 
 table.coverage td {
-    margin: 0;
-    padding: 0;
-    color: #111;
-    vertical-align: top;
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
 }
 table.coverage td.line-count {
-    width: 50px;
     text-align: right;
-    padding-right: 5px;
+    padding: 0 5px 0 20px;
 }
 table.coverage td.line-coverage {
-    color: #777 !important;
     text-align: right;
-    border-left: 1px solid #666;
-    border-right: 1px solid #666;
-}
-
-table.coverage td.text {
+    padding-right: 10px;
+    min-width:20px;
 }
 
 table.coverage td span.cline-any {
     display: inline-block;
     padding: 0 5px;
-    width: 40px;
-}
-table.coverage td span.cline-neutral {
-    background: #eee;
-}
-table.coverage td span.cline-yes {
-    background: #b5d592;
-    color: #999;
-}
-table.coverage td span.cline-no {
-    background: #fc8c84;
+    width: 100%;
 }
-
-.cstat-yes { color: #111; }
-.cstat-no { background: #fc8c84; color: #111; }
-.fstat-no { background: #ffc520; color: #111 !important; }
-.cbranch-no { background:  yellow !important; color: #111; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
 .missing-if-branch {
     display: inline-block;
-    margin-right: 10px;
+    margin-right: 5px;
+    border-radius: 3px;
     position: relative;
     padding: 0 4px;
-    background: black;
+    background: #333;
     color: yellow;
 }
 
@@ -113,64 +110,87 @@ table.coverage td span.cline-no {
     background: #ccc;
     color: white;
 }
-
 .missing-if-branch .typ, .skip-if-branch .typ {
     color: inherit !important;
 }
+.coverage-summary {
+  border-collapse: collapse;
+  width: 100%;
+}
+.coverage-summary tr { border-bottom: 1px solid #bbb; }
+.keyline-all { border: 1px solid #ddd; }
+.coverage-summary td, .coverage-summary th { padding: 10px; }
+.coverage-summary tbody { border: 1px solid #bbb; }
+.coverage-summary td { border-right: 1px solid #bbb; }
+.coverage-summary td:last-child { border-right: none; }
+.coverage-summary th {
+  text-align: left;
+  font-weight: normal;
+  white-space: nowrap;
+}
+.coverage-summary th.file { border-right: none !important; }
+.coverage-summary th.pct { }
+.coverage-summary th.pic,
+.coverage-summary th.abs,
+.coverage-summary td.pct,
+.coverage-summary td.abs { text-align: right; }
+.coverage-summary td.file { white-space: nowrap;  }
+.coverage-summary td.pic { min-width: 120px !important;  }
+.coverage-summary tfoot td { }
 
-.entity, .metric { font-weight: bold; }
-.metric { display: inline-block; border: 1px solid #333; padding: 0.3em; background: white; }
-.metric small { font-size: 80%; font-weight: normal; color: #666; }
-
-div.coverage-summary table { border-collapse: collapse; margin: 3em; font-size: 110%; }
-div.coverage-summary td, div.coverage-summary table  th { margin: 0; padding: 0.25em 1em; border-top: 1px solid #666; border-bottom: 1px solid #666; }
-div.coverage-summary th { text-align: left; border: 1px solid #666; background: #eee; font-weight: normal; }
-div.coverage-summary th.file { border-right: none !important; }
-div.coverage-summary th.pic { border-left: none !important; text-align: right; }
-div.coverage-summary th.pct { border-right: none !important; }
-div.coverage-summary th.abs { border-left: none !important; text-align: right; }
-div.coverage-summary td.pct { text-align: right; border-left: 1px solid #666; }
-div.coverage-summary td.abs { text-align: right; font-size: 90%; color: #444; border-right: 1px solid #666; }
-div.coverage-summary td.file { border-left: 1px solid #666; white-space: nowrap;  }
-div.coverage-summary td.pic { min-width: 120px !important;  }
-div.coverage-summary a:link { text-decoration: none; color: #000; }
-div.coverage-summary a:visited { text-decoration: none; color: #777; }
-div.coverage-summary a:hover { text-decoration: underline; }
-div.coverage-summary tfoot td { border-top: 1px solid #666; }
-
-div.coverage-summary .sorter {
+.coverage-summary .sorter {
     height: 10px;
     width: 7px;
     display: inline-block;
     margin-left: 0.5em;
     background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
 }
-div.coverage-summary .sorted .sorter {
+.coverage-summary .sorted .sorter {
     background-position: 0 -20px;
 }
-div.coverage-summary .sorted-desc .sorter {
+.coverage-summary .sorted-desc .sorter {
     background-position: 0 -10px;
 }
+.status-line {  height: 10px; }
+/* dark red */
+.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
+.low .chart { border:1px solid #C21F39 }
+/* medium red */
+.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
+/* light red */
+.low, .cline-no { background:#FCE1E5 }
+/* light green */
+.high, .cline-yes { background:rgb(230,245,208) }
+/* medium green */
+.cstat-yes { background:rgb(161,215,106) }
+/* dark green */
+.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
+.high .chart { border:1px solid rgb(77,146,33) }
 
-.high { background: #b5d592 !important; }
-.medium { background: #ffe87c !important; }
-.low { background: #fc8c84 !important; }
 
-span.cover-fill, span.cover-empty {
-    display:inline-block;
-    border:1px solid #444;
-    background: white;
-    height: 12px;
+.medium .chart { border:1px solid #666; }
+.medium .cover-fill { background: #666; }
+
+.cbranch-no { background:  yellow !important; color: #111; }
+
+.cstat-skip { background: #ddd; color: #111; }
+.fstat-skip { background: #ddd; color: #111 !important; }
+.cbranch-skip { background: #ddd !important; color: #111; }
+
+span.cline-neutral { background: #eaeaea; }
+.medium { background: #eaeaea; }
+
+.cover-fill, .cover-empty {
+  display:inline-block;
+  height: 12px;
 }
-span.cover-fill {
-    background: #ccc;
-    border-right: 1px solid #444;
+.chart {
+  line-height: 0;
 }
-span.cover-empty {
+.cover-empty {
     background: white;
-    border-left: none;
 }
-span.cover-full {
+.cover-full {
     border-right: none !important;
 }
 pre.prettyprint {
@@ -180,3 +200,13 @@ pre.prettyprint {
 }
 .com { color: #999 !important; }
 .ignore-none { color: #999; font-weight: normal; }
+
+.wrapper {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -48px;
+}
+.footer, .push {
+  height: 48px;
+}
diff --git a/lib/assets/sorter.js b/lib/assets/sorter.js
index 6afb736c..97d25508 100644
--- a/lib/assets/sorter.js
+++ b/lib/assets/sorter.js
@@ -7,7 +7,7 @@ var addSorting = (function () {
         };
 
     // returns the summary table element
-    function getTable() { return document.querySelector('.coverage-summary table'); }
+    function getTable() { return document.querySelector('.coverage-summary'); }
     // returns the thead element of the summary table
     function getTableHeader() { return getTable().querySelector('thead tr'); }
     // returns the tbody element of the summary table
diff --git a/lib/report/html.js b/lib/report/html.js
index 86edd19d..ad8fdf04 100644
--- a/lib/report/html.js
+++ b/lib/report/html.js
@@ -18,17 +18,16 @@ var handlebars = require('handlebars'),
     templateFor = function (name) { return handlebars.compile(fs.readFileSync(path.resolve(__dirname, 'templates', name + '.txt'), 'utf8')); },
     headerTemplate = templateFor('head'),
     footerTemplate = templateFor('foot'),
-    pathTemplate = handlebars.compile('<div class="path">{{{html}}}</div>'),
     detailTemplate = handlebars.compile([
         '<tr>',
-        '<td class="line-count">{{#show_lines}}{{maxLines}}{{/show_lines}}</td>',
-        '<td class="line-coverage">{{#show_line_execution_counts fileCoverage}}{{maxLines}}{{/show_line_execution_counts}}</td>',
+        '<td class="line-count quiet">{{#show_lines}}{{maxLines}}{{/show_lines}}</td>',
+        '<td class="line-coverage quiet">{{#show_line_execution_counts fileCoverage}}{{maxLines}}{{/show_line_execution_counts}}</td>',
         '<td class="text"><pre class="prettyprint lang-js">{{#show_code structured}}{{/show_code}}</pre></td>',
         '</tr>\n'
     ].join('')),
     summaryTableHeader = [
-        '<div class="coverage-summary">',
-        '<table>',
+        '<div class="pad1">',
+        '<table class="coverage-summary">',
         '<thead>',
         '<tr>',
         '   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>',
@@ -48,15 +47,15 @@ var handlebars = require('handlebars'),
     summaryLineTemplate = handlebars.compile([
         '<tr>',
         '<td class="file {{reportClasses.statements}}" data-value="{{file}}"><a href="{{output}}">{{file}}</a></td>',
-        '<td data-value="{{metrics.statements.pct}}" class="pic {{reportClasses.statements}}">{{#show_picture}}{{metrics.statements.pct}}{{/show_picture}}</td>',
+        '<td data-value="{{metrics.statements.pct}}" class="pic {{reportClasses.statements}}"><div class="chart">{{#show_picture}}{{metrics.statements.pct}}{{/show_picture}}</div></td>',
         '<td data-value="{{metrics.statements.pct}}" class="pct {{reportClasses.statements}}">{{metrics.statements.pct}}%</td>',
-        '<td data-value="{{metrics.statements.total}}" class="abs {{reportClasses.statements}}">({{metrics.statements.covered}}&nbsp;/&nbsp;{{metrics.statements.total}})</td>',
+        '<td data-value="{{metrics.statements.total}}" class="abs {{reportClasses.statements}}">{{metrics.statements.covered}}/{{metrics.statements.total}}</td>',
         '<td data-value="{{metrics.branches.pct}}" class="pct {{reportClasses.branches}}">{{metrics.branches.pct}}%</td>',
-        '<td data-value="{{metrics.branches.total}}" class="abs {{reportClasses.branches}}">({{metrics.branches.covered}}&nbsp;/&nbsp;{{metrics.branches.total}})</td>',
+        '<td data-value="{{metrics.branches.total}}" class="abs {{reportClasses.branches}}">{{metrics.branches.covered}}/{{metrics.branches.total}}</td>',
         '<td data-value="{{metrics.functions.pct}}" class="pct {{reportClasses.functions}}">{{metrics.functions.pct}}%</td>',
-        '<td data-value="{{metrics.functions.total}}" class="abs {{reportClasses.functions}}">({{metrics.functions.covered}}&nbsp;/&nbsp;{{metrics.functions.total}})</td>',
+        '<td data-value="{{metrics.functions.total}}" class="abs {{reportClasses.functions}}">{{metrics.functions.covered}}/{{metrics.functions.total}}</td>',
         '<td data-value="{{metrics.lines.pct}}" class="pct {{reportClasses.lines}}">{{metrics.lines.pct}}%</td>',
-        '<td data-value="{{metrics.lines.total}}" class="abs {{reportClasses.lines}}">({{metrics.lines.covered}}&nbsp;/&nbsp;{{metrics.lines.total}})</td>',
+        '<td data-value="{{metrics.lines.total}}" class="abs {{reportClasses.lines}}">{{metrics.lines.covered}}/{{metrics.lines.total}}</td>',
         '</tr>\n'
     ].join('\n\t')),
     summaryTableFooter = [
@@ -82,13 +81,19 @@ handlebars.registerHelper('show_picture', function (opts) {
         }
         num = Math.floor(num);
         rest = 100 - num;
-        return '<span class="cover-fill' + cls + '" style="width: ' + num + 'px;"></span>' +
-            '<span class="cover-empty" style="width:' + rest + 'px;"></span>';
+        return '<div class="cover-fill' + cls + '" style="width: ' + num + '%;"></div>' +
+            '<div class="cover-empty" style="width:' + rest + '%;"></div>';
     } else {
         return '';
     }
 });
 
+handlebars.registerHelper('if_has_ignores', function (metrics, opts) {
+    return (metrics.statements.skipped +
+        metrics.functions.skipped +
+        metrics.branches.skipped) === 0 ? '' : opts.fn(this);
+});
+
 handlebars.registerHelper('show_ignores', function (metrics) {
     var statements = metrics.statements.skipped,
         functions = metrics.functions.skipped,
@@ -134,7 +139,7 @@ handlebars.registerHelper('show_line_execution_counts', function (context, opts)
         if (lines.hasOwnProperty(lineNumber)) {
             if (lines[lineNumber] > 0) {
                 covered = 'yes';
-                value = lines[lineNumber];
+                value = lines[lineNumber] + '×';
             } else {
                 covered = 'no';
             }
@@ -371,11 +376,11 @@ Report.mix(HtmlReport, {
 
         for (i = 0; i < nodePath.length; i += 1) {
             linkPath.push('<a href="' + linkMapper.ancestor(node, i + 1) + '">' +
-                (cleanPath(nodePath[i].relativeName) || 'All files') + '</a>');
+                (cleanPath(nodePath[i].relativeName) || 'all files') + '</a>');
         }
         linkPath.reverse();
-        return linkPath.length > 0 ? linkPath.join(' &#187; ') + ' &#187; ' +
-            cleanPath(node.displayShortName()) : '';
+        return linkPath.length > 0 ? linkPath.join(' / ') + ' ' +
+            cleanPath(node.displayShortName()) : '/';
     },
 
     fillTemplate: function (node, templateData) {
@@ -385,7 +390,7 @@ Report.mix(HtmlReport, {
         templateData.entity = node.name || 'All files';
         templateData.metrics = node.metrics;
         templateData.reportClass = getReportClass(node.metrics.statements, opts.watermarks.statements);
-        templateData.pathHtml = pathTemplate({ html: this.getPathHtml(node, linkMapper) });
+        templateData.pathHtml = this.getPathHtml(node, linkMapper);
         templateData.base = {
         	css: linkMapper.asset(node, 'base.css')
         };
diff --git a/lib/report/templates/foot.txt b/lib/report/templates/foot.txt
index 5fdaa5ab..e853251d 100644
--- a/lib/report/templates/foot.txt
+++ b/lib/report/templates/foot.txt
@@ -1,7 +1,9 @@
-
+<div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at {{datetime}}
 </div>
-<div class="footer">
-    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at {{datetime}}</div>
 </div>
 {{#if prettify}}
 <script src="{{prettify.js}}"></script>
diff --git a/lib/report/templates/head.txt b/lib/report/templates/head.txt
index cb355ff9..f98094e5 100644
--- a/lib/report/templates/head.txt
+++ b/lib/report/templates/head.txt
@@ -2,35 +2,59 @@
 <html lang="en">
 <head>
     <title>Code coverage report for {{entity}}</title>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
 {{#if prettify}}
-    <link rel="stylesheet" href="{{prettify.css}}">
+    <link rel="stylesheet" href="{{prettify.css}}" />
 {{/if}}
-    <link rel="stylesheet" href="{{base.css}}">
+    <link rel="stylesheet" href="{{base.css}}" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <style type='text/css'>
-        div.coverage-summary .sorter {
+        .coverage-summary .sorter {
             background-image: url({{sorter.image}});
         }
     </style>
 </head>
 <body>
-<div class="header {{reportClass}}">
-    <h1>Code coverage report for <span class="entity">{{entity}}</span></h1>
-    <h2>
-        {{#with metrics.statements}}
-        Statements: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        {{#with metrics.branches}}
-        Branches: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        {{#with metrics.functions}}
-        Functions: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        {{#with metrics.lines}}
-        Lines: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        Ignored: <span class="metric">{{#show_ignores metrics}}{{/show_ignores}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
-    </h2>
-    {{{pathHtml}}}
-</div>
-<div class="body">
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      {{{pathHtml}}}
+    </h1>
+    <div class='clearfix'>
+      {{#with metrics.statements}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#with metrics.branches}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#with metrics.functions}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#with metrics.lines}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#if_has_ignores metrics}}
+      <div class='fl pad1y'>
+        <span class="strong">{{#show_ignores metrics}}{{/show_ignores}}</span>
+        <span class="quiet">Ignored</span>  &nbsp;&nbsp;&nbsp;&nbsp;
+      </div>
+      {{/if_has_ignores}}
+    </div>
+  </div>
+  <div class='status-line {{reportClass}}'></div>