]> git.donarmstrong.com Git - lilypond.git/blob - Documentation/css/lilypond-web.css
Web: CSS: make box borders match the gradients.
[lilypond.git] / Documentation / css / lilypond-web.css
1 /* Generic elements */
2
3 html {
4   padding: 0;
5   margin: 0;
6 }
7
8 body {
9   position: absolute;
10   top: 0;
11   left: 0.5%;
12   right: 0.5%;
13   width: 99%;
14   min-width: 42em;
15   max-width: 70em;
16   font-size: 95%;
17   line-height: 1.5;
18   background: #fff url(../pictures/background-image.png) no-repeat 0 0;
19   text-align: justify;
20   padding: 0;
21   margin: 0 auto;
22 }
23
24 hr {
25   display: none;
26 }
27
28 p {
29   margin: 0.5em;
30 }
31
32 h1, h2, h3, h4, h5 {
33   margin: 1em 10px;
34 }
35
36 li {
37   margin-right: 1em;
38 }
39
40 a img {
41   border: 0;
42 }
43
44 /* Hyperlinks */
45
46 /* no dotted line around clicked tabs */
47 a:focus {
48   outline-style: none;
49 }
50
51 a:link {
52   color: #0c51ab;
53 }
54
55 a:visited {
56   color: #804f01;
57 }
58
59 a:hover {
60   color: #0105ad;
61 }
62
63 /* Table of Contents */
64 /* first level toc (unnumbered) */
65 div#tocframe {
66   position: absolute;
67   top: 0;
68   left: 0;
69   right: 0;
70   background: #6aec7c url(../pictures/nav-bg.png) repeat-x top left;
71   max-width: 70em;
72   font-size: 100%;
73   line-height: 1;
74   padding: 0;
75   -moz-border-radius-bottomleft: 7px;
76   -moz-border-radius-bottomright: 7px;
77   -webkit-border-bottom-left-radius: 7px;
78   -webkit-border-bottom-right-radius: 7px;
79   margin: 0;
80 }
81
82 #tocframe a {
83   color: #fff;
84   text-decoration: none;
85 }
86
87 #tocframe ul.toc {
88   list-style-type: none;
89   padding: 0;
90   margin: 0;
91 }
92
93 #tocframe > ul:first-child > li:first-child a {
94   text-indent: -999em;
95   background: #6aec7c url(../pictures/lily-home-nav-bg.png) no-repeat 50% 50%;
96   width: 9%;
97   /* css3 no go yet? */
98   border-bottom-left-radius: 30px;
99   -moz-border-radius-bottomleft: 7px;
100   -webkit-border-bottom-left-radius: 7px;
101 }
102
103 #tocframe > ul:first-child > li:first-child a:hover {
104   background: #6aec7c url(../pictures/lily-home-nav-hover.png) no-repeat 50% 50%;
105   width: 9%;
106 }
107
108 #tocframe > ul:first-child > li:first-child.toc_current a {
109   text-indent: -999em;
110   background: url(../pictures/lily-home-nav-active.png) no-repeat 50% 50%;
111   width: 9%;
112 }
113
114 #tocframe > ul:first-child > li:first-child.toc_current a:hover {
115   text-indent: -999em;
116   background: url(../pictures/lily-home-nav-active.png) no-repeat 50% 50%;
117   width: 9%;
118 }
119
120 #tocframe > ul:first-child > li:last-child {
121   width: 9%;
122   -moz-border-radius-bottomright: 7px;
123   -webkit-border-bottom-right-radius: 7px;
124 }
125
126 #tocframe li {
127   display: inline;
128   padding: 0;
129   margin: 0;
130 }
131
132 /* search box */
133 #tocframe li form {
134   float: left;
135   width: 17%;
136   background: #6aec7c url(../pictures/nav-bg.png);
137   font-size: 100%;
138   padding: 0.45em 0.8%;
139   margin: 0;
140 }
141
142 #tocframe li form input {
143   display: block;
144   float: left;
145   width: 95%;
146   font-size: 100%;
147   padding: 0.1em;
148   border: 0;
149   margin: 0;
150   -moz-border-radius-topright: 20px;
151   -moz-border-radius-bottomright: 20px;
152   -webkit-border-top-right-radius: 20px;
153   -webkit-border-bottom-right-radius: 20px;
154 }
155
156 #tocframe li form input[type="hidden"] {
157   position: relative;
158   height: 0;
159   overflow: hidden;
160   text-indent: -999em;
161   padding: 0;
162   margin: 0;
163 }
164
165 #tocframe li a {
166   background: #6aec7c url(../pictures/nav-bg.png);
167   float: left;
168   width: 18%;
169   text-align: center;
170   font-weight: bold;
171   padding: 0.68em 0;
172   margin: 0;
173 }
174
175 #tocframe li a:hover {
176   background: url(../pictures/nav-hover.png);
177   text-decoration: underline;
178 }
179
180 #tocframe li.toc_current a,
181 #tocframe li.toc_current a:hover {
182   background: url(../pictures/nav-active.png);
183   color: #fff;
184   text-decoration: underline;
185 }
186
187 /* second level toc (unnumberedsec) */
188 #tocframe .toc .toc {
189   position: absolute;
190   top: 3.8em;
191   left: 0.5%;
192   right: 0.5%;
193   font-size: 82%;
194   padding: 0;
195   margin: 0;
196 }
197
198 #tocframe .toc .toc li {
199   display: inline;
200   padding: 0;
201   margin: 0;
202 }
203
204 #tocframe .toc .toc li:first-child a {
205   -moz-border-radius-topleft: 7px;
206   -moz-border-radius-bottomleft: 7px;
207   -webkit-border-top-left-radius: 7px;
208   -webkit-border-bottom-left-radius: 7px;
209 }
210
211 #tocframe .toc .toc li:last-child a {
212   -moz-border-radius-topright: 7px;
213   -moz-border-radius-bottomright: 7px;
214   -webkit-border-top-right-radius: 7px;
215   -webkit-border-bottom-right-radius: 7px;
216 }
217
218 #tocframe .toc .toc li a {
219   float: left;
220   width: auto;
221   background: #ceffae;
222   line-height: 2;
223   color: #000;
224   text-decoration: none;
225   text-indent: 0;
226   font-weight: normal;
227   padding: 0 0.5em;
228   margin: 0;
229 }
230
231 #tocframe .toc .toc li.toc_current a,
232 #tocframe .toc .toc li.toc_current a:hover {
233   background: #8cbc6c url(../pictures/nav-active-2.png) repeat-x top left;
234   color: #fff;
235   text-decoration: underline;
236 }
237
238 #tocframe .toc .toc li a:hover {
239   background: #bdee9d;
240 }
241
242 /* colored second-level TOC items */
243 #tocframe .toc .toc li.color1 a {
244   background: #9ccc7c url(../pictures/color1-bg.png) repeat-x top left;
245   text-decoration: none;
246 }
247
248 #tocframe .toc .toc li.color2 a {
249   background: #bbcf81 url(../pictures/color2-bg.png) repeat-x top left;
250   text-decoration: none;
251 }
252
253 #tocframe .toc .toc li.color3 a {
254   background: #dbd286 url(../pictures/color3-bg.png) repeat-x top left;
255   text-decoration: none;
256 }
257
258 #tocframe .toc .toc li.color4 a {
259   background: #fad58c url(../pictures/color4-bg.png) repeat-x top left;
260   text-decoration: none;
261 }
262
263 /* having this useless style makes the perl init file easier */
264 #tocframe .toc .toc li.colorDefault a,
265 #tocframe .toc .toc li.colorDefault a:hover {
266   color: #fff;
267 }
268
269 #tocframe .toc .toc li.color1 a:hover {
270   background: #addd8d url(../pictures/color1-hover.png) repeat-x top left;
271 }
272
273 #tocframe .toc .toc li.color2 a:hover {
274   background: #ccdf92 url(../pictures/color2-hover.png) repeat-x top left;
275 }
276
277 #tocframe .toc .toc li.color3 a:hover {
278   background: #ece297 url(../pictures/color3-hover.png) repeat-x top left;
279 }
280
281 #tocframe .toc .toc li.color4 a:hover {
282   background: #fbe69d url(../pictures/color4-hover.png) repeat-x top left;
283 }
284
285 #tocframe .toc .toc li.color1.toc_current a,
286 #tocframe .toc .toc li.color1.toc_current a:hover {
287   background: #beee9e url(../pictures/color1-active.png) repeat-x top left;
288 }
289
290 #tocframe .toc .toc li.color2.toc_current a,
291 #tocframe .toc .toc li.color2.toc_current a:hover {
292   background: #ddefa3 url(../pictures/color2-active.png) repeat-x top left;
293 }
294
295 #tocframe .toc .toc li.color3.toc_current a,
296 #tocframe .toc .toc li.color3.toc_current a:hover {
297   background: #fdf4a8 url(../pictures/color3-active.png) repeat-x top left;
298 }
299
300 #tocframe .toc .toc li.color4.toc_current a,
301 #tocframe .toc .toc li.color4.toc_current a:hover {
302   background: #fcf7ae url(../pictures/color4-active.png) repeat-x top left;
303 }
304
305 /* third level toc (unnumberedsubsec) */
306 #tocframe .toc .toc .toc {
307   position: absolute;
308   top: 2em;
309   left: 5%;
310   font-size: 100%;
311 }
312
313 #tocframe .toc .toc .toc li {
314   display: inline;
315   padding: 0;
316   margin: 0;
317 }
318
319 #tocframe .toc .toc .toc li a {
320   float: left;
321   width: auto;
322   background: #ceffae;
323   text-decoration: none;
324   text-indent: 0;
325   font-weight: normal;
326   padding: 0 0.75em;
327   margin: 0;
328 }
329
330 #tocframe .toc .toc .toc li a:hover {
331   background: #bdee9d;
332 }
333
334 #tocframe .toc .toc .toc li.toc_current a {
335   background: #acdd8c;
336 }
337
338 #tocframe .toc .toc .toc li.toc_current a:hover {
339   background: #acdd8c;
340 }
341
342 /* Divs */
343 div#main {
344   position: relative;
345   /* this value may need to be adjusted */
346   top: 7.7em;
347   left: 0;
348   right: 0;
349   width: 100%;
350   max-width: 70em;
351   margin: 0 auto 11.7em;
352   /* Necessary to stretch over floated content;
353    * will cause scrollbars to appear for content
354    * that is wider than the width of this div.
355    *
356    * FIXME: This breaks Konqueror 3 and 4.
357    */
358   overflow: auto;
359 }
360
361 /* FIXME: does not work in IE<=6 */
362 #main > a:first-child {
363   position: absolute;
364   top: -10em;
365 }
366
367 div#pageHeader {
368   width: 100%;
369   height: 10em;
370   padding-top: 2em;
371   border: solid #ddd;
372   border-width: 0;
373   margin: 0 0 1.4em 0;
374 }
375
376 #pageHeader .heading {
377   font-size: 4em;
378   text-align: left;
379   padding: 0;
380   margin: 0 0 0 340px;
381 }
382
383 #pageHeader p {
384   font-size: 1.2em;
385   font-style: italic;
386   text-align: left;
387   padding: 0;
388   margin: 0 0 0 340px;
389 }
390
391 div#lilylogo {
392   position: absolute;
393   top: 0;
394   left: 0;
395 }
396
397 div#cmws {
398   position: absolute;
399   top: 0;
400   left: 50%;
401 }
402
403 div#quickSummary {
404   text-align: left;
405   margin: 4em 13em 0 0;
406 }
407
408 #quickSummary .subheading {
409   background: #fff url(../pictures/summary-gradient.png) repeat-y 0 0;
410   color: #fff;
411   padding: 0 0.5em;
412   margin: 0;
413 }
414
415 #quickSummary p {
416   padding: 0.5em;
417   margin: 0;
418 }
419
420 div.separator {
421   background: transparent url(../pictures/squiggle.jpg) no-repeat 40% 60%;
422   height: 36px;
423   clear: both;
424   padding: 10px;
425 }
426
427 div#news {
428   padding: 0;
429   margin: 0 13em 1em 0;
430 }
431
432 div.news-item {
433 }
434
435 .news-item .subsubheading {
436   text-align: left;
437   padding: 0 0 0 0.5em;
438   border-bottom: 1px solid #5b7f64;
439   margin: 0;
440   overflow: hidden;
441 }
442
443 .testimonial-item {
444   /* Not sure how to style the testimonials */
445   clear: both;
446   margin: 2em 0;
447 }
448
449 .testimonial-item .subsubheading {
450   text-align: left;
451   padding: 0 0 0 0.5em;
452 }
453
454 .testimonial-item img.float-left,
455 .testimonial-item img.float-right {
456   margin: 1em 1em 2em;
457 }
458
459 .testimonial-item p {
460   padding: 0 0.5em;
461 }
462
463 .news-item p {
464   text-align: left;
465   padding: 0.5em;
466   margin: 0;
467 }
468
469 div#latestVersion {
470   position: absolute;
471   top: 12.4em;
472   right: 0;
473   width: 12em;
474   text-align: center;
475   border-left: 1px solid #5b7f64;
476 }
477
478 #latestVersion .subheading {
479   background: #5b7f64;
480   color: #fff;
481   text-align: center;
482   padding: 0 0.5em;
483   margin: 0;
484 }
485
486 /* this might not work in certain browsers */
487 a[name="Stable"] + h4 {
488   background: #bdee9d url(../pictures/color1-bg.png) repeat-x top left;
489 }
490
491 /* this might not work in certain browsers */
492 a[name="Unstable"] + h4 {
493   background: #fad58c url(../pictures/color3-bg.png) repeat-x top left;
494 }
495
496 #latestVersion .subsubheading {
497   padding: 0.08em 0.25em;
498   border-bottom: 1px solid #5b7f64;
499   margin: 0;
500 }
501
502 #latestVersion p {
503   font-size: 90%;
504   padding: 0.5em;
505   margin: 0;
506 }
507
508 div#footer {
509   clear: both;
510   position: relative;
511   width: 100%;
512   /* FIXME: may need to be adjusted */
513   margin-top: 7em;
514 }
515
516 div#language {
517   position: absolute;
518   top: 0;
519   left: 0;
520   right: 50%;
521   width: 50%;
522   text-indent: 0.5em;
523   padding: 0;
524 }
525
526 #language h3 {
527   padding: 0;
528   border-bottom: 10px solid #5b7f64;
529   margin: 0;
530 }
531
532 #language p {
533   padding: 0;
534   margin: 0.25em 0 0 0;
535 }
536
537 #verifier_texinfo {
538   position: relative;
539   bottom: 0;
540   right: 0;
541   left: 50%;
542   width: 50%;
543 }
544
545 #verifier_texinfo h3 {
546   text-indent: -9999em;
547   padding: 0;
548   border-bottom: 10px solid #5b7f64;
549   margin: 0 0 0.25em 0;
550 }
551
552 #verifier_texinfo img {
553 /*
554   float: right;
555 */
556   padding: 0;
557   margin: 0 0.5em 0 0;
558 }
559
560 #verifier_texinfo p {
561   clear: right;
562   text-align: right;
563   font-size: 0.8em;
564   padding: 0;
565   margin: 0 0.5em;
566 }
567
568 h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
569   position: relative;
570   height: 0;
571   text-indent: -999em;
572   padding: 0;
573   margin: 0;
574   overflow: hidden;
575 }
576
577 table {
578   text-align: left;
579   padding: 0 0 0 0.5em;
580   border-left: 3px solid green;
581   margin: 1em 0 0 1em;
582 }
583
584 table td {
585   padding: 0.4em;
586 }
587
588 table a {
589   text-align: left;
590 }
591
592 .verbatim {
593   margin: 10px;
594 }
595
596 .float-left {
597   float: left;
598 }
599
600 .float-center {
601   text-align: center;
602   display: block;
603   margin: 0 auto;
604 }
605
606 .float-right {
607   float: right;
608 }
609
610 img.float-left,
611 img.float-right {
612   background: #fff;
613   padding: 1em;
614   border: 1px solid #bbb;
615   margin: 0.1em 0.5em;
616 }
617
618 div.float-left a.clickable,
619 div.float-center a.clickable,
620 div.float-right a.clickable {
621   text-decoration: overline;
622   margin-left: 1em;
623 }
624
625 .clear-both {
626   clear: both;
627 }
628
629 .align-right {
630   text-align: right;
631 }
632
633 .heading-center {
634   text-align: center;
635   width: 75%;
636   margin: 0 auto;
637 }
638
639 .heading-center h2 {
640   padding: 0.25em 0;
641   margin: 0;
642 }
643
644 /* Columns */
645 .column-center-top {
646   float: left;
647   width: 99.5%;
648   text-align: left;
649   border: 1px solid #9ccc7c;
650   margin: 1em auto;
651 }
652
653 /* color1 */
654 .column-center-top h3 {
655   background: #9ccc7c url(../pictures/color1-bg.png) repeat-x top left;
656   text-align: left;
657   border-bottom: 1px solid #9ccc7c;
658 }
659
660 .column-left-top {
661   float: left;
662   width: 49%;
663   margin: 1em 0;
664 }
665
666 .column-left-bottom {
667   clear: both;
668   float: left;
669   width: 49%;
670   margin: 1em 0;
671 }
672
673 .column-left-top,
674 .column-left-bottom {
675   border: 1px solid #adce82;
676 }
677
678 /* color2 */
679 .column-left-top h3,
680 .column-left-bottom h3 {
681   background: #adce82 url(../pictures/color2-bg.png) repeat-x top left;
682   border-bottom: 1px solid #adce82;
683 }
684
685 .column-right-top {
686   float: right;
687   width: 49%;
688   margin: 1em 0;
689 }
690
691 .column-right-bottom {
692   float: right;
693   width: 49%;
694   margin: 1em 0;
695 }
696
697 .column-right-top,
698 .column-right-bottom {
699   border: 1px solid #bdd088;
700 }
701
702 /* color3 */
703 .column-right-top h3,
704 .column-right-bottom h3 {
705   background: #bdd088 url(../pictures/color3-bg.png) repeat-x top left;
706   border-bottom: 1px solid #bdd088;
707 }
708
709 .column-center-bottom {
710   clear: both;
711   width: 99.5%;
712   text-align: center;
713   border: 1px solid #ccd38f;
714   margin: 1em auto 0;
715 }
716
717 /* color4 */
718 .column-center-bottom h3 {
719   background: #ccd38f url(../pictures/color4-bg.png) repeat-x top left;
720   text-align: left;
721   border-bottom: 1px solid #ccd38f;
722 }
723
724 .column-center-top,
725 .column-center-bottom,
726 .column-left-top,
727 .column-left-bottom,
728 .column-right-top,
729 .column-right-bottom {
730   background: #f5fffa;
731 }
732
733 .column-center-top h3,
734 .column-center-bottom h3,
735 .column-left-top h3,
736 .column-left-bottom h3,
737 .column-right-top h3,
738 .column-right-bottom h3 {
739   text-align: left;
740   padding: 0 0.5em;
741   margin: 0;
742 }
743
744 .column-center-top h4,
745 .column-center-bottom h4,
746 .column-left-top h4,
747 .column-left-bottom h4,
748 .column-right-top h4,
749 .column-right-bottom h4 {
750   text-align: left;
751   padding: 0.5em 0.5em 0;
752   margin: 0 0 0.5em 0;
753 }
754
755 .column-center-top ul,
756 .column-center-bottom ul,
757 .column-left-top ul,
758 .column-left-bottom ul,
759 .column-right-top ul,
760 .column-right-bottom ul {
761   list-style-type: none;
762   padding: 0;
763   margin: 0.5em 0;
764 }
765
766 .column-center-top li,
767 .column-center-bottom li,
768 .column-left-top li,
769 .column-left-bottom li,
770 .column-right-top li,
771 .column-right-bottom li {
772   text-align: left;
773   padding: 0 0.5em 0;
774   margin: 0 0 0.5em 0;
775 }
776
777 .column-center-top p,
778 .column-center-bottom p,
779 .column-left-top p,
780 .column-left-bottom p,
781 .column-right-top p,
782 .column-right-bottom p {
783   text-align: left;
784 }
785
786 .column-center-top img.float-left,
787 .column-center-top img.float-right,
788 .column-center-bottom img.float-left,
789 .column-center-bottom img.float-right,
790 .column-left-top img.float-left,
791 .column-left-top img.float-right,
792 .column-left-bottom img.float-left,
793 .column-left-bottom img.float-right,
794 .column-right-top img.float-left,
795 .column-right-top img.float-right,
796 .column-right-bottom img.float-left,
797 .column-right-bottom img.float-right {
798   margin: 0.5em;
799 }
800
801 /* Centered divs by color */
802 div.color1,
803 div.color2,
804 div.color3,
805 div.color4 {
806   clear: both;
807   width: 99.5%;
808   background: #f5fffa;
809   margin: 1em auto;
810 }
811
812 div.color1 h3,
813 div.color2 h3,
814 div.color3 h3,
815 div.color4 h3 {
816   padding: 0 0.5em;
817   margin: 0;
818 }
819
820 div.color1 {
821   border: 1px solid #9ccc7c;
822   margin: 1em auto;
823 }
824
825 div.color1 h3 {
826   background: #9ccc7c;
827   border-bottom: 1px solid #9ccc7c;
828 }
829
830 div.color2 {
831   border: 1px solid #adce82;
832 }
833
834 div.color2 h3 {
835   background: #adce82;
836   border-bottom: 1px solid #adce82;
837 }
838
839 div.color3 {
840   border: 1px solid #bdd088;
841 }
842
843 div.color3 h3 {
844   background: #bdd088;
845   border-bottom: 1px solid #bdd088;
846 }
847
848 div.color4 {
849   border: 1px solid #ccd38f;
850 }
851
852 div.color4 h3 {
853   background: #ccd38f;
854   border-bottom: 1px solid #ccd38f;
855 }
856
857 .keep-bullets ul {
858   list-style-type: disc;
859   padding: 0;
860   margin: 0.5em 1.5em;
861 }
862
863 .keep-bullets li {
864   padding: 0;
865 }
866
867 .warning {
868   background: #eef;
869   text-align: left;
870   padding: 0;
871   border: 1px solid green;
872   /* Experimental rounded corners */
873   -moz-border-radius: 10px;
874   -webkit-border-radius: 10px;
875   margin: 1em;
876 }
877
878 .warning p {
879   padding: 0.5em;
880   margin: 0;
881 }
882
883 .hide {
884   position: relative;
885   text-indent: -999em;
886   height: 0;
887   overflow: hidden;
888 }
889
890 .help {
891   background: #f77;
892   color: black;
893   text-align: center;
894   font-weight: bold;
895   width: 75%;
896   padding: 1em;
897   border: 10px dotted green;
898   margin: 1em auto;
899 }
900
901 .legal {
902   font-size: 0.6em;
903 }
904
905
906 /* kill title, probably best done in the init file, though */
907 h1.settitle {
908   position: relative;
909   height: 0;
910   text-indent: -999em;
911   padding: 0;
912   margin: 0;
913   overflow: hidden;
914 }