/*
 * style sheet for svg specification
 */


body {
    color: black;
    /* text-align: justify; */
    font-family: helvetica, sans-serif;
    background: white;
    margin: 2em;
    /* for the rec: background: #def url(recbg.jpg); */
}
.navlinks {
    text-align: center;
}
h2, h3, h4, h5, h6 {
    text-align: left;
}

.header {
  text-align: right;
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.5em;
  font-size: 80%;
}

.footer {
  text-align: right;
  margin-top: 1em;
  border-top: 1px solid #aaa;
  padding-top: 0.5em;
  font-size: 80%;
}

.header ul, .footer ul {
  display: inline;
  padding: 0;
}

.header li, .footer li {
  display: inline;
  border-left: 1px solid #aaa;
  padding-left: 0.2em;
}

h1 {
    clear: left;
    margin-top: 1em;
    text-align: center;
}

pre { margin-left: 2em }
pre {
    color: #a52a2a;
    font-family: monospace;
    font-size: 90%
}
pre.svgsamplecompressed {
    font-size: 75%;
    letter-spacing: -.05em;
    line-height: 95%
}
pre strong {
    color: #004400;
    font-weight: bold
}
.filterformula {
    color: #a52a2a;
    font-family: monospace;
    font-size: 90%;
    margin-left: 2em
}

div.dtd-fragment { 
    background-color: #dddddd;
    margin-left: 0;
}
.dtd-fragment { 
    background-color: #dddddd;
    margin-left: 0;
}
.idl-code { 
  margin: 0;
  font-family: monospace;
    border: 1px solid black;
    white-space: pre;
    color: black; 
    background-color: #dfdfdf;
}

.header-separator{
  margin-top: 4em
}

.udom-interface-name {
  font-family: monospace;
}

.idl-definition {
 border-bottom: thin solid #dfdfdf;
  margin-top: 2em
}

.idlDef {
    font-weight: bold
}

.adef {
    font-family: monospace;
    font-weight: bold;
}


address {
    text-align: right;
    font-style: italic;
}

.filename {
  font-weight: bold;
}

/*var {
    font-style: normal;
}*/
img {
    border: 0;
}
.toc {
    text-indent: 0;
}
.toc2 {
    text-indent: 2em;
}
.toc3 {
    text-indent: 4em;
}
p.toc-line {
    margin-top: 1em;
    margin-bottom: 1em;
    text-indent: 0;
}

/* it should be 'inherit', but netscape inserts a random color :-( */
a.noxref:link, a.noxref:visited {color: black; /*color: inherit*/}
div.example a:link, div.example a:visited {color: maroon; /*color: inherit*/}
div.deprecated-html-example a:link,
div.deprecated-html-example a:visited {color: red; /*color: inherit*/}
/*.note a:link, .note a:visited {color: inherit}
.note a:link { color: #00C; }
.note a:visited { color: #609; }*/

.propdef-title {
  background: yellow;
}

a.descdef-title {
  color: yellow;
  background: green
}

/* table {margin-left: 1em} */
div.propdef {margin: 1.2em 0}

.example {
  padding: 0;
  background: white;
}

.exampleheader {
  margin: 0;
  background: #dda;
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  padding: 0.5em 1em;
}

.examplesource {
  padding: 0;
  margin: 0;
  background: #ffc;
  border-bottom: 1px solid #996;
  border-right: 1px solid #996;
  border-top: 1px solid #bb8;
  border-left: 1px solid #bb8;
}

.examplesource pre {
  background: none;
  color: #633;
  margin: 0 1em;
  padding: 0.5em 0;
}

.exampleimage {
  text-align: center;
  padding: 1em;
  border-bottom: 1px solid #996;
  border-right: 1px solid #996;
  border-top: 1px solid #bb8;
  border-left: 1px solid #bb8;
}

.exampleimage > table {
  margin-left: auto;
  margin-right: auto;
}

.schema {
  padding: 0;
  background: white;
  width: 100%;
  margin-top: 1em;
}

.schemaheader {
  margin: 0;
  background: #ccc;
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  padding: 0.5em 1em;
}

.schemasource {
  padding: 0;
  margin: 0;
  background: #ddd;
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
}

.schemasource pre {
  background: none;
  color: #030;
  margin: 0 1em;
  padding: 0.5em 0 0 0;
}

pre.example { color: maroon }
pre.illegal-example { color: red }
div.illegal-example { color: red }
div.illegal-example p { color: black }


div.html-example { color: maroon }
pre.html-example { color: maroon }
pre.illegal-html-example { color: red }
div.illegal-html-example { color: red }
div.illegal-html-example p { color: black }
pre.deprecated-html-example { color: red }
div.deprecated-html-example { color: red }
div.deprecated-html-example p { color: black }

div.xml-example { color: maroon }
pre.xml-example { color: maroon }
pre.illegal-xml-example { color: red }
div.illegal-xml-example { color: red }
div.illegal-xml-example p { color: black }

div.dtd-example { color: maroon }
pre.dtd-example { color: maroon }
pre.illegal-dtd-example { color: red }
div.illegal-dtd-example { color: red }
div.illegal-dtd-example p { color: black }

.editor-note {
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
    background: #6f9 none repeat scroll 0%; 
    color: black; 
}

div.editor-note,p.editor-note { 
    border: 2px dotted #3c6; 
    padding: 0.5em; 
}

div.note,p.note { 
    border: 2px solid #33c; 
    padding: 0.5em;
    background: #eef;
}

.normref { 
    color: red;
}   

.informref {
    color: green;
}   

div.propdef th { 
    text-align: right; 
}

div.descdef th { 
    text-align: right; 
}

ul.toc, ol.toc {list-style: none}
div.toc ul ul, div.toc ol ol {margin-left: 0}
div.toc ul ul ul, div.toc ol ol ol {margin-left: 1em}
div.toc ul ul ul ul, div.toc ol ol ol ol {margin-left: 0}
li.tocline1 {font-weight: bold}
li.tocline2 {font-weight: normal}
li.tocline4 {font-style: italic}
/* div.subtoc ul, div.subtoc ol {list-style: none} */
/* the border in the following rule crashes nn4 on fonts.html :-(
div.subtoc {padding: 1em; border: solid black thin; margin: 1em 0;
    background: #ddd}
*/
ul.index {list-style: none}

s, del {text-decoration: line-through; color: red}
u, ins {text-decoration: underline; background: #bfa}

div.figure {
    text-align: center;
    /*border: solid thin;
    width: 100%;*/
    margin: 2.5em 0
}
p.caption, caption {
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-size: 90%;
    color: #088;
    margin: 1.5em 0 0 0;
}
caption > em {
  font-style: normal;
}
div.toc, ul.index, dt {
    text-align: left
}
sup {
    vertical-align: super;
    font-size: 80%
}
.code-fragment {
    color: #a52a2a;
    font-weight: bold;
    font-size: 90%
}
.element-name {
    color: #a52a2a;
    font-weight: bold;
    font-size: 90%
}
.attr-name {
    color: #2a2aa5;
    font-weight: bold;
    font-size: 90%
}
.prop-name {
    color: black;
    font-weight: bold;
    font-size: 90%
}
.attr-value, .prop-value {
    font-weight: bold;
    font-size: 90%
}
.svg-term {
    color: black;
    font-style: italic;
}
:link .svg-term, :visited .svg-term {
    color: black;
    text-decoration: underline;
    font-style: normal;
}
.svg-termdefine {
    font-weight: bold
}
.example-ref {
    color: green;
}
.anim-target { 
    font-style: italic 
}
.dominterfacename {
        font-weight: bold;
}
.dom-attr-name {
        color: black;
        background-color: #ffffd2;
}
.dom-constant-name {
        color: black;
        background-color: #ffd2ff;
}
.dom-attr-type, .dom-attr-value {
        color: black;
        font-weight: bold;
}
.dom-method-name {
        color: black;
        background-color: #d9e6f8;
}
.dom-parameter-name {
    margin-top: 1%;
        background-color: #fee6f8; 
        color: black;
}
.math-variable {
    font-family:times,serif
}
.color-keyword-value {
    color: #a52a2a;
}
.view-as-svg {
  font-style:italic
}
.table-heading-1 {
  font-style:italic; 
  text-align:center
}
.pathdatatable { 
  background: #dddddd 
}
.useruleapplied {
  font-style:normal; 
  font-weight:bold; 
  color:blue
}
.useruleignored {
  font-style:italic; 
  font-weight:bold; 
  color:#050;
}

.editor { text-decoration: underline; font-size: 85% }
.editor-intro { color: red; font-weight: bold }
.editor-rec { color: red; font-weight: bold }
.designgoals { list-style-type: upper-alpha }
.reqt-level0 { list-style-type: decimal; font-weight: bold }
.reqt-level1 { list-style-type: lower-alpha; font-weight: normal }
.reqt-level2 { list-style-type: lower-roman; font-weight: normal }

.b4nomfix { color: #a52a2a; text-decoration: line-through }
.afnomfix { color: red; }



.specissue { 
    border-style: solid; 
    border-color: black; 
    border-width: 1px 1px 1px 4px; 
    padding: 0.5em; background: rgb(220, 20, 60) none repeat scroll 0%; 
}

.svgt12 { 
    background: rgb(153, 223, 255) none repeat scroll 0%; 
    color: black; 
}

table.images {
  margin-left: auto;
  margin-right: auto;
}

table.images td {
  text-align: center;
  vertical-align: top;
  padding: 1em 1em 0 1em;
}

table.multi-column-table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

.multi-column-table th {
text-align:         center;
border:        1px solid #000;
background:    #5ABBFF;
padding-left:       5px;
padding-right:       5px;
padding-bottom:     5px;
}

.multi-column-table td {
vertical-align:     middle;
border:             1px solid #aaa;
padding-bottom:     5px;
padding-left:       5px;
padding-right:       5px;
border-style:       solid;
text-align:         center;
}

table.top-left-aligned td {
  text-align: left;
  vertical-align: top;
}

table.top-left-aligned th {
  text-align: left;
  vertical-align: bottom;
}

#trait-table th {
  vertical-align: bottom;
  text-align: left;
}

#trait-table td {
  vertical-align: top;
  text-align: left;
}

#trait-table .trait-value {
  text-align: right;
}
#trait-table .trait-value var {
  font-style: italic;
}

.odd {
  background: #fff;
}

.even {
  background: #eee;
}

dl.definitions > dt {
  margin-top: 1em;
}

dl.definitions > dt + dt {
  margin-top: 0;
}

dl.definitions > dd > :first-child {
  margin-top: 0;
}

dl.indented {
  margin-left: 2em;
}

.display-math {
  margin-top: -1em;
  margin-left: 2em;
}

.vardefs {
  margin-left: 2em;
}

hr.chapter-divider {
  margin-top: 3em;
  margin-bottom: 3em;
}

img.bordered {
  border: 1px solid black;
}

/* Use a slightly more readable line height... */
* {
  line-height: 1.25;
}

/* ...but don't make it blow out page length when printed. */
@media print {
  * {
    line-height: inherit;
  }
  body {
    font-size: 9pt;
  }
}

/* Styles for the table appendices */

.reference-list th {
  text-align:         left;
}

.reference-list td {
  vertical-align:     top;
  border-bottom:      1px solid #ddd;
  padding-bottom:     5px;
}

.true {
  font-size:          1.2em;
  font-weight:        bold;
  color:              #090;
}

.false {
  font-size:          1.2em;
  font-weight:        bold;
  color:              #900;
}

.media {
  font-weight:        bold;
  color:              #f25f00;
}

/* Style for the feature table appendix */

.feature-table {
  border-collapse: collapse;
}

.feature-table th {
border:        1px solid #000;
background:    #5ABBFF;
padding-left:       5px;
padding-right:       5px;
padding-bottom:     5px;
vertical-align:     middle;
border-collapse: collapse;
}

.feature-table td {
border:             1px solid #aaa;
padding-bottom:     5px;
padding-left:       5px;
padding-right:       5px;
border-style:       solid;
vertical-align: baseline;
}

.feature-string {
    font-weight: bold;
    font-size: 90%;
    white-space: nowrap;
}

.feature {
	font-size: 80%;
}

/* Styles for the QA appendix */

table.qa-table {
    border-collapse: collapse;
    margin: 1em auto;}

table.qa-table, .qa-table tr, .qa-table th, .qa-table td {
    border: 1px solid black;
    }

.qa-table th, .qa-table td {
    text-align: left;
    padding: 5px 1em;   }


.qa-table tr.legend th {
    text-align: center;
    background: #005a9c;
    color: #fff;
}

.qa-table th {
    background: #dadada;
}
.qa-table th a {
    text-decoration: none;
    color: black;}

.qa-table tr.principle {
    font-weight: bold;
    background: #fafafa;
}
.qa-table tr.practice {
    font-weight: normal;
}

/* Styles for the event table in Interaction */
.event-table td {
  padding-top: 1em;
  vertical-align: baseline;
}
.event-table td.description {
  text-align: left;
}
.event-table td.description p:first-child {
  margin-top: 0;
}

/* Styles for the refs appendix */
.familyname {text-transform: uppercase}
.wip {font-style: italic}

/* These three lines are for the refs appendix too, but were marked
 * as "for testing only", so probably should be removed later.
 */
/*
.w3crec a{color: #f99}
.w3cwd a, .w3cnote a, .w3ccr a {color: #9f9}
 */
.wip {color:#9f9; background: #000;padding:2px}