/*! * www.KNACSS.com V3.0.0 (2014-05) @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; } audio, canvas, video { display: inline-block; } svg:not(:root) { overflow: hidden; } /* ----------------------------- */ /* == typography */ /* ----------------------------- */ /* base font-size corresponds to "10px" and is adapted to rem unit */ html { font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { background-color: #ffffff; color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; line-height: 1.5; } /* font-sizing for content */ p, .p-like, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure, hgroup { margin-top: 0.75em; margin-bottom: 0; line-height: 1.5; } h1, .h1-like { font-size: 3.2rem; } h2, .h2-like { font-size: 2.8rem; } 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 { white-space: pre-line; /* IE fix */ white-space: pre-wrap; font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; line-height: normal; } em, .em, address, cite, dfn, i, var { font-style: italic; } .no-em { font-style: normal; } strong, .strong { font-weight: bold; } .no-strong { font-weight: normal; } small, sub, sup { font-size: smaller; } /* ----------------------------- */ /* == hiding content */ /* ----------------------------- */ .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; } body > script { display: none !important; } @media print { .no-print { display: none; } } @media (max-width: 480px) { .no-small-screen { display: none; } } @media (min-width: 1024px) { .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: 2em; } /* ----------------------------- */ /* ==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; } /* 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: 1em; } /* right (or ending) elements */ .right, .end { float: right; } img.right, img.end { margin-left: 1em; } img.left, img.right, img.start, img.end { margin-bottom: 0.5em; } .center { margin-left: auto; margin-right: auto; } .txtleft { text-align: left; } .txtright { text-align: right; } .txtcenter { text-align: center; } .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; } .man { margin: 0; } .pan { padding: 0; } .mas { margin: 1em; } .mam { margin: 2em; } .mal { margin: 4em; } .pas { padding: 1em; } .pam { padding: 2em; } .pal { padding: 4em; } .mtn { margin-top: 0; } .mts { margin-top: 1em; } .mtm { margin-top: 2em; } .mtl { margin-top: 4em; } .mrn { margin-right: 0; } .mrs { margin-right: 1em; } .mrm { margin-right: 2em; } .mrl { margin-right: 4em; } .mbn { margin-bottom: 0; } .mbs { margin-bottom: 1em; } .mbm { margin-bottom: 2em; } .mbl { margin-bottom: 4em; } .mln { margin-left: 0; } .mls { margin-left: 1em; } .mlm { margin-left: 2em; } .mll { margin-left: 4em; } .ptn { padding-top: 0; } .pts { padding-top: 1em; } .ptm { padding-top: 2em; } .ptl { padding-top: 4em; } .prn { padding-right: 0; } .prs { padding-right: 1em; } .prm { padding-right: 2em; } .prl { padding-right: 4em; } .pbn { padding-bottom: 0; } .pbs { padding-bottom: 1em; } .pbm { padding-bottom: 2em; } .pbl { padding-bottom: 4em; } .pln { padding-left: 0; } .pls { padding-left: 1em; } .plm { padding-left: 2em; } .pll { padding-left: 4em; }