diff --git a/cmd/drone-server/static/images/logo.svg b/cmd/drone-server/static/images/logo.svg
index af16f2873..0d7cf1696 100644
--- a/cmd/drone-server/static/images/logo.svg
+++ b/cmd/drone-server/static/images/logo.svg
@@ -20,7 +20,7 @@
   <sodipodi:namedview
      id="base"
      pagecolor="#ffffff"
-     bordercolor="#666666"
+     bordercolor="#2f2f2f"
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
@@ -69,7 +69,7 @@
      transform="translate(-21.720779,-25.639593)">
     <path
        sodipodi:type="arc"
-       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       style="fill:#2f2f2f;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        id="path2998"
        sodipodi:cx="172.10474"
        sodipodi:cy="458.39249"
@@ -78,13 +78,13 @@
        d="m 177.53431,458.39249 c 0,2.78946 -2.43091,5.05076 -5.42957,5.05076 -2.99867,0 -5.42957,-2.2613 -5.42957,-5.05076 0,-2.78946 2.4309,-5.05077 5.42957,-5.05077 2.99866,0 5.42957,2.26131 5.42957,5.05077 z"
        transform="matrix(1.0129716,0,0,1.0889445,-131.11643,-452.42373)" />
     <path
-       style="fill:#ffffff;fill-opacity:1;stroke-width:0;stroke-miterlimit:4"
+       style="fill:#2f2f2f;fill-opacity:1;stroke-width:0;stroke-miterlimit:4"
        d="m 43.220779,25.640247 c 9.60163,0.0752 20.51786,6.8438 21.5,19.6 l -13,0 c 0,0 -1.67472,-7.04733 -8.5,-7 -6.82528,0.0473 -8.5,7 -8.5,7 l -13,0 c 0.63161,-12.53073 11.36576,-19.67935 21.5,-19.6 z"
        id="rect3810"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="scczccs" />
     <path
-       style="fill:#ffffff;fill-opacity:1;stroke-width:0;stroke-miterlimit:4"
+       style="fill:#2f2f2f;fill-opacity:1;stroke-width:0;stroke-miterlimit:4"
        d="m 43.310069,61.990247 c -7.159395,0.01905 -13.847588,-5.383347 -16.58929,-13.75 l 8,0 c 0,0 1.72575,6.96782 8.55103,6.92049 6.82528,-0.0473 8.44897,-6.92049 8.44897,-6.92049 l 8,0 c -1.783351,8.850973 -9.251314,13.730946 -16.41071,13.75 z"
        id="rect3810-1"
        inkscape:connector-curvature="0"
diff --git a/cmd/drone-server/static/scripts/filters/filter.js b/cmd/drone-server/static/scripts/filters/filter.js
index b9cf15fce..76eb4ee47 100644
--- a/cmd/drone-server/static/scripts/filters/filter.js
+++ b/cmd/drone-server/static/scripts/filters/filter.js
@@ -2,6 +2,15 @@
 
 (function () {
 
+	function trunc() {
+		return function(str) {
+			if (str && str.length > 10) {
+				return str.substr(0, 10);
+			}
+			return str;
+		}
+	}
+
 	/**
 	 * author is a helper function that return the builds
 	 * commit or pull request author.
@@ -53,6 +62,7 @@
 
 	angular
 		.module('drone')
+		.filter('trunc', trunc)
 		.filter('author', author)
 		.filter('message', message)
 		.filter('sha', sha)
diff --git a/cmd/drone-server/static/scripts/views/build.html b/cmd/drone-server/static/scripts/views/build.html
index 3ebb7b7c9..f2afa1eab 100644
--- a/cmd/drone-server/static/scripts/views/build.html
+++ b/cmd/drone-server/static/scripts/views/build.html
@@ -1,14 +1,26 @@
 <header>
-	<a href="/" class="logo"></a>
-	<div class="title"></div>
-	<div class="user">
-		<span>{{ user.login }}</span>
-		<img ng-src="{{ user.gravatar_id | gravatar }}" />
-	</div>
+	<a class="logo float-left" href="/"></a>
+	<a class="menu-item settings float-right" href="/profile"></a>
+	<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
+	<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
+	<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
 </header>
-	<nav>
-		<h1>{{ repo.owner }}<span>{{ repo.name }}</span><span>{{ build.sequence}}</span></h1>
-	</nav>
+
+<header show-nav distance="160" class="dockable transition-fade flex-parent"></header>
+<section class="central-container">
+	<div class="flex-item pane restrict-center contains-cardset">
+		<div class="breadcrumb flex-item truncate">
+					<a ng-href="/{{ repo.full_name }}" class="backarrow"></a>
+					<a ng-href="/{{ repo.full_name }}" class="level">{{ repo.owner }} / {{ repo.name }}</a>
+					<span class="spacer"></span>
+					<a ng-href="/{{ repo.full_name }}" class="level">{{ build.sequence }}</span>
+					<span class="spacer"></span>
+					<span class="level">{{ task.sequence }}</span>
+		</div>
+	</div>
+</section>
+
+
 	<main>
 
 			<section class="commit-section">
@@ -57,7 +69,7 @@
 					</tbody>
 				</table>
 			</section>
-			
+
 			<section>
 				<pre id="term" ng-if="task && task.state !== 'pending'"></pre>
 			</section>
diff --git a/cmd/drone-server/static/scripts/views/builds.html b/cmd/drone-server/static/scripts/views/builds.html
index 1dac5ac17..57cda0817 100644
--- a/cmd/drone-server/static/scripts/views/builds.html
+++ b/cmd/drone-server/static/scripts/views/builds.html
@@ -1,36 +1,44 @@
-<h1>{{ repo.full_name }}</h1>
+<header>
+	<a class="logo float-left" href="/"></a>
+	<a class="menu-item settings float-right" href="/profile"></a>
+	<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
+	<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
+	<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
+</header>
 
-<a href="/">Back</a>
-<a ng-href="/{{ repo.full_name }}/edit">Settings</a>
+<header show-nav distance="160" class="dockable transition-fade flex-parent"></header>
+<section class="central-container">
+	<div class="flex-item pane restrict-center contains-cardset">
+		<div class="breadcrumb flex-item truncate">
+					<a href="/" class="backarrow"></a>
+					<a href="#" class="level">{{ repo.owner }} / {{ repo.name }}</a>
+		</div>
+	</div>
 
-<button ng-click="watch(repo)" ng-if="!repo.starred">Watch</button>
-<button ng-click="unwatch(repo)" ng-if="repo.starred">Unwatch</button>
+	<nav>
+		<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a>
+		<button ng-click="watch(repo)"   ng-if="!repo.starred" class="nav-item star float-right"></button>
+		<button ng-click="unwatch(repo)" ng-if="repo.starred"  class="nav-item unstar float-right"></button>
+	</nav>
 
-<table border="1">
-	<thead>
-		<tr>
-			<th>Number</th>
-			<th>Status</th>
-			<th>Started</th>
-			<th>Duration</th>
-			<th>Type</th>
-			<th>Ref</th>
-			<th>Commit</th>
-			<th>Author</th>
-			<th>Message</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr ng-repeat="build in builds | orderBy:'-sequence'">
-			<td><a ng-href="/{{ repo.full_name }}/{{ build.sequence }}">{{ build.sequence }}</a></td>
-			<td>{{ build.state }}</td>
-			<td>{{ build.started_at | fromNow }}</td>
-			<td>{{ build.duration | toDuration }}</td>
-			<td>{{ build.pull_request ? "pull request" : "push" }}</td>
-			<td>{{ build.ref }}</td>
-			<td>{{ build.sha }}</td>
-			<td>{{ build.author }}</td>
-			<td>{{ build.message }}</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+	<ul class="cardset list">
+		<li ng-repeat="build in builds | orderBy:'-sequence'">
+			<div ng-class="[ 'card', build.state ]">
+				<div class="dataset">
+					<a ng-href="/{{ repo.full_name }}/{{ build.sequence }}"></a>
+					<div class="info-1">
+						<p class="number">{{ build.sequence }}</p>
+					</div>
+					<div class="info-2">
+						<p class="branch-sha truncate">{{ build.branch }} ({{build.sha | trunc }})</p>
+						<p class="author-time truncate">{{ build.author }} &middot {{ build.started_at | fromNow }}</p>
+					</div>
+					<div class="info-3">
+						<p class="commit-message truncate">{{ build.message }}</p>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+
+</section>
diff --git a/cmd/drone-server/static/scripts/views/repos.html b/cmd/drone-server/static/scripts/views/repos.html
index dcfcd3ab3..3c3547aa1 100644
--- a/cmd/drone-server/static/scripts/views/repos.html
+++ b/cmd/drone-server/static/scripts/views/repos.html
@@ -1,4 +1,19 @@
-<h1>Dashboard</h1>
+<header>
+	<a class="logo float-left" href="/"></a>
+	<a class="menu-item settings float-right" href="/profile"></a>
+	<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
+	<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
+	<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
+</header>
+
+<header show-nav distance="160" class="dockable transition-fade flex-parent"></header>
+<section class="central-container">
+	<div class="flex-item pane restrict-center contains-cardset">
+		<div class="breadcrumb flex-item truncate">
+					<a href="#" class="level">Dashboard</a>
+		</div>
+	</div>
+</section>
 
 <a href="/new">New</a>
 <a href="/profile">Settings</a>
diff --git a/cmd/drone-server/static/scripts/views/user.html b/cmd/drone-server/static/scripts/views/user.html
index 5f7e5c5ab..e3bd32b8a 100644
--- a/cmd/drone-server/static/scripts/views/user.html
+++ b/cmd/drone-server/static/scripts/views/user.html
@@ -1,6 +1,21 @@
-<h1>{{ user.login }}</h1>
+<header>
+	<a class="logo float-left" href="/"></a>
+	<a class="menu-item settings float-right" href="/profile"></a>
+	<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
+	<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
+	<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
+</header>
+
+<header show-nav distance="160" class="dockable transition-fade flex-parent"></header>
+<section class="central-container">
+	<div class="flex-item pane restrict-center contains-cardset">
+		<div class="breadcrumb flex-item truncate">
+					<a href="/" class="backarrow"></a>
+					<a href="#" class="level">Profile</a>
+		</div>
+	</div>
+</section>
 
-<a href="/">Back</a>
 
 <dl>
 	<dt>Login</dt>
@@ -54,4 +69,4 @@
 			</td>
 		</tr>
 	</tbody>
-</table>
\ No newline at end of file
+</table>
diff --git a/cmd/drone-server/static/scripts/views/users.html b/cmd/drone-server/static/scripts/views/users.html
index ab8fc7361..9d86fef9f 100644
--- a/cmd/drone-server/static/scripts/views/users.html
+++ b/cmd/drone-server/static/scripts/views/users.html
@@ -1,6 +1,20 @@
-<h1>Users</h1>
+<header>
+	<a class="logo float-left" href="/"></a>
+	<a class="menu-item settings float-right" href="/profile"></a>
+	<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
+	<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
+	<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
+</header>
 
-<a href="/">Back</a>
+<header show-nav distance="160" class="dockable transition-fade flex-parent"></header>
+<section class="central-container">
+	<div class="flex-item pane restrict-center contains-cardset">
+		<div class="breadcrumb flex-item truncate">
+					<a href="/" class="backarrow"></a>
+					<a href="#" class="level">User Management</a>
+		</div>
+	</div>
+</section>
 
 <table border="1">
 	<thead>
@@ -34,4 +48,4 @@
 <form>
 	<input type="text" ng-model="login" />
 	<button ng-click="add(login)">Add</button>
-</form>
\ No newline at end of file
+</form>
diff --git a/cmd/drone-server/static/styles/drone.css b/cmd/drone-server/static/styles/drone.css
index 0b4ae1375..730a01651 100644
--- a/cmd/drone-server/static/styles/drone.css
+++ b/cmd/drone-server/static/styles/drone.css
@@ -1,590 +1,1209 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  vertical-align: baseline;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-}
-a:active,
-a:hover {
-  outline: 0;
-}
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-b,
-strong {
-  font-weight: bold;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sup {
-  top: -0.5em;
-}
-sub {
-  bottom: -0.25em;
-}
-img {
-  border: 0;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-pre {
-  overflow: auto;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-button {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-input {
-  line-height: normal;
-}
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-input[type="search"] {
-  -webkit-appearance: textfield;
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  border: 0;
-  padding: 0;
-}
-textarea {
-  overflow: auto;
-}
-optgroup {
-  font-weight: bold;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-td,
-th {
-  padding: 0;
-}
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-body {
-  font-family: 'Open Sans';
-  font-size: 14px;
-  background: #EEE;
-}
-h1 {
-  flex: 1 1 auto;
-  display: inline;
-  margin: 0px;
-  line-height: 70px;
-  font-size: 22px;
-  font-weight: normal;
-  padding-left: 40px;
-  color: #9E9E9E;
-}
-h1 span {
-  color: #212121;
-}
-h1 span:before {
-  content: "/";
-  margin-left: 5px;
-  margin-right: 5px;
-}
-header {
-  height: 70px;
-  min-height: 70px;
-  max-height: 70px;
-  border-bottom: 1px solid #eeeeee;
-  display: flex;
-}
-header nav {
-  flex: 1 1 auto;
-  display: inline;
-}
-header nav li {
-  display: inline-block;
-  line-height: 70px;
-}
-header menu {
-  flex: 1 1 auto;
-  display: inline;
-  margin: 0px;
-  padding: 0px;
-  padding-right: 20px;
-  text-align: right;
-}
-header menu li {
-  display: inline-block;
-  line-height: 70px;
-}
-header menu li a {
-  border-radius: 999em;
-  padding: 7px 18px;
-  border: 1px solid #E0E0E0;
-  margin-left: 5px;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.44);
-  text-decoration: none;
-}
-header menu li a.primary {
-  border-color: #4CAF50;
-  color: #4CAF50;
-}
-aside {
-  width: 20%;
-  max-width: 20%;
-  min-width: 350px;
-  background: #fafafa;
-  box-shadow: -1px 0 1px -2px rgba(0, 0, 0, 0.9);
-  padding: 20px;
-  box-sizing: border-box;
-}
-aside div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  margin-top: 35px;
-}
-aside div:first-child {
-  margin-top: 25px;
-}
-aside div h3 {
-  border-top: 1px solid rgba(0, 0, 0, 0.44);
-  text-transform: uppercase;
-  line-height: 20px;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.8);
-  display: inline-block;
-  margin: 0px;
-  padding: 10px 0px;
-  margin-bottom: 15px;
-}
-aside ul.branches {
-  color: rgba(0, 0, 0, 0.901961);
-  padding: 0px;
-  margin: 0px;
-}
-aside ul.branches li {
-  list-style: none;
-  vertical-align: middle;
-  height: 30px;
-  margin-bottom: 3px;
-}
-aside ul.branches li:before {
-  content: "\f299";
-  font-family: "Material-Design-Iconic-Font";
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 1px solid #E0E0E0;
-  color: rgba(0, 0, 0, 0.44);
-  vertical-align: middle;
-  margin-right: 10px;
-  text-align: center;
-  line-height: 22px;
-}
-aside ul.branches li.success:before {
-  border-color: #4CAF50;
-  color: #4CAF50;
-}
-aside ul.branches li.failure:before {
-  content: "\f29a";
-  border-color: #F44336;
-  color: #F44336;
-}
-aside ul.users {
-  color: rgba(0, 0, 0, 0.901961);
-  padding: 0px;
-  margin: 0px;
-}
-aside ul.users li {
-  list-style: none;
-  vertical-align: middle;
-  height: 30px;
-  margin-bottom: 3px;
-}
-aside ul.users li img {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  vertical-align: middle;
-  margin-right: 10px;
-}
-article {
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  padding: 40px;
-  padding-left: 80px;
-}
-article section pre {
-  background: #212121;
-  color: #FFF;
-  padding: 50px;
-  font-family: 'Droid Sans Mono';
-  position: relative;
-  line-height: 20px;
-  font-size: 13px;
-  margin: 0px;
-  margin-bottom: 20px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow: hidden;
-  border-bottom-right-radius: 4px;
-}
-.logo {
-  height: 50px;
-  max-height: 50px;
-  line-height: 50px;
-  width: 50px;
-  margin-left: 10px;
-  margin-top: 10px;
-  margin-right: 10px;
-  border-radius: 50%;
-  opacity: 0.7;
-}
-.logo:before {
-  content: '';
-  display: block;
-  height: 50px;
-  background: url("../images/drone_32.svg") no-repeat center center;
-  background-size: 34px;
-}
-header {
-  background: #212121;
-  height: 70px;
-  min-height: 70px;
-  max-height: 70px;
-  display: flex;
-}
-nav {
-  background: #FFF;
-  height: 70px;
-  min-height: 70px;
-  max-height: 70px;
-  display: flex;
-  border-bottom: 1px solid #F5F5F5;
-  border-bottom: 1px solid #EEEEEE;
-}
-.logo {
-  width: 50px;
-  margin-left: 10px;
-  margin-top: 10px;
-  margin-right: 10px;
-  border-radius: 50%;
-  opacity: 0.7;
-}
-.logo:before {
-  content: '';
-  display: block;
-  height: 50px;
-  background: url("../images/logo.svg") no-repeat center center;
-  background-size: 34px;
-}
-.logo:hover {
-  opacity: 1;
-}
-.title {
-  flex: 1 1 auto;
-}
-.user {
-  text-align: right;
-  line-height: 70px;
-}
-.user img {
-  border-radius: 50%;
-  width: 34px;
-  height: 34px;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 20px;
-  margin-left: 15px;
-}
-.user span {
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.8);
-  display: inline-block;
-  vertical-align: middle;
-}
-main {
-  padding: 40px 80px 80px;
-}
-section {
-  margin: 0px auto;
-  max-width: 1000px;
-  background: #FFF;
-  box-sizing: border-box;
-}
-section pre {
-  background: #212121;
-  color: #FFF;
-  padding: 50px;
-  font-family: 'Droid Sans Mono';
-  position: relative;
-  line-height: 20px;
-  font-size: 13px;
-  margin: 0px;
-  margin-bottom: 20px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow: hidden;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.commit-section {
-  display: flex;
-  position: relative;
-  padding-top: 30px;
-  padding-bottom: 30px;
-  padding-left: 30px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  margin-bottom: 20px;
-}
-.commit-section .commit-status {
-  width: 60px;
-  min-width: 60px;
-  max-width: 60px;
-}
-.commit-section .commit-meta {
-  flex: 1 1 auto;
-}
-.commit-section .commit-meta h2 {
-  margin: 0px;
-  padding: 0px;
-  font-weight: normal;
-  font-size: 24px;
-  margin-bottom: 5px;
-  margin-top: 3px;
-}
-.commit-section .commit-meta .octicon {
-  font-weight: normal;
-  font-size: 12px;
-  margin: 0px;
-  margin-top: 20px;
-  color: #757575;
-  display: inline-block;
-  text-align: right;
-  background: #eee;
-  background: #F5F5F5;
-  padding: 8px 18px;
-  padding-left: 15px;
-  color: #9E9E9E;
-}
-.commit-section .commit-meta .octicon:before {
-  margin-right: 10px;
-}
-.commit-section .commit-meta h2 small {
-  color: #757575;
-  margin-left: 10px;
-  font-size: 90%;
-}
-.commit-section .commit-meta h3 {
-  margin: 0px;
-  padding: 0px;
-  font-weight: normal;
-  font-size: 14px;
-  color: #757575;
-}
-.commit-section .commit-meta span {
-  color: #212121;
-}
-.commit-section .commit-meta p {
-  color: #424242;
-  padding: 0px;
-  margin: 0px;
-  font-size: 14px;
-  color: #757575;
-  margin-top: 3px;
-}
-.commit-section .commit-meta p.tag {
-  font-weight: normal;
-  font-size: 12px;
-  margin: 0px;
-  margin-top: 15px;
-  margin-bottom: 10px;
-  color: #757575;
-  display: block;
-  text-align: right;
-  margin-bottom: 5px;
-  float: right;
-  background: #eee;
-  padding: 5px 20px;
-  margin-left: 5px;
-}
-.fab {
-  position: fixed;
-  bottom: 20px;
-  right: 50px;
-  background: rgba(158, 158, 158, 0.75);
-  width: 40px;
-  height: 40px;
-  z-index: 2;
-  border-radius: 50%;
-  opacity: 0.6;
-  cursor: pointer;
-}
-.fab:before {
-  content: "\f297";
-  font-family: 'Material-Design-Iconic-Font';
-  transform: rotate(90%);
-  line-height: 40px;
-  text-align: center;
-  width: 40px;
-  display: block;
-  color: #FFF;
-  font-size: 22px;
-  transform: rotate(-90deg);
-}
-.status {
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  color: #FFF;
-  font-size: 20px;
-  font-family: "Open Sans";
-  font-weight: 600;
-  width: 35px;
-  height: 35px;
-  font-size: 16px;
-}
-.status:before {
-  line-height: 35px;
-  text-align: center;
-  display: block;
-  font-family: 'Material-Design-Iconic-Font';
-}
-.success {
-  background: #4CAF50;
-  background: #FFF;
-  border: 2px solid #4CAF50;
-}
-.success:before {
-  content: "\f023";
-  color: #4CAF50;
-}
-.failure {
-  background: #F44336;
-  background: #FFF;
-  border: 2px solid #F44336;
-}
-.failure:before {
-  content: "\f29a";
-  color: #F44336;
-}
+@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,600,900);
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
+
+/*  RESETS */
+
+    html, body { margin: 0; padding: 0; }
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
+    table { border-collapse: collapse; border-spacing: 0; }
+    ol, ul { list-style: none; }
+    q:before, q:after, blockquote:before, blockquote:after { content: ""; }
+
+    * {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+
+/*  TRANSITIONS & ANIMATIONS */
+
+    .transition-fade {
+      -webkit-transition: all 0s ease-out;
+      -moz-transition: all 0s ease-out;
+      -o-transition: all 0s ease-out;
+      -ms-transition: all 0s ease-out;
+      transition: all 0s ease-out;
+    }
+
+    .show .transition-fade {
+      -webkit-transition: all 0s ease-in;
+      -moz-transition: all 0s ease-in;
+      -o-transition: all 0s ease-in;
+      -ms-transition: all 0s ease-in;
+      transition: all 0s ease-in;
+    }
+
+
+/*  FLEXBOX */
+
+    .flex-parent {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+    }
+
+    .flex-center {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-align-items: center;
+        align-items: center;
+    }
+
+    .flex-item {
+        -webkit-flex: 1 1 auto;
+        -moz-flex: 1 1 auto;
+        -o-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+    }
+
+
+  /*  TABLE MAGIC */
+
+      table {
+          padding: 0;
+          border-collapse: collapse;
+          width: auto;
+          min-height: 100%;
+      }
+
+      tbody {
+        width: 100%;
+      }
+
+      th, td, tr {
+          border: 0;
+          margin: 0;
+          padding-top: 0;
+          padding-bottom: 16px;
+      }
+
+      tr {
+          border-bottom: solid 1px rgba(0,0,0,0.025);
+          cursor: pointer;
+      }
+
+          tr:first-of-type {
+              cursor: default;
+          }
+
+          tr:not(:first-of-type):hover {
+              background-color: rgba(228,241,254,0.2);
+          }
+
+      th {
+          text-align: left;
+          font-weight: 400;
+          font-size: 12px;
+          color: rgba(0,0,0,0.54);
+          text-transform: uppercase;
+          letter-spacing: 0.8px;
+          padding: 16px 24px;
+          height: 59px;
+      }
+
+      td {
+          height: 72px;
+          vertical-align: middle;
+          font-weight: 400;
+          font-size:  14px;
+          color: rgba(0,0,0,0.87);
+          line-height: 150%;
+          padding: 16px 24px;
+      }
+
+        td.type-icon:first-of-type {
+            vertical-align: middle;
+            text-align: center;
+        }
+
+          th:first-of-type, td:first-of-type {
+              padding-left: 32px;
+          }
+
+          th:last-of-type, td:last-of-type {
+              padding-right: 32px;
+          }
+
+      .status {
+          position: relative;
+      }
+
+      .status:before {
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          color: #fff;
+          font-size: 14px;
+          font-family: "Material-Design-Iconic-Font";
+          opacity: 1;
+      }
+
+      .status.success:before {
+        font-size: 20px;
+          content: '\f084';
+          color: #26A65B;
+      }
+
+      .status.failure:before,
+      .status.killed:before,
+      .status.error:before {
+        font-size: 20px;
+          content: '\f082';
+          color: #C0392B;
+          opacity: 0.85;
+      }
+
+
+/*  CARD STUFF */
+
+    ul.cardset {
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        padding: 28px;
+        padding-top: 0;
+        margin-top: -8px;
+    }
+
+    .cardset li {
+        -webkit-flex: 1 1 auto;
+        -moz-flex: 1 1 auto;
+        -o-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+        width: 25%;
+        padding: 0 4px;
+        outline: none;
+        -webkit-appearance: none;
+    }
+
+    .cardset.list li {
+        -webkit-flex: 1 1 100%;
+        -moz-flex: 1 1 100%;
+        -o-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+        flex: 1 1 100%;
+        padding: 4px;
+    }
+
+    .cardset li.dummy {
+
+    }
+
+    .card {
+        width: 100%;
+        height: 260px;
+        background-color: #fff;
+        border-radius: 0;
+        box-shadow: 0 0 1px rgba(0,0,0,0.125);
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+        outline: none;
+        -webkit-appearance: none;
+    }
+
+        .card a {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            -webkit-transition: all 0.15s ease;
+            -moz-transition: all 0.15s ease;
+            -o-transition: all 0.15s ease;
+            -ms-transition: all 0.15s ease;
+            transition: all 0.15s ease;
+        }
+
+            .card a:hover {
+                background-color: rgba(52,152,219,0.1);
+            }
+
+        .card .top {
+            padding: 16px;
+            background-color: transparent;
+        }
+
+        .card .bottom {
+            padding: 16px;
+            padding-top: 64px;
+            height: 220px;
+            background-color: transparent;
+        }
+
+        .card .time-ran {
+            font-size: 12px;
+            line-height: 135%;
+            font-weight: 400;
+            color: #9a9a9a;
+            float: left;
+        }
+
+            .card.success .time-ran {
+                color: #26A65B
+            }
+
+
+            .card.killed .time-ran,
+            .card.error .time-ran,
+            .card.failure .time-ran {
+                color: #C0392B
+            }
+
+        .card .time-duration {
+            font-size: 12px;
+            line-height: 135%;
+            font-weight: 300;
+            color: #7c7c7c;
+            float: left;
+            clear: left;
+        }
+
+        .card .status {
+            float: right;
+        }
+
+        .card .title {
+            font-size: 16px;
+            line-height: 135%;
+            font-weight: 400;
+            color: #cfcfcf;
+            margin-bottom: 16px;
+        }
+
+        .card .title.upper {
+            font-size: 13px;
+            color: #9a9a9a;
+            margin-bottom: 2px;
+        }
+
+        .card .title.lower {
+            color: dfdfdf;
+        }
+
+        .card .author {
+            font-size: 12px;
+            line-height: 135%;
+            font-weight: 400;
+            margin-bottom: 16px;
+            color: #afafaf;
+            position: absolute;
+            bottom: 0;
+        }
+
+        .card .branch {
+            position: absolute;
+            bottom: 33px;
+            left: auto;
+            display: inline-block;
+            font-size: 12px;
+            line-height: 135%;
+            font-weight: 300;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 4px;
+            color: #eee;
+            padding: 1px 4px;
+            background-color: #7a7a7a
+        }
+
+        .card .sha {
+            font-size: 11px;
+            line-height: 135%;
+            font-weight: 300;
+            text-transform: uppercase;
+            margin-bottom: 16px;
+            color: #8a8a8a;
+        }
+
+
+        /*  LIST */
+
+        .cardset.list {
+            margin-top: -8px;
+        }
+
+        .cardset.list li {
+            padding: 0 4px;
+        }
+
+        .list .card {
+            background-color: #fff;
+        }
+
+            .list .card a:hover {
+                background-color: rgba(255,255,255,0.05);
+            }
+
+        .list .card .meta {
+            width: 120px;
+            margin-right: 32px;
+            float: left;
+        }
+
+        .list .card .build-details {
+            width: 120px;
+            margin-right: 32px;
+            float: left;
+        }
+
+        .list .card .details {
+            width: auto;
+            padding-right: 50px;
+            overflow: hidden;
+        }
+
+        .list .card .push-details {
+            font-size: 13px;
+            line-height: 135%;
+            font-weight: 300;
+            color: #7a7a7a;
+            margin-bottom: 0;
+        }
+
+            .list .card p span {
+                background-color: #8a8a8a;
+                padding: 1px 4px;
+                margin: 0 4px;
+                color: #000;
+                font-weight: 400;
+                letter-spacing: 0.5px;
+                font-size: 10px;
+            }
+
+        .list .card {
+            height: auto;
+            padding-bottom: 0;
+            min-height: 70px;
+        }
+
+        .list .card p {
+            margin-bottom: 2px;
+            font-size: 13px;
+            font-weight: 300;
+        }
+
+        .list .card .build-number {
+            display: block;
+            width: 50px;
+            margin-right: 32px;
+            float: left;
+        }
+
+            .list .card .build-number p {
+                display: inline-block;
+                font-size: 16px;
+                line-height: 135%;
+                font-weight: 300;
+                margin-bottom: 0;
+                color: #fff;
+                padding: 1px 6px;
+                border-radius: 5px;
+                min-width: 20px;
+
+            }
+
+            .success .build-number p {
+                background-color: #26A65B;
+            }
+
+            .killed .build-number p,
+            .error .build-number p,
+            .failed .build-number p {
+                background-color: #C0392B;
+            }
+
+        .list .card .message {
+            font-size: 14px;
+            line-height: 135%;
+            font-weight: 300;
+            color: #cfcfcf;
+            margin-bottom: 8px;
+            letter-spacing: 0.35px;
+        }
+
+        .list .card .author {
+            position: static;
+            font-size: 20px;
+            line-height: 135%;
+            font-weight: 400;
+            clear: left;
+            color: #3f3f3f;
+            margin-bottom: 8px;
+        }
+
+        .list .card .time-ran {
+            font-size: 13px;
+            line-height: 140%;
+            font-weight: 300;
+            color: #7a7a7a;
+            margin-bottom: 0;
+        }
+
+        /*  HALF LIST */
+
+        .cardset.list.commit-header {
+            padding-bottom: 0;
+            margin-bottom: 0;
+        }
+
+        .cardset.list.commit-header .card {
+            min-height: 200px;
+            background-color: #282828;
+            margin-bottom: 0;
+            cursor: default;
+            border-bottom: none;
+        }
+
+        .cardset.list.half-list {
+            margin-top: 4px;
+        }
+
+        .cardset.list.half-list li {
+            -webkit-flex: 1 1 50%;
+            -moz-flex: 1 1 50%;
+            -o-flex: 1 1 50%;
+            -ms-flex: 1 1 50%;
+            flex: 1 1 50%;
+            padding: 4px;
+            margin-bottom: 0;
+        }
+
+        .cardset.list.half-list .card {
+            height: 80px;
+        }
+
+        .cardset.list.half-list .status {
+            float: left;
+            width: 50px;
+        }
+
+        .cardset.list.half-list .details {
+            padding-left: 0;
+        }
+
+
+    .dummy .card {
+        background-color: rgba(255,255,255,0.05);
+        box-shadow: none;
+        cursor: default;
+    }
+
+    .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card {
+        display: none;
+    }
+
+    .half-list .dummy .card {
+        display: none !important;
+    }
+
+    /*  OUTPUT */
+
+        .card.output {
+            background-color: rgba(0,0,0,0.5);
+            padding: 16px;
+            margin-top: 4px;
+        }
+
+        pre {
+            font-family: "Droid Sans Mono","Roboto","Arial";
+            font-size: 14px;
+            color: #cecece;
+            line-height: 175%;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+    /*  DATASET */
+
+        .card .dataset {
+            display: -webkit-box;
+            display: -moz-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-flex-flow:row wrap;
+            flex-flow:row wrap;
+            padding: 16px 0;
+            position: relative;
+        }
+
+        .card .dataset a {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            border-radius: 0;
+        }
+
+        .card .dataset a:hover {
+            background-color: rgba(52,152,219,0.05);
+        }
+
+        .card .dataset > div {
+            padding: 0 16px;
+            padding-bottom: 0;
+            -webkit-box-flex: 1 1 auto;
+            -moz-box-flex: 1 1 auto;
+            -webkit-flex: 1 1 auto;
+            -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+        }
+
+        .card .dataset p {
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 135%;
+        }
+
+        .card .dataset > div:nth-of-type(1) {
+            -webkit-box-flex: 0 0 128px;
+            -moz-box-flex: 0 0 128px;
+            -webkit-flex: 0 0 128px;
+            -ms-flex: 0 0 128px;
+            flex: 0 0 128px;
+        }
+
+        .card .dataset > div:nth-of-type(2) {
+
+        }
+
+        .card .dataset > div:nth-of-type(3) {
+            text-align: left;
+            -webkit-box-flex: 1 1 300px;
+            -moz-box-flex: 1 1 300px;
+            -webkit-flex: 1 1 300px;
+            -ms-flex: 1 1 300px;
+            flex: 1 1 300px;
+            margin-left: 128px;
+        }
+
+        .card .dataset .number {
+            padding: 5px;
+            display: inline-block;
+            width: 60px;
+            border-radius: 5px;
+            color: #fafafa;
+            font-size: 16px;
+            text-align: center;
+        }
+
+            .card.success .dataset .number {
+                background-color: #26A65B;
+            }
+
+            .card.error .dataset .number,
+            .card.killed .dataset .number,
+            .card.failure .dataset .number {
+                background-color: #CF000F;
+            }
+
+        .card .dataset .branch-sha {
+            font-size: 17px
+        }
+
+        .card .dataset .author-time {
+            font-size: 14px;
+            font-weight: 400;
+            color: #bababa;
+        }
+
+        .card .dataset .commit-message {
+            font-size: 14px;
+            font-weight: 400;
+            color: #7f7f7f;
+        }
+
+/*  STRUCTURE */
+
+    html {
+        margin: 0;
+        padding: 0;
+        font-family: "Roboto", "Arial";
+        font-weight: 300;
+        font-size: 16px;
+        height: 100%;
+
+    }
+
+    body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        background: #fafafa;
+        padding-bottom: 72px;
+    }
+
+    .truncate {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-y: hidden;
+    }
+
+    .float-left {
+        float: left;
+    }
+
+    .float-right {
+        float: right;
+    }
+
+    #container {
+        display: inline;
+    }
+
+    footer {
+        display: none;
+        min-height: 128px;
+        background-color: #5f5f5f;
+    }
+
+    section {
+        display: block;
+        width: 100%;
+        padding: 16px 74px;
+    }
+
+        section.central-container {
+            height: auto;
+            min-height: 100%;
+            margin-top: -72px;
+            /*margin-bottom: 72px;*/
+            position: relative;
+            padding-top: 0;
+        }
+
+        section:nth-of-type(even) {
+
+        }
+
+        section:last-of-type {
+            padding-bottom: 72px;
+        }
+
+        .show section:first-of-type {
+            margin-top: 0px;
+        }
+
+    .pane {
+        background-color: transparent;
+        margin: 12px;
+        /*box-shadow: 0 0 1px rgba(0,0,0,0.05);*/
+        /*border-radius: 3px;*/
+        overflow: hidden;
+        height: auto;
+        min-height: 100%;
+        /*padding-bottom: 88px;*/
+        box-sizing: content-box;
+    }
+
+    .pane.contains-cardset {
+        background-color: #fafafa;
+    }
+
+    .pane.fixed {
+        -webkit-flex: 0 0 400px;
+        -moz-flex: 0 0 400px;
+        -o-flex: 0 0 400px;
+        -ms-flex: 0 0 400px;
+        flex: 0 0 400px;
+    }
+
+    .pane.restrict-center {
+        max-width: 1100px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    header {
+        height: 64px;
+        width: 100%;
+        background: #fafafa;
+        padding: 6px 24px;
+        line-height: 72px;
+        overflow: hidden;
+    }
+
+    .dockable {
+        background-color: #fafafa;
+    }
+
+    .show .dockable {
+        position: fixed;
+        z-index: 100;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        margin-top: 0;
+        background-color: rgba(0,0,0,0.65);
+        /*box-shadow: 0 1px 0 0 rgba(0,0,0,0.025);*/
+    }
+
+      nav {
+          width: 100%;
+          height: 60px;
+          background-color: transparent;
+          /*box-shadow: 0 1px 0 0 rgba(0,0,0,0.075); */
+          /*border-bottom: solid 1px rgba(0,0,0,0.065);*/
+          padding: 0 32px;
+          overflow: hidden;
+      }
+
+          .nav-item {
+              margin-right: 0;
+              margin-left: 16px;
+              height: auto;
+              opacity: 0.65;
+              cursor: pointer;
+          }
+
+          .nav-item.float-left {
+              margin-left: 0;
+              margin-right: 10px;
+          }
+
+
+          .nav-item:hover {
+              opacity: 1;
+          }
+
+          .nav-item:after,
+          .nav-item:before {
+              font-family: "Material-Design-Iconic-Font";
+              color: #3f3f3f;
+          }
+
+          .nav-item {
+              font-size: 20px;
+              line-height: 20px;
+              padding: 19px 0;
+              text-decoration:none;
+          }
+
+          .nav-item.settings:before {
+              font-size: 20px;
+              content: '\f060';
+          }
+
+
+          .nav-item.unstar,
+          .nav-item.star {
+            font-size:14px;
+            background:transparent;
+            line-height:20px;
+          }
+
+          .nav-item.star:after {
+            font-size: 20px;
+            content: "\f2e7";
+          }
+          .nav-item.unstar:after {
+            font-size: 20px;
+            content: "\f2e5";
+          }
+
+          input.nav-item {
+              position: relative;
+              height: 59px;
+              width: 170px;
+              display: block;
+              background-color: transparent;
+              border: none;
+              font-weight: 400;
+              font-size: 15px;
+              color: #1c1c1c;
+              letter-spacing: 0.2px;
+              font-family: "Roboto", Arial;
+              outline: none;
+              -webkit-appearance: none;
+              opacity: 1;
+              padding-top: 20px;
+              cursor: text;
+          }
+
+          .nav-item.search:before {
+              font-size: 22px;
+              content: '\f05f';
+              opacity: 1 !important;
+              color: #2f2f2f;
+          }
+
+          .nav-item.search {
+              color: #2f2f2f;
+              opacity: 1 !important;
+              cursor: default;
+          }
+
+      .title {
+          font-weight: 400;
+          font-size: 16px;
+          color: rgba(0,0,0,0.65);
+          letter-spacing: 0.2px;
+          line-height: 60px;
+      }
+
+      header .title {
+        flex: 1 1 auto;
+      }
+
+      header .user {
+        text-align: right;
+        line-height: 70px;
+      }
+
+      header .user img {
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 22px;
+        margin-left: 15px;
+      }
+
+      header .user span {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.8);
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .logo, .menu-item {
+          height: 40px;
+          width: auto;
+          margin: 7px 16px;
+          opacity: 0.8;
+          display: block;
+          cursor: pointer;
+          position: relative;
+          -webkit-transition: all 0.25s ease;
+          -moz-transition: all 0.25s ease;
+          -o-transition: all 0.25s ease;
+          -ms-transition: all 0.25s ease;
+          transition: all 0.25s ease;
+          text-decoration:none;
+      }
+
+      .logo {
+        margin-left: 0;
+      }
+
+        .logo:hover {
+            opacity: 1;
+        }
+
+        .logo:before {
+            content: '';
+            display: block;
+            height: 100%;
+            width: 50px;
+            background: url("/static/images/logo.svg") no-repeat left center;
+            background-size: 60%;
+            -webkit-filter: contrast(150%);
+            filter: contrast(100%);
+        }
+
+        .logo:after {
+            display: none;
+            position: absolute;
+            top: 50%;
+            margin-top: -10px;
+            left: 43px;
+            content: 'Drone';
+            height: 100%;
+            line-height: 100%;
+            font-size: 20px;
+            letter-spacing: 0.5px;
+            color: #fff;
+            opacity: 1;
+            font-weight: 400;
+        }
+
+        .menu-item {
+            margin-right: 0;
+            height: auto;
+            opacity: 0.65;
+        }
+
+        .menu-item:hover {
+            opacity: 1;
+        }
+
+        .menu-item:before {
+            font-family: "Material-Design-Iconic-Font";
+            color: #2f2f2f;
+        }
+
+        img.menu-item {
+            border-radius: 50%;
+            height: 28px;
+            width: 28px;
+            margin: 18px 0 18px 7px;
+            display: block;
+        }
+
+        .menu-item {
+            font-size: 20px;
+            line-height: 20px;
+            padding: 10px 0;
+        }
+
+        .menu-item.settings:before {
+            font-size: 20px;
+            content: "\f060";
+        }
+
+        .menu-item.users:before {
+            font-size: 20px;
+            content: "\f006";
+        }
+
+        .menu-item.help:before {
+            font-size: 20px;
+            content: '\f033';
+        }
+
+        .menu-item.plugins:before {
+            font-size: 23px;
+            content: '\f292';
+        }
+
+        .menu-item.user-name {
+            height: 50px;
+            font-size: 14px;
+            line-height: 14px;
+            letter-spacing: 0.5px;
+            color: #3c3c3c;
+            font-weight: 400;
+            margin: 0;
+            padding: 20px 0 18px 0;
+        }
+
+
+
+
+    .subnav {
+      background:rgba(255,255,255,0.8);
+      padding:0px 25px;
+      height:70px;
+      position:relative;
+    }
+
+      .subnav .icon {
+        display:inline-block;
+        display: block;
+        line-height:70px;
+        text-decoration:none;
+        font-size:22px;
+        color:#999;
+        margin-left:10px;
+      }
+
+        .subnav .icon.icon-settings:before {
+          content: "\f060";
+          font-family: "Material-Design-Iconic-Font";
+        }
+
+      .subnav .menu {
+        position: absolute;
+        top: 0px;
+        right: 25px;
+      }
+
+    .breadcrumb {
+        padding: 0;
+        height: 60px;
+        line-height: 60px;
+        color: #2f2f2f;
+        position: absolute;
+        top: -64px;
+        left: auto;
+    }
+
+    .show .breadcrumb {
+        position: fixed;
+        top: 3px;
+        z-index: 200;
+    }
+
+      .breadcrumb a,
+      .breadcrumb span {
+          height: 60px;
+          line-height: 60px;
+          position: relative;
+          padding-right: 4px;
+          padding-left: 4px;
+          text-decoration:none;
+      }
+
+      .breadcrumb .level {
+          cursor: pointer;
+          letter-spacing: 0.35px;
+          color: #2a2a2a;
+          font-size: 18px;
+          font-weight: 400;
+      }
+
+      .breadcrumb :before {
+          position: absolute;
+          top: -21px;
+          left: 0;
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          color: #3a3a3a;
+          font-size: 14px;
+          font-family: "Material-Design-Iconic-Font";
+          opacity: 0.75;
+      }
+
+      .breadcrumb .backarrow {
+          margin-right: 18px;
+          margin-top: -1px;
+      }
+
+      .breadcrumb .backarrow:before {
+          content: "\f297";
+          font-size: 20px;
+      }
+
+      .breadcrumb .spacer {
+          padding-right: 10px;
+          margin-right: 5px;
+      }
+
+      .breadcrumb .spacer:before {
+          content: "\f29c";
+          font-size: 20px;
+      }
+
+      .show .breadcrumb *, .show .breadcrumb *:before, .show .lower-items *, .show .lower-items *:before {
+          font-weight: 400;
+          color: #fafafa !important;
+      }
+
+      .test {
+          position: absolute;
+          top: -72px;
+          height: 72px;
+          line-height: 72px;
+      }
+
+      .test span {
+        display: block;
+          color: #efefef;
+          font-weight: 400;
+          font-size: 1.1rem;
+          margin-top: 2px;
+          letter-spacing: 0.025rem;
+      }
+
+      /*.breadcrumb span {
+        display:inline-block;
+        font-size: 20px;
+        vertical-align: middle;
+        color: #efefef;
+        font-weight: 300;
+      }
+
+      .breadcrumb a {
+        display:inline-block;
+        vertical-align:middle;
+        text-decoration:none;
+        font-size: 18px;
+        color: #cfcfcf;
+        font-weight: 300;
+        line-height: 70px;
+      }
+      .breadcrumb span.spacer:after {
+        font-family: "Material-Design-Iconic-Font";
+        content: "\f29c";
+        display:inline-block;
+        vertical-align:middle;
+        opacity:0.3;
+        line-height:70px;
+      }
+
+      .breadcrumb a.icon-home {
+        display:inline-block;
+        margin-left:0px;
+        margin-right:10px;
+        margin-left:-2px;
+      }
+      .breadcrumb a.icon-home:after {
+        font-family: "Material-Design-Iconic-Font";
+        display:inline-block;
+        vertical-align:middle;
+        opacity:0.3;
+        line-height:70px;
+        content: "\f297";
+        font-size:26px;
+      }
+    */
+
+
+    article {
+      padding: 30px 20px;
+    }
+
+      article section {
+        margin:0px auto;
+        max-width:960px;
+        padding: 20px;
+        background: #FFF;
+        margin-bottom:30px;
+      }
+
+
+  /*  INFO PANE */
+
+      .banner {
+          height: 73px;
+          width: 100%;
+          background-color: #89C4F4;
+          position: relative;
+      }
+
+      .banner .badge {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          margin-left: -30px;
+          margin-bottom: -30px;
+          border-radius: 50%;
+          width: 60px;
+          height: 60px;
+          background-color: #fafafa;
+          border: solid 3px #fff;
+      }
+
+      .badge .status:before {
+        position: absolute;
+        left: 50%;
+        margin-left: -20px;
+        top: 50%;
+        margin-top: -20px;
+        font-size: 40px;
+      }