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