edit bar and other changes + latest debian.css
[deb/moinmoin.git] / debwiki / css / debian.css
1 /*
2         http://www.debian.org Stylesheet
3
4         Copyright 2011 Kalle Söderman
5
6         This stylesheet is free software; you can redistribute it and/or modify it
7         under the terms of the GNU General Public License, version 2, as published by
8         the Free Software Foundation.
9
10         This program is distributed in the hope that it will be useful, but WITHOUT ANY
11         WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
12         PARTICULAR PURPOSE. See the GNU General Public License for more details.
13
14         You should have received a copy of the GNU General Public License along with
15         this program; if not, write to the Free Software Foundation, Inc., 51 Franklin
16         Street, Fifth Floor, Boston, MA 02110-1301 USA.
17
18         The license text can also be found at http://www.gnu.org/copyleft/gpl.html and
19         /usr/share/common-licenses/GPL-2 on Debian GNU/Linux.  
20 */
21         
22 /*      
23         Font size table (Browser default 16px)
24
25         pixels      relative
26         --------------------
27         36px        2.25em
28         31px        0.5161em
29         24px        1.5em
30         21px        1.3125em
31         18px        1.125em
32         16px        1em
33         14px        0.875em
34         12px        0.75em
35         11px        0.6875em
36         10px        0.625em
37         9px         0.5625em
38         --------------------
39 */
40
41 /* Reset */
42  
43 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
44 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
45 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
46 dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
47 tfoot, thead, tr, th, td { 
48         margin: 0;
49         padding: 0;
50         border: 0;
51         outline: 0;
52         font-weight: inherit;
53         font-style: inherit;
54         font-size: 100%;
55         font-family: inherit;
56         vertical-align: baseline;
57 }
58
59 body            { line-height: 1; color: black; background: white; }
60 ol, ul          { list-style: none; }
61 table           { border-collapse: separate; border-spacing: 0; }
62 blockquote, q   { quotes: "" ""; }
63 html            { background-color: transparent; }
64 :focus          { outline: 0; }
65 caption, th, td { text-align: left; font-weight: normal; }
66 blockquote:before, blockquote:after, q:before, q:after { content: ""; }
67
68 /* Main */
69
70 body {
71         margin: 0;
72         font: normal 100% sans-serif;
73         line-height: 1.5;
74         color: #222;
75         background-color: white;
76         background-image:url('Pics/gradient.png');
77         background-position: 0 0;
78         background-repeat: repeat-x;
79         /* Uncomment to show baseline grid 
80         background-image: url('24grid.png');
81         background-position: 30px 9px; 
82         */
83 }
84 #content {
85         margin: 0 10px 0 52px;
86 }
87 #inner {
88         position: relative;
89 }
90 #maincol {
91         margin: 0 15em 1.5em 0;
92 }
93
94 /* Header */
95
96 #header {
97         margin:0;
98         padding:0 10px 0 52px; 
99 }
100 #header a:link
101 , #header a:visited
102 , #second-nav a:link
103 , #second-nav a:visited {
104         text-decoration: none;
105 }
106 #header a:hover
107 , #second-nav a:hover {
108         text-decoration: underline;
109 }
110 #breadcrumbs {
111         margin:0;
112         font-size: 0.75em;
113         text-transform: lowercase;
114         line-height: 2;
115         background-color: transparent;
116         background-color: #f5f6f7;
117         border-bottom: 1px solid #d2d3d7 ;
118         min-height: 20px;
119 }
120 #breadcrumbs:before {
121         content: "/";
122         margin-left: 0.5em;
123         margin-right: 0.5em;
124 }
125 p.section {
126         margin: 0;
127         padding: 0 5px 0 5px;
128         font-family:monospace;
129         line-height: 16px;
130         color:white;
131         text-transform: uppercase;
132         letter-spacing: 0.08em;
133         position:absolute;
134         top: 0px;
135         left:52px;
136         background-color: #c70036;
137 }
138 p.section a {
139         color: white;
140         text-decoration: none;
141 }
142 p.section a:hover {
143         color:white;
144         text-decoration: underline;
145 }
146 #navbar {
147         background-color: transparent;
148         list-style:none;
149         display:block;
150         border-bottom:1px solid #c70036;
151         text-indent:0;
152         padding: 0;
153         margin-top:0;
154         margin-bottom:0;
155 }
156 #navbar ul {
157         margin: 0;
158         padding: 0;
159         clear: both;
160         overflow: hidden;
161         min-height: 45px;
162 }
163 #navbar li {
164         list-style: none;
165         float: left;
166         padding: 0;
167         margin: 0;
168 }
169 #navbar a:link
170 , #navbar a:visited {
171         padding: 1.75em 0.5em 0.25em 0.5em;
172         border-left: 1px solid transparent;
173         border-right: 1px solid transparent;
174         display: block;
175         text-decoration: none;
176 }
177 #navbar a:visited {
178         color: #54638c;
179 }
180 #navbar a:hover
181 , #navbar a:visited:hover {
182         background-color: #f5f6f7;
183         border-left: 1px solid  #d2d3d7;
184         border-right: 1px solid #d2d3d7;
185         text-decoration: underline;
186 }
187 ul.subnav {
188         list-style: none;
189         margin-left: 0;
190         padding-left: 0;
191         margin-top: 0;
192 }
193 ul.subnav li {
194         display: inline;
195         margin-right: 1em;
196 }
197 #searchbox {
198         text-align:left;
199         line-height: 1;
200         margin: 0 10px 0 0.5em;
201         padding: 1px 0 1px 0;
202         position: absolute;
203         top:0;
204         right:0;
205         font-size: 0.75em;
206 }
207 #searchbox p {
208         margin: 0;
209         padding: 0;
210 }
211 #upperheader {
212         margin:0;
213         padding:0;
214 }
215 #logo {
216         position:absolute;
217         top:0;
218         left:0;
219         padding: 0;
220         background-color: transparent;
221         border: 1px solid transparent;
222         border-top: 0;
223         width: 50px;
224         height: 5.07em;
225         min-height: 65px;
226 }
227 #logo a {
228         display: block;
229         position: relative;
230         padding: 0;
231         height: 100%;
232         min-height: 65px;
233 }
234 #logo img {
235         margin-top: 5px;
236         position: absolute;
237         bottom: 0.3em;
238         overflow: auto;
239 }
240 #logo:hover {
241         border: 1px solid #d2d3d7 ;
242         border-top: 0;
243         background-color: #f5f6f7;
244 }
245
246 /* Links */
247
248 a:link {
249         color: #0035c7;
250         text-decoration: underline;
251 }
252 a:visited {
253         color: #54638c;
254 }
255 a:link:hover {
256         text-decoration: none;
257         color: #00207a;
258 }
259 a:visited:hover {
260         text-decoration: none;
261 }
262 a:active {
263         color:#c2c3c7;
264 }
265 a img {
266         border:0;
267 }
268 a.rss_logo {
269         font-size: 0.75em;
270         float: right;
271         width: 35px;
272         line-height: 10px;
273         color: #ffffff;
274         background-color: #ff6600;
275         font-weight: bold;
276         font-family: sans-serif;
277         text-align: center;
278         text-decoration: none;
279         padding: 0.25em;
280         margin-left: 0.25em;
281         border: 1px solid #ff6600;
282 }
283
284 a.rss_logo:hover {
285         background-color: white;
286         border: 1px solid #ff6600;
287         color: #ff6600;
288 }
289
290 a.rss_logo.generic {
291         background-color: #ff8800;
292 }
293
294 a.rss_logo.generic:hover {
295         background-color: #ee7700;
296 }
297
298
299 /* Secondnav */
300
301 #second-nav {
302         width: 16em;
303         font-size: 0.75em;
304         line-height: 1.5;
305         float: right;
306         top: 0;
307         right: 0;
308         margin: 3em 0 0 0;
309         padding: 0 0 0 1em;
310         border-left: 1px solid #d2d3d7 ;
311 }
312 #second-nav ul {
313         padding:0;
314         margin:0;
315         list-style:none;
316 }
317 #second-nav ul ul {
318         margin-left: 1em;
319 }
320 #second-nav li {
321         font-weight: normal;
322         margin:0;
323         padding:0;
324 }
325 #second-nav p {
326         line-height: 2;
327         font-weight: bold;
328         margin: 0;
329 }
330 #second-nav h2 {
331         margin:0;
332 }
333
334 /* Typography */
335
336 p {
337         margin: 1.5em 0 1.5em 0;
338 }
339 strong {
340         font-weight: bold;
341 }
342 em {
343         font-style: italic;
344         color: #444;
345 }
346 small {
347         font-size: 0.75em;
348 }
349 sup {
350         font-size: 0.75em;
351         vertical-align:top;
352 }
353 h1
354 , h2
355 , h3
356 , h4
357 , h5
358 , h6 {
359         font-weight: 600;
360         color: black;
361 }
362 h1 {
363         font-weight: normal;
364         font-size: 1.8em;
365         line-height: 0.83333;
366         margin: 0.83333em 0 0.83333em 0;
367 }
368 h2 {
369         font-size: 1.4em;
370         font-weight: normal;
371         line-height: 1.0714286;
372         margin: 1.0714286em 0 1.0714286em 0;
373 }
374 h3 {
375         font-size: 1.125em;
376         line-height: 1.333em;
377         margin: 1.333em 0 0 0;
378 }
379 h4 {
380         font-weight: normal;
381         font-style: italic;
382         margin: 1.5em 0 1.5em 0;
383         color: #444;
384 }
385 h5 {
386         font-style: italic;
387         font-size: 0.75em;
388         margin: 2em 0 2em 0;
389 }
390 ol,ul {
391         padding-left: 1.5em;
392         margin-left:0;
393         margin: 1.5em 0 1.5em 0;
394 }
395 ol>ol, ul>ul, li>ol, li>ul {
396         margin: 0;
397 }
398
399 ol {
400         list-style-type: decimal;
401 }
402 ul {
403         list-style-type: disc;
404 }
405 th {
406         font-weight: bold;
407         margin: 1.5em 0 1.5em 0;
408 }
409 hr {
410         border: none;
411         background-color: #bbb;
412         height: 1px;
413         margin: 1.4375em 0 1.5em 0;
414 }
415 pre {
416         margin: 1.5em 0 1.5em 0;
417         overflow: auto;
418         font-family: monospace;
419         white-space: pre;
420         color: black;
421 }
422 tt, code {
423         font-family: monospace;
424         white-space: pre;
425         color: black;
426 }
427 dt {
428         margin: 1.5em 0 0 0;
429         font-weight: bold;
430 }
431 dd {
432         margin:  0 0 0 1.5em;
433 }
434 blockquote {
435         font-size: 0.75em;
436         margin: 2em;
437         line-height: 2;
438 }
439 cite {
440         font-style: italic;
441         color: #444;
442 }
443 acronym, abbr {
444         text-transform: uppercase;
445         font-size: 0.9em;
446 }
447 .toc {
448         font-size: 0.75em;
449         list-style:none;
450         background-image: url('Pics/greydot.png');
451         background-position: bottom left;
452         background-repeat: repeat-x;
453         line-height:1.833;
454         padding: 0;
455         max-width: 62%;
456         margin: 2em 0 2em 0;
457 }
458 .toc li {
459         background-image: url('Pics/greydot.png');
460         background-position: top left;
461         background-repeat: repeat-x;
462         padding: 0.0833em 0 0.0833em 0;
463  }
464 .toc a {
465         display:block;
466         text-decoration: none;
467 }
468 .toc a:hover {
469         display:block;
470         background-color: #f0f0f4;
471         text-decoration: underline;
472 }
473 .toc dt {
474         margin: 0;
475         background-image: url('Pics/greydot.png');
476         background-position: top left;
477         background-repeat: repeat-x;
478         padding: 0.0833em 0 0.0833em 0;
479 }
480
481 /* Sitemap */
482
483 .card {
484         clear:both;
485         margin:1.5em 0 1.5em 0;
486         background-position: 0 -50px;
487         background-repeat: repeat-x;
488         padding:0;
489 }
490 .card ul {
491 }
492 .card ul li {
493         list-style:none;
494 }
495 .card h2 {
496 }
497 .lefthalf {
498         float:left;
499 }
500 .righthalf {
501         margin-left:50%;
502 }
503 .lefthalf ul {
504         margin-top:0;
505 }
506
507 /* Footer */
508
509 #footer {
510         font-size: 0.75em;
511         border: 1px solid #dfdfe0;
512         padding:1em;
513         background-color: #f5f6f7;
514         margin: 0 10px 0 52px;
515         line-height: 1.5em;
516         border-left: 0;
517         border-right: 0;
518 }
519 #content #footer {
520         margin-left: 0;
521 }
522 #footer p {
523         margin: 1em 0 1em 0;
524 }
525 #footer hr {
526         border-top: 1px solid #d2d3d7;
527         border-bottom: 1px solid white;
528         height: 0;
529 }
530 #footer .editbar li {
531         display: inline;
532         margin-right: 2em;
533 }
534 #footer .info {
535 }
536 #fineprint {
537         margin-bottom: 1em;
538 }
539 #footermap {
540         list-style:none;
541         margin: 0 0 0 0;
542         padding: 0;
543         width:100%;
544         overflow: hidden;
545         border: 0;
546 }
547 ul#footermap-cola a
548 , ul#footermap-colb a
549 , ul#footermap-colc a
550 , ul#footermap-cold a
551 , ul#footermap-cole a {
552         padding-left: 0;
553 }
554 ul#footermap-cola
555 , ul#footermap-colb
556 , ul#footermap-colc
557 , ul#footermap-cold
558 , ul#footermap-cole {
559         float:left;
560         width: 19%;
561         min-width: 11em;
562         height: 12em;           /* Update when adding items */
563         margin:0 1% 0 0;
564         padding: 2em 0 0 0;
565         list-style: none;
566 }
567 ul#footermap-cole {
568         width: 18.9%;
569         margin-right:0;
570 }
571 #footermap-wrap {
572         padding:2em;
573         border-top: 1px solid white;
574 }
575 #footermap a {
576         margin: 0;
577 }
578 #footermap ul{
579         list-style: none;
580         padding:0;
581 }
582 #footermap li {
583         text-indent:0;
584         background-color: transparent;
585         font-weight:bold;
586 }
587 #footermap li ul {
588         margin: 0;
589         padding: 0;
590 }
591 #footermap li li {
592         margin:0;
593         text-indent:0;
594         padding:0;
595         font-weight:normal;
596         border:0;
597         background-image:none;
598         background-color:transparent;
599 }
600 #serverselect {
601 }
602 #serverselect input
603 , #serverselect option 
604 , #serverselect select {
605 }
606 #serverselect ul {
607         display: inline;
608         margin-left: 2em;
609 }
610 #serverselect li {
611         list-style: none;
612         display: inline;
613         padding:0 1em 0 1em;
614         margin:0;
615 }
616 #serverselect form p {
617         margin:0;
618         padding:0;
619         line-height: 1;
620 }
621 .lcol50 {
622         float: left;
623         width: 49%;
624         font-size:0.75em;
625         margin:0 0 0 0;
626         padding:0 0.5em 0 0;
627 }
628 .lcol50 h2 {
629         margin-top:0;
630 }
631 .rcol50 {
632         margin:0 0 0 51%;
633         padding:0;
634         font-size:0.75em;
635 }
636 form#pageLang {
637         display: inline;
638 }
639
640 /* Extras */
641
642 input:focus {
643         background-color:#FFFFCB;
644         
645 }
646 .hidecss {
647         display: none;
648 }
649 .clear {
650         clear:both
651 }
652 #clear {
653         clear:both;
654         border:0;
655         height:1px;
656         display:block;
657 }
658 .quicklist:before {
659         content: "Quick Links: ";
660         font-weight: bold;
661 }
662 .quicklist {
663         list-style: none;
664         font-size: 0.75em;
665         margin: 2em 0 2em 0;
666         padding:0;
667         text-indent:0;
668         line-height: 2em;
669 }
670 .quicklist li  {
671         display:inline;
672 }
673 .item p{
674         margin: 0;
675 }
676 .item h2
677 , .item p
678 , .item ul{
679         margin-right: 10px 
680 }
681 .item h2
682 , .item h3
683 , .item h4
684 , .item h5 {
685         margin-top: 0;
686 }
687 .line {
688         padding: 0;
689         width: auto;
690         overflow: hidden;
691         }
692 div.downloads {
693         border-top: 0.17em solid #339900;
694         margin: 1.33em 0 0 0; 
695 }
696 .downloads ul.downlist {
697         margin:0;
698 }
699 div.downloads .col50 { 
700         border-top: 0.15em solid #339900;
701 }
702 ul.downlist {
703         padding-left: 30px;
704         text-indent:0;
705         background: url('Pics/emblem-downloads.png') no-repeat 0 0.15em;
706         /* 
707          * border-top: 0.17em solid #339900;
708          */
709 }
710 ul.quicklist.downlist {
711         border-top: 0.15em solid #339900;
712         padding-top: 0.25em;
713         margin-top: 1.6em;
714 }
715 ul.downlist li {
716         display: inline;
717 }
718 ul.downlist li:after {
719         content: ', ';
720 }
721 ul.downlist li:last-child:after {
722         content: '';
723 }
724 div.tip
725 , div.important
726 , div.warning
727 , div.note {
728         padding:0 2em 0 4em;
729         margin: 1.85em 0 1.85em 0;
730         background-repeat: no-repeat;
731         background-position: 0.5em 1em;
732         font-size: 0.75em;
733         line-height: 2em;
734         background-color:#FFFFCB;
735         border:0.15em solid #CCCCA3;
736 }
737 div.tip p
738 , div.important p
739 , div.warning p
740 , div.note p {
741         margin: 1em 0 1em 0;
742 }
743 div.tip {
744         background-image: url('Pics/admon-tip.png');
745 }
746 div.important{
747         background-image: url('Pics/admon-important.png');
748 }
749 div.warning {
750         background-image: url('Pics/admon-warning.png');
751 }
752 div.note {
753         background-image: url('Pics/admon-note.png');
754 }
755
756 /* Layout Elements */
757
758 .col50
759 , .cardleft
760 , .cardright {
761         width:47.5%;
762         float: left;
763         padding-bottom: 1.5em;
764 }
765 .lastcol
766 , .cardright {
767         margin: auto;
768         width: 47.5%;
769         float:left;
770         padding-right: 0;
771         margin-left: 5%;
772 }
773 .lastcol h2
774 , .lastcol p
775 , .lastcol ul {
776         margin-right:0;
777 }
778 .cardleft h2 {
779         margin-right: 1em;
780 }
781 .cardright div {
782         margin-left: 1.5em;
783 }
784 .cardright h2 {
785         margin-left: 1em;
786 }
787 .votemenu a {
788         display:block;
789 }
790 table.vote td, table.vote th {
791         padding-right: 1.5em;
792 }
793 #maincol.with-toolbox {
794         margin-right: 14em;
795 }
796 div.tabular table, table.tabular, table.vendors {
797 /*      border-bottom: 1px solid #a9abb3;
798         border-top: 1px solid #a9abb3; */
799         border-bottom: 0.15em solid #666;
800         border-top: 0.15em solid #666;
801         width: auto;
802         font-size: 0.75em;
803         line-height: 2em;
804         margin-bottom: 4em;
805         margin-top: -0.169em;
806 }
807 table td {
808         padding-right: 1.5em;
809 }
810 div.tabular table tr, table.tabular tr, table.vendors tr {
811         width: 100%;
812 }
813 table th {
814         padding-right: 1.5em;
815 }
816 div.tabular table td, table.tabular td, table.vendors td {
817         background-image: url(Pics/greydot.png);
818         background-position: top left;
819         background-repeat: repeat-x;
820 }
821 div.tabular table > td:fist-child, table.tabular  > td:fist-child, table.vendors  > td:fist-child {
822         background-image: none;
823 }
824 #pageLang p, #pageLang form {
825         display: inline;
826 }
827 .inline  a {
828         float: left;
829         margin-right: 1em;
830 }