/* mozilla.org Base Style Sheet
 * (classes defined in the Markup Guide - http://moz.zope.org/contribute/writing/markup)
 */
/* Suggested order:
 * display
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font-size
 * font-style
 * font-weight
 * font-family
 * other font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 * 
 */

/* TOC:
   Random HTML Styles
   General Structure
   Navigation
   Comments and Other Asides
   Emphasis
   Computers - General
   Code
   Examples and Figures
   Q and A (FAQ)
   Tables
   Meta
   Live Content
   Presentational
*/
/* Random HTML Styles */
    
    dt {
        font-weight: bold;
    }

    .section tt { /* Disable <tt> so people don't use it.
                     (Restricted to tt in .section so we don't affect legacy files.) */
        font-family: inherit;
    }

/* General Structure */

    h1 {
        text-align: center;
    }

    .subtitle {
        font-style: italic;
    }

    .title {
        font-weight: bold;
    }

    p, div.para {
        margin: 1em 0;
        text-indent: 0;
    }
    div.para > * {
        margin-top: 0.2em;
        margin-bottom: 0.2em;
    }

    div.section {
        display: block;
        padding-left: 3%;
    }

    div.section > h2,
    div.section > h3,
    div.section > h4,
    div.section > h5,
    div.section > h6 {
        margin-left: -1.3%;
    }

/* Navigation */

    .ex-ref {
        font-style: italic;
    }

    dl.toc dt {
        margin-top: 1em;
        font-size: 110%;
    }
    dl.toc p {
        margin: 0;
        text-indent: 1em;
    }
    dl.toc p:first-child {
        text-indent: 0;
    }
    dl.toc > dd {
        margin-left: 1em;
    }

    ol.toc,
    ol.toc ol {
        list-style-type: circle;
    }
    ol.toc > li > ol {
        font-size: 90%;
    }

    ul.snav {/* section navigation or short navigation, whichever you prefer */
        margin: 0.7em 10%;
        padding: .2em;
        text-align: center;
    }
    ul.snav li {
        list-style-type: none;
    }
    ul.snav > li {
        display: inline;
    }
    ul.snav > li:before {
        content: " | ";
    }
    ul.snav > li:first-child:before {
        content: "";
    }

    a.cont {
        display: block;
        margin-right: 0;
        text-align: right;
    }

/* Comments and other Asides */

    .note {
        font-style: italic;
    }
    .note:before {
        content: "Note: ";
    }

    .remark {
        font-size: smaller;
    }
    .remark:before {
        content: "[";
    }
    .remark:after {
        content: "]";
    }

    .lineannotation {
        font-style: italic;
        font-family: serif;
        vertical-align: sub;
    }

    .sidebar {
        clear: both;
        margin: .75em .5em;
        padding: .2em;
        border: outset thin;

        /* Block NS4 from floating */ /*/*/
        float: right;
        width: 30%;
        min-width: 15em;
        /* */
    }
    /* Reduce main header sizes */
    .sidebar h1 {font-size: 1.40em;}
    .sidebar h2 {font-size: 1.25em;}
    .sidebar h3 {font-size: 1.10em;}

/* Emphasis */

    /* em, strong */
    
    strong.stronger {
        font-style: italic;
        font-weight: bold;
    }
    
    strong.very-strong {
        font-weight: bold;
        text-transform: uppercase;
    }

    *.important,
    div.important,
    p.important {
        margin: 1em;
        padding: 0.1em;
        border: solid #F00;
    }

    span.important,
    em.important,
    strong.important {

        font-size: large;
    }

/* Computers - General */

    span.application {
        font-style: italic;
    }

    kbd.command,
    span.command {
        font-family: monospace;
        white-space: pre;
    }

    tt.filename,
    span.filename {
        font-style: italic;
        white-space: nowrap;
    }

    tt.productnumber,
    span.productnumber {
        font-size: 90%;
        font-family: monospace;
    }

/* Code */

    code {
        font-family: monospace;
        white-space: nowrap;
    }

    pre.code,
    pre.incorrect-code {
        /* display: table; Mozilla has a problem with eating white-space with this rule. */
        margin: 1em .5em;
        padding: .2em;
        border: solid 1px;
        font-family: monospace;
        white-space: pre;
    }

    pre.code .remark,
    pre.incorrect-code .remark  {
        font-size: 1em;
        font-style: italic;
    }

    /* turn off content generation */
    pre.code .remark:before,
    pre.incorrect-code .remark:before,
    pre.code .remark:after,
    pre.incorrect-code .remark:after,
    pre.code .note:before
    pre.incorrect-code .note:before {
        content: "";
    }
    

/* Examples and Figures */

    img { /* turn off borders so we don't need border=0 on image links */
        /*/*/
        border: none;
        /* Block NS4 from border rule */
    }

    .example,
    .incorrect-example {
        margin: 1em 3%;
        padding: .25em;
        border: solid;
    }
    .example:before,
    .incorrect-example:before {
        display: block;
        font-weight: bold;
        content: "Example";
    }
    .incorrect-example:before {
        content: "Incorrect Example";
    }
    .example[title]:before {
        content: attr(title);
    }

    .figure,
    .screenshot {
        display: block;
        margin: .75em auto;
    }
    .screenshot[title]:after,
    .figure[title]:after {
        display: block;
        margin: 0 8% .05em;
        font-style: italic;
        font-size: small;
        text-align: right;
        content: attr(title);
    }

    pre.screen {
        /* display: table; Mozilla has a problem with eating whitespace when this is set*/
        margin: 1em .5em;
        padding: .2em;
        border: solid 1px;
        font-family: monospace;
        white-space: pre;
    }

    .co,
    .callout {
        text-decoration: underline;
    }

    .incorrect.incorrect,
    .incorrect-example,
    .incorrect-code {
        border: solid red;
    }

/* Q and A (FAQ) */

    .qandaset {
        counter-reset: qacount;
    }

    .qandaset .question {
        font-size: large;
        font-weight: bold;
    }
    .qandaset .question:before {
        content: counter(qacount) ". ";
        counter-increment: qacount;
    }

    .qandaset .answer {
        margin-top: 1em;
    }

/* Tables */

    table.data {
        border-collapse: collapse;
        margin: 0.5em auto;
        border: 1px solid;
    }

    table.data caption {
        margin: 1em auto 0.2em;
        font-size: small;
        font-style: italic;
        text-align: center;
    }

    table.data th,
    table.data td {
        padding: 0.2em;
        border: 1px solid;
    }

/* Meta */

    address {
        text-align: right;
    }
    .author {
        text-align: center;
    }

/* Live Content */

    dl.tasklist > dt {
        font-size: larger;
    }

/* mozilla.org Main Style Sheet */

/* use colors of the form #rgb instead of #rrggbb  since this discourages 
 * web-unsafe colors. Web-safe colors are of the form #rgb where 
 * values of r, g and b are one of {0,3,6,9,C,F}.
 */

.bannercell {
    padding: 0px;
    border: 0px;
    background: #000;
    color: #FFF;
}
.bannerlink {
    display: block;
    background: #000;
    color: #000;
}
.bordercell {
    background: #000;
    color: #FFF;
}
.titlecell{
    background: #CCC;
    color: #000;
}
.contentcell {
    background: #FFF;
    color: #000;
}
body, html {
    margin: 0;
    background: #FFF;
    color: #000;

}
.mozillaorgbanner {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}
.spacercell {
    height: 3px;
}
.linkcell {
    white-space: nowrap;
}
.documentinfo {
    font-size: 80%;
}
.listbullet {
    margin: 0;
}
.horizbanner {
    font-size: 80%;
}
/* Banner styles end */

/* The margin with for <body> and <html> are zero so the black
 * border around the banner reaches the edges of the content area.
 * On pages with horizontal layout contain the content in a 
 * <DIV CLASS="document-body" so the rest of the page has a margin.
 */

.document-body {
     margin: 10px;
}

/* the horizontal menu bar should have a margin too, but smaller than
 * the main document.
 */
.horizontal-menu {
     margin: 1px 3px;
}

.horiz-category-list {
    text-align: center;
}

/* Begin Markup Styles */

/* Random Html Styles */

    body, p, div, td, th, ol, ul, dl, h1, h2, h3, h4, h5, h6 {
     font-family: sans-serif;
    }

/* Navigation */

    :link {
        background: transparent;
        color: #00E;
    }
    :visited {
        background: transparent;
        color: #551A8B;
    }
    :link:active, :visited:active {
        background: transparent;
        color: #F00
    }

/* Comments and other Asides */

    .remark {
        background: transparent;
        color: navy;
    }

    .sidebar {
        background: #dddddd;
        color: black;
    }

/* Emphasis */

    *.important,
    div.important,
    p.important {
        background: #FFFFB3;
        color: black;
    }

    span.important,
    em.important,
    strong.important {
        /*/*/
        margin: 0;
        padding: 0;
        border: none;
        /* */
        background: transparent;
        color: #F00;
        font-size: 100%;
    }

/* Computers - General */

    kbd {
        background: #eee;
        color: black;
    }

    kbd.command,
    span.command {
        background: transparent;
        color: navy;
    }

/* Code */

    code {
        background: #eee;
        color: black;
    }

    h1 code,
    h2 code,
    h3 code {
        background: transparent;
        color: black;
    }

    pre.code,
    pre.incorrect-code {
        background: #eee;
        color: black;
    }

    pre.code .remark,
    pre.incorrect-code .remark {
        background: transparent;
        color: #444444;
    }

    pre.code span.markup,
    pre.incorrect-code span.markup {
        background: transparent;
        color: purple;
    }
    pre.code var,
    pre.incorrect-code var {
        background: transparent;
        color: green;
    }

    /* Adapt emphasis to code environment */
    pre.code em,
    pre.incorrect-code em {
        font-style: normal;
        font-weight: bold;
    }
    pre.code strong,
    pre.incorrect-code strong {
        border-left: solid 1px; border-right: solid 1px; border-top: solid 1px; border-bottom: solid 1px;
        font-weight: bold;
    }
    pre.code strong.stronger,
    pre.incorrect-code strong.stronger {
        border-left: solid 1px; border-right: solid 1px; border-top: solid 1px; border-bottom: solid 1px;
        border-color: red;
        font-style: normal;
        font-weight: bold;
    }
    pre.code strong.very-strong,
    pre.incorrect-code strong.very-strong {
        border-left: solid 1px; border-right: solid 1px; border-top: solid 1px; border-bottom: solid 1px;
        border-color: red;
        background: transparent;
        color: red;
        font-weight: bold;
        text-transform: none;
    }
    pre.code strong.very-strong *,
    pre.incorrect-code strong.very-strong *,
    pre.code strong.very-strong span.markup,
    pre.incorrect-code strong.very-strong span.markup {
        background: transparent;
        color: red;
    }
    pre.code strong.important,
    pre.incorrect-code strong.important {
        border-left: dashed 1px; border-right: dashed 1px; border-bottom: dashed 1px; border-top: dashed 1px;
        background: red;
        color: white;
        font-weight: bold;
    }
    pre.code strong.important *,
    pre.incorrect-code strong.important *,


    pre.code strong.important span.markup,
    pre.incorrect-code strong.important span.markup {
        background: red;
        color: white;
    }

    .incorrect-example pre,
    .incorrect pre,
    pre.incorrect,
    pre.incorrect-code,
    pre *.incorrect {
        /*/*/
        background: url('white-slash.gif') #eee;
        /**/
        color: maroon;
    }

/* Examples and Figures */

    .example {
        border-color: silver;
    }

    .figure,
    .screenshot {
        background: transparent;
        color: gray;
    }

    .screen {
        background: #ddd;
        color: black;
    }

    .co,
    .callout {
        background: transparent;
        color: teal;
    }

/* Tables */

   table.data th {
     background: #ddd;
     color: black;
   }

   table.data .even {
     background: #eee;
     color: black;
   }

/* Presentational */

    .text1 {
        color: green;
    }
    .text2 {
        color: blue;
    }
    .shaded {
        background: #dddddd;
    }

@media print {
    * {
        background: white !important;
        color: black !important;
    }
    .shaded {
        background: #dddddd !important;
    }
}