f9d8207e5dde98f8822c4cbdcaef965f0fd39708
[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 .correction
128 {
129     color: #ff0000;
130 }
131
132 div.entry-qotd P
133 {
134   padding-left: 20%;
135   margin-bottom: 0;
136 }
137
138 div.entry-qotd
139 {
140   margin-bottom: 3%;
141 }
142
143
144 .example {
145     overflow: auto;
146 }
147
148
149 #kicker {
150     padding-top: 5%;
151     font-size: 125%;
152     border-bottom: 3px #FFb580 solid;
153     font-family: verdana,helvetica;
154     margin-bottom: 2%;
155 }
156
157
158
159 #header {
160     background: transparent;
161     height: 150px;
162     padding: 0px;
163 }
164
165 #header a.logo img {
166         height: 120px;
167 }
168 #header a.logo:hover img {
169     background: transparent;
170     opacity: 0.4;
171     filter: alpha(opacity=40); /* For IE8 and earlier */
172 }
173 #header a,
174 #header a:hover {
175         background: transparent;
176 }
177
178 #cornerImage {
179     width: 128px;
180     height: 130px;
181     margin-top: -7.5em;
182     margin-left: 82%;
183     padding: 0;
184     padding-right: 2%;
185 }
186
187
188 /*
189    Navigation
190  */
191
192 /* Reset the link attributes for nav except for hover  */
193 nav a:visited,
194 a:link {
195     color: #757575;
196     font-weight: bold;
197     text-decoration: none;
198 }
199
200 nav ul,
201 ul ul.sub-menu {
202     margin: 0;
203     padding: 0;
204     z-index: 5;
205 }
206
207 nav ul {
208     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
209     padding: 0 20px;
210     border-radius: 10px;
211     background: #efefef;
212     list-style: none;
213 }
214
215
216 nav ul li,
217 ul ul.sub-menu li {
218     list-style-type: none;
219     display: inline-block;
220 }
221
222
223 /*Link Appearance*/
224 nav ul li a,
225 ul li ul.sub-menu li a {
226     text-decoration: none;
227     color: #fff;
228     padding: 10px;
229     display:inline-block;
230 }
231
232 /*Make the parent of sub-menu relative*/
233 nav ul li {
234     position: relative;
235 }
236
237 /*sub menu*/
238 nav ul li ul.sub-menu {
239     display:none;
240 }
241 nav ul li:hover ul.sub-menu {
242     display:block;
243     background: #5f6975;
244     color: #fff;
245     z-index: 99;
246     border-radius: 0px;
247     position: absolute;
248     top: 41px;
249     left: 0;
250 }
251 nav ul ul li {
252     border-bottom: 1px solid #575f6a;
253     position: relative;
254     width: 100%;
255 }
256
257 nav ul ul li a {
258     display:block !important;
259 }
260
261 nav ul ul li a:hover {
262     background: #4b545f;
263 }
264
265
266 /* The second menu line for stop menu with sub-menus.
267    This is a non-nested list.  */
268 nav.subnav {
269     margin-top: 1.5em;
270 }
271
272 nav.subnav ul {
273     display: inline-table;
274     list-style: none;
275     color: #757575;
276     position: relative;
277     box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
278     border-radius: 6px;
279     background-color: #efefef;
280 }
281
282 nav.subnav ul li a {
283     display: block;
284     font-weight: normal;
285     text-decoration: none;
286     padding: 0 30px 0 10px;
287 }
288
289 nav * li a.selected {
290     color: #0093DD;
291 }
292
293
294 /*
295     The bottom menu
296  */
297
298 #nav_bottom ul {
299     list-style: none;
300     padding-left: 0;
301     margin-left: 0;
302     float: left;
303 }
304
305 #nav_bottom li {
306     float: left;
307     padding-right: 3em;
308 }
309
310 #nav_bottom p {
311     clear: left;
312     padding-top: 1em;
313 }
314
315 #nav_bottom a {
316     clear: left;
317     font-variant: normal;
318 }
319
320
321 /*
322    Other stuff
323  */
324
325 main {
326 }
327
328 main ul {
329     list-style: square;
330     padding-left: 0;
331     margin-left: 1em;
332 }
333
334 div#content {
335   background-color: #fff;
336   margin-top: 1em;
337   padding: 1em;
338   box-shadow: 0 1px 1px rgba(154,170,207,0.1);
339 }
340
341 div#content a,
342 div#footer a {
343   color: #0093DD !important;
344 }
345
346 div.outline-text-2 {
347   margin: 0;
348   padding: 0.5em 0.5em 0 0;
349   border-top: 2px solid #DEECF9;
350   border-right: 2px solid #DEECF9;
351 }
352
353 div.outline-text-3 {
354   padding-top: 3px;
355   padding-right: 3px;
356   border-top: 1px solid #E2EEFA;
357   border-right: 1px solid #E2EEFA;
358 }
359
360 div.outline-text-2,
361 div.outline-text-3 {
362   margin-bottom: 2em;
363 }
364
365 div.outline-text-3,
366 div > h3 {
367   margin-left: 1em;
368 }
369
370 h2,
371 h3 {
372   margin-bottom: 0;
373   padding-bottom: 0;
374 }
375
376 h3 {
377   font-size: 1em;
378 }
379
380 /* Not anymore used:
381 #rightColumn {
382     float: right;
383     width: 18%;
384     margin-left: 5%;
385     margin-right: 2%;
386     margin-top: 2%;
387 }
388
389 #rightColumn ul {
390     list-style: square;
391     padding-left: 0;
392     margin-left: 1em;
393 }
394 */
395
396 .morelink {
397     font-size: smaller;
398     font-variant: normal;
399     font-weight: normal;
400     text-decoration: none;
401 }
402
403 .morelink:after {
404     content: "{more}";
405 }
406
407
408 #cpyright {
409     padding-top: 4em;
410 }
411
412 #smallnote {
413     font-size: 0.8em;
414 }
415
416 #footer {
417     border-top: 2px solid #5c6064;
418     margin-top: 5em;
419     margin-left: 5%;
420     margin-right: 5%;
421     clear: both;
422     font-size: 0.8em;
423 }
424
425
426 #checkoutSummary {
427     background-color: #f0f0f0;
428 }
429
430
431 .articleRight {
432     float: right;
433     padding: 2%;
434 }
435
436 pre {
437     border: thin black solid;
438     background-color: #efefef;
439     padding: 0.5em;
440     overflow: auto;
441 }
442
443 /* Classes used by makeinfo (manuals).  */
444
445 pre.display {
446     font-family:inherit;
447 }
448 pre.format {
449     font-family:inherit;
450 }
451 pre.smalldisplay {
452     font-family:inherit;
453     font-size:smaller;
454 }
455 pre.smallformat {
456     font-family:inherit;
457     font-size:smaller;
458 }
459 pre.smallexample {
460     font-size:smaller;
461 }
462 pre.smalllisp {
463     font-size:smaller;
464 }
465
466 span.sc {
467     font-variant:small-caps;
468 }
469 span.roman {
470     font-family:serif;
471     font-weight:normal;
472 }
473 span.sansserif {
474     font-family:sans-serif;
475     font-weight:normal;
476 }
477
478
479 /* Table stuff */
480
481 th.left {
482     text-align:center;
483 }
484
485 th.center {
486     text-align:center;
487 }
488
489 th.right {
490     text-align:center;
491 }
492
493 td.left   {
494     text-align:left;
495 }
496
497 td.center {
498     text-align:center;
499 }
500
501 td.right  {
502     text-align:right;
503 }
504
505
506 /* Tag cloudlist.  */
507
508 #tagcloudlist ul {
509     list-style: none;
510     float: left;
511 }
512
513 #tagcloudlist li {
514     float: left;
515     line-height: 130%;
516     font-variant: small-caps;
517     padding-right: 1em;
518 }
519
520 #tagcloudlist li:before  {
521     content: "\00bb\00a0";
522 }
523
524 #tagcloudlist p {
525    clear: left;
526    padding-top: 1em;
527    font-size: 0.8em;
528 }
529
530 #tagcloudlist a {
531    font-variant: normal;
532    font-size: 0.8em;
533 }
534
535
536 /* A box of logos.  */
537
538 .logobox p {
539   margin-top: 20px;
540 }
541
542 .logobox img {
543     margin-right: 20px;
544 }
545
546
547 /* Donation stuff. */
548
549 .buttonbox {
550     margin-top: 20px;
551     margin-bottom: 20px;
552     float: none;
553 }
554
555 .donate-button {
556     overflow: hidden;
557     display: inline-block;
558     background-image: linear-gradient(#28A0E5, #015E94);
559     border: 0px none;
560     padding: 1px;
561     text-decoration: none;
562     border-radius: 5px;
563     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
564     cursor: pointer;
565     line-height: 30px;
566     font-size: 14px;
567     font-weight: bold;
568     color: #fff;
569     float: left;
570     margin-right: 20px;
571     margin-bottom: 20px;
572 }
573
574 .donate-button-low {
575     overflow: hidden;
576     display: inline-block;
577     background-image: linear-gradient(#28A0E5, #015E94);
578     border: 0px none;
579     text-decoration: none;
580     border-radius: 4px;
581     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
582     cursor: pointer;
583     line-height: 20px;
584     font-size: 14px;
585     font-weight: bold;
586     color: #fff;
587     float: left;
588     margin-right: 20px;
589     margin-bottom: 20px;
590     margin-top: 5px;
591 }
592
593
594
595 /* EOF */