inc/screen.css

   1 html, body, div, span, object, iframe,
   2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   3 a, abbr, acronym, address, big, cite, code,
   4 del, dfn, em, img, ins, kbd, q, s, samp,
   5 small, strike, strong, sub, sup, tt, var,
   6 b, u, i, center,
   7 dl, dt, ol, ul, li,
   8 fieldset, form, label, legend,
   9 table, caption, tbody, tfoot, thead, tr, th, td,
  10 article, aside, canvas, details, embed,
  11 figure, figcaption, footer, header, hgroup,
  12 menu, nav, output, ruby, section, summary,
  13 mark {
  14   margin: 0;
  15   padding: 0;
  16   border: 0;
  17   font: inherit;
  18   font-size: 100%;
  19   vertical-align: baseline;
  20 }
  21
  22 html {
  23   line-height: 1;
  24 }
  25
  26 ol, ul {
  27     list-style: none;
  28     padding-left: 2em;
  29 }
  30
  31 dd {
  32     padding: 0.5em;
  33 }
  34
  35 dd ul {
  36     padding: 1.0em;
  37 }
  38
  39 table {
  40   border-collapse: collapse;
  41   border-spacing: 0;
  42 }
  43
  44 caption, th, td {
  45   text-align: left;
  46   font-weight: normal;
  47   vertical-align: middle;
  48 }
  49
  50 q, blockquote {
  51   quotes: none;
  52 }
  53 q:before, q:after, blockquote:before, blockquote:after {
  54   content: "";
  55   content: none;
  56 }
  57
  58 a img {
  59   border: none;
  60 }
  61
  62 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  63   display: block;
  64 }
  65
  66 a {
  67   color: #1863a1;
  68 }
  69 a:visited {
  70   color: #751590;
  71 }
  72 a:focus {
  73   color: #0181eb;
  74 }
  75 a:hover {
  76   color: #0181eb;
  77 }
  78 a:active {
  79   color: #01579f;
  80 }
  81
  82 aside.sidebar a {
  83   color: #222222;
  84 }
  85 aside.sidebar a:focus {
  86   color: #0181eb;
  87 }
  88 aside.sidebar a:hover {
  89   color: #0181eb;
  90 }
  91 aside.sidebar a:active {
  92   color: #01579f;
  93 }
  94
  95 a {
  96   -webkit-transition: color 0.3s;
  97   -moz-transition: color 0.3s;
  98   -o-transition: color 0.3s;
  99   transition: color 0.3s;
 100 }
 101
 102 html {
 103   background: #252525 url('/img/line-tile.png') top left;
 104 }
 105
 106 body > div {
 107   background: #f2f2f2 url('/img/noise.png') top left;
 108   border-bottom: 1px solid #bfbfbf;
 109 }
 110 body > div > div {
 111   background: #f8f8f8 url('/img/noise.png') top left;
 112   border-right: 1px solid #e0e0e0;
 113 }
 114
 115 .heading, body > header h1, h1, h2, h3, h4, h5, h6 {
 116   font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
 117 }
 118
 119 .sans, body > header h2, article header p.meta, article > footer, #content .blog-index footer, html aside.sidebar section, body > footer {
 120   font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
 121 }
 122
 123 .serif, body, #content .blog-index a[rel=full-article] {
 124   font-family: "PT Serif", Georgia, Times, "Times New Roman", serif;
 125 }
 126
 127 .mono, pre, code, tt, p code, li code {
 128   font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
 129 }
 130
 131 body > header h1 {
 132   font-size: 2.2em;
 133   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 134   font-weight: normal;
 135   line-height: 1.2em;
 136   margin-bottom: 0.6667em;
 137 }
 138
 139 body > header h2 {
 140   margin-left: 4.7em;
 141   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 142   font-size: 1.5em;
 143   color: black;
 144   position: relative;
 145   top: -1em;
 146 }
 147
 148 #header-open-text {
 149   font-weight: 400;
 150   font-size: 1.7em;
 151   color: #721412;
 152 }
 153
 154 #header-ssl-text {
 155   font-weight: bold;
 156   font-size: 1.7em;
 157   color: black;
 158 }
 159
 160 body {
 161   line-height: 1.5em;
 162   color: #222222;
 163 }
 164
 165 h1 {
 166   font-size: 2.2em;
 167   line-height: 1.2em;
 168 }
 169
 170 @media only screen and (min-width: 992px) {
 171   body {
 172     font-size: 1.15em;
 173   }
 174
 175   h1 {
 176     font-size: 2.6em;
 177     line-height: 1.2em;
 178   }
 179 }
 180 h1, h2, h3, h4, h5, h6 {
 181   text-rendering: optimizelegibility;
 182   margin-bottom: 1em;
 183   font-weight: bold;
 184 }
 185
 186 h2, section h1 {
 187   font-size: 1.5em;
 188 }
 189
 190 h3, section h2, section section h1 {
 191   font-size: 1.3em;
 192 }
 193
 194 h4, section h3, section section h2, section section section h1 {
 195   font-size: 1em;
 196 }
 197
 198 h5, section h4, section section h3 {
 199   font-size: .9em;
 200 }
 201
 202 h6, section h5, section section h4, section section section h3 {
 203   font-size: .8em;
 204 }
 205
 206 p, article blockquote, ul, ol {
 207   margin-bottom: 1.5em;
 208 }
 209
 210 ul {
 211   list-style-type: disc;
 212 }
 213 ul ul {
 214   list-style-type: circle;
 215   margin-bottom: 0px;
 216 }
 217 ul ul ul {
 218   list-style-type: square;
 219   margin-bottom: 0px;
 220 }
 221
 222 ol {
 223   list-style-type: decimal;
 224 }
 225 ol ol {
 226   list-style-type: lower-alpha;
 227   margin-bottom: 0px;
 228 }
 229 ol ol ol {
 230   list-style-type: lower-roman;
 231   margin-bottom: 0px;
 232 }
 233
 234 ul, ul ul, ul ol, ol, ol ul, ol ol {
 235   margin-left: 1.3em;
 236 }
 237
 238 ul ul, ul ol, ol ul, ol ol {
 239   margin-bottom: 0em;
 240 }
 241
 242 strong, b {
 243   font-weight: bold;
 244 }
 245
 246 em, i {
 247   font-style: italic;
 248 }
 249
 250 sup, sub {
 251   font-size: 0.75em;
 252   position: relative;
 253   display: inline-block;
 254   padding: 0 .2em;
 255   line-height: .8em;
 256 }
 257
 258 sup {
 259   top: -.5em;
 260 }
 261
 262 sub {
 263   bottom: -.5em;
 264 }
 265
 266 a[rev='footnote'] {
 267   font-size: .75em;
 268   padding: 0 .3em;
 269   line-height: 1;
 270 }
 271
 272 q {
 273   font-style: italic;
 274 }
 275 q:before {
 276   content: "\201C";
 277 }
 278 q:after {
 279   content: "\201D";
 280 }
 281
 282 em, dfn {
 283   font-style: italic;
 284 }
 285
 286 strong, dfn {
 287   font-weight: bold;
 288 }
 289
 290 del, s {
 291   text-decoration: line-through;
 292 }
 293
 294 abbr, acronym {
 295   border-bottom: 1px dotted;
 296   cursor: help;
 297 }
 298
 299 hr {
 300   margin-bottom: 0.2em;
 301 }
 302
 303 small {
 304   font-size: .8em;
 305 }
 306
 307 big {
 308   font-size: 1.2em;
 309 }
 310
 311 article blockquote {
 312   font-style: italic;
 313   position: relative;
 314   font-size: 1.2em;
 315   line-height: 1.5em;
 316   padding-left: 1em;
 317   border-left: 4px solid rgba(170, 170, 170, 0.5);
 318 }
 319 article blockquote cite {
 320   font-style: italic;
 321 }
 322 article blockquote cite a {
 323   color: #aaaaaa !important;
 324   word-wrap: break-word;
 325 }
 326 article blockquote cite:before {
 327   content: '\2014';
 328   padding-right: .3em;
 329   padding-left: .3em;
 330   color: #aaaaaa;
 331 }
 332 @media only screen and (min-width: 992px) {
 333   article blockquote {
 334     padding-left: 1.5em;
 335     border-left-width: 4px;
 336   }
 337 }
 338
 339 .pullquote-right:before,
 340 .pullquote-left:before {
 341   /* Reset metrics. */
 342   padding: 0;
 343   border: none;
 344   /* Content */
 345   content: attr(data-pullquote);
 346   /* Pull out to the right, modular scale based margins. */
 347   float: right;
 348   width: 45%;
 349   margin: .5em 0 1em 1.5em;
 350   /* Baseline correction */
 351   position: relative;
 352   top: 7px;
 353   font-size: 1.4em;
 354   line-height: 1.45em;
 355 }
 356
 357 .pullquote-left:before {
 358   /* Make left pullquotes align properly. */
 359   float: left;
 360   margin: .5em 1.5em 1em 0;
 361 }
 362
 363 /* @extend this to force long lines of continuous text to wrap */
 364 .force-wrap, article a, aside.sidebar a {
 365   white-space: normal;
 366   word-wrap: break-word;
 367 }
 368
 369 .group, body > header, body > nav, body > footer, body #content > article, body #content > div > article, body #content > div > section, body div.pagination, aside.sidebar, #content, .sidebar {
 370   *zoom: 1;
 371 }
 372 .group:after, body > header:after, body > nav:after, body > footer:after, body #content > article:after, body #content > div > section:after, body div.pagination:after, #content:after, .sidebar:after {
 373   content: "";
 374   display: table;
 375   clear: both;
 376 }
 377
 378 body {
 379   -webkit-text-size-adjust: none;
 380   max-width: 1200px;
 381   position: relative;
 382   margin: 0 auto;
 383 }
 384 body > header, body > nav, body > footer, body #content > article, body #content > div > article, body #content > div > section {
 385   padding-left: 18px;
 386   padding-right: 18px;
 387 }
 388 @media only screen and (min-width: 480px) {
 389   body > header, body > nav, body > footer, body #content > article, body #content > div > article, body #content > div > section {
 390     padding-left: 25px;
 391     padding-right: 25px;
 392   }
 393 }
 394 @media only screen and (min-width: 768px) {
 395   body > header, body > nav, body > footer, body #content > article, body #content > div > article, body #content > div > section {
 396     padding-left: 35px;
 397     padding-right: 35px;
 398   }
 399 }
 400 @media only screen and (min-width: 992px) {
 401   body > header, body > nav, body > footer, body #content > article, body #content > div > article, body #content > div > section {
 402     padding-left: 55px;
 403     padding-right: 55px;
 404   }
 405 }
 406 body div.pagination {
 407   margin-left: 18px;
 408   margin-right: 18px;
 409 }
 410 @media only screen and (min-width: 480px) {
 411   body div.pagination {
 412     margin-left: 25px;
 413     margin-right: 25px;
 414   }
 415 }
 416 @media only screen and (min-width: 768px) {
 417   body div.pagination {
 418     margin-left: 35px;
 419     margin-right: 35px;
 420   }
 421 }
 422 @media only screen and (min-width: 992px) {
 423   body div.pagination {
 424     margin-left: 55px;
 425     margin-right: 55px;
 426   }
 427 }
 428 body > header {
 429   font-size: 1em;
 430   padding-top: 1.5em;
 431   padding-bottom: 1.5em;
 432   margin-bottom: -1em;
 433 }
 434
 435 #content {
 436   overflow: hidden;
 437 }
 438 #content > div, #content > article {
 439   width: 100%;
 440 }
 441
 442 aside.sidebar {
 443   float: none;
 444   padding: 0 18px 1px;
 445   background-color: #f7f7f7;
 446   border-top: 1px solid #e0e0e0;
 447 }
 448
 449 .flex-content, article img, aside.sidebar img {
 450   max-width: 100%;
 451   height: auto;
 452 }
 453
 454 .basic-alignment.left, article img.left, aside.sidebar img.left {
 455   float: left;
 456   margin-right: 1.5em;
 457 }
 458 .basic-alignment.right, article img.right, aside.sidebar img.right {
 459   float: right;
 460   margin-left: 1.5em;
 461 }
 462 .basic-alignment.center, article img.center, aside.sidebar img.center {
 463   display: block;
 464   margin: 0 auto 1.5em;
 465 }
 466 .basic-alignment.left, article img.left, aside.sidebar img.left, .basic-alignment.right, article img.right, aside.sidebar img.right {
 467   margin-bottom: .8em;
 468 }
 469
 470 .toggle-sidebar, .no-sidebar .toggle-sidebar {
 471   display: none;
 472 }
 473
 474 @media only screen and (min-width: 750px) {
 475   body.sidebar-footer aside.sidebar {
 476     float: none;
 477     width: auto;
 478     clear: left;
 479     margin: 0;
 480     padding: 0 35px 1px;
 481     background-color: #f7f7f7;
 482     border-top: 1px solid #eaeaea;
 483   }
 484   body.sidebar-footer aside.sidebar section.odd, body.sidebar-footer aside.sidebar section.even {
 485     float: left;
 486     width: 48%;
 487   }
 488   body.sidebar-footer aside.sidebar section.odd {
 489     margin-left: 0;
 490   }
 491   body.sidebar-footer aside.sidebar section.even {
 492     margin-left: 4%;
 493   }
 494   body.sidebar-footer aside.sidebar.thirds section {
 495     width: 30%;
 496     margin-left: 5%;
 497   }
 498   body.sidebar-footer aside.sidebar.thirds section.first {
 499     margin-left: 0;
 500     clear: both;
 501   }
 502 }
 503 body.sidebar-footer #content {
 504   margin-right: 0px;
 505 }
 506 body.sidebar-footer .toggle-sidebar {
 507   display: none;
 508 }
 509
 510 @media only screen and (min-width: 550px) {
 511   body > header {
 512     font-size: 1em;
 513   }
 514 }
 515 @media only screen and (min-width: 750px) {
 516   aside.sidebar {
 517     float: none;
 518     width: auto;
 519     clear: left;
 520     margin: 0;
 521     padding: 0 35px 1px;
 522     background-color: #f7f7f7;
 523     border-top: 1px solid #eaeaea;
 524   }
 525   aside.sidebar section.odd, aside.sidebar section.even {
 526     float: left;
 527     width: 48%;
 528   }
 529   aside.sidebar section.odd {
 530     margin-left: 0;
 531   }
 532   aside.sidebar section.even {
 533     margin-left: 4%;
 534   }
 535   aside.sidebar.thirds section {
 536     width: 30%;
 537     margin-left: 5%;
 538   }
 539   aside.sidebar.thirds section.first {
 540     margin-left: 0;
 541     clear: both;
 542   }
 543 }
 544 @media only screen and (min-width: 768px) {
 545   body {
 546     -webkit-text-size-adjust: auto;
 547   }
 548
 549   body > header {
 550     font-size: 1.2em;
 551   }
 552
 553   #content {
 554     overflow: visible;
 555     margin-right: 240px;
 556     position: relative;
 557   }
 558   .no-sidebar #content {
 559     margin-right: 0;
 560     border-right: 0;
 561   }
 562   .collapse-sidebar #content {
 563     margin-right: 20px;
 564   }
 565   #content > div, #content > article {
 566     padding-top: 17.5px;
 567     padding-bottom: 17.5px;
 568     float: left;
 569   }
 570
 571   aside.sidebar {
 572     width: 210px;
 573     padding: 0 15px 15px;
 574     background: none;
 575     clear: none;
 576     float: left;
 577     margin: 0 -100% 0 0;
 578   }
 579   aside.sidebar section {
 580     width: auto;
 581     margin-left: 0;
 582   }
 583   aside.sidebar section.odd, aside.sidebar section.even {
 584     float: none;
 585     width: auto;
 586     margin-left: 0;
 587   }
 588   .collapse-sidebar aside.sidebar {
 589     float: none;
 590     width: auto;
 591     clear: left;
 592     margin: 0;
 593     padding: 0 35px 1px;
 594     background-color: #f7f7f7;
 595     border-top: 1px solid #eaeaea;
 596   }
 597   .collapse-sidebar aside.sidebar section.odd, .collapse-sidebar aside.sidebar section.even {
 598     float: left;
 599     width: 48%;
 600   }
 601   .collapse-sidebar aside.sidebar section.odd {
 602     margin-left: 0;
 603   }
 604   .collapse-sidebar aside.sidebar section.even {
 605     margin-left: 4%;
 606   }
 607   .collapse-sidebar aside.sidebar.thirds section {
 608     width: 30%;
 609     margin-left: 5%;
 610   }
 611   .collapse-sidebar aside.sidebar.thirds section.first {
 612     margin-left: 0;
 613     clear: both;
 614   }
 615 }
 616 @media only screen and (min-width: 992px) {
 617   body > header {
 618     font-size: 1.3em;
 619   }
 620
 621   #content {
 622     margin-right: 300px;
 623   }
 624
 625   #content > div, #content > article {
 626     padding-top: 27.5px;
 627     padding-bottom: 27.5px;
 628   }
 629
 630   aside.sidebar {
 631     width: 260px;
 632     padding: 1.2em 20px 20px;
 633   }
 634   .collapse-sidebar aside.sidebar {
 635     padding-left: 55px;
 636     padding-right: 55px;
 637   }
 638 }
 639 @media only screen and (min-width: 768px) {
 640   ul, ol {
 641     margin-left: 0;
 642   }
 643 }
 644 body > header {
 645   background: #cccccc;
 646 }
 647 body > header h1 {
 648   display: inline-block;
 649   margin: 0;
 650 }
 651 body > header h1 a, body > header h1 a:visited, body > header h1 a:hover {
 652   color: #f2f2f2;
 653   text-decoration: none;
 654 }
 655 body > header h2 {
 656   margin: .2em 0 0 4.7em;
 657   font-weight: 300;
 658   font-size: 0.8em;
 659   color: black;
 660   position: relative;
 661   top: -1em;
 662 }
 663
 664 body > nav {
 665   position: relative;
 666   background-color: #cccccc;
 667   background: url('/img/noise.png'), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(50%, #cccccc), color-stop(100%, #b0b0b0));
 668   background: url('/img/noise.png'), -webkit-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
 669   background: url('/img/noise.png'), -moz-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
 670   background: url('/img/noise.png'), -o-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
 671   background: url('/img/noise.png'), linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
 672   border-top: 1px solid #f2f2f2;
 673   border-bottom: 1px solid #8c8c8c;
 674   padding-top: .35em;
 675   padding-bottom: .35em;
 676 }
 677 body > nav form {
 678   -webkit-background-clip: padding;
 679   -moz-background-clip: padding;
 680   background-clip: padding-box;
 681   margin: 0;
 682   padding: 0;
 683 }
 684 body > nav form .search {
 685   padding: .3em .5em 0;
 686   font-size: .85em;
 687   font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
 688   line-height: 1.1em;
 689   width: 95%;
 690   -webkit-border-radius: 0.5em;
 691   -moz-border-radius: 0.5em;
 692   -ms-border-radius: 0.5em;
 693   -o-border-radius: 0.5em;
 694   border-radius: 0.5em;
 695   -webkit-background-clip: padding;
 696   -moz-background-clip: padding;
 697   background-clip: padding-box;
 698   -webkit-box-shadow: #d1d1d1 0 1px;
 699   -moz-box-shadow: #d1d1d1 0 1px;
 700   box-shadow: #d1d1d1 0 1px;
 701   background-color: #f2f2f2;
 702   border: 1px solid #b3b3b3;
 703   color: #888;
 704 }
 705 body > nav form .search:focus {
 706   color: #444;
 707   border-color: #80b1df;
 708   -webkit-box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
 709   -moz-box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
 710   box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
 711   background-color: #fff;
 712   outline: none;
 713 }
 714 body > nav fieldset[role=search] {
 715   float: right;
 716   width: 48%;
 717 }
 718 body > nav fieldset.mobile-nav {
 719   float: left;
 720   width: 48%;
 721 }
 722 body > nav fieldset.mobile-nav select {
 723   width: 100%;
 724   font-size: .8em;
 725   border: 1px solid #888;
 726 }
 727 body > nav ul {
 728   display: none;
 729 }
 730 @media only screen and (min-width: 550px) {
 731   body > nav {
 732     font-size: .9em;
 733   }
 734   body > nav ul {
 735     margin: 0;
 736     padding: 0;
 737     border: 0;
 738     overflow: hidden;
 739     *zoom: 1;
 740     float: left;
 741     display: block;
 742     padding-top: .15em;
 743   }
 744   body > nav ul li {
 745     list-style-image: none;
 746     list-style-type: none;
 747     margin-left: 0;
 748     white-space: nowrap;
 749     display: inline;
 750     float: left;
 751     padding-left: 0;
 752     padding-right: 0;
 753   }
 754   body > nav ul li:first-child, body > nav ul li.first {
 755     padding-left: 0;
 756   }
 757   body > nav ul li:last-child {
 758     padding-right: 0;
 759   }
 760   body > nav ul li.last {
 761     padding-right: 0;
 762   }
 763   body > nav ul.subscription {
 764     margin-left: .8em;
 765     float: right;
 766   }
 767   body > nav ul.subscription li:last-child a {
 768     padding-right: 0;
 769   }
 770   body > nav ul li {
 771     margin: 0;
 772   }
 773   body > nav a {
 774     color: #6b6b6b;
 775     font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
 776     text-shadow: #ebebeb 0 1px;
 777     float: left;
 778     text-decoration: none;
 779     font-size: 1.1em;
 780     padding: .1em 0;
 781     line-height: 1.5em;
 782   }
 783   body > nav a:visited {
 784     color: #6b6b6b;
 785   }
 786   body > nav a:hover {
 787     color: #2b2b2b;
 788   }
 789   body > nav li + li {
 790     border-left: 1px solid #b0b0b0;
 791     margin-left: .8em;
 792   }
 793   body > nav li + li a {
 794     padding-left: .8em;
 795     border-left: 1px solid #dedede;
 796   }
 797   body > nav form {
 798     float: right;
 799     text-align: left;
 800     padding-left: .8em;
 801     width: 175px;
 802   }
 803   body > nav form .search {
 804     width: 93%;
 805     font-size: .95em;
 806     line-height: 1.2em;
 807   }
 808   body > nav ul[data-subscription$=email] + form {
 809     width: 97px;
 810   }
 811   body > nav ul[data-subscription$=email] + form .search {
 812     width: 91%;
 813   }
 814   body > nav fieldset.mobile-nav {
 815     display: none;
 816   }
 817   body > nav fieldset[role=search] {
 818     width: 99%;
 819   }
 820 }
 821 @media only screen and (min-width: 992px) {
 822   body > nav form {
 823     width: 215px;
 824   }
 825   body > nav ul[data-subscription$=email] + form {
 826     width: 147px;
 827   }
 828 }
 829
 830 .no-placeholder body > nav .search {
 831   background: #f2f2f2 url('/img/search.png') 0.3em 0.25em no-repeat;
 832   text-indent: 1.3em;
 833 }
 834
 835 @media only screen and (min-width: 550px) {
 836   .maskImage body > nav ul[data-subscription$=email] + form {
 837     width: 123px;
 838   }
 839 }
 840 @media only screen and (min-width: 992px) {
 841   .maskImage body > nav ul[data-subscription$=email] + form {
 842     width: 173px;
 843   }
 844 }
 845 .maskImage ul.subscription {
 846   position: relative;
 847   top: .2em;
 848 }
 849 .maskImage ul.subscription li, .maskImage ul.subscription a {
 850   border: 0;
 851   padding: 0;
 852 }
 853
 854 article {
 855   padding-top: 1em;
 856 }
 857 article header {
 858   position: relative;
 859   padding-top: 2em;
 860   padding-bottom: 1em;
 861   margin-bottom: 1em;
 862   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') bottom left repeat-x;
 863 }
 864 article header h1 {
 865   margin: 0;
 866 }
 867 article header h1 a {
 868   text-decoration: none;
 869 }
 870 article header h1 a:hover {
 871   text-decoration: underline;
 872 }
 873 article header p {
 874   font-size: .9em;
 875   color: #aaaaaa;
 876   margin: 0;
 877 }
 878 article header p.meta {
 879   text-transform: uppercase;
 880   position: absolute;
 881   top: 0;
 882 }
 883 @media only screen and (min-width: 768px) {
 884   article header {
 885     margin-bottom: 1.5em;
 886     padding-bottom: 1em;
 887     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') bottom left repeat-x;
 888   }
 889 }
 890 article h2 {
 891   padding-top: 0.8em;
 892   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') top left repeat-x;
 893 }
 894 .entry-content article h2:first-child, article header + h2 {
 895   padding-top: 0;
 896 }
 897 article h2:first-child, article header + h2 {
 898   background: none;
 899 }
 900 article .feature {
 901   padding-top: .5em;
 902   margin-bottom: 1em;
 903   padding-bottom: 1em;
 904   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') bottom left repeat-x;
 905   font-size: 2.0em;
 906   font-style: italic;
 907   line-height: 1.3em;
 908 }
 909 article img, {
 910   -webkit-border-radius: 0.3em;
 911   -moz-border-radius: 0.3em;
 912   -ms-border-radius: 0.3em;
 913   -o-border-radius: 0.3em;
 914   border-radius: 0.3em;
 915   -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
 916   -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
 917   box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
 918   -webkit-box-sizing: border-box;
 919   -moz-box-sizing: border-box;
 920   box-sizing: border-box;
 921   border: white 0.5em solid;
 922 }
 923 article > footer {
 924   padding-bottom: 2.5em;
 925   margin-top: 2em;
 926 }
 927 article > footer p.meta {
 928   margin-bottom: .8em;
 929   font-size: .85em;
 930   clear: both;
 931   overflow: hidden;
 932 }
 933
 934 .blog-index article + article {
 935   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') top left repeat-x;
 936 }
 937
 938 #content .blog-index {
 939   padding-top: 0;
 940   padding-bottom: 0;
 941 }
 942 #content .blog-index article {
 943   padding-top: 2em;
 944 }
 945 #content .blog-index article header {
 946   background: none;
 947   padding-bottom: 0;
 948 }
 949 #content .blog-index article h1 {
 950   font-size: 2.2em;
 951 }
 952 #content .blog-index article h1 a {
 953   color: inherit;
 954 }
 955 #content .blog-index article h1 a:hover {
 956   color: #0181eb;
 957 }
 958 #content .blog-index footer {
 959   margin-top: 1em;
 960 }
 961
 962 .separator, article > footer .comments:before {
 963   content: "\2022 ";
 964   padding: 0 .4em 0 .2em;
 965   display: inline-block;
 966 }
 967
 968 #content div.pagination {
 969   text-align: center;
 970   font-size: .95em;
 971   position: relative;
 972   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') top left repeat-x;
 973   padding-top: 1.5em;
 974   padding-bottom: 1.5em;
 975 }
 976 #content div.pagination a {
 977   text-decoration: none;
 978   color: #aaaaaa;
 979 }
 980 #content div.pagination a.prev {
 981   position: absolute;
 982   left: 0;
 983 }
 984 #content div.pagination a.next {
 985   position: absolute;
 986   right: 0;
 987 }
 988 #content div.pagination a:hover {
 989   color: #0181eb;
 990 }
 991 #content div.pagination a[href*=archive]:before, #content div.pagination a[href*=archive]:after {
 992   content: '\2014';
 993   padding: 0 .3em;
 994 }
 995
 996 p.meta + .sharing {
 997   padding-top: 1em;
 998   padding-left: 0;
 999   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVQIHWNIS0sr/v//PwMMDzY+ADqMahlW4J91AAAAAElFTkSuQmCC') top left repeat-x;
1000 }
1001
1002 #fb-root {
1003   display: none;
1004 }
1005
1006 .highlight, {
1007   border: 1px solid #05232b !important;
1008 }
1009 .highlight table td.code, table td.code {
1010   width: 100%;
1011 }
1012
1013 .highlight .line-numbers, html .highlight .line_numbers {
1014   text-align: right;
1015   font-size: 13px;
1016   line-height: 1.45em;
1017   background: #073642 url('/img/noise.png') top left !important;
1018   border-right: 1px solid #00232c !important;
1019   -webkit-box-shadow: #083e4b -1px 0 inset;
1020   -moz-box-shadow: #083e4b -1px 0 inset;
1021   box-shadow: #083e4b -1px 0 inset;
1022   text-shadow: #021014 0 -1px;
1023   padding: .8em !important;
1024   -webkit-border-radius: 0;
1025   -moz-border-radius: 0;
1026   -ms-border-radius: 0;
1027   -o-border-radius: 0;
1028   border-radius: 0;
1029 }
1030 .highlight .line-numbers span, html .highlight .line_numbers span {
1031   color: #586e75 !important;
1032 }
1033
1034 figure.code, pre {
1035   -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
1036   -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
1037   box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
1038 }
1039 figure.code .highlight pre, .highlight pre, pre .highlight pre {
1040   -webkit-box-shadow: none;
1041   -moz-box-shadow: none;
1042   box-shadow: none;
1043 }
1044
1045 .highlight *::-moz-selection, figure.code .highlight *::-moz-selection {
1046   background: #386774;
1047   color: inherit;
1048   text-shadow: #002b36 0 1px;
1049 }
1050 .highlight *::-webkit-selection, figure.code .highlight *::-webkit-selection {
1051   background: #386774;
1052   color: inherit;
1053   text-shadow: #002b36 0 1px;
1054 }
1055 .highlight *::selection, figure.code .highlight *::selection {
1056   background: #386774;
1057   color: inherit;
1058   text-shadow: #002b36 0 1px;
1059 }
1060
1061 pre {
1062   background: #002b36 url('/img/noise.png') top left;
1063   -webkit-border-radius: 0.4em;
1064   -moz-border-radius: 0.4em;
1065   -ms-border-radius: 0.4em;
1066   -o-border-radius: 0.4em;
1067   border-radius: 0.4em;
1068   border: 1px solid #05232b;
1069   line-height: 1.45em;
1070   font-size: 13px;
1071   margin-bottom: 2.1em;
1072   padding: .8em 1em;
1073 #  color: #93a1a1;
1074   color: #00FF00;
1075   overflow: auto;
1076 }
1077
1078 h3.filename + pre {
1079   -moz-border-radius-topleft: 0px;
1080   -webkit-border-top-left-radius: 0px;
1081   border-top-left-radius: 0px;
1082   -moz-border-radius-topright: 0px;
1083   -webkit-border-top-right-radius: 0px;
1084   border-top-right-radius: 0px;
1085 }
1086
1087 //p code, li code {
1088 //  display: inline-block;
1089 //  white-space: no-wrap;
1090 //  background: #fff;
1091 //  font-size: .8em;
1092 //  line-height: 1.5em;
1093 //  color: #555;
1094 //  border: 1px solid #ddd;
1095 //  -webkit-border-radius: 0.4em;
1096 //  -moz-border-radius: 0.4em;
1097 //  -ms-border-radius: 0.4em;
1098 //  -o-border-radius: 0.4em;
1099 //  border-radius: 0.4em;
1100 //  padding: 0 .3em;
1101 //  margin: -1px 0;
1102 //}
1103 //p pre code, li pre code {
1104 //  font-size: 1em !important;
1105 //  background: none;
1106 //  border: none;
1107 //}
1108
1109 .pre-code, html .highlight pre, .highlight code {
1110   font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important;
1111   overflow: scroll;
1112   overflow-y: hidden;
1113   display: block;
1114   padding: .8em;
1115   overflow-x: auto;
1116   line-height: 1.45em;
1117   background: #002b36 url('/img/noise.png') top left !important;
1118   color: #93a1a1 !important;
1119 }
1120 .pre-code span, html .highlight pre span, .highlight code span {
1121   color: #93a1a1 !important;
1122 }
1123 .pre-code span, html .highlight pre span, .highlight code span {
1124   font-style: normal !important;
1125   font-weight: normal !important;
1126 }
1127 .pre-code .c, html .highlight pre .c, .highlight code .c {
1128   color: #586e75 !important;
1129   font-style: italic !important;
1130 }
1131 .pre-code .cm, html .highlight pre .cm, .highlight code .cm {
1132   color: #586e75 !important;
1133   font-style: italic !important;
1134 }
1135 .pre-code .cp, html .highlight pre .cp, .highlight code .cp {
1136   color: #586e75 !important;
1137   font-style: italic !important;
1138 }
1139 .pre-code .c1, html .highlight pre .c1, .highlight code .c1 {
1140   color: #586e75 !important;
1141   font-style: italic !important;
1142 }
1143 .pre-code .cs, html .highlight pre .cs, .highlight code .cs {
1144   color: #586e75 !important;
1145   font-weight: bold !important;
1146   font-style: italic !important;
1147 }
1148 .pre-code .err, html .highlight pre .err, .highlight code .err {
1149   color: #dc322f !important;
1150   background: none !important;
1151 }
1152 .pre-code .k, html .highlight pre .k, .highlight code .k {
1153   color: #cb4b16 !important;
1154 }
1155 .pre-code .o, html .highlight pre .o, .highlight code .o {
1156   color: #93a1a1 !important;
1157   font-weight: bold !important;
1158 }
1159 .pre-code .p, html .highlight pre .p, .highlight code .p {
1160   color: #93a1a1 !important;
1161 }
1162 .pre-code .ow, html .highlight pre .ow, .highlight code .ow {
1163   color: #2aa198 !important;
1164   font-weight: bold !important;
1165 }
1166 .pre-code .gd, html .highlight pre .gd, .highlight code .gd {
1167   color: #93a1a1 !important;
1168   background-color: #372c34 !important;
1169   display: inline-block;
1170 }
1171 .pre-code .gd .x, html .highlight pre .gd .x, .highlight code .gd .x {
1172   color: #93a1a1 !important;
1173   background-color: #4d2d33 !important;
1174   display: inline-block;
1175 }
1176 .pre-code .ge, html .highlight pre .ge, .highlight code .ge {
1177   color: #93a1a1 !important;
1178   font-style: italic !important;
1179 }
1180 .pre-code .gh, html .highlight pre .gh, .highlight code .gh {
1181   color: #586e75 !important;
1182 }
1183 .pre-code .gi, html .highlight pre .gi, .highlight code .gi {
1184   color: #93a1a1 !important;
1185   background-color: #1a412b !important;
1186   display: inline-block;
1187 }
1188 .pre-code .gi .x, html .highlight pre .gi .x, .highlight code .gi .x {
1189   color: #93a1a1 !important;
1190   background-color: #355720 !important;
1191   display: inline-block;
1192 }
1193 .pre-code .gs, html .highlight pre .gs, .highlight code .gs {
1194   color: #93a1a1 !important;
1195   font-weight: bold !important;
1196 }
1197 .pre-code .gu, html .highlight pre .gu, .highlight code .gu {
1198   color: #6c71c4 !important;
1199 }
1200 .pre-code .kc, html .highlight pre .kc, .highlight code .kc {
1201   color: #859900 !important;
1202   font-weight: bold !important;
1203 }
1204 .pre-code .kd, html .highlight pre .kd, .highlight code .kd {
1205   color: #268bd2 !important;
1206 }
1207 .pre-code .kp, html .highlight pre .kp, .highlight code .kp {
1208   color: #cb4b16 !important;
1209   font-weight: bold !important;
1210 }
1211 .pre-code .kr, html .highlight pre .kr, .highlight code .kr {
1212   color: #d33682 !important;
1213   font-weight: bold !important;
1214 }
1215 .pre-code .kt, html .highlight pre .kt, .highlight code .kt {
1216   color: #2aa198 !important;
1217 }
1218 .pre-code .n, html .highlight pre .n, .highlight code .n {
1219   color: #268bd2 !important;
1220 }
1221 .pre-code .na, html .highlight pre .na, .highlight code .na {
1222   color: #268bd2 !important;
1223 }
1224 .pre-code .nb, html .highlight pre .nb, .highlight code .nb {
1225   color: #859900 !important;
1226 }
1227 .pre-code .nc, html .highlight pre .nc, .highlight code .nc {
1228   color: #d33682 !important;
1229 }
1230 .pre-code .no, html .highlight pre .no, .highlight code .no {
1231   color: #b58900 !important;
1232 }
1233 .pre-code .nl, html .highlight pre .nl, .highlight code .nl {
1234   color: #859900 !important;
1235 }
1236 .pre-code .ne, html .highlight pre .ne, .highlight code .ne {
1237   color: #268bd2 !important;
1238   font-weight: bold !important;
1239 }
1240 .pre-code .nf, html .highlight pre .nf, .highlight code .nf {
1241   color: #268bd2 !important;
1242   font-weight: bold !important;
1243 }
1244 .pre-code .nn, html .highlight pre .nn, .highlight code .nn {
1245   color: #b58900 !important;
1246 }
1247 .pre-code .nt, html .highlight pre .nt, .highlight code .nt {
1248   color: #268bd2 !important;
1249   font-weight: bold !important;
1250 }
1251 .pre-code .nx, html .highlight pre .nx, .highlight code .nx {
1252   color: #b58900 !important;
1253 }
1254 .pre-code .vg, html .highlight pre .vg, .highlight code .vg {
1255   color: #268bd2 !important;
1256 }
1257 .pre-code .vi, html .highlight pre .vi, .highlight code .vi {
1258   color: #268bd2 !important;
1259 }
1260 .pre-code .nv, html .highlight pre .nv, .highlight code .nv {
1261   color: #268bd2 !important;
1262 }
1263 .pre-code .mf, html .highlight pre .mf, .highlight code .mf {
1264   color: #2aa198 !important;
1265 }
1266 .pre-code .m, html .highlight pre .m, .highlight code .m {
1267   color: #2aa198 !important;
1268 }
1269 .pre-code .mh, html .highlight pre .mh, .highlight code .mh {
1270   color: #2aa198 !important;
1271 }
1272 .pre-code .mi, html .highlight pre .mi, .highlight code .mi {
1273   color: #2aa198 !important;
1274 }
1275 .pre-code .s, html .highlight pre .s, .highlight code .s {
1276   color: #2aa198 !important;
1277 }
1278 .pre-code .sd, html .highlight pre .sd, .highlight code .sd {
1279   color: #2aa198 !important;
1280 }
1281 .pre-code .s2, html .highlight pre .s2, .highlight code .s2 {
1282   color: #2aa198 !important;
1283 }
1284 .pre-code .se, html .highlight pre .se, .highlight code .se {
1285   color: #dc322f !important;
1286 }
1287 .pre-code .si, html .highlight pre .si, .highlight code .si {
1288   color: #268bd2 !important;
1289 }
1290 .pre-code .sr, html .highlight pre .sr, .highlight code .sr {
1291   color: #2aa198 !important;
1292 }
1293 .pre-code .s1, html .highlight pre .s1, .highlight code .s1 {
1294   color: #2aa198 !important;
1295 }
1296 .pre-code div .gd, html .highlight pre div .gd, .highlight code div .gd, .pre-code div .gd .x, html .highlight pre div .gd .x, .highlight code div .gd .x, .pre-code div .gi, html .highlight pre div .gi, .highlight code div .gi, .pre-code div .gi .x, html .highlight pre div .gi .x, .highlight code div .gi .x {
1297   display: inline-block;
1298   width: 100%;
1299 }
1300
1301 .highlight {
1302   margin-bottom: 1.8em;
1303   background: #002b36;
1304   overflow-y: hidden;
1305   overflow-x: auto;
1306 }
1307 .highlight pre {
1308   background: none;
1309   -webkit-border-radius: 0px;
1310   -moz-border-radius: 0px;
1311   -ms-border-radius: 0px;
1312   -o-border-radius: 0px;
1313   border-radius: 0px;
1314   border: none;
1315   padding: 0;
1316   margin-bottom: 0;
1317 }
1318
1319 pre::-webkit-scrollbar, .highlight::-webkit-scrollbar {
1320   height: .5em;
1321   background: rgba(255, 255, 255, 0.15);
1322 }
1323 pre::-webkit-scrollbar-thumb:horizontal, .highlight::-webkit-scrollbar-thumb:horizontal {
1324   background: rgba(255, 255, 255, 0.2);
1325   -webkit-border-radius: 4px;
1326   border-radius: 4px;
1327 }
1328
1329 .highlight code {
1330   background: #000;
1331 }
1332
1333 figure.code {
1334   background: none;
1335   padding: 0;
1336   border: 0;
1337   margin-bottom: 1.5em;
1338 }
1339 figure.code pre {
1340   margin-bottom: 0;
1341 }
1342 figure.code figcaption {
1343   position: relative;
1344 }
1345 figure.code .highlight {
1346   margin-bottom: 0;
1347 }
1348
1349 .code-title, html a[href*='#file'], h3.filename, figure.code figcaption {
1350   text-align: center;
1351   font-size: 13px;
1352   line-height: 2em;
1353   text-shadow: #cbcccc 0 1px 0;
1354   color: #474747;
1355   font-weight: normal;
1356   margin-bottom: 0;
1357   -moz-border-radius-topleft: 5px;
1358   -webkit-border-top-left-radius: 5px;
1359   border-top-left-radius: 5px;
1360   -moz-border-radius-topright: 5px;
1361   -webkit-border-top-right-radius: 5px;
1362   border-top-right-radius: 5px;
1363   font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
1364   background: #aaaaaa url('/img/code_bg.png') top repeat-x;
1365   border: 1px solid #565656;
1366   border-top-color: #cbcbcb;
1367   border-left-color: #a5a5a5;
1368   border-right-color: #a5a5a5;
1369   border-bottom: 0;
1370 }
1371
1372 .download-source, html a[href*=raw], figure.code figcaption a {
1373   position: absolute;
1374   right: .8em;
1375   text-decoration: none;
1376   color: #666 !important;
1377   z-index: 1;
1378   font-size: 13px;
1379   text-shadow: #cbcccc 0 1px 0;
1380   padding-left: 3em;
1381 }
1382 .download-source:hover, html a[href*=raw]:hover, figure.code figcaption a:hover {
1383   text-decoration: underline;
1384 }
1385
1386 #archive #content > div, #archive #content > div > article {
1387   padding-top: 0;
1388 }
1389
1390
1391 #content > .category article {
1392   margin-left: 0;
1393   padding-left: 6.8em;
1394 }
1395 #content > .category .year {
1396   display: inline;
1397 }
1398
1399 .side-shadow-border, aside.sidebar section h1, aside.sidebar li {
1400   -webkit-box-shadow: white 0 1px;
1401   -moz-box-shadow: white 0 1px;
1402   box-shadow: white 0 1px;
1403 }
1404
1405 aside.sidebar {
1406   overflow: hidden;
1407   color: #4b4b4b;
1408   text-shadow: white 0 1px;
1409 }
1410 aside.sidebar section {
1411   font-size: .8em;
1412   line-height: 1.4em;
1413   margin-bottom: 1.5em;
1414 }
1415 aside.sidebar section h1 {
1416   margin: 1.5em 0 0;
1417   padding-bottom: .2em;
1418   border-bottom: 1px solid #e0e0e0;
1419 }
1420 aside.sidebar section h1 + p {
1421   padding-top: .4em;
1422 }
1423 aside.sidebar img {
1424   -webkit-border-radius: 0.3em;
1425   -moz-border-radius: 0.3em;
1426   -ms-border-radius: 0.3em;
1427   -o-border-radius: 0.3em;
1428   border-radius: 0.3em;
1429   -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
1430   -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
1431   box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
1432   -webkit-box-sizing: border-box;
1433   -moz-box-sizing: border-box;
1434   box-sizing: border-box;
1435   border: white 0.3em solid;
1436 }
1437 aside.sidebar ul {
1438   margin-bottom: 0.5em;
1439   margin-left: 0;
1440 }
1441 aside.sidebar li {
1442   list-style: none;
1443   padding: .5em 0;
1444   margin: 0;
1445   border-bottom: 1px solid #e0e0e0;
1446 }
1447 aside.sidebar li p:last-child {
1448   margin-bottom: 0;
1449 }
1450 aside.sidebar a {
1451   color: inherit;
1452   -webkit-transition: color 0.5s;
1453   -moz-transition: color 0.5s;
1454   -o-transition: color 0.5s;
1455   transition: color 0.5s;
1456   text-decoration: none;
1457 }
1458 aside.sidebar:hover a {
1459   color: #222222;
1460 }
1461 aside.sidebar:hover a:hover {
1462   color: #0181eb;
1463 }
1464
1465 .aside-alt-link, #pinboard_linkroll .pin-tag {
1466   color: #7e7e7e;
1467 }
1468 .aside-alt-link:hover, #pinboard_linkroll .pin-tag:hover {
1469   color: #0181eb;
1470 }
1471
1472 @media only screen and (min-width: 768px) {
1473   .toggle-sidebar {
1474     outline: none;
1475     position: absolute;
1476     right: -10px;
1477     top: 0;
1478     bottom: 0;
1479     display: inline-block;
1480     text-decoration: none;
1481     color: #cecece;
1482     width: 9px;
1483     cursor: pointer;
1484   }
1485   .toggle-sidebar:hover {
1486     background: #e9e9e9;
1487     background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(224, 224, 224, 0.5)), color-stop(100%, rgba(224, 224, 224, 0)));
1488     background: -webkit-linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
1489     background: -moz-linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
1490     background: -o-linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
1491     background: linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
1492   }
1493   .toggle-sidebar:after {
1494     position: absolute;
1495     right: -11px;
1496     top: 0;
1497     width: 20px;
1498     font-size: 1.2em;
1499     line-height: 1.1em;
1500     padding-bottom: .15em;
1501     -moz-border-radius-bottomright: 0.3em;
1502     -webkit-border-bottom-right-radius: 0.3em;
1503     border-bottom-right-radius: 0.3em;
1504     text-align: center;
1505     background: #f8f8f8 url('/img/noise.png') top left;
1506     border-bottom: 1px solid #e0e0e0;
1507     border-right: 1px solid #e0e0e0;
1508     content: "\00BB";
1509     text-indent: -1px;
1510   }
1511   .collapse-sidebar .toggle-sidebar {
1512     text-indent: 0px;
1513     right: -20px;
1514     width: 19px;
1515   }
1516   .collapse-sidebar .toggle-sidebar:hover {
1517     background: #e9e9e9;
1518   }
1519   .collapse-sidebar .toggle-sidebar:after {
1520     border-left: 1px solid #e0e0e0;
1521     text-shadow: #fff 0 1px;
1522     content: "\00AB";
1523     left: 0px;
1524     right: 0;
1525     text-align: center;
1526     text-indent: 0;
1527     border: 0;
1528     border-right-width: 0;
1529     background: none;
1530   }
1531 }
1532
1533 body > footer {
1534   font-size: .8em;
1535   color: #888888;
1536   text-shadow: #d9d9d9 0 1px;
1537   background-color: #cccccc;
1538   background: url('/img/noise.png'), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(50%, #cccccc), color-stop(100%, #b0b0b0));
1539   background: url('/img/noise.png'), -webkit-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
1540   background: url('/img/noise.png'), -moz-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
1541   background: url('/img/noise.png'), -o-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
1542   background: url('/img/noise.png'), linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
1543   border-top: 1px solid #f2f2f2;
1544   position: relative;
1545   padding-top: 1em;
1546   padding-bottom: 1em;
1547   margin-bottom: 3em;
1548   -moz-border-radius-bottomleft: 0.4em;
1549   -webkit-border-bottom-left-radius: 0.4em;
1550   border-bottom-left-radius: 0.4em;
1551   -moz-border-radius-bottomright: 0.4em;
1552   -webkit-border-bottom-right-radius: 0.4em;
1553   border-bottom-right-radius: 0.4em;
1554   z-index: 1;
1555 }
1556 body > footer a {
1557   color: #6b6b6b;
1558 }
1559 body > footer a:visited {
1560   color: #6b6b6b;
1561 }
1562 body > footer a:hover {
1563   color: #484848;
1564 }
1565 body > footer p:last-child {
1566   margin-bottom: 0;
1567 }
1568
1569 /* OPENSSL WEBSITE ADDITIONS */
1570
1571 /* newsflash table */
1572 tr:first-child { font-weight: bold; border-bottom: 1px solid black; }
1573 tr:nth-child(even) { background-color: #D9f0ff; }
1574 td.d { float: left; width: 20%; }
1575 td.t { float: right; width: 80%; }
1576
1577 /* FAQ accordion */
1578 /*
1579  * This also needs a bit of javascript that toggles the 'open' class on a
1580  * 'faq ul li' element.
1581  * Quite of lot of the effort is really to get nice rounded boxes around
1582  * each entry, and the squared plus / minus sign off to the left.
1583  *
1584  * The FAQ itself is expected to looks like this:
1585  *
1586  * <div class="faq">
1587  *   ...
1588  *   <ul>
1589  *     <li>
1590  *       <p>FAQ entry title</p>
1591  *       <p>FAQ entry text</p>
1592  *       <p>more text</p>
1593  *       <p>more text</p>
1594  *       <p>more text</p>
1595  *     </li>
1596  *     ...
1597  *   </ul>
1598  *   ...
1599  * </div>
1600  *
1601  * One could have argued for using <dt> and <dd>, but support for it looks
1602  * damn ugly in Markdown, so we use this form instead, which results in the
1603  * above:
1604  *
1605  * *   FAQ entry title
1606  *
1607  *     FAQ entry text
1608  *
1609  *     more text
1610  *
1611  *     more text
1612  *
1613  *     more text
1614  */
1615
1616 /* Styling for closed items */
1617 .faq ul {
1618     position: relative;
1619     margin-left: 0;
1620     padding-left: 0;
1621     list-style: none;
1622 }
1623
1624 .faq ul > li {
1625     margin: 5px 0 0 0;
1626     padding: 0;
1627     border: 1px solid #cccccc;
1628     -moz-border-radius: 5px;
1629     -webkit-border-radius: 5px;
1630     border-radius: 5px;
1631 }
1632
1633 .faq ul > li > p {
1634     margin: 0;
1635     padding: 5px 20px;
1636 }
1637
1638 .faq ul > li > p:nth-child(1)::before {
1639     position: absolute;
1640     margin-left: -1em;
1641     content: "\229E";
1642 }
1643
1644 .faq ul > li > p:nth-child(1) {
1645     background-color: #ebebeb;
1646     cursor: pointer;
1647     color: #666666;
1648 }
1649
1650 .faq ul > li > p:nth-child(1):hover {
1651     background-color: #f5f5f5;
1652 }
1653
1654 .faq ul > li > p:nth-child(n+2) {
1655     display: none;
1656     transition: display .5s ease 0s;
1657 }
1658
1659 .faq ul > li > pre {
1660     display: none;
1661     transition: display .5s ease 0s;
1662     margin: 5px 20px;
1663 }
1664
1665 /* The changes for an opened entry */
1666 .faq ul > li.open > p:nth-child(1)::before {
1667     position: absolute;
1668     margin-left: -1em;
1669     content: "\229F";
1670 }
1671
1672 .faq ul > li.open > p:nth-child(1) {
1673     -moz-border-radius: 5px 5px 0 0;
1674     -webkit-border-radius: 5px 5px 0 0;
1675     border-radius: 5px 5px 0 0;
1676     background-color: #cef98d;
1677 }
1678
1679 .faq ul > li.open > p:nth-child(1):hover {
1680     background-color: #c6f089;
1681 }
1682
1683 .faq ul > li.open > p:nth-child(n+2) {
1684     display: block;
1685 }
1686
1687 .faq ul > li.open > pre {
1688     display: block;
1689 }
1690
1691 /* Hacks because we have CSS code elsewhere giving a bad result here */
1692 .faq code {
1693     /* counteract 'li code' */
1694     color: #00FF00;
1695 }
1696