From b2ac20aed174bc7754c7b74faa6efb8df3aa6841 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sat, 15 Aug 2015 13:37:35 +0100
Subject: [PATCH 001/136] Custom form controls improvements: radio & checkbox

These no longer use SVGs (yay) which means they are more easy to modify.

Checkboxes now have two variants:
* a tick - use these classes: `control-indicator--checkbox control-indicator--checkbox--tick`
* a cross - use these classes: `control-indicator--checkbox`

See this screen grab for an example: https://www.dropbox.com/s/jz91afb7bxe7e4h/Screenshot%202015-08-15%2013.36.02.png?dl=0
---
 .../components/_forms-custom-controls.scss    | 139 +++++++++++-------
 1 file changed, 87 insertions(+), 52 deletions(-)

diff --git a/assets/src/scss/partials/components/_forms-custom-controls.scss b/assets/src/scss/partials/components/_forms-custom-controls.scss
index 5e68e137..48626465 100644
--- a/assets/src/scss/partials/components/_forms-custom-controls.scss
+++ b/assets/src/scss/partials/components/_forms-custom-controls.scss
@@ -1,13 +1,15 @@
 /**
- * Custom Checkboxes and radios - modified from WTF forms – http://wtfforms.com/
+ * Custom Checkboxes and radios
+ *
+ * IE9+ :)
  *
  * --------------------------------
  *
  * Checkbox button example HTML
  *
- *	 <label class="control control--custom control--checkbox">
- *		<input type="checkbox" name="myCheckbox" />
- *		<span class="control-indicator"></span>
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+ *		<span class="control-indicator control-indicator--checkbox"></span>
  *		My Checkbox Label Text
  *	</label>
  *
@@ -15,79 +17,114 @@
  *
  * Radio button example HTML
  *
- *	<label class="control control--custom control--radio">
- *		<input type="radio" id="radio1" name="myRadioBtn" />
- *		<span class="control-indicator"></span>
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
+ *		<span class="control-indicator control-indicator--radio"></span>
  *		My Radio Button Label Text
  * 	</label>
  *
  * ================================= */
-
-.control-indicator {
-	position: absolute;
-	top: .25em;
-	left: 0;
-	display: block;
-	width:  19px;
-	height: 19px;
-	line-height: 1;
-	color: #eee;
-	text-align: center;
-	background-color: #ddd;
-	background-size: 50% 50%;
-	background-position: center center;
-	background-repeat: no-repeat;
-	user-select: none;
-}
+$custom-input-bg          : #A3B1B2;
+$custom-input-bg-selected : #fff;
 
 .control--custom {
 	position: relative;
 	display: block;
-	padding-left: 2em;
-	margin-left: 0;
-	color: #555;
 	cursor: pointer;
+}
+
+// Give inline elements some space to the right
+.control--custom--inline {
+	display: inline-block;
+	padding-right: 2em;
+}
+
+// The hidden input
+.control--custom-input {
+	position: absolute;
+	opacity: 0;
+	z-index: -1; /* Put the input behind the label so it doesn't overlay text */
+}
+
+// The new checkbox/radio
+.control-indicator {
+	position: relative;
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	user-select: none;
+	transition: $default-transition;
+	border: 2px solid $custom-input-bg;
+	background-color: $custom-input-bg;
+	box-shadow: 0 0 0 2px transparent, 0 0 0 0px transparent;
+	vertical-align: middle;
+	margin-top: -.1em;
+}
+
+/* Focus */
+.control--custom-input:focus ~ .control-indicator {
+	box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $input-borderColor--focus;
+}
 
-	input {
+/* Checkbox modifiers */
+.control-indicator--checkbox {
+
+	&:before,
+	&:after {
+		content:'';
 		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 90%;
+		height: .14em;
+		background-color: $custom-input-bg-selected;
+		display: block;
 		opacity: 0;
-		z-index: -1; /* Put the input behind the label so it doesn't overlay text */
+		transition: $default-transition;
 	}
 
-	/* Focus */
-	input:focus ~ .control-indicator {
-		box-shadow: 0 0 0 .075em #fff, 0 0 0 .2em lighten($gray, 5%);
+	&:before {
+		transform: translate(-50%, -50%) rotate(45deg);
 	}
 
-	/* Checked state */
-	input:checked ~ .control-indicator {
-		color: #fff;
-		background-color: lighten($gray, 5%);
+	&:after {
+		transform: translate(-50%, -50%) rotate(-45deg);
 	}
+}
+
+.control-indicator--checkbox--tick {
 
-	/* Active */
-	input:active ~ .control-indicator {
-		color: #fff;
-		background-color: lighten($gray, 20%);
+	&:before {
+		transform: translate(-50%, -50%) rotate(45deg);
+		border: .15em solid $custom-input-bg-selected;
+		background-color: transparent;
+		width: 50%;
+		height: 80%;
+		border-top: 0;
+		border-left: 0;
 	}
-}
 
-/* Checkbox modifiers */
-.control--checkbox .control-indicator {
-	border-radius: 25%;
+	&:after {
+		display: none;
+	}
 }
 
-.control--checkbox input:checked ~ .control-indicator {
-	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
+.control--custom-input:checked ~ .control-indicator--checkbox {
+	&:before,
+	&:after {
+		opacity: 1;
+	}
 }
 
+
 /* Radio modifiers */
-.control--radio .control-indicator {
+.control-indicator--radio {
 	border-radius: 50%;
 }
 
-.control--radio input:checked ~ .control-indicator {
-	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
+.control--custom-input:checked ~ .control-indicator--radio {
+	background-color: $custom-input-bg-selected;
+	border: .3em solid $custom-input-bg;
 }
 
 
@@ -105,15 +142,12 @@
 	&:after {
 		content: 'Browse';
 		cursor: pointer;
-
 		display: inline-block;
 		position: absolute;
 		top: 0;
 		right: -1px;
 		bottom: 0;
-
 		padding: .44em 1em 0;
-
 		background-color: lighten($input-borderColor, 5%);
 	}
 
@@ -123,6 +157,7 @@
 	}
 }
 
+
 /**
  * Custom select element
  * http://jsbin.com/juvixufu/165/edit

From 534565c01b31a2ac42722c251acbf1fa66ab4afa Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sat, 15 Aug 2015 13:38:46 +0100
Subject: [PATCH 002/136] added new color var for `$input-borderColor--focus`
 to be used on focused fields

---
 assets/src/scss/partials/components/_forms.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/src/scss/partials/components/_forms.scss b/assets/src/scss/partials/components/_forms.scss
index ff33d174..f8c5e7a6 100644
--- a/assets/src/scss/partials/components/_forms.scss
+++ b/assets/src/scss/partials/components/_forms.scss
@@ -16,6 +16,7 @@
 
 $input-bgColor         : #fff;                // Colour of input background
 $input-borderColor     : #ccc;                // Colour of input borders
+$input-borderColor--focus : $color-primary;   // Colour of input borders when focused
 $form-actions-bgColor  : #f5f5f5;             // Background colour of form actions container (i.e. submit)
 $label-textColor       : $color-text;         // Text colour of form labels and legends
 $input-textColor       : $color-text;         // Text colour of form inputs
@@ -121,7 +122,7 @@ $color-info         : $blue;                  // base colour for info input stat
 	transition: border 200ms ease-in-out;
 
 	&:focus {
-		border-color: darken($input-borderColor, 20%);
+		border-color: $input-borderColor--focus;
 		outline: 0;
 		outline: thin dotted \9; // IE6-9
 	}

From 491a3c3b888820a8fa4eea3a032822c02c25a617 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sat, 15 Aug 2015 13:38:56 +0100
Subject: [PATCH 003/136] tidy code alignment

---
 assets/src/scss/partials/components/_forms.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/src/scss/partials/components/_forms.scss b/assets/src/scss/partials/components/_forms.scss
index f8c5e7a6..967d4af8 100644
--- a/assets/src/scss/partials/components/_forms.scss
+++ b/assets/src/scss/partials/components/_forms.scss
@@ -24,10 +24,10 @@ $input-textColor       : $color-text;         // Text colour of form inputs
 $placeholder-textColor : lighten(#000, 70%);  // Text colour of input placeholder
 
 // Messages & form states and alerts
-$color-warning         : #f4aa47; // base colour for warning input state
-$color-error           : #B94A4D;    // base colour for error input state
+$color-warning         : #f4aa47;             // base colour for warning input state
+$color-error           : #B94A4D;             // base colour for error input state
 $color-success         : $green;              // base colour for success input state
-$color-info         : $blue;                  // base colour for info input state
+$color-info            : $blue;               // base colour for info input state
 
 
 /**

From 336b37221862c9307ef2422c25480671d5874a69 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 16 Aug 2015 09:46:59 +0100
Subject: [PATCH 004/136] improved positioning of the tick

---
 .../scss/partials/components/_forms-custom-controls.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/assets/src/scss/partials/components/_forms-custom-controls.scss b/assets/src/scss/partials/components/_forms-custom-controls.scss
index 48626465..20bbdeb2 100644
--- a/assets/src/scss/partials/components/_forms-custom-controls.scss
+++ b/assets/src/scss/partials/components/_forms-custom-controls.scss
@@ -61,12 +61,12 @@ $custom-input-bg-selected : #fff;
 	margin-top: -.1em;
 }
 
-/* Focus */
+// :focus styles
 .control--custom-input:focus ~ .control-indicator {
 	box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $input-borderColor--focus;
 }
 
-/* Checkbox modifiers */
+// Checkbox modifiers
 .control-indicator--checkbox {
 
 	&:before,
@@ -95,7 +95,8 @@ $custom-input-bg-selected : #fff;
 .control-indicator--checkbox--tick {
 
 	&:before {
-		transform: translate(-50%, -50%) rotate(45deg);
+		top: 0;
+		transform: translateX(-50%) rotate(45deg);
 		border: .15em solid $custom-input-bg-selected;
 		background-color: transparent;
 		width: 50%;
@@ -117,7 +118,7 @@ $custom-input-bg-selected : #fff;
 }
 
 
-/* Radio modifiers */
+// Radio modifiers
 .control-indicator--radio {
 	border-radius: 50%;
 }

From f288df78899517e3ddde284b9e64a2a46fb7a7bb Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 16 Aug 2015 23:17:48 +0100
Subject: [PATCH 005/136] Improved styling for custom checkbox/radio

* Added sass vars to make theming these items more easy
---
 .../components/_forms-custom-controls.scss    | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/assets/src/scss/partials/components/_forms-custom-controls.scss b/assets/src/scss/partials/components/_forms-custom-controls.scss
index 20bbdeb2..5cc7ccbe 100644
--- a/assets/src/scss/partials/components/_forms-custom-controls.scss
+++ b/assets/src/scss/partials/components/_forms-custom-controls.scss
@@ -24,13 +24,16 @@
  * 	</label>
  *
  * ================================= */
-$custom-input-bg          : #A3B1B2;
-$custom-input-bg-selected : #fff;
+$custom-input-border      : #A3B1B2;
+$custom-input-bg          : $custom-input-border;
+$custom-input-selected    : $color-bg;
+$checkbox-indicator-width : .1em;
 
 .control--custom {
 	position: relative;
 	display: block;
 	cursor: pointer;
+	user-select: none;
 }
 
 // Give inline elements some space to the right
@@ -43,7 +46,7 @@ $custom-input-bg-selected : #fff;
 .control--custom-input {
 	position: absolute;
 	opacity: 0;
-	z-index: -1; /* Put the input behind the label so it doesn't overlay text */
+	z-index: -1; // Put the input behind the label so it doesn't overlay text
 }
 
 // The new checkbox/radio
@@ -52,13 +55,12 @@ $custom-input-bg-selected : #fff;
 	display: inline-block;
 	width: 1em;
 	height: 1em;
-	user-select: none;
 	transition: $default-transition;
-	border: 2px solid $custom-input-bg;
+	border: $checkbox-indicator-width solid $custom-input-border;
 	background-color: $custom-input-bg;
-	box-shadow: 0 0 0 2px transparent, 0 0 0 0px transparent;
 	vertical-align: middle;
 	margin-top: -.1em;
+	box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; // Used to animate from when element is in :focus
 }
 
 // :focus styles
@@ -68,16 +70,17 @@ $custom-input-bg-selected : #fff;
 
 // Checkbox modifiers
 .control-indicator--checkbox {
+	border-radius: .2em;
 
 	&:before,
 	&:after {
-		content:'';
+		content: '';
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		width: 90%;
-		height: .14em;
-		background-color: $custom-input-bg-selected;
+		height: $checkbox-indicator-width;
+		background-color: $custom-input-selected;
 		display: block;
 		opacity: 0;
 		transition: $default-transition;
@@ -97,9 +100,9 @@ $custom-input-bg-selected : #fff;
 	&:before {
 		top: 0;
 		transform: translateX(-50%) rotate(45deg);
-		border: .15em solid $custom-input-bg-selected;
+		border: $checkbox-indicator-width solid $custom-input-selected;
 		background-color: transparent;
-		width: 50%;
+		width: 40%;
 		height: 80%;
 		border-top: 0;
 		border-left: 0;
@@ -111,6 +114,9 @@ $custom-input-bg-selected : #fff;
 }
 
 .control--custom-input:checked ~ .control-indicator--checkbox {
+	// Uncomment to make checkboxes circular when checked
+	// border-radius: 50%;
+
 	&:before,
 	&:after {
 		opacity: 1;
@@ -124,8 +130,8 @@ $custom-input-bg-selected : #fff;
 }
 
 .control--custom-input:checked ~ .control-indicator--radio {
-	background-color: $custom-input-bg-selected;
-	border: .3em solid $custom-input-bg;
+	background-color: $custom-input-selected;
+	border: .3em solid $custom-input-border;
 }
 
 

From d9bda78cd1ed8f4f16db07705e88c544d30a6c2d Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 16 Aug 2015 23:58:20 +0100
Subject: [PATCH 006/136] indentation fixes

---
 .../src/scss/partials/components/_forms.scss  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/assets/src/scss/partials/components/_forms.scss b/assets/src/scss/partials/components/_forms.scss
index 967d4af8..f0799cbf 100644
--- a/assets/src/scss/partials/components/_forms.scss
+++ b/assets/src/scss/partials/components/_forms.scss
@@ -14,20 +14,20 @@
  * Define associated Form variables
  */
 
-$input-bgColor         : #fff;                // Colour of input background
-$input-borderColor     : #ccc;                // Colour of input borders
-$input-borderColor--focus : $color-primary;   // Colour of input borders when focused
-$form-actions-bgColor  : #f5f5f5;             // Background colour of form actions container (i.e. submit)
-$label-textColor       : $color-text;         // Text colour of form labels and legends
-$input-textColor       : $color-text;         // Text colour of form inputs
+$input-bgColor            : #fff;                // Colour of input background
+$input-borderColor        : #ccc;                // Colour of input borders
+$input-borderColor--focus : $color-primary;      // Colour of input borders when focused
+$form-actions-bgColor     : #f5f5f5;             // Background colour of form actions container (i.e. submit)
+$label-textColor          : $color-text;         // Text colour of form labels and legends
+$input-textColor          : $color-text;         // Text colour of form inputs
 
-$placeholder-textColor : lighten(#000, 70%);  // Text colour of input placeholder
+$placeholder-textColor    : lighten(#000, 70%);  // Text colour of input placeholder
 
 // Messages & form states and alerts
-$color-warning         : #f4aa47;             // base colour for warning input state
-$color-error           : #B94A4D;             // base colour for error input state
-$color-success         : $green;              // base colour for success input state
-$color-info            : $blue;               // base colour for info input state
+$color-warning            : #f4aa47;             // base colour for warning input state
+$color-error              : #B94A4D;             // base colour for error input state
+$color-success            : $green;              // base colour for success input state
+$color-info               : $blue;               // base colour for info input state
 
 
 /**

From 8eebf117a8d3f9dce089638a8b521e834c8d3dac Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 16 Aug 2015 23:58:49 +0100
Subject: [PATCH 007/136] change headings font family to be same as base font
 family

---
 assets/src/scss/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss
index 8334472b..5512a02a 100644
--- a/assets/src/scss/_variables.scss
+++ b/assets/src/scss/_variables.scss
@@ -47,7 +47,7 @@ $font-family-mono             : Menlo, Monaco, "Courier New", monospace;
 $font-family-base             : $font-family-sans;
 $font-family-alt              : $font-family-serif;
 
-$font-family-headings         : $font-family-serif; // using inherit will use $font-family-base for all headings
+$font-family-headings         : $font-family-base; // using inherit will use $font-family-base for all headings
 $font-weight-headings         : bold;    // instead of browser default, bold
 $line-height-headings         : 1.1;
 

From 6e1264961b1407912b25b84e5ff90ee219b2858a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 24 Aug 2015 14:18:00 +0100
Subject: [PATCH 008/136] Update to use normalize.css v3.0.3

---
 assets/src/scss/_reset.scss | 445 +++++++++++++++++++++++++++---------
 1 file changed, 331 insertions(+), 114 deletions(-)

diff --git a/assets/src/scss/_reset.scss b/assets/src/scss/_reset.scss
index 43d33c01..80a69e79 100644
--- a/assets/src/scss/_reset.scss
+++ b/assets/src/scss/_reset.scss
@@ -1,9 +1,5 @@
 /**
  * Kickoff reset
- *
- * Kickoff uses an amended version of Normalize.css by Nicholas Gallagher
- * http://github.com/necolas/normalize.css
- *
  */
 html {
 	box-sizing: border-box;
@@ -19,206 +15,427 @@ html {
  * Kickoff uses an amended version of this file.
  */
 
-// HTML5 display definitions
-// Corrects block display not defined in IE6/7/8/9 & FF3
-article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary,main {
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+	font-family: sans-serif; /* 1 */
+	-ms-text-size-adjust: 100%; /* 2 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+	margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
 	display: block;
 }
 
-// Corrects inline-block display not defined in IE6/7/8/9 & FF3
-audio,canvas,video {
-	display: inline-block;
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+	display: inline-block; /* 1 */
+	vertical-align: baseline; /* 2 */
 }
 
-// Prevents modern browsers from displaying 'audio' without controls
-// Remove excess height in iOS5 devices
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
 audio:not([controls]) {
 	display: none;
 	height: 0;
 }
 
-// Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
-// Hide the `template` element in IE, Safari, and Firefox < 22.
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
 [hidden],
 template {
 	display: none;
 }
 
-/* ============ */
-/* === BASE === */
-/* ============ */
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
 
-// Addresses margins handled incorrectly in IE6/7
-body { margin: 0; }
+a {
+	background-color: transparent;
+}
 
-// =============
-// === LINKS ===
-// =============
-// Remove the gray background color from active links in IE 10.
-a { background: transparent; }
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
 
-// Addresses outline displayed oddly in Chrome
-a:focus { outline: thin dotted; }
+a:active,
+a:hover {
+	outline: 0;
+}
 
-// Improves readability when focused and also mouse hovered in all browsers
-// people.opera.com/patrickl/experiments/keyboard/test
-a:hover, a:active { outline: 0; }
+/* Text-level semantics
+   ========================================================================== */
 
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
 
-// ========================
-// === EMBEDDED CONTENT ===
-// ========================
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+	font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+	font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+	background: #ff0;
+	color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+	font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
 
-// Remove border when inside `a` element in IE 8/9/10.
 img {
-  border: 0;
+	border: 0;
 }
 
-// Correct overflow not hidden in IE 9/10/11.
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
 svg:not(:root) {
-  overflow: hidden;
+	overflow: hidden;
 }
 
-// ===============
-// === FIGURES ===
-// ===============
-// Addresses margin not present in IE6/7/8/9, S5, O11
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
 figure {
-	margin: 0;
+	margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+	box-sizing: content-box;
+	height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+	overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+	font-family: monospace, monospace;
+	font-size: 1em;
 }
 
-// =============
-// === FORMS ===
-// =============
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
 
-// 1. Correct color not being inherited.
-//    Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 button,
 input,
 optgroup,
 select,
 textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
+	color: inherit; /* 1 */
+	font: inherit; /* 2 */
+	margin: 0; /* 3 */
 }
 
-// Address `overflow` set to `hidden` in IE 8/9/10/11.
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
 button {
-  overflow: visible;
+	overflow: visible;
 }
 
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
-// All other form control elements do not inherit `text-transform` values.
-// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
-// Correct `select` style inheritance in Firefox.
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
 button,
 select {
-  text-transform: none;
+	text-transform: none;
 }
 
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
-//    and `video` controls.
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-//    `input` and others.
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
 button,
 html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
+	-webkit-appearance: button; /* 2 */
+	cursor: pointer; /* 3 */
 }
 
-// Re-set default cursor for disabled elements.
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
 button[disabled],
 html input[disabled] {
-  cursor: default;
+	cursor: default;
 }
 
-// Remove inner padding and border in Firefox 4+.
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
+	border: 0;
+	padding: 0;
 }
 
-// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
-button,
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
 input {
-	line-height: normal; // 1
+	line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
 }
 
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
+	height: auto;
 }
 
-// 1. Addresses appearance set to searchfield in Safari 5, Chrome
-// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
 input[type="search"] {
-	-webkit-appearance: textfield; // 1
-    box-sizing: content-box; /* 2 */
+	-webkit-appearance: textfield; /* 1 */
+	box-sizing: content-box; /* 2 */
 }
 
-// Removes inner padding and search cancel button in S5, Chrome on OS X
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
 	-webkit-appearance: none;
 }
 
-// Removes inner padding and border in FF3+
-// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}
+/**
+ * Define consistent border, margin, and padding.
+ */
 
-// Define consistent border, margin, and padding.
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+	border: 1px solid #c0c0c0;
+	margin: 0 2px;
+	padding: 0.35em 0.625em 0.75em;
 }
 
-// 1. Correct `color` not being inherited in IE 8/9/10/11.
-// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
 legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
+	border: 0; /* 1 */
+	padding: 0; /* 2 */
 }
 
-// 1. Removes default vertical scrollbar in IE6/7/8/9
-// 2. Improves readability and alignment in all browsers
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
 
 textarea {
-	overflow: auto; // 1
-	vertical-align: top; // 2
+	overflow: auto;
 }
 
-// Don't inherit the `font-weight` (applied by a rule above).
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
 optgroup {
-  font-weight: bold;
+	font-weight: bold;
 }
 
+/* Tables
+   ========================================================================== */
 
-// ==============
-// === TABLES ===
-// ==============
+/**
+ * Remove most spacing between table cells.
+ */
 
-// Remove most spacing between table cells.
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 
-td, th {
-  padding: 0;
+td,
+th {
+	padding: 0;
 }

From c7f50a4a1337494daa127bf078b3a172a6b67c62 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 24 Aug 2015 14:24:17 +0100
Subject: [PATCH 009/136] Ref #53 - Move `partials/components/*.scss` to
 `components`

---
 assets/src/scss/{partials => }/components/_block-grids.scss     | 0
 assets/src/scss/{partials => }/components/_buttons.scss         | 0
 assets/src/scss/{partials => }/components/_code.scss            | 0
 .../src/scss/{partials => }/components/_embedded-content.scss   | 0
 assets/src/scss/{partials => }/components/_fluid-video.scss     | 0
 .../scss/{partials => }/components/_forms-custom-controls.scss  | 0
 assets/src/scss/{partials => }/components/_forms.scss           | 0
 assets/src/scss/{partials => }/components/_grid.scss            | 2 +-
 assets/src/scss/{partials => }/components/_lists.scss           | 0
 assets/src/scss/{partials => }/components/_media-object.scss    | 0
 assets/src/scss/{partials => }/components/_scrollbars.scss      | 0
 assets/src/scss/{partials => }/components/_skip-navigation.scss | 0
 assets/src/scss/{partials => }/components/_tables.scss          | 0
 assets/src/scss/{partials => }/components/_tabs.scss            | 0
 assets/src/scss/{ => views}/_print.scss                         | 0
 15 files changed, 1 insertion(+), 1 deletion(-)
 rename assets/src/scss/{partials => }/components/_block-grids.scss (100%)
 rename assets/src/scss/{partials => }/components/_buttons.scss (100%)
 rename assets/src/scss/{partials => }/components/_code.scss (100%)
 rename assets/src/scss/{partials => }/components/_embedded-content.scss (100%)
 rename assets/src/scss/{partials => }/components/_fluid-video.scss (100%)
 rename assets/src/scss/{partials => }/components/_forms-custom-controls.scss (100%)
 rename assets/src/scss/{partials => }/components/_forms.scss (100%)
 rename assets/src/scss/{partials => }/components/_grid.scss (98%)
 rename assets/src/scss/{partials => }/components/_lists.scss (100%)
 rename assets/src/scss/{partials => }/components/_media-object.scss (100%)
 rename assets/src/scss/{partials => }/components/_scrollbars.scss (100%)
 rename assets/src/scss/{partials => }/components/_skip-navigation.scss (100%)
 rename assets/src/scss/{partials => }/components/_tables.scss (100%)
 rename assets/src/scss/{partials => }/components/_tabs.scss (100%)
 rename assets/src/scss/{ => views}/_print.scss (100%)

diff --git a/assets/src/scss/partials/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
similarity index 100%
rename from assets/src/scss/partials/components/_block-grids.scss
rename to assets/src/scss/components/_block-grids.scss
diff --git a/assets/src/scss/partials/components/_buttons.scss b/assets/src/scss/components/_buttons.scss
similarity index 100%
rename from assets/src/scss/partials/components/_buttons.scss
rename to assets/src/scss/components/_buttons.scss
diff --git a/assets/src/scss/partials/components/_code.scss b/assets/src/scss/components/_code.scss
similarity index 100%
rename from assets/src/scss/partials/components/_code.scss
rename to assets/src/scss/components/_code.scss
diff --git a/assets/src/scss/partials/components/_embedded-content.scss b/assets/src/scss/components/_embedded-content.scss
similarity index 100%
rename from assets/src/scss/partials/components/_embedded-content.scss
rename to assets/src/scss/components/_embedded-content.scss
diff --git a/assets/src/scss/partials/components/_fluid-video.scss b/assets/src/scss/components/_fluid-video.scss
similarity index 100%
rename from assets/src/scss/partials/components/_fluid-video.scss
rename to assets/src/scss/components/_fluid-video.scss
diff --git a/assets/src/scss/partials/components/_forms-custom-controls.scss b/assets/src/scss/components/_forms-custom-controls.scss
similarity index 100%
rename from assets/src/scss/partials/components/_forms-custom-controls.scss
rename to assets/src/scss/components/_forms-custom-controls.scss
diff --git a/assets/src/scss/partials/components/_forms.scss b/assets/src/scss/components/_forms.scss
similarity index 100%
rename from assets/src/scss/partials/components/_forms.scss
rename to assets/src/scss/components/_forms.scss
diff --git a/assets/src/scss/partials/components/_grid.scss b/assets/src/scss/components/_grid.scss
similarity index 98%
rename from assets/src/scss/partials/components/_grid.scss
rename to assets/src/scss/components/_grid.scss
index 124a193b..805b7ace 100644
--- a/assets/src/scss/partials/components/_grid.scss
+++ b/assets/src/scss/components/_grid.scss
@@ -7,7 +7,7 @@
  */
 
 /* Import Grid helpers and mixins */
-@import "../../mixins/grid-helpers";
+@import "../mixins/grid-helpers";
 
 
 /**
diff --git a/assets/src/scss/partials/components/_lists.scss b/assets/src/scss/components/_lists.scss
similarity index 100%
rename from assets/src/scss/partials/components/_lists.scss
rename to assets/src/scss/components/_lists.scss
diff --git a/assets/src/scss/partials/components/_media-object.scss b/assets/src/scss/components/_media-object.scss
similarity index 100%
rename from assets/src/scss/partials/components/_media-object.scss
rename to assets/src/scss/components/_media-object.scss
diff --git a/assets/src/scss/partials/components/_scrollbars.scss b/assets/src/scss/components/_scrollbars.scss
similarity index 100%
rename from assets/src/scss/partials/components/_scrollbars.scss
rename to assets/src/scss/components/_scrollbars.scss
diff --git a/assets/src/scss/partials/components/_skip-navigation.scss b/assets/src/scss/components/_skip-navigation.scss
similarity index 100%
rename from assets/src/scss/partials/components/_skip-navigation.scss
rename to assets/src/scss/components/_skip-navigation.scss
diff --git a/assets/src/scss/partials/components/_tables.scss b/assets/src/scss/components/_tables.scss
similarity index 100%
rename from assets/src/scss/partials/components/_tables.scss
rename to assets/src/scss/components/_tables.scss
diff --git a/assets/src/scss/partials/components/_tabs.scss b/assets/src/scss/components/_tabs.scss
similarity index 100%
rename from assets/src/scss/partials/components/_tabs.scss
rename to assets/src/scss/components/_tabs.scss
diff --git a/assets/src/scss/_print.scss b/assets/src/scss/views/_print.scss
similarity index 100%
rename from assets/src/scss/_print.scss
rename to assets/src/scss/views/_print.scss

From 69ca503eaa4842b3ae3eaf5fe60c1c3bdfe28ce5 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 24 Aug 2015 14:24:57 +0100
Subject: [PATCH 010/136] Create new `_links.scss` and remove relevant code
 from `_typography.scss`

---
 assets/src/scss/_typography.scss       | 26 --------------------------
 assets/src/scss/components/_links.scss | 26 ++++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 26 deletions(-)
 create mode 100644 assets/src/scss/components/_links.scss

diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss
index fcd7a51f..3232d1eb 100644
--- a/assets/src/scss/_typography.scss
+++ b/assets/src/scss/_typography.scss
@@ -4,7 +4,6 @@
  * Base
  * Paragraphs
  * Headings
- * Links
  * Lists
  * Definition lists
  * Blockquotes
@@ -128,31 +127,6 @@ small {
 	font-size: 80%;
 }
 
-/**
- * Links
- */
-a {
-	&, &:link {
-		color: $color-link-default;
-		text-decoration: none;
-	}
-
-	&:visited {
-		color: $color-link-visited;
-		text-decoration: none;
-	}
-
-	&:hover, &:focus {
-		color: $color-link-hover;
-		//text-decoration: underline;
-	}
-
-	&:active {
-		color: $color-link-active;
-		//text-decoration: underline;
-	}
-}
-
 
 /**
  * Lists
diff --git a/assets/src/scss/components/_links.scss b/assets/src/scss/components/_links.scss
new file mode 100644
index 00000000..f476ab0a
--- /dev/null
+++ b/assets/src/scss/components/_links.scss
@@ -0,0 +1,26 @@
+/**
+ * Links
+ */
+a {
+	transition: $default-transition;
+
+	&, &:link {
+		color: $color-link-default;
+		text-decoration: none;
+	}
+
+	&:visited {
+		color: $color-link-visited;
+		text-decoration: none;
+	}
+
+	&:hover, &:focus {
+		color: $color-link-hover;
+		//text-decoration: underline;
+	}
+
+	&:active {
+		color: $color-link-active;
+		//text-decoration: underline;
+	}
+}

From 6d87f65aca93580b303884cb9389baa54689c231 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 24 Aug 2015 14:26:47 +0100
Subject: [PATCH 011/136] Update to include new components & print file
 directories

Also add better, more helpful comments that link to the Kickoff docs site
---
 assets/src/scss/_dependencies.scss | 104 +++++++++++------------------
 1 file changed, 38 insertions(+), 66 deletions(-)

diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index 05f25b29..ae32fb81 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -1,75 +1,54 @@
 /**
- * Developed with Kickoff v5.0.0
- * http://trykickoff.github.io/
- * =================================
+ * Site dependencies
+ * See http://trykickoff.github.io/demos/ for more info
  */
 
-// =================================
-// Site dependencies
-// =================================
-
-// =================================
-// Mixins, helpers and functions
-// =================================
-// Most CSS3 vendor prefixed items have a mixin,
-// but we should not need them if autoprefixer is being used
-// See mixins/css3.scss for the full list
-
+/*
+ * Mixins, helpers and functions
+ * =================================
+ * Most CSS3 vendor prefixed items have a mixin,
+ * but we should not need them if autoprefixer is being used
+ * See mixins/css3.scss for the full list
+ */
 @import "functions/functions";
 @import "mixins/mixins";
 
-
-
-// =================================
-// Core variables
-// =================================
-// Edit your color palette and app vars before your begin
-
+/**
+ * Core variables
+ * =================================
+ * Edit your color palette and app vars before your begin
+ */
 @import "color-palette";
 @import "variables";
 
-
-
-
-// CSS Reset
+/* CSS Reset - Normalize etc */
 @import "reset";
 
-// Global typography styles
+/**
+ * Global typography styles
+ * See http://trykickoff.github.io/demos/typography.html for more info
+ */
 @import "typography";
 
-
 /**
  * Components:
- * =================================
- * Buttons
- * Grid
- * Lists
- * Forms
- * Embedded content
- * Media Object
- * Block grids
- * Fluid video
- * Tabs
- * Tables
- * Code
- * Skip navigation
- * Scrollbars
+ * See http://trykickoff.github.io/demos/components.html for more info
  */
-@import "partials/components/buttons";
-@import "partials/components/grid"; // See http://trykickoff.github.io/docs/grid.html for more info
-@import "partials/components/lists";
-@import "partials/components/forms";
-@import "partials/components/forms-custom-controls";
-@import "partials/components/embedded-content";
-@import "partials/components/media-object";
-@import "partials/components/fluid-video";
-@import "partials/components/block-grids";
-@import "partials/components/tabs";
-@import "partials/components/tables";
-@import "partials/components/code";
-@import "partials/components/skip-navigation";
-@import "partials/components/scrollbars";
-
+@import "components/forms"; // http://trykickoff.github.io/demos/forms.html
+@import "components/forms-custom-controls";
+@import "components/links";
+@import "components/buttons";
+@import "components/grid"; // http://trykickoff.github.io/docs/grid.html & http://trykickoff.github.io/demos/grids.html
+@import "components/block-grids";
+@import "components/lists";
+@import "components/embedded-content";
+@import "components/media-object";
+@import "components/fluid-video";
+@import "components/tabs";
+@import "components/tables";
+@import "components/code";
+@import "components/skip-navigation";
+@import "components/scrollbars";
 
 /**
  * Your app styles
@@ -83,7 +62,6 @@
 @import "partials/footer";
 @import "partials/icons";
 
-
 /**
  * Views
  * =================================
@@ -92,14 +70,8 @@
 //@import "views/contact";
 
 
-/**
- * Helper/utility classes
- * =================================
- */
+/* Helper/utility classes */
 @import "helper-classes";
 
-
-/**
- * Print styles
- */
-@import "print";
+/* Print styles */
+@import "views/print";

From ca43319ee4f3f2bcf0a305de47d86680e1408060 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 24 Aug 2015 14:28:57 +0100
Subject: [PATCH 012/136] Update npm packages & node version

Also, separate deps into `dependencies`, `devDependencies` & `optionalDependencies`
---
 package.json | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 721e8c95..56d74cd9 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "kickoff",
   "title": "Kickoff",
   "description": "A lightweight front-end framework for creating scalable, responsive sites",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "homepage": "http://trykickoff.github.io",
   "authors": [
     {
@@ -27,27 +27,27 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=0.11"
+    "node": ">=0.12"
+  },
+  "dependencies": {
+    "cookies-js": "^1.2.1",
+    "swiftclick": "^1.1.5",
+    "trak.js": "^0.5.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "chotto": "^0.1.0",
-    "cookies-js": "^1.2.1",
     "glob": "^5.0.5",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^3.0.0",
-    "grunt-browser-sync": "^2.1.3",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-imagemin": "^0.9.4",
     "grunt-contrib-jshint": "^0.11.2",
     "grunt-contrib-uglify": "^0.9.1",
-    "grunt-contrib-watch": "^0.6.1",
     "grunt-csso": "^0.7.1",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",
-    "grunt-photobox": "^0.8.1",
     "grunt-sass": "^1.0.0",
     "grunt-scss-lint": "^0.3.6",
     "grunt-shimly": "^0.0.7",
@@ -57,9 +57,13 @@
     "jquery": "^1.11.1",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.1.0",
-    "opn": "^1.0.2",
-    "swiftclick": "^1.1.5",
-    "trak.js": "^0.5.0"
+    "opn": "^1.0.2"
+  },
+  "optionalDependencies": {
+    "browser-sync": "^2.8.2",
+    "grunt-browser-sync": "^2.1.3",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-photobox": "^0.8.1"
   },
   "keywords": [],
   "scripts": {

From 5179986c022b59a617fb1ef14e529f284d288a8d Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 24 Aug 2015 14:29:10 +0100
Subject: [PATCH 013/136] compile css

---
 assets/dist/css/kickoff-old-ie.css | 1354 +++++++++++++++++-----------
 assets/dist/css/kickoff.css        | 1224 +++++++++++++++----------
 assets/dist/css/styleguide.css     |    4 +-
 3 files changed, 1555 insertions(+), 1027 deletions(-)

diff --git a/assets/dist/css/kickoff-old-ie.css b/assets/dist/css/kickoff-old-ie.css
index 65349420..b58534a7 100644
--- a/assets/dist/css/kickoff-old-ie.css
+++ b/assets/dist/css/kickoff-old-ie.css
@@ -1,15 +1,23 @@
 @charset "UTF-8";
 /**
- * Developed with Kickoff v5.0.0
- * http://trykickoff.github.io/
+ * Site dependencies
+ * See http://trykickoff.github.io/demos/ for more info
+ */
+/*
+ * Mixins, helpers and functions
+ * =================================
+ * Most CSS3 vendor prefixed items have a mixin,
+ * but we should not need them if autoprefixer is being used
+ * See mixins/css3.scss for the full list
+ */
+/**
+ * Core variables
  * =================================
+ * Edit your color palette and app vars before your begin
  */
+/* CSS Reset - Normalize etc */
 /**
  * Kickoff reset
- *
- * Kickoff uses an amended version of Normalize.css by Nicholas Gallagher
- * http://github.com/necolas/normalize.css
- *
  */
 html {
   -moz-box-sizing: border-box;
@@ -24,44 +32,210 @@ html {
  * http://github.com/necolas/normalize.css
  * Kickoff uses an amended version of this file.
  */
-article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, main {
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+html {
+  font-family: sans-serif;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/**
+ * Remove default margin.
+ */
+body {
+  margin: 0; }
+
+/* HTML5 display definitions
+   ========================================================================== */
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
   display: block; }
 
-audio, canvas, video {
-  display: inline-block; }
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
 
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
 audio:not([controls]) {
   display: none;
   height: 0; }
 
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
 [hidden],
 template {
   display: none; }
 
-/* ============ */
-/* === BASE === */
-/* ============ */
-body {
-  margin: 0; }
-
+/* Links
+   ========================================================================== */
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
 a {
-  background: transparent; }
-
-a:focus {
-  outline: thin dotted; }
+  background-color: transparent; }
 
-a:hover, a:active {
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
   outline: 0; }
 
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold; }
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000; }
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
 img {
   border: 0; }
 
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
 svg:not(:root) {
   overflow: hidden; }
 
+/* Grouping content
+   ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
 figure {
-  margin: 0; }
+  margin: 1em 40px; }
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  -moz-box-sizing: content-box;
+       box-sizing: content-box;
+  height: 0; }
+
+/**
+ * Contain overflow in all browsers.
+ */
+pre {
+  overflow: auto; }
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em; }
 
+/* Forms
+   ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
 button,
 input,
 optgroup,
@@ -74,13 +248,29 @@ textarea {
   margin: 0;
   /* 3 */ }
 
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
 button {
   overflow: visible; }
 
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
 button,
 select {
   text-transform: none; }
 
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
 button,
 html input[type="button"], input[type="reset"],
 input[type="submit"] {
@@ -89,70 +279,126 @@ input[type="submit"] {
   cursor: pointer;
   /* 3 */ }
 
+/**
+ * Re-set default cursor for disabled elements.
+ */
 button[disabled],
 html input[disabled] {
   cursor: default; }
 
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0; }
 
-button,
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
 input {
   line-height: normal; }
 
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   height: auto; }
 
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
 input[type="search"] {
   -webkit-appearance: textfield;
+  /* 1 */
   -moz-box-sizing: content-box;
        box-sizing: content-box;
   /* 2 */ }
 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none; }
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0; }
-
+/**
+ * Define consistent border, margin, and padding.
+ */
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em; }
 
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
 legend {
   border: 0;
   /* 1 */
   padding: 0;
   /* 2 */ }
 
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
 textarea {
-  overflow: auto;
-  vertical-align: top; }
+  overflow: auto; }
 
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
 optgroup {
   font-weight: bold; }
 
+/* Tables
+   ========================================================================== */
+/**
+ * Remove most spacing between table cells.
+ */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-td, th {
+td,
+th {
   padding: 0; }
 
+/**
+ * Global typography styles
+ * See http://trykickoff.github.io/demos/typography.html for more info
+ */
 /**
  * Typography
  * =================================
  * Base
  * Paragraphs
  * Headings
- * Links
  * Lists
  * Definition lists
  * Blockquotes
@@ -196,7 +442,7 @@ p {
  */
 h1, h2, h3, h4, h5, h6 {
   margin: 0;
-  font-family: Georgia, "Times New Roman", Times, serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1.1;
   text-rendering: optimizelegibility;
@@ -237,23 +483,6 @@ h6, .h6, .zeta {
 small {
   font-size: 80%; }
 
-/**
- * Links
- */
-a, a:link {
-  color: #16c98d;
-  text-decoration: none; }
-
-a:visited {
-  color: #16c98d;
-  text-decoration: none; }
-
-a:hover, a:focus {
-  color: #0c6d4d; }
-
-a:active {
-  color: #0c6d4d; }
-
 /**
  * Lists
  */
@@ -395,300 +624,40 @@ samp {
 
 /**
  * Components:
- * =================================
- * Buttons
- * Grid
- * Lists
- * Forms
- * Embedded content
- * Media Object
- * Block grids
- * Fluid video
- * Tabs
- * Tables
- * Code
- * Skip navigation
- * Scrollbars
+ * See http://trykickoff.github.io/demos/components.html for more info
  */
 /**
- * Buttons
+ * Forms
  * =================================
  * Index:
- * - Associated Button Variables
- * - Base button styling
- * – Button Modifiers
- * 	 – btn--primary
- *   – btn--block
+ * - Associated Form Variables
+ * - Generic form styles
+ * - Form inputs and groups
+ * - Form field feedback states
+ * - Horizontal & vertical forms
+ * - Horizontal-specific styles
  */
 /**
- * Define associated Button variables
+ * Define associated Form variables
  */
 /**
- * Base button styles – Based on csswizardry.com/beautons
- *
- * 1. Allow us to better style box model properties.
- * 2. Line different sized buttons up a little nicer.
- * 3. Stop buttons wrapping and looking broken.
- * 4. Make buttons inherit font styles.
- * 5. Force all elements using beautons to appear clickable.
- * 6. Normalise box model styles.
- * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
- *    there is 1em of space above and below that text. We therefore apply 1em
- *    of space to the left and right, as padding, to keep consistent spacing.
- * 8. Fixes odd inner spacing in IE7.
- * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
- *10. Prevents from inheriting default anchor styles.
+ * Generic form styles
+ * =================================
+ * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-above
+ * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html
+ * Usage:
+  	<div class="form-controlGroup">
+  		<label for="name" class="form-label">Name</label>
+  		<div class="form-controlGroup-inputWrapper">
+  			<input type="text" id="name" placeholder="Zander Martineau" class="form-input"/>
+  		</div>
+  	</div>
  */
-.btn, .tabs a {
-  display: inline-block;
-  /* [1] */
-  vertical-align: middle;
-  /* [2] */
-  white-space: nowrap;
-  /* [3] */
-  font-family: inherit;
-  /* [4] */
-  font-size: 100%;
-  /* [4] */
-  cursor: pointer;
-  /* [5] */
-  border: none;
-  /* [6] */
-  margin: 0;
-  /* [6] */
-  padding-top: 0;
-  /* [6] */
-  padding-bottom: 0;
-  /* [6] */
-  line-height: 2.5;
-  /* [7] */
-  height: 2.5em;
-  /* [7] */
-  padding-right: 1.5em;
-  /* [7] */
-  padding-left: 1.5em;
-  /* [7] */
-  overflow: visible;
-  /* [8] */
-  text-align: center;
-  background-color: #95a5a6;
-  border-radius: 5px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-  .btn,
-  .tabs a,
-  .btn:link,
-  .tabs a:link,
-  .btn:visited, .tabs a:visited {
-    color: #fff; }
-  .btn:hover,
-  .tabs a:hover,
-  .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
-    background-color: #798d8f; }
-  .btn,
-  .tabs a,
-  .btn:hover,
-  .tabs a:hover,
-  .btn:active,
-  .tabs a:active,
-  .btn:focus,
-  .tabs a:focus,
-  .btn:visited, .tabs a:visited {
-    text-decoration: none; }
-  .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
-    outline: none; }
-  .btn.disabled,
-  .tabs a.disabled,
-  .btn[disabled], .tabs a[disabled] {
-    cursor: default;
-    background-image: none;
-    opacity: .65; }
-
-.btn--primary {
-  background-color: #16c98d; }
-  .btn--primary,
-  .btn--primary:link,
-  .btn--primary:visited {
-    color: #fff; }
-  .btn--primary:hover,
-  .btn--primary:active,
-  .btn--primary:focus {
-    background-color: #119b6d; }
-
-.btn--block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0; }
-  .btn--block + .btn--block {
-    margin-top: 10px; }
-
-input[type="submit"].btn--block,
-input[type="reset"].btn--block,
-input[type="button"].btn--block {
-  width: 100%; }
-
-/**
- * The Kickoff Grid
- * =================================
- * Default grid styles
- * Media queries
- * Centred columns
- */
-/* Import Grid helpers and mixins */
-/**
- * Basic Usage:
- * =================================
-	<div class="g-row">
-		<div class="g-col g-span4"></div>
-		<div class="g-col g-span8"></div>
-	</div>
- */
-.g-row {
-  width: 100%;
-  margin: 0 auto; }
-  .g-row:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .g-row .g-row {
-    min-width: 0; }
-    .g-row .g-row .g-col {
-      padding: 0; }
-
-.g-col {
-  float: left;
-  min-height: 1px;
-  position: relative;
-  clear: none;
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
-  margin-left: 2%; }
-  .g-col:first-child {
-    margin-left: 0; }
-  .g-col + .g-col:last-child {
-    float: right; }
-  .g-col + .g-col.end {
-    float: left; }
-
-.g-span1 {
-  width: 6.5%; }
-
-.g-span2 {
-  width: 15%; }
-
-.g-span3 {
-  width: 23.5%; }
-
-.g-span4 {
-  width: 32%; }
-
-.g-span5 {
-  width: 40.5%; }
-
-.g-span6 {
-  width: 49%; }
-
-.g-span7 {
-  width: 57.5%; }
-
-.g-span8 {
-  width: 66%; }
-
-.g-span9 {
-  width: 74.5%; }
-
-.g-span10 {
-  width: 83%; }
-
-.g-span11 {
-  width: 91.5%; }
-
-.g-span12 {
-  width: 100%; }
-
-/**
-	 * Offset columns
-	 * http://trykickoff.github.io/demos/grids.html#offset
-	 */
-/**
-	 * Source ordering (push & pull)
-	 * http://trykickoff.github.io/demos/grids.html#source-ordering
-	 */
-/**
- * Centred columns
- */
-.g-col.g-col--centered,
-.g-col.g-col--centred {
-  float: none;
-  margin: 0 auto; }
-
-/*
-	Centred lists
-
-	<ul class="l-list--centred">
-		<li></li>
-	</ul>
-	========================================================================== */
-.l-list--centred, .l-list--centered {
-  text-align: center; }
-  .l-list--centred li, .l-list--centered li {
-    display: inline; }
-
-/*
-	Floated lists
-
-	<ul class="l-list--floated">
-		<li></li>
-	</ul>
-	========================================================================== */
-.l-list--floated:after {
-  content: "";
-  display: table;
-  clear: both; }
-
-.l-list--floated li {
-  float: left;
-  display: inline-block; }
-
-/**
- * Forms
- * =================================
- * Index:
- * - Associated Form Variables
- * - Generic form styles
- * - Form inputs and groups
- * - Form field feedback states
- * - Horizontal & vertical forms
- * - Horizontal-specific styles
- */
-/**
- * Define associated Form variables
- */
-/**
- * Generic form styles
- * =================================
- * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-above
- * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html
- * Usage:
-  	<div class="form-controlGroup">
-  		<label for="name" class="form-label">Name</label>
-  		<div class="form-controlGroup-inputWrapper">
-  			<input type="text" id="name" placeholder="Zander Martineau" class="form-input"/>
-  		</div>
-  	</div>
- */
-.form {
-  margin: 0 0 28px; }
-
-.form-fieldset {
-  padding: 0;
+.form {
+  margin: 0 0 28px; }
+
+.form-fieldset {
+  padding: 0;
   margin: 0;
   border: 0; }
 
@@ -749,7 +718,7 @@ input[type="button"].btn--block {
      -moz-transition: border 200ms ease-in-out;
           transition: border 200ms ease-in-out; }
   .form-input:focus {
-    border-color: #999999;
+    border-color: #16c98d;
     outline: 0;
     outline: thin dotted \9; }
   .form-input[type="image"],
@@ -1015,15 +984,17 @@ input[type="submit"] {
   padding-left: 160px; }
 
 /**
- * Custom Checkboxes and radios - modified from WTF forms – http://wtfforms.com/
+ * Custom Checkboxes and radios
+ *
+ * IE9+ :)
  *
  * --------------------------------
  *
  * Checkbox button example HTML
  *
- *	 <label class="control control--custom control--checkbox">
- *		<input type="checkbox" name="myCheckbox" />
- *		<span class="control-indicator"></span>
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+ *		<span class="control-indicator control-indicator--checkbox"></span>
  *		My Checkbox Label Text
  *	</label>
  *
@@ -1031,172 +1002,524 @@ input[type="submit"] {
  *
  * Radio button example HTML
  *
- *	<label class="control control--custom control--radio">
- *		<input type="radio" id="radio1" name="myRadioBtn" />
- *		<span class="control-indicator"></span>
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
+ *		<span class="control-indicator control-indicator--radio"></span>
  *		My Radio Button Label Text
  * 	</label>
  *
  * ================================= */
-.control-indicator {
-  position: absolute;
-  top: .25em;
-  left: 0;
+.control--custom {
+  position: relative;
   display: block;
-  width: 19px;
-  height: 19px;
-  line-height: 1;
-  color: #eee;
-  text-align: center;
-  background-color: #ddd;
-  background-size: 50% 50%;
-  background-position: center center;
-  background-repeat: no-repeat;
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none; }
 
-.control--custom {
-  position: relative;
-  display: block;
-  padding-left: 2em;
-  margin-left: 0;
-  color: #555;
-  cursor: pointer;
-  /* Focus */
-  /* Checked state */
-  /* Active */ }
-  .control--custom input {
-    position: absolute;
-    opacity: 0;
-    z-index: -1;
-    /* Put the input behind the label so it doesn't overlay text */ }
-  .control--custom input:focus ~ .control-indicator {
-    box-shadow: 0 0 0 0.075em #fff, 0 0 0 0.2em #a3b1b2; }
-  .control--custom input:checked ~ .control-indicator {
-    color: #fff;
-    background-color: #a3b1b2; }
-  .control--custom input:active ~ .control-indicator {
-    color: #fff;
-    background-color: #ccd4d5; }
-
-/* Checkbox modifiers */
-.control--checkbox .control-indicator {
-  border-radius: 25%; }
-
-.control--checkbox input:checked ~ .control-indicator {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); }
-
-/* Radio modifiers */
-.control--radio .control-indicator {
-  border-radius: 50%; }
+.control--custom--inline {
+  display: inline-block;
+  padding-right: 2em; }
+
+.control--custom-input {
+  position: absolute;
+  opacity: 0;
+  z-index: -1; }
+
+.control-indicator {
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  -webkit-transition: all 100ms ease-in-out;
+     -moz-transition: all 100ms ease-in-out;
+          transition: all 100ms ease-in-out;
+  border: 0.1em solid #A3B1B2;
+  background-color: #A3B1B2;
+  vertical-align: middle;
+  margin-top: -.1em;
+  box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
+
+.control--custom-input:focus ~ .control-indicator {
+  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #16c98d; }
+
+.control-indicator--checkbox {
+  border-radius: .2em; }
+  .control-indicator--checkbox:before,
+  .control-indicator--checkbox:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 90%;
+    height: 0.1em;
+    background-color: #f1f1f1;
+    display: block;
+    opacity: 0;
+    -webkit-transition: all 100ms ease-in-out;
+       -moz-transition: all 100ms ease-in-out;
+            transition: all 100ms ease-in-out; }
+  .control-indicator--checkbox:before {
+    -webkit-transform: translate(-50%, -50%) rotate(45deg);
+       -moz-transform: translate(-50%, -50%) rotate(45deg);
+        -ms-transform: translate(-50%, -50%) rotate(45deg);
+            transform: translate(-50%, -50%) rotate(45deg); }
+  .control-indicator--checkbox:after {
+    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+       -moz-transform: translate(-50%, -50%) rotate(-45deg);
+        -ms-transform: translate(-50%, -50%) rotate(-45deg);
+            transform: translate(-50%, -50%) rotate(-45deg); }
+
+.control-indicator--checkbox--tick:before {
+  top: 0;
+  -webkit-transform: translateX(-50%) rotate(45deg);
+     -moz-transform: translateX(-50%) rotate(45deg);
+      -ms-transform: translateX(-50%) rotate(45deg);
+          transform: translateX(-50%) rotate(45deg);
+  border: 0.1em solid #f1f1f1;
+  background-color: transparent;
+  width: 40%;
+  height: 80%;
+  border-top: 0;
+  border-left: 0; }
+
+.control-indicator--checkbox--tick:after {
+  display: none; }
+
+.control--custom-input:checked ~ .control-indicator--checkbox:before,
+.control--custom-input:checked ~ .control-indicator--checkbox:after {
+  opacity: 1; }
+
+.control-indicator--radio {
+  border-radius: 50%; }
+
+.control--custom-input:checked ~ .control-indicator--radio {
+  background-color: #f1f1f1;
+  border: 0.3em solid #A3B1B2; }
+
+/**
+ * Custom file input
+ */
+.form-input--fileWrapper--styled {
+  position: relative;
+  overflow: hidden; }
+  .form-input--fileWrapper--styled:before {
+    content: 'Choose file...'; }
+  .form-input--fileWrapper--styled:after {
+    content: 'Browse';
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    padding: 0.44em 1em 0;
+    background-color: #d9d9d9; }
+  .form-input--fileWrapper--styled .form-input-file {
+    opacity: 0;
+    position: absolute; }
+
+/**
+ * Custom select element
+ * http://jsbin.com/juvixufu/165/edit
+ */
+.form-input--selectWrapper {
+  position: relative;
+  display: block;
+  padding: 0; }
+
+/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
+.form-input--selectWrapper select {
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  margin: 0;
+  background: none;
+  border: 0;
+  outline: none;
+  /* Remove select styling */
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  /* Magic font size number to prevent iOS text zoom */
+  padding: .5em;
+  height: 2.3em;
+  line-height: 1; }
+
+/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .form-input--selectWrapper select::-ms-expand {
+    display: none; } }
+
+/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
+.form-input--selectWrapper:after {
+  background: none;
+  color: #bbb;
+  content: "\25BC";
+  font-size: .7em;
+  padding: 0;
+  position: absolute;
+  right: 1.2em;
+  top: 50%;
+  margin-top: -9px;
+  z-index: 2;
+  /* These hacks make the select behind the arrow clickable in some browsers */
+  pointer-events: none;
+  background: url(#); }
+
+/* This selector targets Firefox only with the trick of making the select 110% but clipped by the container at 100% to hide the arrow. We have to do this because getting rid of select appearance isn't supported consistently */
+.form-input--selectWrapper,
+x:-moz-any-link,
+x:default {
+  overflow: hidden;
+  width: 100%; }
+
+.form-input--selectWrapper select,
+x:-moz-any-link,
+x:default {
+  width: 110%;
+  max-width: 110%;
+  min-width: 110%;
+  /* A zero right padding is needed or the native arrow can show up. Downside is the text will run over the arrow */
+  padding: 0.6em 0 0.5em 0.8em;
+  /* Window is a Firefox way of hiding the arrow, sometimes works */
+  -moz-appearance: window;
+  text-indent: .01px;
+  text-overflow: ""; }
+
+/* Focus style - TODO: Fix in FF */
+/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
+.form-input--selectWrapper:focus::-ms-value {
+  background: transparent;
+  color: #222; }
+
+/* Firefox focus has odd artifacts around the text, this kills that */
+.form-input--selectWrapper:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000; }
+
+option {
+  font-weight: normal; }
+
+/**
+ * Links
+ */
+a {
+  -webkit-transition: all 100ms ease-in-out;
+     -moz-transition: all 100ms ease-in-out;
+          transition: all 100ms ease-in-out; }
+  a, a:link {
+    color: #16c98d;
+    text-decoration: none; }
+  a:visited {
+    color: #16c98d;
+    text-decoration: none; }
+  a:hover, a:focus {
+    color: #0c6d4d; }
+  a:active {
+    color: #0c6d4d; }
+
+/**
+ * Buttons
+ * =================================
+ * Index:
+ * - Associated Button Variables
+ * - Base button styling
+ * – Button Modifiers
+ * 	 – btn--primary
+ *   – btn--block
+ */
+/**
+ * Define associated Button variables
+ */
+/**
+ * Base button styles – Based on csswizardry.com/beautons
+ *
+ * 1. Allow us to better style box model properties.
+ * 2. Line different sized buttons up a little nicer.
+ * 3. Stop buttons wrapping and looking broken.
+ * 4. Make buttons inherit font styles.
+ * 5. Force all elements using beautons to appear clickable.
+ * 6. Normalise box model styles.
+ * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
+ *    there is 1em of space above and below that text. We therefore apply 1em
+ *    of space to the left and right, as padding, to keep consistent spacing.
+ * 8. Fixes odd inner spacing in IE7.
+ * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
+ *10. Prevents from inheriting default anchor styles.
+ */
+.btn, .tabs a {
+  display: inline-block;
+  /* [1] */
+  vertical-align: middle;
+  /* [2] */
+  white-space: nowrap;
+  /* [3] */
+  font-family: inherit;
+  /* [4] */
+  font-size: 100%;
+  /* [4] */
+  cursor: pointer;
+  /* [5] */
+  border: none;
+  /* [6] */
+  margin: 0;
+  /* [6] */
+  padding-top: 0;
+  /* [6] */
+  padding-bottom: 0;
+  /* [6] */
+  line-height: 2.5;
+  /* [7] */
+  height: 2.5em;
+  /* [7] */
+  padding-right: 1.5em;
+  /* [7] */
+  padding-left: 1.5em;
+  /* [7] */
+  overflow: visible;
+  /* [8] */
+  text-align: center;
+  background-color: #95a5a6;
+  border-radius: 5px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+  .btn,
+  .tabs a,
+  .btn:link,
+  .tabs a:link,
+  .btn:visited, .tabs a:visited {
+    color: #fff; }
+  .btn:hover,
+  .tabs a:hover,
+  .btn:active,
+  .tabs a:active,
+  .btn:focus, .tabs a:focus {
+    background-color: #798d8f; }
+  .btn,
+  .tabs a,
+  .btn:hover,
+  .tabs a:hover,
+  .btn:active,
+  .tabs a:active,
+  .btn:focus,
+  .tabs a:focus,
+  .btn:visited, .tabs a:visited {
+    text-decoration: none; }
+  .btn:active,
+  .tabs a:active,
+  .btn:focus, .tabs a:focus {
+    outline: none; }
+  .btn.disabled,
+  .tabs a.disabled,
+  .btn[disabled], .tabs a[disabled] {
+    cursor: default;
+    background-image: none;
+    opacity: .65; }
+
+.btn--primary {
+  background-color: #16c98d; }
+  .btn--primary,
+  .btn--primary:link,
+  .btn--primary:visited {
+    color: #fff; }
+  .btn--primary:hover,
+  .btn--primary:active,
+  .btn--primary:focus {
+    background-color: #119b6d; }
+
+.btn--block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0; }
+  .btn--block + .btn--block {
+    margin-top: 10px; }
+
+input[type="submit"].btn--block,
+input[type="reset"].btn--block,
+input[type="button"].btn--block {
+  width: 100%; }
+
+/**
+ * The Kickoff Grid
+ * =================================
+ * Default grid styles
+ * Media queries
+ * Centred columns
+ */
+/* Import Grid helpers and mixins */
+/**
+ * Basic Usage:
+ * =================================
+	<div class="g-row">
+		<div class="g-col g-span4"></div>
+		<div class="g-col g-span8"></div>
+	</div>
+ */
+.g-row {
+  width: 100%;
+  margin: 0 auto; }
+  .g-row:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .g-row .g-row {
+    min-width: 0; }
+    .g-row .g-row .g-col {
+      padding: 0; }
+
+.g-col {
+  float: left;
+  min-height: 1px;
+  position: relative;
+  clear: none;
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+  margin-left: 2%; }
+  .g-col:first-child {
+    margin-left: 0; }
+  .g-col + .g-col:last-child {
+    float: right; }
+  .g-col + .g-col.end {
+    float: left; }
+
+.g-span1 {
+  width: 6.5%; }
+
+.g-span2 {
+  width: 15%; }
+
+.g-span3 {
+  width: 23.5%; }
+
+.g-span4 {
+  width: 32%; }
+
+.g-span5 {
+  width: 40.5%; }
+
+.g-span6 {
+  width: 49%; }
+
+.g-span7 {
+  width: 57.5%; }
+
+.g-span8 {
+  width: 66%; }
+
+.g-span9 {
+  width: 74.5%; }
+
+.g-span10 {
+  width: 83%; }
 
-.control--radio input:checked ~ .control-indicator {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); }
+.g-span11 {
+  width: 91.5%; }
+
+.g-span12 {
+  width: 100%; }
 
 /**
- * Custom file input
+	 * Offset columns
+	 * http://trykickoff.github.io/demos/grids.html#offset
+	 */
+/**
+	 * Source ordering (push & pull)
+	 * http://trykickoff.github.io/demos/grids.html#source-ordering
+	 */
+/**
+ * Centred columns
  */
-.form-input--fileWrapper--styled {
-  position: relative;
-  overflow: hidden; }
-  .form-input--fileWrapper--styled:before {
-    content: 'Choose file...'; }
-  .form-input--fileWrapper--styled:after {
-    content: 'Browse';
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: -1px;
-    bottom: 0;
-    padding: 0.44em 1em 0;
-    background-color: #d9d9d9; }
-  .form-input--fileWrapper--styled .form-input-file {
-    opacity: 0;
-    position: absolute; }
+.g-col.g-col--centered,
+.g-col.g-col--centred {
+  float: none;
+  margin: 0 auto; }
 
 /**
- * Custom select element
- * http://jsbin.com/juvixufu/165/edit
+ * Block grids
+ * These are suited for repeating blocks of content. See below for usage
+ *
+ * Usage:
+ * <ul class="l-blockGrid l-blockGrid--3up">
+ *     <li></li>
+ * </ul>
+ *
+ * Mobile Usage:
+ * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow">
+ *     <li></li>
+ * </ul>
  */
-.form-input--selectWrapper {
-  position: relative;
+.l-blockGrid {
   display: block;
-  padding: 0; }
-
-/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
-.form-input--selectWrapper select {
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  margin: 0;
-  background: none;
-  border: 0;
-  outline: none;
-  /* Remove select styling */
-  appearance: none;
-  -webkit-appearance: none;
-  /* Magic font size number to prevent iOS text zoom */
-  padding: .5em;
-  height: 2.3em;
-  line-height: 1; }
-
-/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .form-input--selectWrapper select::-ms-expand {
-    display: none; } }
-
-/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
-.form-input--selectWrapper:after {
-  background: none;
-  color: #bbb;
-  content: "\25BC";
-  font-size: .7em;
-  padding: 0;
-  position: absolute;
-  right: 1.2em;
-  top: 50%;
-  margin-top: -9px;
-  z-index: 2;
-  /* These hacks make the select behind the arrow clickable in some browsers */
-  pointer-events: none;
-  background: url(#); }
+  list-style-type: none;
+  margin: 0; }
+  .l-blockGrid:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .l-blockGrid > li {
+    display: block;
+    height: auto; }
+  .l-blockGrid > li {
+    display: block;
+    height: auto;
+    float: left; }
+  .l-blockGrid.l-blockGrid--1up > li {
+    width: 100%; }
+  .l-blockGrid.l-blockGrid--2up > li {
+    width: 50%; }
+  .l-blockGrid.l-blockGrid--3up > li {
+    width: 33.3333333333%; }
+  .l-blockGrid.l-blockGrid--4up > li {
+    width: 25%; }
+  .l-blockGrid.l-blockGrid--5up > li {
+    width: 20%; }
+  .l-blockGrid.l-blockGrid--6up > li {
+    width: 16.6666666667%; }
+  .l-blockGrid.l-blockGrid--7up > li {
+    width: 14.2857142857%; }
+  .l-blockGrid.l-blockGrid--8up > li {
+    width: 12.5%; }
+  .l-blockGrid.l-blockGrid--9up > li {
+    width: 11.1111111111%; }
+  .l-blockGrid.l-blockGrid--10up > li {
+    width: 10%; }
+  .l-blockGrid.l-blockGrid--11up > li {
+    width: 9.0909090909%; }
+  .l-blockGrid.l-blockGrid--12up > li {
+    width: 8.3333333333%; }
 
-/* This selector targets Firefox only with the trick of making the select 110% but clipped by the container at 100% to hide the arrow. We have to do this because getting rid of select appearance isn't supported consistently */
-.form-input--selectWrapper,
-x:-moz-any-link,
-x:default {
-  overflow: hidden;
-  width: 100%; }
+/*
+	Centred lists
 
-.form-input--selectWrapper select,
-x:-moz-any-link,
-x:default {
-  width: 110%;
-  max-width: 110%;
-  min-width: 110%;
-  /* A zero right padding is needed or the native arrow can show up. Downside is the text will run over the arrow */
-  padding: 0.6em 0 0.5em 0.8em;
-  /* Window is a Firefox way of hiding the arrow, sometimes works */
-  -moz-appearance: window;
-  text-indent: .01px;
-  text-overflow: ""; }
+	<ul class="l-list--centred">
+		<li></li>
+	</ul>
+	========================================================================== */
+.l-list--centred, .l-list--centered {
+  text-align: center; }
+  .l-list--centred li, .l-list--centered li {
+    display: inline; }
 
-/* Focus style - TODO: Fix in FF */
-/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
-.form-input--selectWrapper:focus::-ms-value {
-  background: transparent;
-  color: #222; }
+/*
+	Floated lists
 
-/* Firefox focus has odd artifacts around the text, this kills that */
-.form-input--selectWrapper:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #000; }
+	<ul class="l-list--floated">
+		<li></li>
+	</ul>
+	========================================================================== */
+.l-list--floated:after {
+  content: "";
+  display: table;
+  clear: both; }
 
-option {
-  font-weight: normal; }
+.l-list--floated li {
+  float: left;
+  display: inline-block; }
 
 /*
 	Embedded content
@@ -1287,60 +1610,6 @@ img, object, embed, video {
     width: 100%;
     height: 100%; }
 
-/**
- * Block grids
- * These are suited for repeating blocks of content. See below for usage
- *
- * Usage:
- * <ul class="l-blockGrid l-blockGrid--3up">
- *     <li></li>
- * </ul>
- *
- * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow">
- *     <li></li>
- * </ul>
- */
-.l-blockGrid {
-  display: block;
-  list-style-type: none;
-  margin: 0; }
-  .l-blockGrid:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .l-blockGrid > li {
-    display: block;
-    height: auto; }
-  .l-blockGrid > li {
-    display: block;
-    height: auto;
-    float: left; }
-  .l-blockGrid.l-blockGrid--1up > li {
-    width: 100%; }
-  .l-blockGrid.l-blockGrid--2up > li {
-    width: 50%; }
-  .l-blockGrid.l-blockGrid--3up > li {
-    width: 33.3333333333%; }
-  .l-blockGrid.l-blockGrid--4up > li {
-    width: 25%; }
-  .l-blockGrid.l-blockGrid--5up > li {
-    width: 20%; }
-  .l-blockGrid.l-blockGrid--6up > li {
-    width: 16.6666666667%; }
-  .l-blockGrid.l-blockGrid--7up > li {
-    width: 14.2857142857%; }
-  .l-blockGrid.l-blockGrid--8up > li {
-    width: 12.5%; }
-  .l-blockGrid.l-blockGrid--9up > li {
-    width: 11.1111111111%; }
-  .l-blockGrid.l-blockGrid--10up > li {
-    width: 10%; }
-  .l-blockGrid.l-blockGrid--11up > li {
-    width: 9.0909090909%; }
-  .l-blockGrid.l-blockGrid--12up > li {
-    width: 8.3333333333%; }
-
 /**
  * Tabs
  * =================================
@@ -1655,10 +1924,7 @@ body {
  * Views
  * =================================
  */
-/**
- * Helper/utility classes
- * =================================
- */
+/* Helper/utility classes */
 /**
  * Utilities
  * Non-semantic helper classes
@@ -1757,9 +2023,7 @@ textarea[contenteditable] {
      -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out; }
 
-/**
- * Print styles
- */
+/* Print styles */
 /* ==========================================================================
    Print styles
    ========================================================================== */
diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css
index f896294f..fe538ef1 100644
--- a/assets/dist/css/kickoff.css
+++ b/assets/dist/css/kickoff.css
@@ -1,15 +1,23 @@
 @charset "UTF-8";
 /**
- * Developed with Kickoff v5.0.0
- * http://trykickoff.github.io/
+ * Site dependencies
+ * See http://trykickoff.github.io/demos/ for more info
+ */
+/*
+ * Mixins, helpers and functions
  * =================================
+ * Most CSS3 vendor prefixed items have a mixin,
+ * but we should not need them if autoprefixer is being used
+ * See mixins/css3.scss for the full list
  */
+/**
+ * Core variables
+ * =================================
+ * Edit your color palette and app vars before your begin
+ */
+/* CSS Reset - Normalize etc */
 /**
  * Kickoff reset
- *
- * Kickoff uses an amended version of Normalize.css by Nicholas Gallagher
- * http://github.com/necolas/normalize.css
- *
  */
 html {
   -moz-box-sizing: border-box;
@@ -24,44 +32,210 @@ html {
  * http://github.com/necolas/normalize.css
  * Kickoff uses an amended version of this file.
  */
-article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, main {
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+html {
+  font-family: sans-serif;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/**
+ * Remove default margin.
+ */
+body {
+  margin: 0; }
+
+/* HTML5 display definitions
+   ========================================================================== */
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
   display: block; }
 
-audio, canvas, video {
-  display: inline-block; }
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
 
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
 audio:not([controls]) {
   display: none;
   height: 0; }
 
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
 [hidden],
 template {
   display: none; }
 
-/* ============ */
-/* === BASE === */
-/* ============ */
-body {
-  margin: 0; }
-
+/* Links
+   ========================================================================== */
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
 a {
-  background: transparent; }
+  background-color: transparent; }
 
-a:focus {
-  outline: thin dotted; }
-
-a:hover, a:active {
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
   outline: 0; }
 
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold; }
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000; }
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
 img {
   border: 0; }
 
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
 svg:not(:root) {
   overflow: hidden; }
 
+/* Grouping content
+   ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
 figure {
-  margin: 0; }
+  margin: 1em 40px; }
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  -moz-box-sizing: content-box;
+       box-sizing: content-box;
+  height: 0; }
+
+/**
+ * Contain overflow in all browsers.
+ */
+pre {
+  overflow: auto; }
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em; }
 
+/* Forms
+   ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
 button,
 input,
 optgroup,
@@ -74,13 +248,29 @@ textarea {
   margin: 0;
   /* 3 */ }
 
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
 button {
   overflow: visible; }
 
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
 button,
 select {
   text-transform: none; }
 
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
 button,
 html input[type="button"], input[type="reset"],
 input[type="submit"] {
@@ -89,70 +279,126 @@ input[type="submit"] {
   cursor: pointer;
   /* 3 */ }
 
+/**
+ * Re-set default cursor for disabled elements.
+ */
 button[disabled],
 html input[disabled] {
   cursor: default; }
 
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0; }
 
-button,
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
 input {
   line-height: normal; }
 
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   height: auto; }
 
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
 input[type="search"] {
   -webkit-appearance: textfield;
+  /* 1 */
   -moz-box-sizing: content-box;
        box-sizing: content-box;
   /* 2 */ }
 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none; }
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0; }
-
+/**
+ * Define consistent border, margin, and padding.
+ */
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em; }
 
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
 legend {
   border: 0;
   /* 1 */
   padding: 0;
   /* 2 */ }
 
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
 textarea {
-  overflow: auto;
-  vertical-align: top; }
+  overflow: auto; }
 
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
 optgroup {
   font-weight: bold; }
 
+/* Tables
+   ========================================================================== */
+/**
+ * Remove most spacing between table cells.
+ */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-td, th {
+td,
+th {
   padding: 0; }
 
+/**
+ * Global typography styles
+ * See http://trykickoff.github.io/demos/typography.html for more info
+ */
 /**
  * Typography
  * =================================
  * Base
  * Paragraphs
  * Headings
- * Links
  * Lists
  * Definition lists
  * Blockquotes
@@ -198,7 +444,7 @@ p {
  */
 h1, h2, h3, h4, h5, h6 {
   margin: 0;
-  font-family: Georgia, "Times New Roman", Times, serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1.1;
   text-rendering: optimizelegibility;
@@ -239,23 +485,6 @@ h6, .h6, .zeta {
 small {
   font-size: 80%; }
 
-/**
- * Links
- */
-a, a:link {
-  color: #16c98d;
-  text-decoration: none; }
-
-a:visited {
-  color: #16c98d;
-  text-decoration: none; }
-
-a:hover, a:focus {
-  color: #0c6d4d; }
-
-a:active {
-  color: #0c6d4d; }
-
 /**
  * Lists
  */
@@ -355,301 +584,50 @@ dfn {
 
 mark {
   background: #feef6d;
-  padding: 2px 4px;
-  border-radius: 3px; }
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -.5em; }
-
-sub {
-  bottom: -.25em; }
-
-samp {
-  font-family: Menlo, Monaco, "Courier New", monospace; }
-
-/**
- * Utilities
- */
-.text-centre, .text-center {
-  text-align: center; }
-
-.text-left {
-  text-align: left; }
-
-.text-right {
-  text-align: right; }
-
-::-moz-selection {
-  color: #fff;
-  background: #16c98d;
-  text-shadow: none; }
-
-::selection {
-  color: #fff;
-  background: #16c98d;
-  text-shadow: none; }
-
-/**
- * Components:
- * =================================
- * Buttons
- * Grid
- * Lists
- * Forms
- * Embedded content
- * Media Object
- * Block grids
- * Fluid video
- * Tabs
- * Tables
- * Code
- * Skip navigation
- * Scrollbars
- */
-/**
- * Buttons
- * =================================
- * Index:
- * - Associated Button Variables
- * - Base button styling
- * – Button Modifiers
- * 	 – btn--primary
- *   – btn--block
- */
-/**
- * Define associated Button variables
- */
-/**
- * Base button styles – Based on csswizardry.com/beautons
- *
- * 1. Allow us to better style box model properties.
- * 2. Line different sized buttons up a little nicer.
- * 3. Stop buttons wrapping and looking broken.
- * 4. Make buttons inherit font styles.
- * 5. Force all elements using beautons to appear clickable.
- * 6. Normalise box model styles.
- * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
- *    there is 1em of space above and below that text. We therefore apply 1em
- *    of space to the left and right, as padding, to keep consistent spacing.
- * 8. Fixes odd inner spacing in IE7.
- * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
- *10. Prevents from inheriting default anchor styles.
- */
-.btn, .tabs a {
-  display: inline-block;
-  /* [1] */
-  vertical-align: middle;
-  /* [2] */
-  white-space: nowrap;
-  /* [3] */
-  font-family: inherit;
-  /* [4] */
-  font-size: 100%;
-  /* [4] */
-  cursor: pointer;
-  /* [5] */
-  border: none;
-  /* [6] */
-  margin: 0;
-  /* [6] */
-  padding-top: 0;
-  /* [6] */
-  padding-bottom: 0;
-  /* [6] */
-  line-height: 2.5;
-  /* [7] */
-  height: 2.5em;
-  /* [7] */
-  padding-right: 1.5em;
-  /* [7] */
-  padding-left: 1.5em;
-  /* [7] */
-  overflow: visible;
-  /* [8] */
-  text-align: center;
-  background-color: #95a5a6;
-  border-radius: 5px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-  .btn,
-  .tabs a,
-  .btn:link,
-  .tabs a:link,
-  .btn:visited, .tabs a:visited {
-    color: #fff; }
-  .btn:hover,
-  .tabs a:hover,
-  .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
-    background-color: #798d8f; }
-  .btn,
-  .tabs a,
-  .btn:hover,
-  .tabs a:hover,
-  .btn:active,
-  .tabs a:active,
-  .btn:focus,
-  .tabs a:focus,
-  .btn:visited, .tabs a:visited {
-    text-decoration: none; }
-  .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
-    outline: none; }
-  .btn.disabled,
-  .tabs a.disabled,
-  .btn[disabled], .tabs a[disabled] {
-    cursor: default;
-    background-image: none;
-    opacity: .65; }
-
-.btn--primary {
-  background-color: #16c98d; }
-  .btn--primary,
-  .btn--primary:link,
-  .btn--primary:visited {
-    color: #fff; }
-  .btn--primary:hover,
-  .btn--primary:active,
-  .btn--primary:focus {
-    background-color: #119b6d; }
-
-.btn--block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0; }
-  .btn--block + .btn--block {
-    margin-top: 10px; }
-
-input[type="submit"].btn--block,
-input[type="reset"].btn--block,
-input[type="button"].btn--block {
-  width: 100%; }
-
-/**
- * The Kickoff Grid
- * =================================
- * Default grid styles
- * Media queries
- * Centred columns
- */
-/* Import Grid helpers and mixins */
-/**
- * Basic Usage:
- * =================================
-	<div class="g-row">
-		<div class="g-col g-span4"></div>
-		<div class="g-col g-span8"></div>
-	</div>
- */
-.g-row {
-  width: 100%;
-  margin: 0 auto; }
-  .g-row:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .g-row .g-row {
-    min-width: 0; }
-    .g-row .g-row .g-col {
-      padding: 0; }
-
-@media screen and (min-width: 48em) {
-  .g-col {
-    float: left;
-    min-height: 1px;
-    position: relative;
-    clear: none;
-    -moz-box-sizing: border-box;
-         box-sizing: border-box;
-    margin-left: 2%; }
-    .g-col:first-child {
-      margin-left: 0; }
-    .g-col + .g-col:last-child {
-      float: right; }
-    .g-col + .g-col.end {
-      float: left; } }
-
-@media screen and (min-width: 48em) {
-  .g-span1 {
-    width: 6.5%; }
-  .g-span2 {
-    width: 15%; }
-  .g-span3 {
-    width: 23.5%; }
-  .g-span4 {
-    width: 32%; }
-  .g-span5 {
-    width: 40.5%; }
-  .g-span6 {
-    width: 49%; }
-  .g-span7 {
-    width: 57.5%; }
-  .g-span8 {
-    width: 66%; }
-  .g-span9 {
-    width: 74.5%; }
-  .g-span10 {
-    width: 83%; }
-  .g-span11 {
-    width: 91.5%; }
-  .g-span12 {
-    width: 100%; }
-  /**
-	 * Offset columns
-	 * http://trykickoff.github.io/demos/grids.html#offset
-	 */
-  /**
-	 * Source ordering (push & pull)
-	 * http://trykickoff.github.io/demos/grids.html#source-ordering
-	 */ }
+  padding: 2px 4px;
+  border-radius: 3px; }
 
-/**
- * Centred columns
- */
-.g-col.g-col--centered,
-.g-col.g-col--centred {
-  float: none;
-  margin: 0 auto; }
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
 
-/*
-	Centred lists
+sup {
+  top: -.5em; }
 
-	<ul class="l-list--centred">
-		<li></li>
-	</ul>
-	========================================================================== */
-.l-list--centred, .l-list--centered {
+sub {
+  bottom: -.25em; }
+
+samp {
+  font-family: Menlo, Monaco, "Courier New", monospace; }
+
+/**
+ * Utilities
+ */
+.text-centre, .text-center {
   text-align: center; }
-  .l-list--centred li, .l-list--centered li {
-    display: inline; }
 
-/*
-	Floated lists
+.text-left {
+  text-align: left; }
 
-	<ul class="l-list--floated">
-		<li></li>
-	</ul>
-	========================================================================== */
-.l-list--floated:after {
-  content: "";
-  display: table;
-  clear: both; }
+.text-right {
+  text-align: right; }
 
-.l-list--floated li {
-  float: left;
-  display: inline-block; }
+::-moz-selection {
+  color: #fff;
+  background: #16c98d;
+  text-shadow: none; }
 
+::selection {
+  color: #fff;
+  background: #16c98d;
+  text-shadow: none; }
+
+/**
+ * Components:
+ * See http://trykickoff.github.io/demos/components.html for more info
+ */
 /**
  * Forms
  * =================================
@@ -742,7 +720,7 @@ input[type="button"].btn--block {
      -moz-transition: border 200ms ease-in-out;
           transition: border 200ms ease-in-out; }
   .form-input:focus {
-    border-color: #999999;
+    border-color: #16c98d;
     outline: 0;
     outline: thin dotted \9; }
   .form-input[type="image"],
@@ -1005,15 +983,17 @@ input[type="submit"] {
     padding-left: 160px; } }
 
 /**
- * Custom Checkboxes and radios - modified from WTF forms – http://wtfforms.com/
+ * Custom Checkboxes and radios
+ *
+ * IE9+ :)
  *
  * --------------------------------
  *
  * Checkbox button example HTML
  *
- *	 <label class="control control--custom control--checkbox">
- *		<input type="checkbox" name="myCheckbox" />
- *		<span class="control-indicator"></span>
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+ *		<span class="control-indicator control-indicator--checkbox"></span>
  *		My Checkbox Label Text
  *	</label>
  *
@@ -1021,69 +1001,101 @@ input[type="submit"] {
  *
  * Radio button example HTML
  *
- *	<label class="control control--custom control--radio">
- *		<input type="radio" id="radio1" name="myRadioBtn" />
- *		<span class="control-indicator"></span>
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
+ *		<span class="control-indicator control-indicator--radio"></span>
  *		My Radio Button Label Text
  * 	</label>
  *
  * ================================= */
-.control-indicator {
-  position: absolute;
-  top: .25em;
-  left: 0;
+.control--custom {
+  position: relative;
   display: block;
-  width: 19px;
-  height: 19px;
-  line-height: 1;
-  color: #eee;
-  text-align: center;
-  background-color: #ddd;
-  background-size: 50% 50%;
-  background-position: center center;
-  background-repeat: no-repeat;
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none; }
 
-.control--custom {
+.control--custom--inline {
+  display: inline-block;
+  padding-right: 2em; }
+
+.control--custom-input {
+  position: absolute;
+  opacity: 0;
+  z-index: -1; }
+
+.control-indicator {
   position: relative;
-  display: block;
-  padding-left: 2em;
-  margin-left: 0;
-  color: #555;
-  cursor: pointer;
-  /* Focus */
-  /* Checked state */
-  /* Active */ }
-  .control--custom input {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  -webkit-transition: all 100ms ease-in-out;
+     -moz-transition: all 100ms ease-in-out;
+          transition: all 100ms ease-in-out;
+  border: 0.1em solid #A3B1B2;
+  background-color: #A3B1B2;
+  vertical-align: middle;
+  margin-top: -.1em;
+  box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
+
+.control--custom-input:focus ~ .control-indicator {
+  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #16c98d; }
+
+.control-indicator--checkbox {
+  border-radius: .2em; }
+  .control-indicator--checkbox:before,
+  .control-indicator--checkbox:after {
+    content: '';
     position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 90%;
+    height: 0.1em;
+    background-color: #f1f1f1;
+    display: block;
     opacity: 0;
-    z-index: -1;
-    /* Put the input behind the label so it doesn't overlay text */ }
-  .control--custom input:focus ~ .control-indicator {
-    box-shadow: 0 0 0 0.075em #fff, 0 0 0 0.2em #a3b1b2; }
-  .control--custom input:checked ~ .control-indicator {
-    color: #fff;
-    background-color: #a3b1b2; }
-  .control--custom input:active ~ .control-indicator {
-    color: #fff;
-    background-color: #ccd4d5; }
-
-/* Checkbox modifiers */
-.control--checkbox .control-indicator {
-  border-radius: 25%; }
-
-.control--checkbox input:checked ~ .control-indicator {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); }
-
-/* Radio modifiers */
-.control--radio .control-indicator {
+    -webkit-transition: all 100ms ease-in-out;
+       -moz-transition: all 100ms ease-in-out;
+            transition: all 100ms ease-in-out; }
+  .control-indicator--checkbox:before {
+    -webkit-transform: translate(-50%, -50%) rotate(45deg);
+       -moz-transform: translate(-50%, -50%) rotate(45deg);
+        -ms-transform: translate(-50%, -50%) rotate(45deg);
+            transform: translate(-50%, -50%) rotate(45deg); }
+  .control-indicator--checkbox:after {
+    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+       -moz-transform: translate(-50%, -50%) rotate(-45deg);
+        -ms-transform: translate(-50%, -50%) rotate(-45deg);
+            transform: translate(-50%, -50%) rotate(-45deg); }
+
+.control-indicator--checkbox--tick:before {
+  top: 0;
+  -webkit-transform: translateX(-50%) rotate(45deg);
+     -moz-transform: translateX(-50%) rotate(45deg);
+      -ms-transform: translateX(-50%) rotate(45deg);
+          transform: translateX(-50%) rotate(45deg);
+  border: 0.1em solid #f1f1f1;
+  background-color: transparent;
+  width: 40%;
+  height: 80%;
+  border-top: 0;
+  border-left: 0; }
+
+.control-indicator--checkbox--tick:after {
+  display: none; }
+
+.control--custom-input:checked ~ .control-indicator--checkbox:before,
+.control--custom-input:checked ~ .control-indicator--checkbox:after {
+  opacity: 1; }
+
+.control-indicator--radio {
   border-radius: 50%; }
 
-.control--radio input:checked ~ .control-indicator {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); }
+.control--custom-input:checked ~ .control-indicator--radio {
+  background-color: #f1f1f1;
+  border: 0.3em solid #A3B1B2; }
 
 /**
  * Custom file input
@@ -1126,7 +1138,8 @@ input[type="submit"] {
   border: 0;
   outline: none;
   /* Remove select styling */
-  appearance: none;
+  -moz-appearance: none;
+       appearance: none;
   -webkit-appearance: none;
   /* Magic font size number to prevent iOS text zoom */
   padding: .5em;
@@ -1188,93 +1201,233 @@ x:default {
 option {
   font-weight: normal; }
 
-/*
-	Embedded content
-	========================================================================== */
-img {
-  font-style: italic;
-  color: #c00;
-  border: 0;
-  -ms-interpolation-mode: bicubic; }
-  img.img--left {
-    margin: 0 20px 0 0; }
-  img.img--right {
-    margin: 0 0 0 20px; }
-
-svg:not(:root) {
-  overflow: hidden; }
-
-img, object, embed, video {
-  max-width: 100%; }
+/**
+ * Links
+ */
+a {
+  -webkit-transition: all 100ms ease-in-out;
+     -moz-transition: all 100ms ease-in-out;
+          transition: all 100ms ease-in-out; }
+  a, a:link {
+    color: #16c98d;
+    text-decoration: none; }
+  a:visited {
+    color: #16c98d;
+    text-decoration: none; }
+  a:hover, a:focus {
+    color: #0c6d4d; }
+  a:active {
+    color: #0c6d4d; }
 
-/*
-	Media Object
+/**
+ * Buttons
+ * =================================
+ * Index:
+ * - Associated Button Variables
+ * - Base button styling
+ * – Button Modifiers
+ * 	 – btn--primary
+ *   – btn--block
+ */
+/**
+ * Define associated Button variables
+ */
+/**
+ * Base button styles – Based on csswizardry.com/beautons
+ *
+ * 1. Allow us to better style box model properties.
+ * 2. Line different sized buttons up a little nicer.
+ * 3. Stop buttons wrapping and looking broken.
+ * 4. Make buttons inherit font styles.
+ * 5. Force all elements using beautons to appear clickable.
+ * 6. Normalise box model styles.
+ * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
+ *    there is 1em of space above and below that text. We therefore apply 1em
+ *    of space to the left and right, as padding, to keep consistent spacing.
+ * 8. Fixes odd inner spacing in IE7.
+ * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
+ *10. Prevents from inheriting default anchor styles.
+ */
+.btn, .tabs a {
+  display: inline-block;
+  /* [1] */
+  vertical-align: middle;
+  /* [2] */
+  white-space: nowrap;
+  /* [3] */
+  font-family: inherit;
+  /* [4] */
+  font-size: 100%;
+  /* [4] */
+  cursor: pointer;
+  /* [5] */
+  border: none;
+  /* [6] */
+  margin: 0;
+  /* [6] */
+  padding-top: 0;
+  /* [6] */
+  padding-bottom: 0;
+  /* [6] */
+  line-height: 2.5;
+  /* [7] */
+  height: 2.5em;
+  /* [7] */
+  padding-right: 1.5em;
+  /* [7] */
+  padding-left: 1.5em;
+  /* [7] */
+  overflow: visible;
+  /* [8] */
+  text-align: center;
+  background-color: #95a5a6;
+  border-radius: 5px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+  .btn,
+  .tabs a,
+  .btn:link,
+  .tabs a:link,
+  .btn:visited, .tabs a:visited {
+    color: #fff; }
+  .btn:hover,
+  .tabs a:hover,
+  .btn:active,
+  .tabs a:active,
+  .btn:focus, .tabs a:focus {
+    background-color: #798d8f; }
+  .btn,
+  .tabs a,
+  .btn:hover,
+  .tabs a:hover,
+  .btn:active,
+  .tabs a:active,
+  .btn:focus,
+  .tabs a:focus,
+  .btn:visited, .tabs a:visited {
+    text-decoration: none; }
+  .btn:active,
+  .tabs a:active,
+  .btn:focus, .tabs a:focus {
+    outline: none; }
+  .btn.disabled,
+  .tabs a.disabled,
+  .btn[disabled], .tabs a[disabled] {
+    cursor: default;
+    background-image: none;
+    opacity: .65; }
 
-	* Place any image- and text-like content side-by-side, as per:
-	* http://csswizardry.com/2013/05/the-flag-object/
-	*
-	* +---------+
-  * |         | ~~~~ ~~~~~~~~~~~
-  * |         | ~~~~~~~ ~~~~~ ~~
-  * |         | ~~~~~~~~~~~~
-  * +---------+
-	*
-	* Markup:
-	<div class="media">
-		<div class="media-img">
-			<img src="http://placekitten.com/100/100">
-		</div>
-		<div class="media-body">
-			<p>Lorem ipsum dolor sit amet.</p>
-		</div>
-	</div>
-	========================================================================== */
-.media {
-  display: table;
+.btn--primary {
+  background-color: #16c98d; }
+  .btn--primary,
+  .btn--primary:link,
+  .btn--primary:visited {
+    color: #fff; }
+  .btn--primary:hover,
+  .btn--primary:active,
+  .btn--primary:focus {
+    background-color: #119b6d; }
+
+.btn--block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0; }
+  .btn--block + .btn--block {
+    margin-top: 10px; }
+
+input[type="submit"].btn--block,
+input[type="reset"].btn--block,
+input[type="button"].btn--block {
   width: 100%; }
 
-@media screen and (min-width: 25em) {
-  .media-img,
-  .media-body {
-    display: table-cell;
-    vertical-align: middle; }
-    .media--top .media-img,
-    .media--top .media-body {
-      vertical-align: top; }
-    .media--bottom .media-img,
-    .media--bottom .media-body {
-      vertical-align: bottom; }
-    .media-img :last-child,
-    .media-body :last-child {
-      margin-bottom: 0; }
-  .media-body {
+/**
+ * The Kickoff Grid
+ * =================================
+ * Default grid styles
+ * Media queries
+ * Centred columns
+ */
+/* Import Grid helpers and mixins */
+/**
+ * Basic Usage:
+ * =================================
+	<div class="g-row">
+		<div class="g-col g-span4"></div>
+		<div class="g-col g-span8"></div>
+	</div>
+ */
+.g-row {
+  width: 100%;
+  margin: 0 auto; }
+  .g-row:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .g-row .g-row {
+    min-width: 0; }
+    .g-row .g-row .g-col {
+      padding: 0; }
+
+@media screen and (min-width: 48em) {
+  .g-col {
+    float: left;
+    min-height: 1px;
+    position: relative;
+    clear: none;
+    -moz-box-sizing: border-box;
+         box-sizing: border-box;
+    margin-left: 2%; }
+    .g-col:first-child {
+      margin-left: 0; }
+    .g-col + .g-col:last-child {
+      float: right; }
+    .g-col + .g-col.end {
+      float: left; } }
+
+@media screen and (min-width: 48em) {
+  .g-span1 {
+    width: 6.5%; }
+  .g-span2 {
+    width: 15%; }
+  .g-span3 {
+    width: 23.5%; }
+  .g-span4 {
+    width: 32%; }
+  .g-span5 {
+    width: 40.5%; }
+  .g-span6 {
+    width: 49%; }
+  .g-span7 {
+    width: 57.5%; }
+  .g-span8 {
+    width: 66%; }
+  .g-span9 {
+    width: 74.5%; }
+  .g-span10 {
+    width: 83%; }
+  .g-span11 {
+    width: 91.5%; }
+  .g-span12 {
     width: 100%; }
-  .media-img {
-    padding-right: 10px; }
-    .media-img > img {
-      display: block;
-      max-width: none; }
-    .media--rev .media-img {
-      padding-right: 0;
-      padding-left: 10px; } }
+  /**
+	 * Offset columns
+	 * http://trykickoff.github.io/demos/grids.html#offset
+	 */
+  /**
+	 * Source ordering (push & pull)
+	 * http://trykickoff.github.io/demos/grids.html#source-ordering
+	 */ }
 
-/*
-   Fluid width video
-   * 16:9 aspect ratio by default
-   * Usage:
-   * <div class="fluidVideo"><iframe src="..."/></div>
-   ========================================================================== */
-.fluidVideo {
-  position: relative;
-  padding-bottom: 56.25%;
-  /* 16:9 */
-  height: 0; }
-  .fluidVideo iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%; }
+/**
+ * Centred columns
+ */
+.g-col.g-col--centered,
+.g-col.g-col--centred {
+  float: none;
+  margin: 0 auto; }
 
 /**
  * Block grids
@@ -1396,6 +1549,122 @@ img, object, embed, video {
     .l-blockGrid.l-blockGrid--12up > li {
       width: 8.3333333333%; } }
 
+/*
+	Centred lists
+
+	<ul class="l-list--centred">
+		<li></li>
+	</ul>
+	========================================================================== */
+.l-list--centred, .l-list--centered {
+  text-align: center; }
+  .l-list--centred li, .l-list--centered li {
+    display: inline; }
+
+/*
+	Floated lists
+
+	<ul class="l-list--floated">
+		<li></li>
+	</ul>
+	========================================================================== */
+.l-list--floated:after {
+  content: "";
+  display: table;
+  clear: both; }
+
+.l-list--floated li {
+  float: left;
+  display: inline-block; }
+
+/*
+	Embedded content
+	========================================================================== */
+img {
+  font-style: italic;
+  color: #c00;
+  border: 0;
+  -ms-interpolation-mode: bicubic; }
+  img.img--left {
+    margin: 0 20px 0 0; }
+  img.img--right {
+    margin: 0 0 0 20px; }
+
+svg:not(:root) {
+  overflow: hidden; }
+
+img, object, embed, video {
+  max-width: 100%; }
+
+/*
+	Media Object
+
+	* Place any image- and text-like content side-by-side, as per:
+	* http://csswizardry.com/2013/05/the-flag-object/
+	*
+	* +---------+
+  * |         | ~~~~ ~~~~~~~~~~~
+  * |         | ~~~~~~~ ~~~~~ ~~
+  * |         | ~~~~~~~~~~~~
+  * +---------+
+	*
+	* Markup:
+	<div class="media">
+		<div class="media-img">
+			<img src="http://placekitten.com/100/100">
+		</div>
+		<div class="media-body">
+			<p>Lorem ipsum dolor sit amet.</p>
+		</div>
+	</div>
+	========================================================================== */
+.media {
+  display: table;
+  width: 100%; }
+
+@media screen and (min-width: 25em) {
+  .media-img,
+  .media-body {
+    display: table-cell;
+    vertical-align: middle; }
+    .media--top .media-img,
+    .media--top .media-body {
+      vertical-align: top; }
+    .media--bottom .media-img,
+    .media--bottom .media-body {
+      vertical-align: bottom; }
+    .media-img :last-child,
+    .media-body :last-child {
+      margin-bottom: 0; }
+  .media-body {
+    width: 100%; }
+  .media-img {
+    padding-right: 10px; }
+    .media-img > img {
+      display: block;
+      max-width: none; }
+    .media--rev .media-img {
+      padding-right: 0;
+      padding-left: 10px; } }
+
+/*
+   Fluid width video
+   * 16:9 aspect ratio by default
+   * Usage:
+   * <div class="fluidVideo"><iframe src="..."/></div>
+   ========================================================================== */
+.fluidVideo {
+  position: relative;
+  padding-bottom: 56.25%;
+  /* 16:9 */
+  height: 0; }
+  .fluidVideo iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%; }
+
 /**
  * Tabs
  * =================================
@@ -1750,10 +2019,7 @@ body {
  * Views
  * =================================
  */
-/**
- * Helper/utility classes
- * =================================
- */
+/* Helper/utility classes */
 /**
  * Utilities
  * Non-semantic helper classes
@@ -1852,9 +2118,7 @@ textarea[contenteditable] {
      -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out; }
 
-/**
- * Print styles
- */
+/* Print styles */
 /* ==========================================================================
    Print styles
    ========================================================================== */
diff --git a/assets/dist/css/styleguide.css b/assets/dist/css/styleguide.css
index bd588d3e..45290bc5 100644
--- a/assets/dist/css/styleguide.css
+++ b/assets/dist/css/styleguide.css
@@ -1,3 +1,3 @@
-body{background-color:#fff}.sg-interfaceType,.sg-sectionHeading{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}.sg-interfaceType--subtle{color:#888}.sg-sectionHeading{color:#16c98d}.sg-page{overflow:hidden;padding:8% 0}.sg-page--start{background-color:#16c98d;padding:15% 0;color:#fff}.sg-spacer{padding:20px}.sg-footer{background-color:#181830;color:#fff;padding:30px;margin-top:30px}.sg-footer h1{margin-bottom:.2em}.sg-footer a{color:#fff;border-bottom:2px dashed rgba(255,255,255,0.3)}.sg-footer a:hover{border-bottom:2px solid #fff}.sg-footer :last-child{margin-bottom:0}.sg-swatch{text-align:center;line-height:30px;margin:10px 10px 0}.sg-swatch-color{height:60px;padding:15px;font-size:13px;font-size:0.65rem;font-family:Menlo,Monaco,"Courier New",monospace}.sg-color-link-hover{color:#0c6d4d}.sg-color-link-hover .sg-swatch-color{background-color:#0c6d4d;color:#fff}.sg-color-link-hover .sg-swatch-color:before{content:"#0c6d4d";display:block}.sg-color-primary{color:#16c98d}.sg-color-primary .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-primary .sg-swatch-color:before{content:"#16c98d";display:block}.sg-color-secondary{color:#feef6d}.sg-color-secondary .sg-swatch-color{background-color:#feef6d;color:#444}.sg-color-secondary .sg-swatch-color:before{content:"#feef6d";display:block}.sg-color-highlight{color:#fa5e5b}.sg-color-highlight .sg-swatch-color{background-color:#fa5e5b;color:#444}.sg-color-highlight .sg-swatch-color:before{content:"#fa5e5b";display:block}.sg-color-text{color:#444}.sg-color-text .sg-swatch-color{background-color:#444;color:#fff}.sg-color-text .sg-swatch-color:before{content:"#444";display:block}.sg-color-background{color:#f1f1f1}.sg-color-background .sg-swatch-color{background-color:#f1f1f1;color:#444;border:#f1f1f1 solid 1px}.sg-color-background .sg-swatch-color:before{content:"#f1f1f1";display:block}.sg-color-border{color:#ddd}.sg-color-border .sg-swatch-color{background-color:#ddd;color:#444}.sg-color-border .sg-swatch-color:before{content:"#ddd";display:block}.sg-color-link{color:#16c98d}.sg-color-link .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-link .sg-swatch-color:before{content:"#16c98d";display:block}.sg-type{margin-bottom:1em}code{border:1px solid #ddd;background-color:#F9F8F8;font-size:11px;font-size:0.55rem}.sg-type-micro .sg-type-item{font-size:9px;font-size:0.45rem}.sg-type-micro code:after{content:" :: 9px"}.sg-type-smallest .sg-type-item{font-size:11px;font-size:0.55rem}.sg-type-smallest code:after{content:" :: 11px"}.sg-type-smaller .sg-type-item{font-size:13px;font-size:0.65rem}.sg-type-smaller code:after{content:" :: 13px"}.sg-type-small .sg-type-item{font-size:16px;font-size:0.8rem}.sg-type-small code:after{content:" :: 16px"}.sg-type-base .sg-type-item{font-size:20px;font-size:1rem}.sg-type-base code:after{content:" :: 20px"}.sg-type-large .sg-type-item{font-size:25px;font-size:1.25rem}.sg-type-large code:after{content:" :: 25px"}.sg-type-larger .sg-type-item{font-size:32px;font-size:1.6rem}.sg-type-larger code:after{content:" :: 32px"}.sg-type-largest .sg-type-item{font-size:40px;font-size:2rem}.sg-type-largest code:after{content:" :: 40px"}.sg-type-jumbo .sg-type-item{font-size:49px;font-size:2.45rem}.sg-type-jumbo code:after{content:" :: 49px"}.sg-typeSpecimen{margin-bottom:0;margin-top:0;-ms-word-wrap:break-word;word-wrap:break-word}.sg-typeSpecimen:after{display:block;font-size:16px;font-size:0.8rem;margin-top:5px;border-top:1px solid #ddd;font-weight:normal}.sg-typeSpecimen--primary{font-size:30px;font-size:1.5rem;font-family:Georgia,"Times New Roman",Times,serif;font-weight:bold}.sg-typeSpecimen--secondary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.sg-typeSpecimen--giant{font-size:120px;font-size:6rem;line-height:1}.icon-sg{display:inline-block;width:50px;height:50px;vertical-align:middle;margin-right:10px;margin-bottom:10px}.sg-favicon{padding:5px}.sg-favicon img{vertical-align:middle;margin-right:15px}
+body{background-color:#fff}.sg-interfaceType,.sg-sectionHeading{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}.sg-interfaceType--subtle{color:#888}.sg-sectionHeading{color:#16c98d}.sg-page{overflow:hidden;padding:8% 0}.sg-page--start{background-color:#16c98d;padding:15% 0;color:#fff}.sg-spacer{padding:20px}.sg-footer{background-color:#181830;color:#fff;padding:30px;margin-top:30px}.sg-footer h1{margin-bottom:.2em}.sg-footer a{color:#fff;border-bottom:2px dashed rgba(255,255,255,0.3)}.sg-footer a:hover{border-bottom:2px solid #fff}.sg-footer :last-child{margin-bottom:0}.sg-swatch{text-align:center;line-height:30px;margin:10px 10px 0}.sg-swatch-color{height:60px;padding:15px;font-size:13px;font-size:0.65rem;font-family:Menlo,Monaco,"Courier New",monospace}.sg-color-link-hover{color:#0c6d4d}.sg-color-link-hover .sg-swatch-color{background-color:#0c6d4d;color:#fff}.sg-color-link-hover .sg-swatch-color:before{content:"#0c6d4d";display:block}.sg-color-primary{color:#16c98d}.sg-color-primary .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-primary .sg-swatch-color:before{content:"#16c98d";display:block}.sg-color-secondary{color:#feef6d}.sg-color-secondary .sg-swatch-color{background-color:#feef6d;color:#444}.sg-color-secondary .sg-swatch-color:before{content:"#feef6d";display:block}.sg-color-highlight{color:#fa5e5b}.sg-color-highlight .sg-swatch-color{background-color:#fa5e5b;color:#444}.sg-color-highlight .sg-swatch-color:before{content:"#fa5e5b";display:block}.sg-color-text{color:#444}.sg-color-text .sg-swatch-color{background-color:#444;color:#fff}.sg-color-text .sg-swatch-color:before{content:"#444";display:block}.sg-color-background{color:#f1f1f1}.sg-color-background .sg-swatch-color{background-color:#f1f1f1;color:#444;border:#f1f1f1 solid 1px}.sg-color-background .sg-swatch-color:before{content:"#f1f1f1";display:block}.sg-color-border{color:#ddd}.sg-color-border .sg-swatch-color{background-color:#ddd;color:#444}.sg-color-border .sg-swatch-color:before{content:"#ddd";display:block}.sg-color-link{color:#16c98d}.sg-color-link .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-link .sg-swatch-color:before{content:"#16c98d";display:block}.sg-type{margin-bottom:1em}code{border:1px solid #ddd;background-color:#F9F8F8;font-size:11px;font-size:0.55rem}.sg-type-micro .sg-type-item{font-size:9px;font-size:0.45rem}.sg-type-micro code:after{content:" :: 9px"}.sg-type-smallest .sg-type-item{font-size:11px;font-size:0.55rem}.sg-type-smallest code:after{content:" :: 11px"}.sg-type-smaller .sg-type-item{font-size:13px;font-size:0.65rem}.sg-type-smaller code:after{content:" :: 13px"}.sg-type-small .sg-type-item{font-size:16px;font-size:0.8rem}.sg-type-small code:after{content:" :: 16px"}.sg-type-base .sg-type-item{font-size:20px;font-size:1rem}.sg-type-base code:after{content:" :: 20px"}.sg-type-large .sg-type-item{font-size:25px;font-size:1.25rem}.sg-type-large code:after{content:" :: 25px"}.sg-type-larger .sg-type-item{font-size:32px;font-size:1.6rem}.sg-type-larger code:after{content:" :: 32px"}.sg-type-largest .sg-type-item{font-size:40px;font-size:2rem}.sg-type-largest code:after{content:" :: 40px"}.sg-type-jumbo .sg-type-item{font-size:49px;font-size:2.45rem}.sg-type-jumbo code:after{content:" :: 49px"}.sg-typeSpecimen{margin-bottom:0;margin-top:0;-ms-word-wrap:break-word;word-wrap:break-word}.sg-typeSpecimen:after{display:block;font-size:16px;font-size:0.8rem;margin-top:5px;border-top:1px solid #ddd;font-weight:normal}.sg-typeSpecimen--primary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold}.sg-typeSpecimen--secondary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.sg-typeSpecimen--giant{font-size:120px;font-size:6rem;line-height:1}.icon-sg{display:inline-block;width:50px;height:50px;vertical-align:middle;margin-right:10px;margin-bottom:10px}.sg-favicon{padding:5px}.sg-favicon img{vertical-align:middle;margin-right:15px}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3RlbXAvY3NzL3N0eWxlZ3VpZGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLEtBQUssc0JBQXFCLEFBQUMsQ0FBQSxvQ0FBcUMsd0RBQXdELENBQUEsZUFBZSxBQUFDLENBQUEseUJBQTBCLFdBQVUsQUFBQyxDQUFBLGtCQUFtQixjQUFhLEFBQUMsQ0FBQSxRQUFTLGdCQUFnQixDQUFBLFlBQVksQUFBQyxDQUFBLGVBQWdCLHlCQUF5QixDQUFBLGFBQWMsQ0FBQSxVQUFVLEFBQUMsQ0FBQSxVQUFXLGFBQVksQUFBQyxDQUFBLFVBQVcseUJBQXlCLENBQUEsVUFBVyxDQUFBLFlBQWEsQ0FBQSxlQUFlLEFBQUMsQ0FBQSxhQUFjLG1CQUFrQixBQUFDLENBQUEsWUFBYSxXQUFXLENBQUEsOENBQThDLEFBQUMsQ0FBQSxrQkFBbUIsNkJBQTRCLEFBQUMsQ0FBQSxzQkFBdUIsZ0JBQWUsQUFBQyxDQUFBLFVBQVcsa0JBQWtCLENBQUEsZ0JBQWlCLENBQUEsa0JBQWtCLEFBQUMsQ0FBQSxnQkFBaUIsWUFBWSxDQUFBLFlBQWEsQ0FBQSxjQUFlLENBQUEsaUJBQWtCLENBQUEsZ0RBQWdELEFBQUMsQ0FBQSxvQkFBcUIsY0FBYSxBQUFDLENBQUEscUNBQXNDLHlCQUF5QixDQUFBLFVBQVUsQUFBQyxDQUFBLDRDQUE2QyxrQkFBa0IsQ0FBQSxhQUFhLEFBQUMsQ0FBQSxpQkFBa0IsY0FBYSxBQUFDLENBQUEsa0NBQW1DLHlCQUF5QixDQUFBLFVBQVUsQUFBQyxDQUFBLHlDQUEwQyxrQkFBa0IsQ0FBQSxhQUFhLEFBQUMsQ0FBQSxtQkFBb0IsY0FBYSxBQUFDLENBQUEsb0NBQXFDLHlCQUF5QixDQUFBLFVBQVUsQUFBQyxDQUFBLDJDQUE0QyxrQkFBa0IsQ0FBQSxhQUFhLEFBQUMsQ0FBQSxtQkFBb0IsY0FBYSxBQUFDLENBQUEsb0NBQXFDLHlCQUF5QixDQUFBLFVBQVUsQUFBQyxDQUFBLDJDQUE0QyxrQkFBa0IsQ0FBQSxhQUFhLEFBQUMsQ0FBQSxjQUFlLFdBQVUsQUFBQyxDQUFBLCtCQUFnQyxzQkFBc0IsQ0FBQSxVQUFVLEFBQUMsQ0FBQSxzQ0FBdUMsZUFBZSxDQUFBLGFBQWEsQUFBQyxDQUFBLG9CQUFxQixjQUFhLEFBQUMsQ0FBQSxxQ0FBc0MseUJBQXlCLENBQUEsVUFBVyxDQUFBLHdCQUF3QixBQUFDLENBQUEsNENBQTZDLGtCQUFrQixDQUFBLGFBQWEsQUFBQyxDQUFBLGdCQUFpQixXQUFVLEFBQUMsQ0FBQSxpQ0FBa0Msc0JBQXNCLENBQUEsVUFBVSxBQUFDLENBQUEsd0NBQXlDLGVBQWUsQ0FBQSxhQUFhLEFBQUMsQ0FBQSxjQUFlLGNBQWEsQUFBQyxDQUFBLCtCQUFnQyx5QkFBeUIsQ0FBQSxVQUFVLEFBQUMsQ0FBQSxzQ0FBdUMsa0JBQWtCLENBQUEsYUFBYSxBQUFDLENBQUEsUUFBUyxrQkFBaUIsQUFBQyxDQUFBLElBQUssc0JBQXNCLENBQUEsd0JBQXlCLENBQUEsY0FBZSxDQUFBLGlCQUFpQixBQUFDLENBQUEsNEJBQTZCLGNBQWMsQ0FBQSxpQkFBaUIsQUFBQyxDQUFBLHlCQUEwQixrQkFBaUIsQUFBQyxDQUFBLCtCQUFnQyxlQUFlLENBQUEsaUJBQWlCLEFBQUMsQ0FBQSw0QkFBNkIsbUJBQWtCLEFBQUMsQ0FBQSw4QkFBK0IsZUFBZSxDQUFBLGlCQUFpQixBQUFDLENBQUEsMkJBQTRCLG1CQUFrQixBQUFDLENBQUEsNEJBQTZCLGVBQWUsQ0FBQSxnQkFBZ0IsQUFBQyxDQUFBLHlCQUEwQixtQkFBa0IsQUFBQyxDQUFBLDJCQUE0QixlQUFlLENBQUEsY0FBYyxBQUFDLENBQUEsd0JBQXlCLG1CQUFrQixBQUFDLENBQUEsNEJBQTZCLGVBQWUsQ0FBQSxpQkFBaUIsQUFBQyxDQUFBLHlCQUEwQixtQkFBa0IsQUFBQyxDQUFBLDZCQUE4QixlQUFlLENBQUEsZ0JBQWdCLEFBQUMsQ0FBQSwwQkFBMkIsbUJBQWtCLEFBQUMsQ0FBQSw4QkFBK0IsZUFBZSxDQUFBLGNBQWMsQUFBQyxDQUFBLDJCQUE0QixtQkFBa0IsQUFBQyxDQUFBLDRCQUE2QixlQUFlLENBQUEsaUJBQWlCLEFBQUMsQ0FBQSx5QkFBMEIsbUJBQWtCLEFBQUMsQ0FBQSxnQkFBaUIsZ0JBQWdCLENBQUEsWUFBYSxDQUFBLHdCQUF5QixDQUFBLG9CQUFvQixBQUFDLENBQUEsc0JBQXVCLGNBQWMsQ0FBQSxjQUFlLENBQUEsZ0JBQWlCLENBQUEsY0FBZSxDQUFBLHlCQUEwQixDQUFBLGtCQUFrQixBQUFDLENBQUEseUJBQTBCLGVBQWUsQ0FBQSxnQkFBaUIsQ0FBQSxpREFBa0QsQ0FBQSxnQkFBZ0IsQUFBQyxDQUFBLDJCQUE0QixlQUFlLENBQUEsZ0JBQWlCLENBQUEsdURBQXVELEFBQUMsQ0FBQSx1QkFBd0IsZ0JBQWdCLENBQUEsY0FBZSxDQUFBLGFBQWEsQUFBQyxDQUFBLFFBQVMscUJBQXFCLENBQUEsVUFBVyxDQUFBLFdBQVksQ0FBQSxxQkFBc0IsQ0FBQSxpQkFBa0IsQ0FBQSxrQkFBa0IsQUFBQyxDQUFBLFdBQVksWUFBVyxBQUFDLENBQUEsZUFBZ0Isc0JBQXNCLENBQUEsaUJBQWlCLENBQUMiLCJmaWxlIjoic3R5bGVndWlkZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJib2R5e2JhY2tncm91bmQtY29sb3I6I2ZmZn0uc2ctaW50ZXJmYWNlVHlwZSwuc2ctc2VjdGlvbkhlYWRpbmd7Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmO2ZvbnQtd2VpZ2h0OjMwMH0uc2ctaW50ZXJmYWNlVHlwZS0tc3VidGxle2NvbG9yOiM4ODh9LnNnLXNlY3Rpb25IZWFkaW5ne2NvbG9yOiMxNmM5OGR9LnNnLXBhZ2V7b3ZlcmZsb3c6aGlkZGVuO3BhZGRpbmc6OCUgMH0uc2ctcGFnZS0tc3RhcnR7YmFja2dyb3VuZC1jb2xvcjojMTZjOThkO3BhZGRpbmc6MTUlIDA7Y29sb3I6I2ZmZn0uc2ctc3BhY2Vye3BhZGRpbmc6MjBweH0uc2ctZm9vdGVye2JhY2tncm91bmQtY29sb3I6IzE4MTgzMDtjb2xvcjojZmZmO3BhZGRpbmc6MzBweDttYXJnaW4tdG9wOjMwcHh9LnNnLWZvb3RlciBoMXttYXJnaW4tYm90dG9tOi4yZW19LnNnLWZvb3RlciBhe2NvbG9yOiNmZmY7Ym9yZGVyLWJvdHRvbToycHggZGFzaGVkIHJnYmEoMjU1LDI1NSwyNTUsMC4zKX0uc2ctZm9vdGVyIGE6aG92ZXJ7Ym9yZGVyLWJvdHRvbToycHggc29saWQgI2ZmZn0uc2ctZm9vdGVyIDpsYXN0LWNoaWxke21hcmdpbi1ib3R0b206MH0uc2ctc3dhdGNoe3RleHQtYWxpZ246Y2VudGVyO2xpbmUtaGVpZ2h0OjMwcHg7bWFyZ2luOjEwcHggMTBweCAwfS5zZy1zd2F0Y2gtY29sb3J7aGVpZ2h0OjYwcHg7cGFkZGluZzoxNXB4O2ZvbnQtc2l6ZToxM3B4O2ZvbnQtc2l6ZTowLjY1cmVtO2ZvbnQtZmFtaWx5Ok1lbmxvLE1vbmFjbyxcIkNvdXJpZXIgTmV3XCIsbW9ub3NwYWNlfS5zZy1jb2xvci1saW5rLWhvdmVye2NvbG9yOiMwYzZkNGR9LnNnLWNvbG9yLWxpbmstaG92ZXIgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiMwYzZkNGQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItbGluay1ob3ZlciAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzBjNmQ0ZFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLXByaW1hcnl7Y29sb3I6IzE2Yzk4ZH0uc2ctY29sb3ItcHJpbWFyeSAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6IzE2Yzk4ZDtjb2xvcjojZmZmfS5zZy1jb2xvci1wcmltYXJ5IC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjMTZjOThkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3Itc2Vjb25kYXJ5e2NvbG9yOiNmZWVmNmR9LnNnLWNvbG9yLXNlY29uZGFyeSAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2ZlZWY2ZDtjb2xvcjojNDQ0fS5zZy1jb2xvci1zZWNvbmRhcnkgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiNmZWVmNmRcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci1oaWdobGlnaHR7Y29sb3I6I2ZhNWU1Yn0uc2ctY29sb3ItaGlnaGxpZ2h0IC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojZmE1ZTViO2NvbG9yOiM0NDR9LnNnLWNvbG9yLWhpZ2hsaWdodCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiI2ZhNWU1YlwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLXRleHR7Y29sb3I6IzQ0NH0uc2ctY29sb3ItdGV4dCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6IzQ0NDtjb2xvcjojZmZmfS5zZy1jb2xvci10ZXh0IC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjNDQ0XCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItYmFja2dyb3VuZHtjb2xvcjojZjFmMWYxfS5zZy1jb2xvci1iYWNrZ3JvdW5kIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojZjFmMWYxO2NvbG9yOiM0NDQ7Ym9yZGVyOiNmMWYxZjEgc29saWQgMXB4fS5zZy1jb2xvci1iYWNrZ3JvdW5kIC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZjFmMWYxXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItYm9yZGVye2NvbG9yOiNkZGR9LnNnLWNvbG9yLWJvcmRlciAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2RkZDtjb2xvcjojNDQ0fS5zZy1jb2xvci1ib3JkZXIgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiNkZGRcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci1saW5re2NvbG9yOiMxNmM5OGR9LnNnLWNvbG9yLWxpbmsgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiMxNmM5OGQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItbGluayAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzE2Yzk4ZFwiO2Rpc3BsYXk6YmxvY2t9LnNnLXR5cGV7bWFyZ2luLWJvdHRvbToxZW19Y29kZXtib3JkZXI6MXB4IHNvbGlkICNkZGQ7YmFja2dyb3VuZC1jb2xvcjojRjlGOEY4O2ZvbnQtc2l6ZToxMXB4O2ZvbnQtc2l6ZTowLjU1cmVtfS5zZy10eXBlLW1pY3JvIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjlweDtmb250LXNpemU6MC40NXJlbX0uc2ctdHlwZS1taWNybyBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogOXB4XCJ9LnNnLXR5cGUtc21hbGxlc3QgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MTFweDtmb250LXNpemU6MC41NXJlbX0uc2ctdHlwZS1zbWFsbGVzdCBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTFweFwifS5zZy10eXBlLXNtYWxsZXIgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MTNweDtmb250LXNpemU6MC42NXJlbX0uc2ctdHlwZS1zbWFsbGVyIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAxM3B4XCJ9LnNnLXR5cGUtc21hbGwgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MTZweDtmb250LXNpemU6MC44cmVtfS5zZy10eXBlLXNtYWxsIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAxNnB4XCJ9LnNnLXR5cGUtYmFzZSAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZToyMHB4O2ZvbnQtc2l6ZToxcmVtfS5zZy10eXBlLWJhc2UgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDIwcHhcIn0uc2ctdHlwZS1sYXJnZSAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZToyNXB4O2ZvbnQtc2l6ZToxLjI1cmVtfS5zZy10eXBlLWxhcmdlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyNXB4XCJ9LnNnLXR5cGUtbGFyZ2VyIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjMycHg7Zm9udC1zaXplOjEuNnJlbX0uc2ctdHlwZS1sYXJnZXIgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDMycHhcIn0uc2ctdHlwZS1sYXJnZXN0IC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjQwcHg7Zm9udC1zaXplOjJyZW19LnNnLXR5cGUtbGFyZ2VzdCBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogNDBweFwifS5zZy10eXBlLWp1bWJvIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjQ5cHg7Zm9udC1zaXplOjIuNDVyZW19LnNnLXR5cGUtanVtYm8gY29kZTphZnRlcntjb250ZW50OlwiIDo6IDQ5cHhcIn0uc2ctdHlwZVNwZWNpbWVue21hcmdpbi1ib3R0b206MDttYXJnaW4tdG9wOjA7LW1zLXdvcmQtd3JhcDpicmVhay13b3JkO3dvcmQtd3JhcDpicmVhay13b3JkfS5zZy10eXBlU3BlY2ltZW46YWZ0ZXJ7ZGlzcGxheTpibG9jaztmb250LXNpemU6MTZweDtmb250LXNpemU6MC44cmVtO21hcmdpbi10b3A6NXB4O2JvcmRlci10b3A6MXB4IHNvbGlkICNkZGQ7Zm9udC13ZWlnaHQ6bm9ybWFsfS5zZy10eXBlU3BlY2ltZW4tLXByaW1hcnl7Zm9udC1zaXplOjMwcHg7Zm9udC1zaXplOjEuNXJlbTtmb250LWZhbWlseTpHZW9yZ2lhLFwiVGltZXMgTmV3IFJvbWFuXCIsVGltZXMsc2VyaWY7Zm9udC13ZWlnaHQ6Ym9sZH0uc2ctdHlwZVNwZWNpbWVuLS1zZWNvbmRhcnl7Zm9udC1zaXplOjMwcHg7Zm9udC1zaXplOjEuNXJlbTtmb250LWZhbWlseTpcIkhlbHZldGljYSBOZXVlXCIsSGVsdmV0aWNhLEFyaWFsLHNhbnMtc2VyaWZ9LnNnLXR5cGVTcGVjaW1lbi0tZ2lhbnR7Zm9udC1zaXplOjEyMHB4O2ZvbnQtc2l6ZTo2cmVtO2xpbmUtaGVpZ2h0OjF9Lmljb24tc2d7ZGlzcGxheTppbmxpbmUtYmxvY2s7d2lkdGg6NTBweDtoZWlnaHQ6NTBweDt2ZXJ0aWNhbC1hbGlnbjptaWRkbGU7bWFyZ2luLXJpZ2h0OjEwcHg7bWFyZ2luLWJvdHRvbToxMHB4fS5zZy1mYXZpY29ue3BhZGRpbmc6NXB4fS5zZy1mYXZpY29uIGltZ3t2ZXJ0aWNhbC1hbGlnbjptaWRkbGU7bWFyZ2luLXJpZ2h0OjE1cHh9XG4iXX0= */
\ No newline at end of file
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3RlbXAvY3NzL3N0eWxlZ3VpZGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLEtBQUsscUJBQXFCLENBQUMscUNBQXFDLHdEQUF3RCxlQUFlLENBQUMsMEJBQTBCLFVBQVUsQ0FBQyxtQkFBbUIsYUFBYSxDQUFDLFNBQVMsZ0JBQWdCLFlBQVksQ0FBQyxnQkFBZ0IseUJBQXlCLGNBQWMsVUFBVSxDQUFDLFdBQVcsWUFBWSxDQUFDLFdBQVcseUJBQXlCLFdBQVcsYUFBYSxlQUFlLENBQUMsY0FBYyxrQkFBa0IsQ0FBQyxhQUFhLFdBQVcsOENBQThDLENBQUMsbUJBQW1CLDRCQUE0QixDQUFDLHVCQUF1QixlQUFlLENBQUMsV0FBVyxrQkFBa0IsaUJBQWlCLGtCQUFrQixDQUFDLGlCQUFpQixZQUFZLGFBQWEsZUFBZSxrQkFBa0IsZ0RBQWdELENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFVBQVUsQ0FBQyw2Q0FBNkMsa0JBQWtCLGFBQWEsQ0FBQyxrQkFBa0IsYUFBYSxDQUFDLG1DQUFtQyx5QkFBeUIsVUFBVSxDQUFDLDBDQUEwQyxrQkFBa0IsYUFBYSxDQUFDLG9CQUFvQixhQUFhLENBQUMscUNBQXFDLHlCQUF5QixVQUFVLENBQUMsNENBQTRDLGtCQUFrQixhQUFhLENBQUMsb0JBQW9CLGFBQWEsQ0FBQyxxQ0FBcUMseUJBQXlCLFVBQVUsQ0FBQyw0Q0FBNEMsa0JBQWtCLGFBQWEsQ0FBQyxlQUFlLFVBQVUsQ0FBQyxnQ0FBZ0Msc0JBQXNCLFVBQVUsQ0FBQyx1Q0FBdUMsZUFBZSxhQUFhLENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFdBQVcsd0JBQXdCLENBQUMsNkNBQTZDLGtCQUFrQixhQUFhLENBQUMsaUJBQWlCLFVBQVUsQ0FBQyxrQ0FBa0Msc0JBQXNCLFVBQVUsQ0FBQyx5Q0FBeUMsZUFBZSxhQUFhLENBQUMsZUFBZSxhQUFhLENBQUMsZ0NBQWdDLHlCQUF5QixVQUFVLENBQUMsdUNBQXVDLGtCQUFrQixhQUFhLENBQUMsU0FBUyxpQkFBaUIsQ0FBQyxLQUFLLHNCQUFzQix5QkFBeUIsZUFBZSxpQkFBaUIsQ0FBQyw2QkFBNkIsY0FBYyxpQkFBaUIsQ0FBQywwQkFBMEIsaUJBQWlCLENBQUMsZ0NBQWdDLGVBQWUsaUJBQWlCLENBQUMsNkJBQTZCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGlCQUFpQixDQUFDLDRCQUE0QixrQkFBa0IsQ0FBQyw2QkFBNkIsZUFBZSxnQkFBZ0IsQ0FBQywwQkFBMEIsa0JBQWtCLENBQUMsNEJBQTRCLGVBQWUsY0FBYyxDQUFDLHlCQUF5QixrQkFBa0IsQ0FBQyw2QkFBNkIsZUFBZSxpQkFBaUIsQ0FBQywwQkFBMEIsa0JBQWtCLENBQUMsOEJBQThCLGVBQWUsZ0JBQWdCLENBQUMsMkJBQTJCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGNBQWMsQ0FBQyw0QkFBNEIsa0JBQWtCLENBQUMsNkJBQTZCLGVBQWUsaUJBQWlCLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLGlCQUFpQixnQkFBZ0IsYUFBYSx5QkFBeUIsb0JBQW9CLENBQUMsdUJBQXVCLGNBQWMsZUFBZSxpQkFBaUIsZUFBZSwwQkFBMEIsa0JBQWtCLENBQUMsMEJBQTBCLGVBQWUsaUJBQWlCLHdEQUF3RCxnQkFBZ0IsQ0FBQyw0QkFBNEIsZUFBZSxpQkFBaUIsdURBQXVELENBQUMsd0JBQXdCLGdCQUFnQixlQUFlLGFBQWEsQ0FBQyxTQUFTLHFCQUFxQixXQUFXLFlBQVksc0JBQXNCLGtCQUFrQixrQkFBa0IsQ0FBQyxZQUFZLFdBQVcsQ0FBQyxnQkFBZ0Isc0JBQXNCLGlCQUFpQixDQUFDIiwiZmlsZSI6InN0eWxlZ3VpZGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9keXtiYWNrZ3JvdW5kLWNvbG9yOiNmZmZ9LnNnLWludGVyZmFjZVR5cGUsLnNnLXNlY3Rpb25IZWFkaW5ne2ZvbnQtZmFtaWx5OlwiSGVsdmV0aWNhIE5ldWVcIixIZWx2ZXRpY2EsQXJpYWwsc2Fucy1zZXJpZjtmb250LXdlaWdodDozMDB9LnNnLWludGVyZmFjZVR5cGUtLXN1YnRsZXtjb2xvcjojODg4fS5zZy1zZWN0aW9uSGVhZGluZ3tjb2xvcjojMTZjOThkfS5zZy1wYWdle292ZXJmbG93OmhpZGRlbjtwYWRkaW5nOjglIDB9LnNnLXBhZ2UtLXN0YXJ0e2JhY2tncm91bmQtY29sb3I6IzE2Yzk4ZDtwYWRkaW5nOjE1JSAwO2NvbG9yOiNmZmZ9LnNnLXNwYWNlcntwYWRkaW5nOjIwcHh9LnNnLWZvb3RlcntiYWNrZ3JvdW5kLWNvbG9yOiMxODE4MzA7Y29sb3I6I2ZmZjtwYWRkaW5nOjMwcHg7bWFyZ2luLXRvcDozMHB4fS5zZy1mb290ZXIgaDF7bWFyZ2luLWJvdHRvbTouMmVtfS5zZy1mb290ZXIgYXtjb2xvcjojZmZmO2JvcmRlci1ib3R0b206MnB4IGRhc2hlZCByZ2JhKDI1NSwyNTUsMjU1LDAuMyl9LnNnLWZvb3RlciBhOmhvdmVye2JvcmRlci1ib3R0b206MnB4IHNvbGlkICNmZmZ9LnNnLWZvb3RlciA6bGFzdC1jaGlsZHttYXJnaW4tYm90dG9tOjB9LnNnLXN3YXRjaHt0ZXh0LWFsaWduOmNlbnRlcjtsaW5lLWhlaWdodDozMHB4O21hcmdpbjoxMHB4IDEwcHggMH0uc2ctc3dhdGNoLWNvbG9ye2hlaWdodDo2MHB4O3BhZGRpbmc6MTVweDtmb250LXNpemU6MTNweDtmb250LXNpemU6MC42NXJlbTtmb250LWZhbWlseTpNZW5sbyxNb25hY28sXCJDb3VyaWVyIE5ld1wiLG1vbm9zcGFjZX0uc2ctY29sb3ItbGluay1ob3Zlcntjb2xvcjojMGM2ZDRkfS5zZy1jb2xvci1saW5rLWhvdmVyIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMGM2ZDRkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmstaG92ZXIgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMwYzZkNGRcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci1wcmltYXJ5e2NvbG9yOiMxNmM5OGR9LnNnLWNvbG9yLXByaW1hcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiMxNmM5OGQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItcHJpbWFyeSAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzE2Yzk4ZFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLXNlY29uZGFyeXtjb2xvcjojZmVlZjZkfS5zZy1jb2xvci1zZWNvbmRhcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNmZWVmNmQ7Y29sb3I6IzQ0NH0uc2ctY29sb3Itc2Vjb25kYXJ5IC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZmVlZjZkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItaGlnaGxpZ2h0e2NvbG9yOiNmYTVlNWJ9LnNnLWNvbG9yLWhpZ2hsaWdodCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2ZhNWU1Yjtjb2xvcjojNDQ0fS5zZy1jb2xvci1oaWdobGlnaHQgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiNmYTVlNWJcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci10ZXh0e2NvbG9yOiM0NDR9LnNnLWNvbG9yLXRleHQgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiM0NDQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItdGV4dCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzQ0NFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJhY2tncm91bmR7Y29sb3I6I2YxZjFmMX0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2YxZjFmMTtjb2xvcjojNDQ0O2JvcmRlcjojZjFmMWYxIHNvbGlkIDFweH0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiI2YxZjFmMVwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJvcmRlcntjb2xvcjojZGRkfS5zZy1jb2xvci1ib3JkZXIgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNkZGQ7Y29sb3I6IzQ0NH0uc2ctY29sb3ItYm9yZGVyIC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZGRkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItbGlua3tjb2xvcjojMTZjOThkfS5zZy1jb2xvci1saW5rIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMTZjOThkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmsgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMxNmM5OGRcIjtkaXNwbGF5OmJsb2NrfS5zZy10eXBle21hcmdpbi1ib3R0b206MWVtfWNvZGV7Ym9yZGVyOjFweCBzb2xpZCAjZGRkO2JhY2tncm91bmQtY29sb3I6I0Y5RjhGODtmb250LXNpemU6MTFweDtmb250LXNpemU6MC41NXJlbX0uc2ctdHlwZS1taWNybyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo5cHg7Zm9udC1zaXplOjAuNDVyZW19LnNnLXR5cGUtbWljcm8gY29kZTphZnRlcntjb250ZW50OlwiIDo6IDlweFwifS5zZy10eXBlLXNtYWxsZXN0IC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjExcHg7Zm9udC1zaXplOjAuNTVyZW19LnNnLXR5cGUtc21hbGxlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDExcHhcIn0uc2ctdHlwZS1zbWFsbGVyIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjEzcHg7Zm9udC1zaXplOjAuNjVyZW19LnNnLXR5cGUtc21hbGxlciBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTNweFwifS5zZy10eXBlLXNtYWxsIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbX0uc2ctdHlwZS1zbWFsbCBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTZweFwifS5zZy10eXBlLWJhc2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MjBweDtmb250LXNpemU6MXJlbX0uc2ctdHlwZS1iYXNlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyMHB4XCJ9LnNnLXR5cGUtbGFyZ2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MjVweDtmb250LXNpemU6MS4yNXJlbX0uc2ctdHlwZS1sYXJnZSBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMjVweFwifS5zZy10eXBlLWxhcmdlciAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTozMnB4O2ZvbnQtc2l6ZToxLjZyZW19LnNnLXR5cGUtbGFyZ2VyIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAzMnB4XCJ9LnNnLXR5cGUtbGFyZ2VzdCAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0MHB4O2ZvbnQtc2l6ZToycmVtfS5zZy10eXBlLWxhcmdlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDQwcHhcIn0uc2ctdHlwZS1qdW1ibyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0OXB4O2ZvbnQtc2l6ZToyLjQ1cmVtfS5zZy10eXBlLWp1bWJvIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiA0OXB4XCJ9LnNnLXR5cGVTcGVjaW1lbnttYXJnaW4tYm90dG9tOjA7bWFyZ2luLXRvcDowOy1tcy13b3JkLXdyYXA6YnJlYWstd29yZDt3b3JkLXdyYXA6YnJlYWstd29yZH0uc2ctdHlwZVNwZWNpbWVuOmFmdGVye2Rpc3BsYXk6YmxvY2s7Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbTttYXJnaW4tdG9wOjVweDtib3JkZXItdG9wOjFweCBzb2xpZCAjZGRkO2ZvbnQtd2VpZ2h0Om5vcm1hbH0uc2ctdHlwZVNwZWNpbWVuLS1wcmltYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmO2ZvbnQtd2VpZ2h0OmJvbGR9LnNnLXR5cGVTcGVjaW1lbi0tc2Vjb25kYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmfS5zZy10eXBlU3BlY2ltZW4tLWdpYW50e2ZvbnQtc2l6ZToxMjBweDtmb250LXNpemU6NnJlbTtsaW5lLWhlaWdodDoxfS5pY29uLXNne2Rpc3BsYXk6aW5saW5lLWJsb2NrO3dpZHRoOjUwcHg7aGVpZ2h0OjUwcHg7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxMHB4O21hcmdpbi1ib3R0b206MTBweH0uc2ctZmF2aWNvbntwYWRkaW5nOjVweH0uc2ctZmF2aWNvbiBpbWd7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxNXB4fVxuIl19 */
\ No newline at end of file

From aa7d2e6c32b524dcbeff563e76e8fb17d1ccaeae Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Thu, 3 Sep 2015 15:10:19 +0100
Subject: [PATCH 014/136] Guttered version of block grid so it sits on site
 grid.

---
 assets/src/scss/components/_block-grids.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
index 4028bf05..8a7e7a75 100644
--- a/assets/src/scss/components/_block-grids.scss
+++ b/assets/src/scss/components/_block-grids.scss
@@ -60,3 +60,16 @@
 		}
 	}
 }
+
+
+/**
+ * Guttered block grid
+ */
+.l-blockGrid--guttered {
+    margin-left: -#{$grid-gutter-width}px;
+
+    > li {
+        padding-left: #{$grid-gutter-width}px;
+		padding-bottom: #{$grid-gutter-width}px;
+    }
+}
\ No newline at end of file

From 23dbfa1592c070d38412fca75257d0d07edbcbff Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:06:40 +0100
Subject: [PATCH 015/136] add contributors to `contributors` property

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 56d74cd9..91d9e5fc 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,12 @@
     {
       "name": "Ashley Nolan",
       "url": "http://ashleynolan.co.uk"
-    },
-    {
-      "name": "Contributors",
-      "url": "https://github.com/trykickoff/kickoff/graphs/contributors"
     }
   ],
+  "contributors": [
+    "Nic Bell",
+    "Github contributors <https://github.com/trykickoff/kickoff/graphs/contributors>"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/trykickoff/kickoff.git"

From da1f699c4ad0070d7c643d20e724e9ab107ef700 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:08:04 +0100
Subject: [PATCH 016/136] update package.json dependencies:

some have been added, some have been removed, some updates
---
 package.json | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 91d9e5fc..a63209a5 100644
--- a/package.json
+++ b/package.json
@@ -32,38 +32,34 @@
   "dependencies": {
     "cookies-js": "^1.2.1",
     "swiftclick": "^1.1.5",
-    "trak.js": "^0.5.0"
+    "trak.js": "^0.5.2"
   },
   "devDependencies": {
-    "chotto": "^0.1.0",
     "glob": "^5.0.5",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^3.0.0",
+    "grunt-browserify": "^4.0.0",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-imagemin": "^0.9.4",
-    "grunt-contrib-jshint": "^0.11.2",
-    "grunt-contrib-uglify": "^0.9.1",
     "grunt-csso": "^0.7.1",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",
     "grunt-sass": "^1.0.0",
-    "grunt-scss-lint": "^0.3.6",
-    "grunt-shimly": "^0.0.7",
+    "grunt-shimly": "^0.0.11",
     "imagemin-gifsicle": "^4.1.0",
     "imagemin-mozjpeg": "^5.1.0",
     "imagemin-pngquant": "^4.1.0",
-    "jquery": "^1.11.1",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.1.0",
-    "opn": "^1.0.2"
+    "minifyify": "^7.0.5",
+    "opn": "^3.0.2"
   },
   "optionalDependencies": {
     "browser-sync": "^2.8.2",
     "grunt-browser-sync": "^2.1.3",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-photobox": "^0.8.1"
+    "grunt-contrib-watch": "^0.6.1"
   },
   "keywords": [],
   "scripts": {

From bff05d20f4442d763a1b4b70992131b9d79b470f Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:08:16 +0100
Subject: [PATCH 017/136] bump node version for travis

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 825df63a..c14d2048 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,6 +3,6 @@
 language: node_js
 sudo: false
 node_js:
-- '0.10'
+- '0.12'
 before_script:
 - npm install -g grunt-cli

From 0d7fe581acf28932649cd63153f04e73f37052a9 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:10:57 +0100
Subject: [PATCH 018/136] add new custom grunt task: `grunt watcher`

this task is similar to `grunt serve` with the exception that it does not spin up a local server.
---
 Gruntfile.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/Gruntfile.js b/Gruntfile.js
index d977047f..5fbfb04f 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -24,6 +24,7 @@ module.exports = function (grunt) {
 	 * Available tasks:
 	 * grunt            : Alias for 'serve' task, below (the default task)
 	 * grunt serve      : watch js, images & scss and run a local server
+	 * grunt watcher    : run compile JS/CSS then watch
 	 * grunt start      : Opens the post-install setup checklist on the Kickoff site
 	 * grunt watch      : run sass:kickoff, uglify and livereload
 	 * grunt dev        : run uglify, sass:kickoff & autoprefixer:kickoff
@@ -58,6 +59,21 @@ module.exports = function (grunt) {
 	]);
 
 
+	/**
+	 * GRUNT WATCHER * A task for compiling & watching.
+	 * Useful for development when not using the browserSync server
+	 * run compile JS/CSS then watch
+	 */
+	grunt.registerTask('watcher', [
+		'shimly',
+		'compileJS',
+		'compileCSS',
+		'copy:modernizr',
+		'images',
+		'watch'
+	]);
+
+
 	/**
 	 * GRUNT START
 	 * Opens the post-install setup checklist on the Kickoff site

From 1432982069e0e2da18087b81eb746d55004d1979 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:17:26 +0100
Subject: [PATCH 019/136] move `clean:tempCSS` into `compileCSS` helper task

---
 Gruntfile.js            | 21 +++++++--------------
 _grunt-configs/watch.js | 11 +----------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 5fbfb04f..55391a55 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -27,12 +27,12 @@ module.exports = function (grunt) {
 	 * grunt watcher    : run compile JS/CSS then watch
 	 * grunt start      : Opens the post-install setup checklist on the Kickoff site
 	 * grunt watch      : run sass:kickoff, uglify and livereload
-	 * grunt dev        : run uglify, sass:kickoff & autoprefixer:kickoff
-	 * grunt deploy     : run jshint, uglify, sass:kickoff and csso
+	 * grunt dev        : run browserify, sass:kickoff & autoprefixer:kickoff
+	 * grunt deploy     : run browserify, sass:kickoff and csso
 	 * grunt styleguide : watch js & scss, run a local server for editing the styleguide
 	 * grunt images     : compress all non-grunticon images & then run `grunt icons`
 	 * grunt icons      : generate the icons. uses svgmin and grunticon
-	 * grunt checks     : run jshint, scsslint and html validator
+	 * grunt checks     : run html validator
 	 * grunt travis     : used by travis ci only
 	 */
 
@@ -51,7 +51,6 @@ module.exports = function (grunt) {
 		'shimly',
 		'compileJS',
 		'compileCSS',
-		'clean:tempCSS',
 		'copy:modernizr',
 		'images',
 		'browserSync:serve',
@@ -91,7 +90,6 @@ module.exports = function (grunt) {
 		'shimly',
 		'compileJS',
 		'compileCSS',
-		'clean:tempCSS',
 		'copy:modernizr',
 		'images'
 	]);
@@ -106,7 +104,6 @@ module.exports = function (grunt) {
 		'compileJS',
 		'compileCSS',
 		'csso',
-		'clean:tempCSS',
 		'copy:modernizr',
 		'images'
 	]);
@@ -119,7 +116,6 @@ module.exports = function (grunt) {
 		'shimly',
 		'compileJS',
 		'compileCSS',
-		'clean:tempCSS',
 		'images',
 		'browserSync:styleguide',
 		'watch'
@@ -150,8 +146,6 @@ module.exports = function (grunt) {
 	 * run jshint
 	 */
 	grunt.registerTask('checks', [
-		'jshint:project',
-		'scsslint',
 		'validation'
 	]);
 
@@ -160,23 +154,22 @@ module.exports = function (grunt) {
 	 * Travis CI to test build
 	 */
 	grunt.registerTask('travis', [
-		'jshint:project',
-		'uglify',
 		'sass:kickoff'
 	]);
 
+
 	/**
 	 * Utility classes
 	 */
 	// Compile JS
 	grunt.registerTask('compileJS', [
-		'chotto:js',
-		'uglify',
+		'browserify'
 	]);
 
 	// Compile CSS
 	grunt.registerTask('compileCSS', [
 		'sass',
-		'autoprefixer'
+		'autoprefixer',
+		'clean:tempCSS'
 	]);
 };
diff --git a/_grunt-configs/watch.js b/_grunt-configs/watch.js
index 03dbc0ed..b081c1ef 100644
--- a/_grunt-configs/watch.js
+++ b/_grunt-configs/watch.js
@@ -14,16 +14,7 @@ module.exports.tasks = {
 		scss: {
 			files: ['<%=config.css.scssDir%>/**/*.scss'],
 			tasks: [
-				'compileCSS',
-				'clean:tempCSS'
-			]
-		},
-
-		js: {
-			files: ['<%=config.js.fileList%>'],
-			tasks: [
-				'uglify',
-				'newer:copy:modernizr'
+				'compileCSS'
 			]
 		},
 

From d4bd4f8d6c0819f62a146ad9c2c6fde29ae4d791 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:18:06 +0100
Subject: [PATCH 020/136] change js grunt vars so they apply to browserify

---
 _grunt-configs/config.js | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/_grunt-configs/config.js b/_grunt-configs/config.js
index eb5b71c1..c3f0ebf3 100644
--- a/_grunt-configs/config.js
+++ b/_grunt-configs/config.js
@@ -27,32 +27,14 @@ module.exports = {
 
 
 	// Javascript-related Grunt vars
-	js : {
-		distDir  : '<%=config.distDir%>/js/', // <%=config.js.distDir%>
+	js: {
+		srcFile: '<%=config.srcDir%>/js/script.js',// <%=config.js.srcFile%>
+
+		distDir: '<%=config.distDir%>/js/', // <%=config.js.distDir%>
 
 		// Renaming this changes the name of the generated JS file
 		// Make sure you update your template file
-		distFile : 'script.js', // <%=config.js.distFile%>
-
-		// The files in this array will be concatinated and minified by our build
-		// Remove any files that you don't want, & add any that you need
-
-		// <%=config.js.fileList%>
-		fileList : [
-			// if you would like to remove jQuery from your concatenated JS, comment out the line below
-			'./node_modules/jquery/dist/jquery.js',
-
-			// if you would like some basic JS shims (when not using jQuery),
-			// uncomment the line below to compile Shimly output
-			//'<%=config.srcDir%>/js/helpers/shims.js',
-
-			'<%=config.srcDir%>/js/helpers/console.js',
-			'./node_modules/trak.js/dist/trak.js',
-			'./node_modules/swiftclick/js/libs/swiftclick.js',
-			'./node_modules/cookies-js/dist/cookies.js',
-
-			'<%=config.srcDir%>/js/script.js'
-		]
+		distFile: 'script.js' // <%=config.js.distFile%>
 	},
 
 

From ba8e5fd4af95f786640b30a2a30edf3ec4a9c3fc Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:18:50 +0100
Subject: [PATCH 021/136] remove some grunt photobox vars

---
 _grunt-configs/config.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/_grunt-configs/config.js b/_grunt-configs/config.js
index c3f0ebf3..5c2ac2c4 100644
--- a/_grunt-configs/config.js
+++ b/_grunt-configs/config.js
@@ -49,19 +49,6 @@ module.exports = {
 	// Testing-related Grunt vars
 	// Add any other test vars in here
 	testing: {
-
-		// Used by Photobox at the moment
-		// http://trykickoff.github.io/learn/grunt.html#task-photobox
-		visual : {
-			sizes: [ '600', '1000', '1200' ], // <%=config.testing.visual.sizes%>
-
-			// Change these urls to test your app
-			// <%=config.testing.visual.urls%>
-			urls : [
-				'http://localhost:3000'
-			]
-		},
-
 		validationDir  : './testing',  // <%=config.tests.validationDir%>
 	}
 };

From 50073163a577d1f3f54e50d16362cdf3cff4da7c Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:19:15 +0100
Subject: [PATCH 022/136] tidy

---
 _grunt-configs/images.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/_grunt-configs/images.js b/_grunt-configs/images.js
index eab82515..09df2bd3 100644
--- a/_grunt-configs/images.js
+++ b/_grunt-configs/images.js
@@ -1,4 +1,4 @@
-var mozjpeg = require('imagemin-mozjpeg');
+var mozjpeg  = require('imagemin-mozjpeg');
 var pngquant = require('imagemin-pngquant');
 var gifsicle = require('imagemin-gifsicle');
 
@@ -10,6 +10,15 @@ module.exports.tasks = {
 	 * Minify PNG, SVG, gif & JPEG images
 	 */
 	imagemin: {
+		images: {
+			files: [{
+				expand: true,
+				cwd: '<%=config.img.srcDir%>/',
+				src: ['**/*.{svg,png,jpg,gif}'],
+				dest: '<%=config.img.distDir%>'
+			}]
+		},
+
 		grunticon: {
 			options: {
 				optimizationLevel: 3,
@@ -31,15 +40,6 @@ module.exports.tasks = {
 				dest: '<%=config.tempDir%>/icons'
 			}]
 		},
-
-		images: {
-			files: [{
-				expand: true,
-				cwd: '<%=config.img.srcDir%>/',
-				src: ['**/*.{svg,png,jpg,gif}'],
-				dest: '<%=config.img.distDir%>'
-			}]
-		}
 	},
 
 

From 5de7409e03c41c59cc163a52e5f95e69da6a484e Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:20:27 +0100
Subject: [PATCH 023/136] switch out grunt-contrib-uglify with browserify &
 remove chotto

---
 _grunt-configs/javascript.js | 44 +++++++++++++++++-------------------
 _grunt-configs/utilities.js  | 12 ----------
 2 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/_grunt-configs/javascript.js b/_grunt-configs/javascript.js
index ec6cf6d8..f5f41de4 100644
--- a/_grunt-configs/javascript.js
+++ b/_grunt-configs/javascript.js
@@ -1,29 +1,27 @@
 module.exports.tasks = {
 
 	/**
-	 * Uglify
-	 * https://github.com/gruntjs/grunt-contrib-uglify
-	 * Minifies and concatinates your JS
-	 * Also creates source maps
+	 * Browserify
+	 * https://github.com/jmreidy/grunt-browserify
+	 * Grunt task for node-browserify – allows CommonJS-style JS code and packages it for use in the browser
 	 */
-	uglify: {
-		options: {
-			mangle: { // set to false (replace this object) to turn off mangling
-				except: ['jQuery'] // https://github.com/gruntjs/grunt-contrib-uglify#reserved-identifiers
-			},
-			compress: { // set to false (replace this object) to turn off compression
-				drop_console: false
-			},
-
-			beautify: false, // beautify: beautify your code for debugging/troubleshooting purposes
-			// report: 'gzip', // report: Show file size report
-			sourceMap: '<%=config.js.distDir%><%=config.js.distFile%>.map',
-			sourceMappingURL: '/<%=config.js.distFile%>.map',
-		},
-		js: {
-			nonull: true,
-			src: '<%=config.js.fileList%>',
-			dest: '<%=config.js.distDir%><%=config.js.distFile%>'
+	browserify: {
+		main: {
+			src: ['<%=config.js.srcFile%>'],
+			dest: '<%=config.js.distDir%><%=config.js.distFile%>',
+			options: {
+				browserifyOptions: {
+					debug: true,
+					fullPaths: false
+				},
+				plugin: [
+					['minifyify', {
+						output: '<%=config.js.distDir%>script.map',
+						map: 'script.map'
+					}]
+				],
+				watch: true
+			}
 		}
 	},
 
@@ -35,7 +33,7 @@ module.exports.tasks = {
 	 */
 	shimly: {
 		// things you would like to shim (an array of items from the list above)
-		shim: ['Array.forEach', 'Array.filter', 'Array.map', 'Function.bind', 'EventListener'],
+		shim: ['Array.forEach', 'EventListener'],
 
 		// output location (relative to your grunt.js file location)
 		dest: '<%=config.srcDir%>/js/helpers/shims.js',
diff --git a/_grunt-configs/utilities.js b/_grunt-configs/utilities.js
index fa93aa40..92ac2215 100644
--- a/_grunt-configs/utilities.js
+++ b/_grunt-configs/utilities.js
@@ -20,17 +20,5 @@ module.exports.tasks = {
 			src: '<%=config.srcDir%>/js/libs/modernizr.min.js',
 			dest: '<%=config.distDir%>/js/libs/modernizr.min.js'
 		}
-	},
-
-
-	/**
-	 * Chotto
-	 * Checks for the existence of files and halts the Grunt build if they don't exist
-	 * https://www.npmjs.com/package/chotto
-	 */
-	chotto : {
-		js : {
-			filePaths: '<%=config.js.fileList%>'
-		}
 	}
 };

From 0cb477fc4b0a6a3b894d852d5b612267fdb33cac Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:20:55 +0100
Subject: [PATCH 024/136] remove jshint, scsslint & photobox grunt plugins

---
 _grunt-configs/tests.js | 48 -----------------------------------------
 1 file changed, 48 deletions(-)

diff --git a/_grunt-configs/tests.js b/_grunt-configs/tests.js
index 70f8e4b9..dfac7fdc 100644
--- a/_grunt-configs/tests.js
+++ b/_grunt-configs/tests.js
@@ -1,53 +1,5 @@
 module.exports.tasks = {
 
-	/**
-	 * scss Lint
-	 * https://github.com/ahmednuaman/grunt-scss-lint
-	 */
-	scsslint: {
-		allFiles: [
-			'<%=config.css.scssDir%>/**/*.scss',
-		],
-		options: {
-			config: '.scss-lint.yml',
-			reporterOutput: null
-		},
-	},
-
-
-	/**
-	 * JSHint
-	 * https://github.com/gruntjs/grunt-contrib-jshint
-	 * Manage the options inside .jshintrc file
-	 */
-	jshint: {
-		options: {
-			jshintrc: '.jshintrc'
-		},
-		project: [
-			'<%=config.srcDir%>/js/**/*.js',
-			'!<%=config.srcDir%>/js/{libs,helpers}/**/*.js',
-			'!<%=config.srcDir%>/js/**/*.min.js'
-		]
-	},
-
-
-
-	/**
-	 * Grunt Photobox
-	 * https://github.com/stefanjudis/grunt-photoBox
-	 * Visual regression testing tool
-	 */
-	photobox: {
-		task: {
-			options: {
-			screenSizes : '<%=config.testing.visual.sizes%>',
-			urls        : '<%=config.testing.visual.urls%>'
-			}
-		}
-	},
-
-
 	/**
 	 * Grunt Validation
 	 * https://github.com/praveenvijayan/grunt-html-validation

From 9402b86666ed9adc7895dede0a1dfce301f624e2 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:27:07 +0100
Subject: [PATCH 025/136] change some scss type variable names:

- `$type-large` is now `$type-mid`
- `$type-larger` is now `$type-large`
---
 assets/src/scss/_typography.scss       | 4 ++--
 assets/src/scss/_variables.scss        | 5 ++---
 assets/src/scss/components/_forms.scss | 2 +-
 assets/src/scss/styleguide.scss        | 6 +++---
 styleguide/index.html                  | 2 +-
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss
index 3232d1eb..d91a4a7d 100644
--- a/assets/src/scss/_typography.scss
+++ b/assets/src/scss/_typography.scss
@@ -91,11 +91,11 @@ h1, .h1, .alpha {
 }
 
 h2, .h2, .beta {
-	@include font-size($type-larger);
+	@include font-size($type-large);
 }
 
 h3, .h3, .gamma {
-	@include font-size($type-large);
+	@include font-size($type-mid);
 }
 
 h4, .h4, .delta {
diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss
index 5512a02a..2d9db565 100644
--- a/assets/src/scss/_variables.scss
+++ b/assets/src/scss/_variables.scss
@@ -30,12 +30,11 @@ $type-smallest                 : modular-scale($font-size-base, -3, $type-scale)
 $type-smaller                  : modular-scale($font-size-base, -2, $type-scale);
 $type-small                    : modular-scale($font-size-base, -1, $type-scale); // h5, h6
 $type-base                     : modular-scale($font-size-base, 0, $type-scale);  // p, h4
-$type-large                    : modular-scale($font-size-base, 1, $type-scale);  // h3
-$type-larger                   : modular-scale($font-size-base, 2, $type-scale);  // h2
+$type-mid                      : modular-scale($font-size-base, 1, $type-scale);  // h3
+$type-large                    : modular-scale($font-size-base, 2, $type-scale);  // h2
 $type-largest                  : modular-scale($font-size-base, 3, $type-scale);  // h1
 $type-jumbo                    : modular-scale($font-size-base, 4, $type-scale);
 
-
 // Useful to set here when bold webfonts come as 400 font-weight.
 $font-weight-bold             : bold;
 
diff --git a/assets/src/scss/components/_forms.scss b/assets/src/scss/components/_forms.scss
index f0799cbf..74d0a823 100644
--- a/assets/src/scss/components/_forms.scss
+++ b/assets/src/scss/components/_forms.scss
@@ -58,7 +58,7 @@ $color-info               : $blue;               // base colour for info input s
 	width: 100%;
 	padding: 0;
 	margin-bottom: $baseline;
-	@include font-size($type-large);
+	@include font-size($type-mid);
 	line-height: $leading-base;
 	color: $label-textColor;
 	border: 0;
diff --git a/assets/src/scss/styleguide.scss b/assets/src/scss/styleguide.scss
index 1ad5fd87..9ac6b00c 100644
--- a/assets/src/scss/styleguide.scss
+++ b/assets/src/scss/styleguide.scss
@@ -187,12 +187,12 @@ code {
 .sg-type-base {
 	@include sgTypeTest($type-base);
 }
+.sg-type-mid {
+	@include sgTypeTest($type-mid);
+}
 .sg-type-large {
 	@include sgTypeTest($type-large);
 }
-.sg-type-larger {
-	@include sgTypeTest($type-larger);
-}
 .sg-type-largest {
 	@include sgTypeTest($type-largest);
 }
diff --git a/styleguide/index.html b/styleguide/index.html
index 5ca739f3..063750ea 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -178,8 +178,8 @@ <h3 class="sg-interfaceType sg-interfaceType--subtle">Typeface sizes</h3>
 						<div class="sg-type sg-type-base"><div class="sg-type-item">Example text</div> <code>$type-base</code></div>
 					</div>
 					<div class="g-span6 g-col">
+						<div class="sg-type sg-type-mid"><div class="sg-type-item">Example text</div> <code>$type-mid</code></div>
 						<div class="sg-type sg-type-large"><div class="sg-type-item">Example text</div> <code>$type-large</code></div>
-						<div class="sg-type sg-type-larger"><div class="sg-type-item">Example text</div> <code>$type-larger</code></div>
 						<div class="sg-type sg-type-largest"><div class="sg-type-item">Example text</div> <code>$type-largest</code></div>
 						<div class="sg-type sg-type-jumbo"><div class="sg-type-item">Example text</div> <code>$type-jumbo</code></div>
 					</div>

From 9bc957291f94880f8e4190bd3c49f54b7cccd29f Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:28:02 +0100
Subject: [PATCH 026/136] media object updated

It has been updated to ensure that it doesn't stack it's columns on skinny viewports by default but instead, by the use of modifier classes
---
 assets/src/scss/components/_media-object.scss | 61 +++++++++++--------
 1 file changed, 37 insertions(+), 24 deletions(-)

diff --git a/assets/src/scss/components/_media-object.scss b/assets/src/scss/components/_media-object.scss
index 0562daba..2362e277 100644
--- a/assets/src/scss/components/_media-object.scss
+++ b/assets/src/scss/components/_media-object.scss
@@ -26,42 +26,55 @@
 	width: 100%;
 }
 
+.media-img,
+.media-body {
+	display: table-cell;
+	vertical-align: middle;
 
+	.media--top & {
+		vertical-align: top;
+	}
 
-@include respond-min($bp-narrow) {
-	.media-img,
-	.media-body {
-		display: table-cell;
-		vertical-align: middle;
+	.media--bottom & {
+		vertical-align: bottom;
+	}
+}
 
-		.media--top & {
-			vertical-align: top;
-		}
+.media-body {
+	width: 100%;
+}
 
-		.media--bottom & {
-			vertical-align: bottom;
-		}
+.media-img {
+	padding-right: 10px;
 
-		:last-child {
-			margin-bottom: 0;
-		}
+	> img {
+		display: block;
+		max-width: none;
 	}
 
-	.media-body {
-		width: 100%;
+	.media--rev & {
+		padding-right: 0;
+		padding-left: 10px;
 	}
+}
 
-	.media-img {
-		padding-right: 10px;
-
-		> img {
+// Stack media-img & media-body on skinny viewports
+@include respond-max($bp-single-col) {
+	.media--stackOnSkinny {
+		.media-img,
+		.media-body {
 			display: block;
-			max-width: none;
 		}
+	}
+}
+
 
-		.media--rev & {
-			padding-right: 0;
-			padding-left: 10px;
+// Stack media-img & media-body on wider viewports
+@include respond-min($bp-single-col) {
+	.media--stackOnWide {
+		.media-img,
+		.media-body {
+			display: block;
 		}
 	}
 }

From 85798c7a128ef0e3b78def46423b5fad3b34e946 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:28:25 +0100
Subject: [PATCH 027/136] bump version # in readiness for next release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a63209a5..951f6cfd 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "kickoff",
   "title": "Kickoff",
   "description": "A lightweight front-end framework for creating scalable, responsive sites",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "homepage": "http://trykickoff.github.io",
   "authors": [
     {

From afde5d9ec57cddd09d27b434e11a6a6b597237cb Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:36:04 +0100
Subject: [PATCH 028/136] change `_icons.scss` to be a component instead of a
 partial

---
 assets/src/scss/_dependencies.scss                   | 2 +-
 assets/src/scss/{partials => components}/_icons.scss | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename assets/src/scss/{partials => components}/_icons.scss (100%)

diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index ae32fb81..8cd53d4a 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -36,6 +36,7 @@
  */
 @import "components/forms"; // http://trykickoff.github.io/demos/forms.html
 @import "components/forms-custom-controls";
+@import "components/icons";
 @import "components/links";
 @import "components/buttons";
 @import "components/grid"; // http://trykickoff.github.io/docs/grid.html & http://trykickoff.github.io/demos/grids.html
@@ -60,7 +61,6 @@
 @import "global";
 @import "partials/masthead";
 @import "partials/footer";
-@import "partials/icons";
 
 /**
  * Views
diff --git a/assets/src/scss/partials/_icons.scss b/assets/src/scss/components/_icons.scss
similarity index 100%
rename from assets/src/scss/partials/_icons.scss
rename to assets/src/scss/components/_icons.scss

From d2b5c32c2e6a005542f363659564df30f3c7d38a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 00:36:25 +0100
Subject: [PATCH 029/136] remove tabs styles

---
 assets/src/scss/_dependencies.scss    |  1 -
 assets/src/scss/components/_tabs.scss | 81 ---------------------------
 2 files changed, 82 deletions(-)
 delete mode 100644 assets/src/scss/components/_tabs.scss

diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index 8cd53d4a..1ef0b939 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -45,7 +45,6 @@
 @import "components/embedded-content";
 @import "components/media-object";
 @import "components/fluid-video";
-@import "components/tabs";
 @import "components/tables";
 @import "components/code";
 @import "components/skip-navigation";
diff --git a/assets/src/scss/components/_tabs.scss b/assets/src/scss/components/_tabs.scss
deleted file mode 100644
index 215bdf5b..00000000
--- a/assets/src/scss/components/_tabs.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Tabs
- * =================================
- */
-
-/**
- * Define associated tab variables
- */
-$tab-inactiveColor                 : #95a5a6;
-$tab-activeColor                   : $green;
-
-/**
- * Tabs base styling
- *
- * Usage:
-	<ul class="tabs">
-		<li><a href="#tabs-example-1" class="is-active">Tab 1</a></li>
-		<li><a href="#tabs-example-2">Tab 2</a></li>
-	</ul>
-
-	<!-- Tabs Content -->
-	<ul class="l-tabsContent">
-		<li id="tabs-example-1" class="is-active">
-			Tab 1 content
-		</li>
-
-		<li id="tabs-example-2">
-			Tab 2 content
-		</li>
-	</ul>
-	========================================================================== */
-.tabs {
-	@include clearfix;
-	@extend .unstyled;
-	margin-bottom: $line-height-base + px;
-	border-bottom: 2px solid $tab-activeColor;
-
-	&.tabs--alignRight {
-		li {
-			float: right;
-		}
-	}
-
-	&.tabs--alignCentre,
-	&.tabs--alignCenter {
-		text-align: center;
-
-		> li {
-			display: inline;
-			float: none;
-		}
-	}
-
-	> li {
-		float: left;
-		margin: 0 5px;
-	}
-
-	a {
-		background-color: $tab-inactiveColor;
-		@extend .btn;
-		border-radius: 4px 4px 0 0;
-		color: #fff;
-
-		&.is-active {
-			background-color: $tab-activeColor;
-		}
-	}
-}
-
-.l-tabsContent {
-	@extend .unstyled;
-
-	> li {
-		display: none;
-
-		&.is-active {
-			display: block;
-		}
-	}
-}

From 74c27862bf39a1a2a6d3d8b18fbee3e2000dd75c Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:07:24 +0100
Subject: [PATCH 030/136] tidy scss comments

---
 assets/src/scss/_color-palette.scss           | 21 +++--
 assets/src/scss/_dependencies.scss            | 17 ++--
 assets/src/scss/_typography.scss              | 20 ++---
 assets/src/scss/_variables.scss               | 83 +++++++++----------
 .../scss/components/_embedded-content.scss    |  7 +-
 assets/src/scss/components/_fluid-video.scss  | 12 +--
 assets/src/scss/components/_icons.scss        |  7 +-
 assets/src/scss/components/_links.scss        |  1 +
 assets/src/scss/components/_lists.scss        | 23 +++--
 assets/src/scss/components/_media-object.scss | 28 +++----
 .../src/scss/components/_skip-navigation.scss |  1 +
 assets/src/scss/kickoff-old-ie.scss           |  3 +-
 assets/src/scss/mixins/_grid-helpers.scss     | 50 +++++------
 assets/src/scss/mixins/_hidpi.scss            | 26 +++---
 assets/src/scss/mixins/_linear-gradient.scss  |  8 +-
 assets/src/scss/mixins/_mixins.scss           | 31 ++++---
 assets/src/scss/mixins/_position.scss         | 10 +--
 assets/src/scss/mixins/_prefixer.scss         |  6 +-
 assets/src/scss/mixins/_radial-gradient.scss  |  8 +-
 assets/src/scss/mixins/_responsive.scss       | 67 ++++++++-------
 assets/src/scss/mixins/_utility.scss          | 16 ++--
 assets/src/scss/mixins/_vertical-center.scss  | 12 +--
 22 files changed, 235 insertions(+), 222 deletions(-)

diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss
index 0c2d7d23..1bec5edb 100644
--- a/assets/src/scss/_color-palette.scss
+++ b/assets/src/scss/_color-palette.scss
@@ -1,6 +1,13 @@
-// =================================
-// Color palette
-// =================================
+/**
+ * Global Color palette
+ * - Generic colors
+ * - Color scheme
+ * - Common colors
+ * - Links
+ * - Text selection
+ * - <hr>
+ * - Any others..
+ */
 
 // Generic colors
 $blue                         : #288ad6;
@@ -22,10 +29,6 @@ $color-text                   : #444;
 $color-bg                     : #f1f1f1;
 $color-border                 : #ddd;
 
-// Text Selection
-$color-selection              : #fff;
-$color-selection-bg           : $color-primary;
-
 
 // Links
 $color-link-default           : $color-primary;
@@ -33,6 +36,10 @@ $color-link-visited           : $color-primary;
 $color-link-hover             : darken($color-primary, 20%);
 $color-link-active            : darken($color-primary, 20%);
 
+// Text Selection
+$color-selection              : #fff;
+$color-selection-bg           : $color-primary;
+
 
 // <hr> border color
 $hr-border                    : lighten(#000, 70%);
diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index 1ef0b939..f075990d 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -5,7 +5,6 @@
 
 /*
  * Mixins, helpers and functions
- * =================================
  * Most CSS3 vendor prefixed items have a mixin,
  * but we should not need them if autoprefixer is being used
  * See mixins/css3.scss for the full list
@@ -15,7 +14,6 @@
 
 /**
  * Core variables
- * =================================
  * Edit your color palette and app vars before your begin
  */
 @import "color-palette";
@@ -48,22 +46,19 @@
 @import "components/tables";
 @import "components/code";
 @import "components/skip-navigation";
-@import "components/scrollbars";
+// @import "components/scrollbars";x
+
 
 /**
  * Your app styles
- * =================================
- * Global styles
- * Example partial for masthead & footer
- * Icons - used in conjunction with grunticon
  */
-@import "global";
-@import "partials/masthead";
-@import "partials/footer";
+@import "global"; // Global styles
+@import "partials/masthead"; // Example partial for masthead
+@import "partials/footer"; // Example partial for footer
+
 
 /**
  * Views
- * =================================
  */
 //@import "views/home";
 //@import "views/contact";
diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss
index d91a4a7d..7e456e0e 100644
--- a/assets/src/scss/_typography.scss
+++ b/assets/src/scss/_typography.scss
@@ -1,14 +1,13 @@
 /**
  * Typography
- * =================================
- * Base
- * Paragraphs
- * Headings
- * Lists
- * Definition lists
- * Blockquotes
- * Misc
- * Utilities
+ * - Base
+ * - Paragraphs
+ * - Headings
+ * - Lists
+ * - Definition lists
+ * - Blockquotes
+ * - Misc
+ * - Utilities
  *
  * Body font size, leadings etc have been set in _variables.scss
  * Resources:
@@ -38,7 +37,6 @@ body {
 
 	// Two ways to smoothen type, they are disabled by default
 	// Enable only one of them if you need them
-	// =========================================
 	// 1.
 	// -webkit-font-smoothing: antialiased;
 	//    -moz-font-smoothing: antialiased;
@@ -58,7 +56,6 @@ p {
 	margin-bottom: $baseline;
 
 	// Measure - ideally about 65 chars per line
-	// =========================================
 	// max-width: $type-base * 30 + px;
 
 	// & small {
@@ -108,7 +105,6 @@ h6, .h6, .zeta {
 	margin-bottom: 0;
 }
 
-
 // h5, .h5, .epsilon {
 // }
 
diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss
index 2d9db565..dc0dae11 100644
--- a/assets/src/scss/_variables.scss
+++ b/assets/src/scss/_variables.scss
@@ -1,19 +1,20 @@
-// ==========================================================================
-// Variables
-// ==========================================================================
-// * Typography
-// * Breakpoints
-// * Paths
-// * Layout & Grid
-// * App-specific
-
-
-// Typography
-// ==========================================================================
-// Base sizes:
-// Set this in pixels (but do not add px),
-// the font-size mixin will convert to REMS
-
+/**
+ * Variables
+ * - Typography
+ * - Breakpoints
+ * - Paths
+ * - Layout & Grid
+ * - App-specific
+ */
+
+
+/**
+ * Typography
+ *
+ * Base sizes:
+ * Set this in pixels (but do not add px),
+ * the font-size mixin will convert to REMS
+ */
 $font-size-base                : 20;
 $font-size-base-px             : $font-size-base * 1px;
 $font-size-base-narrow         : $font-size-base - 2;
@@ -51,33 +52,32 @@ $font-weight-headings         : bold;    // instead of browser default, bold
 $line-height-headings         : 1.1;
 
 
-
-//  Breakpoints
-// ==========================================================================
-// There are no common breakpoints so these are just a suggestions
-// You'll need to define your own breakpoints to suit your design
-
-$bp-narrow            : 400;  // Set in px
-$bp-mid               : 768;  // Set in px
-$bp-wide              : 992;  // Set in px
-$bp-huge              : 1600; // Set in px
+/**
+ * Breakpoints
+ * There are no common breakpoints so these are just a suggestions
+ * You'll need to define your own breakpoints to suit your design
+ */
+$bp-narrow                    : 400;  // Set in px
+$bp-mid                       : 750;  // Set in px
+$bp-wide                      : 1000;  // Set in px
+$bp-huge                      : 1250; // Set in px
 
 // Special breakpoints
-$bp-single-col        : $bp-mid; // Break to single column (used in the grid)
-$bp-block-grid-narrow : $bp-narrow; // Breakpoint for narrow block grids
-$bp-rwd-text          : $bp-mid; // Reduce text size below this width
-
+$bp-single-col                : $bp-mid; // Break to single column (used in the grid)
+$bp-block-grid-narrow         : $bp-narrow; // Breakpoint for narrow block grids TODO: is this needed if the new block grids cover it?
+$bp-rwd-text                  : $bp-mid; // Reduce text size below this width
 
 
-// Path vars
-// ==========================================================================
+/**
+ * Path vars
+ */
 $img-path                     : "/assets/dist/img"; // Usage: background: url('#{$img-path}/img.jpg') 0 0 no-repeat;
 
 
-
-// Layout setup
-// Settings here override & affect the output in scss/partials/components/grid.scss
-// ==========================================================================
+/**
+ * Layout setup
+ * Settings here override & affect the output in scss/partials/components/grid.scss
+ */
 
 // Setup grid defaults
 $layout-margin                : 0     !default; // [in pixels] Space outside the grid
@@ -92,15 +92,14 @@ $grid-column-padding          : 0     !default; // [in pixels]
 $grid-column-padding-unit     : 'px'  !default; // [in pixels or percent] Specify your unit of measurement for column padding
 $nested-column-padding        : false !default; // Remove padding on nested columns so they are aligned correctly. Set this to [false] to enable it.
 
-// Choose your grid options
+// Choose your grid options, see http://trykickoff.github.io/learn/grid.html for more info
 $using-push-pull-columns      : false !default; // Allow columns to be pushed & pulled
 $using-offsetcolumns          : false !default; // Allow columns to be offset
 $using-splits-and-shunts      : false !default; // Use Splits & Shunts for responsive web design
 
 
-
-// App-specific variables
-// ==========================================================================
-// Add common vars below here
-
+/**
+ * App-specific variables
+ */
 $default-transition: all 100ms ease-in-out;
+// Add your own :)
diff --git a/assets/src/scss/components/_embedded-content.scss b/assets/src/scss/components/_embedded-content.scss
index 7a6e386a..a9247929 100644
--- a/assets/src/scss/components/_embedded-content.scss
+++ b/assets/src/scss/components/_embedded-content.scss
@@ -1,6 +1,7 @@
-/*
-	Embedded content
-	========================================================================== */
+/**
+ * Embedded content
+ */
+
 img {
 	font-style: italic;
 	color: #c00;
diff --git a/assets/src/scss/components/_fluid-video.scss b/assets/src/scss/components/_fluid-video.scss
index fbf0aef4..83baf961 100644
--- a/assets/src/scss/components/_fluid-video.scss
+++ b/assets/src/scss/components/_fluid-video.scss
@@ -1,9 +1,9 @@
-/*
-   Fluid width video
-   * 16:9 aspect ratio by default
-   * Usage:
-   * <div class="fluidVideo"><iframe src="..."/></div>
-   ========================================================================== */
+/**
+ * Fluid width video
+ * - 16:9 aspect ratio by default
+ * Usage:
+ * <div class="fluidVideo"><iframe src="..."/></div>
+ */
 .fluidVideo {
 	position: relative;
 	padding-bottom: 56.25%; /* 16:9 */
diff --git a/assets/src/scss/components/_icons.scss b/assets/src/scss/components/_icons.scss
index 8cb48399..627c0cc6 100644
--- a/assets/src/scss/components/_icons.scss
+++ b/assets/src/scss/components/_icons.scss
@@ -1,6 +1,7 @@
-/*
-   Icons
-   ========================================================================== */
+/**
+ * Icons
+ */
+
 [class^="icon-"], [class*=" icon-"] {
 	speak: none;
 	background-size: contain;
diff --git a/assets/src/scss/components/_links.scss b/assets/src/scss/components/_links.scss
index f476ab0a..d6400e60 100644
--- a/assets/src/scss/components/_links.scss
+++ b/assets/src/scss/components/_links.scss
@@ -1,6 +1,7 @@
 /**
  * Links
  */
+
 a {
 	transition: $default-transition;
 
diff --git a/assets/src/scss/components/_lists.scss b/assets/src/scss/components/_lists.scss
index be52b841..ffec52a5 100644
--- a/assets/src/scss/components/_lists.scss
+++ b/assets/src/scss/components/_lists.scss
@@ -1,10 +1,18 @@
-/*
-	Centred lists
+/**
+ * Lists
+ * - Centred lists
+ * - Floated lists
+ */
 
+/**
+ * Centred lists
+ *
+ * Usage:
 	<ul class="l-list--centred">
 		<li></li>
 	</ul>
-	========================================================================== */
+ */
+
 .l-list--centred, .l-list--centered {
 	text-align: center;
 
@@ -14,13 +22,14 @@
 }
 
 
-/*
-	Floated lists
-
+/**
+ * Floated lists
+ * Usage:
 	<ul class="l-list--floated">
 		<li></li>
 	</ul>
-	========================================================================== */
+ */
+
 .l-list--floated {
 	@include clearfix;
 
diff --git a/assets/src/scss/components/_media-object.scss b/assets/src/scss/components/_media-object.scss
index 2362e277..11f1d865 100644
--- a/assets/src/scss/components/_media-object.scss
+++ b/assets/src/scss/components/_media-object.scss
@@ -1,16 +1,16 @@
-/*
-	Media Object
-
-	* Place any image- and text-like content side-by-side, as per:
-	* http://csswizardry.com/2013/05/the-flag-object/
-	*
-	* +---------+
-  * |         | ~~~~ ~~~~~~~~~~~
-  * |         | ~~~~~~~ ~~~~~ ~~
-  * |         | ~~~~~~~~~~~~
-  * +---------+
-	*
-	* Markup:
+/**
+ * Media Object
+ *
+ * Place any image- and text-like content side-by-side, as per:
+ * http://csswizardry.com/2013/05/the-flag-object/
+ *
+ * +---------+
+ * |         | ~~~~ ~~~~~~~~~~~
+ * |         | ~~~~~~~ ~~~~~ ~~
+ * |         | ~~~~~~~~~~~~
+ * +---------+
+ *
+ * Markup:
 	<div class="media">
 		<div class="media-img">
 			<img src="http://placekitten.com/100/100">
@@ -19,7 +19,7 @@
 			<p>Lorem ipsum dolor sit amet.</p>
 		</div>
 	</div>
-	========================================================================== */
+ */
 
 .media {
 	display: table;
diff --git a/assets/src/scss/components/_skip-navigation.scss b/assets/src/scss/components/_skip-navigation.scss
index 4ed90390..9fc4dc36 100644
--- a/assets/src/scss/components/_skip-navigation.scss
+++ b/assets/src/scss/components/_skip-navigation.scss
@@ -2,6 +2,7 @@
  * Skip to main content link
  * <div class="skipToContent"><a href="#mainContent" class="btn btn--primary">Skip to main content</a></div>
  */
+
 .skipToContent {
 	position: relative;
 	text-align: center;
diff --git a/assets/src/scss/kickoff-old-ie.scss b/assets/src/scss/kickoff-old-ie.scss
index 4bb3292a..19e170c2 100644
--- a/assets/src/scss/kickoff-old-ie.scss
+++ b/assets/src/scss/kickoff-old-ie.scss
@@ -4,8 +4,7 @@
 //  ## ##    ##   ##  ## ## ##  ##  ## ##     ##
 //  ##  ## ######  ####  ##  ##  ####  ##     ##
 
-// By Zander Martineau & Ashley Nolan for TMW - http://tmw.co.uk
-
+// By Zander Martineau & Ashley Nolan – http://trykickoff.github.io/
 
 //Use old IE styles set for mixins
 //fix your fake width
diff --git a/assets/src/scss/mixins/_grid-helpers.scss b/assets/src/scss/mixins/_grid-helpers.scss
index 8c9f12e2..7f687333 100644
--- a/assets/src/scss/mixins/_grid-helpers.scss
+++ b/assets/src/scss/mixins/_grid-helpers.scss
@@ -1,10 +1,10 @@
-// ==========================================================================
-// Kickoff Grid helpers
-// ==========================================================================
+/**
+ * Kickoff grid helpers
+ */
 
-
-//   Grid columns width calcs
-// ==========================================================================
+/**
+ * Grid columns width calcs
+ */
 @function gridColumnWidthCalc($column-span: 1, $show-unit: true) {
 	$number-of-blocks-in-container : $grid-column-count / $column-span;
 	$total-width-of-all-gutters    : gutterCalc(false) * ($number-of-blocks-in-container - 1);
@@ -18,21 +18,22 @@
 	}
 }
 
-// ==========================================================================
-// Column width mixin
-// Usage:
-// @include column(2);
-// ==========================================================================
+
+/**
+ * Column width mixin
+ * Usage:
+ * @include column(2);
+ */
 @mixin column($column-span: 1) {
 	width: gridColumnWidthCalc($column-span, true);
 }
 
 
-// ==========================================================================
-// Gutter calcs
-// Default: percent
-// Usage: gutterCalc() or gutterCalc(false)
-// ==========================================================================
+/**
+ * Gutter calcs
+ * Default: percent
+ * Usage: gutterCalc() or gutterCalc(false)
+ */
 @function gutterCalc($show-unit: true) {
 	@if $show-unit == true {
 		@return percentage($grid-gutter-width / ($layout-max-width - ($layout-margin * 2)));
@@ -42,11 +43,11 @@
 }
 
 
-// ==========================================================================
-// Column padding (gutter)
-// Default: percent (can be pixels though)
-// Usage: paddingCalc() or paddingCalc(px)
-// ==========================================================================
+/**
+ * Column padding (gutter)
+ * Default: percent (can be pixels though)
+ * Usage: paddingCalc() or paddingCalc(px)
+ */
 @function paddingCalc() {
 	@if $grid-column-padding-unit == '%' {
 		@return percentage($grid-column-padding / $layout-max-width);
@@ -56,10 +57,9 @@
 }
 
 
-
-// ==========================================================================
-// Shunts, offset columns, column source order calculations
-// ==========================================================================
+/**
+ * Shunts, offset columns, column source order calculations
+ */
 @mixin shunt($shuntSpan: 1) {
 	margin-right: (gridColumnWidthCalc($shuntSpan, false) * $shuntSpan) + ($gridGutterWidth * ($shuntSpan - 1));
 }
diff --git a/assets/src/scss/mixins/_hidpi.scss b/assets/src/scss/mixins/_hidpi.scss
index 81e2f42b..debc31d5 100644
--- a/assets/src/scss/mixins/_hidpi.scss
+++ b/assets/src/scss/mixins/_hidpi.scss
@@ -1,8 +1,8 @@
-// ==========================================================================
-//  HiDPI mixin.
-//  @include hidpi-min() { ... };
-//  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
-// ==========================================================================
+/**
+ *  HiDPI mixin.
+ *  @include hidpi-min() { ... };
+ *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+ */
 @mixin hidpi($ratio: 1.5) {
 	@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
 	only screen and (min--moz-device-pixel-ratio: $ratio),
@@ -13,10 +13,10 @@
 	}
 }
 
-// ==========================================================================
-// Hidpi with a minimum width media query
-// @include hidpi-min($bp-mid, 1.5) { ... };
-// ==========================================================================
+/**
+ * Hidpi with a minimum width media query
+ * @include hidpi-min($bp-mid, 1.5) { ... };
+ */
 @mixin hidpi-min($width, $ratio: 1.5) {
 	$width-em: em($width);
 	@media only screen and (min-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
@@ -29,10 +29,10 @@
 }
 
 
-// ==========================================================================
-// Hidpi with a max width media query
-// @include hidpi-max($bp-mid, 1.3) { ... };
-// ==========================================================================
+/**
+ * Hidpi with a max width media query
+ * @include hidpi-max($bp-mid, 1.3) { ... };
+ */
 @mixin hidpi-max($width, $ratio: 1.3) {
 	$width-em: em($width);
 	@media only screen and (max-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
diff --git a/assets/src/scss/mixins/_linear-gradient.scss b/assets/src/scss/mixins/_linear-gradient.scss
index 49fff0af..7b9950b8 100644
--- a/assets/src/scss/mixins/_linear-gradient.scss
+++ b/assets/src/scss/mixins/_linear-gradient.scss
@@ -1,7 +1,7 @@
-// ==========================================================================
-// Linear Gradient
-// Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
-// ==========================================================================
+/**
+ * Linear Gradient
+ * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
+ */
 @mixin linear-gradient($fromColor, $toColor, $direction: vertical, $ie: false) {
 	@warn "DEPRECATION: If you are using autoprefixer there is no need for this mixin, this will be removed in the next version of Kickoff.";
 	// Set default vars for vertical gradient
diff --git a/assets/src/scss/mixins/_mixins.scss b/assets/src/scss/mixins/_mixins.scss
index 5ae44d93..c9fc5595 100644
--- a/assets/src/scss/mixins/_mixins.scss
+++ b/assets/src/scss/mixins/_mixins.scss
@@ -1,12 +1,11 @@
-// ==========================================================================
-// Sass Mixins
-// * Vendor Prefixer
-// * Responsive
-// * CSS3
-// * Utility Mixins
-// * hiDpi
-// * Forms
-// ==========================================================================
+/**
+ * Sass Mixins
+ * - Vendor prefixer
+ * - Responsive
+ * - CSS3
+ * - Utility Mixins
+ * - hiDpi
+ * - Forms */
 
 // Vendor prefixer
 @import "prefixer";
@@ -20,16 +19,16 @@
 @import "radial-gradient";
 @import "vertical-center";
 
-
-// Utility mixins
-// Clearfix, REM + fallbacks,
-// @font-face, sizing shortcuts,
-// and other helpers
-// =================================
+/**
+ * Utility mixins
+ * Clearfix, REM + fallbacks,
+ * @font-face, sizing shortcuts,
+ * and other helpers
+ */
 @import "utility";
 
 // HiDPI
 @import "hidpi";
 
-// FORMS
+// Forms
 @import "form-helpers";
diff --git a/assets/src/scss/mixins/_position.scss b/assets/src/scss/mixins/_position.scss
index 51258387..c1a763a6 100644
--- a/assets/src/scss/mixins/_position.scss
+++ b/assets/src/scss/mixins/_position.scss
@@ -1,8 +1,8 @@
-// ==========================================================================
-// position
-// Usage:
-// @include position(absolute, 10px 20px 30px 10px);
-// ==========================================================================
+/**
+ * position
+ * Usage:
+ * @include position(absolute, 10px 20px 30px 10px);
+ */
 @mixin position ($position: relative, $coordinates: 0 0 0 0) {
 
 	@if type-of($position) == list {
diff --git a/assets/src/scss/mixins/_prefixer.scss b/assets/src/scss/mixins/_prefixer.scss
index bdd3d762..eb013a86 100644
--- a/assets/src/scss/mixins/_prefixer.scss
+++ b/assets/src/scss/mixins/_prefixer.scss
@@ -1,4 +1,8 @@
-// @include prefixer(border-radius, $radii, webkit ms spec);
+/**
+ * Vendor prefixer
+ * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
+ */
+
 $prefix-for-webkit:    true !default;
 $prefix-for-mozilla:   true !default;
 $prefix-for-microsoft: true !default;
diff --git a/assets/src/scss/mixins/_radial-gradient.scss b/assets/src/scss/mixins/_radial-gradient.scss
index 93b5c3e6..a704561b 100644
--- a/assets/src/scss/mixins/_radial-gradient.scss
+++ b/assets/src/scss/mixins/_radial-gradient.scss
@@ -1,7 +1,7 @@
-// ==========================================================================
-// Radial Gradient
-// Usage: @include radial-gradient(#000, #BADA55, true);
-// ==========================================================================
+/**
+ * Radial Gradient
+ * Usage: @include radial-gradient(#000, #BADA55, true);
+ */
 @mixin radial-gradient($fromColor, $toColor, $ie: false) {
 	@warn "DEPRECATION: If you are using autoprefixer there is no need for this mixin, this will be removed in the next version of Kickoff.";
 
diff --git a/assets/src/scss/mixins/_responsive.scss b/assets/src/scss/mixins/_responsive.scss
index 2c015b41..a5eb9de4 100644
--- a/assets/src/scss/mixins/_responsive.scss
+++ b/assets/src/scss/mixins/_responsive.scss
@@ -1,15 +1,15 @@
-// ==========================================================================
-//  Responsive media query mixins
-//  * These are used so that we can define separate media-query content
-//    for <IE9 and browsers with support for media queries
-//  * These are directly related to the global $fix-mqs var defined in
-//    kickoff-old-ie.scss
-//  * kickoff-old-ie.scss ignores any content in media-queries with values less
-//    than the $fix-mqs var value
-// ==========================================================================
+/**
+ * Responsive media query mixins
+ * - These are used so that we can define separate media-query content
+ *   for <IE9 and browsers with support for media queries
+ * - These are directly related to the global $fix-mqs var defined in
+ *   kickoff-old-ie.scss
+ * - kickoff-old-ie.scss ignores any content in media-queries with values less
+ *   than the $fix-mqs var value
+ */
 $fix-mqs: false !default; //assign false if no value set already
 
-// $mq-base var:
+// $mq-base variable:
 //
 // This is needed because browsers do not calculate em-based
 // media queries correctly. It is set to 16 because we think
@@ -22,13 +22,12 @@ $fix-mqs: false !default; //assign false if no value set already
 $mq-base: 16;
 
 
-// ==========================================================================
-//  Min-width media query:
-//
-//  * Equivalent to: @media screen and (min-width: 20em) { ... }
-//  * Usage: @include respond-min(500) { ... };
-//  * Argument is a pixel value WITHOUT a unit of measurement
-//  ==========================================================================
+/**
+ * Min-width media query:
+ * - Equivalent to: @media screen and (min-width: 20em) { ... }
+ * - Usage: @include respond-min(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
 @mixin respond-min($width) {
 	$width-em: em(strip-units($width), $mq-base);
 
@@ -48,12 +47,12 @@ $mq-base: 16;
 }
 
 
-// ==========================================================================
-//  Max-width media query:
-//  * Equivalent to: @media screen and (max-width: 20em) { ... }
-//  * Usage: @include respond-max(500) { ... };
-//  * Argument is a pixel value WITHOUT a unit of measurement
-// ==========================================================================
+/**
+ * Max-width media query:
+ * - Equivalent to: @media screen and (max-width: 20em) { ... }
+ * - Usage: @include respond-max(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
 @mixin respond-max($width) {
 	$width-em: em(strip-units($width), $mq-base);
 
@@ -73,12 +72,12 @@ $mq-base: 16;
 }
 
 
-// ==========================================================================
-//  Min-max-width media query:
-//  * Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
-//  * Usage: @include respond-min-max(500, 600) { ... };
-//  * Arguments are pixel values WITHOUT a unit of measurement
-// ==========================================================================
+/**
+ * Min-max-width media query:
+ * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
+ * - Usage: @include respond-min-max(500, 600) { ... };
+ * - Arguments are pixel values WITHOUT a unit of measurement
+ */
 @mixin respond-min-max($min-width, $max-width) {
 	$min-width-em: em(strip-units($min-width), $mq-base);
 	$max-width-em: em(strip-units($max-width), $mq-base);
@@ -99,11 +98,11 @@ $mq-base: 16;
 }
 
 
-// ==========================================================================
-// Old IE specific mixin
-// * Only use this content if we're dealing with old IE
-// * Usage: @include oldie() { ... }
-// ==========================================================================
+/**
+ * Old IE specific mixin
+ * - Only use this content if we're dealing with old IE
+ * - Usage: @include oldie() { ... }
+ */
 $old-ie: false !default;
 
 @mixin old-ie {
diff --git a/assets/src/scss/mixins/_utility.scss b/assets/src/scss/mixins/_utility.scss
index 9a49049e..8ae40fa6 100644
--- a/assets/src/scss/mixins/_utility.scss
+++ b/assets/src/scss/mixins/_utility.scss
@@ -1,6 +1,7 @@
-// ==========================================================================
-// Utility Mixins
-// ==========================================================================
+/**
+ * Utility Mixins
+ */
+
 // Clearfix
 // http://www.cssmojo.com/latest_new_clearfix_so_far/
 // Other clearfix options: https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_clearfix-me.scss
@@ -21,9 +22,10 @@
 }
 
 
-// ==========================================================================
-// Typography mixins
-// ==========================================================================
+/**
+ * Typography mixins
+ */
+
 // REM font size
 // @include font-size(16);
 @mixin font-size($sizeValue: $font-size-base) {
@@ -78,7 +80,7 @@
 	@include size($size, $size);
 }
 
-// INPUT PLACEHOLDER TEXT
+// Input placeholder text
 @mixin placeholder($color: lighten(#000, 70%)) {
 	:-ms-input-placeholder {
 		color: $color;
diff --git a/assets/src/scss/mixins/_vertical-center.scss b/assets/src/scss/mixins/_vertical-center.scss
index da3b6371..450449a2 100644
--- a/assets/src/scss/mixins/_vertical-center.scss
+++ b/assets/src/scss/mixins/_vertical-center.scss
@@ -1,9 +1,9 @@
-// ==========================================================================
-// vertical-center
-// Vertically center any element. Needs support for CSS tranforms.
-// Usage:
-// @include vertical-center;
-// ==========================================================================
+/**
+ * vertical-center
+ * Vertically center any element. Needs support for CSS tranforms.
+ * Usage:
+ * @include vertical-center;
+ */
 @mixin vertical-center {
 	position: relative;
 	top: 50%;

From d7030f5adb27151c1eb114836085290227a2d60d Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:07:42 +0100
Subject: [PATCH 031/136] reorder npm scripts

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 951f6cfd..5902f975 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,8 @@
   "keywords": [],
   "scripts": {
     "test": "grunt travis --verbose",
-    "kickoff": "grunt start",
-    "prekickoff": "npm install -g grunt-cli && npm install"
+
+    "prekickoff": "npm install -g grunt-cli && npm install",
+    "kickoff": "grunt start"
   }
 }

From 88e1fbfa37f32f739e6f2f3d7a378183affab91a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:08:38 +0100
Subject: [PATCH 032/136] new shims build based on new criteria

---
 assets/src/js/helpers/shims.js | 210 ++++++++++++---------------------
 1 file changed, 74 insertions(+), 136 deletions(-)

diff --git a/assets/src/js/helpers/shims.js b/assets/src/js/helpers/shims.js
index 590645e5..994f4762 100644
--- a/assets/src/js/helpers/shims.js
+++ b/assets/src/js/helpers/shims.js
@@ -1,46 +1,45 @@
 /*! 
-Included shims: Array.forEach,Array.filter,Array.map,Function.bind,EventListener
+Included shims: Array.forEach,EventListener
 */
 
-/*
-    Array.prototype.forEach()
-*/
+// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.io/#x15.4.4.18
 if (!Array.prototype.forEach) {
-    Array.prototype.forEach = function(t, e) {
+    Array.prototype.forEach = function(e, t) {
         var n, r;
         if (this == null) {
             throw new TypeError(" this is null or not defined");
         }
         // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
-        var i = Object(this);
+        var a = Object(this);
         // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
         // 3. Let len be ToUint32(lenValue).
-        var o = i.length >>> 0;
+        var i = a.length >>> 0;
         // 4. If IsCallable(callback) is false, throw a TypeError exception.
         // See: http://es5.github.com/#x9.11
-        if (typeof t !== "function") {
-            throw new TypeError(t + " is not a function");
+        if (typeof e !== "function") {
+            throw new TypeError(e + " is not a function");
         }
         // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
-        if (e) {
-            n = e;
+        if (arguments.length > 1) {
+            n = t;
         }
         // 6. Let k be 0
         r = 0;
         // 7. Repeat, while k < len
-        while (r < o) {
-            var a;
+        while (r < i) {
+            var o;
             // a. Let Pk be ToString(k).
             //   This is implicit for LHS operands of the in operator
             // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
             //   This step can be combined with c
             // c. If kPresent is true, then
-            if (r in i) {
+            if (r in a) {
                 // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
-                a = i[r];
+                o = a[r];
                 // ii. Call the Call internal method of callback with T as the this value and
                 // argument list containing kValue, k, and O.
-                t.call(n, a, r, i);
+                e.call(n, o, r, a);
             }
             // d. Increase k by 1.
             r++;
@@ -48,105 +47,44 @@ if (!Array.prototype.forEach) {
     };
 }
 
-/*
-    Array.prototype.filter()
-*/
-if (!Array.prototype.filter) {
-    Array.prototype.filter = function(t) {
-        "use strict";
-        if (this === void 0 || this === null) throw new TypeError();
-        var e = Object(this);
-        var n = e.length >>> 0;
-        if (typeof t !== "function") throw new TypeError();
-        var r = [];
-        var i = arguments.length >= 2 ? arguments[1] : void 0;
-        for (var o = 0; o < n; o++) {
-            if (o in e) {
-                var a = e[o];
-                // NOTE: Technically this should Object.defineProperty at
-                //       the next index, as push can be affected by
-                //       properties on Object.prototype and Array.prototype.
-                //       But that method's new, and collisions should be
-                //       rare, so use the more-compatible alternative.
-                if (t.call(i, a, o, e)) r.push(a);
-            }
-        }
-        return r;
-    };
-}
-
-/*
-   Array map patch
-   ========================================================================== */
-if (!("map" in Array.prototype)) {
-    Array.prototype.map = function(t, e) {
-        var n = this.length >>> 0, r = Array(n);
-        for (var i = 0; i < n; i++) {
-            if (i in this) {
-                r[i] = t.call(e, this[i], i, this);
-            }
-        }
-        return r;
-    };
-}
-
-/*
-    Function.prototype.bind()
-*/
-if (!Function.prototype.bind) {
-    Function.prototype.bind = function(t) {
-        if (typeof this !== "function") {
-            // closest thing possible to the ECMAScript 5
-            // internal IsCallable function
-            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
-        }
-        var e = Array.prototype.slice.call(arguments, 1), n = this, r = function() {}, i = function() {
-            return n.apply(this instanceof r && t ? this : t, e.concat(Array.prototype.slice.call(arguments)));
-        };
-        r.prototype = this.prototype;
-        i.prototype = new r();
-        return i;
-    };
-}
-
-// EventListener | MIT/GPL2 | https://github.com/jonathantneal/EventListener
+// EventListener | CC0 | github.com/jonathantneal/EventListener
 this.Element && Element.prototype.attachEvent && !Element.prototype.addEventListener && function() {
-    function t(t, e) {
-        Window.prototype[t] = HTMLDocument.prototype[t] = Element.prototype[t] = e;
+    function e(e, t) {
+        Window.prototype[e] = HTMLDocument.prototype[e] = Element.prototype[e] = t;
     }
     // add
-    t("addEventListener", function(t, e) {
-        var n = this, r = n.addEventListener.listeners = n.addEventListener.listeners || {}, i = r[t] = r[t] || [];
+    e("addEventListener", function(e, t) {
+        var n = this, r = n.addEventListener.listeners = n.addEventListener.listeners || {}, a = r[e] = r[e] || [];
         // if no events exist, attach the listener
-        if (!i.length) {
-            n.attachEvent("on" + t, i.event = function(t) {
-                var e = n.document && n.document.documentElement || n.documentElement || {
+        if (!a.length) {
+            n.attachEvent("on" + e, a.event = function(e) {
+                var t = n.document && n.document.documentElement || n.documentElement || {
                     scrollLeft: 0,
                     scrollTop: 0
                 };
                 // polyfill w3c properties and methods
-                t.currentTarget = n;
-                t.pageX = t.clientX + e.scrollLeft;
-                t.pageY = t.clientY + e.scrollTop;
-                t.preventDefault = function() {
-                    t.returnValue = false;
+                e.currentTarget = n;
+                e.pageX = e.clientX + t.scrollLeft;
+                e.pageY = e.clientY + t.scrollTop;
+                e.preventDefault = function() {
+                    e.returnValue = false;
                 };
-                t.relatedTarget = t.fromElement || null;
-                t.stopImmediatePropagation = function() {
+                e.relatedTarget = e.fromElement || null;
+                e.stopImmediatePropagation = function() {
                     l = false;
-                    t.cancelBubble = true;
+                    e.cancelBubble = true;
                 };
-                t.stopPropagation = function() {
-                    t.cancelBubble = true;
+                e.stopPropagation = function() {
+                    e.cancelBubble = true;
                 };
-                t.target = t.srcElement || n;
-                t.timeStamp = +new Date();
+                e.target = e.srcElement || n;
+                e.timeStamp = +new Date();
                 // create an cached list of the master events list (to protect this loop from breaking when an event is removed)
-                for (var r = 0, o = [].concat(i), a, l = true; l && (a = o[r]); ++r) {
+                for (var r = 0, i = [].concat(a), o, l = true; l && (o = i[r]); ++r) {
                     // check to see if the cached event still exists in the master events list
-                    for (var c = 0, s; s = i[c]; ++c) {
-                        if (s == a) {
-                            s.call(n, t);
+                    for (var c = 0, s; s = a[c]; ++c) {
+                        if (s == o) {
+                            s.call(n, e);
                             break;
                         }
                     }
@@ -154,31 +92,31 @@ this.Element && Element.prototype.attachEvent && !Element.prototype.addEventList
             });
         }
         // add the event to the master event list
-        i.push(e);
+        a.push(t);
     });
     // remove
-    t("removeEventListener", function(t, e) {
-        var n = this, r = n.addEventListener.listeners = n.addEventListener.listeners || {}, i = r[t] = r[t] || [];
+    e("removeEventListener", function(e, t) {
+        var n = this, r = n.addEventListener.listeners = n.addEventListener.listeners || {}, a = r[e] = r[e] || [];
         // remove the newest matching event from the master event list
-        for (var o = i.length - 1, a; a = i[o]; --o) {
-            if (a == e) {
-                i.splice(o, 1);
+        for (var i = a.length - 1, o; o = a[i]; --i) {
+            if (o == t) {
+                a.splice(i, 1);
                 break;
             }
         }
         // if no events exist, detach the listener
-        if (!i.length && i.event) {
-            n.detachEvent("on" + t, i.event);
+        if (!a.length && a.event) {
+            n.detachEvent("on" + e, a.event);
         }
     });
     // dispatch
-    t("dispatchEvent", function(t) {
-        var e = this, n = t.type, r = e.addEventListener.listeners = e.addEventListener.listeners || {}, i = r[n] = r[n] || [];
+    e("dispatchEvent", function(e) {
+        var t = this, n = e.type, r = t.addEventListener.listeners = t.addEventListener.listeners || {}, a = r[n] = r[n] || [];
         try {
-            return e.fireEvent("on" + n, t);
-        } catch (o) {
-            if (i.event) {
-                i.event(t);
+            return t.fireEvent("on" + n, e);
+        } catch (i) {
+            if (a.event) {
+                a.event(e);
             }
             return;
         }
@@ -186,37 +124,37 @@ this.Element && Element.prototype.attachEvent && !Element.prototype.addEventList
     // CustomEvent
     Object.defineProperty(Window.prototype, "CustomEvent", {
         get: function() {
-            var t = this;
-            return function e(n, r) {
-                var i = t.document.createEventObject(), o;
-                i.type = n;
-                for (o in r) {
-                    if (o == "cancelable") {
-                        i.returnValue = !r.cancelable;
-                    } else if (o == "bubbles") {
-                        i.cancelBubble = !r.bubbles;
-                    } else if (o == "detail") {
-                        i.detail = r.detail;
+            var e = this;
+            return function t(n, r) {
+                var a = e.document.createEventObject(), i;
+                a.type = n;
+                for (i in r) {
+                    if (i == "cancelable") {
+                        a.returnValue = !r.cancelable;
+                    } else if (i == "bubbles") {
+                        a.cancelBubble = !r.bubbles;
+                    } else if (i == "detail") {
+                        a.detail = r.detail;
                     }
                 }
-                return i;
+                return a;
             };
         }
     });
     // ready
-    function e(t) {
-        if (e.interval && document.body) {
-            e.interval = clearInterval(e.interval);
+    function t(e) {
+        if (t.interval && document.body) {
+            t.interval = clearInterval(t.interval);
             document.dispatchEvent(new CustomEvent("DOMContentLoaded"));
         }
     }
-    e.interval = setInterval(e, 1);
-    window.addEventListener("load", e);
+    t.interval = setInterval(t, 1);
+    window.addEventListener("load", t);
 }();
 
 !this.CustomEvent && function() {
     // CustomEvent for browsers which don't natively support the Constructor method
-    window.CustomEvent = function t(e, n) {
+    window.CustomEvent = function e(t, n) {
         var r;
         n = n || {
             bubbles: false,
@@ -225,11 +163,11 @@ this.Element && Element.prototype.attachEvent && !Element.prototype.addEventList
         };
         try {
             r = document.createEvent("CustomEvent");
-            r.initCustomEvent(e, n.bubbles, n.cancelable, n.detail);
-        } catch (i) {
+            r.initCustomEvent(t, n.bubbles, n.cancelable, n.detail);
+        } catch (a) {
             // for browsers which don't support CustomEvent at all, we use a regular event instead
             r = document.createEvent("Event");
-            r.initEvent(e, n.bubbles, n.cancelable);
+            r.initEvent(t, n.bubbles, n.cancelable);
             r.detail = n.detail;
         }
         return r;

From 1960d10993acdbdf91a90d39ca28cbc65d1930f2 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:09:00 +0100
Subject: [PATCH 033/136] update changelog for v6.0.0 (WIP)

---
 changelog.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/changelog.md b/changelog.md
index ad2d73b1..c7e377b1 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,18 @@
 # Kickoff changelog
 All latest changes are documented on our site at http://trykickoff.github.io/
 
+## Version 6.0.0
+Date 23/09/2015
+
+* This release's major change is that we switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.github.io/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0)
+* Removed a few rarely-used grunt plugins
+  - Grunt Photobox
+  - grunt-contrib-scss-lint
+  - grunt-contrib-jshint
+* The [media object](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_media-object.scss) has been updated to ensure that it doesn't stack it's columns on skinny viewports by default but by the use of modifier classes. See the code [here](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_media-object.scss)
+* [Block grids](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_block.scss) have had many improvements thanks to @nicbell. There are now different modifier classes for each breakpoint which be adde
+
+
 ## Version 5.0.0
 Date 19/05/2015
 

From d56697aff9a0d48d40a31991d995f5805fe21d99 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:09:20 +0100
Subject: [PATCH 034/136] compile styles

---
 assets/dist/css/kickoff-old-ie.css | 390 +++++++++++++++----------
 assets/dist/css/kickoff.css        | 453 +++++++++++++++++------------
 assets/dist/css/styleguide.css     |   4 +-
 3 files changed, 503 insertions(+), 344 deletions(-)

diff --git a/assets/dist/css/kickoff-old-ie.css b/assets/dist/css/kickoff-old-ie.css
index b58534a7..bdff09e8 100644
--- a/assets/dist/css/kickoff-old-ie.css
+++ b/assets/dist/css/kickoff-old-ie.css
@@ -5,16 +5,137 @@
  */
 /*
  * Mixins, helpers and functions
- * =================================
  * Most CSS3 vendor prefixed items have a mixin,
  * but we should not need them if autoprefixer is being used
  * See mixins/css3.scss for the full list
  */
+/**
+ * Sass Mixins
+ * - Vendor prefixer
+ * - Responsive
+ * - CSS3
+ * - Utility Mixins
+ * - hiDpi
+ * - Forms */
+/**
+ * Vendor prefixer
+ * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
+ */
+/**
+ * Responsive media query mixins
+ * - These are used so that we can define separate media-query content
+ *   for <IE9 and browsers with support for media queries
+ * - These are directly related to the global $fix-mqs var defined in
+ *   kickoff-old-ie.scss
+ * - kickoff-old-ie.scss ignores any content in media-queries with values less
+ *   than the $fix-mqs var value
+ */
+/**
+ * Min-width media query:
+ * - Equivalent to: @media screen and (min-width: 20em) { ... }
+ * - Usage: @include respond-min(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
+/**
+ * Max-width media query:
+ * - Equivalent to: @media screen and (max-width: 20em) { ... }
+ * - Usage: @include respond-max(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
+/**
+ * Min-max-width media query:
+ * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
+ * - Usage: @include respond-min-max(500, 600) { ... };
+ * - Arguments are pixel values WITHOUT a unit of measurement
+ */
+/**
+ * Old IE specific mixin
+ * - Only use this content if we're dealing with old IE
+ * - Usage: @include oldie() { ... }
+ */
+/**
+ * Linear Gradient
+ * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
+ */
+/**
+ * Radial Gradient
+ * Usage: @include radial-gradient(#000, #BADA55, true);
+ */
+/**
+ * vertical-center
+ * Vertically center any element. Needs support for CSS tranforms.
+ * Usage:
+ * @include vertical-center;
+ */
+/**
+ * Utility mixins
+ * Clearfix, REM + fallbacks,
+ * @font-face, sizing shortcuts,
+ * and other helpers
+ */
+/**
+ * Utility Mixins
+ */
+/**
+ * Typography mixins
+ */
+/**
+ *  HiDPI mixin.
+ *  @include hidpi-min() { ... };
+ *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+ */
+/**
+ * Hidpi with a minimum width media query
+ * @include hidpi-min($bp-mid, 1.5) { ... };
+ */
+/**
+ * Hidpi with a max width media query
+ * @include hidpi-max($bp-mid, 1.3) { ... };
+ */
 /**
  * Core variables
- * =================================
  * Edit your color palette and app vars before your begin
  */
+/**
+ * Global Color palette
+ * - Generic colors
+ * - Color scheme
+ * - Common colors
+ * - Links
+ * - Text selection
+ * - <hr>
+ * - Any others..
+ */
+/**
+ * Variables
+ * - Typography
+ * - Breakpoints
+ * - Paths
+ * - Layout & Grid
+ * - App-specific
+ */
+/**
+ * Typography
+ *
+ * Base sizes:
+ * Set this in pixels (but do not add px),
+ * the font-size mixin will convert to REMS
+ */
+/**
+ * Breakpoints
+ * There are no common breakpoints so these are just a suggestions
+ * You'll need to define your own breakpoints to suit your design
+ */
+/**
+ * Path vars
+ */
+/**
+ * Layout setup
+ * Settings here override & affect the output in scss/partials/components/grid.scss
+ */
+/**
+ * App-specific variables
+ */
 /* CSS Reset - Normalize etc */
 /**
  * Kickoff reset
@@ -395,15 +516,14 @@ th {
  */
 /**
  * Typography
- * =================================
- * Base
- * Paragraphs
- * Headings
- * Lists
- * Definition lists
- * Blockquotes
- * Misc
- * Utilities
+ * - Base
+ * - Paragraphs
+ * - Headings
+ * - Lists
+ * - Definition lists
+ * - Blockquotes
+ * - Misc
+ * - Utilities
  *
  * Body font size, leadings etc have been set in _variables.scss
  * Resources:
@@ -513,7 +633,7 @@ ul, ol {
 /**
  * Unstyled lists
  */
-.unstyled, .tabs, .l-tabsContent {
+.unstyled {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -853,9 +973,9 @@ input[type="submit"] {
   margin-bottom: 28px;
   background-color: #f5f5f5;
   border-top: 1px solid #ddd; }
-  .form-actions .btn, .form-actions .tabs a, .tabs .form-actions a {
+  .form-actions .btn {
     margin-right: 10px; }
-    .form-actions .btn:last-child, .form-actions .tabs a:last-child, .tabs .form-actions a:last-child {
+    .form-actions .btn:last-child {
       margin-right: 0; }
 
 /**
@@ -1202,6 +1322,25 @@ x:default {
 option {
   font-weight: normal; }
 
+/**
+ * Icons
+ */
+[class^="icon-"], [class*=" icon-"] {
+  speak: none;
+  background-size: contain;
+  background-position: center center; }
+
+.icon-large {
+  display: block;
+  width: 120px;
+  height: 120px; }
+
+.icon-small {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  vertical-align: top; }
+
 /**
  * Links
  */
@@ -1249,7 +1388,7 @@ a {
  * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
  *10. Prevents from inheriting default anchor styles.
  */
-.btn, .tabs a {
+.btn {
   display: inline-block;
   /* [1] */
   vertical-align: middle;
@@ -1288,34 +1427,24 @@ a {
       -ms-user-select: none;
           user-select: none; }
   .btn,
-  .tabs a,
   .btn:link,
-  .tabs a:link,
-  .btn:visited, .tabs a:visited {
+  .btn:visited {
     color: #fff; }
   .btn:hover,
-  .tabs a:hover,
   .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
+  .btn:focus {
     background-color: #798d8f; }
   .btn,
-  .tabs a,
   .btn:hover,
-  .tabs a:hover,
   .btn:active,
-  .tabs a:active,
   .btn:focus,
-  .tabs a:focus,
-  .btn:visited, .tabs a:visited {
+  .btn:visited {
     text-decoration: none; }
   .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
+  .btn:focus {
     outline: none; }
   .btn.disabled,
-  .tabs a.disabled,
-  .btn[disabled], .tabs a[disabled] {
+  .btn[disabled] {
     cursor: default;
     background-image: none;
     opacity: .65; }
@@ -1352,6 +1481,30 @@ input[type="button"].btn--block {
  * Centred columns
  */
 /* Import Grid helpers and mixins */
+/**
+ * Kickoff grid helpers
+ */
+/**
+ * Grid columns width calcs
+ */
+/**
+ * Column width mixin
+ * Usage:
+ * @include column(2);
+ */
+/**
+ * Gutter calcs
+ * Default: percent
+ * Usage: gutterCalc() or gutterCalc(false)
+ */
+/**
+ * Column padding (gutter)
+ * Default: percent (can be pixels though)
+ * Usage: paddingCalc() or paddingCalc(px)
+ */
+/**
+ * Shunts, offset columns, column source order calculations
+ */
 /**
  * Basic Usage:
  * =================================
@@ -1493,25 +1646,40 @@ input[type="button"].btn--block {
   .l-blockGrid.l-blockGrid--12up > li {
     width: 8.3333333333%; }
 
-/*
-	Centred lists
+/**
+ * Guttered block grid
+ */
+.l-blockGrid--guttered {
+  margin-left: -20px; }
+  .l-blockGrid--guttered > li {
+    padding-left: 20px;
+    padding-bottom: 20px; }
 
+/**
+ * Lists
+ * - Centred lists
+ * - Floated lists
+ */
+/**
+ * Centred lists
+ *
+ * Usage:
 	<ul class="l-list--centred">
 		<li></li>
 	</ul>
-	========================================================================== */
+ */
 .l-list--centred, .l-list--centered {
   text-align: center; }
   .l-list--centred li, .l-list--centered li {
     display: inline; }
 
-/*
-	Floated lists
-
+/**
+ * Floated lists
+ * Usage:
 	<ul class="l-list--floated">
 		<li></li>
 	</ul>
-	========================================================================== */
+ */
 .l-list--floated:after {
   content: "";
   display: table;
@@ -1521,9 +1689,9 @@ input[type="button"].btn--block {
   float: left;
   display: inline-block; }
 
-/*
-	Embedded content
-	========================================================================== */
+/**
+ * Embedded content
+ */
 img {
   font-style: italic;
   color: #c00;
@@ -1540,19 +1708,19 @@ svg:not(:root) {
 img, object, embed, video {
   max-width: 100%; }
 
-/*
-	Media Object
-
-	* Place any image- and text-like content side-by-side, as per:
-	* http://csswizardry.com/2013/05/the-flag-object/
-	*
-	* +---------+
-  * |         | ~~~~ ~~~~~~~~~~~
-  * |         | ~~~~~~~ ~~~~~ ~~
-  * |         | ~~~~~~~~~~~~
-  * +---------+
-	*
-	* Markup:
+/**
+ * Media Object
+ *
+ * Place any image- and text-like content side-by-side, as per:
+ * http://csswizardry.com/2013/05/the-flag-object/
+ *
+ * +---------+
+ * |         | ~~~~ ~~~~~~~~~~~
+ * |         | ~~~~~~~ ~~~~~ ~~
+ * |         | ~~~~~~~~~~~~
+ * +---------+
+ *
+ * Markup:
 	<div class="media">
 		<div class="media-img">
 			<img src="http://placekitten.com/100/100">
@@ -1561,7 +1729,7 @@ img, object, embed, video {
 			<p>Lorem ipsum dolor sit amet.</p>
 		</div>
 	</div>
-	========================================================================== */
+ */
 .media {
   display: table;
   width: 100%; }
@@ -1576,9 +1744,6 @@ img, object, embed, video {
   .media--bottom .media-img,
   .media--bottom .media-body {
     vertical-align: bottom; }
-  .media-img :last-child,
-  .media-body :last-child {
-    margin-bottom: 0; }
 
 .media-body {
   width: 100%; }
@@ -1592,12 +1757,16 @@ img, object, embed, video {
     padding-right: 0;
     padding-left: 10px; }
 
-/*
-   Fluid width video
-   * 16:9 aspect ratio by default
-   * Usage:
-   * <div class="fluidVideo"><iframe src="..."/></div>
-   ========================================================================== */
+.media--stackOnWide .media-img,
+.media--stackOnWide .media-body {
+  display: block; }
+
+/**
+ * Fluid width video
+ * - 16:9 aspect ratio by default
+ * Usage:
+ * <div class="fluidVideo"><iframe src="..."/></div>
+ */
 .fluidVideo {
   position: relative;
   padding-bottom: 56.25%;
@@ -1610,64 +1779,6 @@ img, object, embed, video {
     width: 100%;
     height: 100%; }
 
-/**
- * Tabs
- * =================================
- */
-/**
- * Define associated tab variables
- */
-/**
- * Tabs base styling
- *
- * Usage:
-	<ul class="tabs">
-		<li><a href="#tabs-example-1" class="is-active">Tab 1</a></li>
-		<li><a href="#tabs-example-2">Tab 2</a></li>
-	</ul>
-
-	<!-- Tabs Content -->
-	<ul class="l-tabsContent">
-		<li id="tabs-example-1" class="is-active">
-			Tab 1 content
-		</li>
-
-		<li id="tabs-example-2">
-			Tab 2 content
-		</li>
-	</ul>
-	========================================================================== */
-.tabs {
-  margin-bottom: 28px;
-  border-bottom: 2px solid #16c98d; }
-  .tabs:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .tabs.tabs--alignRight li {
-    float: right; }
-  .tabs.tabs--alignCentre,
-  .tabs.tabs--alignCenter {
-    text-align: center; }
-    .tabs.tabs--alignCentre > li,
-    .tabs.tabs--alignCenter > li {
-      display: inline;
-      float: none; }
-  .tabs > li {
-    float: left;
-    margin: 0 5px; }
-  .tabs a {
-    background-color: #95a5a6;
-    border-radius: 4px 4px 0 0;
-    color: #fff; }
-    .tabs a.is-active {
-      background-color: #16c98d; }
-
-.l-tabsContent > li {
-  display: none; }
-  .l-tabsContent > li.is-active {
-    display: block; }
-
 /**
  * Tables
  * =================================
@@ -1820,6 +1931,7 @@ pre {
   color: #444;
   border-radius: 3px;
   -moz-tab-size: 3;
+    -o-tab-size: 3;
        tab-size: 3; }
 
 code {
@@ -1864,24 +1976,8 @@ pre {
     .skipToContent a:focus {
       top: 5px; }
 
-/**
- * Scrollbar styling (only in webkit)
- */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: #d7d7d7; }
-
-::-webkit-scrollbar-thumb {
-  background: #8b8b8b;
-  cursor: pointer; }
-
 /**
  * Your app styles
- * =================================
- * Global styles
- * Example partial for masthead & footer
- * Icons - used in conjunction with grunticon
  */
 /**
  * Global app/site styles
@@ -1901,28 +1997,8 @@ body {
   .lt-ie9 .l-container {
     min-width: 1000px; }
 
-/*
-   Icons
-   ========================================================================== */
-[class^="icon-"], [class*=" icon-"] {
-  speak: none;
-  background-size: contain;
-  background-position: center center; }
-
-.icon-large {
-  display: block;
-  width: 120px;
-  height: 120px; }
-
-.icon-small {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  vertical-align: top; }
-
 /**
  * Views
- * =================================
  */
 /* Helper/utility classes */
 /**
diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css
index fe538ef1..85888a03 100644
--- a/assets/dist/css/kickoff.css
+++ b/assets/dist/css/kickoff.css
@@ -5,16 +5,137 @@
  */
 /*
  * Mixins, helpers and functions
- * =================================
  * Most CSS3 vendor prefixed items have a mixin,
  * but we should not need them if autoprefixer is being used
  * See mixins/css3.scss for the full list
  */
+/**
+ * Sass Mixins
+ * - Vendor prefixer
+ * - Responsive
+ * - CSS3
+ * - Utility Mixins
+ * - hiDpi
+ * - Forms */
+/**
+ * Vendor prefixer
+ * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
+ */
+/**
+ * Responsive media query mixins
+ * - These are used so that we can define separate media-query content
+ *   for <IE9 and browsers with support for media queries
+ * - These are directly related to the global $fix-mqs var defined in
+ *   kickoff-old-ie.scss
+ * - kickoff-old-ie.scss ignores any content in media-queries with values less
+ *   than the $fix-mqs var value
+ */
+/**
+ * Min-width media query:
+ * - Equivalent to: @media screen and (min-width: 20em) { ... }
+ * - Usage: @include respond-min(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
+/**
+ * Max-width media query:
+ * - Equivalent to: @media screen and (max-width: 20em) { ... }
+ * - Usage: @include respond-max(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
+/**
+ * Min-max-width media query:
+ * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
+ * - Usage: @include respond-min-max(500, 600) { ... };
+ * - Arguments are pixel values WITHOUT a unit of measurement
+ */
+/**
+ * Old IE specific mixin
+ * - Only use this content if we're dealing with old IE
+ * - Usage: @include oldie() { ... }
+ */
+/**
+ * Linear Gradient
+ * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
+ */
+/**
+ * Radial Gradient
+ * Usage: @include radial-gradient(#000, #BADA55, true);
+ */
+/**
+ * vertical-center
+ * Vertically center any element. Needs support for CSS tranforms.
+ * Usage:
+ * @include vertical-center;
+ */
+/**
+ * Utility mixins
+ * Clearfix, REM + fallbacks,
+ * @font-face, sizing shortcuts,
+ * and other helpers
+ */
+/**
+ * Utility Mixins
+ */
+/**
+ * Typography mixins
+ */
+/**
+ *  HiDPI mixin.
+ *  @include hidpi-min() { ... };
+ *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+ */
+/**
+ * Hidpi with a minimum width media query
+ * @include hidpi-min($bp-mid, 1.5) { ... };
+ */
+/**
+ * Hidpi with a max width media query
+ * @include hidpi-max($bp-mid, 1.3) { ... };
+ */
 /**
  * Core variables
- * =================================
  * Edit your color palette and app vars before your begin
  */
+/**
+ * Global Color palette
+ * - Generic colors
+ * - Color scheme
+ * - Common colors
+ * - Links
+ * - Text selection
+ * - <hr>
+ * - Any others..
+ */
+/**
+ * Variables
+ * - Typography
+ * - Breakpoints
+ * - Paths
+ * - Layout & Grid
+ * - App-specific
+ */
+/**
+ * Typography
+ *
+ * Base sizes:
+ * Set this in pixels (but do not add px),
+ * the font-size mixin will convert to REMS
+ */
+/**
+ * Breakpoints
+ * There are no common breakpoints so these are just a suggestions
+ * You'll need to define your own breakpoints to suit your design
+ */
+/**
+ * Path vars
+ */
+/**
+ * Layout setup
+ * Settings here override & affect the output in scss/partials/components/grid.scss
+ */
+/**
+ * App-specific variables
+ */
 /* CSS Reset - Normalize etc */
 /**
  * Kickoff reset
@@ -395,15 +516,14 @@ th {
  */
 /**
  * Typography
- * =================================
- * Base
- * Paragraphs
- * Headings
- * Lists
- * Definition lists
- * Blockquotes
- * Misc
- * Utilities
+ * - Base
+ * - Paragraphs
+ * - Headings
+ * - Lists
+ * - Definition lists
+ * - Blockquotes
+ * - Misc
+ * - Utilities
  *
  * Body font size, leadings etc have been set in _variables.scss
  * Resources:
@@ -415,7 +535,7 @@ th {
 html {
   font-size: 18px;
   -webkit-text-size-adjust: 100%; }
-  @media screen and (min-width: 48em) {
+  @media screen and (min-width: 46.875em) {
     html {
       font-size: 20px; } }
 
@@ -515,7 +635,7 @@ ul, ol {
 /**
  * Unstyled lists
  */
-.unstyled, .tabs, .l-tabsContent {
+.unstyled {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -855,9 +975,9 @@ input[type="submit"] {
   margin-bottom: 28px;
   background-color: #f5f5f5;
   border-top: 1px solid #ddd; }
-  .form-actions .btn, .form-actions .tabs a, .tabs .form-actions a {
+  .form-actions .btn {
     margin-right: 10px; }
-    .form-actions .btn:last-child, .form-actions .tabs a:last-child, .tabs .form-actions a:last-child {
+    .form-actions .btn:last-child {
       margin-right: 0; }
 
 /**
@@ -951,7 +1071,7 @@ input[type="submit"] {
 ::-webkit-input-placeholder {
   color: #b3b3b3; }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 46.875em) {
   /**
 	 * Horizontal-specific styles
 	 * =================================
@@ -1201,6 +1321,25 @@ x:default {
 option {
   font-weight: normal; }
 
+/**
+ * Icons
+ */
+[class^="icon-"], [class*=" icon-"] {
+  speak: none;
+  background-size: contain;
+  background-position: center center; }
+
+.icon-large {
+  display: block;
+  width: 120px;
+  height: 120px; }
+
+.icon-small {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  vertical-align: top; }
+
 /**
  * Links
  */
@@ -1248,7 +1387,7 @@ a {
  * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
  *10. Prevents from inheriting default anchor styles.
  */
-.btn, .tabs a {
+.btn {
   display: inline-block;
   /* [1] */
   vertical-align: middle;
@@ -1287,34 +1426,24 @@ a {
       -ms-user-select: none;
           user-select: none; }
   .btn,
-  .tabs a,
   .btn:link,
-  .tabs a:link,
-  .btn:visited, .tabs a:visited {
+  .btn:visited {
     color: #fff; }
   .btn:hover,
-  .tabs a:hover,
   .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
+  .btn:focus {
     background-color: #798d8f; }
   .btn,
-  .tabs a,
   .btn:hover,
-  .tabs a:hover,
   .btn:active,
-  .tabs a:active,
   .btn:focus,
-  .tabs a:focus,
-  .btn:visited, .tabs a:visited {
+  .btn:visited {
     text-decoration: none; }
   .btn:active,
-  .tabs a:active,
-  .btn:focus, .tabs a:focus {
+  .btn:focus {
     outline: none; }
   .btn.disabled,
-  .tabs a.disabled,
-  .btn[disabled], .tabs a[disabled] {
+  .btn[disabled] {
     cursor: default;
     background-image: none;
     opacity: .65; }
@@ -1351,6 +1480,30 @@ input[type="button"].btn--block {
  * Centred columns
  */
 /* Import Grid helpers and mixins */
+/**
+ * Kickoff grid helpers
+ */
+/**
+ * Grid columns width calcs
+ */
+/**
+ * Column width mixin
+ * Usage:
+ * @include column(2);
+ */
+/**
+ * Gutter calcs
+ * Default: percent
+ * Usage: gutterCalc() or gutterCalc(false)
+ */
+/**
+ * Column padding (gutter)
+ * Default: percent (can be pixels though)
+ * Usage: paddingCalc() or paddingCalc(px)
+ */
+/**
+ * Shunts, offset columns, column source order calculations
+ */
 /**
  * Basic Usage:
  * =================================
@@ -1371,7 +1524,7 @@ input[type="button"].btn--block {
     .g-row .g-row .g-col {
       padding: 0; }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 46.875em) {
   .g-col {
     float: left;
     min-height: 1px;
@@ -1387,7 +1540,7 @@ input[type="button"].btn--block {
     .g-col + .g-col.end {
       float: left; } }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 46.875em) {
   .g-span1 {
     width: 6.5%; }
   .g-span2 {
@@ -1454,7 +1607,7 @@ input[type="button"].btn--block {
   .l-blockGrid > li {
     display: block;
     height: auto; }
-  @media screen and (min-width: 25em) and (max-width: 48em) {
+  @media screen and (min-width: 25em) and (max-width: 46.875em) {
     .l-blockGrid[class*="up--narrow"] > li {
       display: block;
       height: auto;
@@ -1519,7 +1672,7 @@ input[type="button"].btn--block {
       display: block;
       height: auto;
       float: left; } }
-  @media screen and (min-width: 48em) {
+  @media screen and (min-width: 46.875em) {
     .l-blockGrid > li {
       display: block;
       height: auto;
@@ -1549,25 +1702,40 @@ input[type="button"].btn--block {
     .l-blockGrid.l-blockGrid--12up > li {
       width: 8.3333333333%; } }
 
-/*
-	Centred lists
+/**
+ * Guttered block grid
+ */
+.l-blockGrid--guttered {
+  margin-left: -20px; }
+  .l-blockGrid--guttered > li {
+    padding-left: 20px;
+    padding-bottom: 20px; }
 
+/**
+ * Lists
+ * - Centred lists
+ * - Floated lists
+ */
+/**
+ * Centred lists
+ *
+ * Usage:
 	<ul class="l-list--centred">
 		<li></li>
 	</ul>
-	========================================================================== */
+ */
 .l-list--centred, .l-list--centered {
   text-align: center; }
   .l-list--centred li, .l-list--centered li {
     display: inline; }
 
-/*
-	Floated lists
-
+/**
+ * Floated lists
+ * Usage:
 	<ul class="l-list--floated">
 		<li></li>
 	</ul>
-	========================================================================== */
+ */
 .l-list--floated:after {
   content: "";
   display: table;
@@ -1577,9 +1745,9 @@ input[type="button"].btn--block {
   float: left;
   display: inline-block; }
 
-/*
-	Embedded content
-	========================================================================== */
+/**
+ * Embedded content
+ */
 img {
   font-style: italic;
   color: #c00;
@@ -1596,19 +1764,19 @@ svg:not(:root) {
 img, object, embed, video {
   max-width: 100%; }
 
-/*
-	Media Object
-
-	* Place any image- and text-like content side-by-side, as per:
-	* http://csswizardry.com/2013/05/the-flag-object/
-	*
-	* +---------+
-  * |         | ~~~~ ~~~~~~~~~~~
-  * |         | ~~~~~~~ ~~~~~ ~~
-  * |         | ~~~~~~~~~~~~
-  * +---------+
-	*
-	* Markup:
+/**
+ * Media Object
+ *
+ * Place any image- and text-like content side-by-side, as per:
+ * http://csswizardry.com/2013/05/the-flag-object/
+ *
+ * +---------+
+ * |         | ~~~~ ~~~~~~~~~~~
+ * |         | ~~~~~~~ ~~~~~ ~~
+ * |         | ~~~~~~~~~~~~
+ * +---------+
+ *
+ * Markup:
 	<div class="media">
 		<div class="media-img">
 			<img src="http://placekitten.com/100/100">
@@ -1617,42 +1785,50 @@ img, object, embed, video {
 			<p>Lorem ipsum dolor sit amet.</p>
 		</div>
 	</div>
-	========================================================================== */
+ */
 .media {
   display: table;
   width: 100%; }
 
-@media screen and (min-width: 25em) {
-  .media-img,
-  .media-body {
-    display: table-cell;
-    vertical-align: middle; }
-    .media--top .media-img,
-    .media--top .media-body {
-      vertical-align: top; }
-    .media--bottom .media-img,
-    .media--bottom .media-body {
-      vertical-align: bottom; }
-    .media-img :last-child,
-    .media-body :last-child {
-      margin-bottom: 0; }
-  .media-body {
-    width: 100%; }
-  .media-img {
-    padding-right: 10px; }
-    .media-img > img {
-      display: block;
-      max-width: none; }
-    .media--rev .media-img {
-      padding-right: 0;
-      padding-left: 10px; } }
+.media-img,
+.media-body {
+  display: table-cell;
+  vertical-align: middle; }
+  .media--top .media-img,
+  .media--top .media-body {
+    vertical-align: top; }
+  .media--bottom .media-img,
+  .media--bottom .media-body {
+    vertical-align: bottom; }
+
+.media-body {
+  width: 100%; }
 
-/*
-   Fluid width video
-   * 16:9 aspect ratio by default
-   * Usage:
-   * <div class="fluidVideo"><iframe src="..."/></div>
-   ========================================================================== */
+.media-img {
+  padding-right: 10px; }
+  .media-img > img {
+    display: block;
+    max-width: none; }
+  .media--rev .media-img {
+    padding-right: 0;
+    padding-left: 10px; }
+
+@media screen and (max-width: 46.875em) {
+  .media--stackOnSkinny .media-img,
+  .media--stackOnSkinny .media-body {
+    display: block; } }
+
+@media screen and (min-width: 46.875em) {
+  .media--stackOnWide .media-img,
+  .media--stackOnWide .media-body {
+    display: block; } }
+
+/**
+ * Fluid width video
+ * - 16:9 aspect ratio by default
+ * Usage:
+ * <div class="fluidVideo"><iframe src="..."/></div>
+ */
 .fluidVideo {
   position: relative;
   padding-bottom: 56.25%;
@@ -1665,64 +1841,6 @@ img, object, embed, video {
     width: 100%;
     height: 100%; }
 
-/**
- * Tabs
- * =================================
- */
-/**
- * Define associated tab variables
- */
-/**
- * Tabs base styling
- *
- * Usage:
-	<ul class="tabs">
-		<li><a href="#tabs-example-1" class="is-active">Tab 1</a></li>
-		<li><a href="#tabs-example-2">Tab 2</a></li>
-	</ul>
-
-	<!-- Tabs Content -->
-	<ul class="l-tabsContent">
-		<li id="tabs-example-1" class="is-active">
-			Tab 1 content
-		</li>
-
-		<li id="tabs-example-2">
-			Tab 2 content
-		</li>
-	</ul>
-	========================================================================== */
-.tabs {
-  margin-bottom: 28px;
-  border-bottom: 2px solid #16c98d; }
-  .tabs:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .tabs.tabs--alignRight li {
-    float: right; }
-  .tabs.tabs--alignCentre,
-  .tabs.tabs--alignCenter {
-    text-align: center; }
-    .tabs.tabs--alignCentre > li,
-    .tabs.tabs--alignCenter > li {
-      display: inline;
-      float: none; }
-  .tabs > li {
-    float: left;
-    margin: 0 5px; }
-  .tabs a {
-    background-color: #95a5a6;
-    border-radius: 4px 4px 0 0;
-    color: #fff; }
-    .tabs a.is-active {
-      background-color: #16c98d; }
-
-.l-tabsContent > li {
-  display: none; }
-  .l-tabsContent > li.is-active {
-    display: block; }
-
 /**
  * Tables
  * =================================
@@ -1859,7 +1977,7 @@ th {
  * If you need more responsive tables, consider Tablesaw by the Filament Group:
  * https://github.com/filamentgroup/tablesaw
  */
-@media screen and (max-width: 48em) {
+@media screen and (max-width: 46.875em) {
   .tableResponsive {
     width: 100%;
     margin-bottom: 21px;
@@ -1915,6 +2033,7 @@ pre {
   color: #444;
   border-radius: 3px;
   -moz-tab-size: 3;
+    -o-tab-size: 3;
        tab-size: 3; }
 
 code {
@@ -1959,24 +2078,8 @@ pre {
     .skipToContent a:focus {
       top: 5px; }
 
-/**
- * Scrollbar styling (only in webkit)
- */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: #d7d7d7; }
-
-::-webkit-scrollbar-thumb {
-  background: #8b8b8b;
-  cursor: pointer; }
-
 /**
  * Your app styles
- * =================================
- * Global styles
- * Example partial for masthead & footer
- * Icons - used in conjunction with grunticon
  */
 /**
  * Global app/site styles
@@ -1996,28 +2099,8 @@ body {
   .lt-ie9 .l-container {
     min-width: 1000px; }
 
-/*
-   Icons
-   ========================================================================== */
-[class^="icon-"], [class*=" icon-"] {
-  speak: none;
-  background-size: contain;
-  background-position: center center; }
-
-.icon-large {
-  display: block;
-  width: 120px;
-  height: 120px; }
-
-.icon-small {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  vertical-align: top; }
-
 /**
  * Views
- * =================================
  */
 /* Helper/utility classes */
 /**
diff --git a/assets/dist/css/styleguide.css b/assets/dist/css/styleguide.css
index 45290bc5..60c27e39 100644
--- a/assets/dist/css/styleguide.css
+++ b/assets/dist/css/styleguide.css
@@ -1,3 +1,3 @@
-body{background-color:#fff}.sg-interfaceType,.sg-sectionHeading{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}.sg-interfaceType--subtle{color:#888}.sg-sectionHeading{color:#16c98d}.sg-page{overflow:hidden;padding:8% 0}.sg-page--start{background-color:#16c98d;padding:15% 0;color:#fff}.sg-spacer{padding:20px}.sg-footer{background-color:#181830;color:#fff;padding:30px;margin-top:30px}.sg-footer h1{margin-bottom:.2em}.sg-footer a{color:#fff;border-bottom:2px dashed rgba(255,255,255,0.3)}.sg-footer a:hover{border-bottom:2px solid #fff}.sg-footer :last-child{margin-bottom:0}.sg-swatch{text-align:center;line-height:30px;margin:10px 10px 0}.sg-swatch-color{height:60px;padding:15px;font-size:13px;font-size:0.65rem;font-family:Menlo,Monaco,"Courier New",monospace}.sg-color-link-hover{color:#0c6d4d}.sg-color-link-hover .sg-swatch-color{background-color:#0c6d4d;color:#fff}.sg-color-link-hover .sg-swatch-color:before{content:"#0c6d4d";display:block}.sg-color-primary{color:#16c98d}.sg-color-primary .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-primary .sg-swatch-color:before{content:"#16c98d";display:block}.sg-color-secondary{color:#feef6d}.sg-color-secondary .sg-swatch-color{background-color:#feef6d;color:#444}.sg-color-secondary .sg-swatch-color:before{content:"#feef6d";display:block}.sg-color-highlight{color:#fa5e5b}.sg-color-highlight .sg-swatch-color{background-color:#fa5e5b;color:#444}.sg-color-highlight .sg-swatch-color:before{content:"#fa5e5b";display:block}.sg-color-text{color:#444}.sg-color-text .sg-swatch-color{background-color:#444;color:#fff}.sg-color-text .sg-swatch-color:before{content:"#444";display:block}.sg-color-background{color:#f1f1f1}.sg-color-background .sg-swatch-color{background-color:#f1f1f1;color:#444;border:#f1f1f1 solid 1px}.sg-color-background .sg-swatch-color:before{content:"#f1f1f1";display:block}.sg-color-border{color:#ddd}.sg-color-border .sg-swatch-color{background-color:#ddd;color:#444}.sg-color-border .sg-swatch-color:before{content:"#ddd";display:block}.sg-color-link{color:#16c98d}.sg-color-link .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-link .sg-swatch-color:before{content:"#16c98d";display:block}.sg-type{margin-bottom:1em}code{border:1px solid #ddd;background-color:#F9F8F8;font-size:11px;font-size:0.55rem}.sg-type-micro .sg-type-item{font-size:9px;font-size:0.45rem}.sg-type-micro code:after{content:" :: 9px"}.sg-type-smallest .sg-type-item{font-size:11px;font-size:0.55rem}.sg-type-smallest code:after{content:" :: 11px"}.sg-type-smaller .sg-type-item{font-size:13px;font-size:0.65rem}.sg-type-smaller code:after{content:" :: 13px"}.sg-type-small .sg-type-item{font-size:16px;font-size:0.8rem}.sg-type-small code:after{content:" :: 16px"}.sg-type-base .sg-type-item{font-size:20px;font-size:1rem}.sg-type-base code:after{content:" :: 20px"}.sg-type-large .sg-type-item{font-size:25px;font-size:1.25rem}.sg-type-large code:after{content:" :: 25px"}.sg-type-larger .sg-type-item{font-size:32px;font-size:1.6rem}.sg-type-larger code:after{content:" :: 32px"}.sg-type-largest .sg-type-item{font-size:40px;font-size:2rem}.sg-type-largest code:after{content:" :: 40px"}.sg-type-jumbo .sg-type-item{font-size:49px;font-size:2.45rem}.sg-type-jumbo code:after{content:" :: 49px"}.sg-typeSpecimen{margin-bottom:0;margin-top:0;-ms-word-wrap:break-word;word-wrap:break-word}.sg-typeSpecimen:after{display:block;font-size:16px;font-size:0.8rem;margin-top:5px;border-top:1px solid #ddd;font-weight:normal}.sg-typeSpecimen--primary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold}.sg-typeSpecimen--secondary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.sg-typeSpecimen--giant{font-size:120px;font-size:6rem;line-height:1}.icon-sg{display:inline-block;width:50px;height:50px;vertical-align:middle;margin-right:10px;margin-bottom:10px}.sg-favicon{padding:5px}.sg-favicon img{vertical-align:middle;margin-right:15px}
+body{background-color:#fff}.sg-interfaceType,.sg-sectionHeading{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}.sg-interfaceType--subtle{color:#888}.sg-sectionHeading{color:#16c98d}.sg-page{overflow:hidden;padding:8% 0}.sg-page--start{background-color:#16c98d;padding:15% 0;color:#fff}.sg-spacer{padding:20px}.sg-footer{background-color:#181830;color:#fff;padding:30px;margin-top:30px}.sg-footer h1{margin-bottom:.2em}.sg-footer a{color:#fff;border-bottom:2px dashed rgba(255,255,255,0.3)}.sg-footer a:hover{border-bottom:2px solid #fff}.sg-footer :last-child{margin-bottom:0}.sg-swatch{text-align:center;line-height:30px;margin:10px 10px 0}.sg-swatch-color{height:60px;padding:15px;font-size:13px;font-size:0.65rem;font-family:Menlo,Monaco,"Courier New",monospace}.sg-color-link-hover{color:#0c6d4d}.sg-color-link-hover .sg-swatch-color{background-color:#0c6d4d;color:#fff}.sg-color-link-hover .sg-swatch-color:before{content:"#0c6d4d";display:block}.sg-color-primary{color:#16c98d}.sg-color-primary .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-primary .sg-swatch-color:before{content:"#16c98d";display:block}.sg-color-secondary{color:#feef6d}.sg-color-secondary .sg-swatch-color{background-color:#feef6d;color:#444}.sg-color-secondary .sg-swatch-color:before{content:"#feef6d";display:block}.sg-color-highlight{color:#fa5e5b}.sg-color-highlight .sg-swatch-color{background-color:#fa5e5b;color:#444}.sg-color-highlight .sg-swatch-color:before{content:"#fa5e5b";display:block}.sg-color-text{color:#444}.sg-color-text .sg-swatch-color{background-color:#444;color:#fff}.sg-color-text .sg-swatch-color:before{content:"#444";display:block}.sg-color-background{color:#f1f1f1}.sg-color-background .sg-swatch-color{background-color:#f1f1f1;color:#444;border:#f1f1f1 solid 1px}.sg-color-background .sg-swatch-color:before{content:"#f1f1f1";display:block}.sg-color-border{color:#ddd}.sg-color-border .sg-swatch-color{background-color:#ddd;color:#444}.sg-color-border .sg-swatch-color:before{content:"#ddd";display:block}.sg-color-link{color:#16c98d}.sg-color-link .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-link .sg-swatch-color:before{content:"#16c98d";display:block}.sg-type{margin-bottom:1em}code{border:1px solid #ddd;background-color:#F9F8F8;font-size:11px;font-size:0.55rem}.sg-type-micro .sg-type-item{font-size:9px;font-size:0.45rem}.sg-type-micro code:after{content:" :: 9px"}.sg-type-smallest .sg-type-item{font-size:11px;font-size:0.55rem}.sg-type-smallest code:after{content:" :: 11px"}.sg-type-smaller .sg-type-item{font-size:13px;font-size:0.65rem}.sg-type-smaller code:after{content:" :: 13px"}.sg-type-small .sg-type-item{font-size:16px;font-size:0.8rem}.sg-type-small code:after{content:" :: 16px"}.sg-type-base .sg-type-item{font-size:20px;font-size:1rem}.sg-type-base code:after{content:" :: 20px"}.sg-type-mid .sg-type-item{font-size:25px;font-size:1.25rem}.sg-type-mid code:after{content:" :: 25px"}.sg-type-large .sg-type-item{font-size:32px;font-size:1.6rem}.sg-type-large code:after{content:" :: 32px"}.sg-type-largest .sg-type-item{font-size:40px;font-size:2rem}.sg-type-largest code:after{content:" :: 40px"}.sg-type-jumbo .sg-type-item{font-size:49px;font-size:2.45rem}.sg-type-jumbo code:after{content:" :: 49px"}.sg-typeSpecimen{margin-bottom:0;margin-top:0;-ms-word-wrap:break-word;word-wrap:break-word}.sg-typeSpecimen:after{display:block;font-size:16px;font-size:0.8rem;margin-top:5px;border-top:1px solid #ddd;font-weight:normal}.sg-typeSpecimen--primary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold}.sg-typeSpecimen--secondary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.sg-typeSpecimen--giant{font-size:120px;font-size:6rem;line-height:1}.icon-sg{display:inline-block;width:50px;height:50px;vertical-align:middle;margin-right:10px;margin-bottom:10px}.sg-favicon{padding:5px}.sg-favicon img{vertical-align:middle;margin-right:15px}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3RlbXAvY3NzL3N0eWxlZ3VpZGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLEtBQUsscUJBQXFCLENBQUMscUNBQXFDLHdEQUF3RCxlQUFlLENBQUMsMEJBQTBCLFVBQVUsQ0FBQyxtQkFBbUIsYUFBYSxDQUFDLFNBQVMsZ0JBQWdCLFlBQVksQ0FBQyxnQkFBZ0IseUJBQXlCLGNBQWMsVUFBVSxDQUFDLFdBQVcsWUFBWSxDQUFDLFdBQVcseUJBQXlCLFdBQVcsYUFBYSxlQUFlLENBQUMsY0FBYyxrQkFBa0IsQ0FBQyxhQUFhLFdBQVcsOENBQThDLENBQUMsbUJBQW1CLDRCQUE0QixDQUFDLHVCQUF1QixlQUFlLENBQUMsV0FBVyxrQkFBa0IsaUJBQWlCLGtCQUFrQixDQUFDLGlCQUFpQixZQUFZLGFBQWEsZUFBZSxrQkFBa0IsZ0RBQWdELENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFVBQVUsQ0FBQyw2Q0FBNkMsa0JBQWtCLGFBQWEsQ0FBQyxrQkFBa0IsYUFBYSxDQUFDLG1DQUFtQyx5QkFBeUIsVUFBVSxDQUFDLDBDQUEwQyxrQkFBa0IsYUFBYSxDQUFDLG9CQUFvQixhQUFhLENBQUMscUNBQXFDLHlCQUF5QixVQUFVLENBQUMsNENBQTRDLGtCQUFrQixhQUFhLENBQUMsb0JBQW9CLGFBQWEsQ0FBQyxxQ0FBcUMseUJBQXlCLFVBQVUsQ0FBQyw0Q0FBNEMsa0JBQWtCLGFBQWEsQ0FBQyxlQUFlLFVBQVUsQ0FBQyxnQ0FBZ0Msc0JBQXNCLFVBQVUsQ0FBQyx1Q0FBdUMsZUFBZSxhQUFhLENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFdBQVcsd0JBQXdCLENBQUMsNkNBQTZDLGtCQUFrQixhQUFhLENBQUMsaUJBQWlCLFVBQVUsQ0FBQyxrQ0FBa0Msc0JBQXNCLFVBQVUsQ0FBQyx5Q0FBeUMsZUFBZSxhQUFhLENBQUMsZUFBZSxhQUFhLENBQUMsZ0NBQWdDLHlCQUF5QixVQUFVLENBQUMsdUNBQXVDLGtCQUFrQixhQUFhLENBQUMsU0FBUyxpQkFBaUIsQ0FBQyxLQUFLLHNCQUFzQix5QkFBeUIsZUFBZSxpQkFBaUIsQ0FBQyw2QkFBNkIsY0FBYyxpQkFBaUIsQ0FBQywwQkFBMEIsaUJBQWlCLENBQUMsZ0NBQWdDLGVBQWUsaUJBQWlCLENBQUMsNkJBQTZCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGlCQUFpQixDQUFDLDRCQUE0QixrQkFBa0IsQ0FBQyw2QkFBNkIsZUFBZSxnQkFBZ0IsQ0FBQywwQkFBMEIsa0JBQWtCLENBQUMsNEJBQTRCLGVBQWUsY0FBYyxDQUFDLHlCQUF5QixrQkFBa0IsQ0FBQyw2QkFBNkIsZUFBZSxpQkFBaUIsQ0FBQywwQkFBMEIsa0JBQWtCLENBQUMsOEJBQThCLGVBQWUsZ0JBQWdCLENBQUMsMkJBQTJCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGNBQWMsQ0FBQyw0QkFBNEIsa0JBQWtCLENBQUMsNkJBQTZCLGVBQWUsaUJBQWlCLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLGlCQUFpQixnQkFBZ0IsYUFBYSx5QkFBeUIsb0JBQW9CLENBQUMsdUJBQXVCLGNBQWMsZUFBZSxpQkFBaUIsZUFBZSwwQkFBMEIsa0JBQWtCLENBQUMsMEJBQTBCLGVBQWUsaUJBQWlCLHdEQUF3RCxnQkFBZ0IsQ0FBQyw0QkFBNEIsZUFBZSxpQkFBaUIsdURBQXVELENBQUMsd0JBQXdCLGdCQUFnQixlQUFlLGFBQWEsQ0FBQyxTQUFTLHFCQUFxQixXQUFXLFlBQVksc0JBQXNCLGtCQUFrQixrQkFBa0IsQ0FBQyxZQUFZLFdBQVcsQ0FBQyxnQkFBZ0Isc0JBQXNCLGlCQUFpQixDQUFDIiwiZmlsZSI6InN0eWxlZ3VpZGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9keXtiYWNrZ3JvdW5kLWNvbG9yOiNmZmZ9LnNnLWludGVyZmFjZVR5cGUsLnNnLXNlY3Rpb25IZWFkaW5ne2ZvbnQtZmFtaWx5OlwiSGVsdmV0aWNhIE5ldWVcIixIZWx2ZXRpY2EsQXJpYWwsc2Fucy1zZXJpZjtmb250LXdlaWdodDozMDB9LnNnLWludGVyZmFjZVR5cGUtLXN1YnRsZXtjb2xvcjojODg4fS5zZy1zZWN0aW9uSGVhZGluZ3tjb2xvcjojMTZjOThkfS5zZy1wYWdle292ZXJmbG93OmhpZGRlbjtwYWRkaW5nOjglIDB9LnNnLXBhZ2UtLXN0YXJ0e2JhY2tncm91bmQtY29sb3I6IzE2Yzk4ZDtwYWRkaW5nOjE1JSAwO2NvbG9yOiNmZmZ9LnNnLXNwYWNlcntwYWRkaW5nOjIwcHh9LnNnLWZvb3RlcntiYWNrZ3JvdW5kLWNvbG9yOiMxODE4MzA7Y29sb3I6I2ZmZjtwYWRkaW5nOjMwcHg7bWFyZ2luLXRvcDozMHB4fS5zZy1mb290ZXIgaDF7bWFyZ2luLWJvdHRvbTouMmVtfS5zZy1mb290ZXIgYXtjb2xvcjojZmZmO2JvcmRlci1ib3R0b206MnB4IGRhc2hlZCByZ2JhKDI1NSwyNTUsMjU1LDAuMyl9LnNnLWZvb3RlciBhOmhvdmVye2JvcmRlci1ib3R0b206MnB4IHNvbGlkICNmZmZ9LnNnLWZvb3RlciA6bGFzdC1jaGlsZHttYXJnaW4tYm90dG9tOjB9LnNnLXN3YXRjaHt0ZXh0LWFsaWduOmNlbnRlcjtsaW5lLWhlaWdodDozMHB4O21hcmdpbjoxMHB4IDEwcHggMH0uc2ctc3dhdGNoLWNvbG9ye2hlaWdodDo2MHB4O3BhZGRpbmc6MTVweDtmb250LXNpemU6MTNweDtmb250LXNpemU6MC42NXJlbTtmb250LWZhbWlseTpNZW5sbyxNb25hY28sXCJDb3VyaWVyIE5ld1wiLG1vbm9zcGFjZX0uc2ctY29sb3ItbGluay1ob3Zlcntjb2xvcjojMGM2ZDRkfS5zZy1jb2xvci1saW5rLWhvdmVyIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMGM2ZDRkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmstaG92ZXIgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMwYzZkNGRcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci1wcmltYXJ5e2NvbG9yOiMxNmM5OGR9LnNnLWNvbG9yLXByaW1hcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiMxNmM5OGQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItcHJpbWFyeSAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzE2Yzk4ZFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLXNlY29uZGFyeXtjb2xvcjojZmVlZjZkfS5zZy1jb2xvci1zZWNvbmRhcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNmZWVmNmQ7Y29sb3I6IzQ0NH0uc2ctY29sb3Itc2Vjb25kYXJ5IC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZmVlZjZkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItaGlnaGxpZ2h0e2NvbG9yOiNmYTVlNWJ9LnNnLWNvbG9yLWhpZ2hsaWdodCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2ZhNWU1Yjtjb2xvcjojNDQ0fS5zZy1jb2xvci1oaWdobGlnaHQgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiNmYTVlNWJcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci10ZXh0e2NvbG9yOiM0NDR9LnNnLWNvbG9yLXRleHQgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiM0NDQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItdGV4dCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzQ0NFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJhY2tncm91bmR7Y29sb3I6I2YxZjFmMX0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2YxZjFmMTtjb2xvcjojNDQ0O2JvcmRlcjojZjFmMWYxIHNvbGlkIDFweH0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiI2YxZjFmMVwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJvcmRlcntjb2xvcjojZGRkfS5zZy1jb2xvci1ib3JkZXIgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNkZGQ7Y29sb3I6IzQ0NH0uc2ctY29sb3ItYm9yZGVyIC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZGRkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItbGlua3tjb2xvcjojMTZjOThkfS5zZy1jb2xvci1saW5rIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMTZjOThkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmsgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMxNmM5OGRcIjtkaXNwbGF5OmJsb2NrfS5zZy10eXBle21hcmdpbi1ib3R0b206MWVtfWNvZGV7Ym9yZGVyOjFweCBzb2xpZCAjZGRkO2JhY2tncm91bmQtY29sb3I6I0Y5RjhGODtmb250LXNpemU6MTFweDtmb250LXNpemU6MC41NXJlbX0uc2ctdHlwZS1taWNybyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo5cHg7Zm9udC1zaXplOjAuNDVyZW19LnNnLXR5cGUtbWljcm8gY29kZTphZnRlcntjb250ZW50OlwiIDo6IDlweFwifS5zZy10eXBlLXNtYWxsZXN0IC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjExcHg7Zm9udC1zaXplOjAuNTVyZW19LnNnLXR5cGUtc21hbGxlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDExcHhcIn0uc2ctdHlwZS1zbWFsbGVyIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjEzcHg7Zm9udC1zaXplOjAuNjVyZW19LnNnLXR5cGUtc21hbGxlciBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTNweFwifS5zZy10eXBlLXNtYWxsIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbX0uc2ctdHlwZS1zbWFsbCBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTZweFwifS5zZy10eXBlLWJhc2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MjBweDtmb250LXNpemU6MXJlbX0uc2ctdHlwZS1iYXNlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyMHB4XCJ9LnNnLXR5cGUtbGFyZ2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MjVweDtmb250LXNpemU6MS4yNXJlbX0uc2ctdHlwZS1sYXJnZSBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMjVweFwifS5zZy10eXBlLWxhcmdlciAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTozMnB4O2ZvbnQtc2l6ZToxLjZyZW19LnNnLXR5cGUtbGFyZ2VyIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAzMnB4XCJ9LnNnLXR5cGUtbGFyZ2VzdCAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0MHB4O2ZvbnQtc2l6ZToycmVtfS5zZy10eXBlLWxhcmdlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDQwcHhcIn0uc2ctdHlwZS1qdW1ibyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0OXB4O2ZvbnQtc2l6ZToyLjQ1cmVtfS5zZy10eXBlLWp1bWJvIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiA0OXB4XCJ9LnNnLXR5cGVTcGVjaW1lbnttYXJnaW4tYm90dG9tOjA7bWFyZ2luLXRvcDowOy1tcy13b3JkLXdyYXA6YnJlYWstd29yZDt3b3JkLXdyYXA6YnJlYWstd29yZH0uc2ctdHlwZVNwZWNpbWVuOmFmdGVye2Rpc3BsYXk6YmxvY2s7Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbTttYXJnaW4tdG9wOjVweDtib3JkZXItdG9wOjFweCBzb2xpZCAjZGRkO2ZvbnQtd2VpZ2h0Om5vcm1hbH0uc2ctdHlwZVNwZWNpbWVuLS1wcmltYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmO2ZvbnQtd2VpZ2h0OmJvbGR9LnNnLXR5cGVTcGVjaW1lbi0tc2Vjb25kYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmfS5zZy10eXBlU3BlY2ltZW4tLWdpYW50e2ZvbnQtc2l6ZToxMjBweDtmb250LXNpemU6NnJlbTtsaW5lLWhlaWdodDoxfS5pY29uLXNne2Rpc3BsYXk6aW5saW5lLWJsb2NrO3dpZHRoOjUwcHg7aGVpZ2h0OjUwcHg7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxMHB4O21hcmdpbi1ib3R0b206MTBweH0uc2ctZmF2aWNvbntwYWRkaW5nOjVweH0uc2ctZmF2aWNvbiBpbWd7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxNXB4fVxuIl19 */
\ No newline at end of file
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3RlbXAvY3NzL3N0eWxlZ3VpZGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLEtBQUsscUJBQXFCLENBQUMscUNBQXFDLHdEQUF3RCxlQUFlLENBQUMsMEJBQTBCLFVBQVUsQ0FBQyxtQkFBbUIsYUFBYSxDQUFDLFNBQVMsZ0JBQWdCLFlBQVksQ0FBQyxnQkFBZ0IseUJBQXlCLGNBQWMsVUFBVSxDQUFDLFdBQVcsWUFBWSxDQUFDLFdBQVcseUJBQXlCLFdBQVcsYUFBYSxlQUFlLENBQUMsY0FBYyxrQkFBa0IsQ0FBQyxhQUFhLFdBQVcsOENBQThDLENBQUMsbUJBQW1CLDRCQUE0QixDQUFDLHVCQUF1QixlQUFlLENBQUMsV0FBVyxrQkFBa0IsaUJBQWlCLGtCQUFrQixDQUFDLGlCQUFpQixZQUFZLGFBQWEsZUFBZSxrQkFBa0IsZ0RBQWdELENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFVBQVUsQ0FBQyw2Q0FBNkMsa0JBQWtCLGFBQWEsQ0FBQyxrQkFBa0IsYUFBYSxDQUFDLG1DQUFtQyx5QkFBeUIsVUFBVSxDQUFDLDBDQUEwQyxrQkFBa0IsYUFBYSxDQUFDLG9CQUFvQixhQUFhLENBQUMscUNBQXFDLHlCQUF5QixVQUFVLENBQUMsNENBQTRDLGtCQUFrQixhQUFhLENBQUMsb0JBQW9CLGFBQWEsQ0FBQyxxQ0FBcUMseUJBQXlCLFVBQVUsQ0FBQyw0Q0FBNEMsa0JBQWtCLGFBQWEsQ0FBQyxlQUFlLFVBQVUsQ0FBQyxnQ0FBZ0Msc0JBQXNCLFVBQVUsQ0FBQyx1Q0FBdUMsZUFBZSxhQUFhLENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFdBQVcsd0JBQXdCLENBQUMsNkNBQTZDLGtCQUFrQixhQUFhLENBQUMsaUJBQWlCLFVBQVUsQ0FBQyxrQ0FBa0Msc0JBQXNCLFVBQVUsQ0FBQyx5Q0FBeUMsZUFBZSxhQUFhLENBQUMsZUFBZSxhQUFhLENBQUMsZ0NBQWdDLHlCQUF5QixVQUFVLENBQUMsdUNBQXVDLGtCQUFrQixhQUFhLENBQUMsU0FBUyxpQkFBaUIsQ0FBQyxLQUFLLHNCQUFzQix5QkFBeUIsZUFBZSxpQkFBaUIsQ0FBQyw2QkFBNkIsY0FBYyxpQkFBaUIsQ0FBQywwQkFBMEIsaUJBQWlCLENBQUMsZ0NBQWdDLGVBQWUsaUJBQWlCLENBQUMsNkJBQTZCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGlCQUFpQixDQUFDLDRCQUE0QixrQkFBa0IsQ0FBQyw2QkFBNkIsZUFBZSxnQkFBZ0IsQ0FBQywwQkFBMEIsa0JBQWtCLENBQUMsNEJBQTRCLGVBQWUsY0FBYyxDQUFDLHlCQUF5QixrQkFBa0IsQ0FBQywyQkFBMkIsZUFBZSxpQkFBaUIsQ0FBQyx3QkFBd0Isa0JBQWtCLENBQUMsNkJBQTZCLGVBQWUsZ0JBQWdCLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGNBQWMsQ0FBQyw0QkFBNEIsa0JBQWtCLENBQUMsNkJBQTZCLGVBQWUsaUJBQWlCLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLGlCQUFpQixnQkFBZ0IsYUFBYSx5QkFBeUIsb0JBQW9CLENBQUMsdUJBQXVCLGNBQWMsZUFBZSxpQkFBaUIsZUFBZSwwQkFBMEIsa0JBQWtCLENBQUMsMEJBQTBCLGVBQWUsaUJBQWlCLHdEQUF3RCxnQkFBZ0IsQ0FBQyw0QkFBNEIsZUFBZSxpQkFBaUIsdURBQXVELENBQUMsd0JBQXdCLGdCQUFnQixlQUFlLGFBQWEsQ0FBQyxTQUFTLHFCQUFxQixXQUFXLFlBQVksc0JBQXNCLGtCQUFrQixrQkFBa0IsQ0FBQyxZQUFZLFdBQVcsQ0FBQyxnQkFBZ0Isc0JBQXNCLGlCQUFpQixDQUFDIiwiZmlsZSI6InN0eWxlZ3VpZGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9keXtiYWNrZ3JvdW5kLWNvbG9yOiNmZmZ9LnNnLWludGVyZmFjZVR5cGUsLnNnLXNlY3Rpb25IZWFkaW5ne2ZvbnQtZmFtaWx5OlwiSGVsdmV0aWNhIE5ldWVcIixIZWx2ZXRpY2EsQXJpYWwsc2Fucy1zZXJpZjtmb250LXdlaWdodDozMDB9LnNnLWludGVyZmFjZVR5cGUtLXN1YnRsZXtjb2xvcjojODg4fS5zZy1zZWN0aW9uSGVhZGluZ3tjb2xvcjojMTZjOThkfS5zZy1wYWdle292ZXJmbG93OmhpZGRlbjtwYWRkaW5nOjglIDB9LnNnLXBhZ2UtLXN0YXJ0e2JhY2tncm91bmQtY29sb3I6IzE2Yzk4ZDtwYWRkaW5nOjE1JSAwO2NvbG9yOiNmZmZ9LnNnLXNwYWNlcntwYWRkaW5nOjIwcHh9LnNnLWZvb3RlcntiYWNrZ3JvdW5kLWNvbG9yOiMxODE4MzA7Y29sb3I6I2ZmZjtwYWRkaW5nOjMwcHg7bWFyZ2luLXRvcDozMHB4fS5zZy1mb290ZXIgaDF7bWFyZ2luLWJvdHRvbTouMmVtfS5zZy1mb290ZXIgYXtjb2xvcjojZmZmO2JvcmRlci1ib3R0b206MnB4IGRhc2hlZCByZ2JhKDI1NSwyNTUsMjU1LDAuMyl9LnNnLWZvb3RlciBhOmhvdmVye2JvcmRlci1ib3R0b206MnB4IHNvbGlkICNmZmZ9LnNnLWZvb3RlciA6bGFzdC1jaGlsZHttYXJnaW4tYm90dG9tOjB9LnNnLXN3YXRjaHt0ZXh0LWFsaWduOmNlbnRlcjtsaW5lLWhlaWdodDozMHB4O21hcmdpbjoxMHB4IDEwcHggMH0uc2ctc3dhdGNoLWNvbG9ye2hlaWdodDo2MHB4O3BhZGRpbmc6MTVweDtmb250LXNpemU6MTNweDtmb250LXNpemU6MC42NXJlbTtmb250LWZhbWlseTpNZW5sbyxNb25hY28sXCJDb3VyaWVyIE5ld1wiLG1vbm9zcGFjZX0uc2ctY29sb3ItbGluay1ob3Zlcntjb2xvcjojMGM2ZDRkfS5zZy1jb2xvci1saW5rLWhvdmVyIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMGM2ZDRkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmstaG92ZXIgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMwYzZkNGRcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci1wcmltYXJ5e2NvbG9yOiMxNmM5OGR9LnNnLWNvbG9yLXByaW1hcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiMxNmM5OGQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItcHJpbWFyeSAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzE2Yzk4ZFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLXNlY29uZGFyeXtjb2xvcjojZmVlZjZkfS5zZy1jb2xvci1zZWNvbmRhcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNmZWVmNmQ7Y29sb3I6IzQ0NH0uc2ctY29sb3Itc2Vjb25kYXJ5IC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZmVlZjZkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItaGlnaGxpZ2h0e2NvbG9yOiNmYTVlNWJ9LnNnLWNvbG9yLWhpZ2hsaWdodCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2ZhNWU1Yjtjb2xvcjojNDQ0fS5zZy1jb2xvci1oaWdobGlnaHQgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiNmYTVlNWJcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci10ZXh0e2NvbG9yOiM0NDR9LnNnLWNvbG9yLXRleHQgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiM0NDQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItdGV4dCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzQ0NFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJhY2tncm91bmR7Y29sb3I6I2YxZjFmMX0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2YxZjFmMTtjb2xvcjojNDQ0O2JvcmRlcjojZjFmMWYxIHNvbGlkIDFweH0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiI2YxZjFmMVwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJvcmRlcntjb2xvcjojZGRkfS5zZy1jb2xvci1ib3JkZXIgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNkZGQ7Y29sb3I6IzQ0NH0uc2ctY29sb3ItYm9yZGVyIC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZGRkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItbGlua3tjb2xvcjojMTZjOThkfS5zZy1jb2xvci1saW5rIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMTZjOThkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmsgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMxNmM5OGRcIjtkaXNwbGF5OmJsb2NrfS5zZy10eXBle21hcmdpbi1ib3R0b206MWVtfWNvZGV7Ym9yZGVyOjFweCBzb2xpZCAjZGRkO2JhY2tncm91bmQtY29sb3I6I0Y5RjhGODtmb250LXNpemU6MTFweDtmb250LXNpemU6MC41NXJlbX0uc2ctdHlwZS1taWNybyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo5cHg7Zm9udC1zaXplOjAuNDVyZW19LnNnLXR5cGUtbWljcm8gY29kZTphZnRlcntjb250ZW50OlwiIDo6IDlweFwifS5zZy10eXBlLXNtYWxsZXN0IC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjExcHg7Zm9udC1zaXplOjAuNTVyZW19LnNnLXR5cGUtc21hbGxlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDExcHhcIn0uc2ctdHlwZS1zbWFsbGVyIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjEzcHg7Zm9udC1zaXplOjAuNjVyZW19LnNnLXR5cGUtc21hbGxlciBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTNweFwifS5zZy10eXBlLXNtYWxsIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbX0uc2ctdHlwZS1zbWFsbCBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTZweFwifS5zZy10eXBlLWJhc2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MjBweDtmb250LXNpemU6MXJlbX0uc2ctdHlwZS1iYXNlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyMHB4XCJ9LnNnLXR5cGUtbWlkIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjI1cHg7Zm9udC1zaXplOjEuMjVyZW19LnNnLXR5cGUtbWlkIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyNXB4XCJ9LnNnLXR5cGUtbGFyZ2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MzJweDtmb250LXNpemU6MS42cmVtfS5zZy10eXBlLWxhcmdlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAzMnB4XCJ9LnNnLXR5cGUtbGFyZ2VzdCAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0MHB4O2ZvbnQtc2l6ZToycmVtfS5zZy10eXBlLWxhcmdlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDQwcHhcIn0uc2ctdHlwZS1qdW1ibyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0OXB4O2ZvbnQtc2l6ZToyLjQ1cmVtfS5zZy10eXBlLWp1bWJvIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiA0OXB4XCJ9LnNnLXR5cGVTcGVjaW1lbnttYXJnaW4tYm90dG9tOjA7bWFyZ2luLXRvcDowOy1tcy13b3JkLXdyYXA6YnJlYWstd29yZDt3b3JkLXdyYXA6YnJlYWstd29yZH0uc2ctdHlwZVNwZWNpbWVuOmFmdGVye2Rpc3BsYXk6YmxvY2s7Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbTttYXJnaW4tdG9wOjVweDtib3JkZXItdG9wOjFweCBzb2xpZCAjZGRkO2ZvbnQtd2VpZ2h0Om5vcm1hbH0uc2ctdHlwZVNwZWNpbWVuLS1wcmltYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmO2ZvbnQtd2VpZ2h0OmJvbGR9LnNnLXR5cGVTcGVjaW1lbi0tc2Vjb25kYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmfS5zZy10eXBlU3BlY2ltZW4tLWdpYW50e2ZvbnQtc2l6ZToxMjBweDtmb250LXNpemU6NnJlbTtsaW5lLWhlaWdodDoxfS5pY29uLXNne2Rpc3BsYXk6aW5saW5lLWJsb2NrO3dpZHRoOjUwcHg7aGVpZ2h0OjUwcHg7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxMHB4O21hcmdpbi1ib3R0b206MTBweH0uc2ctZmF2aWNvbntwYWRkaW5nOjVweH0uc2ctZmF2aWNvbiBpbWd7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxNXB4fVxuIl19 */
\ No newline at end of file

From a0fb001587712b534449fbf5788f1e31734e9337 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:21:14 +0100
Subject: [PATCH 035/136] remove our own version of console script and replace
 with npm version

---
 assets/src/js/helpers/console.js | 20 --------------------
 package.json                     |  2 +-
 2 files changed, 1 insertion(+), 21 deletions(-)
 delete mode 100644 assets/src/js/helpers/console.js

diff --git a/assets/src/js/helpers/console.js b/assets/src/js/helpers/console.js
deleted file mode 100644
index 9b80e78a..00000000
--- a/assets/src/js/helpers/console.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Console.log shim
- *
- * Allows newer console API to be used in older browsers without erroring
- */
-
-;(function (window) {
-	if (!window.console) {
-		console = {};
-	}
-
-	var funcs = 'assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn'.split(',');
-	var stub = function () { };
-
-	for (var i = 0; i < funcs.length; i++) {
-		if (!console[funcs[i]]) {
-			console[funcs[i]] = stub;
-		}
-	}
-})(window);
diff --git a/package.json b/package.json
index 5902f975..6c3cc04f 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "node": ">=0.12"
   },
   "dependencies": {
+    "console": "^0.5.2",
     "cookies-js": "^1.2.1",
     "swiftclick": "^1.1.5",
     "trak.js": "^0.5.2"
@@ -64,7 +65,6 @@
   "keywords": [],
   "scripts": {
     "test": "grunt travis --verbose",
-
     "prekickoff": "npm install -g grunt-cli && npm install",
     "kickoff": "grunt start"
   }

From 27105f6cc5fb2f26187c3622681ee0df14aa01e8 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:21:43 +0100
Subject: [PATCH 036/136] browserifyifyify the main script.js

---
 assets/src/js/script.js | 47 ++++++++++++++---------------------------
 1 file changed, 16 insertions(+), 31 deletions(-)

diff --git a/assets/src/js/script.js b/assets/src/js/script.js
index 447ae31c..cb46f20b 100644
--- a/assets/src/js/script.js
+++ b/assets/src/js/script.js
@@ -1,41 +1,26 @@
 /**
+ * Project Name:
+ * Client:
  * Author:
- * TMW - (Author Name Here)
+ * Company:
  */
 
-// Create a closure to maintain scope of the '$' and KO (Kickoff)
-;(function(KO, $) {
+'use-strict';
 
-	$(function() {
-		// Any globals go here in CAPS (but avoid if possible)
+// npm modules
+var SwiftClick = require('swiftclick');
+var trak = require('trak.js');
 
-		// follow a singleton pattern
-		// (http://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript)
+// Our own modules
+var ready = require('./modules/ready'); // DOM ready
 
-		KO.Config.init();
+// Bundle global libs that don't return a value
+require('console');
 
-	});// END DOC READY
 
+// DOM ready code goes in here
+ready.add(function () {
+	trak.start();
+	var swiftclick = SwiftClick.attach(document.body);
 
-	KO.Config = {
-		variableX : '', // please don't keep me - only for example syntax!
-
-		init : function () {
-			console.debug('Kickoff is running');
-		}
-	};
-
-	// Example module
-	/*
-	KO.MyExampleModule = {
-		init : function () {
-			KO.MyExampleModule.setupEvents();
-		},
-
-		setupEvents : function () {
-			//do some more stuff in here
-		}
-	};
-	*/
-
-})(window.KO = window.KO || {}, jQuery);
+});

From 0e7d3294ae483c4cd6a8a47464c1a96c8ccb0edb Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:21:59 +0100
Subject: [PATCH 037/136] add ready.js for dom ready

---
 assets/src/js/modules/ready.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 assets/src/js/modules/ready.js

diff --git a/assets/src/js/modules/ready.js b/assets/src/js/modules/ready.js
new file mode 100644
index 00000000..cea283dd
--- /dev/null
+++ b/assets/src/js/modules/ready.js
@@ -0,0 +1,18 @@
+module.exports.add = function (callback) {
+
+	if (document.readyState === 'complete') {
+		// Already ready, execute callback
+		callback.call();
+	}
+	else if (document.addEventListener) {
+		// Modern browsers
+		document.addEventListener('DOMContentLoaded', callback);
+	}
+	else if (document.attachEvent) {
+		// Old browsers
+		document.attachEvent('onreadystatechange', function () {
+			if (document.readyState == 'interactive')
+				callback.call();
+		});
+	}
+}

From a870ebbbb5c88a760b51b1ae0396dbf3c4fc8cce Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 01:24:08 +0100
Subject: [PATCH 038/136] add conditional comment to load shims on <=IE9

---
 index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.html b/index.html
index 5bc593af..555296dd 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,9 @@
 
 
 		<!-- JavaScript at the bottom for fast page loading -->
+		<!--[if lte IE 9]>
+			<script src="/assets/dist/js/standalone/shims.js"></script>
+		<![endif]-->
 		<script src="/assets/dist/js/script.js"></script>
 
 		<script>

From 31da803f327f6a465c6c7415a26df27e3a17ad33 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 17 Sep 2015 09:20:47 +0100
Subject: [PATCH 039/136] remove photobox from gitignore

---
 .gitignore | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index f131c026..4e69455d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,8 +25,6 @@ logs
 
 
 # Tooling
-# Photobox visual regression testing
-photobox/
 # Generated test files
 testing/
 

From 532422baef81a3f33f55d67ccaf16e58f436dde1 Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Thu, 17 Sep 2015 17:10:14 +0100
Subject: [PATCH 040/136] Improved block grids to support more break points.

---
 assets/src/scss/components/_block-grids.scss | 43 +++++++++++++-------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
index 8a7e7a75..225f7982 100644
--- a/assets/src/scss/components/_block-grids.scss
+++ b/assets/src/scss/components/_block-grids.scss
@@ -12,6 +12,24 @@
  *     <li></li>
  * </ul>
  */
+ 
+ @mixin blockGridHelper($mutator){
+	&[class*="up--#{$mutator}"] > li {
+		display: block;
+		height: auto;
+		float: left;
+	}
+	
+	@for $i from 1 to $grid-column-count + 1 {
+		&.l-blockGrid--#{$i}up--#{$mutator} > li {
+			width: percentage(1 / $i);
+			display: block;
+			height: auto;
+			float: left;
+		}
+	}
+}
+ 
 .l-blockGrid {
 	display: block;
 	list-style-type: none;
@@ -29,20 +47,7 @@
 
 	// Narrow block-grid
 	@include respond-min-max($bp-block-grid-narrow, $bp-single-col) {
-		&[class*="up--narrow"] > li {
-			display: block;
-			height: auto;
-			float: left;
-		}
-
-		@for $i from 1 to $grid-column-count + 1 {
-			&.l-blockGrid--#{$i}up--narrow > li {
-				width: percentage(1 / $i);
-				display: block;
-				height: auto;
-				float: left;
-			}
-		}
+		@include blockGridHelper('narrow');
 	}
 
 	@include respond-min($bp-single-col) {
@@ -59,6 +64,16 @@
 			}
 		}
 	}
+	
+	// Wide block-grid
+	@include respond-min($bp-wide) {
+		@include blockGridHelper('wide');
+	}
+	
+	// Huge block-grid
+	@include respond-min($bp-huge) {
+		@include blockGridHelper('huge');
+	}
 }
 
 

From 3515cc81292b21e2eab1af8682541c73c350d23c Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Thu, 17 Sep 2015 17:14:30 +0100
Subject: [PATCH 041/136] Using lite-ready from npm.

---
 assets/src/js/modules/ready.js | 18 ------------------
 assets/src/js/script.js        |  5 ++---
 package.json                   |  1 +
 3 files changed, 3 insertions(+), 21 deletions(-)
 delete mode 100644 assets/src/js/modules/ready.js

diff --git a/assets/src/js/modules/ready.js b/assets/src/js/modules/ready.js
deleted file mode 100644
index cea283dd..00000000
--- a/assets/src/js/modules/ready.js
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports.add = function (callback) {
-
-	if (document.readyState === 'complete') {
-		// Already ready, execute callback
-		callback.call();
-	}
-	else if (document.addEventListener) {
-		// Modern browsers
-		document.addEventListener('DOMContentLoaded', callback);
-	}
-	else if (document.attachEvent) {
-		// Old browsers
-		document.attachEvent('onreadystatechange', function () {
-			if (document.readyState == 'interactive')
-				callback.call();
-		});
-	}
-}
diff --git a/assets/src/js/script.js b/assets/src/js/script.js
index cb46f20b..c0e1d336 100644
--- a/assets/src/js/script.js
+++ b/assets/src/js/script.js
@@ -10,16 +10,15 @@
 // npm modules
 var SwiftClick = require('swiftclick');
 var trak = require('trak.js');
+var ready = require('lite-ready');
 
-// Our own modules
-var ready = require('./modules/ready'); // DOM ready
 
 // Bundle global libs that don't return a value
 require('console');
 
 
 // DOM ready code goes in here
-ready.add(function () {
+ready(function () {
 	trak.start();
 	var swiftclick = SwiftClick.attach(document.body);
 
diff --git a/package.json b/package.json
index 6c3cc04f..9d76f519 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
   "dependencies": {
     "console": "^0.5.2",
     "cookies-js": "^1.2.1",
+    "lite-ready": "^1.0.2",
     "swiftclick": "^1.1.5",
     "trak.js": "^0.5.2"
   },

From b5025a12622ffae0b4c140d3ed5c54bf82116ace Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 18 Sep 2015 15:59:46 +0100
Subject: [PATCH 042/136] remove cookie package from default build

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 9d76f519..4e58eab9 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
   },
   "dependencies": {
     "console": "^0.5.2",
-    "cookies-js": "^1.2.1",
     "lite-ready": "^1.0.2",
     "swiftclick": "^1.1.5",
     "trak.js": "^0.5.2"

From a5899b87d210d42acbabd7eb793e665d352c8596 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 18 Sep 2015 16:00:47 +0100
Subject: [PATCH 043/136] change npm script `npm run kickoff` to `npm start`

This script installs `grunt-cli` & Kickoff's dependencies
---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4e58eab9..48c66746 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,8 @@
   "keywords": [],
   "scripts": {
     "test": "grunt travis --verbose",
-    "prekickoff": "npm install -g grunt-cli && npm install",
-    "kickoff": "grunt start"
+
+    "prestart": "npm install -g grunt-cli && npm install",
+    "start": "grunt start"
   }
 }

From 37000226a23bab8cec82fa8a715596d790a0c639 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 18 Sep 2015 16:01:30 +0100
Subject: [PATCH 044/136] remove chotto from `load-grunt-tasks` pattern array

---
 Gruntfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 55391a55..e292e127 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -11,7 +11,7 @@ module.exports = function (grunt) {
 	};
 
 	// Load grunt tasks automatically
-	require('load-grunt-tasks')(grunt, {pattern: ["grunt-*", "chotto"]});
+	require('load-grunt-tasks')(grunt, {pattern: ["grunt-*"]});
 
 	// Load grunt configurations automatically
 	var configs = require('load-grunt-configs')(grunt, options);

From aac9d124618088d0162d177b231655e68ebd03d4 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 18 Sep 2015 17:43:27 +0100
Subject: [PATCH 045/136] remove this file

---
 assets/src/js/helpers/log.js | 26 --------------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 assets/src/js/helpers/log.js

diff --git a/assets/src/js/helpers/log.js b/assets/src/js/helpers/log.js
deleted file mode 100644
index 3890b722..00000000
--- a/assets/src/js/helpers/log.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Log.js - Lightweight wrapper for console.log
- *
- * Usage:
- * log('inside coolFunc', this, arguments);
- *
- * paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
- */
-
-window.log = function f() {
-	log.history = log.history || [];
-	log.history.push(arguments);
-	if (this.console) {
-		var args = arguments,
-			newarr;
-		try {
-			args.callee = f.caller;
-		} catch (e) {}
-		newarr = [].slice.call(args);
-		if (typeof console.log === 'object')  {
-			log.apply.call(console.log, console, newarr);
-		} else {
-			console.log.apply(console, newarr);
-		}
-	}
-};

From 4550b3229201e2c9ec7169f26c6e907c974a1215 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 23 Sep 2015 10:45:18 +0100
Subject: [PATCH 046/136] update lite-ready dep

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 48c66746..a4a465cb 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "console": "^0.5.2",
-    "lite-ready": "^1.0.2",
+    "lite-ready": "^1.0.3",
     "swiftclick": "^1.1.5",
     "trak.js": "^0.5.2"
   },

From 9eb44145a58898d032d777abfc45238e39a377e3 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Tue, 29 Sep 2015 07:21:20 +0100
Subject: [PATCH 047/136] improve hidpi mixin using the latest from
 html5boilerplate

---
 assets/src/scss/mixins/_hidpi.scss | 42 +++++++++++++++---------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/assets/src/scss/mixins/_hidpi.scss b/assets/src/scss/mixins/_hidpi.scss
index debc31d5..0e4d37d1 100644
--- a/assets/src/scss/mixins/_hidpi.scss
+++ b/assets/src/scss/mixins/_hidpi.scss
@@ -1,29 +1,29 @@
 /**
  *  HiDPI mixin.
- *  @include hidpi-min() { ... };
+ *  @include hidpi { ... };
  *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
  */
-@mixin hidpi($ratio: 1.5) {
-	@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) {
+@mixin hidpi($ratio: 1.25) {
+	@media print,
+		(-webkit-min-device-pixel-ratio: $ratio),
+		(min-resolution: #{$ratio}dppx),
+		(min-resolution: #{$ratio*96}dpi) {
 		@content;
 	}
 }
 
+
 /**
  * Hidpi with a minimum width media query
  * @include hidpi-min($bp-mid, 1.5) { ... };
  */
-@mixin hidpi-min($width, $ratio: 1.5) {
-	$width-em: em($width);
-	@media only screen and (min-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
-	only screen and (min-width: $width-em) and (min--moz-device-pixel-ratio: $ratio),
-	only screen and (min-width: $width-em) and (-o-min-device-pixel-ratio: #{$ratio}/1),
-	only screen and (min-width: $width-em) and (min-resolution: #{round($ratio*96)}dpi),
-	only screen and (min-width: $width-em) and (min-resolution: #{$ratio}dppx) {
+@mixin hidpi-min($width, $ratio: 1.25) {
+	$width-em: em(strip-units($width), $mq-base);
+
+	@media print,
+		screen and (min-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
+		screen and (min-width: $width-em) and (min-resolution: #{$ratio}dppx),
+		screen and (min-width: $width-em) and (min-resolution: #{$ratio*96}dpi) {
 		@content;
 	}
 }
@@ -33,13 +33,13 @@
  * Hidpi with a max width media query
  * @include hidpi-max($bp-mid, 1.3) { ... };
  */
-@mixin hidpi-max($width, $ratio: 1.3) {
-	$width-em: em($width);
-	@media only screen and (max-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
-	only screen and (max-width: $width-em) and (min--moz-device-pixel-ratio: $ratio),
-	only screen and (max-width: $width-em) and (-o-min-device-pixel-ratio: #{$ratio}/1),
-	only screen and (max-width: $width-em) and (min-resolution: #{round($ratio*96)}dpi),
-	only screen and (max-width: $width-em) and (min-resolution: #{$ratio}dppx) {
+@mixin hidpi-max($width, $ratio: 1.25) {
+	$width-em: em(strip-units($width), $mq-base);
+
+	@media print,
+		screen and (max-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
+		screen and (max-width: $width-em) and (min-resolution: #{$ratio}dppx),
+		screen and (max-width: $width-em) and (min-resolution: #{$ratio*96}dpi) {
 		@content;
 	}
 }

From 3b3eee190a231605a6092b0aee0f5e8fc094b892 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Tue, 29 Sep 2015 07:36:31 +0100
Subject: [PATCH 048/136] Revise the `lang` attribute

See https://github.com/h5bp/html5-boilerplate/issues/1542
---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 555296dd..ca206d10 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
-<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
+<!--[if IE 8]><html class="no-js lt-ie9" lang=""><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js" lang=""><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

From 2ba1cfebd7daec09decff933295f2cb88287c673 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Tue, 29 Sep 2015 07:38:05 +0100
Subject: [PATCH 049/136] Lowercase some tags to save some bytes

see https://github.com/h5bp/html5-boilerplate/issues/1656
---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ca206d10..3b919c57 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--[if IE 8]><html class="no-js lt-ie9" lang=""><![endif]-->
 <!--[if gt IE 8]><!--><html class="no-js" lang=""><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta http-equiv="x-ua-compatible" content="ie=edge">
 		<title>Kickoff</title>
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">

From 424349dfa04e363b4ff3387c9b47299d9fe88f86 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Tue, 29 Sep 2015 07:41:01 +0100
Subject: [PATCH 050/136] Remove the gap between audio, canvas, iframes,
 images, videos and the bottom of their containers

see https://github.com/h5bp/html5-boilerplate/pull/1613
---
 assets/src/scss/components/_embedded-content.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/src/scss/components/_embedded-content.scss b/assets/src/scss/components/_embedded-content.scss
index a9247929..a405ba76 100644
--- a/assets/src/scss/components/_embedded-content.scss
+++ b/assets/src/scss/components/_embedded-content.scss
@@ -23,3 +23,17 @@ svg:not(:root) { overflow: hidden; }
 img, object, embed, video {
 	max-width: 100%;
 }
+
+/**
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+	vertical-align: middle;
+}

From 798f5bcceb15182bb45626f5851b80cf97d40501 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 07:03:34 +0100
Subject: [PATCH 051/136] update grunticon config & embed code

- embed code now has callback
- config uses custom template to reduce code bloat
- added one css property to `_icons.scss` because it was removed from the grunticon-generated css
---
 _grunt-configs/grunticon-tpl.hbs       | 1 +
 _grunt-configs/images.js               | 2 ++
 assets/src/scss/components/_icons.scss | 1 +
 index.html                             | 4 ++--
 4 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 _grunt-configs/grunticon-tpl.hbs

diff --git a/_grunt-configs/grunticon-tpl.hbs b/_grunt-configs/grunticon-tpl.hbs
new file mode 100644
index 00000000..d47d0957
--- /dev/null
+++ b/_grunt-configs/grunticon-tpl.hbs
@@ -0,0 +1 @@
+{{#each customselectors}}{{this}},{{/each}} {{prefix}}{{name}}{background-image: url('{{datauri}}');}
diff --git a/_grunt-configs/images.js b/_grunt-configs/images.js
index 09df2bd3..90798225 100644
--- a/_grunt-configs/images.js
+++ b/_grunt-configs/images.js
@@ -56,6 +56,8 @@ module.exports.tasks = {
 				dest  : '<%=config.img.distDir%>/icons'
 			}],
 			options: {
+				enhanceSVG: true,
+				template: "./_grunt-configs/grunticon-tpl.hbs"
 				// https://github.com/filamentgroup/grunticon#optionscustomselectors
 				// customselectors: {
 				// 	"arrow": [".icon-arrow:before"]
diff --git a/assets/src/scss/components/_icons.scss b/assets/src/scss/components/_icons.scss
index 627c0cc6..a0b18785 100644
--- a/assets/src/scss/components/_icons.scss
+++ b/assets/src/scss/components/_icons.scss
@@ -6,6 +6,7 @@
 	speak: none;
 	background-size: contain;
 	background-position: center center;
+	background-repeat: no-repeat;
 }
 
 .icon-large {
diff --git a/index.html b/index.html
index 3b919c57..cc624b23 100644
--- a/index.html
+++ b/index.html
@@ -27,8 +27,8 @@
 		<!-- Grunticon SVG detection script. http://github.com/filamentgroup/
 				 Remove if not using Grunticon. -->
 		<script>
-			(function(e){function t(t,n,r,o){"use strict";function a(){for(var e,t=0;m.length>t;t++)m[t].href&&m[t].href.indexOf(i.href)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),c=n||e.document.getElementsByTagName("script")[0],m=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",o&&(i.onload=o),c.parentNode.insertBefore(i,c),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,c=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),m=new i;m.onerror=function(){n.method="png",n.href=r[2],t(r[2])},m.onload=function(){var e=1===m.width&&1===m.height,a=r[e&&c?0:e?1:2];n.method=e&&c?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},m.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);
-			grunticon(["/assets/dist/img/icons/icons.data.svg.css", "/assets/dist/img/icons/icons.data.png.css", "/assets/dist/img/icons/icons.fallback.css"]);
+			(function(){function e(e,n,t){"use strict";var o=window.document.createElement("link"),r=n||window.document.getElementsByTagName("script")[0],a=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)})();
+			grunticon(["/assets/dist/img/icons/icons.data.svg.css", "/assets/dist/img/icons/icons.data.png.css", "/assets/dist/img/icons/icons.fallback.css"], grunticon.svgLoadedCallback);
 		</script>
 		<noscript><link href="/assets/dist/img/icons/icons.fallback.css" rel="stylesheet"></noscript>
 		<!-- /End Grunticon detection & injection script -->

From 0a8268cc56d2d09a9ca26616fe4714706a2098c2 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 07:04:07 +0100
Subject: [PATCH 052/136] add a simple browser upgrade message like h5bp

---
 assets/src/scss/_dependencies.scss             | 2 ++
 assets/src/scss/partials/_browser-upgrade.scss | 6 ++++++
 index.html                                     | 3 +++
 3 files changed, 11 insertions(+)
 create mode 100644 assets/src/scss/partials/_browser-upgrade.scss

diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index f075990d..d7faf867 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -56,6 +56,8 @@
 @import "partials/masthead"; // Example partial for masthead
 @import "partials/footer"; // Example partial for footer
 
+@import "partials/browser-upgrade"; // Styles to show an upgrade message to users on old browsers
+
 
 /**
  * Views
diff --git a/assets/src/scss/partials/_browser-upgrade.scss b/assets/src/scss/partials/_browser-upgrade.scss
new file mode 100644
index 00000000..11e95608
--- /dev/null
+++ b/assets/src/scss/partials/_browser-upgrade.scss
@@ -0,0 +1,6 @@
+.browserupgrade {
+	margin: .2em 0;
+	background: #ccc;
+	color: #000;
+	padding: .2em 0;
+}
diff --git a/index.html b/index.html
index cc624b23..7930fefe 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,9 @@
 		<div class="skipToContent">
 			<a href="#mainContent" class="btn btn--primary">Skip to main content</a>
 		</div>
+		<!--[if lt IE 8]>
+			<div class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
+		<![endif]-->
 
 
 		<header class="masthead" role="banner">

From 134df56a3da11d01e91b1555001a0bc934b70c6c Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 07:04:30 +0100
Subject: [PATCH 053/136] bump npm deps

---
 package.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/package.json b/package.json
index a4a465cb..e9e2ae98 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,13 @@
     "node": ">=0.12"
   },
   "dependencies": {
+    "browser-sync": "^2.9.7",
     "console": "^0.5.2",
+    "glob": "^5.0.15",
+    "grunt-sass": "^1.0.0",
     "lite-ready": "^1.0.3",
+    "load-grunt-tasks": "^3.3.0",
+    "minifyify": "^7.1.0",
     "swiftclick": "^1.1.5",
     "trak.js": "^0.5.2"
   },

From 1acc676cd88b37d7aabad71968e04f7859aedcf1 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 07:05:58 +0100
Subject: [PATCH 054/136] remove these unneeded imagemin plugins

- imagemin already comes with its own so these aren't needed unless you want to switch to use non-default plugins
---
 _grunt-configs/images.js | 9 ---------
 package.json             | 3 ---
 2 files changed, 12 deletions(-)

diff --git a/_grunt-configs/images.js b/_grunt-configs/images.js
index 90798225..62e4cbfe 100644
--- a/_grunt-configs/images.js
+++ b/_grunt-configs/images.js
@@ -1,7 +1,3 @@
-var mozjpeg  = require('imagemin-mozjpeg');
-var pngquant = require('imagemin-pngquant');
-var gifsicle = require('imagemin-gifsicle');
-
 module.exports.tasks = {
 
 	/**
@@ -26,11 +22,6 @@ module.exports.tasks = {
 				svgoPlugins: [
 					{ removeViewBox: false },
 					{ removeUselessStrokeAndFill: false }
-				],
-				use: [
-					mozjpeg(),
-					pngquant(),
-					gifsicle()
 				]
 			},
 			files: [{
diff --git a/package.json b/package.json
index e9e2ae98..33240b76 100644
--- a/package.json
+++ b/package.json
@@ -54,9 +54,6 @@
     "grunt-newer": "^1.1.0",
     "grunt-sass": "^1.0.0",
     "grunt-shimly": "^0.0.11",
-    "imagemin-gifsicle": "^4.1.0",
-    "imagemin-mozjpeg": "^5.1.0",
-    "imagemin-pngquant": "^4.1.0",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.1.0",
     "minifyify": "^7.0.5",

From 55af62872eab0aa71bd8be1cb247f7a36c84dae4 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 07:07:18 +0100
Subject: [PATCH 055/136] build & copy shimly to `js/standalone` so that it can
 be served by itself

---
 _grunt-configs/javascript.js | 6 +++---
 _grunt-configs/utilities.js  | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/_grunt-configs/javascript.js b/_grunt-configs/javascript.js
index f5f41de4..82d4f233 100644
--- a/_grunt-configs/javascript.js
+++ b/_grunt-configs/javascript.js
@@ -33,12 +33,12 @@ module.exports.tasks = {
 	 */
 	shimly: {
 		// things you would like to shim (an array of items from the list above)
-		shim: ['Array.forEach', 'EventListener'],
+		shim: ['EventListener', 'Element.classList'],
 
 		// output location (relative to your grunt.js file location)
-		dest: '<%=config.srcDir%>/js/helpers/shims.js',
+		dest: '<%=config.srcDir%>/js/standalone/shims.js',
 
 		// minify the output (true or false)
-		minify: false
+		minify: true
 	}
 };
diff --git a/_grunt-configs/utilities.js b/_grunt-configs/utilities.js
index 92ac2215..50d81c7e 100644
--- a/_grunt-configs/utilities.js
+++ b/_grunt-configs/utilities.js
@@ -19,6 +19,15 @@ module.exports.tasks = {
 		modernizr: {
 			src: '<%=config.srcDir%>/js/libs/modernizr.min.js',
 			dest: '<%=config.distDir%>/js/libs/modernizr.min.js'
+		},
+
+		jsStandalone: {
+			files: [{
+				expand: true,
+				cwd: '<%=config.srcDir%>/js/standalone',
+				src: ['./**/*.*'],
+				dest: '<%=config.js.distDir%>/standalone'
+			}]
 		}
 	}
 };

From b792362faffa92d6cc44537d86e278b7ebe608d3 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 07:07:39 +0100
Subject: [PATCH 056/136] update print styles based on latest from h5bp

---
 assets/src/scss/views/_print.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/assets/src/scss/views/_print.scss b/assets/src/scss/views/_print.scss
index d5263e32..90ad8085 100644
--- a/assets/src/scss/views/_print.scss
+++ b/assets/src/scss/views/_print.scss
@@ -2,9 +2,13 @@
    Print styles
    ========================================================================== */
 @media print {
-	* {
+	*,
+	*:before,
+	*:after,
+	*:first-letter,
+	*:first-line {
 		background: transparent !important;
-		color: #000 !important; /* Black prints faster: h5bp.com/s */
+		color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
 		box-shadow: none !important;
 		text-shadow: none !important;
 	}

From 59fd1900609fa5eab06b9f5df40e51b61534b941 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 17:14:26 +0100
Subject: [PATCH 057/136] add some 3rd party colour vars for Twitter, Facebook
 etc

---
 assets/src/scss/_color-palette.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss
index 1bec5edb..46d6d10b 100644
--- a/assets/src/scss/_color-palette.scss
+++ b/assets/src/scss/_color-palette.scss
@@ -43,3 +43,10 @@ $color-selection-bg           : $color-primary;
 
 // <hr> border color
 $hr-border                    : lighten(#000, 70%);
+
+// 3rd party brand colors - find more at brandcolors.net
+$color-twitter                : #55acee;
+$color-facebook               : #3b5998;
+$color-youtube                : #cd201f;
+$color-pinterest              : #bd081c;
+$color-instagram              : #3f729b;

From 28db45d18dafa807a03872d291d9dfbcee23d57e Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 17:15:59 +0100
Subject: [PATCH 058/136] update colours for social media icons

---
 assets/src/grunticon/social-facebook.svg  | 2 +-
 assets/src/grunticon/social-instagram.svg | 2 +-
 assets/src/grunticon/social-pinterest.svg | 2 +-
 assets/src/grunticon/social-twitter.svg   | 2 +-
 assets/src/grunticon/social-youtube.svg   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/src/grunticon/social-facebook.svg b/assets/src/grunticon/social-facebook.svg
index b07734dc..dcc82934 100644
--- a/assets/src/grunticon/social-facebook.svg
+++ b/assets/src/grunticon/social-facebook.svg
@@ -2,7 +2,7 @@
 <svg viewBox="0 0 268 268" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-123.000000, -112.000000)" fill="#375085">
+        <g transform="translate(-123.000000, -112.000000)" fill="#3b5998">
             <path d="M375.716,112.553 L138.284,112.553 C130.146,112.553 123.553,119.146 123.553,127.283 L123.553,364.717 C123.553,372.852 130.146,379.447 138.284,379.447 L266.109,379.447 L266.109,276.092 L231.328,276.092 L231.328,235.812 L266.109,235.812 L266.109,206.107 C266.109,171.634 287.163,152.863 317.916,152.863 C332.646,152.863 345.306,153.96 348.997,154.45 L348.997,190.476 L327.667,190.486 C310.943,190.486 307.705,198.433 307.705,210.095 L307.705,235.812 L347.591,235.812 L342.397,276.092 L307.705,276.092 L307.705,379.447 L375.716,379.447 C383.851,379.447 390.446,372.852 390.446,364.717 L390.446,127.283 C390.446,119.146 383.851,112.553 375.716,112.553"></path>
         </g>
     </g>
diff --git a/assets/src/grunticon/social-instagram.svg b/assets/src/grunticon/social-instagram.svg
index b559db10..8b35500a 100644
--- a/assets/src/grunticon/social-instagram.svg
+++ b/assets/src/grunticon/social-instagram.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 37 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g fill="#000000">
+        <g fill="#3f729b">
             <path d="M5.2,0.7 L31.7,0.7 C34.2,0.7 36.3,2.8 36.3,5.3 L36.3,31.8 C36.3,34.3 34.2,36.4 31.7,36.4 L5.2,36.4 C2.7,36.4 0.6,34.3 0.6,31.8 L0.6,5.2 C0.7,2.7 2.7,0.7 5.2,0.7 L5.2,0.7 Z M26.7,4.6 C25.8,4.6 25.1,5.3 25.1,6.2 L25.1,10 C25.1,10.9 25.8,11.6 26.7,11.6 L30.7,11.6 C31.6,11.6 32.3,10.9 32.3,10 L32.3,6.2 C32.3,5.3 31.6,4.6 30.7,4.6 L26.7,4.6 L26.7,4.6 Z M32.3,15.7 L29.2,15.7 C29.5,16.7 29.7,17.7 29.7,18.8 C29.7,24.7 24.7,29.5 18.6,29.5 C12.5,29.5 7.5,24.7 7.5,18.8 C7.5,17.7 7.7,16.7 8,15.7 L4.7,15.7 L4.7,30.8 C4.7,31.6 5.3,32.2 6.1,32.2 L31,32.2 C31.8,32.2 32.4,31.6 32.4,30.8 L32.4,15.7 L32.3,15.7 Z M18.5,11.5 C14.5,11.5 11.3,14.6 11.3,18.4 C11.3,22.2 14.5,25.3 18.5,25.3 C22.5,25.3 25.7,22.2 25.7,18.4 C25.7,14.6 22.5,11.5 18.5,11.5 L18.5,11.5 Z"></path>
         </g>
     </g>
diff --git a/assets/src/grunticon/social-pinterest.svg b/assets/src/grunticon/social-pinterest.svg
index d49127e0..2364ef12 100644
--- a/assets/src/grunticon/social-pinterest.svg
+++ b/assets/src/grunticon/social-pinterest.svg
@@ -3,7 +3,7 @@
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g >
             <path d="M274.857,137.819 C274.857,213.587 213.434,275.009 137.666,275.009 C61.898,275.009 0.476,213.587 0.476,137.819 C0.476,62.05 61.898,0.628 137.666,0.628 C213.434,0.628 274.857,62.05 274.857,137.819" fill="#FFFFFF"></path>
-            <path d="M137.507,15.849 C70.145,15.849 15.537,70.457 15.537,137.819 C15.537,189.49 47.685,233.624 93.057,251.396 C91.991,241.746 91.028,226.944 93.481,216.407 C95.696,206.89 107.783,155.78 107.783,155.78 C107.783,155.78 104.134,148.475 104.134,137.673 C104.134,120.714 113.965,108.052 126.204,108.052 C136.61,108.052 141.636,115.866 141.636,125.233 C141.636,135.698 134.974,151.344 131.535,165.842 C128.662,177.985 137.623,187.886 149.596,187.886 C171.276,187.886 187.939,165.025 187.939,132.031 C187.939,102.828 166.956,82.409 136.991,82.409 C102.287,82.409 81.917,108.44 81.917,135.34 C81.917,145.823 85.956,157.064 90.994,163.175 C91.99,164.383 92.136,165.441 91.839,166.672 C90.914,170.527 88.856,178.812 88.453,180.506 C87.921,182.739 86.684,183.212 84.374,182.137 C69.139,175.045 59.616,152.773 59.616,134.885 C59.616,96.41 87.571,61.076 140.205,61.076 C182.515,61.076 215.397,91.225 215.397,131.519 C215.397,173.556 188.893,207.385 152.107,207.385 C139.746,207.385 128.128,200.964 124.151,193.379 C124.151,193.379 118.035,216.668 116.553,222.373 C113.798,232.967 106.365,246.247 101.392,254.348 C112.805,257.882 124.933,259.788 137.507,259.788 C204.869,259.788 259.477,205.181 259.477,137.819 C259.477,70.457 204.869,15.849 137.507,15.849" fill="#AA2529"></path>
+            <path d="M137.507,15.849 C70.145,15.849 15.537,70.457 15.537,137.819 C15.537,189.49 47.685,233.624 93.057,251.396 C91.991,241.746 91.028,226.944 93.481,216.407 C95.696,206.89 107.783,155.78 107.783,155.78 C107.783,155.78 104.134,148.475 104.134,137.673 C104.134,120.714 113.965,108.052 126.204,108.052 C136.61,108.052 141.636,115.866 141.636,125.233 C141.636,135.698 134.974,151.344 131.535,165.842 C128.662,177.985 137.623,187.886 149.596,187.886 C171.276,187.886 187.939,165.025 187.939,132.031 C187.939,102.828 166.956,82.409 136.991,82.409 C102.287,82.409 81.917,108.44 81.917,135.34 C81.917,145.823 85.956,157.064 90.994,163.175 C91.99,164.383 92.136,165.441 91.839,166.672 C90.914,170.527 88.856,178.812 88.453,180.506 C87.921,182.739 86.684,183.212 84.374,182.137 C69.139,175.045 59.616,152.773 59.616,134.885 C59.616,96.41 87.571,61.076 140.205,61.076 C182.515,61.076 215.397,91.225 215.397,131.519 C215.397,173.556 188.893,207.385 152.107,207.385 C139.746,207.385 128.128,200.964 124.151,193.379 C124.151,193.379 118.035,216.668 116.553,222.373 C113.798,232.967 106.365,246.247 101.392,254.348 C112.805,257.882 124.933,259.788 137.507,259.788 C204.869,259.788 259.477,205.181 259.477,137.819 C259.477,70.457 204.869,15.849 137.507,15.849" fill="#bd081c"></path>
         </g>
     </g>
 </svg>
diff --git a/assets/src/grunticon/social-twitter.svg b/assets/src/grunticon/social-twitter.svg
index cab9d625..61191cdc 100644
--- a/assets/src/grunticon/social-twitter.svg
+++ b/assets/src/grunticon/social-twitter.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 274 223" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g fill="#5E9FCB">
+        <g fill="#55acee">
             <path d="M85.98,223 C54.305,223 24.822,213.715 0,197.801 C4.388,198.319 8.853,198.584 13.38,198.584 C39.658,198.584 63.843,189.617 83.039,174.574 C58.495,174.121 37.781,157.905 30.644,135.621 C34.068,136.276 37.582,136.627 41.196,136.627 C46.312,136.627 51.267,135.942 55.974,134.66 C30.314,129.508 10.981,106.838 10.981,79.662 C10.981,79.426 10.981,79.191 10.985,78.957 C18.548,83.158 27.196,85.681 36.391,85.972 C21.341,75.914 11.438,58.746 11.438,39.287 C11.438,29.008 14.204,19.373 19.032,11.089 C46.696,45.023 88.025,67.353 134.641,69.692 C133.685,65.587 133.188,61.306 133.188,56.91 C133.188,25.935 158.302,0.822 189.279,0.822 C205.411,0.822 219.988,7.634 230.22,18.535 C242.996,16.019 255,11.351 265.837,4.924 C261.649,18.021 252.756,29.013 241.175,35.955 C252.521,34.599 263.331,31.584 273.39,27.123 C265.87,38.371 256.36,48.25 245.402,56.158 C245.51,58.563 245.564,60.982 245.564,63.414 C245.564,137.533 189.148,223 85.98,223"></path>
         </g>
     </g>
diff --git a/assets/src/grunticon/social-youtube.svg b/assets/src/grunticon/social-youtube.svg
index 17196547..081729f9 100644
--- a/assets/src/grunticon/social-youtube.svg
+++ b/assets/src/grunticon/social-youtube.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="1022px" height="719px" viewBox="0 0 1022 719" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g fill="#D0011B">
+        <g fill="#cd201f">
             <path d="M1011.25,155.562 C1011.25,155.562 1001.27,85.173 970.642,54.176 C931.8,13.493 888.262,13.291 868.296,10.91 C725.359,0.577 510.946,0.577 510.946,0.577 L510.502,0.577 C510.502,0.577 296.094,0.577 153.152,10.91 C133.185,13.291 89.663,13.493 50.807,54.176 C20.181,85.173 10.215,155.562 10.215,155.562 C10.215,155.562 0,238.222 0,320.881 L0,398.374 C0,481.032 10.215,563.691 10.215,563.691 C10.215,563.691 20.181,634.081 50.807,665.078 C89.663,705.762 140.703,704.475 163.436,708.739 C245.153,716.575 510.725,719 510.725,719 C510.725,719 725.359,718.677 868.296,708.345 C888.262,705.963 931.8,705.762 970.642,665.078 C1001.27,634.081 1011.25,563.691 1011.25,563.691 C1011.25,563.691 1021.45,481.032 1021.45,398.374 L1021.45,320.881 C1021.45,238.222 1011.25,155.562 1011.25,155.562 Z M405.272,492.281 L405.225,205.281 L681.225,349.281 L405.272,492.281 Z"></path>
         </g>
     </g>

From e0edf9845d88278f14eea0f0f15bdafd9922a7ca Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 17:24:43 +0100
Subject: [PATCH 059/136] add breakpoint for block-grids for the `$bp-mid`
 breakpoint

---
 assets/src/scss/components/_block-grids.scss | 23 ++++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
index 225f7982..6518bb15 100644
--- a/assets/src/scss/components/_block-grids.scss
+++ b/assets/src/scss/components/_block-grids.scss
@@ -12,14 +12,14 @@
  *     <li></li>
  * </ul>
  */
- 
+
  @mixin blockGridHelper($mutator){
 	&[class*="up--#{$mutator}"] > li {
 		display: block;
 		height: auto;
 		float: left;
 	}
-	
+
 	@for $i from 1 to $grid-column-count + 1 {
 		&.l-blockGrid--#{$i}up--#{$mutator} > li {
 			width: percentage(1 / $i);
@@ -29,7 +29,7 @@
 		}
 	}
 }
- 
+
 .l-blockGrid {
 	display: block;
 	list-style-type: none;
@@ -64,12 +64,17 @@
 			}
 		}
 	}
-	
+
+	// Wide block-grid
+	@include respond-min($bp-mid) {
+		@include blockGridHelper('mid');
+	}
+
 	// Wide block-grid
 	@include respond-min($bp-wide) {
 		@include blockGridHelper('wide');
 	}
-	
+
 	// Huge block-grid
 	@include respond-min($bp-huge) {
 		@include blockGridHelper('huge');
@@ -81,10 +86,10 @@
  * Guttered block grid
  */
 .l-blockGrid--guttered {
-    margin-left: -#{$grid-gutter-width}px;
+	margin-left: -#{$grid-gutter-width}px;
 
-    > li {
-        padding-left: #{$grid-gutter-width}px;
+	> li {
+		padding-left: #{$grid-gutter-width}px;
 		padding-bottom: #{$grid-gutter-width}px;
-    }
+	}
 }
\ No newline at end of file

From c9d1cb54d98a7002ff5b7757f2fb6d98036d8c78 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 18:35:01 +0100
Subject: [PATCH 060/136] add jscsrc using AirBNB settings

---
 .jscsrc | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .jscsrc

diff --git a/.jscsrc b/.jscsrc
new file mode 100644
index 00000000..a692a299
--- /dev/null
+++ b/.jscsrc
@@ -0,0 +1,5 @@
+{
+	"preset": "airbnb",
+	"validateIndentation": "\t",
+	"disallowTrailingComma": false
+}
\ No newline at end of file

From 934b48af78644f87a5d593a2152f95eac7ce0d60 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 18:35:12 +0100
Subject: [PATCH 061/136] update gitignore

---
 .gitignore | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 4e69455d..771fdea0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,6 @@ assets/temp/**/*
 
 
 # CSS & Sass
-# css/*.css
 .sass-cache/
 *.scssc
 
@@ -24,6 +23,13 @@ logs
 *.log
 
 
+# PHP
+.idea
+
+
+# .NET
+
+
 # Tooling
 # Generated test files
 testing/

From a6334f4d8ccb43ba9021d940d1999e32a5ec949e Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 18:35:33 +0100
Subject: [PATCH 062/136] Remove htaccess because Kickoff is platform agnostic

---
 .htaccess | 984 ------------------------------------------------------
 1 file changed, 984 deletions(-)
 delete mode 100644 .htaccess

diff --git a/.htaccess b/.htaccess
deleted file mode 100644
index 446a926a..00000000
--- a/.htaccess
+++ /dev/null
@@ -1,984 +0,0 @@
-# Apache Server Configs v2.14.0 | MIT License
-# https://github.com/h5bp/server-configs-apache
-
-# (!) Using `.htaccess` files slows down Apache, therefore, if you have
-# access to the main server configuration file (which is usually called
-# `httpd.conf`), you should add this logic there.
-#
-# https://httpd.apache.org/docs/current/howto/htaccess.html.
-
-# ######################################################################
-# # CROSS-ORIGIN                                                       #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Cross-origin requests                                              |
-# ----------------------------------------------------------------------
-
-# Allow cross-origin requests.
-#
-# https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
-# http://enable-cors.org/
-# http://www.w3.org/TR/cors/
-
-# <IfModule mod_headers.c>
-#     Header set Access-Control-Allow-Origin "*"
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | Cross-origin images                                                |
-# ----------------------------------------------------------------------
-
-# Send the CORS header for images when browsers request it.
-#
-# https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
-# https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
-
-<IfModule mod_setenvif.c>
-    <IfModule mod_headers.c>
-        <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
-            SetEnvIf Origin ":" IS_CORS
-            Header set Access-Control-Allow-Origin "*" env=IS_CORS
-        </FilesMatch>
-    </IfModule>
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Cross-origin web fonts                                             |
-# ----------------------------------------------------------------------
-
-# Allow cross-origin access to web fonts.
-
-<IfModule mod_headers.c>
-    <FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
-        Header set Access-Control-Allow-Origin "*"
-    </FilesMatch>
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Cross-origin resource timing                                       |
-# ----------------------------------------------------------------------
-
-# Allow cross-origin access to the timing information for all resources.
-#
-# If a resource isn't served with a `Timing-Allow-Origin` header that
-# would allow its timing information to be shared with the document,
-# some of the attributes of the `PerformanceResourceTiming` object will
-# be set to zero.
-#
-# http://www.w3.org/TR/resource-timing/
-# http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/
-
-# <IfModule mod_headers.c>
-#     Header set Timing-Allow-Origin: "*"
-# </IfModule>
-
-
-# ######################################################################
-# # ERRORS                                                             #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Custom error messages/pages                                        |
-# ----------------------------------------------------------------------
-
-# Customize what Apache returns to the client in case of an error.
-# https://httpd.apache.org/docs/current/mod/core.html#errordocument
-
-ErrorDocument 404 /404.html
-
-# ----------------------------------------------------------------------
-# | Error prevention                                                   |
-# ----------------------------------------------------------------------
-
-# Disable the pattern matching based on filenames.
-#
-# This setting prevents Apache from returning a 404 error as the result
-# of a rewrite when the directory with the same name does not exist.
-#
-# https://httpd.apache.org/docs/current/content-negotiation.html#multiviews
-
-Options -MultiViews
-
-
-# ######################################################################
-# # INTERNET EXPLORER                                                  #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Document modes                                                     |
-# ----------------------------------------------------------------------
-
-# Force Internet Explorer 8/9/10 to render pages in the highest mode
-# available in the various cases when it may not.
-#
-# https://hsivonen.fi/doctype/#ie8
-#
-# (!) Starting with Internet Explorer 11, document modes are deprecated.
-# If your business still relies on older web apps and services that were
-# designed for older versions of Internet Explorer, you might want to
-# consider enabling `Enterprise Mode` throughout your company.
-#
-# https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode
-# http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx
-
-<IfModule mod_headers.c>
-
-    Header set X-UA-Compatible "IE=edge"
-
-    # `mod_headers` cannot match based on the content-type, however,
-    # the `X-UA-Compatible` response header should be send only for
-    # HTML documents and not for the other resources.
-
-    <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-        Header unset X-UA-Compatible
-    </FilesMatch>
-
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Iframes cookies                                                    |
-# ----------------------------------------------------------------------
-
-# Allow cookies to be set from iframes in Internet Explorer.
-#
-# https://msdn.microsoft.com/en-us/library/ms537343.aspx
-# http://www.w3.org/TR/2000/CR-P3P-20001215/
-
-# <IfModule mod_headers.c>
-#     Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
-# </IfModule>
-
-
-# ######################################################################
-# # MEDIA TYPES AND CHARACTER ENCODINGS                                #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Media types                                                        |
-# ----------------------------------------------------------------------
-
-# Serve resources with the proper media types (f.k.a. MIME types).
-#
-# https://www.iana.org/assignments/media-types/media-types.xhtml
-# https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype
-
-<IfModule mod_mime.c>
-
-  # Data interchange
-
-    AddType application/atom+xml                        atom
-    AddType application/json                            json map topojson
-    AddType application/ld+json                         jsonld
-    AddType application/rss+xml                         rss
-    AddType application/vnd.geo+json                    geojson
-    AddType application/xml                             rdf xml
-
-
-  # JavaScript
-
-    # Normalize to standard type.
-    # https://tools.ietf.org/html/rfc4329#section-7.2
-
-    AddType application/javascript                      js
-
-
-  # Manifest files
-
-    AddType application/manifest+json                   webmanifest
-    AddType application/x-web-app-manifest+json         webapp
-    AddType text/cache-manifest                         appcache
-
-
-  # Media files
-
-    AddType audio/mp4                                   f4a f4b m4a
-    AddType audio/ogg                                   oga ogg opus
-    AddType image/bmp                                   bmp
-    AddType image/svg+xml                               svg svgz
-    AddType image/webp                                  webp
-    AddType video/mp4                                   f4v f4p m4v mp4
-    AddType video/ogg                                   ogv
-    AddType video/webm                                  webm
-    AddType video/x-flv                                 flv
-
-    # Serving `.ico` image files with a different media type
-    # prevents Internet Explorer from displaying then as images:
-    # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee
-
-    AddType image/x-icon                                cur ico
-
-
-  # Web fonts
-
-    AddType application/font-woff                       woff
-    AddType application/font-woff2                      woff2
-    AddType application/vnd.ms-fontobject               eot
-
-    # Browsers usually ignore the font media types and simply sniff
-    # the bytes to figure out the font type.
-    # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
-    #
-    # However, Blink and WebKit based browsers will show a warning
-    # in the console if the following font types are served with any
-    # other media types.
-
-    AddType application/x-font-ttf                      ttc ttf
-    AddType font/opentype                               otf
-
-
-  # Other
-
-    AddType application/octet-stream                    safariextz
-    AddType application/x-bb-appworld                   bbaw
-    AddType application/x-chrome-extension              crx
-    AddType application/x-opera-extension               oex
-    AddType application/x-xpinstall                     xpi
-    AddType text/vcard                                  vcard vcf
-    AddType text/vnd.rim.location.xloc                  xloc
-    AddType text/vtt                                    vtt
-    AddType text/x-component                            htc
-
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Character encodings                                                |
-# ----------------------------------------------------------------------
-
-# Serve all resources labeled as `text/html` or `text/plain`
-# with the media type `charset` parameter set to `UTF-8`.
-#
-# https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset
-
-AddDefaultCharset utf-8
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Serve the following file types with the media type `charset`
-# parameter set to `UTF-8`.
-#
-# https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset
-
-<IfModule mod_mime.c>
-    AddCharset utf-8 .atom \
-                     .bbaw \
-                     .css \
-                     .geojson \
-                     .js \
-                     .json \
-                     .jsonld \
-                     .manifest \
-                     .rdf \
-                     .rss \
-                     .topojson \
-                     .vtt \
-                     .webapp \
-                     .webmanifest \
-                     .xloc \
-                     .xml
-</IfModule>
-
-
-# ######################################################################
-# # REWRITES                                                           #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Rewrite engine                                                     |
-# ----------------------------------------------------------------------
-
-# (1) Turn on the rewrite engine (this is necessary in order for
-#     the `RewriteRule` directives to work).
-#
-#     https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine
-#
-# (2) Enable the `FollowSymLinks` option if it isn't already.
-#
-#     https://httpd.apache.org/docs/current/mod/core.html#options
-#
-# (3) If your web host doesn't allow the `FollowSymlinks` option,
-#     you need to comment it out or remove it, and then uncomment
-#     the `Options +SymLinksIfOwnerMatch` line (4), but be aware
-#     of the performance impact.
-#
-#     https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks
-#
-# (4) Some cloud hosting services will require you set `RewriteBase`.
-#
-#     https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site
-#     https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
-#
-# (5) Depending on how your server is set up, you may also need to
-#     use the `RewriteOptions` directive to enable some options for
-#     the rewrite engine.
-#
-#     https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions
-#
-# (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the
-#     appropriate schema automatically (http or https).
-
-<IfModule mod_rewrite.c>
-
-    # (1)
-    RewriteEngine On
-
-    # (2)
-    Options +FollowSymlinks
-
-    # (3)
-    # Options +SymLinksIfOwnerMatch
-
-    # (4)
-    # RewriteBase /
-
-    # (5)
-    # RewriteOptions <options>
-
-    # (6)
-    RewriteCond %{HTTPS} =on
-    RewriteRule ^ - [env=proto:https]
-    RewriteCond %{HTTPS} !=on
-    RewriteRule ^ - [env=proto:http]
-
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Forcing `https://`                                                 |
-# ----------------------------------------------------------------------
-
-# Redirect from the `http://` to the `https://` version of the URL.
-# https://wiki.apache.org/httpd/RewriteHTTPToHTTPS
-
-# <IfModule mod_rewrite.c>
-#    RewriteEngine On
-#    RewriteCond %{HTTPS} !=on
-#    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | Suppressing / Forcing the `www.` at the beginning of URLs          |
-# ----------------------------------------------------------------------
-
-# The same content should never be available under two different
-# URLs, especially not with and without `www.` at the beginning.
-# This can cause SEO problems (duplicate content), and therefore,
-# you should choose one of the alternatives and redirect the other
-# one.
-#
-# By default `Option 1` (no `www.`) is activated.
-# http://no-www.org/faq.php?q=class_b
-#
-# If you would prefer to use `Option 2`, just comment out all the
-# lines from `Option 1` and uncomment the ones from `Option 2`.
-#
-# (!) NEVER USE BOTH RULES AT THE SAME TIME!
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Option 1: rewrite www.example.com → example.com
-
-<IfModule mod_rewrite.c>
-    RewriteEngine On
-    RewriteCond %{HTTPS} !=on
-    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
-    RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]
-</IfModule>
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Option 2: rewrite example.com → www.example.com
-#
-# Be aware that the following might not be a good idea if you use "real"
-# subdomains for certain parts of your website.
-
-# <IfModule mod_rewrite.c>
-#     RewriteEngine On
-#     RewriteCond %{HTTPS} !=on
-#     RewriteCond %{HTTP_HOST} !^www\. [NC]
-#     RewriteCond %{SERVER_ADDR} !=127.0.0.1
-#     RewriteCond %{SERVER_ADDR} !=::1
-#     RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
-# </IfModule>
-
-
-# ######################################################################
-# # SECURITY                                                           #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Clickjacking                                                       |
-# ----------------------------------------------------------------------
-
-# Protect website against clickjacking.
-#
-# The example below sends the `X-Frame-Options` response header with
-# the value `DENY`, informing browsers not to display the content of
-# the web page in any frame.
-#
-# This might not be the best setting for everyone. You should read
-# about the other two possible values the `X-Frame-Options` header
-# field can have: `SAMEORIGIN` and `ALLOW-FROM`.
-# https://tools.ietf.org/html/rfc7034#section-2.1.
-#
-# Keep in mind that while you could send the `X-Frame-Options` header
-# for all of your website’s pages, this has the potential downside that
-# it forbids even non-malicious framing of your content (e.g.: when
-# users visit your website using a Google Image Search results page).
-#
-# Nonetheless, you should ensure that you send the `X-Frame-Options`
-# header for all pages that allow a user to make a state changing
-# operation (e.g: pages that contain one-click purchase links, checkout
-# or bank-transfer confirmation pages, pages that make permanent
-# configuration changes, etc.).
-#
-# Sending the `X-Frame-Options` header can also protect your website
-# against more than just clickjacking attacks:
-# https://cure53.de/xfo-clickjacking.pdf.
-#
-# https://tools.ietf.org/html/rfc7034
-# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
-# https://www.owasp.org/index.php/Clickjacking
-
-# <IfModule mod_headers.c>
-
-#     Header set X-Frame-Options "DENY"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `X-Frame-Options` response header should be send only for
-#     # HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset X-Frame-Options
-#     </FilesMatch>
-
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | Content Security Policy (CSP)                                      |
-# ----------------------------------------------------------------------
-
-# Mitigate the risk of cross-site scripting and other content-injection
-# attacks.
-#
-# This can be done by setting a `Content Security Policy` which
-# whitelists trusted sources of content for your website.
-#
-# The example header below allows ONLY scripts that are loaded from
-# the current website's origin (no inline scripts, no CDN, etc).
-# That almost certainly won't work as-is for your website!
-#
-# To make things easier, you can use an online CSP header generator
-# such as: http://cspisawesome.com/.
-#
-# http://content-security-policy.com/
-# http://www.html5rocks.com/en/tutorials/security/content-security-policy/
-# http://www.w3.org/TR/CSP11/).
-
-# <IfModule mod_headers.c>
-
-#     Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `Content-Security-Policy` response header should be send
-#     # only for HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset Content-Security-Policy
-#     </FilesMatch>
-
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | File access                                                        |
-# ----------------------------------------------------------------------
-
-# Block access to directories without a default document.
-#
-# You should leave the following uncommented, as you shouldn't allow
-# anyone to surf through every directory on your server (which may
-# includes rather private places such as the CMS's directories).
-
-<IfModule mod_autoindex.c>
-    Options -Indexes
-</IfModule>
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Block access to all hidden files and directories with the exception of
-# the visible content from within the `/.well-known/` hidden directory.
-#
-# These types of files usually contain user preferences or the preserved
-# state of an utility, and can include rather private places like, for
-# example, the `.git` or `.svn` directories.
-#
-# The `/.well-known/` directory represents the standard (RFC 5785) path
-# prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`,
-# `/.well-known/keybase.txt`), and therefore, access to its visible
-# content should not be blocked.
-#
-# https://www.mnot.net/blog/2010/04/07/well-known
-# https://tools.ietf.org/html/rfc5785
-
-<IfModule mod_rewrite.c>
-    RewriteEngine On
-    RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC]
-    RewriteCond %{SCRIPT_FILENAME} -d [OR]
-    RewriteCond %{SCRIPT_FILENAME} -f
-    RewriteRule "(^|/)\." - [F]
-</IfModule>
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Block access to files that can expose sensitive information.
-#
-# By default, block access to backup and source files that may be
-# left by some text editors and can pose a security risk when anyone
-# has access to them.
-#
-# http://feross.org/cmsploit/
-#
-# (!) Update the `<FilesMatch>` regular expression from below to
-# include any files that might end up on your production server and
-# can expose sensitive information about your website. These files may
-# include: configuration files, files that contain metadata about the
-# project (e.g.: project dependencies), build scripts, etc..
-
-<FilesMatch "(^#.*#|\.(bak|conf|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$">
-
-    # Apache < 2.3
-    <IfModule !mod_authz_core.c>
-        Order allow,deny
-        Deny from all
-        Satisfy All
-    </IfModule>
-
-    # Apache ≥ 2.3
-    <IfModule mod_authz_core.c>
-        Require all denied
-    </IfModule>
-
-</FilesMatch>
-
-# ----------------------------------------------------------------------
-# | HTTP Strict Transport Security (HSTS)                              |
-# ----------------------------------------------------------------------
-
-# Force client-side SSL redirection.
-#
-# If a user types `example.com` in their browser, even if the server
-# redirects them to the secure version of the website, that still leaves
-# a window of opportunity (the initial HTTP connection) for an attacker
-# to downgrade or redirect the request.
-#
-# The following header ensures that browser will ONLY connect to your
-# server via HTTPS, regardless of what the users type in the browser's
-# address bar.
-#
-# (!) Remove the `includeSubDomains` optional directive if the website's
-# subdomains are not using HTTPS.
-#
-# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/
-# https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1
-# http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx
-
-# <IfModule mod_headers.c>
-#     Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains"
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | Reducing MIME type security risks                                  |
-# ----------------------------------------------------------------------
-
-# Prevent some browsers from MIME-sniffing the response.
-#
-# This reduces exposure to drive-by download attacks and cross-origin
-# data leaks, and should be left uncommented, especially if the server
-# is serving user-uploaded content or content that could potentially be
-# treated as executable by the browser.
-#
-# http://www.slideshare.net/hasegawayosuke/owasp-hasegawa
-# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx
-# https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx
-# https://mimesniff.spec.whatwg.org/
-
-<IfModule mod_headers.c>
-    Header set X-Content-Type-Options "nosniff"
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Reflected Cross-Site Scripting (XSS) attacks                       |
-# ----------------------------------------------------------------------
-
-# (1) Try to re-enable the cross-site scripting (XSS) filter built
-#     into most web browsers.
-#
-#     The filter is usually enabled by default, but in some cases it
-#     may be disabled by the user. However, in Internet Explorer for
-#     example, it can be re-enabled just by sending the
-#     `X-XSS-Protection` header with the value of `1`.
-#
-# (2) Prevent web browsers from rendering the web page if a potential
-#     reflected (a.k.a non-persistent) XSS attack is detected by the
-#     filter.
-#
-#     By default, if the filter is enabled and browsers detect a
-#     reflected XSS attack, they will attempt to block the attack
-#     by making the smallest possible modifications to the returned
-#     web page.
-#
-#     Unfortunately, in some browsers (e.g.: Internet Explorer),
-#     this default behavior may allow the XSS filter to be exploited,
-#     thereby, it's better to inform browsers to prevent the rendering
-#     of the page altogether, instead of attempting to modify it.
-#
-#     https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities
-#
-# (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that
-#     you are taking all possible measures to prevent XSS attacks, the
-#     most obvious being: validating and sanitizing your website's inputs.
-#
-# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx
-# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx
-# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
-
-# <IfModule mod_headers.c>
-
-#     #                           (1)    (2)
-#     Header set X-XSS-Protection "1; mode=block"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `X-XSS-Protection` response header should be send only for
-#     # HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset X-XSS-Protection
-#     </FilesMatch>
-
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | Server-side technology information                                 |
-# ----------------------------------------------------------------------
-
-# Remove the `X-Powered-By` response header that:
-#
-#  * is set by some frameworks and server-side languages
-#    (e.g.: ASP.NET, PHP), and its value contains information
-#    about them (e.g.: their name, version number)
-#
-#  * doesn't provide any value as far as users are concern,
-#    and in some cases, the information provided by it can
-#    be used by attackers
-#
-# (!) If you can, you should disable the `X-Powered-By` header from the
-# language / framework level (e.g.: for PHP, you can do that by setting
-# `expose_php = off` in `php.ini`)
-#
-# https://php.net/manual/en/ini.core.php#ini.expose-php
-
-<IfModule mod_headers.c>
-    Header unset X-Powered-By
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Server software information                                        |
-# ----------------------------------------------------------------------
-
-# Prevent Apache from adding a trailing footer line containing
-# information about the server to the server-generated documents
-# (e.g.: error messages, directory listings, etc.)
-#
-# https://httpd.apache.org/docs/current/mod/core.html#serversignature
-
-ServerSignature Off
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Prevent Apache from sending in the `Server` response header its
-# exact version number, the description of the generic OS-type or
-# information about its compiled-in modules.
-#
-# (!) The `ServerTokens` directive will only work in the main server
-# configuration file, so don't try to enable it in the `.htaccess` file!
-#
-# https://httpd.apache.org/docs/current/mod/core.html#servertokens
-
-#ServerTokens Prod
-
-
-# ######################################################################
-# # WEB PERFORMANCE                                                    #
-# ######################################################################
-
-# ----------------------------------------------------------------------
-# | Compression                                                        |
-# ----------------------------------------------------------------------
-
-<IfModule mod_deflate.c>
-
-    # Force compression for mangled `Accept-Encoding` request headers
-    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
-
-    <IfModule mod_setenvif.c>
-        <IfModule mod_headers.c>
-            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
-            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
-        </IfModule>
-    </IfModule>
-
-    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-    # Compress all output labeled with one of the following media types.
-    #
-    # (!) For Apache versions below version 2.3.7 you don't need to
-    # enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
-    # and `</IfModule>` lines as `AddOutputFilterByType` is still in
-    # the core directives.
-    #
-    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype
-
-    <IfModule mod_filter.c>
-        AddOutputFilterByType DEFLATE "application/atom+xml" \
-                                      "application/javascript" \
-                                      "application/json" \
-                                      "application/ld+json" \
-                                      "application/manifest+json" \
-                                      "application/rdf+xml" \
-                                      "application/rss+xml" \
-                                      "application/schema+json" \
-                                      "application/vnd.geo+json" \
-                                      "application/vnd.ms-fontobject" \
-                                      "application/x-font-ttf" \
-                                      "application/x-javascript" \
-                                      "application/x-web-app-manifest+json" \
-                                      "application/xhtml+xml" \
-                                      "application/xml" \
-                                      "font/eot" \
-                                      "font/opentype" \
-                                      "image/bmp" \
-                                      "image/svg+xml" \
-                                      "image/vnd.microsoft.icon" \
-                                      "image/x-icon" \
-                                      "text/cache-manifest" \
-                                      "text/css" \
-                                      "text/html" \
-                                      "text/javascript" \
-                                      "text/plain" \
-                                      "text/vcard" \
-                                      "text/vnd.rim.location.xloc" \
-                                      "text/vtt" \
-                                      "text/x-component" \
-                                      "text/x-cross-domain-policy" \
-                                      "text/xml"
-
-    </IfModule>
-
-    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-    # Map the following filename extensions to the specified
-    # encoding type in order to make Apache serve the file types
-    # with the appropriate `Content-Encoding` response header
-    # (do note that this will NOT make Apache compress them!).
-    #
-    # If these files types would be served without an appropriate
-    # `Content-Enable` response header, client applications (e.g.:
-    # browsers) wouldn't know that they first need to uncompress
-    # the response, and thus, wouldn't be able to understand the
-    # content.
-    #
-    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding
-
-    <IfModule mod_mime.c>
-        AddEncoding gzip              svgz
-    </IfModule>
-
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | Content transformation                                             |
-# ----------------------------------------------------------------------
-
-# Prevent intermediate caches or proxies (e.g.: such as the ones
-# used by mobile network providers) from modifying the website's
-# content.
-#
-# https://tools.ietf.org/html/rfc2616#section-14.9.5
-#
-# (!) If you are using `mod_pagespeed`, please note that setting
-# the `Cache-Control: no-transform` response header will prevent
-# `PageSpeed` from rewriting `HTML` files, and, if the
-# `ModPagespeedDisableRewriteOnNoTransform` directive isn't set
-# to `off`, also from rewriting other resources.
-#
-# https://developers.google.com/speed/pagespeed/module/configuration#notransform
-
-# <IfModule mod_headers.c>
-#     Header merge Cache-Control "no-transform"
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | ETags                                                              |
-# ----------------------------------------------------------------------
-
-# Remove `ETags` as resources are sent with far-future expires headers.
-#
-# https://developer.yahoo.com/performance/rules.html#etags
-# https://tools.ietf.org/html/rfc7232#section-2.3
-
-# `FileETag None` doesn't work in all cases.
-<IfModule mod_headers.c>
-    Header unset ETag
-</IfModule>
-
-FileETag None
-
-# ----------------------------------------------------------------------
-# | Expires headers                                                    |
-# ----------------------------------------------------------------------
-
-# Serve resources with far-future expires headers.
-#
-# (!) If you don't control versioning with filename-based
-# cache busting, you should consider lowering the cache times
-# to something like one week.
-#
-# https://httpd.apache.org/docs/current/mod/mod_expires.html
-
-<IfModule mod_expires.c>
-
-    ExpiresActive on
-    ExpiresDefault                                      "access plus 1 month"
-
-  # CSS
-
-    ExpiresByType text/css                              "access plus 1 year"
-
-
-  # Data interchange
-
-    ExpiresByType application/atom+xml                  "access plus 1 hour"
-    ExpiresByType application/rdf+xml                   "access plus 1 hour"
-    ExpiresByType application/rss+xml                   "access plus 1 hour"
-
-    ExpiresByType application/json                      "access plus 0 seconds"
-    ExpiresByType application/ld+json                   "access plus 0 seconds"
-    ExpiresByType application/schema+json               "access plus 0 seconds"
-    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
-    ExpiresByType application/xml                       "access plus 0 seconds"
-    ExpiresByType text/xml                              "access plus 0 seconds"
-
-
-  # Favicon (cannot be renamed!) and cursor images
-
-    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
-    ExpiresByType image/x-icon                          "access plus 1 week"
-
-  # HTML
-
-    ExpiresByType text/html                             "access plus 0 seconds"
-
-
-  # JavaScript
-
-    ExpiresByType application/javascript                "access plus 1 year"
-    ExpiresByType application/x-javascript              "access plus 1 year"
-    ExpiresByType text/javascript                       "access plus 1 year"
-
-
-  # Manifest files
-
-    ExpiresByType application/manifest+json             "access plus 1 week"
-    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
-    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
-
-
-  # Media files
-
-    ExpiresByType audio/ogg                             "access plus 1 month"
-    ExpiresByType image/bmp                             "access plus 1 month"
-    ExpiresByType image/gif                             "access plus 1 month"
-    ExpiresByType image/jpeg                            "access plus 1 month"
-    ExpiresByType image/png                             "access plus 1 month"
-    ExpiresByType image/svg+xml                         "access plus 1 month"
-    ExpiresByType image/webp                            "access plus 1 month"
-    ExpiresByType video/mp4                             "access plus 1 month"
-    ExpiresByType video/ogg                             "access plus 1 month"
-    ExpiresByType video/webm                            "access plus 1 month"
-
-
-  # Web fonts
-
-    # Embedded OpenType (EOT)
-    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
-    ExpiresByType font/eot                              "access plus 1 month"
-
-    # OpenType
-    ExpiresByType font/opentype                         "access plus 1 month"
-
-    # TrueType
-    ExpiresByType application/x-font-ttf                "access plus 1 month"
-
-    # Web Open Font Format (WOFF) 1.0
-    ExpiresByType application/font-woff                 "access plus 1 month"
-    ExpiresByType application/x-font-woff               "access plus 1 month"
-    ExpiresByType font/woff                             "access plus 1 month"
-
-    # Web Open Font Format (WOFF) 2.0
-    ExpiresByType application/font-woff2                "access plus 1 month"
-
-
-  # Other
-
-    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
-
-</IfModule>
-
-# ----------------------------------------------------------------------
-# | File concatenation                                                 |
-# ----------------------------------------------------------------------
-
-# Allow concatenation from within specific files.
-#
-# e.g.:
-#
-#   If you have the following lines in a file called, for
-#   example, `main.combined.js`:
-#
-#       <!--#include file="js/jquery.js" -->
-#       <!--#include file="js/jquery.timer.js" -->
-#
-#   Apache will replace those lines with the content of the
-#   specified files.
-
-# <IfModule mod_include.c>
-#     <FilesMatch "\.combined\.js$">
-#         Options +Includes
-#         AddOutputFilterByType INCLUDES application/javascript \
-#                                        application/x-javascript \
-#                                        text/javascript
-#         SetOutputFilter INCLUDES
-#     </FilesMatch>
-#     <FilesMatch "\.combined\.css$">
-#         Options +Includes
-#         AddOutputFilterByType INCLUDES text/css
-#         SetOutputFilter INCLUDES
-#     </FilesMatch>
-# </IfModule>
-
-# ----------------------------------------------------------------------
-# | Filename-based cache busting                                       |
-# ----------------------------------------------------------------------
-
-# If you're not using a build process to manage your filename version
-# revving, you might want to consider enabling the following directives
-# to route all requests such as `/style.12345.css` to `/style.css`.
-#
-# To understand why this is important and even a better solution than
-# using something like `*.css?v231`, please see:
-# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
-
-# <IfModule mod_rewrite.c>
-#     RewriteEngine On
-#     RewriteCond %{REQUEST_FILENAME} !-f
-#     RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
-# </IfModule>

From c6516d401b9ca7f4c299d45bae402ac9936eaadf Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 19:40:27 +0100
Subject: [PATCH 063/136] update browser-sync dep

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a4a465cb..3ad92a77 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "opn": "^3.0.2"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.8.2",
+    "browser-sync": "^2.9.7",
     "grunt-browser-sync": "^2.1.3",
     "grunt-contrib-watch": "^0.6.1"
   },

From 5384f816f0f77b3743fad41700860b2bee6aa0f5 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 19:41:46 +0100
Subject: [PATCH 064/136] improves Browsersync

- notification popup has been moved to the bottom of the page
- added a notofication message when Sass start compiling
- removed some duplicated options in BS options
---
 Gruntfile.js             |  2 ++
 _grunt-configs/server.js | 23 +++++++++++++++++++----
 _grunt-configs/watch.js  | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index e292e127..4f2a2e36 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -168,8 +168,10 @@ module.exports = function (grunt) {
 
 	// Compile CSS
 	grunt.registerTask('compileCSS', [
+		'bsNotify:sassStart',
 		'sass',
 		'autoprefixer',
+		'bsReload:css',
 		'clean:tempCSS'
 	]);
 };
diff --git a/_grunt-configs/server.js b/_grunt-configs/server.js
index 6e5de2e5..621cbb6f 100644
--- a/_grunt-configs/server.js
+++ b/_grunt-configs/server.js
@@ -6,15 +6,31 @@ module.exports.tasks = {
 	 * http://www.browsersync.io/docs/grunt/
 	 */
 	browserSync: {
+		options: {
+			watchTask: true,
+			notify: {
+				styles: [
+					'pointer-events: none',
+					'position: fixed',
+					'bottom: 0',
+					'left: 0',
+					'right: 0',
+					'text-align: center',
+					'background-color: #181830',
+					'color: #fff',
+					'padding: 15px'
+				]
+			}
+		},
+
 		serve: {
 			bsFiles: {
 				src: [
-					'<%=config.distDir%>/**/*.*',
+					'<%=config.distDir%>/{js,img}/*.*',
 					'**/*.html'
 				]
 			},
 			options: {
-				watchTask: true,
 				server: './'
 			}
 		},
@@ -22,12 +38,11 @@ module.exports.tasks = {
 		styleguide: {
 			bsFiles: {
 				src: [
-					'<%=config.distDir%>/**/*.*',
+					'<%=config.distDir%>/{js,img}/*.*',
 					'*.html'
 				]
 			},
 			options: {
-				watchTask: true,
 				server: {
 					baseDir: './',
 					index: 'styleguide/index.html'
diff --git a/_grunt-configs/watch.js b/_grunt-configs/watch.js
index b081c1ef..6623d8c6 100644
--- a/_grunt-configs/watch.js
+++ b/_grunt-configs/watch.js
@@ -34,5 +34,22 @@ module.exports.tasks = {
 				reload: true
 			}
 		}
+	},
+
+	// Browsersync reload
+	bsReload: {
+		css: {
+			reload: "<%=config.distDir%>/css/*.css"
+		},
+		all: {
+			reload: true
+		}
+	},
+
+	// Browsersync notify
+	bsNotify: {
+		sassStart: {
+			notify: "Please wait, compiling Sass!"
+		}
 	}
 };

From 52cff285da45e213890dba6eb5aafa84dcff3a64 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 30 Sep 2015 20:00:50 +0100
Subject: [PATCH 065/136] change to single quotes

---
 _grunt-configs/watch.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_grunt-configs/watch.js b/_grunt-configs/watch.js
index 6623d8c6..a1e937c0 100644
--- a/_grunt-configs/watch.js
+++ b/_grunt-configs/watch.js
@@ -39,7 +39,7 @@ module.exports.tasks = {
 	// Browsersync reload
 	bsReload: {
 		css: {
-			reload: "<%=config.distDir%>/css/*.css"
+			reload: '<%=config.distDir%>/css/*.css'
 		},
 		all: {
 			reload: true
@@ -49,7 +49,7 @@ module.exports.tasks = {
 	// Browsersync notify
 	bsNotify: {
 		sassStart: {
-			notify: "Please wait, compiling Sass!"
+			notify: 'Please wait, compiling Sass!'
 		}
 	}
 };

From 2a50a360a874756598c835b2daff2c751f4a3fab Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sat, 3 Oct 2015 13:46:49 +0100
Subject: [PATCH 066/136] update npm deps

---
 package.json | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 33240b76..08989894 100644
--- a/package.json
+++ b/package.json
@@ -30,18 +30,13 @@
     "node": ">=0.12"
   },
   "dependencies": {
-    "browser-sync": "^2.9.7",
     "console": "^0.5.2",
-    "glob": "^5.0.15",
-    "grunt-sass": "^1.0.0",
     "lite-ready": "^1.0.3",
-    "load-grunt-tasks": "^3.3.0",
-    "minifyify": "^7.1.0",
     "swiftclick": "^1.1.5",
     "trak.js": "^0.5.2"
   },
   "devDependencies": {
-    "glob": "^5.0.5",
+    "glob": "^5.0.15",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^3.0.0",
     "grunt-browserify": "^4.0.0",
@@ -55,19 +50,18 @@
     "grunt-sass": "^1.0.0",
     "grunt-shimly": "^0.0.11",
     "load-grunt-configs": "^0.4.3",
-    "load-grunt-tasks": "^3.1.0",
-    "minifyify": "^7.0.5",
+    "load-grunt-tasks": "^3.3.0",
+    "minifyify": "^7.1.0",
     "opn": "^3.0.2"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.8.2",
+    "browser-sync": "^2.9.7",
     "grunt-browser-sync": "^2.1.3",
     "grunt-contrib-watch": "^0.6.1"
   },
   "keywords": [],
   "scripts": {
     "test": "grunt travis --verbose",
-
     "prestart": "npm install -g grunt-cli && npm install",
     "start": "grunt start"
   }

From d553edf0c6255c82e548980d3e3a3a0dc7aeb1e8 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 21:59:04 +0000
Subject: [PATCH 067/136] add grunt-filesizegzip to show file size and gzipped
 file size on save

- has been added to the `watch:css` task at the moment
---
 _grunt-configs/utilities.js | 12 +++++++++++-
 _grunt-configs/watch.js     |  3 ++-
 package.json                |  1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/_grunt-configs/utilities.js b/_grunt-configs/utilities.js
index 50d81c7e..1804dea1 100644
--- a/_grunt-configs/utilities.js
+++ b/_grunt-configs/utilities.js
@@ -29,5 +29,15 @@ module.exports.tasks = {
 				dest: '<%=config.js.distDir%>/standalone'
 			}]
 		}
-	}
+	},
+
+	filesizegzip: {
+		js: {
+			src: '<%=config.js.distDir%><%=config.js.distFile%>'
+		},
+
+		css: {
+			src: '<%=config.css.distDir%>/<%=config.css.distFile%>.css'
+		}
+	},
 };
diff --git a/_grunt-configs/watch.js b/_grunt-configs/watch.js
index a1e937c0..c33a54aa 100644
--- a/_grunt-configs/watch.js
+++ b/_grunt-configs/watch.js
@@ -14,7 +14,8 @@ module.exports.tasks = {
 		scss: {
 			files: ['<%=config.css.scssDir%>/**/*.scss'],
 			tasks: [
-				'compileCSS'
+				'compileCSS',
+				'filesizegzip:css'
 			]
 		},
 
diff --git a/package.json b/package.json
index 08989894..c6143800 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-imagemin": "^0.9.4",
     "grunt-csso": "^0.7.1",
+    "grunt-filesizegzip": "^0.2.0",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",

From 64d39d137781ebc5cf0bee371ba98fa76c417f09 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 22:00:02 +0000
Subject: [PATCH 068/136] reorganise this file

---
 package.json | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c6143800..6705c5b5 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "trak.js": "^0.5.2"
   },
   "devDependencies": {
-    "glob": "^5.0.15",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^3.0.0",
     "grunt-browserify": "^4.0.0",
@@ -44,7 +43,6 @@
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-imagemin": "^0.9.4",
     "grunt-csso": "^0.7.1",
-    "grunt-filesizegzip": "^0.2.0",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",
@@ -52,13 +50,14 @@
     "grunt-shimly": "^0.0.11",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.3.0",
-    "minifyify": "^7.1.0",
-    "opn": "^3.0.2"
+    "minifyify": "^7.1.0"
   },
   "optionalDependencies": {
     "browser-sync": "^2.9.7",
     "grunt-browser-sync": "^2.1.3",
-    "grunt-contrib-watch": "^0.6.1"
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-filesizegzip": "^0.2.0",
+    "opn": "^3.0.2"
   },
   "keywords": [],
   "scripts": {

From 3a64ccaf08ef05842a72f8ec96413d460e2519a3 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 22:02:17 +0000
Subject: [PATCH 069/136] move shims file

---
 assets/src/js/helpers/shims.js    | 175 ------------------------------
 assets/src/js/standalone/shims.js |   5 +
 2 files changed, 5 insertions(+), 175 deletions(-)
 delete mode 100644 assets/src/js/helpers/shims.js
 create mode 100644 assets/src/js/standalone/shims.js

diff --git a/assets/src/js/helpers/shims.js b/assets/src/js/helpers/shims.js
deleted file mode 100644
index 994f4762..00000000
--- a/assets/src/js/helpers/shims.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/*! 
-Included shims: Array.forEach,EventListener
-*/
-
-// Production steps of ECMA-262, Edition 5, 15.4.4.18
-// Reference: http://es5.github.io/#x15.4.4.18
-if (!Array.prototype.forEach) {
-    Array.prototype.forEach = function(e, t) {
-        var n, r;
-        if (this == null) {
-            throw new TypeError(" this is null or not defined");
-        }
-        // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
-        var a = Object(this);
-        // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
-        // 3. Let len be ToUint32(lenValue).
-        var i = a.length >>> 0;
-        // 4. If IsCallable(callback) is false, throw a TypeError exception.
-        // See: http://es5.github.com/#x9.11
-        if (typeof e !== "function") {
-            throw new TypeError(e + " is not a function");
-        }
-        // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
-        if (arguments.length > 1) {
-            n = t;
-        }
-        // 6. Let k be 0
-        r = 0;
-        // 7. Repeat, while k < len
-        while (r < i) {
-            var o;
-            // a. Let Pk be ToString(k).
-            //   This is implicit for LHS operands of the in operator
-            // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
-            //   This step can be combined with c
-            // c. If kPresent is true, then
-            if (r in a) {
-                // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
-                o = a[r];
-                // ii. Call the Call internal method of callback with T as the this value and
-                // argument list containing kValue, k, and O.
-                e.call(n, o, r, a);
-            }
-            // d. Increase k by 1.
-            r++;
-        }
-    };
-}
-
-// EventListener | CC0 | github.com/jonathantneal/EventListener
-this.Element && Element.prototype.attachEvent && !Element.prototype.addEventListener && function() {
-    function e(e, t) {
-        Window.prototype[e] = HTMLDocument.prototype[e] = Element.prototype[e] = t;
-    }
-    // add
-    e("addEventListener", function(e, t) {
-        var n = this, r = n.addEventListener.listeners = n.addEventListener.listeners || {}, a = r[e] = r[e] || [];
-        // if no events exist, attach the listener
-        if (!a.length) {
-            n.attachEvent("on" + e, a.event = function(e) {
-                var t = n.document && n.document.documentElement || n.documentElement || {
-                    scrollLeft: 0,
-                    scrollTop: 0
-                };
-                // polyfill w3c properties and methods
-                e.currentTarget = n;
-                e.pageX = e.clientX + t.scrollLeft;
-                e.pageY = e.clientY + t.scrollTop;
-                e.preventDefault = function() {
-                    e.returnValue = false;
-                };
-                e.relatedTarget = e.fromElement || null;
-                e.stopImmediatePropagation = function() {
-                    l = false;
-                    e.cancelBubble = true;
-                };
-                e.stopPropagation = function() {
-                    e.cancelBubble = true;
-                };
-                e.target = e.srcElement || n;
-                e.timeStamp = +new Date();
-                // create an cached list of the master events list (to protect this loop from breaking when an event is removed)
-                for (var r = 0, i = [].concat(a), o, l = true; l && (o = i[r]); ++r) {
-                    // check to see if the cached event still exists in the master events list
-                    for (var c = 0, s; s = a[c]; ++c) {
-                        if (s == o) {
-                            s.call(n, e);
-                            break;
-                        }
-                    }
-                }
-            });
-        }
-        // add the event to the master event list
-        a.push(t);
-    });
-    // remove
-    e("removeEventListener", function(e, t) {
-        var n = this, r = n.addEventListener.listeners = n.addEventListener.listeners || {}, a = r[e] = r[e] || [];
-        // remove the newest matching event from the master event list
-        for (var i = a.length - 1, o; o = a[i]; --i) {
-            if (o == t) {
-                a.splice(i, 1);
-                break;
-            }
-        }
-        // if no events exist, detach the listener
-        if (!a.length && a.event) {
-            n.detachEvent("on" + e, a.event);
-        }
-    });
-    // dispatch
-    e("dispatchEvent", function(e) {
-        var t = this, n = e.type, r = t.addEventListener.listeners = t.addEventListener.listeners || {}, a = r[n] = r[n] || [];
-        try {
-            return t.fireEvent("on" + n, e);
-        } catch (i) {
-            if (a.event) {
-                a.event(e);
-            }
-            return;
-        }
-    });
-    // CustomEvent
-    Object.defineProperty(Window.prototype, "CustomEvent", {
-        get: function() {
-            var e = this;
-            return function t(n, r) {
-                var a = e.document.createEventObject(), i;
-                a.type = n;
-                for (i in r) {
-                    if (i == "cancelable") {
-                        a.returnValue = !r.cancelable;
-                    } else if (i == "bubbles") {
-                        a.cancelBubble = !r.bubbles;
-                    } else if (i == "detail") {
-                        a.detail = r.detail;
-                    }
-                }
-                return a;
-            };
-        }
-    });
-    // ready
-    function t(e) {
-        if (t.interval && document.body) {
-            t.interval = clearInterval(t.interval);
-            document.dispatchEvent(new CustomEvent("DOMContentLoaded"));
-        }
-    }
-    t.interval = setInterval(t, 1);
-    window.addEventListener("load", t);
-}();
-
-!this.CustomEvent && function() {
-    // CustomEvent for browsers which don't natively support the Constructor method
-    window.CustomEvent = function e(t, n) {
-        var r;
-        n = n || {
-            bubbles: false,
-            cancelable: false,
-            detail: undefined
-        };
-        try {
-            r = document.createEvent("CustomEvent");
-            r.initCustomEvent(t, n.bubbles, n.cancelable, n.detail);
-        } catch (a) {
-            // for browsers which don't support CustomEvent at all, we use a regular event instead
-            r = document.createEvent("Event");
-            r.initEvent(t, n.bubbles, n.cancelable);
-            r.detail = n.detail;
-        }
-        return r;
-    };
-}();
\ No newline at end of file
diff --git a/assets/src/js/standalone/shims.js b/assets/src/js/standalone/shims.js
new file mode 100644
index 00000000..e16b86c4
--- /dev/null
+++ b/assets/src/js/standalone/shims.js
@@ -0,0 +1,5 @@
+/*! 
+Included shims: EventListener,Element.classList
+*/
+
+this.Element&&Element.prototype.attachEvent&&!Element.prototype.addEventListener&&function(){function e(e,t){Window.prototype[e]=HTMLDocument.prototype[e]=Element.prototype[e]=t}function t(e){t.interval&&document.body&&(t.interval=clearInterval(t.interval),document.dispatchEvent(new CustomEvent("DOMContentLoaded")))}e("addEventListener",function(e,t){var n=this,i=n.addEventListener.listeners=n.addEventListener.listeners||{},r=i[e]=i[e]||[];r.length||n.attachEvent("on"+e,r.event=function(e){var t=n.document&&n.document.documentElement||n.documentElement||{scrollLeft:0,scrollTop:0};e.currentTarget=n,e.pageX=e.clientX+t.scrollLeft,e.pageY=e.clientY+t.scrollTop,e.preventDefault=function(){e.returnValue=!1},e.relatedTarget=e.fromElement||null,e.stopImmediatePropagation=function(){s=!1,e.cancelBubble=!0},e.stopPropagation=function(){e.cancelBubble=!0},e.target=e.srcElement||n,e.timeStamp=+new Date;for(var i,a=0,o=[].concat(r),s=!0;s&&(i=o[a]);++a)for(var l,c=0;l=r[c];++c)if(l==i){l.call(n,e);break}}),r.push(t)}),e("removeEventListener",function(e,t){for(var n,i=this,r=i.addEventListener.listeners=i.addEventListener.listeners||{},a=r[e]=r[e]||[],o=a.length-1;n=a[o];--o)if(n==t){a.splice(o,1);break}!a.length&&a.event&&i.detachEvent("on"+e,a.event)}),e("dispatchEvent",function(e){var t=this,n=e.type,i=t.addEventListener.listeners=t.addEventListener.listeners||{},r=i[n]=i[n]||[];try{return t.fireEvent("on"+n,e)}catch(a){return void(r.event&&r.event(e))}}),Object.defineProperty(Window.prototype,"CustomEvent",{get:function(){var e=this;return function(t,n){var i,r=e.document.createEventObject();r.type=t;for(i in n)"cancelable"==i?r.returnValue=!n.cancelable:"bubbles"==i?r.cancelBubble=!n.bubbles:"detail"==i&&(r.detail=n.detail);return r}}}),t.interval=setInterval(t,1),window.addEventListener("load",t)}(),!this.CustomEvent&&function(){window.CustomEvent=function(e,t){var n;t=t||{bubbles:!1,cancelable:!1,detail:void 0};try{n=document.createEvent("CustomEvent"),n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail)}catch(i){n=document.createEvent("Event"),n.initEvent(e,t.bubbles,t.cancelable),n.detail=t.detail}return n}}(),"document"in self&&!("classList"in document.createElement("_"))&&!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",i=e.Element[n],r=Object,a=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>t;t++)if(t in this&&this[t]===e)return t;return-1},s=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},l=function(e,t){if(""===t)throw new s("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new s("INVALID_CHARACTER_ERR","String contains an invalid character");return o.call(e,t)},c=function(e){for(var t=a.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],i=0,r=n.length;r>i;i++)this.push(n[i]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=c[n]=[],d=function(){return new c(this)};if(s[n]=Error[n],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==l(this,e)},u.add=function(){var e,t=arguments,n=0,i=t.length,r=!1;do e=t[n]+"",-1===l(this,e)&&(this.push(e),r=!0);while(++n<i);r&&this._updateClassName()},u.remove=function(){var e,t=arguments,n=0,i=t.length,r=!1;do{e=t[n]+"";var a=l(this,e);-1!==a&&(this.splice(a,1),r=!0)}while(++n<i);r&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),i=n?t!==!0&&"remove":t!==!1&&"add";return i&&this[i](e),!n},u.toString=function(){return this.join(" ")},r.defineProperty){var v={get:d,enumerable:!0,configurable:!0};try{r.defineProperty(i,t,v)}catch(f){-2146823252===f.number&&(v.enumerable=!1,r.defineProperty(i,t,v))}}else r[n].__defineGetter__&&i.__defineGetter__(t,d)}}(self);
\ No newline at end of file

From 37db5e69a9c6d5a08082d3d204713e3231bdcd1a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 22:29:02 +0000
Subject: [PATCH 070/136] move (un)ordered & definition lists into _lists.scss

---
 assets/src/scss/_typography.scss       | 78 +++-----------------------
 assets/src/scss/components/_lists.scss | 62 ++++++++++++++++++++
 2 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss
index 7e456e0e..ea4a512b 100644
--- a/assets/src/scss/_typography.scss
+++ b/assets/src/scss/_typography.scss
@@ -123,79 +123,9 @@ small {
 	font-size: 80%;
 }
 
-
-/**
- * Lists
- */
-ul {
-	list-style-type: disc;
-}
-
-ol {
-	list-style-type: decimal;
-}
-
-// Unordered and Ordered lists
-// Add a .unstyled class to unordered/ordered lists if you want them to have bullets/numbers
-ul, ol {
-	padding: 0;
-	margin: 0 0 $baseline $baseline;
-
-	ul,
-	ol {
-		margin-left: $baseline * 2;
-	}
-
-	ul {
-		list-style-type: circle;
-
-		ul {
-			list-style-type: square;
-		}
-	}
-
-	ol {
-		list-style-type: upper-roman;
-
-		ol {
-			list-style-type: lower-roman;
-		}
-	}
-
-	ul, ol {
-		margin-bottom: 0;
-	}
-}
-
-/**
- * Unstyled lists
- */
-.unstyled {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	list-style-image: none;
-}
-
-
-/**
- * Definition lists
- */
-dl { margin-bottom: $baseline; }
-dt { font-weight: $font-weight-bold; }
-dd { margin-left: $baseline; }
-
-
 /**
  * Miscellaneous
  */
-// Horizontal rules
-hr {
-	margin: ($baseline) 0;
-	border: 0;
-	border-top: 1px solid $hr-border;
-	border-bottom: 1px solid #fff;
-}
 
 // Emphasis
 strong, b {
@@ -295,3 +225,11 @@ samp {
 }
 
 @include text-selection($color-selection, $color-selection-bg);
+
+// Horizontal rules
+hr {
+	margin: ($baseline) 0;
+	border: 0;
+	border-top: 1px solid $hr-border;
+	border-bottom: 1px solid #fff;
+}
diff --git a/assets/src/scss/components/_lists.scss b/assets/src/scss/components/_lists.scss
index ffec52a5..18aed69c 100644
--- a/assets/src/scss/components/_lists.scss
+++ b/assets/src/scss/components/_lists.scss
@@ -1,9 +1,71 @@
 /**
  * Lists
+ * - (Un)ordered lists
+ * - Unstyled lists
+ * - Definition lists
  * - Centred lists
  * - Floated lists
  */
 
+ul {
+	list-style-type: disc;
+}
+
+ol {
+	list-style-type: decimal;
+}
+
+// Unordered and Ordered lists
+// Add a .unstyled class to unordered/ordered lists if you want them to have bullets/numbers
+ul, ol {
+	padding: 0;
+	margin: 0 0 $baseline $baseline;
+
+	ul,
+	ol {
+		margin-left: $baseline * 2;
+	}
+
+	ul {
+		list-style-type: circle;
+
+		ul {
+			list-style-type: square;
+		}
+	}
+
+	ol {
+		list-style-type: upper-roman;
+
+		ol {
+			list-style-type: lower-roman;
+		}
+	}
+
+	ul, ol {
+		margin-bottom: 0;
+	}
+}
+
+/**
+ * Unstyled lists
+ */
+.unstyled {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	list-style-image: none;
+}
+
+
+/**
+ * Definition lists
+ */
+dl { margin-bottom: $baseline; }
+dt { font-weight: $font-weight-bold; }
+dd { margin-left: $baseline; }
+
+
 /**
  * Centred lists
  *

From 7191bd937427d948f5af4c4c1b40ce236195bfb6 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 23:09:51 +0000
Subject: [PATCH 071/136] fix markup custom checkboxes & radios

---
 styleguide/index.html | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/styleguide/index.html b/styleguide/index.html
index 063750ea..4ed43df1 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -254,10 +254,15 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 										<input type="checkbox" value="check1">
 										This is a checkbox
 									</label>
-									<label class="control control--custom control--checkbox">
-										<input type="checkbox" value="check4">
-										<span class="control-indicator"></span>
-										This is a custom checkbox
+									<label class="control control--custom">
+										<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+										<span class="control-indicator control-indicator--checkbox"></span>
+										My Checkbox Label Text
+									</label>
+									<label class="control control--custom">
+										<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+										<span class="control-indicator control-indicator--checkbox control-indicator--checkbox--tick"></span>
+										My Tickbox Label Text
 									</label>
 								</div>
 							</div>
@@ -269,10 +274,10 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 										<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 										This is a radio
 									</label>
-									<label class="control control--custom control--radio">
-										<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
-										<span class="control-indicator"></span>
-										This is a custom radio button
+									<label class="control control--custom">
+										<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
+										<span class="control-indicator control-indicator--radio"></span>
+										My Radio Button Label Text
 									</label>
 								</div>
 							</div>

From fb167b768220c27a1783c97282fd7fda8fe6979f Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 23:10:07 +0000
Subject: [PATCH 072/136] fixes styleguide type specimen

---
 assets/src/scss/styleguide.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/assets/src/scss/styleguide.scss b/assets/src/scss/styleguide.scss
index 9ac6b00c..b9f96e05 100644
--- a/assets/src/scss/styleguide.scss
+++ b/assets/src/scss/styleguide.scss
@@ -222,14 +222,12 @@ code {
 
 .sg-typeSpecimen--primary {
 	@include font-size(30);
-	font-family: $font-family-headings;
-	font-weight: $font-weight-headings;
-
+	font-family: $font-family-base;
 }
 
 .sg-typeSpecimen--secondary {
 	@include font-size(30);
-	font-family: $font-family-base;
+	font-family: $font-family-alt;
 }
 
 .sg-typeSpecimen--giant {

From c2c1c436eb2754b1fec5d3ba9200070deecbb3e0 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 25 Oct 2015 23:49:39 +0000
Subject: [PATCH 073/136] add npm ignore

this is an attempt to allow kickoff's scss directory to be installed with npm
---
 .npmignore | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 00000000..3dddf009
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,9 @@
+assets/dist
+assets/temp
+assets/src/js
+assets/src/grunticon
+assets/src/img
+
+_grunt-configs
+styleguide
+testing

From 52d88b2be706464a79dabb74d60df8706cf528e4 Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Mon, 26 Oct 2015 12:00:34 +0000
Subject: [PATCH 074/136] Refactored block grids to to be simpler.

---
 assets/src/scss/components/_block-grids.scss | 41 +++++++++-----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
index 6518bb15..ab73d80e 100644
--- a/assets/src/scss/components/_block-grids.scss
+++ b/assets/src/scss/components/_block-grids.scss
@@ -13,19 +13,26 @@
  * </ul>
  */
 
- @mixin blockGridHelper($mutator){
-	&[class*="up--#{$mutator}"] > li {
-		display: block;
-		height: auto;
-		float: left;
+@mixin blockGridHelper($mutator: false) {
+	$suffix: up;
+
+	@if($mutator) {
+		$suffix: up--#{$mutator};
 	}
 
 	@for $i from 1 to $grid-column-count + 1 {
-		&.l-blockGrid--#{$i}up--#{$mutator} > li {
-			width: percentage(1 / $i);
-			display: block;
-			height: auto;
+		&.l-blockGrid--#{$i}#{$suffix} > li {
 			float: left;
+			width: percentage(1 / $i);
+
+			//Clear incase of height difference of block items.
+			&:nth-of-type(#{$i}n + 1) {
+				clear: left;
+			}
+
+			&:not(:nth-of-type(#{$i}n + 1)) {
+				clear: none;
+			}
 		}
 	}
 }
@@ -50,22 +57,12 @@
 		@include blockGridHelper('narrow');
 	}
 
+	// Standard block-grid (which is wider than mid on this proj)
 	@include respond-min($bp-single-col) {
-		> li {
-			display: block;
-			height: auto;
-			float: left;
-		}
-
-		// Wide block-grid
-		@for $i from 1 to $grid-column-count + 1 {
-			&.l-blockGrid--#{$i}up > li {
-				width: percentage(1 / $i);
-			}
-		}
+		@include blockGridHelper();
 	}
 
-	// Wide block-grid
+	// Mid block-grid
 	@include respond-min($bp-mid) {
 		@include blockGridHelper('mid');
 	}

From c624ca674b6c729206e7876f883cba165ac2b274 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Tue, 27 Oct 2015 08:03:41 +0000
Subject: [PATCH 075/136] update the custom select element to allow for
 `:focus` [unfinished]

---
 .../components/_forms-custom-controls.scss    | 66 ++++++++-----------
 styleguide/index.html                         | 28 ++++++++
 2 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/assets/src/scss/components/_forms-custom-controls.scss b/assets/src/scss/components/_forms-custom-controls.scss
index 5cc7ccbe..54ca4a4a 100644
--- a/assets/src/scss/components/_forms-custom-controls.scss
+++ b/assets/src/scss/components/_forms-custom-controls.scss
@@ -83,7 +83,7 @@ $checkbox-indicator-width : .1em;
 		background-color: $custom-input-selected;
 		display: block;
 		opacity: 0;
-		transition: $default-transition;
+		transition: all 250ms ease-in-out;
 	}
 
 	&:before {
@@ -169,65 +169,53 @@ $checkbox-indicator-width : .1em;
  * Custom select element
  * http://jsbin.com/juvixufu/165/edit
  */
-.form-input--selectWrapper {
+.form-input--customSelectWrapper {
 	position: relative;
 	display: block;
 	padding: 0;
+
+	/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
+	&:after {
+		background: none;
+		color: #bbb;
+		content: "\25BC";
+		font-size: .7em;
+		padding: 0;
+		position: absolute;
+		right: 1.2em;
+		top: 50%;
+		margin-top: -9px;
+		z-index: 2;
+
+		/* These hacks make the select behind the arrow clickable in some browsers */
+		pointer-events: none;
+		background: url(#);
+	}
 }
 
 /* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
-.form-input--selectWrapper select {
-	width: 100%;
-	max-width: 100%;
-	min-width: 100%;
-	margin: 0;
-	background: none;
-	border: 0;
-	outline: none;
-	/* Remove select styling */
-	appearance: none;
+.form-input--select--custom {
 	-webkit-appearance: none;
-	/* Magic font size number to prevent iOS text zoom */
-	// font-size:16px;
-	padding: .5em;
-	height: 2.3em;
-	line-height: 1;
+	appearance: none;
 }
 
 /* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-	.form-input--selectWrapper select::-ms-expand {
+	.form-input--select--custom::-ms-expand {
 		display: none;
 	}
 }
 
-/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
-.form-input--selectWrapper:after {
-	background: none;
-	color: #bbb;
-	content: "\25BC";
-	font-size: .7em;
-	padding: 0;
-	position: absolute;
-	right: 1.2em;
-	top: 50%;
-	margin-top: -9px;
-	z-index: 2;
-
-	/* These hacks make the select behind the arrow clickable in some browsers */
-	pointer-events: none;
-	background: url(#);
-}
 
 /* This selector targets Firefox only with the trick of making the select 110% but clipped by the container at 100% to hide the arrow. We have to do this because getting rid of select appearance isn't supported consistently */
-.form-input--selectWrapper,
+.form-input--customSelectWrapper,
 x:-moz-any-link,
 x:default {
 	overflow: hidden;
 	width: 100%;
 }
 
-.form-input--selectWrapper select,
+.form-input--select--custom,
 x:-moz-any-link,
 x:default {
 	width: 110%;
@@ -251,13 +239,13 @@ x:default {
 // }
 
 /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
-.form-input--selectWrapper:focus::-ms-value {
+.form-input--customSelectWrapper:focus::-ms-value {
 	background: transparent;
 	color: #222;
 }
 
 /* Firefox focus has odd artifacts around the text, this kills that */
-.form-input--selectWrapper:-moz-focusring {
+.form-input--customSelectWrapper:-moz-focusring {
 	color: transparent;
 	text-shadow: 0 0 0 #000;
 }
diff --git a/styleguide/index.html b/styleguide/index.html
index 4ed43df1..5a8f91bd 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -246,6 +246,33 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 							</div>
 						</div>
 
+						<div class="form-controlGroup">
+								<label for="cs-choice" class="form-label">Custom select</label>
+								<div class="form-controlGroup-inputWrapper">
+									<label class="form-input--customSelectWrapper">
+										<select id="cs-choice" name="cs-choice" class="form-input form-input--select form-input--select--custom">
+												<option value="--">Select title</option>
+												<option value="Mr">Mr</option>
+												<option value="Mrs">Mrs</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+												<option value="Ms">Ms</option>
+										</select>
+									</label>
+								</div>
+						</div>
+
 						<div class="g-row">
 							<div class="form-controlGroup g-span6 g-col">
 								<label class="form-label">Checkboxes</label>
@@ -282,6 +309,7 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 								</div>
 							</div>
 						</div>
+
 					</fieldset>
 
 					<h3 class="sg-interfaceType sg-interfaceType--subtle">Validation information</h3>

From c28c0f8de7169b8ac258eca8a2edfdb782f96acf Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Fri, 30 Oct 2015 11:30:56 +0000
Subject: [PATCH 076/136] Fixed incorrect comment.

---
 assets/src/scss/components/_block-grids.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
index ab73d80e..e9eea6d5 100644
--- a/assets/src/scss/components/_block-grids.scss
+++ b/assets/src/scss/components/_block-grids.scss
@@ -8,7 +8,7 @@
  * </ul>
  *
  * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow">
+ * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">
  *     <li></li>
  * </ul>
  */
@@ -57,7 +57,7 @@
 		@include blockGridHelper('narrow');
 	}
 
-	// Standard block-grid (which is wider than mid on this proj)
+	// Standard block-grid
 	@include respond-min($bp-single-col) {
 		@include blockGridHelper();
 	}

From ec8e299a99ec81477f392835efc603740b835279 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 19:47:03 +0000
Subject: [PATCH 077/136] move custom radios & checkboxes into their own file &
 refactor

---
 .../_forms-custom-radioscheckboxes.scss       | 147 ++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 assets/src/scss/components/_forms-custom-radioscheckboxes.scss

diff --git a/assets/src/scss/components/_forms-custom-radioscheckboxes.scss b/assets/src/scss/components/_forms-custom-radioscheckboxes.scss
new file mode 100644
index 00000000..08091a5b
--- /dev/null
+++ b/assets/src/scss/components/_forms-custom-radioscheckboxes.scss
@@ -0,0 +1,147 @@
+/**
+ * Custom Checkboxes and radios
+ *
+ * IE9+
+ *
+ * --------------------------------
+ *
+ * Checkbox button example HTML
+ *
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+ *		<span class="control-indicator control-indicator--checkbox"></span>
+ *		My Checkbox Label Text
+ *	</label>
+ *
+ * -------------------------------
+ *
+ * Radio button example HTML
+ *
+ *	<label class="control control--custom">
+ *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
+ *		<span class="control-indicator control-indicator--radio"></span>
+ *		My Radio Button Label Text
+ * 	</label>
+ *
+ * ================================= */
+// $custom-input-color: $color-primary;
+$custom-input-color: $color-primary;
+$custom-input-selected-color: $color-bg;
+$checkbox-indicator-width: .1em;
+
+.control--custom {
+	position: relative;
+	display: block;
+	cursor: pointer;
+	user-select: none;
+}
+
+// Give inline elements some space to the right
+.control--custom--inline {
+	display: inline-block;
+	padding-right: 2em;
+}
+
+// The hidden input
+.control--custom-input {
+	position: absolute;
+	opacity: 0;
+	visibility: hidden;
+	z-index: -1; // Put the input behind the label so it doesn't overlay text
+}
+
+// The new checkbox/radio
+.control-indicator {
+	position: relative;
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	transition: $default-transition;
+	border: $checkbox-indicator-width solid $custom-input-color;
+	background-color: $custom-input-color;
+	vertical-align: middle;
+	margin-top: -.2em;
+	box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; // Used to animate from when element is in :focus
+}
+
+// :focus styles
+.control--custom-input:focus ~ .control-indicator {
+	box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $input-borderColor--focus;
+}
+
+// Checkbox modifiers
+.control-indicator--checkbox,
+.control-indicator--tickbox {
+	border-radius: .2em;
+
+	&:before,
+	&:after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 90%;
+		display: block;
+		opacity: 0; // indicator will be faded out when deselected
+		transition: all 250ms ease-in-out;
+	}
+}
+
+.control-indicator--checkbox {
+
+	&:before,
+	&:after {
+		top: 50%;
+		width: 90%;
+		height: $checkbox-indicator-width;
+		background-color: $custom-input-selected-color;
+	}
+
+	&:before {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+
+	&:after {
+		transform: translate(-50%, -50%) rotate(-45deg);
+	}
+}
+
+.control-indicator--tickbox {
+
+	&:before {
+		top: 0;
+		transform: translateX(-50%) rotate(45deg);
+		border: $checkbox-indicator-width solid $custom-input-selected-color;
+		background-color: transparent;
+		width: 40%;
+		height: 80%;
+		border-top: 0;
+		border-left: 0;
+	}
+
+	&:after {
+		display: none;
+	}
+}
+
+.control--custom-input:checked ~ .control-indicator--checkbox,
+.control--custom-input:checked ~ .control-indicator--tickbox {
+	// Uncomment to make checkboxes circular when checked
+	// border-radius: 50%;
+
+	&:before,
+	&:after {
+		opacity: 1;
+	}
+}
+
+
+// Radio modifiers
+.control-indicator--radio {
+	border-radius: 50%;
+}
+
+.control--custom-input:checked ~ .control-indicator--radio {
+	background-color: $custom-input-selected-color;
+	border: .3em solid $custom-input-color;
+}

From b26069b01de15378593b000faea33a5a416680fe Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 19:49:40 +0000
Subject: [PATCH 078/136] move custom select into it's own file & refactor

- Removed all hacky Firefox code. This custom select works well in FF 39+
---
 .../scss/components/_forms-custom-select.scss | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 assets/src/scss/components/_forms-custom-select.scss

diff --git a/assets/src/scss/components/_forms-custom-select.scss b/assets/src/scss/components/_forms-custom-select.scss
new file mode 100644
index 00000000..caaf0252
--- /dev/null
+++ b/assets/src/scss/components/_forms-custom-select.scss
@@ -0,0 +1,64 @@
+/**
+ * Custom select element
+ *
+ * Firefox 39+, IE10+
+ *
+ *	<div class="form-controlGroup">
+ *			<label for="cs-choice" class="form-label">Custom select</label>
+ *			<div class="form-controlGroup-inputWrapper form-controlGroup-inputWrapper--select">
+ *				<select id="cs-choice" name="cs-choice" class="form-input form-input--select">
+ *					<option value="--">Select title</option>
+ *					<option value="Mr">Mr</option>
+ *					<option value="Mrs">Mrs</option>
+ *				</select>
+ *			</div>
+ *	</div>
+ */
+.form-controlGroup-inputWrapper--select {
+	position: relative;
+	display: block;
+	padding: 0;
+
+	/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
+	&:after {
+		color: $color-primary;
+		content: "\25BC";
+		font-size: .7em;
+		padding: 0;
+		position: absolute;
+		right: 1.2em;
+		top: 50%;
+		margin-top: -9px;
+		z-index: 2;
+
+		/* These hacks make the select behind the arrow clickable in some browsers */
+		-ms-pointer-events: none;
+		pointer-events: none;
+		background: url(#);
+	}
+
+	.form-input--select {
+		appearance: none;
+
+		/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
+		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+			&::-ms-expand {
+				display: none;
+			}
+		}
+
+		/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
+		&:focus::-ms-value {
+			background: transparent;
+			color: #222;
+		}
+	}
+}
+
+.lt-ie10 .form-input--selectWrapper:after {
+	display: none;
+}
+
+option {
+	font-weight: normal;
+}

From f1cd48b71cedd8233151e16eb6de56cc076c0c34 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 19:50:32 +0000
Subject: [PATCH 079/136] update autoprefixer browser list

- removed the Firefox 3.6+ because FF is now an evergreen browser
---
 _grunt-configs/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_grunt-configs/config.js b/_grunt-configs/config.js
index 5c2ac2c4..8e8e7039 100644
--- a/_grunt-configs/config.js
+++ b/_grunt-configs/config.js
@@ -22,7 +22,7 @@ module.exports = {
 
 		// We are supporting the last 2 browsers, any browsers with >5% market share,
 		// and ensuring we support IE8+ with prefixes
-		autoprefixer : ['> 5%', 'last 2 versions', 'firefox > 3.6', 'ie > 7'] // <%=config.css.autoprefixer%>
+		autoprefixer : ['> 5%', 'last 2 versions', 'ie > 7'] // <%=config.css.autoprefixer%>
 	},
 
 

From 7858f2b0e610893c738576098fdf87f7c44d08be Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:02:45 +0000
Subject: [PATCH 080/136] move custom file input styles into it's own file &
 refactor

- Demo can be found at http://codepen.io/mrmartineau/pen/PParWP?editors=001
---
 .../scss/components/_forms-custom-file.scss   | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 assets/src/scss/components/_forms-custom-file.scss

diff --git a/assets/src/scss/components/_forms-custom-file.scss b/assets/src/scss/components/_forms-custom-file.scss
new file mode 100644
index 00000000..1c7249b5
--- /dev/null
+++ b/assets/src/scss/components/_forms-custom-file.scss
@@ -0,0 +1,48 @@
+/**
+ * Custom file input
+ *
+ * <div class="form-controlGroup">
+		<label class="form-label" for="file">File upload</label>
+
+		<div class="form-controlGroup-inputWrapper">
+			<label class="form-input form-input--file">
+				<span class="form-input--file-text">Choose file..</span>
+				<span class="form-input--file-button">Browse</span>
+				<input class="form-input--file-input" type="file" id="file" accept="image/*" size="14" />
+			</label>
+		</div>
+	</div>
+ */
+/**
+ * Custom file input
+ */
+.form-input--file {
+	position: relative;
+	overflow: hidden;
+	padding-right: 120px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.form-input-file {
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.form-input--file-button {
+	cursor: pointer;
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	right: -1px;
+	bottom: 0;
+	padding: .44em 1em 0;
+	background-color: lighten($input-borderColor, 5%);
+
+	&:hover {
+		background-color: $input-borderColor;
+	}
+}

From 2cbc9f509dcc50da46fbf2e9ced9692231ef1956 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:03:22 +0000
Subject: [PATCH 081/136] add new custom form elements to dependencies.scss

---
 assets/src/scss/_dependencies.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index d7faf867..7b15aab9 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -33,7 +33,9 @@
  * See http://trykickoff.github.io/demos/components.html for more info
  */
 @import "components/forms"; // http://trykickoff.github.io/demos/forms.html
-@import "components/forms-custom-controls";
+@import "components/forms-custom-radioscheckboxes"; // Custom radio & checkbox inputs
+@import "components/forms-custom-select"; // Custom select element
+// @import "components/forms-custom-file"; // Custom file input
 @import "components/icons";
 @import "components/links";
 @import "components/buttons";

From 6e293ee34c59e9072ba841e057ef0646d77a4488 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:04:16 +0000
Subject: [PATCH 082/136] fixes sass bug after a rogue character was entered
 there

---
 assets/src/scss/_dependencies.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index 7b15aab9..5c61759a 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -48,7 +48,7 @@
 @import "components/tables";
 @import "components/code";
 @import "components/skip-navigation";
-// @import "components/scrollbars";x
+// @import "components/scrollbars";
 
 
 /**

From 9af6158bd74b48d8e8bebffef54989472c743fa8 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:06:07 +0000
Subject: [PATCH 083/136] updates colour palette to be more in-line with
 Kickoff's theme

---
 assets/src/scss/_color-palette.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss
index 46d6d10b..721933e1 100644
--- a/assets/src/scss/_color-palette.scss
+++ b/assets/src/scss/_color-palette.scss
@@ -14,15 +14,15 @@ $blue                         : #288ad6;
 $green                        : #16c98d;
 $red                          : #fa5e5b;
 $yellow                       : #feef6d;
-$orange                       : #e67e22;
+$orange                       : #FE7C08;
 $pink                         : #ff708e;
 $purple                       : #8e44ad;
 $gray                         : #95a5a6;
 
 // Color Scheme
-$color-primary                : $green;
-$color-secondary              : $yellow;
-$color-highlight              : $red;
+$color-primary                : #181830;
+$color-secondary              : $orange;
+$color-highlight              : $blue;
 
 // Common colors
 $color-text                   : #444;
@@ -31,10 +31,10 @@ $color-border                 : #ddd;
 
 
 // Links
-$color-link-default           : $color-primary;
-$color-link-visited           : $color-primary;
-$color-link-hover             : darken($color-primary, 20%);
-$color-link-active            : darken($color-primary, 20%);
+$color-link-default           : $color-highlight;
+$color-link-visited           : $color-link-default;
+$color-link-hover             : darken($color-link-default, 20%);
+$color-link-active            : darken($color-link-default, 20%);
 
 // Text Selection
 $color-selection              : #fff;

From ac95f370e5c83973b7da30f160e48b98f3e4f9ad Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:08:25 +0000
Subject: [PATCH 084/136] add `.lt-ie10` conditional comment to `<html>`
 element

---
 index.html            | 5 +++--
 styleguide/index.html | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 7930fefe..786a387a 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
-<!--[if IE 8]><html class="no-js lt-ie9" lang=""><![endif]-->
-<!--[if gt IE 8]><!--><html class="no-js" lang=""><!--<![endif]-->
+<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
+<!--[if IE 9]><html class="no-js lt-ie10" lang="en"><![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="x-ua-compatible" content="ie=edge">
diff --git a/styleguide/index.html b/styleguide/index.html
index 5a8f91bd..db36a8dd 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html>
-<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
+<!doctype html>
+<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
+<!--[if IE 9]><html class="no-js lt-ie10" lang="en"><![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

From 47c2a3e7956e3864a254fe466b92446d5d50f92f Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:52:33 +0000
Subject: [PATCH 085/136] update Kickoff styleguide

- removed form validation fields
- added an example logo
- removed blockquote
-
---
 styleguide/index.html | 110 +++++++-----------------------------------
 1 file changed, 17 insertions(+), 93 deletions(-)

diff --git a/styleguide/index.html b/styleguide/index.html
index db36a8dd..d99d7161 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -4,7 +4,7 @@
 <!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta http-equiv="x-ua-compatible" content="ie=edge">
 		<title>Kickoff Styleguide</title>
 		<meta name="description" content="A simple styleguide to use with your project">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -43,6 +43,7 @@ <h2 class="sg-interfaceType">Visual Asset Guidelines</h2>
 		<div class="sg-page">
 			<div class="l-container">
 				<h2 class="sg-sectionHeading">Logo</h2>
+				<img src="http://i.imgur.com/PiqudTY.png">
 			</div>
 		</div>
 
@@ -186,12 +187,6 @@ <h3 class="sg-interfaceType sg-interfaceType--subtle">Typeface sizes</h3>
 					</div>
 				</div>
 
-				<h3 class="sg-interfaceType sg-interfaceType--subtle">Blockquote</h3>
-				<blockquote>
-					<p>Of all the gin joints in all the towns in all the world, she walks into mine.</p>
-					<small>Rick Blaine</small>
-				</blockquote>
-
 			</div>
 		</div>
 
@@ -234,43 +229,15 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 								<textarea id="comments" rows="3" cols="50" class="form-input form-input--textarea"></textarea>
 							</div>
 						</div>
-						<div class="form-controlGroup">
-							<label for="choice" class="form-label">Choice</label>
-							<div class="form-controlGroup-inputWrapper">
-								<select id="choice" class="form-input form-input--select">
-									<option>Option 1</option>
-									<option>Option 2</option>
-									<option>Option 3</option>
-									<option>Option 4</option>
-									<option>Option 5</option>
-								</select>
-							</div>
-						</div>
 
 						<div class="form-controlGroup">
 								<label for="cs-choice" class="form-label">Custom select</label>
-								<div class="form-controlGroup-inputWrapper">
-									<label class="form-input--customSelectWrapper">
-										<select id="cs-choice" name="cs-choice" class="form-input form-input--select form-input--select--custom">
-												<option value="--">Select title</option>
-												<option value="Mr">Mr</option>
-												<option value="Mrs">Mrs</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-												<option value="Ms">Ms</option>
-										</select>
-									</label>
+								<div class="form-controlGroup-inputWrapper form-controlGroup-inputWrapper--select">
+									<select id="cs-choice" name="cs-choice" class="form-input form-input--select">
+										<option value="--">Select title</option>
+										<option value="Mr">Mr</option>
+										<option value="Mrs">Mrs</option>
+									</select>
 								</div>
 						</div>
 
@@ -278,19 +245,15 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 							<div class="form-controlGroup g-span6 g-col">
 								<label class="form-label">Checkboxes</label>
 								<div class="form-controlGroup-inputWrapper">
-									<label class="control">
-										<input type="checkbox" value="check1">
-										This is a checkbox
-									</label>
 									<label class="control control--custom">
 										<input class="control--custom-input" type="checkbox" name="myCheckbox" />
-										<span class="control-indicator control-indicator--checkbox"></span>
-										My Checkbox Label Text
+										<span class="control-indicator control-indicator--tickbox"></span>
+										Check 1
 									</label>
 									<label class="control control--custom">
 										<input class="control--custom-input" type="checkbox" name="myCheckbox" />
-										<span class="control-indicator control-indicator--checkbox control-indicator--checkbox--tick"></span>
-										My Tickbox Label Text
+										<span class="control-indicator control-indicator--tickbox"></span>
+										Check 2
 									</label>
 								</div>
 							</div>
@@ -298,12 +261,13 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 							<div class="form-controlGroup g-span6 g-col">
 								<label class="form-label">Radio buttons</label>
 								<div class="form-controlGroup-inputWrapper">
-									<label class="control">
-										<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-										This is a radio
+									<label class="control control--custom">
+										<input class="control--custom-input" type="radio" id="radio1" name="optionsRadios" />
+										<span class="control-indicator control-indicator--radio"></span>
+										My Radio Button Label Text
 									</label>
 									<label class="control control--custom">
-										<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
+										<input class="control--custom-input" type="radio" id="radio1" name="optionsRadios" />
 										<span class="control-indicator control-indicator--radio"></span>
 										My Radio Button Label Text
 									</label>
@@ -313,46 +277,6 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 
 					</fieldset>
 
-					<h3 class="sg-interfaceType sg-interfaceType--subtle">Validation information</h3>
-					<fieldset class="form-fieldset">
-						<div class="form-controlGroup has-success">
-							<label for="textSuccess" class="form-label">Input with success</label>
-							<div class="form-controlGroup-inputWrapper">
-								<input type="text" id="textSuccess" class="form-input" value="A value"/>
-								<div class="form-message">
-									Yay!
-								</div>
-							</div>
-						</div>
-						<div class="form-controlGroup has-error">
-							<label for="textError" class="form-label">Input with error</label>
-							<div class="form-controlGroup-inputWrapper">
-								<input type="text" id="textError" class="form-input" value="A value"/>
-								<div class="form-message">
-									Please correct the error
-								</div>
-							</div>
-						</div>
-						<div class="form-controlGroup has-warning">
-							<label for="textWarning" class="form-label">Input with warning</label>
-							<div class="form-controlGroup-inputWrapper">
-								<input type="text" id="textWarning" class="form-input" value="A value"/>
-								<div class="form-message">
-									Something may have gone wrong
-								</div>
-							</div>
-						</div>
-						<div class="form-controlGroup has-info">
-							<label for="textInfo" class="form-label">Input with info</label>
-							<div class="form-controlGroup-inputWrapper">
-								<input type="text" id="textInfo" class="form-input" value="A value"/>
-								<div class="form-message">
-									Username is taken
-								</div>
-							</div>
-						</div>
-					</fieldset>
-
 					<div class="form-actions">
 						<div class="form-message has-warning is-hidden">
 							Some fields need attention

From 33a5f38a6f900d37482680d6daa23d2624462925 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 22:52:58 +0000
Subject: [PATCH 086/136] replaced `::` for `=` in the type examples

---
 assets/src/scss/styleguide.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/scss/styleguide.scss b/assets/src/scss/styleguide.scss
index b9f96e05..b11e4380 100644
--- a/assets/src/scss/styleguide.scss
+++ b/assets/src/scss/styleguide.scss
@@ -167,7 +167,7 @@ code {
 	}
 
 	code {
-			&:after { content: ' :: #{$size}px'; }
+			&:after { content: ' = #{$size}px'; }
 	}
 }
 

From e1070cf820ff15f42559e2129af1570c6bee2466 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 23:35:58 +0000
Subject: [PATCH 087/136] update changelog

---
 changelog.md | 105 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 61 insertions(+), 44 deletions(-)

diff --git a/changelog.md b/changelog.md
index c7e377b1..9c2e37c1 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,92 +1,109 @@
 # Kickoff changelog
-All latest changes are documented on our site at http://trykickoff.github.io/
+All latest changes are documented on our site at http://trykickoff.github.io
 
-## Version 6.0.0
-Date 23/09/2015
+## [6.0.0] - 23/09/2015
 
-* This release's major change is that we switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.github.io/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0)
-* Removed a few rarely-used grunt plugins
+### Changed
+
+#### Javascript
+- Switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.github.io/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0)
+
+#### CSS/Scss
+- Ref #53 - Move all components from `scss/partials/components/*.scss` to `scss/components`
+- The [media object](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_media-object.scss) has been updated to ensure that it doesn't stack it's columns on skinny viewports by default but by the use of modifier classes. See the code [here](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_media-object.scss)
+- [Block grids](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_block.scss) have had many improvements thanks to @nicbell. There are now different modifier classes for each breakpoint, for example: `<ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">`
+- The custom form elements have been refactored & separated into their own files so that individual items can be imported instead of all of them.
+  - the custom select element now allows `:focus` styles
+  - custom checkboxes don't depend on SVGs and a tick variant has been added
+- Create new `_links.scss` and remove relevant code from `_typography.scss`
+- move (un)ordered & definition lists into _lists.scss
+
+#### Tooling
+- add [grunt-filesizegzip](https://github.com/mrmartineau/grunt-filesizegzip) to show file size and gzipped file size on save
+- Removed a few rarely-used grunt plugins
   - Grunt Photobox
   - grunt-contrib-scss-lint
   - grunt-contrib-jshint
-* The [media object](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_media-object.scss) has been updated to ensure that it doesn't stack it's columns on skinny viewports by default but by the use of modifier classes. See the code [here](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_media-object.scss)
-* [Block grids](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/components/_block.scss) have had many improvements thanks to @nicbell. There are now different modifier classes for each breakpoint which be adde
 
 
-## Version 5.0.0
-Date 19/05/2015
+## [5.0.0] - Date 19/05/2015
 
 This release focuses on improving the UX of the framework. Files are now in more intuitive places and grunt configs are clearer as well.
 
-* Completely restructured the static files directories.
+- Completely restructured the static files directories.
 	- Moved all CSS, images & js into the `./assets` directory 
 		+ The `./assets/src` directory for source files (SCSS, javascript, images & grunticon)
 		+ The `./assets/dist` directory for all compiled files (CSS, images & JS) is at `./assets/dist`
 		+ Grunticon's folders are now in more intuitive places. Uncompressed SVGs, jpgs & PNGs should be saved to `./assets/src/grunticon/source`. They will then be compressed to `./assets/temp/icons` before Grunticon does it's thing and compiles them to `./assets/dist/img/icons`.
-* Grunt & build tasks - Much has been streamlined.
+- Grunt & build tasks - Much has been streamlined.
 	- Connect has been removed & BrowserSync is now the only way to serve a static site & reload changes. Run `grunt serve` to test this.
 	- Our config variables are now in their own file at `./_grunt-configs/config.js` & have been made more intuitive
 	- Images now are automatically compressed by [grunt-contrib-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin) & are delivered to `./assets/dist/img`
-* Sass updates
+- Sass updates
 	- Many style rules have been removed with a primary focus on making the framework leaner & more useful. 
-* The styleguide has had a massive improvement & the start page has been removed. The styleguide has been moved to `.styleguide/index.html`
-* Running `npm run kickoff` now installs all package dependencies, including Grunt if you don't have it, and is a great way to start a Kickoff project
-* Removed 404
-* Removed `./js/helpers.js` as redundant. Have provided [some info](https://github.com/trykickoff/kickoff/tree/master/assets/js/helpers) if you need those files again.
-* Added HTML Validation check to the checks performed when running `grunt checks` task.
+- The styleguide has had a massive improvement & the start page has been removed. The styleguide has been moved to `.styleguide/index.html`
+- Running `npm run kickoff` now installs all package dependencies, including Grunt if you don't have it, and is a great way to start a Kickoff project
+- Removed 404
+- Removed `./js/helpers.js` as redundant. Have provided [some info](https://github.com/trykickoff/kickoff/tree/master/assets/js/helpers) if you need those files again.
+- Added HTML Validation check to the checks performed when running `grunt checks` task.
 	- This outputs the results of the check to your terminal as well as to a JSON file located at `./testing/validation/validation-results.json`
 
-## Version 4.1.0 - Libsass
-18/05/2015
+## [4.1.0] - Libsass - 18/05/2015
 
 As [node-sass](https://github.com/sass/node-sass) has been updated to v2, we can now use [grunt-sass](https://github.com/sindresorhus/grunt-sass) with Kickoff. It is faster and removes the dependency on Ruby from Kickoff.
 
-## Version 4.0.4 - Media query bugfix
-18/02/2015
+## [4.0.4] - Media query bugfix - 18/02/2015
 
 Fixes a strange bug with our [media-query mixins](https://github.com/trykickoff/kickoff/blob/master/scss/mixins/_responsive.scss). Apparently `em`-based media-queries do not calculate correctly if the font-size differs from the user's default — usually 16px. At this point, we have hard-coded 16 into our media-query mixins until we can find a better solution.
 
-## Version 4.0.3 - scss linting
-13/11/2014
+## [4.0.3] - scss linting - 13/11/2014
 
 scss linting has been added which meant refactoring many of Kickoff's `*.scss` files. Some minor changes to `_tables.scss` were also needed.
 
 To try the linter, you can use the Sublime Text plugin or through grunt using `grunt scsslint`. **We did our best to remove all warning and errors, that will need to be done in future releases**
 
-## Version 4.0.2
-11/11/2014
+## [4.0.2] - 11/11/2014
 
 Added a new Grunt variable for the images directory. Usage: `<%=config.img.dir%>`
 
-## Version 4.0.1
-26/10/2014
+## [4.0.1] - 26/10/2014
 
 Darn! missed something in the 4.0.0 release.
 
 Removed `.btn--link` and changed `.btn-close` to `.btnClose`
 
-## Version 4.0.0
-26/10/2014
+## [4.0.0] - 26/10/2014
 
 ### Typography
- * Font sizes use a modular scale throughout (but can easily be overridden)
- * Sass vars fonts etc are shorter and more intuitive to use - hopefully they'll be easier to remember when developing.
- * Added simple responsive type to reduce the font size on smaller viewports. Modify `$font-size-base-narrow` in `scss/_variables.css` to change this.
+ - Font sizes use a modular scale throughout (but can easily be overridden)
+ - Sass vars fonts etc are shorter and more intuitive to use - hopefully they'll be easier to remember when developing.
+ - Added simple responsive type to reduce the font size on smaller viewports. Modify `$font-size-base-narrow` in `scss/_variables.css` to change this.
 
 ### Sass
-* All of the CSS3 mixins have been removed because we use [Autoprefixer](https://github.com/nDmitry/grunt-autoprefixer)
-* **Global Sass vars** (`_variables.css`)
- * Breakpoint vars have been shortened from `$breakpoint-*` to `$bp-*`
- * Some of the grid vars have been moved to the more generic, `$layout-*` because they are not explicitly to do with the grid.
- * Other minor tweaks have also been made, so please read through this file to understand them.
+- All of the CSS3 mixins have been removed because we use [Autoprefixer](https://github.com/nDmitry/grunt-autoprefixer)
+- **Global Sass vars** (`_variables.css`)
+ - Breakpoint vars have been shortened from `$breakpoint-*` to `$bp-*`
+ - Some of the grid vars have been moved to the more generic, `$layout-*` because they are not explicitly to do with the grid.
+ - Other minor tweaks have also been made, so please read through this file to understand them.
 
 ### Javascript
-* We have removed many of the old 'helper' files and plugins, instead opting for dependencies found on the [Bower](http://bower.io) registry.
-* Bower dependencies are installed to `bower_modules`. To change this, edit the `.bowerrc` file. The default dependencies that we suggest are [Swiftclick](https://github.com/tmwagency/swiftclick), [Trak.js](https://github.com/tmwagency/trak.js), [jQuery](https://github.com/jquery/jquery/) and [Cookies](https://github.com/ScottHamper/Cookies/)
-* [Shimly](http://github.com/nicbell/shimly), a grunt plugin by [Nic Bell](http://github.com/nicbell) is being used to generate a file of javascript shims. Have a look at `_grunt-configs/javascript.js` to find the Shimly settings.
+- We have removed many of the old 'helper' files and plugins, instead opting for dependencies found on the [Bower](http://bower.io) registry.
+- Bower dependencies are installed to `bower_modules`. To change this, edit the `.bowerrc` file. The default dependencies that we suggest are [Swiftclick](https://github.com/tmwagency/swiftclick), [Trak.js](https://github.com/tmwagency/trak.js), [jQuery](https://github.com/jquery/jquery/) and [Cookies](https://github.com/ScottHamper/Cookies/)
+- [Shimly](http://github.com/nicbell/shimly), a grunt plugin by [Nic Bell](http://github.com/nicbell) is being used to generate a file of javascript shims. Have a look at `_grunt-configs/javascript.js` to find the Shimly settings.
 
 ### Grunt & tooling
-* [Livereload](http://livereload.com/) & [grunt-contrib-connect](https://github.com/grunt-contrib-connect) have been dropped (but still included) in favour of [BrowserSync](http://www.browsersync.io/docs/grunt/) (which handles both without a browser extension) for our live CSS updating and simple server needs. Running `grunt serve` will fire up a simple server and watch for changes, with the added benefits of [BrowserSync's](http://www.browsersync.io/docs/grunt/) many features.
-* All grunt tasks have been moved into grouped separate files in the `_grunt-configs` folder. For example, `_grunt-configs/css.js` contains all the grunt tasks relating to CSS: Sass, [Autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) & [CSSO](https://github.com/t32k/grunt-csso) (for minifying CSS. The `_grunt-configs/javascript.js` file contains the uglify (for concatenating and minfying js), shimly (for generating a javascript shims file), jshint and jQuery (for generating a custom jQuery build).
-* Extra grunt tasks have been added to help development. For example, running `grunt icons` will rebuild all the icons generated by Grunticon. `grunt start` will bring up a browser window with our 'getting started' guide, it also contains the simple styleguide for your project.
-* We have integrated a simple visual regression testing task, [grunt-photobox](https://github.com/stefanjudis/grunt-photoBox), to help prevent deployment of broken code. See [this](http://trykickoff.github.io/learn/grunt.html#task-photobox) for more info
+- [Livereload](http://livereload.com/) & [grunt-contrib-connect](https://github.com/grunt-contrib-connect) have been dropped (but still included) in favour of [BrowserSync](http://www.browsersync.io/docs/grunt/) (which handles both without a browser extension) for our live CSS updating and simple server needs. Running `grunt serve` will fire up a simple server and watch for changes, with the added benefits of [BrowserSync's](http://www.browsersync.io/docs/grunt/) many features.
+- All grunt tasks have been moved into grouped separate files in the `_grunt-configs` folder. For example, `_grunt-configs/css.js` contains all the grunt tasks relating to CSS: Sass, [Autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) & [CSSO](https://github.com/t32k/grunt-csso) (for minifying CSS. The `_grunt-configs/javascript.js` file contains the uglify (for concatenating and minfying js), shimly (for generating a javascript shims file), jshint and jQuery (for generating a custom jQuery build).
+- Extra grunt tasks have been added to help development. For example, running `grunt icons` will rebuild all the icons generated by Grunticon. `grunt start` will bring up a browser window with our 'getting started' guide, it also contains the simple styleguide for your project.
+- We have integrated a simple visual regression testing task, [grunt-photobox](https://github.com/stefanjudis/grunt-photoBox), to help prevent deployment of broken code. See [this](http://trykickoff.github.io/learn/grunt.html#task-photobox) for more info
+
+
+
+[6.0.0]: https://github.com/TryKickoff/kickoff/tree/6.0.0
+[5.0.0]: https://github.com/TryKickoff/kickoff/tree/5.0.0
+[4.1.0]: https://github.com/TryKickoff/kickoff/tree/4.1.0
+[4.0.4]: https://github.com/TryKickoff/kickoff/tree/4.0.4
+[4.0.3]: https://github.com/TryKickoff/kickoff/tree/4.0.3
+[4.0.2]: https://github.com/TryKickoff/kickoff/tree/4.0.2
+[4.0.1]: https://github.com/TryKickoff/kickoff/tree/4.0.1
+[4.0.0]: https://github.com/TryKickoff/kickoff/tree/4.0.0

From 12602186beb0803e9b37073f418bb8940ba6950d Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 23:36:19 +0000
Subject: [PATCH 088/136] update npm dependencies

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 6705c5b5..716a3b5e 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "console": "^0.5.2",
-    "lite-ready": "^1.0.3",
-    "swiftclick": "^1.1.5",
+    "lite-ready": "^1.0.4",
+    "swiftclick": "^1.2.0",
     "trak.js": "^0.5.2"
   },
   "devDependencies": {
@@ -40,20 +40,20 @@
     "grunt-autoprefixer": "^3.0.0",
     "grunt-browserify": "^4.0.0",
     "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-copy": "^0.8.0",
+    "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^0.9.4",
-    "grunt-csso": "^0.7.1",
+    "grunt-csso": "^0.8.0",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",
-    "grunt-sass": "^1.0.0",
-    "grunt-shimly": "^0.0.11",
+    "grunt-sass": "^1.1.0",
+    "grunt-shimly": "^1.0.1",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.3.0",
     "minifyify": "^7.1.0"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.9.7",
+    "browser-sync": "^2.9.11",
     "grunt-browser-sync": "^2.1.3",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-filesizegzip": "^0.2.0",

From 2cf74287968a179bb5349dfbb3e84006468cc133 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 23:36:28 +0000
Subject: [PATCH 089/136] change description

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 716a3b5e..0f9238e1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "kickoff",
   "title": "Kickoff",
-  "description": "A lightweight front-end framework for creating scalable, responsive sites",
+  "description": "A lightweight front-end framework for creating scalable, responsive websites",
   "version": "6.0.0",
   "homepage": "http://trykickoff.github.io",
   "authors": [

From d169744b0aa41897e90929f4d8261a5189f67c52 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 23:37:41 +0000
Subject: [PATCH 090/136] :+1: added @nicbell to the authors array after all
 the great work he's been doing for the framework

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0f9238e1..1fd60843 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,13 @@
     {
       "name": "Ashley Nolan",
       "url": "http://ashleynolan.co.uk"
+    },
+    {
+      "name": "Nic Bell",
+      "url": "http://nicbell.net"
     }
   ],
   "contributors": [
-    "Nic Bell",
     "Github contributors <https://github.com/trykickoff/kickoff/graphs/contributors>"
   ],
   "repository": {

From 051851ee31eef6a8d23019b289998848ca7378f6 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Sun, 1 Nov 2015 23:47:49 +0000
Subject: [PATCH 091/136] update changelog

---
 changelog.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog.md b/changelog.md
index 9c2e37c1..47d07a18 100644
--- a/changelog.md
+++ b/changelog.md
@@ -6,7 +6,7 @@ All latest changes are documented on our site at http://trykickoff.github.io
 ### Changed
 
 #### Javascript
-- Switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.github.io/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0)
+- Switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.github.io/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0). See the discussion about the change [here](https://github.com/TryKickoff/kickoff/issues/53).
 
 #### CSS/Scss
 - Ref #53 - Move all components from `scss/partials/components/*.scss` to `scss/components`

From 6b8654faa31ae08fd7fd639d5acd4d728ca5275a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 2 Nov 2015 00:48:38 +0000
Subject: [PATCH 092/136] Add new npm dependencies for sass compilation &
 imagemin

- replace grunt-sass, grunt-autoprefixer & grunt-csso with postscss, autoprefixer & cssnano. We are now using @nicebell's postscss package to compile sass using node-sass and then piping autoprefixer and cssnano (if the `--release` flag is detected). This should speed up compilation because we are no longer saving temporary files anymore, but using postcss to pipe them! :+1:
- imagemin no longer includes it's plugins as dependencies so we have to define them ourselves
---
 package.json | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 1fd60843..fbe5858c 100644
--- a/package.json
+++ b/package.json
@@ -40,20 +40,24 @@
   },
   "devDependencies": {
     "grunt": "^0.4.5",
-    "grunt-autoprefixer": "^3.0.0",
     "grunt-browserify": "^4.0.0",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^0.9.4",
-    "grunt-csso": "^0.8.0",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",
-    "grunt-sass": "^1.1.0",
     "grunt-shimly": "^1.0.1",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.3.0",
-    "minifyify": "^7.1.0"
+    "minifyify": "^7.1.0",
+    "postscss": "^1.2.2",
+    "autoprefixer": "^6.0.3",
+    "cssnano": "^3.2.0",
+    "imagemin-gifsicle": "^4.2.0",
+    "imagemin-jpegtran": "^4.3.1",
+    "imagemin-optipng": "^4.3.0",
+    "imagemin-svgo": "^4.1.2"
   },
   "optionalDependencies": {
     "browser-sync": "^2.9.11",

From 4001abf63280642d94f050490f709ebd8f122c5a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 2 Nov 2015 00:51:43 +0000
Subject: [PATCH 093/136] Grunt tasks refactored to use new postscss package

- the grunt tasks should now be a little easier to maintain. The `grunt compile` task is very useful & used by a few others
- postscss now used to compile, autoprefix & compress sass
---
 Gruntfile.js            | 140 ++++++++++------------------------------
 _grunt-configs/css.js   |  91 +++++++++-----------------
 _grunt-configs/watch.js |  13 +++-
 3 files changed, 77 insertions(+), 167 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 4f2a2e36..b2ce6548 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,7 +1,19 @@
+/**
+ * Grunt tasks:
+ * - grunt                   : The default task. Alias for `grunt serve` task below
+ * - grunt serve             : watch files and run a static server
+ * - grunt watcher           : watch files without static server
+ * - grunt compile           : compile scss, js & compress images
+ * - grunt compile --release : same as above, but compress CSS as well
+ * - grunt icons             : generate the icons using grunticon
+ * - grunt images            : compress all non-grunticon images & then run `grunt icons`
+ */
+
+var opn = require('opn')
+
 module.exports = function (grunt) {
 	'use strict';
 
-	var opn = require('opn');
 
 	var options = {
 		pkg: require('./package'), // <%=pkg.name%>
@@ -21,119 +33,60 @@ module.exports = function (grunt) {
 
 
 	/**
-	 * Available tasks:
-	 * grunt            : Alias for 'serve' task, below (the default task)
-	 * grunt serve      : watch js, images & scss and run a local server
-	 * grunt watcher    : run compile JS/CSS then watch
-	 * grunt start      : Opens the post-install setup checklist on the Kickoff site
-	 * grunt watch      : run sass:kickoff, uglify and livereload
-	 * grunt dev        : run browserify, sass:kickoff & autoprefixer:kickoff
-	 * grunt deploy     : run browserify, sass:kickoff and csso
-	 * grunt styleguide : watch js & scss, run a local server for editing the styleguide
-	 * grunt images     : compress all non-grunticon images & then run `grunt icons`
-	 * grunt icons      : generate the icons. uses svgmin and grunticon
-	 * grunt checks     : run html validator
-	 * grunt travis     : used by travis ci only
+	 * The tasks
 	 */
 
-
-	/**
-	 * GRUNT * Alias for 'serve' task, below
-	 */
+	// grunt
 	grunt.registerTask('default', ['serve']);
 
 
-	/**
-	 * GRUNT SERVE * A task for a static server with a watch
-	 * run browserSync and watch
-	 */
+	// grunt serve
 	grunt.registerTask('serve', [
-		'shimly',
-		'compileJS',
-		'compileCSS',
-		'copy:modernizr',
-		'images',
+		'compile',
 		'browserSync:serve',
 		'watch'
-	]);
+	])
 
 
-	/**
-	 * GRUNT WATCHER * A task for compiling & watching.
-	 * Useful for development when not using the browserSync server
-	 * run compile JS/CSS then watch
-	 */
+	// grunt watcher
 	grunt.registerTask('watcher', [
-		'shimly',
-		'compileJS',
-		'compileCSS',
-		'copy:modernizr',
-		'images',
+		'compile',
 		'watch'
 	]);
 
 
-	/**
-	 * GRUNT START
-	 * Opens the post-install setup checklist on the Kickoff site
-	 */
-	grunt.registerTask('start', function() {
-		opn('http://trykickoff.github.io/learn/checklist.html');
-	});
-
-
-	/**
-	 * GRUNT DEV * A task for development
-	 * run uglify, sass:kickoff & autoprefixer:kickoff
-	 */
-	grunt.registerTask('dev', [
+	// grunt compile
+	grunt.registerTask('compile', [
 		'shimly',
-		'compileJS',
-		'compileCSS',
 		'copy:modernizr',
+		'browserify',
+		'postscss',
 		'images'
 	]);
 
 
-	/**
-	 * GRUNT DEPLOY * A task for your production environment
-	 * run uglify, sass, autoprefixer and csso
-	 */
-	grunt.registerTask('deploy', [
-		'shimly',
-		'compileJS',
-		'compileCSS',
-		'csso',
-		'copy:modernizr',
-		'images'
-	]);
+	// grunt start
+	grunt.registerTask('start', function() {
+		opn('http://trykickoff.github.io/learn/checklist.html');
+	});
 
 
-	/**
-	 * GRUNT STYLEGUIDE * A task to view the styleguide
-	 */
+	// grunt styleguide
 	grunt.registerTask('styleguide', [
-		'shimly',
-		'compileJS',
-		'compileCSS',
-		'images',
+		'compile',
 		'browserSync:styleguide',
 		'watch'
 	]);
 
 
-	/**
-	 * GRUNT IMAGES * A task to compress all non-grunticon images
-	 */
+	// grunt images
 	grunt.registerTask('images', [
 		'newer:imagemin:images',
 		'icons'
 	]);
 
 
-	/**
-	 * GRUNT ICONS * A task to create all icons using grunticon
-	 */
+	// grunt icons
 	grunt.registerTask('icons', [
 		'clean:icons',
 		'newer:imagemin:grunticon',
@@ -141,37 +94,14 @@ module.exports = function (grunt) {
 	]);
 
 
-	/**
-	 * GRUNT CHECKS * Check code for errors
-	 * run jshint
-	 */
+	// grunt checks
 	grunt.registerTask('checks', [
 		'validation'
 	]);
 
 
-	/**
-	 * Travis CI to test build
-	 */
+	// grunt travis
 	grunt.registerTask('travis', [
-		'sass:kickoff'
-	]);
-
-
-	/**
-	 * Utility classes
-	 */
-	// Compile JS
-	grunt.registerTask('compileJS', [
-		'browserify'
-	]);
-
-	// Compile CSS
-	grunt.registerTask('compileCSS', [
-		'bsNotify:sassStart',
-		'sass',
-		'autoprefixer',
-		'bsReload:css',
-		'clean:tempCSS'
+		'postscss'
 	]);
 };
diff --git a/_grunt-configs/css.js b/_grunt-configs/css.js
index da8c48d6..74284062 100644
--- a/_grunt-configs/css.js
+++ b/_grunt-configs/css.js
@@ -1,72 +1,41 @@
-module.exports.tasks = {
+var postscss = require('postscss');
+var autoprefixer = require('autoprefixer');
+var cssnano = require('cssnano');
+
+module.exports = function (grunt, options) {
 
 	/**
-	 * Sass compilation using grunt-sass
-	 * https://github.com/sindresorhus/grunt-sass
-	 * Includes kickoff.scss and kickoff-old-ie.scss by default
+	 * PostScss
+	 * https://github.com/nicbell/postscss
 	 */
-	sass: {
-		kickoff: {
-			options: {
-				outputStyle: 'nested',
-				precision : 10,
-				sourceMap : true
-			},
-			files: {
-				'<%=config.tempDir%>/css/<%=config.css.distFile%>.css'       : '<%=config.css.scssDir%>/kickoff.scss',
-				// Remove the line below if you are supporting <IE9
-				'<%=config.tempDir%>/css/<%=config.css.distFile%>-old-ie.css': '<%=config.css.scssDir%>/kickoff-old-ie.scss'
-			}
-		},
-
-		styleguide: {
-			options: {
-				outputStyle: 'compressed',
-				precision : 10,
-			},
-			files: {
-				'<%=config.tempDir%>/css/styleguide.css' : '<%=config.css.scssDir%>/styleguide.scss'
-			}
-		}
-	},
+	return grunt.registerTask('postscss', 'Compiles SASS and runs postcss.', function () {
+		var done = this.async();
 
+		var scssDir = grunt.config.process(options.config.css.scssDir);
+		var cssDir = grunt.config.process(options.config.css.distDir);
 
-	/**
-	 * Autoprefixer
-	 * https://github.com/nDmitry/grunt-autoprefixer
-	 * https://github.com/postcss/autoprefixer
-	 * Auto prefixes your CSS using caniuse data
-	 */
-	autoprefixer: {
-		options: {
-			browsers: '<%=config.css.autoprefixer%>',
-			map: true
-		},
+		var plugins = [
+			autoprefixer({ browsers: options.config.css.autoprefixer })
+		];
 
-		kickoff: {
-			expand: true,
-			flatten: true,
-			src: '<%=config.tempDir%>/css/*.css',
-			dest: '<%=config.css.distDir%>/'
+		// Release flag, use cssnano
+		if (grunt.option('release')) {
+			plugins.push(cssnano());
 		}
-	},
 
-
-	/**
-	 * CSSO
-	 * https://github.com/t32k/grunt-csso
-	 * Minify CSS files with CSSO
-	 */
-	csso: {
-		dist: {
-			options: {
-				restructure: false //turns structural optimisations off as can mess up fallbacks http://bem.info/tools/optimizers/csso/description/
+		postscss(plugins).processMany([
+			{
+				from: scssDir + '/kickoff.scss',
+				to: cssDir + '/kickoff.css'
 			},
-			files: {
-				'<%=config.css.distDir%>/<%=config.css.distFile%>.css'       : '<%=config.css.distDir%>/<%=config.css.distFile%>.css',
-				// Remove the line below if you are supporting <IE9
-				'<%=config.css.distDir%>/<%=config.css.distFile%>-old-ie.css': '<%=config.css.distDir%>/<%=config.css.distFile%>-old-ie.css'
+			{
+				from: scssDir + '/kickoff-old-ie.scss',
+				to: cssDir + '/kickoff-old-ie.css'
 			},
-		}
-	}
+			{
+				from: scssDir + '/styleguide.scss',
+				to: cssDir + '/styleguide.css'
+			}
+		]).then(done);
+	});
 };
diff --git a/_grunt-configs/watch.js b/_grunt-configs/watch.js
index c33a54aa..5622ddb6 100644
--- a/_grunt-configs/watch.js
+++ b/_grunt-configs/watch.js
@@ -14,11 +14,22 @@ module.exports.tasks = {
 		scss: {
 			files: ['<%=config.css.scssDir%>/**/*.scss'],
 			tasks: [
-				'compileCSS',
+				'bsNotify:sassStart',
+				'postscss',
+				'bsReload:css',
 				'filesizegzip:css'
 			]
 		},
 
+		js: {
+			files: [
+				'<%=config.js.distDir%>/**/*.js'
+			],
+			tasks: [
+				'filesizegzip:js'
+			]
+		},
+
 		images : {
 			files: ['<%=config.img.srcDir%>/**/*.{svg,png,jpg,gif}'],
 			tasks: ['newer:imagemin:images']

From f2502370feaf4249d00171bb2069182c01526676 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 2 Nov 2015 00:52:06 +0000
Subject: [PATCH 094/136] upgrade node dependency to v4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fbe5858c..99bb7b7d 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=0.12"
+    "node": ">=4.0"
   },
   "dependencies": {
     "console": "^0.5.2",

From bb7a44606e794d1747c08794ac8007342f5d18a8 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 2 Nov 2015 00:52:57 +0000
Subject: [PATCH 095/136] add new npm scripts for use in continuous delivery
 `npm run deploy`

---
 package.json | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 99bb7b7d..b4d7632c 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,11 @@
   "keywords": [],
   "scripts": {
     "test": "grunt travis --verbose",
-    "prestart": "npm install -g grunt-cli && npm install",
-    "start": "grunt start"
+
+    "prestart": "npm install -g grunt-cli && npm prune && npm install",
+    "start": "grunt start",
+
+    "predeploy": "npm i -g grunt-cli && npm prune && npm install --no-optional",
+    "deploy": "grunt compile --release"
   }
 }

From 7aaf186a626cd305d593389defdc44a962f512d0 Mon Sep 17 00:00:00 2001
From: Nic Bell <me@nicbell.net>
Date: Mon, 2 Nov 2015 09:37:39 +0000
Subject: [PATCH 096/136] Update .travis.yml

Updated node version for travis ci
---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index c14d2048..1412e9de 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,6 +3,6 @@
 language: node_js
 sudo: false
 node_js:
-- '0.12'
+- "4.1"
 before_script:
 - npm install -g grunt-cli

From 6518f75a4f8ae1c5ff1017b68914409dcb01bbe3 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Tue, 3 Nov 2015 07:31:28 +0000
Subject: [PATCH 097/136] reduce padding on styleguide page start

---
 assets/src/scss/styleguide.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/scss/styleguide.scss b/assets/src/scss/styleguide.scss
index b11e4380..9cbf2b07 100644
--- a/assets/src/scss/styleguide.scss
+++ b/assets/src/scss/styleguide.scss
@@ -50,7 +50,7 @@ body {
 
 .sg-page--start {
 	background-color: $styleguide-color-primary;
-	padding: 15% 0;
+	padding: 70px 0 60px;
 	color: #fff;
 }
 

From 553608a66393ab5c67072b6a36af742e685233d6 Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Tue, 3 Nov 2015 14:58:20 +0000
Subject: [PATCH 098/136] Fixed messaging in forms.

---
 assets/src/scss/components/_forms.scss    | 1 +
 assets/src/scss/mixins/_form-helpers.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/src/scss/components/_forms.scss b/assets/src/scss/components/_forms.scss
index 74d0a823..34fa918b 100644
--- a/assets/src/scss/components/_forms.scss
+++ b/assets/src/scss/components/_forms.scss
@@ -330,6 +330,7 @@ input[type="submit"] {
 .form-message {
 
 	.form-controlGroup & {
+		display: none;
 		padding-top: 0.5em;
 		padding-left: 0.5em;
 	}
diff --git a/assets/src/scss/mixins/_form-helpers.scss b/assets/src/scss/mixins/_form-helpers.scss
index 1f1db185..2d247d3b 100644
--- a/assets/src/scss/mixins/_form-helpers.scss
+++ b/assets/src/scss/mixins/_form-helpers.scss
@@ -14,7 +14,7 @@
 		}
 	}
 
-	.form-controlGroup-message {
+	.form-message {
 		display: block;
 		color: $color;
 	}

From 773a54864d46fb7c63b4722b25b01e9c76178d78 Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Tue, 3 Nov 2015 14:59:57 +0000
Subject: [PATCH 099/136] Deleted old file

---
 .../components/_forms-custom-controls.scss    | 255 ------------------
 1 file changed, 255 deletions(-)
 delete mode 100644 assets/src/scss/components/_forms-custom-controls.scss

diff --git a/assets/src/scss/components/_forms-custom-controls.scss b/assets/src/scss/components/_forms-custom-controls.scss
deleted file mode 100644
index 54ca4a4a..00000000
--- a/assets/src/scss/components/_forms-custom-controls.scss
+++ /dev/null
@@ -1,255 +0,0 @@
-/**
- * Custom Checkboxes and radios
- *
- * IE9+ :)
- *
- * --------------------------------
- *
- * Checkbox button example HTML
- *
- *	<label class="control control--custom">
- *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
- *		<span class="control-indicator control-indicator--checkbox"></span>
- *		My Checkbox Label Text
- *	</label>
- *
- * -------------------------------
- *
- * Radio button example HTML
- *
- *	<label class="control control--custom">
- *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
- *		<span class="control-indicator control-indicator--radio"></span>
- *		My Radio Button Label Text
- * 	</label>
- *
- * ================================= */
-$custom-input-border      : #A3B1B2;
-$custom-input-bg          : $custom-input-border;
-$custom-input-selected    : $color-bg;
-$checkbox-indicator-width : .1em;
-
-.control--custom {
-	position: relative;
-	display: block;
-	cursor: pointer;
-	user-select: none;
-}
-
-// Give inline elements some space to the right
-.control--custom--inline {
-	display: inline-block;
-	padding-right: 2em;
-}
-
-// The hidden input
-.control--custom-input {
-	position: absolute;
-	opacity: 0;
-	z-index: -1; // Put the input behind the label so it doesn't overlay text
-}
-
-// The new checkbox/radio
-.control-indicator {
-	position: relative;
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	transition: $default-transition;
-	border: $checkbox-indicator-width solid $custom-input-border;
-	background-color: $custom-input-bg;
-	vertical-align: middle;
-	margin-top: -.1em;
-	box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; // Used to animate from when element is in :focus
-}
-
-// :focus styles
-.control--custom-input:focus ~ .control-indicator {
-	box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $input-borderColor--focus;
-}
-
-// Checkbox modifiers
-.control-indicator--checkbox {
-	border-radius: .2em;
-
-	&:before,
-	&:after {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 90%;
-		height: $checkbox-indicator-width;
-		background-color: $custom-input-selected;
-		display: block;
-		opacity: 0;
-		transition: all 250ms ease-in-out;
-	}
-
-	&:before {
-		transform: translate(-50%, -50%) rotate(45deg);
-	}
-
-	&:after {
-		transform: translate(-50%, -50%) rotate(-45deg);
-	}
-}
-
-.control-indicator--checkbox--tick {
-
-	&:before {
-		top: 0;
-		transform: translateX(-50%) rotate(45deg);
-		border: $checkbox-indicator-width solid $custom-input-selected;
-		background-color: transparent;
-		width: 40%;
-		height: 80%;
-		border-top: 0;
-		border-left: 0;
-	}
-
-	&:after {
-		display: none;
-	}
-}
-
-.control--custom-input:checked ~ .control-indicator--checkbox {
-	// Uncomment to make checkboxes circular when checked
-	// border-radius: 50%;
-
-	&:before,
-	&:after {
-		opacity: 1;
-	}
-}
-
-
-// Radio modifiers
-.control-indicator--radio {
-	border-radius: 50%;
-}
-
-.control--custom-input:checked ~ .control-indicator--radio {
-	background-color: $custom-input-selected;
-	border: .3em solid $custom-input-border;
-}
-
-
-/**
- * Custom file input
- */
-.form-input--fileWrapper--styled {
-	position: relative;
-	overflow: hidden;
-
-	&:before {
-		content: 'Choose file...';
-	}
-
-	&:after {
-		content: 'Browse';
-		cursor: pointer;
-		display: inline-block;
-		position: absolute;
-		top: 0;
-		right: -1px;
-		bottom: 0;
-		padding: .44em 1em 0;
-		background-color: lighten($input-borderColor, 5%);
-	}
-
-	.form-input-file {
-		opacity: 0;
-		position: absolute;
-	}
-}
-
-
-/**
- * Custom select element
- * http://jsbin.com/juvixufu/165/edit
- */
-.form-input--customSelectWrapper {
-	position: relative;
-	display: block;
-	padding: 0;
-
-	/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
-	&:after {
-		background: none;
-		color: #bbb;
-		content: "\25BC";
-		font-size: .7em;
-		padding: 0;
-		position: absolute;
-		right: 1.2em;
-		top: 50%;
-		margin-top: -9px;
-		z-index: 2;
-
-		/* These hacks make the select behind the arrow clickable in some browsers */
-		pointer-events: none;
-		background: url(#);
-	}
-}
-
-/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
-.form-input--select--custom {
-	-webkit-appearance: none;
-	appearance: none;
-}
-
-/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-	.form-input--select--custom::-ms-expand {
-		display: none;
-	}
-}
-
-
-/* This selector targets Firefox only with the trick of making the select 110% but clipped by the container at 100% to hide the arrow. We have to do this because getting rid of select appearance isn't supported consistently */
-.form-input--customSelectWrapper,
-x:-moz-any-link,
-x:default {
-	overflow: hidden;
-	width: 100%;
-}
-
-.form-input--select--custom,
-x:-moz-any-link,
-x:default {
-	width: 110%;
-	max-width: 110%;
-	min-width: 110%;
-	/* A zero right padding is needed or the native arrow can show up. Downside is the text will run over the arrow */
-	padding: .6em 0 .5em .8em;
-	/* Window is a Firefox way of hiding the arrow, sometimes works */
-	-moz-appearance: window;
-	text-indent: .01px;
-	text-overflow: "";
-}
-
-/* Focus style - TODO: Fix in FF */
-// select:focus {
-// 	outline:none;
-// 	box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
-// 	background-color:transparent;
-// 	color: #222;
-// 	border:1px solid #aaa;
-// }
-
-/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
-.form-input--customSelectWrapper:focus::-ms-value {
-	background: transparent;
-	color: #222;
-}
-
-/* Firefox focus has odd artifacts around the text, this kills that */
-.form-input--customSelectWrapper:-moz-focusring {
-	color: transparent;
-	text-shadow: 0 0 0 #000;
-}
-
-option {
-	font-weight: normal;
-}

From 10a85e0f9d06ce95374fd343ea7ea47c064bbe8a Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 4 Nov 2015 10:20:49 +0000
Subject: [PATCH 100/136] add scsslint exclude rules to various files

---
 assets/src/scss/_helper-classes.scss    | 2 ++
 assets/src/scss/_variables.scss         | 1 +
 assets/src/scss/components/_tables.scss | 2 ++
 assets/src/scss/views/_print.scss       | 9 ++++++---
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/src/scss/_helper-classes.scss b/assets/src/scss/_helper-classes.scss
index 03c78663..30b1da61 100644
--- a/assets/src/scss/_helper-classes.scss
+++ b/assets/src/scss/_helper-classes.scss
@@ -3,6 +3,8 @@
  * Non-semantic helper classes
  */
 
+// scss-lint:disable ImportantRule
+
 /**
  * Clearfix
  * http://www.cssmojo.com/latest_new_clearfix_so_far/
diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss
index dc0dae11..bf056b5b 100644
--- a/assets/src/scss/_variables.scss
+++ b/assets/src/scss/_variables.scss
@@ -7,6 +7,7 @@
  * - App-specific
  */
 
+// scss-lint:disable SpaceAfterVariableName
 
 /**
  * Typography
diff --git a/assets/src/scss/components/_tables.scss b/assets/src/scss/components/_tables.scss
index c10fe953..19a778cd 100644
--- a/assets/src/scss/components/_tables.scss
+++ b/assets/src/scss/components/_tables.scss
@@ -13,6 +13,8 @@
  * – .tableResponsive
  */
 
+// scss-lint:disable SelectorDepth
+
 /**
  * Define associated Table variables
  */
diff --git a/assets/src/scss/views/_print.scss b/assets/src/scss/views/_print.scss
index d5263e32..cfb97a94 100644
--- a/assets/src/scss/views/_print.scss
+++ b/assets/src/scss/views/_print.scss
@@ -1,6 +1,9 @@
-/* ==========================================================================
-   Print styles
-   ========================================================================== */
+/**
+ * Print styles
+ */
+
+// scss-lint:disable ImportantRule
+
 @media print {
 	* {
 		background: transparent !important;

From cfc8d06401d899abb9bb8af7d3b2348ce14614c1 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 4 Nov 2015 10:45:08 +0000
Subject: [PATCH 101/136] change colour of instagram icon

---
 assets/src/grunticon/social-instagram.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/grunticon/social-instagram.svg b/assets/src/grunticon/social-instagram.svg
index 8b35500a..38a285a8 100644
--- a/assets/src/grunticon/social-instagram.svg
+++ b/assets/src/grunticon/social-instagram.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 37 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g fill="#3f729b">
+        <g fill="#000">
             <path d="M5.2,0.7 L31.7,0.7 C34.2,0.7 36.3,2.8 36.3,5.3 L36.3,31.8 C36.3,34.3 34.2,36.4 31.7,36.4 L5.2,36.4 C2.7,36.4 0.6,34.3 0.6,31.8 L0.6,5.2 C0.7,2.7 2.7,0.7 5.2,0.7 L5.2,0.7 Z M26.7,4.6 C25.8,4.6 25.1,5.3 25.1,6.2 L25.1,10 C25.1,10.9 25.8,11.6 26.7,11.6 L30.7,11.6 C31.6,11.6 32.3,10.9 32.3,10 L32.3,6.2 C32.3,5.3 31.6,4.6 30.7,4.6 L26.7,4.6 L26.7,4.6 Z M32.3,15.7 L29.2,15.7 C29.5,16.7 29.7,17.7 29.7,18.8 C29.7,24.7 24.7,29.5 18.6,29.5 C12.5,29.5 7.5,24.7 7.5,18.8 C7.5,17.7 7.7,16.7 8,15.7 L4.7,15.7 L4.7,30.8 C4.7,31.6 5.3,32.2 6.1,32.2 L31,32.2 C31.8,32.2 32.4,31.6 32.4,30.8 L32.4,15.7 L32.3,15.7 Z M18.5,11.5 C14.5,11.5 11.3,14.6 11.3,18.4 C11.3,22.2 14.5,25.3 18.5,25.3 C22.5,25.3 25.7,22.2 25.7,18.4 C25.7,14.6 22.5,11.5 18.5,11.5 L18.5,11.5 Z"></path>
         </g>
     </g>

From cb4a3dddcdfa6770aff4fd0a3c944c5b41dd9f7c Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 4 Nov 2015 10:45:20 +0000
Subject: [PATCH 102/136] update styleguide

---
 styleguide/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/styleguide/index.html b/styleguide/index.html
index d99d7161..d0d2a61d 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -246,12 +246,12 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 								<label class="form-label">Checkboxes</label>
 								<div class="form-controlGroup-inputWrapper">
 									<label class="control control--custom">
-										<input class="control--custom-input" type="checkbox" name="myCheckbox" />
-										<span class="control-indicator control-indicator--tickbox"></span>
+										<input class="control--custom-input" type="checkbox" name="myCheckbox" checked/>
+										<span class="control-indicator control-indicator--checkbox"></span>
 										Check 1
 									</label>
 									<label class="control control--custom">
-										<input class="control--custom-input" type="checkbox" name="myCheckbox" />
+										<input class="control--custom-input" type="checkbox" name="myCheckbox" checked/>
 										<span class="control-indicator control-indicator--tickbox"></span>
 										Check 2
 									</label>
@@ -262,7 +262,7 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 								<label class="form-label">Radio buttons</label>
 								<div class="form-controlGroup-inputWrapper">
 									<label class="control control--custom">
-										<input class="control--custom-input" type="radio" id="radio1" name="optionsRadios" />
+										<input class="control--custom-input" type="radio" id="radio1" name="optionsRadios" checked />
 										<span class="control-indicator control-indicator--radio"></span>
 										My Radio Button Label Text
 									</label>

From dcaef2cfceea8447b1b680ae6adc4f219e8f689b Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 4 Nov 2015 10:45:30 +0000
Subject: [PATCH 103/136] recompile sass

---
 assets/dist/css/kickoff-old-ie.css | 702 +++++++++++++---------
 assets/dist/css/kickoff.css        | 915 +++++++++++++++++++----------
 assets/dist/css/styleguide.css     | 388 +++++++++++-
 3 files changed, 1420 insertions(+), 585 deletions(-)

diff --git a/assets/dist/css/kickoff-old-ie.css b/assets/dist/css/kickoff-old-ie.css
index bdff09e8..10929f6b 100644
--- a/assets/dist/css/kickoff-old-ie.css
+++ b/assets/dist/css/kickoff-old-ie.css
@@ -81,7 +81,7 @@
  */
 /**
  *  HiDPI mixin.
- *  @include hidpi-min() { ... };
+ *  @include hidpi { ... };
  *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
  */
 /**
@@ -141,12 +141,10 @@
  * Kickoff reset
  */
 html {
-  -moz-box-sizing: border-box;
-       box-sizing: border-box; }
+  box-sizing: border-box; }
 
 *, *:before, *:after {
-  -moz-box-sizing: inherit;
-       box-sizing: inherit; }
+  box-sizing: inherit; }
 
 /**
  * Normalize - CSS reset
@@ -325,8 +323,7 @@ figure {
  * Address differences between Firefox and other browsers.
  */
 hr {
-  -moz-box-sizing: content-box;
-       box-sizing: content-box;
+  box-sizing: content-box;
   height: 0; }
 
 /**
@@ -393,7 +390,8 @@ select {
  *    `input` and others.
  */
 button,
-html input[type="button"], input[type="reset"],
+html input[type="button"],
+input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
   /* 2 */
@@ -431,8 +429,7 @@ input {
  */
 input[type="checkbox"],
 input[type="radio"] {
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
+  box-sizing: border-box;
   /* 1 */
   padding: 0;
   /* 2 */ }
@@ -453,8 +450,7 @@ input[type="number"]::-webkit-outer-spin-button {
 input[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
-  -moz-box-sizing: content-box;
-       box-sizing: content-box;
+  box-sizing: content-box;
   /* 2 */ }
 
 /**
@@ -544,7 +540,6 @@ body {
   line-height: 1.4;
   color: #444;
   -webkit-font-feature-settings: "liga","dlig";
-     -moz-font-feature-settings: "liga","dlig";
           font-feature-settings: "liga","dlig"; }
 
 /**
@@ -603,63 +598,9 @@ h6, .h6, .zeta {
 small {
   font-size: 80%; }
 
-/**
- * Lists
- */
-ul {
-  list-style-type: disc; }
-
-ol {
-  list-style-type: decimal; }
-
-ul, ol {
-  padding: 0;
-  margin: 0 0 28px 28px; }
-  ul ul,
-  ul ol, ol ul,
-  ol ol {
-    margin-left: 56px; }
-  ul ul, ol ul {
-    list-style-type: circle; }
-    ul ul ul, ol ul ul {
-      list-style-type: square; }
-  ul ol, ol ol {
-    list-style-type: upper-roman; }
-    ul ol ol, ol ol ol {
-      list-style-type: lower-roman; }
-  ul ul, ul ol, ol ul, ol ol {
-    margin-bottom: 0; }
-
-/**
- * Unstyled lists
- */
-.unstyled {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  list-style-image: none; }
-
-/**
- * Definition lists
- */
-dl {
-  margin-bottom: 28px; }
-
-dt {
-  font-weight: bold; }
-
-dd {
-  margin-left: 28px; }
-
 /**
  * Miscellaneous
  */
-hr {
-  margin: 28px 0;
-  border: 0;
-  border-top: 1px solid #b3b3b3;
-  border-bottom: 1px solid #fff; }
-
 strong, b {
   font-weight: bold; }
 
@@ -688,8 +629,7 @@ blockquote {
     blockquote small:before {
       content: '\2014 \00A0'; }
 
-q:before,
-q:after,
+q:before, q:after,
 blockquote:before,
 blockquote:after {
   content: ""; }
@@ -723,7 +663,8 @@ samp {
 /**
  * Utilities
  */
-.text-centre, .text-center {
+.text-centre,
+.text-center {
   text-align: center; }
 
 .text-left {
@@ -734,14 +675,20 @@ samp {
 
 ::-moz-selection {
   color: #fff;
-  background: #16c98d;
+  background: #181830;
   text-shadow: none; }
 
 ::selection {
   color: #fff;
-  background: #16c98d;
+  background: #181830;
   text-shadow: none; }
 
+hr {
+  margin: 28px 0;
+  border: 0;
+  border-top: 1px solid #b3b3b3;
+  border-bottom: 1px solid #fff; }
+
 /**
  * Components:
  * See http://trykickoff.github.io/demos/components.html for more info
@@ -835,16 +782,12 @@ samp {
   border-radius: 5px;
   background-clip: padding-box;
   -webkit-transition: border 200ms ease-in-out;
-     -moz-transition: border 200ms ease-in-out;
           transition: border 200ms ease-in-out; }
   .form-input:focus {
-    border-color: #16c98d;
+    border-color: #181830;
     outline: 0;
     outline: thin dotted \9; }
-  .form-input[type="image"],
-  .form-input[type="checkbox"],
-  .form-input[type="radio"],
-  .form-input[type="range"] {
+  .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] {
     width: auto;
     height: auto;
     padding: 0;
@@ -852,8 +795,7 @@ samp {
     line-height: normal;
     cursor: pointer;
     border-radius: 0;
-    -moz-box-sizing: border-box;
-         box-sizing: border-box; }
+    box-sizing: border-box; }
   .form-input[type="image"] {
     border: 0; }
   .form-input[type="file"] {
@@ -878,8 +820,7 @@ samp {
   .form-input > .radio:first-child,
   .form-input > .checkbox:first-child {
     padding-top: 5px; }
-  .form-input[disabled],
-  .form-input[readonly] {
+  .form-input[disabled], .form-input[readonly] {
     background-color: #e6e6e6;
     border-color: #ccc;
     cursor: not-allowed; }
@@ -894,8 +835,7 @@ samp {
 
 .form-input--select {
   background-color: #fff; }
-  .form-input--select[multiple],
-  .form-input--select[size] {
+  .form-input--select[multiple], .form-input--select[size] {
     height: auto; }
 
 .form-input-file {
@@ -982,6 +922,7 @@ input[type="submit"] {
  * Form validation messages
  */
 .form-controlGroup .form-message {
+  display: none;
   padding-top: 0.5em;
   padding-left: 0.5em; }
 
@@ -1003,7 +944,7 @@ input[type="submit"] {
   .form-controlGroup.has-warning .form-input:focus {
     border-color: #f19417; }
 
-.form-controlGroup.has-warning .form-controlGroup-message {
+.form-controlGroup.has-warning .form-message {
   display: block;
   color: #f4aa47; }
 
@@ -1019,7 +960,7 @@ input[type="submit"] {
   .form-controlGroup.has-error .form-input:focus {
     border-color: #963a3c; }
 
-.form-controlGroup.has-error .form-controlGroup-message {
+.form-controlGroup.has-error .form-message {
   display: block;
   color: #B94A4D; }
 
@@ -1035,7 +976,7 @@ input[type="submit"] {
   .form-controlGroup.has-success .form-input:focus {
     border-color: #119b6d; }
 
-.form-controlGroup.has-success .form-controlGroup-message {
+.form-controlGroup.has-success .form-message {
   display: block;
   color: #16c98d; }
 
@@ -1051,7 +992,7 @@ input[type="submit"] {
   .form-controlGroup.has-info .form-input:focus {
     border-color: #206eab; }
 
-.form-controlGroup.has-info .form-controlGroup-message {
+.form-controlGroup.has-info .form-message {
   display: block;
   color: #288ad6; }
 
@@ -1106,7 +1047,7 @@ input[type="submit"] {
 /**
  * Custom Checkboxes and radios
  *
- * IE9+ :)
+ * IE9+
  *
  * --------------------------------
  *
@@ -1145,6 +1086,7 @@ input[type="submit"] {
 .control--custom-input {
   position: absolute;
   opacity: 0;
+  visibility: hidden;
   z-index: -1; }
 
 .control-indicator {
@@ -1153,48 +1095,51 @@ input[type="submit"] {
   width: 1em;
   height: 1em;
   -webkit-transition: all 100ms ease-in-out;
-     -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out;
-  border: 0.1em solid #A3B1B2;
-  background-color: #A3B1B2;
+  border: 0.1em solid #181830;
+  background-color: #181830;
   vertical-align: middle;
-  margin-top: -.1em;
+  margin-top: -.2em;
   box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
 
 .control--custom-input:focus ~ .control-indicator {
-  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #16c98d; }
+  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; }
 
-.control-indicator--checkbox {
+.control-indicator--checkbox,
+.control-indicator--tickbox {
   border-radius: .2em; }
-  .control-indicator--checkbox:before,
-  .control-indicator--checkbox:after {
+  .control-indicator--checkbox:before, .control-indicator--checkbox:after,
+  .control-indicator--tickbox:before,
+  .control-indicator--tickbox:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 90%;
-    height: 0.1em;
-    background-color: #f1f1f1;
     display: block;
     opacity: 0;
-    -webkit-transition: all 100ms ease-in-out;
-       -moz-transition: all 100ms ease-in-out;
-            transition: all 100ms ease-in-out; }
-  .control-indicator--checkbox:before {
-    -webkit-transform: translate(-50%, -50%) rotate(45deg);
-       -moz-transform: translate(-50%, -50%) rotate(45deg);
-        -ms-transform: translate(-50%, -50%) rotate(45deg);
-            transform: translate(-50%, -50%) rotate(45deg); }
-  .control-indicator--checkbox:after {
-    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
-       -moz-transform: translate(-50%, -50%) rotate(-45deg);
-        -ms-transform: translate(-50%, -50%) rotate(-45deg);
-            transform: translate(-50%, -50%) rotate(-45deg); }
-
-.control-indicator--checkbox--tick:before {
+    -webkit-transition: all 250ms ease-in-out;
+            transition: all 250ms ease-in-out; }
+
+.control-indicator--checkbox:before, .control-indicator--checkbox:after {
+  top: 50%;
+  width: 90%;
+  height: 0.1em;
+  background-color: #f1f1f1; }
+
+.control-indicator--checkbox:before {
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+          transform: translate(-50%, -50%) rotate(45deg); }
+
+.control-indicator--checkbox:after {
+  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+      -ms-transform: translate(-50%, -50%) rotate(-45deg);
+          transform: translate(-50%, -50%) rotate(-45deg); }
+
+.control-indicator--tickbox:before {
   top: 0;
   -webkit-transform: translateX(-50%) rotate(45deg);
-     -moz-transform: translateX(-50%) rotate(45deg);
       -ms-transform: translateX(-50%) rotate(45deg);
           transform: translateX(-50%) rotate(45deg);
   border: 0.1em solid #f1f1f1;
@@ -1204,11 +1149,12 @@ input[type="submit"] {
   border-top: 0;
   border-left: 0; }
 
-.control-indicator--checkbox--tick:after {
+.control-indicator--tickbox:after {
   display: none; }
 
-.control--custom-input:checked ~ .control-indicator--checkbox:before,
-.control--custom-input:checked ~ .control-indicator--checkbox:after {
+.control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after,
+.control--custom-input:checked ~ .control-indicator--tickbox:before,
+.control--custom-input:checked ~ .control-indicator--tickbox:after {
   opacity: 1; }
 
 .control-indicator--radio {
@@ -1216,108 +1162,58 @@ input[type="submit"] {
 
 .control--custom-input:checked ~ .control-indicator--radio {
   background-color: #f1f1f1;
-  border: 0.3em solid #A3B1B2; }
-
-/**
- * Custom file input
- */
-.form-input--fileWrapper--styled {
-  position: relative;
-  overflow: hidden; }
-  .form-input--fileWrapper--styled:before {
-    content: 'Choose file...'; }
-  .form-input--fileWrapper--styled:after {
-    content: 'Browse';
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: -1px;
-    bottom: 0;
-    padding: 0.44em 1em 0;
-    background-color: #d9d9d9; }
-  .form-input--fileWrapper--styled .form-input-file {
-    opacity: 0;
-    position: absolute; }
+  border: 0.3em solid #181830; }
 
 /**
  * Custom select element
- * http://jsbin.com/juvixufu/165/edit
- */
-.form-input--selectWrapper {
+ *
+ * Firefox 39+, IE10+
+ *
+ *	<div class="form-controlGroup">
+ *			<label for="cs-choice" class="form-label">Custom select</label>
+ *			<div class="form-controlGroup-inputWrapper form-controlGroup-inputWrapper--select">
+ *				<select id="cs-choice" name="cs-choice" class="form-input form-input--select">
+ *					<option value="--">Select title</option>
+ *					<option value="Mr">Mr</option>
+ *					<option value="Mrs">Mrs</option>
+ *				</select>
+ *			</div>
+ *	</div>
+ */
+.form-controlGroup-inputWrapper--select {
   position: relative;
   display: block;
-  padding: 0; }
-
-/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
-.form-input--selectWrapper select {
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  margin: 0;
-  background: none;
-  border: 0;
-  outline: none;
-  /* Remove select styling */
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-appearance: none;
-  /* Magic font size number to prevent iOS text zoom */
-  padding: .5em;
-  height: 2.3em;
-  line-height: 1; }
-
-/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .form-input--selectWrapper select::-ms-expand {
-    display: none; } }
-
-/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
-.form-input--selectWrapper:after {
-  background: none;
-  color: #bbb;
-  content: "\25BC";
-  font-size: .7em;
   padding: 0;
-  position: absolute;
-  right: 1.2em;
-  top: 50%;
-  margin-top: -9px;
-  z-index: 2;
-  /* These hacks make the select behind the arrow clickable in some browsers */
-  pointer-events: none;
-  background: url(#); }
-
-/* This selector targets Firefox only with the trick of making the select 110% but clipped by the container at 100% to hide the arrow. We have to do this because getting rid of select appearance isn't supported consistently */
-.form-input--selectWrapper,
-x:-moz-any-link,
-x:default {
-  overflow: hidden;
-  width: 100%; }
-
-.form-input--selectWrapper select,
-x:-moz-any-link,
-x:default {
-  width: 110%;
-  max-width: 110%;
-  min-width: 110%;
-  /* A zero right padding is needed or the native arrow can show up. Downside is the text will run over the arrow */
-  padding: 0.6em 0 0.5em 0.8em;
-  /* Window is a Firefox way of hiding the arrow, sometimes works */
-  -moz-appearance: window;
-  text-indent: .01px;
-  text-overflow: ""; }
-
-/* Focus style - TODO: Fix in FF */
-/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
-.form-input--selectWrapper:focus::-ms-value {
-  background: transparent;
-  color: #222; }
-
-/* Firefox focus has odd artifacts around the text, this kills that */
-.form-input--selectWrapper:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #000; }
+  /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ }
+  .form-controlGroup-inputWrapper--select:after {
+    color: #181830;
+    content: "\25BC";
+    font-size: .7em;
+    padding: 0;
+    position: absolute;
+    right: 1.2em;
+    top: 50%;
+    margin-top: -9px;
+    z-index: 2;
+    /* These hacks make the select behind the arrow clickable in some browsers */
+    -ms-pointer-events: none;
+    pointer-events: none;
+    background: url(#); }
+  .form-controlGroup-inputWrapper--select .form-input--select {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    /* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
+    /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */ }
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      .form-controlGroup-inputWrapper--select .form-input--select::-ms-expand {
+        display: none; } }
+    .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
+      background: transparent;
+      color: #222; }
+
+.lt-ie10 .form-input--selectWrapper:after {
+  display: none; }
 
 option {
   font-weight: normal; }
@@ -1328,7 +1224,8 @@ option {
 [class^="icon-"], [class*=" icon-"] {
   speak: none;
   background-size: contain;
-  background-position: center center; }
+  background-position: center center;
+  background-repeat: no-repeat; }
 
 .icon-large {
   display: block;
@@ -1346,18 +1243,17 @@ option {
  */
 a {
   -webkit-transition: all 100ms ease-in-out;
-     -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out; }
   a, a:link {
-    color: #16c98d;
+    color: #288ad6;
     text-decoration: none; }
   a:visited {
-    color: #16c98d;
+    color: #288ad6;
     text-decoration: none; }
   a:hover, a:focus {
-    color: #0c6d4d; }
+    color: #185380; }
   a:active {
-    color: #0c6d4d; }
+    color: #185380; }
 
 /**
  * Buttons
@@ -1426,39 +1322,25 @@ a {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none; }
-  .btn,
-  .btn:link,
-  .btn:visited {
+  .btn, .btn:link, .btn:visited {
     color: #fff; }
-  .btn:hover,
-  .btn:active,
-  .btn:focus {
+  .btn:hover, .btn:active, .btn:focus {
     background-color: #798d8f; }
-  .btn,
-  .btn:hover,
-  .btn:active,
-  .btn:focus,
-  .btn:visited {
+  .btn, .btn:hover, .btn:active, .btn:focus, .btn:visited {
     text-decoration: none; }
-  .btn:active,
-  .btn:focus {
+  .btn:active, .btn:focus {
     outline: none; }
-  .btn.disabled,
-  .btn[disabled] {
+  .btn.disabled, .btn[disabled] {
     cursor: default;
     background-image: none;
     opacity: .65; }
 
 .btn--primary {
-  background-color: #16c98d; }
-  .btn--primary,
-  .btn--primary:link,
-  .btn--primary:visited {
+  background-color: #288ad6; }
+  .btn--primary, .btn--primary:link, .btn--primary:visited {
     color: #fff; }
-  .btn--primary:hover,
-  .btn--primary:active,
-  .btn--primary:focus {
-    background-color: #119b6d; }
+  .btn--primary:hover, .btn--primary:active, .btn--primary:focus {
+    background-color: #206eab; }
 
 .btn--block {
   display: block;
@@ -1530,8 +1412,7 @@ input[type="button"].btn--block {
   min-height: 1px;
   position: relative;
   clear: none;
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
+  box-sizing: border-box;
   margin-left: 2%; }
   .g-col:first-child {
     margin-left: 0; }
@@ -1602,7 +1483,7 @@ input[type="button"].btn--block {
  * </ul>
  *
  * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow">
+ * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">
  *     <li></li>
  * </ul>
  */
@@ -1617,34 +1498,258 @@ input[type="button"].btn--block {
   .l-blockGrid > li {
     display: block;
     height: auto; }
-  .l-blockGrid > li {
-    display: block;
-    height: auto;
-    float: left; }
   .l-blockGrid.l-blockGrid--1up > li {
+    float: left;
     width: 100%; }
+    .l-blockGrid.l-blockGrid--1up > li:nth-of-type(1n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--1up > li:not(:nth-of-type(1n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--2up > li {
+    float: left;
     width: 50%; }
+    .l-blockGrid.l-blockGrid--2up > li:nth-of-type(2n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--2up > li:not(:nth-of-type(2n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--3up > li {
+    float: left;
     width: 33.3333333333%; }
+    .l-blockGrid.l-blockGrid--3up > li:nth-of-type(3n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--3up > li:not(:nth-of-type(3n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--4up > li {
+    float: left;
     width: 25%; }
+    .l-blockGrid.l-blockGrid--4up > li:nth-of-type(4n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--4up > li:not(:nth-of-type(4n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--5up > li {
+    float: left;
     width: 20%; }
+    .l-blockGrid.l-blockGrid--5up > li:nth-of-type(5n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--5up > li:not(:nth-of-type(5n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--6up > li {
+    float: left;
     width: 16.6666666667%; }
+    .l-blockGrid.l-blockGrid--6up > li:nth-of-type(6n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--6up > li:not(:nth-of-type(6n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--7up > li {
+    float: left;
     width: 14.2857142857%; }
+    .l-blockGrid.l-blockGrid--7up > li:nth-of-type(7n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--7up > li:not(:nth-of-type(7n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--8up > li {
+    float: left;
     width: 12.5%; }
+    .l-blockGrid.l-blockGrid--8up > li:nth-of-type(8n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--8up > li:not(:nth-of-type(8n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--9up > li {
+    float: left;
     width: 11.1111111111%; }
+    .l-blockGrid.l-blockGrid--9up > li:nth-of-type(9n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--9up > li:not(:nth-of-type(9n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--10up > li {
+    float: left;
     width: 10%; }
+    .l-blockGrid.l-blockGrid--10up > li:nth-of-type(10n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--10up > li:not(:nth-of-type(10n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--11up > li {
+    float: left;
     width: 9.0909090909%; }
+    .l-blockGrid.l-blockGrid--11up > li:nth-of-type(11n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--11up > li:not(:nth-of-type(11n + 1)) {
+      clear: none; }
   .l-blockGrid.l-blockGrid--12up > li {
+    float: left;
+    width: 8.3333333333%; }
+    .l-blockGrid.l-blockGrid--12up > li:nth-of-type(12n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--12up > li:not(:nth-of-type(12n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--1up--mid > li {
+    float: left;
+    width: 100%; }
+    .l-blockGrid.l-blockGrid--1up--mid > li:nth-of-type(1n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--1up--mid > li:not(:nth-of-type(1n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--2up--mid > li {
+    float: left;
+    width: 50%; }
+    .l-blockGrid.l-blockGrid--2up--mid > li:nth-of-type(2n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--2up--mid > li:not(:nth-of-type(2n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--3up--mid > li {
+    float: left;
+    width: 33.3333333333%; }
+    .l-blockGrid.l-blockGrid--3up--mid > li:nth-of-type(3n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--3up--mid > li:not(:nth-of-type(3n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--4up--mid > li {
+    float: left;
+    width: 25%; }
+    .l-blockGrid.l-blockGrid--4up--mid > li:nth-of-type(4n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--4up--mid > li:not(:nth-of-type(4n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--5up--mid > li {
+    float: left;
+    width: 20%; }
+    .l-blockGrid.l-blockGrid--5up--mid > li:nth-of-type(5n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--5up--mid > li:not(:nth-of-type(5n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--6up--mid > li {
+    float: left;
+    width: 16.6666666667%; }
+    .l-blockGrid.l-blockGrid--6up--mid > li:nth-of-type(6n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--6up--mid > li:not(:nth-of-type(6n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--7up--mid > li {
+    float: left;
+    width: 14.2857142857%; }
+    .l-blockGrid.l-blockGrid--7up--mid > li:nth-of-type(7n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--7up--mid > li:not(:nth-of-type(7n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--8up--mid > li {
+    float: left;
+    width: 12.5%; }
+    .l-blockGrid.l-blockGrid--8up--mid > li:nth-of-type(8n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--8up--mid > li:not(:nth-of-type(8n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--9up--mid > li {
+    float: left;
+    width: 11.1111111111%; }
+    .l-blockGrid.l-blockGrid--9up--mid > li:nth-of-type(9n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--9up--mid > li:not(:nth-of-type(9n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--10up--mid > li {
+    float: left;
+    width: 10%; }
+    .l-blockGrid.l-blockGrid--10up--mid > li:nth-of-type(10n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--10up--mid > li:not(:nth-of-type(10n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--11up--mid > li {
+    float: left;
+    width: 9.0909090909%; }
+    .l-blockGrid.l-blockGrid--11up--mid > li:nth-of-type(11n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--11up--mid > li:not(:nth-of-type(11n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--12up--mid > li {
+    float: left;
     width: 8.3333333333%; }
+    .l-blockGrid.l-blockGrid--12up--mid > li:nth-of-type(12n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--12up--mid > li:not(:nth-of-type(12n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--1up--wide > li {
+    float: left;
+    width: 100%; }
+    .l-blockGrid.l-blockGrid--1up--wide > li:nth-of-type(1n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--1up--wide > li:not(:nth-of-type(1n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--2up--wide > li {
+    float: left;
+    width: 50%; }
+    .l-blockGrid.l-blockGrid--2up--wide > li:nth-of-type(2n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--2up--wide > li:not(:nth-of-type(2n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--3up--wide > li {
+    float: left;
+    width: 33.3333333333%; }
+    .l-blockGrid.l-blockGrid--3up--wide > li:nth-of-type(3n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--3up--wide > li:not(:nth-of-type(3n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--4up--wide > li {
+    float: left;
+    width: 25%; }
+    .l-blockGrid.l-blockGrid--4up--wide > li:nth-of-type(4n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--4up--wide > li:not(:nth-of-type(4n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--5up--wide > li {
+    float: left;
+    width: 20%; }
+    .l-blockGrid.l-blockGrid--5up--wide > li:nth-of-type(5n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--5up--wide > li:not(:nth-of-type(5n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--6up--wide > li {
+    float: left;
+    width: 16.6666666667%; }
+    .l-blockGrid.l-blockGrid--6up--wide > li:nth-of-type(6n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--6up--wide > li:not(:nth-of-type(6n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--7up--wide > li {
+    float: left;
+    width: 14.2857142857%; }
+    .l-blockGrid.l-blockGrid--7up--wide > li:nth-of-type(7n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--7up--wide > li:not(:nth-of-type(7n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--8up--wide > li {
+    float: left;
+    width: 12.5%; }
+    .l-blockGrid.l-blockGrid--8up--wide > li:nth-of-type(8n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--8up--wide > li:not(:nth-of-type(8n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--9up--wide > li {
+    float: left;
+    width: 11.1111111111%; }
+    .l-blockGrid.l-blockGrid--9up--wide > li:nth-of-type(9n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--9up--wide > li:not(:nth-of-type(9n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--10up--wide > li {
+    float: left;
+    width: 10%; }
+    .l-blockGrid.l-blockGrid--10up--wide > li:nth-of-type(10n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--10up--wide > li:not(:nth-of-type(10n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--11up--wide > li {
+    float: left;
+    width: 9.0909090909%; }
+    .l-blockGrid.l-blockGrid--11up--wide > li:nth-of-type(11n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--11up--wide > li:not(:nth-of-type(11n + 1)) {
+      clear: none; }
+  .l-blockGrid.l-blockGrid--12up--wide > li {
+    float: left;
+    width: 8.3333333333%; }
+    .l-blockGrid.l-blockGrid--12up--wide > li:nth-of-type(12n + 1) {
+      clear: left; }
+    .l-blockGrid.l-blockGrid--12up--wide > li:not(:nth-of-type(12n + 1)) {
+      clear: none; }
 
 /**
  * Guttered block grid
@@ -1657,9 +1762,57 @@ input[type="button"].btn--block {
 
 /**
  * Lists
+ * - (Un)ordered lists
+ * - Unstyled lists
+ * - Definition lists
  * - Centred lists
  * - Floated lists
  */
+ul {
+  list-style-type: disc; }
+
+ol {
+  list-style-type: decimal; }
+
+ul, ol {
+  padding: 0;
+  margin: 0 0 28px 28px; }
+  ul ul,
+  ul ol, ol ul,
+  ol ol {
+    margin-left: 56px; }
+  ul ul, ol ul {
+    list-style-type: circle; }
+    ul ul ul, ol ul ul {
+      list-style-type: square; }
+  ul ol, ol ol {
+    list-style-type: upper-roman; }
+    ul ol ol, ol ol ol {
+      list-style-type: lower-roman; }
+  ul ul, ul ol, ol ul, ol ol {
+    margin-bottom: 0; }
+
+/**
+ * Unstyled lists
+ */
+.unstyled {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  list-style-image: none; }
+
+/**
+ * Definition lists
+ */
+dl {
+  margin-bottom: 28px; }
+
+dt {
+  font-weight: bold; }
+
+dd {
+  margin-left: 28px; }
+
 /**
  * Centred lists
  *
@@ -1708,6 +1861,19 @@ svg:not(:root) {
 img, object, embed, video {
   max-width: 100%; }
 
+/**
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle; }
+
 /**
  * Media Object
  *
@@ -1738,11 +1904,11 @@ img, object, embed, video {
 .media-body {
   display: table-cell;
   vertical-align: middle; }
-  .media--top .media-img,
-  .media--top .media-body {
+  .media--top .media-img, .media--top
+  .media-body {
     vertical-align: top; }
-  .media--bottom .media-img,
-  .media--bottom .media-body {
+  .media--bottom .media-img, .media--bottom
+  .media-body {
     vertical-align: bottom; }
 
 .media-body {
@@ -1971,7 +2137,6 @@ pre {
     z-index: 100;
     background-color: #fff;
     -webkit-transition: all 100ms ease-in-out;
-       -moz-transition: all 100ms ease-in-out;
             transition: all 100ms ease-in-out; }
     .skipToContent a:focus {
       top: 5px; }
@@ -1997,6 +2162,12 @@ body {
   .lt-ie9 .l-container {
     min-width: 1000px; }
 
+.browserupgrade {
+  margin: .2em 0;
+  background: #ccc;
+  color: #000;
+  padding: .2em 0; }
+
 /**
  * Views
  */
@@ -2043,8 +2214,7 @@ body {
   padding: 0;
   position: absolute;
   width: 1px; }
-  .is-visuallyHidden.focusable:active,
-  .is-visuallyHidden.focusable:focus {
+  .is-visuallyHidden.focusable:active, .is-visuallyHidden.focusable:focus {
     clip: auto;
     height: auto;
     margin: 0;
@@ -2075,7 +2245,7 @@ body {
  * Responsive Utilities
  */
 * {
-  -webkit-tap-highlight-color: #16c98d !important; }
+  -webkit-tap-highlight-color: #181830 !important; }
 
 /* A hack for HTML5 contenteditable attribute on mobile */
 textarea[contenteditable] {
@@ -2091,23 +2261,25 @@ textarea[contenteditable] {
   #perfmatters
   */
   -webkit-backface-visibility: hidden;
-     -moz-backface-visibility: hidden;
           backface-visibility: hidden; }
 
 .transition {
   -webkit-transition: all 100ms ease-in-out;
-     -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out; }
 
 /* Print styles */
-/* ==========================================================================
-   Print styles
-   ========================================================================== */
+/**
+ * Print styles
+ */
 @media print {
-  * {
+  *,
+  *:before,
+  *:after,
+  *:first-letter,
+  *:first-line {
     background: transparent !important;
     color: #000 !important;
-    /* Black prints faster: h5bp.com/s */
+    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
     box-shadow: none !important;
     text-shadow: none !important; }
   a:visited {
diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css
index 85888a03..b0ed7724 100644
--- a/assets/dist/css/kickoff.css
+++ b/assets/dist/css/kickoff.css
@@ -81,7 +81,7 @@
  */
 /**
  *  HiDPI mixin.
- *  @include hidpi-min() { ... };
+ *  @include hidpi { ... };
  *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
  */
 /**
@@ -141,12 +141,10 @@
  * Kickoff reset
  */
 html {
-  -moz-box-sizing: border-box;
-       box-sizing: border-box; }
+  box-sizing: border-box; }
 
 *, *:before, *:after {
-  -moz-box-sizing: inherit;
-       box-sizing: inherit; }
+  box-sizing: inherit; }
 
 /**
  * Normalize - CSS reset
@@ -325,8 +323,7 @@ figure {
  * Address differences between Firefox and other browsers.
  */
 hr {
-  -moz-box-sizing: content-box;
-       box-sizing: content-box;
+  box-sizing: content-box;
   height: 0; }
 
 /**
@@ -393,7 +390,8 @@ select {
  *    `input` and others.
  */
 button,
-html input[type="button"], input[type="reset"],
+html input[type="button"],
+input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
   /* 2 */
@@ -431,8 +429,7 @@ input {
  */
 input[type="checkbox"],
 input[type="radio"] {
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
+  box-sizing: border-box;
   /* 1 */
   padding: 0;
   /* 2 */ }
@@ -453,8 +450,7 @@ input[type="number"]::-webkit-outer-spin-button {
 input[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
-  -moz-box-sizing: content-box;
-       box-sizing: content-box;
+  box-sizing: content-box;
   /* 2 */ }
 
 /**
@@ -546,7 +542,6 @@ body {
   line-height: 1.4;
   color: #444;
   -webkit-font-feature-settings: "liga","dlig";
-     -moz-font-feature-settings: "liga","dlig";
           font-feature-settings: "liga","dlig"; }
 
 /**
@@ -605,63 +600,9 @@ h6, .h6, .zeta {
 small {
   font-size: 80%; }
 
-/**
- * Lists
- */
-ul {
-  list-style-type: disc; }
-
-ol {
-  list-style-type: decimal; }
-
-ul, ol {
-  padding: 0;
-  margin: 0 0 28px 28px; }
-  ul ul,
-  ul ol, ol ul,
-  ol ol {
-    margin-left: 56px; }
-  ul ul, ol ul {
-    list-style-type: circle; }
-    ul ul ul, ol ul ul {
-      list-style-type: square; }
-  ul ol, ol ol {
-    list-style-type: upper-roman; }
-    ul ol ol, ol ol ol {
-      list-style-type: lower-roman; }
-  ul ul, ul ol, ol ul, ol ol {
-    margin-bottom: 0; }
-
-/**
- * Unstyled lists
- */
-.unstyled {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  list-style-image: none; }
-
-/**
- * Definition lists
- */
-dl {
-  margin-bottom: 28px; }
-
-dt {
-  font-weight: bold; }
-
-dd {
-  margin-left: 28px; }
-
 /**
  * Miscellaneous
  */
-hr {
-  margin: 28px 0;
-  border: 0;
-  border-top: 1px solid #b3b3b3;
-  border-bottom: 1px solid #fff; }
-
 strong, b {
   font-weight: bold; }
 
@@ -690,8 +631,7 @@ blockquote {
     blockquote small:before {
       content: '\2014 \00A0'; }
 
-q:before,
-q:after,
+q:before, q:after,
 blockquote:before,
 blockquote:after {
   content: ""; }
@@ -725,7 +665,8 @@ samp {
 /**
  * Utilities
  */
-.text-centre, .text-center {
+.text-centre,
+.text-center {
   text-align: center; }
 
 .text-left {
@@ -736,14 +677,20 @@ samp {
 
 ::-moz-selection {
   color: #fff;
-  background: #16c98d;
+  background: #181830;
   text-shadow: none; }
 
 ::selection {
   color: #fff;
-  background: #16c98d;
+  background: #181830;
   text-shadow: none; }
 
+hr {
+  margin: 28px 0;
+  border: 0;
+  border-top: 1px solid #b3b3b3;
+  border-bottom: 1px solid #fff; }
+
 /**
  * Components:
  * See http://trykickoff.github.io/demos/components.html for more info
@@ -837,16 +784,12 @@ samp {
   border-radius: 5px;
   background-clip: padding-box;
   -webkit-transition: border 200ms ease-in-out;
-     -moz-transition: border 200ms ease-in-out;
           transition: border 200ms ease-in-out; }
   .form-input:focus {
-    border-color: #16c98d;
+    border-color: #181830;
     outline: 0;
     outline: thin dotted \9; }
-  .form-input[type="image"],
-  .form-input[type="checkbox"],
-  .form-input[type="radio"],
-  .form-input[type="range"] {
+  .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] {
     width: auto;
     height: auto;
     padding: 0;
@@ -854,8 +797,7 @@ samp {
     line-height: normal;
     cursor: pointer;
     border-radius: 0;
-    -moz-box-sizing: border-box;
-         box-sizing: border-box; }
+    box-sizing: border-box; }
   .form-input[type="image"] {
     border: 0; }
   .form-input[type="file"] {
@@ -880,8 +822,7 @@ samp {
   .form-input > .radio:first-child,
   .form-input > .checkbox:first-child {
     padding-top: 5px; }
-  .form-input[disabled],
-  .form-input[readonly] {
+  .form-input[disabled], .form-input[readonly] {
     background-color: #e6e6e6;
     border-color: #ccc;
     cursor: not-allowed; }
@@ -896,8 +837,7 @@ samp {
 
 .form-input--select {
   background-color: #fff; }
-  .form-input--select[multiple],
-  .form-input--select[size] {
+  .form-input--select[multiple], .form-input--select[size] {
     height: auto; }
 
 .form-input-file {
@@ -984,6 +924,7 @@ input[type="submit"] {
  * Form validation messages
  */
 .form-controlGroup .form-message {
+  display: none;
   padding-top: 0.5em;
   padding-left: 0.5em; }
 
@@ -1005,7 +946,7 @@ input[type="submit"] {
   .form-controlGroup.has-warning .form-input:focus {
     border-color: #f19417; }
 
-.form-controlGroup.has-warning .form-controlGroup-message {
+.form-controlGroup.has-warning .form-message {
   display: block;
   color: #f4aa47; }
 
@@ -1021,7 +962,7 @@ input[type="submit"] {
   .form-controlGroup.has-error .form-input:focus {
     border-color: #963a3c; }
 
-.form-controlGroup.has-error .form-controlGroup-message {
+.form-controlGroup.has-error .form-message {
   display: block;
   color: #B94A4D; }
 
@@ -1037,7 +978,7 @@ input[type="submit"] {
   .form-controlGroup.has-success .form-input:focus {
     border-color: #119b6d; }
 
-.form-controlGroup.has-success .form-controlGroup-message {
+.form-controlGroup.has-success .form-message {
   display: block;
   color: #16c98d; }
 
@@ -1053,7 +994,7 @@ input[type="submit"] {
   .form-controlGroup.has-info .form-input:focus {
     border-color: #206eab; }
 
-.form-controlGroup.has-info .form-controlGroup-message {
+.form-controlGroup.has-info .form-message {
   display: block;
   color: #288ad6; }
 
@@ -1105,7 +1046,7 @@ input[type="submit"] {
 /**
  * Custom Checkboxes and radios
  *
- * IE9+ :)
+ * IE9+
  *
  * --------------------------------
  *
@@ -1144,6 +1085,7 @@ input[type="submit"] {
 .control--custom-input {
   position: absolute;
   opacity: 0;
+  visibility: hidden;
   z-index: -1; }
 
 .control-indicator {
@@ -1152,48 +1094,51 @@ input[type="submit"] {
   width: 1em;
   height: 1em;
   -webkit-transition: all 100ms ease-in-out;
-     -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out;
-  border: 0.1em solid #A3B1B2;
-  background-color: #A3B1B2;
+  border: 0.1em solid #181830;
+  background-color: #181830;
   vertical-align: middle;
-  margin-top: -.1em;
+  margin-top: -.2em;
   box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
 
 .control--custom-input:focus ~ .control-indicator {
-  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #16c98d; }
+  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; }
 
-.control-indicator--checkbox {
+.control-indicator--checkbox,
+.control-indicator--tickbox {
   border-radius: .2em; }
-  .control-indicator--checkbox:before,
-  .control-indicator--checkbox:after {
+  .control-indicator--checkbox:before, .control-indicator--checkbox:after,
+  .control-indicator--tickbox:before,
+  .control-indicator--tickbox:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 90%;
-    height: 0.1em;
-    background-color: #f1f1f1;
     display: block;
     opacity: 0;
-    -webkit-transition: all 100ms ease-in-out;
-       -moz-transition: all 100ms ease-in-out;
-            transition: all 100ms ease-in-out; }
-  .control-indicator--checkbox:before {
-    -webkit-transform: translate(-50%, -50%) rotate(45deg);
-       -moz-transform: translate(-50%, -50%) rotate(45deg);
-        -ms-transform: translate(-50%, -50%) rotate(45deg);
-            transform: translate(-50%, -50%) rotate(45deg); }
-  .control-indicator--checkbox:after {
-    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
-       -moz-transform: translate(-50%, -50%) rotate(-45deg);
-        -ms-transform: translate(-50%, -50%) rotate(-45deg);
-            transform: translate(-50%, -50%) rotate(-45deg); }
-
-.control-indicator--checkbox--tick:before {
+    -webkit-transition: all 250ms ease-in-out;
+            transition: all 250ms ease-in-out; }
+
+.control-indicator--checkbox:before, .control-indicator--checkbox:after {
+  top: 50%;
+  width: 90%;
+  height: 0.1em;
+  background-color: #f1f1f1; }
+
+.control-indicator--checkbox:before {
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+          transform: translate(-50%, -50%) rotate(45deg); }
+
+.control-indicator--checkbox:after {
+  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+      -ms-transform: translate(-50%, -50%) rotate(-45deg);
+          transform: translate(-50%, -50%) rotate(-45deg); }
+
+.control-indicator--tickbox:before {
   top: 0;
   -webkit-transform: translateX(-50%) rotate(45deg);
-     -moz-transform: translateX(-50%) rotate(45deg);
       -ms-transform: translateX(-50%) rotate(45deg);
           transform: translateX(-50%) rotate(45deg);
   border: 0.1em solid #f1f1f1;
@@ -1203,11 +1148,12 @@ input[type="submit"] {
   border-top: 0;
   border-left: 0; }
 
-.control-indicator--checkbox--tick:after {
+.control-indicator--tickbox:after {
   display: none; }
 
-.control--custom-input:checked ~ .control-indicator--checkbox:before,
-.control--custom-input:checked ~ .control-indicator--checkbox:after {
+.control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after,
+.control--custom-input:checked ~ .control-indicator--tickbox:before,
+.control--custom-input:checked ~ .control-indicator--tickbox:after {
   opacity: 1; }
 
 .control-indicator--radio {
@@ -1215,108 +1161,58 @@ input[type="submit"] {
 
 .control--custom-input:checked ~ .control-indicator--radio {
   background-color: #f1f1f1;
-  border: 0.3em solid #A3B1B2; }
-
-/**
- * Custom file input
- */
-.form-input--fileWrapper--styled {
-  position: relative;
-  overflow: hidden; }
-  .form-input--fileWrapper--styled:before {
-    content: 'Choose file...'; }
-  .form-input--fileWrapper--styled:after {
-    content: 'Browse';
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: -1px;
-    bottom: 0;
-    padding: 0.44em 1em 0;
-    background-color: #d9d9d9; }
-  .form-input--fileWrapper--styled .form-input-file {
-    opacity: 0;
-    position: absolute; }
+  border: 0.3em solid #181830; }
 
 /**
  * Custom select element
- * http://jsbin.com/juvixufu/165/edit
- */
-.form-input--selectWrapper {
+ *
+ * Firefox 39+, IE10+
+ *
+ *	<div class="form-controlGroup">
+ *			<label for="cs-choice" class="form-label">Custom select</label>
+ *			<div class="form-controlGroup-inputWrapper form-controlGroup-inputWrapper--select">
+ *				<select id="cs-choice" name="cs-choice" class="form-input form-input--select">
+ *					<option value="--">Select title</option>
+ *					<option value="Mr">Mr</option>
+ *					<option value="Mrs">Mrs</option>
+ *				</select>
+ *			</div>
+ *	</div>
+ */
+.form-controlGroup-inputWrapper--select {
   position: relative;
   display: block;
-  padding: 0; }
-
-/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
-.form-input--selectWrapper select {
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  margin: 0;
-  background: none;
-  border: 0;
-  outline: none;
-  /* Remove select styling */
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-appearance: none;
-  /* Magic font size number to prevent iOS text zoom */
-  padding: .5em;
-  height: 2.3em;
-  line-height: 1; }
-
-/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .form-input--selectWrapper select::-ms-expand {
-    display: none; } }
-
-/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
-.form-input--selectWrapper:after {
-  background: none;
-  color: #bbb;
-  content: "\25BC";
-  font-size: .7em;
   padding: 0;
-  position: absolute;
-  right: 1.2em;
-  top: 50%;
-  margin-top: -9px;
-  z-index: 2;
-  /* These hacks make the select behind the arrow clickable in some browsers */
-  pointer-events: none;
-  background: url(#); }
-
-/* This selector targets Firefox only with the trick of making the select 110% but clipped by the container at 100% to hide the arrow. We have to do this because getting rid of select appearance isn't supported consistently */
-.form-input--selectWrapper,
-x:-moz-any-link,
-x:default {
-  overflow: hidden;
-  width: 100%; }
-
-.form-input--selectWrapper select,
-x:-moz-any-link,
-x:default {
-  width: 110%;
-  max-width: 110%;
-  min-width: 110%;
-  /* A zero right padding is needed or the native arrow can show up. Downside is the text will run over the arrow */
-  padding: 0.6em 0 0.5em 0.8em;
-  /* Window is a Firefox way of hiding the arrow, sometimes works */
-  -moz-appearance: window;
-  text-indent: .01px;
-  text-overflow: ""; }
-
-/* Focus style - TODO: Fix in FF */
-/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
-.form-input--selectWrapper:focus::-ms-value {
-  background: transparent;
-  color: #222; }
-
-/* Firefox focus has odd artifacts around the text, this kills that */
-.form-input--selectWrapper:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #000; }
+  /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ }
+  .form-controlGroup-inputWrapper--select:after {
+    color: #181830;
+    content: "\25BC";
+    font-size: .7em;
+    padding: 0;
+    position: absolute;
+    right: 1.2em;
+    top: 50%;
+    margin-top: -9px;
+    z-index: 2;
+    /* These hacks make the select behind the arrow clickable in some browsers */
+    -ms-pointer-events: none;
+    pointer-events: none;
+    background: url(#); }
+  .form-controlGroup-inputWrapper--select .form-input--select {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    /* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
+    /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */ }
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      .form-controlGroup-inputWrapper--select .form-input--select::-ms-expand {
+        display: none; } }
+    .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
+      background: transparent;
+      color: #222; }
+
+.lt-ie10 .form-input--selectWrapper:after {
+  display: none; }
 
 option {
   font-weight: normal; }
@@ -1327,7 +1223,8 @@ option {
 [class^="icon-"], [class*=" icon-"] {
   speak: none;
   background-size: contain;
-  background-position: center center; }
+  background-position: center center;
+  background-repeat: no-repeat; }
 
 .icon-large {
   display: block;
@@ -1345,18 +1242,17 @@ option {
  */
 a {
   -webkit-transition: all 100ms ease-in-out;
-     -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out; }
   a, a:link {
-    color: #16c98d;
+    color: #288ad6;
     text-decoration: none; }
   a:visited {
-    color: #16c98d;
+    color: #288ad6;
     text-decoration: none; }
   a:hover, a:focus {
-    color: #0c6d4d; }
+    color: #185380; }
   a:active {
-    color: #0c6d4d; }
+    color: #185380; }
 
 /**
  * Buttons
@@ -1425,39 +1321,25 @@ a {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none; }
-  .btn,
-  .btn:link,
-  .btn:visited {
+  .btn, .btn:link, .btn:visited {
     color: #fff; }
-  .btn:hover,
-  .btn:active,
-  .btn:focus {
+  .btn:hover, .btn:active, .btn:focus {
     background-color: #798d8f; }
-  .btn,
-  .btn:hover,
-  .btn:active,
-  .btn:focus,
-  .btn:visited {
+  .btn, .btn:hover, .btn:active, .btn:focus, .btn:visited {
     text-decoration: none; }
-  .btn:active,
-  .btn:focus {
+  .btn:active, .btn:focus {
     outline: none; }
-  .btn.disabled,
-  .btn[disabled] {
+  .btn.disabled, .btn[disabled] {
     cursor: default;
     background-image: none;
     opacity: .65; }
 
 .btn--primary {
-  background-color: #16c98d; }
-  .btn--primary,
-  .btn--primary:link,
-  .btn--primary:visited {
+  background-color: #288ad6; }
+  .btn--primary, .btn--primary:link, .btn--primary:visited {
     color: #fff; }
-  .btn--primary:hover,
-  .btn--primary:active,
-  .btn--primary:focus {
-    background-color: #119b6d; }
+  .btn--primary:hover, .btn--primary:active, .btn--primary:focus {
+    background-color: #206eab; }
 
 .btn--block {
   display: block;
@@ -1530,8 +1412,7 @@ input[type="button"].btn--block {
     min-height: 1px;
     position: relative;
     clear: none;
-    -moz-box-sizing: border-box;
-         box-sizing: border-box;
+    box-sizing: border-box;
     margin-left: 2%; }
     .g-col:first-child {
       margin-left: 0; }
@@ -1592,7 +1473,7 @@ input[type="button"].btn--block {
  * </ul>
  *
  * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow">
+ * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">
  *     <li></li>
  * </ul>
  */
@@ -1608,99 +1489,430 @@ input[type="button"].btn--block {
     display: block;
     height: auto; }
   @media screen and (min-width: 25em) and (max-width: 46.875em) {
-    .l-blockGrid[class*="up--narrow"] > li {
-      display: block;
-      height: auto;
-      float: left; }
     .l-blockGrid.l-blockGrid--1up--narrow > li {
-      width: 100%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 100%; }
+      .l-blockGrid.l-blockGrid--1up--narrow > li:nth-of-type(1n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--1up--narrow > li:not(:nth-of-type(1n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--2up--narrow > li {
-      width: 50%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 50%; }
+      .l-blockGrid.l-blockGrid--2up--narrow > li:nth-of-type(2n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--2up--narrow > li:not(:nth-of-type(2n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--3up--narrow > li {
-      width: 33.3333333333%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 33.3333333333%; }
+      .l-blockGrid.l-blockGrid--3up--narrow > li:nth-of-type(3n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--3up--narrow > li:not(:nth-of-type(3n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--4up--narrow > li {
-      width: 25%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 25%; }
+      .l-blockGrid.l-blockGrid--4up--narrow > li:nth-of-type(4n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--4up--narrow > li:not(:nth-of-type(4n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--5up--narrow > li {
-      width: 20%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 20%; }
+      .l-blockGrid.l-blockGrid--5up--narrow > li:nth-of-type(5n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--5up--narrow > li:not(:nth-of-type(5n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--6up--narrow > li {
-      width: 16.6666666667%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 16.6666666667%; }
+      .l-blockGrid.l-blockGrid--6up--narrow > li:nth-of-type(6n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--6up--narrow > li:not(:nth-of-type(6n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--7up--narrow > li {
-      width: 14.2857142857%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 14.2857142857%; }
+      .l-blockGrid.l-blockGrid--7up--narrow > li:nth-of-type(7n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--7up--narrow > li:not(:nth-of-type(7n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--8up--narrow > li {
-      width: 12.5%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 12.5%; }
+      .l-blockGrid.l-blockGrid--8up--narrow > li:nth-of-type(8n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--8up--narrow > li:not(:nth-of-type(8n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--9up--narrow > li {
-      width: 11.1111111111%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 11.1111111111%; }
+      .l-blockGrid.l-blockGrid--9up--narrow > li:nth-of-type(9n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--9up--narrow > li:not(:nth-of-type(9n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--10up--narrow > li {
-      width: 10%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 10%; }
+      .l-blockGrid.l-blockGrid--10up--narrow > li:nth-of-type(10n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--10up--narrow > li:not(:nth-of-type(10n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--11up--narrow > li {
-      width: 9.0909090909%;
-      display: block;
-      height: auto;
-      float: left; }
+      float: left;
+      width: 9.0909090909%; }
+      .l-blockGrid.l-blockGrid--11up--narrow > li:nth-of-type(11n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--11up--narrow > li:not(:nth-of-type(11n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--12up--narrow > li {
-      width: 8.3333333333%;
-      display: block;
-      height: auto;
-      float: left; } }
+      float: left;
+      width: 8.3333333333%; }
+      .l-blockGrid.l-blockGrid--12up--narrow > li:nth-of-type(12n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--12up--narrow > li:not(:nth-of-type(12n + 1)) {
+        clear: none; } }
   @media screen and (min-width: 46.875em) {
-    .l-blockGrid > li {
-      display: block;
-      height: auto;
-      float: left; }
     .l-blockGrid.l-blockGrid--1up > li {
+      float: left;
       width: 100%; }
+      .l-blockGrid.l-blockGrid--1up > li:nth-of-type(1n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--1up > li:not(:nth-of-type(1n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--2up > li {
+      float: left;
       width: 50%; }
+      .l-blockGrid.l-blockGrid--2up > li:nth-of-type(2n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--2up > li:not(:nth-of-type(2n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--3up > li {
+      float: left;
       width: 33.3333333333%; }
+      .l-blockGrid.l-blockGrid--3up > li:nth-of-type(3n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--3up > li:not(:nth-of-type(3n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--4up > li {
+      float: left;
       width: 25%; }
+      .l-blockGrid.l-blockGrid--4up > li:nth-of-type(4n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--4up > li:not(:nth-of-type(4n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--5up > li {
+      float: left;
       width: 20%; }
+      .l-blockGrid.l-blockGrid--5up > li:nth-of-type(5n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--5up > li:not(:nth-of-type(5n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--6up > li {
+      float: left;
       width: 16.6666666667%; }
+      .l-blockGrid.l-blockGrid--6up > li:nth-of-type(6n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--6up > li:not(:nth-of-type(6n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--7up > li {
+      float: left;
       width: 14.2857142857%; }
+      .l-blockGrid.l-blockGrid--7up > li:nth-of-type(7n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--7up > li:not(:nth-of-type(7n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--8up > li {
+      float: left;
       width: 12.5%; }
+      .l-blockGrid.l-blockGrid--8up > li:nth-of-type(8n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--8up > li:not(:nth-of-type(8n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--9up > li {
+      float: left;
       width: 11.1111111111%; }
+      .l-blockGrid.l-blockGrid--9up > li:nth-of-type(9n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--9up > li:not(:nth-of-type(9n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--10up > li {
+      float: left;
       width: 10%; }
+      .l-blockGrid.l-blockGrid--10up > li:nth-of-type(10n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--10up > li:not(:nth-of-type(10n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--11up > li {
+      float: left;
       width: 9.0909090909%; }
+      .l-blockGrid.l-blockGrid--11up > li:nth-of-type(11n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--11up > li:not(:nth-of-type(11n + 1)) {
+        clear: none; }
     .l-blockGrid.l-blockGrid--12up > li {
-      width: 8.3333333333%; } }
+      float: left;
+      width: 8.3333333333%; }
+      .l-blockGrid.l-blockGrid--12up > li:nth-of-type(12n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--12up > li:not(:nth-of-type(12n + 1)) {
+        clear: none; } }
+  @media screen and (min-width: 46.875em) {
+    .l-blockGrid.l-blockGrid--1up--mid > li {
+      float: left;
+      width: 100%; }
+      .l-blockGrid.l-blockGrid--1up--mid > li:nth-of-type(1n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--1up--mid > li:not(:nth-of-type(1n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--2up--mid > li {
+      float: left;
+      width: 50%; }
+      .l-blockGrid.l-blockGrid--2up--mid > li:nth-of-type(2n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--2up--mid > li:not(:nth-of-type(2n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--3up--mid > li {
+      float: left;
+      width: 33.3333333333%; }
+      .l-blockGrid.l-blockGrid--3up--mid > li:nth-of-type(3n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--3up--mid > li:not(:nth-of-type(3n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--4up--mid > li {
+      float: left;
+      width: 25%; }
+      .l-blockGrid.l-blockGrid--4up--mid > li:nth-of-type(4n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--4up--mid > li:not(:nth-of-type(4n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--5up--mid > li {
+      float: left;
+      width: 20%; }
+      .l-blockGrid.l-blockGrid--5up--mid > li:nth-of-type(5n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--5up--mid > li:not(:nth-of-type(5n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--6up--mid > li {
+      float: left;
+      width: 16.6666666667%; }
+      .l-blockGrid.l-blockGrid--6up--mid > li:nth-of-type(6n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--6up--mid > li:not(:nth-of-type(6n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--7up--mid > li {
+      float: left;
+      width: 14.2857142857%; }
+      .l-blockGrid.l-blockGrid--7up--mid > li:nth-of-type(7n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--7up--mid > li:not(:nth-of-type(7n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--8up--mid > li {
+      float: left;
+      width: 12.5%; }
+      .l-blockGrid.l-blockGrid--8up--mid > li:nth-of-type(8n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--8up--mid > li:not(:nth-of-type(8n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--9up--mid > li {
+      float: left;
+      width: 11.1111111111%; }
+      .l-blockGrid.l-blockGrid--9up--mid > li:nth-of-type(9n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--9up--mid > li:not(:nth-of-type(9n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--10up--mid > li {
+      float: left;
+      width: 10%; }
+      .l-blockGrid.l-blockGrid--10up--mid > li:nth-of-type(10n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--10up--mid > li:not(:nth-of-type(10n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--11up--mid > li {
+      float: left;
+      width: 9.0909090909%; }
+      .l-blockGrid.l-blockGrid--11up--mid > li:nth-of-type(11n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--11up--mid > li:not(:nth-of-type(11n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--12up--mid > li {
+      float: left;
+      width: 8.3333333333%; }
+      .l-blockGrid.l-blockGrid--12up--mid > li:nth-of-type(12n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--12up--mid > li:not(:nth-of-type(12n + 1)) {
+        clear: none; } }
+  @media screen and (min-width: 62.5em) {
+    .l-blockGrid.l-blockGrid--1up--wide > li {
+      float: left;
+      width: 100%; }
+      .l-blockGrid.l-blockGrid--1up--wide > li:nth-of-type(1n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--1up--wide > li:not(:nth-of-type(1n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--2up--wide > li {
+      float: left;
+      width: 50%; }
+      .l-blockGrid.l-blockGrid--2up--wide > li:nth-of-type(2n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--2up--wide > li:not(:nth-of-type(2n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--3up--wide > li {
+      float: left;
+      width: 33.3333333333%; }
+      .l-blockGrid.l-blockGrid--3up--wide > li:nth-of-type(3n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--3up--wide > li:not(:nth-of-type(3n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--4up--wide > li {
+      float: left;
+      width: 25%; }
+      .l-blockGrid.l-blockGrid--4up--wide > li:nth-of-type(4n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--4up--wide > li:not(:nth-of-type(4n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--5up--wide > li {
+      float: left;
+      width: 20%; }
+      .l-blockGrid.l-blockGrid--5up--wide > li:nth-of-type(5n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--5up--wide > li:not(:nth-of-type(5n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--6up--wide > li {
+      float: left;
+      width: 16.6666666667%; }
+      .l-blockGrid.l-blockGrid--6up--wide > li:nth-of-type(6n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--6up--wide > li:not(:nth-of-type(6n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--7up--wide > li {
+      float: left;
+      width: 14.2857142857%; }
+      .l-blockGrid.l-blockGrid--7up--wide > li:nth-of-type(7n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--7up--wide > li:not(:nth-of-type(7n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--8up--wide > li {
+      float: left;
+      width: 12.5%; }
+      .l-blockGrid.l-blockGrid--8up--wide > li:nth-of-type(8n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--8up--wide > li:not(:nth-of-type(8n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--9up--wide > li {
+      float: left;
+      width: 11.1111111111%; }
+      .l-blockGrid.l-blockGrid--9up--wide > li:nth-of-type(9n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--9up--wide > li:not(:nth-of-type(9n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--10up--wide > li {
+      float: left;
+      width: 10%; }
+      .l-blockGrid.l-blockGrid--10up--wide > li:nth-of-type(10n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--10up--wide > li:not(:nth-of-type(10n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--11up--wide > li {
+      float: left;
+      width: 9.0909090909%; }
+      .l-blockGrid.l-blockGrid--11up--wide > li:nth-of-type(11n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--11up--wide > li:not(:nth-of-type(11n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--12up--wide > li {
+      float: left;
+      width: 8.3333333333%; }
+      .l-blockGrid.l-blockGrid--12up--wide > li:nth-of-type(12n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--12up--wide > li:not(:nth-of-type(12n + 1)) {
+        clear: none; } }
+  @media screen and (min-width: 78.125em) {
+    .l-blockGrid.l-blockGrid--1up--huge > li {
+      float: left;
+      width: 100%; }
+      .l-blockGrid.l-blockGrid--1up--huge > li:nth-of-type(1n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--1up--huge > li:not(:nth-of-type(1n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--2up--huge > li {
+      float: left;
+      width: 50%; }
+      .l-blockGrid.l-blockGrid--2up--huge > li:nth-of-type(2n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--2up--huge > li:not(:nth-of-type(2n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--3up--huge > li {
+      float: left;
+      width: 33.3333333333%; }
+      .l-blockGrid.l-blockGrid--3up--huge > li:nth-of-type(3n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--3up--huge > li:not(:nth-of-type(3n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--4up--huge > li {
+      float: left;
+      width: 25%; }
+      .l-blockGrid.l-blockGrid--4up--huge > li:nth-of-type(4n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--4up--huge > li:not(:nth-of-type(4n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--5up--huge > li {
+      float: left;
+      width: 20%; }
+      .l-blockGrid.l-blockGrid--5up--huge > li:nth-of-type(5n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--5up--huge > li:not(:nth-of-type(5n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--6up--huge > li {
+      float: left;
+      width: 16.6666666667%; }
+      .l-blockGrid.l-blockGrid--6up--huge > li:nth-of-type(6n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--6up--huge > li:not(:nth-of-type(6n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--7up--huge > li {
+      float: left;
+      width: 14.2857142857%; }
+      .l-blockGrid.l-blockGrid--7up--huge > li:nth-of-type(7n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--7up--huge > li:not(:nth-of-type(7n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--8up--huge > li {
+      float: left;
+      width: 12.5%; }
+      .l-blockGrid.l-blockGrid--8up--huge > li:nth-of-type(8n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--8up--huge > li:not(:nth-of-type(8n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--9up--huge > li {
+      float: left;
+      width: 11.1111111111%; }
+      .l-blockGrid.l-blockGrid--9up--huge > li:nth-of-type(9n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--9up--huge > li:not(:nth-of-type(9n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--10up--huge > li {
+      float: left;
+      width: 10%; }
+      .l-blockGrid.l-blockGrid--10up--huge > li:nth-of-type(10n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--10up--huge > li:not(:nth-of-type(10n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--11up--huge > li {
+      float: left;
+      width: 9.0909090909%; }
+      .l-blockGrid.l-blockGrid--11up--huge > li:nth-of-type(11n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--11up--huge > li:not(:nth-of-type(11n + 1)) {
+        clear: none; }
+    .l-blockGrid.l-blockGrid--12up--huge > li {
+      float: left;
+      width: 8.3333333333%; }
+      .l-blockGrid.l-blockGrid--12up--huge > li:nth-of-type(12n + 1) {
+        clear: left; }
+      .l-blockGrid.l-blockGrid--12up--huge > li:not(:nth-of-type(12n + 1)) {
+        clear: none; } }
 
 /**
  * Guttered block grid
@@ -1713,9 +1925,57 @@ input[type="button"].btn--block {
 
 /**
  * Lists
+ * - (Un)ordered lists
+ * - Unstyled lists
+ * - Definition lists
  * - Centred lists
  * - Floated lists
  */
+ul {
+  list-style-type: disc; }
+
+ol {
+  list-style-type: decimal; }
+
+ul, ol {
+  padding: 0;
+  margin: 0 0 28px 28px; }
+  ul ul,
+  ul ol, ol ul,
+  ol ol {
+    margin-left: 56px; }
+  ul ul, ol ul {
+    list-style-type: circle; }
+    ul ul ul, ol ul ul {
+      list-style-type: square; }
+  ul ol, ol ol {
+    list-style-type: upper-roman; }
+    ul ol ol, ol ol ol {
+      list-style-type: lower-roman; }
+  ul ul, ul ol, ol ul, ol ol {
+    margin-bottom: 0; }
+
+/**
+ * Unstyled lists
+ */
+.unstyled {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  list-style-image: none; }
+
+/**
+ * Definition lists
+ */
+dl {
+  margin-bottom: 28px; }
+
+dt {
+  font-weight: bold; }
+
+dd {
+  margin-left: 28px; }
+
 /**
  * Centred lists
  *
@@ -1764,6 +2024,19 @@ svg:not(:root) {
 img, object, embed, video {
   max-width: 100%; }
 
+/**
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle; }
+
 /**
  * Media Object
  *
@@ -1794,11 +2067,11 @@ img, object, embed, video {
 .media-body {
   display: table-cell;
   vertical-align: middle; }
-  .media--top .media-img,
-  .media--top .media-body {
+  .media--top .media-img, .media--top
+  .media-body {
     vertical-align: top; }
-  .media--bottom .media-img,
-  .media--bottom .media-body {
+  .media--bottom .media-img, .media--bottom
+  .media-body {
     vertical-align: bottom; }
 
 .media-body {
@@ -2073,7 +2346,6 @@ pre {
     z-index: 100;
     background-color: #fff;
     -webkit-transition: all 100ms ease-in-out;
-       -moz-transition: all 100ms ease-in-out;
             transition: all 100ms ease-in-out; }
     .skipToContent a:focus {
       top: 5px; }
@@ -2099,6 +2371,12 @@ body {
   .lt-ie9 .l-container {
     min-width: 1000px; }
 
+.browserupgrade {
+  margin: .2em 0;
+  background: #ccc;
+  color: #000;
+  padding: .2em 0; }
+
 /**
  * Views
  */
@@ -2145,8 +2423,7 @@ body {
   padding: 0;
   position: absolute;
   width: 1px; }
-  .is-visuallyHidden.focusable:active,
-  .is-visuallyHidden.focusable:focus {
+  .is-visuallyHidden.focusable:active, .is-visuallyHidden.focusable:focus {
     clip: auto;
     height: auto;
     margin: 0;
@@ -2177,7 +2454,7 @@ body {
  * Responsive Utilities
  */
 * {
-  -webkit-tap-highlight-color: #16c98d !important; }
+  -webkit-tap-highlight-color: #181830 !important; }
 
 /* A hack for HTML5 contenteditable attribute on mobile */
 textarea[contenteditable] {
@@ -2193,23 +2470,25 @@ textarea[contenteditable] {
   #perfmatters
   */
   -webkit-backface-visibility: hidden;
-     -moz-backface-visibility: hidden;
           backface-visibility: hidden; }
 
 .transition {
   -webkit-transition: all 100ms ease-in-out;
-     -moz-transition: all 100ms ease-in-out;
           transition: all 100ms ease-in-out; }
 
 /* Print styles */
-/* ==========================================================================
-   Print styles
-   ========================================================================== */
+/**
+ * Print styles
+ */
 @media print {
-  * {
+  *,
+  *:before,
+  *:after,
+  *:first-letter,
+  *:first-line {
     background: transparent !important;
     color: #000 !important;
-    /* Black prints faster: h5bp.com/s */
+    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
     box-shadow: none !important;
     text-shadow: none !important; }
   a:visited {
diff --git a/assets/dist/css/styleguide.css b/assets/dist/css/styleguide.css
index 60c27e39..9e5b1c85 100644
--- a/assets/dist/css/styleguide.css
+++ b/assets/dist/css/styleguide.css
@@ -1,3 +1,387 @@
-body{background-color:#fff}.sg-interfaceType,.sg-sectionHeading{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}.sg-interfaceType--subtle{color:#888}.sg-sectionHeading{color:#16c98d}.sg-page{overflow:hidden;padding:8% 0}.sg-page--start{background-color:#16c98d;padding:15% 0;color:#fff}.sg-spacer{padding:20px}.sg-footer{background-color:#181830;color:#fff;padding:30px;margin-top:30px}.sg-footer h1{margin-bottom:.2em}.sg-footer a{color:#fff;border-bottom:2px dashed rgba(255,255,255,0.3)}.sg-footer a:hover{border-bottom:2px solid #fff}.sg-footer :last-child{margin-bottom:0}.sg-swatch{text-align:center;line-height:30px;margin:10px 10px 0}.sg-swatch-color{height:60px;padding:15px;font-size:13px;font-size:0.65rem;font-family:Menlo,Monaco,"Courier New",monospace}.sg-color-link-hover{color:#0c6d4d}.sg-color-link-hover .sg-swatch-color{background-color:#0c6d4d;color:#fff}.sg-color-link-hover .sg-swatch-color:before{content:"#0c6d4d";display:block}.sg-color-primary{color:#16c98d}.sg-color-primary .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-primary .sg-swatch-color:before{content:"#16c98d";display:block}.sg-color-secondary{color:#feef6d}.sg-color-secondary .sg-swatch-color{background-color:#feef6d;color:#444}.sg-color-secondary .sg-swatch-color:before{content:"#feef6d";display:block}.sg-color-highlight{color:#fa5e5b}.sg-color-highlight .sg-swatch-color{background-color:#fa5e5b;color:#444}.sg-color-highlight .sg-swatch-color:before{content:"#fa5e5b";display:block}.sg-color-text{color:#444}.sg-color-text .sg-swatch-color{background-color:#444;color:#fff}.sg-color-text .sg-swatch-color:before{content:"#444";display:block}.sg-color-background{color:#f1f1f1}.sg-color-background .sg-swatch-color{background-color:#f1f1f1;color:#444;border:#f1f1f1 solid 1px}.sg-color-background .sg-swatch-color:before{content:"#f1f1f1";display:block}.sg-color-border{color:#ddd}.sg-color-border .sg-swatch-color{background-color:#ddd;color:#444}.sg-color-border .sg-swatch-color:before{content:"#ddd";display:block}.sg-color-link{color:#16c98d}.sg-color-link .sg-swatch-color{background-color:#16c98d;color:#fff}.sg-color-link .sg-swatch-color:before{content:"#16c98d";display:block}.sg-type{margin-bottom:1em}code{border:1px solid #ddd;background-color:#F9F8F8;font-size:11px;font-size:0.55rem}.sg-type-micro .sg-type-item{font-size:9px;font-size:0.45rem}.sg-type-micro code:after{content:" :: 9px"}.sg-type-smallest .sg-type-item{font-size:11px;font-size:0.55rem}.sg-type-smallest code:after{content:" :: 11px"}.sg-type-smaller .sg-type-item{font-size:13px;font-size:0.65rem}.sg-type-smaller code:after{content:" :: 13px"}.sg-type-small .sg-type-item{font-size:16px;font-size:0.8rem}.sg-type-small code:after{content:" :: 16px"}.sg-type-base .sg-type-item{font-size:20px;font-size:1rem}.sg-type-base code:after{content:" :: 20px"}.sg-type-mid .sg-type-item{font-size:25px;font-size:1.25rem}.sg-type-mid code:after{content:" :: 25px"}.sg-type-large .sg-type-item{font-size:32px;font-size:1.6rem}.sg-type-large code:after{content:" :: 32px"}.sg-type-largest .sg-type-item{font-size:40px;font-size:2rem}.sg-type-largest code:after{content:" :: 40px"}.sg-type-jumbo .sg-type-item{font-size:49px;font-size:2.45rem}.sg-type-jumbo code:after{content:" :: 49px"}.sg-typeSpecimen{margin-bottom:0;margin-top:0;-ms-word-wrap:break-word;word-wrap:break-word}.sg-typeSpecimen:after{display:block;font-size:16px;font-size:0.8rem;margin-top:5px;border-top:1px solid #ddd;font-weight:normal}.sg-typeSpecimen--primary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold}.sg-typeSpecimen--secondary{font-size:30px;font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.sg-typeSpecimen--giant{font-size:120px;font-size:6rem;line-height:1}.icon-sg{display:inline-block;width:50px;height:50px;vertical-align:middle;margin-right:10px;margin-bottom:10px}.sg-favicon{padding:5px}.sg-favicon img{vertical-align:middle;margin-right:15px}
+/**
+ * Setup styleguide imports
+ */
+/**
+ * Sass Mixins
+ * - Vendor prefixer
+ * - Responsive
+ * - CSS3
+ * - Utility Mixins
+ * - hiDpi
+ * - Forms */
+/**
+ * Vendor prefixer
+ * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
+ */
+/**
+ * Responsive media query mixins
+ * - These are used so that we can define separate media-query content
+ *   for <IE9 and browsers with support for media queries
+ * - These are directly related to the global $fix-mqs var defined in
+ *   kickoff-old-ie.scss
+ * - kickoff-old-ie.scss ignores any content in media-queries with values less
+ *   than the $fix-mqs var value
+ */
+/**
+ * Min-width media query:
+ * - Equivalent to: @media screen and (min-width: 20em) { ... }
+ * - Usage: @include respond-min(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
+/**
+ * Max-width media query:
+ * - Equivalent to: @media screen and (max-width: 20em) { ... }
+ * - Usage: @include respond-max(500) { ... };
+ * - Argument is a pixel value WITHOUT a unit of measurement
+ */
+/**
+ * Min-max-width media query:
+ * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
+ * - Usage: @include respond-min-max(500, 600) { ... };
+ * - Arguments are pixel values WITHOUT a unit of measurement
+ */
+/**
+ * Old IE specific mixin
+ * - Only use this content if we're dealing with old IE
+ * - Usage: @include oldie() { ... }
+ */
+/**
+ * Linear Gradient
+ * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
+ */
+/**
+ * Radial Gradient
+ * Usage: @include radial-gradient(#000, #BADA55, true);
+ */
+/**
+ * vertical-center
+ * Vertically center any element. Needs support for CSS tranforms.
+ * Usage:
+ * @include vertical-center;
+ */
+/**
+ * Utility mixins
+ * Clearfix, REM + fallbacks,
+ * @font-face, sizing shortcuts,
+ * and other helpers
+ */
+/**
+ * Utility Mixins
+ */
+/**
+ * Typography mixins
+ */
+/**
+ *  HiDPI mixin.
+ *  @include hidpi { ... };
+ *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+ */
+/**
+ * Hidpi with a minimum width media query
+ * @include hidpi-min($bp-mid, 1.5) { ... };
+ */
+/**
+ * Hidpi with a max width media query
+ * @include hidpi-max($bp-mid, 1.3) { ... };
+ */
+/**
+ * Global Color palette
+ * - Generic colors
+ * - Color scheme
+ * - Common colors
+ * - Links
+ * - Text selection
+ * - <hr>
+ * - Any others..
+ */
+/**
+ * Variables
+ * - Typography
+ * - Breakpoints
+ * - Paths
+ * - Layout & Grid
+ * - App-specific
+ */
+/**
+ * Typography
+ *
+ * Base sizes:
+ * Set this in pixels (but do not add px),
+ * the font-size mixin will convert to REMS
+ */
+/**
+ * Breakpoints
+ * There are no common breakpoints so these are just a suggestions
+ * You'll need to define your own breakpoints to suit your design
+ */
+/**
+ * Path vars
+ */
+/**
+ * Layout setup
+ * Settings here override & affect the output in scss/partials/components/grid.scss
+ */
+/**
+ * App-specific variables
+ */
+/**
+ * Styleguide styles
+ * Where possible, prefix all classnames with .sg
+ */
+body {
+  background-color: #fff; }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3RlbXAvY3NzL3N0eWxlZ3VpZGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLEtBQUsscUJBQXFCLENBQUMscUNBQXFDLHdEQUF3RCxlQUFlLENBQUMsMEJBQTBCLFVBQVUsQ0FBQyxtQkFBbUIsYUFBYSxDQUFDLFNBQVMsZ0JBQWdCLFlBQVksQ0FBQyxnQkFBZ0IseUJBQXlCLGNBQWMsVUFBVSxDQUFDLFdBQVcsWUFBWSxDQUFDLFdBQVcseUJBQXlCLFdBQVcsYUFBYSxlQUFlLENBQUMsY0FBYyxrQkFBa0IsQ0FBQyxhQUFhLFdBQVcsOENBQThDLENBQUMsbUJBQW1CLDRCQUE0QixDQUFDLHVCQUF1QixlQUFlLENBQUMsV0FBVyxrQkFBa0IsaUJBQWlCLGtCQUFrQixDQUFDLGlCQUFpQixZQUFZLGFBQWEsZUFBZSxrQkFBa0IsZ0RBQWdELENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFVBQVUsQ0FBQyw2Q0FBNkMsa0JBQWtCLGFBQWEsQ0FBQyxrQkFBa0IsYUFBYSxDQUFDLG1DQUFtQyx5QkFBeUIsVUFBVSxDQUFDLDBDQUEwQyxrQkFBa0IsYUFBYSxDQUFDLG9CQUFvQixhQUFhLENBQUMscUNBQXFDLHlCQUF5QixVQUFVLENBQUMsNENBQTRDLGtCQUFrQixhQUFhLENBQUMsb0JBQW9CLGFBQWEsQ0FBQyxxQ0FBcUMseUJBQXlCLFVBQVUsQ0FBQyw0Q0FBNEMsa0JBQWtCLGFBQWEsQ0FBQyxlQUFlLFVBQVUsQ0FBQyxnQ0FBZ0Msc0JBQXNCLFVBQVUsQ0FBQyx1Q0FBdUMsZUFBZSxhQUFhLENBQUMscUJBQXFCLGFBQWEsQ0FBQyxzQ0FBc0MseUJBQXlCLFdBQVcsd0JBQXdCLENBQUMsNkNBQTZDLGtCQUFrQixhQUFhLENBQUMsaUJBQWlCLFVBQVUsQ0FBQyxrQ0FBa0Msc0JBQXNCLFVBQVUsQ0FBQyx5Q0FBeUMsZUFBZSxhQUFhLENBQUMsZUFBZSxhQUFhLENBQUMsZ0NBQWdDLHlCQUF5QixVQUFVLENBQUMsdUNBQXVDLGtCQUFrQixhQUFhLENBQUMsU0FBUyxpQkFBaUIsQ0FBQyxLQUFLLHNCQUFzQix5QkFBeUIsZUFBZSxpQkFBaUIsQ0FBQyw2QkFBNkIsY0FBYyxpQkFBaUIsQ0FBQywwQkFBMEIsaUJBQWlCLENBQUMsZ0NBQWdDLGVBQWUsaUJBQWlCLENBQUMsNkJBQTZCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGlCQUFpQixDQUFDLDRCQUE0QixrQkFBa0IsQ0FBQyw2QkFBNkIsZUFBZSxnQkFBZ0IsQ0FBQywwQkFBMEIsa0JBQWtCLENBQUMsNEJBQTRCLGVBQWUsY0FBYyxDQUFDLHlCQUF5QixrQkFBa0IsQ0FBQywyQkFBMkIsZUFBZSxpQkFBaUIsQ0FBQyx3QkFBd0Isa0JBQWtCLENBQUMsNkJBQTZCLGVBQWUsZ0JBQWdCLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLCtCQUErQixlQUFlLGNBQWMsQ0FBQyw0QkFBNEIsa0JBQWtCLENBQUMsNkJBQTZCLGVBQWUsaUJBQWlCLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLGlCQUFpQixnQkFBZ0IsYUFBYSx5QkFBeUIsb0JBQW9CLENBQUMsdUJBQXVCLGNBQWMsZUFBZSxpQkFBaUIsZUFBZSwwQkFBMEIsa0JBQWtCLENBQUMsMEJBQTBCLGVBQWUsaUJBQWlCLHdEQUF3RCxnQkFBZ0IsQ0FBQyw0QkFBNEIsZUFBZSxpQkFBaUIsdURBQXVELENBQUMsd0JBQXdCLGdCQUFnQixlQUFlLGFBQWEsQ0FBQyxTQUFTLHFCQUFxQixXQUFXLFlBQVksc0JBQXNCLGtCQUFrQixrQkFBa0IsQ0FBQyxZQUFZLFdBQVcsQ0FBQyxnQkFBZ0Isc0JBQXNCLGlCQUFpQixDQUFDIiwiZmlsZSI6InN0eWxlZ3VpZGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9keXtiYWNrZ3JvdW5kLWNvbG9yOiNmZmZ9LnNnLWludGVyZmFjZVR5cGUsLnNnLXNlY3Rpb25IZWFkaW5ne2ZvbnQtZmFtaWx5OlwiSGVsdmV0aWNhIE5ldWVcIixIZWx2ZXRpY2EsQXJpYWwsc2Fucy1zZXJpZjtmb250LXdlaWdodDozMDB9LnNnLWludGVyZmFjZVR5cGUtLXN1YnRsZXtjb2xvcjojODg4fS5zZy1zZWN0aW9uSGVhZGluZ3tjb2xvcjojMTZjOThkfS5zZy1wYWdle292ZXJmbG93OmhpZGRlbjtwYWRkaW5nOjglIDB9LnNnLXBhZ2UtLXN0YXJ0e2JhY2tncm91bmQtY29sb3I6IzE2Yzk4ZDtwYWRkaW5nOjE1JSAwO2NvbG9yOiNmZmZ9LnNnLXNwYWNlcntwYWRkaW5nOjIwcHh9LnNnLWZvb3RlcntiYWNrZ3JvdW5kLWNvbG9yOiMxODE4MzA7Y29sb3I6I2ZmZjtwYWRkaW5nOjMwcHg7bWFyZ2luLXRvcDozMHB4fS5zZy1mb290ZXIgaDF7bWFyZ2luLWJvdHRvbTouMmVtfS5zZy1mb290ZXIgYXtjb2xvcjojZmZmO2JvcmRlci1ib3R0b206MnB4IGRhc2hlZCByZ2JhKDI1NSwyNTUsMjU1LDAuMyl9LnNnLWZvb3RlciBhOmhvdmVye2JvcmRlci1ib3R0b206MnB4IHNvbGlkICNmZmZ9LnNnLWZvb3RlciA6bGFzdC1jaGlsZHttYXJnaW4tYm90dG9tOjB9LnNnLXN3YXRjaHt0ZXh0LWFsaWduOmNlbnRlcjtsaW5lLWhlaWdodDozMHB4O21hcmdpbjoxMHB4IDEwcHggMH0uc2ctc3dhdGNoLWNvbG9ye2hlaWdodDo2MHB4O3BhZGRpbmc6MTVweDtmb250LXNpemU6MTNweDtmb250LXNpemU6MC42NXJlbTtmb250LWZhbWlseTpNZW5sbyxNb25hY28sXCJDb3VyaWVyIE5ld1wiLG1vbm9zcGFjZX0uc2ctY29sb3ItbGluay1ob3Zlcntjb2xvcjojMGM2ZDRkfS5zZy1jb2xvci1saW5rLWhvdmVyIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMGM2ZDRkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmstaG92ZXIgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMwYzZkNGRcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci1wcmltYXJ5e2NvbG9yOiMxNmM5OGR9LnNnLWNvbG9yLXByaW1hcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiMxNmM5OGQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItcHJpbWFyeSAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzE2Yzk4ZFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLXNlY29uZGFyeXtjb2xvcjojZmVlZjZkfS5zZy1jb2xvci1zZWNvbmRhcnkgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNmZWVmNmQ7Y29sb3I6IzQ0NH0uc2ctY29sb3Itc2Vjb25kYXJ5IC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZmVlZjZkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItaGlnaGxpZ2h0e2NvbG9yOiNmYTVlNWJ9LnNnLWNvbG9yLWhpZ2hsaWdodCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2ZhNWU1Yjtjb2xvcjojNDQ0fS5zZy1jb2xvci1oaWdobGlnaHQgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiNmYTVlNWJcIjtkaXNwbGF5OmJsb2NrfS5zZy1jb2xvci10ZXh0e2NvbG9yOiM0NDR9LnNnLWNvbG9yLXRleHQgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiM0NDQ7Y29sb3I6I2ZmZn0uc2ctY29sb3ItdGV4dCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiIzQ0NFwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJhY2tncm91bmR7Y29sb3I6I2YxZjFmMX0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9ye2JhY2tncm91bmQtY29sb3I6I2YxZjFmMTtjb2xvcjojNDQ0O2JvcmRlcjojZjFmMWYxIHNvbGlkIDFweH0uc2ctY29sb3ItYmFja2dyb3VuZCAuc2ctc3dhdGNoLWNvbG9yOmJlZm9yZXtjb250ZW50OlwiI2YxZjFmMVwiO2Rpc3BsYXk6YmxvY2t9LnNnLWNvbG9yLWJvcmRlcntjb2xvcjojZGRkfS5zZy1jb2xvci1ib3JkZXIgLnNnLXN3YXRjaC1jb2xvcntiYWNrZ3JvdW5kLWNvbG9yOiNkZGQ7Y29sb3I6IzQ0NH0uc2ctY29sb3ItYm9yZGVyIC5zZy1zd2F0Y2gtY29sb3I6YmVmb3Jle2NvbnRlbnQ6XCIjZGRkXCI7ZGlzcGxheTpibG9ja30uc2ctY29sb3ItbGlua3tjb2xvcjojMTZjOThkfS5zZy1jb2xvci1saW5rIC5zZy1zd2F0Y2gtY29sb3J7YmFja2dyb3VuZC1jb2xvcjojMTZjOThkO2NvbG9yOiNmZmZ9LnNnLWNvbG9yLWxpbmsgLnNnLXN3YXRjaC1jb2xvcjpiZWZvcmV7Y29udGVudDpcIiMxNmM5OGRcIjtkaXNwbGF5OmJsb2NrfS5zZy10eXBle21hcmdpbi1ib3R0b206MWVtfWNvZGV7Ym9yZGVyOjFweCBzb2xpZCAjZGRkO2JhY2tncm91bmQtY29sb3I6I0Y5RjhGODtmb250LXNpemU6MTFweDtmb250LXNpemU6MC41NXJlbX0uc2ctdHlwZS1taWNybyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo5cHg7Zm9udC1zaXplOjAuNDVyZW19LnNnLXR5cGUtbWljcm8gY29kZTphZnRlcntjb250ZW50OlwiIDo6IDlweFwifS5zZy10eXBlLXNtYWxsZXN0IC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjExcHg7Zm9udC1zaXplOjAuNTVyZW19LnNnLXR5cGUtc21hbGxlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDExcHhcIn0uc2ctdHlwZS1zbWFsbGVyIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjEzcHg7Zm9udC1zaXplOjAuNjVyZW19LnNnLXR5cGUtc21hbGxlciBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTNweFwifS5zZy10eXBlLXNtYWxsIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbX0uc2ctdHlwZS1zbWFsbCBjb2RlOmFmdGVye2NvbnRlbnQ6XCIgOjogMTZweFwifS5zZy10eXBlLWJhc2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MjBweDtmb250LXNpemU6MXJlbX0uc2ctdHlwZS1iYXNlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyMHB4XCJ9LnNnLXR5cGUtbWlkIC5zZy10eXBlLWl0ZW17Zm9udC1zaXplOjI1cHg7Zm9udC1zaXplOjEuMjVyZW19LnNnLXR5cGUtbWlkIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAyNXB4XCJ9LnNnLXR5cGUtbGFyZ2UgLnNnLXR5cGUtaXRlbXtmb250LXNpemU6MzJweDtmb250LXNpemU6MS42cmVtfS5zZy10eXBlLWxhcmdlIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiAzMnB4XCJ9LnNnLXR5cGUtbGFyZ2VzdCAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0MHB4O2ZvbnQtc2l6ZToycmVtfS5zZy10eXBlLWxhcmdlc3QgY29kZTphZnRlcntjb250ZW50OlwiIDo6IDQwcHhcIn0uc2ctdHlwZS1qdW1ibyAuc2ctdHlwZS1pdGVte2ZvbnQtc2l6ZTo0OXB4O2ZvbnQtc2l6ZToyLjQ1cmVtfS5zZy10eXBlLWp1bWJvIGNvZGU6YWZ0ZXJ7Y29udGVudDpcIiA6OiA0OXB4XCJ9LnNnLXR5cGVTcGVjaW1lbnttYXJnaW4tYm90dG9tOjA7bWFyZ2luLXRvcDowOy1tcy13b3JkLXdyYXA6YnJlYWstd29yZDt3b3JkLXdyYXA6YnJlYWstd29yZH0uc2ctdHlwZVNwZWNpbWVuOmFmdGVye2Rpc3BsYXk6YmxvY2s7Zm9udC1zaXplOjE2cHg7Zm9udC1zaXplOjAuOHJlbTttYXJnaW4tdG9wOjVweDtib3JkZXItdG9wOjFweCBzb2xpZCAjZGRkO2ZvbnQtd2VpZ2h0Om5vcm1hbH0uc2ctdHlwZVNwZWNpbWVuLS1wcmltYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmO2ZvbnQtd2VpZ2h0OmJvbGR9LnNnLXR5cGVTcGVjaW1lbi0tc2Vjb25kYXJ5e2ZvbnQtc2l6ZTozMHB4O2ZvbnQtc2l6ZToxLjVyZW07Zm9udC1mYW1pbHk6XCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmfS5zZy10eXBlU3BlY2ltZW4tLWdpYW50e2ZvbnQtc2l6ZToxMjBweDtmb250LXNpemU6NnJlbTtsaW5lLWhlaWdodDoxfS5pY29uLXNne2Rpc3BsYXk6aW5saW5lLWJsb2NrO3dpZHRoOjUwcHg7aGVpZ2h0OjUwcHg7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxMHB4O21hcmdpbi1ib3R0b206MTBweH0uc2ctZmF2aWNvbntwYWRkaW5nOjVweH0uc2ctZmF2aWNvbiBpbWd7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1yaWdodDoxNXB4fVxuIl19 */
\ No newline at end of file
+/**
+ * Styleguide type styles
+ */
+.sg-interfaceType, .sg-sectionHeading {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300; }
+
+.sg-interfaceType--subtle {
+  color: #888; }
+
+.sg-sectionHeading {
+  color: #181830; }
+
+/**
+ * Styleguide navigation style
+ */
+/**
+ * Styleguide .page styles
+ */
+.sg-page {
+  overflow: hidden;
+  padding: 8% 0; }
+
+.sg-page--start {
+  background-color: #181830;
+  padding: 70px 0 60px;
+  color: #fff; }
+
+.sg-spacer {
+  padding: 20px; }
+
+.sg-footer {
+  background-color: #181830;
+  color: #fff;
+  padding: 30px;
+  margin-top: 30px; }
+  .sg-footer h1 {
+    margin-bottom: .2em; }
+  .sg-footer a {
+    color: #fff;
+    border-bottom: 2px dashed rgba(255, 255, 255, 0.3); }
+    .sg-footer a:hover {
+      border-bottom: 2px solid #fff; }
+  .sg-footer :last-child {
+    margin-bottom: 0; }
+
+/**
+ * Colour swatches
+ */
+.sg-swatch {
+  text-align: center;
+  line-height: 30px;
+  margin: 10px 10px 0; }
+
+.sg-swatch-color {
+  height: 60px;
+  padding: 15px;
+  font-size: 13px;
+  font-size: 0.65rem;
+  font-family: Menlo, Monaco, "Courier New", monospace; }
+
+.sg-color-link-hover {
+  color: #185380; }
+  .sg-color-link-hover .sg-swatch-color {
+    background-color: #185380;
+    color: #fff; }
+    .sg-color-link-hover .sg-swatch-color:before {
+      content: "#185380";
+      display: block; }
+
+.sg-color-primary {
+  color: #181830; }
+  .sg-color-primary .sg-swatch-color {
+    background-color: #181830;
+    color: #fff; }
+    .sg-color-primary .sg-swatch-color:before {
+      content: "#181830";
+      display: block; }
+
+.sg-color-secondary {
+  color: #FE7C08; }
+  .sg-color-secondary .sg-swatch-color {
+    background-color: #FE7C08;
+    color: #fff; }
+    .sg-color-secondary .sg-swatch-color:before {
+      content: "#FE7C08";
+      display: block; }
+
+.sg-color-highlight {
+  color: #288ad6; }
+  .sg-color-highlight .sg-swatch-color {
+    background-color: #288ad6;
+    color: #fff; }
+    .sg-color-highlight .sg-swatch-color:before {
+      content: "#288ad6";
+      display: block; }
+
+.sg-color-text {
+  color: #444; }
+  .sg-color-text .sg-swatch-color {
+    background-color: #444;
+    color: #fff; }
+    .sg-color-text .sg-swatch-color:before {
+      content: "#444";
+      display: block; }
+
+.sg-color-background {
+  color: #f1f1f1; }
+  .sg-color-background .sg-swatch-color {
+    background-color: #f1f1f1;
+    color: #444;
+    border: #f1f1f1 solid 1px; }
+    .sg-color-background .sg-swatch-color:before {
+      content: "#f1f1f1";
+      display: block; }
+
+.sg-color-border {
+  color: #ddd; }
+  .sg-color-border .sg-swatch-color {
+    background-color: #ddd;
+    color: #444; }
+    .sg-color-border .sg-swatch-color:before {
+      content: "#ddd";
+      display: block; }
+
+.sg-color-link {
+  color: #288ad6; }
+  .sg-color-link .sg-swatch-color {
+    background-color: #288ad6;
+    color: #fff; }
+    .sg-color-link .sg-swatch-color:before {
+      content: "#288ad6";
+      display: block; }
+
+/**
+ * Typography
+ */
+.sg-type {
+  margin-bottom: 1em; }
+
+code {
+  border: 1px solid #ddd;
+  background-color: #F9F8F8;
+  font-size: 11px;
+  font-size: 0.55rem; }
+
+.sg-type-micro .sg-type-item {
+  font-size: 9px;
+  font-size: 0.45rem; }
+
+.sg-type-micro code:after {
+  content: " = 9px"; }
+
+.sg-type-smallest .sg-type-item {
+  font-size: 11px;
+  font-size: 0.55rem; }
+
+.sg-type-smallest code:after {
+  content: " = 11px"; }
+
+.sg-type-smaller .sg-type-item {
+  font-size: 13px;
+  font-size: 0.65rem; }
+
+.sg-type-smaller code:after {
+  content: " = 13px"; }
+
+.sg-type-small .sg-type-item {
+  font-size: 16px;
+  font-size: 0.8rem; }
+
+.sg-type-small code:after {
+  content: " = 16px"; }
+
+.sg-type-base .sg-type-item {
+  font-size: 20px;
+  font-size: 1rem; }
+
+.sg-type-base code:after {
+  content: " = 20px"; }
+
+.sg-type-mid .sg-type-item {
+  font-size: 25px;
+  font-size: 1.25rem; }
+
+.sg-type-mid code:after {
+  content: " = 25px"; }
+
+.sg-type-large .sg-type-item {
+  font-size: 32px;
+  font-size: 1.6rem; }
+
+.sg-type-large code:after {
+  content: " = 32px"; }
+
+.sg-type-largest .sg-type-item {
+  font-size: 40px;
+  font-size: 2rem; }
+
+.sg-type-largest code:after {
+  content: " = 40px"; }
+
+.sg-type-jumbo .sg-type-item {
+  font-size: 49px;
+  font-size: 2.45rem; }
+
+.sg-type-jumbo code:after {
+  content: " = 49px"; }
+
+.sg-typeSpecimen {
+  margin-bottom: 0;
+  margin-top: 0;
+  -ms-word-wrap: break-word;
+  word-wrap: break-word; }
+  .sg-typeSpecimen:after {
+    display: block;
+    font-size: 16px;
+    font-size: 0.8rem;
+    margin-top: 5px;
+    border-top: 1px solid #ddd;
+    font-weight: normal; }
+
+.sg-typeSpecimen--primary {
+  font-size: 30px;
+  font-size: 1.5rem;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
+.sg-typeSpecimen--secondary {
+  font-size: 30px;
+  font-size: 1.5rem;
+  font-family: Georgia, "Times New Roman", Times, serif; }
+
+.sg-typeSpecimen--giant {
+  font-size: 120px;
+  font-size: 6rem;
+  line-height: 1; }
+
+/**
+ * Icons
+ */
+.icon-sg {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  vertical-align: middle;
+  margin-right: 10px;
+  margin-bottom: 10px; }
+
+.sg-favicon {
+  padding: 5px; }
+  .sg-favicon img {
+    vertical-align: middle;
+    margin-right: 15px; }
+/*# sourceMappingURL=styleguide.css.map */
\ No newline at end of file

From c16c6698f74aa91e8c8ba7305fb8572c6ae0b32b Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 5 Nov 2015 23:50:17 +0000
Subject: [PATCH 104/136] tweak to ie10 selector for custom select

---
 .../src/scss/components/_forms-custom-select.scss   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/assets/src/scss/components/_forms-custom-select.scss b/assets/src/scss/components/_forms-custom-select.scss
index caaf0252..8102946d 100644
--- a/assets/src/scss/components/_forms-custom-select.scss
+++ b/assets/src/scss/components/_forms-custom-select.scss
@@ -40,17 +40,18 @@
 	.form-input--select {
 		appearance: none;
 
-		/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
+		// IE 10 & 11: http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5
 		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+			// This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select
 			&::-ms-expand {
 				display: none;
 			}
-		}
 
-		/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
-		&:focus::-ms-value {
-			background: transparent;
-			color: #222;
+			// Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text
+			&:focus::-ms-value {
+				background: transparent;
+				color: #222;
+			}
 		}
 	}
 }

From 7f77d983ab41e95dd320693efa13331b0f8e3a7d Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 6 Nov 2015 12:30:11 +0000
Subject: [PATCH 105/136] adds error handling to sass compilation

see https://github.com/nicbell/postscss/issues/1
---
 _grunt-configs/css.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/_grunt-configs/css.js b/_grunt-configs/css.js
index 74284062..c2fb15d5 100644
--- a/_grunt-configs/css.js
+++ b/_grunt-configs/css.js
@@ -36,6 +36,8 @@ module.exports = function (grunt, options) {
 				from: scssDir + '/styleguide.scss',
 				to: cssDir + '/styleguide.css'
 			}
-		]).then(done);
+		]).then(done).catch(function(error) {
+			console.error('\n' + error.formatted + '\n');
+		});
 	});
 };

From 88f9fb2e86871884b851218fabc19a37f0ccb9c8 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 6 Nov 2015 19:00:11 +0000
Subject: [PATCH 106/136] Fixes `:focus` regression bug

---
 assets/src/scss/components/_forms-custom-radioscheckboxes.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/src/scss/components/_forms-custom-radioscheckboxes.scss b/assets/src/scss/components/_forms-custom-radioscheckboxes.scss
index 08091a5b..7f91e791 100644
--- a/assets/src/scss/components/_forms-custom-radioscheckboxes.scss
+++ b/assets/src/scss/components/_forms-custom-radioscheckboxes.scss
@@ -46,7 +46,6 @@ $checkbox-indicator-width: .1em;
 .control--custom-input {
 	position: absolute;
 	opacity: 0;
-	visibility: hidden;
 	z-index: -1; // Put the input behind the label so it doesn't overlay text
 }
 

From 1a390a7f59f5a202e5b4950db773e6f5b085f35f Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 6 Nov 2015 19:10:25 +0000
Subject: [PATCH 107/136] Fixes custom select elements in IE. We won't show the
 custom arrow for IE now

---
 .../scss/components/_forms-custom-select.scss   | 17 +++++++----------
 index.html                                      |  5 ++---
 styleguide/index.html                           |  3 +--
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/assets/src/scss/components/_forms-custom-select.scss b/assets/src/scss/components/_forms-custom-select.scss
index 8102946d..12059a49 100644
--- a/assets/src/scss/components/_forms-custom-select.scss
+++ b/assets/src/scss/components/_forms-custom-select.scss
@@ -37,16 +37,17 @@
 		background: url(#);
 	}
 
+	// Hide custom arrow on IE <=11
+	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+		&:after {
+			display: none;
+		}
+	}
+
 	.form-input--select {
 		appearance: none;
 
-		// IE 10 & 11: http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5
 		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-			// This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select
-			&::-ms-expand {
-				display: none;
-			}
-
 			// Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text
 			&:focus::-ms-value {
 				background: transparent;
@@ -56,10 +57,6 @@
 	}
 }
 
-.lt-ie10 .form-input--selectWrapper:after {
-	display: none;
-}
-
 option {
 	font-weight: normal;
 }
diff --git a/index.html b/index.html
index 786a387a..f467c895 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
-<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
-<!--[if IE 9]><html class="no-js lt-ie10" lang="en"><![endif]-->
-<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="x-ua-compatible" content="ie=edge">
diff --git a/styleguide/index.html b/styleguide/index.html
index d0d2a61d..204befc9 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
-<!--[if IE 9]><html class="no-js lt-ie10" lang="en"><![endif]-->
-<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="x-ua-compatible" content="ie=edge">

From c7c34cc21ac150ae7abbc3f30181f464a2b559b5 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 6 Nov 2015 19:12:20 +0000
Subject: [PATCH 108/136] remove `minimul-ui` from the viewport metatag

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f467c895..068f64bd 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 		<meta http-equiv="x-ua-compatible" content="ie=edge">
 		<title>Kickoff</title>
 		<meta name="description" content="">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 		<!-- Built with Kickoff - trykickoff.github.io -->
 

From 5aca8dc2378d978c7775f352b5149ae9eff2c62d Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 9 Nov 2015 09:11:35 +0000
Subject: [PATCH 109/136] remove items that have been moved to other files

---
 assets/src/scss/_typography.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/assets/src/scss/_typography.scss b/assets/src/scss/_typography.scss
index ea4a512b..0cb7eb46 100644
--- a/assets/src/scss/_typography.scss
+++ b/assets/src/scss/_typography.scss
@@ -3,9 +3,7 @@
  * - Base
  * - Paragraphs
  * - Headings
- * - Lists
- * - Definition lists
- * - Blockquotes
+ * - Type sizes
  * - Misc
  * - Utilities
  *

From 583f4740335110f519a9fb5e8bc33748c80503f4 Mon Sep 17 00:00:00 2001
From: ashleynolan <nolly00@gmail.com>
Date: Mon, 9 Nov 2015 22:44:53 +0000
Subject: [PATCH 110/136] =?UTF-8?q?Fixes=20#61=20=E2=80=93=20Updating=20ta?=
 =?UTF-8?q?ble=20styles=20to=20sensible=20defaults=20and=20removing=20unec?=
 =?UTF-8?q?essary=20modifiers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/dist/css/kickoff-old-ie.css      | 146 +++++------------
 assets/dist/css/kickoff.css             | 205 ++++++++----------------
 assets/src/scss/components/_tables.scss | 176 +++++---------------
 3 files changed, 147 insertions(+), 380 deletions(-)

diff --git a/assets/dist/css/kickoff-old-ie.css b/assets/dist/css/kickoff-old-ie.css
index 10929f6b..239abf60 100644
--- a/assets/dist/css/kickoff-old-ie.css
+++ b/assets/dist/css/kickoff-old-ie.css
@@ -782,7 +782,7 @@ hr {
   border-radius: 5px;
   background-clip: padding-box;
   -webkit-transition: border 200ms ease-in-out;
-          transition: border 200ms ease-in-out; }
+  transition: border 200ms ease-in-out; }
   .form-input:focus {
     border-color: #181830;
     outline: 0;
@@ -1086,7 +1086,6 @@ input[type="submit"] {
 .control--custom-input {
   position: absolute;
   opacity: 0;
-  visibility: hidden;
   z-index: -1; }
 
 .control-indicator {
@@ -1095,7 +1094,7 @@ input[type="submit"] {
   width: 1em;
   height: 1em;
   -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out;
+  transition: all 100ms ease-in-out;
   border: 0.1em solid #181830;
   background-color: #181830;
   vertical-align: middle;
@@ -1119,7 +1118,7 @@ input[type="submit"] {
     display: block;
     opacity: 0;
     -webkit-transition: all 250ms ease-in-out;
-            transition: all 250ms ease-in-out; }
+    transition: all 250ms ease-in-out; }
 
 .control-indicator--checkbox:before, .control-indicator--checkbox:after {
   top: 50%;
@@ -1199,21 +1198,17 @@ input[type="submit"] {
     -ms-pointer-events: none;
     pointer-events: none;
     background: url(#); }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .form-controlGroup-inputWrapper--select:after {
+      display: none; } }
   .form-controlGroup-inputWrapper--select .form-input--select {
     -webkit-appearance: none;
        -moz-appearance: none;
-            appearance: none;
-    /* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
-    /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */ }
+            appearance: none; }
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      .form-controlGroup-inputWrapper--select .form-input--select::-ms-expand {
-        display: none; } }
-    .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
-      background: transparent;
-      color: #222; }
-
-.lt-ie10 .form-input--selectWrapper:after {
-  display: none; }
+      .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
+        background: transparent;
+        color: #222; } }
 
 option {
   font-weight: normal; }
@@ -1243,7 +1238,7 @@ option {
  */
 a {
   -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
+  transition: all 100ms ease-in-out; }
   a, a:link {
     color: #288ad6;
     text-decoration: none; }
@@ -1957,7 +1952,7 @@ video {
  *   - .table--rounded
  *   - .table--striped
  *   – .table--hover
- * – .tableResponsive
+ * – .responsiveTable
  */
 /**
  * Define associated Table variables
@@ -1965,101 +1960,46 @@ video {
 /**
  * Customizes the `.table` component with basic values, each used across all table variations.
  */
-.table {
+table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 28px;
   border-spacing: 0;
+  border: 2px solid #ccc;
   background-color: #f1f1f1; }
-  .table > thead > th,
-  .table > thead > td,
-  .table > tbody > th,
-  .table > tbody > td,
-  .table > tfoot > th,
-  .table > tfoot > td {
+  table th,
+  table td {
     padding: 8px;
     line-height: 28px;
     vertical-align: top;
-    border-top: 1px solid #ddd; }
-  .table > thead th,
-  .table > thead td {
+    border: 1px solid #ccc; }
+    table th:first-child,
+    table td:first-child {
+      border-left: 0; }
+    table th:last-child,
+    table td:last-child {
+      border-right: 0; }
+  table > thead th,
+  table > thead td {
     vertical-align: bottom;
-    border-bottom: 2px solid #ddd; }
-  .table > tfoot td {
-    border-top: 3px solid #ddd; }
-  .table > caption + thead > tr:first-child > th,
-  .table > caption + thead > tr:first-child > td,
-  .table > colgroup + thead > tr:first-child > th,
-  .table > colgroup + thead > tr:first-child > td,
-  .table > thead:first-child > tr:first-child > th,
-  .table > thead:first-child > tr:first-child > td {
+    border-bottom: 2px solid #ccc; }
+  table > tfoot td {
+    border-top: 2px solid #ccc;
+    border-bottom: 0; }
+  table > thead:first-child > tr:first-child > th,
+  table > thead:first-child > tr:first-child > td {
     border-top: 0; }
-  .table > tbody + tbody {
-    border-top: 2px solid #ddd; }
-  .table .table {
+  table tr:hover td, table tr:hover th {
+    background-color: inherit; }
+  table > tbody + tbody {
+    border-top: 2px solid #ccc; }
+  table table,
+  table .table {
     background-color: #f1f1f1; }
 
 th {
   text-align: left; }
 
-.table--condensed > thead th,
-.table--condensed > thead td,
-.table--condensed > tbody th,
-.table--condensed > tbody td,
-.table--condensed > tfoot th,
-.table--condensed > tfoot td {
-  padding: 5px; }
-
-/**
- * Bordered version
- * Add borders all around the table and between all the columns.
- */
-.table--bordered {
-  border: 2px solid #ddd; }
-  .table--bordered > thead th,
-  .table--bordered > thead td,
-  .table--bordered > tbody th,
-  .table--bordered > tbody td,
-  .table--bordered > tfoot th,
-  .table--bordered > tfoot td {
-    border: 1px solid #ddd; }
-  .table--bordered > thead th:first-child,
-  .table--bordered > thead td:first-child,
-  .table--bordered > tbody th:first-child,
-  .table--bordered > tbody td:first-child,
-  .table--bordered > tfoot th:first-child,
-  .table--bordered > tfoot td:first-child {
-    border-left: 0; }
-  .table--bordered > thead th:last-child,
-  .table--bordered > thead td:last-child,
-  .table--bordered > tbody th:last-child,
-  .table--bordered > tbody td:last-child,
-  .table--bordered > tfoot th:last-child,
-  .table--bordered > tfoot td:last-child {
-    border-right: 0; }
-  .table--bordered > thead th,
-  .table--bordered > thead td {
-    border-bottom-width: 2px; }
-  .table--bordered > tfoot th,
-  .table--bordered > tfoot td {
-    border-top-width: 2px;
-    border-bottom: 0; }
-
-/**
- * Rounded version
- */
-.table--rounded {
-  border-radius: 10px; }
-  .table--rounded.table--bordered th:first-child,
-  .table--rounded.table--bordered td:first-child {
-    border-left: 0; }
-  .table--rounded.table--bordered th:last-child,
-  .table--rounded.table--bordered td:last-child {
-    border-right: 0; }
-  .table--rounded.table--bordered > tfoot th,
-  .table--rounded.table--bordered > tfoot td {
-    border-bottom: 0; }
-
 /**
  * Zebra-striping
  * Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -2068,15 +2008,9 @@ th {
 .table--striped tbody :nth-child(odd) td {
   background-color: #f9f9f9 !important; }
 
-/**
- * Hover effect
- */
-.table--hover tr:hover td, .table--hover tr:hover th {
-  background-color: #f5f5f5; }
-
 /**
  * Responsive tables
- * Wrap your tables in `.tableResponsive` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
+ * Wrap your tables in `.responsiveTable` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
  *
  * If you need more responsive tables, consider Tablesaw by the Filament Group:
  * https://github.com/filamentgroup/tablesaw
@@ -2137,7 +2071,7 @@ pre {
     z-index: 100;
     background-color: #fff;
     -webkit-transition: all 100ms ease-in-out;
-            transition: all 100ms ease-in-out; }
+    transition: all 100ms ease-in-out; }
     .skipToContent a:focus {
       top: 5px; }
 
@@ -2265,7 +2199,7 @@ textarea[contenteditable] {
 
 .transition {
   -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
+  transition: all 100ms ease-in-out; }
 
 /* Print styles */
 /**
diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css
index b0ed7724..dec62ed7 100644
--- a/assets/dist/css/kickoff.css
+++ b/assets/dist/css/kickoff.css
@@ -784,7 +784,7 @@ hr {
   border-radius: 5px;
   background-clip: padding-box;
   -webkit-transition: border 200ms ease-in-out;
-          transition: border 200ms ease-in-out; }
+  transition: border 200ms ease-in-out; }
   .form-input:focus {
     border-color: #181830;
     outline: 0;
@@ -1085,7 +1085,6 @@ input[type="submit"] {
 .control--custom-input {
   position: absolute;
   opacity: 0;
-  visibility: hidden;
   z-index: -1; }
 
 .control-indicator {
@@ -1094,7 +1093,7 @@ input[type="submit"] {
   width: 1em;
   height: 1em;
   -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out;
+  transition: all 100ms ease-in-out;
   border: 0.1em solid #181830;
   background-color: #181830;
   vertical-align: middle;
@@ -1118,7 +1117,7 @@ input[type="submit"] {
     display: block;
     opacity: 0;
     -webkit-transition: all 250ms ease-in-out;
-            transition: all 250ms ease-in-out; }
+    transition: all 250ms ease-in-out; }
 
 .control-indicator--checkbox:before, .control-indicator--checkbox:after {
   top: 50%;
@@ -1198,21 +1197,17 @@ input[type="submit"] {
     -ms-pointer-events: none;
     pointer-events: none;
     background: url(#); }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .form-controlGroup-inputWrapper--select:after {
+      display: none; } }
   .form-controlGroup-inputWrapper--select .form-input--select {
     -webkit-appearance: none;
        -moz-appearance: none;
-            appearance: none;
-    /* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
-    /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */ }
+            appearance: none; }
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      .form-controlGroup-inputWrapper--select .form-input--select::-ms-expand {
-        display: none; } }
-    .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
-      background: transparent;
-      color: #222; }
-
-.lt-ie10 .form-input--selectWrapper:after {
-  display: none; }
+      .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
+        background: transparent;
+        color: #222; } }
 
 option {
   font-weight: normal; }
@@ -1242,7 +1237,7 @@ option {
  */
 a {
   -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
+  transition: all 100ms ease-in-out; }
   a, a:link {
     color: #288ad6;
     text-decoration: none; }
@@ -2126,7 +2121,7 @@ video {
  *   - .table--rounded
  *   - .table--striped
  *   – .table--hover
- * – .tableResponsive
+ * – .responsiveTable
  */
 /**
  * Define associated Table variables
@@ -2134,101 +2129,46 @@ video {
 /**
  * Customizes the `.table` component with basic values, each used across all table variations.
  */
-.table {
+table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 28px;
   border-spacing: 0;
+  border: 2px solid #ccc;
   background-color: #f1f1f1; }
-  .table > thead > th,
-  .table > thead > td,
-  .table > tbody > th,
-  .table > tbody > td,
-  .table > tfoot > th,
-  .table > tfoot > td {
+  table th,
+  table td {
     padding: 8px;
     line-height: 28px;
     vertical-align: top;
-    border-top: 1px solid #ddd; }
-  .table > thead th,
-  .table > thead td {
+    border: 1px solid #ccc; }
+    table th:first-child,
+    table td:first-child {
+      border-left: 0; }
+    table th:last-child,
+    table td:last-child {
+      border-right: 0; }
+  table > thead th,
+  table > thead td {
     vertical-align: bottom;
-    border-bottom: 2px solid #ddd; }
-  .table > tfoot td {
-    border-top: 3px solid #ddd; }
-  .table > caption + thead > tr:first-child > th,
-  .table > caption + thead > tr:first-child > td,
-  .table > colgroup + thead > tr:first-child > th,
-  .table > colgroup + thead > tr:first-child > td,
-  .table > thead:first-child > tr:first-child > th,
-  .table > thead:first-child > tr:first-child > td {
+    border-bottom: 2px solid #ccc; }
+  table > tfoot td {
+    border-top: 2px solid #ccc;
+    border-bottom: 0; }
+  table > thead:first-child > tr:first-child > th,
+  table > thead:first-child > tr:first-child > td {
     border-top: 0; }
-  .table > tbody + tbody {
-    border-top: 2px solid #ddd; }
-  .table .table {
+  table tr:hover td, table tr:hover th {
+    background-color: inherit; }
+  table > tbody + tbody {
+    border-top: 2px solid #ccc; }
+  table table,
+  table .table {
     background-color: #f1f1f1; }
 
 th {
   text-align: left; }
 
-.table--condensed > thead th,
-.table--condensed > thead td,
-.table--condensed > tbody th,
-.table--condensed > tbody td,
-.table--condensed > tfoot th,
-.table--condensed > tfoot td {
-  padding: 5px; }
-
-/**
- * Bordered version
- * Add borders all around the table and between all the columns.
- */
-.table--bordered {
-  border: 2px solid #ddd; }
-  .table--bordered > thead th,
-  .table--bordered > thead td,
-  .table--bordered > tbody th,
-  .table--bordered > tbody td,
-  .table--bordered > tfoot th,
-  .table--bordered > tfoot td {
-    border: 1px solid #ddd; }
-  .table--bordered > thead th:first-child,
-  .table--bordered > thead td:first-child,
-  .table--bordered > tbody th:first-child,
-  .table--bordered > tbody td:first-child,
-  .table--bordered > tfoot th:first-child,
-  .table--bordered > tfoot td:first-child {
-    border-left: 0; }
-  .table--bordered > thead th:last-child,
-  .table--bordered > thead td:last-child,
-  .table--bordered > tbody th:last-child,
-  .table--bordered > tbody td:last-child,
-  .table--bordered > tfoot th:last-child,
-  .table--bordered > tfoot td:last-child {
-    border-right: 0; }
-  .table--bordered > thead th,
-  .table--bordered > thead td {
-    border-bottom-width: 2px; }
-  .table--bordered > tfoot th,
-  .table--bordered > tfoot td {
-    border-top-width: 2px;
-    border-bottom: 0; }
-
-/**
- * Rounded version
- */
-.table--rounded {
-  border-radius: 10px; }
-  .table--rounded.table--bordered th:first-child,
-  .table--rounded.table--bordered td:first-child {
-    border-left: 0; }
-  .table--rounded.table--bordered th:last-child,
-  .table--rounded.table--bordered td:last-child {
-    border-right: 0; }
-  .table--rounded.table--bordered > tfoot th,
-  .table--rounded.table--bordered > tfoot td {
-    border-bottom: 0; }
-
 /**
  * Zebra-striping
  * Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -2237,57 +2177,50 @@ th {
 .table--striped tbody :nth-child(odd) td {
   background-color: #f9f9f9 !important; }
 
-/**
- * Hover effect
- */
-.table--hover tr:hover td, .table--hover tr:hover th {
-  background-color: #f5f5f5; }
-
 /**
  * Responsive tables
- * Wrap your tables in `.tableResponsive` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
+ * Wrap your tables in `.responsiveTable` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
  *
  * If you need more responsive tables, consider Tablesaw by the Filament Group:
  * https://github.com/filamentgroup/tablesaw
  */
 @media screen and (max-width: 46.875em) {
-  .tableResponsive {
+  .responsiveTable {
     width: 100%;
     margin-bottom: 21px;
     overflow-y: hidden;
     overflow-x: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid #ddd;
+    border: 1px solid #ccc;
     -webkit-overflow-scrolling: touch; }
-    .tableResponsive > .table {
-      margin-bottom: 0; }
-      .tableResponsive > .table > thead th,
-      .tableResponsive > .table > thead td,
-      .tableResponsive > .table > tbody th,
-      .tableResponsive > .table > tbody td,
-      .tableResponsive > .table > tfoot th,
-      .tableResponsive > .table > tfoot td {
-        white-space: nowrap; }
-    .tableResponsive > .table-bordered {
+    .responsiveTable > table {
+      margin-bottom: 0;
       border: 0; }
-      .tableResponsive > .table-bordered > thead th:first-child,
-      .tableResponsive > .table-bordered > thead td:first-child,
-      .tableResponsive > .table-bordered > tbody th:first-child,
-      .tableResponsive > .table-bordered > tbody td:first-child,
-      .tableResponsive > .table-bordered > tfoot th:first-child,
-      .tableResponsive > .table-bordered > tfoot td:first-child {
-        border-left: 0; }
-      .tableResponsive > .table-bordered > thead th:last-child,
-      .tableResponsive > .table-bordered > thead td:last-child,
-      .tableResponsive > .table-bordered > tbody th:last-child,
-      .tableResponsive > .table-bordered > tbody td:last-child,
-      .tableResponsive > .table-bordered > tfoot th:last-child,
-      .tableResponsive > .table-bordered > tfoot td:last-child {
-        border-right: 0; }
-      .tableResponsive > .table-bordered > tbody > th,
-      .tableResponsive > .table-bordered > tbody > td,
-      .tableResponsive > .table-bordered > tfoot tr:last-child > th,
-      .tableResponsive > .table-bordered > tfoot tr:last-child > td {
+      .responsiveTable > table > thead th,
+      .responsiveTable > table > thead td,
+      .responsiveTable > table > tbody th,
+      .responsiveTable > table > tbody td,
+      .responsiveTable > table > tfoot th,
+      .responsiveTable > table > tfoot td {
+        white-space: nowrap; }
+        .responsiveTable > table > thead th:first-child,
+        .responsiveTable > table > thead td:first-child,
+        .responsiveTable > table > tbody th:first-child,
+        .responsiveTable > table > tbody td:first-child,
+        .responsiveTable > table > tfoot th:first-child,
+        .responsiveTable > table > tfoot td:first-child {
+          border-left: 0; }
+        .responsiveTable > table > thead th:last-child,
+        .responsiveTable > table > thead td:last-child,
+        .responsiveTable > table > tbody th:last-child,
+        .responsiveTable > table > tbody td:last-child,
+        .responsiveTable > table > tfoot th:last-child,
+        .responsiveTable > table > tfoot td:last-child {
+          border-right: 0; }
+      .responsiveTable > table > tbody > th,
+      .responsiveTable > table > tbody > td,
+      .responsiveTable > table > tfoot tr:last-child > th,
+      .responsiveTable > table > tfoot tr:last-child > td {
         border-bottom: 0; } }
 
 /**
@@ -2346,7 +2279,7 @@ pre {
     z-index: 100;
     background-color: #fff;
     -webkit-transition: all 100ms ease-in-out;
-            transition: all 100ms ease-in-out; }
+    transition: all 100ms ease-in-out; }
     .skipToContent a:focus {
       top: 5px; }
 
@@ -2474,7 +2407,7 @@ textarea[contenteditable] {
 
 .transition {
   -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
+  transition: all 100ms ease-in-out; }
 
 /* Print styles */
 /**
diff --git a/assets/src/scss/components/_tables.scss b/assets/src/scss/components/_tables.scss
index 19a778cd..10dfe139 100644
--- a/assets/src/scss/components/_tables.scss
+++ b/assets/src/scss/components/_tables.scss
@@ -10,7 +10,7 @@
  *   - .table--rounded
  *   - .table--striped
  *   – .table--hover
- * – .tableResponsive
+ * – .responsiveTable
  */
 
 // scss-lint:disable SelectorDepth
@@ -20,53 +20,51 @@
  */
 $table-bgColor                : $color-bg !default; // Default background color used for all tables.
 $table-bgColor--accent        : #f9f9f9 !default; // Background color used for `.table-striped`.
-$table-bgColor--hover         : #f5f5f5 !default; // Background color used for `.table-hover`.
-$table-bgColor--active        : $table-bgColor--hover !default;
-$table-borderColor           : #ddd !default; // Border color for table and cell borders.
+$table-bgColor--hover         : inherit !default; // Background color used for `.table-hover` – set to 'inherit' by default (so no hover effect)
+$table-borderColor            : #ccc !default; // Border color for table and cell borders.
 
 /**
  * Customizes the `.table` component with basic values, each used across all table variations.
  */
 $table-cell-padding           : 8px !default; // Padding for `<th>`s and `<td>`s.
-$table-condensed-cell-padding : 5px !default; // Padding for cells in `.table-condensed`.
-
 
 
 // Baseline styles
-.table {
+table {
 	width: 100%;
 	max-width: 100%;
 	margin-bottom: $baseline;
 	border-spacing: 0;
+	border: 2px solid $table-borderColor;
 	background-color: $table-bgColor;
 
 	// Cells
-	> thead,
-	> tbody,
-	> tfoot {
-		> th,
-		> td {
-			padding: $table-cell-padding;
-			line-height: $baseline;
-			vertical-align: top;
-			border-top: 1px solid $table-borderColor;
-		}
+	th,
+	td {
+		padding: $table-cell-padding;
+		line-height: $baseline;
+		vertical-align: top;
+		border: 1px solid $table-borderColor;
+
+		&:first-child {	border-left: 0;	}
+		&:last-child {	border-right: 0;	}
 	}
 
 	// Bottom align for column headings
-	> thead th,
-	> thead td {
-		vertical-align: bottom;
-		border-bottom: 2px solid $table-borderColor;
+	> thead {
+		th,
+		td {
+			vertical-align: bottom;
+			border-bottom: 2px solid $table-borderColor;
+		}
 	}
 
 	> tfoot td {
-		border-top: 3px solid $table-borderColor;
+		border-top: 2px solid $table-borderColor;
+		border-bottom: 0;
 	}
 
 	// Remove top border from thead by default
-	> caption + thead,
-	> colgroup + thead,
 	> thead:first-child {
 		> tr:first-child {
 			> th,
@@ -76,13 +74,21 @@ $table-condensed-cell-padding : 5px !default; // Padding for cells in `.table-co
 		}
 	}
 
+	// if a hover color has been set in the variables
+	tr:hover {
+		td, th {
+			background-color: $table-bgColor--hover;
+		}
+	}
+
 	// Account for multiple tbody instances
 	> tbody + tbody {
 		border-top: 2px solid $table-borderColor;
 	}
 
 	// Nesting
-	.table {
+	& table,
+	& .table {
 		background-color: $color-bg;
 	}
 }
@@ -92,85 +98,6 @@ th {
 }
 
 
-// Condensed table w/ half padding
-.table--condensed {
-	> thead,
-	> tbody,
-	> tfoot {
-		th,
-		td {
-			padding: $table-condensed-cell-padding;
-		}
-	}
-}
-
-/**
- * Bordered version
- * Add borders all around the table and between all the columns.
- */
-.table--bordered {
-	border: 2px solid $table-borderColor;
-
-	> thead,
-	> tbody,
-	> tfoot {
-		th,
-		td {
-			border: 1px solid $table-borderColor;
-		}
-
-		th:first-child,
-		td:first-child {
-			border-left: 0;
-		}
-
-		th:last-child,
-		td:last-child {
-			border-right: 0;
-		}
-
-	}
-
-	> thead {
-		th,
-		td {
-			border-bottom-width: 2px;
-		}
-	}
-
-	> tfoot {
-		th,
-		td {
-			border-top-width: 2px;
-			border-bottom: 0;
-		}
-	}
-}
-
-/**
- * Rounded version
- */
-.table--rounded {
-	border-radius: 10px;
-
-	&.table--bordered {
-			th:first-child,
-			td:first-child {
-				border-left: 0;
-			}
-
-			th:last-child,
-			td:last-child {
-				border-right: 0;
-			}
-
-		> tfoot th,
-		> tfoot td {
-			border-bottom: 0;
-		}
-	}
-}
-
 /**
  * Zebra-striping
  * Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -183,26 +110,14 @@ th {
 }
 
 
-/**
- * Hover effect
- */
-.table--hover {
-	tr:hover {
-		td, th {
-			background-color: $table-bgColor--hover;
-		}
-	}
-}
-
-
 /**
  * Responsive tables
- * Wrap your tables in `.tableResponsive` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
+ * Wrap your tables in `.responsiveTable` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
  *
  * If you need more responsive tables, consider Tablesaw by the Filament Group:
  * https://github.com/filamentgroup/tablesaw
  */
-.tableResponsive {
+.responsiveTable {
 	@include respond-max($bp-single-col) {
 		width: 100%;
 		margin-bottom: ($line-height-base * .75) + px;
@@ -213,8 +128,9 @@ th {
 		-webkit-overflow-scrolling: touch;
 
 		// Tighten up spacing
-		> .table {
+		> table {
 			margin-bottom: 0;
+			border: 0;
 
 			// Ensure the content doesn't wrap
 			> thead,
@@ -223,26 +139,10 @@ th {
 				th,
 				td {
 					white-space: nowrap;
-				}
-			}
-		}
-
-		// Special overrides for the bordered tables
-		> .table-bordered {
-			border: 0;
-
-			// Nuke the appropriate borders so that the parent can handle them
-			> thead,
-			> tbody,
-			> tfoot {
-				th:first-child,
-				td:first-child {
-					border-left: 0;
-				}
 
-				th:last-child,
-				td:last-child {
-					border-right: 0;
+					// Nuke the appropriate borders so that the parent can handle them
+					&:first-child {	border-left: 0; }
+					&:last-child {	border-right: 0; }
 				}
 			}
 

From 276d1b89ee83c4d7c98c39b68b03df172776d5ef Mon Sep 17 00:00:00 2001
From: ashleynolan <nolly00@gmail.com>
Date: Mon, 9 Nov 2015 22:52:07 +0000
Subject: [PATCH 111/136] Updating changelog

---
 changelog.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/changelog.md b/changelog.md
index 47d07a18..001c7b38 100644
--- a/changelog.md
+++ b/changelog.md
@@ -17,6 +17,7 @@ All latest changes are documented on our site at http://trykickoff.github.io
   - custom checkboxes don't depend on SVGs and a tick variant has been added
 - Create new `_links.scss` and remove relevant code from `_typography.scss`
 - move (un)ordered & definition lists into _lists.scss
+- Simplified tables – now has sensible default values rather than classes as they are usually used as content
 
 #### Tooling
 - add [grunt-filesizegzip](https://github.com/mrmartineau/grunt-filesizegzip) to show file size and gzipped file size on save

From faaec7664d1490825bcff3a149d9d0d00bd4300c Mon Sep 17 00:00:00 2001
From: Nic Bell <nic@ixoxo.co.uk>
Date: Tue, 10 Nov 2015 11:41:01 +0000
Subject: [PATCH 112/136] Made block grids use any element, also switched break
 points to a sass map.

---
 assets/src/scss/_variables.scss              |   1 -
 assets/src/scss/components/_block-grids.scss | 110 ++++++++++---------
 package.json                                 |   2 +-
 3 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss
index bf056b5b..72907871 100644
--- a/assets/src/scss/_variables.scss
+++ b/assets/src/scss/_variables.scss
@@ -65,7 +65,6 @@ $bp-huge                      : 1250; // Set in px
 
 // Special breakpoints
 $bp-single-col                : $bp-mid; // Break to single column (used in the grid)
-$bp-block-grid-narrow         : $bp-narrow; // Breakpoint for narrow block grids TODO: is this needed if the new block grids cover it?
 $bp-rwd-text                  : $bp-mid; // Reduce text size below this width
 
 
diff --git a/assets/src/scss/components/_block-grids.scss b/assets/src/scss/components/_block-grids.scss
index e9eea6d5..af186f0b 100644
--- a/assets/src/scss/components/_block-grids.scss
+++ b/assets/src/scss/components/_block-grids.scss
@@ -3,89 +3,95 @@
  * These are suited for repeating blocks of content. See below for usage
  *
  * Usage:
- * <ul class="l-blockGrid l-blockGrid--3up">
- *     <li></li>
+ * <ul class="l-blockGrid l-blockGrid--3">
+ *     <li class="l-blockGrid-item"></li>
  * </ul>
  *
- * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">
- *     <li></li>
- * </ul>
+ * <div class="l-blockGrid l-blockGrid--4 l-blockGrid--2--narrow l-blockGrid--6--wide">
+ *     <div class="l-blockGrid-item"></div>
+ * </div>
+ */
+ 
+ 
+/**
+ * Block grid breakpoints
+ * Add or remove any breakpoints that you may or may not need.
+ * Note: Reorder these if your breakpoints aren't in this order, 
+ * should be smallest to largest.
  */
+$block-grid-breakpoints: (
+	narrow: $bp-narrow,
+	default: $bp-single-col,
+	//mid: $bp-mid,
+	//wide: $bp-wide,
+	//huge: $bp-huge
+);
 
+
+/**
+ * Generate block grids based on colum count
+ */
 @mixin blockGridHelper($mutator: false) {
-	$suffix: up;
+	$suffix: '';
 
-	@if($mutator) {
-		$suffix: up--#{$mutator};
+	// default doesn't need a mutator
+	@if($mutator and not ($mutator == default)) {
+		$suffix: '--' + #{$mutator};
 	}
 
 	@for $i from 1 to $grid-column-count + 1 {
-		&.l-blockGrid--#{$i}#{$suffix} > li {
-			float: left;
-			width: percentage(1 / $i);
-
-			//Clear incase of height difference of block items.
-			&:nth-of-type(#{$i}n + 1) {
-				clear: left;
-			}
-
-			&:not(:nth-of-type(#{$i}n + 1)) {
-				clear: none;
+		.l-blockGrid--#{$i}#{$suffix} {
+			.l-blockGrid-item {
+				float: left;
+				width: percentage(1 / $i);
+	
+				/**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */
+				&:nth-of-type(#{$i}n + 1) {
+					clear: left;
+				}
+	
+				&:not(:nth-of-type(#{$i}n + 1)) {
+					clear: none;
+				}
 			}
 		}
 	}
 }
 
+
 .l-blockGrid {
 	display: block;
 	list-style-type: none;
 	margin: 0;
 	@include clearfix;
+}
 
-	> li {
-		display: block;
-		height: auto;
-
-		@if $grid-column-padding > 0 {
-			padding: $grid-column-padding + px;
-		}
-	}
-
-	// Narrow block-grid
-	@include respond-min-max($bp-block-grid-narrow, $bp-single-col) {
-		@include blockGridHelper('narrow');
-	}
-
-	// Standard block-grid
-	@include respond-min($bp-single-col) {
-		@include blockGridHelper();
-	}
-
-	// Mid block-grid
-	@include respond-min($bp-mid) {
-		@include blockGridHelper('mid');
-	}
-
-	// Wide block-grid
-	@include respond-min($bp-wide) {
-		@include blockGridHelper('wide');
+.l-blockGrid-item {
+	display: block;
+	height: auto;
+	
+	@if $grid-column-padding > 0 {
+		padding: $grid-column-padding + px;
 	}
+}
 
-	// Huge block-grid
-	@include respond-min($bp-huge) {
-		@include blockGridHelper('huge');
+@each $name, $value in $block-grid-breakpoints {
+	@include respond-min($value) {
+		@include blockGridHelper($name);
 	}
 }
 
 
 /**
- * Guttered block grid
+ * Guttered block grid mutator
  */
 .l-blockGrid--guttered {
 	margin-left: -#{$grid-gutter-width}px;
 
-	> li {
+	.l-blockGrid-item {
 		padding-left: #{$grid-gutter-width}px;
 		padding-bottom: #{$grid-gutter-width}px;
 	}
diff --git a/package.json b/package.json
index b4d7632c..b602c0da 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "grunt": "^0.4.5",
-    "grunt-browserify": "^4.0.0",
+    "grunt-browserify": "^4.0.1",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^0.9.4",

From 1b0ce03bfd2b8aff5f3d43033a9e4f1f91954841 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 11 Nov 2015 11:02:09 +0000
Subject: [PATCH 113/136] Update Fixes recent imagemin bug, see
 https://github.com/gruntjs/grunt-contrib-imagemin/issues/330

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b4d7632c..583bfb8b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "grunt-browserify": "^4.0.0",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.2",
-    "grunt-contrib-imagemin": "^0.9.4",
+    "grunt-contrib-imagemin": "^1.0.0",
     "grunt-grunticon": "^2.1.6",
     "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",

From 4a02763be319f25f9be7eaf1ae63cd2f5cba1d08 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 11 Nov 2015 11:02:29 +0000
Subject: [PATCH 114/136] add some more SVGO compression settings

---
 _grunt-configs/images.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/_grunt-configs/images.js b/_grunt-configs/images.js
index 62e4cbfe..977504aa 100644
--- a/_grunt-configs/images.js
+++ b/_grunt-configs/images.js
@@ -21,7 +21,9 @@ module.exports.tasks = {
 				progressive : true,
 				svgoPlugins: [
 					{ removeViewBox: false },
-					{ removeUselessStrokeAndFill: false }
+					{ removeUselessStrokeAndFill: false },
+					{ removeTitle: true },
+					{ removeXMLProcInst: false },
 				]
 			},
 			files: [{

From 5f18ca123b216da9e4cc1a2b86f1c994cd4f50cd Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Wed, 11 Nov 2015 11:04:50 +0000
Subject: [PATCH 115/136] remove html validation grunt task

---
 _grunt-configs/tests.js                   | 22 ----------------------
 package.json                              |  1 -
 testing/validation/validation-report.json |  1 -
 testing/validation/validation-status.json |  1 -
 4 files changed, 25 deletions(-)
 delete mode 100644 testing/validation/validation-report.json
 delete mode 100644 testing/validation/validation-status.json

diff --git a/_grunt-configs/tests.js b/_grunt-configs/tests.js
index dfac7fdc..aaa047bc 100644
--- a/_grunt-configs/tests.js
+++ b/_grunt-configs/tests.js
@@ -1,24 +1,2 @@
 module.exports.tasks = {
-
-	/**
-	 * Grunt Validation
-	 * https://github.com/praveenvijayan/grunt-html-validation
-	 * W3C html validation grunt plugin
-	 */
-	validation: {
-		options: {
-			reset: true,
-			path: '<%=config.testing.validationDir%>/validation/validation-status.json',
-			reportpath: '<%=config.testing.validationDir%>/validation/validation-report.json',
-
-			// ignores these errors
-			// Error ignored is the chrome frame meta tag, since this is a safely ignored validation error
-			relaxerror: ['A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.']
-		},
-		files: {
-				src: ['**/*.html',
-							'!*/dist/img/**/*.html',
-							'!node_modules/**/*.html']
-		}
-	}
 };
diff --git a/package.json b/package.json
index 583bfb8b..a807d7cc 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^1.0.0",
     "grunt-grunticon": "^2.1.6",
-    "grunt-html-validation": "^0.1.18",
     "grunt-newer": "^1.1.0",
     "grunt-shimly": "^1.0.1",
     "load-grunt-configs": "^0.4.3",
diff --git a/testing/validation/validation-report.json b/testing/validation/validation-report.json
deleted file mode 100644
index 6e8a3cef..00000000
--- a/testing/validation/validation-report.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"filename":"index.html","error":[]},{"filename":"index.html","error":[]},{"filename":"styleguide/index.html","error":[]},{"filename":"styleguide/index.html","error":[]}]
\ No newline at end of file
diff --git a/testing/validation/validation-status.json b/testing/validation/validation-status.json
deleted file mode 100644
index 4ffd5ecc..00000000
--- a/testing/validation/validation-status.json
+++ /dev/null
@@ -1 +0,0 @@
-{"index.html":true,"styleguide/index.html":true}
\ No newline at end of file

From 2c0bd89f6e411b5a46352ba1ed6440bf1e0757fb Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:31:09 +0000
Subject: [PATCH 116/136] change `trykickoff.github.io` to `trykickoff.com`

---
 Gruntfile.js                           |  2 +-
 assets/src/scss/_dependencies.scss     | 10 +++++-----
 assets/src/scss/_variables.scss        |  2 +-
 assets/src/scss/components/_forms.scss |  4 ++--
 assets/src/scss/components/_grid.scss  |  4 ++--
 assets/src/scss/kickoff-old-ie.scss    |  2 +-
 assets/src/scss/kickoff.scss           |  2 +-
 changelog.md                           |  6 +++---
 index.html                             |  6 +++---
 package.json                           |  2 +-
 readme.md                              | 10 +++++-----
 styleguide/index.html                  |  6 +++---
 12 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index b2ce6548..1ca482c3 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -67,7 +67,7 @@ module.exports = function (grunt) {
 
 	// grunt start
 	grunt.registerTask('start', function() {
-		opn('http://trykickoff.github.io/learn/checklist.html');
+		opn('http://trykickoff.com/learn/checklist.html');
 	});
 
 
diff --git a/assets/src/scss/_dependencies.scss b/assets/src/scss/_dependencies.scss
index 5c61759a..e5d29654 100644
--- a/assets/src/scss/_dependencies.scss
+++ b/assets/src/scss/_dependencies.scss
@@ -1,6 +1,6 @@
 /**
  * Site dependencies
- * See http://trykickoff.github.io/demos/ for more info
+ * See http://trykickoff.com/demos/ for more info
  */
 
 /*
@@ -24,22 +24,22 @@
 
 /**
  * Global typography styles
- * See http://trykickoff.github.io/demos/typography.html for more info
+ * See http://trykickoff.com/demos/typography.html for more info
  */
 @import "typography";
 
 /**
  * Components:
- * See http://trykickoff.github.io/demos/components.html for more info
+ * See http://trykickoff.com/demos/components.html for more info
  */
-@import "components/forms"; // http://trykickoff.github.io/demos/forms.html
+@import "components/forms"; // http://trykickoff.com/demos/forms.html
 @import "components/forms-custom-radioscheckboxes"; // Custom radio & checkbox inputs
 @import "components/forms-custom-select"; // Custom select element
 // @import "components/forms-custom-file"; // Custom file input
 @import "components/icons";
 @import "components/links";
 @import "components/buttons";
-@import "components/grid"; // http://trykickoff.github.io/docs/grid.html & http://trykickoff.github.io/demos/grids.html
+@import "components/grid"; // http://trykickoff.com/docs/grid.html & http://trykickoff.com/demos/grids.html
 @import "components/block-grids";
 @import "components/lists";
 @import "components/embedded-content";
diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss
index 72907871..dc74c5ed 100644
--- a/assets/src/scss/_variables.scss
+++ b/assets/src/scss/_variables.scss
@@ -92,7 +92,7 @@ $grid-column-padding          : 0     !default; // [in pixels]
 $grid-column-padding-unit     : 'px'  !default; // [in pixels or percent] Specify your unit of measurement for column padding
 $nested-column-padding        : false !default; // Remove padding on nested columns so they are aligned correctly. Set this to [false] to enable it.
 
-// Choose your grid options, see http://trykickoff.github.io/learn/grid.html for more info
+// Choose your grid options, see http://trykickoff.com/learn/grid.html for more info
 $using-push-pull-columns      : false !default; // Allow columns to be pushed & pulled
 $using-offsetcolumns          : false !default; // Allow columns to be offset
 $using-splits-and-shunts      : false !default; // Use Splits & Shunts for responsive web design
diff --git a/assets/src/scss/components/_forms.scss b/assets/src/scss/components/_forms.scss
index 34fa918b..2afcff10 100644
--- a/assets/src/scss/components/_forms.scss
+++ b/assets/src/scss/components/_forms.scss
@@ -33,7 +33,7 @@ $color-info               : $blue;               // base colour for info input s
 /**
  * Generic form styles
  * =================================
- * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-above
+ * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above
  * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html
  * Usage:
   	<div class="form-controlGroup">
@@ -394,7 +394,7 @@ input[type="submit"] {
 	 * Horizontal-specific styles
 	 * =================================
 	 * add .form--horizontal to the <form> element
-	 * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-inline
+	 * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-inline
 	 * Code: https://gist.github.com/mrmartineau/6712577#file-labels-inline-html
 	 */
 	.form--horizontal {
diff --git a/assets/src/scss/components/_grid.scss b/assets/src/scss/components/_grid.scss
index 805b7ace..d021c811 100644
--- a/assets/src/scss/components/_grid.scss
+++ b/assets/src/scss/components/_grid.scss
@@ -72,7 +72,7 @@
 
 	/**
 	 * Offset columns
-	 * http://trykickoff.github.io/demos/grids.html#offset
+	 * http://trykickoff.com/demos/grids.html#offset
 	 */
 	@if $using-offsetcolumns == true {
 		@for $i from 1 to $grid-column-count {
@@ -88,7 +88,7 @@
 
 	/**
 	 * Source ordering (push & pull)
-	 * http://trykickoff.github.io/demos/grids.html#source-ordering
+	 * http://trykickoff.com/demos/grids.html#source-ordering
 	 */
 	@if $using-push-pull-columns == true {
 		@for $i from 2 to $grid-column-count {
diff --git a/assets/src/scss/kickoff-old-ie.scss b/assets/src/scss/kickoff-old-ie.scss
index 19e170c2..eddb3862 100644
--- a/assets/src/scss/kickoff-old-ie.scss
+++ b/assets/src/scss/kickoff-old-ie.scss
@@ -4,7 +4,7 @@
 //  ## ##    ##   ##  ## ## ##  ##  ## ##     ##
 //  ##  ## ######  ####  ##  ##  ####  ##     ##
 
-// By Zander Martineau & Ashley Nolan – http://trykickoff.github.io/
+// By Zander Martineau & Ashley Nolan – http://trykickoff.com/
 
 //Use old IE styles set for mixins
 //fix your fake width
diff --git a/assets/src/scss/kickoff.scss b/assets/src/scss/kickoff.scss
index c8a550e7..2d6b3485 100644
--- a/assets/src/scss/kickoff.scss
+++ b/assets/src/scss/kickoff.scss
@@ -4,6 +4,6 @@
 //  ## ##    ##   ##  ## ## ##  ##  ## ##     ##
 //  ##  ## ######  ####  ##  ##  ####  ##     ##
 
-// By Zander Martineau & Ashley Nolan – http://trykickoff.github.io/
+// By Zander Martineau & Ashley Nolan – http://trykickoff.com/
 
 @import "dependencies";
diff --git a/changelog.md b/changelog.md
index 001c7b38..578314f0 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,12 +1,12 @@
 # Kickoff changelog
-All latest changes are documented on our site at http://trykickoff.github.io
+All latest changes are documented on our site at http://trykickoff.com
 
 ## [6.0.0] - 23/09/2015
 
 ### Changed
 
 #### Javascript
-- Switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.github.io/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0). See the discussion about the change [here](https://github.com/TryKickoff/kickoff/issues/53).
+- Switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our [Yeoman generator](http://trykickoff.com/learn/yeoman.html) or the Grunt config from [Kickoff v5.0.0](https://github.com/TryKickoff/kickoff/tree/5.0.0). See the discussion about the change [here](https://github.com/TryKickoff/kickoff/issues/53).
 
 #### CSS/Scss
 - Ref #53 - Move all components from `scss/partials/components/*.scss` to `scss/components`
@@ -96,7 +96,7 @@ Removed `.btn--link` and changed `.btn-close` to `.btnClose`
 - [Livereload](http://livereload.com/) & [grunt-contrib-connect](https://github.com/grunt-contrib-connect) have been dropped (but still included) in favour of [BrowserSync](http://www.browsersync.io/docs/grunt/) (which handles both without a browser extension) for our live CSS updating and simple server needs. Running `grunt serve` will fire up a simple server and watch for changes, with the added benefits of [BrowserSync's](http://www.browsersync.io/docs/grunt/) many features.
 - All grunt tasks have been moved into grouped separate files in the `_grunt-configs` folder. For example, `_grunt-configs/css.js` contains all the grunt tasks relating to CSS: Sass, [Autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) & [CSSO](https://github.com/t32k/grunt-csso) (for minifying CSS. The `_grunt-configs/javascript.js` file contains the uglify (for concatenating and minfying js), shimly (for generating a javascript shims file), jshint and jQuery (for generating a custom jQuery build).
 - Extra grunt tasks have been added to help development. For example, running `grunt icons` will rebuild all the icons generated by Grunticon. `grunt start` will bring up a browser window with our 'getting started' guide, it also contains the simple styleguide for your project.
-- We have integrated a simple visual regression testing task, [grunt-photobox](https://github.com/stefanjudis/grunt-photoBox), to help prevent deployment of broken code. See [this](http://trykickoff.github.io/learn/grunt.html#task-photobox) for more info
+- We have integrated a simple visual regression testing task, [grunt-photobox](https://github.com/stefanjudis/grunt-photoBox), to help prevent deployment of broken code. See [this](http://trykickoff.com/learn/grunt.html#task-photobox) for more info
 
 
 
diff --git a/index.html b/index.html
index 068f64bd..073f1db1 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-		<!-- Built with Kickoff - trykickoff.github.io -->
+		<!-- Built with Kickoff - trykickoff.com -->
 
 		<!-- This conditional loads a specific stylesheet for Internet Explorer <=8
 				 and another for all other, better browsers
@@ -21,10 +21,10 @@
 			<link rel="stylesheet" href="/assets/dist/css/kickoff.css">
 		<!--<![endif]-->
 
-		<!-- For mobile icons & social metatags etc, see http://trykickoff.github.io/learn/html.html#socialmeta
+		<!-- For mobile icons & social metatags etc, see http://trykickoff.com/learn/html.html#socialmeta
 		-->
 
-		<!-- Grunticon SVG detection script. http://github.com/filamentgroup/
+		<!-- Grunticon SVG detection script. http://github.com/filamentgroup/grunticon
 				 Remove if not using Grunticon. -->
 		<script>
 			(function(){function e(e,n,t){"use strict";var o=window.document.createElement("link"),r=n||window.document.getElementsByTagName("script")[0],a=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)})();
diff --git a/package.json b/package.json
index f69db6c7..5b7b5e16 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "title": "Kickoff",
   "description": "A lightweight front-end framework for creating scalable, responsive websites",
   "version": "6.0.0",
-  "homepage": "http://trykickoff.github.io",
+  "homepage": "http://trykickoff.com",
   "authors": [
     {
       "name": "Zander Martineau",
diff --git a/readme.md b/readme.md
index dfb0ae00..5df9e85a 100644
--- a/readme.md
+++ b/readme.md
@@ -9,12 +9,12 @@ Developed and maintained by [Ashley Nolan](https://github.com/ashleynolan) & [Za
 ### Features
 * Mobile-first, responsive philosophy
 * Rock-solid **CSS** framework using **Sass** (`.scss`) preprocessor
- * Starter content styles: [typography](http://trykickoff.github.io/demos/typography.html), [grids](http://trykickoff.github.io/demos/grids.html) & [components](http://trykickoff.github.io/demos/components.html)
- * Starter form element styles ([see demo](http://trykickoff.github.io/demos/forms.html)): stacked on small-screen to 2-column (if you choose) at the breakpoint of your choice, validation states
+ * Starter content styles: [typography](http://trykickoff.com/demos/typography.html), [grids](http://trykickoff.com/demos/grids.html) & [components](http://trykickoff.com/demos/components.html)
+ * Starter form element styles ([see demo](http://trykickoff.com/demos/forms.html)): stacked on small-screen to 2-column (if you choose) at the breakpoint of your choice, validation states
  * Lots of helper classes & Sass mixins for many CSS3 features like [media-queries](https://github.com/TryKickoff/kickoff/blob/master/assets/src/scss/mixins/_responsive.scss)
 * Simple **Javascript** boilerplate that makes very little assumptions about your chosen style or workflow.
  * The default method uses a [list of files](https://github.com/TryKickoff/kickoff/blob/master/_grunt-configs/config.js#L41-L55) that are concatinated & compressed with Uglify
- * If you prefer something more advanced, our [Yeoman generator](http://trykickoff.github.io/docs/yeoman.html) allows you to use Browserify instead :)
+ * If you prefer something more advanced, our [Yeoman generator](http://trykickoff.com/docs/yeoman.html) allows you to use Browserify instead :)
 * **[Grunt](http://gruntjs.com)** used extensively to ease common development bottlenecks
  * Sass compilation using [libsass](https://github.com/sass/libsass) (using [grunt-sass](https://github.com/sindresorhus/grunt-sass)) and uses [autoprefixer](https://github.com/ai/autoprefixer) to dynamically add vendor prefixes so you don't even have to think about them :)
  * Concatenation and minification of JS files
@@ -22,11 +22,11 @@ Developed and maintained by [Ashley Nolan](https://github.com/ashleynolan) & [Za
  * SVG Icon generation using [grunticon](https://github.com/filamentgroup/grunticon)
 
 ## Demos and documentation
-Kickoff's demo and documentation site is hosted at [trykickoff.github.io](http://trykickoff.github.io/).
+Kickoff's demo and documentation site is hosted at [trykickoff.com](http://trykickoff.com/).
 
 ![Kickoff Yeoman generator](http://i.imgur.com/rWftxao.png?1)
 ## Yeoman generator
-There is also a Yeoman generator for Kickoff, visit [trykickoff.github.io/docs/yeoman.html](http://trykickoff.github.io/docs/yeoman.html) for more info.
+There is also a Yeoman generator for Kickoff, visit [trykickoff.com/docs/yeoman.html](http://trykickoff.com/docs/yeoman.html) for more info.
 
 ## Bugs and feature requests
 Have a bug or a feature request? Please search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/trykickoff/kickoff/issues/new).
diff --git a/styleguide/index.html b/styleguide/index.html
index 204befc9..82e77ea5 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -8,7 +8,7 @@
 		<meta name="description" content="A simple styleguide to use with your project">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-		<!-- Built with Kickoff - trykickoff.github.io -->
+		<!-- Built with Kickoff - trykickoff.com -->
 
 		<!--[if lte IE 8]>
 			<link rel="stylesheet" href="/assets/dist/css/kickoff-old-ie.css">
@@ -361,9 +361,9 @@ <h2 class="sg-sectionHeading">More stuff</h2>
 			<div class="l-container">
 				<img src="http://i.imgur.com/LaKkj7X.png" alt="Kickoff logo">
 				<br>
-				This styleguide is generated by the <a href="http://trykickoff.github.io">Kickoff</a> framework.
+				This styleguide is generated by the <a href="http://trykickoff.com">Kickoff</a> framework.
 				<br>
-				Find out more about <a href="http://trykickoff.github.io">Kickoff</a>.
+				Find out more about <a href="http://trykickoff.com">Kickoff</a>.
 			</div>
 		</footer>
 	</body>

From e76e93ebbee0a028004bcbeb2e45d3c793b7f25e Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:31:18 +0000
Subject: [PATCH 117/136] update gitignore

---
 .gitignore | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index 771fdea0..ed62239d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,12 +15,8 @@ assets/temp/**/*
 
 
 # Dependencies
- # Bower dependencies directory. comment this line to commit them.
-bower_modules/*
- # Node modules directory. comment this line to commit them.
+# # Node modules directory. comment this line to commit them.
 node_modules/*
-logs
-*.log
 
 
 # PHP
@@ -30,15 +26,9 @@ logs
 # .NET
 
 
-# Tooling
-# Generated test files
-testing/
-
-
-# Sublime Text project files
+# IDE generated files
 *.sublime-*
-# Jekyll compilation directory
-_site/
+.vscode
 
 
 # OS generated files
@@ -49,3 +39,9 @@ _site/
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+
+# Miscellaneous
+_site/ # Jekyll compilation directory
+logs
+*.log

From d0f0ae89c7533382b7a209b3654bb547367ec184 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:32:35 +0000
Subject: [PATCH 118/136] remove modernizr & html validation

---
 Gruntfile.js                        | 13 +++----------
 _grunt-configs/config.js            |  7 -------
 _grunt-configs/utilities.js         |  5 -----
 assets/src/grunticon/.gitkeep       |  0
 assets/src/js/libs/modernizr.min.js |  4 ----
 index.html                          |  2 --
 6 files changed, 3 insertions(+), 28 deletions(-)
 delete mode 100644 assets/src/grunticon/.gitkeep
 delete mode 100644 assets/src/js/libs/modernizr.min.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 1ca482c3..a2cf49d2 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -14,7 +14,6 @@ var opn = require('opn')
 module.exports = function (grunt) {
 	'use strict';
 
-
 	var options = {
 		pkg: require('./package'), // <%=pkg.name%>
 
@@ -57,11 +56,11 @@ module.exports = function (grunt) {
 
 	// grunt compile
 	grunt.registerTask('compile', [
-		'shimly',
-		'copy:modernizr',
 		'browserify',
 		'postscss',
-		'images'
+		'images',
+		'shimly',
+		'copy:jsStandalone'
 	]);
 
 
@@ -94,12 +93,6 @@ module.exports = function (grunt) {
 	]);
 
 
-	// grunt checks
-	grunt.registerTask('checks', [
-		'validation'
-	]);
-
-
 	// grunt travis
 	grunt.registerTask('travis', [
 		'postscss'
diff --git a/_grunt-configs/config.js b/_grunt-configs/config.js
index 8e8e7039..0002692e 100644
--- a/_grunt-configs/config.js
+++ b/_grunt-configs/config.js
@@ -43,12 +43,5 @@ module.exports = {
 		srcDir       : '<%=config.srcDir%>/img',      // <%=config.img.srcDir%>
 		distDir      : '<%=config.distDir%>/img',     // <%=config.img.distDir%>
 		grunticonDir : '<%=config.srcDir%>/grunticon' // <%=config.img.grunticonDir%>
-	},
-
-
-	// Testing-related Grunt vars
-	// Add any other test vars in here
-	testing: {
-		validationDir  : './testing',  // <%=config.tests.validationDir%>
 	}
 };
diff --git a/_grunt-configs/utilities.js b/_grunt-configs/utilities.js
index 1804dea1..6d10b7d7 100644
--- a/_grunt-configs/utilities.js
+++ b/_grunt-configs/utilities.js
@@ -16,11 +16,6 @@ module.exports.tasks = {
 	 * https://github.com/gruntjs/grunt-contrib-copy
 	 */
 	copy: {
-		modernizr: {
-			src: '<%=config.srcDir%>/js/libs/modernizr.min.js',
-			dest: '<%=config.distDir%>/js/libs/modernizr.min.js'
-		},
-
 		jsStandalone: {
 			files: [{
 				expand: true,
diff --git a/assets/src/grunticon/.gitkeep b/assets/src/grunticon/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/src/js/libs/modernizr.min.js b/assets/src/js/libs/modernizr.min.js
deleted file mode 100644
index 3d847773..00000000
--- a/assets/src/js/libs/modernizr.min.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
- * Build: http://modernizr.com/download/#-fontface-multiplebgs-cssgradients-hashchange-history-video-input-inputtypes-localstorage-sessionstorage-printshiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-css_mediaqueries-css_vhunit-css_vmaxunit-css_vminunit-css_vwunit-load
- */
-;window.Modernizr=function(a,b,c){function C(a){j.cssText=a}function D(a,b){return C(n.join(a+";")+(b||""))}function E(a,b){return typeof a===b}function F(a,b){return!!~(""+a).indexOf(b)}function G(a,b){for(var d in a){var e=a[d];if(!F(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function H(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}return!1}function I(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),H(e,b,c))}function J(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)t[c[d]]=c[d]in k;return t.list&&(t.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),t}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),s[a[d]]=!!e;return s}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={},s={},t={},u=[],v=u.slice,w,x=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},y=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return x("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=v.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e}),r.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return!!a.history&&!!history.pushState},r.multiplebgs=function(){return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")},r.fontface=function(){var a;return x('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},r.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},r.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},r.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}};for(var K in r)B(r,K)&&(w=K.toLowerCase(),e[w]=r[K](),u.push((e[w]?"":"no-")+w));return e.input||J(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)B(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},C(""),i=k=null,e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=y,e.hasEvent=z,e.testProp=function(a){return G([a])},e.testAllProps=I,e.testStyles=x,e.prefixed=function(a,b,c){return b?I(a,b,c):I(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+u.join(" "):""),e}(this,this.document),function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}function v(a){var b,c=a.getElementsByTagName("*"),d=c.length,e=RegExp("^(?:"+l().join("|")+")$","i"),f=[];while(d--)b=c[d],e.test(b.nodeName)&&f.push(b.applyElement(w(b)));return f}function w(a){var b,c=a.attributes,d=c.length,e=a.ownerDocument.createElement(t+":"+a.nodeName);while(d--)b=c[d],b.specified&&e.setAttribute(b.nodeName,b.nodeValue);return e.style.cssText=a.style.cssText,e}function x(a){var b,c=a.split("{"),d=c.length,e=RegExp("(^|[\\s,>+~])("+l().join("|")+")(?=[[\\s,>+~#.:]|$)","gi"),f="$1"+t+"\\:$2";while(d--)b=c[d]=c[d].split("}"),b[b.length-1]=b[b.length-1].replace(e,f),c[d]=b.join("}");return c.join("{")}function y(a){var b=a.length;while(b--)a[b].removeNode()}function z(a){function g(){clearTimeout(d._removeSheetTimer),b&&b.removeNode(!0),b=null}var b,c,d=m(a),e=a.namespaces,f=a.parentWindow;return!u||a.printShived?a:(typeof e[t]=="undefined"&&e.add(t),f.attachEvent("onbeforeprint",function(){g();var d,e,f,h=a.styleSheets,i=[],j=h.length,l=Array(j);while(j--)l[j]=h[j];while(f=l.pop())if(!f.disabled&&s.test(f.media)){try{d=f.imports,e=d.length}catch(m){e=0}for(j=0;j<e;j++)l.push(d[j]);try{i.push(f.cssText)}catch(m){}}i=x(i.reverse().join("")),c=v(a),b=k(a,i)}),f.attachEvent("onafterprint",function(){y(c),clearTimeout(d._removeSheetTimer),d._removeSheetTimer=setTimeout(g,500)}),a.printShived=!0,a)}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b);var s=/^$|\b(?:all|print)\b/,t="html5shiv",u=!j&&function(){var c=b.documentElement;return typeof b.namespaces!="undefined"&&typeof b.parentWindow!="undefined"&&typeof c.applyElement!="undefined"&&typeof c.removeNode!="undefined"&&typeof a.attachEvent!="undefined"}();r.type+=" print",r.shivPrint=z,z(b)}(this,document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))},Modernizr.addTest("mediaqueries",Modernizr.mq("only all")),Modernizr.addTest("cssvhunit",function(){var a;return Modernizr.testStyles("#modernizr { height: 50vh; }",function(b,c){var d=parseInt(window.innerHeight/2,10),e=parseInt((window.getComputedStyle?getComputedStyle(b,null):b.currentStyle).height,10);a=e==d}),a}),Modernizr.addTest("cssvwunit",function(){var a;return Modernizr.testStyles("#modernizr { width: 50vw; }",function(b,c){var d=parseInt(window.innerWidth/2,10),e=parseInt((window.getComputedStyle?getComputedStyle(b,null):b.currentStyle).width,10);a=e==d}),a}),Modernizr.addTest("cssvminunit",function(){var a;return Modernizr.testStyles("#modernizr { width: 50vmin; }",function(b,c){var d=window.innerWidth/100,e=window.innerHeight/100,f=parseInt((window.getComputedStyle?getComputedStyle(b,null):b.currentStyle).width,10);a=parseInt(Math.min(d,e)*50,10)==f}),a}),Modernizr.addTest("cssvmaxunit",function(){var a;return Modernizr.testStyles("#modernizr { width: 50vmax; }",function(b,c){var d=window.innerWidth/100,e=window.innerHeight/100,f=parseInt((window.getComputedStyle?getComputedStyle(b,null):b.currentStyle).width,10);a=parseInt(Math.max(d,e)*50,10)==f}),a});
\ No newline at end of file
diff --git a/index.html b/index.html
index 073f1db1..55d6a254 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,6 @@
 		</script>
 		<noscript><link href="/assets/dist/img/icons/icons.fallback.css" rel="stylesheet"></noscript>
 		<!-- /End Grunticon detection & injection script -->
-
-		<script src="/assets/dist/js/libs/modernizr.min.js"></script>
 	</head>
 	<body>
 		<div class="skipToContent">

From 978131560d5bad1fe9372bda9e59ff6df7d260d7 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:32:52 +0000
Subject: [PATCH 119/136] update some grunt configs

---
 _grunt-configs/config.js    |  8 ++++----
 _grunt-configs/server.js    |  2 +-
 _grunt-configs/utilities.js | 10 ++++++++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/_grunt-configs/config.js b/_grunt-configs/config.js
index 0002692e..2a493db5 100644
--- a/_grunt-configs/config.js
+++ b/_grunt-configs/config.js
@@ -6,9 +6,9 @@
 module.exports = {
 	src : "./_grunt-configs/*.js", // This directory. Has all the Grunt tasks grouped into specific js files
 
-	srcDir  : './assets/src',  // <%=config.srcDir%>
-	distDir : './assets/dist', // <%=config.distDir%>
-	tempDir : './assets/temp', // <%=config.tempDir%>
+	srcDir  : 'assets/src',  // <%=config.srcDir%>
+	distDir : 'assets/dist', // <%=config.distDir%>
+	tempDir : 'assets/temp', // <%=config.tempDir%>
 
 
 	// CSS-related Grunt vars
@@ -34,7 +34,7 @@ module.exports = {
 
 		// Renaming this changes the name of the generated JS file
 		// Make sure you update your template file
-		distFile: 'script.js' // <%=config.js.distFile%>
+		distFile: 'bundle.js' // <%=config.js.distFile%>
 	},
 
 
diff --git a/_grunt-configs/server.js b/_grunt-configs/server.js
index 621cbb6f..3484b68f 100644
--- a/_grunt-configs/server.js
+++ b/_grunt-configs/server.js
@@ -26,7 +26,7 @@ module.exports.tasks = {
 		serve: {
 			bsFiles: {
 				src: [
-					'<%=config.distDir%>/{js,img}/*.*',
+					'<%=config.distDir%>/{js,img}/**/*.*',
 					'**/*.html'
 				]
 			},
diff --git a/_grunt-configs/utilities.js b/_grunt-configs/utilities.js
index 6d10b7d7..d09179c5 100644
--- a/_grunt-configs/utilities.js
+++ b/_grunt-configs/utilities.js
@@ -26,6 +26,12 @@ module.exports.tasks = {
 		}
 	},
 
+
+	/**
+	 * grunt-filesizegzip
+	 * https://github.com/mrmartineau/grunt-filesizegzip
+	 * Output the normal & gzipped file size of a given file
+	 */
 	filesizegzip: {
 		js: {
 			src: '<%=config.js.distDir%><%=config.js.distFile%>'
@@ -33,6 +39,10 @@ module.exports.tasks = {
 
 		css: {
 			src: '<%=config.css.distDir%>/<%=config.css.distFile%>.css'
+		},
+
+		grunticon: {
+			src: '<%=config.img.distDir%>/icons/icons.data.svg.css'
 		}
 	},
 };

From 0e04daba42d6e60be7037a643fc75ccd1413abd2 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:33:02 +0000
Subject: [PATCH 120/136] update humans

---
 humans.txt | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/humans.txt b/humans.txt
index c50a2470..a33e393c 100644
--- a/humans.txt
+++ b/humans.txt
@@ -15,7 +15,6 @@
     CSS
     Sass
     Grunt.js
-    Bower
     BrowserSync
-    Node.js / NPM
-    Sublime Text
+    NPM
+    Browserify

From 3c544720c4abfa72fe5fcb37a571b12f75ac3731 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:33:38 +0000
Subject: [PATCH 121/136] change js bundle filename to `bundle.js` to make it
 more clear which js file is being served

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 55d6a254..9c54e8d9 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
 		<!--[if lte IE 9]>
 			<script src="/assets/dist/js/standalone/shims.js"></script>
 		<![endif]-->
-		<script src="/assets/dist/js/script.js"></script>
+		<script src="/assets/dist/js/bundle.js"></script>
 
 		<script>
 			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

From 0d7d3e9761d5f630b72844a8b4a2adb930444f63 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:33:50 +0000
Subject: [PATCH 122/136] remove whitespace

---
 assets/src/js/script.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/src/js/script.js b/assets/src/js/script.js
index c0e1d336..3abef962 100644
--- a/assets/src/js/script.js
+++ b/assets/src/js/script.js
@@ -16,7 +16,6 @@ var ready = require('lite-ready');
 // Bundle global libs that don't return a value
 require('console');
 
-
 // DOM ready code goes in here
 ready(function () {
 	trak.start();

From b820163e3871fff1fec278e0ce98fde317f7dd56 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:33:57 +0000
Subject: [PATCH 123/136] lowercase this

---
 assets/src/scss/_color-palette.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss
index 721933e1..1d2a1bd6 100644
--- a/assets/src/scss/_color-palette.scss
+++ b/assets/src/scss/_color-palette.scss
@@ -14,7 +14,7 @@ $blue                         : #288ad6;
 $green                        : #16c98d;
 $red                          : #fa5e5b;
 $yellow                       : #feef6d;
-$orange                       : #FE7C08;
+$orange                       : #fe7c08;
 $pink                         : #ff708e;
 $purple                       : #8e44ad;
 $gray                         : #95a5a6;

From 9af009b653b28bac71c72172ef21a188910315d7 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:34:14 +0000
Subject: [PATCH 124/136] change page name to Styleguide

---
 styleguide/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/styleguide/index.html b/styleguide/index.html
index 82e77ea5..7837df61 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -33,7 +33,7 @@
 		<div class="sg-page sg-page--start">
 			<div class="l-container">
 				<h1 class="sg-interfaceType">Project name</h1> <!-- Styleguide note: Edit this -->
-				<h2 class="sg-interfaceType">Visual Asset Guidelines</h2>
+				<h2 class="sg-interfaceType">Styleguide</h2>
 			</div>
 		</div>
 
@@ -216,12 +216,14 @@ <h2 class="sg-sectionHeading">Form elements</h2>
 
 				<form action="#" class="form form--horizontal">
 					<fieldset class="form-fieldset">
+
 						<div class="form-controlGroup">
 							<label for="text" class="form-label">Text</label>
 							<div class="form-controlGroup-inputWrapper">
 								<input type="text" id="text" placeholder="Joe Bloggs" class="form-input" required/>
 							</div>
 						</div>
+
 						<div class="form-controlGroup">
 							<label for="comments" class="form-label">Textarea</label>
 							<div class="form-controlGroup-inputWrapper">

From a38d11bd4a6f357988bdee128456baad739d9d64 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 08:34:25 +0000
Subject: [PATCH 125/136] compile scss

---
 assets/dist/css/kickoff-old-ie.css | 591 ++++++++++++-----------
 assets/dist/css/kickoff.css        | 744 ++++++++++++-----------------
 assets/dist/css/styleguide.css     |   6 +-
 3 files changed, 617 insertions(+), 724 deletions(-)

diff --git a/assets/dist/css/kickoff-old-ie.css b/assets/dist/css/kickoff-old-ie.css
index 239abf60..14816b5a 100644
--- a/assets/dist/css/kickoff-old-ie.css
+++ b/assets/dist/css/kickoff-old-ie.css
@@ -515,9 +515,7 @@ th {
  * - Base
  * - Paragraphs
  * - Headings
- * - Lists
- * - Definition lists
- * - Blockquotes
+ * - Type sizes
  * - Misc
  * - Utilities
  *
@@ -782,7 +780,7 @@ hr {
   border-radius: 5px;
   background-clip: padding-box;
   -webkit-transition: border 200ms ease-in-out;
-  transition: border 200ms ease-in-out; }
+          transition: border 200ms ease-in-out; }
   .form-input:focus {
     border-color: #181830;
     outline: 0;
@@ -1094,7 +1092,7 @@ input[type="submit"] {
   width: 1em;
   height: 1em;
   -webkit-transition: all 100ms ease-in-out;
-  transition: all 100ms ease-in-out;
+          transition: all 100ms ease-in-out;
   border: 0.1em solid #181830;
   background-color: #181830;
   vertical-align: middle;
@@ -1118,7 +1116,7 @@ input[type="submit"] {
     display: block;
     opacity: 0;
     -webkit-transition: all 250ms ease-in-out;
-    transition: all 250ms ease-in-out; }
+            transition: all 250ms ease-in-out; }
 
 .control-indicator--checkbox:before, .control-indicator--checkbox:after {
   top: 50%;
@@ -1238,7 +1236,7 @@ option {
  */
 a {
   -webkit-transition: all 100ms ease-in-out;
-  transition: all 100ms ease-in-out; }
+          transition: all 100ms ease-in-out; }
   a, a:link {
     color: #288ad6;
     text-decoration: none; }
@@ -1473,14 +1471,22 @@ input[type="button"].btn--block {
  * These are suited for repeating blocks of content. See below for usage
  *
  * Usage:
- * <ul class="l-blockGrid l-blockGrid--3up">
- *     <li></li>
+ * <ul class="l-blockGrid l-blockGrid--3">
+ *     <li class="l-blockGrid-item"></li>
  * </ul>
  *
- * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">
- *     <li></li>
- * </ul>
+ * <div class="l-blockGrid l-blockGrid--4 l-blockGrid--2--narrow l-blockGrid--6--wide">
+ *     <div class="l-blockGrid-item"></div>
+ * </div>
+ */
+/**
+ * Block grid breakpoints
+ * Add or remove any breakpoints that you may or may not need.
+ * Note: Reorder these if your breakpoints aren't in this order, 
+ * should be smallest to largest.
+ */
+/**
+ * Generate block grids based on colum count
  */
 .l-blockGrid {
   display: block;
@@ -1490,268 +1496,305 @@ input[type="button"].btn--block {
     content: "";
     display: table;
     clear: both; }
-  .l-blockGrid > li {
-    display: block;
-    height: auto; }
-  .l-blockGrid.l-blockGrid--1up > li {
-    float: left;
-    width: 100%; }
-    .l-blockGrid.l-blockGrid--1up > li:nth-of-type(1n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--1up > li:not(:nth-of-type(1n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--2up > li {
-    float: left;
-    width: 50%; }
-    .l-blockGrid.l-blockGrid--2up > li:nth-of-type(2n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--2up > li:not(:nth-of-type(2n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--3up > li {
-    float: left;
-    width: 33.3333333333%; }
-    .l-blockGrid.l-blockGrid--3up > li:nth-of-type(3n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--3up > li:not(:nth-of-type(3n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--4up > li {
-    float: left;
-    width: 25%; }
-    .l-blockGrid.l-blockGrid--4up > li:nth-of-type(4n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--4up > li:not(:nth-of-type(4n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--5up > li {
-    float: left;
-    width: 20%; }
-    .l-blockGrid.l-blockGrid--5up > li:nth-of-type(5n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--5up > li:not(:nth-of-type(5n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--6up > li {
-    float: left;
-    width: 16.6666666667%; }
-    .l-blockGrid.l-blockGrid--6up > li:nth-of-type(6n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--6up > li:not(:nth-of-type(6n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--7up > li {
-    float: left;
-    width: 14.2857142857%; }
-    .l-blockGrid.l-blockGrid--7up > li:nth-of-type(7n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--7up > li:not(:nth-of-type(7n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--8up > li {
-    float: left;
-    width: 12.5%; }
-    .l-blockGrid.l-blockGrid--8up > li:nth-of-type(8n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--8up > li:not(:nth-of-type(8n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--9up > li {
-    float: left;
-    width: 11.1111111111%; }
-    .l-blockGrid.l-blockGrid--9up > li:nth-of-type(9n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--9up > li:not(:nth-of-type(9n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--10up > li {
-    float: left;
-    width: 10%; }
-    .l-blockGrid.l-blockGrid--10up > li:nth-of-type(10n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--10up > li:not(:nth-of-type(10n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--11up > li {
-    float: left;
-    width: 9.0909090909%; }
-    .l-blockGrid.l-blockGrid--11up > li:nth-of-type(11n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--11up > li:not(:nth-of-type(11n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--12up > li {
-    float: left;
-    width: 8.3333333333%; }
-    .l-blockGrid.l-blockGrid--12up > li:nth-of-type(12n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--12up > li:not(:nth-of-type(12n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--1up--mid > li {
-    float: left;
-    width: 100%; }
-    .l-blockGrid.l-blockGrid--1up--mid > li:nth-of-type(1n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--1up--mid > li:not(:nth-of-type(1n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--2up--mid > li {
-    float: left;
-    width: 50%; }
-    .l-blockGrid.l-blockGrid--2up--mid > li:nth-of-type(2n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--2up--mid > li:not(:nth-of-type(2n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--3up--mid > li {
-    float: left;
-    width: 33.3333333333%; }
-    .l-blockGrid.l-blockGrid--3up--mid > li:nth-of-type(3n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--3up--mid > li:not(:nth-of-type(3n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--4up--mid > li {
-    float: left;
-    width: 25%; }
-    .l-blockGrid.l-blockGrid--4up--mid > li:nth-of-type(4n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--4up--mid > li:not(:nth-of-type(4n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--5up--mid > li {
-    float: left;
-    width: 20%; }
-    .l-blockGrid.l-blockGrid--5up--mid > li:nth-of-type(5n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--5up--mid > li:not(:nth-of-type(5n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--6up--mid > li {
-    float: left;
-    width: 16.6666666667%; }
-    .l-blockGrid.l-blockGrid--6up--mid > li:nth-of-type(6n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--6up--mid > li:not(:nth-of-type(6n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--7up--mid > li {
-    float: left;
-    width: 14.2857142857%; }
-    .l-blockGrid.l-blockGrid--7up--mid > li:nth-of-type(7n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--7up--mid > li:not(:nth-of-type(7n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--8up--mid > li {
-    float: left;
-    width: 12.5%; }
-    .l-blockGrid.l-blockGrid--8up--mid > li:nth-of-type(8n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--8up--mid > li:not(:nth-of-type(8n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--9up--mid > li {
-    float: left;
-    width: 11.1111111111%; }
-    .l-blockGrid.l-blockGrid--9up--mid > li:nth-of-type(9n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--9up--mid > li:not(:nth-of-type(9n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--10up--mid > li {
-    float: left;
-    width: 10%; }
-    .l-blockGrid.l-blockGrid--10up--mid > li:nth-of-type(10n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--10up--mid > li:not(:nth-of-type(10n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--11up--mid > li {
-    float: left;
-    width: 9.0909090909%; }
-    .l-blockGrid.l-blockGrid--11up--mid > li:nth-of-type(11n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--11up--mid > li:not(:nth-of-type(11n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--12up--mid > li {
-    float: left;
-    width: 8.3333333333%; }
-    .l-blockGrid.l-blockGrid--12up--mid > li:nth-of-type(12n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--12up--mid > li:not(:nth-of-type(12n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--1up--wide > li {
-    float: left;
-    width: 100%; }
-    .l-blockGrid.l-blockGrid--1up--wide > li:nth-of-type(1n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--1up--wide > li:not(:nth-of-type(1n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--2up--wide > li {
-    float: left;
-    width: 50%; }
-    .l-blockGrid.l-blockGrid--2up--wide > li:nth-of-type(2n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--2up--wide > li:not(:nth-of-type(2n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--3up--wide > li {
-    float: left;
-    width: 33.3333333333%; }
-    .l-blockGrid.l-blockGrid--3up--wide > li:nth-of-type(3n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--3up--wide > li:not(:nth-of-type(3n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--4up--wide > li {
-    float: left;
-    width: 25%; }
-    .l-blockGrid.l-blockGrid--4up--wide > li:nth-of-type(4n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--4up--wide > li:not(:nth-of-type(4n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--5up--wide > li {
-    float: left;
-    width: 20%; }
-    .l-blockGrid.l-blockGrid--5up--wide > li:nth-of-type(5n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--5up--wide > li:not(:nth-of-type(5n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--6up--wide > li {
-    float: left;
-    width: 16.6666666667%; }
-    .l-blockGrid.l-blockGrid--6up--wide > li:nth-of-type(6n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--6up--wide > li:not(:nth-of-type(6n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--7up--wide > li {
-    float: left;
-    width: 14.2857142857%; }
-    .l-blockGrid.l-blockGrid--7up--wide > li:nth-of-type(7n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--7up--wide > li:not(:nth-of-type(7n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--8up--wide > li {
-    float: left;
-    width: 12.5%; }
-    .l-blockGrid.l-blockGrid--8up--wide > li:nth-of-type(8n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--8up--wide > li:not(:nth-of-type(8n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--9up--wide > li {
-    float: left;
-    width: 11.1111111111%; }
-    .l-blockGrid.l-blockGrid--9up--wide > li:nth-of-type(9n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--9up--wide > li:not(:nth-of-type(9n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--10up--wide > li {
-    float: left;
-    width: 10%; }
-    .l-blockGrid.l-blockGrid--10up--wide > li:nth-of-type(10n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--10up--wide > li:not(:nth-of-type(10n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--11up--wide > li {
-    float: left;
-    width: 9.0909090909%; }
-    .l-blockGrid.l-blockGrid--11up--wide > li:nth-of-type(11n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--11up--wide > li:not(:nth-of-type(11n + 1)) {
-      clear: none; }
-  .l-blockGrid.l-blockGrid--12up--wide > li {
-    float: left;
-    width: 8.3333333333%; }
-    .l-blockGrid.l-blockGrid--12up--wide > li:nth-of-type(12n + 1) {
-      clear: left; }
-    .l-blockGrid.l-blockGrid--12up--wide > li:not(:nth-of-type(12n + 1)) {
-      clear: none; }
-
-/**
- * Guttered block grid
+
+.l-blockGrid-item {
+  display: block;
+  height: auto; }
+
+.l-blockGrid--1--narrow .l-blockGrid-item {
+  float: left;
+  width: 100%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--1--narrow .l-blockGrid-item:nth-of-type(1n + 1) {
+    clear: left; }
+  .l-blockGrid--1--narrow .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
+    clear: none; }
+
+.l-blockGrid--2--narrow .l-blockGrid-item {
+  float: left;
+  width: 50%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--2--narrow .l-blockGrid-item:nth-of-type(2n + 1) {
+    clear: left; }
+  .l-blockGrid--2--narrow .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
+    clear: none; }
+
+.l-blockGrid--3--narrow .l-blockGrid-item {
+  float: left;
+  width: 33.3333333333%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--3--narrow .l-blockGrid-item:nth-of-type(3n + 1) {
+    clear: left; }
+  .l-blockGrid--3--narrow .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
+    clear: none; }
+
+.l-blockGrid--4--narrow .l-blockGrid-item {
+  float: left;
+  width: 25%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--4--narrow .l-blockGrid-item:nth-of-type(4n + 1) {
+    clear: left; }
+  .l-blockGrid--4--narrow .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
+    clear: none; }
+
+.l-blockGrid--5--narrow .l-blockGrid-item {
+  float: left;
+  width: 20%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--5--narrow .l-blockGrid-item:nth-of-type(5n + 1) {
+    clear: left; }
+  .l-blockGrid--5--narrow .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
+    clear: none; }
+
+.l-blockGrid--6--narrow .l-blockGrid-item {
+  float: left;
+  width: 16.6666666667%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--6--narrow .l-blockGrid-item:nth-of-type(6n + 1) {
+    clear: left; }
+  .l-blockGrid--6--narrow .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
+    clear: none; }
+
+.l-blockGrid--7--narrow .l-blockGrid-item {
+  float: left;
+  width: 14.2857142857%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--7--narrow .l-blockGrid-item:nth-of-type(7n + 1) {
+    clear: left; }
+  .l-blockGrid--7--narrow .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
+    clear: none; }
+
+.l-blockGrid--8--narrow .l-blockGrid-item {
+  float: left;
+  width: 12.5%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--8--narrow .l-blockGrid-item:nth-of-type(8n + 1) {
+    clear: left; }
+  .l-blockGrid--8--narrow .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
+    clear: none; }
+
+.l-blockGrid--9--narrow .l-blockGrid-item {
+  float: left;
+  width: 11.1111111111%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--9--narrow .l-blockGrid-item:nth-of-type(9n + 1) {
+    clear: left; }
+  .l-blockGrid--9--narrow .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
+    clear: none; }
+
+.l-blockGrid--10--narrow .l-blockGrid-item {
+  float: left;
+  width: 10%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--10--narrow .l-blockGrid-item:nth-of-type(10n + 1) {
+    clear: left; }
+  .l-blockGrid--10--narrow .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
+    clear: none; }
+
+.l-blockGrid--11--narrow .l-blockGrid-item {
+  float: left;
+  width: 9.0909090909%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--11--narrow .l-blockGrid-item:nth-of-type(11n + 1) {
+    clear: left; }
+  .l-blockGrid--11--narrow .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
+    clear: none; }
+
+.l-blockGrid--12--narrow .l-blockGrid-item {
+  float: left;
+  width: 8.3333333333%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--12--narrow .l-blockGrid-item:nth-of-type(12n + 1) {
+    clear: left; }
+  .l-blockGrid--12--narrow .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
+    clear: none; }
+
+.l-blockGrid--1 .l-blockGrid-item {
+  float: left;
+  width: 100%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--1 .l-blockGrid-item:nth-of-type(1n + 1) {
+    clear: left; }
+  .l-blockGrid--1 .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
+    clear: none; }
+
+.l-blockGrid--2 .l-blockGrid-item {
+  float: left;
+  width: 50%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--2 .l-blockGrid-item:nth-of-type(2n + 1) {
+    clear: left; }
+  .l-blockGrid--2 .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
+    clear: none; }
+
+.l-blockGrid--3 .l-blockGrid-item {
+  float: left;
+  width: 33.3333333333%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--3 .l-blockGrid-item:nth-of-type(3n + 1) {
+    clear: left; }
+  .l-blockGrid--3 .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
+    clear: none; }
+
+.l-blockGrid--4 .l-blockGrid-item {
+  float: left;
+  width: 25%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--4 .l-blockGrid-item:nth-of-type(4n + 1) {
+    clear: left; }
+  .l-blockGrid--4 .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
+    clear: none; }
+
+.l-blockGrid--5 .l-blockGrid-item {
+  float: left;
+  width: 20%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--5 .l-blockGrid-item:nth-of-type(5n + 1) {
+    clear: left; }
+  .l-blockGrid--5 .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
+    clear: none; }
+
+.l-blockGrid--6 .l-blockGrid-item {
+  float: left;
+  width: 16.6666666667%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--6 .l-blockGrid-item:nth-of-type(6n + 1) {
+    clear: left; }
+  .l-blockGrid--6 .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
+    clear: none; }
+
+.l-blockGrid--7 .l-blockGrid-item {
+  float: left;
+  width: 14.2857142857%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--7 .l-blockGrid-item:nth-of-type(7n + 1) {
+    clear: left; }
+  .l-blockGrid--7 .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
+    clear: none; }
+
+.l-blockGrid--8 .l-blockGrid-item {
+  float: left;
+  width: 12.5%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--8 .l-blockGrid-item:nth-of-type(8n + 1) {
+    clear: left; }
+  .l-blockGrid--8 .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
+    clear: none; }
+
+.l-blockGrid--9 .l-blockGrid-item {
+  float: left;
+  width: 11.1111111111%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--9 .l-blockGrid-item:nth-of-type(9n + 1) {
+    clear: left; }
+  .l-blockGrid--9 .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
+    clear: none; }
+
+.l-blockGrid--10 .l-blockGrid-item {
+  float: left;
+  width: 10%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--10 .l-blockGrid-item:nth-of-type(10n + 1) {
+    clear: left; }
+  .l-blockGrid--10 .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
+    clear: none; }
+
+.l-blockGrid--11 .l-blockGrid-item {
+  float: left;
+  width: 9.0909090909%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--11 .l-blockGrid-item:nth-of-type(11n + 1) {
+    clear: left; }
+  .l-blockGrid--11 .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
+    clear: none; }
+
+.l-blockGrid--12 .l-blockGrid-item {
+  float: left;
+  width: 8.3333333333%;
+  /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+  .l-blockGrid--12 .l-blockGrid-item:nth-of-type(12n + 1) {
+    clear: left; }
+  .l-blockGrid--12 .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
+    clear: none; }
+
+/**
+ * Guttered block grid mutator
  */
 .l-blockGrid--guttered {
   margin-left: -20px; }
-  .l-blockGrid--guttered > li {
+  .l-blockGrid--guttered .l-blockGrid-item {
     padding-left: 20px;
     padding-bottom: 20px; }
 
@@ -2071,7 +2114,7 @@ pre {
     z-index: 100;
     background-color: #fff;
     -webkit-transition: all 100ms ease-in-out;
-    transition: all 100ms ease-in-out; }
+            transition: all 100ms ease-in-out; }
     .skipToContent a:focus {
       top: 5px; }
 
@@ -2199,7 +2242,7 @@ textarea[contenteditable] {
 
 .transition {
   -webkit-transition: all 100ms ease-in-out;
-  transition: all 100ms ease-in-out; }
+          transition: all 100ms ease-in-out; }
 
 /* Print styles */
 /**
diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css
index dec62ed7..de20602e 100644
--- a/assets/dist/css/kickoff.css
+++ b/assets/dist/css/kickoff.css
@@ -515,9 +515,7 @@ th {
  * - Base
  * - Paragraphs
  * - Headings
- * - Lists
- * - Definition lists
- * - Blockquotes
+ * - Type sizes
  * - Misc
  * - Utilities
  *
@@ -784,7 +782,7 @@ hr {
   border-radius: 5px;
   background-clip: padding-box;
   -webkit-transition: border 200ms ease-in-out;
-  transition: border 200ms ease-in-out; }
+          transition: border 200ms ease-in-out; }
   .form-input:focus {
     border-color: #181830;
     outline: 0;
@@ -1093,7 +1091,7 @@ input[type="submit"] {
   width: 1em;
   height: 1em;
   -webkit-transition: all 100ms ease-in-out;
-  transition: all 100ms ease-in-out;
+          transition: all 100ms ease-in-out;
   border: 0.1em solid #181830;
   background-color: #181830;
   vertical-align: middle;
@@ -1117,7 +1115,7 @@ input[type="submit"] {
     display: block;
     opacity: 0;
     -webkit-transition: all 250ms ease-in-out;
-    transition: all 250ms ease-in-out; }
+            transition: all 250ms ease-in-out; }
 
 .control-indicator--checkbox:before, .control-indicator--checkbox:after {
   top: 50%;
@@ -1237,7 +1235,7 @@ option {
  */
 a {
   -webkit-transition: all 100ms ease-in-out;
-  transition: all 100ms ease-in-out; }
+          transition: all 100ms ease-in-out; }
   a, a:link {
     color: #288ad6;
     text-decoration: none; }
@@ -1463,14 +1461,22 @@ input[type="button"].btn--block {
  * These are suited for repeating blocks of content. See below for usage
  *
  * Usage:
- * <ul class="l-blockGrid l-blockGrid--3up">
- *     <li></li>
+ * <ul class="l-blockGrid l-blockGrid--3">
+ *     <li class="l-blockGrid-item"></li>
  * </ul>
  *
- * Mobile Usage:
- * <ul class="l-blockGrid l-blockGrid--4up l-blockGrid--2up--narrow l-blockGrid--6up--wide">
- *     <li></li>
- * </ul>
+ * <div class="l-blockGrid l-blockGrid--4 l-blockGrid--2--narrow l-blockGrid--6--wide">
+ *     <div class="l-blockGrid-item"></div>
+ * </div>
+ */
+/**
+ * Block grid breakpoints
+ * Add or remove any breakpoints that you may or may not need.
+ * Note: Reorder these if your breakpoints aren't in this order, 
+ * should be smallest to largest.
+ */
+/**
+ * Generate block grids based on colum count
  */
 .l-blockGrid {
   display: block;
@@ -1480,441 +1486,285 @@ input[type="button"].btn--block {
     content: "";
     display: table;
     clear: both; }
-  .l-blockGrid > li {
-    display: block;
-    height: auto; }
-  @media screen and (min-width: 25em) and (max-width: 46.875em) {
-    .l-blockGrid.l-blockGrid--1up--narrow > li {
-      float: left;
-      width: 100%; }
-      .l-blockGrid.l-blockGrid--1up--narrow > li:nth-of-type(1n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--1up--narrow > li:not(:nth-of-type(1n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--2up--narrow > li {
-      float: left;
-      width: 50%; }
-      .l-blockGrid.l-blockGrid--2up--narrow > li:nth-of-type(2n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--2up--narrow > li:not(:nth-of-type(2n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--3up--narrow > li {
-      float: left;
-      width: 33.3333333333%; }
-      .l-blockGrid.l-blockGrid--3up--narrow > li:nth-of-type(3n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--3up--narrow > li:not(:nth-of-type(3n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--4up--narrow > li {
-      float: left;
-      width: 25%; }
-      .l-blockGrid.l-blockGrid--4up--narrow > li:nth-of-type(4n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--4up--narrow > li:not(:nth-of-type(4n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--5up--narrow > li {
-      float: left;
-      width: 20%; }
-      .l-blockGrid.l-blockGrid--5up--narrow > li:nth-of-type(5n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--5up--narrow > li:not(:nth-of-type(5n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--6up--narrow > li {
-      float: left;
-      width: 16.6666666667%; }
-      .l-blockGrid.l-blockGrid--6up--narrow > li:nth-of-type(6n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--6up--narrow > li:not(:nth-of-type(6n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--7up--narrow > li {
-      float: left;
-      width: 14.2857142857%; }
-      .l-blockGrid.l-blockGrid--7up--narrow > li:nth-of-type(7n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--7up--narrow > li:not(:nth-of-type(7n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--8up--narrow > li {
-      float: left;
-      width: 12.5%; }
-      .l-blockGrid.l-blockGrid--8up--narrow > li:nth-of-type(8n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--8up--narrow > li:not(:nth-of-type(8n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--9up--narrow > li {
-      float: left;
-      width: 11.1111111111%; }
-      .l-blockGrid.l-blockGrid--9up--narrow > li:nth-of-type(9n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--9up--narrow > li:not(:nth-of-type(9n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--10up--narrow > li {
-      float: left;
-      width: 10%; }
-      .l-blockGrid.l-blockGrid--10up--narrow > li:nth-of-type(10n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--10up--narrow > li:not(:nth-of-type(10n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--11up--narrow > li {
-      float: left;
-      width: 9.0909090909%; }
-      .l-blockGrid.l-blockGrid--11up--narrow > li:nth-of-type(11n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--11up--narrow > li:not(:nth-of-type(11n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--12up--narrow > li {
-      float: left;
-      width: 8.3333333333%; }
-      .l-blockGrid.l-blockGrid--12up--narrow > li:nth-of-type(12n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--12up--narrow > li:not(:nth-of-type(12n + 1)) {
-        clear: none; } }
-  @media screen and (min-width: 46.875em) {
-    .l-blockGrid.l-blockGrid--1up > li {
-      float: left;
-      width: 100%; }
-      .l-blockGrid.l-blockGrid--1up > li:nth-of-type(1n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--1up > li:not(:nth-of-type(1n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--2up > li {
-      float: left;
-      width: 50%; }
-      .l-blockGrid.l-blockGrid--2up > li:nth-of-type(2n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--2up > li:not(:nth-of-type(2n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--3up > li {
-      float: left;
-      width: 33.3333333333%; }
-      .l-blockGrid.l-blockGrid--3up > li:nth-of-type(3n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--3up > li:not(:nth-of-type(3n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--4up > li {
-      float: left;
-      width: 25%; }
-      .l-blockGrid.l-blockGrid--4up > li:nth-of-type(4n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--4up > li:not(:nth-of-type(4n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--5up > li {
-      float: left;
-      width: 20%; }
-      .l-blockGrid.l-blockGrid--5up > li:nth-of-type(5n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--5up > li:not(:nth-of-type(5n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--6up > li {
-      float: left;
-      width: 16.6666666667%; }
-      .l-blockGrid.l-blockGrid--6up > li:nth-of-type(6n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--6up > li:not(:nth-of-type(6n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--7up > li {
-      float: left;
-      width: 14.2857142857%; }
-      .l-blockGrid.l-blockGrid--7up > li:nth-of-type(7n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--7up > li:not(:nth-of-type(7n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--8up > li {
-      float: left;
-      width: 12.5%; }
-      .l-blockGrid.l-blockGrid--8up > li:nth-of-type(8n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--8up > li:not(:nth-of-type(8n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--9up > li {
-      float: left;
-      width: 11.1111111111%; }
-      .l-blockGrid.l-blockGrid--9up > li:nth-of-type(9n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--9up > li:not(:nth-of-type(9n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--10up > li {
-      float: left;
-      width: 10%; }
-      .l-blockGrid.l-blockGrid--10up > li:nth-of-type(10n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--10up > li:not(:nth-of-type(10n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--11up > li {
-      float: left;
-      width: 9.0909090909%; }
-      .l-blockGrid.l-blockGrid--11up > li:nth-of-type(11n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--11up > li:not(:nth-of-type(11n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--12up > li {
-      float: left;
-      width: 8.3333333333%; }
-      .l-blockGrid.l-blockGrid--12up > li:nth-of-type(12n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--12up > li:not(:nth-of-type(12n + 1)) {
-        clear: none; } }
-  @media screen and (min-width: 46.875em) {
-    .l-blockGrid.l-blockGrid--1up--mid > li {
-      float: left;
-      width: 100%; }
-      .l-blockGrid.l-blockGrid--1up--mid > li:nth-of-type(1n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--1up--mid > li:not(:nth-of-type(1n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--2up--mid > li {
-      float: left;
-      width: 50%; }
-      .l-blockGrid.l-blockGrid--2up--mid > li:nth-of-type(2n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--2up--mid > li:not(:nth-of-type(2n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--3up--mid > li {
-      float: left;
-      width: 33.3333333333%; }
-      .l-blockGrid.l-blockGrid--3up--mid > li:nth-of-type(3n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--3up--mid > li:not(:nth-of-type(3n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--4up--mid > li {
-      float: left;
-      width: 25%; }
-      .l-blockGrid.l-blockGrid--4up--mid > li:nth-of-type(4n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--4up--mid > li:not(:nth-of-type(4n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--5up--mid > li {
-      float: left;
-      width: 20%; }
-      .l-blockGrid.l-blockGrid--5up--mid > li:nth-of-type(5n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--5up--mid > li:not(:nth-of-type(5n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--6up--mid > li {
-      float: left;
-      width: 16.6666666667%; }
-      .l-blockGrid.l-blockGrid--6up--mid > li:nth-of-type(6n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--6up--mid > li:not(:nth-of-type(6n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--7up--mid > li {
-      float: left;
-      width: 14.2857142857%; }
-      .l-blockGrid.l-blockGrid--7up--mid > li:nth-of-type(7n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--7up--mid > li:not(:nth-of-type(7n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--8up--mid > li {
-      float: left;
-      width: 12.5%; }
-      .l-blockGrid.l-blockGrid--8up--mid > li:nth-of-type(8n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--8up--mid > li:not(:nth-of-type(8n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--9up--mid > li {
-      float: left;
-      width: 11.1111111111%; }
-      .l-blockGrid.l-blockGrid--9up--mid > li:nth-of-type(9n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--9up--mid > li:not(:nth-of-type(9n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--10up--mid > li {
-      float: left;
-      width: 10%; }
-      .l-blockGrid.l-blockGrid--10up--mid > li:nth-of-type(10n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--10up--mid > li:not(:nth-of-type(10n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--11up--mid > li {
-      float: left;
-      width: 9.0909090909%; }
-      .l-blockGrid.l-blockGrid--11up--mid > li:nth-of-type(11n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--11up--mid > li:not(:nth-of-type(11n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--12up--mid > li {
-      float: left;
-      width: 8.3333333333%; }
-      .l-blockGrid.l-blockGrid--12up--mid > li:nth-of-type(12n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--12up--mid > li:not(:nth-of-type(12n + 1)) {
-        clear: none; } }
-  @media screen and (min-width: 62.5em) {
-    .l-blockGrid.l-blockGrid--1up--wide > li {
-      float: left;
-      width: 100%; }
-      .l-blockGrid.l-blockGrid--1up--wide > li:nth-of-type(1n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--1up--wide > li:not(:nth-of-type(1n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--2up--wide > li {
-      float: left;
-      width: 50%; }
-      .l-blockGrid.l-blockGrid--2up--wide > li:nth-of-type(2n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--2up--wide > li:not(:nth-of-type(2n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--3up--wide > li {
-      float: left;
-      width: 33.3333333333%; }
-      .l-blockGrid.l-blockGrid--3up--wide > li:nth-of-type(3n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--3up--wide > li:not(:nth-of-type(3n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--4up--wide > li {
-      float: left;
-      width: 25%; }
-      .l-blockGrid.l-blockGrid--4up--wide > li:nth-of-type(4n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--4up--wide > li:not(:nth-of-type(4n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--5up--wide > li {
-      float: left;
-      width: 20%; }
-      .l-blockGrid.l-blockGrid--5up--wide > li:nth-of-type(5n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--5up--wide > li:not(:nth-of-type(5n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--6up--wide > li {
-      float: left;
-      width: 16.6666666667%; }
-      .l-blockGrid.l-blockGrid--6up--wide > li:nth-of-type(6n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--6up--wide > li:not(:nth-of-type(6n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--7up--wide > li {
-      float: left;
-      width: 14.2857142857%; }
-      .l-blockGrid.l-blockGrid--7up--wide > li:nth-of-type(7n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--7up--wide > li:not(:nth-of-type(7n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--8up--wide > li {
-      float: left;
-      width: 12.5%; }
-      .l-blockGrid.l-blockGrid--8up--wide > li:nth-of-type(8n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--8up--wide > li:not(:nth-of-type(8n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--9up--wide > li {
-      float: left;
-      width: 11.1111111111%; }
-      .l-blockGrid.l-blockGrid--9up--wide > li:nth-of-type(9n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--9up--wide > li:not(:nth-of-type(9n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--10up--wide > li {
-      float: left;
-      width: 10%; }
-      .l-blockGrid.l-blockGrid--10up--wide > li:nth-of-type(10n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--10up--wide > li:not(:nth-of-type(10n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--11up--wide > li {
-      float: left;
-      width: 9.0909090909%; }
-      .l-blockGrid.l-blockGrid--11up--wide > li:nth-of-type(11n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--11up--wide > li:not(:nth-of-type(11n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--12up--wide > li {
-      float: left;
-      width: 8.3333333333%; }
-      .l-blockGrid.l-blockGrid--12up--wide > li:nth-of-type(12n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--12up--wide > li:not(:nth-of-type(12n + 1)) {
-        clear: none; } }
-  @media screen and (min-width: 78.125em) {
-    .l-blockGrid.l-blockGrid--1up--huge > li {
-      float: left;
-      width: 100%; }
-      .l-blockGrid.l-blockGrid--1up--huge > li:nth-of-type(1n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--1up--huge > li:not(:nth-of-type(1n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--2up--huge > li {
-      float: left;
-      width: 50%; }
-      .l-blockGrid.l-blockGrid--2up--huge > li:nth-of-type(2n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--2up--huge > li:not(:nth-of-type(2n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--3up--huge > li {
-      float: left;
-      width: 33.3333333333%; }
-      .l-blockGrid.l-blockGrid--3up--huge > li:nth-of-type(3n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--3up--huge > li:not(:nth-of-type(3n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--4up--huge > li {
-      float: left;
-      width: 25%; }
-      .l-blockGrid.l-blockGrid--4up--huge > li:nth-of-type(4n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--4up--huge > li:not(:nth-of-type(4n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--5up--huge > li {
-      float: left;
-      width: 20%; }
-      .l-blockGrid.l-blockGrid--5up--huge > li:nth-of-type(5n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--5up--huge > li:not(:nth-of-type(5n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--6up--huge > li {
-      float: left;
-      width: 16.6666666667%; }
-      .l-blockGrid.l-blockGrid--6up--huge > li:nth-of-type(6n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--6up--huge > li:not(:nth-of-type(6n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--7up--huge > li {
-      float: left;
-      width: 14.2857142857%; }
-      .l-blockGrid.l-blockGrid--7up--huge > li:nth-of-type(7n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--7up--huge > li:not(:nth-of-type(7n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--8up--huge > li {
-      float: left;
-      width: 12.5%; }
-      .l-blockGrid.l-blockGrid--8up--huge > li:nth-of-type(8n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--8up--huge > li:not(:nth-of-type(8n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--9up--huge > li {
-      float: left;
-      width: 11.1111111111%; }
-      .l-blockGrid.l-blockGrid--9up--huge > li:nth-of-type(9n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--9up--huge > li:not(:nth-of-type(9n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--10up--huge > li {
-      float: left;
-      width: 10%; }
-      .l-blockGrid.l-blockGrid--10up--huge > li:nth-of-type(10n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--10up--huge > li:not(:nth-of-type(10n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--11up--huge > li {
-      float: left;
-      width: 9.0909090909%; }
-      .l-blockGrid.l-blockGrid--11up--huge > li:nth-of-type(11n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--11up--huge > li:not(:nth-of-type(11n + 1)) {
-        clear: none; }
-    .l-blockGrid.l-blockGrid--12up--huge > li {
-      float: left;
-      width: 8.3333333333%; }
-      .l-blockGrid.l-blockGrid--12up--huge > li:nth-of-type(12n + 1) {
-        clear: left; }
-      .l-blockGrid.l-blockGrid--12up--huge > li:not(:nth-of-type(12n + 1)) {
-        clear: none; } }
-
-/**
- * Guttered block grid
+
+.l-blockGrid-item {
+  display: block;
+  height: auto; }
+
+@media screen and (min-width: 25em) {
+  .l-blockGrid--1--narrow .l-blockGrid-item {
+    float: left;
+    width: 100%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--1--narrow .l-blockGrid-item:nth-of-type(1n + 1) {
+      clear: left; }
+    .l-blockGrid--1--narrow .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
+      clear: none; }
+  .l-blockGrid--2--narrow .l-blockGrid-item {
+    float: left;
+    width: 50%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--2--narrow .l-blockGrid-item:nth-of-type(2n + 1) {
+      clear: left; }
+    .l-blockGrid--2--narrow .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
+      clear: none; }
+  .l-blockGrid--3--narrow .l-blockGrid-item {
+    float: left;
+    width: 33.3333333333%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--3--narrow .l-blockGrid-item:nth-of-type(3n + 1) {
+      clear: left; }
+    .l-blockGrid--3--narrow .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
+      clear: none; }
+  .l-blockGrid--4--narrow .l-blockGrid-item {
+    float: left;
+    width: 25%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--4--narrow .l-blockGrid-item:nth-of-type(4n + 1) {
+      clear: left; }
+    .l-blockGrid--4--narrow .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
+      clear: none; }
+  .l-blockGrid--5--narrow .l-blockGrid-item {
+    float: left;
+    width: 20%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--5--narrow .l-blockGrid-item:nth-of-type(5n + 1) {
+      clear: left; }
+    .l-blockGrid--5--narrow .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
+      clear: none; }
+  .l-blockGrid--6--narrow .l-blockGrid-item {
+    float: left;
+    width: 16.6666666667%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--6--narrow .l-blockGrid-item:nth-of-type(6n + 1) {
+      clear: left; }
+    .l-blockGrid--6--narrow .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
+      clear: none; }
+  .l-blockGrid--7--narrow .l-blockGrid-item {
+    float: left;
+    width: 14.2857142857%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--7--narrow .l-blockGrid-item:nth-of-type(7n + 1) {
+      clear: left; }
+    .l-blockGrid--7--narrow .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
+      clear: none; }
+  .l-blockGrid--8--narrow .l-blockGrid-item {
+    float: left;
+    width: 12.5%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--8--narrow .l-blockGrid-item:nth-of-type(8n + 1) {
+      clear: left; }
+    .l-blockGrid--8--narrow .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
+      clear: none; }
+  .l-blockGrid--9--narrow .l-blockGrid-item {
+    float: left;
+    width: 11.1111111111%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--9--narrow .l-blockGrid-item:nth-of-type(9n + 1) {
+      clear: left; }
+    .l-blockGrid--9--narrow .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
+      clear: none; }
+  .l-blockGrid--10--narrow .l-blockGrid-item {
+    float: left;
+    width: 10%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--10--narrow .l-blockGrid-item:nth-of-type(10n + 1) {
+      clear: left; }
+    .l-blockGrid--10--narrow .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
+      clear: none; }
+  .l-blockGrid--11--narrow .l-blockGrid-item {
+    float: left;
+    width: 9.0909090909%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--11--narrow .l-blockGrid-item:nth-of-type(11n + 1) {
+      clear: left; }
+    .l-blockGrid--11--narrow .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
+      clear: none; }
+  .l-blockGrid--12--narrow .l-blockGrid-item {
+    float: left;
+    width: 8.3333333333%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--12--narrow .l-blockGrid-item:nth-of-type(12n + 1) {
+      clear: left; }
+    .l-blockGrid--12--narrow .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
+      clear: none; } }
+
+@media screen and (min-width: 46.875em) {
+  .l-blockGrid--1 .l-blockGrid-item {
+    float: left;
+    width: 100%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--1 .l-blockGrid-item:nth-of-type(1n + 1) {
+      clear: left; }
+    .l-blockGrid--1 .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
+      clear: none; }
+  .l-blockGrid--2 .l-blockGrid-item {
+    float: left;
+    width: 50%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--2 .l-blockGrid-item:nth-of-type(2n + 1) {
+      clear: left; }
+    .l-blockGrid--2 .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
+      clear: none; }
+  .l-blockGrid--3 .l-blockGrid-item {
+    float: left;
+    width: 33.3333333333%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--3 .l-blockGrid-item:nth-of-type(3n + 1) {
+      clear: left; }
+    .l-blockGrid--3 .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
+      clear: none; }
+  .l-blockGrid--4 .l-blockGrid-item {
+    float: left;
+    width: 25%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--4 .l-blockGrid-item:nth-of-type(4n + 1) {
+      clear: left; }
+    .l-blockGrid--4 .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
+      clear: none; }
+  .l-blockGrid--5 .l-blockGrid-item {
+    float: left;
+    width: 20%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--5 .l-blockGrid-item:nth-of-type(5n + 1) {
+      clear: left; }
+    .l-blockGrid--5 .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
+      clear: none; }
+  .l-blockGrid--6 .l-blockGrid-item {
+    float: left;
+    width: 16.6666666667%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--6 .l-blockGrid-item:nth-of-type(6n + 1) {
+      clear: left; }
+    .l-blockGrid--6 .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
+      clear: none; }
+  .l-blockGrid--7 .l-blockGrid-item {
+    float: left;
+    width: 14.2857142857%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--7 .l-blockGrid-item:nth-of-type(7n + 1) {
+      clear: left; }
+    .l-blockGrid--7 .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
+      clear: none; }
+  .l-blockGrid--8 .l-blockGrid-item {
+    float: left;
+    width: 12.5%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--8 .l-blockGrid-item:nth-of-type(8n + 1) {
+      clear: left; }
+    .l-blockGrid--8 .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
+      clear: none; }
+  .l-blockGrid--9 .l-blockGrid-item {
+    float: left;
+    width: 11.1111111111%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--9 .l-blockGrid-item:nth-of-type(9n + 1) {
+      clear: left; }
+    .l-blockGrid--9 .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
+      clear: none; }
+  .l-blockGrid--10 .l-blockGrid-item {
+    float: left;
+    width: 10%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--10 .l-blockGrid-item:nth-of-type(10n + 1) {
+      clear: left; }
+    .l-blockGrid--10 .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
+      clear: none; }
+  .l-blockGrid--11 .l-blockGrid-item {
+    float: left;
+    width: 9.0909090909%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--11 .l-blockGrid-item:nth-of-type(11n + 1) {
+      clear: left; }
+    .l-blockGrid--11 .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
+      clear: none; }
+  .l-blockGrid--12 .l-blockGrid-item {
+    float: left;
+    width: 8.3333333333%;
+    /**
+				 * Clear incase of height difference of block items.
+				 * Note: Remove these if all your items are the same height.
+				 */ }
+    .l-blockGrid--12 .l-blockGrid-item:nth-of-type(12n + 1) {
+      clear: left; }
+    .l-blockGrid--12 .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
+      clear: none; } }
+
+/**
+ * Guttered block grid mutator
  */
 .l-blockGrid--guttered {
   margin-left: -20px; }
-  .l-blockGrid--guttered > li {
+  .l-blockGrid--guttered .l-blockGrid-item {
     padding-left: 20px;
     padding-bottom: 20px; }
 
@@ -2279,7 +2129,7 @@ pre {
     z-index: 100;
     background-color: #fff;
     -webkit-transition: all 100ms ease-in-out;
-    transition: all 100ms ease-in-out; }
+            transition: all 100ms ease-in-out; }
     .skipToContent a:focus {
       top: 5px; }
 
@@ -2407,7 +2257,7 @@ textarea[contenteditable] {
 
 .transition {
   -webkit-transition: all 100ms ease-in-out;
-  transition: all 100ms ease-in-out; }
+          transition: all 100ms ease-in-out; }
 
 /* Print styles */
 /**
diff --git a/assets/dist/css/styleguide.css b/assets/dist/css/styleguide.css
index 9e5b1c85..272a09a3 100644
--- a/assets/dist/css/styleguide.css
+++ b/assets/dist/css/styleguide.css
@@ -211,12 +211,12 @@ body {
       display: block; }
 
 .sg-color-secondary {
-  color: #FE7C08; }
+  color: #fe7c08; }
   .sg-color-secondary .sg-swatch-color {
-    background-color: #FE7C08;
+    background-color: #fe7c08;
     color: #fff; }
     .sg-color-secondary .sg-swatch-color:before {
-      content: "#FE7C08";
+      content: "#fe7c08";
       display: block; }
 
 .sg-color-highlight {

From afebd640b0ee53db5dca4e50c822f5161ac0f1ca Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Mon, 16 Nov 2015 11:09:15 +0000
Subject: [PATCH 126/136] add semicolon

---
 Gruntfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index b2ce6548..6664dc3a 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -45,7 +45,7 @@ module.exports = function (grunt) {
 		'compile',
 		'browserSync:serve',
 		'watch'
-	])
+	]);
 
 
 	// grunt watcher

From d55b8abb69af4f6b7a5e76cacf78925d0fc3ba4e Mon Sep 17 00:00:00 2001
From: ashleynolan <nolly00@gmail.com>
Date: Tue, 17 Nov 2015 22:15:42 +0000
Subject: [PATCH 127/136] Updating Grunt to include SCSS and JS linting
 (available by uncommenting in the build step)

---
 Gruntfile.js            | 11 +++++++++++
 _grunt-configs/tests.js | 31 +++++++++++++++++++++++++++++++
 _grunt-configs/watch.js |  2 ++
 assets/src/js/script.js |  1 +
 package.json            | 19 ++++++++++---------
 5 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 08d72651..2a7f5696 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -7,6 +7,7 @@
  * - grunt compile --release : same as above, but compress CSS as well
  * - grunt icons             : generate the icons using grunticon
  * - grunt images            : compress all non-grunticon images & then run `grunt icons`
+ * * grunt checks            : run jshint and scsslint
  */
 
 var opn = require('opn')
@@ -56,6 +57,7 @@ module.exports = function (grunt) {
 
 	// grunt compile
 	grunt.registerTask('compile', [
+		// 'checks', // uncomment this line if you want to run linting checks on your SCSS/JS as part of your build
 		'browserify',
 		'postscss',
 		'images',
@@ -93,6 +95,15 @@ module.exports = function (grunt) {
 	]);
 
 
+	/**
+	 * grunt checks
+	 */
+	grunt.registerTask('checks', [
+		'jshint:project',
+		'scsslint'
+	]);
+
+
 	// grunt travis
 	grunt.registerTask('travis', [
 		'postscss'
diff --git a/_grunt-configs/tests.js b/_grunt-configs/tests.js
index aaa047bc..35644f50 100644
--- a/_grunt-configs/tests.js
+++ b/_grunt-configs/tests.js
@@ -1,2 +1,33 @@
 module.exports.tasks = {
+	/**
+	* scss Lint
+	* https://github.com/ahmednuaman/grunt-scss-lint
+	*/
+	scsslint: {
+		allFiles: [
+			'<%=config.css.scssDir%>/**/*.scss',
+		],
+		options: {
+			config: '.scss-lint.yml',
+			reporterOutput: null
+		},
+	},
+
+
+	/**
+	* JSHint
+	* https://github.com/gruntjs/grunt-contrib-jshint
+	* Manage the options inside .jshintrc file
+	*/
+	jshint: {
+		options: {
+			jshintrc: '.jshintrc',
+			reporter: require('jshint-stylish')
+		},
+		project: [
+			'<%=config.srcDir%>/js/**/*.js',
+			'!<%=config.srcDir%>/js/{standalone,helpers}/**/*.js',
+			'!<%=config.srcDir%>/js/**/*.min.js'
+		]
+	}
 };
diff --git a/_grunt-configs/watch.js b/_grunt-configs/watch.js
index 5622ddb6..20b7b837 100644
--- a/_grunt-configs/watch.js
+++ b/_grunt-configs/watch.js
@@ -15,6 +15,7 @@ module.exports.tasks = {
 			files: ['<%=config.css.scssDir%>/**/*.scss'],
 			tasks: [
 				'bsNotify:sassStart',
+				// 'scsslint', // uncomment this line if you want to run linting checks on your SCSS as part of your watch build
 				'postscss',
 				'bsReload:css',
 				'filesizegzip:css'
@@ -26,6 +27,7 @@ module.exports.tasks = {
 				'<%=config.js.distDir%>/**/*.js'
 			],
 			tasks: [
+				// 'jshint:project', // uncomment this line if you want to run linting checks on your JS as part of your watch build
 				'filesizegzip:js'
 			]
 		},
diff --git a/assets/src/js/script.js b/assets/src/js/script.js
index 3abef962..e773b323 100644
--- a/assets/src/js/script.js
+++ b/assets/src/js/script.js
@@ -18,6 +18,7 @@ require('console');
 
 // DOM ready code goes in here
 ready(function () {
+
 	trak.start();
 	var swiftclick = SwiftClick.attach(document.body);
 
diff --git a/package.json b/package.json
index 5b7b5e16..688fb0ac 100644
--- a/package.json
+++ b/package.json
@@ -39,24 +39,27 @@
     "trak.js": "^0.5.2"
   },
   "devDependencies": {
+    "autoprefixer": "^6.0.3",
+    "cssnano": "^3.2.0",
     "grunt": "^0.4.5",
     "grunt-browserify": "^4.0.1",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^1.0.0",
+    "grunt-contrib-jshint": "^0.11.3",
     "grunt-grunticon": "^2.1.6",
     "grunt-newer": "^1.1.0",
+    "grunt-scss-lint": "^0.3.8",
     "grunt-shimly": "^1.0.1",
-    "load-grunt-configs": "^0.4.3",
-    "load-grunt-tasks": "^3.3.0",
-    "minifyify": "^7.1.0",
-    "postscss": "^1.2.2",
-    "autoprefixer": "^6.0.3",
-    "cssnano": "^3.2.0",
     "imagemin-gifsicle": "^4.2.0",
     "imagemin-jpegtran": "^4.3.1",
     "imagemin-optipng": "^4.3.0",
-    "imagemin-svgo": "^4.1.2"
+    "imagemin-svgo": "^4.1.2",
+    "jshint-stylish": "^2.1.0",
+    "load-grunt-configs": "^0.4.3",
+    "load-grunt-tasks": "^3.3.0",
+    "minifyify": "^7.1.0",
+    "postscss": "^1.2.2"
   },
   "optionalDependencies": {
     "browser-sync": "^2.9.11",
@@ -68,10 +71,8 @@
   "keywords": [],
   "scripts": {
     "test": "grunt travis --verbose",
-
     "prestart": "npm install -g grunt-cli && npm prune && npm install",
     "start": "grunt start",
-
     "predeploy": "npm i -g grunt-cli && npm prune && npm install --no-optional",
     "deploy": "grunt compile --release"
   }

From 888078f9636226aa1cdc304e4a0f824a56dfbcc4 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Thu, 19 Nov 2015 19:02:30 +0000
Subject: [PATCH 128/136] Load shims using 'cutting the mustard' check instead
 of if lte ie9

- check for classlist & addEventListener & load shims if browser does not support both of them
- added a `no-js` / `js` `<html>` classname switch since we're not using modernizr anymore
- added `loadJS()` function to load the shims
---
 index.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 9c54e8d9..9c5a218e 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,25 @@
 		<!-- For mobile icons & social metatags etc, see http://trykickoff.com/learn/html.html#socialmeta
 		-->
 
+		<script>
+			var doc = window.document,
+			docElem = doc.documentElement;
+
+			// Replace 'no-js'/'js' class on <html>
+			docElem.className = docElem.className.replace(/\bno-js\b/g, '') + ' js ';
+
+			// loadJS: load a JS file asynchronously. Included from https://github.com/filamentgroup/loadJS/
+			function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
+			window.loadJS = loadJS;
+
+			// Enhancements for qualified browsers - "Cutting the Mustard"
+			if( !('addEventListener' in window && 'classList' in docElem) ){
+				// basic browsers: last stop here!
+				loadJS('/assets/dist/js/standalone/shims.js');
+				return;
+			}
+		</script>
+
 		<!-- Grunticon SVG detection script. http://github.com/filamentgroup/grunticon
 				 Remove if not using Grunticon. -->
 		<script>
@@ -53,9 +72,6 @@
 
 
 		<!-- JavaScript at the bottom for fast page loading -->
-		<!--[if lte IE 9]>
-			<script src="/assets/dist/js/standalone/shims.js"></script>
-		<![endif]-->
 		<script src="/assets/dist/js/bundle.js"></script>
 
 		<script>

From ae221ec73fd62d5cbb05284e4b3ff67b592b38c9 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 13:55:14 +0000
Subject: [PATCH 129/136] remove return statement. this shouldn't have made it
 in

---
 index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.html b/index.html
index 9c5a218e..79f01278 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,6 @@
 			if( !('addEventListener' in window && 'classList' in docElem) ){
 				// basic browsers: last stop here!
 				loadJS('/assets/dist/js/standalone/shims.js');
-				return;
 			}
 		</script>
 

From a686bd06fda0ffcf5bbdbb57584da45b97f37a17 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 13:57:48 +0000
Subject: [PATCH 130/136] marginally improve performance by caching another
 item

---
 index.html | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 79f01278..5473a14b 100644
--- a/index.html
+++ b/index.html
@@ -21,23 +21,20 @@
 			<link rel="stylesheet" href="/assets/dist/css/kickoff.css">
 		<!--<![endif]-->
 
-		<!-- For mobile icons & social metatags etc, see http://trykickoff.com/learn/html.html#socialmeta
-		-->
+		<!-- For mobile icons & social metatags etc, see http://trykickoff.com/learn/html.html#socialmeta -->
 
 		<script>
-			var doc = window.document,
-			docElem = doc.documentElement;
+			var win = window, doc = win.document, docElem = doc.documentElement;
 
 			// Replace 'no-js'/'js' class on <html>
 			docElem.className = docElem.className.replace(/\bno-js\b/g, '') + ' js ';
 
-			// loadJS: load a JS file asynchronously. Included from https://github.com/filamentgroup/loadJS/
-			function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
-			window.loadJS = loadJS;
+			// loadJS: load a JS file asynchronously. From https://github.com/filamentgroup/loadJS/
+			function loadJS(e,t){"use strict";var n=doc.getElementsByTagName("script")[0],o=doc.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
+			win.loadJS = loadJS;
 
 			// Enhancements for qualified browsers - "Cutting the Mustard"
-			if( !('addEventListener' in window && 'classList' in docElem) ){
-				// basic browsers: last stop here!
+			if( !('addEventListener' in win && 'classList' in docElem) ){
 				loadJS('/assets/dist/js/standalone/shims.js');
 			}
 		</script>
@@ -45,7 +42,7 @@
 		<!-- Grunticon SVG detection script. http://github.com/filamentgroup/grunticon
 				 Remove if not using Grunticon. -->
 		<script>
-			(function(){function e(e,n,t){"use strict";var o=window.document.createElement("link"),r=n||window.document.getElementsByTagName("script")[0],a=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)})();
+			(function(){function e(e,n,t){"use strict";var o=doc.createElement("link"),r=n||doc.getElementsByTagName("script")[0],a=doc.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)})();
 			grunticon(["/assets/dist/img/icons/icons.data.svg.css", "/assets/dist/img/icons/icons.data.png.css", "/assets/dist/img/icons/icons.fallback.css"], grunticon.svgLoadedCallback);
 		</script>
 		<noscript><link href="/assets/dist/img/icons/icons.fallback.css" rel="stylesheet"></noscript>
@@ -73,6 +70,7 @@
 		<!-- JavaScript at the bottom for fast page loading -->
 		<script src="/assets/dist/js/bundle.js"></script>
 
+		<!-- Google Analytics -->
 		<script>
 			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

From 0c463aefd8be6de3dfa2446ca83a53806866c90e Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 14:18:40 +0000
Subject: [PATCH 131/136] update npm deps

---
 package.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 688fb0ac..9a8d2f2a 100644
--- a/package.json
+++ b/package.json
@@ -39,30 +39,30 @@
     "trak.js": "^0.5.2"
   },
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
-    "cssnano": "^3.2.0",
+    "autoprefixer": "^6.1.0",
+    "cssnano": "^3.3.2",
     "grunt": "^0.4.5",
     "grunt-browserify": "^4.0.1",
-    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-clean": "^0.7.0",
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^1.0.0",
     "grunt-contrib-jshint": "^0.11.3",
-    "grunt-grunticon": "^2.1.6",
-    "grunt-newer": "^1.1.0",
+    "grunt-grunticon": "^2.2.2",
+    "grunt-newer": "^1.1.1",
     "grunt-scss-lint": "^0.3.8",
     "grunt-shimly": "^1.0.1",
     "imagemin-gifsicle": "^4.2.0",
-    "imagemin-jpegtran": "^4.3.1",
+    "imagemin-jpegtran": "^4.3.2",
     "imagemin-optipng": "^4.3.0",
-    "imagemin-svgo": "^4.1.2",
+    "imagemin-svgo": "^4.2.0",
     "jshint-stylish": "^2.1.0",
     "load-grunt-configs": "^0.4.3",
     "load-grunt-tasks": "^3.3.0",
     "minifyify": "^7.1.0",
-    "postscss": "^1.2.2"
+    "postscss": "^1.2.3"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.9.11",
+    "browser-sync": "^2.10.0",
     "grunt-browser-sync": "^2.1.3",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-filesizegzip": "^0.2.0",

From 646bc27c40080e3ca1e953c33efbdfa484d1d4a9 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 14:21:11 +0000
Subject: [PATCH 132/136] more info about cutting the mustard

---
 index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.html b/index.html
index 5473a14b..fbed62ff 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,10 @@
 
 			// Enhancements for qualified browsers - "Cutting the Mustard"
 			if( !('addEventListener' in win && 'classList' in docElem) ){
+				// Load shims for browsers that don't pass the test
 				loadJS('/assets/dist/js/standalone/shims.js');
+
+				// Add your own enhancements here, see https://github.com/filamentgroup/enhance for more info
 			}
 		</script>
 

From 6cbdebd8344e53b56d9d366e496a4732e93b1c00 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 14:31:58 +0000
Subject: [PATCH 133/136] only use one `<script>` element in `<head>`

---
 index.html | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index fbed62ff..6aeff244 100644
--- a/index.html
+++ b/index.html
@@ -40,11 +40,9 @@
 
 				// Add your own enhancements here, see https://github.com/filamentgroup/enhance for more info
 			}
-		</script>
 
-		<!-- Grunticon SVG detection script. http://github.com/filamentgroup/grunticon
-				 Remove if not using Grunticon. -->
-		<script>
+			// Grunticon SVG detection script. http://github.com/filamentgroup/grunticon
+			// Remove if not using Grunticon.
 			(function(){function e(e,n,t){"use strict";var o=doc.createElement("link"),r=n||doc.getElementsByTagName("script")[0],a=doc.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)})();
 			grunticon(["/assets/dist/img/icons/icons.data.svg.css", "/assets/dist/img/icons/icons.data.png.css", "/assets/dist/img/icons/icons.fallback.css"], grunticon.svgLoadedCallback);
 		</script>

From 426fdaacefa06ed97ed2a75fc4f582dc058960da Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 16:49:46 +0000
Subject: [PATCH 134/136] fix comment

---
 Gruntfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 2a7f5696..256634d6 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -7,7 +7,7 @@
  * - grunt compile --release : same as above, but compress CSS as well
  * - grunt icons             : generate the icons using grunticon
  * - grunt images            : compress all non-grunticon images & then run `grunt icons`
- * * grunt checks            : run jshint and scsslint
+ * - grunt checks            : run jshint and scsslint
  */
 
 var opn = require('opn')

From bd494fea6744720bc311a678308b7ba7ab8b8298 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 16:50:59 +0000
Subject: [PATCH 135/136] :grin: add kickoff 'logo' in html

---
 index.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6aeff244..739b9246 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,15 @@
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-		<!-- Built with Kickoff - trykickoff.com -->
+		<!--
+			##  ## ######  ####  ##  ##  ####  ###### ######
+			## ##    ##   ##  ## ## ##  ##  ## ##     ##
+			####     ##   ##     ####   ##  ## ####   ####
+			## ##    ##   ##  ## ## ##  ##  ## ##     ##
+			##  ## ######  ####  ##  ##  ####  ##     ##
+
+			Built with Kickoff - trykickoff.com
+		-->
 
 		<!-- This conditional loads a specific stylesheet for Internet Explorer <=8
 				 and another for all other, better browsers

From d2ac0c5a4d8e56589d603c3dfdffeaedca729be1 Mon Sep 17 00:00:00 2001
From: Zander Martineau <zander@martineau.tv>
Date: Fri, 20 Nov 2015 16:55:02 +0000
Subject: [PATCH 136/136] compile CSS

---
 assets/dist/css/kickoff-old-ie.css | 2295 +--------------------------
 assets/dist/css/kickoff.css        | 2310 +---------------------------
 assets/dist/css/styleguide.css     |  387 +----
 3 files changed, 5 insertions(+), 4987 deletions(-)

diff --git a/assets/dist/css/kickoff-old-ie.css b/assets/dist/css/kickoff-old-ie.css
index 14816b5a..d34bc0bf 100644
--- a/assets/dist/css/kickoff-old-ie.css
+++ b/assets/dist/css/kickoff-old-ie.css
@@ -1,2294 +1,3 @@
-@charset "UTF-8";
-/**
- * Site dependencies
- * See http://trykickoff.github.io/demos/ for more info
- */
-/*
- * Mixins, helpers and functions
- * Most CSS3 vendor prefixed items have a mixin,
- * but we should not need them if autoprefixer is being used
- * See mixins/css3.scss for the full list
- */
-/**
- * Sass Mixins
- * - Vendor prefixer
- * - Responsive
- * - CSS3
- * - Utility Mixins
- * - hiDpi
- * - Forms */
-/**
- * Vendor prefixer
- * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
- */
-/**
- * Responsive media query mixins
- * - These are used so that we can define separate media-query content
- *   for <IE9 and browsers with support for media queries
- * - These are directly related to the global $fix-mqs var defined in
- *   kickoff-old-ie.scss
- * - kickoff-old-ie.scss ignores any content in media-queries with values less
- *   than the $fix-mqs var value
- */
-/**
- * Min-width media query:
- * - Equivalent to: @media screen and (min-width: 20em) { ... }
- * - Usage: @include respond-min(500) { ... };
- * - Argument is a pixel value WITHOUT a unit of measurement
- */
-/**
- * Max-width media query:
- * - Equivalent to: @media screen and (max-width: 20em) { ... }
- * - Usage: @include respond-max(500) { ... };
- * - Argument is a pixel value WITHOUT a unit of measurement
- */
-/**
- * Min-max-width media query:
- * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
- * - Usage: @include respond-min-max(500, 600) { ... };
- * - Arguments are pixel values WITHOUT a unit of measurement
- */
-/**
- * Old IE specific mixin
- * - Only use this content if we're dealing with old IE
- * - Usage: @include oldie() { ... }
- */
-/**
- * Linear Gradient
- * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
- */
-/**
- * Radial Gradient
- * Usage: @include radial-gradient(#000, #BADA55, true);
- */
-/**
- * vertical-center
- * Vertically center any element. Needs support for CSS tranforms.
- * Usage:
- * @include vertical-center;
- */
-/**
- * Utility mixins
- * Clearfix, REM + fallbacks,
- * @font-face, sizing shortcuts,
- * and other helpers
- */
-/**
- * Utility Mixins
- */
-/**
- * Typography mixins
- */
-/**
- *  HiDPI mixin.
- *  @include hidpi { ... };
- *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
- */
-/**
- * Hidpi with a minimum width media query
- * @include hidpi-min($bp-mid, 1.5) { ... };
- */
-/**
- * Hidpi with a max width media query
- * @include hidpi-max($bp-mid, 1.3) { ... };
- */
-/**
- * Core variables
- * Edit your color palette and app vars before your begin
- */
-/**
- * Global Color palette
- * - Generic colors
- * - Color scheme
- * - Common colors
- * - Links
- * - Text selection
- * - <hr>
- * - Any others..
- */
-/**
- * Variables
- * - Typography
- * - Breakpoints
- * - Paths
- * - Layout & Grid
- * - App-specific
- */
-/**
- * Typography
- *
- * Base sizes:
- * Set this in pixels (but do not add px),
- * the font-size mixin will convert to REMS
- */
-/**
- * Breakpoints
- * There are no common breakpoints so these are just a suggestions
- * You'll need to define your own breakpoints to suit your design
- */
-/**
- * Path vars
- */
-/**
- * Layout setup
- * Settings here override & affect the output in scss/partials/components/grid.scss
- */
-/**
- * App-specific variables
- */
-/* CSS Reset - Normalize etc */
-/**
- * Kickoff reset
- */
-html {
-  box-sizing: border-box; }
-
-*, *:before, *:after {
-  box-sizing: inherit; }
-
-/**
- * Normalize - CSS reset
- * http://github.com/necolas/normalize.css
- * Kickoff uses an amended version of this file.
- */
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- *    without disabling user zoom.
- */
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */ }
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0; }
-
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block; }
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */ }
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0; }
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
-[hidden],
-template {
-  display: none; }
-
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background-color: transparent; }
-
-/**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
-a:active,
-a:hover {
-  outline: 0; }
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
-  border-bottom: 1px dotted; }
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b,
-strong {
-  font-weight: bold; }
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
-  font-style: italic; }
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
-/**
- * Address styling not present in IE 8/9.
- */
-mark {
-  background: #ff0;
-  color: #000; }
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
-  font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -0.5em; }
-
-sub {
-  bottom: -0.25em; }
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
-  border: 0; }
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden; }
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-figure {
-  margin: 1em 40px; }
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  box-sizing: content-box;
-  height: 0; }
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto; }
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em; }
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */ }
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
-  overflow: visible; }
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none; }
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */ }
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default; }
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0; }
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal; }
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto; }
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
- */
-input[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  box-sizing: content-box;
-  /* 2 */ }
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none; }
-
-/**
- * Define consistent border, margin, and padding.
- */
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em; }
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto; }
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
-  font-weight: bold; }
-
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-td,
-th {
-  padding: 0; }
-
-/**
- * Global typography styles
- * See http://trykickoff.github.io/demos/typography.html for more info
- */
-/**
- * Typography
- * - Base
- * - Paragraphs
- * - Headings
- * - Type sizes
- * - Misc
- * - Utilities
- *
- * Body font size, leadings etc have been set in _variables.scss
- * Resources:
- * http://www.gridlover.net/
- * http://modularscale.com/
- * http://lamb.cc/typograph/
- *
- */
-html {
-  font-size: 18px;
-  -webkit-text-size-adjust: 100%;
-  font-size: 20px; }
-
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 20px;
-  font-size: 1rem;
-  line-height: 1.4;
-  color: #444;
-  -webkit-font-feature-settings: "liga","dlig";
-          font-feature-settings: "liga","dlig"; }
-
-/**
- * Paragraphs
- */
-p {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 20px;
-  font-size: 1rem;
-  margin-top: 0;
-  margin-bottom: 28px; }
-
-/**
- * Headings
- */
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  line-height: 1.1;
-  text-rendering: optimizelegibility;
-  margin-top: 0;
-  margin-bottom: 28px; }
-  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-    font-weight: normal; }
-
-h1, .h1, .alpha {
-  font-size: 40px;
-  font-size: 2rem;
-  margin-bottom: 56px; }
-
-h2, .h2, .beta {
-  font-size: 32px;
-  font-size: 1.6rem; }
-
-h3, .h3, .gamma {
-  font-size: 25px;
-  font-size: 1.25rem; }
-
-h4, .h4, .delta {
-  font-size: 20px;
-  font-size: 1rem; }
-
-h5, .h5, .epsilon,
-h6, .h6, .zeta {
-  font-size: 16px;
-  font-size: 0.8rem;
-  margin-bottom: 0; }
-
-* + h1, * + .h1, * + .alpha,
-* + h2, * + .h2, * + .beta,
-* + h3, * + .h3, * + .gamma,
-* + h4, * + .h4, * + .delta {
-  margin-top: 28px; }
-
-small {
-  font-size: 80%; }
-
-/**
- * Miscellaneous
- */
-strong, b {
-  font-weight: bold; }
-
-em, i {
-  font-style: italic; }
-
-abbr[title] {
-  border-bottom: 1px dotted #ddd;
-  cursor: help; }
-
-/**
- * Blockquotes
- */
-blockquote {
-  padding-left: 10px;
-  margin: 28px;
-  border-left: 4px solid #cccccc; }
-  blockquote p {
-    margin-bottom: 0;
-    font-size: 20px;
-    font-size: 1rem;
-    font-weight: 300; }
-  blockquote small {
-    display: block;
-    color: #b3b3b3; }
-    blockquote small:before {
-      content: '\2014 \00A0'; }
-
-q:before, q:after,
-blockquote:before,
-blockquote:after {
-  content: ""; }
-
-cite {
-  font-style: normal; }
-
-dfn {
-  font-style: italic; }
-
-mark {
-  background: #feef6d;
-  padding: 2px 4px;
-  border-radius: 3px; }
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -.5em; }
-
-sub {
-  bottom: -.25em; }
-
-samp {
-  font-family: Menlo, Monaco, "Courier New", monospace; }
-
-/**
- * Utilities
- */
-.text-centre,
-.text-center {
-  text-align: center; }
-
-.text-left {
-  text-align: left; }
-
-.text-right {
-  text-align: right; }
-
-::-moz-selection {
-  color: #fff;
-  background: #181830;
-  text-shadow: none; }
-
-::selection {
-  color: #fff;
-  background: #181830;
-  text-shadow: none; }
-
-hr {
-  margin: 28px 0;
-  border: 0;
-  border-top: 1px solid #b3b3b3;
-  border-bottom: 1px solid #fff; }
-
-/**
- * Components:
- * See http://trykickoff.github.io/demos/components.html for more info
- */
-/**
- * Forms
- * =================================
- * Index:
- * - Associated Form Variables
- * - Generic form styles
- * - Form inputs and groups
- * - Form field feedback states
- * - Horizontal & vertical forms
- * - Horizontal-specific styles
- */
-/**
- * Define associated Form variables
- */
-/**
- * Generic form styles
- * =================================
- * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-above
- * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html
- * Usage:
-  	<div class="form-controlGroup">
-  		<label for="name" class="form-label">Name</label>
-  		<div class="form-controlGroup-inputWrapper">
-  			<input type="text" id="name" placeholder="Zander Martineau" class="form-input"/>
-  		</div>
-  	</div>
- */
-.form {
-  margin: 0 0 28px; }
-
-.form-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0; }
-
-.form-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 28px;
-  font-size: 25px;
-  font-size: 1.25rem;
-  line-height: 1.4;
-  color: #444;
-  border: 0;
-  border-bottom: 1px solid #eee;
-  white-space: normal; }
-  .form-legend small {
-    font-size: 16px;
-    font-size: 0.8rem;
-    color: #b3b3b3; }
-
-/**
- * Form inputs and groups
- */
-.form-controlGroup {
-  margin-top: 14px;
-  margin-bottom: 14px;
-  list-style-type: none; }
-
-.form-legend + .form-controlGroup {
-  margin-top: 28px;
-  -webkit-margin-top-collapse: separate; }
-
-.form-label {
-  display: block;
-  color: #444;
-  font-weight: bold; }
-  .form-label small {
-    font-weight: normal;
-    color: #919191; }
-
-.form-input {
-  display: block;
-  width: 100%;
-  height: 2.5em;
-  padding: .5em;
-  font-size: 20px;
-  font-size: 1rem;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.4;
-  color: #444;
-  font-weight: normal;
-  vertical-align: baseline;
-  background-color: #fff;
-  border: 2px solid #ccc;
-  border-radius: 5px;
-  background-clip: padding-box;
-  -webkit-transition: border 200ms ease-in-out;
-          transition: border 200ms ease-in-out; }
-  .form-input:focus {
-    border-color: #181830;
-    outline: 0;
-    outline: thin dotted \9; }
-  .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] {
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin: 3px 0;
-    line-height: normal;
-    cursor: pointer;
-    border-radius: 0;
-    box-sizing: border-box; }
-  .form-input[type="image"] {
-    border: 0; }
-  .form-input[type="file"] {
-    width: auto;
-    height: 28px;
-    padding: initial;
-    line-height: initial;
-    border: initial;
-    background-color: #fff;
-    background-color: initial; }
-  .form-input[type="hidden"] {
-    display: none; }
-  .form-input[type="color"] {
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-    padding: 2px; }
-  .form-input[type="password"] {
-    font-family: sans-serif; }
-  .form-input[type="range"] {
-    width: 100%; }
-  .form-input > .radio:first-child,
-  .form-input > .checkbox:first-child {
-    padding-top: 5px; }
-  .form-input[disabled], .form-input[readonly] {
-    background-color: #e6e6e6;
-    border-color: #ccc;
-    cursor: not-allowed; }
-
-.form-input--textarea {
-  height: auto;
-  resize: vertical; }
-
-.form-input--textarea--uneditable {
-  width: auto;
-  height: auto; }
-
-.form-input--select {
-  background-color: #fff; }
-  .form-input--select[multiple], .form-input--select[size] {
-    height: auto; }
-
-.form-input-file {
-  display: inline-block;
-  width: 100%;
-  font-size: 20px;
-  font-size: 1rem;
-  margin: 0;
-  vertical-align: middle;
-  line-height: 1em; }
-  .form-input-file:focus {
-    outline: none; }
-
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  width: auto;
-  cursor: pointer;
-  -webkit-appearance: button; }
-
-/**
- * Checkboxes:
- * =================================
-	<label class="control">
-		<input type="checkbox" value="check1">
-		This is a checkbox
-	</label>
-	<label class="control control--inline">
-		<input type="checkbox" value="check1">
-		This is a checkbox
-	</label>
-
- * Radios:
- * =================================
-	<label class="control">
-		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-		This is a radio
-	</label>
-	<label class="control control--inline">
-		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" checked>
-		This is a radio
-	</label>
- */
-.control {
-  display: block; }
-  .control input[type="radio"],
-  .control input[type="checkbox"] {
-    vertical-align: middle;
-    margin-right: .5em;
-    margin-top: -.1em;
-    display: inline;
-    line-height: normal; }
-
-.control--inline {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 1.5em; }
-
-/**
- * Search input
- */
-.form-input--search {
-  padding-left: 14px;
-  padding-right: 14px;
-  margin-bottom: 0;
-  border-radius: 100px; }
-
-/**
- * Form actions
- */
-.form-actions {
-  padding: 28px 20px;
-  margin-top: 28px;
-  margin-bottom: 28px;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd; }
-  .form-actions .btn {
-    margin-right: 10px; }
-    .form-actions .btn:last-child {
-      margin-right: 0; }
-
-/**
- * Form validation messages
- */
-.form-controlGroup .form-message {
-  display: none;
-  padding-top: 0.5em;
-  padding-left: 0.5em; }
-
-.form-actions .form-message {
-  padding: 0.5em; }
-
-/**
- * Form field feedback states
- */
-.has-warning {
-  color: #f4aa47; }
-
-.form-controlGroup.has-warning .form-label {
-  color: #f4aa47; }
-
-.form-controlGroup.has-warning .form-input {
-  color: #f4aa47;
-  border-color: #f4aa47; }
-  .form-controlGroup.has-warning .form-input:focus {
-    border-color: #f19417; }
-
-.form-controlGroup.has-warning .form-message {
-  display: block;
-  color: #f4aa47; }
-
-.has-error {
-  color: #B94A4D; }
-
-.form-controlGroup.has-error .form-label {
-  color: #B94A4D; }
-
-.form-controlGroup.has-error .form-input {
-  color: #B94A4D;
-  border-color: #B94A4D; }
-  .form-controlGroup.has-error .form-input:focus {
-    border-color: #963a3c; }
-
-.form-controlGroup.has-error .form-message {
-  display: block;
-  color: #B94A4D; }
-
-.has-success {
-  color: #16c98d; }
-
-.form-controlGroup.has-success .form-label {
-  color: #16c98d; }
-
-.form-controlGroup.has-success .form-input {
-  color: #16c98d;
-  border-color: #16c98d; }
-  .form-controlGroup.has-success .form-input:focus {
-    border-color: #119b6d; }
-
-.form-controlGroup.has-success .form-message {
-  display: block;
-  color: #16c98d; }
-
-.has-info {
-  color: #288ad6; }
-
-.form-controlGroup.has-info .form-label {
-  color: #288ad6; }
-
-.form-controlGroup.has-info .form-input {
-  color: #288ad6;
-  border-color: #288ad6; }
-  .form-controlGroup.has-info .form-input:focus {
-    border-color: #206eab; }
-
-.form-controlGroup.has-info .form-message {
-  display: block;
-  color: #288ad6; }
-
-/**
- * Placeholder text
- * =================================
- * Gets special styles; can't be bundled together though for some reason
- */
-:-ms-input-placeholder {
-  color: #b3b3b3; }
-
-:-moz-placeholder {
-  color: #b3b3b3; }
-
-::-webkit-input-placeholder {
-  color: #b3b3b3; }
-
-/**
-	 * Horizontal-specific styles
-	 * =================================
-	 * add .form--horizontal to the <form> element
-	 * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-inline
-	 * Code: https://gist.github.com/mrmartineau/6712577#file-labels-inline-html
-	 */
-.form--horizontal .form-controlGroup {
-  margin-bottom: 28px; }
-  .form--horizontal .form-controlGroup:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .form--horizontal .form-controlGroup .form-input--fileWrapper {
-    margin-left: 0; }
-
-.form--horizontal .form-label {
-  float: left;
-  width: 140px;
-  padding-top: 5px;
-  text-align: right; }
-
-.form--horizontal .form-controlGroup-inputWrapper {
-  margin-left: 160px; }
-  .form--horizontal .form-controlGroup-inputWrapper:first-child {
-    padding-left: 160px; }
-
-.form--horizontal .form-helpBlock {
-  margin-top: 14px;
-  margin-bottom: 0; }
-
-.form--horizontal .form-actions {
-  padding-left: 160px; }
-
-/**
- * Custom Checkboxes and radios
- *
- * IE9+
- *
- * --------------------------------
- *
- * Checkbox button example HTML
- *
- *	<label class="control control--custom">
- *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
- *		<span class="control-indicator control-indicator--checkbox"></span>
- *		My Checkbox Label Text
- *	</label>
- *
- * -------------------------------
- *
- * Radio button example HTML
- *
- *	<label class="control control--custom">
- *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
- *		<span class="control-indicator control-indicator--radio"></span>
- *		My Radio Button Label Text
- * 	</label>
- *
- * ================================= */
-.control--custom {
-  position: relative;
-  display: block;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-
-.control--custom--inline {
-  display: inline-block;
-  padding-right: 2em; }
-
-.control--custom-input {
-  position: absolute;
-  opacity: 0;
-  z-index: -1; }
-
-.control-indicator {
-  position: relative;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out;
-  border: 0.1em solid #181830;
-  background-color: #181830;
-  vertical-align: middle;
-  margin-top: -.2em;
-  box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
-
-.control--custom-input:focus ~ .control-indicator {
-  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; }
-
-.control-indicator--checkbox,
-.control-indicator--tickbox {
-  border-radius: .2em; }
-  .control-indicator--checkbox:before, .control-indicator--checkbox:after,
-  .control-indicator--tickbox:before,
-  .control-indicator--tickbox:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 90%;
-    display: block;
-    opacity: 0;
-    -webkit-transition: all 250ms ease-in-out;
-            transition: all 250ms ease-in-out; }
-
-.control-indicator--checkbox:before, .control-indicator--checkbox:after {
-  top: 50%;
-  width: 90%;
-  height: 0.1em;
-  background-color: #f1f1f1; }
-
-.control-indicator--checkbox:before {
-  -webkit-transform: translate(-50%, -50%) rotate(45deg);
-      -ms-transform: translate(-50%, -50%) rotate(45deg);
-          transform: translate(-50%, -50%) rotate(45deg); }
-
-.control-indicator--checkbox:after {
-  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
-      -ms-transform: translate(-50%, -50%) rotate(-45deg);
-          transform: translate(-50%, -50%) rotate(-45deg); }
-
-.control-indicator--tickbox:before {
-  top: 0;
-  -webkit-transform: translateX(-50%) rotate(45deg);
-      -ms-transform: translateX(-50%) rotate(45deg);
-          transform: translateX(-50%) rotate(45deg);
-  border: 0.1em solid #f1f1f1;
-  background-color: transparent;
-  width: 40%;
-  height: 80%;
-  border-top: 0;
-  border-left: 0; }
-
-.control-indicator--tickbox:after {
-  display: none; }
-
-.control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after,
-.control--custom-input:checked ~ .control-indicator--tickbox:before,
-.control--custom-input:checked ~ .control-indicator--tickbox:after {
-  opacity: 1; }
-
-.control-indicator--radio {
-  border-radius: 50%; }
-
-.control--custom-input:checked ~ .control-indicator--radio {
-  background-color: #f1f1f1;
-  border: 0.3em solid #181830; }
-
-/**
- * Custom select element
- *
- * Firefox 39+, IE10+
- *
- *	<div class="form-controlGroup">
- *			<label for="cs-choice" class="form-label">Custom select</label>
- *			<div class="form-controlGroup-inputWrapper form-controlGroup-inputWrapper--select">
- *				<select id="cs-choice" name="cs-choice" class="form-input form-input--select">
- *					<option value="--">Select title</option>
- *					<option value="Mr">Mr</option>
- *					<option value="Mrs">Mrs</option>
- *				</select>
- *			</div>
- *	</div>
- */
-.form-controlGroup-inputWrapper--select {
-  position: relative;
-  display: block;
-  padding: 0;
-  /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ }
-  .form-controlGroup-inputWrapper--select:after {
-    color: #181830;
-    content: "\25BC";
-    font-size: .7em;
-    padding: 0;
-    position: absolute;
-    right: 1.2em;
-    top: 50%;
-    margin-top: -9px;
-    z-index: 2;
-    /* These hacks make the select behind the arrow clickable in some browsers */
-    -ms-pointer-events: none;
-    pointer-events: none;
-    background: url(#); }
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .form-controlGroup-inputWrapper--select:after {
-      display: none; } }
-  .form-controlGroup-inputWrapper--select .form-input--select {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none; }
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
-        background: transparent;
-        color: #222; } }
-
-option {
-  font-weight: normal; }
-
-/**
- * Icons
- */
-[class^="icon-"], [class*=" icon-"] {
-  speak: none;
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat; }
-
-.icon-large {
-  display: block;
-  width: 120px;
-  height: 120px; }
-
-.icon-small {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  vertical-align: top; }
-
-/**
- * Links
- */
-a {
-  -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
-  a, a:link {
-    color: #288ad6;
-    text-decoration: none; }
-  a:visited {
-    color: #288ad6;
-    text-decoration: none; }
-  a:hover, a:focus {
-    color: #185380; }
-  a:active {
-    color: #185380; }
-
-/**
- * Buttons
- * =================================
- * Index:
- * - Associated Button Variables
- * - Base button styling
- * – Button Modifiers
- * 	 – btn--primary
- *   – btn--block
- */
-/**
- * Define associated Button variables
- */
-/**
- * Base button styles – Based on csswizardry.com/beautons
- *
- * 1. Allow us to better style box model properties.
- * 2. Line different sized buttons up a little nicer.
- * 3. Stop buttons wrapping and looking broken.
- * 4. Make buttons inherit font styles.
- * 5. Force all elements using beautons to appear clickable.
- * 6. Normalise box model styles.
- * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
- *    there is 1em of space above and below that text. We therefore apply 1em
- *    of space to the left and right, as padding, to keep consistent spacing.
- * 8. Fixes odd inner spacing in IE7.
- * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
- *10. Prevents from inheriting default anchor styles.
- */
-.btn {
-  display: inline-block;
-  /* [1] */
-  vertical-align: middle;
-  /* [2] */
-  white-space: nowrap;
-  /* [3] */
-  font-family: inherit;
-  /* [4] */
-  font-size: 100%;
-  /* [4] */
-  cursor: pointer;
-  /* [5] */
-  border: none;
-  /* [6] */
-  margin: 0;
-  /* [6] */
-  padding-top: 0;
-  /* [6] */
-  padding-bottom: 0;
-  /* [6] */
-  line-height: 2.5;
-  /* [7] */
-  height: 2.5em;
-  /* [7] */
-  padding-right: 1.5em;
-  /* [7] */
-  padding-left: 1.5em;
-  /* [7] */
-  overflow: visible;
-  /* [8] */
-  text-align: center;
-  background-color: #95a5a6;
-  border-radius: 5px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-  .btn, .btn:link, .btn:visited {
-    color: #fff; }
-  .btn:hover, .btn:active, .btn:focus {
-    background-color: #798d8f; }
-  .btn, .btn:hover, .btn:active, .btn:focus, .btn:visited {
-    text-decoration: none; }
-  .btn:active, .btn:focus {
-    outline: none; }
-  .btn.disabled, .btn[disabled] {
-    cursor: default;
-    background-image: none;
-    opacity: .65; }
-
-.btn--primary {
-  background-color: #288ad6; }
-  .btn--primary, .btn--primary:link, .btn--primary:visited {
-    color: #fff; }
-  .btn--primary:hover, .btn--primary:active, .btn--primary:focus {
-    background-color: #206eab; }
-
-.btn--block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0; }
-  .btn--block + .btn--block {
-    margin-top: 10px; }
-
-input[type="submit"].btn--block,
-input[type="reset"].btn--block,
-input[type="button"].btn--block {
-  width: 100%; }
-
-/**
- * The Kickoff Grid
- * =================================
- * Default grid styles
- * Media queries
- * Centred columns
- */
-/* Import Grid helpers and mixins */
-/**
- * Kickoff grid helpers
- */
-/**
- * Grid columns width calcs
- */
-/**
- * Column width mixin
- * Usage:
- * @include column(2);
- */
-/**
- * Gutter calcs
- * Default: percent
- * Usage: gutterCalc() or gutterCalc(false)
- */
-/**
- * Column padding (gutter)
- * Default: percent (can be pixels though)
- * Usage: paddingCalc() or paddingCalc(px)
- */
-/**
- * Shunts, offset columns, column source order calculations
- */
-/**
- * Basic Usage:
- * =================================
-	<div class="g-row">
-		<div class="g-col g-span4"></div>
-		<div class="g-col g-span8"></div>
-	</div>
- */
-.g-row {
-  width: 100%;
-  margin: 0 auto; }
-  .g-row:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .g-row .g-row {
-    min-width: 0; }
-    .g-row .g-row .g-col {
-      padding: 0; }
-
-.g-col {
-  float: left;
-  min-height: 1px;
-  position: relative;
-  clear: none;
-  box-sizing: border-box;
-  margin-left: 2%; }
-  .g-col:first-child {
-    margin-left: 0; }
-  .g-col + .g-col:last-child {
-    float: right; }
-  .g-col + .g-col.end {
-    float: left; }
-
-.g-span1 {
-  width: 6.5%; }
-
-.g-span2 {
-  width: 15%; }
-
-.g-span3 {
-  width: 23.5%; }
-
-.g-span4 {
-  width: 32%; }
-
-.g-span5 {
-  width: 40.5%; }
-
-.g-span6 {
-  width: 49%; }
-
-.g-span7 {
-  width: 57.5%; }
-
-.g-span8 {
-  width: 66%; }
-
-.g-span9 {
-  width: 74.5%; }
-
-.g-span10 {
-  width: 83%; }
-
-.g-span11 {
-  width: 91.5%; }
-
-.g-span12 {
-  width: 100%; }
-
-/**
-	 * Offset columns
-	 * http://trykickoff.github.io/demos/grids.html#offset
-	 */
-/**
-	 * Source ordering (push & pull)
-	 * http://trykickoff.github.io/demos/grids.html#source-ordering
-	 */
-/**
- * Centred columns
- */
-.g-col.g-col--centered,
-.g-col.g-col--centred {
-  float: none;
-  margin: 0 auto; }
-
-/**
- * Block grids
- * These are suited for repeating blocks of content. See below for usage
- *
- * Usage:
- * <ul class="l-blockGrid l-blockGrid--3">
- *     <li class="l-blockGrid-item"></li>
- * </ul>
- *
- * <div class="l-blockGrid l-blockGrid--4 l-blockGrid--2--narrow l-blockGrid--6--wide">
- *     <div class="l-blockGrid-item"></div>
- * </div>
- */
-/**
- * Block grid breakpoints
- * Add or remove any breakpoints that you may or may not need.
- * Note: Reorder these if your breakpoints aren't in this order, 
- * should be smallest to largest.
- */
-/**
- * Generate block grids based on colum count
- */
-.l-blockGrid {
-  display: block;
-  list-style-type: none;
-  margin: 0; }
-  .l-blockGrid:after {
-    content: "";
-    display: table;
-    clear: both; }
-
-.l-blockGrid-item {
-  display: block;
-  height: auto; }
-
-.l-blockGrid--1--narrow .l-blockGrid-item {
-  float: left;
-  width: 100%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--1--narrow .l-blockGrid-item:nth-of-type(1n + 1) {
-    clear: left; }
-  .l-blockGrid--1--narrow .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
-    clear: none; }
-
-.l-blockGrid--2--narrow .l-blockGrid-item {
-  float: left;
-  width: 50%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--2--narrow .l-blockGrid-item:nth-of-type(2n + 1) {
-    clear: left; }
-  .l-blockGrid--2--narrow .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
-    clear: none; }
-
-.l-blockGrid--3--narrow .l-blockGrid-item {
-  float: left;
-  width: 33.3333333333%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--3--narrow .l-blockGrid-item:nth-of-type(3n + 1) {
-    clear: left; }
-  .l-blockGrid--3--narrow .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
-    clear: none; }
-
-.l-blockGrid--4--narrow .l-blockGrid-item {
-  float: left;
-  width: 25%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--4--narrow .l-blockGrid-item:nth-of-type(4n + 1) {
-    clear: left; }
-  .l-blockGrid--4--narrow .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
-    clear: none; }
-
-.l-blockGrid--5--narrow .l-blockGrid-item {
-  float: left;
-  width: 20%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--5--narrow .l-blockGrid-item:nth-of-type(5n + 1) {
-    clear: left; }
-  .l-blockGrid--5--narrow .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
-    clear: none; }
-
-.l-blockGrid--6--narrow .l-blockGrid-item {
-  float: left;
-  width: 16.6666666667%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--6--narrow .l-blockGrid-item:nth-of-type(6n + 1) {
-    clear: left; }
-  .l-blockGrid--6--narrow .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
-    clear: none; }
-
-.l-blockGrid--7--narrow .l-blockGrid-item {
-  float: left;
-  width: 14.2857142857%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--7--narrow .l-blockGrid-item:nth-of-type(7n + 1) {
-    clear: left; }
-  .l-blockGrid--7--narrow .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
-    clear: none; }
-
-.l-blockGrid--8--narrow .l-blockGrid-item {
-  float: left;
-  width: 12.5%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--8--narrow .l-blockGrid-item:nth-of-type(8n + 1) {
-    clear: left; }
-  .l-blockGrid--8--narrow .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
-    clear: none; }
-
-.l-blockGrid--9--narrow .l-blockGrid-item {
-  float: left;
-  width: 11.1111111111%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--9--narrow .l-blockGrid-item:nth-of-type(9n + 1) {
-    clear: left; }
-  .l-blockGrid--9--narrow .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
-    clear: none; }
-
-.l-blockGrid--10--narrow .l-blockGrid-item {
-  float: left;
-  width: 10%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--10--narrow .l-blockGrid-item:nth-of-type(10n + 1) {
-    clear: left; }
-  .l-blockGrid--10--narrow .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
-    clear: none; }
-
-.l-blockGrid--11--narrow .l-blockGrid-item {
-  float: left;
-  width: 9.0909090909%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--11--narrow .l-blockGrid-item:nth-of-type(11n + 1) {
-    clear: left; }
-  .l-blockGrid--11--narrow .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
-    clear: none; }
-
-.l-blockGrid--12--narrow .l-blockGrid-item {
-  float: left;
-  width: 8.3333333333%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--12--narrow .l-blockGrid-item:nth-of-type(12n + 1) {
-    clear: left; }
-  .l-blockGrid--12--narrow .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
-    clear: none; }
-
-.l-blockGrid--1 .l-blockGrid-item {
-  float: left;
-  width: 100%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--1 .l-blockGrid-item:nth-of-type(1n + 1) {
-    clear: left; }
-  .l-blockGrid--1 .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
-    clear: none; }
-
-.l-blockGrid--2 .l-blockGrid-item {
-  float: left;
-  width: 50%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--2 .l-blockGrid-item:nth-of-type(2n + 1) {
-    clear: left; }
-  .l-blockGrid--2 .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
-    clear: none; }
-
-.l-blockGrid--3 .l-blockGrid-item {
-  float: left;
-  width: 33.3333333333%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--3 .l-blockGrid-item:nth-of-type(3n + 1) {
-    clear: left; }
-  .l-blockGrid--3 .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
-    clear: none; }
-
-.l-blockGrid--4 .l-blockGrid-item {
-  float: left;
-  width: 25%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--4 .l-blockGrid-item:nth-of-type(4n + 1) {
-    clear: left; }
-  .l-blockGrid--4 .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
-    clear: none; }
-
-.l-blockGrid--5 .l-blockGrid-item {
-  float: left;
-  width: 20%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--5 .l-blockGrid-item:nth-of-type(5n + 1) {
-    clear: left; }
-  .l-blockGrid--5 .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
-    clear: none; }
-
-.l-blockGrid--6 .l-blockGrid-item {
-  float: left;
-  width: 16.6666666667%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--6 .l-blockGrid-item:nth-of-type(6n + 1) {
-    clear: left; }
-  .l-blockGrid--6 .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
-    clear: none; }
-
-.l-blockGrid--7 .l-blockGrid-item {
-  float: left;
-  width: 14.2857142857%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--7 .l-blockGrid-item:nth-of-type(7n + 1) {
-    clear: left; }
-  .l-blockGrid--7 .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
-    clear: none; }
-
-.l-blockGrid--8 .l-blockGrid-item {
-  float: left;
-  width: 12.5%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--8 .l-blockGrid-item:nth-of-type(8n + 1) {
-    clear: left; }
-  .l-blockGrid--8 .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
-    clear: none; }
-
-.l-blockGrid--9 .l-blockGrid-item {
-  float: left;
-  width: 11.1111111111%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--9 .l-blockGrid-item:nth-of-type(9n + 1) {
-    clear: left; }
-  .l-blockGrid--9 .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
-    clear: none; }
-
-.l-blockGrid--10 .l-blockGrid-item {
-  float: left;
-  width: 10%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--10 .l-blockGrid-item:nth-of-type(10n + 1) {
-    clear: left; }
-  .l-blockGrid--10 .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
-    clear: none; }
-
-.l-blockGrid--11 .l-blockGrid-item {
-  float: left;
-  width: 9.0909090909%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--11 .l-blockGrid-item:nth-of-type(11n + 1) {
-    clear: left; }
-  .l-blockGrid--11 .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
-    clear: none; }
-
-.l-blockGrid--12 .l-blockGrid-item {
-  float: left;
-  width: 8.3333333333%;
-  /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-  .l-blockGrid--12 .l-blockGrid-item:nth-of-type(12n + 1) {
-    clear: left; }
-  .l-blockGrid--12 .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
-    clear: none; }
-
-/**
- * Guttered block grid mutator
- */
-.l-blockGrid--guttered {
-  margin-left: -20px; }
-  .l-blockGrid--guttered .l-blockGrid-item {
-    padding-left: 20px;
-    padding-bottom: 20px; }
-
-/**
- * Lists
- * - (Un)ordered lists
- * - Unstyled lists
- * - Definition lists
- * - Centred lists
- * - Floated lists
- */
-ul {
-  list-style-type: disc; }
-
-ol {
-  list-style-type: decimal; }
-
-ul, ol {
-  padding: 0;
-  margin: 0 0 28px 28px; }
-  ul ul,
-  ul ol, ol ul,
-  ol ol {
-    margin-left: 56px; }
-  ul ul, ol ul {
-    list-style-type: circle; }
-    ul ul ul, ol ul ul {
-      list-style-type: square; }
-  ul ol, ol ol {
-    list-style-type: upper-roman; }
-    ul ol ol, ol ol ol {
-      list-style-type: lower-roman; }
-  ul ul, ul ol, ol ul, ol ol {
-    margin-bottom: 0; }
-
-/**
- * Unstyled lists
- */
-.unstyled {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  list-style-image: none; }
-
-/**
- * Definition lists
- */
-dl {
-  margin-bottom: 28px; }
-
-dt {
-  font-weight: bold; }
-
-dd {
-  margin-left: 28px; }
-
-/**
- * Centred lists
- *
- * Usage:
-	<ul class="l-list--centred">
-		<li></li>
-	</ul>
- */
-.l-list--centred, .l-list--centered {
-  text-align: center; }
-  .l-list--centred li, .l-list--centered li {
-    display: inline; }
-
-/**
- * Floated lists
- * Usage:
-	<ul class="l-list--floated">
-		<li></li>
-	</ul>
- */
-.l-list--floated:after {
-  content: "";
-  display: table;
-  clear: both; }
-
-.l-list--floated li {
-  float: left;
-  display: inline-block; }
-
-/**
- * Embedded content
- */
-img {
-  font-style: italic;
-  color: #c00;
-  border: 0;
-  -ms-interpolation-mode: bicubic; }
-  img.img--left {
-    margin: 0 20px 0 0; }
-  img.img--right {
-    margin: 0 0 0 20px; }
-
-svg:not(:root) {
-  overflow: hidden; }
-
-img, object, embed, video {
-  max-width: 100%; }
-
-/**
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-  vertical-align: middle; }
-
-/**
- * Media Object
- *
- * Place any image- and text-like content side-by-side, as per:
- * http://csswizardry.com/2013/05/the-flag-object/
- *
- * +---------+
- * |         | ~~~~ ~~~~~~~~~~~
- * |         | ~~~~~~~ ~~~~~ ~~
- * |         | ~~~~~~~~~~~~
- * +---------+
- *
- * Markup:
-	<div class="media">
-		<div class="media-img">
-			<img src="http://placekitten.com/100/100">
-		</div>
-		<div class="media-body">
-			<p>Lorem ipsum dolor sit amet.</p>
-		</div>
-	</div>
- */
-.media {
-  display: table;
-  width: 100%; }
-
-.media-img,
-.media-body {
-  display: table-cell;
-  vertical-align: middle; }
-  .media--top .media-img, .media--top
-  .media-body {
-    vertical-align: top; }
-  .media--bottom .media-img, .media--bottom
-  .media-body {
-    vertical-align: bottom; }
-
-.media-body {
-  width: 100%; }
-
-.media-img {
-  padding-right: 10px; }
-  .media-img > img {
-    display: block;
-    max-width: none; }
-  .media--rev .media-img {
-    padding-right: 0;
-    padding-left: 10px; }
-
-.media--stackOnWide .media-img,
-.media--stackOnWide .media-body {
-  display: block; }
-
-/**
- * Fluid width video
- * - 16:9 aspect ratio by default
- * Usage:
- * <div class="fluidVideo"><iframe src="..."/></div>
- */
-.fluidVideo {
-  position: relative;
-  padding-bottom: 56.25%;
-  /* 16:9 */
-  height: 0; }
-  .fluidVideo iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%; }
-
-/**
- * Tables
- * =================================
- * Index:
- * - Associated Table Variables
- * - Default table Styles
- * – Table modifiers:
- *   - .table--condensed
- *   - .table--bordered
- *   - .table--rounded
- *   - .table--striped
- *   – .table--hover
- * – .responsiveTable
- */
-/**
- * Define associated Table variables
- */
-/**
- * Customizes the `.table` component with basic values, each used across all table variations.
- */
-table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 28px;
-  border-spacing: 0;
-  border: 2px solid #ccc;
-  background-color: #f1f1f1; }
-  table th,
-  table td {
-    padding: 8px;
-    line-height: 28px;
-    vertical-align: top;
-    border: 1px solid #ccc; }
-    table th:first-child,
-    table td:first-child {
-      border-left: 0; }
-    table th:last-child,
-    table td:last-child {
-      border-right: 0; }
-  table > thead th,
-  table > thead td {
-    vertical-align: bottom;
-    border-bottom: 2px solid #ccc; }
-  table > tfoot td {
-    border-top: 2px solid #ccc;
-    border-bottom: 0; }
-  table > thead:first-child > tr:first-child > th,
-  table > thead:first-child > tr:first-child > td {
-    border-top: 0; }
-  table tr:hover td, table tr:hover th {
-    background-color: inherit; }
-  table > tbody + tbody {
-    border-top: 2px solid #ccc; }
-  table table,
-  table .table {
-    background-color: #f1f1f1; }
-
-th {
-  text-align: left; }
-
-/**
- * Zebra-striping
- * Default zebra-stripe styles (alternating gray and transparent backgrounds)
- */
-.table--striped tbody :nth-child(odd) th,
-.table--striped tbody :nth-child(odd) td {
-  background-color: #f9f9f9 !important; }
-
-/**
- * Responsive tables
- * Wrap your tables in `.responsiveTable` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
- *
- * If you need more responsive tables, consider Tablesaw by the Filament Group:
- * https://github.com/filamentgroup/tablesaw
- */
-/**
- * Preformatted code
- * Code typography styles for the <code> and <pre> elements
- */
-/**
- * Define associated Code variables
- */
-code,
-pre {
-  padding: 0 3px 2px;
-  font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 16px;
-  font-size: 0.8rem;
-  color: #444;
-  border-radius: 3px;
-  -moz-tab-size: 3;
-    -o-tab-size: 3;
-       tab-size: 3; }
-
-code {
-  padding: 2px 4px;
-  color: #444;
-  background-color: #ddd; }
-
-pre {
-  display: block;
-  padding: 14px;
-  margin: 0 0 28px;
-  color: #444;
-  background-color: #ddd;
-  border-radius: 4px;
-  white-space: pre; }
-  pre code {
-    padding: 0;
-    color: #444;
-    background-color: #ddd;
-    border: 0; }
-
-.pre--scrollable {
-  max-height: 340px;
-  overflow-y: scroll; }
-
-/**
- * Skip to main content link
- * <div class="skipToContent"><a href="#mainContent" class="btn btn--primary">Skip to main content</a></div>
- */
-.skipToContent {
-  position: relative;
-  text-align: center;
-  height: 0; }
-  .skipToContent a {
-    position: relative;
-    top: -100px;
-    z-index: 100;
-    background-color: #fff;
-    -webkit-transition: all 100ms ease-in-out;
-            transition: all 100ms ease-in-out; }
-    .skipToContent a:focus {
-      top: 5px; }
-
-/**
- * Your app styles
- */
-/**
- * Global app/site styles
- */
-body {
-  background-color: #f1f1f1; }
-
-/**
- * Default layout container
- */
-.l-container {
-  padding-left: 0px;
-  padding-right: 0px;
-  width: 95%;
-  max-width: 1000px;
-  margin: 0 auto; }
-  .lt-ie9 .l-container {
-    min-width: 1000px; }
-
-.browserupgrade {
-  margin: .2em 0;
-  background: #ccc;
-  color: #000;
-  padding: .2em 0; }
-
-/**
- * Views
- */
-/* Helper/utility classes */
-/**
- * Utilities
- * Non-semantic helper classes
- */
-/**
- * Clearfix
- * http://www.cssmojo.com/latest_new_clearfix_so_far/
- * See mixins/_utility.scss for a mixin version of this
- */
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both; }
-
-.ir {
-  background-color: transparent;
-  background-repeat: no-repeat;
-  border: 0;
-  direction: ltr;
-  display: block;
-  overflow: hidden;
-  text-align: left;
-  text-indent: -999em; }
-  .ir br {
-    display: none; }
-
-.is-hidden {
-  display: none !important;
-  visibility: hidden !important; }
-
-.is-shown {
-  display: block; }
-
-.is-visuallyHidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-  .is-visuallyHidden.focusable:active, .is-visuallyHidden.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto; }
-
-.is-invisible {
-  visibility: hidden; }
-
-.l-floatLeft {
-  float: left; }
-
-.l-floatRight {
-  float: right; }
-
-.l-clear {
-  clear: both;
-  float: none; }
-
-.l-mb0 {
-  margin-bottom: 0 !important; }
-
-.l-mt0 {
-  margin-top: 0 !important; }
-
-/**
- * Responsive Utilities
- */
-* {
-  -webkit-tap-highlight-color: #181830 !important; }
-
-/* A hack for HTML5 contenteditable attribute on mobile */
-textarea[contenteditable] {
-  -webkit-appearance: none; }
-
-.promote-layer {
-  /*
-  This may promote the layer to a composited
-  layer.
-
-  Replace with will-change when available
-
-  #perfmatters
-  */
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden; }
-
-.transition {
-  -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
-
-/* Print styles */
-/**
- * Print styles
- */
-@media print {
-  *,
-  *:before,
-  *:after,
-  *:first-letter,
-  *:first-line {
-    background: transparent !important;
-    color: #000 !important;
-    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
-    box-shadow: none !important;
-    text-shadow: none !important; }
-  a:visited {
-    text-decoration: underline; }
-  a[href]:after {
-    content: " (" attr(href) ")"; }
-  abbr[title]:after {
-    content: " (" attr(title) ")"; }
-  /*
-	 * Don't show links for images, or javascript/internal links
-	 */
-  .ir a:after,
-  a[href^="javascript:"]:after,
-  a[href^="#"]:after {
-    content: ""; }
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid; }
-  thead {
-    display: table-header-group;
-    /* h5bp.com/t */ }
-  tr,
-  img {
-    page-break-inside: avoid; }
-  img {
-    max-width: 100% !important; }
-  @page {
-    margin: .5cm; }
-  p, h2, h3 {
-    orphans: 3;
-    widows: 3; }
-  h2, h3 {
-    page-break-after: avoid; } }
+html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}img{border:0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{font-size:18px;-webkit-text-size-adjust:100%;font-size:20px}body{line-height:1.4;color:#444;-webkit-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig"}body,p{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:20px;font-size:1rem}p{margin-top:0;margin-bottom:28px}h1,h2,h3,h4,h5,h6{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.1;text-rendering:optimizelegibility;margin-top:0;margin-bottom:28px}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:400}.alpha,.h1,h1{font-size:40px;font-size:2rem;margin-bottom:56px}.beta,.h2,h2{font-size:32px;font-size:1.6rem}.gamma,.h3,h3{font-size:25px;font-size:1.25rem}.delta,.h4,h4{font-size:20px;font-size:1rem}.epsilon,.h5,.h6,.zeta,h5,h6{font-size:16px;font-size:.8rem;margin-bottom:0}*+.alpha,*+.beta,*+.delta,*+.gamma,*+.h1,*+.h2,*+.h3,*+.h4,*+h1,*+h2,*+h3,*+h4{margin-top:28px}small{font-size:80%}b,strong{font-weight:700}em,i{font-style:italic}abbr[title]{border-bottom:1px dotted #ddd;cursor:help}blockquote{padding-left:10px;margin:28px;border-left:4px solid #ccc}blockquote p{margin-bottom:0;font-size:20px;font-size:1rem;font-weight:300}blockquote small{display:block;color:#b3b3b3}blockquote small:before{content:'\2014 \00A0'}blockquote:after,blockquote:before,q:after,q:before{content:""}cite{font-style:normal}dfn{font-style:italic}mark{background:#feef6d;padding:2px 4px;border-radius:3px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}samp{font-family:Menlo,Monaco,Courier New,monospace}.text-center,.text-centre{text-align:center}.text-left{text-align:left}.text-right{text-align:right}::-moz-selection{color:#fff;background:#181830;text-shadow:none}::selection{color:#fff;background:#181830;text-shadow:none}hr{margin:28px 0;border:0;border-top:1px solid #b3b3b3;border-bottom:1px solid #fff}.form{margin:0 0 28px}.form-fieldset{padding:0;margin:0;border:0}.form-legend{display:block;width:100%;padding:0;margin-bottom:28px;font-size:25px;font-size:1.25rem;line-height:1.4;color:#444;border:0;border-bottom:1px solid #eee;white-space:normal}.form-legend small{font-size:16px;font-size:.8rem;color:#b3b3b3}.form-controlGroup{margin-top:14px;margin-bottom:14px;list-style-type:none}.form-legend+.form-controlGroup{margin-top:28px;-webkit-margin-top-collapse:separate}.form-label{display:block;color:#444;font-weight:700}.form-label small{font-weight:400;color:#919191}.form-input{display:block;width:100%;height:2.5em;padding:.5em;font-size:20px;font-size:1rem;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.4;color:#444;font-weight:400;vertical-align:baseline;background-color:#fff;border:2px solid #ccc;border-radius:5px;background-clip:padding-box;-webkit-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.form-input:focus{border-color:#181830;outline:0;outline:thin dotted\9}.form-input[type=checkbox],.form-input[type=image],.form-input[type=radio],.form-input[type=range]{width:auto;height:auto;padding:0;margin:3px 0;line-height:normal;cursor:pointer;border-radius:0;box-sizing:border-box}.form-input[type=image]{border:0}.form-input[type=file]{width:auto;height:28px;padding:initial;line-height:initial;border:initial;background-color:#fff;background-color:initial}.form-input[type=hidden]{display:none}.form-input[type=color]{width:40px;height:40px;overflow:hidden;padding:2px}.form-input[type=password]{font-family:sans-serif}.form-input[type=range]{width:100%}.form-input>.checkbox:first-child,.form-input>.radio:first-child{padding-top:5px}.form-input[disabled],.form-input[readonly]{background-color:#e6e6e6;border-color:#ccc;cursor:not-allowed}.form-input--textarea{height:auto;resize:vertical}.form-input--textarea--uneditable{width:auto;height:auto}.form-input--select{background-color:#fff}.form-input--select[multiple],.form-input--select[size]{height:auto}.form-input-file{display:inline-block;width:100%;font-size:20px;font-size:1rem;margin:0;vertical-align:middle;line-height:1em}.form-input-file:focus{outline:none}button,input[type=button],input[type=reset],input[type=submit]{width:auto;cursor:pointer;-webkit-appearance:button}.control{display:block}.control input[type=checkbox],.control input[type=radio]{vertical-align:middle;margin-right:.5em;margin-top:-.1em;display:inline;line-height:normal}.control--inline{display:inline-block;vertical-align:middle;margin-right:1.5em}.form-input--search{padding-left:14px;padding-right:14px;margin-bottom:0;border-radius:100px}.form-actions{padding:28px 20px;margin-top:28px;margin-bottom:28px;background-color:#f5f5f5;border-top:1px solid #ddd}.form-actions .btn{margin-right:10px}.form-actions .btn:last-child{margin-right:0}.form-controlGroup .form-message{display:none;padding-top:.5em;padding-left:.5em}.form-actions .form-message{padding:.5em}.form-controlGroup.has-warning .form-label,.has-warning{color:#f4aa47}.form-controlGroup.has-warning .form-input{color:#f4aa47;border-color:#f4aa47}.form-controlGroup.has-warning .form-input:focus{border-color:#f19417}.form-controlGroup.has-warning .form-message{display:block;color:#f4aa47}.form-controlGroup.has-error .form-label,.has-error{color:#b94a4d}.form-controlGroup.has-error .form-input{color:#b94a4d;border-color:#b94a4d}.form-controlGroup.has-error .form-input:focus{border-color:#963a3c}.form-controlGroup.has-error .form-message{display:block;color:#b94a4d}.form-controlGroup.has-success .form-label,.has-success{color:#16c98d}.form-controlGroup.has-success .form-input{color:#16c98d;border-color:#16c98d}.form-controlGroup.has-success .form-input:focus{border-color:#119b6d}.form-controlGroup.has-success .form-message{display:block;color:#16c98d}.form-controlGroup.has-info .form-label,.has-info{color:#288ad6}.form-controlGroup.has-info .form-input{color:#288ad6;border-color:#288ad6}.form-controlGroup.has-info .form-input:focus{border-color:#206eab}.form-controlGroup.has-info .form-message{display:block;color:#288ad6}:-ms-input-placeholder{color:#b3b3b3}:-moz-placeholder{color:#b3b3b3}::-webkit-input-placeholder{color:#b3b3b3}.form--horizontal .form-controlGroup{margin-bottom:28px}.form--horizontal .form-controlGroup:after{content:"";display:table;clear:both}.form--horizontal .form-controlGroup .form-input--fileWrapper{margin-left:0}.form--horizontal .form-label{float:left;width:140px;padding-top:5px;text-align:right}.form--horizontal .form-controlGroup-inputWrapper{margin-left:160px}.form--horizontal .form-controlGroup-inputWrapper:first-child{padding-left:160px}.form--horizontal .form-helpBlock{margin-top:14px;margin-bottom:0}.form--horizontal .form-actions{padding-left:160px}.control--custom{position:relative;display:block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.control--custom--inline{display:inline-block;padding-right:2em}.control--custom-input{position:absolute;opacity:0;z-index:-1}.control-indicator{position:relative;display:inline-block;width:1em;height:1em;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out;border:.1em solid #181830;background-color:#181830;vertical-align:middle;margin-top:-.2em;box-shadow:0 0 0 2px transparent,0 0 0 0 transparent}.control--custom-input:focus~.control-indicator{box-shadow:0 0 0 2px #f1f1f1,0 0 0 3px #181830}.control-indicator--checkbox,.control-indicator--tickbox{border-radius:.2em}.control-indicator--checkbox:after,.control-indicator--checkbox:before,.control-indicator--tickbox:after,.control-indicator--tickbox:before{content:'';position:absolute;top:50%;left:50%;width:90%;display:block;opacity:0;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.control-indicator--checkbox:after,.control-indicator--checkbox:before{top:50%;width:90%;height:.1em;background-color:#f1f1f1}.control-indicator--checkbox:before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.control-indicator--checkbox:after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.control-indicator--tickbox:before{top:0;-webkit-transform:translateX(-50%) rotate(45deg);-ms-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);border:.1em solid #f1f1f1;background-color:transparent;width:40%;height:80%;border-top:0;border-left:0}.control-indicator--tickbox:after{display:none}.control--custom-input:checked~.control-indicator--checkbox:after,.control--custom-input:checked~.control-indicator--checkbox:before,.control--custom-input:checked~.control-indicator--tickbox:after,.control--custom-input:checked~.control-indicator--tickbox:before{opacity:1}.control-indicator--radio{border-radius:50%}.control--custom-input:checked~.control-indicator--radio{background-color:#f1f1f1;border:.3em solid #181830}.form-controlGroup-inputWrapper--select{position:relative;display:block;padding:0}.form-controlGroup-inputWrapper--select:after{color:#181830;content:"\25BC";font-size:.7em;padding:0;position:absolute;right:1.2em;top:50%;margin-top:-9px;z-index:1;-ms-pointer-events:none;pointer-events:none;background:url(#)}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.form-controlGroup-inputWrapper--select:after{display:none}}.form-controlGroup-inputWrapper--select .form-input--select{-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value{background:transparent;color:#222}}option{font-weight:400}[class*=" icon-"],[class^=icon-]{speak:none;background-size:contain;background-position:center center;background-repeat:no-repeat}.icon-large{display:block;width:120px;height:120px}.icon-small{display:inline-block;width:25px;height:25px;vertical-align:top}a{-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}a,a:link,a:visited{color:#288ad6;text-decoration:none}a:active,a:focus,a:hover{color:#185380}.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:none;margin:0;line-height:2.5;height:2.5em;padding:0 1.5em;overflow:visible;text-align:center;background-color:#95a5a6;border-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn,.btn:link,.btn:visited{color:#fff}.btn:active,.btn:focus,.btn:hover{background-color:#798d8f}.btn,.btn:active,.btn:focus,.btn:hover,.btn:visited{text-decoration:none}.btn:active,.btn:focus{outline:none}.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:.65}.btn--primary{background-color:#288ad6}.btn--primary,.btn--primary:link,.btn--primary:visited{color:#fff}.btn--primary:active,.btn--primary:focus,.btn--primary:hover{background-color:#206eab}.btn--block{display:block;width:100%;padding-left:0;padding-right:0}.btn--block+.btn--block{margin-top:10px}.g-row,input[type=button].btn--block,input[type=reset].btn--block,input[type=submit].btn--block{width:100%}.g-row{margin:0 auto}.g-row:after{content:"";display:table;clear:both}.g-row .g-row{min-width:0}.g-row .g-row .g-col{padding:0}.g-col{float:left;min-height:1px;position:relative;clear:none;box-sizing:border-box;margin-left:2%}.g-col:first-child{margin-left:0}.g-col+.g-col:last-child{float:right}.g-col+.g-col.end{float:left}.g-span1{width:6.5%}.g-span2{width:15%}.g-span3{width:23.5%}.g-span4{width:32%}.g-span5{width:40.5%}.g-span6{width:49%}.g-span7{width:57.5%}.g-span8{width:66%}.g-span9{width:74.5%}.g-span10{width:83%}.g-span11{width:91.5%}.g-span12{width:100%}.g-col.g-col--centered,.g-col.g-col--centred{float:none;margin:0 auto}.l-blockGrid{display:block;list-style-type:none;margin:0}.l-blockGrid:after{content:"";display:table;clear:both}.l-blockGrid-item{display:block;height:auto}.l-blockGrid--1--narrow .l-blockGrid-item{float:left;width:100%}.l-blockGrid--1--narrow .l-blockGrid-item:nth-of-type(1n+1){clear:left}.l-blockGrid--1--narrow .l-blockGrid-item:not(:nth-of-type(1n+1)){clear:none}.l-blockGrid--2--narrow .l-blockGrid-item{float:left;width:50%}.l-blockGrid--2--narrow .l-blockGrid-item:nth-of-type(2n+1){clear:left}.l-blockGrid--2--narrow .l-blockGrid-item:not(:nth-of-type(2n+1)){clear:none}.l-blockGrid--3--narrow .l-blockGrid-item{float:left;width:33.3333333333%}.l-blockGrid--3--narrow .l-blockGrid-item:nth-of-type(3n+1){clear:left}.l-blockGrid--3--narrow .l-blockGrid-item:not(:nth-of-type(3n+1)){clear:none}.l-blockGrid--4--narrow .l-blockGrid-item{float:left;width:25%}.l-blockGrid--4--narrow .l-blockGrid-item:nth-of-type(4n+1){clear:left}.l-blockGrid--4--narrow .l-blockGrid-item:not(:nth-of-type(4n+1)){clear:none}.l-blockGrid--5--narrow .l-blockGrid-item{float:left;width:20%}.l-blockGrid--5--narrow .l-blockGrid-item:nth-of-type(5n+1){clear:left}.l-blockGrid--5--narrow .l-blockGrid-item:not(:nth-of-type(5n+1)){clear:none}.l-blockGrid--6--narrow .l-blockGrid-item{float:left;width:16.6666666667%}.l-blockGrid--6--narrow .l-blockGrid-item:nth-of-type(6n+1){clear:left}.l-blockGrid--6--narrow .l-blockGrid-item:not(:nth-of-type(6n+1)){clear:none}.l-blockGrid--7--narrow .l-blockGrid-item{float:left;width:14.2857142857%}.l-blockGrid--7--narrow .l-blockGrid-item:nth-of-type(7n+1){clear:left}.l-blockGrid--7--narrow .l-blockGrid-item:not(:nth-of-type(7n+1)){clear:none}.l-blockGrid--8--narrow .l-blockGrid-item{float:left;width:12.5%}.l-blockGrid--8--narrow .l-blockGrid-item:nth-of-type(8n+1){clear:left}.l-blockGrid--8--narrow .l-blockGrid-item:not(:nth-of-type(8n+1)){clear:none}.l-blockGrid--9--narrow .l-blockGrid-item{float:left;width:11.1111111111%}.l-blockGrid--9--narrow .l-blockGrid-item:nth-of-type(9n+1){clear:left}.l-blockGrid--9--narrow .l-blockGrid-item:not(:nth-of-type(9n+1)){clear:none}.l-blockGrid--10--narrow .l-blockGrid-item{float:left;width:10%}.l-blockGrid--10--narrow .l-blockGrid-item:nth-of-type(10n+1){clear:left}.l-blockGrid--10--narrow .l-blockGrid-item:not(:nth-of-type(10n+1)){clear:none}.l-blockGrid--11--narrow .l-blockGrid-item{float:left;width:9.0909090909%}.l-blockGrid--11--narrow .l-blockGrid-item:nth-of-type(11n+1){clear:left}.l-blockGrid--11--narrow .l-blockGrid-item:not(:nth-of-type(11n+1)){clear:none}.l-blockGrid--12--narrow .l-blockGrid-item{float:left;width:8.3333333333%}.l-blockGrid--12--narrow .l-blockGrid-item:nth-of-type(12n+1){clear:left}.l-blockGrid--12--narrow .l-blockGrid-item:not(:nth-of-type(12n+1)){clear:none}.l-blockGrid--1 .l-blockGrid-item{float:left;width:100%}.l-blockGrid--1 .l-blockGrid-item:nth-of-type(1n+1){clear:left}.l-blockGrid--1 .l-blockGrid-item:not(:nth-of-type(1n+1)){clear:none}.l-blockGrid--2 .l-blockGrid-item{float:left;width:50%}.l-blockGrid--2 .l-blockGrid-item:nth-of-type(2n+1){clear:left}.l-blockGrid--2 .l-blockGrid-item:not(:nth-of-type(2n+1)){clear:none}.l-blockGrid--3 .l-blockGrid-item{float:left;width:33.3333333333%}.l-blockGrid--3 .l-blockGrid-item:nth-of-type(3n+1){clear:left}.l-blockGrid--3 .l-blockGrid-item:not(:nth-of-type(3n+1)){clear:none}.l-blockGrid--4 .l-blockGrid-item{float:left;width:25%}.l-blockGrid--4 .l-blockGrid-item:nth-of-type(4n+1){clear:left}.l-blockGrid--4 .l-blockGrid-item:not(:nth-of-type(4n+1)){clear:none}.l-blockGrid--5 .l-blockGrid-item{float:left;width:20%}.l-blockGrid--5 .l-blockGrid-item:nth-of-type(5n+1){clear:left}.l-blockGrid--5 .l-blockGrid-item:not(:nth-of-type(5n+1)){clear:none}.l-blockGrid--6 .l-blockGrid-item{float:left;width:16.6666666667%}.l-blockGrid--6 .l-blockGrid-item:nth-of-type(6n+1){clear:left}.l-blockGrid--6 .l-blockGrid-item:not(:nth-of-type(6n+1)){clear:none}.l-blockGrid--7 .l-blockGrid-item{float:left;width:14.2857142857%}.l-blockGrid--7 .l-blockGrid-item:nth-of-type(7n+1){clear:left}.l-blockGrid--7 .l-blockGrid-item:not(:nth-of-type(7n+1)){clear:none}.l-blockGrid--8 .l-blockGrid-item{float:left;width:12.5%}.l-blockGrid--8 .l-blockGrid-item:nth-of-type(8n+1){clear:left}.l-blockGrid--8 .l-blockGrid-item:not(:nth-of-type(8n+1)){clear:none}.l-blockGrid--9 .l-blockGrid-item{float:left;width:11.1111111111%}.l-blockGrid--9 .l-blockGrid-item:nth-of-type(9n+1){clear:left}.l-blockGrid--9 .l-blockGrid-item:not(:nth-of-type(9n+1)){clear:none}.l-blockGrid--10 .l-blockGrid-item{float:left;width:10%}.l-blockGrid--10 .l-blockGrid-item:nth-of-type(10n+1){clear:left}.l-blockGrid--10 .l-blockGrid-item:not(:nth-of-type(10n+1)){clear:none}.l-blockGrid--11 .l-blockGrid-item{float:left;width:9.0909090909%}.l-blockGrid--11 .l-blockGrid-item:nth-of-type(11n+1){clear:left}.l-blockGrid--11 .l-blockGrid-item:not(:nth-of-type(11n+1)){clear:none}.l-blockGrid--12 .l-blockGrid-item{float:left;width:8.3333333333%}.l-blockGrid--12 .l-blockGrid-item:nth-of-type(12n+1){clear:left}.l-blockGrid--12 .l-blockGrid-item:not(:nth-of-type(12n+1)){clear:none}.l-blockGrid--guttered{margin-left:-20px}.l-blockGrid--guttered .l-blockGrid-item{padding-left:20px;padding-bottom:20px}ul{list-style-type:disc}ol{list-style-type:decimal}ol,ul{padding:0;margin:0 0 28px 28px}ol ol,ol ul,ul ol,ul ul{margin-left:56px}ol ul,ul ul{list-style-type:circle}ol ul ul,ul ul ul{list-style-type:square}ol ol,ul ol{list-style-type:upper-roman}ol ol ol,ul ol ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.unstyled{margin:0;padding:0;list-style:none;list-style-image:none}dl{margin-bottom:28px}dt{font-weight:700}dd{margin-left:28px}.l-list--centered,.l-list--centred{text-align:center}.l-list--centered li,.l-list--centred li{display:inline}.l-list--floated:after{content:"";display:table;clear:both}.l-list--floated li{float:left;display:inline-block}img{font-style:italic;color:#c00;border:0;-ms-interpolation-mode:bicubic}img.img--left{margin:0 20px 0 0}img.img--right{margin:0 0 0 20px}svg:not(:root){overflow:hidden}embed,img,object,video{max-width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}.media{display:table;width:100%}.media-body,.media-img{display:table-cell;vertical-align:middle}.media--top .media-body,.media--top .media-img{vertical-align:top}.media--bottom .media-body,.media--bottom .media-img{vertical-align:bottom}.media-body{width:100%}.media-img{padding-right:10px}.media-img>img{display:block;max-width:none}.media--rev .media-img{padding-right:0;padding-left:10px}.media--stackOnWide .media-body,.media--stackOnWide .media-img{display:block}.fluidVideo{position:relative;padding-bottom:56.25%;height:0}.fluidVideo iframe{position:absolute;top:0;left:0;width:100%;height:100%}table{width:100%;max-width:100%;margin-bottom:28px;border-spacing:0;border:2px solid #ccc;background-color:#f1f1f1}table td,table th{padding:8px;line-height:28px;vertical-align:top;border:1px solid #ccc}table td:first-child,table th:first-child{border-left:0}table td:last-child,table th:last-child{border-right:0}table>thead td,table>thead th{vertical-align:bottom;border-bottom:2px solid #ccc}table>tfoot td{border-top:2px solid #ccc;border-bottom:0}table>thead:first-child>tr:first-child>td,table>thead:first-child>tr:first-child>th{border-top:0}table tr:hover td,table tr:hover th{background-color:inherit}table>tbody+tbody{border-top:2px solid #ccc}table .table,table table{background-color:#f1f1f1}th{text-align:left}.table--striped tbody :nth-child(odd) td,.table--striped tbody :nth-child(odd) th{background-color:#f9f9f9!important}code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,Courier New,monospace;font-size:16px;font-size:.8rem;color:#444;border-radius:3px;-moz-tab-size:3;-o-tab-size:3;tab-size:3}code{padding:2px 4px}code,pre{color:#444;background-color:#ddd}pre{display:block;padding:14px;margin:0 0 28px;border-radius:4px;white-space:pre}pre code{padding:0;color:#444;background-color:#ddd;border:0}.pre--scrollable{max-height:340px;overflow-y:scroll}.skipToContent{position:relative;text-align:center;height:0}.skipToContent a{position:relative;top:-100px;z-index:2;background-color:#fff;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.skipToContent a:focus{top:5px}body{background-color:#f1f1f1}.l-container{padding-left:0;padding-right:0;width:95%;max-width:1000px;margin:0 auto}.lt-ie9 .l-container{min-width:1000px}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.clearfix:after{content:"";display:table;clear:both}.ir{background-color:transparent;background-repeat:no-repeat;border:0;direction:ltr;display:block;overflow:hidden;text-align:left;text-indent:-999em}.ir br{display:none}.is-hidden{display:none!important;visibility:hidden!important}.is-shown{display:block}.is-visuallyHidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.is-visuallyHidden.focusable:active,.is-visuallyHidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.is-invisible{visibility:hidden}.l-floatLeft{float:left}.l-floatRight{float:right}.l-clear{clear:both;float:none}.l-mb0{margin-bottom:0!important}.l-mt0{margin-top:0!important}*{-webkit-tap-highlight-color:#181830!important}textarea[contenteditable]{-webkit-appearance:none}.promote-layer{-webkit-backface-visibility:hidden;backface-visibility:hidden}.transition{-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}@media print{*,:after,:before,:first-letter,:first-line{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
 /*# sourceMappingURL=kickoff-old-ie.css.map */
\ No newline at end of file
diff --git a/assets/dist/css/kickoff.css b/assets/dist/css/kickoff.css
index de20602e..f425bc6a 100644
--- a/assets/dist/css/kickoff.css
+++ b/assets/dist/css/kickoff.css
@@ -1,2309 +1,3 @@
-@charset "UTF-8";
-/**
- * Site dependencies
- * See http://trykickoff.github.io/demos/ for more info
- */
-/*
- * Mixins, helpers and functions
- * Most CSS3 vendor prefixed items have a mixin,
- * but we should not need them if autoprefixer is being used
- * See mixins/css3.scss for the full list
- */
-/**
- * Sass Mixins
- * - Vendor prefixer
- * - Responsive
- * - CSS3
- * - Utility Mixins
- * - hiDpi
- * - Forms */
-/**
- * Vendor prefixer
- * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
- */
-/**
- * Responsive media query mixins
- * - These are used so that we can define separate media-query content
- *   for <IE9 and browsers with support for media queries
- * - These are directly related to the global $fix-mqs var defined in
- *   kickoff-old-ie.scss
- * - kickoff-old-ie.scss ignores any content in media-queries with values less
- *   than the $fix-mqs var value
- */
-/**
- * Min-width media query:
- * - Equivalent to: @media screen and (min-width: 20em) { ... }
- * - Usage: @include respond-min(500) { ... };
- * - Argument is a pixel value WITHOUT a unit of measurement
- */
-/**
- * Max-width media query:
- * - Equivalent to: @media screen and (max-width: 20em) { ... }
- * - Usage: @include respond-max(500) { ... };
- * - Argument is a pixel value WITHOUT a unit of measurement
- */
-/**
- * Min-max-width media query:
- * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
- * - Usage: @include respond-min-max(500, 600) { ... };
- * - Arguments are pixel values WITHOUT a unit of measurement
- */
-/**
- * Old IE specific mixin
- * - Only use this content if we're dealing with old IE
- * - Usage: @include oldie() { ... }
- */
-/**
- * Linear Gradient
- * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
- */
-/**
- * Radial Gradient
- * Usage: @include radial-gradient(#000, #BADA55, true);
- */
-/**
- * vertical-center
- * Vertically center any element. Needs support for CSS tranforms.
- * Usage:
- * @include vertical-center;
- */
-/**
- * Utility mixins
- * Clearfix, REM + fallbacks,
- * @font-face, sizing shortcuts,
- * and other helpers
- */
-/**
- * Utility Mixins
- */
-/**
- * Typography mixins
- */
-/**
- *  HiDPI mixin.
- *  @include hidpi { ... };
- *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
- */
-/**
- * Hidpi with a minimum width media query
- * @include hidpi-min($bp-mid, 1.5) { ... };
- */
-/**
- * Hidpi with a max width media query
- * @include hidpi-max($bp-mid, 1.3) { ... };
- */
-/**
- * Core variables
- * Edit your color palette and app vars before your begin
- */
-/**
- * Global Color palette
- * - Generic colors
- * - Color scheme
- * - Common colors
- * - Links
- * - Text selection
- * - <hr>
- * - Any others..
- */
-/**
- * Variables
- * - Typography
- * - Breakpoints
- * - Paths
- * - Layout & Grid
- * - App-specific
- */
-/**
- * Typography
- *
- * Base sizes:
- * Set this in pixels (but do not add px),
- * the font-size mixin will convert to REMS
- */
-/**
- * Breakpoints
- * There are no common breakpoints so these are just a suggestions
- * You'll need to define your own breakpoints to suit your design
- */
-/**
- * Path vars
- */
-/**
- * Layout setup
- * Settings here override & affect the output in scss/partials/components/grid.scss
- */
-/**
- * App-specific variables
- */
-/* CSS Reset - Normalize etc */
-/**
- * Kickoff reset
- */
-html {
-  box-sizing: border-box; }
-
-*, *:before, *:after {
-  box-sizing: inherit; }
-
-/**
- * Normalize - CSS reset
- * http://github.com/necolas/normalize.css
- * Kickoff uses an amended version of this file.
- */
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- *    without disabling user zoom.
- */
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */ }
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0; }
-
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block; }
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */ }
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0; }
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
-[hidden],
-template {
-  display: none; }
-
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background-color: transparent; }
-
-/**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
-a:active,
-a:hover {
-  outline: 0; }
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
-  border-bottom: 1px dotted; }
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b,
-strong {
-  font-weight: bold; }
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
-  font-style: italic; }
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
-/**
- * Address styling not present in IE 8/9.
- */
-mark {
-  background: #ff0;
-  color: #000; }
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
-  font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -0.5em; }
-
-sub {
-  bottom: -0.25em; }
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
-  border: 0; }
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden; }
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-figure {
-  margin: 1em 40px; }
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  box-sizing: content-box;
-  height: 0; }
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto; }
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em; }
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */ }
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
-  overflow: visible; }
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none; }
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */ }
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default; }
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0; }
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal; }
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto; }
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
- */
-input[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  box-sizing: content-box;
-  /* 2 */ }
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none; }
-
-/**
- * Define consistent border, margin, and padding.
- */
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em; }
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto; }
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
-  font-weight: bold; }
-
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-td,
-th {
-  padding: 0; }
-
-/**
- * Global typography styles
- * See http://trykickoff.github.io/demos/typography.html for more info
- */
-/**
- * Typography
- * - Base
- * - Paragraphs
- * - Headings
- * - Type sizes
- * - Misc
- * - Utilities
- *
- * Body font size, leadings etc have been set in _variables.scss
- * Resources:
- * http://www.gridlover.net/
- * http://modularscale.com/
- * http://lamb.cc/typograph/
- *
- */
-html {
-  font-size: 18px;
-  -webkit-text-size-adjust: 100%; }
-  @media screen and (min-width: 46.875em) {
-    html {
-      font-size: 20px; } }
-
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 20px;
-  font-size: 1rem;
-  line-height: 1.4;
-  color: #444;
-  -webkit-font-feature-settings: "liga","dlig";
-          font-feature-settings: "liga","dlig"; }
-
-/**
- * Paragraphs
- */
-p {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 20px;
-  font-size: 1rem;
-  margin-top: 0;
-  margin-bottom: 28px; }
-
-/**
- * Headings
- */
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  line-height: 1.1;
-  text-rendering: optimizelegibility;
-  margin-top: 0;
-  margin-bottom: 28px; }
-  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-    font-weight: normal; }
-
-h1, .h1, .alpha {
-  font-size: 40px;
-  font-size: 2rem;
-  margin-bottom: 56px; }
-
-h2, .h2, .beta {
-  font-size: 32px;
-  font-size: 1.6rem; }
-
-h3, .h3, .gamma {
-  font-size: 25px;
-  font-size: 1.25rem; }
-
-h4, .h4, .delta {
-  font-size: 20px;
-  font-size: 1rem; }
-
-h5, .h5, .epsilon,
-h6, .h6, .zeta {
-  font-size: 16px;
-  font-size: 0.8rem;
-  margin-bottom: 0; }
-
-* + h1, * + .h1, * + .alpha,
-* + h2, * + .h2, * + .beta,
-* + h3, * + .h3, * + .gamma,
-* + h4, * + .h4, * + .delta {
-  margin-top: 28px; }
-
-small {
-  font-size: 80%; }
-
-/**
- * Miscellaneous
- */
-strong, b {
-  font-weight: bold; }
-
-em, i {
-  font-style: italic; }
-
-abbr[title] {
-  border-bottom: 1px dotted #ddd;
-  cursor: help; }
-
-/**
- * Blockquotes
- */
-blockquote {
-  padding-left: 10px;
-  margin: 28px;
-  border-left: 4px solid #cccccc; }
-  blockquote p {
-    margin-bottom: 0;
-    font-size: 20px;
-    font-size: 1rem;
-    font-weight: 300; }
-  blockquote small {
-    display: block;
-    color: #b3b3b3; }
-    blockquote small:before {
-      content: '\2014 \00A0'; }
-
-q:before, q:after,
-blockquote:before,
-blockquote:after {
-  content: ""; }
-
-cite {
-  font-style: normal; }
-
-dfn {
-  font-style: italic; }
-
-mark {
-  background: #feef6d;
-  padding: 2px 4px;
-  border-radius: 3px; }
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -.5em; }
-
-sub {
-  bottom: -.25em; }
-
-samp {
-  font-family: Menlo, Monaco, "Courier New", monospace; }
-
-/**
- * Utilities
- */
-.text-centre,
-.text-center {
-  text-align: center; }
-
-.text-left {
-  text-align: left; }
-
-.text-right {
-  text-align: right; }
-
-::-moz-selection {
-  color: #fff;
-  background: #181830;
-  text-shadow: none; }
-
-::selection {
-  color: #fff;
-  background: #181830;
-  text-shadow: none; }
-
-hr {
-  margin: 28px 0;
-  border: 0;
-  border-top: 1px solid #b3b3b3;
-  border-bottom: 1px solid #fff; }
-
-/**
- * Components:
- * See http://trykickoff.github.io/demos/components.html for more info
- */
-/**
- * Forms
- * =================================
- * Index:
- * - Associated Form Variables
- * - Generic form styles
- * - Form inputs and groups
- * - Form field feedback states
- * - Horizontal & vertical forms
- * - Horizontal-specific styles
- */
-/**
- * Define associated Form variables
- */
-/**
- * Generic form styles
- * =================================
- * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-above
- * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html
- * Usage:
-  	<div class="form-controlGroup">
-  		<label for="name" class="form-label">Name</label>
-  		<div class="form-controlGroup-inputWrapper">
-  			<input type="text" id="name" placeholder="Zander Martineau" class="form-input"/>
-  		</div>
-  	</div>
- */
-.form {
-  margin: 0 0 28px; }
-
-.form-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0; }
-
-.form-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 28px;
-  font-size: 25px;
-  font-size: 1.25rem;
-  line-height: 1.4;
-  color: #444;
-  border: 0;
-  border-bottom: 1px solid #eee;
-  white-space: normal; }
-  .form-legend small {
-    font-size: 16px;
-    font-size: 0.8rem;
-    color: #b3b3b3; }
-
-/**
- * Form inputs and groups
- */
-.form-controlGroup {
-  margin-top: 14px;
-  margin-bottom: 14px;
-  list-style-type: none; }
-
-.form-legend + .form-controlGroup {
-  margin-top: 28px;
-  -webkit-margin-top-collapse: separate; }
-
-.form-label {
-  display: block;
-  color: #444;
-  font-weight: bold; }
-  .form-label small {
-    font-weight: normal;
-    color: #919191; }
-
-.form-input {
-  display: block;
-  width: 100%;
-  height: 2.5em;
-  padding: .5em;
-  font-size: 20px;
-  font-size: 1rem;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.4;
-  color: #444;
-  font-weight: normal;
-  vertical-align: baseline;
-  background-color: #fff;
-  border: 2px solid #ccc;
-  border-radius: 5px;
-  background-clip: padding-box;
-  -webkit-transition: border 200ms ease-in-out;
-          transition: border 200ms ease-in-out; }
-  .form-input:focus {
-    border-color: #181830;
-    outline: 0;
-    outline: thin dotted \9; }
-  .form-input[type="image"], .form-input[type="checkbox"], .form-input[type="radio"], .form-input[type="range"] {
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin: 3px 0;
-    line-height: normal;
-    cursor: pointer;
-    border-radius: 0;
-    box-sizing: border-box; }
-  .form-input[type="image"] {
-    border: 0; }
-  .form-input[type="file"] {
-    width: auto;
-    height: 28px;
-    padding: initial;
-    line-height: initial;
-    border: initial;
-    background-color: #fff;
-    background-color: initial; }
-  .form-input[type="hidden"] {
-    display: none; }
-  .form-input[type="color"] {
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-    padding: 2px; }
-  .form-input[type="password"] {
-    font-family: sans-serif; }
-  .form-input[type="range"] {
-    width: 100%; }
-  .form-input > .radio:first-child,
-  .form-input > .checkbox:first-child {
-    padding-top: 5px; }
-  .form-input[disabled], .form-input[readonly] {
-    background-color: #e6e6e6;
-    border-color: #ccc;
-    cursor: not-allowed; }
-
-.form-input--textarea {
-  height: auto;
-  resize: vertical; }
-
-.form-input--textarea--uneditable {
-  width: auto;
-  height: auto; }
-
-.form-input--select {
-  background-color: #fff; }
-  .form-input--select[multiple], .form-input--select[size] {
-    height: auto; }
-
-.form-input-file {
-  display: inline-block;
-  width: 100%;
-  font-size: 20px;
-  font-size: 1rem;
-  margin: 0;
-  vertical-align: middle;
-  line-height: 1em; }
-  .form-input-file:focus {
-    outline: none; }
-
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  width: auto;
-  cursor: pointer;
-  -webkit-appearance: button; }
-
-/**
- * Checkboxes:
- * =================================
-	<label class="control">
-		<input type="checkbox" value="check1">
-		This is a checkbox
-	</label>
-	<label class="control control--inline">
-		<input type="checkbox" value="check1">
-		This is a checkbox
-	</label>
-
- * Radios:
- * =================================
-	<label class="control">
-		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-		This is a radio
-	</label>
-	<label class="control control--inline">
-		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" checked>
-		This is a radio
-	</label>
- */
-.control {
-  display: block; }
-  .control input[type="radio"],
-  .control input[type="checkbox"] {
-    vertical-align: middle;
-    margin-right: .5em;
-    margin-top: -.1em;
-    display: inline;
-    line-height: normal; }
-
-.control--inline {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 1.5em; }
-
-/**
- * Search input
- */
-.form-input--search {
-  padding-left: 14px;
-  padding-right: 14px;
-  margin-bottom: 0;
-  border-radius: 100px; }
-
-/**
- * Form actions
- */
-.form-actions {
-  padding: 28px 20px;
-  margin-top: 28px;
-  margin-bottom: 28px;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd; }
-  .form-actions .btn {
-    margin-right: 10px; }
-    .form-actions .btn:last-child {
-      margin-right: 0; }
-
-/**
- * Form validation messages
- */
-.form-controlGroup .form-message {
-  display: none;
-  padding-top: 0.5em;
-  padding-left: 0.5em; }
-
-.form-actions .form-message {
-  padding: 0.5em; }
-
-/**
- * Form field feedback states
- */
-.has-warning {
-  color: #f4aa47; }
-
-.form-controlGroup.has-warning .form-label {
-  color: #f4aa47; }
-
-.form-controlGroup.has-warning .form-input {
-  color: #f4aa47;
-  border-color: #f4aa47; }
-  .form-controlGroup.has-warning .form-input:focus {
-    border-color: #f19417; }
-
-.form-controlGroup.has-warning .form-message {
-  display: block;
-  color: #f4aa47; }
-
-.has-error {
-  color: #B94A4D; }
-
-.form-controlGroup.has-error .form-label {
-  color: #B94A4D; }
-
-.form-controlGroup.has-error .form-input {
-  color: #B94A4D;
-  border-color: #B94A4D; }
-  .form-controlGroup.has-error .form-input:focus {
-    border-color: #963a3c; }
-
-.form-controlGroup.has-error .form-message {
-  display: block;
-  color: #B94A4D; }
-
-.has-success {
-  color: #16c98d; }
-
-.form-controlGroup.has-success .form-label {
-  color: #16c98d; }
-
-.form-controlGroup.has-success .form-input {
-  color: #16c98d;
-  border-color: #16c98d; }
-  .form-controlGroup.has-success .form-input:focus {
-    border-color: #119b6d; }
-
-.form-controlGroup.has-success .form-message {
-  display: block;
-  color: #16c98d; }
-
-.has-info {
-  color: #288ad6; }
-
-.form-controlGroup.has-info .form-label {
-  color: #288ad6; }
-
-.form-controlGroup.has-info .form-input {
-  color: #288ad6;
-  border-color: #288ad6; }
-  .form-controlGroup.has-info .form-input:focus {
-    border-color: #206eab; }
-
-.form-controlGroup.has-info .form-message {
-  display: block;
-  color: #288ad6; }
-
-/**
- * Placeholder text
- * =================================
- * Gets special styles; can't be bundled together though for some reason
- */
-:-ms-input-placeholder {
-  color: #b3b3b3; }
-
-:-moz-placeholder {
-  color: #b3b3b3; }
-
-::-webkit-input-placeholder {
-  color: #b3b3b3; }
-
-@media screen and (min-width: 46.875em) {
-  /**
-	 * Horizontal-specific styles
-	 * =================================
-	 * add .form--horizontal to the <form> element
-	 * Demo: http://trykickoff.github.io/demos/forms.html#layout-example-labels-inline
-	 * Code: https://gist.github.com/mrmartineau/6712577#file-labels-inline-html
-	 */
-  .form--horizontal .form-controlGroup {
-    margin-bottom: 28px; }
-    .form--horizontal .form-controlGroup:after {
-      content: "";
-      display: table;
-      clear: both; }
-    .form--horizontal .form-controlGroup .form-input--fileWrapper {
-      margin-left: 0; }
-  .form--horizontal .form-label {
-    float: left;
-    width: 140px;
-    padding-top: 5px;
-    text-align: right; }
-  .form--horizontal .form-controlGroup-inputWrapper {
-    margin-left: 160px; }
-    .form--horizontal .form-controlGroup-inputWrapper:first-child {
-      padding-left: 160px; }
-  .form--horizontal .form-helpBlock {
-    margin-top: 14px;
-    margin-bottom: 0; }
-  .form--horizontal .form-actions {
-    padding-left: 160px; } }
-
-/**
- * Custom Checkboxes and radios
- *
- * IE9+
- *
- * --------------------------------
- *
- * Checkbox button example HTML
- *
- *	<label class="control control--custom">
- *		<input class="control--custom-input" type="checkbox" name="myCheckbox" />
- *		<span class="control-indicator control-indicator--checkbox"></span>
- *		My Checkbox Label Text
- *	</label>
- *
- * -------------------------------
- *
- * Radio button example HTML
- *
- *	<label class="control control--custom">
- *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" />
- *		<span class="control-indicator control-indicator--radio"></span>
- *		My Radio Button Label Text
- * 	</label>
- *
- * ================================= */
-.control--custom {
-  position: relative;
-  display: block;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-
-.control--custom--inline {
-  display: inline-block;
-  padding-right: 2em; }
-
-.control--custom-input {
-  position: absolute;
-  opacity: 0;
-  z-index: -1; }
-
-.control-indicator {
-  position: relative;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out;
-  border: 0.1em solid #181830;
-  background-color: #181830;
-  vertical-align: middle;
-  margin-top: -.2em;
-  box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
-
-.control--custom-input:focus ~ .control-indicator {
-  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 3px #181830; }
-
-.control-indicator--checkbox,
-.control-indicator--tickbox {
-  border-radius: .2em; }
-  .control-indicator--checkbox:before, .control-indicator--checkbox:after,
-  .control-indicator--tickbox:before,
-  .control-indicator--tickbox:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 90%;
-    display: block;
-    opacity: 0;
-    -webkit-transition: all 250ms ease-in-out;
-            transition: all 250ms ease-in-out; }
-
-.control-indicator--checkbox:before, .control-indicator--checkbox:after {
-  top: 50%;
-  width: 90%;
-  height: 0.1em;
-  background-color: #f1f1f1; }
-
-.control-indicator--checkbox:before {
-  -webkit-transform: translate(-50%, -50%) rotate(45deg);
-      -ms-transform: translate(-50%, -50%) rotate(45deg);
-          transform: translate(-50%, -50%) rotate(45deg); }
-
-.control-indicator--checkbox:after {
-  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
-      -ms-transform: translate(-50%, -50%) rotate(-45deg);
-          transform: translate(-50%, -50%) rotate(-45deg); }
-
-.control-indicator--tickbox:before {
-  top: 0;
-  -webkit-transform: translateX(-50%) rotate(45deg);
-      -ms-transform: translateX(-50%) rotate(45deg);
-          transform: translateX(-50%) rotate(45deg);
-  border: 0.1em solid #f1f1f1;
-  background-color: transparent;
-  width: 40%;
-  height: 80%;
-  border-top: 0;
-  border-left: 0; }
-
-.control-indicator--tickbox:after {
-  display: none; }
-
-.control--custom-input:checked ~ .control-indicator--checkbox:before, .control--custom-input:checked ~ .control-indicator--checkbox:after,
-.control--custom-input:checked ~ .control-indicator--tickbox:before,
-.control--custom-input:checked ~ .control-indicator--tickbox:after {
-  opacity: 1; }
-
-.control-indicator--radio {
-  border-radius: 50%; }
-
-.control--custom-input:checked ~ .control-indicator--radio {
-  background-color: #f1f1f1;
-  border: 0.3em solid #181830; }
-
-/**
- * Custom select element
- *
- * Firefox 39+, IE10+
- *
- *	<div class="form-controlGroup">
- *			<label for="cs-choice" class="form-label">Custom select</label>
- *			<div class="form-controlGroup-inputWrapper form-controlGroup-inputWrapper--select">
- *				<select id="cs-choice" name="cs-choice" class="form-input form-input--select">
- *					<option value="--">Select title</option>
- *					<option value="Mr">Mr</option>
- *					<option value="Mrs">Mrs</option>
- *				</select>
- *			</div>
- *	</div>
- */
-.form-controlGroup-inputWrapper--select {
-  position: relative;
-  display: block;
-  padding: 0;
-  /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ }
-  .form-controlGroup-inputWrapper--select:after {
-    color: #181830;
-    content: "\25BC";
-    font-size: .7em;
-    padding: 0;
-    position: absolute;
-    right: 1.2em;
-    top: 50%;
-    margin-top: -9px;
-    z-index: 2;
-    /* These hacks make the select behind the arrow clickable in some browsers */
-    -ms-pointer-events: none;
-    pointer-events: none;
-    background: url(#); }
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .form-controlGroup-inputWrapper--select:after {
-      display: none; } }
-  .form-controlGroup-inputWrapper--select .form-input--select {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none; }
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      .form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value {
-        background: transparent;
-        color: #222; } }
-
-option {
-  font-weight: normal; }
-
-/**
- * Icons
- */
-[class^="icon-"], [class*=" icon-"] {
-  speak: none;
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat; }
-
-.icon-large {
-  display: block;
-  width: 120px;
-  height: 120px; }
-
-.icon-small {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  vertical-align: top; }
-
-/**
- * Links
- */
-a {
-  -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
-  a, a:link {
-    color: #288ad6;
-    text-decoration: none; }
-  a:visited {
-    color: #288ad6;
-    text-decoration: none; }
-  a:hover, a:focus {
-    color: #185380; }
-  a:active {
-    color: #185380; }
-
-/**
- * Buttons
- * =================================
- * Index:
- * - Associated Button Variables
- * - Base button styling
- * – Button Modifiers
- * 	 – btn--primary
- *   – btn--block
- */
-/**
- * Define associated Button variables
- */
-/**
- * Base button styles – Based on csswizardry.com/beautons
- *
- * 1. Allow us to better style box model properties.
- * 2. Line different sized buttons up a little nicer.
- * 3. Stop buttons wrapping and looking broken.
- * 4. Make buttons inherit font styles.
- * 5. Force all elements using beautons to appear clickable.
- * 6. Normalise box model styles.
- * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
- *    there is 1em of space above and below that text. We therefore apply 1em
- *    of space to the left and right, as padding, to keep consistent spacing.
- * 8. Fixes odd inner spacing in IE7.
- * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
- *10. Prevents from inheriting default anchor styles.
- */
-.btn {
-  display: inline-block;
-  /* [1] */
-  vertical-align: middle;
-  /* [2] */
-  white-space: nowrap;
-  /* [3] */
-  font-family: inherit;
-  /* [4] */
-  font-size: 100%;
-  /* [4] */
-  cursor: pointer;
-  /* [5] */
-  border: none;
-  /* [6] */
-  margin: 0;
-  /* [6] */
-  padding-top: 0;
-  /* [6] */
-  padding-bottom: 0;
-  /* [6] */
-  line-height: 2.5;
-  /* [7] */
-  height: 2.5em;
-  /* [7] */
-  padding-right: 1.5em;
-  /* [7] */
-  padding-left: 1.5em;
-  /* [7] */
-  overflow: visible;
-  /* [8] */
-  text-align: center;
-  background-color: #95a5a6;
-  border-radius: 5px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-  .btn, .btn:link, .btn:visited {
-    color: #fff; }
-  .btn:hover, .btn:active, .btn:focus {
-    background-color: #798d8f; }
-  .btn, .btn:hover, .btn:active, .btn:focus, .btn:visited {
-    text-decoration: none; }
-  .btn:active, .btn:focus {
-    outline: none; }
-  .btn.disabled, .btn[disabled] {
-    cursor: default;
-    background-image: none;
-    opacity: .65; }
-
-.btn--primary {
-  background-color: #288ad6; }
-  .btn--primary, .btn--primary:link, .btn--primary:visited {
-    color: #fff; }
-  .btn--primary:hover, .btn--primary:active, .btn--primary:focus {
-    background-color: #206eab; }
-
-.btn--block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0; }
-  .btn--block + .btn--block {
-    margin-top: 10px; }
-
-input[type="submit"].btn--block,
-input[type="reset"].btn--block,
-input[type="button"].btn--block {
-  width: 100%; }
-
-/**
- * The Kickoff Grid
- * =================================
- * Default grid styles
- * Media queries
- * Centred columns
- */
-/* Import Grid helpers and mixins */
-/**
- * Kickoff grid helpers
- */
-/**
- * Grid columns width calcs
- */
-/**
- * Column width mixin
- * Usage:
- * @include column(2);
- */
-/**
- * Gutter calcs
- * Default: percent
- * Usage: gutterCalc() or gutterCalc(false)
- */
-/**
- * Column padding (gutter)
- * Default: percent (can be pixels though)
- * Usage: paddingCalc() or paddingCalc(px)
- */
-/**
- * Shunts, offset columns, column source order calculations
- */
-/**
- * Basic Usage:
- * =================================
-	<div class="g-row">
-		<div class="g-col g-span4"></div>
-		<div class="g-col g-span8"></div>
-	</div>
- */
-.g-row {
-  width: 100%;
-  margin: 0 auto; }
-  .g-row:after {
-    content: "";
-    display: table;
-    clear: both; }
-  .g-row .g-row {
-    min-width: 0; }
-    .g-row .g-row .g-col {
-      padding: 0; }
-
-@media screen and (min-width: 46.875em) {
-  .g-col {
-    float: left;
-    min-height: 1px;
-    position: relative;
-    clear: none;
-    box-sizing: border-box;
-    margin-left: 2%; }
-    .g-col:first-child {
-      margin-left: 0; }
-    .g-col + .g-col:last-child {
-      float: right; }
-    .g-col + .g-col.end {
-      float: left; } }
-
-@media screen and (min-width: 46.875em) {
-  .g-span1 {
-    width: 6.5%; }
-  .g-span2 {
-    width: 15%; }
-  .g-span3 {
-    width: 23.5%; }
-  .g-span4 {
-    width: 32%; }
-  .g-span5 {
-    width: 40.5%; }
-  .g-span6 {
-    width: 49%; }
-  .g-span7 {
-    width: 57.5%; }
-  .g-span8 {
-    width: 66%; }
-  .g-span9 {
-    width: 74.5%; }
-  .g-span10 {
-    width: 83%; }
-  .g-span11 {
-    width: 91.5%; }
-  .g-span12 {
-    width: 100%; }
-  /**
-	 * Offset columns
-	 * http://trykickoff.github.io/demos/grids.html#offset
-	 */
-  /**
-	 * Source ordering (push & pull)
-	 * http://trykickoff.github.io/demos/grids.html#source-ordering
-	 */ }
-
-/**
- * Centred columns
- */
-.g-col.g-col--centered,
-.g-col.g-col--centred {
-  float: none;
-  margin: 0 auto; }
-
-/**
- * Block grids
- * These are suited for repeating blocks of content. See below for usage
- *
- * Usage:
- * <ul class="l-blockGrid l-blockGrid--3">
- *     <li class="l-blockGrid-item"></li>
- * </ul>
- *
- * <div class="l-blockGrid l-blockGrid--4 l-blockGrid--2--narrow l-blockGrid--6--wide">
- *     <div class="l-blockGrid-item"></div>
- * </div>
- */
-/**
- * Block grid breakpoints
- * Add or remove any breakpoints that you may or may not need.
- * Note: Reorder these if your breakpoints aren't in this order, 
- * should be smallest to largest.
- */
-/**
- * Generate block grids based on colum count
- */
-.l-blockGrid {
-  display: block;
-  list-style-type: none;
-  margin: 0; }
-  .l-blockGrid:after {
-    content: "";
-    display: table;
-    clear: both; }
-
-.l-blockGrid-item {
-  display: block;
-  height: auto; }
-
-@media screen and (min-width: 25em) {
-  .l-blockGrid--1--narrow .l-blockGrid-item {
-    float: left;
-    width: 100%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--1--narrow .l-blockGrid-item:nth-of-type(1n + 1) {
-      clear: left; }
-    .l-blockGrid--1--narrow .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
-      clear: none; }
-  .l-blockGrid--2--narrow .l-blockGrid-item {
-    float: left;
-    width: 50%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--2--narrow .l-blockGrid-item:nth-of-type(2n + 1) {
-      clear: left; }
-    .l-blockGrid--2--narrow .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
-      clear: none; }
-  .l-blockGrid--3--narrow .l-blockGrid-item {
-    float: left;
-    width: 33.3333333333%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--3--narrow .l-blockGrid-item:nth-of-type(3n + 1) {
-      clear: left; }
-    .l-blockGrid--3--narrow .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
-      clear: none; }
-  .l-blockGrid--4--narrow .l-blockGrid-item {
-    float: left;
-    width: 25%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--4--narrow .l-blockGrid-item:nth-of-type(4n + 1) {
-      clear: left; }
-    .l-blockGrid--4--narrow .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
-      clear: none; }
-  .l-blockGrid--5--narrow .l-blockGrid-item {
-    float: left;
-    width: 20%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--5--narrow .l-blockGrid-item:nth-of-type(5n + 1) {
-      clear: left; }
-    .l-blockGrid--5--narrow .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
-      clear: none; }
-  .l-blockGrid--6--narrow .l-blockGrid-item {
-    float: left;
-    width: 16.6666666667%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--6--narrow .l-blockGrid-item:nth-of-type(6n + 1) {
-      clear: left; }
-    .l-blockGrid--6--narrow .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
-      clear: none; }
-  .l-blockGrid--7--narrow .l-blockGrid-item {
-    float: left;
-    width: 14.2857142857%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--7--narrow .l-blockGrid-item:nth-of-type(7n + 1) {
-      clear: left; }
-    .l-blockGrid--7--narrow .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
-      clear: none; }
-  .l-blockGrid--8--narrow .l-blockGrid-item {
-    float: left;
-    width: 12.5%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--8--narrow .l-blockGrid-item:nth-of-type(8n + 1) {
-      clear: left; }
-    .l-blockGrid--8--narrow .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
-      clear: none; }
-  .l-blockGrid--9--narrow .l-blockGrid-item {
-    float: left;
-    width: 11.1111111111%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--9--narrow .l-blockGrid-item:nth-of-type(9n + 1) {
-      clear: left; }
-    .l-blockGrid--9--narrow .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
-      clear: none; }
-  .l-blockGrid--10--narrow .l-blockGrid-item {
-    float: left;
-    width: 10%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--10--narrow .l-blockGrid-item:nth-of-type(10n + 1) {
-      clear: left; }
-    .l-blockGrid--10--narrow .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
-      clear: none; }
-  .l-blockGrid--11--narrow .l-blockGrid-item {
-    float: left;
-    width: 9.0909090909%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--11--narrow .l-blockGrid-item:nth-of-type(11n + 1) {
-      clear: left; }
-    .l-blockGrid--11--narrow .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
-      clear: none; }
-  .l-blockGrid--12--narrow .l-blockGrid-item {
-    float: left;
-    width: 8.3333333333%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--12--narrow .l-blockGrid-item:nth-of-type(12n + 1) {
-      clear: left; }
-    .l-blockGrid--12--narrow .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
-      clear: none; } }
-
-@media screen and (min-width: 46.875em) {
-  .l-blockGrid--1 .l-blockGrid-item {
-    float: left;
-    width: 100%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--1 .l-blockGrid-item:nth-of-type(1n + 1) {
-      clear: left; }
-    .l-blockGrid--1 .l-blockGrid-item:not(:nth-of-type(1n + 1)) {
-      clear: none; }
-  .l-blockGrid--2 .l-blockGrid-item {
-    float: left;
-    width: 50%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--2 .l-blockGrid-item:nth-of-type(2n + 1) {
-      clear: left; }
-    .l-blockGrid--2 .l-blockGrid-item:not(:nth-of-type(2n + 1)) {
-      clear: none; }
-  .l-blockGrid--3 .l-blockGrid-item {
-    float: left;
-    width: 33.3333333333%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--3 .l-blockGrid-item:nth-of-type(3n + 1) {
-      clear: left; }
-    .l-blockGrid--3 .l-blockGrid-item:not(:nth-of-type(3n + 1)) {
-      clear: none; }
-  .l-blockGrid--4 .l-blockGrid-item {
-    float: left;
-    width: 25%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--4 .l-blockGrid-item:nth-of-type(4n + 1) {
-      clear: left; }
-    .l-blockGrid--4 .l-blockGrid-item:not(:nth-of-type(4n + 1)) {
-      clear: none; }
-  .l-blockGrid--5 .l-blockGrid-item {
-    float: left;
-    width: 20%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--5 .l-blockGrid-item:nth-of-type(5n + 1) {
-      clear: left; }
-    .l-blockGrid--5 .l-blockGrid-item:not(:nth-of-type(5n + 1)) {
-      clear: none; }
-  .l-blockGrid--6 .l-blockGrid-item {
-    float: left;
-    width: 16.6666666667%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--6 .l-blockGrid-item:nth-of-type(6n + 1) {
-      clear: left; }
-    .l-blockGrid--6 .l-blockGrid-item:not(:nth-of-type(6n + 1)) {
-      clear: none; }
-  .l-blockGrid--7 .l-blockGrid-item {
-    float: left;
-    width: 14.2857142857%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--7 .l-blockGrid-item:nth-of-type(7n + 1) {
-      clear: left; }
-    .l-blockGrid--7 .l-blockGrid-item:not(:nth-of-type(7n + 1)) {
-      clear: none; }
-  .l-blockGrid--8 .l-blockGrid-item {
-    float: left;
-    width: 12.5%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--8 .l-blockGrid-item:nth-of-type(8n + 1) {
-      clear: left; }
-    .l-blockGrid--8 .l-blockGrid-item:not(:nth-of-type(8n + 1)) {
-      clear: none; }
-  .l-blockGrid--9 .l-blockGrid-item {
-    float: left;
-    width: 11.1111111111%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--9 .l-blockGrid-item:nth-of-type(9n + 1) {
-      clear: left; }
-    .l-blockGrid--9 .l-blockGrid-item:not(:nth-of-type(9n + 1)) {
-      clear: none; }
-  .l-blockGrid--10 .l-blockGrid-item {
-    float: left;
-    width: 10%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--10 .l-blockGrid-item:nth-of-type(10n + 1) {
-      clear: left; }
-    .l-blockGrid--10 .l-blockGrid-item:not(:nth-of-type(10n + 1)) {
-      clear: none; }
-  .l-blockGrid--11 .l-blockGrid-item {
-    float: left;
-    width: 9.0909090909%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--11 .l-blockGrid-item:nth-of-type(11n + 1) {
-      clear: left; }
-    .l-blockGrid--11 .l-blockGrid-item:not(:nth-of-type(11n + 1)) {
-      clear: none; }
-  .l-blockGrid--12 .l-blockGrid-item {
-    float: left;
-    width: 8.3333333333%;
-    /**
-				 * Clear incase of height difference of block items.
-				 * Note: Remove these if all your items are the same height.
-				 */ }
-    .l-blockGrid--12 .l-blockGrid-item:nth-of-type(12n + 1) {
-      clear: left; }
-    .l-blockGrid--12 .l-blockGrid-item:not(:nth-of-type(12n + 1)) {
-      clear: none; } }
-
-/**
- * Guttered block grid mutator
- */
-.l-blockGrid--guttered {
-  margin-left: -20px; }
-  .l-blockGrid--guttered .l-blockGrid-item {
-    padding-left: 20px;
-    padding-bottom: 20px; }
-
-/**
- * Lists
- * - (Un)ordered lists
- * - Unstyled lists
- * - Definition lists
- * - Centred lists
- * - Floated lists
- */
-ul {
-  list-style-type: disc; }
-
-ol {
-  list-style-type: decimal; }
-
-ul, ol {
-  padding: 0;
-  margin: 0 0 28px 28px; }
-  ul ul,
-  ul ol, ol ul,
-  ol ol {
-    margin-left: 56px; }
-  ul ul, ol ul {
-    list-style-type: circle; }
-    ul ul ul, ol ul ul {
-      list-style-type: square; }
-  ul ol, ol ol {
-    list-style-type: upper-roman; }
-    ul ol ol, ol ol ol {
-      list-style-type: lower-roman; }
-  ul ul, ul ol, ol ul, ol ol {
-    margin-bottom: 0; }
-
-/**
- * Unstyled lists
- */
-.unstyled {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  list-style-image: none; }
-
-/**
- * Definition lists
- */
-dl {
-  margin-bottom: 28px; }
-
-dt {
-  font-weight: bold; }
-
-dd {
-  margin-left: 28px; }
-
-/**
- * Centred lists
- *
- * Usage:
-	<ul class="l-list--centred">
-		<li></li>
-	</ul>
- */
-.l-list--centred, .l-list--centered {
-  text-align: center; }
-  .l-list--centred li, .l-list--centered li {
-    display: inline; }
-
-/**
- * Floated lists
- * Usage:
-	<ul class="l-list--floated">
-		<li></li>
-	</ul>
- */
-.l-list--floated:after {
-  content: "";
-  display: table;
-  clear: both; }
-
-.l-list--floated li {
-  float: left;
-  display: inline-block; }
-
-/**
- * Embedded content
- */
-img {
-  font-style: italic;
-  color: #c00;
-  border: 0;
-  -ms-interpolation-mode: bicubic; }
-  img.img--left {
-    margin: 0 20px 0 0; }
-  img.img--right {
-    margin: 0 0 0 20px; }
-
-svg:not(:root) {
-  overflow: hidden; }
-
-img, object, embed, video {
-  max-width: 100%; }
-
-/**
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-  vertical-align: middle; }
-
-/**
- * Media Object
- *
- * Place any image- and text-like content side-by-side, as per:
- * http://csswizardry.com/2013/05/the-flag-object/
- *
- * +---------+
- * |         | ~~~~ ~~~~~~~~~~~
- * |         | ~~~~~~~ ~~~~~ ~~
- * |         | ~~~~~~~~~~~~
- * +---------+
- *
- * Markup:
-	<div class="media">
-		<div class="media-img">
-			<img src="http://placekitten.com/100/100">
-		</div>
-		<div class="media-body">
-			<p>Lorem ipsum dolor sit amet.</p>
-		</div>
-	</div>
- */
-.media {
-  display: table;
-  width: 100%; }
-
-.media-img,
-.media-body {
-  display: table-cell;
-  vertical-align: middle; }
-  .media--top .media-img, .media--top
-  .media-body {
-    vertical-align: top; }
-  .media--bottom .media-img, .media--bottom
-  .media-body {
-    vertical-align: bottom; }
-
-.media-body {
-  width: 100%; }
-
-.media-img {
-  padding-right: 10px; }
-  .media-img > img {
-    display: block;
-    max-width: none; }
-  .media--rev .media-img {
-    padding-right: 0;
-    padding-left: 10px; }
-
-@media screen and (max-width: 46.875em) {
-  .media--stackOnSkinny .media-img,
-  .media--stackOnSkinny .media-body {
-    display: block; } }
-
-@media screen and (min-width: 46.875em) {
-  .media--stackOnWide .media-img,
-  .media--stackOnWide .media-body {
-    display: block; } }
-
-/**
- * Fluid width video
- * - 16:9 aspect ratio by default
- * Usage:
- * <div class="fluidVideo"><iframe src="..."/></div>
- */
-.fluidVideo {
-  position: relative;
-  padding-bottom: 56.25%;
-  /* 16:9 */
-  height: 0; }
-  .fluidVideo iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%; }
-
-/**
- * Tables
- * =================================
- * Index:
- * - Associated Table Variables
- * - Default table Styles
- * – Table modifiers:
- *   - .table--condensed
- *   - .table--bordered
- *   - .table--rounded
- *   - .table--striped
- *   – .table--hover
- * – .responsiveTable
- */
-/**
- * Define associated Table variables
- */
-/**
- * Customizes the `.table` component with basic values, each used across all table variations.
- */
-table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 28px;
-  border-spacing: 0;
-  border: 2px solid #ccc;
-  background-color: #f1f1f1; }
-  table th,
-  table td {
-    padding: 8px;
-    line-height: 28px;
-    vertical-align: top;
-    border: 1px solid #ccc; }
-    table th:first-child,
-    table td:first-child {
-      border-left: 0; }
-    table th:last-child,
-    table td:last-child {
-      border-right: 0; }
-  table > thead th,
-  table > thead td {
-    vertical-align: bottom;
-    border-bottom: 2px solid #ccc; }
-  table > tfoot td {
-    border-top: 2px solid #ccc;
-    border-bottom: 0; }
-  table > thead:first-child > tr:first-child > th,
-  table > thead:first-child > tr:first-child > td {
-    border-top: 0; }
-  table tr:hover td, table tr:hover th {
-    background-color: inherit; }
-  table > tbody + tbody {
-    border-top: 2px solid #ccc; }
-  table table,
-  table .table {
-    background-color: #f1f1f1; }
-
-th {
-  text-align: left; }
-
-/**
- * Zebra-striping
- * Default zebra-stripe styles (alternating gray and transparent backgrounds)
- */
-.table--striped tbody :nth-child(odd) th,
-.table--striped tbody :nth-child(odd) td {
-  background-color: #f9f9f9 !important; }
-
-/**
- * Responsive tables
- * Wrap your tables in `.responsiveTable` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
- *
- * If you need more responsive tables, consider Tablesaw by the Filament Group:
- * https://github.com/filamentgroup/tablesaw
- */
-@media screen and (max-width: 46.875em) {
-  .responsiveTable {
-    width: 100%;
-    margin-bottom: 21px;
-    overflow-y: hidden;
-    overflow-x: auto;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid #ccc;
-    -webkit-overflow-scrolling: touch; }
-    .responsiveTable > table {
-      margin-bottom: 0;
-      border: 0; }
-      .responsiveTable > table > thead th,
-      .responsiveTable > table > thead td,
-      .responsiveTable > table > tbody th,
-      .responsiveTable > table > tbody td,
-      .responsiveTable > table > tfoot th,
-      .responsiveTable > table > tfoot td {
-        white-space: nowrap; }
-        .responsiveTable > table > thead th:first-child,
-        .responsiveTable > table > thead td:first-child,
-        .responsiveTable > table > tbody th:first-child,
-        .responsiveTable > table > tbody td:first-child,
-        .responsiveTable > table > tfoot th:first-child,
-        .responsiveTable > table > tfoot td:first-child {
-          border-left: 0; }
-        .responsiveTable > table > thead th:last-child,
-        .responsiveTable > table > thead td:last-child,
-        .responsiveTable > table > tbody th:last-child,
-        .responsiveTable > table > tbody td:last-child,
-        .responsiveTable > table > tfoot th:last-child,
-        .responsiveTable > table > tfoot td:last-child {
-          border-right: 0; }
-      .responsiveTable > table > tbody > th,
-      .responsiveTable > table > tbody > td,
-      .responsiveTable > table > tfoot tr:last-child > th,
-      .responsiveTable > table > tfoot tr:last-child > td {
-        border-bottom: 0; } }
-
-/**
- * Preformatted code
- * Code typography styles for the <code> and <pre> elements
- */
-/**
- * Define associated Code variables
- */
-code,
-pre {
-  padding: 0 3px 2px;
-  font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 16px;
-  font-size: 0.8rem;
-  color: #444;
-  border-radius: 3px;
-  -moz-tab-size: 3;
-    -o-tab-size: 3;
-       tab-size: 3; }
-
-code {
-  padding: 2px 4px;
-  color: #444;
-  background-color: #ddd; }
-
-pre {
-  display: block;
-  padding: 14px;
-  margin: 0 0 28px;
-  color: #444;
-  background-color: #ddd;
-  border-radius: 4px;
-  white-space: pre; }
-  pre code {
-    padding: 0;
-    color: #444;
-    background-color: #ddd;
-    border: 0; }
-
-.pre--scrollable {
-  max-height: 340px;
-  overflow-y: scroll; }
-
-/**
- * Skip to main content link
- * <div class="skipToContent"><a href="#mainContent" class="btn btn--primary">Skip to main content</a></div>
- */
-.skipToContent {
-  position: relative;
-  text-align: center;
-  height: 0; }
-  .skipToContent a {
-    position: relative;
-    top: -100px;
-    z-index: 100;
-    background-color: #fff;
-    -webkit-transition: all 100ms ease-in-out;
-            transition: all 100ms ease-in-out; }
-    .skipToContent a:focus {
-      top: 5px; }
-
-/**
- * Your app styles
- */
-/**
- * Global app/site styles
- */
-body {
-  background-color: #f1f1f1; }
-
-/**
- * Default layout container
- */
-.l-container {
-  padding-left: 0px;
-  padding-right: 0px;
-  width: 95%;
-  max-width: 1000px;
-  margin: 0 auto; }
-  .lt-ie9 .l-container {
-    min-width: 1000px; }
-
-.browserupgrade {
-  margin: .2em 0;
-  background: #ccc;
-  color: #000;
-  padding: .2em 0; }
-
-/**
- * Views
- */
-/* Helper/utility classes */
-/**
- * Utilities
- * Non-semantic helper classes
- */
-/**
- * Clearfix
- * http://www.cssmojo.com/latest_new_clearfix_so_far/
- * See mixins/_utility.scss for a mixin version of this
- */
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both; }
-
-.ir {
-  background-color: transparent;
-  background-repeat: no-repeat;
-  border: 0;
-  direction: ltr;
-  display: block;
-  overflow: hidden;
-  text-align: left;
-  text-indent: -999em; }
-  .ir br {
-    display: none; }
-
-.is-hidden {
-  display: none !important;
-  visibility: hidden !important; }
-
-.is-shown {
-  display: block; }
-
-.is-visuallyHidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-  .is-visuallyHidden.focusable:active, .is-visuallyHidden.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto; }
-
-.is-invisible {
-  visibility: hidden; }
-
-.l-floatLeft {
-  float: left; }
-
-.l-floatRight {
-  float: right; }
-
-.l-clear {
-  clear: both;
-  float: none; }
-
-.l-mb0 {
-  margin-bottom: 0 !important; }
-
-.l-mt0 {
-  margin-top: 0 !important; }
-
-/**
- * Responsive Utilities
- */
-* {
-  -webkit-tap-highlight-color: #181830 !important; }
-
-/* A hack for HTML5 contenteditable attribute on mobile */
-textarea[contenteditable] {
-  -webkit-appearance: none; }
-
-.promote-layer {
-  /*
-  This may promote the layer to a composited
-  layer.
-
-  Replace with will-change when available
-
-  #perfmatters
-  */
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden; }
-
-.transition {
-  -webkit-transition: all 100ms ease-in-out;
-          transition: all 100ms ease-in-out; }
-
-/* Print styles */
-/**
- * Print styles
- */
-@media print {
-  *,
-  *:before,
-  *:after,
-  *:first-letter,
-  *:first-line {
-    background: transparent !important;
-    color: #000 !important;
-    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
-    box-shadow: none !important;
-    text-shadow: none !important; }
-  a:visited {
-    text-decoration: underline; }
-  a[href]:after {
-    content: " (" attr(href) ")"; }
-  abbr[title]:after {
-    content: " (" attr(title) ")"; }
-  /*
-	 * Don't show links for images, or javascript/internal links
-	 */
-  .ir a:after,
-  a[href^="javascript:"]:after,
-  a[href^="#"]:after {
-    content: ""; }
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid; }
-  thead {
-    display: table-header-group;
-    /* h5bp.com/t */ }
-  tr,
-  img {
-    page-break-inside: avoid; }
-  img {
-    max-width: 100% !important; }
-  @page {
-    margin: .5cm; }
-  p, h2, h3 {
-    orphans: 3;
-    widows: 3; }
-  h2, h3 {
-    page-break-after: avoid; } }
+html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}img{border:0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{font-size:18px;-webkit-text-size-adjust:100%}@media screen and (min-width:46.875em){html{font-size:20px}}body{line-height:1.4;color:#444;-webkit-font-feature-settings:"liga","dlig";font-feature-settings:"liga","dlig"}body,p{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:20px;font-size:1rem}p{margin-top:0;margin-bottom:28px}h1,h2,h3,h4,h5,h6{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.1;text-rendering:optimizelegibility;margin-top:0;margin-bottom:28px}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:400}.alpha,.h1,h1{font-size:40px;font-size:2rem;margin-bottom:56px}.beta,.h2,h2{font-size:32px;font-size:1.6rem}.gamma,.h3,h3{font-size:25px;font-size:1.25rem}.delta,.h4,h4{font-size:20px;font-size:1rem}.epsilon,.h5,.h6,.zeta,h5,h6{font-size:16px;font-size:.8rem;margin-bottom:0}*+.alpha,*+.beta,*+.delta,*+.gamma,*+.h1,*+.h2,*+.h3,*+.h4,*+h1,*+h2,*+h3,*+h4{margin-top:28px}small{font-size:80%}b,strong{font-weight:700}em,i{font-style:italic}abbr[title]{border-bottom:1px dotted #ddd;cursor:help}blockquote{padding-left:10px;margin:28px;border-left:4px solid #ccc}blockquote p{margin-bottom:0;font-size:20px;font-size:1rem;font-weight:300}blockquote small{display:block;color:#b3b3b3}blockquote small:before{content:'\2014 \00A0'}blockquote:after,blockquote:before,q:after,q:before{content:""}cite{font-style:normal}dfn{font-style:italic}mark{background:#feef6d;padding:2px 4px;border-radius:3px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}samp{font-family:Menlo,Monaco,Courier New,monospace}.text-center,.text-centre{text-align:center}.text-left{text-align:left}.text-right{text-align:right}::-moz-selection{color:#fff;background:#181830;text-shadow:none}::selection{color:#fff;background:#181830;text-shadow:none}hr{margin:28px 0;border:0;border-top:1px solid #b3b3b3;border-bottom:1px solid #fff}.form{margin:0 0 28px}.form-fieldset{padding:0;margin:0;border:0}.form-legend{display:block;width:100%;padding:0;margin-bottom:28px;font-size:25px;font-size:1.25rem;line-height:1.4;color:#444;border:0;border-bottom:1px solid #eee;white-space:normal}.form-legend small{font-size:16px;font-size:.8rem;color:#b3b3b3}.form-controlGroup{margin-top:14px;margin-bottom:14px;list-style-type:none}.form-legend+.form-controlGroup{margin-top:28px;-webkit-margin-top-collapse:separate}.form-label{display:block;color:#444;font-weight:700}.form-label small{font-weight:400;color:#919191}.form-input{display:block;width:100%;height:2.5em;padding:.5em;font-size:20px;font-size:1rem;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.4;color:#444;font-weight:400;vertical-align:baseline;background-color:#fff;border:2px solid #ccc;border-radius:5px;background-clip:padding-box;-webkit-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.form-input:focus{border-color:#181830;outline:0;outline:thin dotted\9}.form-input[type=checkbox],.form-input[type=image],.form-input[type=radio],.form-input[type=range]{width:auto;height:auto;padding:0;margin:3px 0;line-height:normal;cursor:pointer;border-radius:0;box-sizing:border-box}.form-input[type=image]{border:0}.form-input[type=file]{width:auto;height:28px;padding:initial;line-height:initial;border:initial;background-color:#fff;background-color:initial}.form-input[type=hidden]{display:none}.form-input[type=color]{width:40px;height:40px;overflow:hidden;padding:2px}.form-input[type=password]{font-family:sans-serif}.form-input[type=range]{width:100%}.form-input>.checkbox:first-child,.form-input>.radio:first-child{padding-top:5px}.form-input[disabled],.form-input[readonly]{background-color:#e6e6e6;border-color:#ccc;cursor:not-allowed}.form-input--textarea{height:auto;resize:vertical}.form-input--textarea--uneditable{width:auto;height:auto}.form-input--select{background-color:#fff}.form-input--select[multiple],.form-input--select[size]{height:auto}.form-input-file{display:inline-block;width:100%;font-size:20px;font-size:1rem;margin:0;vertical-align:middle;line-height:1em}.form-input-file:focus{outline:none}button,input[type=button],input[type=reset],input[type=submit]{width:auto;cursor:pointer;-webkit-appearance:button}.control{display:block}.control input[type=checkbox],.control input[type=radio]{vertical-align:middle;margin-right:.5em;margin-top:-.1em;display:inline;line-height:normal}.control--inline{display:inline-block;vertical-align:middle;margin-right:1.5em}.form-input--search{padding-left:14px;padding-right:14px;margin-bottom:0;border-radius:100px}.form-actions{padding:28px 20px;margin-top:28px;margin-bottom:28px;background-color:#f5f5f5;border-top:1px solid #ddd}.form-actions .btn{margin-right:10px}.form-actions .btn:last-child{margin-right:0}.form-controlGroup .form-message{display:none;padding-top:.5em;padding-left:.5em}.form-actions .form-message{padding:.5em}.form-controlGroup.has-warning .form-label,.has-warning{color:#f4aa47}.form-controlGroup.has-warning .form-input{color:#f4aa47;border-color:#f4aa47}.form-controlGroup.has-warning .form-input:focus{border-color:#f19417}.form-controlGroup.has-warning .form-message{display:block;color:#f4aa47}.form-controlGroup.has-error .form-label,.has-error{color:#b94a4d}.form-controlGroup.has-error .form-input{color:#b94a4d;border-color:#b94a4d}.form-controlGroup.has-error .form-input:focus{border-color:#963a3c}.form-controlGroup.has-error .form-message{display:block;color:#b94a4d}.form-controlGroup.has-success .form-label,.has-success{color:#16c98d}.form-controlGroup.has-success .form-input{color:#16c98d;border-color:#16c98d}.form-controlGroup.has-success .form-input:focus{border-color:#119b6d}.form-controlGroup.has-success .form-message{display:block;color:#16c98d}.form-controlGroup.has-info .form-label,.has-info{color:#288ad6}.form-controlGroup.has-info .form-input{color:#288ad6;border-color:#288ad6}.form-controlGroup.has-info .form-input:focus{border-color:#206eab}.form-controlGroup.has-info .form-message{display:block;color:#288ad6}:-ms-input-placeholder{color:#b3b3b3}:-moz-placeholder{color:#b3b3b3}::-webkit-input-placeholder{color:#b3b3b3}@media screen and (min-width:46.875em){.form--horizontal .form-controlGroup{margin-bottom:28px}.form--horizontal .form-controlGroup:after{content:"";display:table;clear:both}.form--horizontal .form-controlGroup .form-input--fileWrapper{margin-left:0}.form--horizontal .form-label{float:left;width:140px;padding-top:5px;text-align:right}.form--horizontal .form-controlGroup-inputWrapper{margin-left:160px}.form--horizontal .form-controlGroup-inputWrapper:first-child{padding-left:160px}.form--horizontal .form-helpBlock{margin-top:14px;margin-bottom:0}.form--horizontal .form-actions{padding-left:160px}}.control--custom{position:relative;display:block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.control--custom--inline{display:inline-block;padding-right:2em}.control--custom-input{position:absolute;opacity:0;z-index:-1}.control-indicator{position:relative;display:inline-block;width:1em;height:1em;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out;border:.1em solid #181830;background-color:#181830;vertical-align:middle;margin-top:-.2em;box-shadow:0 0 0 2px transparent,0 0 0 0 transparent}.control--custom-input:focus~.control-indicator{box-shadow:0 0 0 2px #f1f1f1,0 0 0 3px #181830}.control-indicator--checkbox,.control-indicator--tickbox{border-radius:.2em}.control-indicator--checkbox:after,.control-indicator--checkbox:before,.control-indicator--tickbox:after,.control-indicator--tickbox:before{content:'';position:absolute;top:50%;left:50%;width:90%;display:block;opacity:0;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.control-indicator--checkbox:after,.control-indicator--checkbox:before{top:50%;width:90%;height:.1em;background-color:#f1f1f1}.control-indicator--checkbox:before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.control-indicator--checkbox:after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.control-indicator--tickbox:before{top:0;-webkit-transform:translateX(-50%) rotate(45deg);-ms-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);border:.1em solid #f1f1f1;background-color:transparent;width:40%;height:80%;border-top:0;border-left:0}.control-indicator--tickbox:after{display:none}.control--custom-input:checked~.control-indicator--checkbox:after,.control--custom-input:checked~.control-indicator--checkbox:before,.control--custom-input:checked~.control-indicator--tickbox:after,.control--custom-input:checked~.control-indicator--tickbox:before{opacity:1}.control-indicator--radio{border-radius:50%}.control--custom-input:checked~.control-indicator--radio{background-color:#f1f1f1;border:.3em solid #181830}.form-controlGroup-inputWrapper--select{position:relative;display:block;padding:0}.form-controlGroup-inputWrapper--select:after{color:#181830;content:"\25BC";font-size:.7em;padding:0;position:absolute;right:1.2em;top:50%;margin-top:-9px;z-index:1;-ms-pointer-events:none;pointer-events:none;background:url(#)}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.form-controlGroup-inputWrapper--select:after{display:none}}.form-controlGroup-inputWrapper--select .form-input--select{-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.form-controlGroup-inputWrapper--select .form-input--select:focus::-ms-value{background:transparent;color:#222}}option{font-weight:400}[class*=" icon-"],[class^=icon-]{speak:none;background-size:contain;background-position:center center;background-repeat:no-repeat}.icon-large{display:block;width:120px;height:120px}.icon-small{display:inline-block;width:25px;height:25px;vertical-align:top}a{-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}a,a:link,a:visited{color:#288ad6;text-decoration:none}a:active,a:focus,a:hover{color:#185380}.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:none;margin:0;line-height:2.5;height:2.5em;padding:0 1.5em;overflow:visible;text-align:center;background-color:#95a5a6;border-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn,.btn:link,.btn:visited{color:#fff}.btn:active,.btn:focus,.btn:hover{background-color:#798d8f}.btn,.btn:active,.btn:focus,.btn:hover,.btn:visited{text-decoration:none}.btn:active,.btn:focus{outline:none}.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:.65}.btn--primary{background-color:#288ad6}.btn--primary,.btn--primary:link,.btn--primary:visited{color:#fff}.btn--primary:active,.btn--primary:focus,.btn--primary:hover{background-color:#206eab}.btn--block{display:block;width:100%;padding-left:0;padding-right:0}.btn--block+.btn--block{margin-top:10px}.g-row,input[type=button].btn--block,input[type=reset].btn--block,input[type=submit].btn--block{width:100%}.g-row{margin:0 auto}.g-row:after{content:"";display:table;clear:both}.g-row .g-row{min-width:0}.g-row .g-row .g-col{padding:0}@media screen and (min-width:46.875em){.g-col{float:left;min-height:1px;position:relative;clear:none;box-sizing:border-box;margin-left:2%}.g-col:first-child{margin-left:0}.g-col+.g-col:last-child{float:right}.g-col+.g-col.end{float:left}}@media screen and (min-width:46.875em){.g-span1{width:6.5%}.g-span2{width:15%}.g-span3{width:23.5%}.g-span4{width:32%}.g-span5{width:40.5%}.g-span6{width:49%}.g-span7{width:57.5%}.g-span8{width:66%}.g-span9{width:74.5%}.g-span10{width:83%}.g-span11{width:91.5%}.g-span12{width:100%}}.g-col.g-col--centered,.g-col.g-col--centred{float:none;margin:0 auto}.l-blockGrid{display:block;list-style-type:none;margin:0}.l-blockGrid:after{content:"";display:table;clear:both}.l-blockGrid-item{display:block;height:auto}@media screen and (min-width:25em){.l-blockGrid--1--narrow .l-blockGrid-item{float:left;width:100%}.l-blockGrid--1--narrow .l-blockGrid-item:nth-of-type(1n+1){clear:left}.l-blockGrid--1--narrow .l-blockGrid-item:not(:nth-of-type(1n+1)){clear:none}.l-blockGrid--2--narrow .l-blockGrid-item{float:left;width:50%}.l-blockGrid--2--narrow .l-blockGrid-item:nth-of-type(2n+1){clear:left}.l-blockGrid--2--narrow .l-blockGrid-item:not(:nth-of-type(2n+1)){clear:none}.l-blockGrid--3--narrow .l-blockGrid-item{float:left;width:33.3333333333%}.l-blockGrid--3--narrow .l-blockGrid-item:nth-of-type(3n+1){clear:left}.l-blockGrid--3--narrow .l-blockGrid-item:not(:nth-of-type(3n+1)){clear:none}.l-blockGrid--4--narrow .l-blockGrid-item{float:left;width:25%}.l-blockGrid--4--narrow .l-blockGrid-item:nth-of-type(4n+1){clear:left}.l-blockGrid--4--narrow .l-blockGrid-item:not(:nth-of-type(4n+1)){clear:none}.l-blockGrid--5--narrow .l-blockGrid-item{float:left;width:20%}.l-blockGrid--5--narrow .l-blockGrid-item:nth-of-type(5n+1){clear:left}.l-blockGrid--5--narrow .l-blockGrid-item:not(:nth-of-type(5n+1)){clear:none}.l-blockGrid--6--narrow .l-blockGrid-item{float:left;width:16.6666666667%}.l-blockGrid--6--narrow .l-blockGrid-item:nth-of-type(6n+1){clear:left}.l-blockGrid--6--narrow .l-blockGrid-item:not(:nth-of-type(6n+1)){clear:none}.l-blockGrid--7--narrow .l-blockGrid-item{float:left;width:14.2857142857%}.l-blockGrid--7--narrow .l-blockGrid-item:nth-of-type(7n+1){clear:left}.l-blockGrid--7--narrow .l-blockGrid-item:not(:nth-of-type(7n+1)){clear:none}.l-blockGrid--8--narrow .l-blockGrid-item{float:left;width:12.5%}.l-blockGrid--8--narrow .l-blockGrid-item:nth-of-type(8n+1){clear:left}.l-blockGrid--8--narrow .l-blockGrid-item:not(:nth-of-type(8n+1)){clear:none}.l-blockGrid--9--narrow .l-blockGrid-item{float:left;width:11.1111111111%}.l-blockGrid--9--narrow .l-blockGrid-item:nth-of-type(9n+1){clear:left}.l-blockGrid--9--narrow .l-blockGrid-item:not(:nth-of-type(9n+1)){clear:none}.l-blockGrid--10--narrow .l-blockGrid-item{float:left;width:10%}.l-blockGrid--10--narrow .l-blockGrid-item:nth-of-type(10n+1){clear:left}.l-blockGrid--10--narrow .l-blockGrid-item:not(:nth-of-type(10n+1)){clear:none}.l-blockGrid--11--narrow .l-blockGrid-item{float:left;width:9.0909090909%}.l-blockGrid--11--narrow .l-blockGrid-item:nth-of-type(11n+1){clear:left}.l-blockGrid--11--narrow .l-blockGrid-item:not(:nth-of-type(11n+1)){clear:none}.l-blockGrid--12--narrow .l-blockGrid-item{float:left;width:8.3333333333%}.l-blockGrid--12--narrow .l-blockGrid-item:nth-of-type(12n+1){clear:left}.l-blockGrid--12--narrow .l-blockGrid-item:not(:nth-of-type(12n+1)){clear:none}}@media screen and (min-width:46.875em){.l-blockGrid--1 .l-blockGrid-item{float:left;width:100%}.l-blockGrid--1 .l-blockGrid-item:nth-of-type(1n+1){clear:left}.l-blockGrid--1 .l-blockGrid-item:not(:nth-of-type(1n+1)){clear:none}.l-blockGrid--2 .l-blockGrid-item{float:left;width:50%}.l-blockGrid--2 .l-blockGrid-item:nth-of-type(2n+1){clear:left}.l-blockGrid--2 .l-blockGrid-item:not(:nth-of-type(2n+1)){clear:none}.l-blockGrid--3 .l-blockGrid-item{float:left;width:33.3333333333%}.l-blockGrid--3 .l-blockGrid-item:nth-of-type(3n+1){clear:left}.l-blockGrid--3 .l-blockGrid-item:not(:nth-of-type(3n+1)){clear:none}.l-blockGrid--4 .l-blockGrid-item{float:left;width:25%}.l-blockGrid--4 .l-blockGrid-item:nth-of-type(4n+1){clear:left}.l-blockGrid--4 .l-blockGrid-item:not(:nth-of-type(4n+1)){clear:none}.l-blockGrid--5 .l-blockGrid-item{float:left;width:20%}.l-blockGrid--5 .l-blockGrid-item:nth-of-type(5n+1){clear:left}.l-blockGrid--5 .l-blockGrid-item:not(:nth-of-type(5n+1)){clear:none}.l-blockGrid--6 .l-blockGrid-item{float:left;width:16.6666666667%}.l-blockGrid--6 .l-blockGrid-item:nth-of-type(6n+1){clear:left}.l-blockGrid--6 .l-blockGrid-item:not(:nth-of-type(6n+1)){clear:none}.l-blockGrid--7 .l-blockGrid-item{float:left;width:14.2857142857%}.l-blockGrid--7 .l-blockGrid-item:nth-of-type(7n+1){clear:left}.l-blockGrid--7 .l-blockGrid-item:not(:nth-of-type(7n+1)){clear:none}.l-blockGrid--8 .l-blockGrid-item{float:left;width:12.5%}.l-blockGrid--8 .l-blockGrid-item:nth-of-type(8n+1){clear:left}.l-blockGrid--8 .l-blockGrid-item:not(:nth-of-type(8n+1)){clear:none}.l-blockGrid--9 .l-blockGrid-item{float:left;width:11.1111111111%}.l-blockGrid--9 .l-blockGrid-item:nth-of-type(9n+1){clear:left}.l-blockGrid--9 .l-blockGrid-item:not(:nth-of-type(9n+1)){clear:none}.l-blockGrid--10 .l-blockGrid-item{float:left;width:10%}.l-blockGrid--10 .l-blockGrid-item:nth-of-type(10n+1){clear:left}.l-blockGrid--10 .l-blockGrid-item:not(:nth-of-type(10n+1)){clear:none}.l-blockGrid--11 .l-blockGrid-item{float:left;width:9.0909090909%}.l-blockGrid--11 .l-blockGrid-item:nth-of-type(11n+1){clear:left}.l-blockGrid--11 .l-blockGrid-item:not(:nth-of-type(11n+1)){clear:none}.l-blockGrid--12 .l-blockGrid-item{float:left;width:8.3333333333%}.l-blockGrid--12 .l-blockGrid-item:nth-of-type(12n+1){clear:left}.l-blockGrid--12 .l-blockGrid-item:not(:nth-of-type(12n+1)){clear:none}}.l-blockGrid--guttered{margin-left:-20px}.l-blockGrid--guttered .l-blockGrid-item{padding-left:20px;padding-bottom:20px}ul{list-style-type:disc}ol{list-style-type:decimal}ol,ul{padding:0;margin:0 0 28px 28px}ol ol,ol ul,ul ol,ul ul{margin-left:56px}ol ul,ul ul{list-style-type:circle}ol ul ul,ul ul ul{list-style-type:square}ol ol,ul ol{list-style-type:upper-roman}ol ol ol,ul ol ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.unstyled{margin:0;padding:0;list-style:none;list-style-image:none}dl{margin-bottom:28px}dt{font-weight:700}dd{margin-left:28px}.l-list--centered,.l-list--centred{text-align:center}.l-list--centered li,.l-list--centred li{display:inline}.l-list--floated:after{content:"";display:table;clear:both}.l-list--floated li{float:left;display:inline-block}img{font-style:italic;color:#c00;border:0;-ms-interpolation-mode:bicubic}img.img--left{margin:0 20px 0 0}img.img--right{margin:0 0 0 20px}svg:not(:root){overflow:hidden}embed,img,object,video{max-width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}.media{display:table;width:100%}.media-body,.media-img{display:table-cell;vertical-align:middle}.media--top .media-body,.media--top .media-img{vertical-align:top}.media--bottom .media-body,.media--bottom .media-img{vertical-align:bottom}.media-body{width:100%}.media-img{padding-right:10px}.media-img>img{display:block;max-width:none}.media--rev .media-img{padding-right:0;padding-left:10px}@media screen and (max-width:46.875em){.media--stackOnSkinny .media-body,.media--stackOnSkinny .media-img{display:block}}@media screen and (min-width:46.875em){.media--stackOnWide .media-body,.media--stackOnWide .media-img{display:block}}.fluidVideo{position:relative;padding-bottom:56.25%;height:0}.fluidVideo iframe{position:absolute;top:0;left:0;width:100%;height:100%}table{width:100%;max-width:100%;margin-bottom:28px;border-spacing:0;border:2px solid #ccc;background-color:#f1f1f1}table td,table th{padding:8px;line-height:28px;vertical-align:top;border:1px solid #ccc}table td:first-child,table th:first-child{border-left:0}table td:last-child,table th:last-child{border-right:0}table>thead td,table>thead th{vertical-align:bottom;border-bottom:2px solid #ccc}table>tfoot td{border-top:2px solid #ccc;border-bottom:0}table>thead:first-child>tr:first-child>td,table>thead:first-child>tr:first-child>th{border-top:0}table tr:hover td,table tr:hover th{background-color:inherit}table>tbody+tbody{border-top:2px solid #ccc}table .table,table table{background-color:#f1f1f1}th{text-align:left}.table--striped tbody :nth-child(odd) td,.table--striped tbody :nth-child(odd) th{background-color:#f9f9f9!important}@media screen and (max-width:46.875em){.responsiveTable{width:100%;margin-bottom:21px;overflow-y:hidden;overflow-x:auto;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ccc;-webkit-overflow-scrolling:touch}.responsiveTable>table{margin-bottom:0;border:0}.responsiveTable>table>tbody td,.responsiveTable>table>tbody th,.responsiveTable>table>tfoot td,.responsiveTable>table>tfoot th,.responsiveTable>table>thead td,.responsiveTable>table>thead th{white-space:nowrap}.responsiveTable>table>tbody td:first-child,.responsiveTable>table>tbody th:first-child,.responsiveTable>table>tfoot td:first-child,.responsiveTable>table>tfoot th:first-child,.responsiveTable>table>thead td:first-child,.responsiveTable>table>thead th:first-child{border-left:0}.responsiveTable>table>tbody td:last-child,.responsiveTable>table>tbody th:last-child,.responsiveTable>table>tfoot td:last-child,.responsiveTable>table>tfoot th:last-child,.responsiveTable>table>thead td:last-child,.responsiveTable>table>thead th:last-child{border-right:0}.responsiveTable>table>tbody>td,.responsiveTable>table>tbody>th,.responsiveTable>table>tfoot tr:last-child>td,.responsiveTable>table>tfoot tr:last-child>th{border-bottom:0}}code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,Courier New,monospace;font-size:16px;font-size:.8rem;color:#444;border-radius:3px;-moz-tab-size:3;-o-tab-size:3;tab-size:3}code{padding:2px 4px}code,pre{color:#444;background-color:#ddd}pre{display:block;padding:14px;margin:0 0 28px;border-radius:4px;white-space:pre}pre code{padding:0;color:#444;background-color:#ddd;border:0}.pre--scrollable{max-height:340px;overflow-y:scroll}.skipToContent{position:relative;text-align:center;height:0}.skipToContent a{position:relative;top:-100px;z-index:2;background-color:#fff;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.skipToContent a:focus{top:5px}body{background-color:#f1f1f1}.l-container{padding-left:0;padding-right:0;width:95%;max-width:1000px;margin:0 auto}.lt-ie9 .l-container{min-width:1000px}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.clearfix:after{content:"";display:table;clear:both}.ir{background-color:transparent;background-repeat:no-repeat;border:0;direction:ltr;display:block;overflow:hidden;text-align:left;text-indent:-999em}.ir br{display:none}.is-hidden{display:none!important;visibility:hidden!important}.is-shown{display:block}.is-visuallyHidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.is-visuallyHidden.focusable:active,.is-visuallyHidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.is-invisible{visibility:hidden}.l-floatLeft{float:left}.l-floatRight{float:right}.l-clear{clear:both;float:none}.l-mb0{margin-bottom:0!important}.l-mt0{margin-top:0!important}*{-webkit-tap-highlight-color:#181830!important}textarea[contenteditable]{-webkit-appearance:none}.promote-layer{-webkit-backface-visibility:hidden;backface-visibility:hidden}.transition{-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}@media print{*,:after,:before,:first-letter,:first-line{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
 /*# sourceMappingURL=kickoff.css.map */
\ No newline at end of file
diff --git a/assets/dist/css/styleguide.css b/assets/dist/css/styleguide.css
index 272a09a3..d786c9ae 100644
--- a/assets/dist/css/styleguide.css
+++ b/assets/dist/css/styleguide.css
@@ -1,387 +1,2 @@
-/**
- * Setup styleguide imports
- */
-/**
- * Sass Mixins
- * - Vendor prefixer
- * - Responsive
- * - CSS3
- * - Utility Mixins
- * - hiDpi
- * - Forms */
-/**
- * Vendor prefixer
- * Usage: @include prefixer(border-radius, $radii, webkit ms spec);
- */
-/**
- * Responsive media query mixins
- * - These are used so that we can define separate media-query content
- *   for <IE9 and browsers with support for media queries
- * - These are directly related to the global $fix-mqs var defined in
- *   kickoff-old-ie.scss
- * - kickoff-old-ie.scss ignores any content in media-queries with values less
- *   than the $fix-mqs var value
- */
-/**
- * Min-width media query:
- * - Equivalent to: @media screen and (min-width: 20em) { ... }
- * - Usage: @include respond-min(500) { ... };
- * - Argument is a pixel value WITHOUT a unit of measurement
- */
-/**
- * Max-width media query:
- * - Equivalent to: @media screen and (max-width: 20em) { ... }
- * - Usage: @include respond-max(500) { ... };
- * - Argument is a pixel value WITHOUT a unit of measurement
- */
-/**
- * Min-max-width media query:
- * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
- * - Usage: @include respond-min-max(500, 600) { ... };
- * - Arguments are pixel values WITHOUT a unit of measurement
- */
-/**
- * Old IE specific mixin
- * - Only use this content if we're dealing with old IE
- * - Usage: @include oldie() { ... }
- */
-/**
- * Linear Gradient
- * Usage: @include linear-gradient(#000, #BADA55, horizontal, true);
- */
-/**
- * Radial Gradient
- * Usage: @include radial-gradient(#000, #BADA55, true);
- */
-/**
- * vertical-center
- * Vertically center any element. Needs support for CSS tranforms.
- * Usage:
- * @include vertical-center;
- */
-/**
- * Utility mixins
- * Clearfix, REM + fallbacks,
- * @font-face, sizing shortcuts,
- * and other helpers
- */
-/**
- * Utility Mixins
- */
-/**
- * Typography mixins
- */
-/**
- *  HiDPI mixin.
- *  @include hidpi { ... };
- *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
- */
-/**
- * Hidpi with a minimum width media query
- * @include hidpi-min($bp-mid, 1.5) { ... };
- */
-/**
- * Hidpi with a max width media query
- * @include hidpi-max($bp-mid, 1.3) { ... };
- */
-/**
- * Global Color palette
- * - Generic colors
- * - Color scheme
- * - Common colors
- * - Links
- * - Text selection
- * - <hr>
- * - Any others..
- */
-/**
- * Variables
- * - Typography
- * - Breakpoints
- * - Paths
- * - Layout & Grid
- * - App-specific
- */
-/**
- * Typography
- *
- * Base sizes:
- * Set this in pixels (but do not add px),
- * the font-size mixin will convert to REMS
- */
-/**
- * Breakpoints
- * There are no common breakpoints so these are just a suggestions
- * You'll need to define your own breakpoints to suit your design
- */
-/**
- * Path vars
- */
-/**
- * Layout setup
- * Settings here override & affect the output in scss/partials/components/grid.scss
- */
-/**
- * App-specific variables
- */
-/**
- * Styleguide styles
- * Where possible, prefix all classnames with .sg
- */
-body {
-  background-color: #fff; }
-
-/**
- * Styleguide type styles
- */
-.sg-interfaceType, .sg-sectionHeading {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 300; }
-
-.sg-interfaceType--subtle {
-  color: #888; }
-
-.sg-sectionHeading {
-  color: #181830; }
-
-/**
- * Styleguide navigation style
- */
-/**
- * Styleguide .page styles
- */
-.sg-page {
-  overflow: hidden;
-  padding: 8% 0; }
-
-.sg-page--start {
-  background-color: #181830;
-  padding: 70px 0 60px;
-  color: #fff; }
-
-.sg-spacer {
-  padding: 20px; }
-
-.sg-footer {
-  background-color: #181830;
-  color: #fff;
-  padding: 30px;
-  margin-top: 30px; }
-  .sg-footer h1 {
-    margin-bottom: .2em; }
-  .sg-footer a {
-    color: #fff;
-    border-bottom: 2px dashed rgba(255, 255, 255, 0.3); }
-    .sg-footer a:hover {
-      border-bottom: 2px solid #fff; }
-  .sg-footer :last-child {
-    margin-bottom: 0; }
-
-/**
- * Colour swatches
- */
-.sg-swatch {
-  text-align: center;
-  line-height: 30px;
-  margin: 10px 10px 0; }
-
-.sg-swatch-color {
-  height: 60px;
-  padding: 15px;
-  font-size: 13px;
-  font-size: 0.65rem;
-  font-family: Menlo, Monaco, "Courier New", monospace; }
-
-.sg-color-link-hover {
-  color: #185380; }
-  .sg-color-link-hover .sg-swatch-color {
-    background-color: #185380;
-    color: #fff; }
-    .sg-color-link-hover .sg-swatch-color:before {
-      content: "#185380";
-      display: block; }
-
-.sg-color-primary {
-  color: #181830; }
-  .sg-color-primary .sg-swatch-color {
-    background-color: #181830;
-    color: #fff; }
-    .sg-color-primary .sg-swatch-color:before {
-      content: "#181830";
-      display: block; }
-
-.sg-color-secondary {
-  color: #fe7c08; }
-  .sg-color-secondary .sg-swatch-color {
-    background-color: #fe7c08;
-    color: #fff; }
-    .sg-color-secondary .sg-swatch-color:before {
-      content: "#fe7c08";
-      display: block; }
-
-.sg-color-highlight {
-  color: #288ad6; }
-  .sg-color-highlight .sg-swatch-color {
-    background-color: #288ad6;
-    color: #fff; }
-    .sg-color-highlight .sg-swatch-color:before {
-      content: "#288ad6";
-      display: block; }
-
-.sg-color-text {
-  color: #444; }
-  .sg-color-text .sg-swatch-color {
-    background-color: #444;
-    color: #fff; }
-    .sg-color-text .sg-swatch-color:before {
-      content: "#444";
-      display: block; }
-
-.sg-color-background {
-  color: #f1f1f1; }
-  .sg-color-background .sg-swatch-color {
-    background-color: #f1f1f1;
-    color: #444;
-    border: #f1f1f1 solid 1px; }
-    .sg-color-background .sg-swatch-color:before {
-      content: "#f1f1f1";
-      display: block; }
-
-.sg-color-border {
-  color: #ddd; }
-  .sg-color-border .sg-swatch-color {
-    background-color: #ddd;
-    color: #444; }
-    .sg-color-border .sg-swatch-color:before {
-      content: "#ddd";
-      display: block; }
-
-.sg-color-link {
-  color: #288ad6; }
-  .sg-color-link .sg-swatch-color {
-    background-color: #288ad6;
-    color: #fff; }
-    .sg-color-link .sg-swatch-color:before {
-      content: "#288ad6";
-      display: block; }
-
-/**
- * Typography
- */
-.sg-type {
-  margin-bottom: 1em; }
-
-code {
-  border: 1px solid #ddd;
-  background-color: #F9F8F8;
-  font-size: 11px;
-  font-size: 0.55rem; }
-
-.sg-type-micro .sg-type-item {
-  font-size: 9px;
-  font-size: 0.45rem; }
-
-.sg-type-micro code:after {
-  content: " = 9px"; }
-
-.sg-type-smallest .sg-type-item {
-  font-size: 11px;
-  font-size: 0.55rem; }
-
-.sg-type-smallest code:after {
-  content: " = 11px"; }
-
-.sg-type-smaller .sg-type-item {
-  font-size: 13px;
-  font-size: 0.65rem; }
-
-.sg-type-smaller code:after {
-  content: " = 13px"; }
-
-.sg-type-small .sg-type-item {
-  font-size: 16px;
-  font-size: 0.8rem; }
-
-.sg-type-small code:after {
-  content: " = 16px"; }
-
-.sg-type-base .sg-type-item {
-  font-size: 20px;
-  font-size: 1rem; }
-
-.sg-type-base code:after {
-  content: " = 20px"; }
-
-.sg-type-mid .sg-type-item {
-  font-size: 25px;
-  font-size: 1.25rem; }
-
-.sg-type-mid code:after {
-  content: " = 25px"; }
-
-.sg-type-large .sg-type-item {
-  font-size: 32px;
-  font-size: 1.6rem; }
-
-.sg-type-large code:after {
-  content: " = 32px"; }
-
-.sg-type-largest .sg-type-item {
-  font-size: 40px;
-  font-size: 2rem; }
-
-.sg-type-largest code:after {
-  content: " = 40px"; }
-
-.sg-type-jumbo .sg-type-item {
-  font-size: 49px;
-  font-size: 2.45rem; }
-
-.sg-type-jumbo code:after {
-  content: " = 49px"; }
-
-.sg-typeSpecimen {
-  margin-bottom: 0;
-  margin-top: 0;
-  -ms-word-wrap: break-word;
-  word-wrap: break-word; }
-  .sg-typeSpecimen:after {
-    display: block;
-    font-size: 16px;
-    font-size: 0.8rem;
-    margin-top: 5px;
-    border-top: 1px solid #ddd;
-    font-weight: normal; }
-
-.sg-typeSpecimen--primary {
-  font-size: 30px;
-  font-size: 1.5rem;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
-.sg-typeSpecimen--secondary {
-  font-size: 30px;
-  font-size: 1.5rem;
-  font-family: Georgia, "Times New Roman", Times, serif; }
-
-.sg-typeSpecimen--giant {
-  font-size: 120px;
-  font-size: 6rem;
-  line-height: 1; }
-
-/**
- * Icons
- */
-.icon-sg {
-  display: inline-block;
-  width: 50px;
-  height: 50px;
-  vertical-align: middle;
-  margin-right: 10px;
-  margin-bottom: 10px; }
-
-.sg-favicon {
-  padding: 5px; }
-  .sg-favicon img {
-    vertical-align: middle;
-    margin-right: 15px; }
+body{background-color:#fff}.sg-interfaceType,.sg-sectionHeading{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300}.sg-interfaceType--subtle{color:#888}.sg-sectionHeading{color:#181830}.sg-page{overflow:hidden;padding:8% 0}.sg-page--start{background-color:#181830;padding:70px 0 60px;color:#fff}.sg-spacer{padding:20px}.sg-footer{background-color:#181830;color:#fff;padding:30px;margin-top:30px}.sg-footer h1{margin-bottom:.2em}.sg-footer a{color:#fff;border-bottom:2px dashed hsla(0,0%,100%,.3)}.sg-footer a:hover{border-bottom:2px solid #fff}.sg-footer :last-child{margin-bottom:0}.sg-swatch{text-align:center;line-height:30px;margin:10px 10px 0}.sg-swatch-color{height:60px;padding:15px;font-size:13px;font-size:.65rem;font-family:Menlo,Monaco,Courier New,monospace}.sg-color-link-hover{color:#185380}.sg-color-link-hover .sg-swatch-color{background-color:#185380;color:#fff}.sg-color-link-hover .sg-swatch-color:before{content:"#185380";display:block}.sg-color-primary{color:#181830}.sg-color-primary .sg-swatch-color{background-color:#181830;color:#fff}.sg-color-primary .sg-swatch-color:before{content:"#181830";display:block}.sg-color-secondary{color:#fe7c08}.sg-color-secondary .sg-swatch-color{background-color:#fe7c08;color:#fff}.sg-color-secondary .sg-swatch-color:before{content:"#fe7c08";display:block}.sg-color-highlight{color:#288ad6}.sg-color-highlight .sg-swatch-color{background-color:#288ad6;color:#fff}.sg-color-highlight .sg-swatch-color:before{content:"#288ad6";display:block}.sg-color-text{color:#444}.sg-color-text .sg-swatch-color{background-color:#444;color:#fff}.sg-color-text .sg-swatch-color:before{content:"#444";display:block}.sg-color-background{color:#f1f1f1}.sg-color-background .sg-swatch-color{background-color:#f1f1f1;color:#444;border:1px solid #f1f1f1}.sg-color-background .sg-swatch-color:before{content:"#f1f1f1";display:block}.sg-color-border{color:#ddd}.sg-color-border .sg-swatch-color{background-color:#ddd;color:#444}.sg-color-border .sg-swatch-color:before{content:"#ddd";display:block}.sg-color-link{color:#288ad6}.sg-color-link .sg-swatch-color{background-color:#288ad6;color:#fff}.sg-color-link .sg-swatch-color:before{content:"#288ad6";display:block}.sg-type{margin-bottom:1em}code{border:1px solid #ddd;background-color:#f9f8f8;font-size:11px;font-size:.55rem}.sg-type-micro .sg-type-item{font-size:9px;font-size:.45rem}.sg-type-micro code:after{content:" = 9px"}.sg-type-smallest .sg-type-item{font-size:11px;font-size:.55rem}.sg-type-smallest code:after{content:" = 11px"}.sg-type-smaller .sg-type-item{font-size:13px;font-size:.65rem}.sg-type-smaller code:after{content:" = 13px"}.sg-type-small .sg-type-item{font-size:16px;font-size:.8rem}.sg-type-small code:after{content:" = 16px"}.sg-type-base .sg-type-item{font-size:20px;font-size:1rem}.sg-type-base code:after{content:" = 20px"}.sg-type-mid .sg-type-item{font-size:25px;font-size:1.25rem}.sg-type-mid code:after{content:" = 25px"}.sg-type-large .sg-type-item{font-size:32px;font-size:1.6rem}.sg-type-large code:after{content:" = 32px"}.sg-type-largest .sg-type-item{font-size:40px;font-size:2rem}.sg-type-largest code:after{content:" = 40px"}.sg-type-jumbo .sg-type-item{font-size:49px;font-size:2.45rem}.sg-type-jumbo code:after{content:" = 49px"}.sg-typeSpecimen{margin-bottom:0;margin-top:0;-ms-word-wrap:break-word;word-wrap:break-word}.sg-typeSpecimen:after{display:block;font-size:16px;font-size:.8rem;margin-top:5px;border-top:1px solid #ddd;font-weight:400}.sg-typeSpecimen--primary{font-size:30px;font-size:1.5rem;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.sg-typeSpecimen--secondary{font-size:30px;font-size:1.5rem;font-family:Georgia,Times New Roman,Times,serif}.sg-typeSpecimen--giant{font-size:120px;font-size:6rem;line-height:1}.icon-sg{display:inline-block;width:50px;height:50px;vertical-align:middle;margin-right:10px;margin-bottom:10px}.sg-favicon{padding:5px}.sg-favicon img{vertical-align:middle;margin-right:15px}
 /*# sourceMappingURL=styleguide.css.map */
\ No newline at end of file