Documentation/css/lilypond-web-alt2.css

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