|
0
|
1 /*
|
|
|
2 Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
|
|
|
3 Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/
|
|
|
4 Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
|
|
|
5 */
|
|
|
6
|
|
|
7 @import url(fonts.css);
|
|
|
8 @import url(reset.css);
|
|
|
9
|
|
|
10 BODY {
|
|
|
11 font:25px/1.8 'PT Sans', sans-serif;
|
|
|
12 counter-reset:paging;
|
|
|
13 }
|
|
|
14
|
|
|
15 /* Slide
|
|
|
16 ---------------------------------------- */
|
|
|
17 .slide:after {
|
|
|
18 counter-increment:paging;
|
|
|
19 content:counter(paging, decimal-leading-zero);
|
|
|
20 }
|
|
|
21 .slide SECTION {
|
|
|
22 padding:80px 120px 0;
|
|
|
23 width:784px;
|
|
|
24 height:560px;
|
|
|
25 background:#FFF;
|
|
|
26 color:#000;
|
|
|
27 }
|
|
|
28 .slide SECTION:before {
|
|
|
29 position:absolute;
|
|
|
30 bottom:-90px;
|
|
|
31 right:45px;
|
|
|
32 width:200px;
|
|
|
33 height:200px;
|
|
|
34 background:url(../../../pictures/logo.svg) no-repeat;
|
|
|
35 background-size: 200px;
|
|
|
36 content:'';
|
|
|
37 }
|
|
|
38
|
|
|
39 /* Header */
|
|
|
40 .slide HEADER {
|
|
|
41 margin:0 0 58px;
|
|
|
42 color:#666;
|
|
|
43 font:bold 40px/1.13 'PT Sans Narrow', sans-serif;
|
|
|
44 }
|
|
|
45
|
|
|
46 /* Elements */
|
|
|
47 .slide P {
|
|
|
48 margin:0 0 45px;
|
|
|
49 }
|
|
|
50 .slide P.note {
|
|
|
51 color:#888;
|
|
|
52 }
|
|
|
53 .slide A {
|
|
|
54 border-bottom:0.1em solid;
|
|
|
55 color:#0174A7;
|
|
|
56 text-decoration:none;
|
|
|
57 }
|
|
|
58 .slide A[target=_blank] {
|
|
|
59 margin-right:22px;
|
|
|
60 }
|
|
|
61 .slide A[target=_blank]:after {
|
|
|
62 position:absolute;
|
|
|
63 margin-left:7px;
|
|
|
64 font-family:'Target Blank';
|
|
|
65 content:'\005E';
|
|
|
66 }
|
|
|
67 .slide B,
|
|
|
68 .slide STRONG {
|
|
|
69 font-weight:bold;
|
|
|
70 }
|
|
|
71 .slide I,
|
|
|
72 .slide EM {
|
|
|
73 font-style:italic;
|
|
|
74 }
|
|
|
75 .slide KBD,
|
|
|
76 .slide CODE {
|
|
|
77 padding:3px 8px;
|
|
|
78 -webkit-border-radius:8px;
|
|
|
79 -moz-border-radius:8px;
|
|
|
80 border-radius:8px;
|
|
|
81 background:#FAFAA2;
|
|
|
82 -webkit-tab-size:4;
|
|
|
83 -moz-tab-size:4;
|
|
|
84 -o-tab-size:4;
|
|
|
85 tab-size:4;
|
|
|
86 font-family:Consolas, 'Droid Sans Mono', monospace;
|
|
|
87 }
|
|
|
88
|
|
|
89 /* Quote */
|
|
|
90 .slide BLOCKQUOTE {
|
|
|
91 font-style:italic;
|
|
|
92 }
|
|
|
93 .slide BLOCKQUOTE:before {
|
|
|
94 position:absolute;
|
|
|
95 margin:-15px 0 0 -80px;
|
|
|
96 color:#CCC;
|
|
|
97 font:200px/1 'PT Sans', sans-serif;
|
|
|
98 content:'\201C'; /* ldquo */
|
|
|
99 }
|
|
|
100 .slide BLOCKQUOTE:after {
|
|
|
101 margin:-45px 0 45px;
|
|
|
102 display:block;
|
|
|
103 color:#444;
|
|
|
104 font-weight:bold;
|
|
|
105 content:attr(cite);
|
|
|
106 }
|
|
|
107
|
|
|
108 /* Lists */
|
|
|
109 .slide OL,
|
|
|
110 .slide UL {
|
|
|
111 margin:0 0 45px;
|
|
|
112 counter-reset:list;
|
|
|
113 }
|
|
|
114 .slide UL UL,
|
|
|
115 .slide OL UL,
|
|
|
116 .slide OL OL,
|
|
|
117 .slide UL OL {
|
|
|
118 margin:0 0 0 38px;
|
|
|
119 }
|
|
|
120 .slide OL > LI:before,
|
|
|
121 .slide UL > LI:before {
|
|
|
122 position:absolute;
|
|
|
123 margin-left:-120px;
|
|
|
124 width:100px;
|
|
|
125 color:#BBB;
|
|
|
126 text-align:right;
|
|
|
127 }
|
|
|
128 .slide UL > LI:before {
|
|
|
129 content:'\2022'; /* bull */
|
|
|
130 line-height:1.1;
|
|
|
131 font-size:40px;
|
|
|
132 }
|
|
|
133 .slide OL > LI:before {
|
|
|
134 counter-increment:list;
|
|
|
135 content:counter(list)'.';
|
|
|
136 }
|
|
|
137
|
|
|
138 /* Code */
|
|
|
139 .slide PRE {
|
|
|
140 margin:0 0 45px;
|
|
|
141 counter-reset:code;
|
|
|
142 white-space:normal;
|
|
|
143 }
|
|
|
144 .slide PRE CODE {
|
|
|
145 display:block;
|
|
|
146 padding:0;
|
|
|
147 background:none;
|
|
|
148 white-space:pre;
|
|
|
149 }
|
|
|
150 .slide PRE CODE:before {
|
|
|
151 position:absolute;
|
|
|
152 margin:0 0 0 -120px;
|
|
|
153 width:110px;
|
|
|
154 color:#BBB;
|
|
|
155 text-align:right;
|
|
|
156 counter-increment:code;
|
|
|
157 content:counter(code, decimal-leading-zero)'.';
|
|
|
158 }
|
|
|
159 .slide PRE MARK {
|
|
|
160 padding:3px 8px;
|
|
|
161 -webkit-border-radius:8px;
|
|
|
162 -moz-border-radius:8px;
|
|
|
163 border-radius:8px;
|
|
|
164 }
|
|
|
165 .slide PRE MARK {
|
|
|
166 background:#FAFAA2;
|
|
|
167 color:#000;
|
|
|
168 font-style:normal;
|
|
|
169 }
|
|
|
170 .slide PRE MARK.important {
|
|
|
171 background:#C00;
|
|
|
172 color:#FFF;
|
|
|
173 font-weight:normal;
|
|
|
174 }
|
|
|
175
|
|
|
176 /* Cover */
|
|
|
177 .slide.cover SECTION {
|
|
|
178 background:transparent;
|
|
|
179 background-color: white;
|
|
|
180 }
|
|
|
181 .slide.cover H2 {
|
|
|
182 color:#666;
|
|
|
183 text-align:center;
|
|
|
184 font-size:84px;
|
|
|
185 }
|
|
|
186 .slide.cover H3#author {
|
|
|
187 color:#888;
|
|
|
188 text-align:right;
|
|
|
189 font-size:56px;
|
|
|
190 margin-top:24px;
|
|
|
191 margin-right:90px;
|
|
|
192 }
|
|
|
193
|
|
|
194 .slide.cover H3#profile {
|
|
|
195 color:#888;
|
|
|
196 text-align:right;
|
|
|
197 font-size:24px;
|
|
|
198 margin-right:90px;
|
|
|
199 }
|
|
|
200
|
|
|
201 /* Shout */
|
|
|
202 .slide.shout SECTION:before {
|
|
|
203 display:none;
|
|
|
204 }
|
|
|
205 .slide.shout H2 {
|
|
|
206 position:absolute;
|
|
|
207 top:50%;
|
|
|
208 left:0;
|
|
|
209 width:100%;
|
|
|
210 text-align:center;
|
|
|
211 line-height:1;
|
|
|
212 font-size:150px;
|
|
|
213 -webkit-transform:translateY(-50%);
|
|
|
214 -moz-transform:translateY(-50%);
|
|
|
215 -ms-transform:translateY(-50%);
|
|
|
216 -o-transform:translateY(-50%);
|
|
|
217 transform:translateY(-50%);
|
|
|
218 }
|
|
|
219 .slide.shout H2 A[target=_blank] {
|
|
|
220 margin:0;
|
|
|
221 }
|
|
|
222 .slide.shout H2 A[target=_blank]:after {
|
|
|
223 content:'';
|
|
|
224 }
|
|
|
225
|
|
|
226 /* Middle */
|
|
|
227 .middle {
|
|
|
228 position:absolute;
|
|
|
229 top:50%;
|
|
|
230 left:50%;
|
|
|
231 -webkit-transform:translate(-50%, -50%);
|
|
|
232 -moz-transform:translate(-50%, -50%);
|
|
|
233 -ms-transform:translate(-50%, -50%);
|
|
|
234 -o-transform:translate(-50%, -50%);
|
|
|
235 transform:translate(-50%, -50%);
|
|
|
236 }
|
|
|
237
|
|
|
238 /* List
|
|
|
239 ---------------------------------------- */
|
|
|
240 .list {
|
|
|
241 float:left;
|
|
|
242 padding:80px 0 80px 100px;
|
|
|
243 background:#585A5E url(../images/linen.png);
|
|
|
244 }
|
|
|
245
|
|
|
246 /* Caption */
|
|
|
247 .list .caption {
|
|
|
248 color:#3C3D40;
|
|
|
249 text-shadow:0 1px 1px #8D8E90;
|
|
|
250 }
|
|
|
251 .list .caption H1 {
|
|
|
252 font:bold 50px/1 'PT Sans Narrow', sans-serif;
|
|
|
253 }
|
|
|
254
|
|
|
255 /* Slide */
|
|
|
256 .list .slide {
|
|
|
257 position:relative;
|
|
|
258 float:left;
|
|
|
259 margin:0 50px 0 0;
|
|
|
260 padding:80px 0 0;
|
|
|
261 }
|
|
|
262 .list .slide:after {
|
|
|
263 position:absolute;
|
|
|
264 bottom:-45px;
|
|
|
265 left:57px;
|
|
|
266 color:#3C3D40;
|
|
|
267 text-shadow:0 1px 1px #8D8E90;
|
|
|
268 line-height:1;
|
|
|
269 font-weight:bold;
|
|
|
270 font-size:25px;
|
|
|
271 }
|
|
|
272 .list .slide:target:after {
|
|
|
273 text-shadow:0 -1px 1px #1F3F60;
|
|
|
274 color:#4B86C2;
|
|
|
275 }
|
|
|
276 .list .slide > DIV {
|
|
|
277 position:relative;
|
|
|
278 overflow:hidden;
|
|
|
279 width:512px;
|
|
|
280 height:320px;
|
|
|
281 box-shadow:0 0 50px #3C3D40;
|
|
|
282 border-radius:1px;
|
|
|
283 background:rgba(0, 0, 0, 0.3);
|
|
|
284 }
|
|
|
285 .list .slide > DIV:hover {
|
|
|
286 box-shadow:
|
|
|
287 0 0 0 10px rgba(60, 61, 64, 0.6),
|
|
|
288 0 0 50px #3C3D40;
|
|
|
289 }
|
|
|
290 .list .slide:target > DIV {
|
|
|
291 box-shadow:
|
|
|
292 0 0 0 1px #305F8D,
|
|
|
293 0 0 0 10px #3C7CBD,
|
|
|
294 0 0 50px #3C3D40;
|
|
|
295 }
|
|
|
296 .list .slide SECTION {
|
|
|
297 -webkit-transform-origin:0 0;
|
|
|
298 -webkit-transform:scale(0.5);
|
|
|
299 -moz-transform-origin:0 0;
|
|
|
300 -moz-transform:scale(0.5);
|
|
|
301 -ms-transform-origin:0 0;
|
|
|
302 -ms-transform:scale(0.5);
|
|
|
303 -o-transform-origin:0 0;
|
|
|
304 -o-transform:scale(0.5);
|
|
|
305 transform-origin:0 0;
|
|
|
306 transform:scale(0.5);
|
|
|
307 }
|
|
|
308 .list .slide SECTION:after {
|
|
|
309 position:absolute;
|
|
|
310 top:0;
|
|
|
311 right:0;
|
|
|
312 bottom:0;
|
|
|
313 left:0;
|
|
|
314 content:'';
|
|
|
315 }
|
|
|
316
|
|
|
317 /* Full
|
|
|
318 ---------------------------------------- */
|
|
|
319 .full {
|
|
|
320 position:absolute;
|
|
|
321 top:50%;
|
|
|
322 left:50%;
|
|
|
323 overflow:hidden;
|
|
|
324 margin:-320px 0 0 -512px;
|
|
|
325 width:1024px;
|
|
|
326 height:640px;
|
|
|
327 background:#000;
|
|
|
328 }
|
|
|
329 .full .caption {
|
|
|
330 display:none;
|
|
|
331 }
|
|
|
332 .full .slide {
|
|
|
333 position:absolute;
|
|
|
334 visibility:hidden;
|
|
|
335 }
|
|
|
336 .full .slide:target {
|
|
|
337 visibility:visible;
|
|
|
338 }
|
|
|
339 .full .slide:after {
|
|
|
340 position:absolute;
|
|
|
341 bottom:85px;
|
|
|
342 left:120px;
|
|
|
343 color:#BBB;
|
|
|
344 line-height:1;
|
|
|
345 }
|
|
|
346 .full .slide SECTION {
|
|
|
347 -webkit-transform:scale(1);
|
|
|
348 -moz-transform:scale(1);
|
|
|
349 -ms-transform:scale(1);
|
|
|
350 -o-transform:scale(1);
|
|
|
351 transform:scale(1);
|
|
|
352 }
|
|
|
353 .full .slide.bg {
|
|
|
354 z-index:1;
|
|
|
355 }
|
|
|
356 .full .slide.bg:after,
|
|
|
357 .full .slide.shout:after {
|
|
|
358 content:'';
|
|
|
359 }
|
|
|
360
|
|
|
361 /* Inner Navigation */
|
|
|
362 .full .inner > * {
|
|
|
363 opacity:0;
|
|
|
364 -webkit-transition:opacity 0.5s linear;
|
|
|
365 -moz-transition:opacity 0.5s linear;
|
|
|
366 -ms-transition:opacity 0.5s linear;
|
|
|
367 -o-transition:opacity 0.5s linear;
|
|
|
368 transition:opacity 0.5s linear;
|
|
|
369 }
|
|
|
370 .full .inner > .active {
|
|
|
371 opacity:1;
|
|
|
372 }
|
|
|
373
|
|
|
374 /* Progress */
|
|
|
375 .full .progress {
|
|
|
376 position:absolute;
|
|
|
377 right:118px;
|
|
|
378 bottom:49px;
|
|
|
379 left:118px;
|
|
|
380 border-radius:7px;
|
|
|
381 border:2px solid rgba(255, 255, 255, 0.2);
|
|
|
382 }
|
|
|
383 .full .progress DIV {
|
|
|
384 width:0;
|
|
|
385 height:10px;
|
|
|
386 border-radius:5px;
|
|
|
387 background:rgba(177, 177, 177, 0.4);
|
|
|
388 -webkit-transition:width 0.2s linear;
|
|
|
389 -moz-transition:width 0.2s linear;
|
|
|
390 -ms-transition:width 0.2s linear;
|
|
|
391 -o-transition:width 0.2s linear;
|
|
|
392 transition:width 0.2s linear;
|
|
|
393 }
|
|
|
394 .full .progress-off {
|
|
|
395 z-index:1;
|
|
|
396 }
|
