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