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 {
|
---|
388 | image-rendering: optimize-quality;
|
---|
389 | }
|
---|
390 |
|
---|
391 | img.withBorder {
|
---|
392 | border: 2px solid #c60;
|
---|
393 | padding: 4px;
|
---|
394 | }
|
---|
395 |
|
---|
396 | div.header {
|
---|
397 | position: absolute;
|
---|
398 | z-index: 2;
|
---|
399 | left: 0;
|
---|
400 | right: 0;
|
---|
401 | top: 0;
|
---|
402 | bottom: auto;
|
---|
403 | height: 2.95em;
|
---|
404 | width: 100%;
|
---|
405 | padding: 0 0 0 0;
|
---|
406 | margin: 0 0 0 0;
|
---|
407 | border-width: 0;
|
---|
408 | border-style: solid;
|
---|
409 | background-color: #005A9C;
|
---|
410 | border-bottom-width: thick;
|
---|
411 | border-bottom-color: #95ABD0;
|
---|
412 | }
|
---|
413 |
|
---|
414 | div.footer {
|
---|
415 | position: absolute;
|
---|
416 | z-index: 80;
|
---|
417 | left: 0;
|
---|
418 | right: 0;
|
---|
419 | top: auto;
|
---|
420 | bottom: 0;
|
---|
421 | height: 3.5em;
|
---|
422 | margin: 0;
|
---|
423 | font-size: 80%;
|
---|
424 | font-weight: bold;
|
---|
425 | padding-left: 1em;
|
---|
426 | padding-right: 0;
|
---|
427 | padding-top: 0.3em;
|
---|
428 | padding-bottom: 0;
|
---|
429 | color: #003366;
|
---|
430 | background-color: #95ABD0;
|
---|
431 | }
|
---|
432 |
|
---|
433 | /* this is a hack to hide property from IE6 and below */
|
---|
434 | div[class="footer"] {
|
---|
435 | position: fixed;
|
---|
436 | }
|
---|
437 |
|
---|
438 | #hidden-bullet {
|
---|
439 | visibility: hidden;
|
---|
440 | display: none;
|
---|
441 | }
|
---|
442 |
|
---|
443 | div.slide.cover {
|
---|
444 | color: white;
|
---|
445 | background-color: #728ec2;
|
---|
446 | padding-top: 0;
|
---|
447 | padding-right: 0;
|
---|
448 | padding-left: 3em;
|
---|
449 | height: 100%;
|
---|
450 | }
|
---|
451 |
|
---|
452 | div.slide.cover h1 {
|
---|
453 | margin: 0;
|
---|
454 | padding: 0.5em;
|
---|
455 | color: white;
|
---|
456 | height: auto;
|
---|
457 | }
|
---|
458 |
|
---|
459 | div.slide.cover h2 {
|
---|
460 | color: white;
|
---|
461 | }
|
---|
462 |
|
---|
463 | div.slide.cover a {
|
---|
464 | color: white;
|
---|
465 | }
|
---|
466 |
|
---|
467 | div.slide.cover a:visited { color: white }
|
---|
468 | div.slide.cover a:link { color: white }
|
---|
469 | div.slide.cover a:hover { color: yellow; text-decoration: underline }
|
---|
470 | div.slide.cover a:active { color: yellow; text-decoration: underline }
|
---|
471 |
|
---|
472 | div.slide.cover a:hover, div.slide.cover a:active {
|
---|
473 | color: yellow; text-decoration: underline;
|
---|
474 | }
|
---|
475 |
|
---|
476 | div.slide.cover img.cover {
|
---|
477 | margin: 0 0 0 0;
|
---|
478 | float: right;
|
---|
479 | padding-bottom: 4em;
|
---|
480 | width: 50%;
|
---|
481 | overflow: hidden;
|
---|
482 | }
|
---|
483 |
|
---|
484 | div.slide.cover a:hover, div.slide.cover a:active {
|
---|
485 | color: yellow; text-decoration: underline;
|
---|
486 | }
|
---|
487 |
|
---|
488 | /* for Bert as an ardent user of the old W3C slidemaker tool */
|
---|
489 |
|
---|
490 | div.comment { display: none; visibility: hidden }
|
---|
491 |
|
---|
492 | @media print {
|
---|
493 | div.slide h1 { background: transparent; color: black }
|
---|
494 | div.slide.cover { background: transparent; color: black }
|
---|
495 | div.slide.cover h1 { background: transparent; color: black }
|
---|
496 | div.comment { display: block; visibility: visible }
|
---|
497 | }
|
---|