Add deck.js slide deck with basic layout
[kai/lca12.git] / core / deck.core.css
1 html {
2   height: 100%;
3 }
4
5 .deck-container {
6   position: relative;
7   height: 100%;
8   width: 70%;
9   margin: 0 auto;
10   padding: 0 48px;
11   font-size: 16px;
12   line-height: 1.25;
13   overflow: hidden;
14   /* Resets and base styles from HTML5 Boilerplate */
15   /* End HTML5 Boilerplate adaptations */
16 }
17 .js .deck-container {
18   visibility: hidden;
19 }
20 .ready .deck-container {
21   visibility: visible;
22 }
23 .touch .deck-container {
24   -webkit-text-size-adjust: none;
25 }
26 .deck-container div, .deck-container span, .deck-container object, .deck-container iframe,
27 .deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container h5, .deck-container h6, .deck-container p, .deck-container blockquote, .deck-container pre,
28 .deck-container abbr, .deck-container address, .deck-container cite, .deck-container code, .deck-container del, .deck-container dfn, .deck-container em, .deck-container img, .deck-container ins, .deck-container kbd, .deck-container q, .deck-container samp,
29 .deck-container small, .deck-container strong, .deck-container sub, .deck-container sup, .deck-container var, .deck-container b, .deck-container i, .deck-container dl, .deck-container dt, .deck-container dd, .deck-container ol, .deck-container ul, .deck-container li,
30 .deck-container fieldset, .deck-container form, .deck-container label, .deck-container legend,
31 .deck-container table, .deck-container caption, .deck-container tbody, .deck-container tfoot, .deck-container thead, .deck-container tr, .deck-container th, .deck-container td,
32 .deck-container article, .deck-container aside, .deck-container canvas, .deck-container details, .deck-container figcaption, .deck-container figure,
33 .deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section, .deck-container summary,
34 .deck-container time, .deck-container mark, .deck-container audio, .deck-container video {
35   margin: 0;
36   padding: 0;
37   border: 0;
38   font-size: 100%;
39   font: inherit;
40   vertical-align: baseline;
41 }
42 .deck-container article, .deck-container aside, .deck-container details, .deck-container figcaption, .deck-container figure,
43 .deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section {
44   display: block;
45 }
46 .deck-container blockquote, .deck-container q {
47   quotes: none;
48 }
49 .deck-container blockquote:before, .deck-container blockquote:after, .deck-container q:before, .deck-container q:after {
50   content: "";
51   content: none;
52 }
53 .deck-container ins {
54   background-color: #ff9;
55   color: #000;
56   text-decoration: none;
57 }
58 .deck-container mark {
59   background-color: #ff9;
60   color: #000;
61   font-style: italic;
62   font-weight: bold;
63 }
64 .deck-container del {
65   text-decoration: line-through;
66 }
67 .deck-container abbr[title], .deck-container dfn[title] {
68   border-bottom: 1px dotted;
69   cursor: help;
70 }
71 .deck-container table {
72   border-collapse: collapse;
73   border-spacing: 0;
74 }
75 .deck-container hr {
76   display: block;
77   height: 1px;
78   border: 0;
79   border-top: 1px solid #ccc;
80   margin: 1em 0;
81   padding: 0;
82 }
83 .deck-container input, .deck-container select {
84   vertical-align: middle;
85 }
86 .deck-container select, .deck-container input, .deck-container textarea, .deck-container button {
87   font: 99% sans-serif;
88 }
89 .deck-container pre, .deck-container code, .deck-container kbd, .deck-container samp {
90   font-family: monospace, sans-serif;
91 }
92 .deck-container a {
93   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
94 }
95 .deck-container a:hover, .deck-container a:active {
96   outline: none;
97 }
98 .deck-container ul, .deck-container ol {
99   margin-left: 2em;
100   vertical-align: top;
101 }
102 .deck-container ol {
103   list-style-type: decimal;
104 }
105 .deck-container nav ul, .deck-container nav li {
106   margin: 0;
107   list-style: none;
108   list-style-image: none;
109 }
110 .deck-container small {
111   font-size: 85%;
112 }
113 .deck-container strong, .deck-container th {
114   font-weight: bold;
115 }
116 .deck-container td {
117   vertical-align: top;
118 }
119 .deck-container sub, .deck-container sup {
120   font-size: 75%;
121   line-height: 0;
122   position: relative;
123 }
124 .deck-container sup {
125   top: -0.5em;
126 }
127 .deck-container sub {
128   bottom: -0.25em;
129 }
130 .deck-container textarea {
131   overflow: auto;
132 }
133 .ie6 .deck-container legend, .ie7 .deck-container legend {
134   margin-left: -7px;
135 }
136 .deck-container input[type="radio"] {
137   vertical-align: text-bottom;
138 }
139 .deck-container input[type="checkbox"] {
140   vertical-align: bottom;
141 }
142 .ie7 .deck-container input[type="checkbox"] {
143   vertical-align: baseline;
144 }
145 .ie6 .deck-container input {
146   vertical-align: text-bottom;
147 }
148 .deck-container label, .deck-container input[type="button"], .deck-container input[type="submit"], .deck-container input[type="image"], .deck-container button {
149   cursor: pointer;
150 }
151 .deck-container button, .deck-container input, .deck-container select, .deck-container textarea {
152   margin: 0;
153 }
154 .deck-container input:invalid, .deck-container textarea:invalid {
155   border-radius: 1px;
156   -moz-box-shadow: 0px 0px 5px red;
157   -webkit-box-shadow: 0px 0px 5px red;
158   box-shadow: 0px 0px 5px red;
159 }
160 .deck-container input:invalid .no-boxshadow, .deck-container textarea:invalid .no-boxshadow {
161   background-color: #f0dddd;
162 }
163 .deck-container button {
164   width: auto;
165   overflow: visible;
166 }
167 .ie7 .deck-container img {
168   -ms-interpolation-mode: bicubic;
169 }
170 .deck-container, .deck-container select, .deck-container input, .deck-container textarea {
171   color: #444;
172 }
173 .deck-container a {
174   color: #607890;
175 }
176 .deck-container a:hover, .deck-container a:focus {
177   color: #036;
178 }
179 .deck-container a:link {
180   -webkit-tap-highlight-color: #fff;
181 }
182 .deck-container.deck-loading {
183   display: none;
184 }
185
186 .slide {
187   width: auto;
188   min-height: 100%;
189   position: relative;
190 }
191 .slide h1 {
192   font-size: 4.5em;
193 }
194 .slide h1, .slide .vcenter {
195   font-weight: bold;
196   text-align: center;
197   padding-top: 1em;
198   max-height: 100%;
199 }
200 .csstransforms .slide h1, .csstransforms .slide .vcenter {
201   padding: 0 48px;
202   position: absolute;
203   left: 0;
204   right: 0;
205   top: 50%;
206   -webkit-transform: translate(0, -50%);
207   -moz-transform: translate(0, -50%);
208   -ms-transform: translate(0, -50%);
209   -o-transform: translate(0, -50%);
210   transform: translate(0, -50%);
211 }
212 .slide .vcenter h1 {
213   position: relative;
214   top: auto;
215   padding: 0;
216   -webkit-transform: none;
217   -moz-transform: none;
218   -ms-transform: none;
219   -o-transform: none;
220   transform: none;
221 }
222 .slide h2 {
223   font-size: 2.25em;
224   font-weight: bold;
225   padding-top: .5em;
226   margin: 0 0 .66666em 0;
227   border-bottom: 3px solid #888;
228 }
229 .slide h3 {
230   font-size: 1.4375em;
231   font-weight: bold;
232   margin-bottom: .30435em;
233 }
234 .slide h4 {
235   font-size: 1.25em;
236   font-weight: bold;
237   margin-bottom: .25em;
238 }
239 .slide h5 {
240   font-size: 1.125em;
241   font-weight: bold;
242   margin-bottom: .2222em;
243 }
244 .slide h6 {
245   font-size: 1em;
246   font-weight: bold;
247 }
248 .slide img, .slide iframe, .slide video {
249   display: block;
250   max-width: 100%;
251 }
252 .slide video, .slide iframe, .slide img {
253   display: block;
254   margin: 0 auto;
255 }
256 .slide p, .slide blockquote, .slide iframe, .slide img, .slide ul, .slide ol, .slide pre, .slide video {
257   margin-bottom: 1em;
258 }
259 .slide pre {
260   white-space: pre;
261   white-space: pre-wrap;
262   word-wrap: break-word;
263   padding: 1em;
264   border: 1px solid #888;
265 }
266 .slide em {
267   font-style: italic;
268 }
269 .slide li {
270   padding: .25em 0;
271   vertical-align: middle;
272 }
273
274 .deck-before, .deck-previous, .deck-next, .deck-after {
275   position: absolute;
276   left: -999em;
277   top: -999em;
278 }
279
280 .deck-current {
281   z-index: 2;
282 }
283
284 .slide .slide {
285   visibility: hidden;
286   position: static;
287   min-height: 0;
288 }
289
290 .deck-child-current {
291   position: static;
292   z-index: 2;
293 }
294 .deck-child-current .slide {
295   visibility: hidden;
296 }
297 .deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current {
298   visibility: visible;
299 }
300
301 body.deck-container {
302   overflow: visible;
303 }
304
305 @media screen and (max-device-width: 480px) {
306   /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
307 }
308 @media print {
309   * {
310     background: transparent !important;
311     color: black !important;
312     text-shadow: none !important;
313     filter: none !important;
314     -ms-filter: none !important;
315     -webkit-box-reflect: none !important;
316     -moz-box-reflect: none !important;
317     -webkit-box-shadow: none !important;
318     -moz-box-shadow: none !important;
319     box-shadow: none !important;
320   }
321   * :before, * :after {
322     display: none !important;
323   }
324
325   a, a:visited {
326     color: #444 !important;
327     text-decoration: underline;
328   }
329
330   a[href]:after {
331     content: " (" attr(href) ")";
332   }
333
334   abbr[title]:after {
335     content: " (" attr(title) ")";
336   }
337
338   .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
339     content: "";
340   }
341
342   pre, blockquote {
343     border: 1px solid #999;
344     page-break-inside: avoid;
345   }
346
347   thead {
348     display: table-header-group;
349   }
350
351   tr, img {
352     page-break-inside: avoid;
353   }
354
355   @page {
356     margin: 0.5cm;
357 }
358
359   p, h2, h3 {
360     orphans: 3;
361     widows: 3;
362   }
363
364   h2, h3 {
365     page-break-after: avoid;
366   }
367
368   .slide {
369     position: static !important;
370     visibility: visible !important;
371     display: block !important;
372     -webkit-transform: none !important;
373     -moz-transform: none !important;
374     -o-transform: none !important;
375     -ms-transform: none !important;
376     transform: none !important;
377     opacity: 1 !important;
378   }
379
380   h1, .vcenter {
381     -webkit-transform: none !important;
382     -moz-transform: none !important;
383     -o-transform: none !important;
384     -ms-transform: none !important;
385     transform: none !important;
386     padding: 0 !important;
387     position: static !important;
388   }
389
390   .deck-container > .slide {
391     page-break-after: always;
392   }
393
394   .deck-container {
395     width: 100% !important;
396     height: auto !important;
397     padding: 0 !important;
398     display: block !important;
399   }
400
401   script {
402     display: none;
403   }
404 }