debwiki/css/debian.css

   1 /*
   2         http://www.debian.org Stylesheet
   3
   4         Copyright 2011 Kalle Söderman
   5
   6         This stylesheet is free software; you can redistribute it and/or modify it
   7         under the terms of the GNU General Public License, version 2, as published by
   8         the Free Software Foundation.
   9
  10         This program is distributed in the hope that it will be useful, but WITHOUT ANY
  11         WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
  12         PARTICULAR PURPOSE. See the GNU General Public License for more details.
  13
  14         You should have received a copy of the GNU General Public License along with
  15         this program; if not, write to the Free Software Foundation, Inc., 51 Franklin
  16         Street, Fifth Floor, Boston, MA 02110-1301 USA.
  17
  18         The license text can also be found at http://www.gnu.org/copyleft/gpl.html and
  19         /usr/share/common-licenses/GPL-2 on Debian GNU/Linux.
  20 */
  21
  22 /*
  23         Font size table (Browser default 16px)
  24
  25         pixels      relative
  26         --------------------
  27         36px        2.25em
  28         31px        0.5161em
  29         24px        1.5em
  30         21px        1.3125em
  31         18px        1.125em
  32         16px        1em
  33         14px        0.875em
  34         12px        0.75em
  35         11px        0.6875em
  36         10px        0.625em
  37         9px         0.5625em
  38         --------------------
  39 */
  40
  41 /* Reset */
  42
  43 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
  44 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
  45 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
  46 dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
  47 tfoot, thead, tr, th, td {
  48         margin: 0;
  49         padding: 0;
  50         border: 0;
  51         outline: 0;
  52         font-weight: inherit;
  53         font-style: inherit;
  54         font-size: 100%;
  55         font-family: inherit;
  56         vertical-align: baseline;
  57 }
  58
  59 body            { line-height: 1; color: black; background: white; }
  60 ol, ul          { list-style: none; }
  61 table           { border-collapse: separate; border-spacing: 0; }
  62 blockquote, q   { quotes: "" ""; }
  63 html            { background-color: transparent; }
  64 :focus          { outline: 0; }
  65 caption, th, td { text-align: left; font-weight: normal; }
  66 blockquote:before, blockquote:after, q:before, q:after { content: ""; }
  67
  68 /* Main */
  69
  70 body {
  71         margin: 0;
  72         font: normal 100% sans-serif;
  73         line-height: 1.5;
  74         color: #222;
  75         background-color: white;
  76         background-image:url('Pics/gradient.png');
  77         background-position: 0 0;
  78         background-repeat: repeat-x;
  79         /* Uncomment to show baseline grid
  80         background-image: url('24grid.png');
  81         background-position: 30px 9px;
  82         */
  83 }
  84 #content {
  85         margin: 0 10px 0 52px;
  86 }
  87 #inner {
  88         position: relative;
  89 }
  90 #maincol {
  91         margin: 0 15em 1.5em 0;
  92 }
  93
  94 /* Header */
  95
  96 #header {
  97         margin:0;
  98         padding:0 10px 0 52px;
  99 }
 100 #header a:link
 101 , #header a:visited
 102 , #second-nav a:link
 103 , #second-nav a:visited {
 104         text-decoration: none;
 105 }
 106 #header a:hover
 107 , #second-nav a:hover {
 108         text-decoration: underline;
 109 }
 110 #breadcrumbs {
 111         margin:0;
 112         font-size: 0.75em;
 113         text-transform: lowercase;
 114         line-height: 2;
 115         background-color: transparent;
 116         background-color: #f5f6f7;
 117         border-bottom: 1px solid #d2d3d7 ;
 118         min-height: 20px;
 119 }
 120 #breadcrumbs:before {
 121         content: "/";
 122         margin-left: 0.5em;
 123         margin-right: 0.5em;
 124 }
 125 p.section {
 126         margin: 0;
 127         padding: 0 5px 0 5px;
 128         font-family:monospace;
 129         line-height: 16px;
 130         color:white;
 131         text-transform: uppercase;
 132         letter-spacing: 0.08em;
 133         position:absolute;
 134         top: 0px;
 135         left:52px;
 136         background-color: #c70036;
 137 }
 138 p.section a {
 139         color: white;
 140         text-decoration: none;
 141 }
 142 p.section a:hover {
 143         color:white;
 144         text-decoration: underline;
 145 }
 146 #navbar {
 147         background-color: transparent;
 148         list-style:none;
 149         display:block;
 150         border-bottom:1px solid #c70036;
 151         text-indent:0;
 152         padding: 0;
 153         margin-top:0;
 154         margin-bottom:0;
 155 }
 156 #navbar ul {
 157         margin: 0;
 158         padding: 0;
 159         clear: both;
 160         overflow: hidden;
 161         min-height: 45px;
 162 }
 163 #navbar li {
 164         list-style: none;
 165         float: left;
 166         padding: 0;
 167         margin: 0;
 168 }
 169 #navbar a:link
 170 , #navbar a:visited {
 171         padding: 1.75em 0.5em 0.25em 0.5em;
 172         border-left: 1px solid transparent;
 173         border-right: 1px solid transparent;
 174         display: block;
 175         text-decoration: none;
 176 }
 177 #navbar a:visited {
 178         color: #54638c;
 179 }
 180 #navbar a:hover
 181 , #navbar a:visited:hover {
 182         background-color: #f5f6f7;
 183         border-left: 1px solid  #d2d3d7;
 184         border-right: 1px solid #d2d3d7;
 185         text-decoration: underline;
 186 }
 187 ul.subnav {
 188         list-style: none;
 189         margin-left: 0;
 190         padding-left: 0;
 191         margin-top: 0;
 192 }
 193 ul.subnav li {
 194         display: inline;
 195         margin-right: 1em;
 196 }
 197 #searchbox {
 198         text-align:left;
 199         line-height: 1;
 200         margin: 0 10px 0 0.5em;
 201         padding: 1px 0 1px 0;
 202         position: absolute;
 203         top:0;
 204         right:0;
 205         font-size: 0.75em;
 206 }
 207 #searchbox p {
 208         margin: 0;
 209         padding: 0;
 210 }
 211 #upperheader {
 212         margin:0;
 213         padding:0;
 214 }
 215 #logo {
 216         position:absolute;
 217         top:0;
 218         left:0;
 219         padding: 0;
 220         background-color: transparent;
 221         border: 1px solid transparent;
 222         border-top: 0;
 223         width: 50px;
 224         height: 5.07em;
 225         min-height: 65px;
 226 }
 227 #logo a {
 228         display: block;
 229         position: relative;
 230         padding: 0;
 231         height: 100%;
 232         min-height: 65px;
 233 }
 234 #logo img {
 235         margin-top: 5px;
 236         position: absolute;
 237         bottom: 0.3em;
 238         overflow: auto;
 239 }
 240 #logo:hover {
 241         border: 1px solid #d2d3d7 ;
 242         border-top: 0;
 243         background-color: #f5f6f7;
 244 }
 245
 246 /* Links */
 247
 248 a:link {
 249         color: #0035c7;
 250         text-decoration: underline;
 251 }
 252 a:visited {
 253         color: #54638c;
 254 }
 255 a:link:hover {
 256         text-decoration: none;
 257         color: #00207a;
 258 }
 259 a:visited:hover {
 260         text-decoration: none;
 261 }
 262 a:active {
 263         color:#c2c3c7;
 264 }
 265 a img {
 266         border:0;
 267 }
 268 a.rss_logo {
 269         font-size: 0.75em;
 270         float: right;
 271         width: 35px;
 272         line-height: 10px;
 273         color: #ffffff;
 274         background-color: #ff6600;
 275         font-weight: bold;
 276         font-family: sans-serif;
 277         text-align: center;
 278         text-decoration: none;
 279         padding: 0.25em;
 280         margin-left: 0.25em;
 281         border: 1px solid #ff6600;
 282 }
 283
 284 a.rss_logo:hover {
 285         background-color: white;
 286         border: 1px solid #ff6600;
 287         color: #ff6600;
 288 }
 289
 290 a.rss_logo.generic {
 291         background-color: #ff8800;
 292 }
 293
 294 a.rss_logo.generic:hover {
 295         background-color: #ee7700;
 296 }
 297
 298
 299 /* Secondnav */
 300
 301 #second-nav {
 302         width: 16em;
 303         font-size: 0.75em;
 304         line-height: 1.5;
 305         float: right;
 306         top: 0;
 307         right: 0;
 308         margin: 3em 0 0 0;
 309         padding: 0 0 0 1em;
 310         border-left: 1px solid #d2d3d7 ;
 311 }
 312 #second-nav ul {
 313         padding:0;
 314         margin:0;
 315         list-style:none;
 316 }
 317 #second-nav ul ul {
 318         margin-left: 1em;
 319 }
 320 #second-nav li {
 321         font-weight: normal;
 322         margin:0;
 323         padding:0;
 324 }
 325 #second-nav p {
 326         line-height: 2;
 327         font-weight: bold;
 328         margin: 0;
 329 }
 330 #second-nav h2 {
 331         margin:0;
 332 }
 333
 334 /* Typography */
 335
 336 p {
 337         margin: 1.5em 0 1.5em 0;
 338 }
 339 strong {
 340         font-weight: bold;
 341 }
 342 em {
 343         font-style: italic;
 344         color: #444;
 345 }
 346 small {
 347         font-size: 0.75em;
 348 }
 349 sup {
 350         font-size: 0.75em;
 351         vertical-align:top;
 352 }
 353 h1
 354 , h2
 355 , h3
 356 , h4
 357 , h5
 358 , h6 {
 359         font-weight: 600;
 360         color: black;
 361 }
 362 h1 {
 363         font-weight: normal;
 364         font-size: 1.8em;
 365         line-height: 0.83333;
 366         margin: 0.83333em 0 0.83333em 0;
 367 }
 368 h2 {
 369         font-size: 1.4em;
 370         font-weight: normal;
 371         line-height: 1.0714286;
 372         margin: 1.0714286em 0 1.0714286em 0;
 373 }
 374 h3 {
 375         font-size: 1.125em;
 376         line-height: 1.333em;
 377         margin: 1.333em 0 0 0;
 378 }
 379 h4 {
 380         font-weight: normal;
 381         font-style: italic;
 382         margin: 1.5em 0 1.5em 0;
 383         color: #444;
 384 }
 385 h5 {
 386         font-style: italic;
 387         font-size: 0.75em;
 388         margin: 2em 0 2em 0;
 389 }
 390 ol,ul {
 391         padding-left: 1.5em;
 392         margin-left:0;
 393         margin: 1.5em 0 1.5em 0;
 394 }
 395 ol>ol, ul>ul, li>ol, li>ul {
 396         margin: 0;
 397 }
 398
 399 ol {
 400         list-style-type: decimal;
 401 }
 402 ul {
 403         list-style-type: disc;
 404 }
 405 th {
 406         font-weight: bold;
 407         margin: 1.5em 0 1.5em 0;
 408 }
 409 hr {
 410         border: none;
 411         background-color: #bbb;
 412         height: 1px;
 413         margin: 1.4375em 0 1.5em 0;
 414 }
 415 pre {
 416         margin: 1.5em 0 1.5em 0;
 417         overflow: auto;
 418         font-family: monospace;
 419         white-space: pre;
 420         color: black;
 421 }
 422 tt, code {
 423         font-family: monospace;
 424         white-space: pre;
 425         color: black;
 426 }
 427 dt {
 428         margin: 1.5em 0 0 0;
 429         font-weight: bold;
 430 }
 431 dd {
 432         margin:  0 0 0 1.5em;
 433 }
 434 blockquote {
 435         font-size: 0.75em;
 436         margin: 2em;
 437         line-height: 2;
 438 }
 439 cite {
 440         font-style: italic;
 441         color: #444;
 442 }
 443 acronym, abbr {
 444         text-transform: uppercase;
 445         font-size: 0.9em;
 446 }
 447 .toc {
 448         font-size: 0.75em;
 449         list-style:none;
 450         background-image: url('Pics/greydot.png');
 451         background-position: bottom left;
 452         background-repeat: repeat-x;
 453         line-height:1.833;
 454         padding: 0;
 455         max-width: 62%;
 456         margin: 2em 0 2em 0;
 457 }
 458 .toc li {
 459         background-image: url('Pics/greydot.png');
 460         background-position: top left;
 461         background-repeat: repeat-x;
 462         padding: 0.0833em 0 0.0833em 0;
 463  }
 464 .toc a {
 465         display:block;
 466         text-decoration: none;
 467 }
 468 .toc a:hover {
 469         display:block;
 470         background-color: #f0f0f4;
 471         text-decoration: underline;
 472 }
 473 .toc dt {
 474         margin: 0;
 475         background-image: url('Pics/greydot.png');
 476         background-position: top left;
 477         background-repeat: repeat-x;
 478         padding: 0.0833em 0 0.0833em 0;
 479 }
 480
 481 /* Sitemap */
 482
 483 .card {
 484         clear:both;
 485         margin:1.5em 0 1.5em 0;
 486         background-position: 0 -50px;
 487         background-repeat: repeat-x;
 488         padding:0;
 489 }
 490 .card ul {
 491 }
 492 .card ul li {
 493         list-style:none;
 494 }
 495 .card h2 {
 496 }
 497 .lefthalf {
 498         float:left;
 499 }
 500 .righthalf {
 501         margin-left:50%;
 502 }
 503 .lefthalf ul {
 504         margin-top:0;
 505 }
 506
 507 /* Footer */
 508
 509 #footer {
 510         font-size: 0.75em;
 511         border: 1px solid #dfdfe0;
 512         padding:1em;
 513         background-color: #f5f6f7;
 514         margin: 0 10px 0 52px;
 515         line-height: 1.5em;
 516         border-left: 0;
 517         border-right: 0;
 518 }
 519 #content #footer {
 520         margin-left: 0;
 521 }
 522 #footer p {
 523         margin: 1em 0 1em 0;
 524 }
 525 #footer hr {
 526         border-top: 1px solid #d2d3d7;
 527         border-bottom: 1px solid white;
 528         height: 0;
 529 }
 530 #footer .editbar li {
 531         display: inline;
 532         margin-right: 2em;
 533 }
 534 #footer .info {
 535 }
 536 #fineprint {
 537         margin-bottom: 1em;
 538 }
 539 #footermap {
 540         list-style:none;
 541         margin: 0 0 0 0;
 542         padding: 0;
 543         width:100%;
 544         overflow: hidden;
 545         border: 0;
 546 }
 547 ul#footermap-cola a
 548 , ul#footermap-colb a
 549 , ul#footermap-colc a
 550 , ul#footermap-cold a
 551 , ul#footermap-cole a {
 552         padding-left: 0;
 553 }
 554 ul#footermap-cola
 555 , ul#footermap-colb
 556 , ul#footermap-colc
 557 , ul#footermap-cold
 558 , ul#footermap-cole {
 559         float:left;
 560         width: 19%;
 561         min-width: 11em;
 562         height: 12em;           /* Update when adding items */
 563         margin:0 1% 0 0;
 564         padding: 2em 0 0 0;
 565         list-style: none;
 566 }
 567 ul#footermap-cole {
 568         width: 18.9%;
 569         margin-right:0;
 570 }
 571 #footermap-wrap {
 572         padding:2em;
 573         border-top: 1px solid white;
 574 }
 575 #footermap a {
 576         margin: 0;
 577 }
 578 #footermap ul{
 579         list-style: none;
 580         padding:0;
 581 }
 582 #footermap li {
 583         text-indent:0;
 584         background-color: transparent;
 585         font-weight:bold;
 586 }
 587 #footermap li ul {
 588         margin: 0;
 589         padding: 0;
 590 }
 591 #footermap li li {
 592         margin:0;
 593         text-indent:0;
 594         padding:0;
 595         font-weight:normal;
 596         border:0;
 597         background-image:none;
 598         background-color:transparent;
 599 }
 600 #serverselect {
 601 }
 602 #serverselect input
 603 , #serverselect option
 604 , #serverselect select {
 605 }
 606 #serverselect ul {
 607         display: inline;
 608         margin-left: 2em;
 609 }
 610 #serverselect li {
 611         list-style: none;
 612         display: inline;
 613         padding:0 1em 0 1em;
 614         margin:0;
 615 }
 616 #serverselect form p {
 617         margin:0;
 618         padding:0;
 619         line-height: 1;
 620 }
 621 .lcol50 {
 622         float: left;
 623         width: 49%;
 624         font-size:0.75em;
 625         margin:0 0 0 0;
 626         padding:0 0.5em 0 0;
 627 }
 628 .lcol50 h2 {
 629         margin-top:0;
 630 }
 631 .rcol50 {
 632         margin:0 0 0 51%;
 633         padding:0;
 634         font-size:0.75em;
 635 }
 636 form#pageLang {
 637         display: inline;
 638 }
 639
 640 /* Extras */
 641
 642 input:focus {
 643         background-color:#FFFFCB;
 644
 645 }
 646 .hidecss {
 647         display: none;
 648 }
 649 .clear {
 650         clear:both
 651 }
 652 #clear {
 653         clear:both;
 654         border:0;
 655         height:1px;
 656         display:block;
 657 }
 658 .quicklist:before {
 659         content: "Quick Links: ";
 660         font-weight: bold;
 661 }
 662 .quicklist {
 663         list-style: none;
 664         font-size: 0.75em;
 665         margin: 2em 0 2em 0;
 666         padding:0;
 667         text-indent:0;
 668         line-height: 2em;
 669 }
 670 .quicklist li  {
 671         display:inline;
 672 }
 673 .item p{
 674         margin: 0;
 675 }
 676 .item h2
 677 , .item p
 678 , .item ul{
 679         margin-right: 10px
 680 }
 681 .item h2
 682 , .item h3
 683 , .item h4
 684 , .item h5 {
 685         margin-top: 0;
 686 }
 687 .line {
 688         padding: 0;
 689         width: auto;
 690         overflow: hidden;
 691         }
 692 div.downloads {
 693         border-top: 0.17em solid #339900;
 694         margin: 1.33em 0 0 0;
 695 }
 696 .downloads ul.downlist {
 697         margin:0;
 698 }
 699 div.downloads .col50 {
 700         border-top: 0.15em solid #339900;
 701 }
 702 ul.downlist {
 703         padding-left: 30px;
 704         text-indent:0;
 705         background: url('Pics/emblem-downloads.png') no-repeat 0 0.15em;
 706         /*
 707          * border-top: 0.17em solid #339900;
 708          */
 709 }
 710 ul.quicklist.downlist {
 711         border-top: 0.15em solid #339900;
 712         padding-top: 0.25em;
 713         margin-top: 1.6em;
 714 }
 715 ul.downlist li {
 716         display: inline;
 717 }
 718 ul.downlist li:after {
 719         content: ', ';
 720 }
 721 ul.downlist li:last-child:after {
 722         content: '';
 723 }
 724 div.tip
 725 , div.important
 726 , div.warning
 727 , div.note {
 728         padding:0 2em 0 4em;
 729         margin: 1.85em 0 1.85em 0;
 730         background-repeat: no-repeat;
 731         background-position: 0.5em 1em;
 732         font-size: 0.75em;
 733         line-height: 2em;
 734         background-color:#FFFFCB;
 735         border:0.15em solid #CCCCA3;
 736 }
 737 div.tip p
 738 , div.important p
 739 , div.warning p
 740 , div.note p {
 741         margin: 1em 0 1em 0;
 742 }
 743 div.tip {
 744         background-image: url('Pics/admon-tip.png');
 745 }
 746 div.important{
 747         background-image: url('Pics/admon-important.png');
 748 }
 749 div.warning {
 750         background-image: url('Pics/admon-warning.png');
 751 }
 752 div.note {
 753         background-image: url('Pics/admon-note.png');
 754 }
 755
 756 /* Layout Elements */
 757
 758 .col50
 759 , .cardleft
 760 , .cardright {
 761         width:47.5%;
 762         float: left;
 763         padding-bottom: 1.5em;
 764 }
 765 .lastcol
 766 , .cardright {
 767         margin: auto;
 768         width: 47.5%;
 769         float:left;
 770         padding-right: 0;
 771         margin-left: 5%;
 772 }
 773 .lastcol h2
 774 , .lastcol p
 775 , .lastcol ul {
 776         margin-right:0;
 777 }
 778 .cardleft h2 {
 779         margin-right: 1em;
 780 }
 781 .cardright div {
 782         margin-left: 1.5em;
 783 }
 784 .cardright h2 {
 785         margin-left: 1em;
 786 }
 787 .votemenu a {
 788         display:block;
 789 }
 790 table.vote td, table.vote th {
 791         padding-right: 1.5em;
 792 }
 793 #maincol.with-toolbox {
 794         margin-right: 14em;
 795 }
 796 div.tabular table, table.tabular, table.vendors {
 797 /*      border-bottom: 1px solid #a9abb3;
 798         border-top: 1px solid #a9abb3; */
 799         border-bottom: 0.15em solid #666;
 800         border-top: 0.15em solid #666;
 801         width: auto;
 802         font-size: 0.75em;
 803         line-height: 2em;
 804         margin-bottom: 4em;
 805         margin-top: -0.169em;
 806 }
 807 table td {
 808         padding-right: 1.5em;
 809 }
 810 div.tabular table tr, table.tabular tr, table.vendors tr {
 811         width: 100%;
 812 }
 813 table th {
 814         padding-right: 1.5em;
 815 }
 816 div.tabular table td, table.tabular td, table.vendors td {
 817         background-image: url(Pics/greydot.png);
 818         background-position: top left;
 819         background-repeat: repeat-x;
 820 }
 821 div.tabular table > td:fist-child, table.tabular  > td:fist-child, table.vendors  > td:fist-child {
 822         background-image: none;
 823 }
 824 #pageLang p, #pageLang form {
 825         display: inline;
 826 }
 827 .inline  a {
 828         float: left;
 829         margin-right: 1em;
 830 }