comparison ui/slidy2/styles/w3c-blue.css @ 0:b0c6281822f5

o2s5 with theme and slidy
author Shinji KONO <kono@ie.u-ryukyu.ac.jp>
date Fri, 23 Sep 2011 15:15:18 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b0c6281822f5
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 }