interface_guidelines/docbook-css/styles.css

/*
 * styles.css
 *
 * Copyright (c) 2004 David Holroyd, and contributors
 * See the file 'COPYING' for terms of use
 *
 * Part of the Docbook-CSS stylesheet
 *   http://www.badgers-in-foil.co.uk/projects/docbook-css/
 */

/*
 * CSS2 styling for DocBook XML
 *
 * To be included in the cascade _after_ core.css.  Defines styling that can't
 * be generated mechanically from another source.
 */

/*
 * TODO:
 *
 *  - do I remember correctly that <abstract> be hidden for screen media?
 */


article, book {
	margin:.5em;
}
title, subtitle {
	font-family:sans-serif;
}
title {
	font-weight:bolder;
	margin-bottom:.5em;
}

/*
 * Sectioning elements that may contain paragraph-level elements get left/right
 * margins
 */
section>*, chapter>*, bibliography>*, appendix>*, glossary>*, preface>*,
dedication>*, colophon>*, sect1>*, sect2>*, sect3>*, sect4>*, sect5>*,
bibliodiv>* {
	margin-left:10%;
	margin-right:10%;
}

/*
 * Give admonitions bigger margins, to set them more apart from the main
 * flow of text.
 */
warning, caution, important, tip, note {
	margin-left: 15%;
	margin-right: 15%;
}

/*
 * Remove any margin defined be the previous rule when the child in question
 * is a section or title.  Titles should be allowed to take up the maximum
 * available width, as they're usually is larger type.  Sections must not
 * be given margins because, the *contents* of the section will alreay have
 * them; we don't want to recursively increase margins with the nesting depth
 * of the document.
 */
section, title, sect1, sect2, sect3, sect4, sect5, bibliodiv {
	margin-left:0;
	margin-right:0;
}

book>title, article>title {
	font-size:xx-large;
	text-align:center;
	border-bottom-style:solid;
}

appendix>title, bibliography>title, chapter>title, colophon>title, dedication>title, glossary>title, part>title, preface>title {
	font-size:xx-large;
	text-align:center;
}

section>title, sect1>title, bibliodiv>title {
	font-size:xx-large;
}

section>section>title, sect2>title {
	font-size:x-large;
	margin-left:5%;
}

section>section>section>title, sect3>title {
	font-size:large;
	margin-left:7.5%;
}

section>section>section>section>title, sect4>title {
	font-size:large;
	margin-left:10%;
}

section>section>section>section>section>title, sect5>title {
	font-size:inherit;
	margin-left:10%;
}

biblioentry > title {
	display: inline;
}

/* Give vertical spacing between compoments of the document */

*+section, *+chapter, *+bibliography, *+bibliodiv, *+appendix, *+glossary {
	margin-top: 3em;
}
section>*+section {
	margin-top: 2em;
}
section>section>*+section {
	margin-top: 1em;
}


/*
 * Give paragraph-level elements some leading space when they aren't the first
 * item in their containing block.
 */
*+para, *+formalpara, *+blockquote, *+glossentry, *+table, *+variablelist,
*+example, *+informalexample, *+programlisting, *+cmdsynopsis,
*+orderedlist, *+itemizedlist, *+figure,
*>warning, *>caution, *>important, *>tip, *>note {
	margin-top:.5em;
}


/*
 * BiblioEntry blocks need a bit more space, since they may contain multiple
 * paragraphs, and so need greater-than-paragraph spacing to make it clear
 * which gap is the end just of a paragraph, and which gap is the end of the
 * entry
 */
*+biblioentry {
	margin-top: 1em;
}

/*
 * REVISIT: I think this is the proper way; but deson't work in Firefox 0.8

formalpara > title {
	display: run-in;
}

 * Make all children of formalpara inline, instead...
 */

formalpara > * {
	display: inline;
}

formalpara > title:after {
	content: ".";
}

para, formalpara {
	text-align: justify;
}

quote:before {
	content: open-quote;
}

quote:after {
	content: close-quote;
}

question, answer {
	margin-top:.5em;
	display:list-item;
}

question>para, answer>para {
	display:inline;
}

/* see language specific files for content */
question:before {
	display:marker;
	font-weight:bolder;
}
answer:before {
	display:marker;
	font-weight: bolder;
}

emphasis {
	font-style:italic;
}
emphasis[role="strong"] {
	font-weight:bolder;
}
emphasis[role="bold"] {
	font-weight:bolder;
	font-style:inherit;
}
emphasis[role="underline"] {
	text-decoration:underline;
	font-style:inherit;
}
emphasis[role="strikethrough"] {
	text-decoration:line-through;
	font-style:inherit;
}
emphasis>emphasis {
	font-weight:bolder;
}

foreignphrase, wordasword, productname {
	font-style:italic;
}

replaceable {
	font-style:italic;
}

sgmltag[class="starttag"]:before, sgmltag[class="emptytag"]:before {
	content: "<";
}

sgmltag[class="starttag"]:after, sgmltag[class="endtag"]:after {
	content: ">";
}

sgmltag[class="endtag"]:before {
	content: "</";
}

sgmltag[class="emptytag"]:after {
	content: "/>";
}

sgmltag[class="attvalue"]:before, sgmltag[class="attvalue"]:after {
	content: '"';
}

sgmltag[class="genentity"]:before {
	content: "&";
}
sgmltag[class="genentity"]:after {
	content: ";";
}

sgmltag[class="sgmlcomment"]:before {
	content: "<!--";
}
sgmltag[class="sgmlcomment"]:after {
	content: "-->";
}

sgmltag[class="xmlpi"]:before {
	content: "<?";
}
sgmltag[class="xmlpi"]:after {
	content: "?>";
}


application, keycap, guimenu, guimenuitem, guisubmenu {
	font-family: sans-serif;
}

/*
 * ensure there's some whitespace between elements of an author's name
 */
author>* + *:before {
	content: " ";
}

/* give keycaps a '3D' shaded look */
keycap {
	padding-left: .2em;
	padding-right: .2em;
	border-style: solid;
	border-top-width: 2px;
	border-left-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 4px;
	border-top-color: #eeeecc;
	border-left-color: #eeeecc;
	border-right-color: #999977;
	border-bottom-color: #999977;
	background-color: #ddddbb;
	/* All these borders may interfere with text on the line bellow.  Make
	   the text a little smaller to try and 'pull up' the bottom edge, */
	font-size: smaller;
}

keycombo>keycap+keycap:before {
	/* FIXME: this appears inside the second keycap's 3D boarder, but
	 * ideally, we'd like it to appear inbetween the two keycaps */
	content: "-";
}

menuchoice>guimenu+guimenuitem:before,
menuchoice>guimenuitem+guimenuitem:before,
menuchoice>guimenuitem+guisubmenu:before {
	/*content: "->";*/
	/* a 'proper' left-arrow character */
	content: "\2192";
}

guibutton {
	border: 2px outset #dddddd;
	background-color: #dddddd;
/*
	border: 2px solid;
	border-top-color: #eeeeee;
	border-left-color: #eeeeee;
	border-right-color: #999999;
	border-bottom-color: #999999;
	background-color: #dddddd;
*/}


/* render link-like elements per HTML's normal styling */
link, ulink, email {
	/* When ulink contains no body text, the url should be rendered
	 * at this point in the document.  Can't see how to do this with CSS */
	color:#0000ff;
	text-decoration:underline;
}

/*ulink:after {
	content: " <" attr(url) ">";
}*/

email:before {
	content: "<";
}
email:after {
	content: ">";
}

citation:before {
	content: "[";
}
citation:after {
	content: "]";
}

xref:after {
	/* simple symbol - content: "#" attr(linkend);*/
	/* 'section' symbol */
	content: "\00a7" attr(linkend);
	color:#0000ff;
	text-decoration: underline;
}

blockquote {
	padding-left:3em;
	padding-bottom: 1em;
}

blockquote>attribution {
	text-align:right;
	font-style: italic;
}
blockquote>attribution:after {
	/* I've tried various things to position the attribution after the
	 * other blockquote content (e.g. relative/absolute positioning), but
	 * none of the things I tried produced satisfactory results (e.g. the
	 * attribution appears at the bottom of the containing block, but it
	 * overlaps preceeding content). */
	content:":"
}
blockquote>para:before {
	content: open-quote;
}
blockquote>para:after {
	content: no-close-quote;
}
blockquote>para:last-child:after {
	content: close-quote;
}

/* lists */

itemizedlist {
        padding-left: 1em;
        list-style-type: disc;
}

listitem+listitem {
	padding-top: .5em;
}

/* 2 deep nested lists */
itemizedlist itemizedlist {
        list-style-type: circle;
}

/* 3 or more deep nested lists */
itemizedlist itemizedlist itemizedlist {
        list-style-type: square;
}


itemizedlist>listitem {
	display:list-item;
}

orderedlist {
        padding-left: 1.5em;
	list-style-type: decimal;
}

orderedlist>listitem {
	display:list-item;
}

/*
 * We've got no way of properly implementing call-out lists with CSS, so just
 * present as a list of bullet points.
 */
calloutlist {
        padding-left: 1em;
        list-style-type: disc;
}
calloutlist>callout {
	display:list-item;
}


/*
 * The list of possible mark names is not defined by Docbook, but "opencircle"
 * and "bullet" are used in T.D.G. example
 */
itemizedlist[mark="opencircle"], listitem[override="opencircle"] {
        list-style-type: circle;
}

itemizedlist[mark="bullet"], listitem[override="bullet"] {
        list-style-type: disc;
}


varlistentry>listitem {
	margin-left: 2em;
}
varlistentry+varlistentry {
	margin-top: .5em;
}

simplelist[type=horiz] {
	display: block;
}

simplelist[type=inline]>member+member:before {
	/* typically, we end up with unwanted whitespace before the comma
	 * (i.e. whitespace between <member> elements).  I see no way of
	 * suppressing this with CSS.
	 * TODO: try a combination of :after and :first-child instead to
	 * avoid the above issue */
	content: ", ";
}

cmdsynopsis, code, command, computeroutput, envar, filename, keycode, keysym,
literal, option, parameter, sgmltag, systemitem {
	font-family: monospace;
}

filename[class=directory]:after {
	content: "/";
}

/* TODO: Are these specific to 'en' locales or not? */
trademark:after {
	content: "\2122"
}
trademark[class="copyright"]:after {
	content: "\A9"
}
trademark[class="registered"]:after {
	content: "\AE"
}
trademark[class="service"]:after {
	content: "\2120"
}

example, informalexample, programlisting  {
	background-color:#dddddd;
	padding: .5em;
	border: 1px dashed black;
}


example programlisting, informalexample programlisting {
	background-color: none;
	padding: 0;
	border: none;
}

/* admonitions */

warning, caution, tip, note, important {
	border: 1px dashed gray;
	padding: .5em;
}

/* Have admonition titles appear inline with generated content ("Note:" etc.) */
warning>title, caution>title, tip>title, note>title, important>title {
	display: inline;

}

warning:before, caution:before, tip:before, note:before, important:before {
	/* Match the style of <title> */
	font-weight: bolder;
	font-family: sans-serif;
}

/* FIXME: background colours are cheezy :S ... */
/* see language specific css for content: */
warning:before {
	background-color: red;
}
caution:before {
	background-color: yellow;
}
tip:before {
	background-color: #aaaddd;
}
note:before {
	background-color: #dddddd;
}
important:before {
	background-color: plum;
}

/* Tables */

thead > row > entry {
	/* FIXME: will under-rule every row in the <thead>, not just the last
	 * (I tried adding this style to <thead> itself, but this doesn't
	 * appear to work in combination with display:table-header-group, as
	 * defined in tables.css) */
	border-bottom: 2px solid black;
}

thead {
	font-weight: bolder;
}

entry {
	padding: .2em;
}


/* Footnotes */


/*
 * Attempt to display footnotes on-mouseover.  This may well break if a
 * footnote element has multiple children (I think the children will end up
 * stacked on top of each other).
 */

footnote {
	position: relative;
	cursor: help;
}
footnote:hover {
}
footnote>* {
	display: none;
	z-index: 100;
}
footnote:hover>* {
	display: block;
	position: fixed;
	border: 2px dotted black;
	background-color: #ffeeaa;
	padding: .5em;
	left: 0px;
	bottom: 0px;
}
footnote:before {
	content: "?";
	background-color: #ffeeaa;
	border: 2px dotted black;
	font-size: smaller;
}


/*

Attempting to format <footnote> as a sitebar, floating it to the right.
Sometimes works for footnotes in the 'main body' of some text, but works badly
when the containing block is, for instance, a table cell.

footnote:before {
	content: "*";
	display: block;
	border: 2px dotted black;
}

footnote>* {
	display: block;
	float: right;
	border: 2px dotted black;
	padding: .5em;
	width: 25%;
	top: -1em;
}

footnote>*:before {
	content: "*Footnote";
	display: block;
	font-weight: bold;
	font-family: sans-serif;
}
*/

glossentry>glossterm {
	font-weight: bolder;
	font-style: italic;
}


userinput {
	font-weight: bolder;
}

figure {
	text-align: center;
}

imageobject {
	display: block;
}

mediaobject>textobject {
	font-size: smaller;
}

/* Content */

question:before {
	content: "Q: ";
}
answer:before {
	content: "A: ";
}

example > title:before {
	content: "Example: ";
}

quote {
	quotes: "“" "”";
}
quote quote {
	quotes: "‘" "’";
}

/* Admonitions */

warning:before {
	content: "Warning: ";
}
caution:before {
	content: "Caution: ";
}
important:before {
	content: "Important: ";
}
tip:before {
	content: "Tip: ";
}
note:before {
	content: "Note: ";
}