tools: First take on a new FTP indexer
[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 /* Use an outer div with this class to move an org figure to the left.
139    Note that org uses a fixed class for a figure and we use this hack
140    to override it. */
141 div.figure-left {
142     float: left;
143 }
144
145 div.figure {
146     float: right;
147     margin-right:0 !important;
148 }
149
150 .figure p {
151     margin: 0;
152     padding: 0.5em 0 0.2em 0;
153 }
154
155 .figure-number {
156   display: none !important;
157 }
158
159
160
161 .underline {
162     text-decoration: underline;
163 }
164
165 .example {
166     overflow: auto;
167 }
168
169 .correction {
170     color: #ff0000;
171 }
172
173
174 .postdate {
175     font-weight: normal;
176     font-style: italic;
177 }
178
179
180 div.entry-qotd p {
181     padding-left: 20%;
182     margin-bottom: 0;
183 }
184
185 div.entry-qotd {
186     margin-bottom: 3%;
187 }
188
189
190 #kicker {
191     padding-top: 5%;
192     font-size: 125%;
193     border-bottom: 3px #FFb580 solid;
194     font-family: verdana,helvetica;
195     margin-bottom: 2%;
196 }
197
198
199
200 #header {
201     background: transparent;
202     height: 150px;
203     padding: 0px;
204 }
205
206 #header a.logo img {
207         height: 120px;
208 }
209 #header a.logo:hover img {
210     background: transparent;
211     opacity: 0.4;
212 }
213 #header a,
214 #header a:hover {
215         background: transparent;
216 }
217
218 #cornerImage {
219     width: 128px;
220     height: 130px;
221     margin-top: -7.5em;
222     margin-left: 82%;
223     padding: 0;
224     padding-right: 2%;
225 }
226
227
228 /*
229    Navigation
230  */
231
232 /* Reset the link attributes for nav except for hover  */
233 nav a:visited,
234 a:link {
235     color: #757575;
236     font-weight: bold;
237     text-decoration: none;
238 }
239
240 nav ul,
241 ul ul.sub-menu {
242     margin: 0;
243     padding: 0;
244     z-index: 5;
245 }
246
247 nav ul {
248     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
249     padding: 0 20px;
250     border-radius: 10px;
251     background: #efefef;
252     list-style: none;
253 }
254
255
256 nav ul li,
257 ul ul.sub-menu li {
258     list-style-type: none;
259     display: inline-block;
260 }
261
262
263 /*Link Appearance*/
264 nav ul li a,
265 ul li ul.sub-menu li a {
266     text-decoration: none;
267     color: #fff;
268     padding: 10px;
269     display:inline-block;
270 }
271
272 /*Make the parent of sub-menu relative*/
273 nav ul li {
274     position: relative;
275 }
276
277 /*sub menu*/
278 nav ul li ul.sub-menu {
279     display:none;
280 }
281 nav ul li:hover ul.sub-menu {
282     display:block;
283     background: #5f6975;
284     color: #fff;
285     z-index: 99;
286     border-radius: 0px;
287     position: absolute;
288     top: 37px;
289     left: 0;
290 }
291 nav ul ul li {
292     border-bottom: 1px solid #575f6a;
293     position: relative;
294     width: 100%;
295 }
296
297 nav ul ul li a {
298     display:block !important;
299 }
300
301 nav ul ul li a:hover {
302     background: #4b545f;
303 }
304
305
306 /* The second menu line for stop menu with sub-menus.
307    This is a non-nested list.  */
308 nav.subnav {
309     margin-top: 1.5em;
310 }
311
312 nav.subnav ul {
313     display: inline-table;
314     list-style: none;
315     color: #757575;
316     position: relative;
317     box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
318     border-radius: 6px;
319     background-color: #efefef;
320 }
321
322 nav.subnav ul li a {
323     display: block;
324     font-weight: normal;
325     text-decoration: none;
326     padding: 0 30px 0 10px;
327 }
328
329 nav * li a.selected {
330     color: #0093DD;
331 }
332
333
334 /*
335     The bottom menu
336  */
337
338 #nav_bottom ul {
339     list-style: none;
340     padding-left: 0;
341     margin-left: 0;
342     float: left;
343 }
344
345 #nav_bottom li {
346     float: left;
347     padding-right: 3em;
348 }
349
350 #nav_bottom p {
351     clear: left;
352     padding-top: 1em;
353 }
354
355 #nav_bottom a {
356     clear: left;
357     font-variant: normal;
358 }
359
360
361 /*
362    Other stuff
363  */
364
365 main {
366 }
367
368 main ul {
369     list-style: square;
370     padding-left: 0;
371     margin-left: 1em;
372 }
373
374 div#content {
375   background-color: #fff;
376   margin-top: 1em;
377   padding: 1em;
378   box-shadow: 0 1px 1px rgba(154,170,207,0.1);
379 }
380
381 div#content a,
382 div#footer a {
383   color: #0093DD !important;
384 }
385
386 div.outline-text-2 {
387   margin: 0;
388   padding: 0.5em 0.5em 0 0;
389   border-top: 2px solid #DEECF9;
390   border-right: 2px solid #DEECF9;
391 }
392
393 div.outline-text-3 {
394   padding-top: 3px;
395   padding-right: 3px;
396   border-top: 1px solid #E2EEFA;
397   border-right: 1px solid #E2EEFA;
398 }
399
400 div.outline-text-2,
401 div.outline-text-3 {
402   margin-bottom: 2em;
403 }
404
405 div.outline-text-3,
406 div > h3 {
407   /*margin-left: 1em;*/
408 }
409
410 h2,
411 h3 {
412   margin-bottom: 0;
413   padding-bottom: 0;
414 }
415
416 h3 {
417   font-size: 1em;
418 }
419
420 /* Not anymore used:
421 #rightColumn {
422     float: right;
423     width: 18%;
424     margin-left: 5%;
425     margin-right: 2%;
426     margin-top: 2%;
427 }
428
429 #rightColumn ul {
430     list-style: square;
431     padding-left: 0;
432     margin-left: 1em;
433 }
434 */
435
436 .morelink {
437     font-size: smaller;
438     font-variant: normal;
439     font-weight: normal;
440     text-decoration: none;
441 }
442
443 .morelink:after {
444     content: "{more}";
445 }
446
447
448 /* Note that the .footerbox takes care of the padding. */
449 #cpyright {
450     padding-top: 0em;
451 }
452
453 #smallnote {
454     font-size: 0.8em;
455 }
456
457 .smallnote {
458     font-size: 0.8em;
459 }
460
461 #footer {
462     border-top: 2px solid #5c6064;
463     margin-top: 5em;
464     margin-left: 5%;
465     margin-right: 5%;
466     clear: both;
467     font-size: 0.8em;
468 }
469
470
471 #checkoutSummary {
472     background-color: #f0f0f0;
473 }
474
475
476 .articleRight {
477     float: right;
478     padding: 2%;
479 }
480
481 pre {
482     border: thin black solid;
483     background-color: #efefef;
484     padding: 0.5em;
485     overflow: auto;
486 }
487
488 pre.ftp-readme {
489     border: none;
490     background-color: #ffffff;
491 }
492
493
494 /* Classes used by makeinfo (manuals).  */
495
496 pre.display {
497     font-family:inherit;
498 }
499 pre.format {
500     font-family:inherit;
501 }
502 pre.smalldisplay {
503     font-family:inherit;
504     font-size:smaller;
505 }
506 pre.smallformat {
507     font-family:inherit;
508     font-size:smaller;
509 }
510 pre.smallexample {
511     font-size:smaller;
512 }
513 pre.smalllisp {
514     font-size:smaller;
515 }
516
517 span.sc {
518     font-variant:small-caps;
519 }
520 span.roman {
521     font-family:serif;
522     font-weight:normal;
523 }
524 span.sansserif {
525     font-family:sans-serif;
526     font-weight:normal;
527 }
528
529
530 /* Table related rules as used by org-mode. */
531
532 table {
533   margin-left: 5%;
534 }
535
536
537 .left {
538     margin-left: 0px;
539     margin-right: auto;
540     text-align: left;
541 }
542
543 .center {
544     margin-left: auto;
545     margin-right: auto;
546     text-align: center;
547 }
548
549 .right {
550     margin-left: auto;
551     margin-right: 0px;
552     text-align: right;
553 }
554
555 th.left {
556     text-align:center;
557 }
558
559 th.center {
560     text-align:center;
561 }
562
563 th.right {
564     text-align:center;
565 }
566
567 th.wideright {
568     text-align:center;
569     padding-left: 25px;
570 }
571
572 td.left   {
573     text-align:left;
574     padding-left: 10px;
575 }
576
577 td.center {
578     text-align:center;
579 }
580
581 td.right  {
582     text-align:right;
583     padding-right: 10px;
584 }
585
586 td.wideright  {
587     text-align: right;
588     padding-left: 25px;
589 }
590
591
592 /* Footnotes for org-mode.  */
593
594 h2.footnotes {
595     font-size: 100%;
596 }
597
598 #footnotes {
599     font-size: 75%;
600 }
601
602 .footnum {
603   font-size: 1em;
604   float: left;
605 }
606
607 /* Tag cloudlist.  */
608
609 #tagcloudlist ul {
610     list-style: none;
611     float: left;
612 }
613
614 #tagcloudlist li {
615     float: left;
616     line-height: 130%;
617     font-variant: small-caps;
618     padding-right: 1em;
619 }
620
621 #tagcloudlist li:before  {
622     content: "\00bb\00a0";
623 }
624
625 #tagcloudlist p {
626    clear: left;
627    padding-top: 1em;
628    font-size: 0.8em;
629 }
630
631 #tagcloudlist p.doclear {
632    clear: left;
633    padding-top: 0;
634    padding-bottom: 0;
635    margin-top: 0;
636    margin-bottom: 0;
637 }
638
639 #tagcloudlist a {
640    font-variant: normal;
641    font-size: 0.8em;
642 }
643
644
645 /* A box of logos.  */
646
647 .logobox p {
648   margin-top: 20px;
649 }
650
651 .logobox img {
652     margin-right: 20px;
653 }
654
655 /* A box used for small graphics at the page bottom.
656    The images are right aligned, a single P is used
657    to clear the alignment.  */
658 .footerbox {
659   margin-top: 12px;
660   margin-bottom: 5px;
661 }
662
663 .footerbox img {
664     float: right;
665 }
666
667 .footerbox p {
668     margin-top: 0px;
669     margin-bottom: 0px;
670     clear: both;
671 }
672
673
674 /* Used by the list of people.  */
675 .people {
676     float: left;
677     margin-top: 1em;
678     margin-right: 1em;
679     margin-bottom: 1em;
680     min-width: 120px;
681 }
682
683
684 /* Forms */
685 .inputpanel {
686     background-color: #FAEBD7;
687 }
688
689 /* Donation stuff. */
690
691 .buttonbox {
692     margin-top: 20px;
693     margin-bottom: 20px;
694     float: none;
695 }
696
697 .donate-button {
698     overflow: hidden;
699     display: inline-block;
700     background-image: linear-gradient(#28A0E5, #015E94);
701 /*    border: 0px none; */
702     padding-left: 10px;
703     padding-right: 10px;
704     text-decoration: none;
705     border-radius: 5px;
706     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
707     cursor: pointer;
708     line-height: 30px;
709     font-size: 14px;
710     font-weight: bold;
711     color: #fff;
712     float: left;
713     margin-right: 20px;
714     margin-bottom: 20px;
715 }
716
717 .donate-button-low {
718     overflow: hidden;
719     display: inline-block;
720     background-image: linear-gradient(#28A0E5, #015E94);
721 /*    border: 0px none;*/
722     padding-left: 10px;
723     padding-right: 10px;
724     text-decoration: none;
725     border-radius: 4px;
726     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
727     cursor: pointer;
728     line-height: 20px;
729     font-size: 14px;
730     font-weight: bold;
731     color: #fff;
732     float: left;
733     margin-right: 20px;
734     margin-bottom: 20px;
735     margin-top: 5px;
736 }
737
738
739 .donation-progress {
740     border: solid 1px;
741     width: 100%;
742     height: 18px;
743     background-color: #ff0;
744 }
745
746 .donation-progress p {
747     position: relative;
748     font-size: 14px;
749     top: -18px;
750     left: 0;
751     margin-top: 0;
752     margin-left: 5px;
753     margin-right: 5px;
754     margin-bottom: 0;
755     padding-bottom: 2px;
756 }
757
758 .donation-progress-bar {
759     background-color: #0a0;
760 }
761
762
763
764 /* EOF */