new layout
[deb/hackedgotchi.git] / www / common / 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: 1px dotted grey; }
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         clear: both;
519 }
520 #content #footer {
521         margin-left: 0;
522 }
523 #footer p {
524         margin: 1em 0 1em 0;
525 }
526 #footer hr {
527         border-top: 1px solid #d2d3d7;
528         border-bottom: 1px solid white;
529         height: 0;
530 }
531 #footer .editbar li {
532         display: inline;
533         margin-right: 2em;
534 }
535 #footer .info {
536 }
537 #fineprint {
538         margin-bottom: 1em;
539 }
540 #footermap {
541         list-style:none;
542         margin: 0 0 0 0;
543         padding: 0;
544         width:100%;
545         overflow: hidden;
546         border: 0;
547 }
548 ul#footermap-cola a
549 , ul#footermap-colb a
550 , ul#footermap-colc a
551 , ul#footermap-cold a
552 , ul#footermap-cole a {
553         padding-left: 0;
554 }
555 ul#footermap-cola
556 , ul#footermap-colb
557 , ul#footermap-colc
558 , ul#footermap-cold
559 , ul#footermap-cole {
560         float:left;
561         width: 19%;
562         min-width: 11em;
563         height: 12em;           /* Update when adding items */
564         margin:0 1% 0 0;
565         padding: 2em 0 0 0;
566         list-style: none;
567 }
568 ul#footermap-cole {
569         width: 18.9%;
570         margin-right:0;
571 }
572 #footermap-wrap {
573         padding:2em;
574         border-top: 1px solid white;
575 }
576 #footermap a {
577         margin: 0;
578 }
579 #footermap ul{
580         list-style: none;
581         padding:0;
582 }
583 #footermap li {
584         text-indent:0;
585         background-color: transparent;
586         font-weight:bold;
587 }
588 #footermap li ul {
589         margin: 0;
590         padding: 0;
591 }
592 #footermap li li {
593         margin:0;
594         text-indent:0;
595         padding:0;
596         font-weight:normal;
597         border:0;
598         background-image:none;
599         background-color:transparent;
600 }
601 #serverselect {
602 }
603 #serverselect input
604 , #serverselect option 
605 , #serverselect select {
606 }
607 #serverselect ul {
608         display: inline;
609         margin-left: 2em;
610 }
611 #serverselect li {
612         list-style: none;
613         display: inline;
614         padding:0 1em 0 1em;
615         margin:0;
616 }
617 #serverselect form p {
618         margin:0;
619         padding:0;
620         line-height: 1;
621 }
622 .lcol50 {
623         float: left;
624         width: 49%;
625         font-size:0.75em;
626         margin:0 0 0 0;
627         padding:0 0.5em 0 0;
628 }
629 .lcol50 h2 {
630         margin-top:0;
631 }
632 .rcol50 {
633         margin:0 0 0 51%;
634         padding:0;
635         font-size:0.75em;
636 }
637 #pageLang {
638         position: relative;     /*  establish a containing box. needed for
639                                     langContainer */
640 }
641 form#pageLang {
642         display: inline;
643 }
644
645 /* Extras */
646
647 input:focus {
648         background-color:#FFFFCB;
649         
650 }
651 .hidecss {
652         display: none;
653 }
654 .clear {
655         clear:both
656 }
657 #clear {
658         clear:both;
659         border:0;
660         height:1px;
661         display:block;
662 }
663 .quicklist {
664         list-style: none;
665         font-size: 0.75em;
666         margin: 2em 0 2em 0;
667         padding:0;
668         text-indent:0;
669         line-height: 2em;
670 }
671 .quicklist li  {
672         display:inline;
673 }
674 .item p{
675         margin: 0;
676 }
677 .item h2
678 , .item p
679 , .item ul{
680         margin-right: 10px 
681 }
682 .item h2
683 , .item h3
684 , .item h4
685 , .item h5 {
686         margin-top: 0;
687 }
688 .line {
689         padding: 0;
690         width: auto;
691         overflow: hidden;
692         }
693 div.downloads {
694         border-top: 0.17em solid #339900;
695         margin: 1.33em 0 0 0; 
696 }
697 .downloads ul.downlist {
698         margin:0;
699 }
700 div.downloads .col50 { 
701         border-top: 0.15em solid #339900;
702 }
703 ul.downlist {
704         padding-left: 30px;
705         text-indent:0;
706         background: url('Pics/emblem-downloads.png') no-repeat 0 0.15em;
707         min-height: 23px;
708         /* 
709          * border-top: 0.17em solid #339900;
710          */
711 }
712 ul.quicklist.downlist {
713         border-top: 0.17em solid #339900;
714         padding-top: 0.25em;
715         margin-top: 1.6em;
716 }
717 ul.downlist li {
718         display: inline;
719 }
720 ul.downlist li:after {
721         content: ', ';
722 }
723 ul.downlist li:last-child:after {
724         content: '';
725 }
726 div.tip
727 , div.important
728 , div.warning
729 , div.note 
730 , div.trans-note {
731         padding:0 2em 0 4em;
732         margin: 1.85em 0 1.85em 0;
733         background-repeat: no-repeat;
734         background-position: 0.5em 0.5em;
735         font-size: 0.75em;
736         line-height: 2em;
737         background-color:#FFFFCB;
738         border:0.15em solid #CCCCA3;
739 }
740 div.tip p
741 , div.important p
742 , div.warning p
743 , div.note p 
744 , div.trans-note p {
745         margin: 1em 0 1em 0;
746 }
747 div.tip {
748         background-image: url('Pics/admon-tip.png');
749 }
750 div.important{
751         background-image: url('Pics/admon-important.png');
752 }
753 div.warning {
754         background-image: url('Pics/admon-warning.png');
755 }
756 div.note
757 , div.trans-note  {
758         background-image: url('Pics/admon-note.png');
759 }
760
761 /* Layout Elements */
762
763 .col50
764 , .cardleft
765 , .cardright {
766         width:47.5%;
767         float: left;
768         padding-bottom: 1.5em;
769 }
770 .lastcol
771 , .cardright {
772         margin: auto;
773         width: 47.5%;
774         float:left;
775         padding-right: 0;
776         margin-left: 5%;
777 }
778 .lastcol h2
779 , .lastcol p
780 , .lastcol ul {
781         margin-right:0;
782 }
783 .cardleft h2 {
784         margin-right: 1em;
785 }
786 .cardright div {
787         margin-left: 1.5em;
788 }
789 .cardright h2 {
790         margin-left: 1em;
791 }
792 .votemenu a {
793         display:block;
794 }
795 table.vote td, table.vote th {
796         padding-right: 1.5em;
797 }
798 #maincol.with-toolbox {
799         margin-right: 14em;
800 }
801 div.tabular table, table.tabular, table.vendors {
802 /*      border-bottom: 1px solid #a9abb3;
803         border-top: 1px solid #a9abb3; */
804         border-bottom: 0.15em solid #666;
805         border-top: 0.15em solid #666;
806         width: auto;
807         font-size: 0.75em;
808         line-height: 2em;
809         margin-bottom: 4em;
810         margin-top: -0.169em;
811 }
812 table td {
813         padding-right: 1.5em;
814 }
815 div.tabular table tr, table.tabular tr, table.vendors tr {
816         width: 100%;
817 }
818 table th {
819         padding-right: 1.5em;
820 }
821 div.tabular table td, table.tabular td, table.vendors td {
822         background-image: url(Pics/greydot.png);
823         background-position: top left;
824         background-repeat: repeat-x;
825 }
826 div.tabular table > td:fist-child, table.tabular  > td:fist-child, table.vendors  > td:fist-child {
827         background-image: none;
828 }
829 #pageLang p, #pageLang form {
830         display: inline;
831 }
832 .inline  a {
833         float: left;
834         margin-right: 1em;
835 }
836 #langSelector {
837         color: #0035c7;
838         text-decoration: underline;
839 }
840 #langSelector:hover {
841         cursor: pointer;
842         text-decoration: none;
843 }
844 #langContainer {
845         #background-color: #f5f6f7;
846         background-color: white;
847         background-image:url('Pics/gradient-flipped.png');
848         background-position: bottom;
849         background-repeat: repeat-x;
850         display: none;
851         position: absolute;
852         left: -1em;
853         border-bottom: 1px solid #dfdfe0;
854         margin-right: -1em;
855         min-width: 100%;        /* make it reach the right edge if only a few
856                                    languages are available */
857         padding: 0.5em 1em 1em 1em;
858 }
859 #langContainer a {
860         margin-right: 1em;
861 }
862 #pageLang:hover #langContainer {
863     display: block;
864 }
865
866 /* for l10n-arabic */
867 .bidi {
868         direction: rtl;
869         text-align: right;
870 }
871