Shamusworld >> Repos - ardour-manual/blob - source/css/app.css

   1 #tree {
   2   background-color: #212A30;
   3   height: 100%;
   4   overflow: scroll;
   5   position: fixed;
   6   top: 0;
   7   bottom: 0;
   8   left: 0;
   9   width: 300px;
  10 }
  11
  12 #tree-inner {
  13   padding: 15px 20px 30px 30px;
  14 }
  15
  16 #tree h1.title {
  17   font-size: 28px;
  18   margin-bottom: 20px;
  19   font-weight: normal;
  20 }
  21
  22 #tree h1.title a:hover {
  23   border-bottom: none;
  24 }
  25
  26 #tree a {
  27   font-size: 14px;
  28   line-height: 28px;
  29 }
  30
  31 #tree dd.other {
  32   display: none;
  33 }
  34
  35 #tree .level-1,
  36 #tree .parent,
  37 #tree .child,
  38 #tree .parent *,
  39 #tree .child * {
  40   display: inherit;
  41   color: inherit;
  42 }
  43
  44 #tree dd.child-1,
  45 #tree .child-2,
  46 #tree .child-3,
  47 #tree .child-4 {
  48   display: none;
  49 }
  50
  51
  52 #search {
  53   height: 70px;
  54 }
  55
  56 #content {
  57     padding: 10px 30px 30px 350px;
  58     margin-left: 0;
  59 }
  60
  61 #content-main {
  62   padding-top: 10px;
  63   padding-left: 10px;
  64 }
  65
  66 #content p,
  67 #content li,
  68 #content dt,
  69 #content dd,
  70 #content table {
  71   font-size: 16px;
  72   line-height: 28px;
  73 }
  74
  75
  76 #tree a {
  77     display: inline !important;
  78     font-weight: normal;
  79     color: #E4E4E4;
  80     border-bottom: 1px solid transparent;
  81     padding-bottom: 2px;
  82 }
  83
  84 #tree a:hover {
  85     text-decoration: none;
  86     border-bottom: 1px solid #aaa;
  87 }
  88
  89 #tree .active > a {
  90     display: inline;
  91     color: #da0808;
  92     border-bottom: 1px solid #FFF;
  93
  94 }
  95
  96 #content,
  97 #tree {
  98   font-family: Junge;
  99 }
 100
 101 #content h1,
 102 #content h2,
 103 #content h3,
 104 #content h4 {
 105     font-weight: normal;
 106 }
 107
 108 #content h1.title {
 109  border-bottom: 2px solid #ccc;
 110   padding-bottom: 10px;
 111   margin-bottom: 40px;
 112 }
 113
 114 #content h2 {
 115   margin: 30px 0 20px 0;
 116   padding-bottom: 5px;
 117   font-size: 22px;
 118   border-bottom: 2px solid #ddd;
 119 }
 120
 121 #content h3 {
 122  margin: 20px 0 10px 0;
 123   padding-bottom: 5px;
 124   font-size: 20px;
 125   border-bottom: 1px solid #eee;
 126 }
 127
 128 #content h4 {
 129   font-size: 18px;
 130   margin: 20px 0 10px 0;
 131   padding-bottom: 10px;
 132   border-bottom: 1px solid #eee;
 133 }
 134
 135 #content code {
 136   font-size: 14px;
 137   color: #555;
 138 }
 139
 140 #content table.dl, table.nodl {
 141   width:100%;
 142   margin: 1em 0;
 143   padding: 0;
 144   font-weight: normal;
 145   text-align: left;
 146 }
 147
 148 #content table.dl tr, table.nodl tr {
 149   border-bottom: 2px solid #eeeeee;
 150   background-color: white;
 151 }
 152
 153 #content table.dl tr:nth-child(odd), table.nodl tr:nth-child(odd){
 154   background-color: white;
 155 }
 156
 157 #content table.dl tr:nth-child(even), table.nodl tr:nth-child(even){
 158   background-color: #F2F9FF;
 159 }
 160
 161 #content table.dl thead, table.nodl thead {
 162   font-weight:bold;
 163 }
 164
 165 #content table.dl th, table.nodl th {
 166   margin: 0;
 167   padding: 5px;
 168   font-weight: normal;
 169 }
 170
 171 #content table.dl td, table.nodl td {
 172   margin: 0;
 173   padding: 5px;
 174 }
 175
 176 #content table.dl th.sub1, table.nodl th.sub1 {
 177     padding-left: 2em;
 178 }
 179
 180 #content table.dl th.sub2, table.nodl th.sub2 {
 181     padding-left: 4em;
 182 }
 183
 184 #content table.dl th {
 185   min-width: 20%;
 186 }
 187
 188 #content table.dl td {
 189   width: 100%; /*maximizes the width of the 2nd column */
 190 }
 191
 192
 193 #content dl
 194 {
 195     float:none;
 196     clear:both;
 197     width:100%;
 198     margin: 1em 0;
 199     padding: 0;
 200     display:inline-block;
 201 }
 202
 203 #content dl:after {
 204     content:' ';
 205     display:block;
 206     clear:both;
 207 }
 208
 209 #content dt
 210 {
 211     clear: left;
 212     float: left;
 213     width: 25%;
 214     margin: 0;
 215     padding: 5px;
 216     font-weight: normal;
 217 }
 218
 219 #content dd
 220 {
 221     float: left;
 222     width: 65%;
 223     margin: 0;
 224     padding: 5px;
 225     font-weight: normal;
 226 }
 227
 228 #content dt.sub1 {
 229     padding-left: 2em;
 230 }
 231
 232 #content dt.sub2 {
 233     padding-left: 4em;
 234 }
 235
 236
 237 #content figure {
 238     display: table;
 239 }
 240
 241 #content figcaption {
 242         display: table-caption;
 243         caption-side: bottom;
 244         font-style: italic;
 245 }
 246
 247 #content figcaption.center {
 248         display: table-caption;
 249         text-align: center;
 250         caption-side: bottom;
 251         font-style: italic;
 252 }
 253
 254 #content figcaption.titleover {
 255         caption-side: top ;
 256 }
 257
 258 #content figure.right {
 259     margin: 0 0 1em 1em;
 260     float: right;
 261     clear: right;
 262 }
 263
 264 #content figure.left {
 265     margin: 0 1em 1em 0;
 266     float: left;
 267     clear: left;
 268 }
 269
 270 #content figure.center {
 271     margin: 1em auto 1em auto;
 272     clear: both;
 273 }
 274
 275 .multicol2 {
 276     width: 48%;
 277                 float:left;
 278                 padding:0 0 0 2%;
 279                 margin:0;
 280 }
 281
 282 .multicol3 {
 283     width: 31%;
 284                 float:left;
 285                 padding:0 0 0 2%;
 286                 margin:0;
 287 }
 288
 289 .multicol4 {
 290     width: 23%;
 291                 float:left;
 292                 padding:0 0 0 2%;
 293                 margin:0;
 294 }
 295
 296 .multicol5 {
 297     width: 18%;
 298                 float:left;
 299                 padding:0 0 0 2%;
 300                 margin:0;
 301 }
 302
 303 #content dl.wide-table
 304 {
 305     float: left;
 306     width: 100%;
 307     margin: 1em 0;
 308     padding: 0;
 309 }
 310
 311 #content .wide-table dt
 312 {
 313     font-weight: normal;
 314     clear: left;
 315     float: left;
 316     width: 30%;
 317     margin: 0;
 318     padding: 5px;
 319 }
 320
 321 #content dt,
 322 #content dd {
 323     border-top: 2px solid #eee;
 324 }
 325
 326 #content dt:first-child,
 327 #content dd:nth-child(2) {
 328     border-top: none;
 329 }
 330
 331 #content .wide-table dd
 332 {
 333     float: left;
 334     width: 60%;
 335     margin: 0;
 336     padding: 5px;
 337 }
 338
 339 #content dl.narrower-table
 340 {
 341     float: left;
 342     width: 100%;
 343     margin: 1em 0;
 344     padding: 0;
 345 }
 346
 347 #content .narrower-table dt
 348 {
 349     clear: left;
 350     float: left;
 351     width: 20%;
 352     margin: 0;
 353     padding: 5px;
 354 }
 355
 356 #content .narrower-table dd
 357 {
 358     float: left;
 359     width: 70%;
 360     margin: 0;
 361     padding: 5px;
 362 }
 363
 364 kbd {
 365   display: inline-block;
 366   min-width: 1em;
 367   padding: .2em .3em;
 368   font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
 369   text-align: center;
 370   text-decoration: none;
 371   border-radius: .3em;
 372   cursor: default;
 373   -moz-user-select: none;
 374   -webkit-user-select: none;
 375   user-select: none;
 376   background: rgb(250, 250, 250);
 377   background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
 378   background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
 379   color:  rgb(50, 50, 50);
 380   text-shadow: 0 0 2px rgb(255, 255, 255);
 381   box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
 382   white-space:nowrap;
 383   text-transform:capitalize;
 384 }
 385
 386 kbd.input,kbd.cmd,kbd.osc {
 387     font-family:mono;
 388     border-width:0;
 389     text-transform:none;
 390 }
 391
 392 kbd.input {
 393     background:none;
 394     border-radius: 0;
 395 }
 396
 397 kbd.cmd {
 398     display:block;
 399     width:100%;
 400     margin-bottom:1ex;
 401     text-transform:none;
 402     background: rgb(220, 220, 220);
 403     text-shadow: none;
 404     box-shadow: none;
 405     text-align:left;
 406 }
 407
 408 kbd.cmd.lin:before {
 409     content: 'user@linux:~ ';
 410     color:#999999;
 411 }
 412
 413 kbd.cmd.mac:before {
 414     content: 'MacBook:~/Desktop User\$ ';
 415     color:#999999;
 416 }
 417
 418 kbd.cmd.win:before {
 419     content: 'C:\\Users\\myAccount> ';
 420     color:#999999;
 421 }
 422
 423 kbd.optoff, kbd.option {
 424     border:none;
 425     background:none;
 426 }
 427
 428 kbd.optoff:before {
 429     content:url('/images/checkbox-unchecked.png');
 430     margin: 0 5px 0 0;
 431     vertical-align:middle;
 432 }
 433
 434 kbd.option:before {
 435     content:url('/images/checkbox-checked.png');
 436     margin: 0 5px 0 0;
 437     vertical-align:middle;
 438 }
 439
 440 kbd.menu {
 441     border:none;
 442     background:none;
 443     font-weight:bold;
 444     font-stretch:extra-condensed;
 445     white-space:normal;
 446 }
 447
 448 kbd.osc {
 449     border:none;
 450     background: rgb(208, 208, 243);
 451     font-stretch:extra-condensed;
 452     white-space: nowrap;
 453     text-align:left;
 454 }
 455
 456 kbd.fader, kbd.knob, kbd.button {
 457     background: rgb(174, 174, 217);
 458     background: -moz-linear-gradient(top, rgb(174, 174, 217), rgb(221, 221, 255));
 459     background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 174, 217)), to(rgb(221, 221, 255)));
 460     color:#000044;
 461 }
 462
 463 kbd.fader {
 464     border-width: 1px 1px 9px 9px;
 465 }
 466
 467 kbd.knob {
 468     border-radius:12px;
 469     border-width: 1px 1px 9px 9px;
 470 }
 471
 472 kbd.button {
 473     border-radius:8px;
 474     border-width: 1px 1px 3px 3px;
 475 }
 476
 477 kbd.mouse {
 478     border-radius:10px;
 479 }
 480
 481
 482 samp {
 483     font-family:mono;
 484     font-style:italic;
 485     color:#333333;
 486     background-color:transparent;
 487     margin-left: 1ex;
 488     margin-right: 1ex;
 489 }
 490
 491 samp:before {
 492     content:"\BB";
 493 }
 494
 495 samp:after {
 496     content:"\AB";
 497 }
 498
 499 #content td {
 500     padding: 0 1em 0 1em;
 501 }
 502
 503 #content .small {
 504     width:150px;
 505 }
 506
 507 #subtopics ul {
 508     font-size:20px;
 509     font-weight:bold;
 510 }
 511
 512 #content dfn {
 513     font-weight: bold;
 514     font-style: normal;
 515 }
 516
 517 #content img.right {
 518     margin: 0 0 1em 1em;
 519     float:right;
 520     clear:right;
 521 }
 522
 523 #content img.left {
 524     margin:0 1em 1em 0;
 525     float:left;
 526     clear:left;
 527 }
 528
 529 #content img.center {
 530     display: block;
 531     margin:1em auto 1em auto;
 532         clear: both;
 533 }
 534
 535 #content p.center {
 536         text-align:center;
 537 }
 538
 539 #content .note,.warning,.fixme {
 540     min-height: 20px;
 541     padding: 19px;
 542     margin-bottom: 20px;
 543     border-style: solid;
 544     border-width: 1px 1px 1px 8px;
 545     -webkit-border-radius: 4px;
 546        -moz-border-radius: 4px;
 547             border-radius: 4px;
 548     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 549        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 550             box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 551
 552 }
 553
 554 #content .note {
 555     border-color: #e3e3e3;
 556     background-color: #f5f5f5;
 557 }
 558
 559 #content .warning {
 560     border-color: #995555;
 561     background-color: #ffeeee;
 562 }
 563
 564 #content .fixme {
 565     border-color: #999944;
 566     background-color: #f0f0e0;
 567     font-weight:bold;
 568 }
 569
 570 .fixme:before {
 571     content:'FIXME: ';
 572     font-style: italic;
 573     font-size:200%;
 574 }
 575
 576
 577 /* Keyboard modifiers */
 578
 579 .mod1:before {
 580     content: "Ctrl ";
 581 }
 582 .mod2:before {
 583     content: "Alt ";
 584 }
 585 .mod3:before {
 586     content: "Shift ";
 587 }
 588 .mod4:before {
 589     content: "Win ";
 590 }
 591 .mod12:before {
 592     content: "Ctrl Alt ";
 593 }
 594 .mod13:before {
 595     content: "Ctrl Shift ";
 596 }
 597 .mod14:before {
 598     content: "Ctrl Win ";
 599 }
 600 .mod23:before {
 601     content: "Alt Shift ";
 602 }
 603 .kp:before {
 604     content: "Keypad ";
 605 }
 606
 607 /* Variants *without* space after them (yes, these are needed!) */
 608
 609 .mod1n:before {
 610     content: "Ctrl";
 611 }
 612 .mod2n:before {
 613     content: "Alt";
 614 }
 615 .mod3n:before {
 616     content: "Shift";
 617 }
 618 .mod4n:before {
 619     content: "Win";
 620 }
 621 .mod12n:before {
 622     content: "Ctrl Alt";
 623 }
 624 .mod13n:before {
 625     content: "Ctrl Shift";
 626 }
 627 .mod14n:before {
 628     content: "Ctrl Win";
 629 }
 630 .mod23n:before {
 631     content: "Alt Shift";
 632 }
 633
 634
 635 /* Automagic translation for Mac based display */
 636
 637 .mac .mod1:before {
 638     content: "Cmd ";
 639 }
 640 .mac .mod2:before {
 641     content: "Ctrl ";
 642 }
 643 .mac .mod3:before {
 644     content: "Shift ";
 645 }
 646 .mac .mod4:before {
 647     content: "Opt ";
 648 }
 649 .mac .mod12:before {
 650     content: "Cmd Ctrl ";
 651 }
 652 .mac .mod13:before {
 653     content: "Cmd Shift ";
 654 }
 655 .mac .mod14:before {
 656     content: "Cmd Opt ";
 657 }
 658 .mac .mod23:before {
 659     content: "Ctrl Shift ";
 660 }
 661
 662 /* No space variants (Mac based) */
 663
 664 .mac .mod1n:before {
 665     content: "Cmd";
 666 }
 667 .mac .mod2n:before {
 668     content: "Ctrl";
 669 }
 670 .mac .mod3n:before {
 671     content: "Shift";
 672 }
 673 .mac .mod4n:before {
 674     content: "Opt";
 675 }
 676 .mac .mod12n:before {
 677     content: "Cmd Ctrl";
 678 }
 679 .mac .mod13n:before {
 680     content: "Cmd Shift";
 681 }
 682 .mac .mod14n:before {
 683     content: "Cmd Opt";
 684 }
 685 .mac .mod23n:before {
 686     content: "Ctrl Shift";
 687 }
 688
 689
 690 #gs_tti0 {
 691
 692   padding-top: 2px;
 693   padding-bottom: 0;
 694
 695 }
 696
 697 @media (max-width: 800px) {
 698   #tree {
 699     position: relative;
 700     height: 250px;
 701     width: 100%;
 702     margin-top: 20px;
 703   }
 704   #content {
 705     padding-left: 20px;
 706     margin-top: 0px;
 707   }
 708 }
 709
 710 #chapter { padding-top: 1em; padding-left: 1em; }
 711 #subchapter { padding-left: 4em; }
 712 #section { padding-left: 6em; }
 713 #subsection { padding-left: 8em; }
 714
 715 .container { position:relative; border: none;}
 716 .hoverimg { position: absolute; border: none;  }
 717 .hoverimg:hover{ z-index:100; box-shadow: 0 0 5px 5px lightgreen; }