Merge lp:~stephen-stewart/snapweb/bem-html-css-for-great-justice into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

refactor CSS to BEM style, remove some uneccessary views as a result

[John Lenton (chipaca)]

TIL about BEM.

review: Approve

=== modified file 'www/gulpfile.js'
--- www/gulpfile.js	2015-04-30 14:09:21 +0000
+++ www/gulpfile.js	2015-05-05 15:23:39 +0000
@@ -15,7 +15,6 @@
 var uglify = require('gulp-uglify');
 var watchify = require('watchify');
 
-
 gulp.task('js:build', ['js:clean', 'js:lint'], function() {
   return createBundler();
 });
@@ -72,7 +71,7 @@
 // Styles
 
 gulp.task('styles', ['styles:clean'], function() {
-  return gulp.src(['src/css/**/*.css'])
+  return gulp.src(['node_modules/normalize.css/normalize.css', 'src/css/**/*.css'])
   .pipe(csso())
   .pipe(autoprefixer())
   .pipe(concat('webdm.css'))
 
=== modified file 'www/package.json'
--- www/package.json	2015-04-23 13:11:59 +0000
+++ www/package.json	2015-05-05 15:23:39 +0000
@@ -36,6 +36,7 @@
     "lodash": "~3.3.1",
     "vinyl-buffer": "~1.0.0",
     "vinyl-source-stream": "~1.1.0",
-    "watchify": "~3.1.2"
+    "watchify": "~3.1.2",
+    "normalize.css": "^3.0.3"
   }
 }
 
=== removed file 'www/src/css/app-details.css'
--- www/src/css/app-details.css	2015-04-29 16:15:23 +0000
+++ www/src/css/app-details.css	1970-01-01 00:00:00 +0000
@@ -1,107 +0,0 @@
-.app-details.row-hero {
-    background: #fff;
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.15);
-    padding: 20px 10px 0;
-}
-
-.app__icon {
-    border-radius: 14px;
-    height: 96px;
-    width: 96px;
-    margin-bottom: 20px;
-    vertical-align: top;
-    display: inline-block;
-    margin-right: 1em;
-}
-
-.app__details {
-    display: inline-block;
-    margin-top: -10px;
-}
-
-.app__details-title {
-    color: #333;
-    font-size: 2.8125em;
-    margin-bottom: 0;
-    display: inline-block;
-}
-
-.app__details-list {
-    margin-left: 0;
-}
-
-.app__details-list li {
-    display: inline;
-    list-style: ;
-}
-
-.app__details-list li:after {
-    color: #888;
-    content: "•";
-    vertical-align: middle;
-    margin: 0 5px 0 10px;
-}
-
-.app__details-list li:last-of-type:after {
-    content: "";
-}
-
-.row.settings,
-.row.details,
-.row.reviews {
-    background: transparent;
-}
-
-.row.app__details-nav {
-    padding: 15px;
-}
-
-.app__details-title--smaller {
-    font-size: 2.5em;
-}
-
-.app__details-nav .inline-icons li {
-    margin-bottom: 0;
-}
-
-.app__details-nav a:link,
-.app__details-nav a:visited {
-    box-sizing: border-box;
-    color: #333;
-    border-bottom: 2px solid transparent;
-    padding: 15px 0;
-}
-
-@media only screen and (min-width: 768px) {
-    .app__details-nav a:link,
-    .app__details-nav a:visited {
-        padding: 20px;
-    }
-    .row.app__details-nav {
-        padding: 20px;
-    }
-}
-
-.app__details-nav a:hover {
-    color: #dd4814;
-    text-decoration: none;
-}
-
-.app__details-nav a.active {
-    border-bottom: 2px solid #dd4814;
-}
-
-.app__details-screenshots .inline-icons img {
-    max-width: none;
-    max-height: none;
-    width: 100%;
-}
-
-.app__details-screenshots {
-    margin-top: 20px;
-}
-
-.error-message {
-    font-size:smaller;
-    color:#DF382C;
-}
 
=== removed file 'www/src/css/app-list.css'
--- www/src/css/app-list.css	2015-04-14 19:38:06 +0000
+++ www/src/css/app-list.css	1970-01-01 00:00:00 +0000
@@ -1,55 +0,0 @@
-.icon--get-apps {
-    margin: 0 2em;
-}
-.header--get-apps {
-    float: left;
-}
-.icon--app-icon {
-    width: 100%;
-    box-sizing: border-box;
-    border: 5px solid #EFEFEF;
-    border-radius: 20px;
-}
-.icon--app-icon:hover {
-    background: #efefef;
-}
-.list--apps {
-    list-style-type: none;
-    margin: 0;
-    overflow: hidden;
-}
-.list--apps .three-col,
-.list--apps .two-col {
-    width: 48.9362%;
-    margin-right: 0;
-}
-@media only screen and (min-width: 768px) {
-    .list--apps .three-col {
-        width: 23.3%;
-        margin-right: 2.12766%;
-    }
-    .list--apps .two-col {
-        width: 14.8936%;
-        margin-right: 2.12766%;
-    }
-}
-.label--app-name {
-    font-weight: 400;
-    text-align: center;
-    display: block;
-    cursor: pointer;
-    font-size: 1em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.link--app,
-.link--app:link,
-.link--app:hover,
-.link--app:visited {
-    color: #333333;
-}
-
-.list--apps .three-col:nth-of-type(4n + 0) {
-  margin-right:0;
-}
 
=== added file 'www/src/css/banner.css'
--- www/src/css/banner.css	1970-01-01 00:00:00 +0000
+++ www/src/css/banner.css	2015-05-05 15:23:39 +0000
@@ -0,0 +1,120 @@
+.b-banner {
+  display:flex;
+  align-items:center;
+  background-color:#202020;
+  color:#efefef;
+  line-height:20px;
+}
+
+.b-banner img {
+  display:block;
+}
+
+.b-banner a {
+  text-decoration:none;
+  color:#fff;
+  display:block;
+}
+
+.b-banner a.active {
+}
+
+.b-banner__brand a {
+  display: flex;
+  align-items:center;
+  padding:15px 2em 15px 15px;
+}
+
+.b-banner__brand img {
+  margin:0 15px 0 0;
+}
+
+.b-banner__search {
+  flex:1;
+}
+
+.b-banner__form {
+  display:flex;
+}
+
+.b-banner__search input[type=search] {
+  width:50%;
+  border:none;
+  height:30px;
+  line-height:20px;
+  padding:15px 25px 15px 15px;
+  background-color:#333;
+}
+
+.b-banner__search input[type=search]:focus {
+  outline:0;
+}
+
+.b-banner__submit {
+  display:block;
+  border:0;
+  height:60px;
+  width:60px;
+  background: #333 url(/public/images/search.svg) 50% 50% no-repeat;
+  background-size:20px;
+  cursor:pointer;
+}
+
+.b-banner__submit:active, 
+.b-banner__submit:focus {
+  outline:0;
+}
+
+.b-banner__submit:hover {
+  background-color:#dd4814;
+}
+
+.b-banner__nav-item {
+  border-right:1px solid #333;
+}
+
+.b-banner__nav-item--active {
+  position:relative;
+}
+
+.b-banner__nav-item--active::before {
+  position:absolute;
+  content:'';
+  background:#dd4814;
+  bottom:0;
+  left:-1px;
+  right:-1px;
+  height:3px;
+}
+
+.b-banner__primary-nav .b-banner__nav-item a {
+  white-space: nowrap;
+  padding:20px 2em;
+}
+
+.b-banner__primary-nav .b-banner__nav-item:hover {
+  background-color:#dd4814;
+}
+
+.b-banner__secondary-nav {
+  margin-left:auto;
+}
+
+.b-banner__secondary-nav .b-banner__nav-item:last-child {
+  border-right:none;
+} 
+
+.b-banner__secondary-nav .b-banner__nav-item a {
+  padding: 15px;
+}
+
+.b-banner__secondary-nav .b-banner__nav-item svg {
+  display:block;
+  height:30px;
+  width:30px;
+}
+
+.b-banner__secondary-nav .b-banner__nav-item:hover {
+  background-color:#dd4814;
+}
+
 
=== added file 'www/src/css/base.css'
--- www/src/css/base.css	1970-01-01 00:00:00 +0000
+++ www/src/css/base.css	2015-05-05 15:23:39 +0000
@@ -0,0 +1,25 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html, body {
+  font: normal 300 15px/1.4 'Ubuntu', 'Arial', 'libra sans', sans-serif;
+  background-color:white;
+  color:#333;
+}
+
+body {
+  background: url('../images/image-background-paper.png') repeat-y fixed 50% 0 #f7f7f7;
+}
+
+a {
+  color:#dd4814;
+}
+
+h1 {
+  font-weight:300;
+}
 
=== removed file 'www/src/css/base.css'
--- www/src/css/base.css	2015-03-26 13:05:32 +0000
+++ www/src/css/base.css	1970-01-01 00:00:00 +0000
@@ -1,118 +0,0 @@
-html {
-  box-sizing: border-box;
-}
-
-html, body {
-  font-family: Ubuntu, Arial, 'libra sans', sans-serif;
-  background-color:white;
-  color:#333;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-a {
-  color:#dd4814;
-}
-
-.cof {
-  width:27px;
-  height:27px;
-}
-
-.pkg {
-  margin-bottom: 1em;
-  padding: 1em 1em 1em 133px;
-  position:relative;
-}
-
-.services-pkg p, .pkg p, .about p {
-  margin:0;
-}
-
-.pkg-img {
-  width: 40px;
-}
-
-.pkg-publisher {
-  font-size:11px;
-  text-transform:uppercase;
-  color:#aaa;
-}
-
-.pkg-name {
-  font-size:30px;
-}
-
-.pkg-show {
-  color:white;
-  background-color:#dd4814;
-  font-size:11px;
-  text-transform:uppercase;
-  padding:4px 1em;
-  display:inline-block;
-  vertical-align:middle;
-  margin-left:1em;
-  border-radius:3px;
-  text-decoration:none;
-}
-
-.pkg-show.hide {
-    display:none;
-}
-
-h1, h2, h3, h4 {
-  margin:0;
-  font-weight:300;
-}
-
-.install {
-  border: 1px solid #FFF;
-  background: #eee;
-  padding: 0 1em;
-  border-radius: 3px;
-  margin: 1em 0;
-}
-
-fieldset {
-  margin:0;
-  padding:0;
-  border:0;
-}
-
-.services {
-  margin-top:1em;
-}
-
-.services h2 {
-  font-size:18px;
-  margin-bottom:0.6em;
-}
-
-.service-row {
-  display:flex;
-  padding:1em;
-  border-top:1px solid #ddd;
-  border-bottom:1px solid #ddd;
-}
-.service-row + .service-row {
-  border-top:none;
-}
-
-.service-row::nth-of-type(2) {
-  background: #eee;
-}
-
-.service-name {
-  flex:2;
-}
-
-.service-action {
-  flex:1;
-}
-
-.service-action .switch {
-  margin:0;
-}
-
 
=== added file 'www/src/css/install.css'
--- www/src/css/install.css	1970-01-01 00:00:00 +0000
+++ www/src/css/install.css	2015-05-05 15:23:39 +0000
@@ -0,0 +1,57 @@
+.b-installer {
+  max-width:300px;
+}
+
+.b-installer__button {
+  background-color: #dd4814;
+  border-radius:4px;
+  color:#fff;
+  cursor:pointer;
+  font-weight:400;
+  overflow: hidden;
+  padding:8px 2em;
+  position:relative;
+  text-align:center;
+  text-overflow: ellipsis;
+  transition: background-color 0.3s;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.b-installer--uninstall .b-installer__button {
+  background-color:#ccc;
+  color:#fff;
+  font-weight:300;
+}
+
+.b-installer--thinking .b-installer__button {
+  cursor:progress;
+}
+
+.b-installer__progress {
+  background: white;
+  border-radius:10px;
+  border:1px solid #dd4814;
+  bottom:3px;
+  box-sizing:border-box;
+  display:none;
+  height:5px;
+  left:8px;
+  margin:0;
+  padding:0;
+  position:absolute;
+  right:8px;
+}
+
+.b-installer__value {
+  background-color:rgba(221, 72, 20, 1);
+  bottom:0;
+  left:0;
+  position:absolute;
+  right:100%;
+  top:0;
+}
+
+.b-installer--thinking .b-installer__progress {
+  display:block;
+}
 
=== added file 'www/src/css/layout.css'
--- www/src/css/layout.css	1970-01-01 00:00:00 +0000
+++ www/src/css/layout.css	2015-05-05 15:23:39 +0000
@@ -0,0 +1,29 @@
+.b-layout {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.b-layout__banner {
+}
+
+.b-layout__main {
+  flex: 1;
+  padding:0 3em;
+}
+
+.b-layout__main:empty {
+  opacity:0.5;
+  background:transparent url("/public/images/default-package-icon.svg") 50% 50% no-repeat;
+}
+
+.b-layout__main:empty + .b-layout__footer {
+  display:none;
+}
+
+.b-layout__footer {
+  padding:2em 0;
+  text-align:center;
+  font-size:12px;
+  color:#999;
+}
 
=== removed file 'www/src/css/layout.css'
--- www/src/css/layout.css	2015-04-13 14:10:56 +0000
+++ www/src/css/layout.css	1970-01-01 00:00:00 +0000
@@ -1,167 +0,0 @@
-html, body {
-    height: 100%;
-    margin:0;
-}
-
-.layout-nav-primary .icon {
-    padding: 1em 1em 1em 3em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border-bottom: 1px solid #444;
-    cursor:pointer;
-}
-
-.layout-app-nav-primary {
-    position: fixed;
-    width: 120px;
-    background-color: #444;
-    top: 54px;
-    bottom: 0;
-    left: 180px;
-    color:#eee;
-}
-
-.layout-app-nav-primary .icon {
-    padding: 0.6em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border-bottom: 1px solid #333;
-    text-transform:uppercase;
-    font-size:12px;
-    cursor:pointer;
-}
-
-.layout-app-nav-primary +
-.layout-content {
-    margin-left:120px;
-}
-
-header {
-    width:100%;
-    background-color:#262626;
-    position:fixed;
-    top:0;
-    z-index:100000;
-}
-
-.header-brand {
-    display:flex;
-    padding:16px 0 0 16px;
-    font-size:18px;
-    color:white;
-    text-decoration:none;
-    color:white;
-}
-
-.header-brand .logo {
-    flex:0 0 36px;
-}
-
-.header-brand .logotype {
-    display: none;
-    margin-right: 1.3em;
-    padding-top: 3px;
-    flex:1;
-}
-@media only screen and (min-width: 768px) {
-    .header-brand .logotype {
-        display: block;
-    }
-}
-
-header.banner .nav-primary ul.layout-nav-primary {
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-header form.search-form input[type="search"] {
-    color: #fff;
-    margin-left: 0;
-    width: 100%;
-    transition: width 0.3s;
-    font-size: 14px;
-}
-
-@media only screen and (min-width: 768px) {
-    header form.search-form input[type="search"] {
-        width: 90%;
-    }
-}
-
-header.banner nav.nav-primary ul li a.settings-link:link {
-    padding-top: 16px;
-    padding-bottom: 8px;
-}
-
-header.banner .close {
-    position: absolute;
-    left: 15px;
-    top: 15px;
-    display: none;
-    cursor: pointer;
-}
-
-header.banner.to-close .close {
-    display: block;
-}
-
-header.banner.to-close .logo{
-    display: none;
-}
-
-.layout-nav-primary .settings-icon {
-    width: 30px;
-    height: 30px;
-}
-
-.search-wrapper {
-    max-width: 1030px;
-    width: auto;
-    height: 60px;
-    padding-left: 0;
-    padding-right: 0;
-    border-radius: 0;
-    box-shadow: none;
-    background-color: transparent;
-    background-image: none;
-    margin: 0 auto;
-    padding-bottom: 0;
-    float: none;
-}
-
-.app-overlay {
-    display:none;
-    position:absolute;
-    top:60px;
-    left:0;
-    bottom:0;
-    right:0;
-    background-color: rgba(0,0,0,0.5);
-    z-index:99;
-}
-
-.app-overlay.app-overlay--show {
-    display:block;
-}
-
-.app-overlay.app-overlay--hide {
-    display:none;
-}
-
-.layout-body {
-    padding-bottom: 30px;
-}
-
-.loading::after {
-    content:'';
-    display:block;
-    background-color:rgba(255,255,255,0.8);
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    z-index:100000;
-}
 
=== removed file 'www/src/css/search-results.css'
--- www/src/css/search-results.css	2015-03-26 13:05:32 +0000
+++ www/src/css/search-results.css	1970-01-01 00:00:00 +0000
@@ -1,95 +0,0 @@
-.search-results {
-  position:absolute;
-  top:60px;
-  left:0;
-  right:0;
-  z-index:100;
-}
-
-.search-results .search-background {
-    position: relative;
-  background-color:#efefef;
-  box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
-  z-index:100;
-}
-.search-results__list {
-    margin-left: 0;
-    margin-bottom: 1em;
-    list-style: none;
-}
-.search-results__list div, .search-results__list h3, .search-results__list ul {
-    margin-bottom: 0;
-}
-.search-results__list p {
-    font-size: .875em;
-}
-.search-results__list .search-results__tags--link:link, .search-results__list .search-results__tags--link:visited {
-    box-sizing: border-box;
-    color: #333;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 2;
-}
-.search-results__list .list__icons li, .search-results__list .search-results__tags li {
-    position: relative;
-    z-index: 500;
-}
-.search-results__list .search-results__list--item .cell {
-    display: inline-block;
-    position: relative;
-    z-index: 10;
-}
-@media only screen and (min-width : 769px) {
-    .search-results__list .search-results__list--item .cell:hover {
-        display: table;
-        z-index: 200;
-    }
-}
-.search-results__list--header {
-    display: none;
-}
-.search-results__list--item {
-    box-sizing: border-box;
-    width: 100%;
-    position: relative;
-    padding: .8em 10px;
-    margin-bottom: 20px;
-    transition: all .2s;
-}
-
-@media only screen and (min-width : 768px) {
-    .search-results__list--item {
-        margin-bottom: 0;
-    }
-}
-.search-results__list--item p {
-    padding-top: .2em;
-    word-wrap: break-word;
-}
-.search-results__list--item:last-of-type {
-    margin-bottom: 1em;
-}
-.search-results__list--item div:empty {
-    display: none;
-}
-.search-results__list--item h3 {
-    margin-top: 0;
-    line-height: 24px;
-}
-.search-results__list--item h3 img {
-    margin-right: 3px;
-}
-.search-results__list--item img {
-    vertical-align: top;
-}
-.search-results__list--item .deploys__column {
-    font-weight: 500;
-}
-.search-results__list--item:hover {
-    box-shadow: -2px 2px 3px 0 #cdcdcd, 2px 2px 3px 0 #cdcdcd;
-}
 
=== renamed file 'www/src/css/v2/snap.css' => 'www/src/css/snap.css'
--- www/src/css/v2/snap.css	2015-03-27 17:22:01 +0000
+++ www/src/css/snap.css	2015-05-05 15:23:39 +0000
@@ -0,0 +1,65 @@
+.b-snap {
+}
+
+.b-snap__icon {
+}
+.b-snap__icon img {
+  display:block;
+}
+
+.b-snap__banner {
+  display: flex;
+  line-height:1.3;
+  margin:0 -3em;
+  padding:1.3em 3em 1.3em;
+  align-items: flex-start;
+  background-color:rgba(255,255,255,0.7);
+}
+
+.b-snap__meta {
+  flex: 2;
+}
+
+.b-snap__meta > * {
+  margin:0;
+}
+
+.b-snap__actions {
+  display:flex;
+  flex: 1;
+}
+
+.b-snap__actions .b-installer {
+  margin-left:auto;
+}
+
+.b-snap__navigation {
+  background-color:rgba(255,255,255,0.5);
+  display: flex;
+  align-items: center;
+  margin:0 0 1em 0;
+  border-top:1px solid #efefef;
+  border-bottom:1px solid #ddd;
+  margin:0 -3em 1em -3em;
+  padding:0 3em;
+}
+
+.b-snap__nav-item {
+  min-width:120px;
+  text-align: center;
+  position:relative;
+  display:block;
+  color:#333;
+  text-decoration:none;
+  padding:15px 0;
+}
+
+.b-snap__nav-item--active::before {
+  position:absolute;
+  content:'';
+  background:#dd4814;
+  bottom:0;
+  left:0;
+  right:0;
+  height:3px;
+}
 
=== renamed file 'www/src/css/v2/bask.css' => 'www/src/css/snaplist.css'
--- www/src/css/v2/bask.css	2015-04-14 19:38:06 +0000
+++ www/src/css/snaplist.css	2015-05-05 15:23:39 +0000
@@ -1,34 +1,114 @@
-/** b-bask: snap collection block **/
-.b-bask {
-    display:flex;
-    flex-flow: row wrap;
-}
-
-.b-bask__snap {
-    flex:1 0 13%;
-    margin:20px;
-}
-
-.b-bask__snap a,
-.b-bask__snap a:link,
-.b-bask__snap a:hover,
-.b-bask__snap a:visited {
+.b-snaplist {
+}
+
+.b-snaplist__item {
+  cursor: pointer;
+}
+
+/** grid style **/
+
+.b-snaplist--grid {
+  display:flex;
+  flex-wrap: wrap;
+}
+
+.b-snaplist--grid .b-snaplist__item {
+  flex: 0 1 20%;
+  padding:10px;
+}
+
+.b-snaplist--grid .b-snaplist__icon {
+}
+
+.b-snaplist--grid .b-snaplist__icon img {
+  border-radius:15%;
+  width:100%;
+}
+
+.b-snaplist--grid .b-snaplist__label {
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.b-snaplist--grid .b-snaplist__label ~ * {
+  display:none;
+}
+
+/** row style **/
+
+.b-snaplist--row .b-snaplist__item {
+  width:100%;
+  display:flex;
+  align-items:center;
+  padding:0.6em;
+  border-radius:4px;
+  margin-bottom:0.6em;
+  background-color:#fff;
+}
+
+.b-snaplist--row .b-snaplist__item:last-child {
+  margin-bottom:0;
+}
+
+.b-snaplist--row .b-snaplist__icon {
+  flex:0 0 40px;
+}
+
+.b-snaplist--row .b-snaplist__icon img {
+  display:block;
+  width: 40px;
+  height: 40px;
+}
+
+.b-snaplist--row .b-snaplist__label,
+.b-snaplist--row .b-snaplist__author,
+.b-snaplist--row .b-snaplist__title {
+  flex:2;
+  margin:0 1em;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.b-snaplist--row .b-snaplist__label {
+  min-width:100px;
+}
+
+.b-snaplist--row .b-snaplist__title {
+  flex:4 1;
+}
+
+.b-snaplist--row .b-snaplist__install {
+  flex:3;
+  margin:0 1em;
+  min-width:100px;
+}
+
+/**
+
+.b-snaplist__item a,
+.b-snaplist__item a:link,
+.b-snaplist__item a:hover,
+.b-snaplist__item a:visited {
     color: #333333;
 }
 
-.b-bask__snap-icon {
+.b-snaplist__snap-icon {
     text-align:center;
 }
 
-.b-bask__snap-icon img {
+.b-snaplist__snap-icon img {
   border-radius:5%;
 }
 
-.b-bask__snap-icon:hover {
+.b-snaplist__snap-icon:hover {
     background: #efefef;
 }
 
-.b-bask__snap-label {
+.b-snaplist__snap-label {
     font-weight: 400;
     text-align: center;
     display: block;
@@ -38,3 +118,5 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+**/
 
=== removed file 'www/src/css/switch.css'
--- www/src/css/switch.css	2015-03-26 13:05:32 +0000
+++ www/src/css/switch.css	1970-01-01 00:00:00 +0000
@@ -1,82 +0,0 @@
-.switch {
-  box-sizing:border-box;
-  position:relative;
-  padding:0 2.5em 0 0;
-  margin:1em 0;
-}
-.switch label {
-  position:absolute;
-  z-index:10;
-  padding-left:4em;
-  user-select: none;
-}
-.switch input {
-  display:none;
-}
-.switch .thing {
-  display:inline-block;
-  position:relative;
-  width:3em;
-  height:1.5em;
-  vertical-align:bottom;
-  border-radius:3px;
-  background-color:#eee;
-}
-.switch .thing::before, .switch .thing::after {
-  box-sizing:border-box;
-  content:"";
-  display:block;
-  position:absolute;
-  left:0;
-  height:1.5em;
-  transition:all 100ms;
-  border-radius:2px;
-}
-.switch .thing::before {
-  width:3em;
-  border:1px solid #ccc;
-  box-shadow:inset 0 0 5px 0 rgba(10,10,10,0.1);
-  z-index:2;
-}
-.switch .thing::after {
-  width:1.5em;
-  background-color:#fff;
-  border:2px solid #ccc;
-  z-index:3;
-
-}
-.switch input:checked + .thing::before {
-  background-color:#38B44A;
-  border-color:#38B44A;
-}
-.switch input:checked + .thing::after {
-  left:1.5em;
-  border-color:#38B44A;
-}
-
-.switch.thinking .thing,
-.link-cta-positive.thinking,
-.link-cta-negative.thinking {
-  background-size: 30px 30px;
-  background-image: linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent);
-  animation: thinking 0.6s linear infinite;
-  cursor: progress;
-}
-
-.switch.thinking input:checked + .thing::before {
-  background-color:rgba(56,180,74,0.5);
-  border-color:rgba(56,180,74,0.5);
-}
-
-.status {
-  color: #38b44a;
-}
-
-@keyframes thinking {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 60px 30px;
-  }
-}
 
=== removed file 'www/src/css/tt.css'
--- www/src/css/tt.css	2015-03-26 13:05:32 +0000
+++ www/src/css/tt.css	1970-01-01 00:00:00 +0000
@@ -1,1 +0,0 @@
-[data-tt]{position:relative;box-sizing:border-box}[data-tt]::before,[data-tt]::after{border:none;box-sizing:inherit;display:inline-block;font-size:13px;font-style:normal;font-weight:300;line-height:18px;opacity:0;pointer-events:none;position:absolute;right:50%;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;top:100%;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);-webkit-transition:opacity .2s step-start 100ms;transition:opacity .2s step-start 100ms;visibility:hidden;z-index:1000000}[data-tt]::before{background:#333;border-radius:3px;color:#eee;content:attr(data-tt);margin:10px 0 0;padding:9px 13px;white-space:pre;word-wrap:break-word}[data-tt]::after{border:5px solid transparent;border-bottom-color:#333;content:'';margin:0 0 0 -5px}[data-tt]:hover::before,[data-tt]:hover::after{visibility:visible;opacity:1}.tt-n::before,.tt-n::after{top:auto;bottom:100%}.tt-e::before,.tt-e::after,.tt-w::before,.tt-w::after{top:auto;bottom:50%;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tt-e::before,.tt-e::after{left:100%;right:auto}.tt-w::before,.tt-w::after{left:auto;right:100%}.tt-n::before{margin:0 0 10px}.tt-e::before{margin:0 0 0 10px}.tt-w::before{margin:0 10px 0 0}.tt-n::after{border-color:transparent;border-top-color:#333;margin:0 0 0 5px}.tt-e::after,.tt-w::after{border-color:transparent;margin:5px 0 0}.tt-e::after{border-right-color:#333}.tt-w::after{border-left-color:#333}
 \ No newline at end of file
 
=== removed file 'www/src/css/ubuntu-styles.css'
--- www/src/css/ubuntu-styles.css	2015-04-13 14:10:56 +0000
+++ www/src/css/ubuntu-styles.css	1970-01-01 00:00:00 +0000
@@ -1,3517 +0,0 @@
-@charset "UTF-8";
-body {
-    font-size: 14px;
-}
-body, a:link, a:visited {
-    -webkit-font-smoothing: antialiased;
-}
-.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
-    box-sizing: border-box;
-    clear: none;
-    display: inline-block;
-    float: none;
-    margin-right: 2.12766%;
-    margin-bottom: 20px;
-    padding: 0;
-    position: relative;
-    width: 100%
-}
-.twelve-col .one-col, .twelve-col .two-col, .twelve-col .three-col, .twelve-col .four-col, .twelve-col .five-col, .twelve-col .six-col, .twelve-col .seven-col, .twelve-col .eight-col, .twelve-col .nine-col, .twelve-col .ten-col, .twelve-col .eleven-col {
-    width: 100%
-}
-.last-col, .last {
-    margin-right: 0;
-}
-.clearfix:after, .container:after {
-    clear: both;
-    content: "\0020";
-    display: block;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-}
-.clear {
-    clear: both;
-}
-.clearfix {
-    display: block;
-}
-@media only screen and (min-width: 768px) {
-    body {
-    font-size: 15px;
-}
-.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
-    float: left;
-}
-.one-col {
-    width: 6.38297%
-}
-.two-col {
-    width: 14.89361%
-}
-.three-col {
-    width: 23.40425%
-}
-.four-col {
-    width: 31.91489%
-}
-.five-col {
-    width: 40.42553%
-}
-.six-col {
-    width: 48.93617%
-}
-.seven-col {
-    width: 57.4468%
-}
-.eight-col {
-    width: 65.95744%
-}
-.nine-col {
-    width: 74.46808%
-}
-.ten-col {
-    width: 82.97872%
-}
-.eleven-col {
-    width: 91.48936%
-}
-.twelve-col {
-    width: 100%;
-    margin-right: 0;
-}
-.twelve-col .one-col {
-    width: 6.3053%;
-    margin-right: 2.21238%
-}
-.twelve-col .two-col {
-    width: 14.823%;
-    margin-right: 2.21238%
-}
-.twelve-col .three-col {
-    width: 23.3407%;
-    margin-right: 2.21238%
-}
-.twelve-col .three-col {
-    width: 48.8938%;
-    margin-right: 2.21238%
-}
-.twelve-col .four-col {
-    width: 31.8584%;
-    margin-right: 2.21238%
-}
-.twelve-col .five-col {
-    width: 40.3761%;
-    margin-right: 2.21238%
-}
-.twelve-col .six-col {
-    width: 48.8938%;
-    margin-right: 2.21238%
-}
-.twelve-col .seven-col {
-    width: 57.4115%;
-    margin-right: 2.21238%
-}
-.twelve-col .eight-col {
-    width: 65.9292%;
-    margin-right: 2.21238%
-}
-.twelve-col .nine-col {
-    width: 74.4469%;
-    margin-right: 2.21238%
-}
-.twelve-col .ten-col {
-    width: 82.9646%;
-    margin-right: 2.21238%
-}
-.twelve-col .eleven-col {
-    width: 91.4823%;
-    margin-right: 2.21238%
-}
-.twelve-col .twelve-col {
-    width: 100%;
-    margin-right: 0;
-}
-.eleven-col .one-col {
-    width: 6.89238%;
-    margin-right: 2.41837%
-}
-.eleven-col .two-col {
-    width: 16.20314%;
-    margin-right: 2.41837%
-}
-.eleven-col .three-col {
-    width: 25.5139%;
-    margin-right: 2.41837%
-}
-.eleven-col .four-col {
-    width: 34.82466%;
-    margin-right: 2.41837%
-}
-.eleven-col .five-col {
-    width: 44.13542%;
-    margin-right: 2.41837%
-}
-.eleven-col .six-col {
-    width: 53.44619%;
-    margin-right: 2.41837%
-}
-.eleven-col .seven-col {
-    width: 62.75695%;
-    margin-right: 2.41837%
-}
-.eleven-col .eight-col {
-    width: 72.06771%;
-    margin-right: 2.41837%
-}
-.eleven-col .nine-col {
-    width: 81.37847%;
-    margin-right: 2.41837%
-}
-.eleven-col .ten-col {
-    width: 90.68923%;
-    margin-right: 2.41837%
-}
-.eleven-col .eleven-col {
-    width: 100%;
-    margin-right: 0;
-}
-.ten-col .one-col {
-    width: 7.6%;
-    margin-right: 2.66666%
-}
-.ten-col .two-col {
-    width: 17.86666%;
-    margin-right: 2.66666%
-}
-.ten-col .three-col {
-    width: 28.13333%;
-    margin-right: 2.66666%
-}
-.ten-col .four-col {
-    width: 38.4%;
-    margin-right: 2.66666%
-}
-.ten-col .five-col {
-    width: 48.66666%;
-    margin-right: 2.66666%
-}
-.ten-col .six-col {
-    width: 58.93333%;
-    margin-right: 2.66666%
-}
-.ten-col .seven-col {
-    width: 69.19999%;
-    margin-right: 2.66666%
-}
-.ten-col .eight-col {
-    width: 79.46666%;
-    margin-right: 2.66666%
-}
-.ten-col .nine-col {
-    width: 89.73333%;
-    margin-right: 2.66666%
-}
-.ten-col .ten-col {
-    width: 100%;
-    margin-right: 0;
-}
-.nine-col .one-col {
-    width: 8.46953%;
-    margin-right: 2.97176%
-}
-.nine-col .two-col {
-    width: 19.91084%;
-    margin-right: 2.97176%
-}
-.nine-col .three-col {
-    width: 31.35215%;
-    margin-right: 2.97176%
-}
-.nine-col .four-col {
-    width: 42.79346%;
-    margin-right: 2.97176%
-}
-.nine-col .five-col {
-    width: 54.23476%;
-    margin-right: 2.97176%
-}
-.nine-col .six-col {
-    width: 65.67607%;
-    margin-right: 2.97176%
-}
-.nine-col .seven-col {
-    width: 77.11738%;
-    margin-right: 2.97176%
-}
-.nine-col .eight-col {
-    width: 88.55869%;
-    margin-right: 2.97176%
-}
-.nine-col .nine-col {
-    width: 100%;
-    margin-right: 0;
-}
-.eight-col .one-col {
-    width: 9.56375%;
-    margin-right: 3.3557%
-}
-.eight-col .two-col {
-    width: 22.48322%;
-    margin-right: 3.3557%
-}
-.eight-col .three-col {
-    width: 35.40268%;
-    margin-right: 3.3557%
-}
-.eight-col .four-col {
-    width: 48.32214%;
-    margin-right: 3.3557%
-}
-.eight-col .five-col {
-    width: 61.24161%;
-    margin-right: 3.3557%
-}
-.eight-col .six-col {
-    width: 74.16107%;
-    margin-right: 3.3557%
-}
-.eight-col .seven-col {
-    width: 87.08053%;
-    margin-right: 3.3557%
-}
-.eight-col .eight-col {
-    width: 100%;
-    margin-right: 0;
-}
-.seven-col .one-col {
-    width: 10.98265%;
-    margin-right: 3.85356%
-}
-.seven-col .two-col {
-    width: 25.81888%;
-    margin-right: 3.85356%
-}
-.seven-col .three-col {
-    width: 40.6551%;
-    margin-right: 3.85356%
-}
-.seven-col .four-col {
-    width: 55.49132%;
-    margin-right: 3.85356%
-}
-.seven-col .five-col {
-    width: 70.32755%;
-    margin-right: 3.85356%
-}
-.seven-col .six-col {
-    width: 85.16377%;
-    margin-right: 3.85356%
-}
-.seven-col .seven-col {
-    width: 100%;
-    margin-right: 0;
-}
-.six-col .one-col {
-    width: 12.89592%;
-    margin-right: 4.52488%
-}
-.six-col .two-col {
-    width: 30.31674%;
-    margin-right: 4.52488%
-}
-.six-col .three-col {
-    width: 47.73755%;
-    margin-right: 4.52488%
-}
-.six-col .four-col {
-    width: 65.15837%;
-    margin-right: 4.52488%
-}
-.six-col .five-col {
-    width: 82.57918%;
-    margin-right: 4.52488%
-}
-.six-col .six-col {
-    width: 100%;
-    margin-right: 0;
-}
-.five-col .one-col {
-    width: 15.61643%;
-    margin-right: 5.47945%
-}
-.five-col .two-col {
-    width: 36.71232%;
-    margin-right: 5.47945%
-}
-.five-col .three-col {
-    width: 57.80821%;
-    margin-right: 5.47945%
-}
-.five-col .four-col {
-    width: 78.9041%;
-    margin-right: 5.47945%
-}
-.five-col .five-col {
-    width: 100%;
-    margin-right: 0;
-}
-.four-col .one-col {
-    width: 19.79166%;
-    margin-right: 6.94444%
-}
-.four-col .two-col {
-    width: 46.52777%;
-    margin-right: 6.94444%
-}
-.four-col .three-col {
-    width: 73.26388%;
-    margin-right: 6.94444%
-}
-.four-col .four-col {
-    width: 100%;
-    margin-right: 0;
-}
-.three-col .one-col {
-    width: 27.01421%;
-    margin-right: 9.47867%
-}
-.three-col .two-col {
-    width: 63.5071%;
-    margin-right: 9.47867%
-}
-.three-col .three-col {
-    width: 100%;
-    margin-right: 0;
-}
-.two-col .one-col {
-    width: 42.53731%;
-    margin-right: 14.92537%
-}
-.two-col .two-col {
-    width: 100%;
-    margin-right: 0;
-}
-.one-col .one-col {
-    width: 100%;
-    margin-right: 0;
-}
-.twelve-col .last-col {
-    margin-right: 0;
-}
-.eleven-col .last-col {
-    margin-right: 0;
-}
-.ten-col .last-col {
-    margin-right: 0;
-}
-.nine-col .last-col {
-    margin-right: 0;
-}
-.eight-col .last-col {
-    margin-right: 0;
-}
-.seven-col .last-col {
-    margin-right: 0;
-}
-.six-col .last-col {
-    margin-right: 0;
-}
-.five-col .last-col {
-    margin-right: 0;
-}
-.four-col .last-col {
-    margin-right: 0;
-}
-.three-col .last-col {
-    margin-right: 0;
-}
-.two-col .last-col {
-    margin-right: 0;
-}
-.one-col .last-col {
-    margin-right: 0;
-}
-.row, #context-footer {
-    border-radius: 0;
-    margin: 0;
-    padding: 40px 40px 20px;
-}
-.row:after {
-    content: ".";
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-}
-.row-feature {
-    background: none;
-}
-.container {
-    box-sizing: border-box;
-    margin: 20px 20px 0;
-    width: 100%
-}
-.append-one {
-    margin-right: 8.51063%
-}
-.append-two {
-    margin-right: 17.02127%
-}
-.append-three {
-    margin-right: 25.53191%
-}
-.append-four {
-    margin-right: 34.04255%
-}
-.append-five {
-    margin-right: 42.55319%
-}
-.append-six {
-    margin-right: 51.06383%
-}
-.append-seven {
-    margin-right: 59.57446%
-}
-.append-eight {
-    margin-right: 68.0851%
-}
-.append-nine {
-    margin-right: 76.59574%
-}
-.append-ten {
-    margin-right: 85.10638%
-}
-.append-eleven {
-    margin-right: 93.61702%
-}
-.prepend-one {
-    margin-left: 8.51063%
-}
-.prepend-two {
-    margin-left: 17.02127%
-}
-.prepend-three {
-    margin-left: 25.53191%
-}
-.prepend-four {
-    margin-left: 34.04255%
-}
-.prepend-five {
-    margin-left: 42.55319%
-}
-.prepend-six {
-    margin-left: 51.06383%
-}
-.prepend-seven {
-    margin-left: 59.57446%
-}
-.prepend-eight {
-    margin-left: 68.0851%
-}
-.prepend-nine {
-    margin-left: 76.59574%
-}
-.prepend-ten {
-    margin-left: 85.10638%
-}
-.prepend-eleven {
-    margin-left: 93.61702%
-}
-.push-one {
-    margin-left: 57px;
-}
-.pull-one, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten, .pull-eleven {
-    float: left;
-    position: relative;
-}
-.pull-one {
-    margin-left: -6.38297%
-}
-.pull-two {
-    margin-left: -17.02127%
-}
-.pull-three {
-    margin-left: -25.53191%
-}
-.pull-four {
-    margin-left: -34.04255%
-}
-.pull-five {
-    margin-left: -34.04255%
-}
-.pull-six {
-    margin-left: -51.06383%
-}
-.pull-seven {
-    margin-left: -59.57446%
-}
-.pull-eight {
-    margin-left: -68.0851%
-}
-.pull-nine {
-    margin-left: -76.59574%
-}
-.pull-ten {
-    margin-left: -85.10638%
-}
-.pull-eleven {
-    margin-left: -93.61702%
-}
-.push-1, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten, .push-eleven {
-    float: left;
-    position: relative;
-}
-.push-one {
-    margin: 0 -8.51063% 0 8.51063%
-}
-.push-two {
-    margin: 0 -19.14893% 0 19.14893%
-}
-.push-three {
-    margin: 0 -27.65957% 0 27.65957%
-}
-.push-four {
-    margin: 0 -36.17021% 0 36.17021%
-}
-.push-five {
-    margin: 0 -36.17021% 0 36.17021%
-}
-.push-six {
-    margin: 0 -53.19149% 0 53.19149%
-}
-.push-seven {
-    margin: 0 -61.70212% 0 61.70212%
-}
-.push-eight {
-    margin: 0 -70.21276% 0 70.21276%
-}
-.push-nine {
-    margin: 0 -78.7234% 0 78.7234%
-}
-.push-ten {
-    margin: 0 -87.23404% 0 87.23404%
-}
-.push-eleven {
-    margin: 0 -95.74468% 0 95.74468%
-}
-}@media only screen and (min-width: 984px) {
-    body {
-    font-size: 16px;
-}
-.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
-    float: left;
-}
-.one-col {
-    width: 6.38297%
-}
-.two-col {
-    width: 14.89361%
-}
-.three-col {
-    width: 23.40425%
-}
-.four-col {
-    width: 31.91489%
-}
-.five-col {
-    width: 40.42553%
-}
-.six-col {
-    width: 48.93617%
-}
-.seven-col {
-    width: 57.4468%
-}
-.eight-col {
-    width: 65.95744%
-}
-.nine-col {
-    width: 74.46808%
-}
-.ten-col {
-    width: 82.97872%
-}
-.eleven-col {
-    width: 91.48936%
-}
-.three-col:nth-child(1):nth-last-child(4), .three-col:nth-child(2):nth-last-child(3), .three-col:nth-child(3):nth-last-child(2), .three-col:nth-child(4):nth-last-child(1) {
-    width: 23.36%
-}
-.three-col:nth-of-type(2) {
-    margin-right: 2.21238%
-}
-.twelve-col {
-    width: 100%;
-    margin-right: 0;
-}
-.twelve-col .one-col {
-    width: 6.3053%;
-    margin-right: 2.21238%
-}
-.twelve-col .two-col {
-    width: 14.823%;
-    margin-right: 2.21238%
-}
-.twelve-col .three-col {
-    width: 23.3407%;
-    margin-right: 2.21238%
-}
-.twelve-col .three-col:nth-child(1):nth-last-child(4), .twelve-col .three-col:nth-child(2):nth-last-child(3), .twelve-col .three-col:nth-child(3):nth-last-child(2), .twelve-col .three-col:nth-child(4):nth-last-child(1) {
-    width: 23.3407%
-}
-.twelve-col .three-col:nth-of-type(2) {
-    margin-right: 2.21238%
-}
-.twelve-col .four-col {
-    width: 31.8584%;
-    margin-right: 2.21238%
-}
-.twelve-col .five-col {
-    width: 40.3761%;
-    margin-right: 2.21238%
-}
-.twelve-col .six-col {
-    width: 48.8938%;
-    margin-right: 2.21238%
-}
-.twelve-col .seven-col {
-    width: 57.4115%;
-    margin-right: 2.21238%
-}
-.twelve-col .eight-col {
-    width: 65.9292%;
-    margin-right: 2.21238%
-}
-.twelve-col .nine-col {
-    width: 74.4469%;
-    margin-right: 2.21238%
-}
-.twelve-col .ten-col {
-    width: 82.9646%;
-    margin-right: 2.21238%
-}
-.twelve-col .eleven-col {
-    width: 91.4823%;
-    margin-right: 2.21238%
-}
-.twelve-col .twelve-col {
-    width: 100%;
-    margin-right: 0;
-}
-.eleven-col .one-col {
-    width: 6.89238%;
-    margin-right: 2.41837%
-}
-.eleven-col .two-col {
-    width: 16.20314%;
-    margin-right: 2.41837%
-}
-.eleven-col .three-col {
-    width: 25.5139%;
-    margin-right: 2.41837%
-}
-.eleven-col .four-col {
-    width: 34.82466%;
-    margin-right: 2.41837%
-}
-.eleven-col .five-col {
-    width: 44.13542%;
-    margin-right: 2.41837%
-}
-.eleven-col .six-col {
-    width: 53.44619%;
-    margin-right: 2.41837%
-}
-.eleven-col .seven-col {
-    width: 62.75695%;
-    margin-right: 2.41837%
-}
-.eleven-col .eight-col {
-    width: 72.06771%;
-    margin-right: 2.41837%
-}
-.eleven-col .nine-col {
-    width: 81.37847%;
-    margin-right: 2.41837%
-}
-.eleven-col .ten-col {
-    width: 90.68923%;
-    margin-right: 2.41837%
-}
-.eleven-col .eleven-col {
-    width: 100%;
-    margin-right: 0;
-}
-.ten-col .one-col {
-    width: 7.6%;
-    margin-right: 2.66666%
-}
-.ten-col .two-col {
-    width: 17.86666%;
-    margin-right: 2.66666%
-}
-.ten-col .three-col {
-    width: 28.13333%;
-    margin-right: 2.66666%
-}
-.ten-col .four-col {
-    width: 38.4%;
-    margin-right: 2.66666%
-}
-.ten-col .five-col {
-    width: 48.66666%;
-    margin-right: 2.66666%
-}
-.ten-col .six-col {
-    width: 58.93333%;
-    margin-right: 2.66666%
-}
-.ten-col .seven-col {
-    width: 69.19999%;
-    margin-right: 2.66666%
-}
-.ten-col .eight-col {
-    width: 79.46666%;
-    margin-right: 2.66666%
-}
-.ten-col .nine-col {
-    width: 89.73333%;
-    margin-right: 2.66666%
-}
-.ten-col .ten-col {
-    width: 100%;
-    margin-right: 0;
-}
-.nine-col .one-col {
-    width: 8.46953%;
-    margin-right: 2.97176%
-}
-.nine-col .two-col {
-    width: 19.91084%;
-    margin-right: 2.97176%
-}
-.nine-col .three-col {
-    width: 31.35215%;
-    margin-right: 2.97176%
-}
-.nine-col .four-col {
-    width: 42.79346%;
-    margin-right: 2.97176%
-}
-.nine-col .five-col {
-    width: 54.23476%;
-    margin-right: 2.97176%
-}
-.nine-col .six-col {
-    width: 65.67607%;
-    margin-right: 2.97176%
-}
-.nine-col .seven-col {
-    width: 77.11738%;
-    margin-right: 2.97176%
-}
-.nine-col .eight-col {
-    width: 88.55869%;
-    margin-right: 2.97176%
-}
-.nine-col .nine-col {
-    width: 100%;
-    margin-right: 0;
-}
-.eight-col .one-col {
-    width: 9.56375%;
-    margin-right: 3.3557%
-}
-.eight-col .two-col {
-    width: 22.48322%;
-    margin-right: 3.3557%
-}
-.eight-col .three-col {
-    width: 35.40268%;
-    margin-right: 3.3557%
-}
-.eight-col .four-col {
-    width: 48.32214%;
-    margin-right: 3.3557%
-}
-.eight-col .five-col {
-    width: 61.24161%;
-    margin-right: 3.3557%
-}
-.eight-col .six-col {
-    width: 74.16107%;
-    margin-right: 3.3557%
-}
-.eight-col .seven-col {
-    width: 87.08053%;
-    margin-right: 3.3557%
-}
-.eight-col .eight-col {
-    width: 100%;
-    margin-right: 0;
-}
-.seven-col .one-col {
-    width: 10.98265%;
-    margin-right: 3.85356%
-}
-.seven-col .two-col {
-    width: 25.81888%;
-    margin-right: 3.85356%
-}
-.seven-col .three-col {
-    width: 40.6551%;
-    margin-right: 3.85356%
-}
-.seven-col .four-col {
-    width: 55.49132%;
-    margin-right: 3.85356%
-}
-.seven-col .five-col {
-    width: 70.32755%;
-    margin-right: 3.85356%
-}
-.seven-col .six-col {
-    width: 85.16377%;
-    margin-right: 3.85356%
-}
-.seven-col .seven-col {
-    width: 100%;
-    margin-right: 0;
-}
-.six-col .one-col {
-    width: 12.89592%;
-    margin-right: 4.52488%
-}
-.six-col .two-col {
-    width: 30.31674%;
-    margin-right: 4.52488%
-}
-.six-col .three-col {
-    width: 47.73755%;
-    margin-right: 4.52488%
-}
-.six-col .four-col {
-    width: 65.15837%;
-    margin-right: 4.52488%
-}
-.six-col .five-col {
-    width: 82.57918%;
-    margin-right: 4.52488%
-}
-.six-col .six-col {
-    width: 100%;
-    margin-right: 0;
-}
-.five-col .one-col {
-    width: 15.61643%;
-    margin-right: 5.47945%
-}
-.five-col .two-col {
-    width: 36.71232%;
-    margin-right: 5.47945%
-}
-.five-col .three-col {
-    width: 57.80821%;
-    margin-right: 5.47945%
-}
-.five-col .four-col {
-    width: 78.9041%;
-    margin-right: 5.47945%
-}
-.five-col .five-col {
-    width: 100%;
-    margin-right: 0;
-}
-.four-col .one-col {
-    width: 19.79166%;
-    margin-right: 6.94444%
-}
-.four-col .two-col {
-    width: 46.52777%;
-    margin-right: 6.94444%
-}
-.four-col .three-col {
-    width: 73.26388%;
-    margin-right: 6.94444%
-}
-.four-col .four-col {
-    width: 100%;
-    margin-right: 0;
-}
-.three-col .one-col {
-    width: 27.01421%;
-    margin-right: 9.47867%
-}
-.three-col .two-col {
-    width: 63.5071%;
-    margin-right: 9.47867%
-}
-.three-col .three-col {
-    width: 100%;
-    margin-right: 0;
-}
-.two-col .one-col {
-    width: 42.53731%;
-    margin-right: 14.92537%
-}
-.two-col .two-col {
-    width: 100%;
-    margin-right: 0;
-}
-.one-col .one-col {
-    width: 100%;
-    margin-right: 0;
-}
-.twelve-col .last-col {
-    margin-right: 0;
-}
-.eleven-col .last-col {
-    margin-right: 0;
-}
-.ten-col .last-col {
-    margin-right: 0;
-}
-.nine-col .last-col {
-    margin-right: 0;
-}
-.eight-col .last-col {
-    margin-right: 0;
-}
-.seven-col .last-col {
-    margin-right: 0;
-}
-.six-col .last-col {
-    margin-right: 0;
-}
-.five-col .last-col {
-    margin-right: 0;
-}
-.four-col .last-col {
-    margin-right: 0;
-}
-.three-col .last-col {
-    margin-right: 0;
-}
-.two-col .last-col {
-    margin-right: 0;
-}
-.one-col .last-col {
-    margin-right: 0;
-}
-.row, #context-footer {
-    border-radius: 0;
-    margin: 0;
-    padding: 40px 40px 20px;
-}
-.row:after {
-    content: ".";
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-}
-.row-feature {
-    background: none;
-}
-.container {
-    box-sizing: border-box;
-    margin: 20px 20px 0;
-    width: 100%
-}
-.append-one {
-    margin-right: 8.51063%
-}
-.append-two {
-    margin-right: 17.02127%
-}
-.append-three {
-    margin-right: 25.53191%
-}
-.append-four {
-    margin-right: 34.04255%
-}
-.append-five {
-    margin-right: 42.55319%
-}
-.append-six {
-    margin-right: 51.06383%
-}
-.append-seven {
-    margin-right: 59.57446%
-}
-.append-eight {
-    margin-right: 68.0851%
-}
-.append-nine {
-    margin-right: 76.59574%
-}
-.append-ten {
-    margin-right: 85.10638%
-}
-.append-eleven {
-    margin-right: 93.61702%
-}
-.prepend-one {
-    margin-left: 8.51063%
-}
-.prepend-two {
-    margin-left: 17.02127%
-}
-.prepend-three {
-    margin-left: 25.53191%
-}
-.prepend-four {
-    margin-left: 34.04255%
-}
-.prepend-five {
-    margin-left: 42.55319%
-}
-.prepend-six {
-    margin-left: 51.06383%
-}
-.prepend-seven {
-    margin-left: 59.57446%
-}
-.prepend-eight {
-    margin-left: 68.0851%
-}
-.prepend-nine {
-    margin-left: 76.59574%
-}
-.prepend-ten {
-    margin-left: 85.10638%
-}
-.prepend-eleven {
-    margin-left: 93.61702%
-}
-.push-one {
-    margin-left: 57px;
-}
-.pull-one, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten, .pull-eleven {
-    float: left;
-    position: relative;
-}
-.pull-one {
-    margin-left: -6.38297%
-}
-.pull-two {
-    margin-left: -17.02127%
-}
-.pull-three {
-    margin-left: -25.53191%
-}
-.pull-four {
-    margin-left: -34.04255%
-}
-.pull-five {
-    margin-left: -34.04255%
-}
-.pull-six {
-    margin-left: -51.06383%
-}
-.pull-seven {
-    margin-left: -59.57446%
-}
-.pull-eight {
-    margin-left: -68.0851%
-}
-.pull-nine {
-    margin-left: -76.59574%
-}
-.pull-ten {
-    margin-left: -85.10638%
-}
-.pull-eleven {
-    margin-left: -93.61702%
-}
-.push-1, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten, .push-eleven {
-    float: left;
-    position: relative;
-}
-.push-one {
-    margin: 0 -8.51063% 0 8.51063%
-}
-.push-two {
-    margin: 0 -19.14893% 0 19.14893%
-}
-.push-three {
-    margin: 0 -27.65957% 0 27.65957%
-}
-.push-four {
-    margin: 0 -36.17021% 0 36.17021%
-}
-.push-five {
-    margin: 0 -36.17021% 0 36.17021%
-}
-.push-six {
-    margin: 0 -53.19149% 0 53.19149%
-}
-.push-seven {
-    margin: 0 -61.70212% 0 61.70212%
-}
-.push-eight {
-    margin: 0 -70.21276% 0 70.21276%
-}
-.push-nine {
-    margin: 0 -78.7234% 0 78.7234%
-}
-.push-ten {
-    margin: 0 -87.23404% 0 87.23404%
-}
-.push-eleven {
-    margin: 0 -95.74468% 0 95.74468%
-}
-}
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    vertical-align: baseline;
-}
-article, aside, details, figcaption, figure, footer, header, nav, section {
-    display: block;
-}
-audio, canvas, video {
-    display: inline-block;
-}
-audio:not([controls]) {
-    display: none;
-}
-[hidden] {
-    display: none;
-}
-html {
-    background: url("../images/image-background-paper.png") repeat-y fixed center top #f7f7f7;
-    font-size: 100%;
-    overflow-y: scroll;
-    text-size-adjust: 100%;
-    transition: background-position 100 ease;
-}
-body {
-    background: url("../images/image-background-paper.png") repeat-y center top #f7f7f7;
-    color: #333;
-    font-family: Ubuntu,  Arial,  "libra sans",  sans-serif;
-    font-weight: 300;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote {
-    margin: 28px 20px;
-}
-blockquote:before, blockquote:after, q:before, q:after {
-    content: "";
-    content: none;
-}
-legend {
-    border: 0;
-}
-figure {
-    margin: 0;
-}
-abbr, acronym {
-    cursor: help;
-}
-a:focus {
-    outline: thin dotted;
-}
-a:hover, a:active {
-    outline: 0;
-}
-a:link, a:visited {
-    color: #dd4814;
-    text-decoration: none;
-}
-a:hover, a:active, a:focus {
-    text-decoration: underline;
-}
-ol, ul {
-    margin-left: 20px;
-    margin-bottom: 20px;
-}
-ol ol, ul ul, ol ul, ul ol {
-    margin-bottom: 0;
-}
-nav ul, nav ol {
-    list-style: none;
-    list-style-image: none;
-}
-svg:not(:root) {
-    overflow: hidden;
-}
-img {
-    border: 0;
-    height: auto;
-    max-width: 100%
-}
-img.left {
-    margin-right: 20px;
-}
-img.right {
-    margin-left: 20px;
-}
-.middle img {
-    vertical-align: middle;
-    margin-top: 4em;
-}
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 300;
-    line-height: 1.3;
-}
-h1 {
-    font-size: 1.625em;
-    margin-bottom: .5em;
-}
-h2 {
-    font-size: 1.438em;
-    margin-bottom: .5em;
-}
-h3 {
-    font-size: 1.219em;
-    margin-bottom: .522em;
-}
-h4 {
-    font-size: 1.25em;
-    font-weight: 400;
-    margin-bottom: .615em;
-}
-h5 {
-    font-size: 1em;
-    font-weight: 700;
-    margin-bottom: 1em;
-}
-h6 {
-    font-size: .723em;
-    font-weight: 400;
-    margin-bottom: 1em;
-    letter-spacing: .1em;
-    text-transform: uppercase;
-}
-p, li {
-    font-size: 1em;
-    line-height: 1.5;
-    margin: 0;
-    margin-bottom: .75em;
-    padding: 0;
-}
-h2 span, h1 span {
-    display: block;
-}
-p+h2, ul+h2, ol+h2, pre+h2 {
-    margin-top: 0.5625em;
-}
-header nav a:link {
-    font-weight: normal;
-}
-p+h3, ul+h3, ol+h3, pre+h3 {
-    margin-top: 0.78261em;
-}
-p+h4, ul+h4, ol+h4, pre+h4 {
-    margin-top: 1.39286em;
-}
-ol+h2, p+h2, pre+h2, ul+h2 {
-    margin-top: .563em;
-}
-ol+h3, p+h3, pre+h3, ul+h3 {
-    margin-top: .783em;
-}
-ol+h4, p+h4, pre+h4, ul+h4 {
-    margin-top: 1.219em;
-}
-li {
-    margin-bottom: .4em;
-}
-li:last-of-type {
-    margin-bottom: 0;
-}
-ins {
-    background: #fffbeb;
-    text-decoration: none;
-}
-small, .smaller {
-    font-size: 13px;
-}
-sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-sup {
-    vertical-align: text-top;
-}
-sub {
-    vertical-align: text-bottom;
-}
-dfn {
-    font-style: italic;
-}
-mark {
-    background: #ff0;
-    color: #000;
-}
-code, pre {
-    font-family: "Ubuntu Mono",  "Consolas",  "Monaco",  "Lucida Console",  "Courier New",  Courier,  monospace;
-}
-pre {
-    border-radius: 4px;
-    background: #fdf6f2;
-    padding: .6em 1em;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-blockquote {
-    margin: 0;
-}
-blockquote > p {
-    font-size: 0.92857em;
-    margin-bottom: 0.92308em;
-    font-weight: 100;
-    margin: 0 0 .4em 0;
-}
-blockquote small {
-    font-size: .813em;
-    line-height: 1.4;
-}
-button, input, select, textarea {
-    font-family: Ubuntu, Arial, "libra sans", sans-serif;
-    margin: 0;
-    vertical-align: baseline;
-}
-select {
-    font-size: 1em;
-    font-weight: 300;
-}
-button, input {
-    line-height: normal;
-}
-button, input[type="button"], input[type="reset"], input[type="submit"] {
-    cursor: pointer;
-    -webkit-appearance: button;
-}
-input[type="checkbox"], input[type="radio"] {
-    box-sizing: border-box;
-    padding: 0;
-}
-input[type="search"] {
-    border-radius: 2px;
-    -webkit-appearance: none;
-    box-sizing: content-box;
-    font-family: Ubuntu, Arial, "libra sans", sans-serif;
-    font-weight: 300;
-    outline: none;
-    padding: 0.6956522em 0.869565em;
-}
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-button::-moz-focus-inner, input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-textarea {
-    overflow: auto;
-    vertical-align: top;
-}
-form fieldset {
-    border-radius: 4px;
-    background-repeat: no-repeat;
-    background-color: #EFEEEC;
-    background-position: -15px -15px;
-    border: 0;
-    margin-bottom: 8px;
-    padding: 15px 20px;
-}
-form fieldset h3 {
-    border-bottom: 1px dotted #dfdcd9;
-    margin-bottom: 9px;
-    padding-bottom: 10px;
-}
-form fieldset li:first-child {
-    margin-top: 0;
-}
-form input[type="text"], form input[type="email"], form input[type="tel"], form textarea {
-    -webkit-appearance: none;
-    border-radius: 2px;
-    background: #fff;
-    border: 1px solid #999;
-    display: block;
-    font-family: Ubuntu, Arial, "libra sans", sans-serif;
-    font-size: 1em;
-    font-weight: 300;
-    padding: 0.6956522em 0.869565em;
-}
-form input:focus, form textarea:focus {
-    border: 1px solid #dd4814;
-}
-form textarea[readonly='readonly'] {
-    color: #999;
-}
-form input[type="checkbox"], form input[type="radio"] {
-    margin: 0;
-    width: auto;
-}
-form input[type="checkbox"]+label, form input[type="radio"]+label {
-    display: inline;
-    margin-left: 5px;
-    vertical-align: middle;
-    width: auto;
-}
-form input[type="submit"] {
-    font-size: 1.14286em;
-    margin-bottom: 0.75em;
-    border-radius: 4px;
-    background-color: #dd4814;
-    background-image: linear-gradient(#f26120,  #dd4814);
-    box-shadow: none;
-    border: 0;
-    color: #fff;
-    display: block;
-    padding: 10px 14px;
-    text-shadow: none;
-    width: auto;
-    margin-bottom: 0;
-}
-form input[type="submit"]:hover {
-    background: #dd4814;
-}
-form label {
-    cursor: pointer;
-    display: block;
-    margin-bottom: 4px;
-}
-form label span {
-    color: #df382c;
-}
-form ul {
-    margin-left: 0;
-}
-form li {
-    list-style: none outside none;
-    margin-top: 14px;
-}
-form button[type="submit"] {
-    border: 0;
-    display: inline-block;
-    font-family: Ubuntu,  Arial,  "libra sans",  sans-serif;
-    text-decoration: none;
-    font-weight: 300;
-}
-form input[type="reset"] {
-    display: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    overflow-x: scroll;
-    margin-bottom: 20px;
-    margin: 0 0 2.85714em 0;
-    width: 100%
-}
-table th, table td {
-    padding: 15px 10px;
-    background: #f0edea;
-    border: 1px dotted #888;
-}
-table td {
-    text-align: center;
-    vertical-align: middle;
-}
-table thead th {
-    border-collapse: separate;
-    border-spacing: 0 10px;
-    background: #fee3d2;
-    color: #333333;
-    font-weight: normal;
-}
-table tbody th {
-    text-align: left;
-    font-weight: normal;
-    font-weight: 300;
-}
-table th[scope="col"] {
-    text-align: center;
-}
-table thead th:first-of-type {
-    text-align: left;
-}
-@media only screen and (max-width: 768px) {
-    table {
-    display: block;
-}
-}@media only screen and (min-width: 984px) {
-    form fieldset {
-    padding: 15px 20px;
-}
-img {
-    max-width: none;
-}
-.row-enterprise {
-    background: #772953;
-    color: #fff;
-    border-radius: 0;
-}
-.row-enterprise .box, .row-enterprise div {
-    background: #772953;
-    color: #fff;
-}
-.row-enterprise a {
-    color: #fff;
-}
-.wrapper, header.banner .nav-primary, nav div.footer-a div, .inline-lists ul, .legal {
-    box-sizing: border-box;
-    width: auto;
-}
-.inner-wrapper {
-    box-sizing: border-box;
-    background: #fff;
-    clear: both;
-    display: block;
-    float: left;
-    width: 100%;
-    margin: 0;
-    padding-bottom: 20px;
-    position: relative;
-    z-index: 1;
-}
-}@media only screen and (min-width: 768px) {
-    .med-six-col .three-col {
-    width: 48%
-}
-.med-six-col .three-col:nth-of-type(2n) {
-    margin-right: 0;
-}
-}@media only screen and (min-width: 769px) {
-    .inner-wrapper {
-    border-radius: 4px;
-    padding-bottom: 20px;
-}
-}@media only screen and (min-width: 984px) {
-    .wrapper {
-    box-sizing: border-box;
-    background: #fff;
-    margin: 0 auto;
-    position: relative;
-    text-align: left;
-    width: 984px;
-}
-.inner-wrapper {
-    box-shadow: 0 0 3px #c9c9c9;
-    margin: 10px 0 30px;
-}
-.three-col, .med-six-col .three-col {
-    width: 23.30%
-}
-.three-col.last-col:nth-of-type(2n) {
-    margin-right: 0;
-}
-.med-six-col .three-col:nth-of-type(2n) {
-    margin-right: 20px;
-}
-.med-six-col .three-col.last-col {
-    margin-right: 0;
-}
-}.left {
-    float: left;
-}
-.right {
-    float: right;
-}
-.caps {
-    text-transform: uppercase;
-}
-img {
-    border: 0 none;
-    height: auto;
-    max-width: 100%
-}
-img.left {
-    margin-right: 0;
-}
-img.touch-border {
-    margin-bottom: -3px;
-}
-.accessibility-aid, .off-left {
-    position: absolute;
-    left: -999em;
-}
-a.external {
-    background-size: 0.7em 0.7em;
-    padding-right: .9em;
-    background-image: url("../images/external-link-orange.svg");
-    background-position: right 1px;
-    background-repeat: no-repeat;
-}
-.opera-mini a.external, .no-svg a.external {
-    background-image: url("../images/external-link-orange.png");
-}
-.text-center, .align-center {
-    text-align: center;
-}
-.no-margin {
-    margin: 0;
-}
-.no-margin-bottom {
-    margin-bottom: 0;
-}
-.no-padding-bottom {
-    padding-bottom: 0;
-}
-.pull-left-20 {
-    margin-left: -20px;
-}
-.pull-right-20 {
-    margin-right: -20px;
-}
-.pull-left-40 {
-    margin-left: -40px;
-}
-.pull-right-40 {
-    margin-right: -41px;
-}
-.no-border {
-    border: 0;
-}
-.link-top {
-    font-size: 1em;
-    margin-bottom: 0.85714em;
-    clear: both;
-    margin-bottom: 40px;
-    margin-top: -40px;
-}
-.link-top a {
-    background: #fff;
-    margin-right: 10px;
-    margin-top: -17px;
-    padding: 5px;
-    float: right;
-}
-.pull-bottom-right {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: auto;
-}
-.box .pull-bottom-right {
-    border-radius: 0 0 4px 0;
-}
-.pull-bottom-left {
-    margin-left: -20px;
-    margin-bottom: -21px;
-}
-.pull-top-right {
-    margin-left: -20px;
-    margin-top: -21px;
-}
-div.box-image-centered span img.priority-0, div.row-image-centered span img.priority-0, div.row.row-image-centered span img.priority-0, img.priority-0 {
-    position: absolute;
-    left: -999em;
-}
-.priority-0, .not-for-small {
-    position: absolute;
-    left: -999em;
-}
-.video-container {
-    position: relative;
-    padding-bottom: 56.25%;
-    padding-top: 30px;
-    height: 0;
-    overflow: hidden;
-}
-.video-container iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%
-}
-.video-container+h3, .video-container+.video-title {
-    margin-top: 20px;
-}
-@media only screen and (max-width: 768px) {
-    .pull-right-40 {
-    margin-right: -30px;
-}
-.pull-bottom-right, .pull-bottom-left {
-    position: static;
-}
-img.pull-bottom-left {
-    margin-bottom: 0;
-    margin-left: 0;
-}
-}@media only screen and (min-width: 768px) {
-    div.box-image-centered span img.priority-0, div.row-image-centered span img.priority-0, div.row.row-image-centered span img.priority-0, img.priority-0 {
-    position: relative;
-    left: auto;
-}
-.priority-0, .not-for-small {
-    position: relative;
-    left: auto;
-}
-.for-mobile, .for-small {
-    position: absolute;
-    left: -999em;
-}
-.pull-right {
-    float: right;
-    margin-right: -30px;
-}
-img.pull-left {
-    margin-left: -30px;
-}
-img.touch-border {
-    float: left;
-    margin-bottom: -30px;
-}
-}@media only screen and (min-width: 769px) {
-    img.left {
-    margin-right: 20px;
-}
-}@media only screen and (min-width: 984px) {
-    img.touch-border {
-    float: left;
-    margin-bottom: -40px;
-}
-img.pull-left {
-    margin-left: -40px;
-}
-.pull-right {
-    float: right;
-    margin-right: -40px;
-}
-.for-tablet, .for-medium {
-    display: none;
-}
-.no-border {
-    border: 0;
-}
-}.caps-centered, .muted-heading {
-    font-size: .875em;
-    margin-bottom: 20px;
-    text-align: center;
-    text-transform: uppercase;
-}
-p.intro {
-    font-size: 1.14286em;
-    margin-bottom: 0.75em;
-    line-height: 1.4;
-}
-.row div p:last-child, .row div ul:last-child {
-    margin-bottom: 0;
-}
-.four-col p:last-child {
-    margin-bottom: 0;
-}
-.note {
-    color: #888;
-    font-size: .813em;
-}
-@media only screen and (min-width: 768px) {
-    p.intro {
-    font-size: 1.13333em;
-}
-}@media only screen and (min-width: 984px) {
-    h1 {
-    font-size: 2.8125em;
-}
-h2 {
-    font-size: 2em;
-    margin-bottom: .375em;
-}
-h3 {
-    font-size: 1.438em;
-    margin-bottom: .522em;
-}
-h4 {
-    font-size: 1em;
-    margin-bottom: .75em;
-}
-h5 {
-    font-size: 1em;
-}
-p, li, code, pre {
-    font-size: 16px;
-    line-height: 1.5;
-    margin-bottom: .75em;
-}
-p.intro {
-    font-size: 1.25em;
-}
-}header.banner {
-    border-top: 0;
-    min-width: 100%;
-    width: auto;
-    background: #dd4814;
-    display: block;
-    position: relative;
-    z-index: 2;
-}
-header.banner .nav-primary {
-    border: 0;
-    margin: 0 auto;
-    overflow: hidden;
-}
-header.banner .nav-primary ul {
-    float: left;
-    margin: 0;
-    position: relative;
-}
-header.banner .nav-primary ul li {
-    border-left: 1px solid #c64012;
-    float: left;
-    list-style-image: none;
-    margin: 0;
-    text-indent: 0;
-    vertical-align: bottom;
-}
-header.banner .nav-primary ul li:last-child {
-    border-right: 1px solid #c64012;
-}
-header.banner .nav-primary ul li a:link, header.banner .nav-primary ul li a:visited {
-    font-size: 14px;
-    border-left: 1px solid #ec5b29;
-    color: #fff;
-    display: block;
-    margin-bottom: 0;
-    padding: 14px 14px 13px;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    font-smoothing: subpixel-antialiased;
-}
-header.banner .nav-primary ul a.active {
-    background: #B83A10;
-    border-left: 1px solid #ec5b29;
-}
-header.banner nav.nav-primary ul li a:hover {
-    background-color: #dd4814;
-}
-header.banner nav.nav-primary ul li a.settings-link.active:link {
-    padding-bottom: 6px;
-}
-header.banner .nav-primary ul li a:hover {
-    background: #e1662f;
-    border-top: 0;
-    box-shadow: inset 0 2px 2px -2px #777;
-}
-#main-navigation-link {
-    display: none;
-}
-@media only screen and (min-width: 768px) {
-    header.banner nav ul {
-        background-color: #f0f0f0;
-        /*display: none;*/
-        float: left;
-    }
-}
-header.banner .nav-primary.active {
-    box-shadow: 0 1px 2px 1px rgba(120, 120, 120, 0.2);
-    padding: 0;
-    border-bottom: 1px solid #d4d7d4;
-}
-header nav ul.active {
-    display: block;
-}
-header.banner .nav-primary ul li, header.banner .nav-primary ul li a:link, header.banner .nav-primary ul li a:visited, header.banner .nav-primary ul li a:active {
-    display: block;
-    padding: 0;
-    margin: 0;
-    border: none;
-}
-header.banner .nav-primary ul li a:hover {
-    box-shadow: none;
-    background-color: #d0d0d0;
-}
-header.banner .nav-primary ul li {
-    border-bottom: 1px solid #F2F2F4;
-    font-size: 16px;
-}
-header.banner .nav-primary ul li:last-child {
-    border: 0;
-}
-header.banner nav.nav-primary ul li a:link, header.banner .nav-primary ul li a:visited, header.banner .nav-primary ul li a:hover, header.banner .nav-primary ul li a:active {
-    padding: 20px 14px 19px;
-    text-align: left;
-}
-header.banner nav.nav-primary ul.active li ul {
-    display: none;
-}
-.nav-secondary {
-    border-bottom: 1px solid #dfdcd9;
-    margin-bottom: 0;
-}
-.nav-secondary ul {
-    float: left;
-    margin-bottom: 10px;
-    margin-left: 2px;
-}
-.nav-secondary ul li {
-    float: left;
-    margin-top: 16px;
-    font-size: 14px;
-    margin-right: 15px;
-}
-.nav-secondary ul li a:link, .nav-secondary ul li a:visited {
-    color: #333;
-    font-size: 14px;
-    float: left;
-}
-.nav-secondary ul li a:hover, .nav-secondary ul li a:active {
-    color: #dd4814;
-    text-decoration: none;
-}
-.nav-secondary ul li, .nav-secondary ul li.active a:link, .nav-secondary ul li.active a:visited {
-    color: #dd4814;
-    text-decoration: none;
-}
-.nav-secondary ul.breadcrumb {
-    margin-left: 20px;
-}
-.nav-secondary ul.breadcrumb li, .nav-secondary ul.breadcrumb li a:link, .nav-secondary ul.breadcrumb li a:visited {
-    color: #888;
-    margin-right: 8px;
-}
-.nav-secondary ul.breadcrumb li.active a:link, .nav-secondary ul.breadcrumb li.active a:visited {
-    color: #dd4814;
-}
-header.banner h2 {
-    font-size: 1.78571em;
-    margin-bottom: 0.48em;
-    display: block;
-    left: 4px;
-    margin-bottom: 0;
-    position: relative;
-    text-transform: lowercase;
-    top: 14px;
-}
-header.banner h2 a:link, header.banner h2 a:visited, header.banner a {
-    color: #fff;
-    float: left;
-    text-decoration: none;
-}
-header.banner .logo {
-    border-left: 0;
-    float: left;
-    overflow: hidden;
-    padding-right: .5em;
-}
-@media only screen and (max-width: 768px) {
-    header.banner .nav-primary {
-    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
-}
-header.banner .nav-primary.active {
-    box-shadow: none;
-    padding: 0;
-}
-header nav ul.active {
-    float: left;
-}
-header nav ul.active li:last-child a:link, header nav ul.active li:last-child a:visited {
-    border-bottom: 0;
-}
-header.banner .nav-primary ul li.active a:link, header.banner .nav-primary ul li.active a:visited {
-    color: #333;
-    font-weight: 700;
-}
-header.banner .nav-primary ul li, header.banner .nav-primary ul li a:link, header.banner .nav-primary ul li a:visited, header.banner .nav-primary ul li a:active {
-    box-sizing: border-box;
-    background: transparent;
-    border: none;
-    display: block;
-    font-weight: 300;
-    margin: 0;
-    padding: 0;
-    width: 100%
-}
-.nav-secondary {
-    background: #fff;
-}
-.nav-secondary ul.second-level-nav {
-    border-top: 1px solid #d4d7d4;
-    display: none;
-    margin-bottom: 0;
-    margin-left: 0;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    width: 100%
-}
-.nav-secondary ul.second-level-nav li {
-    box-sizing: border-box;
-    width: 50%;
-    margin: 0;
-    float: left;
-}
-.nav-secondary ul.second-level-nav li a, .nav-secondary ul.second-level-nav li a:link, .nav-secondary ul.second-level-nav li a:visited {
-    box-sizing: border-box;
-    display: block;
-    height: 100%;
-    padding: 10px 10px 10px 20px;
-    width: 100%
-}
-.nav-secondary ul.second-level-nav li.active a, .nav-secondary ul.second-level-nav li.active a:link, .nav-secondary ul.second-level-nav li.active a:visited {
-    color: #333;
-    font-weight: 700;
-}
-.nav-secondary ul.third-level-nav {
-    display: none;
-    margin-bottom: 0;
-    width: 100%;
-    padding-bottom: 20px;
-}
-.nav-secondary ul.third-level-nav li {
-    box-sizing: border-box;
-    width: 50%;
-    margin: 0;
-    float: left;
-    padding-left: 30px;
-}
-.nav-secondary ul.third-level-nav li a, .nav-secondary ul.third-level-nav li a:link, .nav-secondary ul.third-level-nav li a:visited {
-    box-sizing: border-box;
-    padding: 10px 10px 10px 0;
-    display: block;
-    width: 100%;
-    height: 100%
-}
-.nav-secondary ul.third-level-nav li.active a, .nav-secondary ul.third-level-nav li.active a:link, .nav-secondary ul.third-level-nav li.active a:visited {
-    color: #333;
-    font-weight: 700;
-}
-.nav-secondary ul.third-level-nav li.single-link {
-    width: 100%
-}
-.nav-secondary ul.third-level-nav li:only-child {
-    width: 100%
-}
-.nav-secondary.open ul.second-level-nav, .nav-secondary.open ul.third-level-nav, .nav-secondary.open ul.breadcrumb li+li {
-    display: block;
-}
-header.banner .nav-toggle {
-    background-image: url("../images/navigation-menu-plain.svg");
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 25px auto;
-    cursor: pointer;
-    display: block;
-    height: 48px;
-    position: absolute;
-    right: 0;
-    text-indent: -99999px;
-    width: 48px;
-}
-html.no-svg header.banner .nav-toggle, .opera-mini header.banner .nav-toggle {
-    background-image: url("../images/navigation-menu-plain.png");
-}
-}@media only screen and (min-width: 768px) {
-    header.banner .nav-primary ul li {
-    border-bottom: 0;
-}
-}@media only screen and (min-width: 769px) {
-    header.banner {
-    box-shadow: 0 2px 2px -2px #777777 inset,  2px 1px #FFFFFF;
-}
-header.banner nav.nav-primary {
-    box-shadow: none;
-    border-bottom: 0;
-}
-header.banner .nav-toggle {
-    display: none;
-}
-header.banner nav ul {
-    background-color: transparent;
-    display: block;
-}
-header.banner .nav-primary ul li {
-    border-left: 1px solid #C64012;
-}
-header.banner .nav-primary ul li a:active, header.banner .nav-primary ul li a:hover, header.banner .nav-primary ul li a:visited, header.banner nav.nav-primary ul li a:link {
-    border-left: 1px solid #EC5B29;
-}
-header.banner .nav-primary ul li:last-child {
-    border-right: 1px solid #C64012;
-    border-left: 1px solid #C64012;
-}
-header.banner .nav-primary ul li a.active {
-    background-color: #B83A10;
-}
-header.banner .nav-primary ul li a:hover {
-    background-color: #E1662F;
-}
-.nav-secondary ul:last-child li:last-child {
-    padding-bottom: 10px;
-}
-.nav-secondary ul.breadcrumb li, .nav-secondary ul.second-level-nav li, .nav-secondary ul.third-level-nav li {
-    margin-right: 15px;
-}
-.nav-secondary ul.breadcrumb {
-    float: left;
-}
-.nav-secondary ul.breadcrumb li {
-    margin-bottom: 10px;
-}
-.nav-secondary ul {
-    float: none;
-    margin-bottom: 0;
-}
-.nav-secondary ul li {
-    margin-bottom: 5px;
-}
-}@media only screen and (min-width: 984px) {
-    header.banner {
-    margin-bottom: 20px;
-}
-header.banner nav.nav-primary ul {
-    display: block;
-}
-header.banner .nav-primary, #nav-global .nav-global-wrapper {
-    width: 984px;
-}
-header.banner .nav-primary.nav-right .logo-ubuntu {
-    margin-left: 0;
-}
-}header.banner .nav-primary ul {
-    position: static;
-}
-header.banner .nav-primary li ul {
-    box-shadow: 0 2px 2px -1px #777;
-    border-radius: 10px;
-    background: #f7f7f7;
-    border: 1px solid #d5d5d5;
-    display: none;
-    float: none;
-    margin: 0;
-    padding: 5px 0;
-    position: absolute;
-    top: 51px;
-    width: 200px;
-}
-header.banner .nav-primary li ul li {
-    border: 0;
-    float: none;
-}
-header.banner .nav-primary li ul li a:link, header.banner .nav-primary li ul li a:visited {
-    border: 0;
-    color: #333333;
-    padding: 0 0 11px 14px;
-    text-align: left;
-    width: 170px;
-}
-header.banner .nav-primary li ul li a:hover {
-    background: none repeat scroll 0 0 transparent;
-    box-shadow: none;
-    color: #DD4814;
-}
-header.banner .nav-primary li ul li.first a:link, header.banner .nav-primary li ul li.first a:visited, header.banner .nav-primary li ul li:first-of-type a:link {
-    padding: 10px 14px;
-}
-header.banner .nav-primary li ul li.active a:link, header.banner .nav-primary li ul li.active a:visited {
-    background: none repeat scroll 0 0 transparent !important;
-}
-header.banner .nav-primary li:hover ul {
-    display: block;
-}
-.header-search input[type="search"], .header-search input[type="text"] {
-    -webkit-appearance: none;
-    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    border-radius: 4px;
-    transition: all 0.5s ease-out;
-    background-color: #be3d00;
-    border: none;
-    color: #fff;
-    display: block;
-    float: left;
-    font-size: 16px;
-    height: 2.1em;
-    margin-bottom: 0;
-    padding: 0.5em 2.5em 0.5em 0.5em;
-    width: 100%
-}
-.header-search ::-webkit-input-placeholder {
-    color: white;
-    opacity: 0.4;
-}
-.header-search ::-moz-placeholder {
-    color: white;
-    opacity: 0.4;
-}
-.header-search :-ms-input-placeholder {
-    color: white;
-    opacity: 0.4;
-}
-.header-search input:-moz-placeholder {
-    color: white;
-    opacity: 0.4;
-}
-.header-search ::placeholder {
-    color: white;
-    opacity: 0.4;
-}
-.header-search input[type="search"]:focus {
-    background-color: #a63603;
-}
-.header-search button[type=submit] {
-    padding: 3px 2px;
-    line-height: 0;
-    float: left;
-    margin-left: -40px;
-    display: block;
-    background: none;
-    overflow: visible;
-}
-.header-search button[type=submit]:hover {
-    background: none;
-}
-.header-search button[type=submit] img {
-    height: 28px;
-    width: 28px;
-}
-header.banner .search-toggle {
-    background-size: 20px 20px;
-    background-image: url("../images/search.svg");
-    background-position: center center;
-    background-repeat: no-repeat;
-    display: block;
-    height: 48px;
-    outline: none;
-    overflow: hidden;
-    position: absolute;
-    right: 58px;
-    text-indent: -999em;
-    top: 0;
-    width: 24px;
-}
-.search-toggle:link, .search-toggle:active {
-    outline: none;
-}
-.header-search {
-    background: #f0f0f0;
-    border: 0;
-    display: none;
-    float: left;
-    margin-bottom: 0;
-    position: relative;
-    margin: 0 0 -1px 0;
-    padding: 0;
-    width: 100%;
-    z-index: 3;
-}
-.header-search.active, .header-search.open {
-    display: block;
-}
-.header-search div {
-    box-shadow: inset 0 -4px 4px -4px rgba(0, 0, 0, 0.3), inset 0 5px 5px -5px rgba(0, 0, 0, 0.3);
-    background: #f0f0f0;
-    margin: 10px;
-    position: relative;
-    z-index: 1;
-}
-.header-search form input[type="search"] {
-    font-size: 1.14286em;
-    margin-bottom: 0.75em;
-    border-radius: 4px 4px 4px 4px;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.4);
-    box-sizing: border-box;
-    background: #fff;
-    border: 0;
-    color: #333;
-    font-size: 16px;
-    height: auto;
-    margin: 0;
-    float: left;
-    padding: 9px 10px;
-    width: 100%
-}
-.yes-js .header-inner .header-search {
-    display: none;
-}
-.yes-js .header-inner .header-search form {
-    box-sizing: border-box;
-    margin-left: 0;
-    margin-right: 0;
-    overflow: hidden;
-    padding: 10px;
-    top: 0;
-    z-index: 999;
-    position: relative;
-    width: 100%
-}
-@media only screen and (max-width: 768px) {
-    header.banner .search-toggle {
-    right: 48px;
-}
-html.no-svg .search-toggle, .opera-mini .search-toggle {
-    background-image: url("../images/search-white.png");
-}
-}@media only screen and (min-width: 768px) {
-    header.banner .search-toggle {
-    display: none;
-}
-}@media only screen and (min-width: 960px) {
-    .header-search {
-    background: none;
-    overflow: hidden;
-    padding: 7px 0 7px 14px;
-    border-right: 0 none;
-    float: right;
-    margin-bottom: 0;
-    padding-bottom: 5px;
-    padding-right: 0;
-    padding-top: 7px;
-    max-width: 220px;
-}
-.header-search form input[type="text"], .header-search form input[type="search"] {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset;
-    box-sizing: content-box;
-    background: url("../images/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #be3d00;
-    border: 6px solid #DE6532;
-    border-width: 0 0 1px;
-    color: #fff;
-    font-size: 0.813em;
-    height: 24px;
-    margin-bottom: 0;
-    padding: 4px 4px 4px 30px;
-    transition: all 0.5s ease 0s;
-    width: 86px;
-}
-}@media only screen and (max-width: 960px) {
-    header.banner nav.nav-primary .header-search {
-    padding: 0;
-    position: relative;
-    top: 0;
-    width: 100%
-}
-header.banner nav.nav-primary .header-search input[type="search"] {
-    border-radius: 0;
-    background: #f7f7f7;
-    color: #333;
-}
-header.banner nav.nav-primary .header-search button[type="submit"] {
-    width: 32px;
-    height: 38px;
-    background-size: 28px 28px;
-}
-header.banner nav.nav-primary .header-search button[type="submit"] img {
-    max-width: none;
-    display: none;
-}
-header.banner nav.nav-primary .header-search.open {
-    display: block;
-}
-header.banner .search-toggle {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 25px auto;
-    cursor: pointer;
-    right: 0;
-    display: block;
-    height: 48px;
-    position: absolute;
-    text-indent: -99999px;
-    width: 48px;
-}.opera-mini x:-o-prefocus, .opera-mini header.banner .search-toggle {
-    -o-background-size: 25px auto;
-    background-size: 25px auto;
-}
-}@media only screen and (min-width: 984px) {
-    .header-search {
-    display: block;
-    margin-right: 0;
-}
-.header-search form input[type="text"]:focus {
-    width: 160px;
-}
-}@media only screen and (max-width: 768px) {
-    header.banner .search-toggle {
-    right: 48px;
-}
-}body.ubuntu-search .nav-secondary, body.search-results .nav-secondary, body.search-no-results .nav-secondary {
-    display: none;
-}
-body.ubuntu-search section > h1,
-body.ubuntu-search section article h1,
-body.search-results section > h1,
-body.search-results section article h1,
-body.search-no-results section > h1,
-body.search-no-results section article h1 {
-    padding-bottom: 10px;
-    font-size: 1.438em;
-    margin-bottom: 0;
-}
-body.ubuntu-search section > h1,
-body.search-results section > h1,
-body.search-no-results section > h1 {
-    border-bottom: 1px dotted #dfdcd9;
-}
-body.ubuntu-search .main-search, body.search-results .main-search, body.search-no-results .main-search {
-    padding: 20px 0;
-    margin: 0 0 20px 0;
-    background-color: transparent;
-}
-body.ubuntu-search .main-search input[type="search"], body.search-results .main-search input[type="search"], body.search-no-results .main-search input[type="search"] {
-    float: left;
-    width: 100%;
-    font-size: 2em;
-    border: 1px solid #999;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 0.2em 65px 0.2em 0.2em;
-}
-body.ubuntu-search .main-search button[type=submit], body.search-results .main-search button[type=submit], body.search-no-results .main-search button[type=submit] {
-    padding: 4px;
-    line-height: 0;
-    float: left;
-    margin-left: -53px;
-    display: block;
-    background: none;
-    overflow: visible;
-    width: auto;
-    margin-top: -4px;
-}
-body.ubuntu-search .main-search button[type=submit]:hover, body.search-results .main-search button[type=submit]:hover, body.search-no-results .main-search button[type=submit]:hover {
-    background: none;
-}
-body.ubuntu-search .main-search button[type=submit] img, body.search-results .main-search button[type=submit] img, body.search-no-results .main-search button[type=submit] img {
-    height: 45px;
-    width: 45px;
-}
-body.ubuntu-search .search-result h1 .title-main, body.search-results .search-result h1 .title-main, body.search-no-results .search-result h1 .title-main {
-    margin-right: 20px;
-}
-body.ubuntu-search .search-result h1 .result-url, body.search-results .search-result h1 .result-url, body.search-no-results .search-result h1 .result-url {
-    color: #999;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    vertical-align: bottom;
-    padding-bottom: 2px;
-}
-body.ubuntu-search .search-result h1 .result-url a, body.search-results .search-result h1 .result-url a, body.search-no-results .search-result h1 .result-url a {
-    color: #999;
-}
-body.ubuntu-search .search-result p, body.search-results .search-result p, body.search-no-results .search-result p {
-    margin-bottom: 0;
-}
-body.ubuntu-search .num-results, body.search-results .num-results, body.search-no-results .num-results {
-    display: inline-block;
-    margin-left: 20px;
-}
-body.ubuntu-search .bottom-results-total, body.search-results .bottom-results-total, body.search-no-results .bottom-results-total {
-    text-align: center;
-    width: 100%;
-    overflow: visible;
-    padding-top: 20px;
-    margin: 0;
-}
-body.ubuntu-search .bottom-nav, body.search-results .bottom-nav, body.search-no-results .bottom-nav {
-    overflow: hidden;
-    margin-top: -26px;
-}
-body.ubuntu-search .bottom-nav ul, body.search-results .bottom-nav ul, body.search-no-results .bottom-nav ul {
-    margin-bottom: 0;
-    margin-left: 0;
-    padding: 0;
-    overflow: hidden;
-}
-body.ubuntu-search .bottom-nav li, body.search-results .bottom-nav li, body.search-no-results .bottom-nav li {
-    float: left;
-    margin-left: 15px;
-}
-body.ubuntu-search .bottom-nav li:first-child, body.search-results .bottom-nav li:first-child, body.search-no-results .bottom-nav li:first-child {
-    margin-left: 0;
-}
-body.ubuntu-search .nav-back, body.search-results .nav-back, body.search-no-results .nav-back {
-    float: left;
-}
-body.ubuntu-search .nav-back li:before, body.search-results .nav-back li:before, body.search-no-results .nav-back li:before {
-    content: "\2039";
-    color: #dd4814;
-    margin-right: 5px;
-}
-body.ubuntu-search .nav-back li.item-extreme:before, body.search-results .nav-back li.item-extreme:before, body.search-no-results .nav-back li.item-extreme:before {
-    content: "\2039\2039"}
-body.ubuntu-search .nav-forward, body.search-results .nav-forward, body.search-no-results .nav-forward {
-    float: right;
-}
-body.ubuntu-search .nav-forward li:after, body.search-results .nav-forward li:after, body.search-no-results .nav-forward li:after {
-    content: "\203A";
-    color: #dd4814;
-    margin-left: 5px;
-}
-body.ubuntu-search .nav-forward li.item-extreme:after, body.search-results .nav-forward li.item-extreme:after, body.search-no-results .nav-forward li.item-extreme:after {
-    content: "\203A\203A"}
-body.ubuntu-search .error-notification, body.search-results .error-notification, body.search-no-results .error-notification {
-    background-color: #fdffdc;
-    color: #333;
-    padding: 20px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 100%;
-    margin-top: 20px;
-    display: block;
-}
-body.ubuntu-search .result-line, body.search-results .result-line, body.search-no-results .result-line {
-    color: #ada69e;
-}
-body.ubuntu-search .results-top, body.search-results .results-top, body.search-no-results .results-top {
-    border-bottom: 1px dotted #dfdcd9;
-    padding-bottom: 0.5em;
-}
-body.ubuntu-search .search-container, body.search-results .search-container, body.search-no-results .search-container {
-    padding-bottom: 0;
-}
-@media only screen and (min-width: 768px) {
-    .ubuntu-search .main-search button[type=submit] {
-    margin-left: -60px;
-    margin-top: 0;
-}
-}a.link-cta-ubuntu, a.link-cta-canonical, a.link-cta-inverted, button.cta-ubuntu, button.cta-canonical, form button[type="submit"], form input[type="submit"] {
-    box-sizing: border-box;
-    font-size: 1.14286em;
-    margin-bottom: 0.75em;
-    border-radius: 3px;
-    background: #dd4814;
-    color: #fff;
-    text-decoration: none;
-    display: inline-block;
-    margin: 0;
-    font-family: Ubuntu,  Arial,  'libra sans',  sans-serif;
-    font-weight: 300;
-    font-smoothing: subpixel-antialiased;
-    padding: 8px 14px;
-    width: 100%;
-    text-align: center;
-}
-a.cta-large, button.cta-large {
-    font-size: 1.28571em;
-    margin-bottom: 0.66667em;
-    padding: 10px 20px;
-}
-a.link-cta-canonical, button.cta-canonical, form button.cta-canonical[type="submit"], form input.cta-canonical[type="submit"] {
-    background: #772953;
-    color: #fff;
-}
-a.link-cta-inverted, button.cta-inverted {
-    background: #fff;
-    color: #333;
-}
-.row-enterprise a.link-cta-canonical, .row-enterprise button.link-cta-canonical {
-    background: #fff;
-    color: #772953;
-}
-a.link-cta-ubuntu:hover, a.link-cta-ubuntu:hover, button.cta-ubuntu:hover, form button[type="submit"]:hover, form input[type="submit"]:hover {
-    background: #c03f11;
-    text-decoration: none;
-}
-a.link-cta-canonical:hover, button.cta-canonical:hover {
-    background: #5f2143;
-    text-decoration: none;
-}
-a.link-cta-inverted:hover, .row-enterprise a.link-cta-canonical:hover, button.cta-inverted:hover, .row-enterprise button.cta-canonical:hover {
-    background: #fff;
-    text-decoration: underline;
-}
-a.cta-deactivated, a.cta-deactivated:hover, button.cta-deactivated, button.cta-deactivated:hover {
-    background: #efefef;
-    color: #fff;
-    cursor: not-allowed;
-}
-@media only screen and (min-width: 768px) {
-    a.link-cta-ubuntu, a.link-cta-canonical, a.link-cta-inverted, button.cta-ubuntu, button.cta-canonical, form button[type="submit"], form input[type="submit"] {
-    width: auto;
-}
-}@media only screen and (min-width: 984px) {
-    a.link-cta-ubuntu, a.link-cta-canonical, a.link-cta-inverted, button.cta-ubuntu, button.cta-canonical, form button[type="submit"], form input[type="submit"] {
-    width: auto;
-}
-}form input, form select, form textarea {
-    box-sizing: border-box;
-    width: 100%
-}
-form .fieldset-submit ul {
-    margin-bottom: 0;
-}
-form fieldset .mktError, form fieldset .errMsg, form fieldset .reqMark {
-    color: #df382c;
-}
-form fieldset .mktFormMsg {
-    clear: both;
-    display: block;
-}
-.row {
-    box-sizing: border-box;
-    border-bottom: 1px dotted #888;
-    clear: both;
-    padding: 20px 10px 0;
-    position: relative;
-}
-.row br {
-    display: none;
-}
-.row.no-padding-bottom {
-    padding-bottom: 0 !important;
-}
-.row-grey {
-    background: #f7f7f7;
-}
-.no-border {
-    border: 0;
-}
-#main-content .row-hero {
-    margin-top: 20px;
-    padding-top: 0;
-}
-.strip {
-    width: 100%;
-    display: block;
-}
-.strip-dark {
-    background-color: #2c001e;
-    background-repeat: repeat;
-    color: #fff;
-}
-.strip-dark .list-ubuntu li {
-    border: 0;
-}
-.strip-dark .resource {
-    color: #333;
-    box-shadow: none;
-}
-.strip-dark .resource:before {
-    border-right-color: #2c001e;
-}
-#main-content .strip-dark .resource:before {
-    border-bottom-width: 29px;
-    right: -2px;
-    top: -1px;
-}
-#main-content .strip-dark .resource:hover:before {
-    border-bottom-width: 34px;
-}
-#main-content .strip-dark .resource h2 {
-    padding-right: 20px;
-}
-.row-aux {
-    background-color: rgba(255, 255, 255, 0.6);
-    text-align: center;
-}
-.row-aux h2, .row-aux p {
-    text-align: left;
-}
-.row-aux a p {
-    color: #333;
-    margin-bottom: 30px;
-}
-.row-step h2 {
-    position: relative;
-    top: 5px;
-}
-.row-step .step {
-    position: relative;
-    top: -5px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-    border: 3px solid #dd4814;
-    color: #dd4814;
-    line-height: 32px;
-    text-align: center;
-    background-color: #fff;
-    font-size: 23px;
-    font-weight: 400;
-}
-@media only screen and (min-width: 768px) {
-    .row {
-    padding: 30px;
-}
-#main-content .row-hero {
-    margin-top: 40px;
-}
-}@media only screen and (min-width: 769px) {
-    .row-step .step {
-    height: 42px;
-    width: 42px;
-    line-height: 42px;
-}
-.row br {
-    display: block;
-}
-}@media only screen and (min-width: 984px) {
-    .row br {
-    display: block;
-}
-.row {
-    padding: 60px 40px 40px;
-}
-.no-border {
-    border: 0;
-}
-}.row.row-image-centered, div.box-image-centered, div.row-image-centered, div.row.row-image-centered {
-    padding: 20px 10px 0;
-}
-.row-box.row-image-centered {
-    padding-top: 20px;
-    padding-bottom: 20px;
-}
-.row.row-image-centered {
-    padding-top: 40px;
-    padding-bottom: 40px;
-}
-.row-hero.row-image-centered {
-    padding-top: 0;
-}
-div.row-image-centered div, div.row-image-centered span, div.box-image-centered div, div.box-image-centered span, div.row.row-image-centered div, div.row.row-image-centered span {
-    float: none;
-}
-div.row-image-centered span, div.box-image-centered span, div.row.row-image-centered span {
-    width: 100%
-}
-div.row-image-centered span img, div.box-image-centered span img, div.row.row-image-centered span img {
-    height: auto;
-    max-width: 100%;
-    display: block;
-    padding: 0;
-    margin: 0 auto;
-    margin-bottom: 20px;
-}
-div.row-image-centered p, div.row-image-centered h2, div.row-image-centered h3, div.box-image-centered p, div.box-image-centered h2, div.box-image-centered h3, div.row.row-image-centered p, div.row.row-image-centered h2, div.row.row-image-centered h3 {
-    float: none;
-}
-@media only screen and (min-width: 768px) {
-    div.row-image-centered, div.row.row-image-centered, div.box-image-centered {
-    box-sizing: border-box;
-    padding-bottom: 20px;
-    display: table;
-}
-div.row-image-centered div, div.row.row-image-centered div, div.box-image-centered div {
-    float: none;
-    display: table-cell;
-    position: relative;
-}
-div.row-image-centered div p, div.row-image-centered div h2, div.row-image-centered div h3, div.row.row-image-centered div p, div.row.row-image-centered div h2, div.row.row-image-centered div h3, div.box-image-centered div p, div.box-image-centered div h2, div.box-image-centered div h3 {
-    display: block;
-    width: 100%;
-    float: left;
-}
-div.row-image-centered div+span img, div.row.row-image-centered div+span img, div.box-image-centered div+span img {
-    padding-right: 0;
-    margin-bottom: 20px;
-}
-div.row-image-centered span, div.row.row-image-centered span, div.box-image-centered span {
-    display: table-cell;
-    float: none;
-    position: relative;
-    text-align: center;
-    top: 0;
-    vertical-align: middle;
-    width: auto;
-}
-div.row-image-centered span img, div.row.row-image-centered span img, div.box-image-centered span img {
-    padding-right: 20px;
-}
-.align-vertically {
-    transform-style: preserve-3d;
-}
-.align-vertically img, .align-vertically div {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-}
-}div.box-image-centered {
-    padding-top: 20px;
-}
-@media only screen and (min-width: 768px) {
-    .row.row-image-centered, div.box-image-centered, div.row-image-centered, div.row.row-image-centered {
-    padding: 30px;
-}
-div.box-image-centered div+span img, div.row-image-centered div+span img, div.row.row-image-centered div+span img, div.box-image-centered span img.priority-0, div.row-image-centered span img.priority-0, div.row.row-image-centered span img.priority-0 {
-    margin-right: auto;
-    display: table-cell;
-    margin-bottom: 0;
-}
-}@media only screen and (min-width: 984px) {
-    .row.row-image-centered, div.row-image-centered, div.row.row-image-centered, div.box-image-centered {
-    box-sizing: border-box;
-    padding: 60px 40px 60px;
-    display: table;
-}
-.row.row-image-centered div, div.row-image-centered div, div.row.row-image-centered div, div.box-image-centered div {
-    float: none;
-    display: table-cell;
-    position: relative;
-}
-.row.row-image-centered div p, .row.row-image-centered div h2, .row.row-image-centered div h3, div.row-image-centered div p, div.row-image-centered div h2, div.row-image-centered div h3, div.row.row-image-centered div p, div.row.row-image-centered div h2, div.row.row-image-centered div h3, div.box-image-centered div p, div.box-image-centered div h2, div.box-image-centered div h3 {
-    display: block;
-    width: 100%;
-    float: left;
-}
-.row.row-image-centered div+span img, div.row-image-centered div+span img, div.row.row-image-centered div+span img, div.box-image-centered div+span img {
-    padding-right: 0;
-}
-.row.row-image-centered span, div.row-image-centered span, div.row.row-image-centered span, div.box-image-centered span {
-    display: table-cell;
-    float: none;
-    position: relative;
-    text-align: center;
-    top: 0;
-    vertical-align: middle;
-    width: auto;
-}
-.row.row-image-centered span img, div.row-image-centered span img, div.row.row-image-centered span img, div.box-image-centered span img {
-    padding-right: 20px;
-}
-}.box, .box-grey {
-    border-radius: 4px;
-    padding: 1.333em 20px;
-}
-.box {
-    background: #fff;
-    border: 1px solid #dfdcd9;
-}
-.box-grey {
-    background: #f7f7f7;
-    color: #333;
-}
-.box-orange {
-    background: #dd4814;
-    color: #fff;
-}
-.box-highlight {
-    box-shadow: 0 2px 2px 0 #c2c2c2;
-    border: 1px solid #f7f7f7;
-}
-@media only screen and (max-width: 768px) {
-    .box-padded-feature .inline-icons li {
-    float: left;
-    display: block;
-}
-.box-padded-feature .one-col {
-    width: 48px;
-    float: left;
-}
-}
-.list, .list-ubuntu, .list-canonical {
-    list-style: none;
-    margin-left: 0;
-}
-.list li, .list-ubuntu li, .list-canonical li {
-    border-bottom: 1px dotted #888;
-    margin-bottom: 0;
-    padding: 10px 0;
-}
-.list li:last-of-type, .list li.last-item, .list-ubuntu li:last-of-type, .list-ubuntu li.last-item, .list-canonical li:last-of-type, .list-canonical li.last-item {
-    border: 0;
-    padding-bottom: 0;
-}
-.list article {
-    border-bottom: 1px dotted #888;
-    margin-bottom: 0;
-    padding: 10px 0;
-}
-.list-spaced article, .list-spaced li {
-    padding: 30px 0;
-}
-nav .list a {
-    display: block;
-}
-.list-ubuntu li, .list-canonical li {
-    background-repeat: no-repeat;
-    background-position: 0 1em;
-    padding-left: 25px;
-}
-.list-ubuntu li {
-    background-image: url("../images/icons/tick-orange.svg");
-}
-.list-canonical li {
-    background-image: url("../images/icons/tick-midaubergine.svg");
-}
-.list-warm li {
-    background-image: url("../images/icons/tick-warmgrey.svg");
-}
-.list-dark li {
-    background-image: url("../images/icons/tick-darkaubergine.svg");
-}
-.vertical-divider .list-canonical li, .vertical-divider .list-ubuntu li {
-    padding-left: 25px;
-}
-html.no-svg .list-ubuntu li, .opera-mini .list-ubuntu li {
-    background-image: url("../images/icons/tick-orange.png");
-}
-html.no-svg .list-canonical li, .opera-mini .list-canonical li {
-    background-image: url("../images/icons/tick-midaubergine.png");
-}
-html.no-svg .list-warm li, .opera-mini .list-warm li {
-    background-image: url("../images/icons/tick-warmgrey.png");
-}
-html.no-svg .list-dark li, .opera-mini .list-dark li {
-    background-image: url("../images/icons/tick-darkaubergine.png");
-}
-.no-bullets {
-    list-style: none;
-    margin-left: 0;
-}
-.row .combined-list ul, .row .combined-list div {
-    margin-bottom: 0;
-}
-.row .combined-list li.last-item {
-    border-bottom: 1px dotted #888;
-    padding-bottom: 10px;
-}
-.row .combined-list div.last-col, .row .combined-list ul.last-col {
-    margin-bottom: 20px;
-}
-.row .combined-list div.last-col li.last-item, .row .combined-list ul.last-col li.last-item {
-    border-bottom: 0;
-    padding-bottom: 0;
-}
-.inline {
-    margin-left: 0;
-}
-.inline li {
-    display: inline;
-    list-style: none;
-    margin-left: 0;
-    float: left;
-}
-@media only screen and (min-width: 768px) {
-    .row .combined-list ul, .row .combined-list div {
-    margin-bottom: 20px;
-}
-.row .combined-list li.last-item {
-    border-bottom: 0;
-    padding-bottom: 0;
-}
-}ul.inline-logos {
-    float: left;
-    margin-left: 0;
-    padding: 0;
-    text-align: center;
-    width: 100%
-}
-ul.inline-logos li {
-    clear: none;
-    display: inline-block;
-    float: none;
-    margin: 10px 20px;
-    padding: 0;
-}
-ul.inline-logos li.clear-row {
-    clear: left;
-}
-ul.inline-logos li.last-item {
-    border: 0;
-}
-ul.inline-logos img {
-    transition: all 0.5s ease-out;
-    vertical-align: middle;
-    max-width: 115px;
-    max-height: 32px;
-}
-.inline-icons {
-    margin: 0 0 20px;
-}
-.inline-icons li {
-    margin-right: 20px;
-    margin-bottom: 20px;
-    text-align: left;
-    display: inline-block;
-}
-.inline-icons li.last-item {
-    margin-right: 0;
-}
-.inline-icons.no-margin-bottom li {
-    margin-bottom: 0;
-}
-.inline-icons img {
-    vertical-align: middle;
-    max-width: 115px;
-    max-height: 32px;
-}
-@media only screen and (max-width: 768px) {
-    ul.inline-logos img {
-    max-width: 172px;
-    max-height: 48px;
-}
-}@media only screen and (min-width: 769px) {
-    ul.inline-logos li {
-    clear: none;
-    display: inline-block;
-    height: auto;
-    margin: 20px 0;
-    line-height: 60px;
-    padding: 0 40px;
-}
-ul.inline-logos li img {
-    float: none;
-    vertical-align: middle;
-    max-width: 200px;
-    max-height: 45px;
-}
-}@media only screen and (min-width: 984px) {
-    .inline-icons {
-    text-align: left;
-    margin-bottom: 20px;
-}
-}
-.row-quote {
-    border-radius: 0;
-}
-.row-quote blockquote {
-    border-radius: 4px;
-    margin: 0;
-    padding: 0;
-}
-.row-quote blockquote p {
-    margin-bottom: .75em;
-    line-height: 1.3;
-    color: #333;
-    padding-left: 10px;
-    padding-right: 10px;
-    text-indent: 0;
-}
-.row-quote blockquote span {
-    font-weight: bold;
-    color: #dd4814;
-    line-height: 0;
-    position: relative;
-    left: -5px;
-}
-.row-quote blockquote span+span {
-    left: 5px;
-}
-.row-quote blockquote cite {
-    color: #333;
-    font-style: normal;
-    margin-bottom: 0;
-    font-size: .75em;
-    text-indent: -14px;
-    text-indent: 0;
-}
-@media only screen and (min-width: 768px) {
-    .row-quote blockquote {
-    text-indent: -7px;
-}
-.pull-quote {
-    text-indent: -.4em;
-}
-.row-quote blockquote p {
-    font-size: 1.77357em;
-    margin-bottom: 0.48329em;
-}
-blockquote.pull-quote p, .row-quote blockquote p {
-    padding-left: 0;
-    padding-right: 0;
-    text-indent: -.7em;
-}
-blockquote.pull-quote p span, .row-quote blockquote p span {
-    font-size: 1.391304348em;
-}
-blockquote.pull-quote p cite, .row-quote blockquote p cite {
-    margin-left: 0;
-    text-indent: 0;
-}
-blockquote.pull-quote p span, .row-quote blockquote p span {
-    top: 5px;
-}
-}@media only screen and (min-width: 769px) {
-    .row-quote blockquote p {
-    font-size: 1.77357em;
-    margin-bottom: 0.48329em;
-    text-indent: -.4em;
-}
-}@media only screen and (min-width: 984px) {
-    .row-quote blockquote {
-    padding: 0 80px 20px;
-    text-indent: -10px;
-}
-blockquote.pull-quote p span, .row-quote blockquote p span {
-    top: 10px;
-}
-}
-
-
-/* CLOUD STYLES */
-
-
-
-code, pre, p {
-    line-height: 1.5;
-}
-body {
-    font-size: 16px;
-}
-@media only screen and (min-width : 768px) {
-    code, pre, p {
-    line-height: 1.6;
-}
-body {
-    font-size: 16px;
-}
-}@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) {
-    body {
-    font-size: 18px;
-}
-}.not-for-medium {
-    display: none;
-}
-@media only screen and (min-width: 985px) {
-    .not-for-medium {
-    display: block;
-}
-}header.banner {
-    background: #000;
-    box-shadow: inset 0 2px 2px -2px #000;
-    margin-bottom: 0;
-}
-header.banner .nav-primary {
-    box-shadow: none;
-}
-header.banner nav.nav-primary {
-    border-bottom: 1px solid #262626;
-    overflow: visible;
-}
-header.banner nav.nav-primary .user-nav {
-    float: right;
-    margin-right: 20px;
-}
-header.banner nav.nav-primary .user-dropdown:hover ul:after {
-    display: none;
-}
-header.banner nav.nav-primary .user-dropdown .menu-link img {
-    margin-right: 10px;
-}
-header.banner nav.nav-primary .user-dropdown .menu-link img.hover {
-    display: none;
-}
-header.banner nav.nav-primary .user-dropdown .menu-link img.normal {
-    display: inline-block;
-}
-header.banner nav.nav-primary .user-dropdown .open .menu-link img.hover, header.banner nav.nav-primary .user-dropdown .menu-link:hover img.hover {
-    display: inline-block;
-}
-header.banner nav.nav-primary .user-dropdown .open .menu-link img.normal, header.banner nav.nav-primary .user-dropdown .menu-link:hover img.normal {
-    display: none;
-}
-header.banner nav.nav-primary .user-dropdown ul {
-    border-radius: 0 0 4px 4px;
-    margin-top: -2px;
-    background-color: #fff;
-    border-width: 0;
-}
-header.banner nav.nav-primary .user-dropdown ul a:hover {
-    background-color: transparent;
-}
-header.banner nav.nav-primary #user-dropdown .dropdown ul {
-    width: auto;
-}
-input[type=text]::-ms-reveal, input[type=text]::-ms-clear {
-    display: none;
-    width: 0;
-    height: 0;
-}
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
-    display: none;
-}
-.contextual-bar {
-    overflow: hidden;
-    background-color: #fff;
-    border-bottom: 1px solid #d4d4d4;
-}
-
-form.search-form {
-    overflow: hidden;
-    width: 45%;
-    position: relative;
-    display: inline-block;
-}
-form.search-form input {
-    border-radius: 0;
-    box-sizing: border-box;
-    border: 0;
-    border-left: 0;
-    margin: 0;
-    width: 100%;
-    height: 60px;
-    float: left;
-    font-size: 1em;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-right: 30px;
-    background-color: transparent;
-    -webkit-appearance: none;
-}
-form.search-form input:-webkit-autofill {
-   -webkit-box-shadow: 0 0 0px 1000px #222 inset;
-   -webkit-text-fill-color: #fff;
-}
-form.search-form input:focus {
-    border-color: #dd4814;
-    background: #222;
-}
-form.search-form button[type=submit], form.search-form button[type=submit]:hover {
-    position: absolute;
-    top: 13px;
-    right: 20px;
-    display: inline-block;
-    height: 30px;
-    width: 30px;
-    padding: 0;
-    line-height: 0;
-    -webkit-appearance: none;
-    background: transparent;
-    background-image: url("../images/search.svg");
-    background-size: 25px;
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-@media only screen and (min-width: 768px) {
-    form.search-form button[type=submit], form.search-form button[type=submit]:hover {
-        position: relative;
-        top: 13px;
-        left: -40px;
-        display: inline-block;
-        height: 30px;
-        width: 30px;
-        padding: 0;
-        line-height: 0;
-        -webkit-appearance: none;
-        background: transparent;
-        background-image: url("../images/search.svg");
-        background-size: 25px;
-        background-repeat: no-repeat;
-        background-position: center center;
-    }
-}
-form.search-form button img {
-    height: 16px;
-}
-
-header.banner nav.nav-primary ul li a.active {
-    padding-bottom: 16px;
-    background-color: #0e0c0b;
-    border-bottom: 3px solid #dd4814;
-    border-left: 1px solid #262626;
-}
-@media only screen and (min-width : 769px) {
-    header.banner .nav-primary ul li,
-    header.banner .nav-primary ul li:last-child {
-        border-bottom: 0;
-        width: auto;
-    }
-    header.banner nav.nav-primary li a:link,
-    header.banner nav.nav-primary li a:visited {
-        border-left: 1px solid #262626;
-        font-weight: 400;
-    }
-    header.banner nav.nav-primary ul li {
-        border-left: 1px solid #262626;
-    }
-    header.banner nav.nav-primary ul li a:hover {
-        background-color: #dd4814;
-    }
-    header.banner nav.nav-primary ul {
-        background-color: transparent;
-        border-right: 1px solid #262626;
-        display: block;
-    }
-    header.banner nav.nav-primary ul li:last-child {
-        border-left: 1px solid #262626;
-        border-right: 0;
-    }
-    header.banner .nav-primary ul li a:active,
-    header.banner .nav-primary ul li a:hover,
-    header.banner .nav-primary ul li a:visited,
-    header.banner nav.nav-primary ul li a:link {
-        border-left: 0;
-    }
-}
-@media only screen and (min-width : 1030px) {
-    header.banner {
-    height: 60px;
-}
-header.banner .nav-primary {
-    width: 100%
-}
-}header.banner .nav-primary:before, header.banner .nav-primary:after {
-    content: "";
-    display: table;
-}
-header.banner .nav-primary:after {
-    clear: both;
-}
-.inner-wrapper:before, .inner-wrapper:after {
-    content: "";
-    display: table;
-}
-.inner-wrapper:after {
-    clear: both;
-}
-body {
-    background-repeat: repeat;
-}
-.row {
-    border: 0;
-    background-color: rgba(255, 255, 255, 0.6);
-}
-@media only screen and (min-width : 769px) {
-    .append-one {
-    margin-right: 10.6%
-}
-.row {
-    padding: 50px 40px 30px;
-}
-}
-.inner-wrapper {
-    border-radius: 0;
-    box-shadow: none;
-    background-color: transparent;
-    background-image: none;
-    margin: 0 auto;
-    padding-bottom: 0;
-    float: none;
-}
-.wrapper {
-    position: static;
-    background: transparent;
-    width: 100%;
-    overflow: hidden;
-}
-img.touch-border {
-    margin-bottom: -50px;
-}
-.inner-wrapper {
-    max-width: 1030px;
-    width: auto;
-    padding-left: 0;
-    padding-right: 0;
-}
-.touch-top {
-    margin-top: -50px;
-}
-@media only screen and (max-width : 1030px) {
-    .inner-wrapper {
-    padding-left: 8px;
-    padding-right: 8px;
-    width: auto;
-}
-}
-.box {
-    display: block;
-}
-.box-dim {
-    background-color: #fafafa;
-}
-@media only screen and (min-width : 768px) {
-    .box {
-    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
-    display: inline-block;
-    margin-bottom: 20px;
-    padding-left: 20px;
-    padding-right: 20px;
-    border: 0;
-}
-}a.indent {
-    box-shadow: inset 0 1px 2px 0 #333;
-    background: rgba(0, 0, 0, 0.1);
-    padding: 10px 30px;
-    text-weight: normal;
-}
-a.indent:hover {
-    background: rgba(0, 0, 0, 0.2);
-}
-a.link-cta-positive, a.link-cta-negative {
-    border-radius: 3px;
-    box-sizing: border-box;
-    background-color: #dd4814;
-    color: #fff;
-    display: inline-block;
-    font-size: 1.14286em;
-    font-weight: 300;
-    text-decoration: none;
-    margin: 0;
-    padding: 8px 14px;
-    text-align: center;
-    transition: background .2s;
-    width: 100%;
-    cursor: pointer;
-}
-a.link-cta-positive:hover, a:hover.link-cta-negative {
-    background-color: #ae3910;
-}a.link-cta-negative {
-    background-color: #b2b2b2;
-}
-a.link-cta-negative:hover {
-    background-color: #888;
-}
-pre {
-    background: transparent;
-    border: 1px solid #888;
-    margin: 0 0 1.5em 0;
-}
-pre:not(:first-child) {
-    margin-top: 1.5em;
-}
-code.language-bash .comment {
-    color: #888;
-}
-#main-content .row-hero {
-    padding-top: 20px;
-    margin-top: 0;
-    margin-bottom: 0;
-}
-#main-content .row-hero .intro {
-    font-size: 16px;
-}
-@media only screen and (min-width : 769px) {
-    #main-content .row-hero {
-    padding-top: 60px;
-}
-#main-content .row-hero .intro {
-    font-size: 1.4375em;
-    margin-bottom: 40px;
-}
-}
-.strip-dark, .strip-light {
-    clear: both;
-}
-.strip-dark {
-    background-color: #2c001e;
-    background-image: none;
-    background-repeat: repeat;
-    color: #fff;
-}
-.strip-dark.solid {
-    background-image: none;
-    background-color: #2c001e;
-}
-.strip-dark ul, .strip-dark ol {
-    margin: 0;
-    padding: 0;
-}
-.strip-light {
-    background-color: rgba(255, 255, 255, 0.6);
-}
-.strip-dark .connected-list li, .strip-light .connected-list li {
-    margin-bottom: 10px;
-    min-height: 52px;
-}
-.strip-white {
-    background: #fff;
-}
-.strip-trans {
-    background: transparent;
-}
-.strip-green {
-    background-image: linear-gradient(to right,  #6fad23,  #7cc227);
-    overflow: hidden;
-}
-.strip-green, .strip-green a {
-    color: #fff;
-}
-.strip-blue {
-    background-image: linear-gradient(to right,  #1076a2,  #359fcd);
-    overflow: hidden;
-}
-.strip-blue, .strip-blue a {
-    color: #fff;
-}
 
=== removed directory 'www/src/css/v2'
=== removed file 'www/src/css/v2/app.css'
=== removed file 'www/src/css/v2/home.css'
--- www/src/css/v2/home.css	2015-03-27 17:22:01 +0000
+++ www/src/css/v2/home.css	1970-01-01 00:00:00 +0000
@@ -1,6 +0,0 @@
-.view-home .region-installed {
-}
-
-.view-home .region-installed:empty::after {
-    content: 'empty';
-}
 
=== added file 'www/src/images/cof.svg'
--- www/src/images/cof.svg	1970-01-01 00:00:00 +0000
+++ www/src/images/cof.svg	2015-05-05 15:23:39 +0000
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="285px" height="285px" viewBox="-0.866 -0.866 285 285" enable-background="new -0.866 -0.866 285 285"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#FFFFFF" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0
+	S283.465,63.455,283.465,141.734z"/>
+<path d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92c10.449,0,18.92-8.471,18.92-18.92
+	C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814c-9.051,5.225-12.149,16.793-6.926,25.84
+	c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842C201.08,206.691,189.511,203.59,180.463,208.814z
+	 M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338c-16.56,11.064-28.878,27.978-33.995,47.788
+	c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175
+	C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394
+	c-1.327-20.844-10.432-39.562-24.425-53.319c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757
+	c-6.992-1.935-14.351-2.99-21.96-2.99c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56
+	C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427
+	c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99c1.236-7.601,5.75-14.605,12.943-18.76
+	c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32l-26.968-0.394
+	C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
+	c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
+</svg>
 
=== modified file 'www/src/images/settings.svg'
--- www/src/images/settings.svg	2015-03-26 13:05:32 +0000
+++ www/src/images/settings.svg	2015-05-05 15:23:39 +0000
@@ -1,224 +1,20 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="90"
-   height="90"
-   id="svg4874"
-   version="1.1"
-   inkscape:version="0.48+devel r"
-   viewBox="0 0 90 90.000001"
-   sodipodi:docname="settings.svg">
-  <defs
-     id="defs4876" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#ffffff"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="5.0931703"
-     inkscape:cx="16.286514"
-     inkscape:cy="39.111198"
-     inkscape:document-units="px"
-     inkscape:current-layer="g5449"
-     showgrid="true"
-     showborder="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:object-paths="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-center="true"
-     showguides="false"
-     inkscape:guide-bbox="true"
-     inkscape:snap-global="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid5451"
-       empspacing="6" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="6,77"
-       id="guide4063" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="3,78"
-       id="guide4065" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="55,84"
-       id="guide4067" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="53,87"
-       id="guide4069" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="20,3"
-       id="guide4071" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="20,6"
-       id="guide4073" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="87,7"
-       id="guide4075" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="84,7"
-       id="guide4077" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="58,81"
-       id="guide4074" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="9,74"
-       id="guide4076" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="21,9"
-       id="guide4078" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="81,4"
-       id="guide4080" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata4879">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(67.857146,-84.50504)">
-    <g
-       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
-       id="g4845"
-       style="display:inline">
-      <g
-         transform="matrix(0,-1,-1,0,3554.3623,615.36221)"
-         id="g5449">
-        <rect
-           style="opacity:0.05;color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-           id="rect5415"
-           width="90"
-           height="90.000015"
-           x="3122.3623"
-           y="174"
-           transform="matrix(0,1,1,0,0,0)" />
-        <ellipse
-           ry="29.051676"
-           rx="29.004131"
-           cy="-1772.2792"
-           cx="2632.804"
-           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#ffffff;stroke-width:12.00000191;stroke-miterlimit:4;stroke-dasharray:none;marker:none;enable-background:accumulate"
-           id="path5417"
-           transform="matrix(-0.49964997,0.8662274,-0.8658232,-0.50035007,0,0)"
-           inkscape:transform-center-y="0.00024527103"
-           inkscape:transform-center-x="-0.00022172925" />
-        <path
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-           d="m 226,3124.3473 -13.99991,2.09 0,13.9535 13.99991,0 0,-16.043 z"
-           id="path4168"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccccc"
-           inkscape:transform-center-x="-4.1e-05"
-           inkscape:transform-center-y="-34.49325" />
-        <path
-           inkscape:transform-center-y="-26.3889"
-           inkscape:transform-center-x="-22.171866"
-           sodipodi:nodetypes="cccccc"
-           inkscape:connector-curvature="0"
-           id="path4170"
-           d="m 251.36903,3139.6765 -10.7824,-8.9301 -9.61192,11.4551 10.72455,8.9989 9.66945,-11.5236 z"
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-        <path
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-           d="m 261.59221,3166.9602 -2.51964,-13.7717 -14.72636,2.5967 2.4311,13.7872 14.81446,-2.6122 z"
-           id="path4172"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccccc"
-           inkscape:transform-center-x="-33.969206"
-           inkscape:transform-center-y="-5.9818502" />
-        <path
-           inkscape:transform-center-y="17.2467"
-           inkscape:transform-center-x="-29.833066"
-           sodipodi:nodetypes="cccccc"
-           inkscape:connector-curvature="0"
-           id="path4174"
-           d="m 251.88599,3194.432 6.92212,-12.1693 -12.95017,-7.4767 -6.99991,12.1242 13.02762,7.5215 z"
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-        <path
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-           d="m 226.79206,3209.2376 13.12493,-4.8728 -5.11448,-14.0517 -13.15552,4.7883 5.14501,14.1357 z"
-           id="path4176"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccccc"
-           inkscape:transform-center-x="-11.781986"
-           inkscape:transform-center-y="32.41305" />
-        <path
-           inkscape:transform-center-y="32.37075"
-           inkscape:transform-center-x="11.797464"
-           sodipodi:nodetypes="cccccc"
-           inkscape:connector-curvature="0"
-           id="path4178"
-           d="m 198.05214,3204.4493 13.18646,4.7037 5.11434,-14.0517 -13.15558,-4.7882 -5.14494,14.1358 z"
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-        <path
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-           d="m 179.11394,3182.3076 7.07794,12.0793 12.95007,-7.4768 -6.99996,-12.1242 -13.02757,7.5215 z"
-           id="path4180"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccccc"
-           inkscape:transform-center-x="29.872059"
-           inkscape:transform-center-y="17.2241" />
-        <path
-           inkscape:transform-center-y="-5.9897497"
-           inkscape:transform-center-x="33.924899"
-           sodipodi:nodetypes="cccccc"
-           inkscape:connector-curvature="0"
-           id="path4182"
-           d="m 178.83885,3153.1728 -2.34241,13.8029 14.72633,2.5966 2.431,-13.7872 -14.81442,-2.6121 z"
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-        <path
-           style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-           d="m 197.35561,3130.6774 -10.66672,9.068 9.61196,11.455 10.72449,-8.999 -9.66948,-11.5235 z"
-           id="path4184"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccccc"
-           inkscape:transform-center-x="22.142889"
-           inkscape:transform-center-y="-26.423399" />
-      </g>
-    </g>
-  </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="285px" height="285px" viewBox="0 0 285 285" enable-background="new 0 0 285 285" xml:space="preserve">
+<path fill="#FFFFFF" d="M270.475,144.479l14.528-3.572c-0.095-7.643-0.796-15.379-2.167-23.151
+	c-1.364-7.737-3.339-15.215-5.849-22.4l-14.835,1.608c-4.896-12.86-11.804-24.726-20.342-35.213l8.829-12.07
+	c-4.986-5.793-10.496-11.269-16.542-16.341c-6.019-5.05-12.337-9.509-18.879-13.4l-10.338,10.776
+	c-11.724-6.557-24.583-11.32-38.212-13.925l-0.993-14.902C158.132,0.652,150.393,0,142.5,0c-7.857,0-15.563,0.646-23.075,1.87
+	l-0.994,14.9c-13.631,2.594-26.494,7.348-38.223,13.895L69.868,19.886c-6.572,3.904-12.92,8.379-18.965,13.452
+	c-6.02,5.051-11.508,10.499-16.475,16.264l8.826,12.066C34.708,72.15,27.791,84.012,22.884,96.867L8.046,95.259
+	c-2.525,7.215-4.512,14.723-5.881,22.495c-1.365,7.738-2.067,15.44-2.166,23.049l14.525,3.572
+	c0.201,14.013,2.652,27.479,7.011,40.057l-12.399,8.306c2.703,7.149,6.008,14.179,9.955,21.012
+	c3.928,6.806,8.341,13.157,13.156,19.05l13.412-6.596c8.897,10.284,19.408,19.131,31.133,26.159l-4.164,14.347
+	c6.666,3.738,13.716,7,21.132,9.697c7.383,2.688,14.848,4.717,22.323,6.136l6.031-13.665c6.639,1.063,13.446,1.623,20.385,1.623
+	c6.903,0,13.676-0.554,20.282-1.605l6.033,13.668c7.51-1.422,15.006-3.455,22.422-6.155c7.383-2.687,14.404-5.931,21.044-9.649
+	l-4.163-14.343c11.731-7.019,22.25-15.856,31.155-26.133l13.415,6.597c4.84-5.916,9.275-12.293,13.221-19.128
+	c3.928-6.804,7.222-13.802,9.918-20.919l-12.396-8.303C267.801,171.955,270.263,158.49,270.475,144.479z M142.5,227.5
+	c-46.9,0-85-38.1-85-85c0-46.9,38.1-85,85-85c46.9,0,85,38.1,85,85C227.5,189.4,189.4,227.5,142.5,227.5z"/>
+</svg>
 
=== modified file 'www/src/js/app.js'
--- www/src/js/app.js	2015-04-11 15:14:07 +0000
+++ www/src/js/app.js	2015-05-05 15:23:39 +0000
@@ -1,4 +1,5 @@
 // app.js
+'use strict';
 
 var $ = require('jquery');
 var Backbone = require('backbone');
@@ -8,12 +9,12 @@
 if (window.__agent) {
   window.__agent.start(Backbone, Marionette);
 }
-var RootView = require('./views/root.js');
+var MainView = require('./views/layout-main.js');
 var router = require('./routers/router.js');
 
 var webdm = new Marionette.Application();
-var rootView = new RootView();
-rootView.render();
+var mainView = new MainView();
+mainView.render();
 
 webdm.on('start', function() {