wiki/src/local.css

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