/[svn]/doc/tmpl/css/main.css
ViewVC logotype

Contents of /doc/tmpl/css/main.css

Parent Directory Parent Directory | Revision Log Revision Log


Revision 3282 - (show annotations) (download) (as text)
Wed Jun 7 12:34:29 2017 UTC (6 months, 1 week ago) by schoenebeck
File MIME type: text/css
File size: 29842 byte(s)
- Site Template: Minor refinement of vertical TOC menu.

1 /*
2 CrudeDoc CSS Style
3 Copyright (c) 2015 - 2017 Christian Schoenebeck. All rights reserved.
4 http://www.crudebyte.com
5 */
6
7 @import 'fontsbase.css';
8 @import 'jquery-ui.css';
9
10 html {
11 font-family:CRDSans;
12 font-weight:200;
13 font-size:17px;
14 line-height:1.2;
15 background-color:#c1b5b5;
16 background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
17 background: -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
18 background: -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
19 background: linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
20 }
21
22 body {
23 padding:0;
24 margin:0;
25 background-color:#c1b5b5; /* fallback (non CSS3 browsers) */
26 background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
27 background: -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
28 background: -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
29 background: linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
30 counter-reset:oli;
31 counter-reset:codeline;
32 -webkit-text-size-adjust:100%;
33 }
34
35 .no-effect {
36 -webkit-transition: none !important;
37 -moz-transition: none !important;
38 -ms-transition: none !important;
39 -o-transition: none !important;
40 transition: none !important;
41 }
42
43
44
45 /* top most header strip */
46
47 .lslogo {
48 position:fixed; top:2px; left:6px;
49 border:none;
50 }
51
52 header a {
53 color:#eaeaea;
54 text-decoration:none;
55 outline:none;
56 border:0;
57 }
58
59 header {
60 position:fixed; top:0px;
61 z-index:4;
62 display:table;
63 background-color:#898989;
64 color:#eaeaea;
65 width:100%;
66 padding: 6px 0px 6px 0px;
67 font-size:18px;
68 font-weight:200;
69 vertical-align:middle;
70 }
71
72 header > div {
73 display:table-cell;
74 text-align:left;
75 padding-left:39px;
76 vertical-align:middle;
77 }
78
79 header > menu {
80 display:table-cell;
81 font-family:CRDHigh;
82 font-weight:300;
83 font-size:17px;
84 text-align:right;
85 vertical-align:middle;
86 padding:0; margin:0;
87 }
88
89 header > menu a {
90 padding-right:20px;
91 text-shadow:none;
92 -webkit-transition: text-shadow 0.9s, color 0.9s; /* Safari */
93 -ms-transition: text-shadow 0.9s, color 0.9s;
94 -moz-transition: text-shadow 0.9s, color 0.9s;
95 -o-transition: text-shadow 0.9s, color 0.9s;
96 transition: text-shadow 0.9s linear, color 0.9s linear;
97 }
98
99 .no-touch header > menu a:hover,
100 .touch header > menu a:focus,
101 .touch header > menu a:active
102 {
103 color:#ffffff;
104 text-shadow: 0px 0px 13px #ff9999;
105 -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */
106 -ms-transition: text-shadow 0.31s, color 0.31s;
107 -moz-transition: text-shadow 0.31s, color 0.31s;
108 -o-transition: text-shadow 0.31s, color 0.31s;
109 transition: text-shadow 0.31s linear, color 0.31s linear;
110 }
111
112 header > menu a:last-child {
113 padding-right:26px;
114 }
115
116
117
118 /* upper horizontal document tree navigation strip */
119
120 nav {
121 position:fixed; top:33px;
122 z-index:3;
123 width:100%;
124 font-size:18px;
125 border-bottom-style:solid;
126 border-bottom-width:1px;
127 border-bottom-color:#898989;
128 padding: 3px 0px 3px 172px;
129 background-color:#eaeaea; /* fallback (pre CSS3 browsers) */
130 background: -webkit-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Safari 5.1 to 6.0 */
131 background: -o-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Opera 11.1 to 12.0 */
132 background: -moz-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Firefox 3.6 to 15 */
133 background: linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* Standard syntax */
134 box-shadow: 0px 10px 8px rgba(15,15,15,0.25);
135
136 -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
137 -o-transition: -o-transform 0.16s ease, padding-left 0.2s ease;
138 -ms-transition: -ms-transform 0.16s ease, padding-left 0.2s ease;
139 -moz-transition: -moz-transform 0.16s ease, padding-left 0.2s ease;
140 transition: transform 0.16s ease, padding-left 0.2s ease;
141 }
142
143 .no-effect nav {
144 -webkit-transition: none !important;
145 -moz-transition: none !important;
146 -ms-transition: none !important;
147 -o-transition: none !important;
148 transition: none !important;
149 }
150
151 .no-toc nav {
152 padding-left:56px;
153
154 -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
155 -o-transition: -o-transform 0.16s ease, padding-left 0.2s ease;
156 -ms-transition: -ms-transform 0.16s ease, padding-left 0.2s ease;
157 -moz-transition: -moz-transform 0.16s ease, padding-left 0.2s ease;
158 transition: transform 0.16s ease, padding-left 0.2s ease;
159 }
160
161 .no-effect
162 .no-toc nav {
163 -webkit-transition: none !important;
164 -moz-transition: none !important;
165 -ms-transition: none !important;
166 -o-transition: none !important;
167 transition: none !important;
168 }
169
170 nav > div.foldbtn {
171 display:block;
172 position:fixed;
173 top:33;
174 left:10;
175 color:#998952;
176 font-weight:200;
177 font-size:28px;
178 }
179
180 nav > ul {
181 list-style:none;
182 padding:0;
183 margin:0;
184 }
185
186 nav > ul > li {
187 color:#5d5d5d;
188 font-weight:200;
189 text-decoration:none;
190 float:left;
191 padding:4px 4px 4px 3px;
192 }
193
194 .no-touch nav > ul > li:hover,
195 .touch nav > ul > li.active
196 {
197 color:white;
198 background-color:rgba(80,80,80,0.5);
199 border-left-style:solid;
200 border-left-width:2px;
201 border-left-color:#a4a4a4;
202 border-right-style:solid;
203 border-right-width:2px;
204 border-right-color:#898989;
205 -webkit-border-top-right-radius: 8px;
206 -moz-border-radius-topright: 8px;
207 border-top-right-radius: 8px;
208 padding:4px 2px 4px 1px;
209 }
210
211 nav > ul > li:last-child {
212 color:black;
213 font-weight:500;
214 }
215
216 .no-touch nav > ul > li:last-child:hover,
217 .touch nav > ul > li:last-child.active
218 {
219 color:white;
220 }
221
222 nav > ul > li::before {
223 content: "���";
224 color:#b4b4b4;
225 padding-left:2px;
226 padding-right:5px;
227 }
228
229 .iOS
230 nav > ul > li::before {
231 font-family:"Hiragino Mincho ProN";
232 }
233
234 nav > ul > li:first-child::before {
235 content: "";
236 }
237
238 nav a {
239 text-decoration:none;
240 color:inherit;
241 outline:none;
242 border:0;
243 }
244
245 nav > ul > li ul { /* base rule for drop down menu */
246 overflow:auto;
247 position:absolute; top:32px;
248 min-width:230px;
249 list-style-type:none;
250 margin:0px 0px 0px -3px;
251 padding:1px 1px 1px 1px;
252 background-color:rgba(80,80,80,0.77);
253 border-bottom-style:solid;
254 border-bottom-width:4px;
255 border-bottom-color:#898989;
256 border-right-style:solid;
257 border-right-width:2px;
258 border-right-color:#898989;
259 border-left-style:solid;
260 border-left-width:2px;
261 border-left-color:#a4a4a4;
262 color:white;
263 -webkit-border-bottom-left-radius: 5px;
264 -moz-border-radius-bottomleft: 5px;
265 border-bottom-left-radius: 5px;
266 -webkit-border-bottom-right-radius: 5px;
267 -moz-border-radius-bottomright: 5px;
268 border-bottom-right-radius: 5px;
269 -webkit-border-top-right-radius: 5px;
270 -moz-border-radius-topright: 5px;
271 border-top-right-radius: 5px;
272 }
273
274 .hasTransform
275 nav > ul > li ul { /* rule extension for drop down menu */
276 display:block;
277 opacity:0;
278
279 -webkit-transform: scaleY(0);
280 -o-transform: scaleY(0);
281 -ms-transform: scaleY(0);
282 -moz-transform: scaleY(0);
283 transform: scaleY(0);
284
285 -webkit-transform-origin: top;
286 -o-transform-origin: top;
287 -ms-transform-origin: top;
288 -moz-transform-origin: top;
289 transform-origin: top;
290
291 -webkit-transition: -webkit-transform 0.16s ease, opacity 0.2s ease;
292 -o-transition: -o-transform 0.16s ease, opacity 0.2s ease;
293 -ms-transition: -ms-transform 0.16s ease, opacity 0.2s ease;
294 -moz-transition: -moz-transform 0.16s ease, opacity 0.2s ease;
295 transition: transform 0.16s ease, opacity 0.2s ease;
296 }
297
298
299 .no-touch .hasTransform nav > ul > li:hover ul,
300 .touch .hasTransform nav > ul > li.active ul
301 { /* rule extension for drop down menu */
302 display:block;
303 opacity:1;
304
305 -webkit-transform: scaleY(1);
306 -o-transform: scaleY(1);
307 -ms-transform: scaleY(1);
308 -moz-transform: scaleY(1);
309 transform: scaleY(1);
310
311 -webkit-transition: -webkit-transform 0.1s ease;
312 -o-transition: -o-transform 0.1s ease;
313 -ms-transition: -ms-transform 0.1s ease;
314 -moz-transition: -moz-transform 0.1s ease;
315 transition: transform 0.1s ease;
316 }
317
318 body:not(.hasTransform)
319 nav > ul > li ul { /* fallback rule extension for older browsers */
320 display:none;
321 }
322
323 body:not(.hasTransform)
324 nav > ul > li:hover ul { /* fallback rule extension for older browsers */
325 display:block;
326 }
327
328 nav > ul > li li {
329 padding:3px 14px 3px 14px;
330 -webkit-transition: background-color 0.45s; /* Safari */
331 -moz-transition: background-color 0.45s;
332 -ms-transition: background-color 0.45s;
333 -o-transition: background-color 0.45s;
334 transition: background-color 0.45s linear;
335 }
336
337 nav > ul > li li:hover {
338 background-color:rgba(255,0,0,0.32);
339 -webkit-transition: background-color 0.21s; /* Safari */
340 -moz-transition: background-color 0.21s;
341 -ms-transition: background-color 0.21s;
342 -o-transition: background-color 0.21s;
343 transition: background-color 0.21s linear;
344 }
345
346
347
348 /* article's table of contents (on left side) */
349
350 aside {
351 position:fixed; top:66px;
352 z-index:2;
353 width:180px;
354 max-height: -webkit-calc(100% - 67px);
355 max-height: -moz-calc(100% - 67px);
356 max-height: -o-calc(100% - 67px);
357 max-height: calc(100% - 67px);
358 overflow:auto;
359 overflow-x:hidden;
360 font-family:CRDHigh;
361 color:#5d5d5d;
362 padding:0 0 0 0;
363 margin:0 0 0 0;
364 border-right-style:solid;
365 border-right-width:1px;
366 border-right-color:#ababab;
367
368 -webkit-border-bottom-right-radius: 11px;
369 -moz-border-radius-bottomright: 11px;
370 border-bottom-right-radius: 11px;
371
372 -webkit-border-bottom-left-radius: 11px;
373 -moz-border-radius-bottomleft: 11px;
374 border-bottom-left-radius: 11px;
375
376 -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
377 -o-transition: -o-transform 0.16s ease, width 0.2s ease;
378 -ms-transition: -ms-transform 0.16s ease, width 0.2s ease;
379 -moz-transition: -moz-transform 0.16s ease, width 0.2s ease;
380 transition: transform 0.16s ease, width 0.2s ease;
381 }
382
383 .no-effect aside {
384 -webkit-transition: none !important;
385 -moz-transition: none !important;
386 -ms-transition: none !important;
387 -o-transition: none !important;
388 transition: none !important;
389 }
390
391 .no-toc aside {
392 overflow:hidden;
393 width:0;
394
395 -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
396 -o-transition: -o-transform 0.16s ease, width 0.2s ease;
397 -ms-transition: -ms-transform 0.16s ease, width 0.2s ease;
398 -moz-transition: -moz-transform 0.16s ease, width 0.2s ease;
399 transition: transform 0.16s ease, width 0.2s ease;
400 }
401
402 .no-effect
403 .no-toc aside {
404 -webkit-transition: none !important;
405 -moz-transition: none !important;
406 -ms-transition: none !important;
407 -o-transition: none !important;
408 transition: none !important;
409 }
410
411 aside > div.toc {
412 z-index:2;
413 width:inherit;
414 padding:0px 0px 0px 0px;
415 margin:0px 0px 0px 0px;
416
417 background-color:#cbc3c2; /* fallback (non CSS3 browsers) */
418 background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
419 background: -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
420 background: -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
421 background: linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
422
423 -webkit-border-bottom-left-radius: 11px;
424 -moz-border-radius-bottomleft: 11px;
425 border-bottom-left-radius: 11px;
426
427 -webkit-border-bottom-right-radius: 11px;
428 -moz-border-radius-bottomright: 11px;
429 border-bottom-right-radius: 11px;
430 }
431
432 aside a {
433 text-decoration:inherit;
434 color:inherit;
435 outline:none;
436 border:0;
437 }
438
439 aside > div.toc ul {
440 list-style-type:none;
441 list-style-position:inside;
442 padding:0px 0px 0px 0px;
443 margin:0px 0px 0px 0px;
444 }
445
446 aside > div.toc > ul {
447 background-color:#d0d0d0; /* fallback (pre CSS3 browsers) */
448 background: -webkit-linear-gradient(rgba(255,255,255,0.43), rgba(136,136,136,1.49)); /* For Safari 5.1 to 6.0 */
449 background: -o-linear-gradient(rgba(255,255,255,0.43), rgba(136,136,136,0.49)); /* For Opera 11.1 to 12.0 */
450 background: -moz-linear-gradient(rgba(255,255,255,0.43), rgba(136,136,136,0.49)); /* For Firefox 3.6 to 15 */
451 background: linear-gradient(rgba(255,255,255,0.43), rgba(136,136,136,0.49)); /* Standard syntax */
452 }
453
454 aside > div.toc > ul > li {
455 font-size:20px;
456 font-weight:400;
457 margin:0px 0px 0px 0px;
458 padding:5px 20px 5px 24px;
459 border-bottom-style:solid;
460 border-bottom-width:1px;
461 border-bottom-color:#898989;
462 text-align:right;
463 -webkit-transition: background-color 0.45s; /* Safari */
464 -moz-transition: background-color 0.45s;
465 -ms-transition: background-color 0.45s;
466 -o-transition: background-color 0.45s;
467 transition: background-color 0.45s linear;
468 }
469
470 aside .current {
471 color:#caad2c;
472 text-shadow: 0px 0px 8px #fbf1f1;
473 }
474
475 aside > div.toc > ul > li > ul {
476 color:#5d5d5d;
477 }
478
479 aside > div.toc > ul > li > ul > li {
480 font-size:15px;
481 font-weight:200;
482 text-align:right;
483 padding:0;
484 margin: 4px 0px 4px 0px;
485 }
486
487 aside > div.toc > ul > li > ul > li.current {
488 color:#caad2c;
489 text-shadow: 0px 0px 8px #fbf1f1;
490 }
491
492
493 .no-touch aside > div.toc > ul > li:hover,
494 .touch aside > div.toc > ul > li:focus,
495 .touch aside > div.toc > ul > li:active
496 {
497 background-color:rgba(255,0,0,0.22);
498 -webkit-transition: background-color 0.25s; /* Safari */
499 -moz-transition: background-color 0.25s;
500 -ms-transition: background-color 0.25s;
501 -o-transition: background-color 0.25s;
502 transition: background-color 0.25s linear;
503 }
504
505 .no-touch aside > div.toc > ul > li > ul > li:before {
506 visibility:hidden;
507 content:url('../pix/disc.png');
508 padding-right:6px;
509 }
510
511 .no-touch aside > div.toc > ul > li > ul > li:hover:before
512 {
513 visibility:visible;
514 }
515
516 aside > div.toc > div.buttons {
517 display:table;
518 width:100%;
519 overflow:hidden;
520 margin:3px 0px 0px 0px;
521 position:relative; bottom:2px;
522 z-index:8;
523 color:#5d5d5d;
524
525 -webkit-border-bottom-right-radius: 11px;
526 -moz-border-radius-bottomright: 11px;
527 border-bottom-right-radius: 11px;
528
529 -webkit-border-bottom-left-radius: 11px;
530 -moz-border-radius-bottomleft: 11px;
531 border-bottom-left-radius: 11px;
532 }
533
534 aside > div.toc > div.buttons > * {
535 display:table-cell;
536 width:50%;
537 font-family:CRDHigh;
538 font-weight:400;
539 color:#5d5d5d;
540 padding:4px 4px 4px 4px;
541 border-bottom-style:solid;
542 border-bottom-width:1px;
543 border-bottom-color:#898989;
544 }
545
546 aside > div.toc > div.buttons > .disabled {
547 color:#959595;
548 }
549
550 aside > div.toc > div.buttons > * {
551 background-color:#d4d4d8; /* fallback */
552 background-color:rgba(242,242,248,0.45);
553 -webkit-transition: background-color 0.5s; /* Safari */
554 -moz-transition: background-color 0.5s;
555 -ms-transition: background-color 0.5s;
556 -o-transition: background-color 0.5s;
557 transition: background-color 0.5s linear;
558 }
559
560 aside > div.toc > div.buttons > *:first-child {
561 text-align:left;
562
563 border-left-style:solid;
564 border-left-width:1px;
565 border-left-color:#898989;
566
567 -webkit-border-bottom-left-radius: 11px;
568 -moz-border-radius-bottomleft: 11px;
569 border-bottom-left-radius: 11px;
570 }
571
572 aside > div.toc > div.buttons > *:last-child {
573 text-align:right;
574
575 border-left-style:solid;
576 border-left-width:1px;
577 border-left-color:#898989;
578
579 /* FIXME: would create an undesired 1px gap on the right */
580 /*border-right-style:solid;
581 border-right-width:1px;
582 border-right-color:#898989;*/
583
584 -webkit-border-bottom-right-radius: 11px;
585 -moz-border-radius-bottomright: 11px;
586 border-bottom-right-radius: 11px;
587 }
588
589 .no-touch aside > div.toc > div.buttons > *:not(.disabled):hover,
590 .touch aside > div.toc > div.buttons > *:not(.disabled):focus,
591 .touch aside > div.toc > div.buttons > *:not(.disabled):active
592 {
593 background-color:rgba(255,0,0,0.21);
594 -webkit-transition: background-color 0.25s; /* Safari */
595 -moz-transition: background-color 0.25s;
596 -ms-transition: background-color 0.25s;
597 -o-transition: background-color 0.25s;
598 transition: background-color 0.25s linear;
599 }
600
601 aside > div.toc > div.buttons .arrow {
602 vertical-align:top;
603 font-size:15px;
604 }
605
606 .iOS
607 aside > div.toc > div.buttons .arrow {
608 font-family:"Hiragino Mincho ProN";
609 }
610
611
612
613 /* Article */
614
615 article {
616 display:block;
617 width: -webkit-calc(100% - 181);
618 width: -moz-calc(100% - 181);
619 width: -o-calc(100% - 181);
620 width: calc(100% - 181);
621 background-color:white;
622 margin-top: 67px;
623 padding: 16px 70px 95px 70px;
624 margin-left:181px;
625 font-size:18px;
626 font-weight:200;
627 border-left-style:solid;
628 border-left-width:1px;
629 border-left-color:#898989;
630
631 -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
632 -o-transition: -o-transform 0.16s ease, margin-left 0.2s ease;
633 -ms-transition: -ms-transform 0.16s ease, margin-left 0.2s ease;
634 -moz-transition: -moz-transform 0.16s ease, margin-left 0.2s ease;
635 transition: transform 0.16s ease, margin-left 0.2s ease;
636 }
637
638 .no-effect article {
639 -webkit-transition: none !important;
640 -moz-transition: none !important;
641 -ms-transition: none !important;
642 -o-transition: none !important;
643 transition: none !important;
644 }
645
646 .no-toc article {
647 margin-left:0px;
648
649 -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
650 -o-transition: -o-transform 0.16s ease, margin-left 0.2s ease;
651 -ms-transition: -ms-transform 0.16s ease, margin-left 0.2s ease;
652 -moz-transition: -moz-transform 0.16s ease, margin-left 0.2s ease;
653 transition: transform 0.16s ease, margin-left 0.2s ease;
654 }
655
656 .no-effect
657 .no-toc article {
658 -webkit-transition: none !important;
659 -moz-transition: none !important;
660 -ms-transition: none !important;
661 -o-transition: none !important;
662 transition: none !important;
663 }
664
665 article h1 {
666 clear:both;
667 border-bottom-style:solid;
668 border-bottom-width:1px;
669 border-bottom-color:#898989;
670 text-align:center;
671 font-family:CRDHigh;
672 font-size:32px;
673 font-weight:700;
674 color:#a19f9f;
675 padding-top:45px;
676 padding-bottom:28px;
677 margin-top:0;
678 margin-bottom:40px;
679 }
680
681 article h2 {
682 clear:both;
683 border-bottom-style:solid;
684 border-bottom-width:1px;
685 border-bottom-color:#898989;
686 font-family:CRDHigh;
687 font-size:26px;
688 font-weight:400;
689 padding-top:35px;
690 padding-bottom:16px;
691 margin-top:0;
692 margin-bottom:28px;
693 }
694
695 article h3 {
696 clear:both;
697 padding-top:20px;
698 padding-bottom:0px;
699 margin-top:0;
700 margin-bottom:0;
701 font-family:CRDHigh;
702 color:#9a6938;
703 font-size:24px;
704 font-weight:300;
705 }
706
707 article p {
708 clear:both;
709 }
710
711 /* automatically center the 1st paragraph (block) directly after a h1 type header (since that header type is centered as well) */
712 article h1 + p {
713 display:table; /*HACK: "block" would stretch the entire page width */
714 margin-left:auto;
715 margin-right:auto;
716 }
717
718 article a {
719 font-weight:400;
720 color:#1ba1dd;
721 text-decoration:none;
722 outline:none;
723 border:none;
724 }
725
726 article a img {
727 border:none;
728 text-decoration:none;
729 }
730
731 article li img {
732 float:left;
733 }
734
735 .no-touch article a:hover,
736 .touch article a:focus,
737 .touch article a:active
738 {
739 text-decoration:underline;
740 }
741
742 article ul {
743 font-weight:inherit;
744 padding:0 0 0 60px;
745 margin:0 0 21px 0;
746 }
747
748 article ul li {
749 list-style-type:disc;
750 padding:4px 0 0 14px;
751 margin:12px 0 0 0;
752 }
753
754
755 article ol {
756 counter-reset:oli;
757 font-weight:inherit;
758 padding:0 0 0 29px;
759 margin:0 0 21px 0;
760 }
761
762 article ol li:before {
763 content:counters(oli,".") ".";
764 counter-increment:oli;
765 font-weight:600;
766 margin:0 20px 0 0;
767 }
768
769 article ol li {
770 list-style-type:none;
771 padding:4px 0 0 14px;
772 margin:12px 0 0 0;
773 }
774
775
776
777 article code, article .code {
778 font-family:CRDCour;
779 color:#404040;
780 white-space:pre;
781 }
782
783 article code {
784 display:inline-block;
785 font-size:15px;
786 margin:0 3px 0px 3px;
787 padding:2px 6px 0px 6px;
788 background-color:#fcf9f9;
789 }
790
791 article > code {
792 display:block;
793 font-size:15px;
794 margin:0 37px 0 37px;
795 padding:2px 6px 0px 6px;
796 background-color:#fcf9f9;
797 }
798
799 article ul.code {
800 list-style:outside none none;
801 counter-reset:codeline;
802 font-size:14px;
803 font-weight:normal;
804 line-height:1.1;
805 margin:0 0 0 0;
806 padding:8px 0px 8px 0px;
807 }
808
809 article .code li {
810 display:block;
811 list-style-type:none;
812 white-space:pre-wrap;
813 border-left:32px solid #f9f3f3;
814 text-indent:-30px;
815 background-color:#fcf9f9;
816 margin:0 0 0 0;
817 padding:0 0 0 0;
818 }
819
820 article .code li:first-child {
821 padding-top:6px;
822 }
823
824 article .code li:last-child {
825 padding-bottom:3px;
826 }
827
828 article .code li:before {
829 display:inline-block;
830 white-space:pre;
831 content:counter(codeline,decimal) ". ";
832 counter-increment:codeline;
833 min-width:38px;
834 text-align:right;
835 color:#c9c9c9;
836 }
837
838 article .code .k, article code .k { /*keyword*/
839 font-weight:bold;
840 color:black;
841 }
842
843 article .code .n, article code .n { /*number*/
844 color:#c4950c;
845 }
846
847 article .code .i, article code .i { /*identifier (function name)*/
848 /*color:#0c4fc4;*/
849 color:#1ba1dd;
850 }
851
852 article .code .a, article code .a { /*array variable*/
853 color:#790cc4;
854 /*color:black;*/
855 }
856
857 article .code .c, article code .c { /*characters*/
858 color:#c40c0c;
859 }
860
861 article .code .s, article code .s { /*string variable*/
862 /*color:#9a693c;*/
863 /*color:black;*/
864 color:#790cc4;
865 }
866
867 article .code .v, article code .v { /*integer variable*/
868 /*color:black;*/
869 color:#790cc4;
870 }
871
872 article .code .h, article code .h { /*event handler*/
873 font-weight:bold;
874 color:#07c0cf;
875 }
876
877 article .code .q, article code .q { /*comment*/
878 color:#9c9c9c;
879 font-style:italic;
880 }
881
882 article .code .p, article code .p { /*preprocessor statements*/
883 /*color:#87b1a8;*/
884 color:#2f8a33;
885 /*font-style:italic;*/
886 font-weight:normal;
887 }
888
889 article .code .m, article code .m { /* metaphor (natural language text used as pseudo code) */
890 background-color:#ddf4fd;
891 font-size:14px;
892 color:black;
893 font-weight:normal;
894 border:solid 1px #73a3ab;
895 -webkit-border-radius: 10px;
896 -moz-border-radius: 10px;
897 border-radius: 10px;
898 margin:0 0 0 0;
899 padding:2px 4px 0px 4px;
900 }
901
902 article table {
903 margin:20px 37px 20px 37px;
904 padding:0 0 0 0;
905 /*background-color:red;*/
906 border:none;
907 border-collapse:collapse;
908 }
909
910 article tr {
911 padding:0 0 0 0;
912 margin:0 0 0 0;
913 }
914
915 article th {
916 background-color:#e0e0ff;
917 padding:0px 8px 0px 8px;
918 margin:0 0 0 0;
919 border:3px solid white;
920 font-size:16px;
921 font-weight:600;
922 }
923
924 article td {
925 background-color:#f9f7f7;
926 padding:4px 8px 4px 8px;
927 margin:0 0 0 0;
928 border:3px solid white;
929 font-size:16px;
930 font-weight:300;
931 line-height:1.2;
932 }
933
934 article table a {
935 font-weight:400;
936 }
937
938 article note:before {
939 white-space:pre-wrap;
940 content:'NOTE: ';
941 font-weight:500;
942 }
943
944 article note.important:before {
945 white-space:pre-wrap;
946 content:'IMPORTANT: ';
947 font-weight:500;
948 }
949
950 article note {
951 display:table; /*HACK: "block" would stretch the entire page width */
952 background-color:#ede8e8;
953 border-top:none;
954 border-right:none;
955 border-bottom:none;
956 border-left:solid 10px #898989;
957 margin: 24px auto 27px 43px;
958 padding: 15px 18px 15px 18px;
959 max-width: -webkit-calc(100% - 145px);
960 max-width: -moz-calc(100% - 145px);
961 max-width: -o-calc(100% - 145px);
962 max-width: calc(100% - 145px);
963 }
964
965 article td > note {
966 display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
967 }
968
969 article note.important {
970 border-left:solid 10px #ff4141;
971 }
972
973 article > img, example > img {
974 display:block;
975 clear:both;
976 max-width:100%;
977 margin-left:auto;
978 margin-right:auto;
979 /*border:solid 1px #8e8e8e;*/
980 padding-top:25px;
981 border:none;
982 }
983
984 article p img {
985 display:inline-block;
986 float:left;
987 margin:4px 20px 19px 0px;
988 padding:0 0 0 0;
989 /*border:solid 1px #8e8e8e;*/
990 border:none;
991 max-width:99%;
992 }
993
994 article div.imgcptn {
995 display:block;
996 width:100%;
997 text-align:center;
998 font-weight:200;
999 color:#999999;
1000 font-size:16px;
1001 font-style:italic;
1002 margin: 8px 0 16px 0;
1003 }
1004
1005 article example:before {
1006 display:block;
1007 position:relative; top:-5px; left:-32px;
1008 content:'Example';
1009 font-weight:500;
1010 color:white;
1011 border:none;
1012 margin:0;
1013 padding:0;
1014 width:100px;
1015 background-color:#dedede;
1016 /* -moz-transform: rotate(30deg);
1017 -ms-transform: rotate(30deg);
1018 -o-transform: rotate(30deg);
1019 -webkit-transform: rotate(30deg);
1020 transform: rotate(90deg);
1021 transform-origin: 0% 50%;*/
1022 text-align:center;
1023 }
1024
1025 article example {
1026 display:inline-block;
1027
1028 width: -webkit-calc(100% - 80px);
1029 width: -moz-calc(100% - 80px);
1030 width: -o-calc(100% - 80px);
1031 width: calc(100% - 80px);
1032
1033 border-top:solid 1px #e5e5e5;
1034 border-right:solid 18px #dedede;
1035 border-bottom:solid 1px #e5e5e5;
1036 border-left:solid 18px #dedede;
1037 margin:0px, 20px, 0px, 20px;
1038 padding:5px 15px 8px 24px;
1039 }
1040
1041 article dir {
1042 display:block;
1043 list-style-type:none;
1044 background-image:url('../pix/folder.png');
1045 background-repeat:no-repeat;
1046 background-position:2px top;
1047 padding:0px;
1048 margin:0px;
1049 font-family:CRDCour;
1050 font-size:15px;
1051 color:#000000;
1052 }
1053
1054 article > dir, example > dir {
1055 padding-left:66px;
1056 background-position:36px top;
1057 }
1058
1059 article dir > * {
1060 padding-top:2px;
1061 padding-bottom:2px;
1062 padding-left:31px;
1063 }
1064
1065 article dir file {
1066 display:block;
1067 list-style-type:none;
1068 background-image:url('../pix/file.png');
1069 background-repeat:no-repeat;
1070 background-position:2px top;
1071 font-family:CRDCour;
1072 font-size:15px;
1073 color:#6f6f6f;
1074 }
1075
1076
1077
1078 /* article footer */
1079
1080 article > ul.docpager {
1081 display:table;
1082 margin:0 0 0 0;
1083 padding:50px 0 0 0;
1084 width:100%;
1085 }
1086
1087 article > ul.docpager > li {
1088 display:table-cell;
1089 width:33%;
1090 margin:0 0 0 0;
1091 padding:0 0 0 0;
1092 }
1093
1094 article > ul.docpager > li:nth-child(1) {
1095 text-align:left;
1096 padding-right:10px;
1097 }
1098
1099 article > ul.docpager > li:nth-child(1) > a:before {
1100 content: "��� ";
1101 }
1102
1103 .iOS
1104 article > ul.docpager > li:nth-child(1) > a:before {
1105 font-family:"Hiragino Mincho ProN";
1106 }
1107
1108 article > ul.docpager > li:nth-child(2) {
1109 text-align:center;
1110 padding-left:10px;
1111 padding-right:10px;
1112 }
1113
1114 article > ul.docpager > li:nth-child(2) > a:before {
1115 content: "��� ";
1116 }
1117
1118 .iOS
1119 article > ul.docpager > li:nth-child(2) > a:before {
1120 font-family:"Hiragino Mincho ProN";
1121 }
1122
1123 article > ul.docpager > li:nth-child(3) {
1124 text-align:right;
1125 padding-left:10px;
1126 }
1127
1128 article > ul.docpager > li:nth-child(3) > a:after {
1129 content: " ���";
1130 }
1131
1132 .iOS
1133 article > ul.docpager > li:nth-child(3) > a:after {
1134 font-family:"Hiragino Mincho ProN";
1135 }
1136
1137 article > .endline {
1138 font-family:CRDSans;
1139 font-size:16px;
1140 font-weight:300;
1141 color:#9d9d9d;
1142 border-top:solid 1px #dedede;
1143 border-left:none;
1144 border-right:none;
1145 border-bottom:none;
1146 margin:30px 0 0 0;
1147 padding:10px 0 0 0;
1148 }
1149
1150
1151
1152 /* very bottom footer */
1153
1154 footer {
1155 position:relative;
1156 z-index:1;
1157 display:block;
1158 width:100%;
1159 background-color:#aaaaaa; /* fallback */
1160 background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
1161 background: -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
1162 background: -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
1163 background: linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
1164 margin:0px 0px 0px 0px;
1165 padding: 24px 0px 28px 0px;
1166 font-family: CRDHigh;
1167 font-size:15px;
1168 font-weight:200;
1169 color:white;
1170 text-align:center;
1171 border-top-style:solid;
1172 border-top-width:1px;
1173 border-top-color:#898989;
1174 }
1175
1176 footer a {
1177 color:inherit;
1178 text-decoration:none;
1179 outline:none;
1180 border:0;
1181 }
1182
1183 .no-touch footer a:hover,
1184 .touch footer a:focus,
1185 .touch footer a:active
1186 {
1187 text-decoration:underline;
1188 }

  ViewVC Help
Powered by ViewVC