wiki/src/local.css

   1 /*
   2 Tails custom colors: see tails_ticket#14836
   3 dark purple: #3a2354 hsl(268,58,33)
   4 medium purple (logo): #56347c hsl(268,58,49)
   5 light purple: #9f73d2 hsl(269,45,82)
   6 dark green: #276426 hsl(119,62,39)
   7 medium dark green (links): #3b833a hsl(119,98,94) // Passes WebAIM contrast check for small text on white background
   8 medium light green (buttons): #53b351 hsl(119,55,70)
   9 light green: #73d171 hsl(119,46,82)
  10
  11 Tails font style:
  12 Some text sizing use ems with decimals to calculate round pixel numbers by
  13 default, when the user does not resize the text.
  14 See: http://www.alistapart.com/articles/howtosizetextincss/
  15 */
  16
  17 /*
  18 Table of Content:
  19
  20   - Fonts
  21   - Base
  22   - Basic Typography
  23   - Tables
  24   - Images
  25   - Forms
  26   - Layout
  27   - Banner
  28   - Search box and Donate button
  29   - Top bar
  30   - Actions menu
  31   - Breadcrumbs
  32   - Languages
  33   - Page title
  34   - Trail
  35   - Links
  36   - Support page
  37   - News
  38   - Columns
  39   - Calls for action
  40   - Download buttons
  41   - Toggleable
  42   - Icons
  43   - Documentation styling
  44   - Code, preformatted text, and command lines
  45   - Inlined icons
  46   - Contribute section
  47   - Highlight
  48   - Donate buttons outside of sidebar
  49   - Charts
  50
  51 */
  52
  53 /* Load RTL stylesheet */
  54 @import url("local.rtl.css");
  55
  56 /* Load stylesheet for donation campaign */
  57 @import url("donate/banner.css");
  58
  59 /* Fonts */
  60
  61 @font-face { font-family: "Source Sans Pro Regular"; src: url("lib/SourceSansPro-Regular.ttf"); }
  62 @font-face { font-family: "Source Code Pro Regular"; src: url("lib/SourceCodePro-Regular.ttf"); }
  63
  64 /* Base */
  65
  66 /* Include padding and border in width calculations (like Bootstrap does) */
  67
  68 *,
  69 *:before,
  70 *:after {
  71           box-sizing: border-box;
  72 }
  73
  74 html {
  75     font-size: 16px !important;
  76 }
  77
  78 body {
  79     font-family: "DejaVu Sans", "Verdana", sans-serif;
  80     color: black;
  81     background: url(lib/strip.png);
  82     margin: 0;
  83     padding: 0;
  84 }
  85
  86 /* Basic typography */
  87 /* This section implements the ideas of typographic scale and rythm as
  88  * explained on http://lamb.cc/typograph/. */
  89
  90 /* Set the main font-size to 14px.
  91  * Set the main line-height, λ to 21px.
  92  * All this section is calculated so that each element measures in height a
  93  * multiple of λ. This allows, for exemple, to keep parallel threads of text
  94  * in a same vertical rythm. */
  95 body {
  96     font-size: 87.5%; /* 16×87.5%=14px */
  97     line-height: 1.5em; /* 14×1.5=21px=λ */
  98 }
  99
 100 /* The bottom margin of all elements is fixed to a multiple of λ so that they
 101  * don't brake the rythm when they overlap. We set all top margin to 0. */
 102 p {
 103     margin: 0 0 1.5em 0; /* 14×1.5=21px=λ */
 104 }
 105
 106 h1, h2, h3 {
 107     font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
 108     font-weight: normal;
 109 }
 110
 111 /* The size h1, h2 and h3 follows a traditional scale of 1, 1.5 and 2.
 112    Their line-height are adjusted to a multiple of λ. */
 113
 114 h1 {
 115     font-size: 2em; /* 14×2=28px */
 116     line-height: 1em;
 117     margin: 1.5em 0 1em;
 118 }
 119
 120 h2 {
 121     font-size: 1.5em; /* 14×1.5=21px */
 122     line-height: 1em;
 123     margin: 1em 0 1em 0; /* 21×1=21px=λ */
 124 }
 125
 126 h3 {
 127     font-size: 1.071em; /* 14×1.071=15px */
 128     text-transform: uppercase;
 129     letter-spacing: 0.067em; /* 15×0.067=1px */
 130     margin: 0.7em 0 0.7em 0; /* 15×1.4=21px=λ */
 131 }
 132
 133 /* avoid super-long lines */
 134 .donate-button,
 135 p, ul, ol, h1, h2, h3, h4, h5, h6 {
 136     max-width: 45em;
 137 }
 138
 139 blockquote {
 140     max-width: 42em;
 141 }
 142
 143 li>p {
 144     margin-top: 1em;
 145     margin-bottom: 0.5em;
 146 }
 147
 148 code, kbd, samp, pre, tt, var, p.pre, p.code {
 149     font-family: "Source Code Pro Regular", "Courier", monospace;
 150     font-size: 1em; /* 14px */
 151 }
 152 pre code { font-size: 1em; } /* ikiwiki adds <code> tags inside <pre> */
 153
 154 p+p, table+p {
 155     margin-top: 18px;
 156 }
 157
 158 ol, ul {
 159     padding: 0;
 160     margin-left: 1.5em;
 161 }
 162
 163 .remove-extra-space {
 164   margin: 0 -0.2em;
 165 }
 166
 167 .remove-extra-space-right {
 168   margin: 0 -0.2em 0 0;
 169 }
 170
 171 .clearfix {
 172     clear: both;
 173     display: block;
 174     width: 100%;
 175 }
 176
 177 #footer {
 178     padding-top: 36px;
 179 }
 180
 181 #pageinfo {
 182     border-top: 0;
 183 }
 184
 185 div#feedlink {
 186     margin-top: 18px;
 187 }
 188
 189 div.recentchanges {
 190     margin-top: 0;
 191 }
 192
 193 .toc {
 194     border-top:thin solid dimgray;
 195     border-left:thin solid dimgray;
 196     border-bottom:thin dotted darkgrey;
 197     border-right:thin dotted darkgrey;
 198     float:none;
 199     margin:1em 0;
 200     max-width: 38em;
 201     padding:0 1em 0 1em;
 202 }
 203
 204 p.center {
 205     margin: 0 center;
 206     margin-top: 1em;
 207     display: inline-block;
 208 }
 209
 210 blockquote > p {
 211     border-left:2px solid #53b351;
 212     padding-left:5px;
 213     background:#f5f5f5;
 214 }
 215
 216 blockquote > p:hover {
 217     background:#eeeeee;
 218 }
 219
 220 /* Hide revert button on recentchanges */
 221 span.revert {
 222     display: none;
 223 }
 224
 225 /* Tables */
 226
 227 table {
 228   margin: 1.5em 0;
 229   border-collapse: collapse;
 230 }
 231
 232 th.w30 {
 233   width: 30%;
 234 }
 235
 236 th, td {
 237   border: 1px solid black;
 238   padding: 0.5em 1em;
 239 }
 240
 241 th {
 242   background: #9f73d2;
 243 }
 244
 245 tr:nth-child(odd) {
 246   background: #eee;
 247 }
 248
 249 td.check, td.cross {
 250   padding-left: 42px;
 251 }
 252
 253 td.check {
 254   background: url(lib/check.png) no-repeat 10px 8px;
 255 }
 256
 257 td.cross {
 258   background: url(lib/cross.png) no-repeat 10px 6px;
 259 }
 260
 261 /* Images */
 262
 263 img.img { /* overwrite style.css */
 264   margin: 0em;
 265 }
 266
 267 img.top-margin { /* overwrite style.css */
 268   margin-top: 2em;
 269   margin-bottom: 2em;
 270 }
 271
 272 img.right-margin { /* overwrite style.css */
 273   margin-right: 4em;
 274 }
 275
 276 /* Images with caption */
 277
 278 table.img, table.img td {
 279   border: none;
 280 }
 281
 282 table.img caption, .image .caption {
 283   font-size: 90%;
 284   font-style: italic;
 285   color: #58595b;
 286   margin: 1em 0;
 287   max-width: 100%;
 288 }
 289
 290 .image {
 291   text-align: center;
 292 }
 293
 294 /* Forms */
 295
 296 label {
 297   display: block;
 298   margin-bottom: 0;
 299 }
 300
 301 input[type="checkbox"], input[type="radio"] {
 302   margin-right: 5px !important;
 303   vertical-align: bottom;
 304   position: relative;
 305   top: -4px;
 306 }
 307
 308 /* Layout */
 309
 310 .page {
 311     margin:0 auto;
 312     padding: 0 2em 2em 2em;
 313     max-width:986px;
 314     position:relative;
 315     border :0px solid black;
 316     box-shadow: 3px 3px 5px #ccc;
 317     background: white;
 318 }
 319
 320 div.header { /* override style.css */
 321     font-size: 1em;
 322     font-weight: normal;
 323     padding: 30px 0;
 324 }
 325
 326 /* Banner */
 327
 328 .banner {
 329     background: #56347c url(lib/logo.svg) no-repeat 30px 10px;
 330     box-shadow: 3px 3px 5px #ccc;
 331     padding-bottom: 10px;
 332     margin: 0 auto;
 333     max-width: 986px;
 334     border: none;
 335     position: relative;
 336 }
 337
 338 .banner a span {
 339     display: none;
 340 }
 341
 342 .banner .tails {
 343     display: block;
 344     height: 110px;
 345 }
 346
 347 /* Search box and Donate button */
 348
 349 #search-and-donate {
 350     display: flex;
 351     flex-direction: column;
 352     justify-content: space-between;
 353 }
 354
 355 #searchform {
 356     position: relative;
 357     margin: 10px auto 0 auto;
 358     width: 150px;
 359 }
 360
 361 #searchform input {
 362     background: white url(lib/loupe.png) no-repeat;
 363     background-position: 97% 50%;
 364     padding: 3px 16px 3px 3px;
 365     border-radius: 0.5em;
 366     border: 2px solid #bbb;
 367     font-size: 13px;
 368     text-align: center;
 369 }
 370
 371 #searchform input::placeholder {
 372     text-transform: capitalize;
 373 }
 374
 375 #searchbox {
 376     width: 100%;
 377 }
 378
 379 .donate a {
 380     background: #53b351;
 381     color: black !important;
 382     font-size: 13px;
 383     font-weight: bold;
 384     border-radius: 0.5em;
 385     padding: 0.2em;
 386     display: flex;
 387     justify-content: center;
 388     box-shadow: 1px 1px 1px #170036, 1px 1px 4px #280a4d, inset 1px 1px 1px #a8ffa0;
 389     width: 150px;
 390 }
 391
 392 .donate {
 393     margin: 10px auto 0 auto;
 394 }
 395
 396 .donate a span {
 397     background: url(lib/heart.svg) no-repeat top 50% left 0 !important;
 398     display: block;
 399     padding-left: 18px;
 400 }
 401
 402 @media (min-width: 360px) {
 403     #search-and-donate {
 404         flex-direction: row;
 405         margin: 10px 30px 0 30px;
 406     }
 407     #searchform, .donate {
 408         margin: 0;
 409     }
 410 }
 411
 412 @media (min-width: 550px) {
 413     #search-and-donate {
 414         flex-direction: column;
 415         justify-content: space-evenly;
 416         position: absolute;
 417         top: 0;
 418         right: 0;
 419         margin-top: 0;
 420         height: 120px;
 421     }
 422     #searchform, .donate a {
 423         width: 200px;
 424     }
 425     #searchform input, .donate a {
 426         font-size: 16px;
 427     }
 428 }
 429
 430 /* Hide all translations of the Donate button by default */
 431 body .donate .de,
 432 body .donate .es,
 433 body .donate .fa,
 434 body .donate .fr,
 435 body .donate .it,
 436 body .donate .pt {
 437     display: none;
 438 }
 439
 440 /* Hide the English button for all other languages
 441
 442    This way, the English button is still displayed when the PO plugin is
 443    disabled. This is useful for development.
 444    */
 445 body.de .donate .en,
 446 body.es .donate .en,
 447 body.fa .donate .en,
 448 body.fr .donate .en,
 449 body.it .donate .en,
 450 body.pt .donate .en {
 451     display: none;
 452 }
 453
 454 /* Show the button corresponding to the current language */
 455 body.de .donate .de,
 456 body.es .donate .es,
 457 body.fa .donate .fa,
 458 body.fr .donate .fr,
 459 body.it .donate .it,
 460 body.pt .donate .pt {
 461     display: flex !important;
 462 }
 463
 464 /* Top bar */
 465
 466 .topbar {
 467   background: white;
 468   max-width: 986px;
 469   margin: 0 auto;
 470   padding-left: 15px;
 471   border-bottom: 1px solid #eee;
 472 }
 473
 474 .topbar ul {
 475   margin: 0;
 476   max-width: 100%;
 477 }
 478
 479 .topbar ul li {
 480   display: inline-block;
 481 }
 482
 483 .topbar a, .topbar .selflink {
 484   display: block;
 485   margin: 0 8px;
 486   padding: 4px 0;
 487   font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
 488   font-weight: bold;
 489   font-size: 13px;
 490   border-bottom: 5px solid white;
 491 }
 492
 493 .topbar a {
 494   color: black;
 495 }
 496
 497 .topbar a:hover {
 498   text-decoration: none;
 499   border-bottom: 5px solid #73d171 !important;
 500 }
 501
 502 .topbar .selflink {
 503   border-bottom: 5px solid #276426;
 504 }
 505
 506 @media (min-width: 810px) {
 507   .topbar a, .topbar .selflink {
 508     padding-top: 8px;
 509     margin: 0 12px;
 510     font-size: 16px;
 511   }
 512 }
 513
 514 /* Actions menu */
 515
 516 .pageheader .actions {
 517     position: absolute;
 518     top: 0;
 519     right: 30px;
 520     height: 30px;
 521     background:url(lib/tools-20.jpg) right no-repeat;
 522     padding-right: 25px;
 523 }
 524
 525 .pageheader .actions ul {
 526     padding: 0;
 527     border-bottom: none;
 528     display:none;
 529     text-align: right;
 530     width: 986px;
 531     max-width: 100%;
 532     height: auto;
 533 }
 534
 535 .pageheader .actions:hover ul {
 536     display: block;
 537 }
 538
 539 .pageheader .actions li {
 540     display:inline-block;
 541     padding: 5px 4px 4px;
 542     font-size: 0.9em;
 543 }
 544
 545 .pageheader .actions li a {
 546     color:#888888;
 547     text-decoration:none;
 548 }
 549
 550 .pageheader .actions:hover ul {
 551     float:right;
 552     position:relative;
 553     top:0;
 554 }
 555
 556 .pageheader .actions:hover ul li {
 557     background:white;
 558     transition: all 0.3s ease-out;
 559 }
 560
 561 .pageheader .actions:hover ul li:hover {
 562     border-bottom:2px solid #451e6f;
 563     text-decoration:none;
 564     background:#EEEEEE;
 565
 566     }
 567
 568 .pageheader .actions:hover ul li:hover a {
 569     transition: all 0.5s ease-out;
 570     color:black;
 571     }
 572
 573 /* Breadcrumbs */
 574
 575 #crumbs ul, #crumbs li {
 576     list-style-type:none;
 577     padding:0;
 578     margin:0;
 579 }
 580
 581 #crumbs {
 582     border-bottom:1px solid #dedede;
 583     margin: 0 -2em;
 584     padding-left: 30px;
 585     max-width:110%;
 586     font-weight:normal;
 587     margin-bottom:0;
 588     margin-top: 0;
 589     white-space: nowrap;
 590     font-size: 0.9rem;
 591     line-height: 2.2em;
 592     height: 33px;
 593 }
 594
 595 #crumbs li {
 596     display: inline-block;
 597     color:#777;
 598     padding-right: 12px;
 599     }
 600
 601
 602 #crumbs li:first-child img {
 603     top:5px;
 604     position:relative;
 605     vertical-align: top;
 606     }
 607
 608 #crumbs li a {
 609     background:url(lib/crumbs.gif) no-repeat right center;
 610     display:block;
 611     padding:0 15px 0 0;
 612     }
 613
 614 #crumbs li a:link,
 615 #crumbs li a:visited {
 616     color:#777;
 617     text-decoration:none;
 618 }
 619
 620 #crumbs li a:hover,
 621 #crumbs li a:focus {
 622 }
 623
 624 /* Languages */
 625
 626 .pageheader #otherlanguages {
 627     position: absolute;
 628     top: 33px;
 629     right: 30px;
 630     border: none;
 631 }
 632
 633 .pageheader #otherlanguages ul {
 634     margin: 0;
 635     padding: 0;
 636     border-bottom: none;
 637     display:inline;
 638     float:right;
 639 }
 640
 641 .pageheader #otherlanguages li {
 642     display:inline;
 643     padding:4px 8px;
 644     margin-right: 0.0em;
 645     position:relative;
 646     float: left;
 647 }
 648
 649 .pageheader #otherlanguages li a {
 650     color:#888888;
 651     text-decoration:none;
 652 }
 653
 654 .pageheader #otherlanguages ul li {
 655     background:white;
 656     text-decoration:none;
 657     text-align:center;
 658     transition: all 0.3s ease-out;
 659     border-bottom:1px solid white;
 660 }
 661
 662 .pageheader #otherlanguages ul li:hover, .pageheader #otherlanguages ul li.current{
 663     border-bottom:2px solid green;
 664     text-decoration:none;
 665     background:#EEEEEE;
 666 }
 667
 668 .pageheader #otherlanguages ul li.master, .pageheader #otherlanguages ul li:hover.master  {
 669     font-weight:bold;
 670 }
 671
 672 .pageheader #otherlanguages ul li:hover a {
 673     transition: all 0.5s ease-out;
 674     color:black;
 675     }
 676
 677 .current > .visible {
 678 text-transform: none !important;
 679 }
 680
 681 .pageheader #otherlanguages ul li span.visible {
 682     display:inline !important;
 683     text-transform:uppercase;
 684     }
 685
 686 .pageheader #otherlanguages ul li span.hidden {
 687     display:none !important;
 688     }
 689
 690 .pageheader #otherlanguages ul li:hover span.visible {
 691     display:none !important;
 692     }
 693
 694 .pageheader #otherlanguages ul li:hover span.hidden {
 695     display:inline !important;
 696     }
 697
 698 /* Page title */
 699
 700 span.title {
 701     font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
 702     font-size: 2.8em;
 703     line-height: 1em;
 704     display: block;
 705     color: #56347c;
 706     border-left: 10px solid #444444;
 707     padding-left: 18px;
 708     margin-left: -28px;
 709 }
 710
 711 div.header span.date {
 712     display: block;
 713     margin-top: 6px;
 714     font-style: italic;
 715 }
 716
 717 /* Trail */
 718
 719 div.trails {
 720   margin-top: 0;
 721 }
 722
 723 div.trail {
 724   height: 2em;
 725   border: solid 1px #bbb;
 726   margin-bottom: 1.5em;
 727 }
 728
 729 div.trail span.trailup {
 730   display: none;
 731 }
 732
 733 div.trail .trailprev, div.trail .trailnext {
 734   top: 3px;
 735 }
 736
 737 div.trail .trailprev {
 738   left: 7px;
 739 }
 740
 741 div.trail .trailnext {
 742   right: 7px;
 743 }
 744
 745 /* Links */
 746
 747 a {
 748     color: #888;
 749     text-decoration: none;
 750 }
 751
 752 #pagebody a {
 753     color: #3b833a;
 754     border-bottom: 1px solid #3b833a;
 755 }
 756
 757 #pagebody a:hover {
 758     text-decoration: none;
 759 }
 760
 761 #pagebody a:visited {
 762     color: #276426;
 763     border-color: #276426;
 764 }
 765
 766 /* test inside and outside links */
 767 #pagebody a[href^="http"] {
 768     padding-right: 13px;
 769     background: url(lib/link_out.gif) no-repeat right bottom;
 770 }
 771
 772 #pagebody a[href^="http://localhost"],
 773 #pagebody a[href^="http://tails.boum.org"],
 774 #pagebody a[href^="https://tails.boum.org"],
 775 #pagebody a[href^="http://dl.amnesia.boum.org"],
 776 #pagebody a[href^="https://dl.amnesia.boum.org"],
 777 #pagebody a.noicon,
 778 #pagebody a.use-mirror-pool {
 779     background-image: none;
 780     padding-right: 0;
 781 }
 782
 783 .quoted-from {
 784     font-style: italic;
 785 }
 786
 787 /* Support page */
 788
 789 #talk h1, #bugs h1, #wishlist h1, #tools h1 {
 790     margin-top: 18px;
 791     color:#56347c;
 792     line-height: 1.6em;
 793     border-bottom: 5px solid #56347c;
 794 }
 795
 796 #talk h1 { width: 90%; }
 797
 798 /* News */
 799
 800 div.inlinepage {
 801     margin-bottom: 18px;
 802 }
 803
 804 .inlinepage .inlineheader .header {
 805     font-size:36px;
 806     top:5px;
 807     line-height: 1.5em;
 808     display: block;
 809     margin-bottom: 0.5em;
 810 }
 811
 812 .inlinepage h1 {
 813     font-size:28px;
 814     top:8px;
 815 }
 816
 817 .inlinepage h2 {
 818     font-size:22px;
 819     top:1px;
 820 }
 821
 822 .inlinepage h3 {
 823     font-size:18px;
 824     top:2px;
 825 }
 826
 827 .inlinepage h4 {
 828     font-size:15px;
 829     top:4px;
 830 }
 831
 832 .inlinepage h5 {
 833     font-size:13px;
 834     top:5px;
 835 }
 836
 837 .inlinepage img {
 838     max-width: 100%;
 839     height: auto;
 840 }
 841
 842 /* Columns */
 843
 844 div.blocks {
 845     display: inline-block;
 846     margin: 0 5% 0 0;
 847     text-align: center;
 848     vertical-align: top;
 849 }
 850
 851 div.two-blocks {
 852     width: 44%;
 853     margin-top: 2em;
 854 }
 855
 856 div.blocks p, div.blocks ul, div.blocks h1, div.blocks div {
 857     text-align: left;
 858 }
 859
 860 div.blocks img {
 861     text-decoration: none;
 862     display: block;
 863     margin: 0 auto;
 864     max-width: 100%;
 865     height: auto
 866 }
 867
 868 /* Calls for action */
 869
 870 .cfa {
 871   width: 300px;
 872   margin: 1em auto;
 873 }
 874
 875 .cfa a {
 876   background: #53b351 !important;
 877   color: black !important;
 878   font-size: 24px;
 879   font-weight: bold;
 880   border-radius: 0.5em;
 881   padding: 1em 0.5em;
 882   display: block;
 883   text-align: center;
 884   box-shadow: 2px 2px 2px #777, 2px 2px 10px #bbb, inset 2px 2px 2px #a8ffa0;
 885   width: 100%;
 886 }
 887
 888 /* Toggleable */
 889
 890 #pagebody div.toggleable {
 891     position: relative;
 892     background: #f3edf9;
 893     border-top: solid 5px black;
 894     border-bottom: solid 5px black;
 895     padding: 15px 2em;
 896     margin: 2em 0;
 897 }
 898
 899 #pagebody div.toggleable span.hide a.toggle {
 900     display: block;
 901     height: 48px;
 902     width: 78px;
 903     position: absolute;
 904     right: 0;
 905     background: url('lib/close.png') no-repeat 15px 0px;
 906     border: none;
 907 }
 908
 909 /* Icons */
 910
 911 div.icon {
 912     margin-bottom: 1.5em;
 913     position: relative;
 914 }
 915
 916 div.icon img {
 917     display: inline-block;
 918 }
 919
 920 div.icon div.text {
 921     position: absolute;
 922     top: 0;
 923     display: inline-block;
 924     vertical-align: top;
 925     margin-left: 1em;
 926 }
 927
 928 /* Documentation styling */
 929
 930 span.application { font-style: italic; }
 931 span.button { font-weight: bold; }
 932 span.code, span.command {
 933   font-family: "Source Code Pro Regular", "Courier", monospace;
 934   font-size: 1.071em; /* 14×1.071=15px */
 935   border: 1px solid #E0E0DF;
 936   padding-left: 0.2em;
 937   padding-right: 0.2em;
 938 }
 939 span.emphasis { font-style: italic; }
 940 span.filename { font-style: italic; display: inline-block; }
 941 span.guilabel { font-weight: bold; }
 942 span.guimenu { font-weight: bold; }
 943 span.guisubmenu { font-weight: bold; }
 944 span.guimenuitem { font-weight: bold; }
 945 span.keycap { font-weight: bold; }
 946 span.menuchoice { font-weight: bold; }
 947 span.replaceable { font-style: italic; }
 948 div.bug, div.caution, div.next, div.note, div.tip, div.trophy {
 949   background-color: #FFFFF0;
 950   border: 1px solid #E0E0DF;
 951   border-radius: 4px;
 952   padding: 1.5em 6px 0em;
 953   background-position: 6px 0.5em;
 954   background-repeat: no-repeat;
 955   min-height: 48px;
 956   padding-left: 66px;
 957   margin: 1.5em 0;
 958   max-width: 45em;
 959 }
 960 div.bug {
 961   background-image: url(lib/admon-bug.png);
 962 }
 963 div.caution {
 964   background-image: url(lib/dialog-warning.png);
 965 }
 966 div.next {
 967   background-image: url(lib/go-next.png);
 968 }
 969 div.note {
 970   background-image: url(lib/admon-note.png);
 971 }
 972 div.tip {
 973   background-image: url(lib/admon-tip.png);
 974 }
 975 div.trophy {
 976   background-image: url(lib/trophy-gold.png);
 977 }
 978
 979 div.bug pre, div.caution pre, div.next pre, div.note pre, div.tip pre, div.trophy pre {
 980   max-width: 30em;
 981 }
 982
 983 div.bug > *:first-child, div.caution > *:first-child, div.next > *:first-child, div.note > *:first-child, div.tip > *:first-child, div.trophy > *:first-child {
 984   margin-top: 0;
 985 }
 986
 987 div.bug > *:last-child, div.caution > *:last-child, div.next > *:last-child, div.note > *:last-child, div.tip > *:last-child, div.trophy > *:last-child {
 988   margin-bottom: 1.5em;
 989 }
 990
 991 /* Code, preformatted text, and command lines */
 992
 993 code {
 994     line-height:18px;
 995     white-space:pre;
 996 }
 997
 998 pre, p.pre {
 999     background-color: #eee;
1000     border: thin solid #ccc;
1001     color: #444;
1002     margin: 1.5em 1em 1.5em 1.5em;
1003     padding: 0.25em 0.5em;
1004     max-width: 58em;
1005     width: 58em;
1006     max-width: 90%;
1007 }
1008
1009 p.command-example, p.command-output {
1010     white-space: pre;
1011     -webkit-user-select: none;
1012     -moz-user-select: none;
1013     -ms-user-select: none;
1014     user-select: none;
1015 }
1016
1017 span.command-placeholder {
1018     color: #ec407a;
1019     font-style: italic;
1020     font-weight: bold;
1021 }
1022
1023 /* Inlined icons */
1024
1025 img.symbolic {
1026   display: inline-block;
1027   position: relative;
1028   top: 4px;
1029 }
1030
1031 /* Contribute section */
1032
1033 div.contribute-roles-1 {
1034     display: inline-block;
1035     margin-right: 2em;
1036     width: 31%;
1037 }
1038
1039 div.contribute-roles-3 div.contribute-role {
1040     width: 29%;
1041 }
1042
1043 div.contribute-role {
1044     display: inline-block;
1045     margin-right: 2em;
1046     vertical-align: top;
1047 }
1048
1049 div.contribute-role p {
1050     font-style: italic;
1051 }
1052
1053 div.contribute-role img {
1054     display: block;
1055     margin: 0 auto 0.5em;
1056     max-width: 100%;
1057     height: auto;
1058 }
1059
1060 /* Highlight */
1061
1062 div#highlight {
1063   border: 5px solid #56347c;
1064   width: 44em;
1065   padding: 0.5em 1em;
1066   border-radius: 0.5em;
1067 }
1068 div#highlight p {
1069   margin: 0.5em 0;
1070 }
1071
1072 /* Donate buttons outside of sidebar */
1073
1074 .donate-button a {
1075   border-bottom: none;
1076   width: 100%;
1077   display: block;
1078   box-shadow: 1px 1px 5px #ccc;
1079   border-radius: 0.5em;
1080   padding: 0.5em 1em;
1081   background: #53b351 url('lib/donate.png') no-repeat scroll 10px 50% !important;
1082   font-size: 26px;
1083   padding-left: 70px;
1084   line-height: 1em;
1085   font-weight: normal;
1086   color: black !important;
1087 }
1088
1089 /* Charts */
1090
1091 .chart {
1092   display: flex !important;
1093   flex-direction: column;
1094 }
1095
1096 @media (min-width: 640px) {
1097   .chart {
1098     flex-direction: row;
1099   }
1100 }
1101
1102 .chart-content, .chart-key {
1103   flex: 1;
1104   padding-left: 15px;
1105   padding-right: 15px;
1106   align-self: center;
1107 }
1108
1109 .chart-content svg {
1110   height: auto;
1111 }
1112
1113 .chart-key-list {
1114   margin: 0;
1115   padding: 0;
1116   list-style: none;
1117 }
1118
1119 .chart-key-list li {
1120   margin: 0 0 8px;
1121   padding: 0;
1122   font-size: 14px;
1123   min-height: 3em;
1124 }
1125
1126 .chart-key-list li div {
1127   display: inline-block;
1128 }
1129
1130 .chart-key-list li p {
1131   margin: 5px 0 20px;
1132 }
1133
1134 .key-label:before {
1135   content: " ";
1136   display: inline-block;
1137   vertical-align: top;
1138   margin-top: 2px;
1139   width: 18px;
1140   height: 18px;
1141   position: relative;
1142   margin-left: -18px;
1143   left: -12px;
1144 }
1145
1146 .key-label {
1147   margin-right: 8px;
1148 }
1149
1150 .key-label, .key-percent {
1151   font-weight: bold;
1152 }
1153
1154 /* Accessible color palette */
1155
1156 .blue   .key-label:before { background-color: #5da5da; }
1157 .orange .key-label:before { background-color: #faa43a; }
1158 .green  .key-label:before { background-color: #60bd68; }
1159 .pink   .key-label:before { background-color: #f17cb0; }
1160 .brown  .key-label:before { background-color: #b2912f; }
1161 .purple .key-label:before { background-color: #b276b2; }
1162 .yellow .key-label:before { background-color: #decf3f; }
1163
1164 /* Tails color palette */
1165
1166 .purple-1 .key-label:before { background-color: #7a478b; }
1167 .purple-2 .key-label:before { background-color: #9c6bad; }
1168 .purple-3 .key-label:before { background-color: #af97c7; }
1169 .green    .key-label:before { background-color: #53b351; }
1170 .gray     .key-label:before { background-color: #dadbdc; }