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 #main > a:first-child {
 286   position: absolute;
 287   top: -10em;
 288 }
 289
 290 div#pageHeader {
 291   width: 100%;
 292   height: 10em;
 293   padding-top: 2em;
 294   border: solid #ddd;
 295   border-width: 0;
 296   margin: 0 0 1.4em 0;
 297 }
 298
 299 #pageHeader .heading {
 300   font-size: 4em;
 301   text-align: left;
 302   padding: 0;
 303   margin: 0 0 0 340px;
 304 }
 305
 306 #pageHeader p {
 307   font-size: 1.2em;
 308   font-style: italic;
 309   text-align: left;
 310   padding: 0;
 311   margin: 0 0 0 340px;
 312 }
 313
 314 div#lilylogo {
 315   position: absolute;
 316   top: 0;
 317   left: 0;
 318 }
 319
 320 div#cmws {
 321   position: absolute;
 322   top: 0;
 323   left: 50%;
 324 }
 325
 326 div#quickSummary {
 327   text-align: left;
 328   margin: 3em 14em 25px 0;
 329   font-size: 19px;
 330 }
 331
 332 #quickSummary p {
 333   padding: 0.5em;
 334   margin: 0;
 335 }
 336
 337 div#news {
 338   padding: 0;
 339   margin: 0 14em 1em 0;
 340 }
 341
 342 /* .news-item is styled below with columns */
 343
 344 .testimonial-item {
 345   /* Not sure how to style the testimonials */
 346   clear: both;
 347   margin: 2em 0;
 348 }
 349
 350 .testimonial-item .subsubheading {
 351   text-align: left;
 352   padding: 0 0 0 0.5em;
 353 }
 354
 355 .testimonial-item img.float-left,
 356 .testimonial-item img.float-right {
 357   margin: 1em 1em 2em;
 358 }
 359
 360 .testimonial-item p {
 361   padding: 0 0.5em;
 362 }
 363
 364 div#homePageSideBar {
 365   position: absolute;
 366   top: 0;
 367   right: 0;
 368   width: 12em;
 369   text-align: left;
 370 }
 371
 372 #homePageSideBar .subheading {
 373   font-size: 15.2px;
 374   background: #5b7f64;
 375   color: #fff;
 376   padding: 0.2em 0.5em 0em 0.7em;
 377   margin: 0;
 378   border-radius: 5px;
 379 }
 380
 381 #homePageSideBar p,
 382 #pondingsText {
 383   padding: 0.7em 0.5em;
 384   margin: 0;
 385 }
 386
 387 /* for better spacing between "download" and "manuals" links */
 388 #homePageSideBar p:nth-of-type(2n) {
 389   padding-top: 0;
 390   margin-top: -3px;
 391 }
 392
 393 div#footer {
 394   clear: both;
 395   width: 100%;
 396   border-top: 10px solid #5b7f64;
 397 }
 398
 399 div#language {
 400   position: absolute;
 401   top: 0;
 402   left: 0;
 403   right: 50%;
 404   width: 50%;
 405   text-indent: 0.5em;
 406   padding: 0;
 407 }
 408
 409 #language h3 {
 410   padding: 0;
 411   border-bottom: 10px solid #5b7f64;
 412   margin: 0;
 413 }
 414
 415 #language p {
 416   padding: 0;
 417   margin: 0.25em 0 0 0;
 418 }
 419
 420 /* used on website; not certain about the above ones.
 421     see Issue 1105 */
 422 p#languages {
 423   float: left;
 424   width: 45%;
 425   padding: 0.7em;
 426   margin: 0;
 427   text-align: left;
 428 }
 429
 430 #verifier_texinfo {
 431   font-size: 0.8em;
 432   float: right;
 433   width: 48%;
 434   padding: 0.5em;
 435 }
 436
 437 #verifier_texinfo h3 {
 438   position: relative;
 439   height: 0;
 440   text-indent: -9999em;
 441   padding: 0;
 442   margin: 0;
 443 }
 444
 445 #verifier_texinfo img {
 446   vertical-align: middle;
 447   padding: 0;
 448   margin: 0 0 0 0.5em;
 449 }
 450
 451 #verifier_texinfo p {
 452   clear: right;
 453   text-align: right;
 454   padding: 0;
 455   margin: 0;
 456 }
 457
 458 h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
 459   position: relative;
 460   height: 0;
 461   text-indent: -999em;
 462   padding: 0;
 463   margin: 0;
 464   overflow: hidden;
 465 }
 466
 467 table {
 468   text-align: left;
 469   padding: 0 0 0 0.5em;
 470   border-left: 3px solid #5b7f64;
 471   margin: 1em 0 0 1em;
 472 }
 473
 474 table td {
 475   padding: 0.4em;
 476 }
 477
 478 table a {
 479   text-align: left;
 480 }
 481
 482 .verbatim {
 483   margin: 10px;
 484 }
 485
 486 .float-left {
 487   float: left;
 488 }
 489
 490 .float-center {
 491   text-align: center;
 492   display: block;
 493   margin: 0 auto;
 494 }
 495
 496 .float-right {
 497   float: right;
 498 }
 499
 500 img.float-left,
 501 img.float-right {
 502   background: #fff;
 503   padding: 1em;
 504   border: 1px solid #bbb;
 505   margin: 0.1em 0.5em;
 506 }
 507
 508 div.float-left a.clickable,
 509 div.float-center a.clickable,
 510 div.float-right a.clickable {
 511   text-decoration: overline;
 512   margin-left: 1em;
 513 }
 514
 515 .clear-both {
 516   clear: both;
 517 }
 518
 519 .align-right {
 520   text-align: right;
 521 }
 522
 523 .heading-center {
 524   text-align: center;
 525   width: 75%;
 526   margin: 0 auto;
 527 }
 528
 529 .heading-center h2 {
 530   padding: 0.25em 0;
 531   margin: 0;
 532 }
 533
 534 /* Columns */
 535
 536 /* color1 */
 537 .column-center-top {
 538   float: left;
 539   width: 99.5%;
 540   text-align: left;
 541   border: 1px solid #9ccc7c;
 542   margin: 1em auto;
 543 }
 544
 545 .column-center-middle-color2,
 546 .column-center-middle-color3,
 547 .news-item {
 548   clear: both;
 549   float: left;
 550   width: 99.5%;
 551   text-align: left;
 552   margin: 1em auto;
 553 }
 554
 555 .column-left-top {
 556   float: left;
 557   width: 49%;
 558   margin: 1em 0;
 559 }
 560
 561 .column-left-bottom {
 562   clear: both;
 563   float: left;
 564   width: 49%;
 565   margin: 1em 0;
 566 }
 567
 568 .column-right-top {
 569   float: right;
 570   width: 49%;
 571   margin: 1em 0;
 572 }
 573
 574 .column-right-bottom {
 575   float: right;
 576   width: 49%;
 577   margin: 1em 0;
 578 }
 579
 580 /* color2 */
 581 .column-left-top,
 582 .column-left-bottom,
 583 .column-center-middle-color2,
 584 .news-item {
 585   border: 1px solid #adce82;
 586 }
 587
 588 /* color3 */
 589 .column-right-top,
 590 .column-right-bottom,
 591 .column-center-middle-color3 {
 592   border: 1px solid #bdd088;
 593 }
 594
 595 /* color4 */
 596 .column-center-bottom {
 597   clear: both;
 598   float: left;
 599   width: 99.5%;
 600   text-align: center;
 601   border: 1px solid #ccd38f;
 602   margin: 1em auto 0;
 603 }
 604
 605 .column-center-top,
 606 .column-center-middle-color2,
 607 .column-center-middle-color3,
 608 .column-center-bottom,
 609 .column-left-top,
 610 .column-left-bottom,
 611 .column-right-top,
 612 .column-right-bottom,
 613 .news-item {
 614   background: #f5fffa;
 615   border-radius: 5px;
 616 }
 617
 618 /* color1 */
 619 .column-center-top h3 {
 620   background: #9ccc7c;
 621   background: linear-gradient(to top,
 622     rgb(140, 210, 118),
 623     rgb(212, 242, 201));
 624   text-align: left;
 625   border-bottom: 1px solid #9ccc7c;
 626 }
 627
 628 /* color2 */
 629 .column-left-top h3,
 630 .column-left-bottom h3,
 631 .column-center-middle-color2 h3,
 632 .news-item h3 {
 633   background: #adce82;
 634   background: linear-gradient(to top,
 635     rgb(173, 206, 130),
 636     rgb(221, 243, 204));
 637   border-bottom: 1px solid #adce82;
 638 }
 639
 640 .news-item h3 {
 641   font-size: 15.2px;
 642 }
 643
 644 /* color3 */
 645 .column-right-top h3,
 646 .column-right-bottom h3,
 647 .column-center-middle-color3 h3 {
 648   background: #bdd088;
 649   background: linear-gradient(to top,
 650     rgb(189, 208, 136),
 651     rgb(231, 243, 207));
 652   border-bottom: 1px solid #bdd088;
 653 }
 654
 655 /* color4 */
 656 .column-center-bottom h3 {
 657   background: #ccd38f;
 658   background: linear-gradient(to top,
 659     rgb(204, 211, 143),
 660     rgb(237, 244, 208));
 661   text-align: left;
 662   border-bottom: 1px solid #ccd38f;
 663 }
 664
 665 .column-center-top h3,
 666 .column-center-middle-color2 h3,
 667 .column-center-middle-color3 h3,
 668 .column-center-bottom h3,
 669 .column-left-top h3,
 670 .column-left-bottom h3,
 671 .column-right-top h3,
 672 .column-right-bottom h3,
 673 .news-item h3 {
 674   text-align: left;
 675   padding: 3px 0.5em 0;
 676   margin: 0;
 677   border-top-left-radius: 5px;
 678   border-top-right-radius: 5px;
 679 }
 680
 681 .column-center-top h4,
 682 .column-center-middle-color2 h4,
 683 .column-center-middle-color3 h4,
 684 .column-center-bottom h4,
 685 .column-left-top h4,
 686 .column-left-bottom h4,
 687 .column-right-top h4,
 688 .column-right-bottom h4 {
 689   text-align: left;
 690   padding: 0.5em 0.5em 0;
 691   margin: 0 0 0.5em 0;
 692 }
 693
 694 .column-center-top ul,
 695 .column-center-middle-color2 ul,
 696 .column-center-middle-color3 ul,
 697 .column-center-bottom ul,
 698 .column-left-top ul,
 699 .column-left-bottom ul,
 700 .column-right-top ul,
 701 .column-right-bottom ul {
 702   list-style-type: none;
 703   padding: 0;
 704   margin: 0.5em 0;
 705 }
 706
 707 .column-center-top li,
 708 .column-center-middle-color2 li,
 709 .column-center-middle-color3 li,
 710 .column-center-bottom li,
 711 .column-left-top li,
 712 .column-left-bottom li,
 713 .column-right-top li,
 714 .column-right-bottom li {
 715   text-align: left;
 716   padding: 0 0.5em 0;
 717   margin: 0 0 0.5em 0;
 718 }
 719
 720 .column-center-top p,
 721 .column-center-middle-color2 p,
 722 .column-center-middle-color3 p,
 723 .column-center-bottom p,
 724 .column-left-top p,
 725 .column-left-bottom p,
 726 .column-right-top p,
 727 .column-right-bottom p {
 728   text-align: left;
 729 }
 730
 731 .column-center-top img.float-left,
 732 .column-center-top img.float-right,
 733 .column-center-middle-color2 img.float-left,
 734 .column-center-middle-color2 img.float-right,
 735 .column-center-middle-color3 img.float-left,
 736 .column-center-middle-color3 img.float-right,
 737 .column-center-bottom img.float-left,
 738 .column-center-bottom img.float-right,
 739 .column-left-top img.float-left,
 740 .column-left-top img.float-right,
 741 .column-left-bottom img.float-left,
 742 .column-left-bottom img.float-right,
 743 .column-right-top img.float-left,
 744 .column-right-top img.float-right,
 745 .column-right-bottom img.float-left,
 746 .column-right-bottom img.float-right {
 747   margin: 0.5em;
 748 }
 749
 750 .keep-bullets ul {
 751   list-style-type: disc;
 752   padding: 0;
 753   margin: 0.5em 1.5em;
 754 }
 755
 756 .keep-bullets li {
 757   padding: 0;
 758 }
 759
 760 .normal-table table {
 761   padding : 0em;
 762   border-left: 2px;
 763   margin: 0em;
 764   width: 67%;
 765 }
 766
 767 .normal-table table td {
 768   padding: 0em;
 769 }
 770
 771 .normal-table table a {
 772 }
 773
 774 .normal-table p {
 775   line-height: 0.8;
 776 }
 777
 778 .example {
 779   position: relative;
 780   left: -2.5em;
 781   text-align: left;
 782 }
 783
 784 .h-scroll-auto {
 785   position: relative;
 786   left: 1em;
 787   width: 250px;
 788   overflow: auto;
 789 }
 790
 791 .warning,
 792 .contactBox {
 793   background: #eef;
 794   text-align: left;
 795   margin: 1em;
 796   padding: 0;
 797   border: 1px solid rgb(160, 160, 175);
 798   border-radius: 5px;
 799 }
 800
 801 .contactBox {
 802   float: left;
 803 }
 804
 805 .warning p,
 806 .contactBox p {
 807   padding: 0.5em;
 808   margin: 0;
 809 }
 810
 811 .hide {
 812   position: relative;
 813   text-indent: -999em;
 814   height: 0;
 815   overflow: hidden;
 816 }
 817
 818 .help {
 819   background: #f77;
 820   color: black;
 821   text-align: center;
 822   font-weight: bold;
 823   width: 75%;
 824   padding: 1em;
 825   border: 10px dotted green;
 826   margin: 1em auto;
 827 }
 828
 829 .legal {
 830   font-size: 0.6em;
 831 }
 832
 833 .link-headings a {
 834   font-weight: bold;
 835 }
 836
 837 .detail {
 838   font-size: 0.8em;
 839 }
 840
 841 .detail a {
 842   font-weight: normal;
 843 }
 844
 845 /* kill title, probably best done in the init file, though */
 846 h1.settitle {
 847   position: relative;
 848   height: 0;
 849   text-indent: -999em;
 850   padding: 0;
 851   margin: 0;
 852   overflow: hidden;
 853 }