Documentation/css/lilypond-web-alt1.css

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