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