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