From 8d046af7a99f600ad3508ac5824e4320962a478a Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Thu, 10 Mar 2016 13:06:59 -0500 Subject: [PATCH] Continue to refine styles and layouts --- _assets/css/_archive.scss | 47 +++ _base.scss => _assets/css/_base.scss | 18 +- _buttons.scss => _assets/css/_buttons.scss | 1 + _assets/css/_masthead.scss | 83 +++++ _assets/css/_navigation.scss | 45 +++ _assets/css/_notices.scss | 80 +++++ _assets/css/_page.scss | 289 +++--------------- _assets/css/_site.scss | 64 ---- _assets/css/_syntax.scss | 3 +- _assets/css/_toc.scss | 1 + _assets/css/_variables.scss | 2 +- _assets/css/main.scss | 9 +- _includes/archive-list-single | 8 +- _includes/author-profile | 48 +-- _includes/navigation | 26 +- _includes/toc | 4 +- _layouts/default.html | 6 +- _layouts/single.html | 6 +- _pages/category-archive.html | 2 +- _pages/collection-archive.html | 2 +- _pages/portfolio-archive.html | 2 +- _pages/recipes-archive.html | 2 +- _pages/tag-archive.html | 2 +- _pages/year-archive.html | 2 +- ...2-01-03-template-table-of-contents-post.md | 18 +- assets/css/main.css | 2 +- 26 files changed, 390 insertions(+), 382 deletions(-) create mode 100644 _assets/css/_archive.scss rename _base.scss => _assets/css/_base.scss (95%) rename _buttons.scss => _assets/css/_buttons.scss (98%) create mode 100644 _assets/css/_masthead.scss create mode 100644 _assets/css/_navigation.scss create mode 100644 _assets/css/_notices.scss delete mode 100644 _assets/css/_site.scss diff --git a/_assets/css/_archive.scss b/_assets/css/_archive.scss new file mode 100644 index 00000000..b85559f0 --- /dev/null +++ b/_assets/css/_archive.scss @@ -0,0 +1,47 @@ +/* ========================================================================== + ARCHIVE + ========================================================================== */ + +.archive { + @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); + } +} + +.archive__subtitle { + margin: 0; + padding-bottom: 0.5em; + font-size: 28px; + border-bottom: 1px solid $border-color; +} + +.archive__item-title { + margin-bottom: 4px; + font-size: 20px; + a { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } +} + +.archive__item-excerpt { + font-size: 14px; + & + p { + text-indent: 0; + } +} \ No newline at end of file diff --git a/_base.scss b/_assets/css/_base.scss similarity index 95% rename from _base.scss rename to _assets/css/_base.scss index 3bdb4068..1073c9ca 100644 --- a/_base.scss +++ b/_assets/css/_base.scss @@ -2,16 +2,13 @@ BASE ELEMENTS ========================================================================== */ -/* - Typography - ========================================================================== */ - body { margin: 0; padding: 0; color: $text-color; font-family: $serif; line-height: 1.5; + background-color: $body-color; &.overflow--hidden { /* when primary navigation is visible, the content in the background won't scroll */ overflow: hidden; @@ -79,7 +76,7 @@ p, pre, blockquote, ul, ol, dl, figure, table, fieldset { widows: 3; } -/* Abbreviations */ +/* abbreviations */ abbr[title], abbr[data-original-title] { @@ -88,7 +85,7 @@ abbr[data-original-title] { border-bottom: 1px dotted $text-color; } -/* Blockquotes */ +/* blockquotes */ blockquote { margin: 2em 1em 2em 0; @@ -110,10 +107,9 @@ blockquote { } } -/* Links */ +/* links */ a { - text-decoration: none; &:focus { @extend %tab-focus; } @@ -123,7 +119,7 @@ a { } } -/* Lists */ +/* lists */ ol, ul { @include breakpoint($small) { @@ -134,7 +130,7 @@ ol, ul { } } -/* Code */ +/* code */ tt, code, kbd, samp, pre { font-family: $monospace; @@ -157,7 +153,7 @@ figcaption code { } } -/* Horizontal rule */ +/* horizontal rule */ hr { display: block; diff --git a/_buttons.scss b/_assets/css/_buttons.scss similarity index 98% rename from _buttons.scss rename to _assets/css/_buttons.scss index 19860e10..cf1bd329 100644 --- a/_buttons.scss +++ b/_assets/css/_buttons.scss @@ -17,6 +17,7 @@ font-weight: bold; line-height: 1.5; text-align: center; + text-decoration: none; background-color: #000; border: 0 !important; border-radius: $border-radius; diff --git a/_assets/css/_masthead.scss b/_assets/css/_masthead.scss new file mode 100644 index 00000000..3ab0c406 --- /dev/null +++ b/_assets/css/_masthead.scss @@ -0,0 +1,83 @@ +/* ========================================================================== + MASTHEAD + ========================================================================== */ + +.masthead { + @include container; + padding: 2em 0 1em; + font-family: $sans-serif-narrow; + font-weight: 700; + text-transform: uppercase; + @include clearfix; + a { + text-decoration: none; + } +} + +/* Site name */ +.site-name { + @include grid(12,10); + @include prefix(12,1); + @include suffix(12,1); + margin-bottom: 1em; + float: none; + display: block; + font-size: 24px; + @include breakpoint($small) { + @include grid(12,2); + @include prefix(12,0.5); + @include suffix(12,0.5); + font-size: 16px; + } + @include breakpoint($x-large) { + @include grid(12,1.5); + @include prefix(12,2); + } +} + +.masthead__menu { + @include grid(12,10); + @include prefix(12,1); + @include suffix(12,1); + margin-bottom: 1em; + float: none; + display: block; + @include breakpoint($small) { + @include grid(12,9); + @include prefix(12,0); + @include suffix(12,0); + } + @include breakpoint($x-large) { + @include grid(12,8); + } + ul { + margin: 0; + padding: 0; + clear: both; + list-style-type: none; + } +} + +.masthead__menu-item { + display: block; + list-style-type: none; + border-bottom: 1px solid $border-color; + font-size: 16px; + &:last-child { + border-bottom: 0 solid transparent; + } + @include breakpoint($small) { + display: inline; + margin-right: 25px; + white-space: nowrap; + border-bottom: 0 solid transparent; + } + a { + display: block; + padding: 10px 0; + @include breakpoint($small) { + display: inline; + padding: 0; + } + } + } \ No newline at end of file diff --git a/_assets/css/_navigation.scss b/_assets/css/_navigation.scss new file mode 100644 index 00000000..2e5148d5 --- /dev/null +++ b/_assets/css/_navigation.scss @@ -0,0 +1,45 @@ +/* ========================================================================== + NAVIGATION + ========================================================================== */ + +/* + Breadcrumb navigation links + ========================================================================== */ + +.breadcrumbs { + ol { + padding: 0; + list-style: none; + } + li { + display: inline; + } + .current { + font-weight: bold; + } +} + + +/* + Post pagination navigation links + ========================================================================== */ + +.pagination { + padding-top: 0.5em; + border-top: 1px solid $border-color; + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + li { + display: inline-block; + } + li + li:before { + content: ""; + padding-right: 10px; + } + .current { + font-weight: bold; + } +} \ No newline at end of file diff --git a/_assets/css/_notices.scss b/_assets/css/_notices.scss new file mode 100644 index 00000000..3b773f6e --- /dev/null +++ b/_assets/css/_notices.scss @@ -0,0 +1,80 @@ +/* ========================================================================== + NOTICE TEXT BLOCKS + ========================================================================== */ + +/** + * Default Kramdown usage (no indents!): + *
+ * #### Headline for the Notice + * Text for the notice + *
+ */ + +@mixin notice($notice-color) { + margin: 2em 0; + padding: 1em; + background-color: mix(#fff, $notice-color, 90%); + border-top: 0.25em solid mix(#fff, $notice-color, 50%); + border-bottom: 0.25em solid mix(#fff, $notice-color, 50%); + h4 { + margin-top: 0 !important; // override + margin-bottom: 0.75em; + line-height: 1 !important; // override + } + @at-root .page__content #{&} h4 { + // using at-root to override .page-content h4 font size + margin-bottom: 0; + font-size: 1rem; + } + @at-root .page__content #{&} a { + border-bottom-width: 2px; + box-shadow: none !important; // override + &:hover { + background-color: transparent !important; // override + } + } + p { + margin-bottom: 0; + a { + border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override + } + } + h4 + p { + // remove space above paragraphs that appear directly after notice headline + margin-top: 0; + padding-top: 0; + } + code { + background-color: mix(#fff, $notice-color, 70%) + } +} + +/* Default notice */ + +.notice { + @include notice($primary-color); +} + +/* Info notice */ + +.notice--info { + @include notice($info-color); +} + +/* Warning notice */ + +.notice--warning { + @include notice($warning-color); +} + +/* Success notice */ + +.notice--success { + @include notice($success-color); +} + +/* Danger notice */ + +.notice--danger { + @include notice($danger-color); +} \ No newline at end of file diff --git a/_assets/css/_page.scss b/_assets/css/_page.scss index ac8ee17d..4f14f18b 100644 --- a/_assets/css/_page.scss +++ b/_assets/css/_page.scss @@ -2,96 +2,6 @@ SINGLE PAGE/POST ========================================================================== */ -body { - background-color: $body-color; - font-family: $serif; - color: $text-color; -} - -/* - Header - ========================================================================== */ - -.navigation-wrapper { - @include container; - padding: 2em 0 1em; - font-family: $sans-serif-narrow; - font-weight: 700; - text-transform: uppercase; - @include clearfix; -} - -/* Site name */ -.site-name { - @include grid(12,10); - @include prefix(12,1); - @include suffix(12,1); - margin-bottom: 1em; - float: none; - display: block; - font-size: 24px; - @include breakpoint($small) { - @include grid(12,2); - @include prefix(12,0.5); - @include suffix(12,0.5); - font-size: 16px; - } - @include breakpoint($x-large) { - @include grid(12,1.5); - @include prefix(12,2); - } -} - -/* Top navigation links */ -.top-navigation { - @include grid(12,10); - @include prefix(12,1); - @include suffix(12,1); - margin-bottom: 1em; - float: none; - display: block; - @include breakpoint($small) { - @include grid(12,9); - @include prefix(12,0); - @include suffix(12,0); - } - @include breakpoint($x-large) { - @include grid(12,8); - } - ul { - margin: 0; - padding: 0; - clear: both; - list-style-type: none; - } - li { - display: block; - list-style-type: none; - border-bottom: 1px solid lighten(#000,80); - border-bottom: 1px solid fade(#000,10); - font-size: 16px; - &:last-child { - border-bottom: 0 solid transparent; - } - @include breakpoint($small) { - display: inline; - margin-right: 25px; - white-space: nowrap; - border-bottom: 0 solid transparent; - } - a { - display: block; - padding: 10px 0; - decoration: none; - border-bottom: 0 solid transparent; - @include breakpoint($small) { - display: inline; - padding: 0; - } - } - } -} - /* Main content */ #main { counter-reset: captions; @@ -107,64 +17,38 @@ body { @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); - } -} -/* Archive listing specific styling */ -.archive { - @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); } - h3 { - margin: 0; - padding-bottom: .5em; - font-size: 28px; - border-bottom: 1px solid mix(#fff, #000, 70%); - } - article { - h2 { - margin-bottom: 4px; - font-size: 20px; - } - p { - font-size: 14px; - } - p + p { - text-indent: 0; +} + +.page__title {} + +.page__content { + ul, ol { + li + li { + margin-top: 0.5em; } } } -/* Large feature header image */ -.image-wrap { +.page__hero { position: relative; margin-bottom: 2em; @include clearfix; &:after { - content: " "; + content: ""; display: block; position: absolute; bottom: 0; @@ -183,10 +67,34 @@ body { left: 33.333333333%; } } - img { - width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; +} + +.page__hero-image { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} + +.page__hero-caption { + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $sans-serif; + font-size: 10px; + background: #000; + text-align: right; + z-index: 5; + opacity: 0.5; + border-radius: $border-radius 0 $border-radius 0; + @include breakpoint($medium) { + padding: 5px 10px; + } + a { + color: #fff; + text-decoration: none; } } @@ -216,37 +124,35 @@ body { @include prefix(12,2); } } -.author-name { +.author__name { margin-bottom: 0; @include breakpoint($small) { margin-top: 10px; margin-bottom: 10px; } } -.author-bio { +.author__bio { font-size: 80%; font-style: italic; @include breakpoint($small) { margin-bottom: 20px; } } -.author-avatar { +.author__avatar { max-width: 110px; border-radius: 50%; } -.author-social { +.author__social-url { display: block; margin-bottom: 5px; font-size: 14px; color: #000; + text-decoration: none; &:visited { color: #000; } &:hover { - transform: scale(1.1); - } - &:active { - transform: translate(0, 2px); + text-decoration: underline; } .fa { margin-right: 5px; @@ -257,68 +163,14 @@ body { max-width: 125px; } @include breakpoint($large) { - .author-name, - .author-avatar, - .author-bio, - .author-social { + .author__name, + .author__avatar, + .author__bio, + .author__social-url { max-width: 150px; } } -/* Post content wrapper */ -.article-wrap { - // Dotted line underlines for links - p > a, - p > em > a, - p > strong > a, - li > a { - text-decoration: underline; - } -} - -/* Image grid - not used */ -.image-grid { - @include clearfix; - list-style: none; - margin: 0 0 1em; - padding: 0; - li { - @include grid(12,6); - @include breakpoint($micro) { - width: 33.333333%; - } - @include breakpoint($small) { - width: 25%; - } - @include breakpoint($medium) { - width: 20%; - } - @include breakpoint($large) { - width: 16.666666666%; - } - } -} - -/* Recent grid - not used */ -.recent-grid { - @include clearfix; - list-style: none; - margin: 1em 0; - li { - display: inline; - a { - border-bottom: 0 solid transparent; - &:hover { - border-bottom: 0 solid transparent; - } - } - } - img { - width: 19%; - margin-bottom: 1%; - } -} - /* Social sharing links */ .social-share { h4 { @@ -447,45 +299,4 @@ body { } #goog-wm-sb { @extend .btn; -} - -/* - Breadcrumbs - ========================================================================== */ - -.breadcrumbs { - ol { - padding: 0; - list-style: none; - } - li { - display: inline; - } - .current { - font-weight: bold; - } -} - -/* - Post pagination links - ========================================================================== */ - -.pagination { - padding-top: 0.5em; - border-top: 1px solid mix(#fff, #000, 70%); - ul { - margin: 0; - padding: 0; - list-style-type: none; - } - li { - display: inline-block; - } - li + li:before { - content: ""; - padding-right: 10px; - } - .current { - font-weight: bold; - } } \ No newline at end of file diff --git a/_assets/css/_site.scss b/_assets/css/_site.scss deleted file mode 100644 index ba9e7e04..00000000 --- a/_assets/css/_site.scss +++ /dev/null @@ -1,64 +0,0 @@ -/* ========================================================================== - Site wide styles - ========================================================================== */ - -/* - Selection - ========================================================================== */ - -::-moz-selection { - background-color: mix(#fff, $base-color, 65%); - color: $base-color; - text-shadow: none; -} -::selection { - background-color: mix(#fff, $base-color, 65%); - color: $base-color; - text-shadow: none; -} - -/* - Global classes - ========================================================================== */ - -/* Capitalize */ -.all-caps { - text-transform: uppercase; -} - -/* Float left */ -.pull-left { - float: left; -} - -/* Float right */ -.pull-right { - float: right; -} -.image-pull-right { - float: right; - margin-top: 0; -} - -/* Clearfix */ -.clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - } - &:after { - clear: both; - } -} - -/* Remove bullets and indentation from list */ -.unstyled-list { - list-style: none; - margin-left: 0; - padding-left: 0; - li { - list-style-type: none; - } -} \ No newline at end of file diff --git a/_assets/css/_syntax.scss b/_assets/css/_syntax.scss index 6d05bf6b..b5af0871 100644 --- a/_assets/css/_syntax.scss +++ b/_assets/css/_syntax.scss @@ -2,7 +2,8 @@ Syntax highlighting ========================================================================== */ -div.highlighter-rouge { +div.highlighter-rouge, +figure.highlight { margin-bottom: 1em; padding: 1em; border: 1px solid $border-color; diff --git a/_assets/css/_toc.scss b/_assets/css/_toc.scss index 36778dd4..5a4c56ff 100644 --- a/_assets/css/_toc.scss +++ b/_assets/css/_toc.scss @@ -56,6 +56,7 @@ } a { display: block; + text-decoration: none; &:hover { text-decoration: underline; } diff --git a/_assets/css/_variables.scss b/_assets/css/_variables.scss index e4d88834..67406735 100644 --- a/_assets/css/_variables.scss +++ b/_assets/css/_variables.scss @@ -8,7 +8,7 @@ $doc-font-size : 16; $doc-line-height : 26; -$paragraph-indent : true !default; +$paragraph-indent : false !default; $indent-var : 0rem + ($doc-line-height / $doc-font-size); $serif : "PT Serif", serif; diff --git a/_assets/css/main.scss b/_assets/css/main.scss index aabd0ff2..4e39629e 100644 --- a/_assets/css/main.scss +++ b/_assets/css/main.scss @@ -13,13 +13,20 @@ @import "reset"; @import "base"; + @import "utilities"; @import "buttons"; +@import "notices"; +@import "masthead"; +@import "navigation"; @import "toc"; // table of contents - @import "syntax"; + @import "forms"; + @import "page"; +@import "archive"; + @import "vendor/font-awesome/font-awesome"; @import "vendor/magnific-popup/magnific-popup"; @import "print"; \ No newline at end of file diff --git a/_includes/archive-list-single b/_includes/archive-list-single index 37d421d6..0fa204cb 100644 --- a/_includes/archive-list-single +++ b/_includes/archive-list-single @@ -1,8 +1,8 @@ -
+
{% if post.link %} -

{% if post.id %}{{ post.title | markdownify | remove: "

" | remove: "

" }}{% else %}{{ post.title }}{% endif %}

+

{% if post.id %}{{ post.title | markdownify | remove: "

" | remove: "

" }}{% else %}{{ post.title }}{% endif %}

{% else %} -

{% if post.id %}{{ post.title | markdownify | remove: "

" | remove: "

" }}{% else %}{{ post.title }}{% endif %}

+

{% if post.id %}{{ post.title | markdownify | remove: "

" | remove: "

" }}{% else %}{{ post.title }}{% endif %}

{% endif %} - {% if post.excerpt %}

{{ post.excerpt | markdownify | strip_html | truncate: 160 }}

{% endif %} + {% if post.excerpt %}

{{ post.excerpt | markdownify | strip_html | truncate: 160 }}

{% endif %}
\ No newline at end of file diff --git a/_includes/author-profile b/_includes/author-profile index 76bb3267..e6b4ae78 100644 --- a/_includes/author-profile +++ b/_includes/author-profile @@ -5,74 +5,74 @@
{% if author.avatar contains "http" %} - {{ author.name }} photo + {{ author.name }} {% else %} - {{ author.name }} photo + {{ author.name }} {% endif %}

{{ author.name }}

- {% if author.bio %}

{{ author.bio }}

{% endif %} + {% if author.bio %}

{{ author.bio }}

{% endif %} {% if author.uri %} - Website + {% endif %} {% if author.email %} - Email + {% endif %} {% if author.twitter %} - Twitter + {% endif %} {% if author.facebook %} - Facebook + {% endif %} {% if author.google_plus %} - Google+ + {% endif %} {% if author.linkedin %} - LinkedIn + {% endif %} {% if author.xing %} - XING + {% endif %} {% if author.instagram %} - Instagram + {% endif %} {% if author.tumblr %} - Tumblr + {% endif %} {% if author.github %} - Github + {% endif %} {% if author.stackoverflow %} - Stackoverflow + {% endif %} {% if author.lastfm %} - Last.fm + {% endif %} {% if author.dribbble %} - Dribbble + {% endif %} {% if author.pinterest %} - Pinterest + {% endif %} {% if author.foursquare %} - Foursquare + {% endif %} {% if author.steam %} - Steam + {% endif %} {% if author.youtube %} - Youtube + {% endif %} {% if author.soundcloud %} - Soundcloud + {% endif %} {% if author.weibo %} - Weibo + {% endif %} {% if author.flickr %} - Flickr + {% endif %} {% if author.codepen %} - CodePen + {% endif %}
diff --git a/_includes/navigation b/_includes/navigation index 04005971..73575125 100644 --- a/_includes/navigation +++ b/_includes/navigation @@ -1,19 +1,19 @@ -
+
{{ site.title }}
-
-
diff --git a/_includes/toc b/_includes/toc index a4afbd82..5149695a 100644 --- a/_includes/toc +++ b/_includes/toc @@ -1,7 +1,7 @@ -
+
\ No newline at end of file + \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 18175cf4..3742f98d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,16 +16,16 @@ layout: compress {% include navigation %} {% if page.header.image %} -
+
{{ page.title }} + alt="{{ page.title }}" class="page__hero-image"> {% if page.header.caption %} - {{ page.header.caption | markdownify | remove: "

" | remove: "

" }} + {{ page.header.caption | markdownify | remove: "

" | remove: "

" }} {% endif %}
{% endif %} diff --git a/_layouts/single.html b/_layouts/single.html index d69ad8bb..ea3fbb89 100644 --- a/_layouts/single.html +++ b/_layouts/single.html @@ -9,12 +9,12 @@ layout: default {% if page.date %}{% endif %} {% if page.modified %}{% endif %} -
+
-

{{ page.title | markdownify | remove: "

" | remove: "

" }}

+

{{ page.title | markdownify | remove: "

" | remove: "

" }}

-
+
{{ content }} {% if page.link %}{% endif %}
diff --git a/_pages/category-archive.html b/_pages/category-archive.html index b37173bc..8697d21f 100644 --- a/_pages/category-archive.html +++ b/_pages/category-archive.html @@ -10,7 +10,7 @@ author_profile: false {% for category in group_names %} {% assign posts = group_items[forloop.index0] %} -

{{ category }}

+

{{ category }}

{% for post in posts %} {% include archive-list-single %} {% endfor %} diff --git a/_pages/collection-archive.html b/_pages/collection-archive.html index dd75888e..df1f7cff 100644 --- a/_pages/collection-archive.html +++ b/_pages/collection-archive.html @@ -12,7 +12,7 @@ author_profile: false {% unless collection.output == false or collection.label == 'posts' %} {% capture label %}{{ collection.label }}{% endcapture %} {% if label != written_label %} -

{{ label }}

+

{{ label }}

{% capture written_label %}{{ label }}{% endcapture %} {% endif %} {% endunless %} diff --git a/_pages/portfolio-archive.html b/_pages/portfolio-archive.html index fa16f487..2befa23c 100644 --- a/_pages/portfolio-archive.html +++ b/_pages/portfolio-archive.html @@ -9,7 +9,7 @@ permalink: /portfolio/ {% for category in group_names %} {% assign posts = group_items[forloop.index0] %} -

{{ category }}

+

{{ category }}

{% for post in posts %} {% include archive-list-single %} {% endfor %} diff --git a/_pages/recipes-archive.html b/_pages/recipes-archive.html index dfb87498..645ec5d3 100644 --- a/_pages/recipes-archive.html +++ b/_pages/recipes-archive.html @@ -10,7 +10,7 @@ author_profile: false {% for category in group_names %} {% assign posts = group_items[forloop.index0] %} -

{{ category }}

+

{{ category }}

{% for post in posts %} {% include archive-list-single %} {% endfor %} diff --git a/_pages/tag-archive.html b/_pages/tag-archive.html index e338329d..e3a628c8 100644 --- a/_pages/tag-archive.html +++ b/_pages/tag-archive.html @@ -10,7 +10,7 @@ author_profile: false {% for tag in group_names %} {% assign posts = group_items[forloop.index0] %} -

{{ tag }}

+

{{ tag }}

{% for post in posts %} {% include archive-list-single %} {% endfor %} diff --git a/_pages/year-archive.html b/_pages/year-archive.html index 333a5011..8604074b 100644 --- a/_pages/year-archive.html +++ b/_pages/year-archive.html @@ -10,7 +10,7 @@ author_profile: false {% for post in site.posts %} {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %} {% if year != written_year %} -

{{ year }}

+

{{ year }}

{% capture written_year %}{{ year }}{% endcapture %} {% endif %} {% include archive-list-single %} diff --git a/_posts/2012-01-03-template-table-of-contents-post.md b/_posts/2012-01-03-template-table-of-contents-post.md index c2fb1ab8..4948a585 100644 --- a/_posts/2012-01-03-template-table-of-contents-post.md +++ b/_posts/2012-01-03-template-table-of-contents-post.md @@ -33,7 +33,7 @@ Below is just about everything you'll need to style in the theme. Check the sour Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam. ![Smithsonian Image]({{ site.url }}{{ site.baseurl }}/images/3953273590_704e3899d5_m.jpg) -{: .image-pull-right} +{: .image-right} *This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. @@ -74,27 +74,27 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c ## Code Snippets -{% highlight css %} +```css #container { float: left; margin: 0 -240px 0 0; width: 100%; } -{% endhighlight %} +``` ## Buttons Make any link standout more when applying the `.btn` class. -{% highlight html %} +```html Success Button -{% endhighlight %} +``` - - - - + + + + ## Notices diff --git a/assets/css/main.css b/assets/css/main.css index 340ab7b1..7f8023f5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4 +1,4 @@ -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}/*! +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;background-color:#fff}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,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: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;text-decoration:none;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}.notice{margin:2em 0;padding:1em;background-color:#e6e6e6;border-top:0.25em solid gray;border-bottom:0.25em solid gray}.notice h4{margin-top:0 !important;margin-bottom:0.75em;line-height:1 !important}.page__content .notice h4{margin-bottom:0;font-size:1rem}.page__content .notice a{border-bottom-width:2px;box-shadow:none !important}.page__content .notice a:hover{background-color:transparent !important}.notice p{margin-bottom:0}.notice p a{border-bottom:1px solid gray !important}.notice h4+p{margin-top:0;padding-top:0}.notice code{background-color:#b3b3b3}.notice--info{margin:2em 0;padding:1em;background-color:#eaf4f8;border-top:0.25em solid #98c6de;border-bottom:0.25em solid #98c6de}.notice--info h4{margin-top:0 !important;margin-bottom:0.75em;line-height:1 !important}.page__content .notice--info h4{margin-bottom:0;font-size:1rem}.page__content .notice--info a{border-bottom-width:2px;box-shadow:none !important}.page__content .notice--info a:hover{background-color:transparent !important}.notice--info p{margin-bottom:0}.notice--info p a{border-bottom:1px solid #98c6de !important}.notice--info h4+p{margin-top:0;padding-top:0}.notice--info code{background-color:#c1ddeb}.notice--warning{margin:2em 0;padding:1em;background-color:#fcf3eb;border-top:0.25em solid #eec19c;border-bottom:0.25em solid #eec19c}.notice--warning h4{margin-top:0 !important;margin-bottom:0.75em;line-height:1 !important}.page__content .notice--warning h4{margin-bottom:0;font-size:1rem}.page__content .notice--warning a{border-bottom-width:2px;box-shadow:none !important}.page__content .notice--warning a:hover{background-color:transparent !important}.notice--warning p{margin-bottom:0}.notice--warning p a{border-bottom:1px solid #eec19c !important}.notice--warning h4+p{margin-top:0;padding-top:0}.notice--warning code{background-color:#f5dac3}.notice--success{margin:2em 0;padding:1em;background-color:#eff8ef;border-top:0.25em solid #aedcae;border-bottom:0.25em solid #aedcae}.notice--success h4{margin-top:0 !important;margin-bottom:0.75em;line-height:1 !important}.page__content .notice--success h4{margin-bottom:0;font-size:1rem}.page__content .notice--success a{border-bottom-width:2px;box-shadow:none !important}.page__content .notice--success a:hover{background-color:transparent !important}.notice--success p{margin-bottom:0}.notice--success p a{border-bottom:1px solid #aedcae !important}.notice--success h4+p{margin-top:0;padding-top:0}.notice--success code{background-color:#ceeace}.notice--danger{margin:2em 0;padding:1em;background-color:#f9eceb;border-top:0.25em solid #e3a29b;border-bottom:0.25em solid #e3a29b}.notice--danger h4{margin-top:0 !important;margin-bottom:0.75em;line-height:1 !important}.page__content .notice--danger h4{margin-bottom:0;font-size:1rem}.page__content .notice--danger a{border-bottom-width:2px;box-shadow:none !important}.page__content .notice--danger a:hover{background-color:transparent !important}.notice--danger p{margin-bottom:0}.notice--danger p a{border-bottom:1px solid #e3a29b !important}.notice--danger h4+p{margin-top:0;padding-top:0}.notice--danger code{background-color:#eec7c3}.masthead{margin:0 auto;width:100%;padding:2em 0 1em;font-family:"PT Sans Narrow",sans-serif;font-weight:700;text-transform:uppercase}.masthead::after{clear:both;content:"";display:table}.masthead a{text-decoration:none}.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%}}.masthead__menu{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){.masthead__menu{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%}}@media (min-width: 86.375em){.masthead__menu{display:inline;float:left;width:66.66667%}}.masthead__menu ul{margin:0;padding:0;clear:both;list-style-type:none}.masthead__menu-item{display:block;list-style-type:none;border-bottom:1px solid #e2e2e2;font-size:16px}.masthead__menu-item:last-child{border-bottom:0 solid transparent}@media (min-width: 37.5em){.masthead__menu-item{display:inline;margin-right:25px;white-space:nowrap;border-bottom:0 solid transparent}}.masthead__menu-item a{display:block;padding:10px 0}@media (min-width: 37.5em){.masthead__menu-item a{display:inline;padding:0}}.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 #e2e2e2}.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}.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;text-decoration:none}.toc__menu li a:hover{text-decoration:underline}.toc__menu>li{padding:5px 0;border-top:2px solid #e2e2e2}div.highlighter-rouge,figure.highlight{margin-bottom:1em;padding:1em;border:1px solid #e2e2e2;border-radius:4px}div.highlighter-rouge .highlight,figure.highlight .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}#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%}}.page__content ul li+li,.page__content ol li+li{margin-top:0.5em}.page__hero{position:relative;margin-bottom:2em}.page__hero::after{clear:both;content:"";display:table}.page__hero: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){.page__hero:after{left:25%}}@media (min-width: 62em){.page__hero:after{border-width:20px}}@media (min-width: 86.375em){.page__hero:after{left:33.333333333%}}.page__hero-image{width:100%;height:auto;-ms-interpolation-mode:bicubic}.page__hero-caption{position:absolute;bottom:0;right:0;margin:0 auto;padding:2px 5px;color:#fff;font-family:-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;font-size:10px;background:#000;text-align:right;z-index:5;opacity:0.5;border-radius:4px 0 4px 0}@media (min-width: 48em){.page__hero-caption{padding:5px 10px}}.page__hero-caption a{color:#fff;text-decoration:none}.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-url{display:block;margin-bottom:5px;font-size:14px;color:#000;text-decoration:none}.author__social-url:visited{color:#000}.author__social-url:hover{text-decoration:underline}.author__social-url .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-url{max-width:150px}}.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}.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__subtitle{margin:0;padding-bottom:0.5em;font-size:28px;border-bottom:1px solid #e2e2e2}.archive__item-title{margin-bottom:4px;font-size:20px}.archive__item-title a{text-decoration:none}.archive__item-title a:hover{text-decoration:underline}.archive__item-excerpt{font-size:14px}.archive__item-excerpt+p{text-indent:0}/*! * 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}}