debwiki/css/debian.css

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