PageRenderTime 72ms CodeModel.GetById 1ms app.highlight 66ms RepoModel.GetById 1ms app.codeStats 0ms

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

http://github.com/scalate/scalate
CSS | 493 lines | 398 code | 70 blank | 25 comment | 0 complexity | 3baf6a18beb771b877249eaceb5e121e MD5 | raw file
  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*/
 10body
 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
 22div.slide.titlepage {
 23  text-align: center;
 24}
 25
 26div.slide.titlepage h1 {
 27  padding-top: 40%;
 28}
 29
 30div.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
 43div.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
 58div.background img {
 59  height: 4em;
 60}
 61
 62/* this rule is hidden from IE which doesn't support + selector */
 63div.slide + div[class].slide { page-break-before: always;}
 64
 65div.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
 80div.slide h1 a {
 81  color: white;
 82  text-decoration: none;
 83}
 84
 85div.slide h1 a:link {
 86  color: white;
 87  text-decoration: none;
 88}
 89
 90div.slide h1 a:visited {
 91  color: white;
 92  text-decoration: none;
 93}
 94
 95div.slide h1 a:hover {
 96  color: white;
 97  text-decoration: underline;
 98}
 99
100div.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 */
142div.vbox {
143  float: left;
144  height: 40%;
145  width: 50%;
146  margin-top: -240px;
147}
148div.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 */
162div.background.slanty {
163  z-index: 2;
164  bottom: 0; 
165  height: 100%;
166  background: transparent;
167}
168
169div.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 */
174div.slide.slanty pre {
175  width: 93%;  /* needed for IE filter to work */
176  opacity: .8;
177  filter: alpha(opacity=80);
178}
179
180img.withBorder {
181  border: 2px solid #c60;
182  padding: 4px;
183}
184
185li pre { margin-left: 0; }
186
187@media print { pre { font-size: 60% } }
188
189blockquote { font-style: italic }
190
191img { background-color: transparent }
192
193p.copyright { font-size: smaller }
194
195.center { text-align: center }
196.footnote { font-size: smaller; margin-left: 2em; }
197
198a img { border-width: 0; border-style: none }
199
200a:visited { color: navy }
201a:link { color: navy }
202a:hover { color: red; text-decoration: underline }
203a:active { color: red; text-decoration: underline }
204
205a {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
211ul { list-style-type: square; }
212ul ul { list-style-type: disc; }
213ul ul ul { list-style-type: circle; }
214ul ul ul ul { list-style-type: disc; }
215li { margin-left: 0.5em; margin-top: 0.5em; }
216li li { font-size: 85%; font-style: italic }
217li li li { font-size: 85%; font-style: normal }
218
219div dt
220{
221  margin-left: 0;
222  margin-top: 1em;
223  margin-bottom: 0.5em;
224  font-weight: bold;
225}
226div dd
227{
228  margin-left: 2em;
229  margin-bottom: 0.5em;
230}
231
232
233p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
234  margin-left: 1em;
235  margin-right: 1em;
236}
237
238p.subhead { font-weight: bold; margin-top: 2em; }
239
240div.cover p.explanation {
241  font-style: italic;
242  margin-top: 3em;
243}
244
245
246.smaller { font-size: smaller }
247
248td,th { padding: 0.2em }
249
250ul {
251  margin: 0.5em 1.5em 0.5em 1.5em;
252  padding: 0;
253}
254
255ol {
256  margin: 0.5em 1.5em 0.5em 1.5em;
257  padding: 0;
258}
259
260ul { list-style-type: square; }
261ul ul { list-style-type: disc; }
262ul ul ul { list-style-type: circle; }
263ul ul ul ul { list-style-type: disc; }
264li { margin-left: 0.5em; margin-top: 0.5em; }
265li li { font-size: 85%; font-style: italic }
266li li li { font-size: 85%; font-style: normal }
267
268
269ul 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
280ol li { 
281  margin: 0.1em 0em 0.6em 1.5em;
282  padding: 0 0 0 0px;
283  line-height: 140%;
284}
285
286li li { 
287  font-size: 85%; 
288  font-style: italic;
289  list-style-type: disc;
290  background: transparent;
291  padding: 0 0 0 0;
292}
293li 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}
300li 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
315ol.outline li:hover { cursor: pointer }
316ol.outline li.nofold:hover { cursor: default }
317
318ul.outline li:hover { cursor: pointer }
319ul.outline li.nofold:hover { cursor: default }
320
321ol.outline { list-style:decimal; }
322ol.outline ol { list-style-type:lower-alpha }
323
324ol.outline li.nofold {
325  padding: 0 0 0 20px;
326  background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.3em;
327}
328ol.outline li.unfolded {
329  padding: 0 0 0 20px;
330  background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.3em;
331}
332ol.outline li.folded {
333  padding: 0 0 0 20px;
334  background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.3em;
335}
336ol.outline li.unfolded:hover {
337  padding: 0 0 0 20px;
338  background: transparent url(../graphics/fold.gif) no-repeat 0px 0.3em;
339}
340ol.outline li.folded:hover {
341  padding: 0 0 0 20px;
342  background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.3em;
343}
344
345ul.outline li.nofold {
346  padding: 0 0 0 52px;
347  background: transparent url(../graphics/bullet-nofold-dim.gif) no-repeat 5px 0.3em;
348}
349ul.outline li.unfolded {
350  padding: 0 0 0 52px;
351  background: transparent url(../graphics/bullet-fold-dim.gif) no-repeat 5px 0.3em;
352}
353ul.outline li.folded {
354  padding: 0 0 0 52px;
355  background: transparent url(../graphics/bullet-unfold-dim.gif) no-repeat 5px 0.3em;
356}
357ul.outline li.unfolded:hover {
358  padding: 0 0 0 52px;
359  background: transparent url(../graphics/bullet-fold.gif) no-repeat 5px 0.3em;
360}
361ul.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
366li ul.outline li.nofold {
367  padding: 0 0 0 21px;
368  background: transparent url(../graphics/nofold-dim.gif) no-repeat 5px 0.3em;
369}
370li ul.outline li.unfolded {
371  padding: 0 0 0 21px;
372  background: transparent url(../graphics/fold-dim.gif) no-repeat 5px 0.3em;
373}
374li ul.outline li.folded {
375  padding: 0 0 0 21px;
376  background: transparent url(../graphics/unfold-dim.gif) no-repeat 5px 0.3em;
377}
378li ul.outline li.unfolded:hover {
379  padding: 0 0 0 21px;
380  background: transparent url(../graphics/fold.gif) no-repeat 5px 0.3em;
381}
382li 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
387img.withBorder {
388  border: 2px solid #c60;
389  padding: 4px;
390}
391
392div.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
410div.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 */
430div[class="footer"] {
431  position: fixed;
432}
433
434#hidden-bullet {
435  visibility: hidden;
436  display: none;
437}
438
439div.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
448div.slide.cover h1 {
449  margin: 0;
450  padding: 0.5em;
451  color: white;
452  height: auto;
453}
454
455div.slide.cover h2 {
456  color: white;
457}
458
459div.slide.cover a {
460  color: white;
461}
462
463div.slide.cover a:visited { color: white }
464div.slide.cover a:link { color: white }
465div.slide.cover a:hover { color: yellow; text-decoration: underline }
466div.slide.cover a:active { color: yellow; text-decoration: underline }
467
468div.slide.cover a:hover, div.slide.cover a:active {
469  color: yellow; text-decoration: underline;
470}
471
472div.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
480div.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
486div.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}