985 lines
13 KiB
CSS
985 lines
13 KiB
CSS
/*
|
|
Generic XHTML / DocBook XHTML CSS Stylesheet.
|
|
|
|
Browser wrangling and typographic design by
|
|
Oyvind Kolas / pippin@gimp.org
|
|
|
|
Customised for Poky by
|
|
Matthew Allum / mallum@o-hand.com
|
|
|
|
Thanks to:
|
|
Liam R. E. Quin
|
|
William Skaggs
|
|
Jakub Steiner
|
|
|
|
Structure
|
|
---------
|
|
|
|
The stylesheet is divided into the following sections:
|
|
|
|
Positioning
|
|
Margins, paddings, width, font-size, clearing.
|
|
Decorations
|
|
Borders, style
|
|
Colors
|
|
Colors
|
|
Graphics
|
|
Graphical backgrounds
|
|
Nasty IE tweaks
|
|
Workarounds needed to make it work in internet explorer,
|
|
currently makes the stylesheet non validating, but up until
|
|
this point it is validating.
|
|
Mozilla extensions
|
|
Transparency for footer
|
|
Rounded corners on boxes
|
|
|
|
*/
|
|
|
|
|
|
/*************** /
|
|
/ Positioning /
|
|
/ ***************/
|
|
|
|
body {
|
|
font-family: Verdana, Sans, sans-serif;
|
|
|
|
min-width: 640px;
|
|
width: 80%;
|
|
margin: 0em auto;
|
|
padding: 2em 5em 5em 5em;
|
|
color: #333;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6,h7 {
|
|
font-family: Arial, Sans;
|
|
color: #00557D;
|
|
clear: both;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
text-align: left;
|
|
padding: 0em 0em 0em 0em;
|
|
margin: 2em 0em 0em 0em;
|
|
}
|
|
|
|
h2.subtitle {
|
|
margin: 0.10em 0em 3.0em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
font-size: 1.8em;
|
|
padding-left: 20%;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
h2 {
|
|
margin: 2em 0em 0.66em 0em;
|
|
padding: 0.5em 0em 0em 0em;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3.subtitle {
|
|
margin: 0em 0em 1em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
font-size: 142.14%;
|
|
text-align: right;
|
|
}
|
|
|
|
h3 {
|
|
margin: 1em 0em 0.5em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 140%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4 {
|
|
margin: 1em 0em 0.5em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h5 {
|
|
margin: 1em 0em 0.5em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h6 {
|
|
margin: 1em 0em 0em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.authorgroup {
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
padding-top: 256px;
|
|
background-image: url("figures/bsp-title.png");
|
|
background-position: left top;
|
|
margin-top: -256px;
|
|
padding-right: 50px;
|
|
margin-left: 0px;
|
|
text-align: right;
|
|
width: 740px;
|
|
}
|
|
|
|
h3.author {
|
|
margin: 0em 0me 0em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
font-weight: normal;
|
|
font-size: 100%;
|
|
color: #333;
|
|
clear: both;
|
|
}
|
|
|
|
.author tt.email {
|
|
font-size: 66%;
|
|
}
|
|
|
|
.titlepage hr {
|
|
width: 0em;
|
|
clear: both;
|
|
}
|
|
|
|
.revhistory {
|
|
padding-top: 2em;
|
|
clear: both;
|
|
}
|
|
|
|
.toc,
|
|
.list-of-tables,
|
|
.list-of-examples,
|
|
.list-of-figures {
|
|
padding: 1.33em 0em 2.5em 0em;
|
|
color: #00557D;
|
|
}
|
|
|
|
.toc p,
|
|
.list-of-tables p,
|
|
.list-of-figures p,
|
|
.list-of-examples p {
|
|
padding: 0em 0em 0em 0em;
|
|
padding: 0em 0em 0.3em;
|
|
margin: 1.5em 0em 0em 0em;
|
|
}
|
|
|
|
.toc p b,
|
|
.list-of-tables p b,
|
|
.list-of-figures p b,
|
|
.list-of-examples p b{
|
|
font-size: 100.0%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toc dl,
|
|
.list-of-tables dl,
|
|
.list-of-figures dl,
|
|
.list-of-examples dl {
|
|
margin: 0em 0em 0.5em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
.toc dt {
|
|
margin: 0em 0em 0em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
.toc dd {
|
|
margin: 0em 0em 0em 2.6em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
div.glossary dl,
|
|
div.variablelist dl {
|
|
}
|
|
|
|
.glossary dl dt,
|
|
.variablelist dl dt,
|
|
.variablelist dl dt span.term {
|
|
font-weight: normal;
|
|
width: 20em;
|
|
text-align: right;
|
|
}
|
|
|
|
.variablelist dl dt {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.glossary dl dd,
|
|
.variablelist dl dd {
|
|
margin-top: -1em;
|
|
margin-left: 25.5em;
|
|
}
|
|
|
|
.glossary dd p,
|
|
.variablelist dd p {
|
|
margin-top: 0em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
div.calloutlist table td {
|
|
padding: 0em 0em 0em 0em;
|
|
margin: 0em 0em 0em 0em;
|
|
}
|
|
|
|
div.calloutlist table td p {
|
|
margin-top: 0em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
div p.copyright {
|
|
text-align: left;
|
|
}
|
|
|
|
div.legalnotice p.legalnotice-title {
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5em;
|
|
margin-top: 0em;
|
|
|
|
}
|
|
|
|
dl {
|
|
padding-top: 0em;
|
|
}
|
|
|
|
hr {
|
|
border: solid 1px;
|
|
}
|
|
|
|
|
|
.mediaobject,
|
|
.mediaobjectco {
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
}
|
|
|
|
ul {
|
|
padding: 0em 0em 0em 1.5em;
|
|
}
|
|
|
|
ul li {
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
ul li p {
|
|
text-align: left;
|
|
}
|
|
|
|
table {
|
|
width :100%;
|
|
}
|
|
|
|
th {
|
|
padding: 0.25em;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
vertical-align: top;
|
|
}
|
|
|
|
td {
|
|
padding: 0.25em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
p a[id] {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
display: inline;
|
|
background-image: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
color: #444;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
/*font-weight: bold;*/
|
|
}
|
|
|
|
/* This style defines how the permalink character
|
|
appears by itself and when hovered over with
|
|
the mouse. */
|
|
|
|
[alt='Permalink'] { color: #eee; }
|
|
[alt='Permalink']:hover { color: black; }
|
|
|
|
|
|
div.informalfigure,
|
|
div.informalexample,
|
|
div.informaltable,
|
|
div.figure,
|
|
div.table,
|
|
div.example {
|
|
margin: 1em 0em;
|
|
padding: 1em;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
|
|
div.informalfigure p.title b,
|
|
div.informalexample p.title b,
|
|
div.informaltable p.title b,
|
|
div.figure p.title b,
|
|
div.example p.title b,
|
|
div.table p.title b{
|
|
padding-top: 0em;
|
|
margin-top: 0em;
|
|
font-size: 100%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.mediaobject .caption,
|
|
.mediaobject .caption p {
|
|
text-align: center;
|
|
font-size: 80%;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.epigraph {
|
|
padding-left: 55%;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.epigraph p {
|
|
text-align: left;
|
|
}
|
|
|
|
.epigraph .quote {
|
|
font-style: italic;
|
|
}
|
|
.epigraph .attribution {
|
|
font-style: normal;
|
|
text-align: right;
|
|
}
|
|
|
|
span.application {
|
|
font-style: italic;
|
|
}
|
|
|
|
.programlisting {
|
|
font-family: monospace;
|
|
font-size: 80%;
|
|
white-space: pre;
|
|
margin: 1.33em 0em;
|
|
padding: 1.33em;
|
|
}
|
|
|
|
.tip,
|
|
.warning,
|
|
.caution,
|
|
.note {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
|
|
}
|
|
|
|
/* force full width of table within div */
|
|
.tip table,
|
|
.warning table,
|
|
.caution table,
|
|
.note table {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.tip table th,
|
|
.warning table th,
|
|
.caution table th,
|
|
.note table th {
|
|
padding: 0.8em 0.0em 0.0em 0.0em;
|
|
margin : 0em 0em 0em 0em;
|
|
}
|
|
|
|
.tip p,
|
|
.warning p,
|
|
.caution p,
|
|
.note p {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-right: 1em;
|
|
text-align: left;
|
|
}
|
|
|
|
.acronym {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
padding: 0.09em 0.3em;
|
|
margin: 0em;
|
|
}
|
|
|
|
.itemizedlist li {
|
|
clear: none;
|
|
}
|
|
|
|
.filename {
|
|
font-size: medium;
|
|
font-family: Courier, monospace;
|
|
}
|
|
|
|
|
|
div.navheader, div.heading{
|
|
position: absolute;
|
|
left: 0em;
|
|
top: 0em;
|
|
width: 100%;
|
|
background-color: #cdf;
|
|
width: 100%;
|
|
}
|
|
|
|
div.navfooter, div.footing{
|
|
position: fixed;
|
|
left: 0em;
|
|
bottom: 0em;
|
|
background-color: #eee;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
div.navheader td,
|
|
div.navfooter td {
|
|
font-size: 66%;
|
|
}
|
|
|
|
div.navheader table th {
|
|
/*font-family: Georgia, Times, serif;*/
|
|
/*font-size: x-large;*/
|
|
font-size: 80%;
|
|
}
|
|
|
|
div.navheader table {
|
|
border-left: 0em;
|
|
border-right: 0em;
|
|
border-top: 0em;
|
|
width: 100%;
|
|
}
|
|
|
|
div.navfooter table {
|
|
border-left: 0em;
|
|
border-right: 0em;
|
|
border-bottom: 0em;
|
|
width: 100%;
|
|
}
|
|
|
|
div.navheader table td a,
|
|
div.navfooter table td a {
|
|
color: #777;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* normal text in the footer */
|
|
div.navfooter table td {
|
|
color: black;
|
|
}
|
|
|
|
div.navheader table td a:visited,
|
|
div.navfooter table td a:visited {
|
|
color: #444;
|
|
}
|
|
|
|
|
|
/* links in header and footer */
|
|
div.navheader table td a:hover,
|
|
div.navfooter table td a:hover {
|
|
text-decoration: underline;
|
|
background-color: transparent;
|
|
color: #33a;
|
|
}
|
|
|
|
div.navheader hr,
|
|
div.navfooter hr {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.qandaset tr.question td p {
|
|
margin: 0em 0em 1em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
.qandaset tr.answer td p {
|
|
margin: 0em 0em 1em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
.answer td {
|
|
padding-bottom: 1.5em;
|
|
}
|
|
|
|
.emphasis {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/************* /
|
|
/ decorations /
|
|
/ *************/
|
|
|
|
.titlepage {
|
|
}
|
|
|
|
.part .title {
|
|
}
|
|
|
|
.subtitle {
|
|
border: none;
|
|
}
|
|
|
|
/*
|
|
h1 {
|
|
border: none;
|
|
}
|
|
|
|
h2 {
|
|
border-top: solid 0.2em;
|
|
border-bottom: solid 0.06em;
|
|
}
|
|
|
|
h3 {
|
|
border-top: 0em;
|
|
border-bottom: solid 0.06em;
|
|
}
|
|
|
|
h4 {
|
|
border: 0em;
|
|
border-bottom: solid 0.06em;
|
|
}
|
|
|
|
h5 {
|
|
border: 0em;
|
|
}
|
|
*/
|
|
|
|
.programlisting {
|
|
border: solid 1px;
|
|
}
|
|
|
|
div.figure,
|
|
div.table,
|
|
div.informalfigure,
|
|
div.informaltable,
|
|
div.informalexample,
|
|
div.example {
|
|
border: 1px solid;
|
|
}
|
|
|
|
|
|
|
|
.tip,
|
|
.warning,
|
|
.caution,
|
|
.note {
|
|
border: 1px solid;
|
|
}
|
|
|
|
.tip table th,
|
|
.warning table th,
|
|
.caution table th,
|
|
.note table th {
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.question td {
|
|
border-top: 1px solid black;
|
|
}
|
|
|
|
.answer {
|
|
}
|
|
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
border: 1px solid;
|
|
}
|
|
|
|
|
|
div.navheader, div.heading{
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
|
|
div.navfooter, div.footing{
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
/********* /
|
|
/ colors /
|
|
/ *********/
|
|
|
|
body {
|
|
color: #333;
|
|
background: white;
|
|
}
|
|
|
|
a {
|
|
background: transparent;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: #dedede;
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
h7,
|
|
h8 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
hr {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
|
|
.tip, .warning, .caution, .note {
|
|
border-color: #fff;
|
|
}
|
|
|
|
|
|
.tip table th,
|
|
.warning table th,
|
|
.caution table th,
|
|
.note table th {
|
|
border-bottom-color: #fff;
|
|
}
|
|
|
|
|
|
.warning {
|
|
background-color: #f0f0f2;
|
|
}
|
|
|
|
.caution {
|
|
background-color: #f0f0f2;
|
|
}
|
|
|
|
.tip {
|
|
background-color: #f0f0f2;
|
|
}
|
|
|
|
.note {
|
|
background-color: #f0f0f2;
|
|
}
|
|
|
|
.glossary dl dt,
|
|
.variablelist dl dt,
|
|
.variablelist dl dt span.term {
|
|
color: #044;
|
|
}
|
|
|
|
div.figure,
|
|
div.table,
|
|
div.example,
|
|
div.informalfigure,
|
|
div.informaltable,
|
|
div.informalexample {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
pre.programlisting {
|
|
color: black;
|
|
background-color: #fff;
|
|
border-color: #aaa;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.guimenu,
|
|
.guilabel,
|
|
.guimenuitem {
|
|
background-color: #eee;
|
|
}
|
|
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
background-color: #eee;
|
|
border-color: #999;
|
|
}
|
|
|
|
|
|
div.navheader {
|
|
border-color: black;
|
|
}
|
|
|
|
|
|
div.navfooter {
|
|
border-color: black;
|
|
}
|
|
|
|
|
|
/*********** /
|
|
/ graphics /
|
|
/ ***********/
|
|
|
|
/*
|
|
body {
|
|
background-image: url("images/body_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.navheader,
|
|
.note,
|
|
.tip {
|
|
background-image: url("images/note_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.warning,
|
|
.caution {
|
|
background-image: url("images/warning_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.figure,
|
|
.informalfigure,
|
|
.example,
|
|
.informalexample,
|
|
.table,
|
|
.informaltable {
|
|
background-image: url("images/figure_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
*/
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
h7{
|
|
}
|
|
|
|
/*
|
|
Example of how to stick an image as part of the title.
|
|
|
|
div.article .titlepage .title
|
|
{
|
|
background-image: url("figures/white-on-black.png");
|
|
background-position: center;
|
|
background-repeat: repeat-x;
|
|
}
|
|
*/
|
|
|
|
div.preface .titlepage .title,
|
|
div.colophon .title,
|
|
div.chapter .titlepage .title {
|
|
background-position: bottom;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
div.section div.section .titlepage .title,
|
|
div.sect2 .titlepage .title {
|
|
background: none;
|
|
}
|
|
|
|
|
|
h1.title {
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
height: 256px;
|
|
text-indent: -9000px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
h2.subtitle {
|
|
background-color: transparent;
|
|
text-indent: -9000px;
|
|
overflow:hidden;
|
|
width: 0px;
|
|
display: none;
|
|
}
|
|
|
|
/*************************************** /
|
|
/ pippin.gimp.org specific alterations /
|
|
/ ***************************************/
|
|
|
|
/*
|
|
div.heading, div.navheader {
|
|
color: #777;
|
|
font-size: 80%;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: left;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 50px;
|
|
background: url('/gfx/heading_bg.png') transparent;
|
|
background-repeat: repeat-x;
|
|
background-attachment: fixed;
|
|
border: none;
|
|
}
|
|
|
|
div.heading a {
|
|
color: #444;
|
|
}
|
|
|
|
div.footing, div.navfooter {
|
|
border: none;
|
|
color: #ddd;
|
|
font-size: 80%;
|
|
text-align:right;
|
|
|
|
width: 100%;
|
|
padding-top: 10px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
|
|
background: url('/gfx/footing_bg.png') transparent;
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
/****************** /
|
|
/ nasty ie tweaks /
|
|
/ ******************/
|
|
|
|
/*
|
|
div.heading, div.navheader {
|
|
width:expression(document.body.clientWidth + "px");
|
|
}
|
|
|
|
div.footing, div.navfooter {
|
|
width:expression(document.body.clientWidth + "px");
|
|
margin-left:expression("-5em");
|
|
}
|
|
body {
|
|
padding:expression("4em 5em 0em 5em");
|
|
}
|
|
*/
|
|
|
|
/**************************************** /
|
|
/ mozilla vendor specific css extensions /
|
|
/ ****************************************/
|
|
/*
|
|
div.navfooter, div.footing{
|
|
-moz-opacity: 0.8em;
|
|
}
|
|
|
|
div.figure,
|
|
div.table,
|
|
div.informalfigure,
|
|
div.informaltable,
|
|
div.informalexample,
|
|
div.example,
|
|
.tip,
|
|
.warning,
|
|
.caution,
|
|
.note {
|
|
-moz-border-radius: 0.5em;
|
|
}
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
-moz-border-radius: 0.3em;
|
|
}
|
|
*/
|
|
|
|
table tr td table tr td {
|
|
display: none;
|
|
}
|
|
|
|
|
|
hr {
|
|
display: none;
|
|
}
|
|
|
|
table {
|
|
border: 0em;
|
|
}
|
|
|
|
.photo {
|
|
float: right;
|
|
margin-left: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
margin-top: 0em;
|
|
max-width: 17em;
|
|
border: 1px solid gray;
|
|
padding: 3px;
|
|
background: white;
|
|
}
|
|
.seperator {
|
|
padding-top: 2em;
|
|
clear: both;
|
|
}
|
|
|
|
#validators {
|
|
margin-top: 5em;
|
|
text-align: right;
|
|
color: #777;
|
|
}
|
|
@media print {
|
|
body {
|
|
font-size: 8pt;
|
|
}
|
|
.noprint {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.tip,
|
|
.note {
|
|
background: #f0f0f2;
|
|
color: #333;
|
|
padding: 20px;
|
|
margin: 20px;
|
|
}
|
|
|
|
.tip h3,
|
|
.note h3 {
|
|
padding: 0em;
|
|
margin: 0em;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.tip a,
|
|
.note a {
|
|
color: #333;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footnote {
|
|
font-size: small;
|
|
color: #333;
|
|
}
|
|
|
|
/* Changes the announcement text */
|
|
.tip h3,
|
|
.warning h3,
|
|
.caution h3,
|
|
.note h3 {
|
|
font-size:large;
|
|
color: #00557D;
|
|
}
|