Move WebKitSite to Websites
[WebKit-https.git] / Websites / webkit.org / specs / mediaelement.css
1
2 /* stolen from http://www.whatwg.org/specs/web-apps/current-work/ */
3
4 /* This was originally based on the W3C Working Draft stylesheet.
5  * Much has changed since those days. */
6
7 html { margin: 0; padding: 0; color: black; background: white; }
8 body { margin: 0; padding: 0; background: top left repeat-y; } /* fixed no-repeat for w3c-like */
9 body, th, td { font-family: sans-serif; }
10
11 @media print {
12   html { font-size: 10pt; }
13 }
14
15 :link { color: #00C; background: transparent }
16 :visited { color: #609; background: transparent }
17 :link:active, :visited:active { color: #C00; background: transparent }
18 :link:hover, :visited:hover { background: #ffa; }
19 code :link, code :visited { color: inherit; }
20
21 h1, h2, h3, h4, h5, h6 { text-align: left }
22 h1, h2, h3 { color: #3c790a /* w3c-like: #005A9C */; background: transparent; }
23 h1 { font: 900 170% sans-serif } /* remove weights for w3c-like */
24 h2 { font: 800 140% sans-serif } /* remove weights for w3c-like */
25 h3 { font: 700 120% sans-serif } /* remove weights for w3c-like */
26 h4 { font: bold 100% sans-serif }
27 h5 { font: italic 100% sans-serif }
28 h6 { font: small-caps 100% sans-serif }
29
30 body { padding: 0 1em 2em 8.5em; line-height: 1.35; }
31 pre { margin-left: 2em; /* overflow: auto; */ }
32 h1 + h2 { margin-top: 0; }
33 h2 { margin: 3em 0 1em 0; }
34 h2 + h3 { margin-top: 0; }
35 h3 { margin: 2em 0 1em 0; }
36 h4 { margin: 1.5em 0 0.75em 0; }
37 h5, h6 { margin: 1.5em 0 1em; }
38 p { margin: 1em 0; }
39 dl, dd { margin-top: 0; margin-bottom: 0; }
40 dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
41 dt + dt { margin-top: 0; }
42 dd dt { margin-top: 0.25em; margin-bottom: 0; }
43 dd p { margin-top: 0; }
44 dd dl + p { margin-top: 1em; }
45 dd table + p { margin-top: 1em; }
46 p + * > li, dd li { margin: 1em 0; }
47 dt, dfn { font-weight: bold; font-style: normal; }
48 pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
49 pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
50 pre em { font-weight: bolder; font-style: normal; }
51 @media screen { code { color: orangered; } }
52 var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
53 table { border-collapse: collapse; border-style: hidden hidden none hidden; }
54 table thead { border-bottom: solid; }
55 table tbody th:first-child { border-left: solid; }
56 table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
57 blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
58 ins { background: green; color: white; /* color: green; border: solid thin lime; padding: 0.3em; line-height: 1.6em; */ text-decoration: none; }
59 del { background: maroon; color: white; /* color: maroon; border: solid thin red; padding: 0.3em; line-height: 1.6em; */ text-decoration: line-through; }
60 body ins, body del { display: block; }
61 body * ins, body * del { display: inline; }
62
63
64 /* classes and other specifics */
65
66 ul.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
67 img.extra { float: right; }
68 hr.bookmark { border: dashed 2em black; background: yellow; }
69 pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em; }
70 pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
71 code.property-name { background: #FFFFCC; color: black; }
72 code.method-name { background: #CCCCFF; color: black; }
73 code.parameter-name { background: #FFCCFF; color: black; }
74 code.constant-name { background: #CCFFCC; color: black; }
75 dl.switch { padding-left: 2em; }
76 dl.switch dt { text-indent: -1.5em; }
77 dl.switch dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
78
79 div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
80 div.head p { margin: 0; }
81 div.head h1 { margin: 0; }
82 div.head .logo { float: right; margin: 0 1em; }
83 div.head .logo img { border: none } /* remove border from top image */
84 div.head dl { margin: 1em 0; }
85 p.copyright { font-size: x-small; font-style: oblique; margin: 0; }
86
87 body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
88 body > .toc > li > .toc { margin-bottom: 0.5em; }
89 body > .toc > li > .toc > li > .toc { margin-bottom: 0.25em; }
90
91 .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
92 .brief li { margin: 0; padding: 0; }
93
94 [title=WIP], [title=TBW] { background: red; color: yellow; padding: 0.1em 0.3em; border: dotted white; margin: 0 0.7em 0 0.2em; }
95 [title=SCS] { background: green; color: white; padding: 0.1em 0.3em; border-style: none dashed; margin: 0 0.7em 0 0.2em; }
96 [title=WIP] :link, [title=WIP] :visited,
97 [title=TBW] :link, [title=TBW] :visited,
98 [title=SCS] :link, [title=SCS] :visited { background: transparent; color: inherit; }
99
100 .issue { color: #E50000; background: white; opacity: 0.9; }
101 .big-issue { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
102 .big-issue > :first-child { margin-top: 0; }
103 p .big-issue { line-height: 3em; }
104 .note { color: green; background: transparent; font-family: sans-serif; }
105 .warning { color: red; background: transparent; }
106 .note, .warning { font-weight: bolder; font-style: italic; padding: 0.5em 2em; }
107 .note p:first-child, .warning p:first-child { margin-top: 0; }
108 .note p:last-child, .warning p:last-child { margin-bottom: 0; }
109 .warning:before { font-style: normal; }
110
111 p.note:before { content: 'Note: '; }
112 p.warning:before { content: '\26A0 Warning! '; }
113
114 .issue {
115   position: absolute;
116   top: auto;
117   left: 0;
118   margin: -1.5em 0.2em 0.2em 0.2em;
119   border: solid thin;
120   padding: 0.35em;
121   width: 12em;
122   text-align: left;
123   font-size: 0.6em;
124 }
125
126 .issue:hover {
127   z-index: 1;
128 }
129
130 .issue:before {
131   content: '\25B6';
132   display: block;
133   text-align: right;
134   position: absolute;
135   left: 100%;
136   top: 0;
137 }
138
139 .critical { margin: 1em; border: double thick red; padding: 1em; background: #FFFFCC; }
140 .critical > :first-child { margin-top: 0; }
141
142 .example {
143   display: block;
144   color: #222222;
145   background: #FCFCFC;
146   border-left: double;
147   margin-left: 1em;
148   padding-left: 1em;
149 }
150
151 .hide { display: none }
152
153 ul.toc {
154   list-style: disc;                /* Mac NS has problem with 'none' */
155   list-style: none;
156 }
157
158 @media aural {  
159   h1, h2, h3 { stress: 20; richness: 90 }
160   .hide { speak: none }
161   p.copyright { volume: x-soft; speech-rate: x-fast }
162   dt { pause-before: 20% }
163   code, pre { speak-punctuation: code } 
164 }
165
166 body.draft { background-image: url(/images/WD); }
167 body.cfc { background-image: url(/images/CFC); }
168 body.cfi { background-image: url(/images/CFI); }
169 body.spec { background-image: url(/images/REC); }
170