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