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