@charset "UTF-8"; /*! * www.KNACSS.com v7.0.3 (march, 1 2018) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ /* ==Table Of Content */ /* ----------------------------- */ /* 1- Reboot (basic reset) 2- Libraries : - Base - Print - Layout (alignment, modules, positionning) - Utilities (width and spacers helpers) - Responsive helpers - WordPress reset (disabled by default) - Grillade (Grid System) 3- Components : - Media object - Skip Links for accessibility - Tables - Forms - Buttons - Checkbox - Tabs - Tags - Badges - Alerts */ *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } @-ms-viewport { width: device-width; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } [tabindex="-1"]:focus { outline: none !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } dfn { font-style: italic; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a { color: #007bff; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { color: #0056b3; text-decoration: underline; } a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):focus { outline: 0; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } figure { margin: 0 0 1rem; } img { vertical-align: middle; border-style: none; } svg:not(:root) { overflow: hidden; } a, area, button, [role="button"], input:not([type="range"]), label, select, summary, textarea { touch-action: manipulation; } table { border-collapse: collapse; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #868e96; text-align: left; caption-side: bottom; } th { text-align: inherit; } label { display: inline-block; margin-bottom: .5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; } template { display: none; } [hidden] { display: none !important; } /* ----------------------------- */ /* ==Base (basic styles) */ /* ----------------------------- */ /* switching to border-box model for all elements */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; /* avoid min-width: auto on flex and grid children */ min-width: 0; min-height: 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 */ font-size: calc(1em * 0.625); } body { margin: 0; font-size: 1.4rem; background-color: #fff; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.5; } @media (min-width: 576px) { body { font-size: 1.6rem; } } /* Links */ a { color: #333; text-decoration: underline; } a:focus, a:hover, a:active { color: #0d0d0d; text-decoration: underline; } /* Headings */ h1, .h1-like { font-size: 2.8rem; font-family: sans-serif; font-weight: 500; } @media (min-width: 576px) { h1, .h1-like { font-size: 3.2rem; } } h2, .h2-like { font-size: 2.4rem; font-family: sans-serif; font-weight: 500; } @media (min-width: 576px) { h2, .h2-like { font-size: 2.8rem; } } h3, .h3-like { font-size: 2rem; font-weight: 500; } @media (min-width: 576px) { h3, .h3-like { font-size: 2.4rem; } } h4, .h4-like { font-size: 1.8rem; font-weight: 500; } @media (min-width: 576px) { h4, .h4-like { font-size: 2rem; } } h5, .h5-like { font-size: 1.6rem; font-weight: 500; } @media (min-width: 576px) { h5, .h5-like { font-size: 1.8rem; } } h6, .h6-like { font-size: 1.4rem; font-weight: 500; } @media (min-width: 576px) { h6, .h6-like { font-size: 1.6rem; } } /* Vertical rythm */ h1, h2, h3, h4, h5, h6, dd { margin-top: 0; margin-bottom: 0.5rem; } p, address, ol, ul, dl, blockquote, pre { margin-top: 0; margin-bottom: 1rem; } /* Avoid margins on nested elements */ li p, li .p-like, li ul, li ol, ol ol, ul ul { margin-top: 0; margin-bottom: 0; } /* Max values */ img, table, td, blockquote, code, pre, textarea, input, video, svg { max-width: 100%; } img { height: auto; } /* Styling elements */ ul, ol { padding-left: 2em; } img { vertical-align: middle; } em, .italic, address, cite, i, var { font-style: italic; } code, kbd, mark { border-radius: 2px; } kbd { padding: 0 2px; border: 1px solid #999; } pre { -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } 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; min-height: 2em; } blockquote::before { content: "\201C"; position: absolute; left: 0; top: 0; font-family: georgia, serif; font-size: 5em; height: .4em; line-height: .9; color: #e7e9ed; } 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: "“" "”" "‘" "’"; } 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; } blockquote, figure { margin-left: 0; margin-right: 0; } code, pre, samp, kbd { white-space: pre-wrap; font-family: consolas, courier, monospace; line-height: normal; } /* ----------------------------- */ /* ==Print (quick print reset) */ /* ----------------------------- */ @media print { * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } body { width: auto; margin: auto; font-family: serif; font-size: 12pt; } p, .p-like, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, blockquote, label, ul, ol { color: #000; margin: auto; } .print { display: block; } .no-print { display: none; } /* no orphans, no widows */ p, .p-like, blockquote { orphans: 3; widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol { page-break-inside: avoid; } /* page break before main headers h1, .h1-like { page-break-before: always; } */ /* no breaks after these elements */ h1, .h1-like, h2, .h2-like, h3, .h3-like, caption { page-break-after: avoid; } a { color: #000; } /* displaying URLs a[href]::after { content: " (" attr(href) ")"; } */ a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; } } /* ----------------------------- */ /* ==Global Micro Layout */ /* ----------------------------- */ /* module, gains superpower "BFC" Block Formating Context */ .mod, .bfc { overflow: hidden; } /* blocks that needs to be placed under floats */ .clear { clear: both; } /* blocks that must contain floats */ .clearfix::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; } /* inline-block */ .inbl { display: inline-block; vertical-align: top; } /* flexbox layout http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html */ .flex-container, .flex-container--row, .flex-row, .flex-container--column, .flex-column, .flex-container--row-reverse, .flex-row-reverse, .flex-container--column-reverse, .flex-column-reverse, .d-flex { display: flex; flex-wrap: wrap; } .flex-container--row, .flex-row { flex-direction: row; } .flex-container--column, .flex-column { flex-direction: column; } .flex-container--row-reverse, .flex-row-reverse { flex-direction: row-reverse; justify-content: flex-end; } .flex-container--column-reverse, .flex-column-reverse { flex-direction: column-reverse; justify-content: flex-end; } .flex-item-fluid, .item-fluid { flex: 1 1 0%; } .flex-item-first, .item-first { order: -1; } .flex-item-medium, .item-medium { order: 0; } .flex-item-last, .item-last { order: 1; } .flex-item-center, .item-center, .mr-auto { margin: auto; } /* ---------------------------------- */ /* ==Helpers */ /* ---------------------------------- */ /* Typo Helpers */ /* ------------- */ .u-bold { font-weight: 700; } .u-italic { font-style: italic; } .u-normal { font-weight: normal; font-style: normal; } .u-uppercase { text-transform: uppercase; } .u-lowercase { text-transform: lowercase; } .u-smaller { font-size: 0.6em; } .u-small { font-size: 0.8em; } .u-big { font-size: 1.2em; } .u-bigger { font-size: 1.5em; } .u-biggest { font-size: 2em; } .u-txt-wrap { word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .u-txt-ellipsis { white-space: nowrap; text-overflow: ellipsis; } /* State Helpers */ /* ------------- */ /* invisible for all */ .is-hidden, .js-hidden, [hidden] { display: none; } /* hidden but not for an assistive technology like a screen reader, Yahoo! method */ .visually-hidden, .tabs-content-item[aria-hidden="true"] { 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, .js-disabled, [disabled], .is-disabled ~ label, [disabled] ~ label { opacity: 0.5; cursor: not-allowed !important; -webkit-filter: grayscale(1); filter: grayscale(1); } ul.is-unstyled, ul.unstyled { list-style: none; padding-left: 0; } .color--inverse { color: #fff; } /* Width Helpers */ /* ------------- */ /* blocks widths (percentage and pixels) */ .w100 { width: 100%; } .w95 { width: 95%; } .w90 { width: 90%; } .w85 { width: 85%; } .w80 { width: 80%; } .w75 { width: 75%; } .w70 { width: 70%; } .w65 { width: 65%; } .w60 { width: 60%; } .w55 { width: 55%; } .w50 { width: 50%; } .w45 { width: 45%; } .w40 { width: 40%; } .w35 { width: 35%; } .w30 { width: 30%; } .w25 { width: 25%; } .w20 { width: 20%; } .w15 { width: 15%; } .w10 { width: 10%; } .w5 { width: 5%; } .w66 { width: calc(100% / 3 * 2); } .w33 { width: calc(100% / 3); } .wauto { width: auto; } .w960p { width: 960px; } .mw960p { max-width: 960px; } .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } .w1000p { width: 1000px; } .w950p { width: 950px; } .w900p { width: 900px; } .w850p { width: 850px; } .w800p { width: 800px; } .w750p { width: 750px; } .w700p { width: 700px; } .w650p { width: 650px; } .w600p { width: 600px; } .w550p { width: 550px; } .w500p { width: 500px; } .w450p { width: 450px; } .w400p { width: 400px; } .w350p { width: 350px; } .w300p { width: 300px; } .w250p { width: 250px; } .w200p { width: 200px; } .w150p { width: 150px; } .w100p { width: 100px; } .w50p { width: 50px; } /* 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: 992px) { /* 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; } /* widths for large screens */ .large-w25 { width: 25% !important; } .large-w33 { width: 33.333333% !important; } .large-w50 { width: 50% !important; } .large-w66 { width: 66.666666% !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: 768px) and (max-width: 991px) { /* 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; } /* widths for medium screens */ .medium-w25 { width: 25% !important; } .medium-w33 { width: 33.333333% !important; } .medium-w50 { width: 50% !important; } .medium-w66 { width: 66.666666% !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: 576px) and (max-width: 767px) { /* 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; } /* widths for small screens */ .small-w25 { width: 25% !important; } .small-w33 { width: 33.333333% !important; } .small-w50 { width: 50% !important; } .small-w66 { width: 66.666666% !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: 575px) { /* 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, .flex-container--row, .flex-row, .flex-container--column, .flex-column, .flex-container--row-reverse, .flex-row-reverse, .flex-container--column-reverse, .flex-column-reverse { flex-direction: column; } /* 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; } /* widths for tiny screens */ .tiny-w25 { width: 25% !important; } .tiny-w33 { width: 33.333333% !important; } .tiny-w50 { width: 50% !important; } .tiny-w66 { width: 66.666666% !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; } } /* --------------------------------------- */ /* ==Grillade : ultra light Grid System */ /* --------------------------------------- */ @media (min-width: 480px) { [class*=" grid-"], [class^="grid-"] { display: grid; grid-auto-flow: dense; } [class*=" grid-"].has-gutter, [class^="grid-"].has-gutter { grid-gap: 1rem; } [class*=" grid-"].has-gutter-l, [class^="grid-"].has-gutter-l { grid-gap: 2rem; } [class*=" grid-"].has-gutter-xl, [class^="grid-"].has-gutter-xl { grid-gap: 4rem; } } @media (min-width: 480px) { .autogrid, .grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .autogrid.has-gutter, .grid.has-gutter { grid-column-gap: 1rem; } .autogrid.has-gutter-l, .grid.has-gutter-l { grid-column-gap: 2rem; } .autogrid.has-gutter-xl, .grid.has-gutter-xl { grid-column-gap: 4rem; } } [class*="grid-2"] { grid-template-columns: repeat(2, 1fr); } [class*="grid-3"] { grid-template-columns: repeat(3, 1fr); } [class*="grid-4"] { grid-template-columns: repeat(4, 1fr); } [class*="grid-5"] { grid-template-columns: repeat(5, 1fr); } [class*="grid-6"] { grid-template-columns: repeat(6, 1fr); } [class*="grid-7"] { grid-template-columns: repeat(7, 1fr); } [class*="grid-8"] { grid-template-columns: repeat(8, 1fr); } [class*="grid-9"] { grid-template-columns: repeat(9, 1fr); } [class*="grid-10"] { grid-template-columns: repeat(10, 1fr); } [class*="grid-11"] { grid-template-columns: repeat(11, 1fr); } [class*="grid-12"] { grid-template-columns: repeat(12, 1fr); } [class*="col-1"] { grid-column: auto/span 1; } [class*="row-1"] { grid-row: auto/span 1; } [class*="col-2"] { grid-column: auto/span 2; } [class*="row-2"] { grid-row: auto/span 2; } [class*="col-3"] { grid-column: auto/span 3; } [class*="row-3"] { grid-row: auto/span 3; } [class*="col-4"] { grid-column: auto/span 4; } [class*="row-4"] { grid-row: auto/span 4; } [class*="col-5"] { grid-column: auto/span 5; } [class*="row-5"] { grid-row: auto/span 5; } [class*="col-6"] { grid-column: auto/span 6; } [class*="row-6"] { grid-row: auto/span 6; } [class*="col-7"] { grid-column: auto/span 7; } [class*="row-7"] { grid-row: auto/span 7; } [class*="col-8"] { grid-column: auto/span 8; } [class*="row-8"] { grid-row: auto/span 8; } [class*="col-9"] { grid-column: auto/span 9; } [class*="row-9"] { grid-row: auto/span 9; } [class*="col-10"] { grid-column: auto/span 10; } [class*="row-10"] { grid-row: auto/span 10; } [class*="col-11"] { grid-column: auto/span 11; } [class*="row-11"] { grid-row: auto/span 11; } [class*="col-12"] { grid-column: auto/span 12; } [class*="row-12"] { grid-row: auto/span 12; } /* intermediate breakpoints */ @media (min-width: 480px) and (max-width: 767px) { [class*="grid-"][class*="-small-1"] { grid-template-columns: repeat(1, 1fr); } [class*="col-"][class*="-small-1"] { grid-column: auto/span 1; } [class*="grid-"][class*="-small-2"] { grid-template-columns: repeat(2, 1fr); } [class*="col-"][class*="-small-2"] { grid-column: auto/span 2; } [class*="grid-"][class*="-small-3"] { grid-template-columns: repeat(3, 1fr); } [class*="col-"][class*="-small-3"] { grid-column: auto/span 3; } [class*="grid-"][class*="-small-4"] { grid-template-columns: repeat(4, 1fr); } [class*="col-"][class*="-small-4"] { grid-column: auto/span 4; } [class*="-small-all"] { grid-column: 1 / -1; } } .item-first { order: -1; } .item-last { order: 1; } .grid-offset { visibility: hidden; } .col-all { grid-column: 1 / -1; } .row-all { grid-row: 1 / -1; } /* ----------------------------- */ /* ==Media object */ /* ----------------------------- */ /* recommanded HTML :
*/ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ @media (min-width: 480px) { .media { display: flex; align-items: flex-start; } .media-content { flex: 1 1 0%; } .media-figure--center { align-self: center; } .media--reverse { flex-direction: row-reverse; } } /* ----------------------------- */ /* ==skip links */ /* ----------------------------- */ /* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */ /* 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; } /* ----------------------------- */ /* ==Tables */ /* ----------------------------- */ table, .table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; vertical-align: top; margin-bottom: 2rem; } .table { display: table; border: 1px solid #acb3c2; background: transparent; } .table--zebra tbody tr:nth-child(odd) { background: #e7e9ed; } .table caption { caption-side: bottom; padding: 1rem; color: #333; font-style: italic; text-align: right; } .table td, .table th { padding: 0.3rem 0.6rem; min-width: 2rem; vertical-align: top; border: 1px #acb3c2 dotted; text-align: left; cursor: default; } .table thead { color: #212529; background: transparent; } .table--auto { table-layout: auto; } /* ----------------------------- */ /* ==Forms */ /* ----------------------------- */ /* thanks to HTML5boilerplate and https://shoelace.style/ */ /* forms items */ form, fieldset { border: none; } fieldset { padding: 2rem; } fieldset legend { padding: 0 0.5rem; border: 0; white-space: normal; } label { display: inline-block; cursor: pointer; } [type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea { white-space: nowrap; font-family: inherit; font-size: inherit; border: 0; box-shadow: 0 0 0 1px #333 inset; color: #212529; vertical-align: middle; padding: 0.5rem 1rem; margin: 0; transition: 0.25s; transition-property: box-shadow, background-color, color, border; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [type="submit"] { background-color: #333; color: #fff; cursor: pointer; } input[readonly] { background-color: #e7e9ed; } select { padding-right: 2rem; border-radius: 0; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); background-position: right .6rem center; background-repeat: no-repeat; background-size: 1.2rem; } /* hiding IE11 arrow */ select::-ms-expand { display: none; } textarea { min-height: 5em; vertical-align: top; resize: vertical; white-space: normal; } /* 'x' appears on right of search input when text is entered. This removes it */ [type="search"]::-webkit-search-decoration, [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-results-button, [type="search"]::-webkit-search-results-decoration { display: none; } ::-webkit-input-placeholder { color: #777; } input:-moz-placeholder, textarea:-moz-placeholder { color: #777; } progress { width: 100%; vertical-align: middle; } /* ----------------------------- */ /* ==Buttons */ /* ----------------------------- */ /* preferably use