Tue, 27 Jan 2015 16:02:44 -0800
[css-overflow] Note regressions from bikeshed conversion.
1 @import url(http://fonts.googleapis.com/css?family=Nosifer|Gochi+Hand|Press+Start+2P);
2 /*
3 * Style sheet for the CSS3 specification,
4 * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
5 */
7 @media print {
8 html { margin: 0 !important }
9 body { font-family: serif }
10 th, td { font-family: inherit }
11 a { color: inherit !important }
12 div.example:before { font-family: serif !important }
13 pre.example:before { font-family: serif !important }
14 a:link, a:visited { text-decoration: none !important }
15 a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
16 }
17 @page {
18 margin: 1.5cm 1.1cm;
19 }
21 body {
22 counter-reset: exampleno figure issue;
23 margin: 0 auto !important;
24 max-width: 50em;
25 text-align: center;
26 }
28 body {
29 background: url('construction.gif') top left repeat-y, url('construction.gif') top right repeat-y, url('spacebg.gif') black !important;
30 color: yellow !important;
31 font-family: Comic Sans MS, "Gochi Hand", fantasy !important;
32 font-size: 1.2em;
33 }
34 pre, code {
35 font-family: "Press Start 2P", monospace !important;
36 }
37 h1,h2,h3,h4,h5,h6 {
38 color: lime !important;
39 background: black !important;
40 letter-spacing: 3px !important;
41 font-family: Nosifer, monospace !important;
42 border-bottom: thick solid !important;
43 padding: 3px !important;
44 text-align: center !important;
45 }
46 h1,h2,h3,h4,h5,h6,.example, .issue, .figure, .note, .propdef {
47 -webkit-animation: rainbow-border 2s infinite;
48 -moz-animation: rainbow-border 2s infinite;
49 -o-animation: rainbow-border 2s infinite;
50 -ms-animation: rainbow-border 2s infinite;
51 }
52 .example, .issue, .figure, .note, .propdef {
53 border: 10px ridge !important;
54 background: transparent !important;
55 }
56 .head > p:first-of-type > a::before {
57 content: url('w3c.gif') !important;
58 }
59 .head > p:first-of-type > a > img {
60 display: none !important;
61 }
62 p:nth-child(5n):not(:nth-child(2n))::after { content: " NO FEAR."; }
64 @-webkit-keyframes rainbow-border {
65 0%, 100% { border-color: red; }
66 16% { border-color: orange; }
67 33% { border-color: yellow; }
68 50% { border-color: lime; }
69 67% { border-color: blue; }
70 83% { border-color: purple; }
71 }
72 @-moz-keyframes rainbow-border {
73 0%, 100% { border-color: red; }
74 16% { border-color: orange; }
75 33% { border-color: yellow; }
76 50% { border-color: lime; }
77 67% { border-color: blue; }
78 83% { border-color: purple; }
79 }
80 @-o-keyframes rainbow-border {
81 0%, 100% { border-color: red; }
82 16% { border-color: orange; }
83 33% { border-color: yellow; }
84 50% { border-color: lime; }
85 67% { border-color: blue; }
86 83% { border-color: purple; }
87 }
88 @-ms-keyframes rainbow-border {
89 0%, 100% { border-color: red; }
90 16% { border-color: orange; }
91 33% { border-color: yellow; }
92 50% { border-color: lime; }
93 67% { border-color: blue; }
94 83% { border-color: purple; }
95 }
97 /* Pagination */
98 h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
99 div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
100 div.example { page-break-inside: avoid }
101 dt { page-break-after: avoid }
103 span.id {float: right; font-weight: bold}
105 /* General Structural Markup */
106 h2, h3, h5, h6 { margin-top: 3em; }
108 h1 + h2 { margin-top: 0; }
110 h4 { margin-top: 4em; }
112 p, div.note, div.issue {
113 margin-top: 1em;
114 margin-bottom: 1em;
115 }
117 dd > p:first-child, li > p:first-child, .note > p:first-child, .issue > p:first-child {
118 margin-top: 0
119 }
121 pre {
122 margin-top: 1em;
123 margin-bottom: 1em;
124 }
126 img {
127 border-style: none;
128 color: white;
129 }
130 .toc {
131 }
133 body {
134 line-height: 1.5;
135 }
137 a:link, a:visited {
138 color: inherit;
139 text-decoration: underline;
140 }
142 a.logo:link, a.logo:visited {
143 padding: 0;
144 border-style: none;
145 }
147 dl dd { margin: 0 0 1em 2em }
148 .head dd { margin-bottom: 0; }
149 ul, ol { margin-left: 0; padding-left: 2em; }
150 li { margin: 0.25em 2em 0.5em 0; padding-left: 0 }
152 ul.indexlist { margin-left: 0; columns: 13em; }
153 ul.indexlist li { margin-left: 0; list-style: none }
154 ul.indexlist li li { margin-left: 1em }
156 /* Examples */
158 .example {
159 counter-increment: exampleno;
160 }
161 div.example:before, pre.example:before {
162 content: "Example";
163 content: "Example " counter(exampleno);
164 min-width: 7.5em;
165 text-transform: uppercase;
166 display: block;
167 }
168 div.illegal-example:before, pre.illegal-example:before {
169 content: "Invalid Example";
170 content: "Invalid Example" counter(exampleno);
171 }
172 div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
173 div.illegal-xml, pre.example, pre.illegal-example, pre.html,
174 pre.illegal-html, pre.xml, pre.illegal-xml {
175 padding: 0.5em;
176 margin: 1em 0;
177 position: relative;
178 clear: both;
179 }
180 pre.example, pre.illegal-example, pre.html,
181 pre.illegal-html, pre.xml, pre.illegal-xml {
182 padding-top: 1.5em;
183 }
184 pre.illegal-example { color: red }
185 div.illegal-example { color: red }
186 div.illegal-example p { color: black }
188 div.html { color: #600 }
189 pre.html { color: #600 }
190 pre.illegal-html { color: red }
191 div.illegal-html { color: red }
192 div.illegal-html p { color: black }
193 pre.deprecated-html { color: red }
194 div.deprecated-html { color: red }
195 div.deprecated-html p { color: black }
197 div.xml { color: #600 }
198 pre.xml { color: #600 }
199 pre.illegal-xml { color: red }
200 div.illegal-xml { color: red }
201 div.illegal-xml p { color: black }
203 .css, .property { color: #005a9c } /* inline CSS code (SPAN/CODE) */
204 code.css { font-family: inherit; font-size: 100% }
205 code.html { color: #600 } /* inline HTML */
206 code.xml { color: #600 } /* inline XML */
207 .property { font: inherit; white-space: nowrap; } /* name of a CSS property (SPAN) */
208 .descriptor { } /* name of a CSS descriptor (SPAN) */
209 .type { font-style: italic } /* A <type> value for a property */
211 dfn { font-weight: bolder; }
213 .issue, .note, div.example, pre.example {
214 padding: .5em;
215 /* padding: .5rem; /* proposed unit in css3-values */
216 border-left-width: .5em;
217 /* border-left-width: .5rem; /* proposed unit in css3-values */
218 border-left-style: solid;
219 }
220 span.note, span.issue { padding: .1em .5em .15em; }
222 /* Open issue / editorial remark; not intended for a final publication */
223 .issue {
224 border-color: #E05252;
225 background: #FBE9E9;
226 counter-increment: issue;
227 }
229 .issue:before {
230 content: "Issue " counter(issue);
231 padding-right: 1em;
232 text-transform: uppercase;
233 color: #E05252;
234 }
236 /* Class note is a non-normative note. May be inline or a P or DIV */
237 .note {
238 border-color: #52E052;
239 background: #E9FBE9;
240 }
242 .normref { color: red }
243 .informref { color: green }
245 /* Example box */
246 div.example, pre.example {
247 border-color: #E0CB52;
248 background: #FCFAEE;
249 }
251 div.example:before, pre.example:before {
252 color: #B9AB2D;
253 font-family: sans-serif;
254 }
256 /* ToC not indented, but font style shows hierarchy */
257 ul.toc {margin: 1em 0; padding: 0; line-height: 1.3; font-weight: bold; /*text-transform: uppercase;*/ }
258 ul.toc ul {margin: 0; padding: 0; font-weight: normal; text-transform: none; }
259 ul.toc ul ul {margin: 0 0 0 2em; font-style: italic; }
260 ul.toc ul ul ul {margin: 0}
261 ul.toc > li {margin: 1.5em 0; padding: 0; }
262 ul.toc ul.toc li { margin: 0.3em 0 0 0; }
263 ul.toc a { text-decoration: none; }
264 ul.toc a:hover, ul.toc a:focus { text-decoration: underline; }
265 /*
266 ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
267 ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
268 */
270 /* Section numbers in a column of their own */
271 ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
272 ul.toc ul ul span.secno { margin-left: -7em; }
273 /*ul.toc span.secno {text-align: right}*/
274 ul.toc li {clear: both}
275 ul.toc {margin-left: 5em}
276 /* If we had 'tab', floats would not be needed here:
277 ul.toc span.secno {tab: 5em right; margin-right: 1em}
278 ul.toc li {text-indent: 5em hanging}
279 The second line in case items wrap
280 */
282 ul.index {
283 list-style: none;
284 }
286 s, del {text-decoration: line-through; color: red}
287 u, ins {text-decoration: underline; background: #bfa}
289 div.figure, div.sidefigure {
290 text-align: center;
291 margin: 2.5em 0;
292 }
293 div.sidefigure {
294 float: right;
295 width: 50%;
296 margin: 0 0 0.5em 0.5em
297 }
298 div.figure img, div.sidefigure img {
299 display: block;
300 margin: auto;
301 max-width: 100%
302 }
303 p.caption, caption {
304 text-align: center;
305 font-style: italic;
306 font-size: 90%;
307 }
308 p.caption:before {
309 content: "Figure " counter(figure) ". ";
310 font-weight: bold;
311 }
312 p.caption {
313 counter-increment: figure;
314 }
316 /* DL list is indented, but figure inside it is not */
317 dd { margin-left: 2em }
318 dd div.figure { margin-left: -2em }
320 sup {
321 vertical-align: super;
322 font-size: 80%
323 }
325 /* "Equations" (not real MathML, but simple HTML) are put in a
326 blockquote and may have an equation number. We make sure the
327 blockquote has enough margin on the right and then put the equation
328 number there. */
330 blockquote {
331 margin: 0.5em 4em 0.5em 2em;
332 text-indent: 0;
333 }
334 .eqno {
335 text-align: right;
336 float: right;
337 width: 3em;
338 margin: 0 -4em 0 0;
339 font-weight: bold;
340 /* background: silver; color: black; padding: 0.1em */
341 }
343 table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
344 table.equiv-table th, table.equiv-table td { padding: 0.3em }
345 table.equiv-table th { text-align: left }
346 /* table.equiv-table th:first-child { text-align: right } */
347 table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
348 table.equiv-table { border-bottom: hidden }
349 table.equiv-table { empty-cells: show }
350 table.equiv-table caption { margin: 0.5em 0 0 0 }
352 /* Style for table of properties */
353 table.proptable {
354 font-size: small;
355 border-collapse: collapse;
356 border-spacing: 0;
357 text-align: left;
358 margin: 1em 0;
359 }
361 table.proptable td, table.proptable th {
362 padding: 0.4em;
363 text-align: center;
364 }
366 table.proptable tr:hover td {
367 background: #DEF;
368 }
371 /* Style for table that defines a property or a descriptor */
372 table.propdef, table.propdef-extra, table.descdef {
373 border-spacing: 0;
374 padding: 0 1em 0.5em;
375 width: 100%;
376 table-layout: fixed;
377 background: #DEF;
378 margin: 1.2em 0;
379 border-left: 0.5em solid #8CCBF2;
380 }
382 table.propdef td, table.propdef-extra td, table.descdef td,
383 table.propdef th, table.propdef-extra th, table.descdef th {
384 padding: 0.5em;
385 vertical-align: baseline;
386 border-bottom: 1px solid #bbd7e9;
387 }
388 /*
389 table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
390 font-weight: bold;
391 font-style: normal
392 }
393 */
394 table.propdef td:first-child,
395 table.propdef-extra td:first-child,
396 table.descdef td:first-child,
397 table.propdef th:first-child,
398 table.propdef-extra th:first-child,
399 table.descdef th:first-child {
400 font-style: italic;
401 font-weight: normal;
402 width: 8.3em;
403 padding-left: 1em;
404 }
405 table.propdef td[colspan]:first-child,
406 table.propdef-extra td[colspan]:first-child,
407 table.descdef td[colspan]:first-child,
408 table.propdef th[colspan]:first-child,
409 table.propdef-extra th[colspan]:first-child,
410 table.descdef th[colspan]:first-child {
411 font-style: inherit
412 }
413 table.propdef tr:first-child,
414 table.propdef-extra tr:first-child,
415 table.descdef tr:first-child {
417 }
419 table.propdef > tbody > tr:last-child th,
420 table.propdef-extra > tbody > tr:last-child th,
421 table.descdef > tbody > tr:last-child th,
422 table.propdef > tbody > tr:last-child td,
423 table.propdef-extra > tbody > tr:last-child td,
424 table.descdef > tbody > tr:last-child td {
425 border-bottom: 0;
426 }
428 table.propdef tr:first-child th,
429 table.propdef-extra tr:first-child th,
430 table.descdef tr:first-child th,
431 table.propdef tr:first-child td,
432 table.propdef-extra tr:first-child td,
433 table.descdef tr:first-child td {
434 padding-top: 1em;
435 }
437 /* For when values are extra-complex and need formatting for readability */
438 table td.pre {
439 white-space: pre-wrap;
440 }
442 /* A footnote at the bottom of a propdef */
443 table.propdef td.footnote {padding-top: 0.6em; width: auto}
444 table.propdef td.footnote:before {
445 content: " ";
446 display: block;
447 height: 0.6em;
448 width: 4em;
449 border-top: thin solid;
450 }
452 table.proptable td .property {
453 display: block;
454 text-align: left;
455 font-weight: bold;
456 }
458 /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
459 or, if they do, they don't put them in uppercase. But the following
460 class is provided in case a spec wants to use RFC 2119 terms in
461 uppercase in the source. */
463 em.rfc2119 {
464 text-transform: lowercase;
465 font-variant: small-caps;
466 font-style: normal
467 }
469 /* In Profile specs, a table of required features: */
471 table.features th {
472 background: #00589f;
473 color: #fff;
474 text-align: left;
475 padding: 0.2em 0.2em 0.2em 0.5em;
476 }
477 table.features td {
478 vertical-align: top;
479 border-bottom: 1px solid #ccc;
480 padding: 0.3em 0.3em 0.3em 0.7em;
481 }
484 /* Style for data tables (and properly marked-up proptables) */
486 .data, .proptable {
487 margin: 1em auto;
488 border-collapse: collapse;
489 width: 100%;
490 border: hidden;
491 }
492 .data caption {
493 width: 100%;
494 text-align: center;
495 }
497 .data td, .data thx,
498 .proptable td, .proptable thx {
499 padding: 0.5em;
500 text-align: center;
501 border-top: 1px dotted;
502 }
504 .data thead td:empty {
505 padding: 0;
506 border: 0;
507 }
509 .data thead th[scope="row"],
510 .proptable thead th[scope="row"] {
511 text-align: right;
512 color: inherit;
513 }
515 .data thead,
516 .proptable thead,
517 .data tbody,
518 .proptable tbody {
519 color: inherit;
520 border-bottom: 1px solid;
521 }
523 .data colgroup {
524 border-left: 1px solid;
525 }
527 .data tbody th:first-child,
528 .proptable tbody th:first-child ,
529 .data tbody td[scope="row"]:first-child,
530 .proptable tbody td[scope="row"]:first-child {
531 text-align: right;
532 color: inherit;
533 border-right: 1px solid;
534 border-top: 1px dotted;
535 padding-right: 1em;
536 }
538 .data tbody th[rowspan],
539 .proptable tbody th[rowspan],
540 .data tbody td[rowspan],
541 .proptable tbody td[rowspan]{
542 border-left: 1px dotted;
543 }
545 .data tbody th[rowspan]:first-child,
546 .proptable tbody th[rowspan]:first-child,
547 .data tbody td[rowspan]:first-child,
548 .proptable tbody td[rowspan]:first-child{
549 border-left: 0;
550 border-right: 1px dotted;
551 }
553 .complex.data th,
554 .complex.data td {
555 border: 1px dotted;
556 }
559 .data img {
560 vertical-align: middle;
561 }
563 table.propdef {
564 table-layout: auto;
565 }
566 .propdef th {
567 font-style: italic;
568 font-weight: normal;
569 text-align: left;
570 width: 3em;
571 }
572 dt dfn code {
573 font-size: inherit;
574 }
576 /* This is mostly to make the list inside the CR exit criteria more compact. */
577 ol.inline, ol.inline li {display: inline; padding: 0; margin: 0}
578 ol.inline {counter-reset: list-item}
579 ol.inline li {counter-increment: list-item}
580 ol.inline li:before {content: "(" counter(list-item) ") "; font-weight: bold}
582 /* This styles the obsoletion notice on some of our older/abandoned specs. */
583 details.obsolete[open] {
584 background: #fdd;
585 color: red;
586 font-weight: bold;
587 text-align: center;
588 padding: .5em;
589 border: thick solid red;
590 border-radius: 1em;
591 position: fixed;
592 left: 1em;
593 right: 1em;
594 bottom: 1em;
595 z-index: 1000;
596 }
598 details.obsolete:not([open]) > summary {
599 background: #fdd;
600 color: red;
601 font-weight: bold;
602 text-align: center;
603 padding: .5em;
604 }