aboutsummaryrefslogtreecommitdiffhomepage
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rwxr-xr-xcss/index.html0
-rw-r--r--css/knacss.css1070
-rwxr-xr-xcss/reset.css35
-rw-r--r--css/style.css35
-rwxr-xr-xcss/typography.css85
5 files changed, 1225 insertions, 0 deletions
diff --git a/css/index.html b/css/index.html
new file mode 100755
index 00000000..e69de29b
--- /dev/null
+++ b/css/index.html
diff --git a/css/knacss.css b/css/knacss.css
new file mode 100644
index 00000000..56e91f9d
--- /dev/null
+++ b/css/knacss.css
@@ -0,0 +1,1070 @@
1/*
2* www.KNACSS.com V2.6c @author: Raphael Goetter, Alsacreations
3* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
4*/
5
6/* ----------------------------- */
7/* ==reset */
8/* ----------------------------- */
9
10/* base font-size corresponds to 10px and is adapted to rem unit */
11html {
12 font-size: 62.5%;
13}
14body {
15 background-color: #fff;
16 color: #000;
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 */
20}
21
22/* font-sizing for content */
23/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
24p,
25ul,
26ol,
27dl,
28blockquote,
29pre,
30td,
31th,
32label,
33textarea,
34caption,
35details,
36figure,
37hgroup {
38 font-size: 1em; /* equiv 14px */
39 line-height: 1.5;
40 margin: .75em 0 0;
41}
42h1, .h1-like {
43 font-size: 1.8571em; /* equiv 26px */
44 font-weight: normal;
45 line-height: 1.6154em;
46 margin: .8077em 0 0 0;
47}
48h2, .h2-like {
49 font-size: 1.7143em; /* equiv 24px */
50 font-weight: normal;
51 line-height: 1.75em;
52 margin: .875em 0 0 0;
53}
54h3, .h3-like {
55 font-size: 1.5714em; /* equiv 22px */
56 font-weight: normal;
57 line-height: 1.909em;
58 margin: .9545em 0 0 0;
59}
60h4, .h4-like {
61 font-size: 1.4286em; /* equiv 20px */
62 font-weight: normal;
63 line-height: 1.05em;
64 margin: 1.05em 0 0 0;
65}
66h5, .h5-like {
67 font-size: 1.2857em; /* equiv 18px */
68 font-weight: normal;
69 line-height: 1.1667em;
70 margin: 1.1667em 0 0 0;
71}
72h6, .h6-like {
73 font-size: 1.1429em; /* equiv 16px */
74 font-weight: normal;
75 line-height: 1.3125em;
76 margin: 1.3125em 0 0 0;
77}
78
79/* alternate font-sizing */
80.smaller {
81 font-size: .7143em; /* equiv 10px */
82}
83.small {
84 font-size: .8571em; /* equiv 12px */
85}
86.big {
87 font-size: 1.1429em; /* equiv 16px */
88}
89.bigger {
90 font-size: 1.2857em; /* equiv 18px */
91}
92.biggest {
93 font-size: 1.4286em; /* equiv 20px */
94}
95
96/* soft reset */
97html,
98body,
99textarea,
100figure,
101label {
102 margin: 0;
103 padding: 0;
104}
105ul,
106ol {
107 padding-left: 2em;
108}
109code,
110pre,
111samp,
112kbd {
113 white-space: pre-wrap;
114 font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
115 line-height: 1em;
116}
117code, kbd, mark {
118 border-radius: 2px;
119}
120em {
121 font-style: italic;
122}
123strong {
124 font-weight: bold;
125}
126kbd {
127 padding: 0 2px;
128 border: 1px solid #999;
129}
130code {
131 padding: 2px 4px;
132 background: rgba(0,0,0,.04);
133 color: #b11;
134}
135mark {
136 padding:2px 4px;
137 background: #ff0;
138}
139
140table { margin-bottom: 1.5em; }
141
142/* avoid top margins on first content element */
143p:first-child,
144ul:first-child,
145ol:first-child,
146dl:first-child,
147blockquote:first-child,
148pre:first-child,
149h1:first-child,
150h2:first-child,
151h3:first-child,
152h4:first-child,
153h5:first-child,
154h6:first-child {
155 margin-top: 0;
156}
157
158/* avoid margins on nested elements */
159li p,
160li ul,
161li ol {
162 margin-top: 0;
163 margin-bottom: 0;
164}
165
166/* max values */
167img, table, td, blockquote, code, pre, textarea, input, video {
168 max-width: 100%;
169}
170
171/* you shall not pass */
172div, textarea, table, td, th, code, pre, samp {
173 word-wrap: break-word;
174 -webkit-hyphens: auto;
175 -moz-hyphens: auto;
176 -ms-hyphens: auto;
177 -o-hyphens: auto;
178 hyphens: auto;
179}
180
181/* pictures */
182img {
183 height: auto;
184 vertical-align: middle;
185}
186/* Gmap3 max-width bug fix on images */
187#map_canvas img,
188.gmnoprint img {max-width: none;}
189
190a img { border: 0; }
191
192/* scripts */
193body > script {display: none !important;}
194
195/* skip-links */
196.skip-links {
197 position: absolute;
198}
199.skip-links a {
200 position: absolute;
201 left: -7000px;
202 padding: 0.5em;
203 background: #000;
204 color:#fff;
205 text-decoration: none;
206}
207.skip-links a:focus {
208 position: static;
209}
210
211/* ----------------------------- */
212/* ==layout and modules */
213/* ----------------------------- */
214
215/* switching box model for all elements */
216* {
217 -webkit-box-sizing: border-box;
218 -moz-box-sizing: border-box;
219 box-sizing: border-box;
220}
221
222/* float layout */
223/* ----------- */
224
225/* module, contains floats (.item is the same) */
226.mod, .item {
227 overflow: hidden;
228}
229
230/* table layout */
231/* ------------------ */
232.row {
233 display: table;
234 table-layout: fixed;
235 width: 100%;
236}
237.row > *,
238.col {
239 display: table-cell;
240 vertical-align: top;
241}
242
243/* blocks that needs to be placed under floats */
244.clear,
245.line,
246.row {
247 clear: both;
248}
249
250/* blocks that must contain floats */
251.clearfix:after,
252.line:after,
253.mod:after {
254 content: "";
255 display: table;
256 clear: both;
257}
258
259/* alignments (blocks and inline) */
260/* ------------------------------ */
261
262/* left elements */
263.left {
264 float: left;
265}
266img.left {
267 margin-right: 1em;
268}
269
270/* right elements */
271.right {
272 float: right;
273}
274img.right {
275 margin-left: 1em;
276}
277
278img.left, img.right {
279 margin-bottom: 5px;
280}
281
282.center { margin-left: auto; margin-right: auto; }
283.txtleft { text-align: left; }
284.txtright { text-align: right; }
285.txtcenter { text-align: center; }
286
287/* just inline-block */
288.inbl {
289 display: inline-block;
290 vertical-align: top;
291 margin-right: -.25em;
292}
293
294/* blocks widths (percentage and pixels) */
295.w10 { width: 10%; }
296.w20 { width: 20%; }
297.w25 { width: 25%; }
298.w30 { width: 30%; }
299.w33 { width: 33.333%; }
300.w40 { width: 40%; }
301.w50 { width: 50%; }
302.w60 { width: 60%; }
303.w66 { width: 66.666%; }
304.w70 { width: 70%; }
305.w75 { width: 75%; }
306.w80 { width: 80%; }
307.w90 { width: 90%; }
308.w100 { width: 100%; }
309
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; }
322
323/* spacing helpers
324p,m = padding,margin
325a,t,r,b,l = all,top,right,bottom,left
326s,m,l,n = small(10px),medium(20px),large(30px),none(0)
327source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
328*/
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; }
337
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; }
354
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; }
371
372/* hiding content */
373.visually-hidden {
374 position: absolute;
375 left: -7000px;
376 overflow: hidden;
377}
378[dir=rtl] .visually-hidden {
379 left: auto;
380 right: -7000px;
381}
382
383.desktop-hidden { display: none; } /* hidden on desktop */
384
385/* ----------------------------- */
386/* ==header */
387/* ----------------------------- */
388
389/* ----------------------------- */
390/* ==sidebar */
391/* ----------------------------- */
392
393/* ----------------------------- */
394/* ==footer */
395/* ----------------------------- */
396
397/* ----------------------------- */
398/* ==forms */
399/* ----------------------------- */
400form,
401fieldset {
402 border: none;
403}
404input,
405button,
406select,
407label,
408.btn {
409 vertical-align: middle; /* @bugfix alignment */
410 font-family: inherit;
411}
412textarea {
413 resize: vertical;
414 font-family: inherit;
415}
416
417/* ----------------------------- */
418/* ==main */
419/* ----------------------------- */
420
421/* ----------------------------- */
422/* ==iefix */
423/* ----------------------------- */
424
425/* haslayout for IE6/IE7 */
426.ie67 .clearfix,
427.ie67 .line,
428.ie67 .mod,
429.ie67 .row,
430.ie67 .col {
431 zoom: 1;
432}
433
434/* inline-block and table-cell for IE6/IE7 */
435/* warning: .col needs width on IE6/IE7 */
436.ie67 .btn,
437.ie67 .col,
438.ie67 .inbl {
439 display: inline;
440 zoom: 1;
441}
442.ie8 img {
443 width: auto; /* @bugfix for IE8 */
444}
445
446/* Active box-sizing for IE6/IE7 */
447/* @source https://github.com/Schepp/box-sizing-polyfill */
448/*
449.ie67 * {
450 behavior: url(/js/boxsizing.htc);
451}
452*/
453
454/* ----------------------------- */
455/* ==print */
456/* ----------------------------- */
457
458/* quick print reset */
459@media print {
460 p,
461 blockquote {
462 orphans: 2;
463 widows: 2;
464 }
465 blockquote,
466 ul,
467 ol {
468 page-break-inside: avoid;
469 }
470 h1,
471 h2,
472 h3,
473 caption {
474 page-break-after: avoid;
475 }
476}
477
478/* orientation iOS font-size fix */
479@media (orientation: landscape) and (max-device-width: 768px) {
480 html,
481 body {
482 -webkit-text-size-adjust: 100%;
483 }
484}
485/* ----------------------------- */
486/* ==grids */
487/* ----------------------------- */
488
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%; }
497
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%; }
507
508
509/* ----------------------------- */
510/* ==tables */
511/* ----------------------------- */
512
513table,
514.table {
515 max-width : 100%;
516 table-layout: fixed;
517 border-collapse: collapse;
518 vertical-align: top;
519}
520table {
521 width: 100%;
522}
523.table {
524 display: table;
525}
526caption {
527 padding: 10px;
528 color: #555;
529 font-style: italic;
530}
531table {
532 border: 1px solid #ccc;
533}
534tr > * + * {
535 border-left: 1px solid #ccc;
536}
537th,
538td {
539 padding: .3em .8em;
540 text-align: left;
541 border-bottom: 1px solid #ccc;
542}
543td {
544 color: #333;
545}
546
547/* alternate tables */
548.alternate { border: 0; }
549.alternate tbody {
550 border: 1px solid #ccc;
551}
552.alternate thead tr > * + * {
553 border-left: 0;
554}
555.alternate tbody tr > * + * {
556 border-left: 1px solid #ccc;
557}
558
559/* alternate-vert tables */
560.alternate-vert {
561 border: 0;
562 border-right: 1px solid #ccc;
563}
564.alternate-vert tr > :first-child {
565 border-bottom: 0;
566}
567.alternate-vert tr > * + * {
568 border-top: 1px solid #ccc;
569}
570
571/* striped tables */
572.striped tbody tr:nth-child(odd) {
573 background: #eee;
574 background: rgba(0, 0, 0, .05);
575}
576
577/* striped-vert tables */
578.striped-vert tr > :first-child {
579 background: #eee;
580 background: rgba(0, 0, 0, .05);
581}
582/* ----------------------------- */
583/* ==forms */
584/* ----------------------------- */
585
586/* thanks to HTML5boilerplate, github.com/nathansmith/formalize and www.sitepen.com */
587
588
589/* buttons */
590.btn { display: inline-block; }
591
592.btn.alternate {}
593.btn.highlight {}
594.login {}
595.logout {}
596.primary {}
597.warning {}
598.error {}
599.success {}
600
601/* forms items */
602label {
603 display: inline-block;
604 vertical-align: middle;
605 cursor: pointer;
606}
607legend {
608 border: 0;
609 white-space: normal;
610}
611button,
612input,
613select {
614 font-family: "Century Gothic", helvetica, arial, sans-serif;
615 font-size: 100%;
616 margin: 0;
617 vertical-align: middle;
618}
619textarea {
620 overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
621 min-height: 5em;
622 font-size: 1.75em;
623 vertical-align: top;
624 resize: vertical;
625}
626button,
627input[type="button"],
628input[type="reset"],
629input[type="submit"] {
630 cursor: pointer;
631 -webkit-appearance: button; /* clickable input types in iOS */
632 *overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */
633}
634input[type="checkbox"],
635input[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 */
638}
639input[type="search"] { -webkit-appearance: textfield; }
640
641/* if select styling bugs on WebKit */
642/* select { -webkit-appearance: none; } */
643
644/* 'x' appears on right of search input when text is entered. This removes it */
645input[type="search"]::-webkit-search-decoration,
646input[type="search"]::-webkit-search-cancel-button,
647input[type="search"]::-webkit-search-results-button,
648input[type="search"]::-webkit-search-results-decoration {
649 display: none;
650}
651::-webkit-input-placeholder { color: #777; }
652input:-moz-placeholder,
653textarea:-moz-placeholder { color: #777; }
654
655/* Removes inner padding and border in FF3+ */
656button::-moz-focus-inner,
657input[type='button']::-moz-focus-inner,
658input[type='reset']::-moz-focus-inner,
659input[type='submit']::-moz-focus-inner {
660 border: 0;
661 padding: 0;
662}
663
664/* ----------------------------- */
665/* ==icons and bullets */
666/* ----------------------------- */
667
668.icon {display: inline-block;}
669
670.icon:before,
671.icon > li:before,
672.icon.after:after,
673.icon.after > li:after {
674 content: "";
675 display: inline-block;
676 vertical-align: middle;
677 position: relative; top: -.1em;
678 margin: 0 0.3em 0 0;
679 font: 1.4em/1 sans-serif;
680 color: #000;
681 text-shadow: 1px 1px 0 rgba(0,0,0,.1);
682 speak: none;
683}
684
685@media (min-device-width: 768px) {
686 .icon:before,
687 .icon > li:before,
688 .icon.after:after,
689 .icon.after > li:after {
690 font: 1em/0.6 sans-serif;
691 -webkit-transform: rotateZ(0.05deg);
692 }
693}
694
695.icon.after:after,
696.icon.after > li:after {
697 margin: 0 0 0 8px;
698}
699
700ul.icon {display: block;}
701ul.icon > li {list-style: none;}
702ul.icon:before,
703ul.icon.after:after {content:""}
704.icon.after:before,
705.icon.after > li:before {content: "" !important}
706
707.icon-rate:before,
708.icon-rate > li:before,
709.icon-rate.after:after,
710.icon-rate.after > li:after {
711 content: "\2605";
712}
713.icon-unrate:before,
714.icon-unrate > li:before,
715.icon-unrate.after:after,
716.icon-unrate.after > li:after {
717 content: "\2606";
718}
719.icon-check:before,
720.icon-check > li:before,
721.icon-check.after:after,
722.icon-check.after > li:after {
723 content: "\2713";
724}
725.icon-uncheck:before,
726.icon-uncheck > li:before,
727.icon-uncheck.after:after,
728.icon-uncheck.after > li:after {
729 content: "\2717";
730}
731.icon-cloud:before,
732.icon-cloud > li:before,
733.icon-cloud.after:after,
734.icon-cloud.after > li:after {
735 content: "\2601";
736}
737.icon-dl:before,
738.icon-dl > li:before,
739.icon-dl.after:after,
740.icon-dl.after > li:after {
741 content: "\21E3";
742 font-weight: bold;
743}
744.icon-cross:before,
745.icon-cross > li:before,
746.icon-cross.after:after,
747.icon-cross.after > li:after {
748 content: "\2716";
749 font-weight: bold;
750}
751.icon-arrow1:before,
752.icon-arrow1 > li:before,
753.icon-arrow1.after:after,
754.icon-arrow1.after > li:after {
755 content: "\2192";
756 position: relative; top: -0.15em;
757}
758.icon-arrow2:before,
759.icon-arrow2 > li:before,
760.icon-arrow2.after:after,
761.icon-arrow2.after > li:after {
762 content: "\279E";
763}
764.icon-arrow3:before,
765.icon-arrow3 > li:before,
766.icon-arrow3.after:after,
767.icon-arrow3.after > li:after {
768 content: "\279A";
769}
770.icon-bracket1:before,
771.icon-bracket1 > li:before,
772.icon-bracket1.after:after,
773.icon-bracket1.after > li:after {
774 content: "\2039";
775 font-weight: bold;
776 font-size: 1.6em;
777 position: relative; top: -0.15em;
778}
779.icon-bracket2:before,
780.icon-bracket2 > li:before,
781.icon-bracket2.after:after,
782.icon-bracket2.after > li:after {
783 content: "\203A";
784 font-weight: bold;
785 font-size: 1.6em;
786 position: relative; top: -0.15em;
787}
788.icon-up:before,
789.icon-up > li:before,
790.icon-up.after:after,
791.icon-up.after > li:after {
792 content: "\25B2";
793}
794.icon-down:before,
795.icon-down > li:before,
796.icon-down.after:after,
797.icon-down.after > li:after {
798 content: "\25BC";
799}
800.icon-bull:before,
801.icon-bull > li:before,
802.icon-bull.after:after,
803.icon-bull.after > li:after {
804 content: "\2022";
805 font-size: 1.2em;
806 top: -0.05em;
807}
808.icon-bull2:before,
809.icon-bull2 > li:before,
810.icon-bull2.after:after,
811.icon-bull2.after > li:after {
812 content: "\25E6";
813 top: -0.05em;
814}
815.icon-bull3:before,
816.icon-bull3 > li:before,
817.icon-bull3.after:after,
818.icon-bull3.after > li:after {
819 content: "\2023";
820 font-size: 1.6em;
821 top: -0.05em;
822}
823.icon-nav:before,
824.icon-nav > li:before,
825.icon-nav.after:after,
826.icon-nav.after > li:after {
827 content: "\2261";
828 font-weight: bold;
829 font-size: 1.6em;
830}
831.icon-losange:before,
832.icon-losange > li:before,
833.icon-losange.after:after,
834.icon-losange.after > li:after {
835 content: "\25C6";
836}
837.icon-asteri:before,
838.icon-asteri > li:before,
839.icon-asteri.after:after,
840.icon-asteri.after > li:after {
841 content: "\2731";
842 font-weight: bold;
843}
844.icon-mail:before,
845.icon-mail > li:before,
846.icon-mail.after:after,
847.icon-mail.after > li:after {
848 content: "\2709";
849 font-size: 1.6em;
850 top: -.05em;
851}
852
853ol.styled {counter-reset: styled;}
854ol.styled > li {
855 list-style-type: none;
856 counter-increment: styled;
857 margin-bottom: .3em;
858}
859ol.styled > li:before {
860 content: counter(styled);
861 display: inline-block;
862 width: 1em; height: 1em;
863 line-height: 1;
864 padding: 2px;
865 margin-right: .4em;
866 vertical-align: middle;
867 background: rgba(0,0,0,.5);
868 border-radius: 50%;
869 font-size: .9em;
870 text-align: center;
871 text-indent: -0.1em;
872 color: white;
873}
874/* ----------------------------- */
875/* ==desktop and retina medias */
876/* ----------------------------- */
877
878@media (min-width: 641px) {
879/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
880}
881@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
882/* Style adjustments for retina devices */
883}
884
885/* ---------------------------------- */
886/* ==Responsive large / medium / tiny */
887/* ---------------------------------- */
888
889@media (min-width: 1280px) {
890
891 /* layouts for large (l) screens */
892 .large-hidden,
893 .tablet-hidden { display: none !important; }
894 .large-visible { display: block !important; }
895 .large-no-float {float: none; }
896 .large-inbl {
897 display: inline-block;
898 float: none;
899 vertical-align: top;
900 }
901 .large-row {
902 display: table;
903 table-layout: fixed;
904 width: 100% !important;
905 }
906 .large-col {
907 display: table-cell;
908 vertical-align: top;
909 }
910
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; }
917 .large-w100 {
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;
924 border: 0;
925 }
926
927 /* margins for large (l) screens */
928 .large-ma0,
929 .large-man { margin: 0 !important; }
930}
931
932@media (max-width: 768px) {
933
934 /* quick tablet reset */
935 .w60,
936 .w66,
937 .w70,
938 .w75,
939 .w80,
940 .w90,
941 .w100,
942 .w600p,
943 .w700p,
944 .w800p,
945 .w960p,
946 .mw960p,
947 .medium-wauto { width: auto; }
948
949 /* layouts for medium (m) screens */
950 .medium-hidden,
951 .tablet-hidden { display: none !important; }
952 .medium-visible { display: block !important; }
953 .medium-no-float {float: none; }
954 .medium-inbl {
955 display: inline-block;
956 float: none;
957 vertical-align: top;
958 }
959 .medium-row {
960 display: table;
961 table-layout: fixed;
962 width: 100% !important;
963 }
964 .medium-col {
965 display: table-cell;
966 vertical-align: top;
967 }
968
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; }
975 .medium-w100 {
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;
982 border: 0;
983 }
984 /* margins for medium (m) screens */
985 .medium-ma0,
986 .medium-man { margin: 0 !important; }
987
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;}
993}
994
995@media (max-width: 640px) {
996
997 /* quick smartphone reset */
998 .mod,
999 .item,
1000 .col,
1001 fieldset {
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;
1008 border: 0;
1009 }
1010 .w30,
1011 .w33,
1012 .w40,
1013 .w50,
1014 .w300p,
1015 .w400p,
1016 .w500p {
1017 width: auto;
1018 }
1019 .row {
1020 display: block !important;
1021 width: 100% !important;
1022 }
1023
1024 /* layouts for tiny (t) screens */
1025 .tiny-hidden,
1026 .phone-hidden { display: none !important; }
1027 .tiny-visible { display: block !important; }
1028 .tiny-no-float {float: none;}
1029 .tiny-inbl {
1030 display: inline-block;
1031 float: none;
1032 vertical-align: top;
1033 }
1034 .tiny-row {
1035 display: table;
1036 table-layout: fixed;
1037 width: 100% !important;
1038 }
1039 .tiny-col {
1040 display: table-cell;
1041 vertical-align: top;
1042 }
1043 th,
1044 td {
1045 display: block !important;
1046 width: auto !important;
1047 text-align: left !important;
1048 }
1049 thead { display: none; }
1050
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; }
1057 .tiny-w100 {
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;
1064 border: 0;
1065 }
1066 /* margins for tiny (t) screens */
1067 .tiny-ma0,
1068 .tiny-man { margin: 0 !important; }
1069}
1070
diff --git a/css/reset.css b/css/reset.css
new file mode 100755
index 00000000..530ddc3d
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,35 @@
1html, body, div, span, object, iframe,
2h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3a, abbr, acronym, address, code,
4del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
5fieldset, form, label, legend,
6table, caption, tbody, tfoot, thead, tr, th, td {
7 margin: 0;
8 padding: 0;
9 border: 0;
10 font-weight: inherit;
11 font-style: inherit;
12 font-size: 100%;
13 font-family: inherit;
14 vertical-align: baseline;
15}
16
17
18/* Tables still need 'cellspacing="0"' in the markup. */
19table { border-collapse: separate; border-spacing: 0; }
20caption, th, td { text-align: left; font-weight: normal; }
21table, td, th { vertical-align: middle; }
22
23/* Remove possible quote marks (") from <q>, <blockquote>. */
24blockquote:before, blockquote:after, q:before, q:after { content: ""; }
25blockquote, q { quotes: "" ""; }
26
27/* Remove annoying border on linked images. */
28a img { border: none; }
29
30
31body {
32
33 margin: 10px;
34}
35
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..41a61780
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,35 @@
1body {
2 color: #222222;
3 font: 20px/1.3em Palatino,Georgia,serif;
4 background-color: #e6e6e6;
5}
6
7a, a:hover, a:visited {
8 color: #000;
9}
10header {
11 text-align: center;
12}
13
14#main {
15 margin: 0 auto;
16}
17
18#main ul#links {
19 padding: 0;
20 list-style-type: none;
21 text-align: center;
22}
23
24#main ul#links li {
25 display: inline;
26 padding: 15px;
27}
28
29#main a.tool {
30 text-decoration: none;
31}
32
33footer {
34 text-align: right;
35} \ No newline at end of file
diff --git a/css/typography.css b/css/typography.css
new file mode 100755
index 00000000..e41db096
--- /dev/null
+++ b/css/typography.css
@@ -0,0 +1,85 @@
1
2body {
3 font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0;
4 font-size-adjust:none;
5 font-style:normal;
6 font-variant:normal;
7 font-weight:normal;
8 padding: 15px;
9 margin: 15px auto;
10}
11
12article {
13 border: 3px solid grey;
14 max-width:700px;
15 margin: 15px auto;
16 padding: 15px;
17}
18
19footer {
20 border: 1px solid black;
21 padding: 15px;
22 margin: 15px auto;
23}
24
25p { padding:0 0 0.8125em 0; color:#111; font-weight:300;}
26
27p + p { text-indent:1.625em;}
28
29img { display: block; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; }
30
31p > img { display: inline-block; margin: 0; }
32
33h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; }
34h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; }
35
36
37h1 { font-size: 2.125em; margin-bottom: 0.765em; line-height: 1.5em;}
38h2 { font-size: 1.9em; margin-bottom: 0.855em; }
39h3 { font-size: 1.7em; margin-bottom: 0.956em; }
40h4 { font-size: 1.4em; margin-bottom: 1.161em; }
41h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; }
42
43
44
45ul{list-style-position:outside;}
46li ul,
47li ol { margin:0 1.625em; }
48ul, ol { margin: 0 0 1.625em 0; }
49
50
51dl { margin: 0 0 1.625em 0; }
52dl dt { font-weight: bold; }
53dl dd { margin-left: 1.625em; }
54
55a { color:#005AF2; text-decoration:none; }
56a:hover { text-decoration: underline; }
57
58
59table { margin-bottom:1.625em; border-collapse: collapse; }
60th { font-weight:bold; }
61tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; }
62tfoot { font-style: italic; }
63caption { text-align:center; font-family:Georgia, serif; }
64
65
66abbr, acronym { border-bottom:1px dotted #000; }
67address { margin-top:1.625em; font-style: italic; }
68del {color:#000;}
69
70
71blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; }
72blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */
73blockquote > p {padding:0; margin:0; }
74
75strong { font-weight: bold; }
76em, dfn { font-style: italic; }
77dfn { font-weight: bold; }
78pre, code { margin: 1.625em 0; white-space: pre; }
79pre, code, tt { font: 1em monospace; line-height: 1.5; }
80tt { display: block; margin: 1.625em 0; }
81hr { margin-bottom:1.625em; }
82
83.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; }
84.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; }
85.mono { font-family:"Courier New", Courier, monospace; }
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 14:27:32 +0000