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