mutter/doc/common/style.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:#999999;
  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: normal;
}

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

h4 {
  margin: 1em 0em 0.5em 0em;
  padding: 1em 0em 0em 0em;
  font-size: 120%;
  font-weight: normal;
}

h5 {
  margin: 1em 0em 0.5em 0em;
  padding: 1em 0em 0em 0em;
  font-size: 110.000%;
  border-bottom: 1px solid black;
}

h6 {
  margin: 1em 0em 0em 0em;
  padding: 1em 0em 0em 0em;
  font-size: 80%;
  font-weight: normal;
}

.authorgroup {
  background-color: transparent;
  background-repeat: no-repeat;
  padding-top: 256px;
/*  background-image: url("images/clutter-logo.png"); */
  background-position: right top;
  float: right; 
  margin-top: -256px;
  padding-right: 50px;
  margin-left: 50px;
  text-align: right;
  width: 200px;
}

h3.author {
  margin: 0em 0me 0em 0em;
  padding: 0em 0em 0em 0em;
  font-weight: normal;
  font-size: 100%;
  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;
}

.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;
  font-size: 80%;
}

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


div.informalfigure,
div.informalexample,
div.informaltable,
div.figure,
div.table,
div.example {
  margin: 1em 0em;
  padding: 1em;
  page-break-inside: avoid;
  background-color: #3ab1cc;
}


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;
  color: #666;
  font-size: 80%;
}

.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: #aaa;
}


.tip table th,
.warning table th,
.caution table th,
.note table th {
  border-bottom-color: #aaa;
}


.warning {
  background-color: #fea;
}

.caution {
  background-color: #fea;
}

.tip {
  background-color: #eff;
}

.note {
  background-color: #8bd12e;
}

.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{
}

div.preface .titlepage .title, 
div.colophon .title, 
div.chapter .titlepage .title {
  background-image: url("images/title-bg.png");
  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-image: url("images/clutter-logo.png");
  background-repeat: no-repeat;
  height: 128px;
  text-indent: 400px;
  overflow:hidden;
  margin: 2em 1em 2em 0em;
  text-align: right;
}

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: #91ae35;
   color: #fff;   
   padding: 20px;
   margin: 20px;
}

.tip h3,
.note h3 {
   padding: 0em;
   margin: 0em;
   font-size: 2em;
   font-weight: bold;
   color: #fff;   
}

.tip a,
.note a {
   color: #fff;   
   text-decoration: underline;
}