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   top: 0;
 507   right: 0;
 508   left: 50%;
 509 }
 510
 511 #verifier_texinfo h3 {
 512   text-indent: -9999em;
 513   padding: 0;
 514   border-bottom: 10px solid #5b7f64;
 515   margin: 0 0 0.25em 0;
 516 }
 517
 518 #verifier_texinfo img {
 519 /*
 520   float: right;
 521 */
 522   padding: 0;
 523   margin: 0 0.5em 0 0;
 524 }
 525
 526 #verifier_texinfo p {
 527   clear: right;
 528   text-align: right;
 529   font-size: 0.8em;
 530   padding: 0;
 531   margin: 0 0.5em;
 532 }
 533
 534 h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
 535   position: relative;
 536   height: 0;
 537   overflow: hidden;
 538   text-indent: -999em;
 539   padding: 0;
 540   margin: 0;
 541 }
 542
 543 table {
 544   text-align: left;
 545   padding: 0 0 0 0.5em;
 546   border-left: 3px solid green;
 547   margin: 1em 0 0 1em;
 548 }
 549
 550 table td {
 551   padding: 0.4em;
 552 }
 553
 554 table a {
 555   text-align: left;
 556 }
 557
 558 .verbatim {
 559   margin: 10px;
 560 }
 561
 562 .float-left {
 563   float: left;
 564 }
 565
 566 .float-center {
 567   text-align: center;
 568   display: block;
 569   margin: 0 auto;
 570 }
 571
 572 .float-right {
 573   float: right;
 574 }
 575
 576 img.float-left,
 577 img.float-right {
 578   background: #fff;
 579   padding: 1em;
 580   border: 1px solid #bbb;
 581   margin: 0.1em 0.5em;
 582 }
 583
 584 div.float-left a.clickable,
 585 div.float-center a.clickable,
 586 div.float-right a.clickable {
 587   text-decoration: overline;
 588   margin-left: 1em;
 589 }
 590
 591 .clear-both {
 592   clear: both;
 593 }
 594
 595 .align-right {
 596   text-align: right;
 597 }
 598
 599 .heading-center {
 600   text-align: center;
 601   width: 75%;
 602   margin: 0 auto;
 603 }
 604
 605 .heading-center h2 {
 606   padding: 0.25em 0;
 607   margin: 0;
 608 }
 609
 610 /* Columns */
 611
 612 .column-center-top {
 613   float: left;
 614   width: 99.5%;
 615   text-align: center;
 616   border: 1px solid #8bbb6b;
 617   margin: 1em auto;
 618 }
 619
 620 /* color1 */
 621 .column-center-top h3 {
 622   background: #9ccc7c;
 623   text-align: left;
 624   border-bottom: 1px solid #8bbb6b;
 625 }
 626
 627 .column-left-top {
 628   float: left;
 629   width: 49%;
 630   margin: 1em 0;
 631 }
 632
 633 .column-left-bottom {
 634   clear: both;
 635   float: left;
 636   width: 49%;
 637   margin: 1em 0;
 638 }
 639
 640 .column-left-top,
 641 .column-left-bottom {
 642   border: 1px solid #aabe70;
 643 }
 644
 645 /* color2 */
 646 .column-left-top h3,
 647 .column-left-bottom h3 {
 648   background: #bbcf81;
 649   border-bottom: 1px solid #aabe70;
 650 }
 651
 652 .column-right-top {
 653   float: right;
 654   width: 49%;
 655   margin: 1em 0;
 656 }
 657
 658 .column-right-bottom {
 659   float: right;
 660   width: 49%;
 661   margin: 1em 0;
 662 }
 663
 664 .column-right-top,
 665 .column-right-bottom {
 666   border: 1px solid #cac175;
 667 }
 668
 669 /* color3 */
 670 .column-right-top h3,
 671 .column-right-bottom h3 {
 672   background: #dbd286;
 673   border-bottom: 1px solid #cac175;
 674 }
 675
 676 .column-center-bottom {
 677   clear: both;
 678   width: 99.5%;
 679   text-align: center;
 680   border: 1px solid #e9c47b;
 681   margin: 1em auto 0;
 682 }
 683
 684 /* color4 */
 685 .column-center-bottom h3 {
 686   background: #fad58c;
 687   text-align: left;
 688   border-bottom: 1px solid #e9c47b;
 689 }
 690
 691 .column-center-top,
 692 .column-center-bottom,
 693 .column-left-top,
 694 .column-left-bottom,
 695 .column-right-top,
 696 .column-right-bottom {
 697   background: #f5fffa;
 698 }
 699
 700 .column-center-top h3,
 701 .column-center-bottom h3,
 702 .column-left-top h3,
 703 .column-left-bottom h3,
 704 .column-right-top h3,
 705 .column-right-bottom h3 {
 706   padding: 0 0.5em;
 707   margin: 0;
 708 }
 709
 710 .column-center-top h4,
 711 .column-center-bottom h4,
 712 .column-left-top h4,
 713 .column-left-bottom h4,
 714 .column-right-top h4,
 715 .column-right-bottom h4 {
 716   padding: 0.5em 0.5em 0;
 717   margin: 0 0 0.5em 0;
 718 }
 719
 720 .column-center-top ul,
 721 .column-center-bottom ul,
 722 .column-left-top ul,
 723 .column-left-bottom ul,
 724 .column-right-top ul,
 725 .column-right-bottom ul {
 726   list-style-type: none;
 727   padding: 0;
 728   margin: 0.5em 0;
 729 }
 730
 731 .column-center-top li,
 732 .column-center-bottom li,
 733 .column-left-top li,
 734 .column-left-bottom li,
 735 .column-right-top li,
 736 .column-right-bottom li {
 737   text-align: left;
 738   padding: 0 0.5em 0;
 739   margin: 0 0 0.5em 0;
 740 }
 741
 742 .column-center-top p,
 743 .column-center-bottom p,
 744 .column-left-top p,
 745 .column-left-bottom p,
 746 .column-right-top p,
 747 .column-right-bottom p {
 748   text-align: left;
 749 }
 750
 751 .column-center-top img.float-left,
 752 .column-center-top img.float-right,
 753 .column-center-bottom img.float-left,
 754 .column-center-bottom img.float-right,
 755 .column-left-top img.float-left,
 756 .column-left-top img.float-right,
 757 .column-left-bottom img.float-left,
 758 .column-left-bottom img.float-right,
 759 .column-right-top img.float-left,
 760 .column-right-top img.float-right,
 761 .column-right-bottom img.float-left,
 762 .column-right-bottom img.float-right {
 763   margin: 0.5em;
 764 }
 765
 766 /* Centered divs by color */
 767
 768 div.color1,
 769 div.color2,
 770 div.color3,
 771 div.color4 {
 772   clear: both;
 773   width: 99.5%;
 774   background: #f5fffa;
 775   margin: 1em auto;
 776 }
 777
 778 div.color1 h3,
 779 div.color2 h3,
 780 div.color3 h3,
 781 div.color4 h3 {
 782   padding: 0 0.5em;
 783   margin: 0;
 784 }
 785
 786 div.color1 {
 787   border: 1px solid #8bbb6b;
 788   margin: 1em auto;
 789 }
 790
 791 div.color1 h3 {
 792   background: #9ccc7c;
 793   border-bottom: 1px solid #8bbb6b;
 794 }
 795
 796 div.color2 {
 797   border: 1px solid #aabe70;
 798 }
 799
 800 div.color2 h3 {
 801   background: #bbcf81;
 802   border-bottom: 1px solid #aabe70;
 803 }
 804
 805 div.color3 {
 806   border: 1px solid #cac175;
 807 }
 808
 809 div.color3 h3 {
 810   background: #dbd286;
 811   border-bottom: 1px solid #cac175;
 812 }
 813
 814 div.color4 {
 815   border: 1px solid #e9c47b;
 816 }
 817
 818 div.color4 h3 {
 819   background: #fad58c;
 820   border-bottom: 1px solid #e9c47b;
 821 }
 822
 823 .keep-bullets ul {
 824   list-style-type: disc;
 825   padding: 0;
 826   margin: 0.5em 1.5em;
 827 }
 828
 829 .keep-bullets li {
 830   padding: 0;
 831 }
 832
 833 .warning {
 834   background: #eef;
 835   text-align: left;
 836   padding: 0;
 837   border: 1px solid green;
 838   /* Experimental rounded corners */
 839   -moz-border-radius: 10px;
 840   -webkit-border-radius: 10px;
 841   margin: 1em;
 842 }
 843
 844 .warning p {
 845   padding: 0.5em;
 846   margin: 0;
 847 }
 848
 849 .hide {
 850   position: relative;
 851   text-indent: -999em;
 852   height: 0;
 853   overflow: hidden;
 854 }
 855
 856 .help {
 857   background: #f77;
 858   color: black;
 859   text-align: center;
 860   font-weight: bold;
 861   width: 75%;
 862   padding: 1em;
 863   border: 10px dotted green;
 864   margin: 1em auto;
 865 }
 866
 867 .legal {
 868   font-size: 0.6em;
 869 }
 870
 871
 872 /* kill title, probably best done in the init file, though */
 873 h1.settitle {
 874   position: relative;
 875   height: 0;
 876   overflow: hidden;
 877   text-indent: -999em;
 878   padding: 0;
 879   margin: 0;
 880 }
 881