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