|
8
|
1 /* w3c-blue.css
|
|
|
2
|
|
|
3 Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
|
|
|
4 W3C liability, trademark, document use and software licensing
|
|
|
5 rules apply, see:
|
|
|
6
|
|
|
7 http://www.w3.org/Consortium/Legal/copyright-documents
|
|
|
8 http://www.w3.org/Consortium/Legal/copyright-software
|
|
|
9 */
|
|
|
10 body
|
|
|
11 {
|
|
|
12 margin: 0 0 0 0;
|
|
|
13 padding: 0 0 0 0;
|
|
|
14 width: 100%;
|
|
|
15 height: 100%;
|
|
|
16 color: black;
|
|
|
17 background-color: white;
|
|
|
18 font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
|
|
|
19 font-size: 14pt;
|
|
|
20 }
|
|
|
21
|
|
|
22 div.slide.titlepage {
|
|
|
23 text-align: center;
|
|
|
24 }
|
|
|
25
|
|
|
26 div.slide.titlepage h1 {
|
|
|
27 padding-top: 40%;
|
|
|
28 }
|
|
|
29
|
|
|
30 div.slide {
|
|
|
31 z-index: 20;
|
|
|
32 margin: 0 0 0 0;
|
|
|
33 padding: 0;
|
|
|
34 border-width: 0;
|
|
|
35 top: 0;
|
|
|
36 bottom: 0;
|
|
|
37 left: 0;
|
|
|
38 right: 0;
|
|
|
39 line-height: 120%;
|
|
|
40 background-color: transparent;
|
|
|
41 }
|
|
|
42
|
|
|
43 div.background {
|
|
|
44 z-index: 1;
|
|
|
45 position: absolute;
|
|
|
46 vertical-align: bottom;
|
|
|
47 left: 0;
|
|
|
48 right: 0;
|
|
|
49 top: 0;
|
|
|
50 bottom: auto;
|
|
|
51 height: 4.1em;
|
|
|
52 padding: 0 0 0 0.2em;
|
|
|
53 margin: 0 0 0 0;
|
|
|
54 border-width: 0;
|
|
|
55 background-color: #728ec2;
|
|
|
56 }
|
|
|
57
|
|
|
58 div.background img {
|
|
|
59 height: 4em;
|
|
|
60 }
|
|
|
61
|
|
|
62 /* this rule is hidden from IE which doesn't support + selector */
|
|
|
63 div.slide + div[class].slide { page-break-before: always;}
|
|
|
64
|
|
|
65 div.slide h1 {
|
|
|
66 padding-left: 3em;
|
|
|
67 padding-right: 3em;
|
|
|
68 padding-top: 0.1em;
|
|
|
69 margin-bottom: 0.8em;
|
|
|
70 margin-top: -0.05em;
|
|
|
71 margin-left: 0;
|
|
|
72 margin-right: 0;
|
|
|
73 min-height: 2.3em;
|
|
|
74 color: white;
|
|
|
75 height: 2.2em;
|
|
|
76 font-size: 160%;
|
|
|
77 line-height: 1.1em;
|
|
|
78 }
|
|
|
79
|
|
|
80 div.slide h1 a {
|
|
|
81 color: white;
|
|
|
82 text-decoration: none;
|
|
|
83 }
|
|
|
84
|
|
|
85 div.slide h1 a:link {
|
|
|
86 color: white;
|
|
|
87 text-decoration: none;
|
|
|
88 }
|
|
|
89
|
|
|
90 div.slide h1 a:visited {
|
|
|
91 color: white;
|
|
|
92 text-decoration: none;
|
|
|
93 }
|
|
|
94
|
|
|
95 div.slide h1 a:hover {
|
|
|
96 color: white;
|
|
|
97 text-decoration: underline;
|
|
|
98 }
|
|
|
99
|
|
|
100 div.slide h1 a:active {
|
|
|
101 color: red;
|
|
|
102 text-decoration: underline;
|
|
|
103 }
|
|
|
104
|
|
|
105 #head-icon {
|
|
|
106 margin-top: 0.5em;
|
|
|
107 margin-bottom: 0;
|
|
|
108 margin-left: 0;
|
|
|
109 margin-right: 1em;
|
|
|
110 background: #728ec2;
|
|
|
111 border-width: 0;
|
|
|
112 height: 3em;
|
|
|
113 max-width: 3em;
|
|
|
114 z-index: 2;
|
|
|
115 float: left;
|
|
|
116 }
|
|
|
117
|
|
|
118 #head-logo {
|
|
|
119 margin: 0;
|
|
|
120 margin-top: 0.25em;
|
|
|
121 padding-top: 0.25em;
|
|
|
122 padding-bottom: 0.2em;
|
|
|
123 padding-left: 0;
|
|
|
124 padding-right: 0;
|
|
|
125 height: 3.2em;
|
|
|
126 width: 4.8em;
|
|
|
127 float: right;
|
|
|
128 z-index: 2;
|
|
|
129 background: #728ec2;
|
|
|
130 }
|
|
|
131
|
|
|
132 #head-logo-fallback {
|
|
|
133 margin: 0;
|
|
|
134 padding: 0;
|
|
|
135 margin-top: -0.8em;
|
|
|
136 width: 4.8em;
|
|
|
137 float: right;
|
|
|
138 z-index: 2;
|
|
|
139 }
|
|
|
140
|
|
|
141 /* the next two classes support vertical and horizontal centering */
|
|
|
142 div.vbox {
|
|
|
143 float: left;
|
|
|
144 height: 40%;
|
|
|
145 width: 50%;
|
|
|
146 margin-top: -240px;
|
|
|
147 }
|
|
|
148 div.hbox {
|
|
|
149 width:60%;
|
|
|
150 margin-top: 0;
|
|
|
151 margin-left:auto;
|
|
|
152 margin-right:auto;
|
|
|
153 height: 60%;
|
|
|
154 border:1px solid silver;
|
|
|
155 background:#F0F0F0;
|
|
|
156 overflow:auto;
|
|
|
157 text-align:left;
|
|
|
158 clear:both;
|
|
|
159 }
|
|
|
160
|
|
|
161 /* styling for named background */
|
|
|
162 div.background.slanty {
|
|
|
163 z-index: 2;
|
|
|
164 bottom: 0;
|
|
|
165 height: 100%;
|
|
|
166 background: transparent;
|
|
|
167 }
|
|
|
168
|
|
|
169 div.background.slanty img { margin-top: 4em; width: 100%; height: 80% }
|
|
|
170
|
|
|
171 /* the following makes the pre background translucent */
|
|
|
172 /* opacity is a CSS3 property but supported by Mozilla family */
|
|
|
173 /* filter is an IE specific feature that also requires width */
|
|
|
174 div.slide.slanty pre {
|
|
|
175 width: 93%; /* needed for IE filter to work */
|
|
|
176 opacity: .8;
|
|
|
177 filter: alpha(opacity=80);
|
|
|
178 }
|
|
|
179
|
|
|
180 img.withBorder {
|
|
|
181 border: 2px solid #c60;
|
|
|
182 padding: 4px;
|
|
|
183 }
|
|
|
184
|
|
|
185 li pre { margin-left: 0; }
|
|
|
186
|
|
|
187 @media print { pre { font-size: 60% } }
|
|
|
188
|
|
|
189 blockquote { font-style: italic }
|
|
|
190
|
|
|
191 img { background-color: transparent }
|
|
|
192
|
|
|
193 p.copyright { font-size: smaller }
|
|
|
194
|
|
|
195 .center { text-align: center }
|
|
|
196 .footnote { font-size: smaller; margin-left: 2em; }
|
|
|
197
|
|
|
198 a img { border-width: 0; border-style: none }
|
|
|
199
|
|
|
200 a:visited { color: navy }
|
|
|
201 a:link { color: navy }
|
|
|
202 a:hover { color: red; text-decoration: underline }
|
|
|
203 a:active { color: red; text-decoration: underline }
|
|
|
204
|
|
|
205 a {text-decoration: none}
|
|
|
206 .navbar a:link {color: white}
|
|
|
207 .navbar a:visited {color: yellow}
|
|
|
208 .navbar a:active {color: red}
|
|
|
209 .navbar a:hover {color: red}
|
|
|
210
|
|
|
211 ul { list-style-type: square; }
|
|
|
212 ul ul { list-style-type: disc; }
|
|
|
213 ul ul ul { list-style-type: circle; }
|
|
|
214 ul ul ul ul { list-style-type: disc; }
|
|
|
215 li { margin-left: 0.5em; margin-top: 0.5em; }
|
|
|
216 li li { font-size: 85%; font-style: italic }
|
|
|
217 li li li { font-size: 85%; font-style: normal }
|
|
|
218
|
|
|
219 div dt
|
|
|
220 {
|
|
|
221 margin-left: 0;
|
|
|
222 margin-top: 1em;
|
|
|
223 margin-bottom: 0.5em;
|
|
|
224 font-weight: bold;
|
|
|
225 }
|
|
|
226 div dd
|
|
|
227 {
|
|
|
228 margin-left: 2em;
|
|
|
229 margin-bottom: 0.5em;
|
|
|
230 }
|
|
|
231
|
|
|
232
|
|
|
233 p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
|
|
|
234 margin-left: 1em;
|
|
|
235 margin-right: 1em;
|
|
|
236 }
|
|
|
237
|
|
|
238 p.subhead { font-weight: bold; margin-top: 2em; }
|
|
|
239
|
|
|
240 div.cover p.explanation {
|
|
|
241 font-style: italic;
|
|
|
242 margin-top: 3em;
|
|
|
243 }
|
|
|
244
|
|
|
245
|
|
|
246 .smaller { font-size: smaller }
|
|
|
247
|
|
|
248 td,th { padding: 0.2em }
|
|
|
249
|
|
|
250 ul {
|
|
|
251 margin: 0.5em 1.5em 0.5em 1.5em;
|
|
|
252 padding: 0;
|
|
|
253 }
|
|
|
254
|
|
|
255 ol {
|
|
|
256 margin: 0.5em 1.5em 0.5em 1.5em;
|
|
|
257 padding: 0;
|
|
|
258 }
|
|
|
259
|
|
|
260 ul { list-style-type: square; }
|
|
|
261 ul ul { list-style-type: disc; }
|
|
|
262 ul ul ul { list-style-type: circle; }
|
|
|
263 ul ul ul ul { list-style-type: disc; }
|
|
|
264 li { margin-left: 0.5em; margin-top: 0.5em; }
|
|
|
265 li li { font-size: 85%; font-style: italic }
|
|
|
266 li li li { font-size: 85%; font-style: normal }
|
|
|
267
|
|
|
268
|
|
|
269 ul li {
|
|
|
270 list-style: none;
|
|
|
271 margin: 0.1em 0em 0.6em 0;
|
|
|
272 padding: 0 0 0 40px;
|
|
|
273 background: transparent url(../graphics/bullet.png) no-repeat 5px 0.3em;
|
|
|
274 line-height: 140%;
|
|
|
275 }
|
|
|
276
|
|
|
277 /* workaround IE's failure to support background on li for print media */
|
|
|
278 @media print { ul li { list-style: disc; padding-left: 0; background: none; } }
|
|
|
279
|
|
|
280 ol li {
|
|
|
281 margin: 0.1em 0em 0.6em 1.5em;
|
|
|
282 padding: 0 0 0 0px;
|
|
|
283 line-height: 140%;
|
|
|
284 }
|
|
|
285
|
|
|
286 li li {
|
|
|
287 font-size: 85%;
|
|
|
288 font-style: italic;
|
|
|
289 list-style-type: disc;
|
|
|
290 background: transparent;
|
|
|
291 padding: 0 0 0 0;
|
|
|
292 }
|
|
|
293 li li li {
|
|
|
294 font-size: 85%;
|
|
|
295 font-style: normal;
|
|
|
296 list-style-type: circle;
|
|
|
297 background: transparent;
|
|
|
298 padding: 0 0 0 0;
|
|
|
299 }
|
|
|
300 li li li li {
|
|
|
301 list-style-type: disc;
|
|
|
302 background: transparent;
|
|
|
303 padding: 0 0 0 0;
|
|
|
304 }
|
|
|
305
|
|
|
306 /* rectangular blue bullet + unfold/nofold/fold widget */
|
|
|
307
|
|
|
308 /*
|
|
|
309 setting class="outline on ol or ul makes it behave as an
|
|
|
310 ouline list where blocklevel content in li elements is
|
|
|
311 hidden by default and can be expanded or collapsed with
|
|
|
312 mouse click. Set class="expand" on li to override default
|
|
|
313 */
|
|
|
314
|
|
|
315 ol.outline li:hover { cursor: pointer }
|
|
|
316 ol.outline li.nofold:hover { cursor: default }
|
|
|
317
|
|
|
318 ul.outline li:hover { cursor: pointer }
|
|
|
319 ul.outline li.nofold:hover { cursor: default }
|
|
|
320
|
|
|
321 ol.outline { list-style:decimal; }
|
|
|
322 ol.outline ol { list-style-type:lower-alpha }
|
|
|
323
|
|
|
324 ol.outline li.nofold {
|
|
|
325 padding: 0 0 0 20px;
|
|
|
326 background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.3em;
|
|
|
327 }
|
|
|
328 ol.outline li.unfolded {
|
|
|
329 padding: 0 0 0 20px;
|
|
|
330 background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.3em;
|
|
|
331 }
|
|
|
332 ol.outline li.folded {
|
|
|
333 padding: 0 0 0 20px;
|
|
|
334 background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.3em;
|
|
|
335 }
|
|
|
336 ol.outline li.unfolded:hover {
|
|
|
337 padding: 0 0 0 20px;
|
|
|
338 background: transparent url(../graphics/fold.gif) no-repeat 0px 0.3em;
|
|
|
339 }
|
|
|
340 ol.outline li.folded:hover {
|
|
|
341 padding: 0 0 0 20px;
|
|
|
342 background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.3em;
|
|
|
343 }
|
|
|
344
|
|
|
345 ul.outline li.nofold {
|
|
|
346 padding: 0 0 0 52px;
|
|
|
347 background: transparent url(../graphics/bullet-nofold-dim.gif) no-repeat 5px 0.3em;
|
|
|
348 }
|
|
|
349 ul.outline li.unfolded {
|
|
|
350 padding: 0 0 0 52px;
|
|
|
351 background: transparent url(../graphics/bullet-fold-dim.gif) no-repeat 5px 0.3em;
|
|
|
352 }
|
|
|
353 ul.outline li.folded {
|
|
|
354 padding: 0 0 0 52px;
|
|
|
355 background: transparent url(../graphics/bullet-unfold-dim.gif) no-repeat 5px 0.3em;
|
|
|
356 }
|
|
|
357 ul.outline li.unfolded:hover {
|
|
|
358 padding: 0 0 0 52px;
|
|
|
359 background: transparent url(../graphics/bullet-fold.gif) no-repeat 5px 0.3em;
|
|
|
360 }
|
|
|
361 ul.outline li.folded:hover {
|
|
|
362 padding: 0 0 0 52px;
|
|
|
363 background: transparent url(../graphics/bullet-unfold.gif) no-repeat 5px 0.3em;
|
|
|
364 }
|
|
|
365
|
|
|
366 li ul.outline li.nofold {
|
|
|
367 padding: 0 0 0 21px;
|
|
|
368 background: transparent url(../graphics/nofold-dim.gif) no-repeat 5px 0.3em;
|
|
|
369 }
|
|
|
370 li ul.outline li.unfolded {
|
|
|
371 padding: 0 0 0 21px;
|
|
|
372 background: transparent url(../graphics/fold-dim.gif) no-repeat 5px 0.3em;
|
|
|
373 }
|
|
|
374 li ul.outline li.folded {
|
|
|
375 padding: 0 0 0 21px;
|
|
|
376 background: transparent url(../graphics/unfold-dim.gif) no-repeat 5px 0.3em;
|
|
|
377 }
|
|
|
378 li ul.outline li.unfolded:hover {
|
|
|
379 padding: 0 0 0 21px;
|
|
|
380 background: transparent url(../graphics/fold.gif) no-repeat 5px 0.3em;
|
|
|
381 }
|
|
|
382 li ul.outline li.folded:hover {
|
|
|
383 padding: 0 0 0 21px;
|
|
|
384 background: transparent url(../graphics/unfold.gif) no-repeat 5px 0.3em;
|
|
|
385 }
|
|
|
386
|
|
|
387 img.withBorder {
|
|
|
388 border: 2px solid #c60;
|
|
|
389 padding: 4px;
|
|
|
390 }
|
|
|
391
|
|
|
392 div.header {
|
|
|
393 position: absolute;
|
|
|
394 z-index: 2;
|
|
|
395 left: 0;
|
|
|
396 right: 0;
|
|
|
397 top: 0;
|
|
|
398 bottom: auto;
|
|
|
399 height: 2.95em;
|
|
|
400 width: 100%;
|
|
|
401 padding: 0 0 0 0;
|
|
|
402 margin: 0 0 0 0;
|
|
|
403 border-width: 0;
|
|
|
404 border-style: solid;
|
|
|
405 background-color: #005A9C;
|
|
|
406 border-bottom-width: thick;
|
|
|
407 border-bottom-color: #95ABD0;
|
|
|
408 }
|
|
|
409
|
|
|
410 div.footer {
|
|
|
411 position: absolute;
|
|
|
412 z-index: 80;
|
|
|
413 left: 0;
|
|
|
414 right: 0;
|
|
|
415 top: auto;
|
|
|
416 bottom: 0;
|
|
|
417 height: 3.5em;
|
|
|
418 margin: 0;
|
|
|
419 font-size: 80%;
|
|
|
420 font-weight: bold;
|
|
|
421 padding-left: 1em;
|
|
|
422 padding-right: 0;
|
|
|
423 padding-top: 0.3em;
|
|
|
424 padding-bottom: 0;
|
|
|
425 color: #003366;
|
|
|
426 background-color: #95ABD0;
|
|
|
427 }
|
|
|
428
|
|
|
429 /* this is a hack to hide property from IE6 and below */
|
|
|
430 div[class="footer"] {
|
|
|
431 position: fixed;
|
|
|
432 }
|
|
|
433
|
|
|
434 #hidden-bullet {
|
|
|
435 visibility: hidden;
|
|
|
436 display: none;
|
|
|
437 }
|
|
|
438
|
|
|
439 div.slide.cover {
|
|
|
440 color: white;
|
|
|
441 background-color: #728ec2;
|
|
|
442 padding-top: 0;
|
|
|
443 padding-right: 0;
|
|
|
444 padding-left: 3em;
|
|
|
445 height: 100%;
|
|
|
446 }
|
|
|
447
|
|
|
448 div.slide.cover h1 {
|
|
|
449 margin: 0;
|
|
|
450 padding: 0.5em;
|
|
|
451 color: white;
|
|
|
452 height: auto;
|
|
|
453 }
|
|
|
454
|
|
|
455 div.slide.cover h2 {
|
|
|
456 color: white;
|
|
|
457 }
|
|
|
458
|
|
|
459 div.slide.cover a {
|
|
|
460 color: white;
|
|
|
461 }
|
|
|
462
|
|
|
463 div.slide.cover a:visited { color: white }
|
|
|
464 div.slide.cover a:link { color: white }
|
|
|
465 div.slide.cover a:hover { color: yellow; text-decoration: underline }
|
|
|
466 div.slide.cover a:active { color: yellow; text-decoration: underline }
|
|
|
467
|
|
|
468 div.slide.cover a:hover, div.slide.cover a:active {
|
|
|
469 color: yellow; text-decoration: underline;
|
|
|
470 }
|
|
|
471
|
|
|
472 div.slide.cover img.cover {
|
|
|
473 margin: 0 0 0 0;
|
|
|
474 float: right;
|
|
|
475 padding-bottom: 4em;
|
|
|
476 width: 50%;
|
|
|
477 overflow: hidden;
|
|
|
478 }
|
|
|
479
|
|
|
480 div.slide.cover a:hover, div.slide.cover a:active {
|
|
|
481 color: yellow; text-decoration: underline;
|
|
|
482 }
|
|
|
483
|
|
|
484 /* for Bert as an ardent user of the old W3C slidemaker tool */
|
|
|
485
|
|
|
486 div.comment { display: none; visibility: hidden }
|
|
|
487
|
|
|
488 @media print {
|
|
|
489 div.slide h1 { background: transparent; color: black }
|
|
|
490 div.slide.cover { background: transparent; color: black }
|
|
|
491 div.slide.cover h1 { background: transparent; color: black }
|
|
|
492 div.comment { display: block; visibility: visible }
|
|
|
493 }
|
