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