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
 603 /* color1 */
 604 .column-center-top {
 605   float: left;
 606   width: 99.5%;
 607   text-align: left;
 608   border: 1px solid #9ccc7c;
 609   margin: 1em auto;
 610 }
 611
 612 .column-center-middle-color2,
 613 .column-center-middle-color3 {
 614   clear: both;
 615   width: 99.5%;
 616   text-align: left;
 617   margin: 1em auto;
 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-right-top {
 634   float: right;
 635   width: 49%;
 636   margin: 1em 0;
 637 }
 638
 639 .column-right-bottom {
 640   float: right;
 641   width: 49%;
 642   margin: 1em 0;
 643 }
 644
 645 /* color2 */
 646 .column-left-top,
 647 .column-left-bottom,
 648 .column-center-middle-color2 {
 649   border: 1px solid #adce82;
 650 }
 651
 652 /* color3 */
 653 .column-right-top,
 654 .column-right-bottom,
 655 .column-center-middle-color3 {
 656   border: 1px solid #bdd088;
 657 }
 658
 659 /* color4 */
 660 .column-center-bottom {
 661   clear: both;
 662   width: 99.5%;
 663   text-align: center;
 664   border: 1px solid #ccd38f;
 665   margin: 1em auto 0;
 666 }
 667
 668 .column-center-top,
 669 .column-center-middle-color2,
 670 .column-center-middle-color3,
 671 .column-center-bottom,
 672 .column-left-top,
 673 .column-left-bottom,
 674 .column-right-top,
 675 .column-right-bottom {
 676   background: #f5fffa;
 677 }
 678
 679 /* color1 */
 680 .column-center-top h3 {
 681   background: #9ccc7c;
 682   background: linear-gradient(to top,
 683     rgb(140, 210, 118),
 684     rgb(212, 242, 201));
 685   text-align: left;
 686   border-bottom: 1px solid #9ccc7c;
 687 }
 688
 689 /* color2 */
 690 .column-left-top h3,
 691 .column-left-bottom h3,
 692 .column-center-middle-color2 h3 {
 693   background: #adce82;
 694   background: linear-gradient(to top,
 695     rgb(173, 206, 130),
 696     rgb(221, 243, 204));
 697   border-bottom: 1px solid #adce82;
 698 }
 699
 700 /* color3 */
 701 .column-right-top h3,
 702 .column-right-bottom h3,
 703 .column-center-middle-color3 h3 {
 704   background: #bdd088;
 705   background: linear-gradient(to top,
 706     rgb(189, 208, 136),
 707     rgb(231, 243, 207));
 708   border-bottom: 1px solid #bdd088;
 709 }
 710
 711 /* color4 */
 712 .column-center-bottom h3 {
 713   background: #ccd38f;
 714   background: linear-gradient(to top,
 715     rgb(204, 211, 143),
 716     rgb(237, 244, 208));
 717   text-align: left;
 718   border-bottom: 1px solid #ccd38f;
 719 }
 720
 721 .column-center-top h3,
 722 .column-center-middle-color2 h3,
 723 .column-center-middle-color3 h3,
 724 .column-center-bottom h3,
 725 .column-left-top h3,
 726 .column-left-bottom h3,
 727 .column-right-top h3,
 728 .column-right-bottom h3 {
 729   text-align: left;
 730   padding: 0 0.5em;
 731   margin: 0;
 732 }
 733
 734 .column-center-top h4,
 735 .column-center-middle-color2 h4,
 736 .column-center-middle-color3 h4,
 737 .column-center-bottom h4,
 738 .column-left-top h4,
 739 .column-left-bottom h4,
 740 .column-right-top h4,
 741 .column-right-bottom h4 {
 742   text-align: left;
 743   padding: 0.5em 0.5em 0;
 744   margin: 0 0 0.5em 0;
 745 }
 746
 747 .column-center-top ul,
 748 .column-center-middle-color2 ul,
 749 .column-center-middle-color3 ul,
 750 .column-center-bottom ul,
 751 .column-left-top ul,
 752 .column-left-bottom ul,
 753 .column-right-top ul,
 754 .column-right-bottom ul {
 755   list-style-type: none;
 756   padding: 0;
 757   margin: 0.5em 0;
 758 }
 759
 760 .column-center-top li,
 761 .column-center-middle-color2 li,
 762 .column-center-middle-color3 li,
 763 .column-center-bottom li,
 764 .column-left-top li,
 765 .column-left-bottom li,
 766 .column-right-top li,
 767 .column-right-bottom li {
 768   text-align: left;
 769   padding: 0 0.5em 0;
 770   margin: 0 0 0.5em 0;
 771 }
 772
 773 .column-center-top p,
 774 .column-center-middle-color2 p,
 775 .column-center-middle-color3 p,
 776 .column-center-bottom p,
 777 .column-left-top p,
 778 .column-left-bottom p,
 779 .column-right-top p,
 780 .column-right-bottom p {
 781   text-align: left;
 782 }
 783
 784 .column-center-top img.float-left,
 785 .column-center-top img.float-right,
 786 .column-center-middle-color2 img.float-left,
 787 .column-center-middle-color2 img.float-right,
 788 .column-center-middle-color3 img.float-left,
 789 .column-center-middle-color3 img.float-right,
 790 .column-center-bottom img.float-left,
 791 .column-center-bottom img.float-right,
 792 .column-left-top img.float-left,
 793 .column-left-top img.float-right,
 794 .column-left-bottom img.float-left,
 795 .column-left-bottom img.float-right,
 796 .column-right-top img.float-left,
 797 .column-right-top img.float-right,
 798 .column-right-bottom img.float-left,
 799 .column-right-bottom img.float-right {
 800   margin: 0.5em;
 801 }
 802
 803 .keep-bullets ul {
 804   list-style-type: disc;
 805   padding: 0;
 806   margin: 0.5em 1.5em;
 807 }
 808
 809 .keep-bullets li {
 810   padding: 0;
 811 }
 812
 813 .normal-table table {
 814   padding : 0em;
 815   border-left: 2px;
 816   margin: 0em;
 817   width: 67%;
 818 }
 819
 820 .normal-table table td {
 821   padding: 0em;
 822 }
 823
 824 .normal-table table a {
 825 }
 826
 827 .normal-table p {
 828   line-height: 0.8;
 829 }
 830
 831 .example {
 832   position: relative;
 833   left: -2.5em;
 834   text-align: left;
 835 }
 836
 837 .h-scroll-auto {
 838   position: relative;
 839   left: 1em;
 840   width: 250px;
 841   overflow: auto;
 842 }
 843
 844 .warning {
 845   background: #eef;
 846   text-align: left;
 847   padding: 0;
 848   border: 1px solid green;
 849   /* Experimental rounded corners */
 850   border-radius: 10px;
 851   margin: 1em;
 852 }
 853
 854 .warning p {
 855   padding: 0.5em;
 856   margin: 0;
 857 }
 858
 859 .contactBox {
 860   float: left;
 861   background: #eef;
 862   text-align: left;
 863   border: 1px solid green;
 864   padding: 0;
 865   margin: 1em;
 866 }
 867
 868 .contactBox p {
 869   padding: 0.5em;
 870   margin: 0;
 871 }
 872
 873
 874 .hide {
 875   position: relative;
 876   text-indent: -999em;
 877   height: 0;
 878   overflow: hidden;
 879 }
 880
 881 .help {
 882   background: #f77;
 883   color: black;
 884   text-align: center;
 885   font-weight: bold;
 886   width: 75%;
 887   padding: 1em;
 888   border: 10px dotted green;
 889   margin: 1em auto;
 890 }
 891
 892 .legal {
 893   font-size: 0.6em;
 894 }
 895
 896 .link-headings a {
 897   font-weight: bold;
 898 }
 899
 900 .detail {
 901   font-size: 0.8em;
 902 }
 903
 904 .detail a {
 905   font-weight: normal;
 906 }
 907
 908 /* kill title, probably best done in the init file, though */
 909 h1.settitle {
 910   position: relative;
 911   height: 0;
 912   text-indent: -999em;
 913   padding: 0;
 914   margin: 0;
 915   overflow: hidden;
 916 }