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