Mercurial > hg > Applications > o2s5
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 } |