107 |
107 |
108 .tag:hover { |
108 .tag:hover { |
109 color: #B8155F; background: #202020; |
109 color: #B8155F; background: #202020; |
110 } |
110 } |
111 |
111 |
|
112 /* Annotation colors */ |
|
113 |
|
114 .video { |
|
115 color: #be4477; |
|
116 } |
|
117 |
|
118 .audio { |
|
119 color:#63be6c; |
|
120 } |
|
121 |
|
122 .slideshow { |
|
123 color: #f69058; |
|
124 } |
|
125 |
|
126 .text { |
|
127 color:#5e90cb; |
|
128 } |
|
129 |
|
130 .quote { |
|
131 color:#00aeb5; |
|
132 } |
|
133 |
|
134 .link { |
|
135 color:#8985bb; |
|
136 } |
|
137 |
|
138 |
112 /* Pictograms on the left */ |
139 /* Pictograms on the left */ |
113 |
140 |
114 .pictolist { |
141 .pictolist { |
115 position: absolute; |
142 position: absolute; |
116 left: 20px; bottom: 115px; |
143 left: 20px; bottom: 115px; |
117 } |
144 } |
118 |
145 |
|
146 .pictolist li { |
|
147 height: 34px; margin-top: 12px; line-height: 34px; display: none; |
|
148 } |
|
149 |
119 .picto { |
150 .picto { |
120 width: 24px; height: 24px; padding: 7px; margin-top: 12px; background:black; |
151 float: left; padding: 7px; background:black; |
121 border-radius: 19px; cursor: pointer; |
152 border-radius: 19px; cursor: pointer; |
|
153 } |
|
154 |
|
155 .picto-title { |
|
156 margin-left: 10px; font-size: 12px; text-transform: uppercase; |
|
157 display: none; text-shadow: 0 0 2px #000000; font-family: 'Futura-Medium'; |
|
158 } |
|
159 |
|
160 .hover .picto-title { |
|
161 display: inline; |
122 } |
162 } |
123 |
163 |
124 .picto a { |
164 .picto a { |
125 background: url(../img/sprites.png); display: block; width: 24px; height: 24px; |
165 background: url(../img/sprites.png); display: block; width: 24px; height: 24px; |
126 } |
166 } |
127 |
167 |
128 .picto.video:hover { |
168 .video.hover .picto { |
129 background: #be4477; |
169 background: #be4477; |
130 } |
170 } |
131 |
171 |
132 .picto.video:hover a { |
172 .video.hover .picto a { |
133 background-position: -24px 0; |
173 background-position: -24px 0; |
134 } |
174 } |
135 |
175 |
136 .picto.audio a { |
176 .audio .picto a { |
137 background-position: 0 -24px; |
177 background-position: 0 -24px; |
138 } |
178 } |
139 |
179 |
140 .picto.audio:hover { |
180 .audio.hover .picto { |
141 background: #63be6c; |
181 background: #63be6c; |
142 } |
182 } |
143 |
183 |
144 .picto.audio:hover a { |
184 .audio.hover .picto a { |
145 background-position: -24px -24px; |
185 background-position: -24px -24px; |
146 } |
186 } |
147 |
187 |
148 .picto.slideshow a { |
188 .slideshow .picto a { |
149 background-position: 0 -48px; |
189 background-position: 0 -48px; |
150 } |
190 } |
151 |
191 |
152 .picto.slideshow:hover { |
192 .slideshow.hover .picto { |
153 background: #f69058; |
193 background: #f69058; |
154 } |
194 } |
155 |
195 |
156 .picto.slideshow:hover a { |
196 .slideshow.hover .picto a { |
157 background-position: -24px -48px; |
197 background-position: -24px -48px; |
158 } |
198 } |
159 |
199 |
160 .picto.text a { |
200 .text .picto a { |
161 background-position: 0 -72px; |
201 background-position: 0 -72px; |
162 } |
202 } |
163 |
203 |
164 .picto.text:hover { |
204 .text.hover .picto { |
165 background: #5e90cb; |
205 background: #5e90cb; |
166 } |
206 } |
167 |
207 |
168 .picto.text:hover a { |
208 .text.hover .picto a { |
169 background-position: -24px -72px; |
209 background-position: -24px -72px; |
170 } |
210 } |
171 |
211 |
172 .picto.quote a { |
212 .quote .picto a { |
173 background-position: 0 -96px; |
213 background-position: 0 -96px; |
174 } |
214 } |
175 |
215 |
176 .picto.quote:hover { |
216 .quote.hover .picto { |
177 background: #00aeb5; |
217 background: #00aeb5; |
178 } |
218 } |
179 |
219 |
180 .picto.quote:hover a { |
220 .quote.hover .picto a { |
181 background-position: -24px -96px; |
221 background-position: -24px -96px; |
182 } |
222 } |
183 |
223 |
184 .picto.link a { |
224 .link .picto a { |
185 background-position: 0 -120px; |
225 background-position: 0 -120px; |
186 } |
226 } |
187 |
227 |
188 .picto.link:hover { |
228 .link.hover .picto { |
189 background: #8985bb; |
229 background: #8985bb; |
190 } |
230 } |
191 |
231 |
192 .picto.link:hover a { |
232 .link.hover .picto a { |
193 background-position: -24px -120px; |
233 background-position: -24px -120px; |
194 } |
234 } |
195 |
235 |
196 /* Annotations */ |
236 /* Annotations */ |
197 |
237 |
|
238 .annotation-templates { |
|
239 display: none; |
|
240 } |
|
241 |
198 .annotation { |
242 .annotation { |
199 position: absolute; display: none; |
243 position: absolute; |
200 } |
244 } |
201 |
245 |
202 .annotation-title { |
246 .annotation-title { |
203 font-family: 'Futura-Medium'; text-align: center; |
247 font-family: 'Futura-Medium'; text-align: center; |
204 } |
248 } |
233 font-size: 23px; margin: 24px 0; |
277 font-size: 23px; margin: 24px 0; |
234 } |
278 } |
235 |
279 |
236 .text-annotation .annotation-contents { |
280 .text-annotation .annotation-contents { |
237 font-family: Georgia, 'Times New Roman', serif; |
281 font-family: Georgia, 'Times New Roman', serif; |
238 margin: 0 45px 45px; |
282 margin: 0 45px 35px; |
239 column-count: 2; column-gap: 60px; |
283 column-count: 2; column-gap: 60px; |
240 -moz-column-count: 2; -moz-column-gap: 60px; |
284 -moz-column-count: 2; -moz-column-gap: 60px; |
241 -webkit-column-count: 2; -webkit-column-gap: 60px; |
285 -webkit-column-count: 2; -webkit-column-gap: 60px; |
242 } |
286 } |
243 |
287 |
313 |
357 |
314 .slideshow-center:after { |
358 .slideshow-center:after { |
315 content: "."; visibility: hidden; display: block; height: 1px; clear: both; |
359 content: "."; visibility: hidden; display: block; height: 1px; clear: both; |
316 } |
360 } |
317 |
361 |
318 .slideshow-title, .slideshow-credits { |
|
319 line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 10px; |
|
320 } |
|
321 |
|
322 .slideshow-title { |
362 .slideshow-title { |
323 float: left; color: #cccccc; |
363 line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left; |
324 } |
|
325 |
|
326 .slideshow-credits { |
|
327 float: right; color: #808080; |
|
328 } |
364 } |
329 |
365 |
330 .slideshow-arrow { |
366 .slideshow-arrow { |
331 position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer; |
367 position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer; |
332 } |
368 } |
406 |
442 |
407 .chapter.found.active .chapter-block { |
443 .chapter.found.active .chapter-block { |
408 background: #8a1249; |
444 background: #8a1249; |
409 } |
445 } |
410 |
446 |
|
447 .annotation-onscreen .chapter-block { |
|
448 opacity: .5; |
|
449 } |
|
450 |
411 .chapter-title { |
451 .chapter-title { |
412 position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px; |
452 position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px; |
413 font-size: 9px; text-transform: uppercase; |
453 font-size: 9px; text-transform: uppercase; |
414 text-align: center; color: #909090; display: none; |
454 text-align: center; color: #909090; display: none; |
415 font-family: 'Futura-Medium'; |
455 font-family: 'Futura-Medium'; |
418 .chapter.active .chapter-title { |
458 .chapter.active .chapter-title { |
419 display: block; |
459 display: block; |
420 } |
460 } |
421 |
461 |
422 .chip { |
462 .chip { |
423 position: absolute; width: 11px; height: 11px; top: 17px; border-radius: 6px; |
463 position: absolute; top: 0; |
424 margin-left: -6px; |
464 } |
425 } |
465 |
426 |
466 .chip-circle { |
427 .chip.video { |
467 width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute; |
|
468 } |
|
469 |
|
470 .chip-title { |
|
471 position: absolute; top: 2px; left: 0; font-size: 9px; text-transform: uppercase; |
|
472 display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px; |
|
473 } |
|
474 |
|
475 .chip.hover .chip-title, |
|
476 .chip.current .chip-title { |
|
477 display: block; |
|
478 } |
|
479 |
|
480 .annotation-onscreen .chip { |
|
481 opacity: .3; |
|
482 } |
|
483 |
|
484 .chip.current, |
|
485 .chip.hover { |
|
486 opacity: 1; |
|
487 } |
|
488 |
|
489 .video .chip-circle { |
428 background: #be4477; |
490 background: #be4477; |
429 } |
491 } |
430 |
492 |
431 .chip.audio { |
493 .audio .chip-circle { |
432 background: #63be6c; |
494 background: #63be6c; |
433 } |
495 } |
434 |
496 |
435 .chip.slideshow { |
497 .slideshow .chip-circle { |
436 background: #f69058; |
498 background: #f69058; |
437 } |
499 } |
438 |
500 |
439 .chip.text { |
501 .text .chip-circle { |
440 background: #5e90cb; |
502 background: #5e90cb; |
441 } |
503 } |
442 |
504 |
443 .chip.quote { |
505 .quote .chip-circle { |
444 background: #00aeb5; |
506 background: #00aeb5; |
445 } |
507 } |
446 |
508 |
447 .chip.link { |
509 .link .chip-circle { |
448 background: #8985bb; |
510 background: #8985bb; |
449 } |
511 } |
450 |
512 |
451 .left-hiding-block, .right-hiding-block { |
513 .left-hiding-block, .right-hiding-block { |
452 position: absolute; width: 6px; height: 11px; top: 17px; background: #000000; |
514 position: absolute; width: 6px; height: 11px; top: 17px; background: #000000; |