/*! * www.KNACSS.com V2.9.4 (2014-04) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ /* == soft reset */ /* ----------------------------- */ /* switching box model for all elements */ * { box-sizing: border-box; } /* soft reset */ html, body { margin: 0; padding: 0; } ul, ol { padding-left: 2em; } ul.unstyled { list-style: none; } img { vertical-align: middle; border: 0; } audio, canvas, video { display: inline-block; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } /* ----------------------------- */ /* == 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%; } body { background-color: #ffffff; color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; line-height: 1.5; } /* font-sizing for content */ /* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ p, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure, hgroup { margin-top: .75em; margin-bottom: 0; line-height: 1.5; } h1, .h1-like { margin-top: 0.65625em; margin-bottom: 0; font-size: 3.2rem; line-height: 1.3125; } h2, .h2-like { margin-top: 0.75em; margin-bottom: 0; font-size: 2.8rem; line-height: 1.5; } h3, .h3-like { margin-top: 0.875em; margin-bottom: 0; font-size: 2.4rem; line-height: 1.75; } h4, .h4-like { margin-top: 1.05em; margin-bottom: 0; font-size: 2rem; line-height: 1.05; } h5, .h5-like { margin-top: 1.16666667em; margin-bottom: 0; font-size: 1.8rem; line-height: 1.16666667; } h6, .h6-like { margin-top: 1.3125em; margin-bottom: 0; font-size: 1.6rem; line-height: 1.3125; } /* alternate font-sizing */ .smaller { font-size: 0.71428571em; } .small { font-size: 0.85714286em; } .big { font-size: 1.14285714em; } .bigger { font-size: 1.28571429em; } .biggest { font-size: 1.42857143em; } 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 { font-style: italic; } strong { font-weight: bold; } /* ----------------------------- */ /* == hiding content */ /* ----------------------------- */ /* hiding content */ .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; } /* ----------------------------- */ /* == browsers consistency */ /* ----------------------------- */ /* avoid top margins on first content element */ p: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 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: 1.5em; } /* Google Gmap3 bug fix on images */ :not(.gm-style) img { height: auto; } .gm-style img, .gmnoscreen img, .gmnoprint img { max-width: none !important; } /* scripts */ body > script { display: none !important; } /* ----------------------------- */ /* ==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; } /* 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 */ .m-reset, .ma0 { margin: 0; } .p-reset, .pa0 { padding: 0; } .ma1, .mas { margin: 1em; } .ma2, .mam { margin: 2em; } .ma3, .mal { margin: 4em; } .pa1, .pas { padding: 1em; } .pa2, .pam { padding: 2em; } .pa3, .pal { padding: 4em; } .mt0, .mtn { margin-top: 0; } .mt1, .mts { margin-top: 1em; } .mt2, .mtm { margin-top: 2em; } .mt3, .mtl { margin-top: 4em; } .mr0, .mrn { margin-right: 0; } .mr1, .mrs { margin-right: 1em; } .mr2, .mrm { margin-right: 2em; } .mr3, .mrl { margin-right: 4em; } .mb0, .mbn { margin-bottom: 0; } .mb1, .mbs { margin-bottom: 1em; } .mb2, .mbm { margin-bottom: 2em; } .mb3, .mbl { margin-bottom: 4em; } .ml0, .mln { margin-left: 0; } .ml1, .mls { margin-left: 1em; } .ml2, .mlm { margin-left: 2em; } .ml3, .mll { margin-left: 4em; } .pt0, .ptn { padding-top: 0; } .pt1, .pts { padding-top: 1em; } .pt2, .ptm { padding-top: 2em; } .pt3, .ptl { padding-top: 4em; } .pr0, .prn { padding-right: 0; } .pr1, .prs { padding-right: 1em; } .pr2, .prm { padding-right: 2em; } .pr3, .prl { padding-right: 4em; } .pb0, .pbn { padding-bottom: 0; } .pb1, .pbs { padding-bottom: 1em; } .pb2, .pbm { padding-bottom: 2em; } .pb3, .pbl { padding-bottom: 4em; } .pl0, .pln { padding-left: 0; } .pl1, .pls { padding-left: 1em; } .pl2, .plm { padding-left: 2em; } .pl3, .pll { padding-left: 4em; } /* debug helper */ .knacss-debug { background: pink; outline: 3px solid maroon; }