]> git.deb.at Git - deb/packages.git/blob - static/debian.css
Add these two images so that we don't have to link to
[deb/packages.git] / 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 }