cgi: Fix checkout pages.
[gnupg-doc.git] / web / share / site.css
1 /* site.css
2  *
3  * This code is Copyright 1998--2013 The GnuPG Project and licensed
4  * under a Creative Commons Attribution-ShareAlike 3.0 Unported
5  * License.  See the file copying.org for details.
6  */
7
8 /*  Color names as used by lolo's old site design:
9  *   gray              #5c6064
10  *   lightblue         #d0dce8
11  *   darkpurple        #784c6c
12  *   lightpurple       #f0f0fc
13  *   grayedlightpurple #ebebf4
14  */
15
16 body {
17   background: #f0f0fc;
18   font-family: "Proxima Nova Regular","Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
19   font-weight: 400;
20   height: 100%;
21 }
22
23 /*
24 div#wrapper {
25   background: transparent url(/share/email-envelope.png) top right no-repeat;
26 }
27 */
28
29 div#wrapper,
30 div#footer {
31     max-width: 850px;
32     margin: auto;
33 }
34
35
36 h1,
37 h2,
38 h3 {
39   color: #000;
40   font-family: "Helvetica Neue",Arial,sans-serif;
41   font-weight: bold;
42   font-variant: small-caps;
43   letter-spacing: 0.1em;
44 }
45
46 h1,
47 h2 {
48   font-size: x-large;
49 }
50
51 h3 {
52         font-size: 1em;
53 }
54
55
56 /*
57    Links
58  */
59
60
61 a:link {
62 /*  color: #784c6c;*/
63   font-weight: bold;
64   text-decoration: none;
65 }
66
67 a:hover {
68   background-color: #d0dce8;
69   font-weight: bold;
70   text-decoration: none;
71 }
72
73 a:visited {
74 /*  color: #5c6064; */
75   font-weight: bold;
76   text-decoration: none;
77 }
78
79 a.img:hover {
80   background-color: #f0f0fc;
81 }
82
83
84 /*
85    Raise attention
86  */
87
88 li.important,
89 span.important {
90   color: red;
91 }
92
93 div.urgent {
94   width: 85%;
95   text-align: center;
96   border: solid red;
97   font-weight: bold;
98 }
99
100 .ii {
101   display: none !important;
102 }
103
104
105 /*
106    Other elements as commonly used by org-mode
107  */
108 p {
109   margin-top: 1%;
110 }
111
112
113 img {
114     border-width: 0;
115 }
116
117 img.lfloat {
118     float: left;
119     margin-right: 1em;
120 }
121
122 img.rfloat {
123     float: right;
124     margin-left: 1em;
125 }
126
127
128 /* The figure class is used by the blog entries.  We use display
129    to suppress the figure number inserted by org-mode. */
130 .figure {
131     border: 1px solid #808080;
132     margin: 0 1em 0.5em 0.5em;
133     padding: 0.5em;
134     text-align: center;
135 }
136
137
138 div.figure {
139     float: right;
140     margin-right:0 !important;
141 }
142
143 .figure p {
144     margin: 0;
145     padding: 0.5em 0 0.2em 0;
146 }
147
148 .figure-number {
149   display: none !important;
150 }
151
152
153
154 .underline {
155     text-decoration: underline;
156 }
157
158 .example {
159     overflow: auto;
160 }
161
162 .correction {
163     color: #ff0000;
164 }
165
166
167 .postdate {
168     font-weight: normal;
169     font-style: italic;
170 }
171
172
173 div.entry-qotd p {
174     padding-left: 20%;
175     margin-bottom: 0;
176 }
177
178 div.entry-qotd {
179     margin-bottom: 3%;
180 }
181
182
183 #kicker {
184     padding-top: 5%;
185     font-size: 125%;
186     border-bottom: 3px #FFb580 solid;
187     font-family: verdana,helvetica;
188     margin-bottom: 2%;
189 }
190
191
192
193 #header {
194     background: transparent;
195     height: 150px;
196     padding: 0px;
197 }
198
199 #header a.logo img {
200         height: 120px;
201 }
202 #header a.logo:hover img {
203     background: transparent;
204     opacity: 0.4;
205 }
206 #header a,
207 #header a:hover {
208         background: transparent;
209 }
210
211 #cornerImage {
212     width: 128px;
213     height: 130px;
214     margin-top: -7.5em;
215     margin-left: 82%;
216     padding: 0;
217     padding-right: 2%;
218 }
219
220
221 /*
222    Navigation
223  */
224
225 /* Reset the link attributes for nav except for hover  */
226 nav a:visited,
227 a:link {
228     color: #757575;
229     font-weight: bold;
230     text-decoration: none;
231 }
232
233 nav ul,
234 ul ul.sub-menu {
235     margin: 0;
236     padding: 0;
237     z-index: 5;
238 }
239
240 nav ul {
241     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
242     padding: 0 20px;
243     border-radius: 10px;
244     background: #efefef;
245     list-style: none;
246 }
247
248
249 nav ul li,
250 ul ul.sub-menu li {
251     list-style-type: none;
252     display: inline-block;
253 }
254
255
256 /*Link Appearance*/
257 nav ul li a,
258 ul li ul.sub-menu li a {
259     text-decoration: none;
260     color: #fff;
261     padding: 10px;
262     display:inline-block;
263 }
264
265 /*Make the parent of sub-menu relative*/
266 nav ul li {
267     position: relative;
268 }
269
270 /*sub menu*/
271 nav ul li ul.sub-menu {
272     display:none;
273 }
274 nav ul li:hover ul.sub-menu {
275     display:block;
276     background: #5f6975;
277     color: #fff;
278     z-index: 99;
279     border-radius: 0px;
280     position: absolute;
281     top: 37px;
282     left: 0;
283 }
284 nav ul ul li {
285     border-bottom: 1px solid #575f6a;
286     position: relative;
287     width: 100%;
288 }
289
290 nav ul ul li a {
291     display:block !important;
292 }
293
294 nav ul ul li a:hover {
295     background: #4b545f;
296 }
297
298
299 /* The second menu line for stop menu with sub-menus.
300    This is a non-nested list.  */
301 nav.subnav {
302     margin-top: 1.5em;
303 }
304
305 nav.subnav ul {
306     display: inline-table;
307     list-style: none;
308     color: #757575;
309     position: relative;
310     box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
311     border-radius: 6px;
312     background-color: #efefef;
313 }
314
315 nav.subnav ul li a {
316     display: block;
317     font-weight: normal;
318     text-decoration: none;
319     padding: 0 30px 0 10px;
320 }
321
322 nav * li a.selected {
323     color: #0093DD;
324 }
325
326
327 /*
328     The bottom menu
329  */
330
331 #nav_bottom ul {
332     list-style: none;
333     padding-left: 0;
334     margin-left: 0;
335     float: left;
336 }
337
338 #nav_bottom li {
339     float: left;
340     padding-right: 3em;
341 }
342
343 #nav_bottom p {
344     clear: left;
345     padding-top: 1em;
346 }
347
348 #nav_bottom a {
349     clear: left;
350     font-variant: normal;
351 }
352
353
354 /*
355    Other stuff
356  */
357
358 main {
359 }
360
361 main ul {
362     list-style: square;
363     padding-left: 0;
364     margin-left: 1em;
365 }
366
367 div#content {
368   background-color: #fff;
369   margin-top: 1em;
370   padding: 1em;
371   box-shadow: 0 1px 1px rgba(154,170,207,0.1);
372 }
373
374 div#content a,
375 div#footer a {
376   color: #0093DD !important;
377 }
378
379 div.outline-text-2 {
380   margin: 0;
381   padding: 0.5em 0.5em 0 0;
382   border-top: 2px solid #DEECF9;
383   border-right: 2px solid #DEECF9;
384 }
385
386 div.outline-text-3 {
387   padding-top: 3px;
388   padding-right: 3px;
389   border-top: 1px solid #E2EEFA;
390   border-right: 1px solid #E2EEFA;
391 }
392
393 div.outline-text-2,
394 div.outline-text-3 {
395   margin-bottom: 2em;
396 }
397
398 div.outline-text-3,
399 div > h3 {
400   /*margin-left: 1em;*/
401 }
402
403 h2,
404 h3 {
405   margin-bottom: 0;
406   padding-bottom: 0;
407 }
408
409 h3 {
410   font-size: 1em;
411 }
412
413 /* Not anymore used:
414 #rightColumn {
415     float: right;
416     width: 18%;
417     margin-left: 5%;
418     margin-right: 2%;
419     margin-top: 2%;
420 }
421
422 #rightColumn ul {
423     list-style: square;
424     padding-left: 0;
425     margin-left: 1em;
426 }
427 */
428
429 .morelink {
430     font-size: smaller;
431     font-variant: normal;
432     font-weight: normal;
433     text-decoration: none;
434 }
435
436 .morelink:after {
437     content: "{more}";
438 }
439
440
441 /* Note that the .footerbox takes care of the padding. */
442 #cpyright {
443     padding-top: 0em;
444 }
445
446 #smallnote {
447     font-size: 0.8em;
448 }
449
450 .smallnote {
451     font-size: 0.8em;
452 }
453
454 #footer {
455     border-top: 2px solid #5c6064;
456     margin-top: 5em;
457     margin-left: 5%;
458     margin-right: 5%;
459     clear: both;
460     font-size: 0.8em;
461 }
462
463
464 #checkoutSummary {
465     background-color: #f0f0f0;
466 }
467
468
469 .articleRight {
470     float: right;
471     padding: 2%;
472 }
473
474 pre {
475     border: thin black solid;
476     background-color: #efefef;
477     padding: 0.5em;
478     overflow: auto;
479 }
480
481 /* Classes used by makeinfo (manuals).  */
482
483 pre.display {
484     font-family:inherit;
485 }
486 pre.format {
487     font-family:inherit;
488 }
489 pre.smalldisplay {
490     font-family:inherit;
491     font-size:smaller;
492 }
493 pre.smallformat {
494     font-family:inherit;
495     font-size:smaller;
496 }
497 pre.smallexample {
498     font-size:smaller;
499 }
500 pre.smalllisp {
501     font-size:smaller;
502 }
503
504 span.sc {
505     font-variant:small-caps;
506 }
507 span.roman {
508     font-family:serif;
509     font-weight:normal;
510 }
511 span.sansserif {
512     font-family:sans-serif;
513     font-weight:normal;
514 }
515
516
517 /* Table related rules as used by org-mode. */
518
519 table {
520   margin-left: 5%;
521 }
522
523
524 .left {
525     margin-left: 0px;
526     margin-right: auto;
527     text-align: left;
528 }
529
530 .center {
531     margin-left: auto;
532     margin-right: auto;
533     text-align: center;
534 }
535
536 .right {
537     margin-left: auto;
538     margin-right: 0px;
539     text-align: right;
540 }
541
542 th.left {
543     text-align:center;
544 }
545
546 th.center {
547     text-align:center;
548 }
549
550 th.right {
551     text-align:center;
552 }
553
554 th.wideright {
555     text-align:center;
556     padding-left: 25px;
557 }
558
559 td.left   {
560     text-align:left;
561     padding-left: 10px;
562 }
563
564 td.center {
565     text-align:center;
566 }
567
568 td.right  {
569     text-align:right;
570     padding-right: 10px;
571 }
572
573 td.wideright  {
574     text-align: right;
575     padding-left: 25px;
576 }
577
578
579 /* Footnotes for org-mode.  */
580
581 h2.footnotes {
582     font-size: 100%;
583 }
584
585 #footnotes {
586     font-size: 75%;
587 }
588
589 .footnum {
590   font-size: 1em;
591   float: left;
592 }
593
594 /* Tag cloudlist.  */
595
596 #tagcloudlist ul {
597     list-style: none;
598     float: left;
599 }
600
601 #tagcloudlist li {
602     float: left;
603     line-height: 130%;
604     font-variant: small-caps;
605     padding-right: 1em;
606 }
607
608 #tagcloudlist li:before  {
609     content: "\00bb\00a0";
610 }
611
612 #tagcloudlist p {
613    clear: left;
614    padding-top: 1em;
615    font-size: 0.8em;
616 }
617
618 #tagcloudlist p.doclear {
619    clear: left;
620    padding-top: 0;
621    padding-bottom: 0;
622    margin-top: 0;
623    margin-bottom: 0;
624 }
625
626 #tagcloudlist a {
627    font-variant: normal;
628    font-size: 0.8em;
629 }
630
631
632 /* A box of logos.  */
633
634 .logobox p {
635   margin-top: 20px;
636 }
637
638 .logobox img {
639     margin-right: 20px;
640 }
641
642 /* A box used for small graphics at the page bottom.
643    The images are right aligned, a single P is used
644    to clear the alignment.  */
645 .footerbox {
646   margin-top: 12px;
647   margin-bottom: 5px;
648 }
649
650 .footerbox img {
651     float: right;
652 }
653
654 .footerbox p {
655     margin-top: 0px;
656     margin-bottom: 0px;
657     clear: both;
658 }
659
660
661 /* Used by the list of people.  */
662 .people {
663     float: left;
664     margin-top: 1em;
665     margin-right: 1em;
666     margin-bottom: 1em;
667     min-width: 120px;
668 }
669
670
671 /* Forms */
672 .inputpanel {
673     background-color: #FAEBD7;
674 }
675
676 /* Donation stuff. */
677
678 .buttonbox {
679     margin-top: 20px;
680     margin-bottom: 20px;
681     float: none;
682 }
683
684 .donate-button {
685     overflow: hidden;
686     display: inline-block;
687     background-image: linear-gradient(#28A0E5, #015E94);
688 /*    border: 0px none; */
689     padding-left: 10px;
690     padding-right: 10px;
691     text-decoration: none;
692     border-radius: 5px;
693     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
694     cursor: pointer;
695     line-height: 30px;
696     font-size: 14px;
697     font-weight: bold;
698     color: #fff;
699     float: left;
700     margin-right: 20px;
701     margin-bottom: 20px;
702 }
703
704 .donate-button-low {
705     overflow: hidden;
706     display: inline-block;
707     background-image: linear-gradient(#28A0E5, #015E94);
708 /*    border: 0px none;*/
709     padding-left: 10px;
710     padding-right: 10px;
711     text-decoration: none;
712     border-radius: 4px;
713     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
714     cursor: pointer;
715     line-height: 20px;
716     font-size: 14px;
717     font-weight: bold;
718     color: #fff;
719     float: left;
720     margin-right: 20px;
721     margin-bottom: 20px;
722     margin-top: 5px;
723 }
724
725
726 .donation-progress {
727     border: solid 1px;
728     width: 100%;
729     height: 18px;
730     background-color: #ff0;
731 }
732
733 .donation-progress p {
734     position: relative;
735     font-size: 14px;
736     top: -18px;
737     left: 0;
738     margin-top: 0;
739     margin-left: 5px;
740     margin-right: 5px;
741     margin-bottom: 0;
742     padding-bottom: 2px;
743 }
744
745 .donation-progress-bar {
746     background-color: #0a0;
747 }
748
749
750
751 /* EOF */