1/*
2 * styles.css
3 *
4 * Copyright (c) 2004 David Holroyd, and contributors
5 * See the file 'COPYING' for terms of use
6 *
7 * Part of the Docbook-CSS stylesheet
8 *   http://www.badgers-in-foil.co.uk/projects/docbook-css/
9 */
10
11/*
12 * CSS2 styling for DocBook XML
13 *
14 * To be included in the cascade _after_ core.css.  Defines styling that can't
15 * be generated mechanically from another source.
16 */
17
18/*
19 * TODO:
20 *
21 *  - do I remember correctly that <abstract> be hidden for screen media?
22 */
23
24
25article, book {
26	margin:.5em;
27}
28title, subtitle {
29	font-family:sans-serif;
30}
31title {
32	font-weight:bolder;
33	margin-bottom:.5em;
34}
35
36/*
37 * Sectioning elements that may contain paragraph-level elements get left/right
38 * margins
39 */
40section>*, chapter>*, bibliography>*, appendix>*, glossary>*, preface>*,
41dedication>*, colophon>*, sect1>*, sect2>*, sect3>*, sect4>*, sect5>*,
42bibliodiv>* {
43	margin-left:10%;
44	margin-right:10%;
45}
46
47/*
48 * Give admonitions bigger margins, to set them more apart from the main
49 * flow of text.
50 */
51warning, caution, important, tip, note {
52	margin-left: 15%;
53	margin-right: 15%;
54}
55
56/*
57 * Remove any margin defined be the previous rule when the child in question
58 * is a section or title.  Titles should be allowed to take up the maximum
59 * available width, as they're usually is larger type.  Sections must not
60 * be given margins because, the *contents* of the section will alreay have
61 * them; we don't want to recursively increase margins with the nesting depth
62 * of the document.
63 */
64section, title, sect1, sect2, sect3, sect4, sect5, bibliodiv {
65	margin-left:0;
66	margin-right:0;
67}
68
69book>title, article>title {
70	font-size:xx-large;
71	text-align:center;
72	border-bottom-style:solid;
73}
74
75appendix>title, bibliography>title, chapter>title, colophon>title, dedication>title, glossary>title, part>title, preface>title {
76	font-size:xx-large;
77	text-align:center;
78}
79
80section>title, sect1>title, bibliodiv>title {
81	font-size:xx-large;
82}
83
84section>section>title, sect2>title {
85	font-size:x-large;
86	margin-left:5%;
87}
88
89section>section>section>title, sect3>title {
90	font-size:large;
91	margin-left:7.5%;
92}
93
94section>section>section>section>title, sect4>title {
95	font-size:large;
96	margin-left:10%;
97}
98
99section>section>section>section>section>title, sect5>title {
100	font-size:inherit;
101	margin-left:10%;
102}
103
104biblioentry > title {
105	display: inline;
106}
107
108/* Give vertical spacing between compoments of the document */
109
110*+section, *+chapter, *+bibliography, *+bibliodiv, *+appendix, *+glossary {
111	margin-top: 3em;
112}
113section>*+section {
114	margin-top: 2em;
115}
116section>section>*+section {
117	margin-top: 1em;
118}
119
120
121/*
122 * Give paragraph-level elements some leading space when they aren't the first
123 * item in their containing block.
124 */
125*+para, *+formalpara, *+blockquote, *+glossentry, *+table, *+variablelist,
126*+example, *+informalexample, *+programlisting, *+cmdsynopsis,
127*+orderedlist, *+itemizedlist, *+figure,
128*>warning, *>caution, *>important, *>tip, *>note {
129	margin-top:.5em;
130}
131
132
133/*
134 * BiblioEntry blocks need a bit more space, since they may contain multiple
135 * paragraphs, and so need greater-than-paragraph spacing to make it clear
136 * which gap is the end just of a paragraph, and which gap is the end of the
137 * entry
138 */
139*+biblioentry {
140	margin-top: 1em;
141}
142
143/*
144 * REVISIT: I think this is the proper way; but deson't work in Firefox 0.8
145
146formalpara > title {
147	display: run-in;
148}
149
150 * Make all children of formalpara inline, instead...
151 */
152
153formalpara > * {
154	display: inline;
155}
156
157formalpara > title:after {
158	content: ".";
159}
160
161para, formalpara {
162	text-align: justify;
163}
164
165quote:before {
166	content: open-quote;
167}
168
169quote:after {
170	content: close-quote;
171}
172
173question, answer {
174	margin-top:.5em;
175	display:list-item;
176}
177
178question>para, answer>para {
179	display:inline;
180}
181
182/* see language specific files for content */
183question:before {
184	display:marker;
185	font-weight:bolder;
186}
187answer:before {
188	display:marker;
189	font-weight: bolder;
190}
191
192emphasis {
193	font-style:italic;
194}
195emphasis[role="strong"] {
196	font-weight:bolder;
197}
198emphasis[role="bold"] {
199	font-weight:bolder;
200	font-style:inherit;
201}
202emphasis[role="underline"] {
203	text-decoration:underline;
204	font-style:inherit;
205}
206emphasis[role="strikethrough"] {
207	text-decoration:line-through;
208	font-style:inherit;
209}
210emphasis>emphasis {
211	font-weight:bolder;
212}
213
214foreignphrase, wordasword, productname {
215	font-style:italic;
216}
217
218replaceable {
219	font-style:italic;
220}
221
222sgmltag[class="starttag"]:before, sgmltag[class="emptytag"]:before {
223	content: "<";
224}
225
226sgmltag[class="starttag"]:after, sgmltag[class="endtag"]:after {
227	content: ">";
228}
229
230sgmltag[class="endtag"]:before {
231	content: "</";
232}
233
234sgmltag[class="emptytag"]:after {
235	content: "/>";
236}
237
238sgmltag[class="attvalue"]:before, sgmltag[class="attvalue"]:after {
239	content: '"';
240}
241
242sgmltag[class="genentity"]:before {
243	content: "&";
244}
245sgmltag[class="genentity"]:after {
246	content: ";";
247}
248
249sgmltag[class="sgmlcomment"]:before {
250	content: "<!--";
251}
252sgmltag[class="sgmlcomment"]:after {
253	content: "-->";
254}
255
256sgmltag[class="xmlpi"]:before {
257	content: "<?";
258}
259sgmltag[class="xmlpi"]:after {
260	content: "?>";
261}
262
263
264application, keycap, guimenu, guimenuitem, guisubmenu {
265	font-family: sans-serif;
266}
267
268/*
269 * ensure there's some whitespace between elements of an author's name
270 */
271author>* + *:before {
272	content: " ";
273}
274
275/* give keycaps a '3D' shaded look */
276keycap {
277	padding-left: .2em;
278	padding-right: .2em;
279	border-style: solid;
280	border-top-width: 2px;
281	border-left-width: 3px;
282	border-right-width: 3px;
283	border-bottom-width: 4px;
284	border-top-color: #eeeecc;
285	border-left-color: #eeeecc;
286	border-right-color: #999977;
287	border-bottom-color: #999977;
288	background-color: #ddddbb;
289	/* All these borders may interfere with text on the line bellow.  Make
290	   the text a little smaller to try and 'pull up' the bottom edge, */
291	font-size: smaller;
292}
293
294keycombo>keycap+keycap:before {
295	/* FIXME: this appears inside the second keycap's 3D boarder, but
296	 * ideally, we'd like it to appear inbetween the two keycaps */
297	content: "-";
298}
299
300menuchoice>guimenu+guimenuitem:before,
301menuchoice>guimenuitem+guimenuitem:before,
302menuchoice>guimenuitem+guisubmenu:before {
303	/*content: "->";*/
304	/* a 'proper' left-arrow character */
305	content: "\2192";
306}
307
308guibutton {
309	border: 2px outset #dddddd;
310	background-color: #dddddd;
311/*
312	border: 2px solid;
313	border-top-color: #eeeeee;
314	border-left-color: #eeeeee;
315	border-right-color: #999999;
316	border-bottom-color: #999999;
317	background-color: #dddddd;
318*/}
319
320
321/* render link-like elements per HTML's normal styling */
322link, ulink, email {
323	/* When ulink contains no body text, the url should be rendered
324	 * at this point in the document.  Can't see how to do this with CSS */
325	color:#0000ff;
326	text-decoration:underline;
327}
328
329/*ulink:after {
330	content: " <" attr(url) ">";
331}*/
332
333email:before {
334	content: "<";
335}
336email:after {
337	content: ">";
338}
339
340citation:before {
341	content: "[";
342}
343citation:after {
344	content: "]";
345}
346
347xref:after {
348	/* simple symbol - content: "#" attr(linkend);*/
349	/* 'section' symbol */
350	content: "\00a7" attr(linkend);
351	color:#0000ff;
352	text-decoration: underline;
353}
354
355blockquote {
356	padding-left:3em;
357	padding-bottom: 1em;
358}
359
360blockquote>attribution {
361	text-align:right;
362	font-style: italic;
363}
364blockquote>attribution:after {
365	/* I've tried various things to position the attribution after the
366	 * other blockquote content (e.g. relative/absolute positioning), but
367	 * none of the things I tried produced satisfactory results (e.g. the
368	 * attribution appears at the bottom of the containing block, but it
369	 * overlaps preceeding content). */
370	content:":"
371}
372blockquote>para:before {
373	content: open-quote;
374}
375blockquote>para:after {
376	content: no-close-quote;
377}
378blockquote>para:last-child:after {
379	content: close-quote;
380}
381
382/* lists */
383
384itemizedlist {
385        padding-left: 1em;
386        list-style-type: disc;
387}
388
389listitem+listitem {
390	padding-top: .5em;
391}
392
393/* 2 deep nested lists */
394itemizedlist itemizedlist {
395        list-style-type: circle;
396}
397
398/* 3 or more deep nested lists */
399itemizedlist itemizedlist itemizedlist {
400        list-style-type: square;
401}
402
403
404itemizedlist>listitem {
405	display:list-item;
406}
407
408orderedlist {
409        padding-left: 1.5em;
410	list-style-type: decimal;
411}
412
413orderedlist>listitem {
414	display:list-item;
415}
416
417/*
418 * We've got no way of properly implementing call-out lists with CSS, so just
419 * present as a list of bullet points.
420 */
421calloutlist {
422        padding-left: 1em;
423        list-style-type: disc;
424}
425calloutlist>callout {
426	display:list-item;
427}
428
429
430
431/*
432 * The list of possible mark names is not defined by Docbook, but "opencircle"
433 * and "bullet" are used in T.D.G. example
434 */
435itemizedlist[mark="opencircle"], listitem[override="opencircle"] {
436        list-style-type: circle;
437}
438
439itemizedlist[mark="bullet"], listitem[override="bullet"] {
440        list-style-type: disc;
441}
442
443
444varlistentry>listitem {
445	margin-left: 2em;
446}
447varlistentry+varlistentry {
448	margin-top: .5em;
449}
450
451simplelist[type=horiz] {
452	display: block;
453}
454
455simplelist[type=inline]>member+member:before {
456	/* typically, we end up with unwanted whitespace before the comma
457	 * (i.e. whitespace between <member> elements).  I see no way of
458	 * suppressing this with CSS.
459	 * TODO: try a combination of :after and :first-child instead to
460	 * avoid the above issue */
461	content: ", ";
462}
463
464cmdsynopsis, code, command, computeroutput, envar, filename, keycode, keysym,
465literal, option, parameter, sgmltag, systemitem {
466	font-family: monospace;
467}
468
469filename[class=directory]:after {
470	content: "/";
471}
472
473/* TODO: Are these specific to 'en' locales or not? */
474trademark:after {
475	content: "\2122"
476}
477trademark[class="copyright"]:after {
478	content: "\A9"
479}
480trademark[class="registered"]:after {
481	content: "\AE"
482}
483trademark[class="service"]:after {
484	content: "\2120"
485}
486
487example, informalexample, programlisting  {
488	background-color:#dddddd;
489	padding: .5em;
490	border: 1px dashed black;
491}
492
493
494example programlisting, informalexample programlisting {
495	background-color: none;
496	padding: 0;
497	border: none;
498}
499
500/* admonitions */
501
502warning, caution, tip, note, important {
503	border: 1px dashed gray;
504	padding: .5em;
505}
506
507/* Have admonition titles appear inline with generated content ("Note:" etc.) */
508warning>title, caution>title, tip>title, note>title, important>title {
509	display: inline;
510
511}
512
513warning:before, caution:before, tip:before, note:before, important:before {
514	/* Match the style of <title> */
515	font-weight: bolder;
516	font-family: sans-serif;
517}
518
519/* FIXME: background colours are cheezy :S ... */
520/* see language specific css for content: */
521warning:before {
522	background-color: red;
523}
524caution:before {
525	background-color: yellow;
526}
527tip:before {
528	background-color: #aaaddd;
529}
530note:before {
531	background-color: #dddddd;
532}
533important:before {
534	background-color: plum;
535}
536
537/* Tables */
538
539thead > row > entry {
540	/* FIXME: will under-rule every row in the <thead>, not just the last
541	 * (I tried adding this style to <thead> itself, but this doesn't
542	 * appear to work in combination with display:table-header-group, as
543	 * defined in tables.css) */
544	border-bottom: 2px solid black;
545}
546
547thead {
548	font-weight: bolder;
549}
550
551entry {
552	padding: .2em;
553}
554
555
556/* Footnotes */
557
558
559/*
560 * Attempt to display footnotes on-mouseover.  This may well break if a
561 * footnote element has multiple children (I think the children will end up
562 * stacked on top of each other).
563 */
564
565footnote {
566	position: relative;
567	cursor: help;
568}
569footnote:hover {
570}
571footnote>* {
572	display: none;
573	z-index: 100;
574}
575footnote:hover>* {
576	display: block;
577	position: fixed;
578	border: 2px dotted black;
579	background-color: #ffeeaa;
580	padding: .5em;
581	left: 0px;
582	bottom: 0px;
583}
584footnote:before {
585	content: "?";
586	background-color: #ffeeaa;
587	border: 2px dotted black;
588	font-size: smaller;
589}
590
591
592/*
593
594Attempting to format <footnote> as a sitebar, floating it to the right.
595Sometimes works for footnotes in the 'main body' of some text, but works badly
596when the containing block is, for instance, a table cell.
597
598footnote:before {
599	content: "*";
600	display: block;
601	border: 2px dotted black;
602}
603
604footnote>* {
605	display: block;
606	float: right;
607	border: 2px dotted black;
608	padding: .5em;
609	width: 25%;
610	top: -1em;
611}
612
613footnote>*:before {
614	content: "*Footnote";
615	display: block;
616	font-weight: bold;
617	font-family: sans-serif;
618}
619*/
620
621glossentry>glossterm {
622	font-weight: bolder;
623	font-style: italic;
624}
625
626
627userinput {
628	font-weight: bolder;
629}
630
631figure {
632	text-align: center;
633}
634
635imageobject {
636	display: block;
637}
638
639mediaobject>textobject {
640	font-size: smaller;
641}
642
643/* Content */
644
645question:before {
646	content: "Q: ";
647}
648answer:before {
649	content: "A: ";
650}
651
652example > title:before {
653	content: "Example: ";
654}
655
656quote {
657	quotes: "“" "”";
658}
659quote quote {
660	quotes: "‘" "’";
661}
662
663/* Admonitions */
664
665warning:before {
666	content: "Warning: ";
667}
668caution:before {
669	content: "Caution: ";
670}
671important:before {
672	content: "Important: ";
673}
674tip:before {
675	content: "Tip: ";
676}
677note:before {
678	content: "Note: ";
679}
680
681