/samples/scalate-presentation/src/styles/w3c-red.css

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