/*
 * Style sheet for the CSS2 specification
 */

BODY {
    /* text-align: justify; */
    font-family: helvetica, sans-serif;
    /* For the REC: background: #def url(/prx/000/https/raw.githubusercontent.com/w3c/csswg-drafts/e9ecba7e0293c5c150d3c6ae1559da5194cb89a3/css21/style/recbg.jpg); */
}
H2, H3, H4, H5, H6 {
    text-align: left;
}

H1 {
    clear: left;
    margin-top: 2em;
}

DIV.navbar {
    text-align: center;
}

PRE {
    font-family: monospace;
    margin-left: 1em;
    font-size: 90%
}

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

VAR {
    font-style: normal;
}
IMG {
    border: 0;
}
.toc {
    text-indent: 0;
}
P.toc-line {
    margin-top: 1em;
    margin-bottom: 1em;
    text-indent: 0;
}
TR {
    vertical-align: baseline;
}

/* I don't like all that blue text, how about this: */
/* 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: green; /*color: inherit*/}

A.propdef-title {
  background: yellow;
}

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

/* TABLE {margin-left: 1em} */
DIV.propdef {margin: 1.2em 0}

div.example { color: maroon }
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 }

.note {
    /*font-weight: bold;*/
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
    color: green
}

.normref { 
    color: red;
}	

.informref {
    color: green;
}	

DIV.propdef TH { 
    text-align: right; 
}

DIV.descdef TH { 
    text-align: right; 
}

UL {margin-left: 0; padding-left: 1em}
OL {margin-left: 0; padding-left: 2em}
DIV.toc UL {padding-left: 0}
DIV.toc UL UL UL {padding-left: 1em}
DIV.toc UL UL UL UL {padding-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: disc;		/* Mac NS has problem with 'none' */
  list-style: none;
}
DIV.index {columns: 12em; margin-top: 1.2em}
DIV.index UL {padding-left: 2em}
DIV.index > UL {padding-left: 0}

DT { 
    font-weight: bold
}

S, DEL {text-decoration: line-through; color: red; background: #fbb}
U, INS {text-decoration: underline; background: #bfb}
BODY>DEL,BODY>INS {display: block}

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 25% 0 25%;
}
DIV.toc, UL.index, DT {
    text-align: left
}
SUP {
    vertical-align: super;
    font-size: 80%
}

/* In zindex.html: */
OL.stack P {
    margin-bottom: 0
}

/* Open issues. Should be resolved before going to CR */

.issue {color: red}
div.issue, p.issue {border: thin solid red; padding: 0.5em}
.issue:before {content: "Issue:"; background: red; color: white;
                padding: 0 0.5em; font-weight: bold; margin: 0 1em 0 0}

/*
@page {
  @bottom-right {
    font-family: helvetica, sans-serif;
    content: counter(page);
    text-align: right;
    vertical-align: top;
    padding-top: 2em;
  }
}
*/

@page {
  margin: 2cm 0.6cm 2cm 0.6cm
}

@media print {
HTML > BODY {
    padding: 0 60px;	    /* Override /StyleSheets/TR/W3C-REC.css */
}

P {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 1em;
}
H1 + P, H2 + P, H3 + P, H4 + P, H5 + P, H6 + P,
UL + P, OL + P, PRE + P, LI > P:first-child {
    text-indent: 0;
}

/* the following doesn't work for now,
   instead we rely on a patched version of html2ps which has this built-in */
.dlink { display: none }

/* the following doesn't work for now,
   instead we rely on a patched version of html2ps which has this built-in */
DIV.navbar, HR.navbar {
   display: none;
}

H1 { page-break-before: always; margin-top: 0 }
.head H1 { page-break-before: avoid }

.NOPRINT {display: none}
}


/* This is mostly to make the list inside the CR exit criteria more compact. */
ol.inline, ol.inline li {display: inline; padding: 0; margin: 0}
ol.inline {counter-reset: list-item}
ol.inline li {counter-increment: list-item}
ol.inline li:before {content: "(" counter(list-item) ") "; font-weight: bold}


/* Put .annoying-warning in a red box fixed at the bottom of the
viewport. Adding INPUT and LABEL as below allows the box to be clicked
away, after which it will appear inline:

   <INPUT ID=annoying-warning TYPE=CHECKBOX TITLE="hide warning">
   <LABEL FOR=annoying-warning>(hide)</LABEL> <DIV
   CLASS=annoying-warning> <P><STRONG>Warning:</STRONG> Text of the
   warning...  </DIV>

*/

.annoying-warning {
    background: #fdd;
    color: red;
    font-weight: bold;
    padding: .75em 1em;
    border: solid red;
    border-radius: 1em;
    margin-top: 1.2em;
}
.annoying-warning :last-child {margin-bottom: 0}
.annoying-warning :first-child {margin-top: 0}
#annoying-warning, #annoying-warning + * {display: none}

@media screen {
    #annoying-warning:not(:checked) + * + * {position: fixed; z-index: 3;
	bottom: 2em; left: 1em; right: 1em; text-align: center;
	box-shadow: 0 2px 8px black; border-radius: 1em}
    #annoying-warning:not(:checked), #annoying-warning:not(:checked) + * {
	display: block; position: fixed; z-index: 4}
    #annoying-warning {font-size: 1em; bottom: 2.3em; right: 1.5em;
	margin: 0}
    #annoying-warning + * {font-size: 80%; bottom: 2.5em; right: 3.3em}
    html {margin-bottom: 15em}
}