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