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