b34693fab3a7b23f0999760c57795ba1fb457986
[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 /* Classes used by makeinfo (manuals).  */
489
490 pre.display {
491     font-family:inherit;
492 }
493 pre.format {
494     font-family:inherit;
495 }
496 pre.smalldisplay {
497     font-family:inherit;
498     font-size:smaller;
499 }
500 pre.smallformat {
501     font-family:inherit;
502     font-size:smaller;
503 }
504 pre.smallexample {
505     font-size:smaller;
506 }
507 pre.smalllisp {
508     font-size:smaller;
509 }
510
511 span.sc {
512     font-variant:small-caps;
513 }
514 span.roman {
515     font-family:serif;
516     font-weight:normal;
517 }
518 span.sansserif {
519     font-family:sans-serif;
520     font-weight:normal;
521 }
522
523
524 /* Table related rules as used by org-mode. */
525
526 table {
527   margin-left: 5%;
528 }
529
530
531 .left {
532     margin-left: 0px;
533     margin-right: auto;
534     text-align: left;
535 }
536
537 .center {
538     margin-left: auto;
539     margin-right: auto;
540     text-align: center;
541 }
542
543 .right {
544     margin-left: auto;
545     margin-right: 0px;
546     text-align: right;
547 }
548
549 th.left {
550     text-align:center;
551 }
552
553 th.center {
554     text-align:center;
555 }
556
557 th.right {
558     text-align:center;
559 }
560
561 th.wideright {
562     text-align:center;
563     padding-left: 25px;
564 }
565
566 td.left   {
567     text-align:left;
568     padding-left: 10px;
569 }
570
571 td.center {
572     text-align:center;
573 }
574
575 td.right  {
576     text-align:right;
577     padding-right: 10px;
578 }
579
580 td.wideright  {
581     text-align: right;
582     padding-left: 25px;
583 }
584
585
586 /* Footnotes for org-mode.  */
587
588 h2.footnotes {
589     font-size: 100%;
590 }
591
592 #footnotes {
593     font-size: 75%;
594 }
595
596 .footnum {
597   font-size: 1em;
598   float: left;
599 }
600
601 /* Tag cloudlist.  */
602
603 #tagcloudlist ul {
604     list-style: none;
605     float: left;
606 }
607
608 #tagcloudlist li {
609     float: left;
610     line-height: 130%;
611     font-variant: small-caps;
612     padding-right: 1em;
613 }
614
615 #tagcloudlist li:before  {
616     content: "\00bb\00a0";
617 }
618
619 #tagcloudlist p {
620    clear: left;
621    padding-top: 1em;
622    font-size: 0.8em;
623 }
624
625 #tagcloudlist p.doclear {
626    clear: left;
627    padding-top: 0;
628    padding-bottom: 0;
629    margin-top: 0;
630    margin-bottom: 0;
631 }
632
633 #tagcloudlist a {
634    font-variant: normal;
635    font-size: 0.8em;
636 }
637
638
639 /* A box of logos.  */
640
641 .logobox p {
642   margin-top: 20px;
643 }
644
645 .logobox img {
646     margin-right: 20px;
647 }
648
649 /* A box used for small graphics at the page bottom.
650    The images are right aligned, a single P is used
651    to clear the alignment.  */
652 .footerbox {
653   margin-top: 12px;
654   margin-bottom: 5px;
655 }
656
657 .footerbox img {
658     float: right;
659 }
660
661 .footerbox p {
662     margin-top: 0px;
663     margin-bottom: 0px;
664     clear: both;
665 }
666
667
668 /* Used by the list of people.  */
669 .people {
670     float: left;
671     margin-top: 1em;
672     margin-right: 1em;
673     margin-bottom: 1em;
674     min-width: 120px;
675 }
676
677
678 /* Forms */
679 .inputpanel {
680     background-color: #FAEBD7;
681 }
682
683 /* Donation stuff. */
684
685 .buttonbox {
686     margin-top: 20px;
687     margin-bottom: 20px;
688     float: none;
689 }
690
691 .donate-button {
692     overflow: hidden;
693     display: inline-block;
694     background-image: linear-gradient(#28A0E5, #015E94);
695 /*    border: 0px none; */
696     padding-left: 10px;
697     padding-right: 10px;
698     text-decoration: none;
699     border-radius: 5px;
700     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
701     cursor: pointer;
702     line-height: 30px;
703     font-size: 14px;
704     font-weight: bold;
705     color: #fff;
706     float: left;
707     margin-right: 20px;
708     margin-bottom: 20px;
709 }
710
711 .donate-button-low {
712     overflow: hidden;
713     display: inline-block;
714     background-image: linear-gradient(#28A0E5, #015E94);
715 /*    border: 0px none;*/
716     padding-left: 10px;
717     padding-right: 10px;
718     text-decoration: none;
719     border-radius: 4px;
720     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
721     cursor: pointer;
722     line-height: 20px;
723     font-size: 14px;
724     font-weight: bold;
725     color: #fff;
726     float: left;
727     margin-right: 20px;
728     margin-bottom: 20px;
729     margin-top: 5px;
730 }
731
732
733 .donation-progress {
734     border: solid 1px;
735     width: 100%;
736     height: 18px;
737     background-color: #ff0;
738 }
739
740 .donation-progress p {
741     position: relative;
742     font-size: 14px;
743     top: -18px;
744     left: 0;
745     margin-top: 0;
746     margin-left: 5px;
747     margin-right: 5px;
748     margin-bottom: 0;
749     padding-bottom: 2px;
750 }
751
752 .donation-progress-bar {
753     background-color: #0a0;
754 }
755
756
757
758 /* EOF */