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