From 0e33a0ffa8e3a3242a4d0e478db9c156fde4a636 Mon Sep 17 00:00:00 2001 From: Ashley Nolan Date: Thu, 16 Oct 2014 17:15:31 +0100 Subject: [PATCH] Modifying docs paths and the container class in the docs and styleguide --- _docs/index.html | 176 -- _docs/styleguide.html | 323 --- _grunt-configs/server.js | 6 +- statix/dist/assets/css/kickoff-old-ie.css | 1 + statix/dist/assets/css/kickoff.css | 1 + statix/dist/assets/css/styleguide.css | 2345 +-------------------- statix/dist/docs/index.html | 2 +- statix/dist/docs/styleguide.html | 2 +- statix/dist/index.html | 2 +- statix/src/templates/layouts/default.hbs | 2 +- statix/src/templates/layouts/docs.hbs | 2 +- 11 files changed, 13 insertions(+), 2849 deletions(-) delete mode 100644 _docs/index.html delete mode 100644 _docs/styleguide.html diff --git a/_docs/index.html b/_docs/index.html deleted file mode 100644 index 778d6c8..0000000 --- a/_docs/index.html +++ /dev/null @@ -1,176 +0,0 @@ - - - - - - - Kickoff Setup checklist - - - - - - - - - - - - -
- - - -

Checklist

- -
- -
- Go to this link -
- - -
- Run npm install (or sudo npm install) to install and all Kickoff's Grunt dependencies. You will need Node, Sass and Grunt installed before this. -
- - -
- Run the bower install to install the few bower dependencies included with the framework. -
- - -
- Run grunt to compile the Sass and JS for the first time. This will also open a browser window with Kickoff's default index.html -
- - -
- Open /_docs/styleguide.html to see the default styles. The next steps are to update these. -
-
- -

CSS / Sass

-

Kickoff provides many variables and sensible defaults (colour palette, fonts, grid settings and more) so you can start writing code as quickly as possible. To take advantage of the full power of this, it is advised that you start each project by defining your own defaults. See below for how to do this:

-
- -

Sass project variables

- - -
- Open /scss/_colour-palette.scss and change any vars to your own ones. -
- -

Open /scss/_variables.scss

- -
-
    -
  • Line ~19 defines your base font size.
    • -
  • Line ~29 defines your type scale: $type-scale. By default we use the 'major third' scale (1.25), this then determines the sizes all the other type size vars. See lines 32—40 for $type-micro to $type-jumbo.
    - Use $type-base when you need the default font size.
    • -
  • Lines ~24—26 define the leading and line-height.
    • -
  • $baseline is used for even spacing (like a baseline grid) for most typographical elements and some other items
    • -
  • If your webfont's bold font-weight is not 700, change this value to the weight you are using.
    • -
-
- - -
-
    -
  • Lines 47—52 define your base font stacks. These are used throughout the framework.
    • -
  • $font-family-base is used for the default typeface so make sure you update it's value with one of the font-stacks above.
    • -
  • $font-family-headings is used for headings typeface. The default value, inherit, means that it will inherit from $font-family-base so if you don't want that, make sure to change it.
    • -
  • If your heading's webfont bold font-weight is not 700, change this value to the weight you are using.
    • -
-
- - -
-
    -
  • Define your own breakpoints to suit your design, the defaults here are just a suggestion
    • -
  • $bp-single-col is a convenience breakpoint for use when you want to switch from a single column (on mobile) to a muliple columns (on desktop).
    • -
  • An example usage for these might be: -
    @include respond-min($bp-single-col) {
-	// RWD code
-}
    -
    • -
  • $bp-block-grid-narrow is used for narrow block grids
    • -
  • $bp-rwd-text is used to define when text size changes (reduces) for narrower viewports
    • -
  • Please add more if you need!
    • -
-
- - -
- It can be useful to save certain paths as variables to ease development, especially image paths -
- - -
- Kickoff comes with a simple grid system, based on the Choreographic Grid. To define your grid column count, gutter widths etc change the vars from lines 88—105. -
- - -
- On line 95 there is one example of an app-specific variable, this is for link transitions. Add any others that you may need below there. -
-
- -

All done!

-

Now view the styleguide again and then run grunt watch or grunt serve to start creating magic!

- - -
- - - - diff --git a/_docs/styleguide.html b/_docs/styleguide.html deleted file mode 100644 index 1f41ccc..0000000 --- a/_docs/styleguide.html +++ /dev/null @@ -1,323 +0,0 @@ - - - - - - - Kickoff Styleguide - - - - - - - - - - - - -
- - -

Colours

-
-
-
-

Text

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
-
-

Background

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
-
-

:link

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
-
-

:hover

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
- -
-
-
-

Primary

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
-
-

Secondary

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
-
-

Highlight

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-
-
- -

Typography

-
-

Headings

-

ABCDEFGHIJKLMNOPQRSTUVWXYZ
- abcdefghijklmnopqrstuvwxyz
- (.,:;?!£$&@*) 1234567890 -

-

Body copy

-

- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- abcdefghijklmnopqrstuvwxyz
- (.,:;?!£$&@*) 1234567890
-

-
-

Heading 1

-

Heading 2

-

Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Heading 3

-

Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Heading 4

-

Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-
Heading 5
-

Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-
Heading 6
-

<small> </small> Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

- -
- -

Blockquote

- -
-

Of all the gin joints in all the towns in all the world, she walks into mine.

- Rick Blaine -
- -
- -
-
-

Ordered list

-
    -
  1. list item 1
    2. -
  2. list item 1 -
      -
    • list item 2 -
        -
      • list item 3
        • -
      -
      • -
    • list item 2
      • -
    -
    3. -
  3. list item 1
    4. -
-
-
-

Unordered list

- -
    -
  • list item 1
    • -
  • list item 1 -
      -
    • list item 2 -
        -
      • list item 3
        • -
      -
      • -
    • list item 2
      • -
    -
    • -
  • list item 1
    • -
- -
-
- -
-
- -
- -

Components

-
-
-

Buttons

- Large Normal Small - -
- -

Forms

- -
-
- Your form -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
- -
-
-
- -
- -
-
-
-
- -
- - - - -
-
- -
- -
- - - - -
-
-
- -
-
- -
- -
-
-
- -
- -
-
-
-
- -
- - -
- -
-
-
- - -
- - - - diff --git a/_grunt-configs/server.js b/_grunt-configs/server.js index a64d064..8cb8bd1 100644 --- a/_grunt-configs/server.js +++ b/_grunt-configs/server.js @@ -17,16 +17,18 @@ module.exports.tasks = { }, styleguide: { options: { + base: 'statix/dist', open: { - target: 'http://0.0.0.0:8000/_docs/styleguide.html' + target: 'http://0.0.0.0:8000/docs/styleguide.html' }, livereload: true } }, start: { options: { + base: 'statix/dist', open: { - target: 'http://0.0.0.0:8000/_docs/index.html' + target: 'http://0.0.0.0:8000/docs/index.html' }, livereload: true } diff --git a/statix/dist/assets/css/kickoff-old-ie.css b/statix/dist/assets/css/kickoff-old-ie.css index 0d56842..7a0be35 100644 --- a/statix/dist/assets/css/kickoff-old-ie.css +++ b/statix/dist/assets/css/kickoff-old-ie.css @@ -2207,4 +2207,5 @@ textarea[contenteditable] { page-break-after: avoid; } } + /*# sourceMappingURL=kickoff-old-ie.css.map */ \ No newline at end of file diff --git a/statix/dist/assets/css/kickoff.css b/statix/dist/assets/css/kickoff.css index 30c5080..59af3e5 100644 --- a/statix/dist/assets/css/kickoff.css +++ b/statix/dist/assets/css/kickoff.css @@ -2348,4 +2348,5 @@ textarea[contenteditable] { page-break-after: avoid; } } + /*# sourceMappingURL=kickoff.css.map */ \ No newline at end of file diff --git a/statix/dist/assets/css/styleguide.css b/statix/dist/assets/css/styleguide.css index feee337..4f18fe1 100644 --- a/statix/dist/assets/css/styleguide.css +++ b/statix/dist/assets/css/styleguide.css @@ -1,2344 +1,3 @@ -/* ========================================================================== - Setup styleguide imports - ========================================================================== */ -/* ========================================================================== - Colour palette (yeah we're British!) - ========================================================================== */ -/* ========================================================================== - Variables - * Settings - * Global values - * Breakpoints - * Paths - * Grid setup - * Colour palette - * Components - ========================================================================== */ -/* - Typography - ========================================================================== */ -/* - Font stacks - ========================================================================== */ -/* - Breakpoints - * There are no common breakpoints so these are just a suggestion - * You'll need to define your own breakpoints to suit your design - ========================================================================== */ -/* - Path vars - ========================================================================== */ -/* - Choreographic Grid setup - * Settings here override & affect the output in choreographic-grid.scss - ========================================================================== */ -/* - App-specific variables - Add common vars here - ========================================================================== */ -/* ========================================================================== - Sass Mixins - * Vendor Prefixer - * Responsive - * CSS3 - * Utility Mixins - * hiDpi - * Forms - ========================================================================== */ -/* Vendor prefixer */ -/* Responsive mixins */ -/* ========================================================================== - Responsive media query mixins - * These are used so that we can define separate media-query content - for -
  • - -
    - -
    -
    • - - ========================================================================== */ -form { - margin: 0 0 28px; -} - -/* Fieldset */ -fieldset { - padding: 0; - margin: 0; - border: 0; -} - -/* ========================================================================== - Form inputs and groups - ========================================================================== */ -.form-controlGroup { - margin-top: 14px; - list-style-type: none; -} -legend + .form-controlGroup { - margin-top: 28px; - -webkit-margin-top-collapse: separate; -} - -label, -input, -button, -select, -textarea { - font-size: 20px; - font-size: 1rem; - line-height: 1.4; - font-weight: normal; - vertical-align: baseline; - *vertical-align: middle; -} - -input, -button, -select, -textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -label { - display: block; - margin-bottom: 5px; - color: #4d4d4d; - font-weight: bold; -} -label small { - font-weight: normal; - color: #999999; -} -label.checkbox, label.radio { - font-weight: normal; - line-height: 1.4; -} -label input, label textarea, label select { - display: block; -} - -input, -textarea, -select, -.fileWrapper { - display: block; - width: 100%; - height: 2.5em; - padding: 4px; - margin-bottom: 9px; - font-size: 20px; - font-size: 1rem; - line-height: 1.4; - color: #4d4d4d; - background-color: #fff; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; -} - -.textarea--uneditable { - width: auto; - height: auto; -} - -input[type="image"], input[type="checkbox"], input[type="radio"], input[type="range"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - line-height: normal; - cursor: pointer; - -webkit-border-radius: 0; - -moz-border-radius: 0; - -o-border-radius: 0; - border-radius: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -input[type="image"] { - border: 0; -} -input[type="file"] { - width: auto; - height: 28px; - padding: initial; - line-height: initial; - border: initial; - background-color: #fff; - background-color: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; -} -input[type="image"], input[type="range"], input[type="range"]:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; -} -input[type="hidden"] { - display: none; -} -input[type="color"] { - height: 40px; - width: 40px; - overflow: hidden; - padding: 2px; -} -input[type="password"] { - font-family: sans-serif; -} -input[type="range"] { - width: 100%; -} - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - width: auto; - cursor: pointer; - -webkit-appearance: button; -} - -select { - background-color: #fff; -} -select[multiple], select[size] { - height: auto; -} - -textarea { - height: auto; - resize: vertical; -} - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 28px; - font-size: 30px; - font-size: 1.5rem; - line-height: 1.4; - color: #4d4d4d; - border: 0; - border-bottom: 1px solid #eee; - white-space: normal; -} -legend small { - font-size: 15px; - font-size: 0.75rem; - color: #b3b3b3; -} - -.radio, -.checkbox { - padding-left: 18px; -} -.radio input[type="radio"], .radio input[type="checkbox"], -.checkbox input[type="radio"], -.checkbox input[type="checkbox"] { - margin-left: -18px; - margin-right: 5px; - vertical-align: middle; - display: inline; -} - -.control--inline { - display: inline-block; - padding-top: 5px; - margin-bottom: 0; - vertical-align: middle; -} - -.control--inline + .control--inline { - margin-left: 10px; -} - -.form-controlGroup-input > .radio:first-child, .form-controlGroup-input > .checkbox:first-child { - padding-top: 5px; -} - -input, -textarea, -.fileWrapper { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; -} - -input:focus, -textarea:focus { - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6); - -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6); - outline: 0; - outline: thin dotted \9; -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -.input--mini { - width: 60px; -} - -.input--small { - width: 90px; -} - -.input--medium { - width: 150px; -} - -.input--large { - width: 210px; -} - -.input--xlarge { - width: 270px; -} - -.input--xxlarge { - width: 530px; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-left: 0; -} - -.fileWrapper input { - width: 90%; - line-height: 0; -} - -input[disabled], input[readonly], -select[disabled], -select[readonly], -textarea[disabled], -textarea[readonly] { - background-color: #b3b3b3; - border-color: #ddd; - cursor: not-allowed; -} -input:focus:required:invalid, -select:focus:required:invalid, -textarea:focus:required:invalid { - color: #b94a48; - border-color: #ee5f5b; -} -input:focus:required:invalid:focus, -select:focus:required:invalid:focus, -textarea:focus:required:invalid:focus { - border-color: #e9322d; - -webkit-box-shadow: 0 0 6px #f8b9b7; - -moz-box-shadow: 0 0 6px #f8b9b7; - -o-box-shadow: 0 0 6px #f8b9b7; - box-shadow: 0 0 6px #f8b9b7; -} - -/* - Both horizontal & vertical forms - ========================================================================== */ -.form--inline input, .form--inline textarea, .form--inline select, .form--inline .form-helpInline, -.form--horizontal input, -.form--horizontal textarea, -.form--horizontal select, -.form--horizontal .form-helpInline { - display: inline-block; - margin-bottom: 0; -} -.form--inline .hide, -.form--horizontal .hide { - display: none; -} - -/* - Inline & search forms specific styles - ========================================================================== */ -.form--inline > * { - margin-right: 10px; - vertical-align: top; -} -.form--inline > *:last-child { - margin-right: 0; -} -.form--inline label { - display: inline-block; -} -.form--inline .radio, .form--inline .checkbox { - padding-left: 0; - margin-bottom: 0; - vertical-align: middle; -} -.form--inline .radio input[type="radio"], .form--inline .checkbox input[type="checkbox"] { - margin-left: 0; - margin-right: 3px; -} - -/* - Search input - ========================================================================== */ -.form--search-input { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; - -webkit-border-radius: 100px; - -moz-border-radius: 100px; - -o-border-radius: 100px; - border-radius: 100px; -} - -/* - Form actions - ========================================================================== */ -.form-actions { - padding: 27px 20px 28px; - margin-top: 28px; - margin-bottom: 28px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - zoom: 1; -} -.form-actions:before, .form-actions:after { - display: table; - content: " "; -} -.form-actions:after { - clear: both; -} -.form-actions .btn, .form-actions .tabs a, .tabs .form-actions a { - margin-right: 10px; -} -.form-actions .btn:last-child, .form-actions .tabs a:last-child, .tabs .form-actions a:last-child { - margin-right: 0; -} - -/* - Form field feedback states - ========================================================================== */ -.form-controlGroup.form-controlGroup--warning > label, -.form-controlGroup.form-controlGroup--warning .help-block, -.form-controlGroup.form-controlGroup--warning .help-inline { - color: #c09853; -} -.form-controlGroup.form-controlGroup--warning input, -.form-controlGroup.form-controlGroup--warning select, -.form-controlGroup.form-controlGroup--warning textarea { - color: #c09853; - border-color: #c09853; -} -.form-controlGroup.form-controlGroup--warning input:focus, -.form-controlGroup.form-controlGroup--warning select:focus, -.form-controlGroup.form-controlGroup--warning textarea:focus { - border-color: #a47e3c; - -webkit-box-shadow: 0 0 6px #dbc59e; - -moz-box-shadow: 0 0 6px #dbc59e; - -o-box-shadow: 0 0 6px #dbc59e; - box-shadow: 0 0 6px #dbc59e; -} - -.form-controlGroup.form-controlGroup--error > label, -.form-controlGroup.form-controlGroup--error .help-block, -.form-controlGroup.form-controlGroup--error .help-inline { - color: #b94a48; -} -.form-controlGroup.form-controlGroup--error input, -.form-controlGroup.form-controlGroup--error select, -.form-controlGroup.form-controlGroup--error textarea { - color: #b94a48; - border-color: #b94a48; -} -.form-controlGroup.form-controlGroup--error input:focus, -.form-controlGroup.form-controlGroup--error select:focus, -.form-controlGroup.form-controlGroup--error textarea:focus { - border-color: #953b39; - -webkit-box-shadow: 0 0 6px #d59392; - -moz-box-shadow: 0 0 6px #d59392; - -o-box-shadow: 0 0 6px #d59392; - box-shadow: 0 0 6px #d59392; -} - -.form-controlGroup.form-controlGroup--success > label, -.form-controlGroup.form-controlGroup--success .help-block, -.form-controlGroup.form-controlGroup--success .help-inline { - color: #468847; -} -.form-controlGroup.form-controlGroup--success input, -.form-controlGroup.form-controlGroup--success select, -.form-controlGroup.form-controlGroup--success textarea { - color: #468847; - border-color: #468847; -} -.form-controlGroup.form-controlGroup--success input:focus, -.form-controlGroup.form-controlGroup--success select:focus, -.form-controlGroup.form-controlGroup--success textarea:focus { - border-color: #356635; - -webkit-box-shadow: 0 0 6px #7aba7b; - -moz-box-shadow: 0 0 6px #7aba7b; - -o-box-shadow: 0 0 6px #7aba7b; - box-shadow: 0 0 6px #7aba7b; -} - -/* - 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; -} - -.form-helpBlock, -.form-helpInline { - color: #7f8c8d; -} - -.form-helpBlock { - display: block; - margin-bottom: 14px; -} - -.form-helpInline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; -} - -@media screen and (min-width: 48em) { - /* ========================================================================== - Horizontal-specific styles - * add .form--horizontal to the
    element - * Demo: http://tmwagency.github.io/kickoff/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; - zoom: 1; - } - .form--horizontal .form-controlGroup:before, .form--horizontal .form-controlGroup:after { - display: table; - content: " "; - } - .form--horizontal .form-controlGroup:after { - clear: both; - } - .form--horizontal .form-controlGroup-label { - float: left; - width: 140px; - padding-top: 5px; - text-align: right; - } - .form--horizontal .form-controlGroup-input { - margin-left: 160px; - } - .form--horizontal .form-controlGroup-input:first-child { - *padding-left: 160px; - } - .form--horizontal .form-controlGroup .fileWrapper { - margin-left: 0; - } - .form--horizontal .form-helpBlock { - margin-top: 14px; - margin-bottom: 0; - } - .form--horizontal .form-actions { - padding-left: 160px; - } -} -table { - max-width: 100%; - border-collapse: collapse; - border-spacing: 0; - background-color: transparent; -} - -.table { - width: 100%; - margin-bottom: 28px; -} -.table th, .table td { - padding: 8px; - line-height: 1.4; - text-align: left; - vertical-align: top; - border-top: 1px solid #ddd; -} -.table th, .table tfoot td { - font-weight: bold; -} -.table thead th { - vertical-align: bottom; -} -.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-top: 0; -} -.table tbody + tbody { - border-top: 2px solid #ddd; -} - -.table--condensed th, .table--condensed td { - padding: 4px 5px; -} - -.table--bordered { - border: 1px solid #ddd; - border-left: 0; - border-collapse: separate; - *border-collapse: collapsed; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; -} -.table--bordered th, .table--bordered td { - border-left: 1px solid #ddd; -} -.table--bordered caption + thead tr:first-child th, .table--bordered caption + tbody tr:first-child th, .table--bordered caption + tbody tr:first-child td, .table--bordered colgroup + thead tr:first-child th, .table--bordered colgroup + tbody tr:first-child th, .table--bordered colgroup + tbody tr:first-child td, .table--bordered thead:first-child tr:first-child th, .table--bordered tbody:first-child tr:first-child th, .table--bordered tbody:first-child tr:first-child td { - border-top: 0; -} -.table--bordered thead:first-child tr:first-child th:first-child, .table--bordered tbody:first-child tr:first-child td:first-child { - -webkit-border-radius: 4px 0 0 0; - -moz-border-radius: 4px 0 0 0; - -o-border-radius: 4px 0 0 0; - border-radius: 4px 0 0 0; -} -.table--bordered thead:first-child tr:first-child th:last-child, .table--bordered tbody:first-child tr:first-child td:last-child { - -webkit-border-radius: 0 4px 0 0; - -moz-border-radius: 0 4px 0 0; - -o-border-radius: 0 4px 0 0; - border-radius: 0 4px 0 0; -} -.table--bordered thead:last-child tr:last-child th:first-child, .table--bordered tbody:last-child tr:last-child td:first-child { - -webkit-border-radius: 0 0 0 4px; - -moz-border-radius: 0 0 0 4px; - -o-border-radius: 0 0 0 4px; - border-radius: 0 0 0 4px; -} -.table--bordered thead:last-child tr:last-child th:last-child, .table--bordered tbody:last-child tr:last-child td:last-child { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - -o-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; -} - -.table--striped tbody tr:nth-child(odd) td, .table--striped tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} - -.table tbody tr:hover td, .table tbody tr:hover th { - background-color: #f5f5f5; -} - -/* ========================================================================== - Preformatted code - Code typography styles for the and 
     elements
-   ========================================================================== */
-code,
-pre {
-  padding: 0 3px 2px;
-  font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 13px;
-  font-size: 0.65rem;
-  color: #d14;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  tab-size: 3;
-}
-
-code {
-  padding: 2px 4px;
-  color: #d14;
-  background-color: #fbefc0;
-}
-
-pre {
-  display: block;
-  padding: 13.5px;
-  margin: 0 0 14px;
-  line-height: 1.4;
-  color: #222;
-  background-color: #f7f7f9;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-  word-wrap: break-word;
-}
-pre.prettyprint {
-  margin-bottom: 28px;
-}
-pre code {
-  padding: 0;
-  color: #222;
-  background-color: #f7f7f9;
-  border: 0;
-}
-
-.pre--scrollable {
-  max-height: 340px;
-  overflow-y: scroll;
-}
-
-.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: #fff;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-.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;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset;
-}
-.btn.disabled, .tabs a.disabled, .btn[disabled], .tabs a[disabled] {
-  cursor: default;
-  background-image: none;
-  zoom: 1;
-  filter: alpha(opacity=65);
-  opacity: 0.65;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  -o-box-shadow: none;
-  box-shadow: none;
-}
-
-.btn--large {
-  font-size: 23px;
-  font-size: 1.15rem;
-  line-height: 3;
-  height: 3em;
-  padding-right: 2em;
-  padding-left: 2em;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  -o-border-radius: 6px;
-  border-radius: 6px;
-}
-
-.btn--small {
-  font-size: 13px;
-  font-size: 0.65rem;
-  line-height: 1.5;
-  height: 1.5em;
-  padding-right: 0.75em;
-  padding-left: 0.75em;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-}
-
-.btn--pill {
-  padding-left: 1.5em;
-  padding-right: 1.5em;
-  -webkit-border-radius: 100em;
-  -moz-border-radius: 100em;
-  -o-border-radius: 100em;
-  border-radius: 100em;
-}
-
-.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%;
-}
-
-.btn--natural {
-  vertical-align: baseline;
-  font-size: inherit;
-  line-height: inherit;
-  height: auto;
-  padding-right: 0.5em;
-  padding-left: 0.5em;
-}
-
-.btn--primary {
-  background-color: #3498db;
-  color: #fff !important;
-  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
-}
-.btn--primary:hover {
-  background-color: #2c3e50;
-}
-
-.btn--link,
-.btn--link:active,
-.btn--link[disabled] {
-  background-color: transparent;
-  background-image: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  -o-box-shadow: none;
-  box-shadow: none;
-}
-
-.btn--link {
-  border-color: transparent;
-  cursor: pointer;
-  color: #3498db;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  -o-border-radius: 0;
-  border-radius: 0;
-}
-
-.btn--link:hover,
-.btn--link:focus {
-  color: #196090;
-  text-decoration: underline;
-  background-color: transparent;
-}
-
-.btn--link[disabled]:hover,
-.btn--link[disabled]:focus {
-  color: #333;
-  text-decoration: none;
-}
-
-/*
-   Close Button: for lightboxes etc
-   ========================================================================== */
-.btn-close {
-  position: absolute;
-  right: 20px;
-  top: 20px;
-  display: block;
-  height: 20px;
-  width: 20px;
-  line-height: 17px;
-  background: #000;
-  color: #3498db;
-  text-align: center;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.btn-close:hover {
-  color: #fff;
-  -webkit-border-radius: 50px;
-  -moz-border-radius: 50px;
-  -o-border-radius: 50px;
-  border-radius: 50px;
-}
-
-/*
-	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%;
-}
-
-/*
-	Centred lists
-
-	
      
-		
    • 
-	
    
-	========================================================================== */
-.l-list--centred, .l-list--centered {
-  text-align: center;
-}
-.l-list--centred li, .l-list--centered li {
-  display: inline;
-}
-
-/*
-	Floated lists
-
-	
      
-		
    • 
-	
    
-	========================================================================== */
-.l-list--floated {
-  zoom: 1;
-}
-.l-list--floated:before, .l-list--floated:after {
-  display: table;
-  content: " ";
-}
-.l-list--floated:after {
-  clear: both;
-}
-.l-list--floated li {
-  float: left;
-  display: inline-block;
-}
-
-/*
-	Wells
-
-	Use the well as a simple effect on an element to give it an inset effect
-	
    
-	========================================================================== */
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #eee;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.well--large {
-  padding: 24px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  -o-border-radius: 6px;
-  border-radius: 6px;
-}
-
-.well--small {
-  padding: 9px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-}
-
-/*
-	Tabs
-
-	* Usage:
-	
-
-	
-	
      
-		
    • 
-			Tab 1 content
-		
      • 
-
-		
    • 
-			Tab 2 content
-		
      • 
-	
    
-	========================================================================== */
-.tabs {
-  zoom: 1;
-  margin-bottom: 28px;
-  border-bottom: 2px solid #1abc9c;
-}
-.tabs:before, .tabs:after {
-  display: table;
-  content: " ";
-}
-.tabs:after {
-  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;
-  -webkit-border-radius: 4px 4px 0 0;
-  -moz-border-radius: 4px 4px 0 0;
-  -o-border-radius: 4px 4px 0 0;
-  border-radius: 4px 4px 0 0;
-  color: #fff;
-}
-.tabs a.is-active {
-  background-color: #1abc9c;
-}
-
-.l-tabsContent > li {
-  display: none;
-}
-.l-tabsContent > li.is-active {
-  display: block;
-}
-
-/*
-	Media Object
-
-	* Place any image- and text-like content side-by-side, as per:
-	* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
-	*
-	** Image is optional **
-	*
-	* Markup:
-	*
-	
    
-		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
-	
    
-	========================================================================== */
-.media {
-  display: block;
-  padding: 20px 0;
-}
-
-/*
-   Add image to left or right
-   ========================================================================== */
-.media-img {
-  margin-right: 28px;
-}
-
-/**
- * Reversed image location (right instead of left).
- */
-.media-img--rev {
-  float: right;
-  margin-left: 28px;
-}
-
-.media-img img,
-.media-img--rev img {
-  display: block;
-}
-
-.media-body {
-  overflow: hidden;
-}
-
-.media-body,
-.media-body > :last-child {
-  margin-bottom: 0;
-}
-
-@media screen and (min-width: 25em) {
-  .media {
-    padding: 35px 0;
-  }
-
-  .media--zeroTopPad {
-    padding-top: 0;
-  }
-
-  .media-img {
-    float: left;
-  }
-}
-/*
-	Media Object
-
-	* Place any image- and text-like content side-by-side, as per:
-	* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
-	* E.g.:
-	*
-	
    
-		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
-	
    
-	========================================================================== */
-.media {
-  display: block;
-}
-
-.media-img {
-  float: left;
-  margin-right: 28px;
-}
-
-/**
- * Reversed image location (right instead of left).
- */
-.media-img--rev {
-  float: right;
-  margin-left: 28px;
-}
-
-.media-img img,
-.media-img--rev img {
-  display: block;
-}
-
-.media-body {
-  overflow: hidden;
-}
-
-.media-body,
-.media-body > :last-child {
-  margin-bottom: 0;
-}
-
-/**
- * Consider moving images and floats so only wide viewports see them
- */
-/*
-   Fluid width video
-   * 16:9 aspect ratio by default
-   * Usage:
-   *