From caefcce7296fc287ceba35aaac645991ac1d60a9 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Thu, 10 Mar 2016 11:13:54 -0500 Subject: [PATCH] Cleanup SCSS --- _assets/css/_elements.scss | 166 --------------- _assets/css/_forms.scss | 140 ++++++------ _assets/css/_grid.scss | 9 - _assets/css/_mixins.scss | 403 ++++++----------------------------- _assets/css/_normalize.scss | 398 ---------------------------------- _assets/css/_page.scss | 227 ++++---------------- _assets/css/_reset.scss | 170 +++++++++++++++ _assets/css/_site.scss | 18 +- _assets/css/_syntax.scss | 4 +- _assets/css/_toc.scss | 68 ++++++ _assets/css/_typography.scss | 151 ------------- _assets/css/_utilities.scss | 200 +++++++++++++++++ _assets/css/_variables.scss | 80 ++++--- _assets/css/main.scss | 12 +- _base.scss | 290 +++++++++++++++++++++++++ _buttons.scss | 127 +++++++++++ _data/ui-text.yml | 1 + _includes/social-share | 14 +- _includes/toc | 10 +- _layouts/single.html | 9 +- assets/css/main.css | 2 +- 21 files changed, 1114 insertions(+), 1385 deletions(-) delete mode 100644 _assets/css/_elements.scss delete mode 100644 _assets/css/_normalize.scss create mode 100644 _assets/css/_reset.scss create mode 100644 _assets/css/_toc.scss delete mode 100644 _assets/css/_typography.scss create mode 100644 _assets/css/_utilities.scss create mode 100644 _base.scss create mode 100644 _buttons.scss diff --git a/_assets/css/_elements.scss b/_assets/css/_elements.scss deleted file mode 100644 index 6d97d6c4..00000000 --- a/_assets/css/_elements.scss +++ /dev/null @@ -1,166 +0,0 @@ -/* - Rules - ========================================================================== */ - -hr { - display: block; - margin: 1em 0; - padding: 0; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - border-bottom: 1px solid #fff; -} - -/* - Figures and images - ========================================================================== */ - -figure { - margin-bottom: $indent-var; -} - -article img { - max-width: 100%; - height: auto; - border-width: 0; - vertical-align: middle; - -ms-interpolation-mode: bicubic; -} - -svg:not(:root) { - overflow: hidden; -} - -/* 2 images of equal dimensions in a row */ - -.half { - @include container; - @include clearfix; - @include breakpoint($micro) { - img { - @include grid(12,6); - } - figcaption { - @include grid(12,12); - } - } -} - -/* 3 images of equal dimensions in a row */ - -.third { - @include container; - @include clearfix; - @include breakpoint($micro) { - img { - @include grid(12,4); - } - figcaption { - @include grid(12,12); - } - } -} - -/* - Buttons - ========================================================================== */ - -/* Default button */ - -.btn { - display: inline-block; - margin-bottom: 20px; - padding: 8px 20px; - @include font-rem(14); - font-family: $sans-serif-narrow; - font-weight: 700; - background-color: $primary; - color: $white; - border-width: 2px !important; - border-style: solid !important; - border-color: $primary; - text-decoration: none !important; - @include rounded(3px); - &:visited { - color: $white; - } - &:hover { - background-color: $white; - color: $primary; - } -} - -/* Success button */ - -.btn-success { - background-color: $success; - color: $white; - border-color: $success; - &:visited { - color: $white; - } - &:hover { - background-color: $white; - color: $success; - } -} - -/* Warning button */ - -.btn-warning { - background-color: $warning; - color: $white; - border-color: $warning; - &:visited { - color: $white; - } - &:hover { - background-color: $white; - color: $warning; - } -} - -/* Danger button */ - -.btn-danger { - background-color: $danger; - color: $white; - border-color: $danger; - &:visited { - color: $white; - } - &:hover { - background-color: $white; - color: $danger; - } -} - -/* Information button */ - -.btn-info { - background-color: $info; - color: $white; - border-color: $info; - &:visited { - color: $white; - } - &:hover { - background-color: $white; - color: $info; - } -} - -/* - Wells - ========================================================================== */ - -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #e3e3e3; - @include rounded(4px); - @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05)); -} diff --git a/_assets/css/_forms.scss b/_assets/css/_forms.scss index b23f1ee7..c44dc295 100644 --- a/_assets/css/_forms.scss +++ b/_assets/css/_forms.scss @@ -15,9 +15,9 @@ btnform { margin-bottom: 5px * 2; *margin-left: -7px; padding: 0; - color: $textcolor; + color: $text-color; border: 0; - border-bottom: 1px solid lighten($black, 80); + border-bottom: 1px solid mix(#fff, #000, 80%); white-space: normal; } p { @@ -45,13 +45,13 @@ button, select, textarea { font-family: $serif; - @include box-sizing(border-box); + box-sizing: border-box; } label { display: block; margin-bottom: 10px / 8; font-weight: bold; - color: $textcolor; + color: $text-color; cursor: pointer; input, textarea, @@ -66,11 +66,11 @@ select { width: 100%; padding: 4px; margin-bottom: 5px / 4; - background-color: $white; - border: 1px solid lighten($black, 80); - color: $textcolor; + background-color: #fff; + border: 1px solid mix(#fff, #000, 80%); + color: $text-color; &:hover { - border-color: lighten($accentcolor, 50); + border-color: mix(#fff, $accent-color, 50%); } } .input-mini { @@ -89,19 +89,19 @@ input[type="radio"] { *margin-top: 0; line-height: normal; cursor: pointer; - @include rounded(0); + border-radius: 0; border: 0 \9; } input[type="checkbox"], input[type="radio"] { - @include box-sizing(border-box); + box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="image"] { border: 0; - @include box-shadow(none); + box-shadow: none; } input[type="file"] { width: auto; @@ -110,57 +110,57 @@ input[type="file"] { border: initial; background-color: transparent; background-color: initial; - @include box-shadow(none); + box-shadow: none; } input[type="button"], input[type="reset"], input[type="submit"] { - width : auto; - height : auto; - cursor : pointer; - *overflow : visible; + width: auto; + height: auto; + cursor: pointer; + *overflow: visible; } select, input[type="file"] { - *margin-top : 4px; + *margin-top: 4px; } select { - width : auto; - background-color : $white; + width: auto; + background-color: #fff; } select[multiple], select[size] { - height : auto; + height: auto; } textarea { - @include resize(vertical); - height : auto; - overflow : auto; - vertical-align : top; + resize: vertical; + height: auto; + overflow: auto; + vertical-align: top; } input[type="hidden"] { - display : none; + display: none; } .radio, .checkbox { - padding-left : 18px; - font-weight : normal; + padding-left: 18px; + font-weight: normal; } .radio input[type="radio"], .checkbox input[type="checkbox"] { - float : left; - margin-left : -18px; + float: left; + margin-left: -18px; } .radio.inline, .checkbox.inline { - display : inline-block; - padding-top : 5px; - margin-bottom : 0; - vertical-align : middle; + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { - margin-left : 10px; + margin-left: 10px; } /* @@ -173,8 +173,8 @@ textarea[disabled], input[readonly], select[readonly], textarea[readonly] { - @include opacity(.5); - cursor : not-allowed; + opacity: 0.5; + cursor: not-allowed; } /* @@ -183,15 +183,15 @@ textarea[readonly] { input:focus, textarea:focus { - border-color : $accentcolor; - outline : 0; - outline : thin dotted \9; + border-color: $accent-color; + outline: 0; + outline: thin dotted \9; } input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { - @include box-shadow(none); + box-shadow: none; } /* @@ -200,17 +200,17 @@ select:focus { .help-block, .help-inline { - color : lighten($black, 50); + color: mix(#fff, #000, 50%); } .help-block { - display : block; - margin-bottom : 1em; - line-height : 1em; + display: block; + margin-bottom: 1em; + line-height: 1em; } .help-inline { - display : inline-block; - vertical-align : middle; - padding-left : 5px; + display: inline-block; + vertical-align: middle; + padding-left: 5px; } /* @@ -220,24 +220,24 @@ select:focus { .form-inline input, .form-inline textarea, .form-inline select { - display : inline-block; - margin-bottom : 0; + display: inline-block; + margin-bottom: 0; } .form-inline label { - display : inline-block; + display: inline-block; } .form-inline .radio, .form-inline .checkbox, .form-inline .radio { - padding-left : 0; - margin-bottom : 0; - vertical-align : middle; + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { - float : left; - margin-left : 0; - margin-right : 3px; } + float: left; + margin-left: 0; + margin-right: 3px; } /* .form-search @@ -246,28 +246,28 @@ select:focus { .form-search input, .form-search textarea, .form-search select { - display : inline-block; - margin-bottom : 0; + display: inline-block; + margin-bottom: 0; } .form-search .search-query { - padding-left : 14px; - padding-right : 14px; - margin-bottom : 0; - @include rounded(14px); + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; + border-radius: 14px; } .form-search label { - display : inline-block; + display: inline-block; } .form-search .radio, .form-search .checkbox, .form-inline .radio { - padding-left : 0; - margin-bottom : 0; - vertical-align : middle; + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; } .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { - float : left; - margin-left : 0; - margin-right : 3px; -} + float: left; + margin-left: 0; + margin-right: 3px; +} \ No newline at end of file diff --git a/_assets/css/_grid.scss b/_assets/css/_grid.scss index 16f452c9..6480f573 100644 --- a/_assets/css/_grid.scss +++ b/_assets/css/_grid.scss @@ -2,15 +2,6 @@ Grid mixins ========================================================================== */ -/* - Define number of columns in the grid - Common values would be 12, 16 or 24 - ========================================================================== */ - -$width: 100%; -$def_grid: 12; -$margin: 0; - @mixin container(){ margin:0 auto; width:$width; diff --git a/_assets/css/_mixins.scss b/_assets/css/_mixins.scss index 1b62a2f3..c403a510 100644 --- a/_assets/css/_mixins.scss +++ b/_assets/css/_mixins.scss @@ -1,376 +1,111 @@ /* ========================================================================== - Utility mixins + MIXINS ========================================================================== */ -/* - Clearfix - For clearing floats like a boss h5bp.com/q - ========================================================================== */ - -@mixin clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - /* Fixes Opera/contenteditable bug: */ - /* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */ - line-height: 0; - } - &:after { - clear: both; - } -} - -/* - Webkit-style focus - ========================================================================== */ - -@mixin tab-focus() { - /* Default */ - outline: thin dotted #333; - /* Webkit */ - outline: 5px auto -webkit-focus-ring-color; +%tab-focus { + // Default + outline: thin dotted $warning-color; + // Webkit + outline: 5px auto $warning-color; outline-offset: -2px; } /* - Center-align a block level element + em function ========================================================================== */ -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; +@function em($target, $context: $doc-font-size) { + @return ($target / $context) * 1em; } -/* ========================================================================== - Typography related mixins - ========================================================================== */ - -/* - Maintains vertical rhythm by setting a font-sizes proportional to - line-height and bottom margin - example: @font-size(16); - ========================================================================== */ - -@mixin font-size($size) { - font-size: 0px + $size; - font-size: 0rem + $size / $doc-font-size; - line-height: 0 + round($doc-line-height / $size*10000) / 10000; - margin-bottom: 0px + $doc-line-height; - margin-bottom: 0rem + ($doc-line-height / $doc-font-size); -} - -/* - Just font-size (REMs + pixel fallback) - example: @include font-rem(16); - ========================================================================== */ - -@mixin font-rem($size) { - font-size: 0px + $size; - font-size: 0rem + $size / $doc-font-size; -} - -/* - Just font-size (REMs + pixel fallback) and line-height - @include font(16); - ========================================================================== */ - -@mixin font($size) { - font-size: 0px + $size; - font-size: 0rem + $size / $doc-font-size; - line-height: 0 + round($doc-line-height / $size*10000) / 10000; -} - -/* - Hide text overflow and end with ... - ========================================================================== */ - -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Indentation variable */ - -$indent-var: 0rem + ($doc-line-height / $doc-font-size); - -/* ========================================================================== - Gradient mixins - ========================================================================== */ - -@mixin horizontal($startColor : $white, $endColor : $lightergrey) { - background-color: $endColor; - background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 - background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient(left, $startColor, $endColor); // W3C - background-repeat : repeat-x; - } - -@mixin vertical($startColor : $white, $endColor: $lightergrey) { - background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-color : $endColor; - background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 - background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient(top, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) { - background-color : $endColor; - background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 - background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient($deg, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -// .bordered(COLOR, COLOR, COLOR, COLOR); -@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { - border-top : solid 1px $top-color; - border-left : solid 1px $left-color; - border-right : solid 1px $right-color; - border-bottom : solid 1px $bottom-color; -} - -/* ========================================================================== - Rounded corners - ========================================================================== */ - - /* - Round all corners - example: @include rounded(4px); + Bourbon clearfix ========================================================================== */ -@mixin rounded($radius:4px) { - border-radius : $radius; +// Provides an easy way to include a clearfix for containing floats. +// +// @link http://cssmojo.com/latest_new_clearfix_so_far/ +// +// @example scss - Usage +// .element { +// @include clearfix; +// } +// +// @example css - CSS Output +// .element::after { +// clear: both; +// content: ""; +// display: table; +// } + +@mixin clearfix { + &::after { + clear: both; + content: ""; + display: table; + } } + /* - Round individual corners (top right, bottom right, bottom left, top left) - example: @include border-radius(4px, 0, 0, 4px); + Grid ========================================================================== */ -@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { - border-top-right-radius: $topright; - border-bottom-right-radius: $bottomright; - border-bottom-left-radius: $bottomleft; - border-top-left-radius: $topleft; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; +@mixin container() { + margin: 0 auto; + width: $width; } -/* - Box shadow - example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); - ========================================================================== */ +// Works out the width of elements based on total number of columns and width +// number of columns being displayed. Removes 20px for margins. -@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: $shadow; - -moz-box-shadow: $shadow; - box-shadow: $shadow; +@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline) { + display: $display; + float: $float; + width: (100%/$grid * $cols) - ($margin * 2); } -/* - Drop shadow - example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); - ========================================================================== */ +// Add x amount of column padding before an element +// Example: @include prefix(1,12); -@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { - -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +@mixin prefix($grid:$def_grid,$cols:'') { + margin-left: (100%/$grid * $cols); } -/* - Text shadow - example: @include text-shadow(0 2px 3px rgba(0,0,0,.25)); - ========================================================================== */ +// Add x amount of column padding after an element +// Example: @include suffix(2,12); -@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { -text-shadow: $shadow; } - -/* - Opacity - example: @include opacity(0.5); // 50% opacity - ========================================================================== */ - -@mixin opacity($opacity: 0.5) { - opacity: $opacity; +@mixin suffix($grid:$def_grid,$cols:'') { + margin-right: (100%/$grid * $cols); } -/* ========================================================================== - Transformations - ========================================================================== */ +// Remove left margin +// Example: @include first; -/* - @include rotate(VALUEdeg); - ========================================================================== */ - -@mixin rotate($deg) { - -webkit-transform: rotate($deg); - -moz-transform: rotate($deg); - -ms-transform: rotate($deg); - -o-transform: rotate($deg); - transform: rotate($deg); +@mixin first() { + margin-left: 0; } -/* - @include scale(VALUE); - ========================================================================== */ +// Remove right margin +// Example: @include last; -@mixin scale($ratio) { - -webkit-transform: scale($ratio); - -moz-transform: scale($ratio); - -ms-transform: scale($ratio); - -o-transform: scale($ratio); - transform: scale($ratio); +@mixin last() { + margin-right: 0; } -/* - @include skew(VALUE, VALUE); - ========================================================================== */ +// Push an element x amount of column(s) to the right +// Example: @include push(2,12); -@mixin skew($x: 0, $y: 0) { - -webkit-transform: skew($x, $y); - -moz-transform: skew($x, $y); - -ms-transform: skew($x, $y); - -o-transform: skew($x, $y); - transform: skew($x, $y); +@mixin push($grid:$def_grid,$move:'') { + position: relative; + left: (100%/$grid * $move); } -/* - @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); - ========================================================================== */ +// Pull an element x amount of column(s) to the left +// Example: @include pull(1,12); -@mixin transition($transition) { - -webkit-transition: $transition; - -moz-transition: $transition; - -ms-transition: $transition; - -o-transition: $transition; - transition: $transition; +@mixin pull($grid:$def_grid,$move:'') { + position: relative; + left: (100%/$grid * $move) * -1; } - -/* - @include translate(VALUE, VALUE); - ========================================================================== */ - -@mixin translate($x: 0, $y: 0) { - -webkit-transform: translate($x, $y); - -moz-transform: translate($x, $y); - -ms-transform: translate($x, $y); - -o-transform: translate($x, $y); - transform: translate($x, $y); -} - -@mixin translate3d($x: 0, $y: 0, $z: 0) { - -webkit-transform: translate($x, $y, $z); - -moz-transform: translate($x, $y, $z); - -ms-transform: translate($x, $y, $z); - -o-transform: translate($x, $y, $z); - transform: translate($x, $y, $z); -} - -@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) { - -webkit-animation: $name $duration $delay $ease; - -moz-animation: $name $duration $delay $ease; - -ms-animation: $name $duration $delay $ease; -} - -/* ========================================================================== - Background - ========================================================================== */ - -/* - @include background-alpha(VALUE VALUE); - ========================================================================== */ - -@mixin background-alpha($color: $white, $alpha: 1) { - background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); -} - -/* - @include background-size(VALUE VALUE); - ========================================================================== */ - -@mixin background-size($size){ - -webkit-background-size: $size; - -moz-background-size: $size; - -o-background-size: $size; - background-size: $size; -} - -/* - Box-sizing - example: @include box-sizing(VALUE); //(border-box, padding-box, content-box) - ========================================================================== */ - -@mixin box-sizing($boxsize: border-box) { - -webkit-box-sizing: $boxsize; - -moz-box-sizing: $boxsize; - -ms-box-sizing: $boxsize; - box-sizing: $boxsize; -} - -/* ========================================================================== - Image replacement - ========================================================================== */ - -@mixin hide-text() { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* - Hide from visual and speaking browsers - ========================================================================== */ - -@mixin hidden { - display: none; - visibility: hidden; -} - -/* - Hide but maintain layout - ========================================================================== */ - -@mixin invisible() { - visibility: hidden; -} - -/* - Resize - example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit) - - ========================================================================== */ - -@mixin resize($direction: both) { - resize: $direction; - overflow: auto; -} - -/* - Hidden but available to speaking browsers - ========================================================================== */ - -@mixin visuallyhidden() { -overflow: hidden; -position: absolute; -clip: rect(0 0 0 0); -height: 1px; -width: 1px; -margin: -1px; -padding: 0; -border: 0; } diff --git a/_assets/css/_normalize.scss b/_assets/css/_normalize.scss deleted file mode 100644 index d146f7f5..00000000 --- a/_assets/css/_normalize.scss +++ /dev/null @@ -1,398 +0,0 @@ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; -} - -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** - * 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. - */ - -img { - border: 0; -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * 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. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * 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 Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -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"], /* 1 */ -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; -} - -/** - * 1. Address box sizing set to `content-box` in IE 8/9. - * 2. Remove excess padding in IE 8/9. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; - margin-bottom: 1.5em; - width: 100%; /* make full width */ -} diff --git a/_assets/css/_page.scss b/_assets/css/_page.scss index 8a62d9d9..ac8ee17d 100644 --- a/_assets/css/_page.scss +++ b/_assets/css/_page.scss @@ -1,9 +1,9 @@ /* ========================================================================== - Page layout + SINGLE PAGE/POST ========================================================================== */ body { - background-color: $bodycolor; + background-color: $body-color; font-family: $serif; color: $text-color; } @@ -29,12 +29,12 @@ body { margin-bottom: 1em; float: none; display: block; - @include font-rem(24); + font-size: 24px; @include breakpoint($small) { @include grid(12,2); @include prefix(12,0.5); @include suffix(12,0.5); - @include font-rem(16); + font-size: 16px; } @include breakpoint($x-large) { @include grid(12,1.5); @@ -67,9 +67,9 @@ body { li { display: block; list-style-type: none; - border-bottom: 1px solid lighten($black,80); - border-bottom: 1px solid fade($black,10); - @include font-rem(16); + border-bottom: 1px solid lighten(#000,80); + border-bottom: 1px solid fade(#000,10); + font-size: 16px; &:last-child { border-bottom: 0 solid transparent; } @@ -84,7 +84,6 @@ body { padding: 10px 0; decoration: none; border-bottom: 0 solid transparent; - @include transition(all .2s); @include breakpoint($small) { display: inline; padding: 0; @@ -100,32 +99,24 @@ body { @include clearfix; clear: both; margin-top: 2em; - h1 { - margin-top: 0; +} + +.page { + @include container; + @include grid(12,10); + @include prefix(12,1); + @include suffix(12,1); + margin-bottom: 2em; + @include breakpoint($small) { + @include grid(12,8); + @include prefix(12,0); + @include suffix(12,0); } - .post { - @include container; - @include grid(12,10); - @include prefix(12,1); - @include suffix(12,1); - margin-bottom: 2em; - @include breakpoint($small) { - @include grid(12,8); - @include prefix(12,0); - @include suffix(12,0); - } - @include breakpoint($large) { - @include grid(12,6); - } - @include breakpoint($x-large) { - @include grid(12,5); - } + @include breakpoint($large) { + @include grid(12,6); } - figcaption { - padding-top: 10px; - @include font(14); - line-height: 1.3; - color: lighten($text-color, 10); + @include breakpoint($x-large) { + @include grid(12,5); } } @@ -150,22 +141,18 @@ body { h3 { margin: 0; padding-bottom: .5em; - @include font-rem(28); - border-bottom: 1px solid lighten($black,70); + font-size: 28px; + border-bottom: 1px solid mix(#fff, #000, 70%); } article { h2 { margin-bottom: 4px; - @include font-rem(20); - &.link-post { - margin-bottom: 0px + $doc-line-height; - margin-bottom: 0rem + ($doc-line-height / $doc-font-size); - } + font-size: 20px; } p { - @include font-rem(14); + font-size: 14px; } - p+p { + p + p { text-indent: 0; } } @@ -185,7 +172,7 @@ body { width: 0; height: 0; border: 10px solid transparent; - border-bottom-color: $bodycolor; + border-bottom-color: $body-color; @include breakpoint($small) { left: 25%; } @@ -245,21 +232,21 @@ body { } .author-avatar { max-width: 110px; - @include rounded(150px); + border-radius: 50%; } .author-social { display: block; margin-bottom: 5px; - @include font-rem(14); - color: $black; + font-size: 14px; + color: #000; &:visited { - color: $black; + color: #000; } &:hover { - @include scale(1.1); + transform: scale(1.1); } &:active { - @include translate(0, 2px); + transform: translate(0, 2px); } .fa { margin-right: 5px; @@ -289,76 +276,6 @@ body { } } -/* Table of contents */ -.toc { - font-size: 95%; - @include breakpoint($large) { - display: block; - @include grid(12,2); - @include prefix(12,0.5); - @include suffix(12,0.5); - position: absolute; - top: 5.5em; - right: 0; - background-color: $white; - } - header { - background: lighten($black, 10); - } - h3 { - margin: 0; - padding: 5px 10px; - color: $white; - @include font-rem(16); - text-transform: uppercase; - &:hover { - cursor: pointer; - } - } - ul { - margin: 2px 0 0; - padding: 0; - line-height: 1; - } - li { - display: block; - margin: 0 0 1px 0; - padding: 0; - font-family: $sans-serif-narrow; - list-style-type: none; - &:last-child { - border-bottom-width: 0; - } - a { - padding: 10px; - display: block; - color: $white; - text-decoration: none; - background: lighten($black, 30); - @include opacity(0.7); - @include transition(opacity 0.2s ease-in-out); - &:hover { - @include opacity(1); - } - } - ul { - margin: 1px 0 0; - li a { - padding-left: 20px; - } - } - } -} - -/* TOC trigger for collapsing */ -#drawer { - max-height: 100%; - overflow: hidden; - &.js-hidden { - max-height: 0; - } -} - /* Image grid - not used */ .image-grid { @include clearfix; @@ -403,59 +320,9 @@ body { } /* Social sharing links */ -/* Social media brand buttons */ .social-share { - margin-bottom: 0px + $doc-line-height; - margin-bottom: 0rem + ($doc-line-height / $doc-font-size); - ul, li { - margin: 0; - padding: 0; - list-style: none; - } - li { - display: inline-block; - } - $social: - (facebook, $facebook-color), - (flickr, $flickr-color), - (foursquare, $foursquare-color), - (google-plus, $google-plus-color), - (instagram, $instagram-color), - (linkedin, $linkedin-color), - (pinterest, $pinterest-color), - (rss, $rss-color), - (tumblr, $tumblr-color), - (twitter, $twitter-color), - (vimeo, $vimeo-color), - (youtube, $youtube-color); - @each $socialnetwork, $color in $social { - .#{$socialnetwork} { - background: $color; - } - } - a { - display: block; - padding: 8px 20px; - text-decoration: none !important; - text-transform: uppercase; - @include font-rem(14); - font-family: $sans-serif-narrow; - font-weight: 700; - color: $white; - opacity: 0.8; - &:hover { - opacity: 1; - } - } - span { - display: none; - @include breakpoint($medium) { - display: inline; - padding-left: 5px; - } - } h4 { - @include font-rem(14); + font-size: 14px; margin-bottom: 10px; text-transform: uppercase; } @@ -469,7 +336,7 @@ body { clear: both; padding-bottom: 3em; .copyright { - @include font-rem(14); + font-size: 14px; } footer { @include grid(12,10); @@ -539,13 +406,13 @@ body { margin: 0 0 2em 0; padding: 10px; text-align: center; - color: $white; + color: #fff; a { - color: $white; - border-bottom: 1px dotted $white; + color: #fff; + border-bottom: 1px dotted #fff; text-decoration: none; &:hover { - border-bottom: 1px solid $white; + border-bottom: 1px solid #fff; } } } @@ -570,13 +437,13 @@ body { margin-bottom: 20px; padding: 8px 20px; display: inline-block; - @include font-rem(14); - background-color: $white; - color: $black; + font-size: 14px; + background-color: #fff; + color: #000; border-width: 2px !important; border-style: solid !important; - border-color: lighten($black,50); - @include rounded(3px); + border-color: lighten(#000,50); + border-radius: $border-radius; } #goog-wm-sb { @extend .btn; @@ -605,7 +472,7 @@ body { .pagination { padding-top: 0.5em; - border-top: 1px solid lighten($black,70); + border-top: 1px solid mix(#fff, #000, 70%); ul { margin: 0; padding: 0; diff --git a/_assets/css/_reset.scss b/_assets/css/_reset.scss new file mode 100644 index 00000000..1bea5e80 --- /dev/null +++ b/_assets/css/_reset.scss @@ -0,0 +1,170 @@ +/* ========================================================================== + STYLE RESETS + ========================================================================== */ + +html { + /* apply a natural box layout model to all elements */ + box-sizing: border-box; + background-color: $background-color; + font-size: 15px; + @include breakpoint($medium) { + font-size: 16px; + } + @include breakpoint($large) { + font-size: 18px; + } + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* apply a natural box layout model to all elements */ +*, *:before, *:after { + box-sizing: inherit; +} + +/* Remove margin */ + +body { margin: 0; } + +/* Selected elements */ + +::selection { + color: #fff; + background: #000; +} + +/* Display HTML5 elements in IE6-9 and FF3 */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; +} + +/* Display block in IE6-9 and FF3 */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* Prevents modern browsers from displaying 'audio' without controls */ + +audio:not([controls]) { + display: none; +} + +/* Remove blue color */ +a { + color: inherit; +} + +/* Apply focus state */ + +a:focus { + @extend %tab-focus; +} + +/* Remove outline from links */ + +a:hover, +a:active { + outline: 0; +} + +/* Prevent sub and sup affecting line-height in all browsers */ + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/* img border in anchor's and image quality */ + +img { + /* Responsive images (ensure images don't scale beyond their parents) */ + max-width: 100%; // part 1: Set a maximum relative to the parent + width: auto\9; // IE7-8 need help adjusting responsive images + height: auto; // part 2: Scale the height according to the width, otherwise you get stretching + + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; +} + +/* Prevent max-width from affecting Google Maps */ + +#map_canvas img, +.google-maps img { + max-width: none; +} + +/* Consistent form font size in all browsers, margin changes, misc */ + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} +button, +input { + *overflow: visible; // inner spacing ie IE6/7 + line-height: normal; // FF3/4 have !important on line-height in UA stylesheet +} +button::-moz-focus-inner, +input::-moz-focus-inner { // inner padding and border oddities in FF3/4 + padding: 0; + border: 0; +} +button, +html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // corrects inability to style clickable `input` types in iOS + cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others +} +label, +select, +button, +input[type="button"], +input[type="reset"], +input[type="submit"], +input[type="radio"], +input[type="checkbox"] { + cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others +} +input[type="search"] { // Appearance in Safari/Chrome + box-sizing: content-box; + -webkit-appearance: textfield; +} +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; // inner-padding issues in Chrome OSX, Safari 5 +} +textarea { + overflow: auto; // remove vertical scrollbar in IE6-9 + vertical-align: top; // readability and alignment cross-browser +} diff --git a/_assets/css/_site.scss b/_assets/css/_site.scss index 781ee146..ba9e7e04 100644 --- a/_assets/css/_site.scss +++ b/_assets/css/_site.scss @@ -7,13 +7,13 @@ ========================================================================== */ ::-moz-selection { - background-color: lighten($basecolor, 65%); - color: $basecolor; + background-color: mix(#fff, $base-color, 65%); + color: $base-color; text-shadow: none; } ::selection { - background-color: lighten($basecolor, 65%); - color: $basecolor; + background-color: mix(#fff, $base-color, 65%); + color: $base-color; text-shadow: none; } @@ -61,12 +61,4 @@ li { list-style-type: none; } -} - -/* - Global transition - ========================================================================== */ - -b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { - @include transition(all .2s ease); -} +} \ No newline at end of file diff --git a/_assets/css/_syntax.scss b/_assets/css/_syntax.scss index 1a592250..6d05bf6b 100644 --- a/_assets/css/_syntax.scss +++ b/_assets/css/_syntax.scss @@ -5,12 +5,12 @@ div.highlighter-rouge { margin-bottom: 1em; padding: 1em; - border: 1px solid #ddd; + border: 1px solid $border-color; border-radius: $border-radius; .highlight { margin: 0; font-family: $monospace; - @include font-rem(12); + font-size: 12px; line-height: 1.5; } } diff --git a/_assets/css/_toc.scss b/_assets/css/_toc.scss new file mode 100644 index 00000000..36778dd4 --- /dev/null +++ b/_assets/css/_toc.scss @@ -0,0 +1,68 @@ +/* ========================================================================== + TABLE OF CONTENTS + ========================================================================== */ + +.toc { + padding: 0 1em 1em; + font-family: $sans-serif-narrow; + border-top: 8px solid $gray; + @include breakpoint($large) { + display: block; + @include grid(12,2); + @include prefix(12,0.5); + @include suffix(12,0.5); + position: absolute; + top: 5.5em; + right: 0; + } +} + +.toc__title { + margin: 1em 0; + font-family: $serif; + font-size: 18px; + color: $gray; +} + +.toc__menu { + padding-left: 0; + font-size: 14px; + border-bottom: 2px solid #e2e2e2; + ul { + @include clearfix(); + > li { + padding: 5px 0; + font-weight: normal; + &:before { + content: "\2192"; + width: 20px; + } + &:not(:last-child) { + border-bottom: 1px solid $light-gray; + } + } + } + li { + clear: both; + display: block; + font-weight: bold; + &:before { + display: block; + float: left; + margin-right: 10px; + margin-bottom: 5px; + width: 10px; + font-weight: bold; + } + a { + display: block; + &:hover { + text-decoration: underline; + } + } + } + > li { + padding: 5px 0; + border-top: 2px solid $light-gray; + } +} diff --git a/_assets/css/_typography.scss b/_assets/css/_typography.scss deleted file mode 100644 index 4a13c174..00000000 --- a/_assets/css/_typography.scss +++ /dev/null @@ -1,151 +0,0 @@ -/* ========================================================================== - Typography - ========================================================================== */ - -/* - Headings - ========================================================================== */ - -h1, h2, h3, h4, h5, h6 { - font-family: $serif; -} -h1 { - @include font-size(32); -} -h2 { - @include font-size(28); -} -h3 { - @include font-size(24); -} -h4 { - @include font-size(18); -} -h5 { - @include font-size(16); -} -h6 { - @include font-size(14); -} - -/* - Links - ========================================================================== */ - -a { - text-decoration: none; - color: $link-color; - &:visited { - color: $linkcolorvisited; - } - &:hover { - color: $linkcolorhover; - } - &:focus { - outline: thin dotted; - color: $linkcolorfocus; - } - &:hover, - &:active { - outline: 0; - } -} - -/* - Feature image captions - ========================================================================== */ - -.image-caption { - @include grid(12,10); - @include prefix(12,1); - @include suffix(12,1); - display: block; - text-align: right; - @include font(12); - line-height: 1.3; - font-style: italic; - color: lighten($text-color, 30); - @include breakpoint($small) { - @include grid(12,9); - @include prefix(12,0); - @include suffix(12,0); - } - @include breakpoint($x-large) { - @include grid(12,8.5); - } - a { - color: lighten($text-color, 30); - } -} - -/* - Notices - ========================================================================== */ - -.notice { - margin-top: 1.5em; - padding: .5em 1em; - text-indent: 0; - @include font-rem(14); - background-color: $body-color; - border: 1px solid darken($body-color,20); - @include rounded(3px); -} - -/* - Blockquotes - ========================================================================== */ - -blockquote { - margin-left: -28px; - padding-left: 20px; - border-left: 8px solid $border-color; - font-family: $serif; - font-style: italic; -} - -/* - Footnotes - ========================================================================== */ - -.footnotes { - ol, li, p { - margin-bottom: 0; - @include font-rem(14); - } -} - -/* - Paragraphs - ========================================================================== */ - -p { - margin: 0 0 $indent-var; - // sibling indentation - @if $paragraph-indent == true { - & + p { - text-indent: $indent-var; - margin-top: -($indent-var); - } - } -} - -/* - Code snippets - ========================================================================== */ - -tt, code, kbd, samp, pre { - font-family: $monospace; -} -p, -li { - code { - @include font-rem(12); - line-height: 1.5; - } -} -pre { - @include font-rem(12); - line-height: 1.5; - overflow-x: auto; -} diff --git a/_assets/css/_utilities.scss b/_assets/css/_utilities.scss new file mode 100644 index 00000000..3ebc3280 --- /dev/null +++ b/_assets/css/_utilities.scss @@ -0,0 +1,200 @@ +/* ========================================================================== + UTILITY CLASSES + ========================================================================== */ + +/* + Visibility + ========================================================================== */ + +/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */ + +.hidden { + display: none; + visibility: hidden; +} + +/* for preloading images */ + +.load { + display: none; +} + +.transparent { + opacity: 0; +} + +/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */ + +.visually-hidden, +.screen-reader-text, +.screen-reader-text span, +.screen-reader-shortcut { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + height: 1px !important; + width: 1px !important; + border: 0 !important; + overflow: hidden; +} + +body:hover .visually-hidden a, +body:hover .visually-hidden input, +body:hover .visually-hidden button { + display: none !important; +} + +/* screen readers */ + +.screen-reader-text:focus, +.screen-reader-shortcut:focus { + clip: auto !important; + height: auto !important; + width: auto !important; + display: block; + font-size: 1em; + font-weight: bold; + padding: 15px 23px 14px; + background: #fff; + z-index: 100000; + text-decoration: none; + box-shadow: 0 0 2px 2px rgba(0,0,0,.6); +} + + +/* + Skip links + ========================================================================== */ + +.skip-link { + position: fixed; + z-index: 20; + margin: 0; + font-family: $sans-serif; + white-space: nowrap; +} + +.skip-link li { + height: 0; + width: 0; + list-style: none; +} + + +/* + Type + ========================================================================== */ + +/* center align */ + +.center { + text-align: center; +} + + +/* + Alignment + ========================================================================== */ + +.float-left { + clear: right; + @include breakpoint($large) { + float: left; + clear: none; + } +} + +.float-right { + clear: left; + @include breakpoint($large) { + float: right; + clear: none; + } +} + +/* clearfix */ + +.cf { clear: both; } + + +/* + Images + ========================================================================== */ + +/* image align left */ + +.image-left { + display: block; + margin-left: auto; + margin-right: auto; + @include breakpoint($small) { + float: left; + margin-right: 1em; + } +} + +/* image align right */ + +.image-right { + display: block; + margin-left: auto; + margin-right: auto; + @include breakpoint($small) { + float: right; + margin-left: 1em; + } +} + + +/* + Icons + ========================================================================== */ + +.icon { + display: inline-block; + fill: currentColor; + width: 1em; + height: 1.1em; + line-height: 1; + position: relative; + top: -0.1em; + vertical-align: middle; +} + + +/* + Sticky, fixed to top content + ========================================================================== */ + +.sticky { + @include clearfix(); + position: -webkit-sticky; + position: sticky; + top: 80px; +} + + +/* + Wells + ========================================================================== */ + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: $border-radius; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} + + +/* + Footnotes + ========================================================================== */ + +.footnotes { + ol, li, p { + margin-bottom: 0; + font-size: 14px; + } +} diff --git a/_assets/css/_variables.scss b/_assets/css/_variables.scss index 97e16b29..e4d88834 100644 --- a/_assets/css/_variables.scss +++ b/_assets/css/_variables.scss @@ -6,37 +6,40 @@ Typography ========================================================================== */ -$doc-font-size: 16; -$doc-line-height: 26; -$paragraph-indent: true !default; +$doc-font-size : 16; +$doc-line-height : 26; +$paragraph-indent : true !default; +$indent-var : 0rem + ($doc-line-height / $doc-font-size); + +$serif : "PT Serif", serif; +$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; +$sans-serif-narrow : "PT Sans Narrow", sans-serif; +$monospace : Monaco, Consolas, "Lucida Console", monospace; -$serif : "PT Serif", serif; -$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; -$sans-serif-narrow : "PT Sans Narrow", sans-serif; -$monospace : Monaco, Consolas, "Lucida Console", monospace; /* Colors ========================================================================== */ -$bodycolor : #fff; -$body-color : $bodycolor; -$textcolor : #333332; -$text-color : $textcolor; -$border-color : $text-color; -$basecolor : #343434; -$compcolor : spin($basecolor, 180); -$bordercolor : $basecolor; -$white : #fff; -$black : #111; -$accentcolor : $black; +$gray : #4c4c4c; +$dark-gray : #191413; +$light-gray : #e2e2e2; +$lighter-gray : #f9f9f9; + +$body-color : #fff; +$background-color : #fff; +$text-color : #333332; +$border-color : $light-gray; +$base-color : #343434; +$comp-color : spin($base-color, 180); +$accent-color : #000; /* buttons */ -$primary : $black; -$success : #5cb85c; -$warning : #dd8338; -$danger : #C64537; -$info : #308cbc; +$primary-color : #000; +$success-color : #5cb85c; +$warning-color : #dd8338; +$danger-color : #C64537; +$info-color : #308cbc; /* brands */ $facebook-color : #3b5998; @@ -53,13 +56,22 @@ $vimeo-color : #1ab7ea; $youtube-color : #ff3333; /* links */ -$linkcolor : #343434; -$link-color : $linkcolor; -$linkcolorhover : darken($linkcolor, 10); -$linkcolorvisited : lighten($linkcolorhover, 20); -$linkcolorfocus : darken($linkcolorvisited, 10); +$link-color : #343434; +$link-color-hover : darken($link-color, 10); +$link-color-visited : lighten($link-color-hover, 20); +$link-color-focus : darken($link-color-visited, 10); + +$border-radius : 4px; + + +/* + Grid + ========================================================================== */ + +$width : 100%; +$def_grid : 12; // define number of columns in the grid (eg. 12, 16...) +$margin : 0; -$border-radius : 4px; /* Breakpoints @@ -67,8 +79,8 @@ $border-radius : 4px; @include breakpoint-set("to ems", true); -$micro : 480px; -$small : 600px; -$medium : 768px; -$large : 992px; -$x-large : 1382px; \ No newline at end of file +$micro : 480px; +$small : 600px; +$medium : 768px; +$large : 992px; +$x-large : 1382px; \ No newline at end of file diff --git a/_assets/css/main.scss b/_assets/css/main.scss index 5724abf3..aabd0ff2 100644 --- a/_assets/css/main.scss +++ b/_assets/css/main.scss @@ -9,13 +9,15 @@ @import "vendor/breakpoint/breakpoint"; // media query mixins @import "variables"; -@import "grid"; @import "mixins"; -@import "normalize"; -@import "site"; -@import "typography"; + +@import "reset"; +@import "base"; +@import "utilities"; +@import "buttons"; +@import "toc"; // table of contents + @import "syntax"; -@import "elements"; @import "forms"; @import "page"; @import "vendor/font-awesome/font-awesome"; diff --git a/_base.scss b/_base.scss new file mode 100644 index 00000000..3bdb4068 --- /dev/null +++ b/_base.scss @@ -0,0 +1,290 @@ +/* ========================================================================== + BASE ELEMENTS + ========================================================================== */ + +/* + Typography + ========================================================================== */ + +body { + margin: 0; + padding: 0; + color: $text-color; + font-family: $serif; + line-height: 1.5; + &.overflow--hidden { + /* when primary navigation is visible, the content in the background won't scroll */ + overflow: hidden; + } +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.25; + font-family: $sans-serif; +} + +h1 { + font-size: 32px; +} +h2 { + font-size: 28px; +} +h3 { + font-size: 24px; +} +h4 { + font-size: 18px; +} +h5 { + font-size: 16px; +} +h6 { + font-size: 14px; +} + +small { + font-size: 0.8rem; +} + +u, +ins { + text-decoration: none; + border-bottom: 1px solid $text-color; + a { + color: inherit; + } +} + +del a { + color: inherit; +} + +/* paragraph indents */ + +p { + margin: 0 0 $indent-var; + // sibling indentation + @if $paragraph-indent == true { + & + p { + text-indent: $indent-var; + margin-top: -($indent-var); + } + } +} + +/* reduce orphans and widows when printing */ + +p, pre, blockquote, ul, ol, dl, figure, table, fieldset { + orphans: 3; + widows: 3; +} + +/* Abbreviations */ + +abbr[title], +abbr[data-original-title] { + text-decoration: none; + cursor: help; + border-bottom: 1px dotted $text-color; +} + +/* Blockquotes */ + +blockquote { + margin: 2em 1em 2em 0; + padding-left: 1em; + padding-right: 1em; + font-style: italic; + border-left: 0.25em solid $accent-color; + a { + color: inherit; + } + cite { + font-family: $sans-serif; + font-size: 14px; + font-style: normal; + &:before { + content: "\2014"; + padding-right: 5px; + } + } +} + +/* Links */ + +a { + text-decoration: none; + &:focus { + @extend %tab-focus; + } + &:hover, + &:active { + outline: 0; + } +} + +/* Lists */ + +ol, ul { + @include breakpoint($small) { + padding-left: 0; + ol, ul { + padding: 0.5em 1em; + } + } +} + +/* Code */ + +tt, code, kbd, samp, pre { + font-family: $monospace; + font-size: 14px; +} +pre { + overflow-x: auto; // add scrollbars to wide code blocks +} +p code, +li code, +figcaption code { + padding-top: 0.1rem; + padding-bottom: 0.1rem; + background: mix(#fff, $light-gray, 40%); + border: 1px solid $light-gray; + border-radius: $border-radius; + &:before, &:after { + letter-spacing: -0.2em; + content: "\00a0"; // non-breaking space + } +} + +/* Horizontal rule */ + +hr { + display: block; + margin: 1em 0; + border: 0; + border-top: 1px solid $border-color; +} + +/* + Media and embeds + ========================================================================== */ + +/* Figures and images */ + +figure { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + margin: 2em 0; + img, + iframe, + .fluid-width-video-wrapper { + margin-bottom: 1em; + } + img { + width: 100%; + border-radius: $border-radius; + transition: box-shadow 0.3s; + } + > a { + display: block; + // image hover animation + &:hover { + img { + box-shadow: 0 0 10px rgba(#000, 0.20); + } + } + } + &.half { + > a, + > img { + @include breakpoint($small) { + width: calc(50% - 0.5em); + } + } + figcaption { + width: 100%; + } + } + &.third { + > a, + > img { + @include breakpoint($small) { + width: calc(33.3333% - 0.5em); + } + } + figcaption { + width: 100%; + } + } +} + +/* Figure captions */ + +figcaption { + margin-bottom: 0.65rem; + color: mix(#fff, $text-color, 25%); + font-family: $sans-serif; + font-size: 0.8rem; + a { + color: inherit; + text-decoration: none; + border-bottom: 1px solid $light-gray; + transition: border 0.4s ease-in-out; + &:hover { + color: #000; + border-bottom-color: #000; + } + } + code { + font-size: 0.64rem; + } +} + + +/* Fix IE9 SVG bug */ + +svg:not(:root) { + overflow: hidden; +} + + +/* + Navigation lists + ========================================================================== */ + +/** + * Removes margins, padding, and bullet points from navigation lists + * + * Example usage: + * + */ + +nav { + ul { + margin: 0; + padding: 0; + } + li { + list-style: none; + } + a { + text-decoration: none; + } +} + +/* + Global animation transition + ========================================================================== */ + +b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item, .archive__item-thumb, .archive__item-body, .palette__swatch { + transition: all 0.2s ease-in-out; +} \ No newline at end of file diff --git a/_buttons.scss b/_buttons.scss new file mode 100644 index 00000000..19860e10 --- /dev/null +++ b/_buttons.scss @@ -0,0 +1,127 @@ +/* ========================================================================== + BUTTONS + ========================================================================== */ + +/* + Default button + ========================================================================== */ + +.btn { + /* default button */ + display: inline-block; + margin-bottom: 0.25em; + padding: 10px 20px; + color: #fff !important; + font-family: $sans-serif; + font-size: 0.8rem; + font-weight: bold; + line-height: 1.5; + text-align: center; + background-color: #000; + border: 0 !important; + border-radius: $border-radius; + cursor: pointer; + &:active { + // move button slightly on click + transform: translateY(1px); + } + &:hover { + background-color: mix(white, #000, 20%); + } + .icon { + margin-right: 0.5em; + } + .icon + .hidden { + margin-left: -0.5em; // override for hidden text + } + + /* fills width of parent container */ + + &--block { + display: block; + width: 100%; + + .btn--block { + margin-top: 0.25em; + } + } + + /* for dark backgrounds */ + + &--inverse { + color: #000 !important; + background-color: #fff; + &:hover { + background-color: mix(#000, #fff, 20%); + } + } + + /* light outline */ + + &--light-outline { + border: 1px solid #fff !important; // override + background-color: transparent; + } + + /* information */ + + &--info { + background-color: $info-color; + &:hover { + background-color: mix(#000, $info-color, 20%); + } + } + + /* warning */ + + &--warning { + background-color: $warning-color; + &:hover { + background-color: mix(#000, $warning-color, 20%); + } + } + + /* success */ + + &--success { + background-color: $success-color; + &:hover { + background-color: mix(#000, $success-color, 20%); + } + } + + /* danger */ + + &--danger { + background-color: $danger-color; + &:hover { + background-color: mix(#000, $danger-color, 20%); + } + } + + /* disabled */ + + &--disabled { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; + opacity: 0.65; + } + + /* social buttons */ + + $social: + (facebook, $facebook-color), + (twitter, $twitter-color), + (google-plus, $google-plus-color); + + @each $socialnetwork, $color in $social { + &--#{$socialnetwork} { + background-color: $color; + &:hover { + background-color: mix(#000, $color, 20%); + } + } + } +} diff --git a/_data/ui-text.yml b/_data/ui-text.yml index b9467303..e813e75a 100644 --- a/_data/ui-text.yml +++ b/_data/ui-text.yml @@ -6,6 +6,7 @@ en: &DEFAULT_EN pagination_previous: "Previous" pagination_next: "Next" toc_label: "Overview" + ext_link_label: "Direct Link" share_on: "Share on" date_label: "Last Updated:" related_label: "You May Also Enjoy" diff --git a/_includes/social-share b/_includes/social-share index 49d512dc..b4853f90 100644 --- a/_includes/social-share +++ b/_includes/social-share @@ -1,14 +1,6 @@

{{ site.data.ui-text[site.locale].share_on }}

- + + + Google+
\ No newline at end of file diff --git a/_includes/toc b/_includes/toc index 967437df..a4afbd82 100644 --- a/_includes/toc +++ b/_includes/toc @@ -1,7 +1,7 @@ -
-

{{ include.title | default: site.data.ui-text[site.locale].toc_label }}

-
+
+

{{ include.title | default: site.data.ui-text[site.locale].toc_label }}

+
+{:toc .toc__menu} +
\ No newline at end of file diff --git a/_layouts/single.html b/_layouts/single.html index 513cd695..d69ad8bb 100644 --- a/_layouts/single.html +++ b/_layouts/single.html @@ -4,22 +4,19 @@ layout: default {% include base_path %} -
+
{% if page.excerpt %}{% endif %} {% if page.date %}{% endif %} {% if page.modified %}{% endif %}
- {% if page.link %} -

{{ page.title | markdownify | remove: "

" | remove: "

" }}

- {% else %} -

{{ page.title | markdownify | remove: "

" | remove: "

" }}

- {% endif %} +

{{ page.title | markdownify | remove: "

" | remove: "

" }}

{{ content }} + {% if page.link %}{% endif %}
diff --git a/assets/css/main.css b/assets/css/main.css index 5aa86867..340ab7b1 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4 +1,4 @@ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}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}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0;margin-bottom:1.5em;width:100%}::-moz-selection{background-color:#dadada;color:#343434;text-shadow:none}::selection{background-color:#dadada;color:#343434;text-shadow:none}.all-caps{text-transform:uppercase}.pull-left{float:left}.pull-right{float:right}.image-pull-right{float:right;margin-top:0}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.unstyled-list{list-style:none;margin-left:0;padding-left:0}.unstyled-list li{list-style-type:none}b,i,strong,em,blockquote,p,q,span,figure,img,h1,h2,header,input,a{transition:all 0.2s ease}h1,h2,h3,h4,h5,h6{font-family:"PT Serif",serif}h1{font-size:32px;font-size:2rem;line-height:0.8125;margin-bottom:26px;margin-bottom:1.625rem}h2{font-size:28px;font-size:1.75rem;line-height:0.9286;margin-bottom:26px;margin-bottom:1.625rem}h3{font-size:24px;font-size:1.5rem;line-height:1.0833;margin-bottom:26px;margin-bottom:1.625rem}h4{font-size:18px;font-size:1.125rem;line-height:1.4444;margin-bottom:26px;margin-bottom:1.625rem}h5{font-size:16px;font-size:1rem;line-height:1.625;margin-bottom:26px;margin-bottom:1.625rem}h6{font-size:14px;font-size:0.875rem;line-height:1.8571;margin-bottom:26px;margin-bottom:1.625rem}a{text-decoration:none;color:#343434}a:visited{color:#4e4e4e}a:hover{color:#1b1b1b}a:focus{outline:thin dotted;color:#343434}a:hover,a:active{outline:0}.image-caption{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;display:block;text-align:right;font-size:12px;font-size:0.75rem;line-height:2.1667;line-height:1.3;font-style:italic;color:#80807e}@media (min-width: 37.5em){.image-caption{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%}}@media (min-width: 86.375em){.image-caption{display:inline;float:left;width:70.83333%}}.image-caption a{color:#80807e}.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:14px;font-size:0.875rem;background-color:#fff;border:1px solid #ccc;border-radius:3px}blockquote{margin-left:-28px;padding-left:20px;border-left:8px solid #333332;font-family:"PT Serif",serif;font-style:italic}.footnotes ol,.footnotes li,.footnotes p{margin-bottom:0;font-size:14px;font-size:0.875rem}p{margin:0 0 1.625rem}p+p{text-indent:1.625rem;margin-top:-1.625rem}tt,code,kbd,samp,pre{font-family:Monaco,Consolas,"Lucida Console",monospace}p code,li code{font-size:12px;font-size:0.75rem;line-height:1.5}pre{font-size:12px;font-size:0.75rem;line-height:1.5;overflow-x:auto}div.highlighter-rouge{margin-bottom:1em;padding:1em;border:1px solid #ddd;border-radius:4px}div.highlighter-rouge .highlight{margin:0;font-family:Monaco,Consolas,"Lucida Console",monospace;font-size:12px;font-size:0.75rem;line-height:1.5}.highlight table td{padding:5px}.highlight table pre{margin:0}.highlight,.highlight .w{color:#303030}.highlight .err{color:#151515;background-color:#ac4142}.highlight .c,.highlight .cd,.highlight .cm,.highlight .c1,.highlight .cs{color:#505050}.highlight .cp{color:#f4bf75}.highlight .nt{color:#f4bf75}.highlight .o,.highlight .ow{color:#d0d0d0}.highlight .p,.highlight .pi{color:#d0d0d0}.highlight .gi{color:#90a959}.highlight .gd{color:#ac4142}.highlight .gh{color:#6a9fb5;background-color:#151515;font-weight:bold}.highlight .k,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kv{color:#aa759f}.highlight .kc{color:#d28445}.highlight .kt{color:#d28445}.highlight .kd{color:#d28445}.highlight .s,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .sh,.highlight .sx,.highlight .s1{color:#90a959}.highlight .sr{color:#75b5aa}.highlight .si{color:#8f5536}.highlight .se{color:#8f5536}.highlight .nn{color:#f4bf75}.highlight .nc{color:#f4bf75}.highlight .no{color:#f4bf75}.highlight .na{color:#6a9fb5}.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .il,.highlight .mo,.highlight .mb,.highlight .mx{color:#90a959}.highlight .ss{color:#90a959}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff}figure{margin-bottom:1.625rem}article img{max-width:100%;height:auto;border-width:0;vertical-align:middle;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}.half{margin:0 auto;width:100%;*zoom:1}.half:before,.half:after{display:table;content:"";line-height:0}.half:after{clear:both}@media (min-width: 30em){.half img{display:inline;float:left;width:50%}.half figcaption{display:inline;float:left;width:100%}}.third{margin:0 auto;width:100%;*zoom:1}.third:before,.third:after{display:table;content:"";line-height:0}.third:after{clear:both}@media (min-width: 30em){.third img{display:inline;float:left;width:33.33333%}.third figcaption{display:inline;float:left;width:100%}}.btn,#goog-wm-sb{display:inline-block;margin-bottom:20px;padding:8px 20px;font-size:14px;font-size:0.875rem;font-family:"PT Sans Narrow",sans-serif;font-weight:700;background-color:#111;color:#fff;border-width:2px !important;border-style:solid !important;border-color:#111;text-decoration:none !important;border-radius:3px}.btn:visited,#goog-wm-sb:visited{color:#fff}.btn:hover,#goog-wm-sb:hover{background-color:#fff;color:#111}.btn-success{background-color:#5cb85c;color:#fff;border-color:#5cb85c}.btn-success:visited{color:#fff}.btn-success:hover{background-color:#fff;color:#5cb85c}.btn-warning{background-color:#dd8338;color:#fff;border-color:#dd8338}.btn-warning:visited{color:#fff}.btn-warning:hover{background-color:#fff;color:#dd8338}.btn-danger{background-color:#C64537;color:#fff;border-color:#C64537}.btn-danger:visited{color:#fff}.btn-danger:hover{background-color:#fff;color:#C64537}.btn-info{background-color:#308cbc;color:#fff;border-color:#308cbc}.btn-info:visited{color:#fff}.btn-info:hover{background-color:#fff;color:#308cbc}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}btnform{margin:0 0 5px 0}btnform fieldset{margin-bottom:5px;padding:0;border-width:0}btnform legend{display:block;width:100%;margin-bottom:10px;*margin-left:-7px;padding:0;color:#333332;border:0;border-bottom:1px solid #ddd;white-space:normal}btnform p{margin-bottom:5px / 2}btnform ul{list-style-type:none;margin:0 0 5px 0;padding:0}btnform br{display:none}label,input,button,select,textarea{vertical-align:baseline;*vertical-align:middle}input,button,select,textarea{font-family:"PT Serif",serif;-ms-box-sizing:border-box;box-sizing:border-box}label{display:block;margin-bottom:10px / 8;font-weight:bold;color:#333332;cursor:pointer}label input,label textarea,label select{display:block}input,textarea,select{display:inline-block;width:100%;padding:4px;margin-bottom:5px / 4;background-color:#fff;border:1px solid #ddd;color:#333332}input:hover,textarea:hover,select:hover{border-color:#919191}.input-mini{width:60px}.input-small{width:90px}input[type="image"],input[type="checkbox"],input[type="radio"]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;border-radius:0;border:0 \9}input[type="checkbox"],input[type="radio"]{-ms-box-sizing:border-box;box-sizing:border-box;padding:0;*width:13px;*height:13px}input[type="image"]{border:0;box-shadow:none}input[type="file"]{width:auto;padding:initial;line-height:initial;border:initial;background-color:transparent;background-color:initial;box-shadow:none}input[type="button"],input[type="reset"],input[type="submit"]{width:auto;height:auto;cursor:pointer;*overflow:visible}select,input[type="file"]{*margin-top:4px}select{width:auto;background-color:#fff}select[multiple],select[size]{height:auto}textarea{resize:vertical;overflow:auto;height:auto;overflow:auto;vertical-align:top}input[type="hidden"]{display:none}.radio,.checkbox{padding-left:18px;font-weight:normal}.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-18px}.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle}.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{opacity:0.5;cursor:not-allowed}input:focus,textarea:focus{border-color:#111;outline:0;outline:thin dotted \9}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{box-shadow:none}.help-block,.help-inline{color:#919191}.help-block{display:block;margin-bottom:1em;line-height:1em}.help-inline{display:inline-block;vertical-align:middle;padding-left:5px}.form-inline input,.form-inline textarea,.form-inline select{display:inline-block;margin-bottom:0}.form-inline label{display:inline-block}.form-inline .radio,.form-inline .checkbox,.form-inline .radio{padding-left:0;margin-bottom:0;vertical-align:middle}.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{float:left;margin-left:0;margin-right:3px}.form-search input,.form-search textarea,.form-search select{display:inline-block;margin-bottom:0}.form-search .search-query{padding-left:14px;padding-right:14px;margin-bottom:0;border-radius:14px}.form-search label{display:inline-block}.form-search .radio,.form-search .checkbox,.form-inline .radio{padding-left:0;margin-bottom:0;vertical-align:middle}.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"]{float:left;margin-left:0;margin-right:3px}body{background-color:#fff;font-family:"PT Serif",serif;color:#333332}.navigation-wrapper{margin:0 auto;width:100%;padding:2em 0 1em;font-family:"PT Sans Narrow",sans-serif;font-weight:700;text-transform:uppercase;*zoom:1}.navigation-wrapper:before,.navigation-wrapper:after{display:table;content:"";line-height:0}.navigation-wrapper:after{clear:both}.site-name{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:1em;float:none;display:block;font-size:24px;font-size:1.5rem}@media (min-width: 37.5em){.site-name{display:inline;float:left;width:16.66667%;margin-left:4.16667%;margin-right:4.16667%;font-size:16px;font-size:1rem}}@media (min-width: 86.375em){.site-name{display:inline;float:left;width:12.5%;margin-left:16.66667%}}.top-navigation{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:1em;float:none;display:block}@media (min-width: 37.5em){.top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%}}@media (min-width: 86.375em){.top-navigation{display:inline;float:left;width:66.66667%}}.top-navigation ul{margin:0;padding:0;clear:both;list-style-type:none}.top-navigation li{display:block;list-style-type:none;border-bottom:1px solid #ddd;border-bottom:1px solid fade(#111, 10);font-size:16px;font-size:1rem}.top-navigation li:last-child{border-bottom:0 solid transparent}@media (min-width: 37.5em){.top-navigation li{display:inline;margin-right:25px;white-space:nowrap;border-bottom:0 solid transparent}}.top-navigation li a{display:block;padding:10px 0;decoration:none;border-bottom:0 solid transparent;transition:all 0.2s}@media (min-width: 37.5em){.top-navigation li a{display:inline;padding:0}}#main{counter-reset:captions;margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:2em}#main:before,#main:after{display:table;content:"";line-height:0}#main:after{clear:both}#main h1{margin-top:0}#main .post{margin:0 auto;width:100%;display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:2em}@media (min-width: 37.5em){#main .post{display:inline;float:left;width:66.66667%;margin-left:0%;margin-right:0%}}@media (min-width: 62em){#main .post{display:inline;float:left;width:50%}}@media (min-width: 86.375em){#main .post{display:inline;float:left;width:41.66667%}}#main figcaption{padding-top:10px;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#4d4d4b}.archive{margin:0 auto;width:100%;display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:2em}@media (min-width: 37.5em){.archive{display:inline;float:left;width:66.66667%;margin-left:0%;margin-right:0%}}@media (min-width: 62em){.archive{display:inline;float:left;width:50%}}@media (min-width: 86.375em){.archive{display:inline;float:left;width:41.66667%}}.archive h3{margin:0;padding-bottom:.5em;font-size:28px;font-size:1.75rem;border-bottom:1px solid #c4c4c4}.archive article h2{margin-bottom:4px;font-size:20px;font-size:1.25rem}.archive article h2.link-post{margin-bottom:26px;margin-bottom:1.625rem}.archive article p{font-size:14px;font-size:0.875rem}.archive article p+p{text-indent:0}.image-wrap{position:relative;margin-bottom:2em;*zoom:1}.image-wrap:before,.image-wrap:after{display:table;content:"";line-height:0}.image-wrap:after{clear:both}.image-wrap:after{content:" ";display:block;position:absolute;bottom:0;left:8%;width:0;height:0;border:10px solid transparent;border-bottom-color:#fff}@media (min-width: 37.5em){.image-wrap:after{left:25%}}@media (min-width: 62em){.image-wrap:after{border-width:20px}}@media (min-width: 86.375em){.image-wrap:after{left:33.333333333%}}.image-wrap img{width:100%;height:auto;-ms-interpolation-mode:bicubic}.byline{clear:both;font-size:80%}.sidebar{display:none}.sidebar a,.sidebar a:hover{border-bottom:0 solid transparent}.sidebar img{width:100%}@media (min-width: 37.5em){.sidebar{display:block;display:inline;float:left;width:16.66667%;margin-left:4.16667%;margin-right:4.16667%}}@media (min-width: 86.375em){.sidebar{display:inline;float:left;width:12.5%;margin-left:16.66667%}}.author-name{margin-bottom:0}@media (min-width: 37.5em){.author-name{margin-top:10px;margin-bottom:10px}}.author-bio{font-size:80%;font-style:italic}@media (min-width: 37.5em){.author-bio{margin-bottom:20px}}.author-avatar{max-width:110px;border-radius:150px}.author-social{display:block;margin-bottom:5px;font-size:14px;font-size:0.875rem;color:#111}.author-social:visited{color:#111}.author-social:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.author-social:active{-webkit-transform:translate(0, 2px);transform:translate(0, 2px)}.author-social .fa{margin-right:5px}@media (min-width: 37.5em){display:block;max-width:125px}@media (min-width: 62em){.author-name,.author-avatar,.author-bio,.author-social{max-width:150px}}.article-wrap p>a,.article-wrap p>em>a,.article-wrap p>strong>a,.article-wrap li>a{text-decoration:underline}.toc{font-size:95%}@media (min-width: 62em){.toc{display:block;display:inline;float:left;width:16.66667%;margin-left:4.16667%;margin-right:4.16667%;position:absolute;top:5.5em;right:0;background-color:#fff}}.toc header{background:#2b2b2b}.toc h3{margin:0;padding:5px 10px;color:#fff;font-size:16px;font-size:1rem;text-transform:uppercase}.toc h3:hover{cursor:pointer}.toc ul{margin:2px 0 0;padding:0;line-height:1}.toc li{display:block;margin:0 0 1px 0;padding:0;font-family:"PT Sans Narrow",sans-serif;list-style-type:none}.toc li:last-child{border-bottom-width:0}.toc li a{padding:10px;display:block;color:#fff;text-decoration:none;background:#5e5e5e;opacity:0.7;transition:opacity 0.2s ease-in-out}.toc li a:hover{opacity:1}.toc li ul{margin:1px 0 0}.toc li ul li a{padding-left:20px}#drawer{max-height:100%;overflow:hidden}#drawer.js-hidden{max-height:0}.image-grid{*zoom:1;list-style:none;margin:0 0 1em;padding:0}.image-grid:before,.image-grid:after{display:table;content:"";line-height:0}.image-grid:after{clear:both}.image-grid li{display:inline;float:left;width:50%}@media (min-width: 30em){.image-grid li{width:33.333333%}}@media (min-width: 37.5em){.image-grid li{width:25%}}@media (min-width: 48em){.image-grid li{width:20%}}@media (min-width: 62em){.image-grid li{width:16.666666666%}}.recent-grid{*zoom:1;list-style:none;margin:1em 0}.recent-grid:before,.recent-grid:after{display:table;content:"";line-height:0}.recent-grid:after{clear:both}.recent-grid li{display:inline}.recent-grid li a{border-bottom:0 solid transparent}.recent-grid li a:hover{border-bottom:0 solid transparent}.recent-grid img{width:19%;margin-bottom:1%}.social-share{margin-bottom:26px;margin-bottom:1.625rem}.social-share ul,.social-share li{margin:0;padding:0;list-style:none}.social-share li{display:inline-block}.social-share .facebook{background:#3b5998}.social-share .flickr{background:#ff0084}.social-share .foursquare{background:#0cbadf}.social-share .google-plus{background:#dd4b39}.social-share .instagram{background:#4e433c}.social-share .linkedin{background:#4875b4}.social-share .pinterest{background:#cb2027}.social-share .rss{background:#fa9b39}.social-share .tumblr{background:#2c4762}.social-share .twitter{background:#55acee}.social-share .vimeo{background:#1ab7ea}.social-share .youtube{background:#f33}.social-share a{display:block;padding:8px 20px;text-decoration:none !important;text-transform:uppercase;font-size:14px;font-size:0.875rem;font-family:"PT Sans Narrow",sans-serif;font-weight:700;color:#fff;opacity:0.8}.social-share a:hover{opacity:1}.social-share span{display:none}@media (min-width: 48em){.social-share span{display:inline;padding-left:5px}}.social-share h4{font-size:14px;font-size:0.875rem;margin-bottom:10px;text-transform:uppercase}.footer-wrap{margin:0 auto;width:100%;*zoom:1;clear:both;padding-bottom:3em}.footer-wrap:before,.footer-wrap:after{display:table;content:"";line-height:0}.footer-wrap:after{clear:both}.footer-wrap .copyright{font-size:14px;font-size:0.875rem}.footer-wrap footer{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%}@media (min-width: 37.5em){.footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%}}@media (min-width: 86.375em){.footer-wrap footer{display:inline;float:left;width:37.5%;margin-left:33.33333%;margin-right:29.16667%}}.follow ul{margin:0;padding:0;list-style-type:none}.follow li{display:inline-block}.follow li+li:before{content:"";padding-right:5px}.related-articles{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:2em}@media (min-width: 37.5em){.related-articles{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%}}@media (min-width: 86.375em){.related-articles{display:inline;float:left;width:37.5%;margin-left:33.33333%;margin-right:29.16667%}}.related-articles h4{text-transform:uppercase;margin-bottom:0}.related-articles li{margin-bottom:0}.browser-upgrade{background:#000;text-align:center;margin:0 0 2em 0;padding:10px;text-align:center;color:#fff}.browser-upgrade a{color:#fff;border-bottom:1px dotted #fff;text-decoration:none}.browser-upgrade a:hover{border-bottom:1px solid #fff}#goog-fixurl ul{list-style:none;margin-left:0;padding-left:0}#goog-fixurl ul li{list-style-type:none}#goog-wm-qt{width:auto;margin-right:10px;margin-bottom:20px;padding:8px 20px;display:inline-block;font-size:14px;font-size:0.875rem;background-color:#fff;color:#111;border-width:2px !important;border-style:solid !important;border-color:#919191;border-radius:3px}.breadcrumbs ol{padding:0;list-style:none}.breadcrumbs li{display:inline}.breadcrumbs .current{font-weight:bold}.pagination{padding-top:0.5em;border-top:1px solid #c4c4c4}.pagination ul{margin:0;padding:0;list-style-type:none}.pagination li{display:inline-block}.pagination li+li:before{content:"";padding-right:10px}.pagination .current{font-weight:bold}/*! +a:focus{outline:thin dotted #dd8338;outline:5px auto #dd8338;outline-offset:-2px}html{box-sizing:border-box;background-color:#fff;font-size:15px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}@media (min-width: 48em){html{font-size:16px}}@media (min-width: 62em){html{font-size:18px}}*,*:before,*:after{box-sizing:inherit}body{margin:0}::-moz-selection{color:#fff;background:#000}::selection{color:#fff;background:#000}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}a{color:inherit}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img,.google-maps img{max-width:none}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer}input[type="search"]{box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}body{margin:0;padding:0;color:#333332;font-family:"PT Serif",serif;line-height:1.5}body.overflow--hidden{overflow:hidden}h1,h2,h3,h4,h5,h6{line-height:1.25;font-family:-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif}h1{font-size:32px}h2{font-size:28px}h3{font-size:24px}h4{font-size:18px}h5{font-size:16px}h6{font-size:14px}small{font-size:0.8rem}u,ins{text-decoration:none;border-bottom:1px solid #333332}u a,ins a{color:inherit}del a{color:inherit}p{margin:0 0 1.625rem}p+p{text-indent:1.625rem;margin-top:-1.625rem}p,pre,blockquote,ul,ol,dl,figure,table,fieldset{orphans:3;widows:3}abbr[title],abbr[data-original-title]{text-decoration:none;cursor:help;border-bottom:1px dotted #333332}blockquote{margin:2em 1em 2em 0;padding-left:1em;padding-right:1em;font-style:italic;border-left:0.25em solid #000}blockquote a{color:inherit}blockquote cite{font-family:-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;font-size:14px;font-style:normal}blockquote cite:before{content:"\2014";padding-right:5px}a{text-decoration:none}a:hover,a:active{outline:0}@media (min-width: 37.5em){ol,ul{padding-left:0}ol ol,ol ul,ul ol,ul ul{padding:0.5em 1em}}tt,code,kbd,samp,pre{font-family:Monaco,Consolas,"Lucida Console",monospace;font-size:14px}pre{overflow-x:auto}p code,li code,figcaption code{padding-top:0.1rem;padding-bottom:0.1rem;background:#eee;border:1px solid #e2e2e2;border-radius:4px}p code:before,p code:after,li code:before,li code:after,figcaption code:before,figcaption code:after{letter-spacing:-0.2em;content:"\00a0"}hr{display:block;margin:1em 0;border:0;border-top:1px solid #e2e2e2}figure{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:2em 0}figure img,figure iframe,figure .fluid-width-video-wrapper{margin-bottom:1em}figure img{width:100%;border-radius:4px;transition:box-shadow 0.3s}figure>a{display:block}figure>a:hover img{box-shadow:0 0 10px rgba(0,0,0,0.2)}@media (min-width: 37.5em){figure.half>a,figure.half>img{width:calc(50% - 0.5em)}}figure.half figcaption{width:100%}@media (min-width: 37.5em){figure.third>a,figure.third>img{width:calc(33.3333% - 0.5em)}}figure.third figcaption{width:100%}figcaption{margin-bottom:0.65rem;color:#666665;font-family:-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;font-size:0.8rem}figcaption a{color:inherit;text-decoration:none;border-bottom:1px solid #e2e2e2;transition:border 0.4s ease-in-out}figcaption a:hover{color:#000;border-bottom-color:#000}figcaption code{font-size:0.64rem}svg:not(:root){overflow:hidden}nav ul{margin:0;padding:0}nav li{list-style:none}nav a{text-decoration:none}b,i,strong,em,blockquote,p,q,span,figure,img,h1,h2,header,input,a,tr,td,form button,input[type="submit"],.btn,#goog-wm-sb,.highlight,.archive__item,.archive__item-thumb,.archive__item-body,.palette__swatch{transition:all 0.2s ease-in-out}.hidden{display:none;visibility:hidden}.load{display:none}.transparent{opacity:0}.visually-hidden,.screen-reader-text,.screen-reader-text span,.screen-reader-shortcut{position:absolute !important;clip:rect(1px, 1px, 1px, 1px);height:1px !important;width:1px !important;border:0 !important;overflow:hidden}body:hover .visually-hidden a,body:hover .visually-hidden input,body:hover .visually-hidden button{display:none !important}.screen-reader-text:focus,.screen-reader-shortcut:focus{clip:auto !important;height:auto !important;width:auto !important;display:block;font-size:1em;font-weight:bold;padding:15px 23px 14px;background:#fff;z-index:100000;text-decoration:none;box-shadow:0 0 2px 2px rgba(0,0,0,0.6)}.skip-link{position:fixed;z-index:20;margin:0;font-family:-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;white-space:nowrap}.skip-link li{height:0;width:0;list-style:none}.center{text-align:center}.float-left{clear:right}@media (min-width: 62em){.float-left{float:left;clear:none}}.float-right{clear:left}@media (min-width: 62em){.float-right{float:right;clear:none}}.cf{clear:both}.image-left{display:block;margin-left:auto;margin-right:auto}@media (min-width: 37.5em){.image-left{float:left;margin-right:1em}}.image-right{display:block;margin-left:auto;margin-right:auto}@media (min-width: 37.5em){.image-right{float:right;margin-left:1em}}.icon{display:inline-block;fill:currentColor;width:1em;height:1.1em;line-height:1;position:relative;top:-0.1em;vertical-align:middle}.sticky{position:-webkit-sticky;position:sticky;top:80px}.sticky::after{clear:both;content:"";display:table}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.footnotes ol,.footnotes li,.footnotes p{margin-bottom:0;font-size:14px}.btn,#goog-wm-sb{display:inline-block;margin-bottom:0.25em;padding:10px 20px;color:#fff !important;font-family:-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;font-size:0.8rem;font-weight:bold;line-height:1.5;text-align:center;background-color:#000;border:0 !important;border-radius:4px;cursor:pointer}.btn:active,#goog-wm-sb:active{-webkit-transform:translateY(1px);transform:translateY(1px)}.btn:hover,#goog-wm-sb:hover{background-color:#333}.btn .icon,#goog-wm-sb .icon{margin-right:0.5em}.btn .icon+.hidden,#goog-wm-sb .icon+.hidden{margin-left:-0.5em}.btn--block{display:block;width:100%}.btn--block+.btn--block{margin-top:0.25em}.btn--inverse{color:#000 !important;background-color:#fff}.btn--inverse:hover{background-color:#ccc}.btn--light-outline{border:1px solid #fff !important;background-color:transparent}.btn--info{background-color:#308cbc}.btn--info:hover{background-color:#267096}.btn--warning{background-color:#dd8338}.btn--warning:hover{background-color:#b1692d}.btn--success{background-color:#5cb85c}.btn--success:hover{background-color:#4a934a}.btn--danger{background-color:#C64537}.btn--danger:hover{background-color:#9e372c}.btn--disabled{pointer-events:none;cursor:not-allowed;filter:alpha(opacity=65);box-shadow:none;opacity:0.65}.btn--facebook{background-color:#3b5998}.btn--facebook:hover{background-color:#2f477a}.btn--twitter{background-color:#55acee}.btn--twitter:hover{background-color:#448abe}.btn--google-plus{background-color:#dd4b39}.btn--google-plus:hover{background-color:#b13c2e}.toc{padding:0 1em 1em;font-family:"PT Sans Narrow",sans-serif;border-top:8px solid #4c4c4c}@media (min-width: 62em){.toc{display:block;display:inline;float:left;width:16.66667%;margin-left:4.16667%;margin-right:4.16667%;position:absolute;top:5.5em;right:0}}.toc__title{margin:1em 0;font-family:"PT Serif",serif;font-size:18px;color:#4c4c4c}.toc__menu{padding-left:0;font-size:14px;border-bottom:2px solid #e2e2e2}.toc__menu ul::after{clear:both;content:"";display:table}.toc__menu ul>li{padding:5px 0;font-weight:normal}.toc__menu ul>li:before{content:"\2192";width:20px}.toc__menu ul>li:not(:last-child){border-bottom:1px solid #e2e2e2}.toc__menu li{clear:both;display:block;font-weight:bold}.toc__menu li:before{display:block;float:left;margin-right:10px;margin-bottom:5px;width:10px;font-weight:bold}.toc__menu li a{display:block}.toc__menu li a:hover{text-decoration:underline}.toc__menu>li{padding:5px 0;border-top:2px solid #e2e2e2}div.highlighter-rouge{margin-bottom:1em;padding:1em;border:1px solid #e2e2e2;border-radius:4px}div.highlighter-rouge .highlight{margin:0;font-family:Monaco,Consolas,"Lucida Console",monospace;font-size:12px;line-height:1.5}.highlight table td{padding:5px}.highlight table pre{margin:0}.highlight,.highlight .w{color:#303030}.highlight .err{color:#151515;background-color:#ac4142}.highlight .c,.highlight .cd,.highlight .cm,.highlight .c1,.highlight .cs{color:#505050}.highlight .cp{color:#f4bf75}.highlight .nt{color:#f4bf75}.highlight .o,.highlight .ow{color:#d0d0d0}.highlight .p,.highlight .pi{color:#d0d0d0}.highlight .gi{color:#90a959}.highlight .gd{color:#ac4142}.highlight .gh{color:#6a9fb5;background-color:#151515;font-weight:bold}.highlight .k,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kv{color:#aa759f}.highlight .kc{color:#d28445}.highlight .kt{color:#d28445}.highlight .kd{color:#d28445}.highlight .s,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .sh,.highlight .sx,.highlight .s1{color:#90a959}.highlight .sr{color:#75b5aa}.highlight .si{color:#8f5536}.highlight .se{color:#8f5536}.highlight .nn{color:#f4bf75}.highlight .nc{color:#f4bf75}.highlight .no{color:#f4bf75}.highlight .na{color:#6a9fb5}.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .il,.highlight .mo,.highlight .mb,.highlight .mx{color:#90a959}.highlight .ss{color:#90a959}btnform{margin:0 0 5px 0}btnform fieldset{margin-bottom:5px;padding:0;border-width:0}btnform legend{display:block;width:100%;margin-bottom:10px;*margin-left:-7px;padding:0;color:#333332;border:0;border-bottom:1px solid #ccc;white-space:normal}btnform p{margin-bottom:5px / 2}btnform ul{list-style-type:none;margin:0 0 5px 0;padding:0}btnform br{display:none}label,input,button,select,textarea{vertical-align:baseline;*vertical-align:middle}input,button,select,textarea{font-family:"PT Serif",serif;box-sizing:border-box}label{display:block;margin-bottom:10px / 8;font-weight:bold;color:#333332;cursor:pointer}label input,label textarea,label select{display:block}input,textarea,select{display:inline-block;width:100%;padding:4px;margin-bottom:5px / 4;background-color:#fff;border:1px solid #ccc;color:#333332}input:hover,textarea:hover,select:hover{border-color:gray}.input-mini{width:60px}.input-small{width:90px}input[type="image"],input[type="checkbox"],input[type="radio"]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;border-radius:0;border:0 \9}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*width:13px;*height:13px}input[type="image"]{border:0;box-shadow:none}input[type="file"]{width:auto;padding:initial;line-height:initial;border:initial;background-color:transparent;background-color:initial;box-shadow:none}input[type="button"],input[type="reset"],input[type="submit"]{width:auto;height:auto;cursor:pointer;*overflow:visible}select,input[type="file"]{*margin-top:4px}select{width:auto;background-color:#fff}select[multiple],select[size]{height:auto}textarea{resize:vertical;height:auto;overflow:auto;vertical-align:top}input[type="hidden"]{display:none}.radio,.checkbox{padding-left:18px;font-weight:normal}.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-18px}.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle}.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{opacity:0.5;cursor:not-allowed}input:focus,textarea:focus{border-color:#000;outline:0;outline:thin dotted \9}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{box-shadow:none}.help-block,.help-inline{color:gray}.help-block{display:block;margin-bottom:1em;line-height:1em}.help-inline{display:inline-block;vertical-align:middle;padding-left:5px}.form-inline input,.form-inline textarea,.form-inline select{display:inline-block;margin-bottom:0}.form-inline label{display:inline-block}.form-inline .radio,.form-inline .checkbox,.form-inline .radio{padding-left:0;margin-bottom:0;vertical-align:middle}.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{float:left;margin-left:0;margin-right:3px}.form-search input,.form-search textarea,.form-search select{display:inline-block;margin-bottom:0}.form-search .search-query{padding-left:14px;padding-right:14px;margin-bottom:0;border-radius:14px}.form-search label{display:inline-block}.form-search .radio,.form-search .checkbox,.form-inline .radio{padding-left:0;margin-bottom:0;vertical-align:middle}.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"]{float:left;margin-left:0;margin-right:3px}body{background-color:#fff;font-family:"PT Serif",serif;color:#333332}.navigation-wrapper{margin:0 auto;width:100%;padding:2em 0 1em;font-family:"PT Sans Narrow",sans-serif;font-weight:700;text-transform:uppercase}.navigation-wrapper::after{clear:both;content:"";display:table}.site-name{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:1em;float:none;display:block;font-size:24px}@media (min-width: 37.5em){.site-name{display:inline;float:left;width:16.66667%;margin-left:4.16667%;margin-right:4.16667%;font-size:16px}}@media (min-width: 86.375em){.site-name{display:inline;float:left;width:12.5%;margin-left:16.66667%}}.top-navigation{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:1em;float:none;display:block}@media (min-width: 37.5em){.top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%}}@media (min-width: 86.375em){.top-navigation{display:inline;float:left;width:66.66667%}}.top-navigation ul{margin:0;padding:0;clear:both;list-style-type:none}.top-navigation li{display:block;list-style-type:none;border-bottom:1px solid #ccc;border-bottom:1px solid fade(#000, 10);font-size:16px}.top-navigation li:last-child{border-bottom:0 solid transparent}@media (min-width: 37.5em){.top-navigation li{display:inline;margin-right:25px;white-space:nowrap;border-bottom:0 solid transparent}}.top-navigation li a{display:block;padding:10px 0;decoration:none;border-bottom:0 solid transparent}@media (min-width: 37.5em){.top-navigation li a{display:inline;padding:0}}#main{counter-reset:captions;margin:0 auto;width:100%;clear:both;margin-top:2em}#main::after{clear:both;content:"";display:table}.page{margin:0 auto;width:100%;display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:2em}@media (min-width: 37.5em){.page{display:inline;float:left;width:66.66667%;margin-left:0%;margin-right:0%}}@media (min-width: 62em){.page{display:inline;float:left;width:50%}}@media (min-width: 86.375em){.page{display:inline;float:left;width:41.66667%}}.archive{margin:0 auto;width:100%;display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:2em}@media (min-width: 37.5em){.archive{display:inline;float:left;width:66.66667%;margin-left:0%;margin-right:0%}}@media (min-width: 62em){.archive{display:inline;float:left;width:50%}}@media (min-width: 86.375em){.archive{display:inline;float:left;width:41.66667%}}.archive h3{margin:0;padding-bottom:.5em;font-size:28px;border-bottom:1px solid #b3b3b3}.archive article h2{margin-bottom:4px;font-size:20px}.archive article p{font-size:14px}.archive article p+p{text-indent:0}.image-wrap{position:relative;margin-bottom:2em}.image-wrap::after{clear:both;content:"";display:table}.image-wrap:after{content:" ";display:block;position:absolute;bottom:0;left:8%;width:0;height:0;border:10px solid transparent;border-bottom-color:#fff}@media (min-width: 37.5em){.image-wrap:after{left:25%}}@media (min-width: 62em){.image-wrap:after{border-width:20px}}@media (min-width: 86.375em){.image-wrap:after{left:33.333333333%}}.image-wrap img{width:100%;height:auto;-ms-interpolation-mode:bicubic}.byline{clear:both;font-size:80%}.sidebar{display:none}.sidebar a,.sidebar a:hover{border-bottom:0 solid transparent}.sidebar img{width:100%}@media (min-width: 37.5em){.sidebar{display:block;display:inline;float:left;width:16.66667%;margin-left:4.16667%;margin-right:4.16667%}}@media (min-width: 86.375em){.sidebar{display:inline;float:left;width:12.5%;margin-left:16.66667%}}.author-name{margin-bottom:0}@media (min-width: 37.5em){.author-name{margin-top:10px;margin-bottom:10px}}.author-bio{font-size:80%;font-style:italic}@media (min-width: 37.5em){.author-bio{margin-bottom:20px}}.author-avatar{max-width:110px;border-radius:50%}.author-social{display:block;margin-bottom:5px;font-size:14px;color:#000}.author-social:visited{color:#000}.author-social:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.author-social:active{-webkit-transform:translate(0, 2px);transform:translate(0, 2px)}.author-social .fa{margin-right:5px}@media (min-width: 37.5em){display:block;max-width:125px}@media (min-width: 62em){.author-name,.author-avatar,.author-bio,.author-social{max-width:150px}}.article-wrap p>a,.article-wrap p>em>a,.article-wrap p>strong>a,.article-wrap li>a{text-decoration:underline}.image-grid{list-style:none;margin:0 0 1em;padding:0}.image-grid::after{clear:both;content:"";display:table}.image-grid li{display:inline;float:left;width:50%}@media (min-width: 30em){.image-grid li{width:33.333333%}}@media (min-width: 37.5em){.image-grid li{width:25%}}@media (min-width: 48em){.image-grid li{width:20%}}@media (min-width: 62em){.image-grid li{width:16.666666666%}}.recent-grid{list-style:none;margin:1em 0}.recent-grid::after{clear:both;content:"";display:table}.recent-grid li{display:inline}.recent-grid li a{border-bottom:0 solid transparent}.recent-grid li a:hover{border-bottom:0 solid transparent}.recent-grid img{width:19%;margin-bottom:1%}.social-share h4{font-size:14px;margin-bottom:10px;text-transform:uppercase}.footer-wrap{margin:0 auto;width:100%;clear:both;padding-bottom:3em}.footer-wrap::after{clear:both;content:"";display:table}.footer-wrap .copyright{font-size:14px}.footer-wrap footer{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%}@media (min-width: 37.5em){.footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%}}@media (min-width: 86.375em){.footer-wrap footer{display:inline;float:left;width:37.5%;margin-left:33.33333%;margin-right:29.16667%}}.follow ul{margin:0;padding:0;list-style-type:none}.follow li{display:inline-block}.follow li+li:before{content:"";padding-right:5px}.related-articles{display:inline;float:left;width:83.33333%;margin-left:8.33333%;margin-right:8.33333%;margin-bottom:2em}@media (min-width: 37.5em){.related-articles{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%}}@media (min-width: 86.375em){.related-articles{display:inline;float:left;width:37.5%;margin-left:33.33333%;margin-right:29.16667%}}.related-articles h4{text-transform:uppercase;margin-bottom:0}.related-articles li{margin-bottom:0}.browser-upgrade{background:#000;text-align:center;margin:0 0 2em 0;padding:10px;text-align:center;color:#fff}.browser-upgrade a{color:#fff;border-bottom:1px dotted #fff;text-decoration:none}.browser-upgrade a:hover{border-bottom:1px solid #fff}#goog-fixurl ul{list-style:none;margin-left:0;padding-left:0}#goog-fixurl ul li{list-style-type:none}#goog-wm-qt{width:auto;margin-right:10px;margin-bottom:20px;padding:8px 20px;display:inline-block;font-size:14px;background-color:#fff;color:#000;border-width:2px !important;border-style:solid !important;border-color:gray;border-radius:4px}.breadcrumbs ol{padding:0;list-style:none}.breadcrumbs li{display:inline}.breadcrumbs .current{font-weight:bold}.pagination{padding-top:0.5em;border-top:1px solid #b3b3b3}.pagination ul{margin:0;padding:0;list-style-type:none}.pagination li{display:inline-block}.pagination li+li:before{content:"";padding-right:10px}.pagination .current{font-weight:bold}/*! * Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */@font-face{font-family:'FontAwesome';src:url("../fonts/fontawesome-webfont.eot?v=4.5.0");src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff2?v=4.5.0") format("woff2"),url("../fonts/fontawesome-webfont.woff?v=4.5.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.5.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px / 1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:0.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:0.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:solid 0.08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{-webkit-filter:none;filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:""}.fa-music:before{content:""}.fa-search:before{content:""}.fa-envelope-o:before{content:""}.fa-heart:before{content:""}.fa-star:before{content:""}.fa-star-o:before{content:""}.fa-user:before{content:""}.fa-film:before{content:""}.fa-th-large:before{content:""}.fa-th:before{content:""}.fa-th-list:before{content:""}.fa-check:before{content:""}.fa-remove:before,.fa-close:before,.fa-times:before{content:""}.fa-search-plus:before{content:""}.fa-search-minus:before{content:""}.fa-power-off:before{content:""}.fa-signal:before{content:""}.fa-gear:before,.fa-cog:before{content:""}.fa-trash-o:before{content:""}.fa-home:before{content:""}.fa-file-o:before{content:""}.fa-clock-o:before{content:""}.fa-road:before{content:""}.fa-download:before{content:""}.fa-arrow-circle-o-down:before{content:""}.fa-arrow-circle-o-up:before{content:""}.fa-inbox:before{content:""}.fa-play-circle-o:before{content:""}.fa-rotate-right:before,.fa-repeat:before{content:""}.fa-refresh:before{content:""}.fa-list-alt:before{content:""}.fa-lock:before{content:""}.fa-flag:before{content:""}.fa-headphones:before{content:""}.fa-volume-off:before{content:""}.fa-volume-down:before{content:""}.fa-volume-up:before{content:""}.fa-qrcode:before{content:""}.fa-barcode:before{content:""}.fa-tag:before{content:""}.fa-tags:before{content:""}.fa-book:before{content:""}.fa-bookmark:before{content:""}.fa-print:before{content:""}.fa-camera:before{content:""}.fa-font:before{content:""}.fa-bold:before{content:""}.fa-italic:before{content:""}.fa-text-height:before{content:""}.fa-text-width:before{content:""}.fa-align-left:before{content:""}.fa-align-center:before{content:""}.fa-align-right:before{content:""}.fa-align-justify:before{content:""}.fa-list:before{content:""}.fa-dedent:before,.fa-outdent:before{content:""}.fa-indent:before{content:""}.fa-video-camera:before{content:""}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:""}.fa-pencil:before{content:""}.fa-map-marker:before{content:""}.fa-adjust:before{content:""}.fa-tint:before{content:""}.fa-edit:before,.fa-pencil-square-o:before{content:""}.fa-share-square-o:before{content:""}.fa-check-square-o:before{content:""}.fa-arrows:before{content:""}.fa-step-backward:before{content:""}.fa-fast-backward:before{content:""}.fa-backward:before{content:""}.fa-play:before{content:""}.fa-pause:before{content:""}.fa-stop:before{content:""}.fa-forward:before{content:""}.fa-fast-forward:before{content:""}.fa-step-forward:before{content:""}.fa-eject:before{content:""}.fa-chevron-left:before{content:""}.fa-chevron-right:before{content:""}.fa-plus-circle:before{content:""}.fa-minus-circle:before{content:""}.fa-times-circle:before{content:""}.fa-check-circle:before{content:""}.fa-question-circle:before{content:""}.fa-info-circle:before{content:""}.fa-crosshairs:before{content:""}.fa-times-circle-o:before{content:""}.fa-check-circle-o:before{content:""}.fa-ban:before{content:""}.fa-arrow-left:before{content:""}.fa-arrow-right:before{content:""}.fa-arrow-up:before{content:""}.fa-arrow-down:before{content:""}.fa-mail-forward:before,.fa-share:before{content:""}.fa-expand:before{content:""}.fa-compress:before{content:""}.fa-plus:before{content:""}.fa-minus:before{content:""}.fa-asterisk:before{content:""}.fa-exclamation-circle:before{content:""}.fa-gift:before{content:""}.fa-leaf:before{content:""}.fa-fire:before{content:""}.fa-eye:before{content:""}.fa-eye-slash:before{content:""}.fa-warning:before,.fa-exclamation-triangle:before{content:""}.fa-plane:before{content:""}.fa-calendar:before{content:""}.fa-random:before{content:""}.fa-comment:before{content:""}.fa-magnet:before{content:""}.fa-chevron-up:before{content:""}.fa-chevron-down:before{content:""}.fa-retweet:before{content:""}.fa-shopping-cart:before{content:""}.fa-folder:before{content:""}.fa-folder-open:before{content:""}.fa-arrows-v:before{content:""}.fa-arrows-h:before{content:""}.fa-bar-chart-o:before,.fa-bar-chart:before{content:""}.fa-twitter-square:before{content:""}.fa-facebook-square:before{content:""}.fa-camera-retro:before{content:""}.fa-key:before{content:""}.fa-gears:before,.fa-cogs:before{content:""}.fa-comments:before{content:""}.fa-thumbs-o-up:before{content:""}.fa-thumbs-o-down:before{content:""}.fa-star-half:before{content:""}.fa-heart-o:before{content:""}.fa-sign-out:before{content:""}.fa-linkedin-square:before{content:""}.fa-thumb-tack:before{content:""}.fa-external-link:before{content:""}.fa-sign-in:before{content:""}.fa-trophy:before{content:""}.fa-github-square:before{content:""}.fa-upload:before{content:""}.fa-lemon-o:before{content:""}.fa-phone:before{content:""}.fa-square-o:before{content:""}.fa-bookmark-o:before{content:""}.fa-phone-square:before{content:""}.fa-twitter:before{content:""}.fa-facebook-f:before,.fa-facebook:before{content:""}.fa-github:before{content:""}.fa-unlock:before{content:""}.fa-credit-card:before{content:""}.fa-feed:before,.fa-rss:before{content:""}.fa-hdd-o:before{content:""}.fa-bullhorn:before{content:""}.fa-bell:before{content:""}.fa-certificate:before{content:""}.fa-hand-o-right:before{content:""}.fa-hand-o-left:before{content:""}.fa-hand-o-up:before{content:""}.fa-hand-o-down:before{content:""}.fa-arrow-circle-left:before{content:""}.fa-arrow-circle-right:before{content:""}.fa-arrow-circle-up:before{content:""}.fa-arrow-circle-down:before{content:""}.fa-globe:before{content:""}.fa-wrench:before{content:""}.fa-tasks:before{content:""}.fa-filter:before{content:""}.fa-briefcase:before{content:""}.fa-arrows-alt:before{content:""}.fa-group:before,.fa-users:before{content:""}.fa-chain:before,.fa-link:before{content:""}.fa-cloud:before{content:""}.fa-flask:before{content:""}.fa-cut:before,.fa-scissors:before{content:""}.fa-copy:before,.fa-files-o:before{content:""}.fa-paperclip:before{content:""}.fa-save:before,.fa-floppy-o:before{content:""}.fa-square:before{content:""}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:""}.fa-list-ul:before{content:""}.fa-list-ol:before{content:""}.fa-strikethrough:before{content:""}.fa-underline:before{content:""}.fa-table:before{content:""}.fa-magic:before{content:""}.fa-truck:before{content:""}.fa-pinterest:before{content:""}.fa-pinterest-square:before{content:""}.fa-google-plus-square:before{content:""}.fa-google-plus:before{content:""}.fa-money:before{content:""}.fa-caret-down:before{content:""}.fa-caret-up:before{content:""}.fa-caret-left:before{content:""}.fa-caret-right:before{content:""}.fa-columns:before{content:""}.fa-unsorted:before,.fa-sort:before{content:""}.fa-sort-down:before,.fa-sort-desc:before{content:""}.fa-sort-up:before,.fa-sort-asc:before{content:""}.fa-envelope:before{content:""}.fa-linkedin:before{content:""}.fa-rotate-left:before,.fa-undo:before{content:""}.fa-legal:before,.fa-gavel:before{content:""}.fa-dashboard:before,.fa-tachometer:before{content:""}.fa-comment-o:before{content:""}.fa-comments-o:before{content:""}.fa-flash:before,.fa-bolt:before{content:""}.fa-sitemap:before{content:""}.fa-umbrella:before{content:""}.fa-paste:before,.fa-clipboard:before{content:""}.fa-lightbulb-o:before{content:""}.fa-exchange:before{content:""}.fa-cloud-download:before{content:""}.fa-cloud-upload:before{content:""}.fa-user-md:before{content:""}.fa-stethoscope:before{content:""}.fa-suitcase:before{content:""}.fa-bell-o:before{content:""}.fa-coffee:before{content:""}.fa-cutlery:before{content:""}.fa-file-text-o:before{content:""}.fa-building-o:before{content:""}.fa-hospital-o:before{content:""}.fa-ambulance:before{content:""}.fa-medkit:before{content:""}.fa-fighter-jet:before{content:""}.fa-beer:before{content:""}.fa-h-square:before{content:""}.fa-plus-square:before{content:""}.fa-angle-double-left:before{content:""}.fa-angle-double-right:before{content:""}.fa-angle-double-up:before{content:""}.fa-angle-double-down:before{content:""}.fa-angle-left:before{content:""}.fa-angle-right:before{content:""}.fa-angle-up:before{content:""}.fa-angle-down:before{content:""}.fa-desktop:before{content:""}.fa-laptop:before{content:""}.fa-tablet:before{content:""}.fa-mobile-phone:before,.fa-mobile:before{content:""}.fa-circle-o:before{content:""}.fa-quote-left:before{content:""}.fa-quote-right:before{content:""}.fa-spinner:before{content:""}.fa-circle:before{content:""}.fa-mail-reply:before,.fa-reply:before{content:""}.fa-github-alt:before{content:""}.fa-folder-o:before{content:""}.fa-folder-open-o:before{content:""}.fa-smile-o:before{content:""}.fa-frown-o:before{content:""}.fa-meh-o:before{content:""}.fa-gamepad:before{content:""}.fa-keyboard-o:before{content:""}.fa-flag-o:before{content:""}.fa-flag-checkered:before{content:""}.fa-terminal:before{content:""}.fa-code:before{content:""}.fa-mail-reply-all:before,.fa-reply-all:before{content:""}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:""}.fa-location-arrow:before{content:""}.fa-crop:before{content:""}.fa-code-fork:before{content:""}.fa-unlink:before,.fa-chain-broken:before{content:""}.fa-question:before{content:""}.fa-info:before{content:""}.fa-exclamation:before{content:""}.fa-superscript:before{content:""}.fa-subscript:before{content:""}.fa-eraser:before{content:""}.fa-puzzle-piece:before{content:""}.fa-microphone:before{content:""}.fa-microphone-slash:before{content:""}.fa-shield:before{content:""}.fa-calendar-o:before{content:""}.fa-fire-extinguisher:before{content:""}.fa-rocket:before{content:""}.fa-maxcdn:before{content:""}.fa-chevron-circle-left:before{content:""}.fa-chevron-circle-right:before{content:""}.fa-chevron-circle-up:before{content:""}.fa-chevron-circle-down:before{content:""}.fa-html5:before{content:""}.fa-css3:before{content:""}.fa-anchor:before{content:""}.fa-unlock-alt:before{content:""}.fa-bullseye:before{content:""}.fa-ellipsis-h:before{content:""}.fa-ellipsis-v:before{content:""}.fa-rss-square:before{content:""}.fa-play-circle:before{content:""}.fa-ticket:before{content:""}.fa-minus-square:before{content:""}.fa-minus-square-o:before{content:""}.fa-level-up:before{content:""}.fa-level-down:before{content:""}.fa-check-square:before{content:""}.fa-pencil-square:before{content:""}.fa-external-link-square:before{content:""}.fa-share-square:before{content:""}.fa-compass:before{content:""}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:""}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:""}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:""}.fa-euro:before,.fa-eur:before{content:""}.fa-gbp:before{content:""}.fa-dollar:before,.fa-usd:before{content:""}.fa-rupee:before,.fa-inr:before{content:""}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:""}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:""}.fa-won:before,.fa-krw:before{content:""}.fa-bitcoin:before,.fa-btc:before{content:""}.fa-file:before{content:""}.fa-file-text:before{content:""}.fa-sort-alpha-asc:before{content:""}.fa-sort-alpha-desc:before{content:""}.fa-sort-amount-asc:before{content:""}.fa-sort-amount-desc:before{content:""}.fa-sort-numeric-asc:before{content:""}.fa-sort-numeric-desc:before{content:""}.fa-thumbs-up:before{content:""}.fa-thumbs-down:before{content:""}.fa-youtube-square:before{content:""}.fa-youtube:before{content:""}.fa-xing:before{content:""}.fa-xing-square:before{content:""}.fa-youtube-play:before{content:""}.fa-dropbox:before{content:""}.fa-stack-overflow:before{content:""}.fa-instagram:before{content:""}.fa-flickr:before{content:""}.fa-adn:before{content:""}.fa-bitbucket:before{content:""}.fa-bitbucket-square:before{content:""}.fa-tumblr:before{content:""}.fa-tumblr-square:before{content:""}.fa-long-arrow-down:before{content:""}.fa-long-arrow-up:before{content:""}.fa-long-arrow-left:before{content:""}.fa-long-arrow-right:before{content:""}.fa-apple:before{content:""}.fa-windows:before{content:""}.fa-android:before{content:""}.fa-linux:before{content:""}.fa-dribbble:before{content:""}.fa-skype:before{content:""}.fa-foursquare:before{content:""}.fa-trello:before{content:""}.fa-female:before{content:""}.fa-male:before{content:""}.fa-gittip:before,.fa-gratipay:before{content:""}.fa-sun-o:before{content:""}.fa-moon-o:before{content:""}.fa-archive:before{content:""}.fa-bug:before{content:""}.fa-vk:before{content:""}.fa-weibo:before{content:""}.fa-renren:before{content:""}.fa-pagelines:before{content:""}.fa-stack-exchange:before{content:""}.fa-arrow-circle-o-right:before{content:""}.fa-arrow-circle-o-left:before{content:""}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:""}.fa-dot-circle-o:before{content:""}.fa-wheelchair:before{content:""}.fa-vimeo-square:before{content:""}.fa-turkish-lira:before,.fa-try:before{content:""}.fa-plus-square-o:before{content:""}.fa-space-shuttle:before{content:""}.fa-slack:before{content:""}.fa-envelope-square:before{content:""}.fa-wordpress:before{content:""}.fa-openid:before{content:""}.fa-institution:before,.fa-bank:before,.fa-university:before{content:""}.fa-mortar-board:before,.fa-graduation-cap:before{content:""}.fa-yahoo:before{content:""}.fa-google:before{content:""}.fa-reddit:before{content:""}.fa-reddit-square:before{content:""}.fa-stumbleupon-circle:before{content:""}.fa-stumbleupon:before{content:""}.fa-delicious:before{content:""}.fa-digg:before{content:""}.fa-pied-piper:before{content:""}.fa-pied-piper-alt:before{content:""}.fa-drupal:before{content:""}.fa-joomla:before{content:""}.fa-language:before{content:""}.fa-fax:before{content:""}.fa-building:before{content:""}.fa-child:before{content:""}.fa-paw:before{content:""}.fa-spoon:before{content:""}.fa-cube:before{content:""}.fa-cubes:before{content:""}.fa-behance:before{content:""}.fa-behance-square:before{content:""}.fa-steam:before{content:""}.fa-steam-square:before{content:""}.fa-recycle:before{content:""}.fa-automobile:before,.fa-car:before{content:""}.fa-cab:before,.fa-taxi:before{content:""}.fa-tree:before{content:""}.fa-spotify:before{content:""}.fa-deviantart:before{content:""}.fa-soundcloud:before{content:""}.fa-database:before{content:""}.fa-file-pdf-o:before{content:""}.fa-file-word-o:before{content:""}.fa-file-excel-o:before{content:""}.fa-file-powerpoint-o:before{content:""}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:""}.fa-file-zip-o:before,.fa-file-archive-o:before{content:""}.fa-file-sound-o:before,.fa-file-audio-o:before{content:""}.fa-file-movie-o:before,.fa-file-video-o:before{content:""}.fa-file-code-o:before{content:""}.fa-vine:before{content:""}.fa-codepen:before{content:""}.fa-jsfiddle:before{content:""}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:""}.fa-circle-o-notch:before{content:""}.fa-ra:before,.fa-rebel:before{content:""}.fa-ge:before,.fa-empire:before{content:""}.fa-git-square:before{content:""}.fa-git:before{content:""}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:""}.fa-tencent-weibo:before{content:""}.fa-qq:before{content:""}.fa-wechat:before,.fa-weixin:before{content:""}.fa-send:before,.fa-paper-plane:before{content:""}.fa-send-o:before,.fa-paper-plane-o:before{content:""}.fa-history:before{content:""}.fa-circle-thin:before{content:""}.fa-header:before{content:""}.fa-paragraph:before{content:""}.fa-sliders:before{content:""}.fa-share-alt:before{content:""}.fa-share-alt-square:before{content:""}.fa-bomb:before{content:""}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:""}.fa-tty:before{content:""}.fa-binoculars:before{content:""}.fa-plug:before{content:""}.fa-slideshare:before{content:""}.fa-twitch:before{content:""}.fa-yelp:before{content:""}.fa-newspaper-o:before{content:""}.fa-wifi:before{content:""}.fa-calculator:before{content:""}.fa-paypal:before{content:""}.fa-google-wallet:before{content:""}.fa-cc-visa:before{content:""}.fa-cc-mastercard:before{content:""}.fa-cc-discover:before{content:""}.fa-cc-amex:before{content:""}.fa-cc-paypal:before{content:""}.fa-cc-stripe:before{content:""}.fa-bell-slash:before{content:""}.fa-bell-slash-o:before{content:""}.fa-trash:before{content:""}.fa-copyright:before{content:""}.fa-at:before{content:""}.fa-eyedropper:before{content:""}.fa-paint-brush:before{content:""}.fa-birthday-cake:before{content:""}.fa-area-chart:before{content:""}.fa-pie-chart:before{content:""}.fa-line-chart:before{content:""}.fa-lastfm:before{content:""}.fa-lastfm-square:before{content:""}.fa-toggle-off:before{content:""}.fa-toggle-on:before{content:""}.fa-bicycle:before{content:""}.fa-bus:before{content:""}.fa-ioxhost:before{content:""}.fa-angellist:before{content:""}.fa-cc:before{content:""}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:""}.fa-meanpath:before{content:""}.fa-buysellads:before{content:""}.fa-connectdevelop:before{content:""}.fa-dashcube:before{content:""}.fa-forumbee:before{content:""}.fa-leanpub:before{content:""}.fa-sellsy:before{content:""}.fa-shirtsinbulk:before{content:""}.fa-simplybuilt:before{content:""}.fa-skyatlas:before{content:""}.fa-cart-plus:before{content:""}.fa-cart-arrow-down:before{content:""}.fa-diamond:before{content:""}.fa-ship:before{content:""}.fa-user-secret:before{content:""}.fa-motorcycle:before{content:""}.fa-street-view:before{content:""}.fa-heartbeat:before{content:""}.fa-venus:before{content:""}.fa-mars:before{content:""}.fa-mercury:before{content:""}.fa-intersex:before,.fa-transgender:before{content:""}.fa-transgender-alt:before{content:""}.fa-venus-double:before{content:""}.fa-mars-double:before{content:""}.fa-venus-mars:before{content:""}.fa-mars-stroke:before{content:""}.fa-mars-stroke-v:before{content:""}.fa-mars-stroke-h:before{content:""}.fa-neuter:before{content:""}.fa-genderless:before{content:""}.fa-facebook-official:before{content:""}.fa-pinterest-p:before{content:""}.fa-whatsapp:before{content:""}.fa-server:before{content:""}.fa-user-plus:before{content:""}.fa-user-times:before{content:""}.fa-hotel:before,.fa-bed:before{content:""}.fa-viacoin:before{content:""}.fa-train:before{content:""}.fa-subway:before{content:""}.fa-medium:before{content:""}.fa-yc:before,.fa-y-combinator:before{content:""}.fa-optin-monster:before{content:""}.fa-opencart:before{content:""}.fa-expeditedssl:before{content:""}.fa-battery-4:before,.fa-battery-full:before{content:""}.fa-battery-3:before,.fa-battery-three-quarters:before{content:""}.fa-battery-2:before,.fa-battery-half:before{content:""}.fa-battery-1:before,.fa-battery-quarter:before{content:""}.fa-battery-0:before,.fa-battery-empty:before{content:""}.fa-mouse-pointer:before{content:""}.fa-i-cursor:before{content:""}.fa-object-group:before{content:""}.fa-object-ungroup:before{content:""}.fa-sticky-note:before{content:""}.fa-sticky-note-o:before{content:""}.fa-cc-jcb:before{content:""}.fa-cc-diners-club:before{content:""}.fa-clone:before{content:""}.fa-balance-scale:before{content:""}.fa-hourglass-o:before{content:""}.fa-hourglass-1:before,.fa-hourglass-start:before{content:""}.fa-hourglass-2:before,.fa-hourglass-half:before{content:""}.fa-hourglass-3:before,.fa-hourglass-end:before{content:""}.fa-hourglass:before{content:""}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:""}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:""}.fa-hand-scissors-o:before{content:""}.fa-hand-lizard-o:before{content:""}.fa-hand-spock-o:before{content:""}.fa-hand-pointer-o:before{content:""}.fa-hand-peace-o:before{content:""}.fa-trademark:before{content:""}.fa-registered:before{content:""}.fa-creative-commons:before{content:""}.fa-gg:before{content:""}.fa-gg-circle:before{content:""}.fa-tripadvisor:before{content:""}.fa-odnoklassniki:before{content:""}.fa-odnoklassniki-square:before{content:""}.fa-get-pocket:before{content:""}.fa-wikipedia-w:before{content:""}.fa-safari:before{content:""}.fa-chrome:before{content:""}.fa-firefox:before{content:""}.fa-opera:before{content:""}.fa-internet-explorer:before{content:""}.fa-tv:before,.fa-television:before{content:""}.fa-contao:before{content:""}.fa-500px:before{content:""}.fa-amazon:before{content:""}.fa-calendar-plus-o:before{content:""}.fa-calendar-minus-o:before{content:""}.fa-calendar-times-o:before{content:""}.fa-calendar-check-o:before{content:""}.fa-industry:before{content:""}.fa-map-pin:before{content:""}.fa-map-signs:before{content:""}.fa-map-o:before{content:""}.fa-map:before{content:""}.fa-commenting:before{content:""}.fa-commenting-o:before{content:""}.fa-houzz:before{content:""}.fa-vimeo:before{content:""}.fa-black-tie:before{content:""}.fa-fonticons:before{content:""}.fa-reddit-alien:before{content:""}.fa-edge:before{content:""}.fa-credit-card-alt:before{content:""}.fa-codiepie:before{content:""}.fa-modx:before{content:""}.fa-fort-awesome:before{content:""}.fa-usb:before{content:""}.fa-product-hunt:before{content:""}.fa-mixcloud:before{content:""}.fa-scribd:before{content:""}.fa-pause-circle:before{content:""}.fa-pause-circle-o:before{content:""}.fa-stop-circle:before{content:""}.fa-stop-circle-o:before{content:""}.fa-shopping-bag:before{content:""}.fa-shopping-basket:before{content:""}.fa-hashtag:before{content:""}.fa-bluetooth:before{content:""}.fa-bluetooth-b:before{content:""}.fa-percent:before{content:""}.mfp-counter{font-family:"PT Serif",serif}.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#000;opacity:0.8;filter:alpha(opacity=80)}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:none !important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none !important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-0.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-ready .mfp-preloader{display:none}.mfp-s-error .mfp-content{display:none}button.mfp-close,button.mfp-arrow{overflow:visible;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;display:block;outline:none;padding:0;z-index:1046;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:1;filter:alpha(opacity=100);padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:"PT Serif",serif}.mfp-close:hover,.mfp-close:focus{opacity:1;filter:alpha(opacity=100)}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#fff}.mfp-image-holder .mfp-close,.mfp-iframe-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px}.mfp-arrow{position:absolute;opacity:1;filter:alpha(opacity=100);margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:hover,.mfp-arrow:focus{opacity:1;filter:alpha(opacity=100)}.mfp-arrow:before,.mfp-arrow:after,.mfp-arrow .mfp-b,.mfp-arrow .mfp-a{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}.mfp-arrow:after,.mfp-arrow .mfp-a{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before,.mfp-arrow .mfp-b{border-top-width:21px;border-bottom-width:21px;opacity:0.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after,.mfp-arrow-left .mfp-a{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left:before,.mfp-arrow-left .mfp-b{margin-left:25px;border-right:27px solid #fff}.mfp-arrow-right{right:0}.mfp-arrow-right:after,.mfp-arrow-right .mfp-a{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right:before,.mfp-arrow-right .mfp-b{border-left:27px solid #fff}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,0.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-figure figcaption{margin-top:0;margin-bottom:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,0.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,0.6);position:fixed;text-align:center;padding:0}}@media all and (max-width: 900px){.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}@media print{.top-navigation,.social-share,.related-articles,.google-ads{display:none}}