css/slideshow.css

   1 /* This theme is generated by deck.js-theme-builder. */
   2 /*  https://github.com/twitwi/deck.js-theme-builder  */
   3 /* Resets and base styles from HTML5 Boilerplate */
   4 div, span, object, iframe,
   5 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   6 abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
   7 small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
   8 fieldset, form, label, legend,
   9 table, caption, tbody, tfoot, thead, tr, th, td,
  10 article, aside, canvas, details, figcaption, figure,
  11 footer, header, hgroup, menu, nav, section, summary,
  12 time, mark, audio, video {
  13   margin: 0;
  14   padding: 0;
  15   border: 0;
  16   font-size: 100%;
  17   font: inherit;
  18   vertical-align: baseline;
  19 }
  20
  21 article, aside, details, figcaption, figure,
  22 footer, header, hgroup, menu, nav, section {
  23   display: block;
  24 }
  25
  26 blockquote, q {
  27   quotes: none;
  28 }
  29 blockquote:before, blockquote:after, q:before, q:after {
  30   content: "";
  31   content: none;
  32 }
  33
  34 ins {
  35   background-color: #ff9;
  36   color: #000;
  37   text-decoration: none;
  38 }
  39
  40 mark {
  41   background-color: #ff9;
  42   color: #000;
  43   font-style: italic;
  44   font-weight: bold;
  45 }
  46
  47 del {
  48   text-decoration: line-through;
  49 }
  50
  51 abbr[title], dfn[title] {
  52   border-bottom: 1px dotted;
  53   cursor: help;
  54 }
  55
  56 table {
  57   border-collapse: collapse;
  58   border-spacing: 0;
  59 }
  60
  61 hr {
  62   display: block;
  63   height: 1px;
  64   border: 0;
  65   border-top: 1px solid #ccc;
  66   margin: 1em 0;
  67   padding: 0;
  68 }
  69
  70 input, select {
  71   vertical-align: middle;
  72 }
  73
  74 select, input, textarea, button {
  75   font: 99% sans-serif;
  76 }
  77
  78 pre, code, kbd, samp {
  79   font-family: monospace, sans-serif;
  80 }
  81
  82 a {
  83   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  84 }
  85 a:hover, a:active {
  86   outline: none;
  87 }
  88
  89 ul, ol {
  90   margin-left: 2em;
  91   vertical-align: top;
  92 }
  93
  94 ol {
  95   list-style-type: decimal;
  96 }
  97
  98 nav ul, nav li {
  99   margin: 0;
 100   list-style: none;
 101   list-style-image: none;
 102 }
 103
 104 small {
 105   font-size: 85%;
 106 }
 107
 108 strong, th {
 109   font-weight: bold;
 110 }
 111
 112 td {
 113   vertical-align: top;
 114 }
 115
 116 sub, sup {
 117   font-size: 75%;
 118   line-height: 0;
 119   position: relative;
 120 }
 121
 122 sup {
 123   top: -0.5em;
 124 }
 125
 126 sub {
 127   bottom: -0.25em;
 128 }
 129
 130 textarea {
 131   overflow: auto;
 132 }
 133
 134 input[type="radio"] {
 135   vertical-align: text-bottom;
 136 }
 137
 138 input[type="checkbox"] {
 139   vertical-align: bottom;
 140 }
 141
 142 label,
 143 input[type="button"],
 144 input[type="submit"],
 145 input[type="image"],
 146 button {
 147   cursor: pointer;
 148 }
 149
 150 button, input, select, textarea {
 151   margin: 0;
 152 }
 153
 154 input:invalid, textarea:invalid {
 155   border-radius: 1px;
 156   -moz-box-shadow: 0px 0px 5px red;
 157   -webkit-box-shadow: 0px 0px 5px red;
 158   box-shadow: 0px 0px 5px red;
 159 }
 160 input:invalid .no-boxshadow, textarea:invalid .no-boxshadow {
 161   background-color: #f0dddd;
 162 }
 163
 164 button {
 165   width: auto;
 166   overflow: visible;
 167 }
 168
 169 select, input, textarea {
 170   color: #444444;
 171 }
 172
 173 a {
 174   color: #607890;
 175 }
 176 a:hover, a:focus {
 177   color: #036;
 178 }
 179 a:link {
 180   -webkit-tap-highlight-color: #fff;
 181 }
 182
 183 /* End HTML5 Boilerplate adaptations */
 184 h1 {
 185   font-size: 4.5em;
 186 }
 187
 188 h1, .vcenter {
 189   font-weight: bold;
 190   text-align: center;
 191   padding-top: 1em;
 192   max-height: 100%;
 193 }
 194 .csstransforms h1, .csstransforms .vcenter {
 195   padding: 0 48px;
 196   position: absolute;
 197   left: 0;
 198   right: 0;
 199   top: 50%;
 200   -webkit-transform: translate(0, -50%);
 201   -moz-transform: translate(0, -50%);
 202   -ms-transform: translate(0, -50%);
 203   -o-transform: translate(0, -50%);
 204   transform: translate(0, -50%);
 205 }
 206
 207 .vcenter h1 {
 208   position: relative;
 209   top: auto;
 210   padding: 0;
 211   -webkit-transform: none;
 212   -moz-transform: none;
 213   -ms-transform: none;
 214   -o-transform: none;
 215   transform: none;
 216 }
 217
 218 h2 {
 219   font-size: 2.25em;
 220   font-weight: bold;
 221   padding-top: .5em;
 222   margin: 0 0 .66666em 0;
 223   border-bottom: 3px solid #888;
 224 }
 225
 226 h3 {
 227   font-size: 1.4375em;
 228   font-weight: bold;
 229   margin-bottom: .30435em;
 230 }
 231
 232 h4 {
 233   font-size: 1.25em;
 234   font-weight: bold;
 235   margin-bottom: .25em;
 236 }
 237
 238 h5 {
 239   font-size: 1.125em;
 240   font-weight: bold;
 241   margin-bottom: .2222em;
 242 }
 243
 244 h6 {
 245   font-size: 1em;
 246   font-weight: bold;
 247 }
 248
 249 img, iframe, video {
 250   display: block;
 251   max-width: 100%;
 252 }
 253
 254 video, iframe, img {
 255   display: block;
 256   margin: 0 auto;
 257 }
 258
 259 p, blockquote, iframe, img, ul, ol, pre, video {
 260   margin-bottom: 1em;
 261 }
 262
 263 pre {
 264   white-space: pre;
 265   white-space: pre-wrap;
 266   word-wrap: break-word;
 267   padding: 1em;
 268   border: 1px solid #888;
 269 }
 270
 271 em {
 272   font-style: italic;
 273 }
 274
 275 li {
 276   padding: .25em 0;
 277   vertical-align: middle;
 278 }
 279 li > ol, li > ul {
 280   margin-bottom: inherit;
 281 }
 282
 283 .deck-container {
 284   font-size: 16px;
 285   line-height: 1.25;
 286   color: #444;
 287 }
 288
 289 .slide {
 290   -moz-box-sizing: border-box;
 291   box-sizing: border-box;
 292   width: 100%;
 293 }
 294
 295 /* colors */
 296 /* extras, all together for now */
 297 @font-face {
 298   font-family: 'Montserrat';
 299   font-style: normal;
 300   font-weight: 400;
 301   src: local("Montserrat-Regular"), url(local-fonts/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format("woff"), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format("woff");
 302 }
 303
 304 .timekeeper {
 305   font-family: monospace;
 306 }
 307
 308 .deck-container {
 309   font-family: 'Montserrat', 'Arial', 'Sans';
 310 }
 311
 312 /* sizes */
 313 .deck-container {
 314   font-size: 30px;
 315 }
 316
 317 h1 {
 318   font-size: 1.75em;
 319 }
 320
 321 h2 {
 322   margin: 0;
 323   padding: 0 10px;
 324   font-size: 1.5em;
 325 }
 326
 327 .deck-container > .slide {
 328   padding-top: 3em;
 329 }
 330
 331 h2 {
 332   position: absolute;
 333   top: 0;
 334   left: 0;
 335   width: 100%;
 336 }
 337
 338 .deck-container > .slide.noh2, .deck-container > .slide.noH2 {
 339   padding-top: 0;
 340 }
 341
 342 h2 {
 343   text-align: center;
 344 }
 345
 346 .deck-container > .slide > ul > li ul, .deck-container > .slide > ul > li ol, .deck-container > .slide > ol > li ul, .deck-container > .slide > ol > li ol {
 347   line-height: 0.85em;
 348   margin-bottom: 0px;
 349 }
 350 .deck-container > .slide > ul > li ul > li ul, .deck-container > .slide > ul > li ul > li ol, .deck-container > .slide > ul > li ol > li ul, .deck-container > .slide > ul > li ol > li ol, .deck-container > .slide > ol > li ul > li ul, .deck-container > .slide > ol > li ul > li ol, .deck-container > .slide > ol > li ol > li ul, .deck-container > .slide > ol > li ol > li ol {
 351   margin-bottom: 0px;
 352 }
 353 .deck-container > .slide > ul > li ul > li ul > li, .deck-container > .slide > ul > li ul > li ol > li, .deck-container > .slide > ul > li ol > li ul > li, .deck-container > .slide > ul > li ol > li ol > li, .deck-container > .slide > ol > li ul > li ul > li, .deck-container > .slide > ol > li ul > li ol > li, .deck-container > .slide > ol > li ol > li ul > li, .deck-container > .slide > ol > li ol > li ol > li {
 354   margin: 0.2em;
 355   font-size: 0.8em;
 356   margin-bottom: 0px;
 357 }
 358 .deck-container > .slide > ul > li ul > li, .deck-container > .slide > ul > li ol > li, .deck-container > .slide > ol > li ul > li, .deck-container > .slide > ol > li ol > li {
 359   margin: 0.2em;
 360   font-size: 0.85em;
 361   margin-bottom: 0px;
 362 }
 363 .deck-container > .slide > ul li, .deck-container > .slide > ol li {
 364   margin: 0;
 365   padding: 0;
 366   margin-top: 0.5em;
 367   padding-left: 0em;
 368 }
 369 .deck-container > .slide > ul {
 370   list-style: disc outside none;
 371 }
 372 .deck-container > .slide > ul > li ul {
 373   list-style: square outside none;
 374 }
 375
 376 blockquote {
 377   font-size: 2em;
 378   font-style: italic;
 379   padding: 1em 2em;
 380   color: #000;
 381   border-left: 5px solid #ccc;
 382 }
 383 blockquote p {
 384   margin: 0;
 385 }
 386 blockquote cite {
 387   font-size: .5em;
 388   font-style: normal;
 389   font-weight: bold;
 390   color: #888;
 391 }
 392
 393 a, a:hover, a:focus, a:active, a:visited {
 394   text-decoration: none;
 395 }
 396 a:hover, a:focus {
 397   text-decoration: underline;
 398 }
 399
 400 .deck-prev-link, .deck-next-link {
 401   background: #ccc;
 402   font-family: serif;
 403 }
 404 .deck-prev-link, .deck-prev-link:hover, .deck-prev-link:focus, .deck-prev-link:active, .deck-prev-link:visited, .deck-next-link, .deck-next-link:hover, .deck-next-link:focus, .deck-next-link:active, .deck-next-link:visited {
 405   color: #fff;
 406 }
 407 .deck-prev-link:hover, .deck-prev-link:focus, .deck-next-link:hover, .deck-next-link:focus {
 408   background: #c00;
 409   text-decoration: none;
 410 }
 411
 412 .deck-menu > .slide {
 413   /* matching toplevel slides... ideally, we would expect them to have an additional class */
 414   background: #eee;
 415 }
 416 .deck-menu > .deck-current, .deck-menu > .deck-child-current {
 417   outline-offset: 20px;
 418   outline: 10px solid #f88;
 419 }
 420 .no-touch .deck-menu .slide:hover {
 421   outline-offset: 20px;
 422   outline: 10px solid red;
 423   background: #ddf;
 424 }
 425
 426 .deck-container {
 427   background: white;
 428   color: #1f2969;
 429   font-weight: normal;
 430 }
 431 .deck-container:not(.no-status) > .slide {
 432   background: url(../img/software-carpentry-banner.png) bottom 10px left 10px no-repeat;
 433   background-size: 150px;
 434 }
 435 .deck-container .slide :not(h1):not(h2) {
 436   /* TODO: the original style mispelled the font name, so it was using Helvetica for everything but the titles, this line does the same. */
 437   font-family: 'Helvetica', 'Arial', 'sans';
 438 }
 439
 440 .deck-container .slide {
 441   margin: 0;
 442   padding: 160px 50px;
 443   /*        text-align: justify;*/
 444 }
 445
 446 .slide.no-bullets ol, .slide.no-bullets ul {
 447   list-style: none;
 448 }
 449
 450 .slide .center {
 451   text-align: center;
 452 }
 453
 454 .slide .left {
 455   float: left;
 456   width: 50%;
 457 }
 458
 459 .slide .right {
 460   float: left;
 461   width: 50%;
 462 }
 463
 464 .slide .c1 {
 465   width: 8.33333% !important;
 466 }
 467
 468 .slide .c2 {
 469   width: 16.66667% !important;
 470 }
 471
 472 .slide .c3 {
 473   width: 25% !important;
 474 }
 475
 476 .slide .c4 {
 477   width: 33.33333% !important;
 478 }
 479
 480 .slide .c5 {
 481   width: 41.66667% !important;
 482 }
 483
 484 .slide .c6 {
 485   width: 50% !important;
 486 }
 487
 488 .slide .c7 {
 489   width: 58.33333% !important;
 490 }
 491
 492 .slide .c8 {
 493   width: 66.66667% !important;
 494 }
 495
 496 .slide .c9 {
 497   width: 75% !important;
 498 }
 499
 500 .slide .c10 {
 501   width: 83.33333% !important;
 502 }
 503
 504 .slide .c11 {
 505   width: 91.66667% !important;
 506 }
 507
 508 .slide .c12 {
 509   width: 100% !important;
 510 }
 511
 512 .slide .C1 {
 513   width: 4.16667% !important;
 514 }
 515
 516 .slide .C2 {
 517   width: 8.33333% !important;
 518 }
 519
 520 .slide .C3 {
 521   width: 12.5% !important;
 522 }
 523
 524 .slide .C4 {
 525   width: 16.66667% !important;
 526 }
 527
 528 .slide .C5 {
 529   width: 20.83333% !important;
 530 }
 531
 532 .slide .C6 {
 533   width: 25% !important;
 534 }
 535
 536 .slide .C7 {
 537   width: 29.16667% !important;
 538 }
 539
 540 .slide .C8 {
 541   width: 33.33333% !important;
 542 }
 543
 544 .slide .C9 {
 545   width: 37.5% !important;
 546 }
 547
 548 .slide .C10 {
 549   width: 41.66667% !important;
 550 }
 551
 552 .slide .C11 {
 553   width: 45.83333% !important;
 554 }
 555
 556 .slide .C12 {
 557   width: 50% !important;
 558 }
 559
 560 .slide .C13 {
 561   width: 54.16667% !important;
 562 }
 563
 564 .slide .C14 {
 565   width: 58.33333% !important;
 566 }
 567
 568 .slide .C15 {
 569   width: 62.5% !important;
 570 }
 571
 572 .slide .C16 {
 573   width: 66.66667% !important;
 574 }
 575
 576 .slide .C17 {
 577   width: 70.83333% !important;
 578 }
 579
 580 .slide .C18 {
 581   width: 75% !important;
 582 }
 583
 584 .slide .C19 {
 585   width: 79.16667% !important;
 586 }
 587
 588 .slide .C20 {
 589   width: 83.33333% !important;
 590 }
 591
 592 .slide .C21 {
 593   width: 87.5% !important;
 594 }
 595
 596 .slide .C22 {
 597   width: 91.66667% !important;
 598 }
 599
 600 .slide .C23 {
 601   width: 95.83333% !important;
 602 }
 603
 604 .slide .C24 {
 605   width: 100% !important;
 606 }
 607
 608 .slide .clearboth {
 609   clear: both;
 610 }
 611
 612 .slide .right {
 613   float: right;
 614   width: 50%;
 615 }
 616
 617 div.figure p.caption {
 618   color: #141a41;
 619   text-align: center;
 620   font-size: 80%;
 621 }
 622
 623 .slide .darker {
 624   color: #141a41;
 625 }
 626
 627 .slide.media-left > *:not(h2):not(img):not(blockquote):not(pre):not(div), .slide.media-left > div:not(.figure) {
 628   margin-left: 400px;
 629 }
 630 .slide.media-left > div.figure, .slide.media-left > img, .slide.media-left > blockquote, .slide.media-left > pre {
 631   float: left;
 632   width: 50%;
 633   box-sizing: border-box;
 634 }
 635
 636 .slide.media-right > *:not(h2):not(img):not(blockquote):not(pre):not(div), .slide.media-right > div:not(.figure) {
 637   margin-right: 400px;
 638 }
 639 .slide.media-right > div.figure, .slide.media-right > img, .slide.media-right > blockquote, .slide.media-right > pre {
 640   float: right;
 641   width: 50%;
 642   box-sizing: border-box;
 643 }
 644
 645 .slide.image-stripes > div {
 646   overflow: hidden;
 647   align-content: center;
 648 }
 649 .slide.image-stripes img {
 650   height: 400px;
 651   max-width: none;
 652   position: relative;
 653   left: 50%;
 654   transform: translate(-50%, 0);
 655 }
 656
 657 h1, h2 {
 658   color: #2b3990;
 659   font-size: 70px;
 660   line-height: 1em;
 661   font-weight: normal;
 662 }
 663
 664 h2 {
 665   border-bottom: none;
 666   font-size: 60px;
 667   position: absolute;
 668   left: 0;
 669   right: 0;
 670   bottom: 480px;
 671   top: auto;
 672 }
 673
 674 h3 {
 675   color: #888;
 676 }
 677
 678 pre {
 679   border-color: #ccc;
 680 }
 681
 682 code {
 683   color: #555;
 684 }
 685
 686 blockquote {
 687   font-size: 20px;
 688 }
 689
 690 a {
 691   transition: color 200ms;
 692 }
 693 a, a:focus, a:active, a:visited {
 694   color: #1f2969;
 695 }
 696 a:hover {
 697   color: #6877d2;
 698   text-decoration: none;
 699 }
 700
 701 .slide.title-slide {
 702   text-align: center;
 703   padding-top: 325px;
 704 }
 705 .slide.title-slide h1 {
 706   padding-bottom: 50px;
 707   bottom: 50%;
 708   top: auto;
 709   height: auto;
 710   transform: none;
 711 }
 712 .slide.title-slide img.logo {
 713   position: absolute;
 714   padding-top: 100px;
 715   left: 0;
 716   right: 0;
 717   top: 50%;
 718   align: center;
 719 }
 720
 721 .progress-bar {
 722   background: #2b3990;
 723   opacity: 0.5;
 724   transition: width 500ms;
 725 }
 726
 727 /* #20267b? */