headers/bsd: Add sys/queue.h.

[haiku.git] / docs / 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: ";
}