Therapeutic refactoring, make interwebs angry
[deck.js.git] / themes / style / web-2.0.css
blob05f628c74b5d04c0a32bb32842df2a02f3448e8a
1 @charset "UTF-8";
2 /* Resets and base styles from HTML5 Boilerplate */
3 div, span, object, iframe,
4 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5 abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
6 small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
7 fieldset, form, label, legend,
8 table, caption, tbody, tfoot, thead, tr, th, td,
9 article, aside, canvas, details, figcaption, figure,
10 footer, header, hgroup, menu, nav, section, summary,
11 time, mark, audio, video {
12 margin: 0;
13 padding: 0;
14 border: 0;
15 font-size: 100%;
16 font: inherit;
17 vertical-align: baseline;
20 article, aside, details, figcaption, figure,
21 footer, header, hgroup, menu, nav, section {
22 display: block;
25 blockquote, q {
26 quotes: none;
28 blockquote:before, blockquote:after, q:before, q:after {
29 content: "";
30 content: none;
33 ins {
34 background-color: #ff9;
35 color: #000;
36 text-decoration: none;
39 mark {
40 background-color: #ff9;
41 color: #000;
42 font-style: italic;
43 font-weight: bold;
46 del {
47 text-decoration: line-through;
50 abbr[title], dfn[title] {
51 border-bottom: 1px dotted;
52 cursor: help;
55 table {
56 border-collapse: collapse;
57 border-spacing: 0;
60 hr {
61 display: block;
62 height: 1px;
63 border: 0;
64 border-top: 1px solid #ccc;
65 margin: 1em 0;
66 padding: 0;
69 input, select {
70 vertical-align: middle;
73 select, input, textarea, button {
74 font: 99% sans-serif;
77 pre, code, kbd, samp {
78 font-family: monospace, sans-serif;
81 a {
82 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
84 a:hover, a:active {
85 outline: none;
88 ul, ol {
89 margin-left: 2em;
90 vertical-align: top;
93 ol {
94 list-style-type: decimal;
97 nav ul, nav li {
98 margin: 0;
99 list-style: none;
100 list-style-image: none;
103 small {
104 font-size: 85%;
107 strong, th {
108 font-weight: bold;
111 td {
112 vertical-align: top;
115 sub, sup {
116 font-size: 75%;
117 line-height: 0;
118 position: relative;
121 sup {
122 top: -0.5em;
125 sub {
126 bottom: -0.25em;
129 textarea {
130 overflow: auto;
133 input[type="radio"] {
134 vertical-align: text-bottom;
137 input[type="checkbox"] {
138 vertical-align: bottom;
141 label,
142 input[type="button"],
143 input[type="submit"],
144 input[type="image"],
145 button {
146 cursor: pointer;
149 button, input, select, textarea {
150 margin: 0;
153 input:invalid, textarea:invalid {
154 border-radius: 1px;
155 -moz-box-shadow: 0px 0px 5px red;
156 -webkit-box-shadow: 0px 0px 5px red;
157 box-shadow: 0px 0px 5px red;
159 input:invalid .no-boxshadow, textarea:invalid .no-boxshadow {
160 background-color: #f0dddd;
163 button {
164 width: auto;
165 overflow: visible;
168 select, input, textarea {
169 color: #444444;
173 color: #607890;
175 a:hover, a:focus {
176 color: #036;
178 a:link {
179 -webkit-tap-highlight-color: #fff;
182 /* End HTML5 Boilerplate adaptations */
183 h1 {
184 font-size: 4.5em;
187 h1, .vcenter {
188 font-weight: bold;
189 text-align: center;
190 padding-top: 1em;
191 max-height: 100%;
193 .csstransforms h1, .csstransforms .vcenter {
194 padding: 0 48px;
195 position: absolute;
196 left: 0;
197 right: 0;
198 top: 50%;
199 -webkit-transform: translate(0, -50%);
200 -moz-transform: translate(0, -50%);
201 -ms-transform: translate(0, -50%);
202 -o-transform: translate(0, -50%);
203 transform: translate(0, -50%);
206 .vcenter h1 {
207 position: relative;
208 top: auto;
209 padding: 0;
210 -webkit-transform: none;
211 -moz-transform: none;
212 -ms-transform: none;
213 -o-transform: none;
214 transform: none;
217 h2 {
218 font-size: 2.25em;
219 font-weight: bold;
220 padding-top: .5em;
221 margin: 0 0 .66666em 0;
222 border-bottom: 3px solid #888;
225 h3 {
226 font-size: 1.4375em;
227 font-weight: bold;
228 margin-bottom: .30435em;
231 h4 {
232 font-size: 1.25em;
233 font-weight: bold;
234 margin-bottom: .25em;
237 h5 {
238 font-size: 1.125em;
239 font-weight: bold;
240 margin-bottom: .2222em;
243 h6 {
244 font-size: 1em;
245 font-weight: bold;
248 img, iframe, video {
249 display: block;
250 max-width: 100%;
253 video, iframe, img {
254 display: block;
255 margin: 0 auto;
258 p, blockquote, iframe, img, ul, ol, pre, video {
259 margin-bottom: 1em;
262 pre {
263 white-space: pre;
264 white-space: pre-wrap;
265 word-wrap: break-word;
266 padding: 1em;
267 border: 1px solid #888;
270 em {
271 font-style: italic;
274 li {
275 padding: .25em 0;
276 vertical-align: middle;
278 li > ol, li > ul {
279 margin-bottom: inherit;
282 .deck-container {
283 font-size: 16px;
284 line-height: 1.25;
285 color: #444;
288 .slide {
289 -moz-box-sizing: border-box;
290 box-sizing: border-box;
291 width: 100%;
294 h1, h2, h3, h4, h5, h6 {
295 font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
298 h1 {
299 color: #08455f;
302 h2 {
303 color: #0b7495;
304 border-bottom: 0;
306 .cssreflections h2 {
307 line-height: 1;
308 -webkit-box-reflect: below -0.5555em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), color-stop(0.7, rgba(255, 255, 255, 0.1)), to(transparent));
309 -moz-box-reflect: below -0.5555em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.3) 100%);
312 h3 {
313 color: #000;
316 pre {
317 border-color: #cde;
318 background: #fff;
319 position: relative;
320 z-index: auto;
321 border-radius: 5px;
322 /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */
324 .csstransforms.boxshadow pre > :first-child:before {
325 content: "";
326 position: absolute;
327 z-index: -1;
328 background: #fff;
329 top: 0;
330 bottom: 0;
331 left: 0;
332 right: 0;
334 .csstransforms.boxshadow pre:before, .csstransforms.boxshadow pre:after {
335 content: "";
336 position: absolute;
337 z-index: -2;
338 bottom: 15px;
339 width: 50%;
340 height: 20%;
341 max-width: 300px;
342 box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
344 .csstransforms.boxshadow pre:before {
345 left: 10px;
346 -webkit-transform: rotate(-3deg);
347 -ms-transform: rotate(-3deg);
348 transform: rotate(-3deg);
350 .csstransforms.boxshadow pre:after {
351 right: 10px;
352 -webkit-transform: rotate(3deg);
353 -ms-transform: rotate(3deg);
354 transform: rotate(3deg);
357 code {
358 color: #789;
361 blockquote {
362 font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
363 font-size: 2em;
364 padding: 1em 2em .5em 2em;
365 color: #000;
366 background: #fff;
367 position: relative;
368 border: 1px solid #cde;
369 z-index: auto;
370 border-radius: 5px;
372 .boxshadow blockquote > :first-child:before {
373 content: "";
374 position: absolute;
375 z-index: -1;
376 background: #fff;
377 top: 0;
378 bottom: 0;
379 left: 0;
380 right: 0;
382 .boxshadow blockquote:after {
383 content: "";
384 position: absolute;
385 z-index: -2;
386 top: 10px;
387 bottom: 10px;
388 left: 0;
389 right: 50%;
390 -moz-border-radius: 10px / 100px;
391 border-radius: 10px / 100px;
392 box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
394 blockquote p {
395 margin: 0;
397 blockquote cite {
398 font-size: .5em;
399 font-style: normal;
400 font-weight: bold;
401 color: #888;
403 blockquote:before {
404 content: "“";
405 position: absolute;
406 top: 0;
407 left: 0;
408 font-size: 5em;
409 line-height: 1;
410 color: #ccf0f0;
411 z-index: 1;
414 ::-moz-selection {
415 background: #08455f;
416 color: #fff;
419 ::selection {
420 background: #08455f;
421 color: #fff;
424 a, a:hover, a:focus, a:active, a:visited {
425 color: #599;
426 text-decoration: none;
428 a:hover, a:focus {
429 text-decoration: underline;
432 .deck-container {
433 font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
434 font-size: 1.75em;
435 background: #f4fafe;
436 /* Old browsers */
437 background: -moz-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
438 /* FF3.6+ */
439 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4fafe), color-stop(100%, #ccf0f0));
440 /* Chrome,Safari4+ */
441 background: -webkit-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
442 /* Chrome10+,Safari5.1+ */
443 background: -o-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
444 /* Opera11.10+ */
445 background: -ms-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
446 /* IE10+ */
447 background: linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
448 /* W3C */
449 background-attachment: fixed;
450 text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
452 .deck-container > .slide {
453 padding: 0 48px;
456 .slide .deck-before, .slide .deck-previous {
457 opacity: 0.4;
459 .slide .deck-before:not(.deck-child-current) .deck-before, .slide .deck-before:not(.deck-child-current) .deck-previous, .slide .deck-previous:not(.deck-child-current) .deck-before, .slide .deck-previous:not(.deck-child-current) .deck-previous {
460 opacity: 1;
462 .slide .deck-child-current {
463 opacity: 1;
466 .deck-prev-link, .deck-next-link {
467 background: #fff;
468 opacity: 0.5;
470 .deck-prev-link, .deck-prev-link:hover, .deck-prev-link:focus, .deck-prev-link:active, .deck-prev-link:visited, .deck-next-link, .deck-next-link:hover, .deck-next-link:focus, .deck-next-link:active, .deck-next-link:visited {
471 color: #599;
473 .deck-prev-link:hover, .deck-prev-link:focus, .deck-next-link:hover, .deck-next-link:focus {
474 opacity: 1;
475 text-decoration: none;
478 .deck-status {
479 font-size: 0.6666em;
482 .deck-menu .slide {
483 background: transparent;
484 border-radius: 5px;
486 .rgba .deck-menu .slide {
487 background: rgba(0, 0, 0, 0.1);
489 .deck-menu .slide.deck-current, .rgba .deck-menu .slide.deck-current, .no-touch .deck-menu .slide:hover {
490 background: #fff;
493 .goto-form {
494 background: #fff;
495 border: 1px solid #cde;
496 border-radius: 5px;
498 .boxshadow .goto-form {
499 box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;