[15c7d39] | 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 | }
|
---|