Dotclear

source: themes/berlin/style.css @ 2645:cf063d740889

Revision 2645:cf063d740889, 27.3 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Berlin Theme. content-info: right spacing should be preserved on all screen width
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#sidebar {
647  *zoom: 1;
648  padding-top: 2em;
649  background: #373737 url(img/bg_dark.png);
650  color: white;
651  text-shadow: #373737 0px -1px 0px; }
652  #sidebar:after {
653    content: "";
654    display: table;
655    clear: both; }
656  #sidebar a:link, #sidebar a:visited {
657    color: #f9f9f9;
658    border: none; }
659  #sidebar a:hover, #sidebar a:focus, #sidebar a:active,
660  #sidebar li:hover, #sidebar li:focus {
661    background-color: #d52125; }
662
663#sidebar h2, #sidebar h3 {
664  font-size: 1em;
665  color: white;
666  font-weight: bold; }
667
668#sidebar h2 {
669  text-transform: uppercase; }
670
671#sidebar h3 {
672  margin-top: 1.5em;
673  margin-bottom: 0; }
674
675#blognav > div, #blogextra > div {
676  padding: 1em;
677  font-size: .875em;
678  line-height: 1.71429; }
679
680#blognav div > ul, #blogextra div > ul {
681  list-style: none;
682  padding-left: 0;
683  line-height: 2.28571; }
684  #blognav div > ul li, #blogextra div > ul li {
685    list-style-image: none;
686    list-style-type: none;
687    margin-left: 0; }
688
689#blognav ul, #blogextra ul {
690  margin: 0; }
691#blognav li, #blogextra li {
692  display: block;
693  padding-left: .25em;
694  border-bottom: 1px solid gainsboro; }
695#blognav li ul, #blogextra li ul {
696  margin-left: -.25em; }
697#blognav li li, #blogextra li li {
698  border-top: 1px solid gainsboro; }
699#blognav li li:last-child, #blogextra li li:last-child {
700  border-bottom: none; }
701
702#q {
703  width: 75%; }
704
705.category-current {
706  margin-left: -2em;
707  background-color: black; }
708
709.category-current ul {
710  background-color: #373737; }
711
712#sidebar li:hover ul {
713  background-color: #373737; }
714
715@media screen and (min-width: 30.1em) and (max-width: 60em) {
716  #blognav div, #blogextra div {
717    width: 50%;
718    float: left; } }
719@media screen and (min-width: 60.1em) and (max-width: 80em) {
720  #blognav > div, #blogextra > div {
721    width: 33.33%;
722    float: left; } }
723/* *** navigation *** */
724.navlinks {
725  color: white;
726  margin: 0; }
727
728.prev {
729  text-indent: -119988px;
730  overflow: hidden;
731  text-align: left;
732  background-image: url('img/icon_prev.png?1387046145');
733  background-repeat: no-repeat;
734  background-position: 50% 50%; }
735
736.next {
737  text-indent: -119988px;
738  overflow: hidden;
739  text-align: left;
740  background-image: url('img/icon_next.png?1387046234');
741  background-repeat: no-repeat;
742  background-position: 50% 50%; }
743
744.prev, .next {
745  vertical-align: middle;
746  width: 2.5em;
747  height: 2.5em;
748  display: inline-block;
749  border-radius: 50%;
750  border: 1px solid gainsboro;
751  background-color: #f2f2f2; }
752  .prev:hover, .prev:focus, .next:hover, .next:focus {
753    border-width: 3px; }
754
755/* *** content info *** */
756#content-info {
757  margin-bottom: 4em;
758  border-bottom: 1px solid gainsboro;
759  padding: 0;
760  font-size: 0.875em; }
761  #content-info h2 {
762    display: inline-block;
763    vertical-align: top;
764    padding: .5em .75em;
765    border-radius: .5em;
766    background-color: #267daf;
767    color: white;
768    font-size: 1.1428571em;
769    text-align: center; }
770    #content-info h2 a {
771      color: white; }
772  #content-info h3 {
773    font-size: 1em; }
774  #content-info ul {
775    margin-top: 0.5714286em;
776    padding-left: 0; }
777
778.content-info__feed {
779  display: inline-block;
780  vertical-align: top;
781  list-style-type: none; }
782  .content-info__feed li {
783    display: inline;
784    margin-right: 1.5em; }
785
786.content-info__sub-cat {
787  margin-top: 2em; }
788  .content-info__sub-cat h3 {
789    font-weight: bold; }
790
791#gotop {
792  display: none;
793  z-index: 1000;
794  position: fixed;
795  bottom: 0;
796  right: .5em;
797  width: 10em;
798  padding: .25em;
799  border: 1px solid #626262;
800  border-radius: .25em;
801  background-color: white;
802  color: #333;
803  font-size: .875em;
804  text-align: center; }
805  #gotop a, #gotop a:link, #gotop a:hover, #gotop a:active {
806    background: transparent;
807    border: none;
808    font-weight: bold;
809    color: #626262; }
810
811/**
812    POST
813------------------------------- */
814.post {
815  max-width: 42em;
816  margin: 2em auto 6em; }
817
818.post-day-date {
819  font-size: 0.875em;
820  text-align: center;
821  text-transform: uppercase;
822  letter-spacing: 1px;
823  margin-bottom: 0.8571429em; }
824
825.post-meta {
826  font-size: 0.875em;
827  background-color: #f2f2f2;
828  border-radius: 0.5714286em;
829  padding: 0.5714286em 1.1428571em;
830  margin-bottom: 1.7142857em; }
831
832.post-info {
833  margin: .5em 0; }
834
835.full .post-info,
836.short .post-info,
837.post-cat,
838.post-tags-list {
839  margin: .5em 0;
840  display: inline;
841  vertical-align: top; }
842
843.post-tags-list {
844  margin: 0;
845  padding: 0;
846  border: 0;
847  overflow: hidden;
848  *zoom: 1; }
849
850.post-tags-item {
851  list-style-image: none;
852  list-style-type: none;
853  margin-left: 0;
854  display: -moz-inline-stack;
855  display: inline-block;
856  vertical-align: middle;
857  *vertical-align: auto;
858  zoom: 1;
859  *display: inline;
860  white-space: nowrap;
861  vertical-align: top; }
862  .post-tags-item a:after {
863    content: "."; }
864
865.post-info-co {
866  margin: .5em 0; }
867
868.post-title {
869  text-align: center;
870  font-weight: 200; }
871  .post-title a, .post-title a:link, .post-title a:visited {
872    border-bottom-color: white; }
873  .post-title a:hover, .post-title a:focus, .post-title a:active {
874    color: #267daf;
875    background-color: transparent; }
876  @media screen and (max-width: 40em) {
877    .post-title {
878      font-size: 2em; } }
879
880.post-content {
881  margin-bottom: 1em; }
882
883.post-read-it {
884  margin-bottom: 1.5em; }
885
886.footnotes {
887  font-size: 0.875em;
888  margin-top: 2em;
889  margin-bottom: 3em; }
890  .footnotes h4 {
891    display: inline-block;
892    border-top: 1px solid #267daf;
893    padding-right: 3em;
894    margin-bottom: 0; }
895
896.post-attachments {
897  position: relative;
898  padding: 0 2.5em .25em;
899  border: 1px solid gainsboro;
900  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2); }
901
902.post-attachments:before {
903  content: url(img/icon_attachments.png);
904  content: url(img/icon_attachments.svg);
905  display: block;
906  position: absolute;
907  margin-top: -.33em;
908  margin-left: -2em; }
909
910.post-attachments-title {
911  padding-top: .75em;
912  font-size: 1em;
913  text-transform: uppercase;
914  font-weight: bold;
915  color: #626262; }
916
917.post-attachments-list {
918  padding-left: 1em;
919  margin-top: .5em; }
920
921.post-feedback {
922  max-width: 42em;
923  margin: 3em auto; }
924
925.post-feedback h3 {
926  text-align: center;
927  font-size: 1.25em;
928  font-weight: bold;
929  color: #626262; }
930
931.comments-list {
932  list-style: none;
933  padding-left: 0; }
934  .comments-list li {
935    list-style-image: none;
936    list-style-type: none;
937    margin-left: 0; }
938
939.comment, .ping {
940  overflow: hidden;
941  padding: .1em 1.5em .1em 4em;
942  margin-bottom: 2em;
943  border-radius: .25em;
944  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2); }
945
946.comment {
947  background-color: #EDF3F2; }
948
949.ping {
950  background: #f3efed url(img/icon_trackbacks.png) no-repeat 1.5em 4em; }
951
952.comment-number {
953  display: block;
954  float: left;
955  width: 2.5em;
956  height: 2.5em;
957  margin-left: -3.5em;
958  margin-right: 1em;
959  margin-top: -.5em;
960  border-radius: 50%;
961  background-color: white;
962  z-index: 1000;
963  line-height: 2.5em;
964  text-align: center; }
965
966.comment-form, .send-trackback {
967  overflow: hidden;
968  padding: .75em 3em .1em;
969  margin-bottom: 2em;
970  border-radius: .25em;
971  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2);
972  background-color: #EDF3F2; }
973
974.send-trackback {
975  background: #f3efed url(img/icon_trackbacks.png) no-repeat 1.5em 4em; }
976
977.field label {
978  display: inline-block;
979  width: 10em; }
980
981.field input {
982  max-width: 100%; }
983
984.field textarea {
985  display: block;
986  width: 100%; }
987
988.form-help, .remember {
989  font-size: 0.875em; }
990
991#pr {
992  background-color: #f2f2f2;
993  padding: .5em;
994  border: 2px solid #6c7c7c;
995  margin-bottom: 2em; }
996
997.error {
998  background-color: #d52125;
999  color: white;
1000  padding: .25em .5em; }
1001
1002/* Button Style */
1003.buttons {
1004  text-align: right; }
1005
1006button.submit, button.preview {
1007  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #778f96), color-stop(100%, #5d757d));
1008  background-image: -webkit-linear-gradient(top, #778f96, #5d757d);
1009  background-image: -moz-linear-gradient(top, #778f96, #5d757d);
1010  background-image: -o-linear-gradient(top, #778f96, #5d757d);
1011  background-image: linear-gradient(top, #778f96, #5d757d);
1012  box-shadow: inset 0 1px 3px 0 #778f96;
1013  background-color: #778f96;
1014  border-radius: .25em;
1015  border: 1px solid #5d757d;
1016  display: inline-block;
1017  cursor: pointer;
1018  color: white;
1019  padding: .25em .5em;
1020  text-decoration: none;
1021  text-shadow: 0 -1px 0 #626262; }
1022
1023button.submit:hover,
1024button.submit:focus,
1025button.preview:hover,
1026button.preview:focus {
1027  cursor: pointer;
1028  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5d757d), color-stop(100%, #5d757d));
1029  background-image: -webkit-linear-gradient(#5d757d, #5d757d);
1030  background-image: -moz-linear-gradient(#5d757d, #5d757d);
1031  background-image: -o-linear-gradient(#5d757d, #5d757d);
1032  background-image: linear-gradient(#5d757d, #5d757d);
1033  background-color: #5d757d; }
1034
1035button.submit:active, button.preview:active {
1036  position: relative;
1037  top: 1px; }
1038
1039@media all and (max-width: 30em) {
1040  .comment-number {
1041    margin-top: 0; }
1042
1043  .comment-content, .ping-content {
1044    margin-left: -3.5em;
1045    margin-right: -1em; }
1046
1047  .comment-form, .send-trackback {
1048    padding: .75em .5em .1em; } }
1049@media all and (min-width: 30.1em) {
1050  .post-day-date:after,
1051  .post-day-date:before {
1052    display: inline-block;
1053    height: 1px;
1054    content: " ";
1055    background-color: gainsboro;
1056    text-shadow: none;
1057    width: 20%;
1058    margin-bottom: .33em; }
1059
1060  .post-day-date:after {
1061    margin-left: 2em; }
1062
1063  .post-day-date:before {
1064    margin-right: 2em; }
1065
1066  .post-feedback h3:after,
1067  .post-feedback h3:before {
1068    display: inline-block;
1069    height: 1px;
1070    content: " ";
1071    background-color: gainsboro;
1072    text-shadow: none;
1073    width: 20%;
1074    margin-bottom: .33em; }
1075
1076  .post-feedback h3:after {
1077    margin-left: 2em; }
1078
1079  .post-feedback h3:before {
1080    margin-right: 2em; } }
1081@media all and (max-width: 40em) {
1082  .post {
1083    margin: 1em auto 3em; } }
1084/* ---------------------------------------------------------------- archives */
1085/* general */
1086@media all and (min-width: 30em) {
1087  .dc-archive .content-inner {
1088    margin-left: 3em;
1089    margin-right: 3em; } }
1090
1091.arch-block {
1092  display: inline-block;
1093  margin: 0 0 2em 0;
1094  vertical-align: top; }
1095  .arch-block a {
1096    color: #373737; }
1097  @media all and (min-width: 30em) {
1098    .arch-block {
1099      margin-left: 4em; } }
1100
1101.arch-block:first-child {
1102  margin-left: 0; }
1103
1104.arch-block h3 {
1105  margin-bottom: 1em;
1106  font-size: 1.2em;
1107  font-style: italic;
1108  font-weight: normal;
1109  text-transform: lowercase;
1110  color: #267daf; }
1111
1112.arch-block h4 {
1113  font-weight: bold;
1114  font-size: 1.1em;
1115  margin-bottom: 0;
1116  margin-top: 0;
1117  color: #373737; }
1118
1119.arch-list, .arch-sub-list {
1120  list-style-type: none;
1121  margin: 0;
1122  padding: 0; }
1123
1124.arch-sub-list {
1125  margin-left: 20px; }
1126
1127/* par date */
1128.arch-by-year {
1129  margin-right: 0;
1130  margin-bottom: 1em;
1131  margin-top: 2em; }
1132
1133.arch-by-year h3 {
1134  margin-bottom: 0; }
1135
1136.arch-by-year h3:first-child {
1137  margin-top: 0; }
1138
1139.fromto {
1140  margin-top: 0;
1141  margin-bottom: 1.5em;
1142  font-size: .875em;
1143  font-style: italic; }
1144
1145.arch-by-year__each-year {
1146  display: inline-block;
1147  vertical-align: top;
1148  margin: 0;
1149  width: 10em; }
1150
1151.arch-year-list {
1152  margin-bottom: 1.5em; }
1153
1154.arch-year-list span {
1155  font-size: .875em; }
1156
1157/* par categorie */
1158.arch-cat-list, .arch-sub-cat-list {
1159  background: transparent url(img/vline.png) repeat-y; }
1160
1161.arch-sub-cat-list {
1162  margin: .5em 0 0 .5em; }
1163
1164.arch-cat-list li {
1165  padding: .2em .2em .2em 20px;
1166  background: transparent url(img/hline.png) no-repeat left 0.82em; }
1167
1168.arch-cat-list li:last-child {
1169  background-image: url(img/last-hline.png); }
1170
1171/* par tag */
1172.arch-by-tag {
1173  width: 17em; }
1174
1175.arch-tag-list li {
1176  display: inline;
1177  padding-right: 1em; }
1178
1179.arch-tag-list .tag0 {
1180  color: #909090;
1181  font-size: 90%; }
1182
1183.arch-tag-list .tag10 {
1184  color: #828282;
1185  font-size: 92%; }
1186
1187.arch-tag-list .tag20 {
1188  color: #737373;
1189  font-size: 94%; }
1190
1191.arch-tag-list .tag30 {
1192  color: #656565;
1193  font-size: 96%; }
1194
1195.arch-tag-list .tag40 {
1196  color: #484848;
1197  font-size: 98%; }
1198
1199.arch-tag-list .tag50 {
1200  color: #3A3A3A;
1201  font-size: 100%; }
1202
1203.arch-tag-list .tag60 {
1204  color: #2B2B2B;
1205  font-size: 102%; }
1206
1207.arch-tag-list .tag70 {
1208  color: #1D1D1D;
1209  font-size: 104%; }
1210
1211.arch-tag-list .tag80 {
1212  color: #0E0E0E;
1213  font-size: 106%; }
1214
1215.arch-tag-list .tag90 {
1216  color: #030303;
1217  font-size: 108%; }
1218
1219.arch-tag-list .tag100 {
1220  color: #000;
1221  font-size: 110%; }
1222
1223/* archives par mois */
1224.dc-archive-month #content-info h2 {
1225  margin-left: 2em;
1226  margin-top: .5em; }
1227
1228/** --------------------------------------------------
1229    Modules
1230--------------------------------------------------- */
1231/* *** MODULE sidebar off-canvas *** */
1232#offcanvas-on {
1233  display: none; }
1234
1235#sidebar, #main {
1236  -webkit-transition: 0.3s all linear;
1237  -moz-transition: 0.3s all linear;
1238  -o-transition: 0.3s all linear;
1239  transition: 0.3s all linear; }
1240
1241.js #content-info h2,
1242.js .content-info__feed {
1243  margin-right: 3.5em; }
1244
1245@media screen and (max-width: 80em) {
1246  #offcanvas-on,
1247  #offcanvas-off {
1248    position: absolute;
1249    top: .5em;
1250    right: .5em;
1251    height: 2.5em;
1252    width: 2.5em;
1253    background-repeat: no-repeat;
1254    background-position: 50% 50%;
1255    border: none;
1256    padding: 0; }
1257
1258  #offcanvas-on:hover,
1259  #offcanvas-on:focus,
1260  #offcanvas-off:hover,
1261  #offcanvas-off:focus {
1262    background-color: #373737; }
1263
1264  #offcanvas-on {
1265    display: block;
1266    background-color: white;
1267    background-image: url(img/icon_open-sidebar.png);
1268    background-image: url(img/icon_open-sidebar.svg), none;
1269    border: 0.1em solid #626262;
1270    border-radius: .25em; }
1271
1272  #offcanvas-off {
1273    background-color: #373737;
1274    background-image: url(img/icon_close.png);
1275    background-image: url(img/icon_close.svg), none;
1276    border: 1px solid white; }
1277
1278  #wrapper {
1279    position: relative; }
1280
1281  .off-canvas #main {
1282    float: left;
1283    margin-left: -66.6666667%; }
1284
1285  .off-canvas #sidebar {
1286    position: relative;
1287    float: right;
1288    width: 91.6666667%;
1289    margin-right: 0%;
1290    margin-left: -100%;
1291    *margin-left: -99.9%;
1292    padding-left: 1em;
1293    padding-right: 1em;
1294    -moz-box-sizing: border-box;
1295    -webkit-box-sizing: border-box;
1296    -ms-box-sizing: border-box;
1297    box-sizing: border-box;
1298    word-wrap: break-word;
1299    *behavior: url("scripts");
1300    _display: inline;
1301    _overflow: hidden;
1302    _overflow-y: visible; } }
1303/*** dev only ***/
Note: See TracBrowser for help on using the repository browser.

Sites map