Remove jQuery Mobile and restyle.

2025-03-04 08:39:12 +00:00 · 2013-01-25 17:54:45 +00:00 · 2013-01-25 17:54:45 +00:00 · 0d53fc404d
commit 0d53fc404d
parent c9c439326f
55 changed files with 1911 additions and 77 deletions
--- a/index.html
+++ b/index.html
@ -1,9 +1,8 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" charset="utf-8">
  <head>
    <title>London Underground Status</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
    <link rel="stylesheet" href="stylesheets/main.css" />
    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script src="javascripts/libs/require.js" data-main="javascripts/main"></script>
@ -11,29 +10,27 @@

  <body class="loading">

-    <div data-role="page" data-add-back-btn="true">
+    <div data-role="page">

-      <header role="banner" data-role="header" data-position="fixed">
+      <header role="banner">
        <h1>Tube Status</h1>
-        <a href="/" id="refresh" data-icon="refresh" class="ui-btn-right">Refresh</a>
+        <a href="/" id="refresh" title="Refresh">&#x27F3;</a>
      </header>

-      <section role="main" data-role="content">
-        <ul id="line-list" class="main-list" data-role="listview">
+      <section role="main">
+        <ul id="line-list" class="main-list">
        </ul>
      </section>

-      <footer data-role="footer" data-position="fixed">
-        <div data-role="navbar">
-          <ul>
-            <li><a href="#" id="now" class="ui-btn-active ui-state-persist">Now</a></li>
-            <li><a href="#" id="tomorrow">Tomorrow</a></li>
-            <li><a href="#" id="weekend">Weekend</a></li>
-          </ul>
-        </div><!-- /navbar -->
+      <footer>
+        <ul>
+          <li><a href="#" id="now" class="selected">Now</a></li>
+          <li><a href="#" id="tomorrow">Tomorrow</a></li>
+          <li><a href="#" id="weekend">Weekend</a></li>
+        </ul>
      </footer>

-    </div><!-- /page -->
+    </div>

  </body>
 </html>
--- a/javascripts/app.js
+++ b/javascripts/app.js
@ -1,36 +1,18 @@
-define(['jquerymobile',
-        'backbone',
+define(['backbone',
        'mustache',
        'collections/lines',
+        'views/main',
        'views/line_list'],
-function(a, Backbone, Mustache, LinesCollection, LineList) {
+function(Backbone, Mustache, LinesCollection, Main, LineList) {
  return {
    initialize: function() {
-      $('body').removeClass('loading');
-      var refetch = function() {
-        $.mobile.loading('show');
-        lines.fetch({
-          success: function() {
-            $.mobile.loading('hide');
-          }
-        });
-      }

      lines = new LinesCollection;
+      main = new Main({ collection: lines });
      lineList = new LineList({ collection: lines });
      lines.url = lines.urls.now;

      lines.fetch();
-
-      $('#refresh').on("click", function() {
-        refetch();
-        return false;
-      });
-
-      $('footer a').on("click", function() {
-        lines.url = lines.urls[this.id];
-        refetch();
-      });
    }
  };
 });
--- a/javascripts/libs/json.js
+++ b/javascripts/libs/json.js
@ -0,0 +1,59 @@
+/** @license
+ * RequireJS plugin for loading JSON files
+ * - depends on Text plugin and it was HEAVILY "inspired" by it as well.
+ * Author: Miller Medeiros
+ * Version: 0.3.0 (2012/10/29)
+ * Released under the MIT license
+ */
+define(['text'], function(text){
+
+    var CACHE_BUST_QUERY_PARAM = 'bust',
+        CACHE_BUST_FLAG = '!bust',
+        jsonParse = (typeof JSON !== 'undefined' && typeof JSON.parse === 'function')? JSON.parse : function(val){
+            return eval('('+ val +')'); //quick and dirty
+        },
+        buildMap = {};
+
+    function cacheBust(url){
+        url = url.replace(CACHE_BUST_FLAG, '');
+        url += (url.indexOf('?') < 0)? '?' : '&';
+        return url + CACHE_BUST_QUERY_PARAM +'='+ Math.round(2147483647 * Math.random());
+    }
+
+    //API
+    return {
+
+        load : function(name, req, onLoad, config) {
+            if ( config.isBuild && (config.inlineJSON === false || name.indexOf(CACHE_BUST_QUERY_PARAM +'=') !== -1) ) {
+                //avoid inlining cache busted JSON or if inlineJSON:false
+                onLoad(null);
+            } else {
+                text.get(req.toUrl(name), function(data){
+                    if (config.isBuild) {
+                        buildMap[name] = data;
+                        onLoad(data);
+                    } else {
+                        onLoad(jsonParse(data));
+                    }
+                },
+                  onLoad.error
+                );
+            }
+        },
+
+        normalize : function (name, normalize) {
+            //used normalize to avoid caching references to a "cache busted" request
+            return (name.indexOf(CACHE_BUST_FLAG) === -1)? name : cacheBust(name);
+        },
+
+        //write method based on RequireJS official text plugin by James Burke
+        //https://github.com/jrburke/requirejs/blob/master/text.js
+        write : function(pluginName, moduleName, write){
+            if(moduleName in buildMap){
+                var content = buildMap[moduleName];
+                write('define("'+ pluginName +'!'+ moduleName +'", function(){ return '+ content +';});\n');
+            }
+        }
+
+    };
+});
--- a/javascripts/main.js
+++ b/javascripts/main.js
@ -1,7 +1,6 @@
 require.config({
  paths: {
    jquery: 'libs/jquery.min',
-    jquerymobile: 'libs/jquery.mobile.min',
    underscore: 'libs/underscore',
    backbone: 'libs/backbone',
    mustache: 'libs/mustache',
--- a/javascripts/templates/line.mustache
+++ b/javascripts/templates/line.mustache
@ -1,5 +1,11 @@
 <li id="{{ id }}">
-  <span class="name">{{{ name }}}</span>
-  {{ #message_count }}<span class="message-count">{{ message_count }}</span>{{ /message_count }}
-  <span class="status {{ status_class }}">{{ status }}</span>
+  <a href="#{{ id }}_messages">
+    <span class="name">{{& name }}</span>
+    {{ #message_count }}<span class="message-count">{{ message_count }}</span>{{ /message_count }}
+    <span class="status {{ status_class }}">{{ status }}</span>
+  </a>
+  {{ #messages }}
+  <div id="#{{ id }}_messages">
+  </div>
+  {{ /messages }}
 </li>
--- a/javascripts/templates/message.mustache
+++ b/javascripts/templates/message.mustache
@ -0,0 +1 @@
+<p>{{ message }}</p>
--- a/javascripts/test_data/now.json
+++ b/javascripts/test_data/now.json
@ -0,0 +1 @@
+{"response":{"lines":[{"name":"Bakerloo","id":"bakerloo","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 13:43:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Central","id":"central","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 14:09:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Circle","id":"circle","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:50:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"District","id":"district","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:29:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"DLR","id":"docklands","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 08:33:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"H'smith &amp; City","id":"hammersmithcity","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 01:35:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Jubilee","id":"jubilee","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 09:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Metropolitan","id":"metropolitan","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 12:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Northern","id":"northern","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 10:18:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Overground","id":"overground","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 15:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Piccadilly","id":"piccadilly","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 07:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Victoria","id":"victoria","status":"minor delays","messages":["Minor delays while we fix a signal failure at Highbury &amp; Islington."],"status_starts":"Wed, 23 Jan 2013 16:24:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Waterloo &amp; City","id":"waterloocity","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 19:58:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"}]}}
--- a/javascripts/test_data/test_data.js
+++ b/javascripts/test_data/test_data.js
@ -0,0 +1,10 @@
+define(['json!test_data/now.json',
+        'json!test_data/tomorrow.json',
+        'json!test_data/weekend.json'],
+function(now, tomorrow, weekend) {
+
+  return {
+    now: now, tomorrow: tomorrow, weekend: weekend
+  }
+
+});
--- a/javascripts/test_data/tomorrow.json
+++ b/javascripts/test_data/tomorrow.json
@ -0,0 +1 @@
+{"response":{"lines":[{"name":"Bakerloo","id":"bakerloo","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 13:43:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Central","id":"central","status":"minor delays","messages":["Minor delays between Leytonstone and Epping while we fix a signal failure at Loughton."],"status_starts":"Wed, 23 Jan 2013 17:37:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Circle","id":"circle","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:50:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"District","id":"district","status":"minor delays","messages":["Minor delays following a person ill on a train at Mile End."],"status_starts":"Wed, 23 Jan 2013 17:49:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"DLR","id":"docklands","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 08:33:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"H'smith &amp; City","id":"hammersmithcity","status":"minor delays","messages":["Minor delays following a person ill on a train at Mile End."],"status_starts":"Wed, 23 Jan 2013 17:49:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Jubilee","id":"jubilee","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 09:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Metropolitan","id":"metropolitan","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 12:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Northern","id":"northern","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 10:18:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Overground","id":"overground","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 15:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Piccadilly","id":"piccadilly","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 07:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Victoria","id":"victoria","status":"severe delays","messages":["Severe delays due to an earlier signal failure at Highbury &amp; Islington. Tickets will be accepted on First Capital Connect (Great Northern), Greater Anglia, Southeastern trains and London buses."],"status_starts":"Wed, 23 Jan 2013 17:19:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Waterloo &amp; City","id":"waterloocity","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 19:58:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"}]}}
--- a/javascripts/test_data/weekend.json
+++ b/javascripts/test_data/weekend.json
@ -0,0 +1,150 @@
+{
+   "response":{
+      "lines":[
+         {
+            "name":"Bakerloo",
+            "id":"bakerloo",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Mon, 21 Jan 2013 13:43:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Central",
+            "id":"central",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Wed, 23 Jan 2013 14:09:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Circle",
+            "id":"circle",
+            "status":"special service",
+            "messages":[
+
+            ],
+            "status_starts":"Tue, 22 Jan 2013 11:50:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"District",
+            "id":"district",
+            "status":"major delays",
+            "messages":[
+              "MONUMENT AND BANK STATIONS: Please avoid using Monument Station to interchange with services from Bank.",
+              "DISTRICT LINE: Sunday 1 March, suspended between Ealing Broadway and Hammersmith."
+            ],
+            "status_starts":"Tue, 22 Jan 2013 11:29:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"DLR",
+            "id":"docklands",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Tue, 22 Jan 2013 08:33:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"H'smith &amp; City",
+            "id":"hammersmithcity",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Tue, 22 Jan 2013 01:35:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Jubilee",
+            "id":"jubilee",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Mon, 21 Jan 2013 09:39:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Metropolitan",
+            "id":"metropolitan",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Mon, 21 Jan 2013 12:39:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Northern",
+            "id":"northern",
+            "status":"part closure",
+            "messages":[
+
+            ],
+            "status_starts":"Wed, 23 Jan 2013 10:18:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Overground",
+            "id":"overground",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Tue, 22 Jan 2013 15:02:02 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Piccadilly",
+            "id":"piccadilly",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Mon, 21 Jan 2013 07:02:02 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Victoria",
+            "id":"victoria",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Mon, 21 Jan 2013 19:31:02 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         },
+         {
+            "name":"Waterloo &amp; City",
+            "id":"waterloocity",
+            "status":"good service",
+            "messages":[
+
+            ],
+            "status_starts":"Mon, 21 Jan 2013 19:58:01 +0000",
+            "status_ends":"",
+            "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000"
+         }
+      ]
+   }
+}
--- a/javascripts/views/line_list.js
+++ b/javascripts/views/line_list.js
@ -25,7 +25,7 @@ function(Backbone,
        html += Mustache.render(lineTemplate, model.toJSON());
      });
      // render the HTML and refresh jQuery Mobile.
-      this.$el.html(html).listview("refresh");
+      this.$el.html(html);
    },

    el: '#line-list'
--- a/javascripts/views/main.js
+++ b/javascripts/views/main.js
@ -0,0 +1,38 @@
+define(['backbone'],
+function(Backbone) {
+
+  var MainView = Backbone.View.extend({
+
+    el: 'body',
+
+    events: {
+      "click #refresh": "refresh",
+      "click footer a": "changeView"
+    },
+
+    initialize: function() {
+      this.collection.on("request", function() {
+        // $.mobile.loading('show');
+      }).on("reset", function() {
+        // $.mobile.loading('hide');
+      });
+    },
+
+    refresh: function(e) {
+      e.preventDefault();
+      this.collection.fetch();
+    },
+
+    changeView: function(e) {
+      e.preventDefault();
+      this.collection.url = this.collection.urls[e.currentTarget.id];
+      $('footer a').removeClass("selected");
+      $(e.currentTarget).addClass("selected");
+      this.collection.fetch();
+    }
+
+  });
+
+  return MainView;
+
+});
--- a/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss
+++ b/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss
@ -0,0 +1,3 @@
+//************************************************************************//
+// These mixins/functions will be deprecated in the next MAJOR version release
+//************************************************************************//
--- a/stylesheets/bourbon/_bourbon.scss
+++ b/stylesheets/bourbon/_bourbon.scss
@ -0,0 +1,47 @@
+// Custom Functions
+@import "functions/compact";
+@import "functions/deprecated-webkit-gradient";
+@import "functions/flex-grid";
+@import "functions/grid-width";
+@import "functions/linear-gradient";
+@import "functions/modular-scale";
+@import "functions/radial-gradient";
+@import "functions/render-gradients";
+@import "functions/tint-shade";
+@import "functions/transition-property-name";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/background";
+@import "css3/background-image";
+@import "css3/background-size";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/perspective";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/clearfix";
+@import "addons/font-family";
+@import "addons/hide-text";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/prefixer";
+@import "addons/timing-functions";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";
--- a/stylesheets/bourbon/addons/_button.scss
+++ b/stylesheets/bourbon/addons/_button.scss
@ -0,0 +1,273 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
+  }
+
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  border-radius: 3px;
+  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 7px 18px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover:not(:disabled) {
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active:not(:disabled) {
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+  }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  border-radius: 5px;
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  padding: 8px 20px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover:not(:disabled) {
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
+    cursor: pointer;
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
+  }
+
+  &:active:not(:disabled) {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+  }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  border-radius: 16px;
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 5px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover:not(:disabled) {
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
+
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    -webkit-background-clip: padding-box;
+  }
+
+  &:active:not(:disabled) {
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}
--- a/stylesheets/bourbon/addons/_clearfix.scss
+++ b/stylesheets/bourbon/addons/_clearfix.scss
@ -0,0 +1,29 @@
+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+//    // Contain all floats within .wrapper
+//    .wrapper {
+//      @include clearfix;
+//      .content,
+//      .sidebar {
+//        float : left;
+//      }
+//    }
+
+@mixin clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
--- a/stylesheets/bourbon/addons/_font-family.scss
+++ b/stylesheets/bourbon/addons/_font-family.scss
@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;
--- a/stylesheets/bourbon/addons/_hide-text.scss
+++ b/stylesheets/bourbon/addons/_hide-text.scss
@ -0,0 +1,15 @@
+@mixin hide-text {
+  background-color: transparent;
+  border:           0;
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}
+
+// A CSS image replacement method that does not require the use of text-indent.
+//
+// Examples
+//
+//   .ir {
+//     @include hide-text;
+//   }
--- a/stylesheets/bourbon/addons/_html5-input-types.scss
+++ b/stylesheets/bourbon/addons/_html5-input-types.scss
@ -0,0 +1,56 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$unquoted-inputs-list: ();
+@each $input-type in $inputs-list {
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-hover: $input-type + ":hover";
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-focus: $input-type + ":focus";
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }
--- a/stylesheets/bourbon/addons/_position.scss
+++ b/stylesheets/bourbon/addons/_position.scss
@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
+    left: $left;
+  }
+}
--- a/stylesheets/bourbon/addons/_prefixer.scss
+++ b/stylesheets/bourbon/addons/_prefixer.scss
@ -0,0 +1,27 @@
+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+@mixin prefixer ($property, $value, $prefixes) {
+
+  @each $prefix in $prefixes {
+
+    @if $prefix == webkit {
+      -webkit-#{$property}: $value;
+    }
+    @else if $prefix == moz {
+      -moz-#{$property}: $value;
+    }
+    @else if $prefix == ms {
+      -ms-#{$property}: $value;
+    }
+    @else if $prefix == o {
+      -o-#{$property}: $value;
+    }
+    @else if $prefix == spec {
+      #{$property}: $value;
+    }
+    @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
--- a/stylesheets/bourbon/addons/_timing-functions.scss
+++ b/stylesheets/bourbon/addons/_timing-functions.scss
@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
--- a/stylesheets/bourbon/css3/_animation.scss
+++ b/stylesheets/bourbon/css3/_animation.scss
@ -0,0 +1,52 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animations...) {
+  @include prefixer(animation, $animations, webkit moz spec);
+}
+
+// Individual Animation Properties
+@mixin animation-name ($names...) {
+  @include prefixer(animation-name, $names, webkit moz spec);
+}
+
+
+@mixin animation-duration ($times...) {
+  @include prefixer(animation-duration, $times, webkit moz spec);
+}
+
+
+@mixin animation-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
+}
+
+
+@mixin animation-iteration-count ($values...) {
+// infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
+}
+
+
+@mixin animation-direction ($directions...) {
+// normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
+}
+
+
+@mixin animation-play-state ($states...) {
+// running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
+}
+
+
+@mixin animation-delay ($times...) {
+  @include prefixer(animation-delay, $times, webkit moz spec);
+}
+
+
+@mixin animation-fill-mode ($modes...) {
+// none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
+}
--- a/stylesheets/bourbon/css3/_appearance.scss
+++ b/stylesheets/bourbon/css3/_appearance.scss
@ -0,0 +1,3 @@
+@mixin appearance ($value) {
+  @include prefixer(appearance, $value, webkit moz ms o spec);
+}
--- a/stylesheets/bourbon/css3/_background-image.scss
+++ b/stylesheets/bourbon/css3/_background-image.scss
@ -0,0 +1,44 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+  background-image: add-prefix($images, webkit);
+  background-image: add-prefix($images, moz);
+  background-image: add-prefix($images, ms);
+  background-image: add-prefix($images, o);
+  background-image: add-prefix($images);
+}
+
+
+@function add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
+
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
+    }
+
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+    }
+  }
+  @return $images-prefixed;
+}
+
+
+//Examples:
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
--- a/stylesheets/bourbon/css3/_background-size.scss
+++ b/stylesheets/bourbon/css3/_background-size.scss
@ -0,0 +1,3 @@
+@mixin background-size ($lengths...) {
+  @include prefixer(background-size, $lengths, webkit moz ms o spec);
+}
--- a/stylesheets/bourbon/css3/_background.scss
+++ b/stylesheets/bourbon/css3/_background.scss
@ -0,0 +1,107 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+  $background-1       , $background-2: false,
+  $background-3: false, $background-4: false,
+  $background-5: false, $background-6: false,
+  $background-7: false, $background-8: false,
+  $background-9: false, $background-10: false,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: background-add-prefix($backgrounds, webkit);
+  background: background-add-prefix($backgrounds, moz);
+  background: background-add-prefix($backgrounds, ms);
+  background: background-add-prefix($backgrounds, o);
+  background: background-add-prefix($backgrounds);
+}
+
+@function extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+
+@function background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List or String
+
+    // If shorthand is a list
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+
+        // Get actual gradient (red, blue)
+        $gradient-args: false;
+        $shorthand-start: false;
+        // Linear gradient and positioning, repeat, etc. values
+        @if type-of($first-member) == list {
+          $gradient-args: nth($first-member, 2);
+          $shorthand-start: 2;
+        }
+        // Linear gradient only
+        @else {
+          $gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue)
+          $shorthand-start: 3;
+        }
+
+        $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+        @for $j from $shorthand-start through length($shorthand) {
+          $gradient: join($gradient, nth($shorthand, $j), space);
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+
+    }
+
+    // If shorthand is a simple string, color or image
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
--- a/stylesheets/bourbon/css3/_border-image.scss
+++ b/stylesheets/bourbon/css3/_border-image.scss
@ -0,0 +1,56 @@
+@mixin border-image($images) {
+  -webkit-border-image: border-add-prefix($images, webkit);
+     -moz-border-image: border-add-prefix($images, moz);
+       -o-border-image: border-add-prefix($images, o);
+          border-image: border-add-prefix($images);
+}
+
+@function border-add-prefix($images, $vendor: false) {
+  $border-image: ();
+  $images-type:  type-of(nth($images, 1));
+  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
+
+  // If input is a gradient
+  @if $images-type == string {
+    @if ($first-var == "linear") or ($first-var == "radial") {
+      @for $i from 2 through length($images) {
+        $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+        $gradient-args: nth($images, $i);          // Get actual gradient (red, blue)
+        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
+      }
+    }
+
+    // If input is a URL
+    @else {
+      $border-image: $images;
+    }
+  }
+
+  // If input is gradient or url + additional args
+  @else if $images-type == list {
+    @for $i from 1 through length($images) {
+      $type: type-of(nth($images, $i));           // Get type of variable - List or String
+
+      // If variable is a list - Gradient
+      @if $type == list {
+        $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
+      }
+
+      // If variable is a string - Image or number
+      @else if ($type == string) or ($type == number) {
+        $border-image: append($border-image, nth($images, $i));
+      }
+    }
+  }
+  @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
--- a/stylesheets/bourbon/css3/_border-radius.scss
+++ b/stylesheets/bourbon/css3/_border-radius.scss
@ -0,0 +1,22 @@
+//************************************************************************//
+// Shorthand Border-radius mixins
+//************************************************************************//
+@mixin border-top-radius($radii) {
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-top-right-radius, $radii, spec);
+}
+
+@mixin border-bottom-radius($radii) {
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
+}
+
+@mixin border-left-radius($radii) {
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+}
+
+@mixin border-right-radius($radii) {
+  @include prefixer(border-top-right-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
+}
--- a/stylesheets/bourbon/css3/_box-shadow.scss
+++ b/stylesheets/bourbon/css3/_box-shadow.scss
@ -0,0 +1,3 @@
+@mixin box-shadow ($shadows...) {
+    @include prefixer(box-shadow, $shadows, webkit spec);
+}
--- a/stylesheets/bourbon/css3/_box-sizing.scss
+++ b/stylesheets/bourbon/css3/_box-sizing.scss
@ -0,0 +1,4 @@
+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  @include prefixer(box-sizing, $box, webkit moz spec);
+}
--- a/stylesheets/bourbon/css3/_columns.scss
+++ b/stylesheets/bourbon/css3/_columns.scss
@ -0,0 +1,47 @@
+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+  @include prefixer(columns, $arg, webkit moz spec);
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+  @include prefixer(column-count, $int, webkit moz spec);
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+  @include prefixer(column-gap, $length, webkit moz spec);
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+  @include prefixer(columns-fill, $arg, webkit moz spec);
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+  @include prefixer(column-rule, $arg, webkit moz spec);
+}
+
+@mixin column-rule-color($color) {
+  @include prefixer(column-rule-color, $color, webkit moz spec);
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+  @include prefixer(column-rule-style, $style, webkit moz spec);
+}
+
+@mixin column-rule-width ($width: none) {
+  @include prefixer(column-rule-width, $width, webkit moz spec);
+}
+
+@mixin column-span($arg: none) {
+// none || all
+  @include prefixer(column-span, $arg, webkit moz spec);
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+  @include prefixer(column-width, $length, webkit moz spec);
+}
--- a/stylesheets/bourbon/css3/_flex-box.scss
+++ b/stylesheets/bourbon/css3/_flex-box.scss
@ -0,0 +1,52 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
+@mixin display-box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+  @include prefixer(box-orient, $orient, webkit moz spec);
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+  @include prefixer(box-pack, $pack, webkit moz spec);
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  @include prefixer(box-align, $align, webkit moz spec);
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  @include prefixer(box-direction, $direction, webkit moz spec);
+}
+
+@mixin box-lines($lines: single) {
+// single|multiple
+  @include prefixer(box-lines, $lines, webkit moz spec);
+}
+
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
+}
+
+@mixin box-flex($value: 0.0) {
+  @include prefixer(box-flex, $value, webkit moz spec);
+}
+
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int, webkit moz spec);
+}
--- a/stylesheets/bourbon/css3/_font-face.scss
+++ b/stylesheets/bourbon/css3/_font-face.scss
@ -0,0 +1,21 @@
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if $asset-pipeline == true {
+      src: font-url('#{$file-path}.eot');
+      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
+           font-url('#{$file-path}.woff')                format('woff'),
+           font-url('#{$file-path}.ttf')                 format('truetype'),
+           font-url('#{$file-path}.svg##{$font-family}') format('svg');
+    } @else {
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
+           url('#{$file-path}.woff')                     format('woff'),
+           url('#{$file-path}.ttf')                      format('truetype'),
+           url('#{$file-path}.svg##{$font-family}')      format('svg');
+    }
+  }
+}
--- a/stylesheets/bourbon/css3/_hidpi-media-query.scss
+++ b/stylesheets/bourbon/css3/_hidpi-media-query.scss
@ -0,0 +1,10 @@
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}
--- a/stylesheets/bourbon/css3/_image-rendering.scss
+++ b/stylesheets/bourbon/css3/_image-rendering.scss
@ -0,0 +1,13 @@
+@mixin image-rendering ($mode:optimizeQuality) {
+
+  @if ($mode == optimize-contrast) {
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-crisp-edges;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: optimize-contrast;
+  }
+
+  @else {
+      image-rendering: $mode;
+  }
+}
--- a/stylesheets/bourbon/css3/_inline-block.scss
+++ b/stylesheets/bourbon/css3/_inline-block.scss
@ -0,0 +1,8 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}
--- a/stylesheets/bourbon/css3/_linear-gradient.scss
+++ b/stylesheets/bourbon/css3/_linear-gradient.scss
@ -0,0 +1,43 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
+                       $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+  background-image:     -moz-linear-gradient($pos, $full);
+  background-image:      -ms-linear-gradient($pos, $full);
+  background-image:       -o-linear-gradient($pos, $full);
+  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+// @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
+// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
--- a/stylesheets/bourbon/css3/_perspective.scss
+++ b/stylesheets/bourbon/css3/_perspective.scss
@ -0,0 +1,8 @@
+@mixin perspective($depth: none) {
+  // none | <length>
+  @include prefixer(perspective, $depth, webkit moz o spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+  @include prefixer(perspective-origin, $value, webkit moz o spec);
+}
--- a/stylesheets/bourbon/css3/_radial-gradient.scss
+++ b/stylesheets/bourbon/css3/_radial-gradient.scss
@ -0,0 +1,78 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: 50% 50%,
+                       $shape-size: ellipse cover,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
+                       $fallback: false) {
+
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+
+    @if ($pos-type != color) or ($first-val != "transparent") {
+      @if ($pos-type == number)
+      or ($first-val == "center")
+      or ($first-val == "top")
+      or ($first-val == "right")
+      or ($first-val == "bottom")
+      or ($first-val == "left") {
+
+        $pos: $value;
+
+        @if $pos == $G1 {
+          $G1: false;
+        }
+      }
+
+      @else if
+         ($first-val == "ellipse")
+      or ($first-val == "circle")
+      or ($first-val == "closest-side")
+      or ($first-val == "closest-corner")
+      or ($first-val == "farthest-side")
+      or ($first-val == "farthest-corner")
+      or ($first-val == "contain")
+      or ($first-val == "cover") {
+
+        $shape-size: $value;
+
+        @if $value == $G1 {
+          $G1: false;
+        }
+
+        @else if $value == $G2 {
+          $G2: false;
+        }
+      }
+    }
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);
+
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color:  $fallback-color;
+  background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
+  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
+  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
+  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
+  background-image:       -o-radial-gradient($pos, $shape-size, $full);
+  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+}
+
+//  Usage: Gradient position and shape-size are required. Color stops are optional.
+//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
--- a/stylesheets/bourbon/css3/_transform.scss
+++ b/stylesheets/bourbon/css3/_transform.scss
@ -0,0 +1,11 @@
+@mixin transform($property: none) {
+//  none | <transform-function>
+  @include prefixer(transform, $property, webkit moz ms o spec);
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
+}
--- a/stylesheets/bourbon/css3/_transition.scss
+++ b/stylesheets/bourbon/css3/_transition.scss
@ -0,0 +1,36 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($properties...) {
+  @if length($properties) >= 1 {
+    @include prefixer(transition, $properties, webkit moz ms o spec);
+  }
+
+  @else {
+    $properties: all 0.15s ease-out 0;
+    @include prefixer(transition, $properties, webkit moz ms o spec);
+  }
+}
+
+@mixin transition-property ($properties...) {
+   -webkit-transition-property: transition-property-names($properties, 'webkit');
+      -moz-transition-property: transition-property-names($properties, 'moz');
+       -ms-transition-property: transition-property-names($properties, 'ms');
+        -o-transition-property: transition-property-names($properties, 'o');
+           transition-property: transition-property-names($properties, false);
+}
+
+@mixin transition-duration ($times...) {
+  @include prefixer(transition-duration, $times, webkit moz ms o spec);
+}
+
+@mixin transition-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+  @include prefixer(transition-timing-function, $motions, webkit moz ms o spec);
+}
+
+@mixin transition-delay ($times...) {
+  @include prefixer(transition-delay, $times, webkit moz ms o spec);
+}
--- a/stylesheets/bourbon/css3/_user-select.scss
+++ b/stylesheets/bourbon/css3/_user-select.scss
@ -0,0 +1,3 @@
+@mixin user-select($arg: none) {
+  @include prefixer(user-select, $arg, webkit moz ms spec);
+}
--- a/stylesheets/bourbon/functions/_compact.scss
+++ b/stylesheets/bourbon/functions/_compact.scss
@ -0,0 +1,11 @@
+// Remove `false` values from a list
+
+@function compact($vars...) {
+  $list: ();
+  @each $var in $vars {
+    @if $var {
+      $list: append($list, $var, comma);
+    }
+  }
+  @return $list;
+}
--- a/stylesheets/bourbon/functions/_deprecated-webkit-gradient.scss
+++ b/stylesheets/bourbon/functions/_deprecated-webkit-gradient.scss
@ -0,0 +1,44 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+
+    @else if $gradient != null {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+  }
+
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+  }
+
+  @return $gradient;
+}
--- a/stylesheets/bourbon/functions/_flex-grid.scss
+++ b/stylesheets/bourbon/functions/_flex-grid.scss
@ -0,0 +1,35 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+//  $fg-column: 60px;             // Column Width
+//  $fg-gutter: 25px;             // Gutter Width
+//  $fg-max-columns: 12;          // Total Columns For Main Container
+//
+//  div {
+//    width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
+//    margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//
+//    p {
+//      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
+//      float: left;
+//      margin: flex-gutter(4);  // returns (25px / 315px) = 7.936508%;
+//    }
+//
+//    blockquote {
+//      float: left;
+//      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+//    }
+//  }
--- a/stylesheets/bourbon/functions/_grid-width.scss
+++ b/stylesheets/bourbon/functions/_grid-width.scss
@ -0,0 +1,13 @@
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+//  $gw-column: 100px;         // Column Width
+//  $gw-gutter: 40px;          // Gutter Width
+//
+//  div {
+//    width: grid-width(4);    // returns 520px;
+//    margin-left: $gw-gutter; // returns 40px;
+//  }
--- a/stylesheets/bourbon/functions/_linear-gradient.scss
+++ b/stylesheets/bourbon/functions/_linear-gradient.scss
@ -0,0 +1,6 @@
+@function linear-gradient($gradients...) {
+  $type: linear;
+  $type-gradient: append($type, $gradients, comma);
+
+  @return $type-gradient;
+}
--- a/stylesheets/bourbon/functions/_modular-scale.scss
+++ b/stylesheets/bourbon/functions/_modular-scale.scss
@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  }
+
+  @if $increment < 0 {
+    $increment: abs($increment);
+    @for $i from 1 through $increment {
+      $value: ($value / $ratio);
+    }
+  }
+
+  @return $value;
+}
+
+//  div {
+//                     Increment Up GR with positive value
+//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+//
+//                     Increment Down GR with negative value
+//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+//
+//                     Can be used with ceil(round up) or floor(round down)
+//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+//  }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, 1.618)
+}
+
+//  div {
+//    font-size: golden-ratio(14px, 1); // returns: 22.652px
+//  }
+//
+// goldenratiocalculator.com
--- a/stylesheets/bourbon/functions/_radial-gradient.scss
+++ b/stylesheets/bourbon/functions/_radial-gradient.scss
@ -0,0 +1,57 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: 50% 50%,
+                       $shape-size: ellipse cover) {
+
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+
+    @if ($pos-type != color) or ($first-val != "transparent") {
+      @if ($pos-type == number)
+      or ($first-val == "center")
+      or ($first-val == "top")
+      or ($first-val == "right")
+      or ($first-val == "bottom")
+      or ($first-val == "left") {
+
+        $pos: $value;
+
+        @if $pos == $G1 {
+          $G1: false;
+        }
+      }
+
+      @else if
+         ($first-val == "ellipse")
+      or ($first-val == "circle")
+      or ($first-val == "closest-side")
+      or ($first-val == "closest-corner")
+      or ($first-val == "farthest-side")
+      or ($first-val == "farthest-corner")
+      or ($first-val == "contain")
+      or ($first-val == "cover") {
+
+        $shape-size: $value;
+
+        @if $value == $G1 {
+          $G1: false;
+        }
+
+        @else if $value == $G2 {
+          $G2: false;
+        }
+      }
+    }
+  }
+
+  $type: radial;
+  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
+
+  @return $type-gradient;
+}
--- a/stylesheets/bourbon/functions/_render-gradients.scss
+++ b/stylesheets/bourbon/functions/_render-gradients.scss
@ -0,0 +1,14 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+  $vendor-gradients: false;
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+  }
+
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}
--- a/stylesheets/bourbon/functions/_tint-shade.scss
+++ b/stylesheets/bourbon/functions/_tint-shade.scss
@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}
--- a/stylesheets/bourbon/functions/_transition-property-name.scss
+++ b/stylesheets/bourbon/functions/_transition-property-name.scss
@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}
--- a/stylesheets/main.css
+++ b/stylesheets/main.css
@ -1,5 +1,104 @@
-body.loading {
-  display: none; }
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+a {
+  text-decoration: none; }
+
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", "Arial", sans-serif; }
+
+header {
+  position: fixed;
+  width: 100%;
+  background: #0019a8;
+  background-color: #8f9fff;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8f9fff), color-stop(100%, #001175));
+  background-image: -webkit-linear-gradient(top, #8f9fff, #001175);
+  background-image: -moz-linear-gradient(top, #8f9fff, #001175);
+  background-image: -ms-linear-gradient(top, #8f9fff, #001175);
+  background-image: -o-linear-gradient(top, #8f9fff, #001175);
+  background-image: linear-gradient(top, #8f9fff, #001175);
+  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+  color: white;
+  height: 2.5em;
+  padding-top: 0.45em;
+  border-bottom: 1px solid #0f0f64; }
+  header h1 {
+    text-align: center;
+    font-size: 1.3em;
+    font-weight: normal;
+    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); }
+  header #refresh {
+    position: absolute;
+    right: 1em;
+    top: 0.25em;
+    border-radius: 0.3em;
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6);
+    padding: 0.1em 0.5em;
+    font-weight: bold;
+    color: white; }
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #111;
+  text-align: center;
+  height: 4em;
+  padding-top: 0.3em; }
+  footer li {
+    display: inline-block;
+    width: 32%; }
+    footer li a {
+      font-size: 0.8em;
+      height: 4.2em;
+      padding: 0.4em;
+      color: white;
+      display: block;
+      border-radius: 0.3em; }
+      footer li a.selected {
+        background-color: #333333;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #111111));
+        background-image: -webkit-linear-gradient(top, #333333, #111111);
+        background-image: -moz-linear-gradient(top, #333333, #111111);
+        background-image: -ms-linear-gradient(top, #333333, #111111);
+        background-image: -o-linear-gradient(top, #333333, #111111);
+        background-image: linear-gradient(top, #333333, #111111);
+        border: 1px solid black;
+        -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
+        box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3); }
+
+section[role="main"] {
+  padding: 2.5em 0 4em; }
+
+ul#line-list {
+  list-style: none;
+  padding: 0; }
+  ul#line-list li a {
+    background: #ffffff;
+    /* Old browsers */
+    background-color: white;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f1f1f1));
+    background-image: -webkit-linear-gradient(top, white, #f1f1f1);
+    background-image: -moz-linear-gradient(top, white, #f1f1f1);
+    background-image: -ms-linear-gradient(top, white, #f1f1f1);
+    background-image: -o-linear-gradient(top, white, #f1f1f1);
+    background-image: linear-gradient(top, white, #f1f1f1);
+    text-shadow: 0 2px 2px white;
+    border-style: solid;
+    border-width: 1px 0;
+    border-color: white white #cccccc;
+    display: block;
+    padding: 0.7em 1em;
+    text-decoration: none; }

 li .name {
  text-shadow: none;
@ -8,14 +107,14 @@ li .name {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1); }
-
 li .status {
  float: right;
  text-transform: capitalize;
  font-size: 0.8em;
+  font-weight: bold;
  padding-top: 0.1em; }
-
 li .message-count {
+  text-shadow: none;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid white;
@ -28,16 +127,12 @@ li .message-count {
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 1em; }
-
 li .good-service {
  color: green; }
-
 li .special-service {
  color: #000099; }
-
 li .part-suspended, li .part-closure, li .minor-delays {
  color: #CC9900; }
-
 li .major-delays {
  color: #CC0000; }

--- a/stylesheets/main.scss
+++ b/stylesheets/main.scss
@ -1,33 +1,124 @@
-body.loading {
-  display: none;
+$header-color: rgb(0, 25, 168);
+
+@import "bourbon/bourbon";
+* {
+  margin: 0;
+  padding: 0;
+  @include box-sizing(border-box);
 }
-li .name {
-  text-shadow: none;
-  padding: 0.2em 0.5em;
-  font-weight: normal;
-  border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+a {
+  text-decoration: none;
 }
-li .status { float: right; text-transform: capitalize; font-size: 0.8em; padding-top: 0.1em; }
-li .message-count {
-  width: 1.2em;
-  height: 1.2em;
-  border: 2px solid white;
-  text-align: center;
-  margin-left: 0.5em;
-  font-weight: normal;
-  font-size: 0.9em;
-  float: right;
-  background: black;
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+}
+header {
+  position: fixed;
+  width: 100%;
+  background: rgb(0, 25, 168);
+  @include linear-gradient(lighten($header-color, 45%), darken($header-color, 10%));
+  @include box-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  color: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  border-radius: 1em;
+  height: 2.5em;
+  padding-top: 0.45em;
+  border-bottom: 1px solid #0f0f64;
+  h1 {
+    text-align: center;
+    font-size: 1.3em;
+    font-weight: normal;
+    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
+  }
+  #refresh {
+    position: absolute;
+    right: 1em;
+    top: 0.25em;
+    border-radius: 0.3em;
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6));
+    padding: 0.1em 0.5em;
+    font-weight: bold;
+    color: white;
+  }
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #111;
+  text-align: center;
+  height: 4em;
+  padding-top: 0.3em;
+  li {
+    display: inline-block;
+    width: 32%;
+    a {
+      font-size: 0.8em;
+      height: 4.2em;
+      padding: 0.4em;
+      color: white;
+      display: block;
+      border-radius: 0.3em;
+      &.selected {
+        @include linear-gradient(#333, #111);
+        border: 1px solid black;
+        @include box-shadow(inset 0 0 3px rgba(255, 255, 255, 0.3));
+      }
+    }
+  }
+}
+
+section[role="main"] {
+  padding: 2.5em 0 4em;
+}
+ul#line-list {
+  list-style: none;
+  padding: 0;
+  li a {
+    background: #ffffff; /* Old browsers */
+    @include linear-gradient(white, #f1f1f1);
+    text-shadow: 0 2px 2px white;
+    border: {
+      style: solid;
+      width: 1px 0;
+      color: #ffffff white #cccccc;
+    }
+    display: block;
+    padding: 0.7em 1em;
+    text-decoration: none;
+  }
+}
+li {
+  .name {
+    text-shadow: none;
+    padding: 0.2em 0.5em;
+    font-weight: normal;
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .status { float: right; text-transform: capitalize; font-size: 0.8em; font-weight: bold; padding-top: 0.1em; }
+  .message-count {
+    text-shadow: none;
+    width: 1.2em;
+    height: 1.2em;
+    border: 2px solid white;
+    text-align: center;
+    margin-left: 0.5em;
+    font-weight: normal;
+    font-size: 0.9em;
+    float: right;
+    background: black;
+    color: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 1em;
+  }
+  .good-service { color: green; }
+  .special-service { color: #000099; }
+  .part-suspended, .part-closure, .minor-delays { color: #CC9900; }
+  .major-delays { color: #CC0000; }
 }
-li .good-service { color: green; }
-li .special-service { color: #000099; }
-li .part-suspended, li .part-closure, li .minor-delays { color: #CC9900; }
-li .major-delays { color: #CC0000; }

 $bakerloo:        #B36305;
 $central:         #E32017;
				`@ -0,0 +1 @@`
				{"response":{"lines":[{"name":"Bakerloo","id":"bakerloo","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 13:43:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Central","id":"central","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 14:09:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Circle","id":"circle","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:50:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"District","id":"district","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:29:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"DLR","id":"docklands","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 08:33:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"H'smith & City","id":"hammersmithcity","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 01:35:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Jubilee","id":"jubilee","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 09:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Metropolitan","id":"metropolitan","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 12:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Northern","id":"northern","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 10:18:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Overground","id":"overground","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 15:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Piccadilly","id":"piccadilly","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 07:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Victoria","id":"victoria","status":"minor delays","messages":["Minor delays while we fix a signal failure at Highbury & Islington."],"status_starts":"Wed, 23 Jan 2013 16:24:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Waterloo & City","id":"waterloocity","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 19:58:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"}]}}