]> Shamusworld >> Repos - ardour-manual/blob - source/css/app.css
flesh out first couple of pages, test new semantic markup + update conventions syllab...
[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 }
273
274 kbd.mouse {
275     -moz-border-radius:10px;
276     border-radius:10px;
277     border-width:3px;
278 }
279
280 kbd.menu,kbd.option,kbd.optoff {
281     border:none;
282     background-color:transparent;
283     font-weight:bold;
284     font-size:80%;
285     font-stretch:extra-condensed;
286     white-space:normal;
287 }
288
289 kbd.option:after,kbd.optoff:after {
290     content:'x';
291     font-family:mono;
292     font-weight:lighter;
293     text-align:center;
294     border:solid 1px black;
295     -moz-border-radius:10px;
296     border-radius:10px;
297     margin-left:1ex;
298 }
299 kbd.optoff:after {
300     content:'    ';
301 }
302
303
304 kbd.fader, kbd.knob, kbd.button {
305     border-color:#ccccff #aaaadd #8888bb #bbbbee;
306     background-color:#ddddff;
307     color:#000044;
308 }
309
310 kbd.fader {
311     border-width:2px 2px 4px 4px
312 }
313
314 kbd.knob {
315     -moz-border-radius:12px;
316     border-radius:12px; 
317     border-width: 1px 1px 9px 9px;
318 }
319
320 kbd.button {
321     -moz-border-radius:8px;
322     border-radius:8px;
323 }
324
325 #content td {
326     padding: 0 1em 0 1em;
327 }
328
329 #content .small {
330     width:150px;
331 }
332
333 #subtopics ul {
334     font-size:20px;
335     font-weight:bold;
336 }
337
338 #content dfn {
339     font-weight: bold;
340     font-style: normal;
341 }
342
343 #content .right {
344     margin: 0 0 1em 1em;
345     float:right;
346 }
347
348 #content .left {
349     margin:0 1em 1em 0;
350     float:left;
351 }
352
353 #content .note,.warning {
354     min-height: 20px;
355     padding: 19px;
356     margin-bottom: 20px;
357     border: 1px solid 
358     -webkit-border-radius: 4px;
359        -moz-border-radius: 4px;
360             border-radius: 4px;
361     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
362        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
363             box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
364 }
365
366 #content .note {
367     border-color: #e3e3e3;
368     background-color: #f5f5f5;
369 }
370
371 #content .warning {
372     border-color: #990000;
373     background-color: #ffeeee;
374 }
375
376
377
378 .mod1:before {
379     content: "Ctrl ";
380 }
381
382 .mod2:before {
383     content: "Alt ";
384 }
385
386 .mod3:before {
387     content: "Shift ";
388 }
389
390 .mod4:before {
391     content: "Win ";
392 }
393
394 .mod12:before {
395     content: "Ctrl Alt ";
396 }
397
398 .mod13:before {
399     content: "Ctrl Shift";
400 }
401
402 .mod14:before {
403     content: "Ctrl Win ";
404 }
405
406 .mac .mod1:before {
407     content: "Cmd ";
408 }
409
410 .mac .mod2:before {
411     content: "Ctrl ";
412 }
413
414 .mac .mod3:before {
415     content: "Shift ";
416 }
417
418 .mac .mod4:before {
419     content: "Opt ";
420 }
421
422 .mac .mod12:before {
423     content: "Cmd Ctrl ";
424 }
425
426 .mac .mod13:before {
427     content: "Cmd Shift ";
428 }
429
430 .mac .mod14:before {
431     content: "Cmd Opt ";
432 }
433
434
435
436 #gs_tti0 {
437
438   padding-top: 2px;
439   padding-bottom: 0;
440
441 }
442
443
444
445
446