Documentation/css/lilypond-manuals.css

   1 /**********************************************************/
   2 /*                  GENERAL INFORMATION                   */
   3 /**********************************************************/
   4
   5 /* It has been requested that each web manual be styled using a
   6    different color. To faciliate that, each manual is being
   7    assigned a hue value on the HSB color chart. All specific
   8    colors for a manual will be shades and tints of that hue.
   9
  10    Manual            Color          Hue
  11    learning          green          120
  12    music-glossary
  13    essay
  14
  15    notation          blue           205
  16    usage             yellow         50
  17    snippets
  18
  19    changes
  20    extending         red            0
  21    internals         purple         280
  22
  23    contributor       black          doesn't matter - desat
  24
  25 /**********************************************************/
  26 /*                  PAGE-WIDE SETTINGS                    */
  27 /**********************************************************/
  28
  29 html {
  30   height: 100%;
  31 }
  32
  33 body {
  34   margin: 0 auto;
  35   padding: 0;
  36   height: 100%;
  37   font-size: 100%;
  38   line-height: 1.125;
  39   color: #000;
  40   background-color: #fff;
  41 }
  42
  43 /***********************************************************/
  44 /*                      HEADERS                            */
  45 /***********************************************************/
  46
  47 .chapter, .section, .subsection, .subsubsection,
  48 .appendix, .appendixsec, .appendixsubsec,
  49 .unnumbered, .unnumberedsec, .unnumberedsubsec, .unnumberedsubsubsec,
  50 .subheading, .subsubheading {
  51   color: rgb(32, 74, 135);
  52   padding-bottom: 0.15em;
  53   margin-top: 0.6em;
  54   margin-bottom: 0.6em;
  55 }
  56
  57 .settitle {
  58   background: #657f40;
  59   color: white;
  60   font-size: 2em;
  61   text-align: center;
  62   padding: 0.4em 0.5em;
  63   border: solid black;
  64   border-width: 1px 0;
  65   margin: 0 0 10px 0;
  66 }
  67
  68 body.learning    .settitle { background-color: #407f40; }
  69 body.notation    .settitle { background-color: #40657f; }
  70 body.usage       .settitle { background-color: #7f7f33; }
  71 body.extending   .settitle { background-color: #7f4040; }
  72 body.internals   .settitle { background-color: #6a407f; }
  73 body.contributor .settitle { background-color: #000000; }
  74
  75 .chapter, .appendix, .unnumbered,
  76 .section, .appendixsec, .unnumberedsec,
  77 .subsection, .appendixsubsec, .unnumberedsubsec,
  78 .subsubsection {
  79   font-size: 1.7em;
  80   margin-top: 0.9em;
  81 }
  82
  83 .subheading, .unnumberedsubsubsec {
  84   font-size: 1.5em;
  85   margin-top: 0.9em;
  86 }
  87
  88 .subheading {
  89   border-top: 1px solid rgb(200, 200, 200);
  90   padding-top: 0.8em;
  91 }
  92
  93 .subsubheading {
  94   font-size: 1.15em;
  95   font-weight: bold;
  96   margin-top: 1.6em;
  97 }
  98
  99 .chapheading {
 100   position: absolute;
 101   height: 0;
 102   overflow: hidden;
 103   text-indent: -999em;
 104 }
 105
 106 /***********************************************************/
 107 /*                       LINKS                             */
 108 /***********************************************************/
 109
 110 a:link {
 111   color: #0c51ab;
 112 }
 113
 114 a:visited {
 115   color: #804f01;
 116 }
 117
 118 a:active {
 119   color: #278800;
 120 }
 121
 122 a:hover {
 123   color: #0105ad;
 124 }
 125
 126 /***********************************************************/
 127 /*                  BLOCK FORMATTING                       */
 128 /***********************************************************/
 129
 130 blockquote, .smallexample {
 131   width: 96%;
 132   padding: 0;
 133   border: solid #b1d281;
 134   border-width: 1px 1px 1px 5px;
 135   margin: 1em auto;
 136   background-color: white;
 137 }
 138
 139 body.learning    blockquote, body.learning .smallexample { border-color: #00ff00; }
 140 body.notation    blockquote, body.notation .smallexample { border-color: #0095ff; }
 141 body.usage       blockquote, body.usage .smallexample { border-color: #ffff00; }
 142 body.extending   blockquote, body.extending .smallexample { border-color: #ff0000; }
 143 body.internals   blockquote, body.internals .smallexample { border-color: #aa00ff; }
 144 body.contributor blockquote, body.contributor .smallexample { border-color: #000000; }
 145
 146 blockquote p, pre.smallexample {
 147   padding: 1em;
 148   margin: 0;
 149 }
 150
 151 blockquote blockquote {
 152   border: none;
 153 }
 154
 155 .verbatim, .example, .lisp {
 156   font-size: 1em;
 157   padding: 1em;
 158   margin: 0;
 159 }
 160
 161 #main hr {
 162   height: 0;
 163   padding: 0;
 164   border: 0;
 165   margin: 0;
 166   text-indent: -999em;
 167 }
 168
 169 table.cartouche {
 170   background: #f5f5dc;
 171   width: 85%;
 172   border-collapse: collapse;
 173   padding: 0 0.5em;
 174   border: 2px solid #8f5902;
 175   margin: 0 auto 1em;
 176 }
 177
 178 body.learning    table.cartouche { background-color: #cfe5cf; border: 2px solid #7db27d; }
 179 body.notation    table.cartouche { background-color: #cfdce5; border: 2px solid #7d9cb2; }
 180 body.usage       table.cartouche { background-color: #e5e2b8; border: 2px solid #b2b27d; }
 181 body.extending   table.cartouche { background-color: #e5cfcf; border: 2px solid #b27d7d; }
 182 body.internals   table.cartouche { background-color: #decfe5; border: 2px solid #a17db2; }
 183 body.contributor table.cartouche { background-color: #e5e5e5; border: 2px solid #b2b2b2; }
 184
 185 table.cartouche p {
 186   padding: 1em;
 187   margin: 0;
 188 }
 189
 190 table.cartouche td {
 191   border: none;
 192 }
 193
 194 /***********************************************************/
 195 /*                    MAIN CONTENT                         */
 196 /***********************************************************/
 197
 198 div#main {
 199   position: absolute;
 200   top: 0;
 201   right: 0;
 202   bottom: 0;
 203   left: 27%;
 204   padding: 0;
 205   margin: 0;
 206   overflow: auto;
 207 }
 208
 209 div#main li {
 210   padding: 0 1em 0.5em 0;
 211 }
 212
 213 div#main ul {
 214   margin: 0;
 215   padding-left: 3em;
 216 }
 217
 218 h1, h2, h3, h4, p, table, address, dt {
 219   padding-left: 18px;
 220   padding-right: 18px;
 221 }
 222
 223 p {
 224   margin: 1em 0;
 225 }
 226
 227 #languages {
 228   padding: 0.5em 1em;
 229   margin: 0;
 230 }
 231
 232 pre.menu-comment {
 233   font-size: 1em;
 234   padding-top: 1em;
 235   padding-bottom: 0;
 236   margin: 0;
 237 }
 238
 239 #main .contents li {
 240   padding-bottom: 0;
 241 }
 242
 243 #main .contents > ul {
 244   margin-bottom: 1em;
 245 }
 246
 247 table td {
 248     vertical-align: top;
 249     padding-bottom: .5em;
 250 }
 251
 252 /***********************************************************/
 253 /*                    TOC SIDEBAR                          */
 254 /***********************************************************/
 255
 256 div#tocframe {
 257   position: absolute;
 258   top: 0;
 259   right: 73%;
 260   bottom: 0;
 261   left: 0;
 262   padding: 0;
 263   margin: 0;
 264   overflow: auto;
 265   background: #dce35cf;
 266   z-index: 100;
 267   list-style-type: none;
 268   font-size: 0.83em;
 269   line-height: 1.3;
 270 }
 271
 272 body.learning    div#tocframe { background-color: #cfe5cf; }
 273 body.notation    div#tocframe { background-color: #cfdce5; }
 274 body.usage       div#tocframe { background-color: #e5e5b8; }
 275 body.extending   div#tocframe { background-color: #e5cfcf; }
 276 body.internals   div#tocframe { background-color: #decfe5; }
 277 body.contributor div#tocframe { background-color: #e5e5e5; }
 278
 279 @media screen {
 280   body > div#tocframe {
 281     position: fixed
 282   }
 283 }
 284
 285 div#tocframe a:link, div#tocframe a:visited {
 286   color: black;
 287   text-decoration: none;
 288 }
 289
 290 div#tocframe a:hover {
 291   color: #666666;
 292   text-decoration: underline;
 293 }
 294
 295 div#tocframe p.toc_uplink {
 296   font-size: 1em;
 297   line-height: 1.125;
 298   background: #c9ccc4;
 299   padding: 0.25em 1em 0.25em 0.5em;
 300   border-bottom: 1px solid black;
 301   margin: 0;
 302 }
 303
 304 div#tocframe p.toc_uplink a:link,
 305 div#tocframe p.toc_uplink a:visited {
 306   color: #1c1c1b;
 307 }
 308
 309 div#tocframe p.toc_uplink a:hover {
 310   color: #000;
 311 }
 312
 313 div#tocframe h4 {
 314   font-size: 1em;
 315   line-height: 1.125;
 316   font-weight: bold;
 317   font-style: italic;
 318   padding: 0.75em 0.5em 0 0.5em;
 319   margin: 0;
 320 }
 321
 322 #tocframe .contents {
 323   background-color: transparent;
 324   list-style-type: none;
 325   padding: 0;
 326   border: 0;
 327   margin: 0;
 328 }
 329
 330 #tocframe ul.toc {
 331   padding: 0.25em 0.5em 1em 0.5em;
 332   list-style-type: none;
 333   margin: 0;
 334 }
 335
 336 #tocframe ul.toc ul.toc {
 337   padding: 0;
 338   margin: 0;
 339 }
 340
 341 #tocframe ul.toc li {
 342   padding: 0;
 343   margin: 0;
 344 }
 345
 346 #tocframe ul.toc > li {
 347   font-size: 1em;
 348 }
 349
 350 #tocframe ul.toc li li {
 351   padding-left: 1em;
 352 }
 353
 354 li.toc_current {
 355   font-weight: bold;
 356   font-style: italic;
 357 }
 358
 359 li.toc_current ul {
 360   font-weight: normal;
 361   font-style: normal;
 362   background: transparent;
 363 }
 364
 365 /***********************************************************/
 366 /*                     NAVIGATION                          */
 367 /***********************************************************/
 368
 369 .nav_table {
 370   width: 100%;
 371   background: #c9ccc4;
 372   font-size: 0.83em;
 373   border-collapse: collapse;
 374   padding: 0;
 375   border: none;
 376   margin: 0;
 377 }
 378
 379 .nav_table a:link, .nav_table a:visited {
 380   color: #1c1c1b;
 381   text-decoration: none;
 382 }
 383
 384 .nav_table a:hover {
 385   color: #000;
 386   text-decoration: underline;
 387 }
 388
 389 .nav_table tr, .nav_table a {
 390   padding: 0;
 391   margin: 0;
 392 }
 393
 394 .nav_table td {
 395   padding: 0.25em;
 396   margin: 0;
 397 }
 398
 399 div.header {
 400   background: #b1d281;
 401   text-align: center;
 402   padding: 0.5em;
 403   border-bottom: 1px solid #7b925a;
 404   margin: 0;
 405   height: auto;
 406 }
 407
 408 div.header h1 {
 409   font-size: 2em;
 410   padding: 0.25em;
 411   margin: 0;
 412 }
 413
 414 div.subheader {
 415   background: #ddd;
 416   padding: 0;
 417   margin: 0;
 418   text-align: center;
 419 }
 420
 421 div.subheader p {
 422   padding: 0.5em;
 423   margin: 0;
 424 }
 425
 426 table#navigation {
 427   line-height: 1.5;
 428   padding: 0;
 429   margin: 1em auto;
 430 }
 431
 432 table#navigation td {
 433   padding: 0.5em 0.75em;
 434 }
 435
 436 table#navigation ul {
 437   padding-left: 0.5em;
 438   margin: 0;
 439 }
 440
 441 table .title {
 442   font-weight: bold;
 443 }
 444
 445 .footer {
 446   background: #657f40;
 447   font-size: 0.8em;
 448   padding: 0.2em 0;
 449   border: solid white;
 450   border-width: 0 0 5px 0;
 451   margin: 0;
 452   color: white;
 453 }
 454
 455 body.learning    .footer { background-color: #407f40; }
 456 body.notation    .footer { background-color: #40657f; }
 457 body.usage       .footer { background-color: #7f7f33; }
 458 body.extending   .footer { background-color: #7f4040; }
 459 body.internals   .footer { background-color: #6a407f; }
 460 body.contributor .footer { background-color: #000000; }
 461
 462 .footer a:link {
 463   color: white;
 464 }
 465
 466 .footer p {
 467   padding: 0 1.25em;
 468   margin: 0.4em 0;
 469 }
 470
 471 table.menu {
 472   margin: 0 0 1em;
 473 }
 474
 475 /***********************************************************/
 476 /*               OVERRIDES FOR PRINTING                    */
 477 /***********************************************************/
 478
 479 @media print {
 480   /* Hide the sidebar and make the main contents take up the full width */
 481   div#main { position: static; overflow: visible; left: 0; }
 482   div#tocframe { display: none; }
 483   /* Also don't show the navigation toolbars between all sections */
 484   .nav_table { display: none; }
 485 }
 486
 487 /***********************************************************/
 488 /*           FORMATTING of AJAX SEARCH BOX                 */
 489 /***********************************************************/
 490
 491 div#search {
 492   border: none;
 493   border-bottom: 1pt solid #C5972C;
 494   background: #E8E3AC;
 495   padding-left: 3px;
 496   padding-top: 2px;
 497   padding-bottom: 1px;
 498 }
 499 div#search p, div#search form {
 500   padding: 0;
 501   margin: 0;
 502 }
 503 #search_results {
 504   font-size: 0.75em;
 505   padding: 0;
 506   margin: 0;
 507   display: none;
 508 }
 509 #search_results table {
 510   width: 100%;
 511 }
 512
 513 /***********************************************************/
 514 /*               OTHER                                     */
 515 /***********************************************************/
 516
 517 .warning {
 518   background: #eef;
 519   text-align: left;
 520   padding: 0;
 521   border: 1px solid green;
 522   /* Experimental rounded corners */
 523   border-radius: 10px;
 524   margin: 1em;
 525 }
 526
 527 body.learning    .warning { border-color: #00ff00; }
 528 body.notation    .warning { border-color: #0095ff; }
 529 body.usage       .warning { border-color: #ffff00; }
 530 body.extending   .warning { border-color: #ff0000; }
 531 body.internals   .warning { border-color: #aa00ff; }
 532 body.contributor .warning { border-color: #000000; }
 533
 534
 535 .advanced {
 536   background: #eeffcc;
 537   text-align: left;
 538   padding: 0;
 539   border: 1px solid green;
 540   /* Experimental rounded corners */
 541   border-radius: 10px;
 542   margin: 0.5em 0.5em 2em 3em;
 543 }