KNACSS/css/knacss-unminified.css
raphaelgoettter f94bd15c89 Ajout d'un quick mobile reset
.btn:focus,
input:focus,
button:focus {
outline: 0;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
}
2015-03-09 17:24:43 +01:00

1850 lines
31 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*!
* www.KNACSS.com V4.0.3 BETA (2015-03-06) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/
/* ----------------------------- */
/* == soft reset */
/* ----------------------------- */
/* switching to border-box model for all elements */
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
/* soft reset */
html,
body {
margin: 0;
padding: 0;
}
ul,
ol {
padding-left: 2em;
}
ul.unstyled {
list-style: none;
}
img {
vertical-align: middle;
border: 0;
}
/* height auto only for non SVG images */
img:not([src$=".svg"]) {
height: auto;
}
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: 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.6em;
}
.small {
font-size: 0.8em;
}
.big {
font-size: 1.2em;
}
.bigger {
font-size: 1.5em;
}
.biggest {
font-size: 2em;
}
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;
}
@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,
.h1-like:first-child,
h2:first-child,
.h2-like:first-child,
h3:first-child,
.h3-like:first-child,
h4:first-child,
.h4-like:first-child,
h5:first-child,
.h5-like:first-child,
h6:first-child,
.h6-like: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 */
/* ----------------------------- */
/* 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;
}
/* 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: 10px;
}
.fr {
float: right;
}
img.fr {
margin-left: 10px;
}
img.fl,
img.fr {
margin-bottom: 5px;
}
/* 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
*/
.flexbox,
.flexbox-h,
.flexbox-v {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flexbox-v {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flexitem-fluid {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flexitem-first {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
.flexitem-medium {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.flexitem-last {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.flexitem-center {
margin: auto;
}
/* ---------------------------------- */
/* ==Grids */
/* ---------------------------------- */
[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: -1em;
}
[class*="grid-"] > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-2 > * {
width: 50%;
}
.grid-2 > .flexitem-double {
width: 100%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-2 > * {
width: 33.3333%;
}
.grid-2 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-2 > * {
width: 50%;
}
.grid-2 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-2 > * {
width: 100%;
}
.grid-2 > .flexitem-double {
width: 100%;
}
}
.grid-3 > * {
width: 33.33333333%;
}
.grid-3 > .flexitem-double {
width: 66.66666667%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-3 > * {
width: 33.3333%;
}
.grid-3 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-3 > * {
width: 50%;
}
.grid-3 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-3 > * {
width: 100%;
}
.grid-3 > .flexitem-double {
width: 100%;
}
}
.grid-4 > * {
width: 25%;
}
.grid-4 > .flexitem-double {
width: 50%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-4 > * {
width: 33.3333%;
}
.grid-4 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-4 > * {
width: 50%;
}
.grid-4 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-4 > * {
width: 100%;
}
.grid-4 > .flexitem-double {
width: 100%;
}
}
.grid-5 > * {
width: 20%;
}
.grid-5 > .flexitem-double {
width: 40%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-5 > * {
width: 33.3333%;
}
.grid-5 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-5 > * {
width: 50%;
}
.grid-5 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-5 > * {
width: 100%;
}
.grid-5 > .flexitem-double {
width: 100%;
}
}
.grid-6 > * {
width: 16.66666667%;
}
.grid-6 > .flexitem-double {
width: 33.33333333%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-6 > * {
width: 33.3333%;
}
.grid-6 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-6 > * {
width: 50%;
}
.grid-6 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-6 > * {
width: 100%;
}
.grid-6 > .flexitem-double {
width: 100%;
}
}
.grid-7 > * {
width: 14.28571429%;
}
.grid-7 > .flexitem-double {
width: 28.57142857%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-7 > * {
width: 33.3333%;
}
.grid-7 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-7 > * {
width: 50%;
}
.grid-7 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-7 > * {
width: 100%;
}
.grid-7 > .flexitem-double {
width: 100%;
}
}
.grid-8 > * {
width: 12.5%;
}
.grid-8 > .flexitem-double {
width: 25%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-8 > * {
width: 33.3333%;
}
.grid-8 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-8 > * {
width: 50%;
}
.grid-8 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-8 > * {
width: 100%;
}
.grid-8 > .flexitem-double {
width: 100%;
}
}
.grid-10 > * {
width: 10%;
}
.grid-10 > .flexitem-double {
width: 20%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-10 > * {
width: 33.3333%;
}
.grid-10 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-10 > * {
width: 50%;
}
.grid-10 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-10 > * {
width: 100%;
}
.grid-10 > .flexitem-double {
width: 100%;
}
}
.grid-12 > * {
width: 8.33333333%;
}
.grid-12 > .flexitem-double {
width: 16.66666667%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid-12 > * {
width: 33.3333%;
}
.grid-12 > .flexitem-double {
width: 66.6666%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.grid-12 > * {
width: 50%;
}
.grid-12 > .flexitem-double {
width: 100%;
}
}
@media (max-width: 480px) {
.grid-12 > * {
width: 100%;
}
.grid-12 > .flexitem-double {
width: 100%;
}
}
.grid-2-1 > *:nth-child(odd) {
width: 66.66666667%;
}
.grid-2-1 > *:nth-child(even) {
width: 33.33333333%;
}
@media (max-width: 480px) {
.grid-2-1 > *:nth-child(n) {
width: 100%;
}
}
.grid-1-2 > *:nth-child(odd) {
width: 33.33333333%;
}
.grid-1-2 > *:nth-child(even) {
width: 66.66666667%;
}
@media (max-width: 480px) {
.grid-1-2 > *:nth-child(n) {
width: 100%;
}
}
.grid-3-1 > *:nth-child(odd) {
width: 75%;
}
.grid-3-1 > *:nth-child(even) {
width: 25%;
}
@media (max-width: 480px) {
.grid-3-1 > *:nth-child(n) {
width: 100%;
}
}
.grid-1-3 > *:nth-child(odd) {
width: 25%;
}
.grid-1-3 > *:nth-child(even) {
width: 75%;
}
@media (max-width: 480px) {
.grid-1-3 > *:nth-child(n) {
width: 100%;
}
}
.grid-3-2 > *:nth-child(odd) {
width: 60%;
}
.grid-3-2 > *:nth-child(even) {
width: 40%;
}
@media (max-width: 480px) {
.grid-3-2 > *:nth-child(n) {
width: 100%;
}
}
.grid-2-3 > *:nth-child(odd) {
width: 40%;
}
.grid-2-3 > *:nth-child(even) {
width: 60%;
}
@media (max-width: 480px) {
.grid-2-3 > *:nth-child(n) {
width: 100%;
}
}
.grid-4-1 > *:nth-child(odd) {
width: 80%;
}
.grid-4-1 > *:nth-child(even) {
width: 20%;
}
@media (max-width: 480px) {
.grid-4-1 > *:nth-child(n) {
width: 100%;
}
}
.grid-1-4 > *:nth-child(odd) {
width: 20%;
}
.grid-1-4 > *:nth-child(even) {
width: 80%;
}
@media (max-width: 480px) {
.grid-1-4 > *:nth-child(n) {
width: 100%;
}
}
/* ----------------------------- */
/* ==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;
}
/* ---------------------------------- */
/* ==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: 10px;
}
.mam {
margin: 20px;
}
.mal {
margin: 40px;
}
.pas {
padding: 10px;
}
.pam {
padding: 20px;
}
.pal {
padding: 40px;
}
.mtn,
.mt0 {
margin-top: 0;
}
.mts {
margin-top: 10px;
}
.mtm {
margin-top: 20px;
}
.mtl {
margin-top: 40px;
}
.mrn,
.mr0 {
margin-right: 0;
}
.mrs {
margin-right: 10px;
}
.mrm {
margin-right: 20px;
}
.mrl {
margin-right: 40px;
}
.mbn,
.mb0 {
margin-bottom: 0;
}
.mbs {
margin-bottom: 10px;
}
.mbm {
margin-bottom: 20px;
}
.mbl {
margin-bottom: 40px;
}
.mln,
.ml0 {
margin-left: 0;
}
.mls {
margin-left: 10px;
}
.mlm {
margin-left: 20px;
}
.mll {
margin-left: 40px;
}
.ptn,
.pt0 {
padding-top: 0;
}
.pts {
padding-top: 10px;
}
.ptm {
padding-top: 20px;
}
.ptl {
padding-top: 40px;
}
.prn,
.pr0 {
padding-right: 0;
}
.prs {
padding-right: 10px;
}
.prm {
padding-right: 20px;
}
.prl {
padding-right: 40px;
}
.pbn,
.pb0 {
padding-bottom: 0;
}
.pbs {
padding-bottom: 10px;
}
.pbm {
padding-bottom: 20px;
}
.pbl {
padding-bottom: 40px;
}
.pln,
.pl0 {
padding-left: 0;
}
.pls {
padding-left: 10px;
}
.plm {
padding-left: 20px;
}
.pll {
padding-left: 40px;
}
/* ----------------------------- */
/* == quick mobile reset */
/* ----------------------------- */
.btn:focus,
input:focus,
button:focus {
outline: 0;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
}
.btn::-­moz-­focus-­inner,
input::-­moz-­focus-­inner,
button::-­moz-­focus-­inner {
border: 0;
}
/* ----------------------------- */
/* ==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;
}
}
/* ---------------------------------- */
/* ==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,
.medium-ma0 {
margin: 0 !important;
}
}
/* ---------------------------------- */
/* ==Responsive small */
/* ---------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
/* 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;
}
/* 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) {
/* 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;
}
.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,
.tiny-ma0 {
margin: 0 !important;
}
.tiny-pan,
.tiny-pa0 {
padding: 0 !important;
}
/* grid rwd for tiny screens */
.grid > * > * {
width: 100% !important;
}
/* autogrid rwd for tiny screens */
[class*="autogrid"] > * {
width: 100% !important;
}
}
/* quick print reset */
@media print {
* {
background: transparent !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,
.p-like,
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like,
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,
.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 !important;
text-decoration: underline !important;
}
/* displaying URLs */
a[href]:after {
content: " (" attr(href) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
}
/* ----------------------------- */
/* ==misc rules */
/* ----------------------------- */
/* 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;
}
}
/* 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;
}
/* ----------------------------- */
/* ==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 */
.table-alternate {
border: 0;
}
.table-alternate tbody {
border: 1px solid #ccc;
}
.table-alternate thead tr > * + * {
border-left: 0;
}
.table-alternate tbody tr > * + * {
border-left: 1px solid #ccc;
}
/* alternate-vert tables */
.table-alternate-v {
border: 0;
border-right: 1px solid #ccc;
}
.table-alternate-v tr > :first-child {
border-bottom: 0;
}
.table-alternate-v tr > * + * {
border-top: 1px solid #ccc;
}
/* striped tables */
.table-striped tbody tr:nth-child(odd) {
background: #eee;
background: rgba(0, 0, 0, 0.05);
}
/* striped-vert tables */
.table-striped-v tr > :first-child {
background: #eee;
background: rgba(0, 0, 0, 0.05);
}
/* ----------------------------- */
/* ==WordPress reset */
/* ----------------------------- */
/*
Author: Geoffrey Crofte, Alsacréations
Contributors: Automattic, Geoffrey Crofte
Description: Reset styles for WordPress usage of KNACSS
*/
/* ----------------------------- */
/* ==Menus */
/* ----------------------------- */
.comment-navigation,
.paging-navigation,
.post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
/* ----------------------------- */
/* ==Alignments */
/* ----------------------------- */
.alignnone {
margin: .25em 1.5em 1.5em 0;
}
.aligncenter {
clear: both;
display: block;
margin: 1.5em auto;
}
.alignleft {
float: left;
margin: 0 1.5em .25em 0;
}
.alignright {
float: right;
margin: 0 0 .25em 1.5em;
}
/* ----------------------------- */
/* ==Clearings */
/* ----------------------------- */
.entry-content,
.comment-content {
clear: both;
}
.entry-content:after,
.comment-content:after,
.entry-content:before,
.comment-content:before {
content: "";
display: table;
}
/* ----------------------------- */
/* ==Widgets */
/* ----------------------------- */
.widget + .widget {
margin: 1.5em 0 0;
}
.widget select {
max-width: 100%;
}
/* ----------------------------- */
/* ==Posts and pages */
/* ----------------------------- */
/* === 5.1 Posts - post_class === */
/* === 5.2 Pages - body_class === */
/* === 5.3 Posts and Pages - Contents === */
.hentry {
margin: 0 0 1.5em;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/* ----------------------------- */
/* ==Comments */
/* ----------------------------- */
.comment-content a {
word-wrap: break-word;
}
/* ----------------------------- */
/* ==Media */
/* ----------------------------- */
img.wp-smiley {
margin-bottom: 0;
margin-top: 0;
padding: 0;
border: none;
}
/* ----------------------------- */
/* ==Captions */
/* ----------------------------- */
.wp-caption {
max-width: 100%;
margin-bottom: 1.5em;
}
.wp-caption img {
display: block;
margin: 0 auto;
}
.wp-caption-text {
margin: 1em 0;
text-align: center;
}
/* ----------------------------- */
/* ==Galleries */
/* ----------------------------- */
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: top;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/* ----------------------------- */
/* ==own stylesheet */
/* ----------------------------- */
/* Here should go your own CSS styles */
/* You can also link them with a LESS @import */
/* @import "my-styles.less"; */