wiki/src/local.css

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