Add deck.js slide deck with basic layout
[kai/lca12.git] / themes / style / web-2.0.css
1 @charset "UTF-8";
2 .deck-container {
3   font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
4   font-size: 1.25em;
5   background: #f4fafe;
6   /* Old browsers */
7   background: -moz-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
8   /* FF3.6+ */
9   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4fafe), color-stop(100%, #ccf0f0));
10   /* Chrome,Safari4+ */
11   background: -webkit-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
12   /* Chrome10+,Safari5.1+ */
13   background: -o-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
14   /* Opera11.10+ */
15   background: -ms-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
16   /* IE10+ */
17   background: linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);
18   /* W3C */
19   background-attachment: fixed;
20 }
21 .deck-container > .slide {
22   text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
23 }
24 .deck-container .slide h1, .deck-container .slide h2, .deck-container .slide h3, .deck-container .slide h4, .deck-container .slide h5, .deck-container .slide h6 {
25   font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
26 }
27 .deck-container .slide h1 {
28   color: #08455f;
29 }
30 .deck-container .slide h2 {
31   color: #0b7495;
32   border-bottom: 0;
33 }
34 .cssreflections .deck-container .slide h2 {
35   line-height: 1;
36   -webkit-box-reflect: below -0.556em -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));
37   -moz-box-reflect: below -0.556em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.3) 100%);
38 }
39 .deck-container .slide h3 {
40   color: #000;
41 }
42 .deck-container .slide pre {
43   border-color: #cde;
44   background: #fff;
45   position: relative;
46   z-index: auto;
47   /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */
48 }
49 .borderradius .deck-container .slide pre {
50   -webkit-border-radius: 5px;
51   -moz-border-radius: 5px;
52   border-radius: 5px;
53 }
54 .csstransforms.boxshadow .deck-container .slide pre > :first-child:before {
55   content: "";
56   position: absolute;
57   z-index: -1;
58   background: #fff;
59   top: 0;
60   bottom: 0;
61   left: 0;
62   right: 0;
63 }
64 .csstransforms.boxshadow .deck-container .slide pre:before, .csstransforms.boxshadow .deck-container .slide pre:after {
65   content: "";
66   position: absolute;
67   z-index: -2;
68   bottom: 15px;
69   width: 50%;
70   height: 20%;
71   max-width: 300px;
72   -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
73   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
74   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
75 }
76 .csstransforms.boxshadow .deck-container .slide pre:before {
77   left: 10px;
78   -webkit-transform: rotate(-3deg);
79   -moz-transform: rotate(-3deg);
80   -ms-transform: rotate(-3deg);
81   -o-transform: rotate(-3deg);
82   transform: rotate(-3deg);
83 }
84 .csstransforms.boxshadow .deck-container .slide pre:after {
85   right: 10px;
86   -webkit-transform: rotate(3deg);
87   -moz-transform: rotate(3deg);
88   -ms-transform: rotate(3deg);
89   -o-transform: rotate(3deg);
90   transform: rotate(3deg);
91 }
92 .deck-container .slide code {
93   color: #789;
94 }
95 .deck-container .slide blockquote {
96   font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
97   font-size: 2em;
98   padding: 1em 2em .5em 2em;
99   color: #000;
100   background: #fff;
101   position: relative;
102   border: 1px solid #cde;
103   z-index: auto;
104 }
105 .borderradius .deck-container .slide blockquote {
106   -webkit-border-radius: 5px;
107   -moz-border-radius: 5px;
108   border-radius: 5px;
109 }
110 .boxshadow .deck-container .slide blockquote > :first-child:before {
111   content: "";
112   position: absolute;
113   z-index: -1;
114   background: #fff;
115   top: 0;
116   bottom: 0;
117   left: 0;
118   right: 0;
119 }
120 .boxshadow .deck-container .slide blockquote:after {
121   content: "";
122   position: absolute;
123   z-index: -2;
124   top: 10px;
125   bottom: 10px;
126   left: 0;
127   right: 50%;
128   -moz-border-radius: 10px/100px;
129   border-radius: 10px/100px;
130   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
131   -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
132   box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
133 }
134 .deck-container .slide blockquote p {
135   margin: 0;
136 }
137 .deck-container .slide blockquote cite {
138   font-size: .5em;
139   font-style: normal;
140   font-weight: bold;
141   color: #888;
142 }
143 .deck-container .slide blockquote:before {
144   content: "“";
145   position: absolute;
146   top: 0;
147   left: 0;
148   font-size: 5em;
149   line-height: 1;
150   color: #ccf0f0;
151   z-index: 1;
152 }
153 .deck-container .slide ::-moz-selection {
154   background: #08455f;
155   color: #fff;
156 }
157 .deck-container .slide ::selection {
158   background: #08455f;
159   color: #fff;
160 }
161 .deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited {
162   color: #599;
163   text-decoration: none;
164 }
165 .deck-container .slide a:hover, .deck-container .slide a:focus {
166   text-decoration: underline;
167 }
168 .deck-container .deck-prev-link, .deck-container .deck-next-link {
169   background: #fff;
170   opacity: 0.5;
171 }
172 .deck-container .deck-prev-link, .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited {
173   color: #599;
174 }
175 .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus {
176   opacity: 1;
177   text-decoration: none;
178 }
179 .deck-container .deck-status {
180   font-size: 0.6666em;
181 }
182 .deck-container.deck-menu .slide {
183   background: transparent;
184   -webkit-border-radius: 5px;
185   -moz-border-radius: 5px;
186   border-radius: 5px;
187 }
188 .rgba .deck-container.deck-menu .slide {
189   background: rgba(0, 0, 0, 0.1);
190 }
191 .deck-container.deck-menu .slide.deck-current, .rgba .deck-container.deck-menu .slide.deck-current, .no-touch .deck-container.deck-menu .slide:hover {
192   background: #fff;
193 }
194 .deck-container .goto-form {
195   background: #fff;
196   border: 1px solid #cde;
197   -webkit-border-radius: 5px;
198   -moz-border-radius: 5px;
199   border-radius: 5px;
200 }
201 .boxshadow .deck-container .goto-form {
202   -webkit-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;
203   -moz-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;
204   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;
205 }