From 903d4c260ab2dda4ef15285a09a728adc1d2acd1 Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Fri, 12 Sep 2014 10:51:52 +0200 Subject: [PATCH] version un-minified vanilla CSS --- css/knacss-unminified.css | 1623 +++++++++++++++++++++++++++++++++++++ 1 file changed, 1623 insertions(+) create mode 100644 css/knacss-unminified.css diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css new file mode 100644 index 0000000..4356d5d --- /dev/null +++ b/css/knacss-unminified.css @@ -0,0 +1,1623 @@ +/*! +* www.KNACSS.com V3.0.9 (2014-09-12) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ +*/ +/* ----------------------------- */ +/* == soft reset */ +/* ----------------------------- */ +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +/* soft reset */ +html, +body { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +ul.unstyled { + list-style: none; +} +img { + height: auto; + vertical-align: middle; + border: 0; +} +blockquote, +figure { + margin-left: 0; + margin-right: 0; +} +audio, +canvas, +video { + display: inline-block; +} +svg:not(:root) { + overflow: hidden; +} +/* ----------------------------- */ +/* == typography */ +/* ----------------------------- */ +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: -webkit-calc(0.625em); + font-size: calc(0.625em); + /* disallow text zooming on orientation change (non standard property) */ + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + /* set body font-size in em (1.4em equiv "14px") */ + font-size: 1.4em; + background-color: #ffffff; + color: #000000; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +} +a { + color: #333333; +} +a:hover, +a:focus, +a:active { + color: #000000; +} +/* font-sizing for content */ +p, +.p-like, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure { + margin-top: 0.75em; + margin-bottom: 0; + line-height: 1.5; +} +h1, +.h1-like { + font-size: 3.2rem; + font-family: Helvetica, Arial, sans-serif; +} +h2, +.h2-like { + font-size: 2.8rem; + font-family: Helvetica, Arial, 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.71em; +} +.small { + font-size: 0.86em; +} +.big { + font-size: 1.14em; +} +.bigger { + font-size: 1.29em; +} +.biggest { + font-size: 1.43em; +} +code, +pre, +samp, +kbd { + /* IE fix */ + white-space: pre-line; + white-space: pre-wrap; + font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; + line-height: normal; +} +em, +.italic, +address, +cite, +dfn, +i, +var { + font-style: italic; +} +strong, +.bold { + font-weight: bold; +} +small, +sub, +sup { + font-size: smaller; +} +/* ----------------------------- */ +/* == hiding content */ +/* ----------------------------- */ +/* 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(1px, 1px, 1px, 1px) !important; +} +body > script { + display: none !important; +} +@media (max-width: 768px) { + .no-small-screen { + display: none; + } +} +@media (min-width: 1280px) { + .no-large-screen { + display: none; + } +} +/* ----------------------------- */ +/* == browsers consistency */ +/* ----------------------------- */ +/* avoid top margins on first content element */ +p:first-child, +.p-like:first-child, +ul:first-child, +ol:first-child, +dl:first-child, +blockquote:first-child, +pre:first-child, +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + margin-top: 0; +} +/* avoid margins on nested elements */ +li p, +li .p-like, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} +/* max values */ +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video { + max-width: 100%; +} +/* margin-bottom on tables */ +table { + margin-bottom: 20px; +} +/* ----------------------------- */ +/* ==layout and modules */ +/* ----------------------------- */ +/* float layout */ +/* module, gains superpower "BFC" Block Formating Context */ +.mod { + 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; +} +/* table layout */ +.row { + display: table; + table-layout: fixed; + width: 100%; +} +.row > *, +.col { + display: table-cell; + vertical-align: top; +} +/* inline-block */ +.inbl { + display: inline-block; + vertical-align: top; +} +/* alignments (blocks and inline) */ +/* ------------------------------ */ +/* left (or starting) elements */ +.left, +.start { + float: left; +} +img.left, +img.start { + margin-right: 10px; +} +/* right (or ending) elements */ +.right, +.end { + float: right; +} +img.right, +img.end { + margin-left: 10px; +} +img.left, +img.right, +img.start, +img.end { + margin-bottom: 5px; +} +.center { + margin-left: auto; + margin-right: auto; +} +.txtleft { + text-align: left; +} +.txtright { + text-align: right; +} +.txtcenter { + text-align: center; +} +/* 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 { + margin: 0; +} +.pan { + padding: 0; +} +.mas { + margin: 10px; +} +.mam { + margin: 20px; +} +.mal { + margin: 40px; +} +.pas { + padding: 10px; +} +.pam { + padding: 20px; +} +.pal { + padding: 40px; +} +.mtn { + margin-top: 0; +} +.mts { + margin-top: 10px; +} +.mtm { + margin-top: 20px; +} +.mtl { + margin-top: 40px; +} +.mrn { + margin-right: 0; +} +.mrs { + margin-right: 10px; +} +.mrm { + margin-right: 20px; +} +.mrl { + margin-right: 40px; +} +.mbn { + margin-bottom: 0; +} +.mbs { + margin-bottom: 10px; +} +.mbm { + margin-bottom: 20px; +} +.mbl { + margin-bottom: 40px; +} +.mln { + margin-left: 0; +} +.mls { + margin-left: 10px; +} +.mlm { + margin-left: 20px; +} +.mll { + margin-left: 40px; +} +.ptn { + padding-top: 0; +} +.pts { + padding-top: 10px; +} +.ptm { + padding-top: 20px; +} +.ptl { + padding-top: 40px; +} +.prn { + padding-right: 0; +} +.prs { + padding-right: 10px; +} +.prm { + padding-right: 20px; +} +.prl { + padding-right: 40px; +} +.pbn { + padding-bottom: 0; +} +.pbs { + padding-bottom: 10px; +} +.pbm { + padding-bottom: 20px; +} +.pbl { + padding-bottom: 40px; +} +.pln { + padding-left: 0; +} +.pls { + padding-left: 10px; +} +.plm { + padding-left: 20px; +} +.pll { + padding-left: 40px; +} +/* ---------------------------------- */ +/* ==classic grids */ +/* .. use it when gutter size matters */ +/* ---------------------------------- */ +/* grids inspired from SUIT https://github.com/suitcss/suit */ +/* overall container of grids */ +.grid { + overflow: hidden; +} +/* global styles for direct child ex. .grid3 */ +.grid > * { + display: block; + padding: 0; + /* gutter value */ + margin-left: -20px; + text-align: left; +} +/* global styles for each "cell" */ +.grid > * > * { + display: inline-block; + /* gutter value */ + padding-left: 20px; + margin-left: 0; + vertical-align: top; +} +/* whitespace fixing for modern browsers including IE9+ */ +:root .grid { + font-size: 0; + /* fallback for IE9+ */ + text-justify: distribute-all-lines; +} +:root .grid > * > * { + /* fallback for Opera Mini */ + font-size: 14px; + font-size: 1.4rem; +} +/* Opera hack */ +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} +.grid2 > * { + width: 50%; +} +.grid3 > * { + width: 33.333%; +} +.grid4 > * { + width: 25%; +} +.grid5 > * { + width: 20%; +} +.grid6 > * { + width: 16.667%; +} +.grid8 > * { + width: 12.5%; +} +.grid10 > * { + width: 10%; +} +.grid12 > * { + width: 8.333%; +} +/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ +.grid2-1 > *:first-child, +.grid1-2 > * + * { + width: 66.666%; +} +.grid1-2 > *:first-child, +.grid2-1 > * + * { + width: 33.333%; +} +.grid1-3 > *:first-child, +.grid3-1 > * + * { + width: 25%; +} +.grid3-1 > *:first-child, +.grid1-3 > * + * { + width: 75%; +} +/* ---------------------------------- */ +/* ==autogrids */ +/* .. to automatically justify blocs */ +/* ---------------------------------- */ +/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ +/* container of autogrids */ +[class*="autogrid"] { + text-align: justify; +} +[class*="autogrid"]:after { + content: ""; + display: inline-block; + width: 100%; +} +[class*="autogrid"] > * { + display: inline-block; + vertical-align: top; + text-align: left; +} +/* whitespace fixing for modern browsers including IE9+ */ +:root [class*="autogrid"] { + font-size: 0; + /* fallback for IE9+ */ + text-justify: distribute-all-lines; +} +:root [class*="autogrid"] > * { + /* fallback for Opera Mini */ + font-size: 14px; + font-size: 1.4rem; +} +/* Opera hack */ +[class*="autogrid"]:-o-prefocus { + word-spacing: -0.43em; +} +.autogrid2 > * { + width: 49%; +} +.autogrid3 > * { + width: 32%; +} +.autogrid4 > * { + width: 23.6%; +} +.autogrid5 > * { + width: 19%; +} +.autogrid6 > * { + width: 15%; +} +.autogrid8 > * { + width: 10.8%; +} +.autogrid10 > * { + width: 9%; +} +.autogrid12 > * { + width: 6.4%; +} +/* ----------------------------- */ +/* ==tables */ +/* ----------------------------- */ +table, +.table { + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + border: 1px solid #ccc; +} +.table { + display: table; +} +table#recaptcha_table, +table.table-auto { + table-layout: auto; +} +caption { + padding: 10px; + color: #555; + font-style: italic; +} +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + vertical-align: top; + min-width: 20px; + cursor: default; + text-align: left; +} +/* ----------------------------- */ +/* ==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 { + vertical-align: middle; + font-family: inherit; + font-size: inherit; +} +label { + display: inline-block; + 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; +} +/* clickable input types in iOS */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type="search"] { + -webkit-appearance: textfield; +} +/* 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; +} +/* Removes inner padding and border in FF3+ */ +button::-moz-focus-inner, +input[type='button']::-moz-focus-inner, +input[type='reset']::-moz-focus-inner, +input[type='submit']::-moz-focus-inner { + border: 0; + padding: 0; +} +/* ----------------------------- */ +/* ==icons and bullets */ +/* ----------------------------- */ +.icon { + display: inline-block; +} +.icon:before, +.icon.after:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; + top: -0.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); + speak: none; +} +@media (min-device-width: 768px) { + .icon:before, + .icon.after:after { + font: 1em/0.6 sans-serif; + -webkit-transform: rotateZ(0.05deg); + } +} +.icon.after:after { + margin: 0 0 0 8px; +} +.icon.after:before { + content: "" !important; +} +.icon-rate:before, +.icon-rate.after:after { + content: "\2605"; +} +.icon-unrate:before, +.icon-unrate.after:after { + content: "\2606"; +} +.icon-check:before, +.icon-check.after:after { + content: "\2713"; +} +.icon-uncheck:before, +.icon-uncheck.after:after { + content: "\2717"; +} +.icon-cloud:before, +.icon-cloud.after:after { + content: "\2601"; +} +.icon-dl:before, +.icon-dl.after:after { + content: "\21E3"; + font-weight: bold; +} +.icon-cross:before, +.icon-cross.after:after { + content: "\2716"; + font-weight: bold; +} +.icon-arrow1:before, +.icon-arrow1.after:after { + content: "\2192"; + position: relative; + top: -0.15em; +} +.icon-arrow2:before, +.icon-arrow2.after:after { + content: "\279E"; +} +.icon-arrow3:before, +.icon-arrow3.after:after { + content: "\279A"; +} +.icon-bracket1:before, +.icon-bracket1.after:after { + content: "\2039"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} +.icon-bracket2:before, +.icon-bracket2.after:after { + content: "\203A"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} +.icon-up:before, +.icon-up.after:after { + content: "\25B2"; +} +.icon-down:before, +.icon-down.after:after { + content: "\25BC"; +} +.icon-bull:before, +.icon-bull.after:after { + content: "\2022"; + font-size: 1.2em; + top: -0.05em; +} +.icon-bull2:before, +.icon-bull2.after:after { + content: "\25E6"; + top: -0.05em; +} +.icon-bull3:before, +.icon-bull3.after:after { + content: "\2023"; + font-size: 1.6em; + top: -0.05em; +} +.icon-nav:before, +.icon-nav.after:after { + content: "\2261"; + font-weight: bold; +} +.icon-losange:before, +.icon-losange.after:after { + content: "\25C6"; +} +.icon-asteri:before, +.icon-asteri.after:after { + content: "\2731"; + font-weight: bold; +} +.icon-mail:before, +.icon-mail.after:after { + content: "\2709"; + font-size: 1.6em; + top: -0.05em; +} +/* ----------------------------- */ +/* ==desktop and HD devices */ +/* ----------------------------- */ +@media (min-width: 1025px) { + /* 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: 1025px) { + /* 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; + } + /* grid rwd for large screens */ + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 33.333%; + } + /* autogrid rwd for large screens */ + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 32%; + } +} +/* ---------------------------------- */ +/* ==Responsive medium */ +/* ---------------------------------- */ +@media (min-width: 769px) and (max-width: 1024px) { + /* 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 { + margin: 0 !important; + } +} +/* ---------------------------------- */ +/* ==Responsive small */ +/* ---------------------------------- */ +@media (min-width: 481px) and (max-width: 768px) { + /* 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; + } + /* 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 { + margin: 0 !important; + } + .small-pan { + padding: 0 !important; + } + /* grid rwd for small screens */ + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } + /* autogrid rwd for small screens */ + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 49% !important; + } +} +/* ---------------------------------- */ +/* ==Responsive tiny */ +/* ---------------------------------- */ +@media (max-width: 480px) { + .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 !important; + width: auto !important; + text-align: left !important; + } + 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 { + margin: 0 !important; + } + .tiny-pan { + padding: 0 !important; + } + /* grid rwd for tiny screens */ + .grid > * > * { + width: 100% !important; + } + /* autogrid rwd for tiny screens */ + [class*="autogrid"] > * { + width: 100% !important; + } +} +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ +.flex { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.flex-h { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-v { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-fluid { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +.flex-start { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; +} +.flex-mid { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; +} +.flex-end { + -webkit-box-ordinal-group: 43; + -webkit-order: 42; + -ms-flex-order: 42; + order: 42; +} +/* quick print reset */ +@media print { + * { + background: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; + } + body { + width: auto !important; + margin: auto !important; + font-family: serif; + font-size: 12pt; + background-color: #fff !important; + color: #333 !important; + } + p, + h1, + h2, + h3, + h4, + h5, + h6, + blockquote, + ul, + ol { + color: #000 !important; + margin: auto !important; + } + .print { + display: block; + } + .no-print { + display: none; + } + img { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + } + /* no orphans, no widows */ + p, + blockquote { + orphans: 3; + widows: 3; + } + /* no breaks inside these elements */ + blockquote, + ul, + ol { + page-break-inside: avoid; + } + /* page break before main headers */ + h1 { + page-break-before: always; + } + /* no breaks after these elements */ + h1, + h2, + h3, + caption { + page-break-after: avoid; + } + a { + color: #000 !important; + text-decoration: underline !important; + } + /* displaying URLs */ + a[href]:after { + content: " (" attr(href) ")"; + } + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } +} +/* ----------------------------- */ +/* ==booleans */ +/* ----------------------------- */ +/* 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: 768px) { + /* you shall not pass */ + div, + textarea, + table, + td, + th, + code, + pre, + samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + } +} +/* ----------------------------- */ +/* ==gmaps support */ +/* ----------------------------- */ +/* Google Gmap3 bug fix on images */ +.gm-style img { + height: 100%; +} +:not(.gm-style) img { + height: auto; +} +.gm-style img, +.gmnoscreen img, +.gmnoprint img { + max-width: none !important; +} +/* ----------------------------- */ +/* ==IE6, IE7, IE8 support */ +/* ----------------------------- */ +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill */ +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +.ie678 h1, +.ie678 .h1-like { + font-size: 2.29em; +} +.ie678 h2, +.ie678 .h2-like { + font-size: 2em; +} +.ie678 h3, +.ie678 .h3-like { + font-size: 1.71em; +} +.ie678 h4, +.ie678 .h4-like { + font-size: 1.43em; +} +.ie678 h5, +.ie678 .h5-like { + font-size: 1.29em; +} +.ie678 h6, +.ie678 .h6-like { + font-size: 1.14em; +} +/* @bugfix for IE8 */ +.ie678 img { + width: auto; +} +.ie678 .gm-style img { + height: 100%; +} +/* hasLayout for IE6/IE7 */ +.clearfix, +.line, +.mod, +.row, +.col { + *zoom: 1; +} +/*! inline-block and table-cell for IE6/IE7 */ +/*! warning: .col needs width on IE6/IE7 */ +.btn, +.col, +.inbl { + *display: inline; + *zoom: 1; +} +/* old syntax of clip for IE6/IE7 */ +.visually-hidden { + *clip: rect(1px 1px 1px 1px); +} +/* IE8 grid hack */ +.ie8 .grid > *, +.ie8 [class*="autogrid"] > * { + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} +.ie8 .grid > * > *, +.ie8 [class*="autogrid"] > * > * { + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; +} +/* IE7 grid hack */ +.grid > * > *, +[class*="autogrid"] > * > * { + *display: inline; + *zoom: 1; +} +/* forms */ +/* Corrects excess space around these inputs in IE8/9 */ +.ie678 input[type="checkbox"], +.ie678 input[type="radio"] { + padding: 0; +} +/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ +.ie678 textarea { + overflow: auto; +} +/* ----------------------------- */ +/* ==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: none; + background: none; + color: inherit; + border-radius: 0; +} +mark { + padding: 2px 4px; + background: #ff0; +} +sup, +sub { + vertical-align: 0; + position: relative; +} +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; +} +/* alternate tables */ +.alternate { + border: 0; +} +.alternate tbody { + border: 1px solid #ccc; +} +.alternate thead tr > * + * { + border-left: 0; +} +.alternate tbody tr > * + * { + border-left: 1px solid #ccc; +} +/* alternate-vert tables */ +.alternate-vert { + border: 0; + border-right: 1px solid #ccc; +} +.alternate-vert tr > :first-child { + border-bottom: 0; +} +.alternate-vert tr > * + * { + border-top: 1px solid #ccc; +} +/* striped tables */ +.striped tbody tr:nth-child(odd) { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} +/* striped-vert tables */ +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} +/* ----------------------------- */ +/* ==own stylesheet */ +/* ----------------------------- */ +/* Here should go your own CSS styles */ +/* You can also link them with a LESS @import */ +/* @import "my-styles.less"; */