]> Shamusworld >> Repos - ardour-manual/blob - source/css/app.css
tame the floating behaviour of <dl>s: clear both before and after. the previous behav...
[ardour-manual] / source / css / app.css
1 #tree {
2   background-color: #eee;
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: #666;
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: #000;
91     border-bottom: 1px solid #555;
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 /* Keyboard binding layout */
175 #content dl.bindings
176 {
177     float: left;
178     width: 100%;
179     margin: 1em 0;
180     padding: 0;
181 }
182     
183 #content .bindings dt
184 {
185     clear: left;
186     float: left;
187     width: 30%;
188     margin: 0;
189     padding: 0px;
190     font-size: 100%;
191     font-family: "Trebuchet MS", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
192     font-weight: normal;
193 }
194     
195 #content .bindings dd
196 {
197     float: left;
198     width: 65%;
199     margin: 0;
200     padding: 0px;
201     font-size: 110%;
202     font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;
203     font-weight: normal;
204 }
205
206
207 #content dl.wide-table
208 {
209     float: left;
210     width: 100%;
211     margin: 1em 0;
212     padding: 0;
213 }
214     
215 #content .wide-table dt
216 {
217         font-weight: normal;
218     clear: left;
219     float: left;
220     width: 30%;
221     margin: 0;
222     padding: 5px;
223 }
224
225 #content dt,
226 #content dd {
227     border-top: 2px solid #eee;
228 }
229
230 #content dt:first-child,
231 #content dd:nth-child(2) {
232     border-top: none;
233 }
234     
235 #content .wide-table dd
236 {
237     float: left;
238     width: 60%;
239     margin: 0;
240     padding: 5px;
241 }
242
243 #content dl.narrower-table
244 {
245     float: left;
246     width: 100%;
247     margin: 1em 0;
248     padding: 0;
249 }
250     
251 #content .narrower-table dt
252 {
253     clear: left;
254     float: left;
255     width: 20%;
256     margin: 0;
257     padding: 5px;
258 }
259     
260 #content .narrower-table dd
261 {
262     float: left;
263     width: 70%;
264     margin: 0;
265     padding: 5px;
266 }
267
268 kbd {
269     -moz-background-clip:border;
270     -moz-background-inline-policy:continuous;
271     -moz-background-origin:padding;
272     background:#EEEEEE none repeat scroll 0 0;
273     border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;
274     border-style:solid;
275     border-width:2px 2px 4px 4px;
276     color:#000000;
277     padding:1px 2px;
278     white-space:nowrap;
279     text-transform:capitalize;
280 }
281
282 kbd.input,kbd.cmd {
283     font-family:mono;
284     border-width:0;
285     text-transform:none;
286
287 }
288
289 kbd.cmd {
290     display:block;
291     width:100%;
292     margin-bottom:1ex;
293     text-transform:none;
294 }
295
296 kbd.cmd.lin:before {
297     content: 'user@linux:~ ';
298     color:#999999;
299 }
300
301 kbd.cmd.mac:before {
302     content: 'MacBook:~/Desktop User\$ ';
303     color:#999999;
304 }
305
306 kbd.cmd.win:before {
307     content: 'C:\\Users\\myAccount> ';
308     color:#999999;
309 }
310
311 kbd.mouse {
312     -moz-border-radius:10px;
313     border-radius:10px;
314 }
315
316 /*
317 .mouse:after {
318     position:relative;
319     top:-1em;
320     left:-1em;
321     content:url('/images/mouse-tail.png');
322 }
323 */
324
325 kbd.menu,kbd.option,kbd.optoff {
326     border:none;
327     background-color:transparent;
328     font-weight:bold;
329     font-stretch:extra-condensed;
330     white-space:normal;
331 }
332
333 kbd.option:after,kbd.optoff:after {
334     font-family:mono;
335     font-weight:lighter;
336     text-align:center;
337     border:solid 1px black;
338     margin-left:0.3em;
339 }
340 kbd.option:after {
341     content:'X';
342
343 }
344 kbd.optoff:after {
345     content:'    ';
346 }
347
348
349 kbd.fader, kbd.knob, kbd.button {
350     border-color:#ccccff #aaaadd #8888bb #bbbbee;
351     background-color:#ddddff;
352     color:#000044;
353 }
354
355 kbd.fader {
356     border-width: 1px 1px 9px 9px;
357 }
358
359 kbd.knob {
360     -moz-border-radius:12px;
361     border-radius:12px; 
362     border-width: 1px 1px 9px 9px;
363 }
364
365 kbd.button {
366     -moz-border-radius:8px;
367     border-radius:8px;
368     border-width: 1px 1px 3px 3px;
369 }
370
371 samp {
372     font-family:mono;
373     font-style:italic;
374     color:#333333;
375     background-color:transparent;
376     margin-left: 1ex;
377     margin-right: 1ex;
378 }
379
380 samp:before {
381     content:"\BB";
382 }
383
384 samp:after {
385     content:"\AB";
386 }
387
388 #content td {
389     padding: 0 1em 0 1em;
390 }
391
392 #content .small {
393     width:150px;
394 }
395
396 #subtopics ul {
397     font-size:20px;
398     font-weight:bold;
399 }
400
401 #content dfn {
402     font-weight: bold;
403     font-style: normal;
404 }
405
406 #content .right {
407     margin: 0 0 1em 1em;
408     float:right;
409 }
410
411 #content .left {
412     margin:0 1em 1em 0;
413     float:left;
414 }
415
416 #content .note,.warning,.fixme {
417     min-height: 20px;
418     padding: 19px;
419     margin-bottom: 20px;
420     border-style: solid;
421     border-width: 1px 1px 1px 8px; 
422     -webkit-border-radius: 4px;
423        -moz-border-radius: 4px;
424             border-radius: 4px;
425     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
426        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
427             box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
428
429 }
430
431 #content .note {
432     border-color: #e3e3e3;
433     background-color: #f5f5f5;
434 }
435
436 #content .warning {
437     border-color: #995555;
438     background-color: #ffeeee;
439 }
440
441 #content .fixme {
442     border-color: #999944;
443     background-color: #f0f0e0;
444     font-weight:bold;
445 }
446
447 .fixme:before {
448     content:'FIXME: ';
449     font-style: italic;
450     font-size:200%;
451 }
452
453
454
455
456 .mod1:before {
457     content: "Ctrl ";
458 }
459
460 .mod2:before {
461     content: "Alt ";
462 }
463
464 .mod3:before {
465     content: "Shift ";
466 }
467
468 .mod4:before {
469     content: "Win ";
470 }
471
472 .mod12:before {
473     content: "Ctrl Alt ";
474 }
475
476 .mod13:before {
477     content: "Ctrl Shift ";
478 }
479
480 .mod14:before {
481     content: "Ctrl Win ";
482 }
483
484 .mac .mod1:before {
485     content: "Cmd ";
486 }
487
488 .mac .mod2:before {
489     content: "Ctrl ";
490 }
491
492 .mac .mod3:before {
493     content: "Shift ";
494 }
495
496 .mac .mod4:before {
497     content: "Opt ";
498 }
499
500 .mac .mod12:before {
501     content: "Cmd Ctrl ";
502 }
503
504 .mac .mod13:before {
505     content: "Cmd Shift ";
506 }
507
508 .mac .mod14:before {
509     content: "Cmd Opt ";
510 }
511
512
513
514 #gs_tti0 {
515
516   padding-top: 2px;
517   padding-bottom: 0;
518
519 }
520
521
522
523
524