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 /***********************************************************/
 248 /*                    TOC SIDEBAR                          */
 249 /***********************************************************/
 250
 251 div#tocframe {
 252   position: absolute;
 253   top: 0;
 254   right: 73%;
 255   bottom: 0;
 256   left: 0;
 257   padding: 0;
 258   margin: 0;
 259   overflow: auto;
 260   background: #dce35cf;
 261   z-index: 100;
 262   list-style-type: none;
 263   font-size: 0.83em;
 264   line-height: 1.3;
 265 }
 266
 267 body.learning    div#tocframe { background-color: #cfe5cf; }
 268 body.notation    div#tocframe { background-color: #cfdce5; }
 269 body.usage       div#tocframe { background-color: #e5e5b8; }
 270 body.extending   div#tocframe { background-color: #e5cfcf; }
 271 body.internals   div#tocframe { background-color: #decfe5; }
 272 body.contributor div#tocframe { background-color: #e5e5e5; }
 273
 274 @media screen {
 275   body > div#tocframe {
 276     position: fixed
 277   }
 278 }
 279
 280 div#tocframe a:link, div#tocframe a:visited {
 281   color: black;
 282   text-decoration: none;
 283 }
 284
 285 div#tocframe a:hover {
 286   color: #666666;
 287   text-decoration: underline;
 288 }
 289
 290 div#tocframe p.toc_uplink {
 291   font-size: 1em;
 292   line-height: 1.125;
 293   background: #c9ccc4;
 294   padding: 0.25em 1em 0.25em 0.5em;
 295   border-bottom: 1px solid black;
 296   margin: 0;
 297 }
 298
 299 div#tocframe p.toc_uplink a:link,
 300 div#tocframe p.toc_uplink a:visited {
 301   color: #1c1c1b;
 302 }
 303
 304 div#tocframe p.toc_uplink a:hover {
 305   color: #000;
 306 }
 307
 308 div#tocframe h4 {
 309   font-size: 1em;
 310   line-height: 1.125;
 311   font-weight: bold;
 312   font-style: italic;
 313   padding: 0.75em 0.5em 0 0.5em;
 314   margin: 0;
 315 }
 316
 317 #tocframe .contents {
 318   background-color: transparent;
 319   list-style-type: none;
 320   padding: 0;
 321   border: 0;
 322   margin: 0;
 323 }
 324
 325 #tocframe ul.toc {
 326   padding: 0.25em 0.5em 1em 0.5em;
 327   list-style-type: none;
 328   margin: 0;
 329 }
 330
 331 #tocframe ul.toc ul.toc {
 332   padding: 0;
 333   margin: 0;
 334 }
 335
 336 #tocframe ul.toc li {
 337   padding: 0;
 338   margin: 0;
 339 }
 340
 341 #tocframe ul.toc > li {
 342   font-size: 1em;
 343 }
 344
 345 #tocframe ul.toc li li {
 346   padding-left: 1em;
 347 }
 348
 349 li.toc_current {
 350   font-weight: bold;
 351   font-style: italic;
 352 }
 353
 354 li.toc_current ul {
 355   font-weight: normal;
 356   font-style: normal;
 357   background: transparent;
 358 }
 359
 360 /***********************************************************/
 361 /*                     NAVIGATION                          */
 362 /***********************************************************/
 363
 364 .nav_table {
 365   width: 100%;
 366   background: #c9ccc4;
 367   font-size: 0.83em;
 368   border-collapse: collapse;
 369   padding: 0;
 370   border: none;
 371   margin: 0;
 372 }
 373
 374 .nav_table a:link, .nav_table a:visited {
 375   color: #1c1c1b;
 376   text-decoration: none;
 377 }
 378
 379 .nav_table a:hover {
 380   color: #000;
 381   text-decoration: underline;
 382 }
 383
 384 .nav_table tr, .nav_table a {
 385   padding: 0;
 386   margin: 0;
 387 }
 388
 389 .nav_table td {
 390   padding: 0.25em;
 391   margin: 0;
 392 }
 393
 394 div.header {
 395   background: #b1d281;
 396   text-align: center;
 397   padding: 0.5em;
 398   border-bottom: 1px solid #7b925a;
 399   margin: 0;
 400   height: auto;
 401 }
 402
 403 div.header h1 {
 404   font-size: 2em;
 405   padding: 0.25em;
 406   margin: 0;
 407 }
 408
 409 div.subheader {
 410   background: #ddd;
 411   padding: 0;
 412   margin: 0;
 413   text-align: center;
 414 }
 415
 416 div.subheader p {
 417   padding: 0.5em;
 418   margin: 0;
 419 }
 420
 421 table#navigation {
 422   line-height: 1.5;
 423   padding: 0;
 424   margin: 1em auto;
 425 }
 426
 427 table#navigation td {
 428   padding: 0.5em 0.75em;
 429 }
 430
 431 table#navigation ul {
 432   padding-left: 0.5em;
 433   margin: 0;
 434 }
 435
 436 table .title {
 437   font-weight: bold;
 438 }
 439
 440 .footer {
 441   background: #657f40;
 442   font-size: 0.8em;
 443   padding: 0.2em 0;
 444   border: solid white;
 445   border-width: 0 0 5px 0;
 446   margin: 0;
 447   color: white;
 448 }
 449
 450 body.learning    .footer { background-color: #407f40; }
 451 body.notation    .footer { background-color: #40657f; }
 452 body.usage       .footer { background-color: #7f7f33; }
 453 body.extending   .footer { background-color: #7f4040; }
 454 body.internals   .footer { background-color: #6a407f; }
 455 body.contributor .footer { background-color: #000000; }
 456
 457 .footer a:link {
 458   color: white;
 459 }
 460
 461 .footer p {
 462   padding: 0 1.25em;
 463   margin: 0.4em 0;
 464 }
 465
 466 table.menu {
 467   margin: 0 0 1em;
 468 }
 469
 470 /***********************************************************/
 471 /*               OVERRIDES FOR PRINTING                    */
 472 /***********************************************************/
 473
 474 @media print {
 475   /* Hide the sidebar and make the main contents take up the full width */
 476   div#main { position: static; overflow: visible; left: 0; }
 477   div#tocframe { display: none; }
 478   /* Also don't show the navigation toolbars between all sections */
 479   .nav_table { display: none; }
 480 }
 481
 482 /***********************************************************/
 483 /*           FORMATTING of AJAX SEARCH BOX                 */
 484 /***********************************************************/
 485
 486 div#search {
 487   border: none;
 488   border-bottom: 1pt solid #C5972C;
 489   background: #E8E3AC;
 490   padding-left: 3px;
 491   padding-top: 2px;
 492   padding-bottom: 1px;
 493 }
 494 div#search p, div#search form {
 495   padding: 0;
 496   margin: 0;
 497 }
 498 #search_results {
 499   font-size: 0.75em;
 500   padding: 0;
 501   margin: 0;
 502   display: none;
 503 }
 504 #search_results table {
 505   width: 100%;
 506 }
 507
 508 /***********************************************************/
 509 /*               OTHER                                     */
 510 /***********************************************************/
 511
 512 .warning {
 513   background: #eef;
 514   text-align: left;
 515   padding: 0;
 516   border: 1px solid green;
 517   /* Experimental rounded corners */
 518   border-radius: 10px;
 519   margin: 1em;
 520 }
 521
 522 body.learning    .warning { border-color: #00ff00; }
 523 body.notation    .warning { border-color: #0095ff; }
 524 body.usage       .warning { border-color: #ffff00; }
 525 body.extending   .warning { border-color: #ff0000; }
 526 body.internals   .warning { border-color: #aa00ff; }
 527 body.contributor .warning { border-color: #000000; }
 528
 529
 530 .advanced {
 531   background: #eeffcc;
 532   text-align: left;
 533   padding: 0;
 534   border: 1px solid green;
 535   /* Experimental rounded corners */
 536   border-radius: 10px;
 537   margin: 0.5em 0.5em 2em 3em;
 538 }