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