Documentation/css/lilypond-manuals.css

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