]> nos-oignons.net Git - website.git/blob - local.css
e36a4d92c7ce901917f8af7bf18d96f205eab04f
[website.git] / local.css
1 /* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */
2
3 @font-face {
4   font-family: 'Open Sans';
5   font-style: normal;
6   font-weight: 400;
7   src: local('Open Sans'), local('OpenSans'), url(assets/OpenSans/OpenSans.ttf) format('truetype');
8 }
9 @font-face {
10   font-family: 'Open Sans';
11   font-style: normal;
12   font-weight: 700;
13   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(assets/OpenSans/OpenSans-Bold.ttf) format('truetype');
14 }
15 @font-face {
16   font-family: 'Open Sans';
17   font-style: italic;
18   font-weight: 400;
19   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(assets/OpenSans/OpenSans-Italic.ttf) format('truetype');
20 }
21 @font-face {
22   font-family: 'Open Sans';
23   font-style: italic;
24   font-weight: 700;
25   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(assets/OpenSans/OpenSans-BoldItalic.ttf) format('truetype');
26 }
27 @font-face {
28   font-family: 'Inconsolata';
29   font-style: normal;
30   font-weight: 400;
31   src: local('Inconsolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype');
32 }
33
34 html {
35         overflow: auto;
36 }
37
38 body {
39         margin: 0;
40         padding: 0;
41         font-family: "Open Sans", sans-serif;
42         color: #b3b3b3;
43         background: url(assets/tile.png) fixed;
44 }
45
46 code,
47 pre {
48         font-family: "Inconsolata", monospace;
49         font-size-adjust: 0.535;
50 }
51
52 dt {
53         font-weight: bold;
54 }
55
56 thead td {
57         text-decoration: underline;
58 }
59
60 .page {
61         overflow: hidden;
62         max-width: 54em;
63         margin: 0 auto 0 auto;
64         box-shadow: 0 0 0.6em 0 #333366;
65         background: #f5f5f5;
66 }
67
68 /* {{{ .pageheader */
69 .pageheader {
70         position: fixed;
71         width: 54em; /* same as .page:max-width */
72         height: 100px;
73         padding: 0;
74         background: white url(assets/filet.png) no-repeat 99% 90px;
75         box-shadow: 0 10px 15px 0px white;
76         z-index: 120;
77 }
78
79 .pageheader .header {
80         font-size: 120%;
81         margin-left: 394px;
82 }
83
84 .pageheader .header > span {
85         display: block;
86         height: 100px;
87         padding-top: 22px;
88 }
89
90 .pageheader .parentlinks {
91         display: block;
92 }
93
94 .pageheader a,
95 .pageheader .parentlinks a {
96         color: #ffa430; /* was: #eeeeaa */
97         text-decoration: none;
98 }
99
100 .pageheader a:hover {
101         text-decoration: underline;
102 }
103
104 .pageheader .title {
105         position: absolute;
106         bottom: 27px;
107         left: 392px;
108         font-size: 160%;
109         color: black;
110 }
111
112 .pageheader .title .translationstatus {
113         display: none;
114 }
115
116 .parentlinks > a {
117         width: 394px; /* same as .pageheader .header:margin-left */
118         height: 100px;
119         background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left;
120         position: absolute;
121         left: 0;
122         top: 0;
123 }
124
125 .parentlinks > a span {
126         display: none;
127 }
128
129 .parentlinks .parentlinksep + a {
130         width: auto;
131         height: auto;
132         background: transparent;
133         display: inline;
134         position: static;
135 }
136
137 .parentlinks .parentlinksep + a + .parentlinksep + a {
138         background: url(assets/ariane-sep.png) no-repeat 0% 50%;
139         padding-left: 20px;
140 }
141
142 .parentlinks .parentlinksep + a span {
143         display: inline;
144 }
145
146 .parentlinks .parentlinksep {
147         display: none;
148 }
149
150 /* {{{ .actions */
151 .actions {
152         font-size: 80%;
153         text-align: right;
154 }
155
156 /* .actions }}} */
157 /* {{{ #otherlanguages */
158 #otherlanguages,
159 #otherlanguages ul li a {
160         color: #57075f;
161         background: white;
162 }
163
164 #otherlanguages ul li {
165         margin-left: 1em;
166 }
167 #otherlanguages .langstatus {
168         display: none;
169 }
170
171 .pageheader #otherlanguages {
172         border: none;
173         position: absolute;
174         bottom: 1.2em;
175         right: 0;
176         z-index: 300;
177         font-size: 80%;
178 }
179 /* #otherlanguages }}} */
180 /* .pageheader }}} */
181
182 #pagebody {
183         position: relative;
184         min-height: 756px;
185         margin: 0 0 0 11.44em; /* same as .sidebar:width */
186         padding: 100px 2em 1em 2em;
187         z-index: 110;
188         background: white url(assets/background.png) no-repeat bottom center;
189         color: black;
190         border-left: solid 1px #ccc;
191 }
192
193 /* {{{ .sidebar */
194 .sidebar {
195         position: fixed;
196         overflow: hidden;
197         top: 100px; /* same as .header:height */
198         width: 11.44em;
199         margin: 0;
200         padding: 0;
201         border: none;
202         z-index: 200;
203         background: #f5f5f5;
204         border-top: solid 1px #ccc;
205         padding-top: 30px;
206 }
207
208 .sidebar ul {
209         margin: 0;
210 }
211
212 .sidebar ul {
213         padding: 0;
214         list-style: none;
215         background: transparent;
216 }
217
218 .sidebar li {
219         text-align: left;
220 }
221
222 .sidebar ul li .selflink {
223         color: #57075f;
224         font-weight: bold;
225 }
226
227 .sidebar ul li > span,
228 .sidebar ul li > a {
229         display: block;
230         padding: 0.3em 0.5em;
231         text-decoration: none;
232         border: 1px solid #f5f5f5;
233         color: #a756af;
234         background: transparent;
235         font-weight: normal;
236         font-size: 100%;
237 }
238
239 .sidebar ul li .selflink:hover {
240         border-top: 1px dotted #57075f;
241         border-bottom: 1px dotted #57075f;
242         background: #eeeeee;
243 }
244
245 .sidebar a:hover {
246         border-top: 1px dotted #57075f;
247         border-bottom: 1px dotted #57075f;
248         color: #57075f;
249         background: #eeeeee;
250         text-decoration: none;
251 }
252 /* .sidebar }}} */
253 /* {{{ #content */
254 #content {
255         padding-top: 1em;
256         overflow: auto;
257 }
258
259 #content a {
260         color: #57075f;
261         text-decoration: underline;
262 }
263
264 #content a:hover {
265         text-decoration: underline;
266 }
267
268 #content p {
269         text-align: justify;
270         margin: 1em 0 1em 0;
271 }
272
273 #content hr {
274         border: none;
275         border-bottom: dotted 2px #bbbbbb;
276         margin: 2em auto;
277 }
278
279 #content h1 {
280         font-size: 180%;
281         font-weight: bold;
282         color: #ffa430;
283         text-shadow: 2px 2px 1px #444;
284 }
285
286 #content h2,
287 #content .header {
288         font-size: 140%;
289         font-weight: bold;
290 }
291
292 #content h2 + p {
293         margin-top: 0.75em;
294 }
295
296 #content h3 {
297         font-size: 120%;
298         font-weight: bold;
299         margin-bottom: 0;
300         padding-bottom: 0;
301 }
302
303 #content h3 + p {
304         margin-top: 0.5em;
305 }
306 h2 sup,
307 h3 sup {
308   font-weight: normal;
309 }
310
311 #content blockquote {
312   border-left: 2px solid #A756AF;
313   margin: 0.5em 0;
314   padding: 0.5em 0 0.5em 1em;
315 }
316 #content blockquote p {margin: 0;}
317 #content blockquote p + p {margin-top: 1em;}
318
319 #content table {
320         border-top: solid 1px #aaa;
321         border-bottom: solid 1px #aaa;
322         border-collapse: collapse;
323 }
324
325 #content table th {
326         background: #fafafa;
327         padding: 0.1em 0.5em;
328         border-bottom: solid 1px #aaaaaa;
329         color: #555555;
330 }
331
332 #content table td {
333         padding: 0.1em 0.5em;
334         border-top: solid 1px #ccc;
335 }
336
337 #content .header a {
338         text-decoration: none;
339 }
340
341 #content .feedlink a {
342         text-decoration: none;
343 }
344
345 #content .feedlink {
346         text-align: right;
347         margin-top: -2.8em;
348         min-height: 2.8em;
349 }
350 #content .feedlink .feedbutton {
351         font-size: 80%;
352         color: #57075f !important;
353         background: transparent;
354         border: none;
355 }
356 #content .feedlink .feedbutton:hover {
357         color: #57075f !important;
358         background: transparent;
359         text-decoration: underline;
360 }
361
362 #content .footnotes {
363         font-size: 80%;
364 }
365
366 .half-section {
367   display: inline-block;
368   vertical-align: top;
369   width: 49.5%;
370 }
371
372 /* #content }}} */
373
374 /* Paypal donation forms */
375 .paypal-donation {
376         display: inline-block;
377         vertical-align: top;
378         width:45%;
379         padding-right: 4%;
380 }
381 .paypal-donation h4 {
382         margin: 0 0 0.5em 0;
383 }
384 .paypal-donation select {
385         display: inline-block;
386         vertical-align: top;
387         margin-right: 1em;
388         min-height:26px;
389 }
390 .paypal-donation .cancel {
391         font-size: small;
392 }
393
394
395 /* Progress bar */
396 .progress-bar-wrapper {
397   margin: 2em auto;
398   height: 85px;
399   width: 600px;
400   background: lightGrey url(assets/progress_bar.png) top left repeat-x;
401   border: 1px solid #ccc;
402   border-bottom: 0;
403   position: relative;
404 }
405   .progress-bar-wrapper .progress-bar {
406     position: absolute;
407     height: 85px;
408     background: grey url(assets/progress_bar.png) left -85px repeat-x;
409     z-index: 2;
410     /* animate progress bar */
411     -webkit-animation: progress-bar 1.5s;
412     -moz-animation: progress-bar 1.5s;
413     animation: progress-bar 1.5s;
414   }
415   .progress-bar-wrapper .progress-bar-promises {
416     background: grey url(assets/progress_bar.png) left bottom repeat-x;
417     z-index: 1;
418   }
419
420   /* progress bar animation*/
421   @-webkit-keyframes progress-bar { 0% { width: 0; } }
422   @-moz-keyframes progress-bar { 0% { width: 0; } }
423   keyframes progress-bar { 0% { width: 0; } }
424
425   /* Current amount */
426   .progress-bar-wrapper .progress-bar:after {
427     content: attr(data-current);
428     display: block;
429     position: absolute;
430     top: -22px;
431     right: 0;
432     background: #fff;
433     color: #ccc;
434     font-size: 0.9em;
435   }
436   /* Promises amount */
437   .progress-bar-wrapper .progress-bar-promises:after {
438   }
439
440   /* Temperature bar */
441   .progress-bar-wrapper:before {
442     content: " ";
443     display: block;
444     position: absolute;
445     z-index: 3;
446     bottom: -5px;
447     left: -1px;
448     height: 5px;
449     width: 100%;
450     border: 1px solid #ccc;
451     border-top: 0;
452     background: -moz-linear-gradient(left, #ff0000 0%, #66ff00 100%); /* FF3.6+ */
453     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(100%,#66ff00)); /* Chrome,Safari4+ */
454     background: -webkit-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Chrome10+,Safari5.1+ */
455     background: -o-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Opera 11.10+ */
456     background: -ms-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* IE10+ */
457     background: linear-gradient(to right, #ff0000 0%,#66ff00 100%); /* W3C */
458     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#66ff00',GradientType=1 ); /* IE6-9 */
459   }
460
461   /* Annual budget */
462   .progress-bar-wrapper:after {
463     content: attr(data-total);
464     display: block;
465     position: absolute;
466     top: -22px;
467     right: 0;
468     background: #fff;
469     color: #ccc;
470     font-size: 0.9em;
471   }
472
473
474
475 /* FDN Form */
476 .fdn-form {}
477   .fdn-form select,
478   .fdn-form input {
479     display: inline-block;
480     vertical-align: top;
481     margin-right: 1em;
482     height: 26px;
483   }
484   .fdn-form #custom-amount {
485     display:none;
486     height: 22px;
487   }
488
489
490 /* Paymium Bitcoin */
491 .paymium-btns {padding-left: 0;}
492 .paymium-btns li {
493   list-style: none;
494   display: inline-block;
495   margin: 0 0.5em 0.5em 0;
496 }
497
498 .paymium-btn {
499   display: inline-block;
500   min-width: 10em;
501   padding: 4px 44px 4px 10px;
502   padding-right: 44px;
503   background: #4d7b99 url(assets/paymium_btc.png) right center no-repeat;
504   border-radius: 4px;
505   text-align: center;
506   color: #fff;
507   text-decoration: none;
508   font-weight: bold;
509 }
510 .paymium-btn:hover{
511   background-color:#5081a0;
512   text-decoration: none;
513 }
514 /* override over weighted selector*/
515 #content .paymium-btn {color: #fff;text-decoration: none;}
516 #content .paymium-btn:hover {color: #fff;text-decoration: none;}
517
518
519 /* {{{ .inlinepage */
520
521 .inlinepage {
522         padding: 0;
523         border: none;
524         margin-bottom: 1em;
525 }
526
527 .inlinepage .header {
528         border-bottom: solid #ccc 1px;
529 }
530
531 .inlinepage .inlineheader .pagedate {
532         margin-top: 0;
533         font-size: 80%;
534         font-style: normal;
535         color: #666;
536 }
537
538 /* .inlinepage }}} */
539
540 /* {{{ #footer */
541 #footer {
542         position: relative;
543         margin: 0;
544         padding: 0.5em 0;
545         text-align: center;
546         color: white;
547         background: #57075f;
548         z-index: 400;
549 }
550
551 #footer #pageinfo {
552         position: relative;
553         margin: auto;
554         padding: 0.1em 2em;
555         border-top: none;
556 }
557
558 #footer a {
559         color: white;
560 }
561
562 #footer a:hover {
563         text-decoration: underline;
564 }
565
566 #backlinks {
567         font-size: 80%;
568         margin-top: 0;
569 }
570
571 #footer #pageinfo div {
572         font-size: 80%;
573         margin-top: 0;
574         margin-bottom: 0;
575 }
576 /* #footer }}} */
577
578 /* {{{ @media print */
579 @media print {
580         .sidebar,
581         .actions,
582         .feedlink,
583         #backlinks,
584         #otherlanguages {
585                 display: none;
586         }
587
588         #footer,
589         #footer #pageinfo,
590         .page,
591         .pageheader,
592         #pagebody {
593             margin: 0;
594             padding: 0;
595             border: none;
596             box-shadow: none;
597         }
598
599         .page,
600         .pageheader {
601                 border-radius: 0;
602         }
603
604         .pageheader {
605                 position: static;
606                 height: auto;
607         }
608
609         .pageheader .header {
610                 margin-left: 0;
611                 padding-top: 2em;
612                 padding-bottom: 1em;
613         }
614
615         .pageheader .header > span,
616         .parentlinks .parentlinksep {
617                 display: inline;
618                 height: auto;
619         }
620
621         .pageheader a,
622         .pageheader .parentlinks a {
623                 color: black;
624         }
625
626         .pageheader,
627         .parentlinks a,
628         .parentlinks .parentlinksep + a + .parentlinksep + a {
629                 background: none;
630         }
631
632         .pageheader .parentlinks {
633                 display: inline;
634         }
635
636         .pageheader .title,
637         .parentlinks > a {
638                 position: static;
639         }
640
641         .parentlinks > a span {
642                 display: inline;
643         }
644
645         #content h1 {
646                 color: black;
647                 text-shadow: none;
648                 border-bottom: solid #ccc 1px;
649         }
650
651         #content a:link:after,
652         #content a:visited:after {
653                 content:" [" attr(href) "] ";
654         }
655
656         #footer {
657                 margin-top: 2em;
658                 text-align: left;
659         }
660 }
661 /* @media print }}} */