www/common/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: 1px dotted grey; }
  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         clear: both;
 519 }
 520 #content #footer {
 521         margin-left: 0;
 522 }
 523 #footer p {
 524         margin: 1em 0 1em 0;
 525 }
 526 #footer hr {
 527         border-top: 1px solid #d2d3d7;
 528         border-bottom: 1px solid white;
 529         height: 0;
 530 }
 531 #footer .editbar li {
 532         display: inline;
 533         margin-right: 2em;
 534 }
 535 #footer .info {
 536 }
 537 #fineprint {
 538         margin-bottom: 1em;
 539 }
 540 #footermap {
 541         list-style:none;
 542         margin: 0 0 0 0;
 543         padding: 0;
 544         width:100%;
 545         overflow: hidden;
 546         border: 0;
 547 }
 548 ul#footermap-cola a
 549 , ul#footermap-colb a
 550 , ul#footermap-colc a
 551 , ul#footermap-cold a
 552 , ul#footermap-cole a {
 553         padding-left: 0;
 554 }
 555 ul#footermap-cola
 556 , ul#footermap-colb
 557 , ul#footermap-colc
 558 , ul#footermap-cold
 559 , ul#footermap-cole {
 560         float:left;
 561         width: 19%;
 562         min-width: 11em;
 563         height: 12em;           /* Update when adding items */
 564         margin:0 1% 0 0;
 565         padding: 2em 0 0 0;
 566         list-style: none;
 567 }
 568 ul#footermap-cole {
 569         width: 18.9%;
 570         margin-right:0;
 571 }
 572 #footermap-wrap {
 573         padding:2em;
 574         border-top: 1px solid white;
 575 }
 576 #footermap a {
 577         margin: 0;
 578 }
 579 #footermap ul{
 580         list-style: none;
 581         padding:0;
 582 }
 583 #footermap li {
 584         text-indent:0;
 585         background-color: transparent;
 586         font-weight:bold;
 587 }
 588 #footermap li ul {
 589         margin: 0;
 590         padding: 0;
 591 }
 592 #footermap li li {
 593         margin:0;
 594         text-indent:0;
 595         padding:0;
 596         font-weight:normal;
 597         border:0;
 598         background-image:none;
 599         background-color:transparent;
 600 }
 601 #serverselect {
 602 }
 603 #serverselect input
 604 , #serverselect option
 605 , #serverselect select {
 606 }
 607 #serverselect ul {
 608         display: inline;
 609         margin-left: 2em;
 610 }
 611 #serverselect li {
 612         list-style: none;
 613         display: inline;
 614         padding:0 1em 0 1em;
 615         margin:0;
 616 }
 617 #serverselect form p {
 618         margin:0;
 619         padding:0;
 620         line-height: 1;
 621 }
 622 .lcol50 {
 623         float: left;
 624         width: 49%;
 625         font-size:0.75em;
 626         margin:0 0 0 0;
 627         padding:0 0.5em 0 0;
 628 }
 629 .lcol50 h2 {
 630         margin-top:0;
 631 }
 632 .rcol50 {
 633         margin:0 0 0 51%;
 634         padding:0;
 635         font-size:0.75em;
 636 }
 637 #pageLang {
 638         position: relative;     /*  establish a containing box. needed for
 639                                     langContainer */
 640 }
 641 form#pageLang {
 642         display: inline;
 643 }
 644
 645 /* Extras */
 646
 647 input:focus {
 648         background-color:#FFFFCB;
 649
 650 }
 651 .hidecss {
 652         display: none;
 653 }
 654 .clear {
 655         clear:both
 656 }
 657 #clear {
 658         clear:both;
 659         border:0;
 660         height:1px;
 661         display:block;
 662 }
 663 .quicklist {
 664         list-style: none;
 665         font-size: 0.75em;
 666         margin: 2em 0 2em 0;
 667         padding:0;
 668         text-indent:0;
 669         line-height: 2em;
 670 }
 671 .quicklist li  {
 672         display:inline;
 673 }
 674 .item p{
 675         margin: 0;
 676 }
 677 .item h2
 678 , .item p
 679 , .item ul{
 680         margin-right: 10px
 681 }
 682 .item h2
 683 , .item h3
 684 , .item h4
 685 , .item h5 {
 686         margin-top: 0;
 687 }
 688 .line {
 689         padding: 0;
 690         width: auto;
 691         overflow: hidden;
 692         }
 693 div.downloads {
 694         border-top: 0.17em solid #339900;
 695         margin: 1.33em 0 0 0;
 696 }
 697 .downloads ul.downlist {
 698         margin:0;
 699 }
 700 div.downloads .col50 {
 701         border-top: 0.15em solid #339900;
 702 }
 703 ul.downlist {
 704         padding-left: 30px;
 705         text-indent:0;
 706         background: url('Pics/emblem-downloads.png') no-repeat 0 0.15em;
 707         min-height: 23px;
 708         /*
 709          * border-top: 0.17em solid #339900;
 710          */
 711 }
 712 ul.quicklist.downlist {
 713         border-top: 0.17em solid #339900;
 714         padding-top: 0.25em;
 715         margin-top: 1.6em;
 716 }
 717 ul.downlist li {
 718         display: inline;
 719 }
 720 ul.downlist li:after {
 721         content: ', ';
 722 }
 723 ul.downlist li:last-child:after {
 724         content: '';
 725 }
 726 div.tip
 727 , div.important
 728 , div.warning
 729 , div.note
 730 , div.trans-note {
 731         padding:0 2em 0 4em;
 732         margin: 1.85em 0 1.85em 0;
 733         background-repeat: no-repeat;
 734         background-position: 0.5em 0.5em;
 735         font-size: 0.75em;
 736         line-height: 2em;
 737         background-color:#FFFFCB;
 738         border:0.15em solid #CCCCA3;
 739 }
 740 div.tip p
 741 , div.important p
 742 , div.warning p
 743 , div.note p
 744 , div.trans-note p {
 745         margin: 1em 0 1em 0;
 746 }
 747 div.tip {
 748         background-image: url('Pics/admon-tip.png');
 749 }
 750 div.important{
 751         background-image: url('Pics/admon-important.png');
 752 }
 753 div.warning {
 754         background-image: url('Pics/admon-warning.png');
 755 }
 756 div.note
 757 , div.trans-note  {
 758         background-image: url('Pics/admon-note.png');
 759 }
 760
 761 /* Layout Elements */
 762
 763 .col50
 764 , .cardleft
 765 , .cardright {
 766         width:47.5%;
 767         float: left;
 768         padding-bottom: 1.5em;
 769 }
 770 .lastcol
 771 , .cardright {
 772         margin: auto;
 773         width: 47.5%;
 774         float:left;
 775         padding-right: 0;
 776         margin-left: 5%;
 777 }
 778 .lastcol h2
 779 , .lastcol p
 780 , .lastcol ul {
 781         margin-right:0;
 782 }
 783 .cardleft h2 {
 784         margin-right: 1em;
 785 }
 786 .cardright div {
 787         margin-left: 1.5em;
 788 }
 789 .cardright h2 {
 790         margin-left: 1em;
 791 }
 792 .votemenu a {
 793         display:block;
 794 }
 795 table.vote td, table.vote th {
 796         padding-right: 1.5em;
 797 }
 798 #maincol.with-toolbox {
 799         margin-right: 14em;
 800 }
 801 div.tabular table, table.tabular, table.vendors {
 802 /*      border-bottom: 1px solid #a9abb3;
 803         border-top: 1px solid #a9abb3; */
 804         border-bottom: 0.15em solid #666;
 805         border-top: 0.15em solid #666;
 806         width: auto;
 807         font-size: 0.75em;
 808         line-height: 2em;
 809         margin-bottom: 4em;
 810         margin-top: -0.169em;
 811 }
 812 table td {
 813         padding-right: 1.5em;
 814 }
 815 div.tabular table tr, table.tabular tr, table.vendors tr {
 816         width: 100%;
 817 }
 818 table th {
 819         padding-right: 1.5em;
 820 }
 821 div.tabular table td, table.tabular td, table.vendors td {
 822         background-image: url(Pics/greydot.png);
 823         background-position: top left;
 824         background-repeat: repeat-x;
 825 }
 826 div.tabular table > td:fist-child, table.tabular  > td:fist-child, table.vendors  > td:fist-child {
 827         background-image: none;
 828 }
 829 #pageLang p, #pageLang form {
 830         display: inline;
 831 }
 832 .inline  a {
 833         float: left;
 834         margin-right: 1em;
 835 }
 836 #langSelector {
 837         color: #0035c7;
 838         text-decoration: underline;
 839 }
 840 #langSelector:hover {
 841         cursor: pointer;
 842         text-decoration: none;
 843 }
 844 #langContainer {
 845         #background-color: #f5f6f7;
 846         background-color: white;
 847         background-image:url('Pics/gradient-flipped.png');
 848         background-position: bottom;
 849         background-repeat: repeat-x;
 850         display: none;
 851         position: absolute;
 852         left: -1em;
 853         border-bottom: 1px solid #dfdfe0;
 854         margin-right: -1em;
 855         min-width: 100%;        /* make it reach the right edge if only a few
 856                                    languages are available */
 857         padding: 0.5em 1em 1em 1em;
 858 }
 859 #langContainer a {
 860         margin-right: 1em;
 861 }
 862 #pageLang:hover #langContainer {
 863     display: block;
 864 }
 865
 866 /* for l10n-arabic */
 867 .bidi {
 868         direction: rtl;
 869         text-align: right;
 870 }
 871