Dotclear

source: themes/berlin/style.css @ 2673:d131e13511a4

Revision 2673:d131e13511a4, 28.6 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Berlin: gestion du off-canvas sur le footer
Line 
1@charset "UTF-8";
2/** --------------------------------------------------
3    Start
4--------------------------------------------------- */
5/* largeur des paddings et border compris dans "width" */
6*,
7*:after,
8*:before {
9  -webkit-box-sizing: border-box;
10  -moz-box-sizing: border-box;
11  -ms-box-sizing: border-box;
12  box-sizing: border-box; }
13
14html {
15  font-size: 100.01%;
16  -ms-text-size-adjust: 100%;
17  -webkit-text-size-adjust: 100%;
18  margin: 0;
19  padding: 0; }
20
21body {
22  margin: 0;
23  padding: 0; }
24
25a {
26  background: transparent; }
27
28a:focus {
29  outline: thin dotted; }
30
31a:active, a:hover {
32  outline: none; }
33
34a img {
35  border: none; }
36
37q, cite {
38  font-style: italic; }
39
40q:before, q:after {
41  content: ""; }
42
43sup, sub {
44  font-size: .75em;
45  line-height: 0;
46  position: relative;
47  vertical-align: baseline; }
48
49sup {
50  top: -0.5em; }
51
52sub {
53  bottom: -0.25em; }
54
55abbr[title] {
56  border-bottom: 1px dotted;
57  cursor: help; }
58
59b, strong {
60  font-weight: bold;
61  font-size: 0.9375em; }
62
63small {
64  font-size: 80%; }
65
66dfn {
67  font-style: italic; }
68
69hr {
70  -moz-box-sizing: content-box;
71  box-sizing: content-box;
72  height: 0; }
73
74mark {
75  background: #ff0;
76  color: #000; }
77
78code, kbd, pre, samp {
79  font-family: monospace, serif;
80  font-size: 1em; }
81
82pre {
83  white-space: pre-wrap; }
84
85fieldset {
86  margin: 0;
87  padding: 0;
88  border: none; }
89
90input, button, select {
91  vertical-align: middle; }
92
93button, input, select, textarea {
94  font-family: inherit;
95  font-size: 100%;
96  margin: 0; }
97
98button, input {
99  line-height: normal; }
100
101button,
102html input[type="button"],
103input[type="reset"],
104input[type="submit"] {
105  -webkit-appearance: button;
106  cursor: pointer; }
107
108button[disabled],
109html input[disabled] {
110  cursor: default; }
111
112input[type="checkbox"],
113input[type="radio"] {
114  padding: 0;
115  border: none; }
116
117input[type="search"] {
118  -webkit-appearance: textfield; }
119
120input[type="search"]::-webkit-search-cancel-button,
121input[type="search"]::-webkit-search-decoration {
122  -webkit-appearance: none; }
123
124button::-moz-focus-inner,
125input::-moz-focus-inner {
126  border: 0;
127  padding: 0; }
128
129textarea {
130  overflow: auto;
131  vertical-align: top; }
132
133table {
134  border-collapse: collapse;
135  margin-bottom: 1.5em; }
136
137td, th {
138  padding: 1px;
139  vertical-align: top;
140  text-align: left; }
141
142td:first-child, th:first-child {
143  empty-cells: hide; }
144
145/* scripts */
146body > script {
147  display: none !important; }
148
149/* HTML5 for old browsers */
150article, aside, details, figcaption, figure, footer,
151header, hgroup, main, nav, section, summary {
152  display: block; }
153
154audio, canvas, video {
155  display: inline-block; }
156
157audio:not([controls]) {
158  display: none;
159  height: 0; }
160
161figure {
162  margin: 0; }
163
164[hidden], template {
165  display: none; }
166
167svg:not(:root) {
168  overflow: hidden; }
169
170/* Headings reset */
171h1, h2, h3, h4, h5, h6 {
172  font-size: 1em;
173  font-weight: normal;
174  margin: 0; }
175
176/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
177.visually-hidden {
178  border: 0;
179  clip: rect(0 0 0 0);
180  height: 1px;
181  margin: -1px;
182  overflow: hidden;
183  padding: 0;
184  position: absolute;
185  width: 1px; }
186
187/*
188* Scut, a collection of Sass utilities to ease and improve our implementations of common style-code patterns.
189* v0.8.0
190* Docs at http://davidtheclark.github.io/scut
191*/
192/** --------------------------------------------------
193    Common rules
194--------------------------------------------------- */
195/* Typographie */
196body {
197  font-size: 1em;
198  line-height: 1.5;
199  font-family: Lato, "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; }
200
201h1 {
202  font-size: 3em;
203  line-height: 1.2; }
204
205h2 {
206  font-size: 4em;
207  line-height: 1.2;
208  margin-bottom: 0.5em; }
209
210h3 {
211  font-size: 1.75em;
212  line-height: 1.33;
213  margin-top: 0.5714286em;
214  margin-bottom: 0.4285714em; }
215
216h4 {
217  font-size: 1.3125em;
218  margin-top: 1.1428571em;
219  margin-bottom: 0.7619048em; }
220
221h5 {
222  font-size: 1.125em;
223  margin-top: 1.5555556em; }
224
225h6 {
226  font-size: 1em;
227  margin-bottom: 0; }
228
229h2, h3, h4, h5, h6 {
230  color: #267daf; }
231
232a {
233  color: #d52125;
234  text-decoration: none;
235  transition: .3s; }
236  a:link, a:visited {
237    border-bottom: 1px solid gainsboro; }
238  a:visited {
239    border-bottom-style: dotted; }
240  a:hover, a:active {
241    border-color: #d52125; }
242  a:focus {
243    background-color: #d52125;
244    color: #f9f9f9; }
245
246hr {
247  border: 0;
248  height: 1px;
249  background: #333;
250  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dcdcdc), color-stop(50%, #626262), color-stop(100%, #dcdcdc));
251  background-image: -webkit-linear-gradient(left, #dcdcdc, #626262, #dcdcdc);
252  background-image: -moz-linear-gradient(left, #dcdcdc, #626262, #dcdcdc);
253  background-image: -o-linear-gradient(left, #dcdcdc, #626262, #dcdcdc);
254  background-image: linear-gradient(left, #dcdcdc, #626262, #dcdcdc); }
255
256blockquote, q {
257  font-family: "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
258  color: #626262;
259  font-style: italic; }
260
261blockquote {
262  font-size: 1.125em;
263  line-height: 1.33;
264  quotes: '\201C' '\201D';
265  margin-top: 1.7777778em; }
266
267blockquote:before,
268blockquote:after {
269  margin-top: 0;
270  font-size: 3em;
271  display: block;
272  line-height: .25;
273  color: gainsboro;
274  margin-bottom: 0; }
275
276blockquote:before {
277  content: open-quote;
278  float: left;
279  margin-right: .25em; }
280
281blockquote:after {
282  content: close-quote;
283  text-align: right; }
284
285blockquote p:first-child {
286  margin-top: 0; }
287
288kbd {
289  padding: 0.1em 0.5em; }
290
291code, pre, kbd {
292  background-color: #555;
293  color: #EFD540;
294  font-family: "Andale Mono", AndaleMono, monospace;
295  font-size: 0.875em;
296  padding: .1em .2em; }
297
298pre {
299  padding: .5em 1em; }
300
301img {
302  max-width: 97%; }
303
304p, ul, ol {
305  margin-top: 1em;
306  margin-bottom: .5em; }
307
308ul ul, ul ol, ol ol, ol ul {
309  margin-top: .5em; }
310
311.post-date,
312.post-cat,
313.post-tags-list,
314.post-permalink,
315.comment_count,
316.ping_count,
317.attach_count,
318.feed {
319  padding-left: 22px;
320  background-repeat: no-repeat;
321  background-position: 0 50%;
322  padding-right: .5em; }
323
324.post-author {
325  padding-right: .5em; }
326
327.post-date {
328  background-image: url(img/icon_date.png); }
329
330.post-cat {
331  background-image: url(img/icon_category.png); }
332
333.post-tags-list {
334  background-image: url(img/icon_tags.png);
335  padding-left: 22px !important; }
336
337.comment_count {
338  background-image: url(img/icon_comments.png); }
339
340.ping_count {
341  background-image: url(img/icon_trackbacks.png); }
342
343.attach_count {
344  background-image: url(img/icon_attach.png); }
345
346.post-permalink {
347  background-image: url(img/icon_permalink.png); }
348
349.feed {
350  background-image: url(img/icon_feed.png);
351  background-image: url(img/icon_feed.svg), none;
352  -webkit-background-size: .875em;
353  -o-background-size: .875em;
354  background-size: .875em;
355  padding-left: 1.25em; }
356
357/** --------------------------------------------------
358    layout elements
359--------------------------------------------------- */
360body {
361  background: #f2f2f2 url(img/bg_light.png);
362  color: #373737; }
363
364#main {
365  background-color: white;
366  padding: 1em .5em 2em; }
367
368#page {
369  *position: relative;
370  *zoom: 1;
371  max-width: 60em;
372  margin: 0 auto;
373  padding: 0; }
374  #page:before, #page:after {
375    content: "";
376    display: table; }
377  #page:after {
378    clear: both; }
379
380#wrapper {
381  *position: relative;
382  *zoom: 1; }
383  #wrapper:before, #wrapper:after {
384    content: "";
385    display: table; }
386  #wrapper:after {
387    clear: both; }
388
389.header {
390  position: relative;
391  padding: .25em 0; }
392
393@media all and (max-width: 30em) {
394  #main {
395    padding: .5em; } }
396@media screen and (min-width: 80.1em) and (max-width: 110em) {
397  #page {
398    max-width: 80em; }
399
400  #main {
401    float: left;
402    width: 75%;
403    margin-left: 0%;
404    margin-right: -100%;
405    *margin-right: -99.9%;
406    padding-left: 1em;
407    padding-right: 1em;
408    -moz-box-sizing: border-box;
409    -webkit-box-sizing: border-box;
410    -ms-box-sizing: border-box;
411    box-sizing: border-box;
412    word-wrap: break-word;
413    *behavior: url("scripts");
414    _display: inline;
415    _overflow: hidden;
416    _overflow-y: visible; }
417
418  #sidebar {
419    float: left;
420    width: 25%;
421    margin-left: 75%;
422    margin-right: -100%;
423    *margin-right: -99.9%;
424    padding-left: 1em;
425    padding-right: 1em;
426    -moz-box-sizing: border-box;
427    -webkit-box-sizing: border-box;
428    -ms-box-sizing: border-box;
429    box-sizing: border-box;
430    word-wrap: break-word;
431    *behavior: url("scripts");
432    _display: inline;
433    _overflow: hidden;
434    _overflow-y: visible; } }
435@media screen and (min-width: 110.1em) {
436  body {
437    font-size: 1.125em; }
438
439  #page {
440    max-width: 103em; }
441
442  .header {
443    max-width: 66.6666667%;
444    padding-bottom: 0; }
445
446  #main {
447    float: left;
448    width: 66.6666667%;
449    margin-left: 0%;
450    margin-right: -100%;
451    *margin-right: -99.9%;
452    padding-left: 1em;
453    padding-right: 1em;
454    -moz-box-sizing: border-box;
455    -webkit-box-sizing: border-box;
456    -ms-box-sizing: border-box;
457    box-sizing: border-box;
458    word-wrap: break-word;
459    *behavior: url("scripts");
460    _display: inline;
461    _overflow: hidden;
462    _overflow-y: visible; }
463
464  #sidebar {
465    float: left;
466    width: 33.3333333%;
467    margin-left: 66.6666667%;
468    margin-right: -100%;
469    *margin-right: -99.9%;
470    padding-left: 1em;
471    padding-right: 1em;
472    -moz-box-sizing: border-box;
473    -webkit-box-sizing: border-box;
474    -ms-box-sizing: border-box;
475    box-sizing: border-box;
476    word-wrap: break-word;
477    *behavior: url("scripts");
478    _display: inline;
479    _overflow: hidden;
480    _overflow-y: visible; }
481
482  #blognav, #blogextra {
483    width: 49%;
484    display: inline-block;
485    vertical-align: top; } }
486.header a:link,
487.header a:visited {
488  color: #373737;
489  border-bottom-color: #f9f9f9; }
490
491.header a:hover,
492.header a:focus {
493  color: #d52125;
494  border-bottom-color: transparent; }
495
496.skip-links {
497  margin: 0;
498  padding: 0;
499  border: 0;
500  overflow: hidden;
501  *zoom: 1;
502  text-align: right; }
503  .skip-links li {
504    list-style-image: none;
505    list-style-type: none;
506    margin-left: 0;
507    display: -moz-inline-stack;
508    display: inline-block;
509    vertical-align: middle;
510    *vertical-align: auto;
511    zoom: 1;
512    *display: inline;
513    white-space: nowrap;
514    padding-left: 0.5em;
515    padding-right: 0.5em;
516    font-size: 0.75em;
517    line-height: 1;
518    padding-bottom: .5em; }
519    .skip-links li a:link, .skip-links li a:visited {
520      color: #626262; }
521    .skip-links li a:hover, .skip-links li a:focus {
522      background-color: #f2f2f2;
523      color: #d52125; }
524
525.banner {
526  padding-bottom: .5em;
527  margin-right: 3em; }
528
529a.site-title__link,
530a.site-title__link:link,
531a.site-title__link:visited {
532  background-color: transparent;
533  border-color: transparent; }
534
535.site-title__text {
536  color: #626262;
537  color: rgba(120, 120, 120, 0.8);
538  font-weight: bold;
539  font-weight: 500;
540  letter-spacing: -1px;
541  text-shadow: 1px 4px 6px white, 0 0 0 black, 1px 4px 6px white; }
542
543.site-title__link:hover .site-title__text,
544.site-title__link:focus .site-title__text,
545.site-title__link:active .site-title__text {
546  color: rgba(223, 48, 52, 0.8); }
547
548.site-baseline {
549  font-family: "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
550  font-style: italic;
551  margin-top: 0;
552  margin-bottom: 0.5em;
553  color: #626262; }
554
555.header__nav {
556  margin: 0;
557  padding: 0;
558  border: 0;
559  overflow: hidden;
560  *zoom: 1;
561  clear: left;
562  text-align: right;
563  background: #373737;
564  background: #d52125; }
565  .header__nav li {
566    list-style-image: none;
567    list-style-type: none;
568    margin-left: 0;
569    display: -moz-inline-stack;
570    display: inline-block;
571    vertical-align: middle;
572    *vertical-align: auto;
573    zoom: 1;
574    *display: inline;
575    white-space: nowrap;
576    padding-left: 1em;
577    padding-right: 1em;
578    margin-right: .5em;
579    padding-top: .25em;
580    padding-bottom: .25em;
581    text-align: center; }
582    .header__nav li span {
583      font-size: 0.875em;
584      line-height: 1.7142857em;
585      font-family: "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
586      font-style: italic;
587      display: block; }
588  .header__nav li a:link,
589  .header__nav li a:visited {
590    color: white; }
591  .header__nav li a:hover,
592  .header__nav li a:focus {
593    background-color: #626262; }
594
595/* Si js est actif, un bouton pour afficher/masquer le menu est créé */
596#hamburger {
597  position: absolute;
598  top: 3em;
599  right: .5em;
600  padding: 0;
601  background-color: #d52125;
602  background-repeat: no-repeat;
603  background-position: 50% 50%;
604  background-image: url("img/icon_hamburger.png");
605  background-image: url("img/icon_hamburger.svg"), none;
606  height: 2.5em;
607  width: 2.5em;
608  border: 2px solid #d52125; }
609  #hamburger:visited {
610    background-color: #d52125; }
611  #hamburger:focus, #hamburger:hover {
612    background-color: #aa1a1d;
613    border-color: #d52125; }
614  #hamburger.open {
615    background-image: url(img/icon_close.png);
616    background-image: url(img/icon_close.svg), none; }
617
618@media screen and (max-width: 60em) {
619  .header {
620    padding-left: .5em;
621    padding-right: .5em;
622    padding-bottom: 0; }
623
624  .header__nav {
625    margin-left: -.5em;
626    margin-right: -.5em; }
627    .header__nav li {
628      display: block;
629      margin-right: 0;
630      border-bottom: 1px solid white; } }
631@media screen and (max-width: 30em) {
632  .skip-links {
633    text-align: center;
634    font-size: 0.625em;
635    line-height: 2.4em; }
636
637  .site-baseline {
638    display: none; }
639
640  #hamburger {
641    top: 1.5em;
642    right: .5em; } }
643@media screen and (max-width: 40em) {
644  .site-title {
645    font-size: 1.8em; } }
646.footer__widgets {
647  padding: 1em;
648  background-color: white;
649  text-align: center;
650  line-height: 2; }
651
652.blogcustom__title {
653  border: 0;
654  clip: rect(0 0 0 0);
655  height: 1px;
656  margin: -1px;
657  overflow: hidden;
658  padding: 0;
659  position: absolute;
660  width: 1px; }
661
662.footer__widgets .widget {
663  margin-top: 1em; }
664
665.footer__widgets h3 {
666  margin-bottom: 0;
667  font-size: 1em;
668  font-weight: bold; }
669
670.footer__widgets ul {
671  margin: 0;
672  padding: 0;
673  border: 0;
674  overflow: hidden;
675  *zoom: 1; }
676  .footer__widgets ul li {
677    list-style-image: none;
678    list-style-type: none;
679    margin-left: 0;
680    display: -moz-inline-stack;
681    display: inline-block;
682    vertical-align: middle;
683    *vertical-align: auto;
684    zoom: 1;
685    *display: inline;
686    white-space: nowrap;
687    padding-left: 0.5em;
688    padding-right: 0.5em; }
689
690.sidebar {
691  *zoom: 1;
692  padding-top: 2em;
693  background: #373737 url(img/bg_dark.png);
694  color: white;
695  text-shadow: #373737 0px -1px 0px; }
696  .sidebar:after {
697    content: "";
698    display: table;
699    clear: both; }
700  .sidebar a:link, .sidebar a:visited {
701    color: #f9f9f9;
702    border: none; }
703  .sidebar a:hover, .sidebar a:focus, .sidebar a:active,
704  .sidebar li:hover, .sidebar li:focus {
705    background-color: #d52125; }
706
707.blognav__title,
708.blogextra__title {
709  border: 0;
710  clip: rect(0 0 0 0);
711  height: 1px;
712  margin: -1px;
713  overflow: hidden;
714  padding: 0;
715  position: absolute;
716  width: 1px; }
717
718.blognav__widgets h3,
719.blognav__widgets h4,
720.blogextra__widgets h3,
721.blogextra__widgets h4 {
722  font-size: 1em;
723  color: white;
724  font-weight: bold; }
725
726.blognav__widgets h3,
727.blogextra__widgets h3 {
728  text-transform: uppercase; }
729
730.blognav__widgets h4,
731.blogextra__widgets h4 {
732  margin-top: 1.5em;
733  margin-bottom: 0; }
734
735.blognav__widgets .widget, .blogextra__widgets .widget {
736  padding: 1em;
737  font-size: .875em;
738  line-height: 1.71429; }
739  .blognav__widgets .widget > ul, .blogextra__widgets .widget > ul {
740    list-style: none;
741    padding-left: 0; }
742    .blognav__widgets .widget > ul li, .blogextra__widgets .widget > ul li {
743      list-style-image: none;
744      list-style-type: none;
745      margin-left: 0; }
746
747.blognav__widgets ul, .blogextra__widgets ul {
748  margin: 0; }
749.blognav__widgets li, .blogextra__widgets li {
750  display: block;
751  padding: .25em;
752  border-bottom: 1px solid gainsboro; }
753.blognav__widgets li ul, .blogextra__widgets li ul {
754  margin-left: -.25em; }
755.blognav__widgets li li, .blogextra__widgets li li {
756  border-top: 1px solid gainsboro; }
757.blognav__widgets li li:last-child, .blogextra__widgets li li:last-child {
758  border-bottom: none; }
759
760#q {
761  width: 75%; }
762
763.category-current {
764  margin-left: -2em;
765  background-color: black; }
766
767.category-current ul {
768  background-color: #373737; }
769
770.sidebar li:hover ul {
771  background-color: #373737; }
772
773@media screen and (min-width: 30.1em) and (max-width: 60em) {
774  .blognav__widgets .widget, .blogextra__widgets .widget {
775    width: 50%;
776    float: left; } }
777@media screen and (min-width: 60.1em) and (max-width: 80em) {
778  .blognav__widgets .widget, .blogextra__widgets .widget {
779    width: 33.33%;
780    float: left; } }
781/* *** navigation *** */
782.navlinks {
783  color: white;
784  margin: 0; }
785
786.prev {
787  text-indent: -119988px;
788  overflow: hidden;
789  text-align: left;
790  background-image: url('img/icon_prev.png?1387046145');
791  background-repeat: no-repeat;
792  background-position: 50% 50%; }
793
794.next {
795  text-indent: -119988px;
796  overflow: hidden;
797  text-align: left;
798  background-image: url('img/icon_next.png?1387046234');
799  background-repeat: no-repeat;
800  background-position: 50% 50%; }
801
802.prev, .next {
803  vertical-align: middle;
804  width: 2.5em;
805  height: 2.5em;
806  display: inline-block;
807  border-radius: 50%;
808  border: 1px solid gainsboro;
809  background-color: #f2f2f2; }
810  .prev:hover, .prev:focus, .next:hover, .next:focus {
811    border-width: 3px; }
812
813/* *** content info *** */
814#content-info {
815  margin-bottom: 4em;
816  border-bottom: 1px solid gainsboro;
817  padding: 0;
818  font-size: 0.875em; }
819  #content-info h2 {
820    display: inline-block;
821    vertical-align: top;
822    padding: .5em .75em;
823    border-radius: .5em;
824    background-color: #267daf;
825    color: white;
826    font-size: 1.1428571em;
827    text-align: center; }
828    #content-info h2 a {
829      color: white; }
830  #content-info h3 {
831    font-size: 1em; }
832  #content-info ul {
833    margin-top: 0.5714286em;
834    padding-left: 0; }
835
836.content-info__feed {
837  display: inline-block;
838  vertical-align: top;
839  list-style-type: none; }
840  .content-info__feed li {
841    display: inline;
842    margin-right: 1.5em; }
843
844.content-info__sub-cat {
845  margin-top: 2em; }
846  .content-info__sub-cat h3 {
847    font-weight: bold; }
848
849#gotop {
850  display: none;
851  z-index: 1000;
852  position: fixed;
853  bottom: 0;
854  right: .5em;
855  width: 10em;
856  padding: .25em;
857  border: 1px solid #626262;
858  border-radius: .25em;
859  background-color: white;
860  color: #333;
861  font-size: .875em;
862  text-align: center; }
863  #gotop a, #gotop a:link, #gotop a:hover, #gotop a:active {
864    background: transparent;
865    border: none;
866    font-weight: bold;
867    color: #626262; }
868
869/**
870    POST
871------------------------------- */
872.post {
873  max-width: 42em;
874  margin: 2em auto 6em; }
875
876.post-day-date {
877  font-size: 0.875em;
878  text-align: center;
879  text-transform: uppercase;
880  letter-spacing: 1px;
881  margin-bottom: 0.8571429em; }
882
883.post-meta {
884  font-size: 0.875em;
885  background-color: #f2f2f2;
886  border-radius: 0.5714286em;
887  padding: 0.5714286em 1.1428571em;
888  margin-bottom: 1.7142857em; }
889
890.post-info {
891  margin: .5em 0; }
892
893.full .post-info,
894.short .post-info,
895.post-cat,
896.post-tags-list {
897  margin: .5em 0;
898  display: inline;
899  vertical-align: top; }
900
901.post-tags-list {
902  margin: 0;
903  padding: 0;
904  border: 0;
905  overflow: hidden;
906  *zoom: 1; }
907
908.post-tags-item {
909  list-style-image: none;
910  list-style-type: none;
911  margin-left: 0;
912  display: -moz-inline-stack;
913  display: inline-block;
914  vertical-align: middle;
915  *vertical-align: auto;
916  zoom: 1;
917  *display: inline;
918  white-space: nowrap;
919  vertical-align: top; }
920  .post-tags-item a:after {
921    content: "."; }
922
923.post-info-co {
924  margin: .5em 0; }
925
926.post-title {
927  text-align: center;
928  font-weight: 200; }
929  .post-title a, .post-title a:link, .post-title a:visited {
930    border-bottom-color: white; }
931  .post-title a:hover, .post-title a:focus, .post-title a:active {
932    color: #267daf;
933    background-color: transparent; }
934  @media screen and (max-width: 40em) {
935    .post-title {
936      font-size: 2em; } }
937
938.post-content {
939  margin-bottom: 1em; }
940
941.post-read-it {
942  margin-bottom: 1.5em; }
943
944.footnotes {
945  font-size: 0.875em;
946  margin-top: 2em;
947  margin-bottom: 3em; }
948  .footnotes h4 {
949    display: inline-block;
950    border-top: 1px solid #267daf;
951    padding-right: 3em;
952    margin-bottom: 0; }
953
954.post-attachments {
955  position: relative;
956  padding: 0 2.5em .25em;
957  border: 1px solid gainsboro;
958  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2); }
959
960.post-attachments:before {
961  content: url(img/icon_attachments.png);
962  content: url(img/icon_attachments.svg);
963  display: block;
964  position: absolute;
965  margin-top: -.33em;
966  margin-left: -2em; }
967
968.post-attachments-title {
969  padding-top: .75em;
970  font-size: 1em;
971  text-transform: uppercase;
972  font-weight: bold;
973  color: #626262; }
974
975.post-attachments-list {
976  padding-left: 1em;
977  margin-top: .5em; }
978
979.post-feedback {
980  max-width: 42em;
981  margin: 3em auto; }
982
983.post-feedback h3 {
984  text-align: center;
985  font-size: 1.25em;
986  font-weight: bold;
987  color: #626262; }
988
989.comments-list {
990  list-style: none;
991  padding-left: 0; }
992  .comments-list li {
993    list-style-image: none;
994    list-style-type: none;
995    margin-left: 0; }
996
997.comment, .ping {
998  overflow: hidden;
999  padding: .1em 1.5em .1em 4em;
1000  margin-bottom: 2em;
1001  border-radius: .25em;
1002  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2); }
1003
1004.comment {
1005  background-color: #EDF3F2; }
1006
1007.ping {
1008  background: #f3efed url(img/icon_trackbacks.png) no-repeat 1.5em 4em; }
1009
1010.comment-number {
1011  display: block;
1012  float: left;
1013  width: 2.5em;
1014  height: 2.5em;
1015  margin-left: -3.5em;
1016  margin-right: 1em;
1017  margin-top: -.5em;
1018  border-radius: 50%;
1019  background-color: white;
1020  z-index: 1000;
1021  line-height: 2.5em;
1022  text-align: center; }
1023
1024.comment-form, .send-trackback {
1025  overflow: hidden;
1026  padding: .75em 3em .1em;
1027  margin-bottom: 2em;
1028  border-radius: .25em;
1029  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2);
1030  background-color: #EDF3F2; }
1031
1032.send-trackback {
1033  background: #f3efed url(img/icon_trackbacks.png) no-repeat 1.5em 4em; }
1034
1035.field label {
1036  display: inline-block;
1037  width: 10em; }
1038
1039.field input {
1040  max-width: 100%; }
1041
1042.field textarea {
1043  display: block;
1044  width: 100%; }
1045
1046.form-help, .remember {
1047  font-size: 0.875em; }
1048
1049#pr {
1050  background-color: #f2f2f2;
1051  padding: .5em;
1052  border: 2px solid #6c7c7c;
1053  margin-bottom: 2em; }
1054
1055.error {
1056  background-color: #d52125;
1057  color: white;
1058  padding: .25em .5em; }
1059
1060/* Button Style */
1061.buttons {
1062  text-align: right; }
1063
1064button.submit, button.preview {
1065  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #778f96), color-stop(100%, #5d757d));
1066  background-image: -webkit-linear-gradient(top, #778f96, #5d757d);
1067  background-image: -moz-linear-gradient(top, #778f96, #5d757d);
1068  background-image: -o-linear-gradient(top, #778f96, #5d757d);
1069  background-image: linear-gradient(top, #778f96, #5d757d);
1070  box-shadow: inset 0 1px 3px 0 #778f96;
1071  background-color: #778f96;
1072  border-radius: .25em;
1073  border: 1px solid #5d757d;
1074  display: inline-block;
1075  cursor: pointer;
1076  color: white;
1077  padding: .25em .5em;
1078  text-decoration: none;
1079  text-shadow: 0 -1px 0 #626262; }
1080
1081button.submit:hover,
1082button.submit:focus,
1083button.preview:hover,
1084button.preview:focus {
1085  cursor: pointer;
1086  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5d757d), color-stop(100%, #5d757d));
1087  background-image: -webkit-linear-gradient(#5d757d, #5d757d);
1088  background-image: -moz-linear-gradient(#5d757d, #5d757d);
1089  background-image: -o-linear-gradient(#5d757d, #5d757d);
1090  background-image: linear-gradient(#5d757d, #5d757d);
1091  background-color: #5d757d; }
1092
1093button.submit:active, button.preview:active {
1094  position: relative;
1095  top: 1px; }
1096
1097@media all and (max-width: 30em) {
1098  .comment-number {
1099    margin-top: 0; }
1100
1101  .comment-content, .ping-content {
1102    margin-left: -3.5em;
1103    margin-right: -1em; }
1104
1105  .comment-form, .send-trackback {
1106    padding: .75em .5em .1em; } }
1107@media all and (min-width: 30.1em) {
1108  .post-day-date:after,
1109  .post-day-date:before {
1110    display: inline-block;
1111    height: 1px;
1112    content: " ";
1113    background-color: gainsboro;
1114    text-shadow: none;
1115    width: 20%;
1116    margin-bottom: .33em; }
1117
1118  .post-day-date:after {
1119    margin-left: 2em; }
1120
1121  .post-day-date:before {
1122    margin-right: 2em; }
1123
1124  .post-feedback h3:after,
1125  .post-feedback h3:before {
1126    display: inline-block;
1127    height: 1px;
1128    content: " ";
1129    background-color: gainsboro;
1130    text-shadow: none;
1131    width: 20%;
1132    margin-bottom: .33em; }
1133
1134  .post-feedback h3:after {
1135    margin-left: 2em; }
1136
1137  .post-feedback h3:before {
1138    margin-right: 2em; } }
1139@media all and (max-width: 40em) {
1140  .post {
1141    margin: 1em auto 3em; } }
1142/* ---------------------------------------------------------------- archives */
1143/* general */
1144@media all and (min-width: 30em) {
1145  .dc-archive .content-inner {
1146    margin-left: 3em;
1147    margin-right: 3em; } }
1148
1149.arch-block {
1150  display: inline-block;
1151  margin: 0 0 2em 0;
1152  vertical-align: top; }
1153  .arch-block a {
1154    color: #373737; }
1155  @media all and (min-width: 30em) {
1156    .arch-block {
1157      margin-left: 4em; } }
1158
1159.arch-block:first-child {
1160  margin-left: 0; }
1161
1162.arch-block h3 {
1163  margin-bottom: 1em;
1164  font-size: 1.2em;
1165  font-style: italic;
1166  font-weight: normal;
1167  text-transform: lowercase;
1168  color: #267daf; }
1169
1170.arch-block h4 {
1171  font-weight: bold;
1172  font-size: 1.1em;
1173  margin-bottom: 0;
1174  margin-top: 0;
1175  color: #373737; }
1176
1177.arch-list, .arch-sub-list {
1178  list-style-type: none;
1179  margin: 0;
1180  padding: 0; }
1181
1182.arch-sub-list {
1183  margin-left: 20px; }
1184
1185/* par date */
1186.arch-by-year {
1187  margin-right: 0;
1188  margin-bottom: 1em;
1189  margin-top: 2em; }
1190
1191.arch-by-year h3 {
1192  margin-bottom: 0; }
1193
1194.arch-by-year h3:first-child {
1195  margin-top: 0; }
1196
1197.fromto {
1198  margin-top: 0;
1199  margin-bottom: 1.5em;
1200  font-size: .875em;
1201  font-style: italic; }
1202
1203.arch-by-year__each-year {
1204  display: inline-block;
1205  vertical-align: top;
1206  margin: 0;
1207  width: 10em; }
1208
1209.arch-year-list {
1210  margin-bottom: 1.5em; }
1211
1212.arch-year-list span {
1213  font-size: .875em; }
1214
1215/* par categorie */
1216.arch-cat-list, .arch-sub-cat-list {
1217  background: transparent url(img/vline.png) repeat-y; }
1218
1219.arch-sub-cat-list {
1220  margin: .5em 0 0 .5em; }
1221
1222.arch-cat-list li {
1223  padding: .2em .2em .2em 20px;
1224  background: transparent url(img/hline.png) no-repeat left 0.82em; }
1225
1226.arch-cat-list li:last-child {
1227  background-image: url(img/last-hline.png); }
1228
1229/* par tag */
1230.arch-by-tag {
1231  width: 17em; }
1232
1233.arch-tag-list li {
1234  display: inline;
1235  padding-right: 1em; }
1236
1237.arch-tag-list .tag0 {
1238  color: #909090;
1239  font-size: 90%; }
1240
1241.arch-tag-list .tag10 {
1242  color: #828282;
1243  font-size: 92%; }
1244
1245.arch-tag-list .tag20 {
1246  color: #737373;
1247  font-size: 94%; }
1248
1249.arch-tag-list .tag30 {
1250  color: #656565;
1251  font-size: 96%; }
1252
1253.arch-tag-list .tag40 {
1254  color: #484848;
1255  font-size: 98%; }
1256
1257.arch-tag-list .tag50 {
1258  color: #3A3A3A;
1259  font-size: 100%; }
1260
1261.arch-tag-list .tag60 {
1262  color: #2B2B2B;
1263  font-size: 102%; }
1264
1265.arch-tag-list .tag70 {
1266  color: #1D1D1D;
1267  font-size: 104%; }
1268
1269.arch-tag-list .tag80 {
1270  color: #0E0E0E;
1271  font-size: 106%; }
1272
1273.arch-tag-list .tag90 {
1274  color: #030303;
1275  font-size: 108%; }
1276
1277.arch-tag-list .tag100 {
1278  color: #000;
1279  font-size: 110%; }
1280
1281/* archives par mois */
1282.dc-archive-month #content-info h2 {
1283  margin-left: 2em;
1284  margin-top: .5em; }
1285
1286/** --------------------------------------------------
1287    Modules
1288--------------------------------------------------- */
1289/* *** MODULE sidebar off-canvas *** */
1290#offcanvas-on {
1291  display: none; }
1292
1293.sidebar, #main {
1294  -webkit-transition: 0.3s all linear;
1295  -moz-transition: 0.3s all linear;
1296  -o-transition: 0.3s all linear;
1297  transition: 0.3s all linear; }
1298
1299.js #content-info h2,
1300.js .content-info__feed {
1301  margin-right: 3.5em; }
1302
1303@media screen and (max-width: 80em) {
1304  #offcanvas-on,
1305  #offcanvas-off {
1306    position: absolute;
1307    top: .5em;
1308    right: .5em;
1309    height: 2.5em;
1310    width: 2.5em;
1311    background-repeat: no-repeat;
1312    background-position: 50% 50%;
1313    border: none;
1314    padding: 0; }
1315
1316  #offcanvas-on:hover,
1317  #offcanvas-on:focus,
1318  #offcanvas-off:hover,
1319  #offcanvas-off:focus {
1320    background-color: #373737; }
1321
1322  #offcanvas-on {
1323    display: block;
1324    background-color: white;
1325    background-image: url(img/icon_open-sidebar.png);
1326    background-image: url(img/icon_open-sidebar.svg), none;
1327    border: 0.1em solid #626262;
1328    border-radius: .25em; }
1329
1330  #offcanvas-off {
1331    background-color: #373737;
1332    background-image: url(img/icon_close.png);
1333    background-image: url(img/icon_close.svg), none;
1334    border: 1px solid white; }
1335
1336  #wrapper {
1337    position: relative; }
1338
1339  .off-canvas #main, .footer.off-canvas {
1340    float: left;
1341    margin-left: -66.6666667%; }
1342
1343  .off-canvas .sidebar {
1344    position: relative;
1345    float: right;
1346    width: 91.6666667%;
1347    margin-right: 0%;
1348    margin-left: -100%;
1349    *margin-left: -99.9%;
1350    padding-left: 1em;
1351    padding-right: 1em;
1352    -moz-box-sizing: border-box;
1353    -webkit-box-sizing: border-box;
1354    -ms-box-sizing: border-box;
1355    box-sizing: border-box;
1356    word-wrap: break-word;
1357    *behavior: url("scripts");
1358    _display: inline;
1359    _overflow: hidden;
1360    _overflow-y: visible; } }
1361/*** dev only ***/
Note: See TracBrowser for help on using the repository browser.

Sites map