]> Shamusworld >> Repos - ardour-manual-diverged/blob - source/css/app.css
4a9fb5d1f1b8b10d498e6df637f0f1f10b6e15ac
[ardour-manual-diverged] / 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   font-size: 16px;
71   line-height: 28px;
72 }
73
74
75 #tree a {
76     display: inline !important;
77     font-weight: normal;
78     color: #E4E4E4;
79     border-bottom: 1px solid transparent;
80     padding-bottom: 2px;
81 }
82
83 #tree a:hover {
84     text-decoration: none;
85     border-bottom: 1px solid #aaa;
86 }
87
88 #tree .active > a {
89     display: inline;
90     color: #da0808;
91     border-bottom: 1px solid #FFF;
92
93 }
94
95 #content,
96 #tree {
97   font-family: Junge;
98 }
99
100 #content h1,
101 #content h2,
102 #content h3,
103 #content h4 {
104     font-weight: normal;
105 }
106
107 #content h1.title {
108  border-bottom: 2px solid #ccc;
109   padding-bottom: 10px;
110   margin-bottom: 40px;
111 }
112
113 #content h2 {
114   margin: 30px 0 20px 0;
115   padding-bottom: 5px;
116   font-size: 22px;
117   border-bottom: 2px solid #ddd;
118 }
119
120 #content h3 {
121  margin: 20px 0 10px 0;
122   padding-bottom: 5px;
123   font-size: 20px;
124   border-bottom: 1px solid #eee;
125 }
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 dl
141 {
142     float:none;
143     clear:both;
144     width:100%;
145     margin: 1em 0;
146     padding: 0;
147 }
148
149 #content dl:after {
150     content:' ';
151     display:block;
152     clear:both;
153 }
154
155 #content dt
156 {
157     clear: left;
158     float: left;
159     width: 25%;
160     margin: 0;
161     padding: 5px;
162     font-weight: normal;
163 }
164
165 #content dd
166 {
167     float: left;
168     width: 65%;
169     margin: 0;
170     padding: 5px;
171     font-weight: normal;
172 }
173
174 #content figure {
175     display: table;
176 }
177
178 #content figcaption {
179         display: table-caption;
180         caption-side: bottom ;
181 }
182
183 #content figcaption.titleover {
184         caption-side: top ;
185 }
186
187 #content figure.right {
188     margin: 0 0 1em 1em;
189     float:right;
190     clear:right;
191 }
192
193 #content figure.left {
194     margin: 0 1em 1em 0;
195     float:left;
196     clear:left;
197 }
198
199 .multicol2 {
200     width: 48%;
201                 float:left;
202                 padding:0 0 0 2%;
203                 margin:0;
204 }
205
206 .multicol3 {
207     width: 31%;
208                 float:left;
209                 padding:0 0 0 2%;
210                 margin:0;
211 }
212
213 .multicol4 {
214     width: 23%;
215                 float:left;
216                 padding:0 0 0 2%;
217                 margin:0;
218 }
219
220 .multicol5 {
221     width: 18%;
222                 float:left;
223                 padding:0 0 0 2%;
224                 margin:0;
225 }
226
227 /* Keyboard binding layout */
228 #content dl.bindings
229 {
230     float: left;
231     width: 100%;
232     margin: 1em 0;
233     padding: 0;
234 }
235
236 #content .bindings dt
237 {
238     clear: left;
239     float: left;
240     width: 65%;
241     margin: 0;
242     padding: 0px;
243     font-size: 100%;
244     font-family: "Trebuchet MS", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
245     font-weight: normal;
246 }
247
248 #content .bindings dd
249 {
250     float: left;
251     width: 30%;
252     margin: 0;
253     padding: 0px;
254     font-size: 110%;
255     font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;
256     font-weight: normal;
257 }
258
259
260 #content dl.wide-table
261 {
262     float: left;
263     width: 100%;
264     margin: 1em 0;
265     padding: 0;
266 }
267
268 #content .wide-table dt
269 {
270         font-weight: normal;
271     clear: left;
272     float: left;
273     width: 30%;
274     margin: 0;
275     padding: 5px;
276 }
277
278 #content dt,
279 #content dd {
280     border-top: 2px solid #eee;
281 }
282
283 #content dt:first-child,
284 #content dd:nth-child(2) {
285     border-top: none;
286 }
287
288 #content .wide-table dd
289 {
290     float: left;
291     width: 60%;
292     margin: 0;
293     padding: 5px;
294 }
295
296 #content dl.narrower-table
297 {
298     float: left;
299     width: 100%;
300     margin: 1em 0;
301     padding: 0;
302 }
303
304 #content .narrower-table dt
305 {
306     clear: left;
307     float: left;
308     width: 20%;
309     margin: 0;
310     padding: 5px;
311 }
312
313 #content .narrower-table dd
314 {
315     float: left;
316     width: 70%;
317     margin: 0;
318     padding: 5px;
319 }
320
321 kbd {
322     -moz-background-clip:border;
323     -moz-background-inline-policy:continuous;
324     -moz-background-origin:padding;
325     background:#EEEEEE none repeat scroll 0 0;
326     border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;
327     border-style:solid;
328     border-width:2px 2px 4px 4px;
329     color:#000000;
330     padding:1px 2px;
331     white-space:nowrap;
332     text-transform:capitalize;
333 }
334
335 kbd.input,kbd.cmd,kbd.osc {
336     font-family:mono;
337     border-width:0;
338     text-transform:none;
339
340 }
341
342 kbd.cmd {
343     display:block;
344     width:100%;
345     margin-bottom:1ex;
346     text-transform:none;
347 }
348
349 kbd.cmd.lin:before {
350     content: 'user@linux:~ ';
351     color:#999999;
352 }
353
354 kbd.cmd.mac:before {
355     content: 'MacBook:~/Desktop User\$ ';
356     color:#999999;
357 }
358
359 kbd.cmd.win:before {
360     content: 'C:\\Users\\myAccount> ';
361     color:#999999;
362 }
363
364 kbd.mouse {
365     -moz-border-radius:10px;
366     border-radius:10px;
367 }
368
369 /*
370 .mouse:after {
371     position:relative;
372     top:-1em;
373     left:-1em;
374     content:url('/images/mouse-tail.png');
375 }
376 */
377
378 kbd.optoff, kbd.option {
379     border:none;
380     background-color:transparent;
381 }
382
383 kbd.optoff:after {
384     content:url('/images/checkbox-unchecked.png');
385 }
386
387 kbd.option:after {
388     content:url('/images/checkbox-checked.png');
389 }
390
391 kbd.menu {
392     border:none;
393     background-color:transparent;
394     font-weight:bold;
395     font-stretch:extra-condensed;
396     white-space:normal;
397 }
398
399
400 kbd.osc {
401 }
402
403
404
405 kbd.fader, kbd.knob, kbd.button {
406     border-color:#ccccff #aaaadd #8888bb #bbbbee;
407     background-color:#ddddff;
408     color:#000044;
409 }
410
411 kbd.fader {
412     border-width: 1px 1px 9px 9px;
413 }
414
415 kbd.knob {
416     -moz-border-radius:12px;
417     border-radius:12px;
418     border-width: 1px 1px 9px 9px;
419 }
420
421 kbd.button {
422     -moz-border-radius:8px;
423     border-radius:8px;
424     border-width: 1px 1px 3px 3px;
425 }
426
427 samp {
428     font-family:mono;
429     font-style:italic;
430     color:#333333;
431     background-color:transparent;
432     margin-left: 1ex;
433     margin-right: 1ex;
434 }
435
436 samp:before {
437     content:"\BB";
438 }
439
440 samp:after {
441     content:"\AB";
442 }
443
444 #content td {
445     padding: 0 1em 0 1em;
446 }
447
448 #content .small {
449     width:150px;
450 }
451
452 #subtopics ul {
453     font-size:20px;
454     font-weight:bold;
455 }
456
457 #content dfn {
458     font-weight: bold;
459     font-style: normal;
460 }
461
462 #content img.right {
463     margin: 0 0 1em 1em;
464     float:right;
465     clear:right;
466 }
467
468 #content img.left {
469     margin:0 1em 1em 0;
470     float:left;
471     clear:left;
472 }
473
474 #content p.center {
475         text-align:center;
476 }
477
478 #content .note,.warning,.fixme {
479     min-height: 20px;
480     padding: 19px;
481     margin-bottom: 20px;
482     border-style: solid;
483     border-width: 1px 1px 1px 8px;
484     -webkit-border-radius: 4px;
485        -moz-border-radius: 4px;
486             border-radius: 4px;
487     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
488        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
489             box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
490
491 }
492
493 #content .note {
494     border-color: #e3e3e3;
495     background-color: #f5f5f5;
496 }
497
498 #content .warning {
499     border-color: #995555;
500     background-color: #ffeeee;
501 }
502
503 #content .fixme {
504     border-color: #999944;
505     background-color: #f0f0e0;
506     font-weight:bold;
507 }
508
509 .fixme:before {
510     content:'FIXME: ';
511     font-style: italic;
512     font-size:200%;
513 }
514
515
516
517
518 .mod1:before {
519     content: "Ctrl ";
520 }
521 .mod2:before {
522     content: "Alt ";
523 }
524 .mod3:before {
525     content: "Shift ";
526 }
527 .mod4:before {
528     content: "Win ";
529 }
530 .mod12:before {
531     content: "Ctrl Alt ";
532 }
533 .mod13:before {
534     content: "Ctrl Shift ";
535 }
536 .mod14:before {
537     content: "Ctrl Win ";
538 }
539 .mod23:before {
540     content: "Alt Shift ";
541 }
542 .kp:before {
543     content: "Keypad ";
544 }
545
546 .mac .mod1:before {
547     content: "Cmd ";
548 }
549 .mac .mod2:before {
550     content: "Ctrl ";
551 }
552 .mac .mod3:before {
553     content: "Shift ";
554 }
555 .mac .mod4:before {
556     content: "Opt ";
557 }
558 .mac .mod12:before {
559     content: "Cmd Ctrl ";
560 }
561 .mac .mod13:before {
562     content: "Cmd Shift ";
563 }
564 .mac .mod14:before {
565     content: "Cmd Opt ";
566 }
567 .mac .mod23:before {
568     content: "Ctrl Shift ";
569 }
570
571 #gs_tti0 {
572
573   padding-top: 2px;
574   padding-bottom: 0;
575
576 }
577
578 @media (max-width: 800px) {
579   #tree {
580     position: relative;
581     height: 250px;
582     width: 100%;
583     margin-top: 20px;
584   }
585   #content {
586     padding-left: 20px;
587     margin-top: 0px;
588   }
589 }
590
591 #chapter { padding-top: 1em; padding-left: 1em; }
592
593 #subchapter { padding-left: 4em; }