]> git.donarmstrong.com Git - lilypond.git/blob - Documentation/css/lilypond-website.css
Merge branch 'master' of git://git.savannah.gnu.org/lilypond.git
[lilypond.git] / Documentation / css / lilypond-website.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 }
178
179 #tocframe li.toc_current a,
180 #tocframe li.toc_current a:hover {
181   background: url(../pictures/nav-active.png);
182   color: #fff;
183   text-decoration: underline;
184 }
185
186 /* second level toc (unnumberedsec) */
187 #tocframe .toc .toc {
188   position: absolute;
189   top: 3.8em;
190   left: 0.5%;
191   right: 0.5%;
192   font-size: 82%;
193   padding: 0;
194   margin: 0;
195 }
196
197 #tocframe .toc .toc li {
198   display: inline;
199   padding: 0;
200   margin: 0;
201 }
202
203 #tocframe .toc .toc li:first-child a {
204   -moz-border-radius-topleft: 7px;
205   -moz-border-radius-bottomleft: 7px;
206   -webkit-border-top-left-radius: 7px;
207   -webkit-border-bottom-left-radius: 7px;
208 }
209
210 #tocframe .toc .toc li:last-child a {
211   -moz-border-radius-topright: 7px;
212   -moz-border-radius-bottomright: 7px;
213   -webkit-border-top-right-radius: 7px;
214   -webkit-border-bottom-right-radius: 7px;
215 }
216
217 #tocframe .toc .toc li a {
218   float: left;
219   width: auto;
220   background: #ceffae;
221   line-height: 2;
222   color: #000;
223   text-decoration: none;
224   text-indent: 0;
225   font-weight: normal;
226   padding: 0 0.5em;
227   margin: 0;
228 }
229
230 #tocframe .toc .toc li a:hover {
231   background: #bdee9d;
232 }
233
234 /* colored second-level TOC items */
235 #tocframe .toc .toc li.color1 a {
236   background: #9ccc7c url(../pictures/color1-bg.png) repeat-x top left;
237 }
238
239 #tocframe .toc .toc li.color2 a {
240   background: #bbcf81 url(../pictures/color2-bg.png) repeat-x top left;
241 }
242
243 #tocframe .toc .toc li.color3 a {
244   background: #dbd286 url(../pictures/color3-bg.png) repeat-x top left;
245 }
246
247 #tocframe .toc .toc li.color4 a {
248   background: #fad58c url(../pictures/color4-bg.png) repeat-x top left;
249 }
250
251 #tocframe .toc .toc li.colorDefault a {
252   background: #8cbc6c url(../pictures/nav-bg-2.png) repeat-x top left;
253   color: #fff;
254 }
255
256 #tocframe .toc .toc li.colorDefault a:hover {
257   background: #8cbc6c url(../pictures/nav-hover-2.png) repeat-x top left;
258   color: #fff;
259 }
260
261 #tocframe .toc .toc li.color1 a:hover {
262   background: #addd8d url(../pictures/color1-hover.png) repeat-x top left;
263 }
264
265 #tocframe .toc .toc li.color2 a:hover {
266   background: #ccdf92 url(../pictures/color2-hover.png) repeat-x top left;
267 }
268
269 #tocframe .toc .toc li.color3 a:hover {
270   background: #ece297 url(../pictures/color3-hover.png) repeat-x top left;
271 }
272
273 #tocframe .toc .toc li.color4 a:hover {
274   background: #fbe69d url(../pictures/color4-hover.png) repeat-x top left;
275 }
276
277 #tocframe .toc .toc li.toc_current a,
278 #tocframe .toc .toc li.toc_current a:hover {
279   color: #000;
280   text-decoration: underline;
281 }
282
283 #tocframe .toc .toc li.colorDefault.toc_current a,
284 #tocframe .toc .toc li.colorDefault.toc_current a:hover {
285   background: #8cbc6c url(../pictures/nav-active-2.png) repeat-x top left;
286   color: #fff;
287   text-decoration: underline;
288 }
289
290 #tocframe .toc .toc li.color1.toc_current a,
291 #tocframe .toc .toc li.color1.toc_current a:hover {
292   background: #beee9e url(../pictures/color1-active.png) repeat-x top left;
293 }
294
295 #tocframe .toc .toc li.color2.toc_current a,
296 #tocframe .toc .toc li.color2.toc_current a:hover {
297   background: #ddefa3 url(../pictures/color2-active.png) repeat-x top left;
298 }
299
300 #tocframe .toc .toc li.color3.toc_current a,
301 #tocframe .toc .toc li.color3.toc_current a:hover {
302   background: #fdf4a8 url(../pictures/color3-active.png) repeat-x top left;
303 }
304
305 #tocframe .toc .toc li.color4.toc_current a,
306 #tocframe .toc .toc li.color4.toc_current a:hover {
307   background: #fcf7ae url(../pictures/color4-active.png) repeat-x top left;
308 }
309
310 /* third level toc (unnumberedsubsec) */
311 #tocframe .toc .toc .toc {
312   position: absolute;
313   top: 2em;
314   left: 5%;
315   font-size: 100%;
316 }
317
318 #tocframe .toc .toc .toc li {
319   display: inline;
320   padding: 0;
321   margin: 0;
322 }
323
324 #tocframe .toc .toc .toc li a {
325   float: left;
326   width: auto;
327   background: #ceffae;
328   text-decoration: none;
329   text-indent: 0;
330   font-weight: normal;
331   padding: 0 0.75em;
332   margin: 0;
333 }
334
335 #tocframe .toc .toc .toc li a:hover {
336   background: #bdee9d;
337 }
338
339 #tocframe .toc .toc .toc li.toc_current a {
340   background: #acdd8c;
341 }
342
343 #tocframe .toc .toc .toc li.toc_current a:hover {
344   background: #acdd8c;
345 }
346
347 /* Divs */
348 div#main {
349   position: relative;
350   /* this value may need to be adjusted */
351   top: 7.7em;
352   left: 0;
353   right: 0;
354   width: 100%;
355   max-width: 70em;
356   margin: 0 auto 11.7em;
357   /* Necessary to stretch over floated content;
358    * will cause scrollbars to appear for content
359    * that is wider than the width of this div.
360    *
361    * FIXME: This breaks Konqueror 3 and 4.
362    */
363   overflow: auto;
364 }
365
366 /* FIXME: does not work in IE<=6 */
367 #main > a:first-child {
368   position: absolute;
369   top: -10em;
370 }
371
372 div#pageHeader {
373   width: 100%;
374   height: 10em;
375   padding-top: 2em;
376   border: solid #ddd;
377   border-width: 0;
378   margin: 0 0 1.4em 0;
379 }
380
381 #pageHeader .heading {
382   font-size: 4em;
383   text-align: left;
384   padding: 0;
385   margin: 0 0 0 340px;
386 }
387
388 #pageHeader p {
389   font-size: 1.2em;
390   font-style: italic;
391   text-align: left;
392   padding: 0;
393   margin: 0 0 0 340px;
394 }
395
396 div#lilylogo {
397   position: absolute;
398   top: 0;
399   left: 0;
400 }
401
402 div#cmws {
403   position: absolute;
404   top: 0;
405   left: 50%;
406 }
407
408 div#quickSummary {
409   text-align: left;
410   margin: 4em 13em 0 0;
411 }
412
413 #quickSummary .subheading {
414   background: #fff url(../pictures/summary-gradient.png) repeat-y 0 0;
415   color: #fff;
416   padding: 0 0.5em;
417   margin: 0;
418 }
419
420 #quickSummary p {
421   padding: 0.5em;
422   margin: 0;
423 }
424
425 div.separator {
426   background: transparent url(../pictures/squiggle.jpg) no-repeat 40% 60%;
427   height: 36px;
428   clear: both;
429   padding: 10px;
430 }
431
432 div#news {
433   padding: 0;
434   margin: 0 13em 1em 0;
435 }
436
437 div.news-item {
438 }
439
440 .news-item .subsubheading {
441   text-align: left;
442   padding: 0 0 0 0.5em;
443   border-bottom: 1px solid #5b7f64;
444   margin: 0;
445   overflow: hidden;
446 }
447
448 .testimonial-item {
449   /* Not sure how to style the testimonials */
450   clear: both;
451   margin: 2em 0;
452 }
453
454 .testimonial-item .subsubheading {
455   text-align: left;
456   padding: 0 0 0 0.5em;
457 }
458
459 .testimonial-item img.float-left,
460 .testimonial-item img.float-right {
461   margin: 1em 1em 2em;
462 }
463
464 .testimonial-item p {
465   padding: 0 0.5em;
466 }
467
468 .news-item p {
469   text-align: left;
470   padding: 0.5em;
471   margin: 0;
472 }
473
474 div#latestVersion {
475   position: absolute;
476   top: 12.4em;
477   right: 0;
478   width: 12em;
479   text-align: center;
480   border-left: 1px solid #5b7f64;
481 }
482
483 #latestVersion .subheading {
484   background: #5b7f64;
485   color: #fff;
486   text-align: center;
487   padding: 0 0.5em;
488   margin: 0;
489 }
490
491 /* this might not work in certain browsers */
492 a[name="Stable"] + h4 {
493   background: #bdee9d url(../pictures/color1-bg.png) repeat-x top left;
494 }
495
496 /* this might not work in certain browsers */
497 a[name="Unstable"] + h4 {
498   background: #fad58c url(../pictures/color3-bg.png) repeat-x top left;
499 }
500
501 #latestVersion .subsubheading {
502   padding: 0.08em 0.25em;
503   border-bottom: 1px solid #5b7f64;
504   margin: 0;
505 }
506
507 #latestVersion p {
508   font-size: 90%;
509   padding: 0.5em;
510   margin: 0;
511 }
512
513 div#footer {
514   clear: both;
515   width: 100%;
516   border-top: 10px solid #5b7f64;
517 }
518
519 div#language {
520   position: absolute;
521   top: 0;
522   left: 0;
523   right: 50%;
524   width: 50%;
525   text-indent: 0.5em;
526   padding: 0;
527 }
528
529 #language h3 {
530   padding: 0;
531   border-bottom: 10px solid #5b7f64;
532   margin: 0;
533 }
534
535 #language p {
536   padding: 0;
537   margin: 0.25em 0 0 0;
538 }
539
540 /* used on website; not certain about the above ones.
541     see Issue 1105 */
542 p#languages {
543   float: left;
544   width: 45%;
545   padding: 0.7em;
546   margin: 0;
547   text-align: left;
548 }
549
550 #verifier_texinfo {
551   font-size: 0.8em;
552   float: right;
553   width: 48%;
554   padding: 0.5em;
555 }
556
557 #verifier_texinfo h3 {
558   position: relative;
559   height: 0;
560   text-indent: -9999em;
561   padding: 0;
562   margin: 0;
563 }
564
565 #verifier_texinfo img {
566   vertical-align: middle;
567   padding: 0;
568   margin: 0 0 0 0.5em;
569 }
570
571 #verifier_texinfo p {
572   clear: right;
573   text-align: right;
574   padding: 0;
575   margin: 0;
576 }
577
578 h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
579   position: relative;
580   height: 0;
581   text-indent: -999em;
582   padding: 0;
583   margin: 0;
584   overflow: hidden;
585 }
586
587 table {
588   text-align: left;
589   padding: 0 0 0 0.5em;
590   border-left: 3px solid green;
591   margin: 1em 0 0 1em;
592 }
593
594 table td {
595   padding: 0.4em;
596 }
597
598 table a {
599   text-align: left;
600 }
601
602 .verbatim {
603   margin: 10px;
604 }
605
606 .float-left {
607   float: left;
608 }
609
610 .float-center {
611   text-align: center;
612   display: block;
613   margin: 0 auto;
614 }
615
616 .float-right {
617   float: right;
618 }
619
620 img.float-left,
621 img.float-right {
622   background: #fff;
623   padding: 1em;
624   border: 1px solid #bbb;
625   margin: 0.1em 0.5em;
626 }
627
628 div.float-left a.clickable,
629 div.float-center a.clickable,
630 div.float-right a.clickable {
631   text-decoration: overline;
632   margin-left: 1em;
633 }
634
635 .clear-both {
636   clear: both;
637 }
638
639 .align-right {
640   text-align: right;
641 }
642
643 .heading-center {
644   text-align: center;
645   width: 75%;
646   margin: 0 auto;
647 }
648
649 .heading-center h2 {
650   padding: 0.25em 0;
651   margin: 0;
652 }
653
654 /* Columns */
655 .column-center-top {
656   float: left;
657   width: 99.5%;
658   text-align: left;
659   border: 1px solid #9ccc7c;
660   margin: 1em auto;
661 }
662
663 /* color1 */
664 .column-center-top h3 {
665   background: #9ccc7c url(../pictures/color1-bg.png) repeat-x top left;
666   text-align: left;
667   border-bottom: 1px solid #9ccc7c;
668 }
669
670 .column-left-top {
671   float: left;
672   width: 49%;
673   margin: 1em 0;
674 }
675
676 .column-left-bottom {
677   clear: both;
678   float: left;
679   width: 49%;
680   margin: 1em 0;
681 }
682
683 .column-left-top,
684 .column-left-bottom {
685   border: 1px solid #adce82;
686 }
687
688 /* color2 */
689 .column-left-top h3,
690 .column-left-bottom h3 {
691   background: #adce82 url(../pictures/color2-bg.png) repeat-x top left;
692   border-bottom: 1px solid #adce82;
693 }
694
695 .column-right-top {
696   float: right;
697   width: 49%;
698   margin: 1em 0;
699 }
700
701 .column-right-bottom {
702   float: right;
703   width: 49%;
704   margin: 1em 0;
705 }
706
707 .column-right-top,
708 .column-right-bottom {
709   border: 1px solid #bdd088;
710 }
711
712 /* color3 */
713 .column-right-top h3,
714 .column-right-bottom h3 {
715   background: #bdd088 url(../pictures/color3-bg.png) repeat-x top left;
716   border-bottom: 1px solid #bdd088;
717 }
718
719 .column-center-bottom {
720   clear: both;
721   width: 99.5%;
722   text-align: center;
723   border: 1px solid #ccd38f;
724   margin: 1em auto 0;
725 }
726
727 /* color4 */
728 .column-center-bottom h3 {
729   background: #ccd38f url(../pictures/color4-bg.png) repeat-x top left;
730   text-align: left;
731   border-bottom: 1px solid #ccd38f;
732 }
733
734 .column-center-top,
735 .column-center-bottom,
736 .column-left-top,
737 .column-left-bottom,
738 .column-right-top,
739 .column-right-bottom {
740   background: #f5fffa;
741 }
742
743 .column-center-top h3,
744 .column-center-bottom h3,
745 .column-left-top h3,
746 .column-left-bottom h3,
747 .column-right-top h3,
748 .column-right-bottom h3 {
749   text-align: left;
750   padding: 0 0.5em;
751   margin: 0;
752 }
753
754 .column-center-top h4,
755 .column-center-bottom h4,
756 .column-left-top h4,
757 .column-left-bottom h4,
758 .column-right-top h4,
759 .column-right-bottom h4 {
760   text-align: left;
761   padding: 0.5em 0.5em 0;
762   margin: 0 0 0.5em 0;
763 }
764
765 .column-center-top ul,
766 .column-center-bottom ul,
767 .column-left-top ul,
768 .column-left-bottom ul,
769 .column-right-top ul,
770 .column-right-bottom ul {
771   list-style-type: none;
772   padding: 0;
773   margin: 0.5em 0;
774 }
775
776 .column-center-top li,
777 .column-center-bottom li,
778 .column-left-top li,
779 .column-left-bottom li,
780 .column-right-top li,
781 .column-right-bottom li {
782   text-align: left;
783   padding: 0 0.5em 0;
784   margin: 0 0 0.5em 0;
785 }
786
787 .column-center-top p,
788 .column-center-bottom p,
789 .column-left-top p,
790 .column-left-bottom p,
791 .column-right-top p,
792 .column-right-bottom p {
793   text-align: left;
794 }
795
796 .column-center-top img.float-left,
797 .column-center-top img.float-right,
798 .column-center-bottom img.float-left,
799 .column-center-bottom img.float-right,
800 .column-left-top img.float-left,
801 .column-left-top img.float-right,
802 .column-left-bottom img.float-left,
803 .column-left-bottom img.float-right,
804 .column-right-top img.float-left,
805 .column-right-top img.float-right,
806 .column-right-bottom img.float-left,
807 .column-right-bottom img.float-right {
808   margin: 0.5em;
809 }
810
811 /* Centered divs by color */
812 div.color1,
813 div.color2,
814 div.color3,
815 div.color4 {
816   clear: both;
817   width: 99.5%;
818   background: #f5fffa;
819   margin: 1em auto;
820 }
821
822 div.color1 h3,
823 div.color2 h3,
824 div.color3 h3,
825 div.color4 h3 {
826   padding: 0 0.5em;
827   margin: 0;
828 }
829
830 div.color1 {
831   border: 1px solid #9ccc7c;
832   margin: 1em auto;
833 }
834
835 div.color1 h3 {
836   background: #9ccc7c;
837   border-bottom: 1px solid #9ccc7c;
838 }
839
840 div.color2 {
841   border: 1px solid #adce82;
842 }
843
844 div.color2 h3 {
845   background: #adce82;
846   border-bottom: 1px solid #adce82;
847 }
848
849 div.color3 {
850   border: 1px solid #bdd088;
851 }
852
853 div.color3 h3 {
854   background: #bdd088;
855   border-bottom: 1px solid #bdd088;
856 }
857
858 div.color4 {
859   border: 1px solid #ccd38f;
860 }
861
862 div.color4 h3 {
863   background: #ccd38f;
864   border-bottom: 1px solid #ccd38f;
865 }
866
867 .keep-bullets ul {
868   list-style-type: disc;
869   padding: 0;
870   margin: 0.5em 1.5em;
871 }
872
873 .keep-bullets li {
874   padding: 0;
875 }
876
877 .normal-table table {
878   padding : 0em;
879   border-left: 2px;
880   margin: 0em;
881 }
882
883 .normal-table table td {
884   padding: 0em;
885 }
886
887 .normal-table table a {
888 }
889
890 .normal-table p {
891   line-height: 0.8;
892 }
893
894 .example {
895   position: relative;
896   left: -2.5em;
897   text-align: left;
898 }
899
900 .h-scroll-auto {
901   position: relative;
902   left: 1em;
903   width: 250px;
904   overflow: auto;
905 }
906
907 .warning {
908   background: #eef;
909   text-align: left;
910   padding: 0;
911   border: 1px solid green;
912   /* Experimental rounded corners */
913   -moz-border-radius: 10px;
914   -webkit-border-radius: 10px;
915   margin: 1em;
916 }
917
918 .warning p {
919   padding: 0.5em;
920   margin: 0;
921 }
922
923 .contactBox {
924   float: left;
925   background: #eef;
926   text-align: left;
927   border: 1px solid green;
928   padding: 0;
929   margin: 1em;
930 }
931
932 .contactBox p {
933   padding: 0.5em;
934   margin: 0;
935 }
936
937
938 .hide {
939   position: relative;
940   text-indent: -999em;
941   height: 0;
942   overflow: hidden;
943 }
944
945 .help {
946   background: #f77;
947   color: black;
948   text-align: center;
949   font-weight: bold;
950   width: 75%;
951   padding: 1em;
952   border: 10px dotted green;
953   margin: 1em auto;
954 }
955
956 .legal {
957   font-size: 0.6em;
958 }
959
960 .link-headings a {
961   font-weight: bold;
962 }
963
964 .detail {
965   font-size: 0.8em;
966 }
967
968 .detail a {
969   font-weight: normal;
970 }
971
972 /* kill title, probably best done in the init file, though */
973 h1.settitle {
974   position: relative;
975   height: 0;
976   text-indent: -999em;
977   padding: 0;
978   margin: 0;
979   overflow: hidden;
980 }