web: Move hover menu slightly up
[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     filter: alpha(opacity=40); /* For IE8 and earlier */
206 }
207 #header a,
208 #header a:hover {
209         background: transparent;
210 }
211
212 #cornerImage {
213     width: 128px;
214     height: 130px;
215     margin-top: -7.5em;
216     margin-left: 82%;
217     padding: 0;
218     padding-right: 2%;
219 }
220
221
222 /*
223    Navigation
224  */
225
226 /* Reset the link attributes for nav except for hover  */
227 nav a:visited,
228 a:link {
229     color: #757575;
230     font-weight: bold;
231     text-decoration: none;
232 }
233
234 nav ul,
235 ul ul.sub-menu {
236     margin: 0;
237     padding: 0;
238     z-index: 5;
239 }
240
241 nav ul {
242     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
243     padding: 0 20px;
244     border-radius: 10px;
245     background: #efefef;
246     list-style: none;
247 }
248
249
250 nav ul li,
251 ul ul.sub-menu li {
252     list-style-type: none;
253     display: inline-block;
254 }
255
256
257 /*Link Appearance*/
258 nav ul li a,
259 ul li ul.sub-menu li a {
260     text-decoration: none;
261     color: #fff;
262     padding: 10px;
263     display:inline-block;
264 }
265
266 /*Make the parent of sub-menu relative*/
267 nav ul li {
268     position: relative;
269 }
270
271 /*sub menu*/
272 nav ul li ul.sub-menu {
273     display:none;
274 }
275 nav ul li:hover ul.sub-menu {
276     display:block;
277     background: #5f6975;
278     color: #fff;
279     z-index: 99;
280     border-radius: 0px;
281     position: absolute;
282     top: 39px;
283     left: 0;
284 }
285 nav ul ul li {
286     border-bottom: 1px solid #575f6a;
287     position: relative;
288     width: 100%;
289 }
290
291 nav ul ul li a {
292     display:block !important;
293 }
294
295 nav ul ul li a:hover {
296     background: #4b545f;
297 }
298
299
300 /* The second menu line for stop menu with sub-menus.
301    This is a non-nested list.  */
302 nav.subnav {
303     margin-top: 1.5em;
304 }
305
306 nav.subnav ul {
307     display: inline-table;
308     list-style: none;
309     color: #757575;
310     position: relative;
311     box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
312     border-radius: 6px;
313     background-color: #efefef;
314 }
315
316 nav.subnav ul li a {
317     display: block;
318     font-weight: normal;
319     text-decoration: none;
320     padding: 0 30px 0 10px;
321 }
322
323 nav * li a.selected {
324     color: #0093DD;
325 }
326
327
328 /*
329     The bottom menu
330  */
331
332 #nav_bottom ul {
333     list-style: none;
334     padding-left: 0;
335     margin-left: 0;
336     float: left;
337 }
338
339 #nav_bottom li {
340     float: left;
341     padding-right: 3em;
342 }
343
344 #nav_bottom p {
345     clear: left;
346     padding-top: 1em;
347 }
348
349 #nav_bottom a {
350     clear: left;
351     font-variant: normal;
352 }
353
354
355 /*
356    Other stuff
357  */
358
359 main {
360 }
361
362 main ul {
363     list-style: square;
364     padding-left: 0;
365     margin-left: 1em;
366 }
367
368 div#content {
369   background-color: #fff;
370   margin-top: 1em;
371   padding: 1em;
372   box-shadow: 0 1px 1px rgba(154,170,207,0.1);
373 }
374
375 div#content a,
376 div#footer a {
377   color: #0093DD !important;
378 }
379
380 div.outline-text-2 {
381   margin: 0;
382   padding: 0.5em 0.5em 0 0;
383   border-top: 2px solid #DEECF9;
384   border-right: 2px solid #DEECF9;
385 }
386
387 div.outline-text-3 {
388   padding-top: 3px;
389   padding-right: 3px;
390   border-top: 1px solid #E2EEFA;
391   border-right: 1px solid #E2EEFA;
392 }
393
394 div.outline-text-2,
395 div.outline-text-3 {
396   margin-bottom: 2em;
397 }
398
399 div.outline-text-3,
400 div > h3 {
401   margin-left: 1em;
402 }
403
404 h2,
405 h3 {
406   margin-bottom: 0;
407   padding-bottom: 0;
408 }
409
410 h3 {
411   font-size: 1em;
412 }
413
414 /* Not anymore used:
415 #rightColumn {
416     float: right;
417     width: 18%;
418     margin-left: 5%;
419     margin-right: 2%;
420     margin-top: 2%;
421 }
422
423 #rightColumn ul {
424     list-style: square;
425     padding-left: 0;
426     margin-left: 1em;
427 }
428 */
429
430 .morelink {
431     font-size: smaller;
432     font-variant: normal;
433     font-weight: normal;
434     text-decoration: none;
435 }
436
437 .morelink:after {
438     content: "{more}";
439 }
440
441
442 #cpyright {
443     padding-top: 4em;
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 td.left   {
555     text-align:left;
556     padding-left: 10px;
557 }
558
559 td.center {
560     text-align:center;
561 }
562
563 td.right  {
564     text-align:right;
565     padding-right: 10px;
566 }
567
568
569 /* Tag cloudlist.  */
570
571 #tagcloudlist ul {
572     list-style: none;
573     float: left;
574 }
575
576 #tagcloudlist li {
577     float: left;
578     line-height: 130%;
579     font-variant: small-caps;
580     padding-right: 1em;
581 }
582
583 #tagcloudlist li:before  {
584     content: "\00bb\00a0";
585 }
586
587 #tagcloudlist p {
588    clear: left;
589    padding-top: 1em;
590    font-size: 0.8em;
591 }
592
593 #tagcloudlist p.doclear {
594    clear: left;
595    padding-top: 0;
596    padding-bottom: 0;
597    margin-top: 0;
598    margin-bottom: 0;
599 }
600
601 #tagcloudlist a {
602    font-variant: normal;
603    font-size: 0.8em;
604 }
605
606
607 /* A box of logos.  */
608
609 .logobox p {
610   margin-top: 20px;
611 }
612
613 .logobox img {
614     margin-right: 20px;
615 }
616
617
618 /* Used by the list of people.  */
619 .people {
620     float: left;
621     margin-top: 1em;
622     margin-right: 1em;
623     margin-bottom: 1em;
624     min-width: 120px;
625 }
626
627
628 /* Forms */
629 .inputpanel {
630     background-color: #FAEBD7;
631 }
632
633 /* Donation stuff. */
634
635 .buttonbox {
636     margin-top: 20px;
637     margin-bottom: 20px;
638     float: none;
639 }
640
641 .donate-button {
642     overflow: hidden;
643     display: inline-block;
644     background-image: linear-gradient(#28A0E5, #015E94);
645     border: 0px none;
646     padding: 1px;
647     text-decoration: none;
648     border-radius: 5px;
649     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
650     cursor: pointer;
651     line-height: 30px;
652     font-size: 14px;
653     font-weight: bold;
654     color: #fff;
655     float: left;
656     margin-right: 20px;
657     margin-bottom: 20px;
658 }
659
660 .donate-button-low {
661     overflow: hidden;
662     display: inline-block;
663     background-image: linear-gradient(#28A0E5, #015E94);
664     border: 0px none;
665     text-decoration: none;
666     border-radius: 4px;
667     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
668     cursor: pointer;
669     line-height: 20px;
670     font-size: 14px;
671     font-weight: bold;
672     color: #fff;
673     float: left;
674     margin-right: 20px;
675     margin-bottom: 20px;
676     margin-top: 5px;
677 }
678
679
680 .donation-progress {
681     border: solid 1px;
682     width: 100%;
683     height: 18px;
684     background-color: #ff0;
685 }
686
687 .donation-progress p {
688     position: relative;
689     font-size: 14px;
690     top: -18px;
691     left: 0;
692     margin-top: 0;
693     margin-left: 5px;
694     margin-right: 5px;
695     margin-bottom: 0;
696     padding-bottom: 2px;
697 }
698
699 .donation-progress-bar {
700     background-color: #0a0;
701 }
702
703
704
705 /* EOF */