static/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
  11  *      ---------------
  12  *      Browser default 16px
  13  *
  14  *      14px    87.5%           body
  15  *      24px    1.714em
  16  *      18px    1.286em
  17  *      16px    1.143em
  18  *      12px    0.857em
  19  *      11px    0.786em
  20  *      8px     0.57em
  21  */
  22
  23 html {
  24         background-color: transparent;
  25 }
  26
  27 body {
  28         margin: 0;
  29         font: normal 87.5% sans-serif;
  30         line-height: 1.6;
  31         color: black;
  32         background-color: white;
  33 }
  34
  35 #outer {
  36         margin: 0 10px 0 62px;
  37 }
  38
  39 /*
  40  *      Header
  41  */
  42
  43 #header {
  44         margin:0;
  45         padding:0 10px 0 62px;
  46         font-size: 1em;
  47         background-image:url('Pics/gradient.png');
  48         background-position: 0 0;
  49         background-repeat: repeat-x;
  50 }
  51
  52 #header a:link
  53 , #second-nav a:link {
  54         text-decoration: none;
  55 }
  56
  57 #header a:hover
  58 , #second-nav a:hover {
  59         text-decoration: underline;
  60 }
  61
  62 #breadcrumbs {
  63         font-size: 0.786em;
  64         background-color: transparent;
  65         background-color: #f5f6f7;
  66         margin:0;
  67         padding: 6px 0.25em 7px  0.25em;
  68         border-bottom: 1px solid #d2d3d7 ;
  69         text-transform:lowercase;
  70         line-height: 1;
  71 }
  72
  73 p.section {
  74         font-family:monospace;
  75         position:absolute;
  76         top: 0px;
  77         left:62px;
  78         text-transform: uppercase;
  79         letter-spacing: 0.08em;
  80         background-color: #c70036;
  81         line-height: 16px;
  82         color:white;
  83         padding: 0 5px 0 5px;
  84         margin:0;
  85         font-size: 1em;
  86 }
  87
  88 #navbar {
  89         background-color: transparent;
  90         list-style:none;
  91         display:block;
  92         border-bottom:1px solid #c70036;
  93         text-indent:0;
  94         padding: 0;
  95         margin-top:0;
  96         margin-bottom:0;
  97         line-height:1;
  98 }
  99
 100 #navbar ul {
 101         margin:0 ;
 102         padding:0 ;
 103         height: 54px;
 104         clear: both;
 105         overflow: hidden;
 106 }
 107
 108 #navbar li {
 109         list-style: none;
 110         float: left;
 111         padding: 0;
 112         margin: 0;
 113         font-size: 1em;
 114 }
 115
 116 #navbar a:link
 117 , #navbar a:visited {
 118         padding: 30px 1em 10px 1em;
 119         border-left: 1px solid transparent;
 120         border-right: 1px solid transparent;
 121         display: block;
 122 }
 123
 124 #navbar a:visited {
 125         color: #54638c;
 126 }
 127
 128 #navbar a:hover
 129 , #navbar a:visited:hover {
 130         background-color: #efefef;
 131         border-left: 1px solid  #d2d3d7;
 132         border-right: 1px solid #d2d3d7;
 133 }
 134
 135 #sitetools {
 136         text-align:left;
 137         margin: 0 10px 0 0;
 138         padding: 0px 0 1px 0;
 139         position: absolute;
 140         top:0;
 141         right:0;
 142         border-right: 1px solid white;
 143         border-left: 1px solid #d2d3d7;
 144         line-height: 1;
 145 }
 146
 147 #upperheader {
 148         margin:0;
 149         padding:0;
 150 }
 151
 152 #logo {
 153         position:absolute;
 154         top:0;
 155         left:0;
 156         padding: 0;
 157         background-color: transparent;
 158         border: 1px solid transparent;
 159         border-top: 0;
 160 }
 161
 162 #logo a {
 163         display: block;
 164         height:71px;
 165         padding: 8px 5px 0 5px;
 166 }
 167
 168 #logo img {
 169         margin-top: 5px;
 170 }
 171
 172 #logo:hover {
 173         border: 1px solid #d2d3d7 ;
 174         border-top: 0;
 175         background-color: #eee;
 176 }
 177
 178 /*
 179  *      Links
 180  */
 181
 182 a:link  {
 183         color: #0035c7;
 184         text-decoration: underline;
 185 }
 186
 187 a:visited {
 188         color: #54638c;
 189 }
 190
 191 a:hover {
 192         text-decoration: none;
 193         color: #00207a;
 194 }
 195
 196 a:active {
 197         color:#c2c3c7;
 198 }
 199
 200 a img {
 201         border:0;
 202 }
 203
 204 /*
 205  *      Leftcol (Should be renamed secondnav)
 206  */
 207
 208 #second-nav {
 209         width: 16em;
 210         float:right;
 211         padding:0 0 0 1em;
 212         margin: 1em 0 10px 1em;
 213         border-left:1px solid #d3d6df;
 214         font-size: 0.786em;
 215         line-height: 1.5;
 216 }
 217
 218 #second-nav ul {
 219         padding:0;
 220         margin:0;
 221         list-style:none;
 222 }
 223
 224 #second-nav ul ul {
 225         margin-left: 1em;
 226 }
 227
 228 #second-nav li {
 229         font-weight: normal;
 230         margin-top:0.5em;
 231 }
 232
 233 #second-nav p {
 234         line-height: 1;
 235         font-weight: bold;
 236 }
 237
 238 #second-nav h2 {
 239         margin:0;
 240 }
 241
 242
 243 /*
 244  *      Typography
 245  */
 246
 247 p {
 248         margin: 0 0 1em 0;
 249 }
 250
 251 h1
 252 , h2
 253 , h3
 254 , h4 {
 255         font-weight: 600;
 256         margin-bottom: 0.5em;
 257         margin-top: 1em;
 258 }
 259
 260 h1 {
 261         line-height: 1em;
 262 }
 263
 264 h4 {
 265         font-size: 1em;
 266         font-weight: normal;
 267         font-style: italic;
 268 }
 269
 270 h3 {
 271         font-size: 1em;
 272 }
 273
 274 h2 {
 275         font-size: 1.143em;
 276 }
 277
 278 ol,ul {
 279         padding-left: 2em;
 280         margin-left:0;
 281 }
 282
 283 hr {
 284         border: none;
 285         background-color: #bbb;
 286         height: 1px;
 287 }
 288
 289 .hidecss {
 290         display: none;
 291 }
 292
 293 pre {
 294         overflow: auto;
 295 }
 296
 297 dd {
 298         margin-left: 2em;
 299         margin-bottom: 1em;
 300 }
 301
 302 .toc {
 303         font-size: 0.8em;
 304         list-style:none;
 305         margin: 1em 0 1em 0;
 306         background-image: url('Pics/greydot.png');
 307         background-position: bottom left;
 308         background-repeat: repeat-x;
 309         line-height:1.5;
 310         padding: 0;
 311         max-width: 67%;
 312 }
 313
 314 .toc li {
 315         background-image: url('Pics/greydot.png');
 316         background-position: top left;
 317         background-repeat: repeat-x;
 318         padding: 0.25em 0 0.25em 0;
 319  }
 320
 321 .toc a {
 322         display:block;
 323 }
 324
 325 .toc a:hover {
 326         display:block;
 327         background-color: #f0f0f4;
 328 }
 329
 330 /*
 331  *      Sitemap
 332  */
 333
 334 .card {
 335         clear:both;
 336         margin:2em 0 2em 0;
 337         background-position: 0 -50px;
 338         background-repeat: repeat-x;
 339         padding:8px 0 8px 0;
 340 }
 341
 342 .card ul {
 343         margin:0.5em 0 1em 0;
 344 }
 345
 346 .card ul li {
 347         list-style:none;
 348 }
 349
 350 .card h2 {
 351         margin:0;
 352 }
 353
 354 .lefthalf {
 355         float:left;
 356 }
 357
 358 .righthalf {
 359         margin-left:50%;
 360 }
 361
 362 .lefthalf ul {
 363         margin-top:0;
 364 }
 365
 366 /*
 367  *      Footer
 368  */
 369
 370 #footer {
 371         font-size: 0.786em;
 372         border: 1px solid #dfdfe0;
 373         border-bottom: 0;
 374         padding:1em;
 375         background-color: #f2f3f6;
 376         margin: 0 0 0 0;
 377 }
 378
 379 #footer hr {
 380         border-top: 1px solid #d2d3d7;
 381         border-bottom: 1px solid white;
 382         height: 0;
 383 }
 384
 385 #footer .editbar li {
 386         display: inline;
 387         margin-right: 2em;
 388 }
 389
 390 #footer .info {
 391         font-size: 1em;
 392 }
 393
 394 #fineprint {
 395         margin-bottom: 1em;
 396 }
 397
 398 #footermap {
 399         list-style:none;
 400         margin: 0 0 0 0;
 401         padding: 0;
 402         width:100%;
 403         font-size: 11px;
 404         overflow: hidden;
 405         line-height: 1.6;
 406         border: 0;
 407 }
 408
 409 ul#footermap-cola a
 410 , ul#footermap-colb a
 411 , ul#footermap-colc a
 412 , ul#footermap-cold a
 413 , ul#footermap-cole a {
 414         padding-left: 0;
 415 }
 416
 417 ul#footermap-cola
 418 , ul#footermap-colb
 419 , ul#footermap-colc
 420 , ul#footermap-cold
 421 , ul#footermap-cole {
 422         float:left;
 423         width: 19%;
 424         min-width: 11em;
 425         height: 12em; /* Update when adding items */
 426         margin:0 1% 0 0;
 427         padding: 10px 0 0 0;
 428         list-style: none;
 429 }
 430
 431 ul#footermap-cole {
 432         width: 18.9%;
 433         margin-right:0;
 434 }
 435
 436 #footermap-wrap {
 437         padding:1em;
 438         border-top: 1px solid white;
 439 }
 440
 441 #footermap a {
 442         margin: 0;
 443 }
 444
 445 #footermap ul{
 446         list-style: none;
 447         padding:0;
 448 }
 449
 450 #footermap li {
 451         text-indent:0;
 452         background-color: transparent;
 453         font-weight:bold;
 454         margin-top: 0.5em;
 455 }
 456
 457 #footermap li ul {
 458         margin: 0;
 459         padding: 0:
 460 }
 461
 462 #footermap li li {
 463         margin:0;
 464         text-indent:0;
 465         padding:0;
 466         font-weight:normal;
 467         line-height: 1.5;
 468         border:0;
 469         background-image:none;
 470         background-color:transparent;
 471 }
 472
 473 #sitetools form {
 474         margin:0;
 475         padding:0;
 476 }
 477
 478 #sitetools input {
 479         margin: 0 0 0 0.25em;
 480         padding-left: 4px;
 481         font-size: 0.786em;
 482         padding-right: 4px;
 483 }
 484
 485 #sitetools select {
 486         font-size: 0.786em;
 487         margin-left: 0.5em;
 488 }
 489
 490 #sitetools form p {
 491         display: inline;
 492         line-height: 1;
 493         margin:0;
 494         padding:0;
 495         font-size: 0.786em;
 496 }
 497
 498 .sitetool a {
 499         margin: 0.5em 0 0.5em 1em;
 500         padding: 0 0 0 0;
 501         float: left;
 502 }
 503
 504 .sitetool {
 505         margin:0;
 506         padding: 2px 5px 2px 5px;
 507         border-left: 1px solid white;
 508         border-right: 1px solid #d2d3d7;
 509         display:block;
 510         float:left;
 511 }
 512
 513 #serverselect input
 514 , #serverselect option
 515 , #serverselect select {
 516         font-size: 11px;
 517 }
 518
 519 #serverselect ul {
 520         display: inline;
 521         margin-left: 2em;
 522 }
 523
 524 #serverselect li {
 525         list-style: none;
 526         display: inline;
 527         padding:0 1em 0 1em;
 528         margin:0;
 529 }
 530
 531 #serverselect form p {
 532         margin:0;
 533         padding:0;
 534         line-height: 1;
 535 }
 536
 537
 538
 539 .lcol50 {
 540         float: left;
 541         width: 49%;
 542         font-size:0.8em;
 543         margin:0 0 0 0;
 544         padding:0 0.5em 0 0;
 545 }
 546
 547 .lcol50 h2 {
 548         margin-top:0;
 549 }
 550
 551 .rcol50 {
 552         margin:0 0 0 51%;
 553         padding:0;
 554         font-size:0.8em;
 555 }
 556
 557 /*
 558  *      Extras
 559  */
 560
 561 .clear {
 562         clear:both
 563 }
 564
 565 #clear {
 566         clear:both;
 567         border:0;
 568         height:1px;
 569         display:block;
 570  }
 571
 572 .quicklist:before {
 573         content: "Quick Links: ";
 574         font-weight: bold;
 575 }
 576
 577 .quicklist {
 578         list-style: none;
 579         font-size: 0.8em;
 580         margin:0;
 581         padding:0;
 582         text-indent:0;
 583 }
 584
 585 .quicklist li  {
 586         display:inline;
 587 }
 588
 589 .item p{
 590         margin: 0;
 591 }
 592
 593 .item h2
 594 , .item p
 595 , .item ul{
 596         margin-right: 10px
 597 }
 598
 599 .col50 {
 600         width:50%;
 601         float: left;
 602 }
 603
 604 .lastcol {
 605         margin: auto;
 606         width: 50%;
 607         float:left;
 608 }
 609
 610 .lastcol h2
 611 , .lastcol p
 612 , .lastcol ul {
 613         margin-left:  10px;
 614         margin-right:0;
 615 }
 616
 617 .line {
 618         clear: both;
 619         display: block;
 620         margin: 0 0 2em 0;
 621         padding: 0;
 622         width: auto;
 623         overflow: hidden;
 624 }
 625
 626 .cardleft {
 627         width:50%;
 628         float: left;
 629 }
 630
 631 .cardright {
 632         margin: auto;
 633         width: 50%;
 634         float:left;
 635 }
 636
 637 .cardleft div
 638 , .cardleft h2 {
 639         margin-right: 0.5em;
 640 }
 641
 642 .cardright div
 643 , .cardight h2 {
 644         margin-left: 0.5em;
 645 }
 646
 647 ul.votemenu {
 648         font-size: 0.8em;
 649         list-style:none;
 650         margin: 1em 0 1em 0;
 651         background-image: url('Pics/greydot.png');
 652         background-position: bottom left;
 653         background-repeat: repeat-x;
 654         line-height:1.5;
 655         padding: 0;
 656         max-width: 67%;
 657 }
 658
 659 .votemenu li {
 660         background-image: url('Pics/greydot.png');
 661         background-position: top left;
 662         background-repeat: repeat-x;
 663         padding: 0.25em 0 0.25em 0;
 664  }
 665
 666 .votemenu a {
 667         display:block;
 668 }
 669
 670 .votemenu a:hover {
 671         display:block;
 672         background-color: #f0f0f4;
 673 }