poky/documentation/bsp-guide/bsp-style.css

/*
   SPDX-License-Identifier: CC-BY-2.0-UK

   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;
}

.writernotes {
  color: red;
}

  /*********** /
 /  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;
}