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.5em 0.5em 0 0.5em;
 367   border-top: 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 }
 403
 404 div#wildCardBox {
 405   position: absolute;
 406   top: 0;
 407   right: 0;
 408 }
 409
 410 div#latestVersion,
 411 div#wildCardBox {
 412   width: 12em;
 413   text-align: center;
 414   border-left: 1px solid #5b7f64;
 415   border-top-left-radius: 5px;
 416 }
 417
 418 #latestVersion .subheading,
 419 #wildCardBox .subheading {
 420   background: #5b7f64;
 421   color: #fff;
 422   text-align: center;
 423   padding: 0 0.5em;
 424   margin: 0;
 425   border-top-left-radius: 5px;
 426   border-top-right-radius: 5px;
 427 }
 428
 429 /* this might not work in certain browsers */
 430 a[name="Stable"] + h4 {
 431   background: #bdee9d;
 432   background: linear-gradient(to top,
 433     rgb(140, 210, 118),
 434     rgb(212, 243, 201));
 435 }
 436
 437 /* this might not work in certain browsers */
 438 a[name="Unstable"] + h4 {
 439   background: #fad58c;
 440   background: linear-gradient(to top,
 441     rgb(183, 213, 131),
 442     rgb(231, 243, 207));
 443 }
 444
 445 #latestVersion .subsubheading {
 446   padding: 0.25em 0.25em 0;
 447   border-bottom: 1px solid #5b7f64;
 448   margin: 0;
 449 }
 450
 451 #latestVersion p {
 452   font-size: 90%;
 453   padding: 0.5em;
 454   margin: 0;
 455 }
 456
 457 div#footer {
 458   clear: both;
 459   width: 100%;
 460   border-top: 10px solid #5b7f64;
 461 }
 462
 463 div#language {
 464   position: absolute;
 465   top: 0;
 466   left: 0;
 467   right: 50%;
 468   width: 50%;
 469   text-indent: 0.5em;
 470   padding: 0;
 471 }
 472
 473 #language h3 {
 474   padding: 0;
 475   border-bottom: 10px solid #5b7f64;
 476   margin: 0;
 477 }
 478
 479 #language p {
 480   padding: 0;
 481   margin: 0.25em 0 0 0;
 482 }
 483
 484 /* used on website; not certain about the above ones.
 485     see Issue 1105 */
 486 p#languages {
 487   float: left;
 488   width: 45%;
 489   padding: 0.7em;
 490   margin: 0;
 491   text-align: left;
 492 }
 493
 494 #verifier_texinfo {
 495   font-size: 0.8em;
 496   float: right;
 497   width: 48%;
 498   padding: 0.5em;
 499 }
 500
 501 #verifier_texinfo h3 {
 502   position: relative;
 503   height: 0;
 504   text-indent: -9999em;
 505   padding: 0;
 506   margin: 0;
 507 }
 508
 509 #verifier_texinfo img {
 510   vertical-align: middle;
 511   padding: 0;
 512   margin: 0 0 0 0.5em;
 513 }
 514
 515 #verifier_texinfo p {
 516   clear: right;
 517   text-align: right;
 518   padding: 0;
 519   margin: 0;
 520 }
 521
 522 h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
 523   position: relative;
 524   height: 0;
 525   text-indent: -999em;
 526   padding: 0;
 527   margin: 0;
 528   overflow: hidden;
 529 }
 530
 531 table {
 532   text-align: left;
 533   padding: 0 0 0 0.5em;
 534   border-left: 3px solid #5b7f64;
 535   margin: 1em 0 0 1em;
 536 }
 537
 538 table td {
 539   padding: 0.4em;
 540 }
 541
 542 table a {
 543   text-align: left;
 544 }
 545
 546 .verbatim {
 547   margin: 10px;
 548 }
 549
 550 .float-left {
 551   float: left;
 552 }
 553
 554 .float-center {
 555   text-align: center;
 556   display: block;
 557   margin: 0 auto;
 558 }
 559
 560 .float-right {
 561   float: right;
 562 }
 563
 564 img.float-left,
 565 img.float-right {
 566   background: #fff;
 567   padding: 1em;
 568   border: 1px solid #bbb;
 569   margin: 0.1em 0.5em;
 570 }
 571
 572 div.float-left a.clickable,
 573 div.float-center a.clickable,
 574 div.float-right a.clickable {
 575   text-decoration: overline;
 576   margin-left: 1em;
 577 }
 578
 579 .clear-both {
 580   clear: both;
 581 }
 582
 583 .align-right {
 584   text-align: right;
 585 }
 586
 587 .heading-center {
 588   text-align: center;
 589   width: 75%;
 590   margin: 0 auto;
 591 }
 592
 593 .heading-center h2 {
 594   padding: 0.25em 0;
 595   margin: 0;
 596 }
 597
 598 /* Columns */
 599
 600 /* color1 */
 601 .column-center-top {
 602   float: left;
 603   width: 99.5%;
 604   text-align: left;
 605   border: 1px solid #9ccc7c;
 606   margin: 1em auto;
 607 }
 608
 609 .column-center-middle-color2,
 610 .column-center-middle-color3 {
 611   clear: both;
 612   width: 99.5%;
 613   text-align: left;
 614   margin: 1em auto;
 615 }
 616
 617 .column-left-top {
 618   float: left;
 619   width: 49%;
 620   margin: 1em 0;
 621 }
 622
 623 .column-left-bottom {
 624   clear: both;
 625   float: left;
 626   width: 49%;
 627   margin: 1em 0;
 628 }
 629
 630 .column-right-top {
 631   float: right;
 632   width: 49%;
 633   margin: 1em 0;
 634 }
 635
 636 .column-right-bottom {
 637   float: right;
 638   width: 49%;
 639   margin: 1em 0;
 640 }
 641
 642 /* color2 */
 643 .column-left-top,
 644 .column-left-bottom,
 645 .column-center-middle-color2 {
 646   border: 1px solid #adce82;
 647 }
 648
 649 /* color3 */
 650 .column-right-top,
 651 .column-right-bottom,
 652 .column-center-middle-color3 {
 653   border: 1px solid #bdd088;
 654 }
 655
 656 /* color4 */
 657 .column-center-bottom {
 658   clear: both;
 659   width: 99.5%;
 660   text-align: center;
 661   border: 1px solid #ccd38f;
 662   margin: 1em auto 0;
 663 }
 664
 665 .column-center-top,
 666 .column-center-middle-color2,
 667 .column-center-middle-color3,
 668 .column-center-bottom,
 669 .column-left-top,
 670 .column-left-bottom,
 671 .column-right-top,
 672 .column-right-bottom {
 673   background: #f5fffa;
 674   border-radius: 5px;
 675 }
 676
 677 /* color1 */
 678 .column-center-top h3 {
 679   background: #9ccc7c;
 680   background: linear-gradient(to top,
 681     rgb(140, 210, 118),
 682     rgb(212, 242, 201));
 683   text-align: left;
 684   border-bottom: 1px solid #9ccc7c;
 685 }
 686
 687 /* color2 */
 688 .column-left-top h3,
 689 .column-left-bottom h3,
 690 .column-center-middle-color2 h3 {
 691   background: #adce82;
 692   background: linear-gradient(to top,
 693     rgb(173, 206, 130),
 694     rgb(221, 243, 204));
 695   border-bottom: 1px solid #adce82;
 696 }
 697
 698 /* color3 */
 699 .column-right-top h3,
 700 .column-right-bottom h3,
 701 .column-center-middle-color3 h3 {
 702   background: #bdd088;
 703   background: linear-gradient(to top,
 704     rgb(189, 208, 136),
 705     rgb(231, 243, 207));
 706   border-bottom: 1px solid #bdd088;
 707 }
 708
 709 /* color4 */
 710 .column-center-bottom h3 {
 711   background: #ccd38f;
 712   background: linear-gradient(to top,
 713     rgb(204, 211, 143),
 714     rgb(237, 244, 208));
 715   text-align: left;
 716   border-bottom: 1px solid #ccd38f;
 717 }
 718
 719 .column-center-top h3,
 720 .column-center-middle-color2 h3,
 721 .column-center-middle-color3 h3,
 722 .column-center-bottom h3,
 723 .column-left-top h3,
 724 .column-left-bottom h3,
 725 .column-right-top h3,
 726 .column-right-bottom h3 {
 727   text-align: left;
 728   padding: 3px 0.5em 0;
 729   margin: 0;
 730   border-top-left-radius: 5px;
 731   border-top-right-radius: 5px;
 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 .contactBox {
 846   background: #eef;
 847   text-align: left;
 848   margin: 1em;
 849   padding: 0;
 850   border: 1px solid rgb(160, 160, 175);
 851   border-radius: 5px;
 852 }
 853
 854 .contactBox {
 855   float: left;
 856 }
 857
 858 .warning p,
 859 .contactBox p {
 860   padding: 0.5em;
 861   margin: 0;
 862 }
 863
 864 .hide {
 865   position: relative;
 866   text-indent: -999em;
 867   height: 0;
 868   overflow: hidden;
 869 }
 870
 871 .help {
 872   background: #f77;
 873   color: black;
 874   text-align: center;
 875   font-weight: bold;
 876   width: 75%;
 877   padding: 1em;
 878   border: 10px dotted green;
 879   margin: 1em auto;
 880 }
 881
 882 .legal {
 883   font-size: 0.6em;
 884 }
 885
 886 .link-headings a {
 887   font-weight: bold;
 888 }
 889
 890 .detail {
 891   font-size: 0.8em;
 892 }
 893
 894 .detail a {
 895   font-weight: normal;
 896 }
 897
 898 /* kill title, probably best done in the init file, though */
 899 h1.settitle {
 900   position: relative;
 901   height: 0;
 902   text-indent: -999em;
 903   padding: 0;
 904   margin: 0;
 905   overflow: hidden;
 906 }