Add govuk-template-flask-skeleton

assets/stylesheets/govuk_elements/elements-page-ie6.scss

@@ -0,0 +1,5 @@
+$is-ie: true;
+$ie-version: 6;
+$mobile-ie6: false;
+ 
+@import "elements-page";

assets/stylesheets/govuk_elements/elements-page-ie7.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 7;
+ 
+@import "elements-page";

assets/stylesheets/govuk_elements/elements-page-ie8.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 8;
+ 
+@import "elements-page";

assets/stylesheets/govuk_elements/elements-page.scss

@@ -0,0 +1,380 @@
+@import "main";
+
+// ==========================================================================
+// Elements page styles
+// ==========================================================================
+
+// These are example styles, used only for the elements pages
+
+.elements-index {
+  // Reduce top and bottom margins
+  .heading-medium {
+    margin: 1em 0 0 0;
+  }
+  // Add spacing above
+  .divider {
+    margin-top: 4em;
+  }
+}
+
+// Increase spacing above headings
+.heading-xlarge {
+  @include media(tablet) {
+    margin-top: em(60, 48);
+    margin-bottom: em(30, 48);
+  }
+}
+
+// Page contents
+.heading-contents {
+  margin-top: 3em;
+}
+
+.list-contents li {
+  @include core-16;
+}
+
+// Use for paragraphs before lists
+.lead-in {
+  margin-bottom: 0;
+}
+
+// Lists
+.list-bullet {
+  margin-bottom: ($gutter*1.5);
+}
+
+
+// Example boxes
+// ==========================================================================
+
+.example {
+  @extend %contain-floats;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $grey-2;
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding-top: $gutter;
+  padding-right: $gutter-half;
+  padding-bottom: $gutter-half;
+  padding-left: $gutter-half;
+
+  @include media(tablet) {
+    padding-top: $gutter*1.5;
+    padding-right: $gutter;
+    padding-bottom: $gutter;
+    padding-left: $gutter;
+  }
+
+  &:before {
+    content: "EXAMPLE";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    padding: em(4) em(15) em(4) em(15);
+
+    @include core-14;
+    background: $grey-2;
+    color: white;
+  }
+
+  // Blue text for heading sizes
+  .highlight {
+    font-style: normal;
+    color: $hm-government;
+  }
+
+  // Fix grid layout within example boxes for IE7 and below
+  // where box-sizing isn't supported: http://caniuse.com/#search=box-sizing
+  @mixin example-box-column($width) {
+    width: (($site-width - $gutter) * $width) - $gutter;
+  }
+
+  @include ie-lte(7){
+
+    // Set example box width to 900px (removing left and right padding)
+    $example-box-width: $site-width - ($gutter * 2);
+    width: $example-box-width;
+
+    // Recalculate grid column widths
+    .column-quarter {
+      @include example-box-column( 1/4 );
+    }
+    .column-half {
+      @include example-box-column( 1/2 );
+    }
+    .column-third {
+      @include example-box-column( 1/3 );
+    }
+    .column-two-thirds {
+      @include example-box-column( 2/3 );
+    }
+
+    // Scale images to fit grid columns
+    img {
+      width: 100%;
+    }
+  }
+
+}
+
+
+// 1. Layout
+// ==========================================================================
+
+.example-grid p {
+  width: 100%;
+  background: file-url("examples/grid.png") 0 0 repeat;
+  margin-bottom: 0;
+  height: 30px;
+  @include media(tablet) {
+    height: 60px;
+  }
+  overflow: hidden;
+  text-indent: -999em;
+}
+
+
+// 2. Typography
+// ==========================================================================
+
+
+// 3. Colour
+// ==========================================================================
+
+// Colour swatches
+.swatch {
+  width: 60px;
+  height: 60px;
+  @include border-radius(100%);
+  @include media(mobile) {
+    clear: both;
+    float: left;
+    margin-right: $gutter-half;
+    margin-bottom: $gutter-half;
+  }
+  @include media(tablet) {
+    margin: 0 auto $gutter-half auto;
+  }
+}
+
+// Sass list for colour palette
+$palette: (
+  ("purple", $purple),
+  ("mauve", $mauve),
+  ("fuschia", $fuschia),
+  ("pink", $pink),
+  ("baby-pink", $baby-pink),
+  ("red", $red),
+  ("mellow-red", $mellow-red),
+  ("orange", $orange),
+  ("brown", $brown),
+  ("yellow", $yellow),
+  ("green", $green),
+  ("grass-green", $grass-green),
+  ("turquoise", $turquoise),
+  ("light-blue", $light-blue)
+);
+
+@mixin color-swatches {
+  @each $color in $palette {
+    $color-name: nth($color, 1);
+    $color-var: nth($color, 2);
+    .swatch-#{$color-name} {
+      background-color: $color-var;
+    }
+  }
+}
+
+// Generate swatch classes for each colour in palette list
+@include color-swatches;
+
+.swatch-alpha {
+  background-color: $alpha-colour;
+}
+
+.swatch-beta {
+  background-color: $beta-colour;
+}
+
+.swatch-discovery {
+  background-color: $discovery-colour;
+}
+
+.swatch-live {
+  background-color: $live-colour;
+}
+
+.swatch-error {
+  background-color: $error-colour;
+}
+
+.swatch-focus {
+  background-color: $focus-colour;
+}
+
+.swatch-button-colour {
+  background-color: $button-colour;
+}
+
+.swatch-black {
+  background-color: $black;
+}
+
+.swatch-grey-1 {
+  background-color: $grey-1;
+}
+
+.swatch-grey-2 {
+  background-color: $grey-2;
+}
+
+.swatch-grey-3 {
+  background-color: $grey-3;
+}
+
+.swatch-grey-4 {
+  background-color: $grey-4;
+}
+
+.swatch-white {
+  background-color: $white;
+  border: 1px solid $grey-3;
+}
+
+.swatch-text-colour {
+  background-color: $text-colour;
+}
+
+.swatch-text-secondary {
+  background-color: $secondary-text-colour;
+}
+
+.swatch-page-colour {
+  background-color: $page-colour;
+  border: 1px solid $grey-3;
+}
+
+.swatch-button-colour {
+  background-color: $button-colour;
+}
+
+.swatch-link-colour {
+ background-color: $link-colour;
+}
+
+.swatch-link-colour-visited {
+ background-color: $link-visited-colour;
+}
+
+.swatch-link-colour-hover {
+ background-color: $link-hover-colour;
+}
+
+.swatch-border-colour {
+  background-color: $border-colour;
+}
+
+.swatch-panel-colour {
+  background-color: $panel-colour;
+}
+
+.swatch-highlight-colour {
+  background-color: $highlight-colour;
+}
+
+// Colour swatch layout
+.swatch-wrapper {
+  @include media(tablet) {
+    float: left;
+    width: 20%;
+    text-align: center;
+  }
+
+  .heading-small {
+    margin-bottom: em(10);
+  }
+
+  ul {
+    padding-bottom: $gutter-half;
+    @include media(mobile) {
+      min-height: 50px;
+      padding-top: 10px;
+    }
+  }
+  li {
+    @include core-16;
+  }
+  b {
+  font-weight: bold;
+  text-transform: uppercase;
+  }
+}
+
+
+// 4. Images and icons
+// ==========================================================================
+
+.example-images img {
+  max-width: 100%;
+  vertical-align: top;
+}
+
+
+// 5. Data
+// ==========================================================================
+
+.data .bold-xlarge,
+.data .bold-xxlarge {
+  line-height: 0.8;
+}
+
+.example .data p {
+  margin-bottom: 0;
+}
+
+
+// 6. Forms
+// ==========================================================================
+
+
+// 7. Buttons
+// ==========================================================================
+
+// Increase spacing under buttons in example boxes
+.example-button .button {
+  margin-bottom: 15px;
+}
+
+// Remove top margin from "Creating buttons" example
+.example-button .heading-small {
+  margin-top: 0;
+}
+
+// Make swatch wrapper full width for "Creating buttons" example
+.example-button .swatch-wrapper {
+  width: 100%;
+}
+
+// Remove bottom padding to keep "Creating buttons" example
+.example-button ul {
+  padding-bottom: 0;
+}
+
+
+// 9. Alpha beta banners
+// ==========================================================================
+
+// Alpha
+.phase-banner-alpha {
+  @include phase-banner($state: alpha);
+}
+
+// Beta
+.phase-banner-beta {
+  @include phase-banner($state: beta);
+}

assets/stylesheets/govuk_elements/elements/_breadcrumb.scss

@@ -0,0 +1,50 @@
+// Global breadcrumb from Alphagov - static
+// https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/helpers/_header.scss#L224
+// Modified to use the new grid layout mixins
+
+#global-breadcrumb {
+
+  @extend %grid-row;
+
+  ol {
+
+    @include grid-column(1);
+    padding-top: 0.75em;
+    padding-bottom: 0.75em;
+
+    li {
+
+      @include core-16;
+      float: left;
+
+      background-image: file-url("separator.png");
+      @include device-pixel-ratio() {
+        background-image: file-url("separator-2x.png");
+        background-size: 6px 11px;
+      }
+
+      background-position: 100% 50%;
+      background-repeat: no-repeat;
+
+      list-style: none;
+
+      margin-right: 0.5em;
+      margin-bottom: 0.4em;
+      margin-left: 0;
+      padding-right: 1em;
+
+      a {
+        color: $text-colour;
+      }
+
+      strong {
+        font-weight: normal;
+      }
+
+      &:last-child {
+        background-image: none;
+        margin-right: 0
+      }
+    }
+  }
+}

assets/stylesheets/govuk_elements/elements/_buttons.scss

@@ -0,0 +1,51 @@
+// Buttons
+// ==========================================================================
+
+.button {
+  @include button ($button-colour);
+  @include box-sizing (border-box);
+  margin: 0 $gutter-half $gutter-half 0;
+  padding: em(10) em(15) em(5) em(15);
+  vertical-align: top;
+  @include media (mobile) {
+    width: 100%;
+  }
+}
+
+// Fix unwanted button padding in Firefox
+.button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.button:focus {
+  outline: 3px solid $focus-colour;
+}
+
+// Disabled buttons
+.button[disabled="disabled"] {
+  background: $button-colour;
+}
+
+.button[disabled="disabled"]:focus {
+  outline: none;
+}
+
+// Start now buttons
+.button-start,
+.button-get-started {
+  @include bold-24;
+  background-image: file-url("icons/icon-pointer.png");
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  padding: em(7) em(41) em(4) em(16);
+
+  @include device-pixel-ratio {
+    background-image: file-url("icons/icon-pointer-2x.png");
+    background-size: 30px 19px;
+  }
+
+  @include ie(6) {
+    background-image: file-url("icons/icon-pointer-2x.png");
+  }
+}

assets/stylesheets/govuk_elements/elements/_components.scss

@@ -0,0 +1,9 @@
+// Box with turquoise background and white text
+// Used for transaction end pages, and Bank Holidays
+.govuk-box-highlight {
+  margin: 1em 0 1em 0;
+  padding: 2em 0 1em 0;
+  color: $white;
+  background: $turquoise;
+  text-align: center;
+}

assets/stylesheets/govuk_elements/elements/_details.scss

@@ -0,0 +1,34 @@
+// Details
+// ==========================================================================
+
+details {
+  display: block;
+
+  summary {
+    display: inline-block;
+    color: $govuk-blue;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: em(5);
+
+    &:hover {
+      color: $link-hover-colour;
+    }
+
+    &:focus {
+      outline: 3px solid $focus-colour;
+    }
+  }
+
+  // Underline only summary text (not the arrow)
+  .summary {
+    text-decoration: underline;
+  }
+
+  // Match fallback arrow spacing with -webkit default
+  .arrow {
+    margin-right: .35em;
+    font-style: normal;
+  }
+
+}

assets/stylesheets/govuk_elements/elements/_elements-typography.scss

@@ -0,0 +1,276 @@
+// Typography
+// ==========================================================================
+
+// Increase the base font size to 19px for the main content area
+// Using the core-19 mixin from the govuk_toolkit _typography.scss file
+
+main {
+  @include core-19;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Core font sizes
+.font-xxlarge {
+  @include core-80;
+}
+
+.font-xlarge {
+  @include core-48;
+}
+
+.font-large {
+  @include core-36;
+}
+
+.font-medium {
+  @include core-24;
+}
+
+.font-small {
+  @include core-19;
+}
+
+.font-xsmall {
+  @include core-16;
+}
+
+// Bold font sizes
+.bold-xxlarge {
+  @include bold-80();
+}
+
+.bold-xlarge {
+  @include bold-48();
+}
+
+.bold-large {
+  @include bold-36();
+}
+
+.bold-medium {
+  @include bold-24();
+}
+
+.bold-small {
+  @include bold-19();
+}
+
+.bold-xsmall {
+  @include bold-16();
+}
+
+// Common heading sizes
+// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
+// Spacing is set in em, using the px to em function in the elements _helpers.scss file
+
+// Headings
+.heading-xlarge {
+  @include bold-48();
+
+  margin-top: em(15, 32);
+  margin-bottom: em(30, 32);
+
+  @include media(tablet) {
+    margin-top: em(30, 48);
+    margin-bottom: em(60, 48);
+  }
+
+  .heading-secondary {
+    @include heading-27();
+
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}
+
+.heading-large {
+  @include bold-36();
+
+  margin-top: em(25, 24);
+  margin-bottom: em(10, 24);
+
+  @include media(tablet) {
+    margin-top: em(45, 36);
+    margin-bottom: em(20, 36);
+  }
+
+  .heading-secondary {
+    @include heading-24();
+
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}
+
+.heading-medium {
+  @include bold-24();
+
+  margin-top: em(25, 20);
+  margin-bottom: em(10, 20);
+
+  @include media(tablet) {
+    margin-top: em(45, 24);
+    margin-bottom: em(20, 24);
+  }
+
+}
+
+.heading-small {
+  @include bold-19();
+
+  margin-top: em(10, 16);
+  margin-bottom: em(5, 16);
+
+  @include media(tablet) {
+    margin-top: em(20, 19);
+  }
+
+}
+
+// Text
+p {
+  margin-top: em(5, 16);
+  margin-bottom: em(20, 16);
+
+  @include media(tablet) {
+    margin-top: em(5);
+    margin-bottom: em(20);
+  }
+
+}
+
+// Lede, or intro text
+.lede {
+  @include core-24;
+}
+
+// Set a max-width for text blocks
+// Less than 75 characters per line of text
+.text {
+  max-width: 30em;
+}
+
+.text-secondary {
+  color: $secondary-text-colour;
+}
+
+// Link styles
+.link {
+  color: $link-colour;
+  text-decoration: underline;
+}
+
+.link:visited {
+  color: $link-visited-colour;
+}
+
+.link:hover {
+  color: $link-hover-colour;
+}
+
+.link:active {
+  color: $link-colour;
+}
+
+// Back link styles - with left pointing arrow
+
+.link-back {
+  @include inline-block;
+  position: relative;
+
+  @include core-16;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+  padding-left: 14px;
+
+  color: $black;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $black;
+  }
+
+  text-decoration: none;
+  border-bottom: 1px solid $black;
+
+  // Back arrow - left pointing black arrow
+  &::before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+
+    border-top: 5px solid transparent;
+    border-right: 6px solid #0b0c0c;
+    border-bottom: 5px solid transparent;
+
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -6px;
+  }
+
+  // Improve arrow shape in Firefox
+  @-moz-document url-prefix() {
+    &::before {
+      border-top: 5px dotted rgba(255, 0, 0, 0);
+      border-bottom: 5px dotted rgba(255, 0, 0, 0);
+    }
+  }
+
+  // Fallback
+  // IE8 doesn't support rgba and only supports the single colon syntax for :before
+  // IE7 doesn't support pseudo-elements, let's fallback to an image instead.
+  // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
+  @include ie-lte(8) {
+   background: file-url("icon-arrow-left.png") no-repeat 0 4px;
+  }
+
+}
+
+// Code styles
+.code {
+  color: black;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+  color: $black;
+  background-color: $highlight-colour;
+  border: 1px solid $border-colour;
+  padding: 4px 4px 2px 4px;
+}
+
+// Horizontal rule style
+hr {
+  display: block;
+  background: $border-colour;
+  border: 0;
+  height: 1px;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
+  padding: 0;
+  @include ie-lte(7) {
+    color: $border-colour;
+  }
+}

assets/stylesheets/govuk_elements/elements/_forms.scss

@@ -0,0 +1,225 @@
+// Forms
+// ==========================================================================
+
+// Contents:
+//
+// 1. Helpers
+// 2. Form wrappers
+// 3. Form labels
+// 4. Form hints
+// 5. Form controls
+// 6. Form control widths
+
+// 1. Helpers
+// ==========================================================================
+
+// Fieldset is used to group more than one .form-group
+fieldset {
+  @extend %contain-floats;
+  width: 100%;
+}
+
+// Fix left hand gap in IE7 and below
+@include ie-lte(7) {
+  legend {
+    margin-left: -7px;
+  }
+}
+
+// Remove margin under textarea in Chrome and FF
+textarea{
+  display: block;
+}
+
+
+// 2. Form wrappers
+// ==========================================================================
+
+// Form group is used to wrap label and input pairs
+.form-group {
+  @extend %contain-floats;
+  @include box-sizing(border-box);
+
+  float: left;
+  width: 100%;
+
+  margin-bottom: $gutter-half;
+
+  @include media(tablet) {
+    margin-bottom: $gutter;
+  }
+}
+
+// Form group related is used to reduce the space between label and input pairs
+.form-group-related {
+  margin-bottom: 10px;
+
+  @include media(tablet) {
+    margin-bottom: 20px;
+  }
+}
+
+// Form group compound is used to reduce the space between label and input pairs
+.form-group-compound {
+  margin-bottom: 10px;
+}
+
+
+// 3. Form labels
+// ==========================================================================
+
+// Form labels, or for legends styled to look like labels
+// TODO: Amend so there is only one label style
+.form-label,
+.form-label-bold {
+  display: block;
+  color: $text-colour;
+}
+
+.form-label {
+  @include core-19;
+}
+
+.form-label-bold {
+  @include bold-19;
+}
+
+// Add spacing under spans within labels
+legend {
+  .form-label,
+  .form-label-bold {
+    padding-bottom: 7px;
+  }
+}
+
+// Remove spacing when error messages are shown
+// TODO: Move into /forms/_form-validation.scss
+.error legend {
+  .form-label,
+  .form-label-bold {
+    padding-bottom: 0;
+  }
+}
+
+// Used for the 'or' in between block label options
+.form-block {
+  @extend %contain-floats;
+  float: left;
+  width: 100%;
+
+  margin-top: -5px;
+  margin-bottom: 5px;
+
+  @include media(tablet) {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+}
+
+// 4. Form hints
+// ==========================================================================
+
+// Form hints and example text are light grey and sit above a form control
+.form-hint {
+  @include core-19;
+  display: block;
+  color: $secondary-text-colour;
+  font-weight: normal;
+  margin-bottom: 5px;
+}
+
+
+// 5. Form controls
+// ==========================================================================
+
+// By default, form controls are 50% width for desktop,
+// and 100% width for mobile
+.form-control {
+  @include box-sizing(border-box);
+  @include core-19;
+  width: 100%;
+
+  padding: 4px;
+  background-color: $white;
+  border: 2px solid $grey-1;
+
+  // TODO: Remove 50% width set for tablet and up
+  // !! BREAKING CHANGE !!
+  @include media(tablet) {
+    width: 50%;
+  }
+
+}
+
+// Radio buttons
+.form-radio {
+  display: block;
+  margin: 10px 0;
+
+  input {
+    vertical-align: middle;
+    margin: -4px 5px 0 0;
+  }
+}
+
+// Checkboxes
+.form-checkbox {
+  display: block;
+  margin: $gutter-half 0;
+
+  input {
+    vertical-align: middle;
+    margin: -2px 5px 0 0;
+  }
+}
+
+
+// 6. Form control widths
+// ==========================================================================
+
+// TODO: Update these
+// Form control widths
+
+.form-control-3-4 {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 75%;
+  }
+}
+
+.form-control-2-3 {
+  width: 100%;
+  @include media(tablet) {
+    width: 66.66%;
+  }
+}
+
+.form-control-1-2 {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 50%;
+  }
+}
+
+.form-control-1-3 {
+  width: 100%;
+  @include media(tablet) {
+    width: 33.33%;
+  }
+}
+
+.form-control-1-4 {
+  width: 100%;
+  @include media(tablet) {
+    width: 25%;
+  }
+}
+
+.form-control-1-8 {
+  width: 100%;
+  @include media(tablet) {
+    width: 12.5%;
+  }
+}

assets/stylesheets/govuk_elements/elements/_helpers.scss

@@ -0,0 +1,44 @@
+// Helpers
+// ==========================================================================
+
+// Path to assets for use with file-url() is not already defined
+@if ($path == false) {
+  $path: "/public/images/";
+}
+
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}
+
+// Want to see how the grid works?
+// add this class to the body to see how grid padding is set
+.example-highlight-grid {
+  .grid-row {
+    background: $grey-2;
+  }
+
+  .column-highlight {
+    background: $grey-3;
+    width: 100%;
+  }
+
+}
+
+// Hide, but not for screenreaders
+.visuallyhidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+// Hide, only when JavaScript is enabled
+.js-enabled .js-hidden {
+  display: none;
+}

assets/stylesheets/govuk_elements/elements/_icons.scss

@@ -0,0 +1,244 @@
+// GOV.UK icons
+
+.icon {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.icon-calendar {
+  width: 27px;
+  height: 27px;
+  background-image: file-url("icons/icon-calendar.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-calendar-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-download {
+  width: 30px;
+  height: 39px;
+  background-image: file-url("icons/icon-file-download.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-file-download-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-important {
+  width: 34px;
+  height: 34px;
+  background-image: file-url("icons/icon-important.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-important-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-information {
+  width: 27px;
+  height: 27px;
+  background-image: file-url("icons/icon-information.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-information-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-locator {
+  width: 26px;
+  height: 36px;
+  background-image: file-url("icons/icon-locator.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-locator-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-search {
+  width: 30px;
+  height: 22px;
+  background-color: $black;
+  background-image: file-url("icons/icon-search.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-search-2x.png");
+    background-size: 100%;
+  }
+}
+
+// GOV.UK arrow icons
+.icon-pointer {
+  width: 30px;
+  height: 19px;
+  background-color: $black;
+  background-image: file-url("icons/icon-pointer.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-pointer-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-pointer-black {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-pointer-black.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-pointer-black-2x.png");
+    background-size: 100%;
+  }
+}
+
+// GOV.UK external link icons
+// TODO (Are these provided by the template?)
+
+// GOV.UK step icons
+.icon-step-1 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-1.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-1-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-2 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-2.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-2-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-3 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-3.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-3-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-4 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-4.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-4-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-5 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-5.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-5-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-6 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-6.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-6-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-7 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-7.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-7-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-8 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-8.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-8-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-9 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-9.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-9-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-10 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-10.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-11 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-11.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-11-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-12 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-12.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-12-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-13 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-13.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-13-2x.png");
+    background-size: 100%;
+  }
+}

assets/stylesheets/govuk_elements/elements/_layout.scss

@@ -0,0 +1,63 @@
+// Layout
+// ==========================================================================
+
+// Content
+// ==========================================================================
+
+// Content wraps the entire site content block
+#content {
+  @extend %site-width-container;
+  @extend %contain-floats;
+  padding-bottom: $gutter;
+
+  @include media(desktop) {
+    padding-bottom: $gutter*3;
+  }
+}
+
+
+// Phase banner
+// ==========================================================================
+
+.phase-banner {
+  @include phase-banner(alpha);
+}
+
+
+// Grid layout
+// ==========================================================================
+
+// Usage:
+// For two equal columns
+
+// <div class="grid-row">
+//   <div class="column-half">
+//
+//   </div>
+//   <div class="column-half">
+//
+//   </div>
+// </div>
+
+// Use .grid-row to define a row for grid columns to sit in
+.grid-row {
+  @extend %grid-row;
+}
+
+// Use .grid-column to create a grid column with 15px gutter
+// By default grid columns break to become full width at tablet size
+.column-quarter {
+  @include grid-column(1/4);
+}
+
+.column-half {
+  @include grid-column(1/2);
+}
+
+.column-third {
+  @include grid-column(1/3);
+}
+
+.column-two-thirds {
+  @include grid-column(2/3);
+}

assets/stylesheets/govuk_elements/elements/_lists.scss

@@ -0,0 +1,36 @@
+// Lists
+// ==========================================================================
+
+ul,
+ol {
+  list-style-type: none;
+  padding: 0;
+}
+
+// Bulleted lists
+.list-bullet {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+// Numbered lists
+.list-number {
+  list-style-type: decimal;
+  padding-left: 20px;
+  
+  @include ie-lte(7) {
+    padding-left: 28px;
+  }
+}
+
+.list-bullet,
+.list-number {
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
+.list-bullet li,
+.list-number li {
+  margin-bottom: 5px;
+}
+

assets/stylesheets/govuk_elements/elements/_panels.scss

@@ -0,0 +1,31 @@
+// Panels
+// ==========================================================================
+
+// Indented panels with a grey left hand border
+.panel-indent {
+  @extend %contain-floats;
+  clear: both;
+  border-left: 5px solid $border-colour;
+
+  padding: em(15,19);
+  margin-bottom: em(15,19);
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  :only-child,
+  :last-child {
+    margin-bottom: 0;
+  }
+
+}
+
+.panel-indent-info {
+  border-left-width: 10px;
+}
+
+// Indented panels within form groups
+.form-group .panel-indent {
+  padding-bottom: 0;
+}

assets/stylesheets/govuk_elements/elements/_reset.scss

@@ -0,0 +1,33 @@
+// Reset
+// ==========================================================================
+// flatten all browser defaults and styles inherited from gov.uk template
+
+/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
+div, span,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+input, textarea,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-weight: normal;
+}

assets/stylesheets/govuk_elements/elements/_tables.scss

@@ -0,0 +1,32 @@
+// Tables
+// ==========================================================================
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+
+  th,
+  td {
+    @include core-16;
+    padding: em(12, 16) em(20, 16) em(9, 16) 0;
+
+    text-align: left;
+    color: $black;
+    border-bottom: 1px solid $border-colour;
+  }
+
+  th {
+    font-weight: 700;
+    // Right align headings for numeric content
+    &.numeric {
+      text-align: right;
+    }
+  }
+
+  // Use tabular numbers for numeric table cells
+  td.numeric {
+    @include core-16($tabular-numbers: true);
+    text-align: right;
+  }
+}

assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss

@@ -0,0 +1,70 @@
+// Large hit area
+// Radio buttons & checkboxes
+
+// By default, block labels stack vertically
+.block-label {
+
+  display: block;
+  float: none;
+  clear: left;
+  position: relative;
+
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  padding: (18px $gutter $gutter-half $gutter*1.8);
+
+  margin-bottom: 10px;
+  cursor: pointer; // Encourage clicking on block labels
+
+  @include media(tablet) {
+    float: left;
+    // width: 25%; - Test : check that text within labels will wrap
+  }
+
+  // Absolutely position inputs within label, to allow text to wrap
+  input {
+    position: absolute;
+    top: 15px;
+    left: $gutter-half;
+    cursor: pointer;
+    margin: 0;
+    width: 29px;
+    height: 29px;
+    @include ie(8) {
+      top: 12px;
+    }
+  }
+
+  // Change border on hover
+  &:hover {
+    border-color: $black;
+  }
+}
+
+.block-label:last-child {
+  margin-bottom: 0;
+}
+
+// To stack horizontally, use .inline on parent, to sit block labels next to each other
+.inline .block-label {
+  clear: none;
+  margin-right: 10px;
+}
+
+// Selected and focused states
+
+// Add selected state
+.js-enabled label.selected {
+  background: $white;
+  border-color: $black;
+}
+
+// Add focus to block labels
+.js-enabled label.focused {
+  outline: 3px solid $focus-colour;
+}
+
+// Remove focus from radio/checkboxes
+.js-enabled .focused input:focus {
+  outline: none;
+}

assets/stylesheets/govuk_elements/elements/forms/_form-date.scss

@@ -0,0 +1,38 @@
+// Date pattern
+
+// Hide the 'spinner' for webkit
+// and also for Firefox
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.form-date {
+
+  .form-group {
+    float: left;
+    width: 50px;
+
+    margin-right: 20px;
+    margin-bottom: 0;
+    clear: none;
+
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .form-group-year {
+    width: 70px;
+  }
+}

assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss

@@ -0,0 +1,104 @@
+// Form validation
+// ==========================================================================
+
+// Using the classname .error as it's shorter than .validation and easier to type!
+.error {
+
+  // Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
+  // @include box-sizing(border-box);
+  margin-right: 15px;
+
+  // Error messages should be red and bold
+  .error-message {
+    color: $error-colour;
+    font-weight: bold;
+  }
+
+  // Form inputs should have a red border
+  .form-control {
+    border: 4px solid $error-colour;
+  }
+
+  .form-hint {
+    margin-bottom: 0;
+  }
+
+}
+
+.error,
+.error-summary {
+
+  // Add a red border to the left of the field
+  border-left: 4px solid $error-colour;
+  padding-left: 10px;
+
+  @include media(tablet) {
+    border-left: 5px solid $error-colour;
+    padding-left: $gutter-half;
+  }
+}
+
+.error-message {
+  @include core-19;
+
+  display: block;
+  clear: both;
+
+  margin: 0;
+  padding: 5px 0 7px 0;
+}
+
+// Summary of multiple error messages
+.error-summary {
+
+  // Error summary has a border on all sides
+  border: 4px solid $error-colour;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding: $gutter-half 10px;
+
+  @include media(tablet) {
+    border: 5px solid $error-colour;
+
+    margin-top: $gutter;
+    margin-bottom: $gutter;
+
+    padding: 20px $gutter-half $gutter-half $gutter-half;
+  }
+
+  @include ie-lte(6) {
+    zoom: 1;
+  }
+
+  // Use the GOV.UK outline focus style
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
+
+  .error-summary-heading {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  .error-summary-list {
+    padding-left: 0;
+
+    li {
+
+      @include media(tablet) {
+        margin-bottom: 5px;
+      }
+    }
+
+    a {
+      color: $error-colour;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+}

assets/stylesheets/govuk_elements/main-ie6.scss

@@ -0,0 +1,5 @@
+$is-ie: true;
+$ie-version: 6;
+$mobile-ie6: false;
+ 
+@import "main";

assets/stylesheets/govuk_elements/main-ie7.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 7;
+ 
+@import "main";

assets/stylesheets/govuk_elements/main-ie8.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 8;
+ 
+@import "main";

assets/stylesheets/govuk_elements/main.scss

@@ -0,0 +1,28 @@
+// GOV.UK front end toolkit
+// Sass mixins and variables
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+
+
+@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
+@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
+
+// GOV.UK elements
+@import "elements/helpers";
+@import "elements/reset";
+@import "elements/elements-typography";
+@import "elements/layout";
+
+@import "elements/forms";
+@import "elements/forms/form-block-labels";
+@import "elements/forms/form-date";
+@import "elements/forms/form-validation";
+
+@import "elements/tables";
+@import "elements/lists";
+@import "elements/details";
+@import "elements/panels";
+@import "elements/buttons";
+@import "elements/icons";
+
+@import "elements/components";
+@import "elements/breadcrumb";