blob: 8ea8dac73032b26c8cbeb995c146ea6aceb61240 [file] [log] [blame]
Patrick Williamsc124f4f2015-09-15 14:41:29 -05001/*
2 Generic XHTML / DocBook XHTML CSS Stylesheet.
3
4 Browser wrangling and typographic design by
5 Oyvind Kolas / pippin@gimp.org
6
7 Customised for Poky by
8 Matthew Allum / mallum@o-hand.com
9
10 Thanks to:
11 Liam R. E. Quin
12 William Skaggs
13 Jakub Steiner
14
15 Structure
16 ---------
17
18 The stylesheet is divided into the following sections:
19
20 Positioning
21 Margins, paddings, width, font-size, clearing.
22 Decorations
23 Borders, style
24 Colors
25 Colors
26 Graphics
27 Graphical backgrounds
28 Nasty IE tweaks
29 Workarounds needed to make it work in internet explorer,
30 currently makes the stylesheet non validating, but up until
31 this point it is validating.
32 Mozilla extensions
33 Transparency for footer
34 Rounded corners on boxes
35
36*/
37
38
39 /*************** /
40 / Positioning /
41/ ***************/
42
43body {
44 font-family: Verdana, Sans, sans-serif;
45
46 min-width: 640px;
47 width: 80%;
48 margin: 0em auto;
49 padding: 2em 5em 5em 5em;
50 color: #333;
51}
52
53h1,h2,h3,h4,h5,h6,h7 {
54 font-family: Arial, Sans;
55 color: #00557D;
56 clear: both;
57}
58
59h1 {
60 font-size: 2em;
61 text-align: left;
62 padding: 0em 0em 0em 0em;
63 margin: 2em 0em 0em 0em;
64}
65
66h2.subtitle {
67 margin: 0.10em 0em 3.0em 0em;
68 padding: 0em 0em 0em 0em;
69 font-size: 1.8em;
70 padding-left: 20%;
71 font-weight: normal;
72 font-style: italic;
73}
74
75h2 {
76 margin: 2em 0em 0.66em 0em;
77 padding: 0.5em 0em 0em 0em;
78 font-size: 1.5em;
79 font-weight: bold;
80}
81
82h3.subtitle {
83 margin: 0em 0em 1em 0em;
84 padding: 0em 0em 0em 0em;
85 font-size: 142.14%;
86 text-align: right;
87}
88
89h3 {
90 margin: 1em 0em 0.5em 0em;
91 padding: 1em 0em 0em 0em;
92 font-size: 140%;
93 font-weight: bold;
94}
95
96h4 {
97 margin: 1em 0em 0.5em 0em;
98 padding: 1em 0em 0em 0em;
99 font-size: 120%;
100 font-weight: bold;
101}
102
103h5 {
104 margin: 1em 0em 0.5em 0em;
105 padding: 1em 0em 0em 0em;
106 font-size: 110%;
107 font-weight: bold;
108}
109
110h6 {
111 margin: 1em 0em 0em 0em;
112 padding: 1em 0em 0em 0em;
113 font-size: 110%;
114 font-weight: bold;
115}
116
117.authorgroup {
118 background-color: transparent;
119 background-repeat: no-repeat;
120 padding-top: 256px;
121 background-image: url("figures/poky-title.png");
122 background-position: left top;
123 margin-top: -256px;
124 padding-right: 50px;
125 margin-left: 0px;
126 text-align: right;
127 width: 740px;
128}
129
130h3.author {
131 margin: 0em 0me 0em 0em;
132 padding: 0em 0em 0em 0em;
133 font-weight: normal;
134 font-size: 100%;
135 color: #333;
136 clear: both;
137}
138
139.author tt.email {
140 font-size: 66%;
141}
142
143.titlepage hr {
144 width: 0em;
145 clear: both;
146}
147
148.revhistory {
149 padding-top: 2em;
150 clear: both;
151}
152
153.toc,
154.list-of-tables,
155.list-of-examples,
156.list-of-figures {
157 padding: 1.33em 0em 2.5em 0em;
158 color: #00557D;
159}
160
161.toc p,
162.list-of-tables p,
163.list-of-figures p,
164.list-of-examples p {
165 padding: 0em 0em 0em 0em;
166 padding: 0em 0em 0.3em;
167 margin: 1.5em 0em 0em 0em;
168}
169
170.toc p b,
171.list-of-tables p b,
172.list-of-figures p b,
173.list-of-examples p b{
174 font-size: 100.0%;
175 font-weight: bold;
176}
177
178.toc dl,
179.list-of-tables dl,
180.list-of-figures dl,
181.list-of-examples dl {
182 margin: 0em 0em 0.5em 0em;
183 padding: 0em 0em 0em 0em;
184}
185
186.toc dt {
187 margin: 0em 0em 0em 0em;
188 padding: 0em 0em 0em 0em;
189}
190
191.toc dd {
192 margin: 0em 0em 0em 2.6em;
193 padding: 0em 0em 0em 0em;
194}
195
196/* Use this set when you decide to get the images in for variables.
197
198div.glossary dl,
199div.variablelist dl {
200}
201
202.glossary dl dt,
203.variablelist dl dt,
204.variablelist dl dt span.term {
205 font-weight: normal;
206 width: 0em;
207 text-align: right;
208}
209
210.variablelist dl dt {
211 margin-top: 0.5em;
212}
213
214.glossary dl dd,
215.variablelist dl dd {
216 margin-top: 0em;
217 margin-left: 15.5em;
218 margin-bottom: 2em;
219}
220
221.glossary dd p,
222.variablelist dd p {
223 margin-top: 0em;
224 margin-bottom: 1em;
225}
226
227.glossdeffirst {
228 text-indent: -70px;
229}
230*/
231
232/* Start of non-image set */
233
234div.glossary dl,
235div.variablelist dl {
236}
237
238.glossary dl dt,
239.variablelist dl dt,
240.variablelist dl dt span.term {
241 font-weight: normal;
242 width: 20em;
243 text-align: right;
244}
245
246.variablelist dl dt {
247 margin-top: 0.5em;
248}
249
250.glossary dl dd,
251.variablelist dl dd {
252 margin-top: 0em;
253 margin-left: 25.5em;
254}
255
256.glossary dd p,
257.variablelist dd p {
258 margin-top: 0em;
259 margin-bottom: 1em;
260}
261
262.glossdeffirst {
263 text-indent: 0px;
264}
265
266/* End of non-image set */
267
268div.calloutlist table td {
269 padding: 0em 0em 0em 0em;
270 margin: 0em 0em 0em 0em;
271}
272
273div.calloutlist table td p {
274 margin-top: 0em;
275 margin-bottom: 1em;
276}
277
278div p.copyright {
279 text-align: left;
280}
281
282div.legalnotice p.legalnotice-title {
283 margin-bottom: 0em;
284}
285
286p {
287 line-height: 1.5em;
288 margin-top: 0em;
289
290}
291
292dl {
293 padding-top: 0em;
294}
295
296hr {
297 border: solid 1px;
298}
299
300
301.mediaobject,
302.mediaobjectco {
303 text-align: center;
304}
305
306img {
307 border: none;
308}
309
310ul {
311 padding: 0em 0em 0em 1.5em;
312}
313
314ul li {
315 padding: 0em 0em 0em 0em;
316}
317
318ul li p {
319 text-align: left;
320}
321
322table {
323 width :100%;
324}
325
326th {
327 padding: 0.25em;
328 text-align: left;
329 font-weight: normal;
330 vertical-align: top;
331}
332
333td {
334 padding: 0.25em;
335 vertical-align: top;
336}
337
338p a[id] {
339 margin: 0px;
340 padding: 0px;
341 display: inline;
342 background-image: none;
343}
344
345a {
346 text-decoration: underline;
347 color: #444;
348}
349
350pre {
351 overflow: auto;
352}
353
354a:hover {
355 text-decoration: underline;
356 /*font-weight: bold;*/
357}
358
359/* This style defines how the permalink character
360 appears by itself and when hovered over with
361 the mouse. */
362
363[alt='Permalink'] { color: #eee; }
364[alt='Permalink']:hover { color: black; }
365
366
367div.informalfigure,
368div.informalexample,
369div.informaltable,
370div.figure,
371div.table,
372div.example {
373 margin: 1em 0em;
374 padding: 1em;
375 page-break-inside: avoid;
376}
377
378
379div.informalfigure p.title b,
380div.informalexample p.title b,
381div.informaltable p.title b,
382div.figure p.title b,
383div.example p.title b,
384div.table p.title b{
385 padding-top: 0em;
386 margin-top: 0em;
387 font-size: 100%;
388 font-weight: normal;
389}
390
391.mediaobject .caption,
392.mediaobject .caption p {
393 text-align: center;
394 font-size: 80%;
395 padding-top: 0.5em;
396 padding-bottom: 0.5em;
397}
398
399.epigraph {
400 padding-left: 55%;
401 margin-bottom: 1em;
402}
403
404.epigraph p {
405 text-align: left;
406}
407
408.epigraph .quote {
409 font-style: italic;
410}
411.epigraph .attribution {
412 font-style: normal;
413 text-align: right;
414}
415
416span.application {
417 font-style: italic;
418}
419
420.programlisting {
421 font-family: monospace;
422 font-size: 80%;
423 white-space: pre;
424 margin: 1.33em 0em;
425 padding: 1.33em;
426}
427
428.tip,
429.warning,
430.caution,
431.note {
432 margin-top: 1em;
433 margin-bottom: 1em;
434
435}
436
437/* force full width of table within div */
438.tip table,
439.warning table,
440.caution table,
441.note table {
442 border: none;
443 width: 100%;
444}
445
446
447.tip table th,
448.warning table th,
449.caution table th,
450.note table th {
451 padding: 0.8em 0.0em 0.0em 0.0em;
452 margin : 0em 0em 0em 0em;
453}
454
455.tip p,
456.warning p,
457.caution p,
458.note p {
459 margin-top: 0.5em;
460 margin-bottom: 0.5em;
461 padding-right: 1em;
462 text-align: left;
463}
464
465.acronym {
466 text-transform: uppercase;
467}
468
469b.keycap,
470.keycap {
471 padding: 0.09em 0.3em;
472 margin: 0em;
473}
474
475.itemizedlist li {
476 clear: none;
477}
478
479.filename {
480 font-size: medium;
481 font-family: Courier, monospace;
482}
483
484
485div.navheader, div.heading{
486 position: absolute;
487 left: 0em;
488 top: 0em;
489 width: 100%;
490 background-color: #cdf;
491 width: 100%;
492}
493
494div.navfooter, div.footing{
495 position: fixed;
496 left: 0em;
497 bottom: 0em;
498 background-color: #eee;
499 width: 100%;
500}
501
502
503div.navheader td,
504div.navfooter td {
505 font-size: 66%;
506}
507
508div.navheader table th {
509 /*font-family: Georgia, Times, serif;*/
510 /*font-size: x-large;*/
511 font-size: 80%;
512}
513
514div.navheader table {
515 border-left: 0em;
516 border-right: 0em;
517 border-top: 0em;
518 width: 100%;
519}
520
521div.navfooter table {
522 border-left: 0em;
523 border-right: 0em;
524 border-bottom: 0em;
525 width: 100%;
526}
527
528div.navheader table td a,
529div.navfooter table td a {
530 color: #777;
531 text-decoration: none;
532}
533
534/* normal text in the footer */
535div.navfooter table td {
536 color: black;
537}
538
539div.navheader table td a:visited,
540div.navfooter table td a:visited {
541 color: #444;
542}
543
544
545/* links in header and footer */
546div.navheader table td a:hover,
547div.navfooter table td a:hover {
548 text-decoration: underline;
549 background-color: transparent;
550 color: #33a;
551}
552
553div.navheader hr,
554div.navfooter hr {
555 display: none;
556}
557
558
559.qandaset tr.question td p {
560 margin: 0em 0em 1em 0em;
561 padding: 0em 0em 0em 0em;
562}
563
564.qandaset tr.answer td p {
565 margin: 0em 0em 1em 0em;
566 padding: 0em 0em 0em 0em;
567}
568.answer td {
569 padding-bottom: 1.5em;
570}
571
572.emphasis {
573 font-weight: bold;
574}
575
576
577 /************* /
578 / decorations /
579/ *************/
580
581.titlepage {
582}
583
584.part .title {
585}
586
587.subtitle {
588 border: none;
589}
590
591/*
592h1 {
593 border: none;
594}
595
596h2 {
597 border-top: solid 0.2em;
598 border-bottom: solid 0.06em;
599}
600
601h3 {
602 border-top: 0em;
603 border-bottom: solid 0.06em;
604}
605
606h4 {
607 border: 0em;
608 border-bottom: solid 0.06em;
609}
610
611h5 {
612 border: 0em;
613}
614*/
615
616.programlisting {
617 border: solid 1px;
618}
619
620div.figure,
621div.table,
622div.informalfigure,
623div.informaltable,
624div.informalexample,
625div.example {
626 border: 1px solid;
627}
628
629
630
631.tip,
632.warning,
633.caution,
634.note {
635 border: 1px solid;
636}
637
638.tip table th,
639.warning table th,
640.caution table th,
641.note table th {
642 border-bottom: 1px solid;
643}
644
645.question td {
646 border-top: 1px solid black;
647}
648
649.answer {
650}
651
652
653b.keycap,
654.keycap {
655 border: 1px solid;
656}
657
658
659div.navheader, div.heading{
660 border-bottom: 1px solid;
661}
662
663
664div.navfooter, div.footing{
665 border-top: 1px solid;
666}
667
668 /********* /
669 / colors /
670/ *********/
671
672body {
673 color: #333;
674 background: white;
675}
676
677a {
678 background: transparent;
679}
680
681a:hover {
682 background-color: #dedede;
683}
684
685
686h1,
687h2,
688h3,
689h4,
690h5,
691h6,
692h7,
693h8 {
694 background-color: transparent;
695}
696
697hr {
698 border-color: #aaa;
699}
700
701
702.tip, .warning, .caution, .note {
703 border-color: #fff;
704}
705
706
707.tip table th,
708.warning table th,
709.caution table th,
710.note table th {
711 border-bottom-color: #fff;
712}
713
714
715.warning {
716 background-color: #f0f0f2;
717}
718
719.caution {
720 background-color: #f0f0f2;
721}
722
723.tip {
724 background-color: #f0f0f2;
725}
726
727.note {
728 background-color: #f0f0f2;
729}
730
731.glossary dl dt,
732.variablelist dl dt,
733.variablelist dl dt span.term {
734 color: #044;
735}
736
737div.figure,
738div.table,
739div.example,
740div.informalfigure,
741div.informaltable,
742div.informalexample {
743 border-color: #aaa;
744}
745
746pre.programlisting {
747 color: black;
748 background-color: #fff;
749 border-color: #aaa;
750 border-width: 2px;
751}
752
753.guimenu,
754.guilabel,
755.guimenuitem {
756 background-color: #eee;
757}
758
759
760b.keycap,
761.keycap {
762 background-color: #eee;
763 border-color: #999;
764}
765
766
767div.navheader {
768 border-color: black;
769}
770
771
772div.navfooter {
773 border-color: black;
774}
775
776
777 /*********** /
778 / graphics /
779/ ***********/
780
781/*
782body {
783 background-image: url("images/body_bg.jpg");
784 background-attachment: fixed;
785}
786
787.navheader,
788.note,
789.tip {
790 background-image: url("images/note_bg.jpg");
791 background-attachment: fixed;
792}
793
794.warning,
795.caution {
796 background-image: url("images/warning_bg.jpg");
797 background-attachment: fixed;
798}
799
800.figure,
801.informalfigure,
802.example,
803.informalexample,
804.table,
805.informaltable {
806 background-image: url("images/figure_bg.jpg");
807 background-attachment: fixed;
808}
809
810*/
811h1,
812h2,
813h3,
814h4,
815h5,
816h6,
817h7{
818}
819
820/*
821Example of how to stick an image as part of the title.
822
823div.article .titlepage .title
824{
825 background-image: url("figures/white-on-black.png");
826 background-position: center;
827 background-repeat: repeat-x;
828}
829*/
830
831div.preface .titlepage .title,
832div.colophon .title,
833div.chapter .titlepage .title,
834div.article .titlepage .title
835{
836}
837
838div.section div.section .titlepage .title,
839div.sect2 .titlepage .title {
840 background: none;
841}
842
843
844h1.title {
845 background-color: transparent;
846 background-image: url("figures/poky-title.png");
847 background-repeat: no-repeat;
848 height: 256px;
849 text-indent: -9000px;
850 overflow:hidden;
851}
852
853h2.subtitle {
854 background-color: transparent;
855 text-indent: -9000px;
856 overflow:hidden;
857 width: 0px;
858 display: none;
859}
860
861 /*************************************** /
862 / pippin.gimp.org specific alterations /
863/ ***************************************/
864
865/*
866div.heading, div.navheader {
867 color: #777;
868 font-size: 80%;
869 padding: 0;
870 margin: 0;
871 text-align: left;
872 position: absolute;
873 top: 0px;
874 left: 0px;
875 width: 100%;
876 height: 50px;
877 background: url('/gfx/heading_bg.png') transparent;
878 background-repeat: repeat-x;
879 background-attachment: fixed;
880 border: none;
881}
882
883div.heading a {
884 color: #444;
885}
886
887div.footing, div.navfooter {
888 border: none;
889 color: #ddd;
890 font-size: 80%;
891 text-align:right;
892
893 width: 100%;
894 padding-top: 10px;
895 position: absolute;
896 bottom: 0px;
897 left: 0px;
898
899 background: url('/gfx/footing_bg.png') transparent;
900}
901*/
902
903
904
905 /****************** /
906 / nasty ie tweaks /
907/ ******************/
908
909/*
910div.heading, div.navheader {
911 width:expression(document.body.clientWidth + "px");
912}
913
914div.footing, div.navfooter {
915 width:expression(document.body.clientWidth + "px");
916 margin-left:expression("-5em");
917}
918body {
919 padding:expression("4em 5em 0em 5em");
920}
921*/
922
923 /**************************************** /
924 / mozilla vendor specific css extensions /
925/ ****************************************/
926/*
927div.navfooter, div.footing{
928 -moz-opacity: 0.8em;
929}
930
931div.figure,
932div.table,
933div.informalfigure,
934div.informaltable,
935div.informalexample,
936div.example,
937.tip,
938.warning,
939.caution,
940.note {
941 -moz-border-radius: 0.5em;
942}
943
944b.keycap,
945.keycap {
946 -moz-border-radius: 0.3em;
947}
948*/
949
950table tr td table tr td {
951 display: none;
952}
953
954
955hr {
956 display: none;
957}
958
959table {
960 border: 0em;
961}
962
963 .photo {
964 float: right;
965 margin-left: 1.5em;
966 margin-bottom: 1.5em;
967 margin-top: 0em;
968 max-width: 17em;
969 border: 1px solid gray;
970 padding: 3px;
971 background: white;
972}
973 .seperator {
974 padding-top: 2em;
975 clear: both;
976 }
977
978 #validators {
979 margin-top: 5em;
980 text-align: right;
981 color: #777;
982 }
983 @media print {
984 body {
985 font-size: 8pt;
986 }
987 .noprint {
988 display: none;
989 }
990 }
991
992
993.tip,
994.note {
995 background: #f0f0f2;
996 color: #333;
997 padding: 20px;
998 margin: 20px;
999}
1000
1001.tip h3,
1002.note h3 {
1003 padding: 0em;
1004 margin: 0em;
1005 font-size: 2em;
1006 font-weight: bold;
1007 color: #333;
1008}
1009
1010.tip a,
1011.note a {
1012 color: #333;
1013 text-decoration: underline;
1014}
1015
1016.footnote {
1017 font-size: small;
1018 color: #333;
1019}
1020
1021/* Changes the announcement text */
1022.tip h3,
1023.warning h3,
1024.caution h3,
1025.note h3 {
1026 font-size:large;
1027 color: #00557D;
1028}