From 478e27b2f6c97b26aac61b38307f4ff8ac6f0e20 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Mon, 23 May 2016 14:28:55 +0200 Subject: [PATCH] CSS compiled --- css/grillade.css | 5 +- css/grillade.scss | 805 ++++++++++++ css/knacss-unminified.css | 2620 +++++++++++++++++-------------------- css/knacss.css | 6 +- 4 files changed, 2043 insertions(+), 1393 deletions(-) create mode 100644 css/grillade.scss diff --git a/css/grillade.css b/css/grillade.css index c5b59af..3210a03 100644 --- a/css/grillade.css +++ b/css/grillade.css @@ -1,4 +1 @@ -/*! -* www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem;letter-spacing:-.31em}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% * 1 / 4 - 2rem - .01px);min-width:0;margin-left:2rem;display:inline-block;vertical-align:top;letter-spacing:normal}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem - .01px)}@media (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (max-width:320px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-tiny-2"]>.flex-item-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 2rem - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 2rem - .01px)}@media (max-width:640px){.grid-2-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 2rem - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 2rem - .01px)}@media (max-width:640px){.grid-1-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 2rem - .01px)}@media (max-width:640px){.grid-3-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 2rem - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem - .01px)}@media (max-width:640px){.grid-1-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 2rem - .01px)}@media (max-width:640px){.grid-3-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 2rem - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem - .01px)}@media (max-width:640px){.grid-2-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 2rem - .01px)}@media (max-width:640px){.grid-4-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 2rem - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem - .01px)}@media (max-width:640px){.grid-1-4>:nth-child(n){width:calc(100% - 2rem - .01px)}}.pull{margin-right:auto}.push{margin-left:auto} \ No newline at end of file +[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.flex-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.flex-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1 :nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2 :nth-child(odd),.grid-2-1 :nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2 :nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1 :nth-child(odd){width:calc(75% - 2rem)}.grid-1-3 :nth-child(odd),.grid-3-1 :nth-child(even){width:calc(25% - 2rem)}.grid-1-3 :nth-child(even){width:calc(75% - 2rem)}.grid-3-2 :nth-child(odd){width:calc(60% - 2rem)}.grid-2-3 :nth-child(odd),.grid-3-2 :nth-child(even){width:calc(40% - 2rem)}.grid-2-3 :nth-child(even){width:calc(60% - 2rem)}.grid-4-1 :nth-child(odd){width:calc(80% - 2rem)}.grid-1-4 :nth-child(odd),.grid-4-1 :nth-child(even){width:calc(20% - 2rem)}.grid-1-4 :nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto} \ No newline at end of file diff --git a/css/grillade.scss b/css/grillade.scss new file mode 100644 index 0000000..e91e34c --- /dev/null +++ b/css/grillade.scss @@ -0,0 +1,805 @@ +@charset 'UTF-8'; + +// _ _ _ _ _ +// (_) | | | | | (_) +// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _ +// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` | +// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| | +// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_| +// +// Simple, elegant and maintainable media queries in Sass +// v1.4.3 +// +// http://include-media.com +// +// Authors: Eduardo Boucas (@eduardoboucas) +// Hugo Giraudel (@hugogiraudel) +// +// This project is licensed under the terms of the MIT license + + +//// +/// include-media library public configuration +/// @author Eduardo Boucas +/// @access public +//// + + +/// +/// Creates a list of global breakpoints +/// +/// @example scss - Creates a single breakpoint with the label `phone` +/// $breakpoints: ('phone': 320px); +/// +$breakpoints: ( + 'phone': 320px, + 'tablet': 768px, + 'desktop': 1024px +) !default; + + +/// +/// Creates a list of static expressions or media types +/// +/// @example scss - Creates a single media type (screen) +/// $media-expressions: ('screen': 'screen'); +/// +/// @example scss - Creates a static expression with logical disjunction (OR operator) +/// $media-expressions: ( +/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)' +/// ); +/// +$media-expressions: ( + 'screen': 'screen', + 'print': 'print', + 'handheld': 'handheld', + 'landscape': '(orientation: landscape)', + 'portrait': '(orientation: portrait)', + 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)', + 'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)' +) !default; + + +/// +/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals +/// +/// @example scss - Interval for pixels is defined as `1` by default +/// @include media('>128px') {} +/// +/// /* Generates: */ +/// @media (min-width: 129px) {} +/// +/// @example scss - Interval for ems is defined as `0.01` by default +/// @include media('>20em') {} +/// +/// /* Generates: */ +/// @media (min-width: 20.01em) {} +/// +/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` +/// @include media('>2.0rem') {} +/// +/// /* Generates: */ +/// @media (min-width: 2.1rem) {} +/// +$unit-intervals: ( + 'px': 1, + 'em': 0.01, + 'rem': 0.1 +) !default; + +/// +/// Defines whether support for media queries is available, useful for creating separate stylesheets +/// for browsers that don't support media queries. +/// +/// @example scss - Disables support for media queries +/// $im-media-support: false; +/// @include media('>=tablet') { +/// .foo { +/// color: tomato; +/// } +/// } +/// +/// /* Generates: */ +/// .foo { +/// color: tomato; +/// } +/// +$im-media-support: true !default; + +/// +/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or +/// intercept the breakpoint will be displayed, any others will be ignored. +/// +/// @example scss - This media query will show because it intercepts the static breakpoint +/// $im-media-support: false; +/// $im-no-media-breakpoint: 'desktop'; +/// @include media('>=tablet') { +/// .foo { +/// color: tomato; +/// } +/// } +/// +/// /* Generates: */ +/// .foo { +/// color: tomato; +/// } +/// +/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint +/// $im-media-support: false; +/// $im-no-media-breakpoint: 'tablet'; +/// @include media('>=desktop') { +/// .foo { +/// color: tomato; +/// } +/// } +/// +/// /* No output */ +/// +$im-no-media-breakpoint: 'desktop' !default; + +/// +/// Selects which media expressions are allowed in an expression for it to be used when media queries +/// are not supported. +/// +/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions +/// $im-media-support: false; +/// $im-no-media-breakpoint: 'desktop'; +/// $im-no-media-expressions: ('screen'); +/// @include media('>=tablet', 'screen') { +/// .foo { +/// color: tomato; +/// } +/// } +/// +/// /* Generates: */ +/// .foo { +/// color: tomato; +/// } +/// +/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted +/// $im-media-support: false; +/// $im-no-media-breakpoint: 'desktop'; +/// $im-no-media-expressions: ('screen'); +/// @include media('>=tablet', 'retina2x') { +/// .foo { +/// color: tomato; +/// } +/// } +/// +/// /* No output */ +/// +$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default; + +//// +/// Cross-engine logging engine +/// @author Hugo Giraudel +/// @access private +//// + + +/// +/// Log a message either with `@error` if supported +/// else with `@warn`, using `feature-exists('at-error')` +/// to detect support. +/// +/// @param {String} $message - Message to log +/// +@function log($message) { + @if feature-exists('at-error') { + @error $message; + } @else { + @warn $message; + $_: noop(); + } + + @return $message; +} + + +/// +/// Wrapper mixin for the log function so it can be used with a more friendly +/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function +/// within functions because it is not possible to include a mixin in a function +/// and use the mixin everywhere else because it's much more elegant. +/// +/// @param {String} $message - Message to log +/// +@mixin log($message) { + @if log($message) {} +} + + +/// +/// Function with no `@return` called next to `@warn` in Sass 3.3 +/// to trigger a compiling error and stop the process. +/// +@function noop() {} + +/// +/// Determines whether a list of conditions is intercepted by the static breakpoint. +/// +/// @param {Arglist} $conditions - Media query conditions +/// +/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint +/// +@function im-intercepts-static-breakpoint($conditions...) { + $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint); + + @if not $no-media-breakpoint-value { + @if log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {} + } + + @each $condition in $conditions { + @if not map-has-key($media-expressions, $condition) { + $operator: get-expression-operator($condition); + $prefix: get-expression-prefix($operator); + $value: get-expression-value($condition, $operator); + + // scss-lint:disable SpaceAroundOperator + @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or + ($prefix == 'min' and $value > $no-media-breakpoint-value) { + @return false; + } + } @else if not index($im-no-media-expressions, $condition) { + @return false; + } + } + + @return true; +} + +//// +/// Parsing engine +/// @author Hugo Giraudel +/// @access private +//// + + +/// +/// Get operator of an expression +/// +/// @param {String} $expression - Expression to extract operator from +/// +/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` +/// +@function get-expression-operator($expression) { + @each $operator in ('>=', '>', '<=', '<', '≥', '≤') { + @if str-index($expression, $operator) { + @return $operator; + } + } + + // It is not possible to include a mixin inside a function, so we have to + // rely on the `log(..)` function rather than the `log(..)` mixin. Because + // functions cannot be called anywhere in Sass, we need to hack the call in + // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with + // Sass 3.3, change this line in `@if log(..) {}` instead. + $_: log('No operator found in `#{$expression}`.'); +} + + +/// +/// Get dimension of an expression, based on a found operator +/// +/// @param {String} $expression - Expression to extract dimension from +/// @param {String} $operator - Operator from `$expression` +/// +/// @return {String} - `width` or `height` (or potentially anything else) +/// +@function get-expression-dimension($expression, $operator) { + $operator-index: str-index($expression, $operator); + $parsed-dimension: str-slice($expression, 0, $operator-index - 1); + $dimension: 'width'; + + @if str-length($parsed-dimension) > 0 { + $dimension: $parsed-dimension; + } + + @return $dimension; +} + + +/// +/// Get dimension prefix based on an operator +/// +/// @param {String} $operator - Operator +/// +/// @return {String} - `min` or `max` +/// +@function get-expression-prefix($operator) { + @return if(index(('<', '<=', '≤'), $operator), 'max', 'min'); +} + + +/// +/// Get value of an expression, based on a found operator +/// +/// @param {String} $expression - Expression to extract value from +/// @param {String} $operator - Operator from `$expression` +/// +/// @return {Number} - A numeric value +/// +@function get-expression-value($expression, $operator) { + $operator-index: str-index($expression, $operator); + $value: str-slice($expression, $operator-index + str-length($operator)); + + @if map-has-key($breakpoints, $value) { + $value: map-get($breakpoints, $value); + } @else { + $value: to-number($value); + } + + $interval: map-get($unit-intervals, unit($value)); + + @if not $interval { + // It is not possible to include a mixin inside a function, so we have to + // rely on the `log(..)` function rather than the `log(..)` mixin. Because + // functions cannot be called anywhere in Sass, we need to hack the call in + // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with + // Sass 3.3, change this line in `@if log(..) {}` instead. + $_: log('Unknown unit `#{unit($value)}`.'); + } + + @if $operator == '>' { + $value: $value + $interval; + } @else if $operator == '<' { + $value: $value - $interval; + } + + @return $value; +} + + +/// +/// Parse an expression to return a valid media-query expression +/// +/// @param {String} $expression - Expression to parse +/// +/// @return {String} - Valid media query +/// +@function parse-expression($expression) { + // If it is part of $media-expressions, it has no operator + // then there is no need to go any further, just return the value + @if map-has-key($media-expressions, $expression) { + @return map-get($media-expressions, $expression); + } + + $operator: get-expression-operator($expression); + $dimension: get-expression-dimension($expression, $operator); + $prefix: get-expression-prefix($operator); + $value: get-expression-value($expression, $operator); + + @return '(#{$prefix}-#{$dimension}: #{$value})'; +} + +/// +/// Slice `$list` between `$start` and `$end` indexes +/// +/// @access private +/// +/// @param {List} $list - List to slice +/// @param {Number} $start [1] - Start index +/// @param {Number} $end [length($list)] - End index +/// +/// @return {List} Sliced list +/// +@function slice($list, $start: 1, $end: length($list)) { + @if length($list) < 1 or $start > $end { + @return (); + } + + $result: (); + + @for $i from $start through $end { + $result: append($result, nth($list, $i)); + } + + @return $result; +} + +//// +/// String to number converter +/// @author Hugo Giraudel +/// @access private +//// + + +/// +/// Casts a string into a number +/// +/// @param {String | Number} $value - Value to be parsed +/// +/// @return {Number} +/// +@function to-number($value) { + @if type-of($value) == 'number' { + @return $value; + } @else if type-of($value) != 'string' { + $_: log('Value for `to-number` should be a number or a string.'); + } + + $first-character: str-slice($value, 1, 1); + $result: 0; + $digits: 0; + $minus: ($first-character == '-'); + $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); + + // Remove +/- sign if present at first character + @if ($first-character == '+' or $first-character == '-') { + $value: str-slice($value, 2); + } + + @for $i from 1 through str-length($value) { + $character: str-slice($value, $i, $i); + + @if not (index(map-keys($numbers), $character) or $character == '.') { + @return to-length(if($minus, -$result, $result), str-slice($value, $i)) + } + + @if $character == '.' { + $digits: 1; + } @else if $digits == 0 { + $result: $result * 10 + map-get($numbers, $character); + } @else { + $digits: $digits * 10; + $result: $result + map-get($numbers, $character) / $digits; + } + } + + @return if($minus, -$result, $result); +} + + +/// +/// Add `$unit` to `$value` +/// +/// @param {Number} $value - Value to add unit to +/// @param {String} $unit - String representation of the unit +/// +/// @return {Number} - `$value` expressed in `$unit` +/// +@function to-length($value, $unit) { + $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); + + @if not index(map-keys($units), $unit) { + $_: log('Invalid unit `#{$unit}`.'); + } + + @return $value * map-get($units, $unit); +} + +/// +/// This mixin aims at redefining the configuration just for the scope of +/// the call. It is helpful when having a component needing an extended +/// configuration such as custom breakpoints (referred to as tweakpoints) +/// for instance. +/// +/// @author Hugo Giraudel +/// +/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints` +/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression` +/// +/// @example scss - Extend the global breakpoints with a tweakpoint +/// @include media-context(('custom': 678px)) { +/// .foo { +/// @include media('>phone', '<=custom') { +/// // ... +/// } +/// } +/// } +/// +/// @example scss - Extend the global media expressions with a custom one +/// @include media-context($tweak-media-expressions: ('all': 'all')) { +/// .foo { +/// @include media('all', '>phone') { +/// // ... +/// } +/// } +/// } +/// +/// @example scss - Extend both configuration maps +/// @include media-context(('custom': 678px), ('all': 'all')) { +/// .foo { +/// @include media('all', '>phone', '<=custom') { +/// // ... +/// } +/// } +/// } +/// +@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { + // Save global configuration + $global-breakpoints: $breakpoints; + $global-media-expressions: $media-expressions; + + // Update global configuration + $breakpoints: map-merge($breakpoints, $tweakpoints) !global; + $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global; + + @content; + + // Restore global configuration + $breakpoints: $global-breakpoints !global; + $media-expressions: $global-media-expressions !global; +} + +//// +/// include-media public exposed API +/// @author Eduardo Boucas +/// @access public +//// + + +/// +/// Generates a media query based on a list of conditions +/// +/// @param {Arglist} $conditions - Media query conditions +/// +/// @example scss - With a single set breakpoint +/// @include media('>phone') { } +/// +/// @example scss - With two set breakpoints +/// @include media('>phone', '<=tablet') { } +/// +/// @example scss - With custom values +/// @include media('>=358px', '<850px') { } +/// +/// @example scss - With set breakpoints with custom values +/// @include media('>desktop', '<=1350px') { } +/// +/// @example scss - With a static expression +/// @include media('retina2x') { } +/// +/// @example scss - Mixing everything +/// @include media('>=350px', ' 0) { + @media #{unquote(parse-expression(nth($conditions, 1)))} { + // Recursive call + @include media(slice($conditions, 2)...) { + @content; + } + } + } +} + +// Config file and project variables + +// font sizes +$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent +$line-height : 1.5 !default; // equiv line-height 1.5 +$h1-size : 3.2rem !default; // equiv "32px" +$h2-size : 2.8rem !default; // equiv "28px" +$h3-size : 2.4rem !default; // equiv "24px" +$h4-size : 2.0rem !default; // equiv "20px" +$h5-size : 1.8rem !default; // equiv "18px" +$h6-size : 1.6rem !default; // equiv "16px" + +// font stacks +$font-stack-common : sans-serif !default; // common font +$font-stack-headings : sans-serif !default; // headings font +$font-stack-monospace : consolas, courier, monospace !default; // monospace font + +// font colors +$base-color : #000 !default; // text color on body and content +$alpha-color : #000 !default; // text color on primary elements +$beta-color : #000 !default; // text color on secondary elements +$headings-color : #000 !default; // text color on headings +$headings-1-color : #000 !default; // text color on headings level 1 +$headings-2-color : #000 !default; // text color on headings level 2 +$headings-3-color : #000 !default; // text color on headings level 3 +$base-color-link : #333 !default; // base links color +$base-color-link-hover : #000 !default; // base hovered/focused links color + +// backgrounds +$base-background : #fff !default; // body background color +$alpha-background : #fff !default; // primary elements background color +$beta-background : #fff !default; // secondary elements background color + +// spacings (choose unit you prefer) +$tiny-value : .5rem !default; // tiny value for margins / paddings +$tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings +$small-value : 1rem !default; // small value for margins / paddings +$small-plus-value : 1.5rem !default; // small+ value for margins / paddings +$medium-value : 2rem !default; // medium value for margins / paddings +$medium-plus-value : 3rem !default; // medium+ value for margins / paddings +$large-value : 4rem !default; // large value for margins / paddings +$large-plus-value : 6rem !default; // large value for margins / paddings +$extra-large-value : 8rem !default; // extra large value for margins / paddings +$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings +$ultra-large-value : 16rem !default; // ultra large value for margins / paddings +$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings + +// breakpoints (overrides include-media.scss) (choose unit you prefer) +// doc : http://include-media.com/documentation/ +$breakpoints: ( + tiny-screen : 320px, + tiny-plus-screen : 480px, + small-screen : 640px, + small-plus-screen : 768px, + medium-screen : 960px, + medium-plus-screen: 1024px, + large-screen : 1280px, + large-plus-screen : 1440px, + extra-large-screen: 1600px, + ultra-large-screen: 1920px +); + +// grids variables (choose unit you prefer) +$grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem +$grid-number: 4 !default; // number of equal columns +$grid-left: 2 !default; // left side of uneven columns +$grid-right: 1 !default; // right side of uneven columns + +//kna-namespace (default : null) +$kna-namespace: null !default; + +/* ---------------------------------- */ +/* ==Grid Layout (grillade) */ +/* ---------------------------------- */ + +// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html +// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB + +// Usage in vanilla CSS: +// -
for an equal fourth columns grid container +// -
for an uneven columns grid container + +// Usage with preprocessors : if you're using Sass, you can config grids variables : +// n = number of columns (default = 4) / g = gutter value (default = 1em) +// example : .grid-perso { @include grid(12, 10px); } +// ... or uneven grids : +// left = left ratio column (default = 2) / right = right ratio column (default = 1) +// example : .grid-perso { @include uneven-grid(2, 1, 10px); } + +/* grid container */ +[class*="#{$kna-namespace}grid-"] { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-left: -$grid-gutter; +} + +/* grid childs */ +[class*="#{$kna-namespace}grid-"] > * { + box-sizing: border-box; + flex: 0 0 auto; + width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; + min-width: 0; + min-height: 0; + margin-left: $grid-gutter; + @include media('>tiny-screen', '<=small-screen') { + & { + width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); + } + &.flex-item-double { + width: calc(100% - #{$grid-gutter} - .01px); + } + } +} + +// Sass mixins for *equal* columns grid container +// example : .grid-perso { @include grid(12); } +@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) { + @if $newgutter != $grid-gutter { + margin-left: -$newgutter; + } + & > * { + width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px); + @if $newgutter != $grid-gutter { + margin-left: $newgutter; + } + } + & > .#{$kna-namespace}flex-item-double { + width: calc(100% * 2 / #{$grid-number} - #{$newgutter}); + } +} + +// Examples : will be compiled in CSS +@include media('>small-screen') { + @for $i from 2 through 12 { + [class*="#{$kna-namespace}grid-#{$i}"] { + @include grid(#{$i}); + } + } +} + +/* Responsive grid */ +// example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns +@include media('>tiny-screen', '<=small-screen') { + [class*="-small-4"] > * { + width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px); + } + [class*="-small-4"] > .flex-item-double { + width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); + } + [class*="-small-3"] > * { + width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px); + } + [class*="-small-3"] > .flex-item-double { + width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px); + } + [class*="-small-2"] > * { + width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); + } + [class*="-small-2"] > .flex-item-double { + width: calc(100% - #{$grid-gutter} - .01px); + } + [class*="-small-1"] > * { + width: calc(100% - #{$grid-gutter} - .01px); + } + [class*="-small-1"] > .flex-item-double { + width: calc(100% - #{$grid-gutter} - .01px); + } +} + + +// Sass mixins for *unequal* columns grid container +// example : .grid-perso { @include uneven-grid(2, 1); } +@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) { + @if $newgutter != $grid-gutter { + margin-left: -$newgutter; + } + > * { + @if $newgutter != $grid-gutter { + margin-left: $newgutter; + width: calc(100% - #{$newgutter}); + } + } + @include media('>small-screen') { + & :nth-child(odd) { + $size: ($grid-left / ($grid-left + $grid-right)) * 100%; + width: calc(#{$size} - #{$newgutter}); + } + & :nth-child(even) { + $size: ($grid-right / ($grid-left + $grid-right)) * 100%; + width: calc(#{$size} - #{$newgutter}); + } + } +} + + +// Examples : will be compiled in CSS + +.#{$kna-namespace}grid-2-1 { + @include uneven-grid(2,1); +} + +.#{$kna-namespace}grid-1-2 { + @include uneven-grid(1,2); +} + +.#{$kna-namespace}grid-3-1 { + @include uneven-grid(3,1); +} + +.#{$kna-namespace}grid-1-3 { + @include uneven-grid(1,3); +} + +.#{$kna-namespace}grid-3-2 { + @include uneven-grid(3,2); +} + +.#{$kna-namespace}grid-2-3 { + @include uneven-grid(2,3); +} + +.#{$kna-namespace}grid-4-1 { + @include uneven-grid(4,1); +} + +.#{$kna-namespace}grid-1-4 { + @include uneven-grid(1,4); +} + +.#{$kna-namespace}pull { + margin-right: auto; +} +.#{$kna-namespace}push { + margin-left: auto; +} diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index dc36dc0..4c2f621 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -1,8 +1,27 @@ +@charset "UTF-8"; /*! -* www.KNACSS.com V4.4.5 (1er avril 2016) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ +/* ----------------------------- */ +/* ==Table Of Content */ +/* ----------------------------- */ +/* 1- Normalize (basic reset) */ +/* 2- Base (basic styles) */ +/* 3- Print (print quick reset) */ +/* 4- Stylings (minor stylings) */ +/* 5- Misc (skip links, hyphens) */ +/* (6- WordPress reset (disabled by default)) */ +/* 7- Global Layout (alignment, modules, positionning) */ +/* 8- Grid Layout (grillade) */ +/* 9- Tables (data tables consistency) */ +/* 10- Forms (forms consistency) */ +/* 11- Helpers (width and spacers helpers) */ +/* 12- Responsive (Responsive Web Design helpers) */ +/* ---------------------------------- */ +/* ==Normalize (basic reset) */ +/* ---------------------------------- */ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. @@ -13,14 +32,14 @@ html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; - /* 2 */ -} + /* 2 */ } + /** * Remove the margin in all browsers (opinionated). */ body { - margin: 0; -} + margin: 0; } + /* HTML5 display definitions ========================================================================== */ /** @@ -41,8 +60,8 @@ nav, section, summary { /* 1 */ - display: block; -} + display: block; } + /** * Add the correct display in IE 9-. */ @@ -50,45 +69,49 @@ audio, canvas, progress, video { - display: inline-block; -} + display: inline-block; } + /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; - height: 0; -} + height: 0; } + /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - vertical-align: baseline; -} + vertical-align: baseline; } + /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { - display: none; -} + display: none; } + /* Links ========================================================================== */ /** - * Remove the gray background on active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; -} + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { - outline-width: 0; -} + outline-width: 0; } + /* Text-level semantics ========================================================================== */ /** @@ -101,49 +124,49 @@ abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; - /* 2 */ -} + /* 2 */ } + /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: inherit; -} + font-weight: inherit; } + /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { - font-weight: bolder; -} + font-weight: bolder; } + /** * Add the correct font style in Android 4.3-. */ dfn { - font-style: italic; -} + font-style: italic; } + /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; - margin: 0.67em 0; -} + margin: 0.67em 0; } + /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; - color: #000; -} + color: #000; } + /** * Add the correct font size in all browsers. */ small { - font-size: 80%; -} + font-size: 80%; } + /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. @@ -153,28 +176,28 @@ sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; -} + vertical-align: baseline; } + sub { - bottom: -0.25em; -} + bottom: -0.25em; } + sup { - top: -0.5em; -} + top: -0.5em; } + /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { - border-style: none; -} + border-style: none; } + /** * Hide the overflow in IE. */ svg:not(:root) { - overflow: hidden; -} + overflow: hidden; } + /* Grouping content ========================================================================== */ /** @@ -188,14 +211,14 @@ samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; - /* 2 */ -} + /* 2 */ } + /** * Add the correct margin in IE 8. */ figure { - margin: 1em 40px; -} + margin: 1em 40px; } + /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. @@ -206,106 +229,86 @@ hr { height: 0; /* 1 */ overflow: visible; - /* 2 */ -} + /* 2 */ } + /* Forms ========================================================================== */ /** - * Change font properties to `inherit` in all browsers (opinionated). + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; -} + /* 1 */ + margin: 0; + /* 2 */ } + /** * Restore the font weight unset by the previous rule. */ optgroup { - font-weight: bold; -} + font-weight: bold; } + /** * Show the overflow in IE. * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. */ button, -input, -select { - /* 2 */ - overflow: visible; -} -/** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ -button, -input, -select, -textarea { +input { /* 1 */ - margin: 0; -} + overflow: visible; } + /** - * Remove the inheritence of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritence of text transform in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ - text-transform: none; -} -/** - * Change the cursor in all browsers (opinionated). - */ -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ -[disabled] { - cursor: default; -} + text-transform: none; } + /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; - /* 2 */ -} + /* 2 */ } + /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; -} +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} + padding: 0.35em 0.625em 0.75em; } + /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. @@ -324,14 +327,14 @@ legend { padding: 0; /* 3 */ white-space: normal; - /* 1 */ -} + /* 1 */ } + /** * Remove the default vertical scrollbar in IE. */ textarea { - overflow: auto; -} + overflow: auto; } + /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. @@ -341,80 +344,94 @@ textarea { box-sizing: border-box; /* 1 */ padding: 0; - /* 2 */ -} + /* 2 */ } + /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; -} + height: auto; } + /** - * Correct the odd appearance of search inputs in Chrome and Safari. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; -} + /* 1 */ + outline-offset: -2px; + /* 2 */ } + /** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} + -webkit-appearance: none; } + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + /* ----------------------------- */ -/* == soft reset */ +/* ==Base (basic styles) */ /* ----------------------------- */ /* switching to border-box model for all elements */ html { - box-sizing: border-box; -} + box-sizing: border-box; } + * { - box-sizing: inherit; -} + box-sizing: inherit; } + ul, ol { - padding-left: 2em; -} + padding-left: 2em; } + img { - vertical-align: middle; -} + vertical-align: middle; } + /* height auto only for non SVG images */ img:not([src$=".svg"]) { - height: auto; -} + height: auto; } + blockquote, figure { margin-left: 0; - margin-right: 0; -} -/* ----------------------------- */ -/* == typography */ -/* ----------------------------- */ + margin-right: 0; } + html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: calc(1em * .625); -} + font-size: calc(1em * 0.625); } + body { font-size: 1.4rem; background-color: #fff; color: #000; font-family: sans-serif; - line-height: 1.5; -} + line-height: 1.5; } + a { - color: #333; -} -a:hover, -a:focus, -a:active { - color: #000; -} + color: #333; } + a:hover, a:focus, a:active { + color: #000; } + /* font-sizing for content */ p, .p-like, @@ -432,50 +449,44 @@ details, figure { margin-top: 0.75em; margin-bottom: 0; - line-height: 1.5; -} -h1, -.h1-like { + line-height: 1.5; } + +h1, .h1-like { font-size: 3.2rem; - font-family: sans-serif; -} -h2, -.h2-like { + font-family: sans-serif; } + +h2, .h2-like { font-size: 2.8rem; - font-family: sans-serif; -} -h3, -.h3-like { - font-size: 2.4rem; -} -h4, -.h4-like { - font-size: 2rem; -} -h5, -.h5-like { - font-size: 1.8rem; -} -h6, -.h6-like { - font-size: 1.6rem; -} + font-family: sans-serif; } + +h3, .h3-like { + font-size: 2.4rem; } + +h4, .h4-like { + font-size: 2rem; } + +h5, .h5-like { + font-size: 1.8rem; } + +h6, .h6-like { + font-size: 1.6rem; } + /* alternate font-sizing */ .smaller { - font-size: 0.6em; -} + font-size: 0.6em; } + .small { - font-size: 0.8em; -} + font-size: 0.8em; } + .big { - font-size: 1.2em; -} + font-size: 1.2em; } + .bigger { - font-size: 1.5em; -} + font-size: 1.5em; } + .biggest { - font-size: 2em; -} + font-size: 2em; } + code, pre, samp, @@ -484,19 +495,16 @@ kbd { white-space: pre-line; white-space: pre-wrap; font-family: consolas, courier, monospace; - line-height: normal; -} + line-height: normal; } + em, .italic, address, cite, i, var { - font-style: italic; -} -/* ----------------------------- */ -/* == browsers consistency */ -/* ----------------------------- */ + font-style: italic; } + /* avoid top margins on first content element */ p:first-child, .p-like:first-child, @@ -517,16 +525,16 @@ h5:first-child, .h5-like:first-child, h6:first-child, .h6-like:first-child { - margin-top: 0; -} + margin-top: 0; } + /* avoid margins on nested elements */ li p, li .p-like, li ul, li ol { margin-top: 0; - margin-bottom: 0; -} + margin-bottom: 0; } + /* max values */ img, table, @@ -538,1081 +546,25 @@ textarea, input, video, svg { - max-width: 100%; -} + max-width: 100%; } + /* margin-bottom on tables */ table { - margin-bottom: 2rem; -} + margin-bottom: 2rem; } + /* ----------------------------- */ -/* ==layout and modules */ +/* ==Print (quick print reset) */ /* ----------------------------- */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod, -.bfc { - overflow: hidden; -} -/* blocks that needs to be placed under floats */ -.clear, -.line, -.row { - clear: both; -} -/* blocks that must contain floats */ -.clearfix::after, -.line::after { - content: ""; - display: table; - clear: both; - border-collapse: collapse; -} -/* simple blocks alignment */ -.left { - margin-right: auto; -} -.right { - margin-left: auto; -} -.center { - margin-left: auto; - margin-right: auto; -} -/* text and contents alignment */ -.txtleft { - text-align: left; -} -.txtright { - text-align: right; -} -.txtcenter { - text-align: center; -} -/* floating elements */ -.fl { - float: left; -} -img.fl { - margin-right: 1rem; -} -.fr { - float: right; -} -img.fr { - margin-left: 1rem; -} -img.fl, -img.fr { - margin-bottom: 0.5rem; -} -/* table layout */ -.row { - display: table; - table-layout: fixed; - width: 100%; -} -.row > *, -.col { - display: table-cell; - vertical-align: top; -} -/* no table-cell for script tag when body is a .row */ -body > script { - display: none !important; -} -/* inline-block */ -.inbl { - display: inline-block; - vertical-align: top; -} -/* flexbox layout -http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html -*/ -[class*="flex-container"], -.flex-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.flex-container-h { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -.flex-container-v { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.flex-item-fluid { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - min-width: 0; -} -.flex-item-first { - -webkit-box-ordinal-group: 0; - -webkit-order: -1; - -ms-flex-order: -1; - order: -1; -} -.flex-item-medium { - -webkit-box-ordinal-group: 1; - -webkit-order: 0; - -ms-flex-order: 0; - order: 0; -} -.flex-item-last { - -webkit-box-ordinal-group: 2; - -webkit-order: 1; - -ms-flex-order: 1; - order: 1; -} -.flex-item-center { - margin: auto; -} -/* ---------------------------------- */ -/* ==Grillade */ -/* ---------------------------------- */ -/* grid container */ -[class*="grid-"] { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -2rem; - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; -} -/* grid childs */ -[class*="grid-"] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% * 1 / 4 - 2rem - .01px); - min-width: 0; - margin-left: 2rem; - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; -} -[class*="grid-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); -} -[class*="grid-2"] > .flex-item-double { - width: calc(100% * 2 / 2 - 2rem - .01px); -} -[class*="grid-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); -} -[class*="grid-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - 2rem - .01px); -} -[class*="grid-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); -} -[class*="grid-4"] > .flex-item-double { - width: calc(100% * 2 / 4 - 2rem - .01px); -} -[class*="grid-5"] > * { - width: calc(100% * 1 / 5 - 2rem - .01px); -} -[class*="grid-5"] > .flex-item-double { - width: calc(100% * 2 / 5 - 2rem - .01px); -} -[class*="grid-6"] > * { - width: calc(100% * 1 / 6 - 2rem - .01px); -} -[class*="grid-6"] > .flex-item-double { - width: calc(100% * 2 / 6 - 2rem - .01px); -} -[class*="grid-7"] > * { - width: calc(100% * 1 / 7 - 2rem - .01px); -} -[class*="grid-7"] > .flex-item-double { - width: calc(100% * 2 / 7 - 2rem - .01px); -} -[class*="grid-8"] > * { - width: calc(100% * 1 / 8 - 2rem - .01px); -} -[class*="grid-8"] > .flex-item-double { - width: calc(100% * 2 / 8 - 2rem - .01px); -} -[class*="grid-10"] > * { - width: calc(100% * 1 / 10 - 2rem - .01px); -} -[class*="grid-10"] > .flex-item-double { - width: calc(100% * 2 / 10 - 2rem - .01px); -} -[class*="grid-12"] > * { - width: calc(100% * 1 / 12 - 2rem - .01px); -} -[class*="grid-12"] > .flex-item-double { - width: calc(100% * 2 / 12 - 2rem - .01px); -} -/* Responsive grid */ -@media (max-width: 640px) { - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); - } - [class*="-small-4"] > .flex-item-double { - width: calc(100% * 1 / 2 - 2rem - .01px); - } - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); - } - [class*="-small-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - 2rem - .01px); - } - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); - } - [class*="-small-2"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } - [class*="-small-1"] > * { - width: calc(100% - 2rem - .01px); - } - [class*="-small-1"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } -} -@media (max-width: 320px) { - [class*="-tiny-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); - } - [class*="-tiny-2"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } - [class*="-tiny-1"] > * { - width: calc(100% - 2rem - .01px); - } - [class*="-tiny-1"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } -} -.grid-2-1 > *:nth-child(odd) { - width: calc(66.66666666666666% - 2rem - .01px); -} -.grid-2-1 > *:nth-child(even) { - width: calc(33.33333333333333% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-2-1 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-1-2 > *:nth-child(odd) { - width: calc(33.33333333333333% - 2rem - .01px); -} -.grid-1-2 > *:nth-child(even) { - width: calc(66.66666666666666% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-1-2 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-3-1 > *:nth-child(odd) { - width: calc(75% - 2rem - .01px); -} -.grid-3-1 > *:nth-child(even) { - width: calc(25% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-3-1 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-1-3 > *:nth-child(odd) { - width: calc(25% - 2rem - .01px); -} -.grid-1-3 > *:nth-child(even) { - width: calc(75% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-1-3 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-3-2 > *:nth-child(odd) { - width: calc(60% - 2rem - .01px); -} -.grid-3-2 > *:nth-child(even) { - width: calc(40% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-3-2 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-2-3 > *:nth-child(odd) { - width: calc(40% - 2rem - .01px); -} -.grid-2-3 > *:nth-child(even) { - width: calc(60% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-2-3 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-4-1 > *:nth-child(odd) { - width: calc(80% - 2rem - .01px); -} -.grid-4-1 > *:nth-child(even) { - width: calc(20% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-4-1 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-1-4 > *:nth-child(odd) { - width: calc(20% - 2rem - .01px); -} -.grid-1-4 > *:nth-child(even) { - width: calc(80% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-1-4 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.pull { - margin-right: auto; -} -.push { - margin-left: auto; -} -/* ----------------------------- */ -/* ==tables */ -/* ----------------------------- */ -table, -.table { - width: 100%; - max-width: 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; -} -.table { - display: table; -} -#recaptcha_table, -table.table-auto { - table-layout: auto; -} -td, -th { - vertical-align: top; - min-width: 2rem; - cursor: default; -} -/* ----------------------------- */ -/* ==forms */ -/* ----------------------------- */ -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize and www.sitepen.com -*/ -/* buttons */ -.btn { - display: inline-block; -} -/* forms items */ -form, -fieldset { - border: none; -} -input, -button, -select, -label, -.btn { - font-family: inherit; - font-size: inherit; -} -button, -input, -optgroup, -select, -textarea { - color: #000; -} -label { - display: inline-block; - cursor: pointer; -} -legend { - border: 0; - white-space: normal; -} -textarea { - min-height: 5em; - vertical-align: top; - font-family: inherit; - font-size: inherit; - resize: vertical; -} -select { - -webkit-appearance: menulist-button; -} -/* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ -/* 'x' appears on right of search input when text is entered. This removes it */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { - display: none; -} -::-webkit-input-placeholder { - color: #777; -} -input:-moz-placeholder, -textarea:-moz-placeholder { - color: #777; -} -.btn:focus, -input[type="button"]:focus, -button:focus { - -webkit-tap-highlight-color: transparent; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -/* unstyled forms */ -button.unstyled, -input[type="button"].unstyled, -input[type="submit"].unstyled, -input[type="reset"].unstyled { - padding: 0; - border: none; - line-height: 1; - text-align: left; - background: none; - border-radius: 0; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -button.unstyled:focus, -input[type="button"].unstyled:focus, -input[type="submit"].unstyled:focus, -input[type="reset"].unstyled:focus { - box-shadow: none; - outline: none; -} -/* ---------------------------------- */ -/* ==state helpers */ -/* ---------------------------------- */ -/* invisible for all */ -.is-hidden, -[hidden] { - display: none; -} -/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ -.visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; -} -.is-disabled, -[disabled] { - opacity: 0.5; - pointer-events: none; - cursor: not-allowed; - -webkit-filter: grayscale(1); - filter: grayscale(1); -} -ul.is-unstyled, -ul.unstyled { - list-style: none; - padding-left: 0; -} -/* ---------------------------------- */ -/* ==visual helpers */ -/* .. use them with parcimony ! */ -/* ---------------------------------- */ -/* blocks widths (percentage and pixels) */ -.w10 { - width: 10%; -} -.w20 { - width: 20%; -} -.w25 { - width: 25%; -} -.w30 { - width: 30%; -} -.w33 { - width: 33.3333%; -} -.w40 { - width: 40%; -} -.w50 { - width: 50%; -} -.w60 { - width: 60%; -} -.w66 { - width: 66.6666%; -} -.w70 { - width: 70%; -} -.w75 { - width: 75%; -} -.w80 { - width: 80%; -} -.w90 { - width: 90%; -} -.w100 { - width: 100%; -} -.w50p { - width: 50px; -} -.w100p { - width: 100px; -} -.w150p { - width: 150px; -} -.w200p { - width: 200px; -} -.w300p { - width: 300px; -} -.w400p { - width: 400px; -} -.w500p { - width: 500px; -} -.w600p { - width: 600px; -} -.w700p { - width: 700px; -} -.w800p { - width: 800px; -} -.w960p { - width: 960px; -} -.mw960p { - max-width: 960px; -} -.w1140p { - width: 1140px; -} -.mw1140p { - max-width: 1140px; -} -.wauto { - width: auto; -} -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small, medium, large, none -*/ -.man, -.ma0 { - margin: 0; -} -.pan, -.pa0 { - padding: 0; -} -.mas { - margin: 1rem; -} -.mam { - margin: 2rem; -} -.mal { - margin: 4rem; -} -.pas { - padding: 1rem; -} -.pam { - padding: 2rem; -} -.pal { - padding: 4rem; -} -.mtn, -.mt0 { - margin-top: 0; -} -.mts { - margin-top: 1rem; -} -.mtm { - margin-top: 2rem; -} -.mtl { - margin-top: 4rem; -} -.mrn, -.mr0 { - margin-right: 0; -} -.mrs { - margin-right: 1rem; -} -.mrm { - margin-right: 2rem; -} -.mrl { - margin-right: 4rem; -} -.mbn, -.mb0 { - margin-bottom: 0; -} -.mbs { - margin-bottom: 1rem; -} -.mbm { - margin-bottom: 2rem; -} -.mbl { - margin-bottom: 4rem; -} -.mln, -.ml0 { - margin-left: 0; -} -.mls { - margin-left: 1rem; -} -.mlm { - margin-left: 2rem; -} -.mll { - margin-left: 4rem; -} -.mauto { - margin: auto; -} -.mtauto { - margin-top: auto; -} -.mrauto { - margin-right: auto; -} -.mbauto { - margin-bottom: auto; -} -.mlauto { - margin-left: auto; -} -.ptn, -.pt0 { - padding-top: 0; -} -.pts { - padding-top: 1rem; -} -.ptm { - padding-top: 2rem; -} -.ptl { - padding-top: 4rem; -} -.prn, -.pr0 { - padding-right: 0; -} -.prs { - padding-right: 1rem; -} -.prm { - padding-right: 2rem; -} -.prl { - padding-right: 4rem; -} -.pbn, -.pb0 { - padding-bottom: 0; -} -.pbs { - padding-bottom: 1rem; -} -.pbm { - padding-bottom: 2rem; -} -.pbl { - padding-bottom: 4rem; -} -.pln, -.pl0 { - padding-left: 0; -} -.pls { - padding-left: 1rem; -} -.plm { - padding-left: 2rem; -} -.pll { - padding-left: 4rem; -} -/* ----------------------------- */ -/* ==desktop and HD devices */ -/* ----------------------------- */ -@media (min-width: 961px) { - /* rules for big resources and big screens like: background-images, font-faces, etc. */ -} -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { - /* style adjustments for high density devices */ -} -/* ---------------------------------- */ -/* ==Responsive large */ -/* ---------------------------------- */ -@media (min-width: 961px) { - /* layouts for large screens */ - .large-hidden { - display: none !important; - } - .large-visible { - display: block !important; - } - .large-no-float { - float: none; - } - .large-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .large-row { - display: table; - table-layout: fixed; - width: 100% !important; - } - .large-col { - display: table-cell; - vertical-align: top; - } - /* widths for large screens */ - .large-w25 { - width: 25% !important; - } - .large-w33 { - width: 33.3333% !important; - } - .large-w50 { - width: 50% !important; - } - .large-w66 { - width: 66.6666% !important; - } - .large-w75 { - width: 75% !important; - } - .large-w100, - .large-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for large screens */ - .large-man { - margin: 0 !important; - } -} -/* ---------------------------------- */ -/* ==Responsive medium */ -/* ---------------------------------- */ -@media (min-width: 641px) and (max-width: 960px) { - /* layouts for medium screens */ - .medium-hidden { - display: none !important; - } - .medium-visible { - display: block !important; - } - .medium-no-float { - float: none; - } - .medium-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .medium-row { - display: table; - table-layout: fixed; - width: 100% !important; - } - .medium-col { - display: table-cell; - vertical-align: top; - } - /* widths for medium screens */ - .medium-w25 { - width: 25% !important; - } - .medium-w33 { - width: 33.3333% !important; - } - .medium-w50 { - width: 50% !important; - } - .medium-w66 { - width: 66.6666% !important; - } - .medium-w75 { - width: 75% !important; - } - .medium-w100, - .medium-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for medium screens */ - .medium-man, - .medium-ma0 { - margin: 0 !important; - } -} -/* ---------------------------------- */ -/* ==Responsive small */ -/* ---------------------------------- */ -@media (min-width: 321px) and (max-width: 640px) { - /* quick reset in small resolution and less */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p { - width: auto; - float: none; - } - /* layouts for small screens */ - .small-hidden { - display: none !important; - } - .small-visible { - display: block !important; - } - .small-no-float { - float: none; - } - .small-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .small-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .small-col { - display: table-cell !important; - vertical-align: top !important; - } - /* widths for small screens */ - .small-w25 { - width: 25% !important; - } - .small-w33 { - width: 33.3333% !important; - } - .small-w50 { - width: 50% !important; - } - .small-w66 { - width: 66.6666% !important; - } - .small-w75 { - width: 75% !important; - } - .small-w100, - .small-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for small screens */ - .small-man, - .small-ma0 { - margin: 0 !important; - } - .small-pan, - .small-pa0 { - padding: 0 !important; - } -} -/* ---------------------------------- */ -/* ==Responsive tiny */ -/* ---------------------------------- */ -@media (max-width: 320px) { - /* quick tiny resolution reset */ - .mod, - .col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - .flex-container { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - .w300p, - .w400p, - .w500p { - width: auto; - float: none; - } - .row { - display: block !important; - width: 100% !important; - } - /* layouts for tiny screens */ - .tiny-hidden { - display: none !important; - } - .tiny-visible { - display: block !important; - } - .tiny-no-float { - float: none; - } - .tiny-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .tiny-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .tiny-col { - display: table-cell !important; - vertical-align: top !important; - } - th, - td { - display: block; - width: auto; - text-align: left; - } - thead { - display: none; - } - /* widths for tiny screens */ - .tiny-w25 { - width: 25% !important; - } - .tiny-w33 { - width: 33.3333% !important; - } - .tiny-w50 { - width: 50% !important; - } - .tiny-w66 { - width: 66.6666% !important; - } - .tiny-w75 { - width: 75% !important; - } - .tiny-w100, - .tiny-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for tiny screens */ - .tiny-man, - .tiny-ma0 { - margin: 0 !important; - } - .tiny-pan, - .tiny-pa0 { - padding: 0 !important; - } -} -/* quick print reset */ @media print { * { background: transparent !important; box-shadow: none !important; - text-shadow: none !important; - } + text-shadow: none !important; } body { width: auto; margin: auto; font-family: serif; - font-size: 12pt; - } + font-size: 12pt; } p, .p-like, h1, @@ -1631,27 +583,22 @@ s,m,l,n = small, medium, large, none ul, ol { color: #000; - margin: auto; - } + margin: auto; } .print { - display: block; - } + display: block; } .no-print { - display: none; - } + display: none; } /* no orphans, no widows */ p, .p-like, blockquote { orphans: 3; - widows: 3; - } + widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol { - page-break-inside: avoid; - } + page-break-inside: avoid; } /* page break before main headers h1, .h1-like { @@ -1666,11 +613,9 @@ s,m,l,n = small, medium, large, none h3, .h3-like, caption { - page-break-after: avoid; - } + page-break-after: avoid; } a { - color: #000; - } + color: #000; } /* displaying URLs a[href]::after { content: " (" attr(href) ")"; @@ -1678,31 +623,122 @@ s,m,l,n = small, medium, large, none */ a[href^="javascript:"]::after, a[href^="#"]::after { - content: ""; - } -} + content: ""; } } + /* ----------------------------- */ -/* ==misc rules */ +/* ==Stylings (minor stylings) */ +/* ----------------------------- */ +/* styling elements */ +code, kbd, mark { + border-radius: 2px; } + +kbd { + padding: 0 2px; + border: 1px solid #999; } + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; } + +pre code { + padding: 0; + background: none; + color: inherit; + border-radius: 0; } + +mark { + padding: 2px 4px; } + +sup, +sub { + vertical-align: 0; } + +sup { + bottom: 1ex; } + +sub { + top: 0.5ex; } + +blockquote { + position: relative; + padding-left: 3em; } + +blockquote::before { + content: "\201C"; + position: absolute; + left: 0; + top: 0; + font-family: georgia, serif; + font-size: 5em; + line-height: 0.9; + color: rgba(0, 0, 0, 0.3); } + +blockquote > footer { + margin-top: .75em; + font-size: 0.9em; + color: rgba(0, 0, 0, 0.7); } + +blockquote > footer::before { + content: "\2014 \0020"; } + +q { + font-style: normal; } + +q, +.q { + quotes: "“\00a0" "\00a0”"; } + +q:lang(fr), +.q:lang(fr) { + quotes: "«\00a0" "\00a0»"; } + +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; } + +/* tables */ +table, +.table { + border: 1px solid #ccc; } + +caption { + padding: 1rem; + color: #555; + font-style: italic; } + +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + text-align: left; } + +/* ----------------------------- */ +/* ==Misc (skip links, hyphens) */ /* ----------------------------- */ /* styling skip links */ .skip-links { - position: absolute; -} -.skip-links a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; -} -.skip-links a:focus { - position: static; - overflow: visible; - clip: auto; -} -@media (max-width: 640px) { + position: absolute; } + .skip-links a { + position: absolute; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0.5em; + background: black; + color: white; + text-decoration: none; } + .skip-links a:focus { + position: static; + overflow: visible; + clip: auto; } + +@media (max-width: 320px) { /* you shall not pass */ div, textarea, @@ -1716,117 +752,929 @@ s,m,l,n = small, medium, large, none -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; - hyphens: auto; - } -} -@media (max-width: 640px) { + hyphens: auto; } } + +@media (max-width: 320px) { .no-wrapping { word-wrap: normal; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; - hyphens: manual; - } -} + hyphens: manual; } } + /* ----------------------------- */ -/* ==minor stylings */ +/* ==Global Layout */ /* ----------------------------- */ -/* styling elements */ -code, -kbd, -mark { - border-radius: 2px; -} -kbd { - padding: 0 2px; - border: 1px solid #999; -} -code { - padding: 2px 4px; - background: rgba(0, 0, 0, 0.04); - color: #b11; -} -pre code { - padding: 0; - background: none; - color: inherit; - border-radius: 0; -} -mark { - padding: 2px 4px; -} -sup, -sub { - vertical-align: 0; -} -sup { - bottom: 1ex; -} -sub { - top: 0.5ex; -} -blockquote { - position: relative; - padding-left: 3em; -} -blockquote::before { - content: "\201C"; - position: absolute; - left: 0; - top: 0; - font-family: georgia, serif; - font-size: 5em; - line-height: 0.9; - color: rgba(0, 0, 0, 0.3); -} -blockquote > footer { - margin-top: .75em; - font-size: 0.9em; - color: rgba(0, 0, 0, 0.7); -} -blockquote > footer::before { - content: "\2014 \0020"; -} -q { - font-style: normal; -} -q, -.q { - quotes: "“\00a0" "\00a0”"; -} -q:lang(fr), -.q:lang(fr) { - quotes: "«\00a0" "\00a0»"; -} -hr { - display: block; +/* module, gains superpower "BFC" Block Formating Context */ +.mod, +.bfc { + overflow: hidden; } + +/* blocks that needs to be placed under floats */ +.clear, +.line, +.row { + clear: both; } + +/* blocks that must contain floats */ +.clearfix::after, +.line::after { + content: ""; + display: table; clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} -/* tables */ + border-collapse: collapse; } + +/* simple blocks alignment */ +.left { + margin-right: auto; } + +.right { + margin-left: auto; } + +.center { + margin-left: auto; + margin-right: auto; } + +/* text and contents alignment */ +.txtleft { + text-align: left; } + +.txtright { + text-align: right; } + +.txtcenter { + text-align: center; } + +/* floating elements */ +.fl { + float: left; } + +img.fl { + margin-right: 1rem; } + +.fr { + float: right; } + +img.fr { + margin-left: 1rem; } + +img.fl, +img.fr { + margin-bottom: 0.5rem; } + +/* table layout */ +.row { + display: table; + table-layout: fixed; + width: 100%; } + +.row > *, +.col { + display: table-cell; + vertical-align: top; } + +/* no table-cell for script tag when body is a .row */ +body > script { + display: none !important; } + +/* inline-block */ +.inbl { + display: inline-block; + vertical-align: top; } + +/* flexbox layout +http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html +*/ +[class*="flex-container"] { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.flex-container-h { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } + +.flex-container-v { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + +.flex-item-fluid { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0; } + +.flex-item-first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + +.flex-item-medium { + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; } + +.flex-item-last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +.flex-item-center { + margin: auto; } + +/* ---------------------------------- */ +/* ==Grid Layout (grillade) */ +/* ---------------------------------- */ +/* grid container */ +[class*="grid-"] { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -2rem; } + +/* grid childs */ +[class*="grid-"] > * { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% - 2rem - .01px); + min-width: 0; + min-height: 0; + margin-left: 2rem; } + +@media (min-width: 321px) and (max-width: 640px) { + [class*="grid-"] > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="grid-"] > *.flex-item-double { + width: calc(100% - 2rem - .01px); } } + +@media (min-width: 641px) { + [class*="grid-2"] > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="grid-2"] > .flex-item-double { + width: calc(100% * 2 / 2 - 2rem); } + [class*="grid-3"] > * { + width: calc(100% * 1 / 3 - 2rem - .01px); } + [class*="grid-3"] > .flex-item-double { + width: calc(100% * 2 / 3 - 2rem); } + [class*="grid-4"] > * { + width: calc(100% * 1 / 4 - 2rem - .01px); } + [class*="grid-4"] > .flex-item-double { + width: calc(100% * 2 / 4 - 2rem); } + [class*="grid-5"] > * { + width: calc(100% * 1 / 5 - 2rem - .01px); } + [class*="grid-5"] > .flex-item-double { + width: calc(100% * 2 / 5 - 2rem); } + [class*="grid-6"] > * { + width: calc(100% * 1 / 6 - 2rem - .01px); } + [class*="grid-6"] > .flex-item-double { + width: calc(100% * 2 / 6 - 2rem); } + [class*="grid-7"] > * { + width: calc(100% * 1 / 7 - 2rem - .01px); } + [class*="grid-7"] > .flex-item-double { + width: calc(100% * 2 / 7 - 2rem); } + [class*="grid-8"] > * { + width: calc(100% * 1 / 8 - 2rem - .01px); } + [class*="grid-8"] > .flex-item-double { + width: calc(100% * 2 / 8 - 2rem); } + [class*="grid-9"] > * { + width: calc(100% * 1 / 9 - 2rem - .01px); } + [class*="grid-9"] > .flex-item-double { + width: calc(100% * 2 / 9 - 2rem); } + [class*="grid-10"] > * { + width: calc(100% * 1 / 10 - 2rem - .01px); } + [class*="grid-10"] > .flex-item-double { + width: calc(100% * 2 / 10 - 2rem); } + [class*="grid-11"] > * { + width: calc(100% * 1 / 11 - 2rem - .01px); } + [class*="grid-11"] > .flex-item-double { + width: calc(100% * 2 / 11 - 2rem); } + [class*="grid-12"] > * { + width: calc(100% * 1 / 12 - 2rem - .01px); } + [class*="grid-12"] > .flex-item-double { + width: calc(100% * 2 / 12 - 2rem); } } + +/* Responsive grid */ +@media (min-width: 321px) and (max-width: 640px) { + [class*="-small-4"] > * { + width: calc(100% * 1 / 4 - 2rem - .01px); } + [class*="-small-4"] > .flex-item-double { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="-small-3"] > * { + width: calc(100% * 1 / 3 - 2rem - .01px); } + [class*="-small-3"] > .flex-item-double { + width: calc(100% * 2 / 3 - 2rem - .01px); } + [class*="-small-2"] > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="-small-2"] > .flex-item-double { + width: calc(100% - 2rem - .01px); } + [class*="-small-1"] > * { + width: calc(100% - 2rem - .01px); } + [class*="-small-1"] > .flex-item-double { + width: calc(100% - 2rem - .01px); } } + +@media (min-width: 641px) { + .grid-2-1 :nth-child(odd) { + width: calc(66.66667% - 2rem); } + .grid-2-1 :nth-child(even) { + width: calc(33.33333% - 2rem); } } + +@media (min-width: 641px) { + .grid-1-2 :nth-child(odd) { + width: calc(33.33333% - 2rem); } + .grid-1-2 :nth-child(even) { + width: calc(66.66667% - 2rem); } } + +@media (min-width: 641px) { + .grid-3-1 :nth-child(odd) { + width: calc(75% - 2rem); } + .grid-3-1 :nth-child(even) { + width: calc(25% - 2rem); } } + +@media (min-width: 641px) { + .grid-1-3 :nth-child(odd) { + width: calc(25% - 2rem); } + .grid-1-3 :nth-child(even) { + width: calc(75% - 2rem); } } + +@media (min-width: 641px) { + .grid-3-2 :nth-child(odd) { + width: calc(60% - 2rem); } + .grid-3-2 :nth-child(even) { + width: calc(40% - 2rem); } } + +@media (min-width: 641px) { + .grid-2-3 :nth-child(odd) { + width: calc(40% - 2rem); } + .grid-2-3 :nth-child(even) { + width: calc(60% - 2rem); } } + +@media (min-width: 641px) { + .grid-4-1 :nth-child(odd) { + width: calc(80% - 2rem); } + .grid-4-1 :nth-child(even) { + width: calc(20% - 2rem); } } + +@media (min-width: 641px) { + .grid-1-4 :nth-child(odd) { + width: calc(20% - 2rem); } + .grid-1-4 :nth-child(even) { + width: calc(80% - 2rem); } } + +.pull { + margin-right: auto; } + +.push { + margin-left: auto; } + +/* ----------------------------- */ +/* ==Tables */ +/* ----------------------------- */ table, .table { - border: 1px solid #ccc; -} -caption { - padding: 1rem; - color: #555; - font-style: italic; -} + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; } + +.table { + display: table; } + +#recaptcha_table, +.table-auto { + table-layout: auto; } + td, th { - padding: 0.3em 0.8em; - border: 1px #aaa dotted; - text-align: left; -} + vertical-align: top; + min-width: 2rem; + cursor: default; } + /* ----------------------------- */ -/* ==own stylesheet */ +/* ==Forms */ +/* ----------------------------- */ +/* thanks to HTML5boilerplate, +* github.com/nathansmith/formalize and www.sitepen.com +*/ +/* buttons */ +.btn { + display: inline-block; } + +/* forms items */ +form, +fieldset { + border: none; } + +input, +button, +select, +label, +.btn { + font-family: inherit; + font-size: inherit; } + +button, +input, +optgroup, +select, +textarea { + color: #000; } + +label { + vertical-align: middle; + cursor: pointer; } + +legend { + border: 0; + white-space: normal; } + +textarea { + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; } + +select { + -webkit-appearance: menulist-button; } + +/* if select styling bugs on WebKit */ +/* select { -webkit-appearance: none; } */ +/* 'x' appears on right of search input when text is entered. This removes it */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; } + +::-webkit-input-placeholder { + color: #777; } + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #777; } + +.btn:focus, +input[type="button"]:focus, +button:focus { + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +/* unstyled forms */ +button.unstyled, +input[type="button"].unstyled, +input[type="submit"].unstyled, +input[type="reset"].unstyled { + padding: 0; + border: none; + line-height: 1; + text-align: left; + background: none; + border-radius: 0; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + button.unstyled:focus, + input[type="button"].unstyled:focus, + input[type="submit"].unstyled:focus, + input[type="reset"].unstyled:focus { + box-shadow: none; + outline: none; } + +/* ---------------------------------- */ +/* ==Helpers */ +/* ---------------------------------- */ +/* State Helpers */ +/* ------------- */ +/* invisible for all */ +.is-hidden, +[hidden] { + display: none; } + +/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ +.visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; } + +.is-disabled, +[disabled] { + opacity: 0.5; + pointer-events: none; + cursor: not-allowed; + -webkit-filter: grayscale(1); + filter: grayscale(1); } + +ul.is-unstyled, +ul.unstyled { + list-style: none; + padding-left: 0; } + +/* Width Helpers */ +/* ------------- */ +/* blocks widths (percentage and pixels) */ +.w10 { + width: 10%; } + +.w20 { + width: 20%; } + +.w25 { + width: 25%; } + +.w30 { + width: 30%; } + +.w33 { + width: 33.3333%; } + +.w40 { + width: 40%; } + +.w50 { + width: 50%; } + +.w60 { + width: 60%; } + +.w66 { + width: 66.6666%; } + +.w70 { + width: 70%; } + +.w75 { + width: 75%; } + +.w80 { + width: 80%; } + +.w90 { + width: 90%; } + +.w100 { + width: 100%; } + +.w50p { + width: 50px; } + +.w100p { + width: 100px; } + +.w150p { + width: 150px; } + +.w200p { + width: 200px; } + +.w300p { + width: 300px; } + +.w400p { + width: 400px; } + +.w500p { + width: 500px; } + +.w600p { + width: 600px; } + +.w700p { + width: 700px; } + +.w800p { + width: 800px; } + +.w960p { + width: 960px; } + +.mw960p { + max-width: 960px; } + +.w1140p { + width: 1140px; } + +.mw1140p { + max-width: 1140px; } + +.wauto { + width: auto; } + +/* Spacing Helpers */ +/* --------------- */ +.man, +.ma0 { + margin: 0; } + +.pan, +.pa0 { + padding: 0; } + +.mas { + margin: 1rem; } + +.mam { + margin: 2rem; } + +.mal { + margin: 4rem; } + +.pas { + padding: 1rem; } + +.pam { + padding: 2rem; } + +.pal { + padding: 4rem; } + +.mtn, +.mt0 { + margin-top: 0; } + +.mts { + margin-top: 1rem; } + +.mtm { + margin-top: 2rem; } + +.mtl { + margin-top: 4rem; } + +.mrn, +.mr0 { + margin-right: 0; } + +.mrs { + margin-right: 1rem; } + +.mrm { + margin-right: 2rem; } + +.mrl { + margin-right: 4rem; } + +.mbn, +.mb0 { + margin-bottom: 0; } + +.mbs { + margin-bottom: 1rem; } + +.mbm { + margin-bottom: 2rem; } + +.mbl { + margin-bottom: 4rem; } + +.mln, +.ml0 { + margin-left: 0; } + +.mls { + margin-left: 1rem; } + +.mlm { + margin-left: 2rem; } + +.mll { + margin-left: 4rem; } + +.mauto { + margin: auto; } + +.mtauto { + margin-top: auto; } + +.mrauto { + margin-right: auto; } + +.mbauto { + margin-bottom: auto; } + +.mlauto { + margin-left: auto; } + +.ptn, +.pt0 { + padding-top: 0; } + +.pts { + padding-top: 1rem; } + +.ptm { + padding-top: 2rem; } + +.ptl { + padding-top: 4rem; } + +.prn, +.pr0 { + padding-right: 0; } + +.prs { + padding-right: 1rem; } + +.prm { + padding-right: 2rem; } + +.prl { + padding-right: 4rem; } + +.pbn, +.pb0 { + padding-bottom: 0; } + +.pbs { + padding-bottom: 1rem; } + +.pbm { + padding-bottom: 2rem; } + +.pbl { + padding-bottom: 4rem; } + +.pln, +.pl0 { + padding-left: 0; } + +.pls { + padding-left: 1rem; } + +.plm { + padding-left: 2rem; } + +.pll { + padding-left: 4rem; } + +/* -------------------------- */ +/* ==Responsive helpers */ +/* -------------------------- */ +/* large screens */ +/* ------------- */ +@media (min-width: 1280px) { + /* layouts for large screens */ + .large-hidden { + display: none !important; } + .large-visible { + display: block !important; } + .large-no-float { + float: none; } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; } + .large-col { + display: table-cell; + vertical-align: top; } + /* widths for large screens */ + .large-w25 { + width: 25% !important; } + .large-w33 { + width: 33.3333% !important; } + .large-w50 { + width: 50% !important; } + .large-w66 { + width: 66.6666% !important; } + .large-w75 { + width: 75% !important; } + .large-w100, + .large-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for large screens */ + .large-man, + .large-ma0 { + margin: 0 !important; } } + +/* medium screens */ +/* -------------- */ +@media (min-width: 960px) and (max-width: 1279px) { + /* layouts for medium screens */ + .medium-hidden { + display: none !important; } + .medium-visible { + display: block !important; } + .medium-no-float { + float: none; } + .medium-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .medium-row { + display: table; + table-layout: fixed; + width: 100% !important; } + .medium-col { + display: table-cell; + vertical-align: top; } + /* widths for medium screens */ + .medium-w25 { + width: 25% !important; } + .medium-w33 { + width: 33.3333% !important; } + .medium-w50 { + width: 50% !important; } + .medium-w66 { + width: 66.6666% !important; } + .medium-w75 { + width: 75% !important; } + .medium-w100, + .medium-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for medium screens */ + .medium-man, + .medium-ma0 { + margin: 0 !important; } } + +/* small screens */ +/* ------------- */ +@media (min-width: 640px) and (max-width: 959px) { + /* quick reset in small resolution and less */ + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p { + width: auto; + float: none; } + /* layouts for small screens */ + .small-hidden { + display: none !important; } + .small-visible { + display: block !important; } + .small-no-float { + float: none; } + .small-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .small-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; } + .small-col { + display: table-cell !important; + vertical-align: top !important; } + /* widths for small screens */ + .small-w25 { + width: 25% !important; } + .small-w33 { + width: 33.3333% !important; } + .small-w50 { + width: 50% !important; } + .small-w66 { + width: 66.6666% !important; } + .small-w75 { + width: 75% !important; } + .small-w100, + .small-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for small screens */ + .small-man, + .small-ma0 { + margin: 0 !important; } + .small-pan, + .small-pa0 { + padding: 0 !important; } } + +/* tiny screens */ +/* ------------ */ +@media (max-width: 639px) { + /* quick small resolution reset */ + .mod, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + .flex-container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + .w300p, + .w400p, + .w500p { + width: auto; + float: none; } + .row { + display: block !important; + width: 100% !important; } + /* layouts for tiny screens */ + .tiny-hidden { + display: none !important; } + .tiny-visible { + display: block !important; } + .tiny-no-float { + float: none; } + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; } + .tiny-col { + display: table-cell !important; + vertical-align: top !important; } + th, + td { + display: block; + width: auto; + text-align: left; } + thead { + display: none; } + /* widths for tiny screens */ + .tiny-w25 { + width: 25% !important; } + .tiny-w33 { + width: 33.3333% !important; } + .tiny-w50 { + width: 50% !important; } + .tiny-w66 { + width: 66.6666% !important; } + .tiny-w75 { + width: 75% !important; } + .tiny-w100, + .tiny-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for tiny screens */ + .tiny-man, + .tiny-ma0 { + margin: 0 !important; } + .tiny-pan, + .tiny-pa0 { + padding: 0 !important; } } + +/* ----------------------------- */ +/* ==Own stylesheet */ /* ----------------------------- */ /* Here should go your own CSS styles */ -/* You can also link them with a LESS @import */ -/* @import "my-styles.less"; */ diff --git a/css/knacss.css b/css/knacss.css index 0f0dae1..6bd631c 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,4 +1,4 @@ -/*! -* www.KNACSS.com V4.4.5 (1er avril 2016) @author: Raphael Goetter, Alsacreations +@charset "UTF-8";/*! +* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ -*//*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input,select{overflow:visible}[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}html,legend{box-sizing:border-box}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.row,.table,table{table-layout:fixed}a:active,a:focus,a:hover,body,button,input,mark,optgroup,select,textarea{color:#000}[type=button],[type=reset],[type=submit],button,label{cursor:pointer}.col,.inbl,.row>*,.table,table,td,textarea,th{vertical-align:top}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}.row,legend{display:table}a{background-color:transparent;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;border:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}ol,ul{padding-left:2em}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4rem;background-color:#fff;line-height:1.5}.center,.right{margin-left:auto}.center,.left{margin-right:auto}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{margin-bottom:2rem}.bfc,.mod{overflow:hidden}.clear,.line,.row{clear:both}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtleft{text-align:left}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.row{width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem;letter-spacing:-.31em}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% * 1 / 4 - 2rem - .01px);min-width:0;margin-left:2rem;display:inline-block;vertical-align:top;letter-spacing:normal}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem - .01px)}@media (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (max-width:320px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-tiny-2"]>.flex-item-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 2rem - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 2rem - .01px)}@media (max-width:640px){.grid-2-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 2rem - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 2rem - .01px)}@media (max-width:640px){.grid-1-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 2rem - .01px)}@media (max-width:640px){.grid-3-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 2rem - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem - .01px)}@media (max-width:640px){.grid-1-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 2rem - .01px)}@media (max-width:640px){.grid-3-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 2rem - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem - .01px)}@media (max-width:640px){.grid-2-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 2rem - .01px)}@media (max-width:640px){.grid-4-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 2rem - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem - .01px)}@media (max-width:640px){.grid-1-4>:nth-child(n){width:calc(100% - 2rem - .01px)}code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}}.pull{margin-right:auto}.push{margin-left:auto}.table,table{width:100%;border-collapse:collapse}.table{display:table}.btn,label{display:inline-block}#recaptcha_table,table.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default}fieldset,form{border:none}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.skip-links,.skip-links a{position:absolute}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}.w700p{width:700px}.w800p{width:800px}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:961px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-man{margin:0!important}}@media (min-width:641px) and (max-width:960px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:321px) and (max-width:640px){.mw960p,.w600p,.w700p,.w800p,.w960p{width:auto;float:none}.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:320px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.w300p,.w400p,.w500p{width:auto;float:none}.row,.tiny-row{width:100%!important}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}code,mark{padding:2px 4px}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:640px){.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{padding:0;background:0 0;color:inherit;border-radius:0}sub,sup{vertical-align:0}blockquote{position:relative;padding-left:3em}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{display:block;clear:both;height:1px;margin:1em 0 2em;padding:0;border:0;color:#ccc;background-color:#ccc}.table,table{border:1px solid #ccc}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;text-align:left} \ No newline at end of file +*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.clear,.line,.row,hr{clear:both}.txtleft,td,th{text-align:left}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.row,.table,table{table-layout:fixed}.col,.inbl,.row>*,.table,table,td,textarea,th{vertical-align:top}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}ol,ul{padding-left:2em}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4rem;background-color:#fff;line-height:1.5}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{margin-bottom:2rem}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.right{margin-left:auto}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:320px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}}.bfc,.mod{overflow:hidden}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.row{display:table;width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.flex-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.flex-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1 :nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2 :nth-child(odd),.grid-2-1 :nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2 :nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1 :nth-child(odd){width:calc(75% - 2rem)}.grid-1-3 :nth-child(odd),.grid-3-1 :nth-child(even){width:calc(25% - 2rem)}.grid-1-3 :nth-child(even){width:calc(75% - 2rem)}.grid-3-2 :nth-child(odd){width:calc(60% - 2rem)}.grid-2-3 :nth-child(odd),.grid-3-2 :nth-child(even){width:calc(40% - 2rem)}.grid-2-3 :nth-child(even){width:calc(60% - 2rem)}.grid-4-1 :nth-child(odd){width:calc(80% - 2rem)}.grid-1-4 :nth-child(odd),.grid-4-1 :nth-child(even){width:calc(20% - 2rem)}.grid-1-4 :nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto}.table,table{width:100%;border-collapse:collapse}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}.w700p{width:700px}.w800p{width:800px}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:1280px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:960px) and (max-width:1279px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:640px) and (max-width:959px){.mw960p,.w600p,.w700p,.w800p,.w960p{width:auto;float:none}.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:639px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.w300p,.w400p,.w500p{width:auto;float:none}.row,.tiny-row{width:100%!important}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}} \ No newline at end of file