2 * www.KNACSS.com V2.6c @author: Raphael Goetter, Alsacreations
3 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
6 /* ----------------------------- */
8 /* ----------------------------- */
10 /* base font-size corresponds to 10px and is adapted to rem unit */
15 background-color: #fff;
17 font-family: "Century Gothic", helvetica
, arial
, sans-serif
;
18 font-size: 1.4em; /* equiv 14px */
19 line-height: 1.5; /* adapt to your design */
22 /* font-sizing for content */
23 /* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
38 font-size: 1em; /* equiv 14px */
43 font-size: 1.8571em; /* equiv 26px */
45 line-height: 1.6154em;
46 margin: .8077em 0 0 0;
49 font-size: 1.7143em; /* equiv 24px */
55 font-size: 1.5714em; /* equiv 22px */
58 margin: .9545em 0 0 0;
61 font-size: 1.4286em; /* equiv 20px */
67 font-size: 1.2857em; /* equiv 18px */
69 line-height: 1.1667em;
70 margin: 1.1667em 0 0 0;
73 font-size: 1.1429em; /* equiv 16px */
75 line-height: 1.3125em;
76 margin: 1.3125em 0 0 0;
79 /* alternate font-sizing */
81 font-size: .7143em; /* equiv 10px */
84 font-size: .8571em; /* equiv 12px */
87 font-size: 1.1429em; /* equiv 16px */
90 font-size: 1.2857em; /* equiv 18px */
93 font-size: 1.4286em; /* equiv 20px */
113 white-space: pre-wrap
;
114 font-family: consolas
, 'DejaVu Sans Mono', courier
, monospace
;
128 border: 1px solid
#999;
132 background: rgba
(0,0,0,.04);
140 table
{ margin-bottom: 1.5em; }
142 /* avoid top margins on first content element */
147 blockquote:first-child
,
158 /* avoid margins on nested elements */
167 img
, table
, td
, blockquote
, code
, pre
, textarea
, input
, video
{
171 /* you shall not pass */
172 div
, textarea
, table
, td
, th
, code
, pre
, samp
{
173 word-wrap: break-word
;
174 -webkit-hyphens: auto
;
184 vertical-align: middle
;
186 /* Gmap3 max-width bug fix on images */
188 .gmnoprint img {max-width: none
;}
193 body
> script
{display: none
!important
;}
205 text-decoration: none
;
207 .skip-links a:focus {
211 /* ----------------------------- */
212 /* ==layout and modules */
213 /* ----------------------------- */
215 /* switching box model for all elements */
217 -webkit-box-sizing: border-box
;
218 -moz-box-sizing: border-box
;
219 box-sizing: border-box
;
225 /* module, contains floats (.item is the same) */
231 /* ------------------ */
243 /* blocks that needs to be placed under floats */
250 /* blocks that must contain floats */
259 /* alignments (blocks and inline) */
260 /* ------------------------------ */
278 img
.left
, img
.right
{
282 .center { margin-left: auto
; margin-right: auto
; }
283 .txtleft { text-align: left
; }
284 .txtright { text-align: right
; }
285 .txtcenter { text-align: center
; }
287 /* just inline-block */
289 display: inline-block
;
291 margin-right: -.25em;
294 /* blocks widths (percentage and pixels) */
299 .w33 { width: 33.333%; }
303 .w66 { width: 66.666%; }
308 .w100 { width: 100%; }
310 .w50p { width: 50px; }
311 .w100p { width: 100px; }
312 .w150p { width: 150px; }
313 .w200p { width: 200px; }
314 .w300p { width: 300px; }
315 .w400p { width: 400px; }
316 .w500p { width: 500px; }
317 .w600p { width: 600px; }
318 .w700p { width: 700px; }
319 .w800p { width: 800px; }
320 .w960p { width: 960px; }
321 .mw960p { max-width: 960px; }
325 a,t,r,b,l = all,top,right,bottom,left
326 s,m,l,n = small(10px),medium(20px),large(30px),none(0)
327 source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
329 .m-reset, .ma0 { margin: 0 !important
; }
330 .p-reset, .pa0 { padding: 0 !important
; }
331 .ma1, .mas { margin: 10px !important
; }
332 .ma2, .mam { margin: 20px !important
; }
333 .ma3, .mal { margin: 30px !important
; }
334 .pa1, .pas { padding: 10px; }
335 .pa2, .pam { padding: 20px; }
336 .pa3, .pal { padding: 30px; }
338 .mt0, .mtn { margin-top: 0 !important
; }
339 .mt1, .mts { margin-top: 10px !important
; }
340 .mt2, .mtm { margin-top: 20px !important
; }
341 .mt3, .mtl { margin-top: 30px !important
; }
342 .mr0, .mrn { margin-right: 0; }
343 .mr1, .mrs { margin-right: 10px; }
344 .mr2, .mrm { margin-right: 20px; }
345 .mr3, .mrl { margin-right: 30px; }
346 .mb0, .mbn { margin-bottom: 0 !important
; }
347 .mb1, .mbs { margin-bottom: 10px !important
; }
348 .mb2, .mbm { margin-bottom: 20px !important
; }
349 .mb3, .mbl { margin-bottom: 30px !important
; }
350 .ml0, .mln { margin-left: 0; }
351 .ml1, .mls { margin-left: 10px; }
352 .ml2, .mlm { margin-left: 20px; }
353 .ml3, .mll { margin-left: 30px; }
355 .pt0, .ptn { padding-top: 0; }
356 .pt1, .pts { padding-top: 10px; }
357 .pt2, .ptm { padding-top: 20px; }
358 .pt3, .ptl { padding-top: 30px; }
359 .pr0, .prn { padding-right: 0; }
360 .pr1, .prs { padding-right: 10px; }
361 .pr2, .prm { padding-right: 20px; }
362 .pr3, .prl { padding-right: 30px; }
363 .pb0, .pbn { padding-bottom: 0; }
364 .pb1, .pbs { padding-bottom: 10px; }
365 .pb2, .pbm { padding-bottom: 20px; }
366 .pb3, .pbl { padding-bottom: 30px; }
367 .pl0, .pln { padding-left: 0; }
368 .pl1, .pls { padding-left: 10px; }
369 .pl2, .plm { padding-left: 20px; }
370 .pl3, .pll { padding-left: 30px; }
378 [dir
=rtl
] .visually-hidden
{
383 .desktop-hidden { display: none
; } /* hidden on desktop */
385 /* ----------------------------- */
387 /* ----------------------------- */
389 /* ----------------------------- */
391 /* ----------------------------- */
393 /* ----------------------------- */
395 /* ----------------------------- */
397 /* ----------------------------- */
399 /* ----------------------------- */
409 vertical-align: middle
; /* @bugfix alignment */
410 font-family: inherit
;
414 font-family: inherit
;
417 /* ----------------------------- */
419 /* ----------------------------- */
421 /* ----------------------------- */
423 /* ----------------------------- */
425 /* haslayout for IE6/IE7 */
434 /* inline-block and table-cell for IE6/IE7 */
435 /* warning: .col needs width on IE6/IE7 */
443 width: auto
; /* @bugfix for IE8 */
446 /* Active box-sizing for IE6/IE7 */
447 /* @source https://github.com/Schepp/box-sizing-polyfill */
450 behavior: url(/js/boxsizing.htc);
454 /* ----------------------------- */
456 /* ----------------------------- */
458 /* quick print reset */
468 page-break-inside: avoid
;
474 page-break-after: avoid
;
478 /* orientation iOS font-size fix */
479 @media (orientation: landscape
) and
(max-device-width: 768px) {
482 -webkit-text-size-adjust: 100%;
485 /* ----------------------------- */
487 /* ----------------------------- */
489 /* equal grids with 2% gutter */
490 [class
*=grid
] > * {float: left
; } /* direct childrens are floating */
491 [class
*=grid
] > * + * { margin-left: 2%; } /* here's the gutter */
492 .grid2 > * { width: 49%; }
493 .grid3 > * { width: 32%; }
494 .grid4 > * { width: 23.5%; }
495 .grid5 > * { width: 18.4%; }
496 .grid6 > * { width: 15%; }
498 /* unequal grids (1-2, 2-1, 1-3 and 3-1) */
499 .grid2-1
> *:first-child
,
500 .grid1-2 > * + * { width: 66%; }
501 .grid1-2
> *:first-child
,
502 .grid2-1 > * + * { width: 32%; }
503 .grid1-3
> *:first-child
,
504 .grid3-1 > * + * { width: 23.5%; }
505 .grid3-1
> *:first-child
,
506 .grid1-3 > * + * { width: 74.5%; }
509 /* ----------------------------- */
511 /* ----------------------------- */
517 border-collapse: collapse
;
532 border: 1px solid
#ccc;
535 border-left: 1px solid
#ccc;
541 border-bottom: 1px solid
#ccc;
547 /* alternate tables */
548 .alternate { border: 0; }
550 border: 1px solid
#ccc;
552 .alternate thead tr > * + * {
555 .alternate tbody tr > * + * {
556 border-left: 1px solid
#ccc;
559 /* alternate-vert tables */
562 border-right: 1px solid
#ccc;
564 .alternate-vert tr > :first-child {
567 .alternate-vert tr > * + * {
568 border-top: 1px solid
#ccc;
572 .striped tbody tr:nth-child(odd) {
574 background: rgba
(0, 0, 0, .05);
577 /* striped-vert tables */
578 .striped-vert tr > :first-child {
580 background: rgba
(0, 0, 0, .05);
582 /* ----------------------------- */
584 /* ----------------------------- */
586 /* thanks to HTML5boilerplate, github.com/nathansmith/formalize and www.sitepen.com */
590 .btn { display: inline-block
; }
603 display: inline-block
;
604 vertical-align: middle
;
614 font-family: "Century Gothic", helvetica
, arial
, sans-serif
;
617 vertical-align: middle
;
620 overflow: auto
; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
627 input
[type
="button"],
629 input
[type
="submit"] {
631 -webkit-appearance: button
; /* clickable input types in iOS */
632 *overflow: visible
; /* Corrects inner spacing displayed oddly in IE7 */
634 input
[type
="checkbox"],
635 input
[type
="radio"] {
636 padding: 0; /* Corrects excess space around these inputs in IE8/9 */
637 *width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */
639 input
[type
="search"] { -webkit-appearance: textfield
; }
641 /* if select styling bugs on WebKit */
642 /* select { -webkit-appearance: none; } */
644 /* 'x' appears on right of search input when text is entered. This removes it */
645 input
[type
="search"]::-webkit-search-decoration
,
646 input
[type
="search"]::-webkit-search-cancel-button
,
647 input
[type
="search"]::-webkit-search-results-button
,
648 input
[type
="search"]::-webkit-search-results-decoration
{
651 ::-webkit-input-placeholder
{ color: #777; }
652 input:-moz-placeholder
,
653 textarea:-moz-placeholder
{ color: #777; }
655 /* Removes inner padding and border in FF3+ */
656 button::-moz-focus-inner
,
657 input
[type
='button']::-moz-focus-inner
,
658 input
[type
='reset']::-moz-focus-inner
,
659 input
[type
='submit']::-moz-focus-inner
{
664 /* ----------------------------- */
665 /* ==icons and bullets */
666 /* ----------------------------- */
668 .icon {display: inline-block
;}
673 .icon.after > li:after {
675 display: inline-block
;
676 vertical-align: middle
;
677 position: relative
; top: -.1em;
679 font: 1.4em/1 sans-serif
;
681 text-shadow: 1px 1px 0 rgba
(0,0,0,.1);
685 @media (min-device-width: 768px) {
689 .icon.after > li:after {
690 font: 1em/0.6 sans-serif
;
691 -webkit-transform: rotateZ
(0.05deg);
696 .icon.after > li:after {
700 ul
.icon
{display: block
;}
701 ul
.icon
> li
{list-style: none
;}
703 ul
.icon
.after:after
{content:""}
705 .icon.after > li:before {content: "" !important
}
708 .icon-rate
> li:before
,
709 .icon-rate
.after:after
,
710 .icon-rate.after > li:after {
714 .icon-unrate
> li:before
,
715 .icon-unrate
.after:after
,
716 .icon-unrate.after > li:after {
720 .icon-check
> li:before
,
721 .icon-check
.after:after
,
722 .icon-check.after > li:after {
725 .icon-uncheck:before
,
726 .icon-uncheck
> li:before
,
727 .icon-uncheck
.after:after
,
728 .icon-uncheck.after > li:after {
732 .icon-cloud
> li:before
,
733 .icon-cloud
.after:after
,
734 .icon-cloud.after > li:after {
738 .icon-dl
> li:before
,
739 .icon-dl
.after:after
,
740 .icon-dl.after > li:after {
745 .icon-cross
> li:before
,
746 .icon-cross
.after:after
,
747 .icon-cross.after > li:after {
752 .icon-arrow1
> li:before
,
753 .icon-arrow1
.after:after
,
754 .icon-arrow1.after > li:after {
756 position: relative
; top: -0.15em;
759 .icon-arrow2
> li:before
,
760 .icon-arrow2
.after:after
,
761 .icon-arrow2.after > li:after {
765 .icon-arrow3
> li:before
,
766 .icon-arrow3
.after:after
,
767 .icon-arrow3.after > li:after {
770 .icon-bracket1:before
,
771 .icon-bracket1
> li:before
,
772 .icon-bracket1
.after:after
,
773 .icon-bracket1.after > li:after {
777 position: relative
; top: -0.15em;
779 .icon-bracket2:before
,
780 .icon-bracket2
> li:before
,
781 .icon-bracket2
.after:after
,
782 .icon-bracket2.after > li:after {
786 position: relative
; top: -0.15em;
789 .icon-up
> li:before
,
790 .icon-up
.after:after
,
791 .icon-up.after > li:after {
795 .icon-down
> li:before
,
796 .icon-down
.after:after
,
797 .icon-down.after > li:after {
801 .icon-bull
> li:before
,
802 .icon-bull
.after:after
,
803 .icon-bull.after > li:after {
809 .icon-bull2
> li:before
,
810 .icon-bull2
.after:after
,
811 .icon-bull2.after > li:after {
816 .icon-bull3
> li:before
,
817 .icon-bull3
.after:after
,
818 .icon-bull3.after > li:after {
824 .icon-nav
> li:before
,
825 .icon-nav
.after:after
,
826 .icon-nav.after > li:after {
831 .icon-losange:before
,
832 .icon-losange
> li:before
,
833 .icon-losange
.after:after
,
834 .icon-losange.after > li:after {
838 .icon-asteri
> li:before
,
839 .icon-asteri
.after:after
,
840 .icon-asteri.after > li:after {
845 .icon-mail
> li:before
,
846 .icon-mail
.after:after
,
847 .icon-mail.after > li:after {
853 ol
.styled
{counter-reset: styled
;}
855 list-style-type: none
;
856 counter-increment: styled
;
859 ol
.styled
> li:before
{
860 content: counter
(styled
);
861 display: inline-block
;
862 width: 1em; height: 1em;
866 vertical-align: middle
;
867 background: rgba
(0,0,0,.5);
874 /* ----------------------------- */
875 /* ==desktop and retina medias */
876 /* ----------------------------- */
878 @media (min-width: 641px) {
879 /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
881 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
882 /* Style adjustments for retina devices */
885 /* ---------------------------------- */
886 /* ==Responsive large / medium / tiny */
887 /* ---------------------------------- */
889 @media (min-width: 1280px) {
891 /* layouts for large (l) screens */
893 .tablet-hidden { display: none
!important
; }
894 .large-visible { display: block
!important
; }
895 .large-no-float {float: none
; }
897 display: inline-block
;
904 width: 100% !important
;
911 /* widths for large (l) screens */
912 .large-w25 { width: 25% !important
; }
913 .large-w33 { width: 33.3333% !important
; }
914 .large-w50 { width: 50% !important
; }
915 .large-w66 { width: 66.6666% !important
; }
916 .large-w75 { width: 75% !important
; }
918 display: block
!important
;
919 float: none
!important
;
920 clear: none
!important
;
921 width: auto
!important
;
922 margin-left: 0 !important
;
923 margin-right: 0 !important
;
927 /* margins for large (l) screens */
929 .large-man { margin: 0 !important
; }
932 @media (max-width: 768px) {
934 /* quick tablet reset */
947 .medium-wauto { width: auto
; }
949 /* layouts for medium (m) screens */
951 .tablet-hidden { display: none
!important
; }
952 .medium-visible { display: block
!important
; }
953 .medium-no-float {float: none
; }
955 display: inline-block
;
962 width: 100% !important
;
969 /* widths for medium (m) screens */
970 .medium-w25 { width: 25% !important
; }
971 .medium-w33 { width: 33.3333% !important
; }
972 .medium-w50 { width: 50% !important
; }
973 .medium-w66 { width: 66.6666% !important
; }
974 .medium-w75 { width: 75% !important
; }
976 display: block
!important
;
977 float: none
!important
;
978 clear: none
!important
;
979 width: auto
!important
;
980 margin-left: 0 !important
;
981 margin-right: 0 !important
;
984 /* margins for medium (m) screens */
986 .medium-man { margin: 0 !important
; }
988 /* Responsive grids */
989 .grid4 > * {width: 49% !important
; }
990 .grid4 > :first-child + * + * {margin-left: 0 !important
;}
991 .grid6 > * {width: 32% !important
; }
992 .grid6 > :first-child + * + * + * {margin-left: 0 !important
;}
995 @media (max-width: 640px) {
997 /* quick smartphone reset */
1002 display: block
!important
;
1003 float: none
!important
;
1004 clear: none
!important
;
1005 width: auto
!important
;
1006 margin-left: 0 !important
;
1007 margin-right: 0 !important
;
1020 display: block
!important
;
1021 width: 100% !important
;
1024 /* layouts for tiny (t) screens */
1026 .phone-hidden { display: none
!important
; }
1027 .tiny-visible { display: block
!important
; }
1028 .tiny-no-float {float: none
;}
1030 display: inline-block
;
1032 vertical-align: top
;
1036 table-layout: fixed
;
1037 width: 100% !important
;
1040 display: table-cell
;
1041 vertical-align: top
;
1045 display: block
!important
;
1046 width: auto
!important
;
1047 text-align: left
!important
;
1049 thead
{ display: none
; }
1051 /* widths for tiny (t) screens */
1052 .tiny-w25 { width: 25% !important
; }
1053 .tiny-w33 { width: 33.3333% !important
; }
1054 .tiny-w50 { width: 50% !important
; }
1055 .tiny-w66 { width: 66.6666% !important
; }
1056 .tiny-w75 { width: 75% !important
; }
1058 display: block
!important
;
1059 float: none
!important
;
1060 clear: none
!important
;
1061 width: auto
!important
;
1062 margin-left: 0 !important
;
1063 margin-right: 0 !important
;
1066 /* margins for tiny (t) screens */
1068 .tiny-man { margin: 0 !important
; }