static/debian.css

   1 /* css file for debian web site - Jutta Wrage 2004 */
   2
   3 /* all pages have a header, outer inner and footer
   4 leftcol and maincol can be omitted, there will be other boxes
   5 to replace later (eg. two content columns)
   6 normal page:
   7 <div id="header">
   8   <div id="upperheader">
   9      <div id="logo">
  10      </div> <!-- end logo -->
  11      <div id="serverselect">
  12      </div> <!-- end serverselect -->
  13   </div> <!-- end upperheader -->
  14   <div id="navbar">
  15   </div> <!-- end navbar -->
  16 </div> <!-- end header -->
  17 <div id="outer">
  18   <div id="inner">
  19     <div id="leftcol">
  20       Leftcol is for menus - if omitted, maincol can be omitted, too
  21     </div> <!-- end leftcol -->
  22     <div id="maincol">
  23       Maincol with margin left is for the content
  24       But content may go directly to inner
  25     </div> <!-- end maincol -->
  26   </div> <!-- end inner -->
  27   <div id="footer">
  28     <hr class="hidecss"> This line is a divider for lynx
  29   </div> <!-- end footer -->
  30 </div> <!-- end outer -->
  31 color logo #C60036
  32 cd-pages: bgcolor="#e09e86" - navbar
  33 */
  34
  35 /* { border: 1px solid yellow; } */
  36 html, body {
  37         color: #000000;
  38         background-color: #FFFFFF;
  39         margin: 0 4px 0 4px;
  40         padding: 0;
  41         text-align: left;
  42         /* min-width: 440px - commented out due to mozilla problems*/
  43 }
  44 /* direction directive reverses the navbar, too */
  45 /* html[lang|=ar] {
  46       direction: rtl !important;
  47       text-align: right !important;
  48 } */
  49
  50 img { border: 0; }
  51
  52 h1 { text-align: center; }
  53
  54 acronym {
  55         border-bottom: 1px dotted #000000;
  56 }
  57
  58 hr.hidecss {
  59         border: 0;
  60 }
  61
  62 hr {
  63         border-bottom: 0;
  64         border-top: 1px solid #BFC3DC;
  65 }
  66
  67 samp {
  68         display: block;
  69         margin-left: 2em;
  70 }
  71 div.sampleblock {
  72         width: 80%;
  73         margin: auto;
  74         font-family:courier, serif;
  75         font-size: 90%;
  76 }
  77 div.quoteblock {
  78         width: 75%;
  79         margin: auto;
  80         font-size: 90%;
  81         text-align: justify;
  82 }
  83
  84 .quoteblock div.preimg {
  85         float: left;
  86         margin-top: 0.2em;
  87 }
  88 .quoteblock cite {
  89         display: block;
  90         text-align: right;
  91 }
  92 blockquote.question {
  93         font-style: italic;
  94 }
  95 blockquote.question p span {
  96         font-style: normal;
  97         width: 10%;
  98 }
  99 #pagewidth {
 100         width: 100%;
 101         text-align: left;
 102 }
 103
 104 /* now the header*/
 105 #header {
 106         margin-left: -3px;
 107         width: 100%;
 108         height: auto;
 109 }
 110
 111 /* upper nested header box*/
 112 #upperheader {
 113         width: 100%;
 114         margin-top: 11px;
 115         height: auto;
 116         /* height: 4.8em; */
 117         background: #FFFFFF;
 118 }
 119
 120 #logo {
 121         float: left;
 122         margin-left: 6px;
 123         background: #FFFFFF;
 124 }
 125
 126 #serverselect {
 127         float: right;
 128         display: block;
 129         padding-top: 1px;
 130         margin-right: 6px;
 131         margin-left: auto;
 132         text-align: right;
 133         top: 0;
 134         right: 0;
 135 }
 136
 137 #serverselect:lang(de) {
 138         width: 15em;
 139 }
 140 #serverselect:lang(en) {
 141         width: 13em;
 142 }
 143
 144 #serverselect p {
 145         color: #990000;
 146         font-size: 0.8em;
 147         font-weight: normal;
 148 }
 149
 150 #serverselect p select {
 151         font-size: 88%;
 152 }
 153
 154 #serverselect p input {
 155         font-size: 88%;
 156 }
 157 .centerlogo {
 158         margin-left: 260px;
 159         margin-right: auto;
 160         width: 125px;
 161         text-align: center;
 162         vertical-align: bottom;
 163 }
 164 #cdlogo {
 165 }
 166
 167 #hpacketsearch {
 168         display: block;
 169         padding-top: 1px;
 170         padding-left: 5px;
 171         margin-right: 0.2em;
 172         margin-left: auto;
 173         text-align: left;
 174         width: 25em;
 175         top: 0em;
 176         right: 0em;
 177 }
 178
 179 #hpacketsearch p small {
 180         color: #990000;
 181         font-size: 0.8em;
 182         font-weight: normal;
 183 }
 184
 185 #hpacketsearch p select {
 186         font-size: 88%;
 187 }
 188
 189 #hpacketsearch p input {
 190         font-size: 88%;
 191 }
 192
 193 #navbar {
 194         /* margin-top: 1em; */
 195         clear: both;
 196         padding-left: 0px;
 197         /* margin-top: 5px; */
 198         padding-top: 6px;
 199         padding-bottom: 4px;
 200         width: 100%;
 201         height: auto;
 202         text-align: center;
 203         background: #DF0451;
 204 }
 205 #navbar ul {
 206         display: inline;
 207         list-style-type: none;
 208         padding-left:  0px;
 209         line-height: 1.5em;
 210 }
 211 #navbar ul li {
 212         display: inline;
 213         margin: 0;
 214         white-space: nowrap;
 215 }
 216 #navbar a {
 217         color: #FFFFFF;
 218         text-decoration: none;
 219         padding: 0.2em 0.4em 0.2em 0.4em;
 220         background-color: #000084;
 221         border: 1px solid #000084;
 222         font-family: Arial, Helvetica, sans-serif;
 223         font-weight: bold;
 224         font-size: 0.9em;
 225 }
 226 #navbar a:hover {
 227         background: #0000CC;
 228 }
 229 #navbar .hidecss, .hidecss {
 230         display: none;
 231 }
 232
 233 /* the rest of page out of two nested boxes around */
 234
 235 #outer {
 236         background-color: #FFFFFF;
 237         width: auto;
 238         /* border:solid white 2px; */
 239 }
 240
 241 #inner {
 242         margin: -2px;
 243         margin-top: 0;
 244         width: 100%;
 245         background: #FFFFFF;
 246         /* overflow: auto; */
 247 }
 248
 249 #leftcol {
 250         float: left;
 251         margin: 0em 0.4em 0 0;
 252         padding-left: 0;
 253         padding-bottom: 1em;
 254         width: auto;
 255         background: #BBDDFF;
 256         font-size: 0.9em;
 257         font-family: Arial, Helvetica, sans-serif;
 258         border: 1px solid #BBDDFF;
 259         /* overflow: auto; */
 260 }
 261 #leftcol a:link, #leftcol a:visited {
 262         display: block;
 263 }
 264 #leftcol a:hover {
 265         background-color: #DDEEFF;
 266         /* background-color: #FFFFFF; */
 267 }
 268 #leftcol ul {
 269         margin: 2px;
 270         padding: 0;
 271         list-style-type: none;
 272         font-weight: bold;
 273 }
 274 #leftcol ul.votemenu {
 275         width: 11em;
 276 }
 277 #leftcol ul.cdmenu {
 278         width: 12em;
 279 }
 280 #leftcol ul.votemenu ul li, #leftcol ul.cdmenu ul li {
 281         padding-bottom: 0.4em;
 282 }
 283 #leftcol li ul {
 284         display: inline;
 285 }
 286 #leftcol ul li {
 287         padding: 0.2em 0;
 288 }
 289 #leftcol ul ul {
 290         font-size: 0.9em;
 291         margin: 0;
 292 }
 293 #leftcol ul li a {
 294         line-height: 1.2em;
 295         padding-right: 0.5em;
 296         /* padding: 0.2em 0 0.3em 0em; */
 297 }
 298 #leftcol ul ul li a {
 299         font-weight: normal;
 300         padding: 0.1em 0.5em;
 301         line-height: 1.1em;
 302 }
 303 #leftcol ul ul li {
 304         padding-top: 0;
 305 }
 306 #leftcol p {
 307         margin-left: 2px;
 308         margin-right: 2px;
 309 }
 310 #leftcol p a {
 311         display: block;
 312         margin: 0;
 313 }
 314 #leftcol p img {
 315         margin-left: 1em;
 316 }
 317
 318 #maincol {
 319         background: #FFFFFF;
 320         margin-left: 12em;
 321         margin-right: 0.5em;
 322         margin-bottom: 1em;
 323 }
 324
 325 #maincol:lang(en), #maincol:lang(cz), #maincol:lang(ko),
 326         #maincol:lang(no), #maincol:lang(sk), #maincol:lang(tr),
 327         #maincol:lang(zh-CN), #maincol:lang(zh-HK), #maincol:lang(zh-TW) {
 328         margin-left: 10em;
 329 }
 330
 331 #lefthalfcol {
 332         float: left;
 333         margin-left: 0em;
 334         width: 49%;
 335 }
 336
 337 #lefthalfcol dl {
 338         margin-top: 0em;
 339 }
 340
 341 #righthalfcol {
 342         margin-left: 50%;
 343         width: 50%;
 344 }
 345
 346 #righthalfcol dl {
 347         margin-right: 0.2em;
 348 }
 349
 350 #footer {
 351         clear: both;
 352         width: 100%;
 353         padding-top: 3px;
 354         bottom: 0;
 355         text-align: center;
 356         margin: 0px;
 357 }
 358
 359 #fineprint {
 360         margin-top: 0.2em;
 361         padding-top: 3px;
 362         text-align: center;
 363         font-size: 0.85em;
 364 }
 365
 366 #outer>#inner { border-bottom: 1px solid #BFC3DC; }
 367 .bordertop { border-top: 1px solid #BFC3DC; }
 368
 369 dl.gloss dt {
 370         font-weight: bold;
 371 }
 372
 373 #footer ul {
 374         display: inline;
 375         list-style-type: none;
 376 }
 377
 378 #footer ul li {
 379         display: inline;
 380 }
 381
 382 #footer ul li a, table.y2k td {
 383         white-space: nowrap;
 384 }
 385
 386 #footer p {
 387         margin: 0px;
 388 }
 389
 390 #main {
 391         background: #bbddff;
 392         padding: 1em 0; /* have some padding to get rid of collapsed margins */
 393 }
 394
 395 /* classes for cards */
 396
 397 .cardleft {
 398         margin: 0 0 1em;
 399         float: left;
 400         width: 49%;
 401 }
 402 .cardright {
 403         margin-left: 50%
 404         /*margin: 0 1% 2em 50%; */
 405 }
 406 .card {
 407         clear: left;
 408         margin: 0 0 1em;
 409 }
 410
 411 .cardleft h2, .cardright h2, .card h2 {
 412         font-size: 120%;
 413         background: #000000;
 414         color: #FFD400;
 415         display: inline;
 416         padding: 0.2em 0.4em;
 417         margin: 0 10px;
 418         font-family: Arial, Helvetica, sans-serif;
 419         letter-spacing: 0.2em;
 420 }
 421
 422 .cardleft dl dd, .cardright dl dd , .card dl dd {
 423         padding-bottom: 0.5em;
 424 }
 425
 426 .cardleft div, .cardright div, .card div {
 427         border: 2px solid #000000;
 428         background: #FFFFFF;
 429         padding: 0.5em;
 430         margin: 2px 10px;
 431         /* the next two lines xpand the div to heigth of left inner div */
 432         overflow: auto;
 433 }
 434
 435 div.lefthalf {
 436         float: left;
 437         width: 49%;
 438         border: 0;
 439         margin: 0;
 440         padding: 0;
 441 }
 442
 443 div.righthalf {
 444         border: 0;
 445         margin: 0;
 446         padding: 0;
 447 }
 448 /* classes and div names for package pages */
 449
 450 #pdesc, #pdeps, #pdownload, #pmoreinfo {
 451         margin-left: 1em;
 452         margin-right: 1em;
 453 }
 454
 455 #pdesc p {
 456         text-align: justify;
 457 }
 458
 459 .pdescshort {
 460         text-align: left;
 461         font-size: large;
 462         font-weight: bold;
 463 }
 464
 465 #pdeps table tr td {
 466         font-size: 0.9em;
 467 }
 468
 469 #pdeps ul {
 470         list-style-type: none;
 471         padding-left: 2em;
 472 }
 473
 474 #pdeps li {
 475         text-indent: -2em;
 476 }
 477
 478 #pdeps ul.uldep, #pdeps ul.uladep {
 479         list-style-type: disc;
 480         list-style-image: url(http://packages.debian.org/Pics/dep.gif);
 481 }
 482
 483 #pdeps ul.ulrec, #pdeps ul.ulidep {
 484         list-style-type: disc;
 485         list-style-image: url(http://packages.debian.org/Pics/rec.gif);
 486 }
 487
 488 #pdeps ul.ulsug {
 489         list-style-type: disc;
 490         list-style-image: url(http://packages.debian.org/Pics/sug.gif);
 491 }
 492
 493 #pdeps ul.uldep li, #pdeps ul.ulrec li, #pdeps ul.ulsug li, #pdeps ul.uladep li, #pdeps ul.ulidep li {
 494         padding-left: 2em;
 495 }
 496 #pdeps dl {
 497         margin: 0;
 498 }
 499
 500 #pdownload p, #pdownload form, #pdownload submit {
 501         display: inline;
 502 }
 503
 504 #pdownload td {
 505         font-size: 0.85em;
 506         text-align: center;
 507 }
 508
 509 #pmoreinfo p {
 510         font-size: 0.85em;
 511 }
 512
 513 /* colors for packages, warnings and news in ports */
 514 .pred, .warning, dt.new, .no {
 515         color: red; /* FF0000 */
 516 }
 517
 518 .psmallcenter, .psmalltrademark {
 519         clear: both;
 520         font-size: 0.85em;
 521         text-align: center;
 522 }
 523
 524 .psmalltrademark {
 525         color: green;
 526 }
 527 #pdownload table, table.ridgetable, table.reltable {
 528         border-width: 4px;
 529         border-color: gray;
 530         margin: 0 1em 1em 1em;
 531         border-style: ridge;
 532         border-collapse: collapse;
 533 }
 534 table.vote {
 535         margin: 0 auto;
 536         border-width: 3px;
 537         border-color: gray;
 538         border-style: ridge;
 539         border-collapse: collapse;
 540 }
 541 #pdownload th, #pdownload td, table.ridgetable th, table.ridgetable td,
 542         table.reltable td, table.reltable th {
 543         border: 2px gray;
 544         border-style: ridge;
 545         padding: 0.1em;
 546 }
 547 table.reltable th {
 548         background-color: #44CCCC;
 549 }
 550 table.vote th {
 551         border: 1px solid gray;
 552         background-color: #DDDDDD;
 553 }
 554 table.vote td {
 555         border: 1px solid gray;
 556         padding: 4px;
 557 }
 558 table.reltable tr.odd {
 559         background-color: #FFFFFF;
 560 }
 561 table.reltable tr.even {
 562         background-color: #DDDDDD;
 563 }
 564 table.stattrans {
 565         margin: 0 auto;
 566         width: 95%;
 567         border: 1px solid black;
 568         background-color: #cdc9c9;
 569 }
 570 table.stattrans th {
 571         text-align: center;
 572         padding: 2px;
 573 }
 574 table.stattrans td {
 575         text-align: right;
 576         padding: 2px;
 577 }
 578 table.stattrans tbody th {
 579         text-align: left;
 580         font-weight: normal;
 581 }
 582
 583 /* partners */
 584 .partnertype {
 585         background-color: #DD0000;
 586         padding: 0.2em 0 0.2em 1em;
 587         color: #FFFFFF;
 588
 589 }
 590 div.partnerlogo {
 591         display: table-cell;
 592         vertical-align: middle;
 593         text-align: center;
 594         width: 30%;
 595 }
 596 div.partnerdesc {
 597         display: table-cell;
 598         font-size: 85%;
 599 }
 600 div.cdflash {
 601         background-color: #E09E86;
 602         width: 80%;
 603         margin: auto;
 604         text-align: center;
 605 }
 606 .cdrsync {
 607         color: #6B1300;
 608 }
 609 /* debian installer */
 610
 611 .dierror {
 612         background-color: #FF6060;
 613 }
 614 .dibad {
 615         background-color: #F7FF60;
 616 }
 617 .digood {
 618         background-color: #7AFF71;
 619 }
 620
 621 /* useful classes */
 622
 623 th.eventheader {
 624         background-color: #BBDDFF;
 625 }
 626 .center {
 627         text-align: center;
 628 }
 629 .right {
 630         text-align: right;
 631 }
 632 ul.circlelist {
 633         list-style-type: circle;
 634 }
 635 .centerdiv table {
 636         margin-left: auto;
 637         margin-right: auto;
 638 }
 639 ul.discless {
 640         list-style-type: none;
 641 }
 642 .top, img.ico {
 643         vertical-align: top;
 644 }
 645 img.ico {
 646         float: left;
 647         margin: 0 0.2em 0 0;
 648 }
 649 img.rightico {
 650         float: right;
 651         vertical-align: top;
 652         margin: 0 0 0 0.2em;
 653 }
 654 img.cve {
 655         vertical-align: -25px;
 656 }
 657 .y2kok, .yes {
 658         color: #00BB00;
 659 }
 660 .y2kok2 {
 661         color: #00BBBB;
 662 }
 663 .bluehead {
 664         color: #0000FF !important;
 665 }
 666 span.halfsize {
 667         font-size: 80%;
 668 }
 669 span.ddpbooktitle, span.merchtitle {
 670         font-size: larger;
 671 }
 672 a:link { color: #0000FF; }
 673 a:visited { color: #800080; }
 674 a:hover { color: #F000FF; }
 675 a:active { color: #FF0000; }
 676
 677 .navpara a, col.y2k {
 678         white-space: nowrap;
 679         /* this is to keep from breaking at whitespace in anchors */
 680 }
 681
 682 /* language dependent stuff */
 683 /* quotes */
 684 html[lang="de"] q:before {
 685         content: "\00BB";
 686 }
 687 html[lang="de"] q:after {
 688         content: "\00AB";
 689 }
 690 html[lang="de"] q q:before {
 691         content: "\203A";
 692 }
 693 html[lang="de"] q q:after {
 694         content: "\2039";
 695 }
 696 html[lang="pl"] q:before { content: "\201E"; }
 697 html[lang="pl"] q:after { content: "\201D"; }
 698 html[lang="pl"] q q:after { content: "\2019"; }
 699 html[lang="pl"] q q:before { content: "\201A"; }
 700
 701 html[lang="fr"] q:before { content: "\00AB\00A0"; }
 702 html[lang="fr"] q:after { content: "\00A0\00BB"; }
 703 html[lang="fr"] q q:before { content: "\2039\00A0"; }
 704 html[lang="fr"] q q:after { content: "\00A0\203A"; }
 705
 706 #leftcol:lang(ja) ul ul {
 707         font-size: 0.95em;
 708 }
 709 html[lang|="zh"] strong {
 710         /* color: #FFFFFF; */
 711         background-color: yellow;
 712 }
 713 .underline { text-decoration: underline; }
 714 .clr { clear:both; }
 715 /*.content{padding:5px;} */ /*padding for content */
 716 /* #header .content{padding-bottom:0;} */ /*padding bottom 0 to remove space in IE5 Mac*/
 717
 718 /* for l10n-arabic */
 719 .bidi {
 720         direction: rtl;
 721         text-align: right;
 722 }
 723
 724 #leftcol, #navbar, #navbar a {
 725         -moz-border-radius: 15px;
 726         /* this goes to the end as the css validator does not like it
 727         will be replaced by border-radius with css3 */
 728 }