159 |
170 |
160 .picto.link:hover a { |
171 .picto.link:hover a { |
161 background-position: -24px -120px; |
172 background-position: -24px -120px; |
162 } |
173 } |
163 |
174 |
|
175 /* Annotations */ |
|
176 |
|
177 .annotation { |
|
178 position: absolute; |
|
179 } |
|
180 |
|
181 .annotation-title { |
|
182 font-family: 'Futura-Medium'; text-align: center; |
|
183 } |
|
184 |
|
185 .close-annotation { |
|
186 float: right; text-decoration: none; margin: 0 5px; |
|
187 font-weight: bold; font-size: 20px; |
|
188 } |
|
189 |
|
190 .text-annotation, .slideshow-annotation, .video-annotation { |
|
191 left: 45px; top: 20px; right: 35px; |
|
192 } |
|
193 |
|
194 /* Text annotation */ |
|
195 |
|
196 .text-annotation { |
|
197 background: #ffffff; max-height: 522px; overflow: auto; |
|
198 } |
|
199 |
|
200 .text-annotation .close-annotation { |
|
201 color: #000000; |
|
202 } |
|
203 |
|
204 .text-annotation .annotation-title { |
|
205 font-size: 23px; margin: 24px 0 0; |
|
206 } |
|
207 |
|
208 .text-annotation .annotation-contents { |
|
209 font-family: Georgia, 'Times New Roman', serif; |
|
210 margin: 30px 45px 45px; |
|
211 column-count: 2; column-gap: 60px; |
|
212 -moz-column-count: 2; -moz-column-gap: 60px; |
|
213 -webkit-column-count: 2; -webkit-column-gap: 60px; |
|
214 } |
|
215 |
|
216 .text-annotation p { |
|
217 margin-bottom: 10px; |
|
218 } |
|
219 |
|
220 /* Slideshow annotation */ |
|
221 |
|
222 .slideshow-center { |
|
223 position: relative; background: rgba(0,0,0,.7); |
|
224 } |
|
225 |
|
226 .slideshow-annotation .annotation-title { |
|
227 height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000; |
|
228 } |
|
229 |
|
230 .slideshow-frame { |
|
231 float: left; width: 650px; min-height: 60px; |
|
232 } |
|
233 |
|
234 .slideshow-image { |
|
235 max-width: 650px; max-height: 452px; margin: 0 auto; display: block; |
|
236 } |
|
237 |
|
238 .slideshow-play-pause { |
|
239 float: left; padding: 10px 15px 11px; |
|
240 background: #3e3e3e; cursor: pointer; |
|
241 } |
|
242 |
|
243 .slideshow-play-pause a { |
|
244 background-image: url(../img/sprites.png); width: 14px; height: 14px; |
|
245 background-position: 0 -194px; display: block; |
|
246 } |
|
247 |
|
248 .slideshow-play-pause.pause a { |
|
249 background-position: -24px -194px; |
|
250 } |
|
251 |
|
252 .slideshow-play-pause:hover { |
|
253 background: #606060; |
|
254 } |
|
255 |
|
256 .slideshow-bottom { |
|
257 clear: both; height: 35px; background: #000000; |
|
258 } |
|
259 |
|
260 .slideshow-annotation .close-annotation, |
|
261 .video-annotation .close-annotation { |
|
262 color: #ffffff; |
|
263 } |
|
264 |
|
265 .slideshow-annotation p, |
|
266 .video-annotation p { |
|
267 margin: 10px 25px 10px 10px; |
|
268 font-size: 12px; color: #CCCCCC; |
|
269 } |
|
270 |
|
271 .slideshow-description { |
|
272 margin-left: 650px; max-height: 452px; overflow: auto; |
|
273 } |
|
274 |
|
275 .slideshow-center:after { |
|
276 content: "."; visibility: hidden; display: block; height: 1px; clear: both; |
|
277 } |
|
278 |
|
279 .slideshow-title, .slideshow-credits { |
|
280 line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 10px; |
|
281 } |
|
282 |
|
283 .slideshow-title { |
|
284 float: left; color: #cccccc; |
|
285 } |
|
286 |
|
287 .slideshow-credits { |
|
288 float: right; color: #808080; |
|
289 } |
|
290 |
|
291 .slideshow-arrow { |
|
292 position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer; |
|
293 } |
|
294 |
|
295 .slideshow-arrow a { |
|
296 display: block; height: 24px; width: 14px; background-image: url(../img/sprites.png); |
|
297 } |
|
298 |
|
299 .slideshow-arrow:hover { |
|
300 background-color: rgba(255,255,255,.5); |
|
301 } |
|
302 |
|
303 .slideshow-previous { |
|
304 left: 0; |
|
305 } |
|
306 |
|
307 .slideshow-previous a { |
|
308 background-position: 0 -208px; |
|
309 } |
|
310 |
|
311 .slideshow-next { |
|
312 right: 0; |
|
313 } |
|
314 |
|
315 .slideshow-next a { |
|
316 background-position: -14px -208px; |
|
317 } |
|
318 |
164 /* Bottom bar */ |
319 /* Bottom bar */ |
165 |
320 |
166 .bottom-bar { |
321 .bottom-bar { |
167 padding-top: 20px; |
322 padding-top: 20px; |
168 } |
323 } |
169 |
324 |
170 .play-button { |
325 .play-button { |
171 float: left; width: 30px; height: 30px; border-radius: 15px; |
326 float: left; width: 14px; height: 14px; |
172 background: #555555; |
327 padding: 8px; border-radius: 15px; |
|
328 background: #555555; cursor: pointer; |
173 margin: 8px 0 0 15px; |
329 margin: 8px 0 0 15px; |
174 } |
330 } |
175 |
331 |
|
332 .play-button:hover { |
|
333 background: #909090; |
|
334 } |
|
335 |
|
336 .play-button a { |
|
337 background-image: url(../img/sprites.png); width: 14px; height: 14px; display: block; |
|
338 background-position: 0 -180px; |
|
339 } |
|
340 |
|
341 .play-button.pause a { |
|
342 background-position: -24px -180px; |
|
343 } |
|
344 |
176 .chapters-bar { |
345 .chapters-bar { |
177 margin: 0 19px 0 59px; height: 45px; position: relative; |
346 margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer; |
178 } |
347 } |
179 |
348 |
180 .chapter { |
349 .chapter { |
181 position: absolute; top: 0; |
350 position: absolute; top: 0; |
182 } |
351 } |
183 |
352 |
184 .chapter-block { |
353 .chapter-block { |
185 width: 100%; height: 45px; background: #303030; |
354 width: 100%; height: 45px; background: #303030; |
|
355 margin: 0 -1px; |
|
356 border-style: none solid; border-width: 1px; |
|
357 border-color: #000000; |
186 } |
358 } |
187 |
359 |
188 .chapter:hover .chapter-block { |
360 .chapter:hover .chapter-block { |
189 background: #3e3e3e; |
361 background: #3e3e3e; |
190 } |
362 } |
191 |
363 |
192 .chapter-title { |
364 .chapter-title { |
193 font-size: 9px; text-transform: uppercase; margin: 0 -40px; |
365 position: absolute; top: 53px; left: -40px; right: -40px; |
194 text-align: center; color: #909090; display: none; line-height: 30px; |
366 font-size: 9px; text-transform: uppercase; |
|
367 text-align: center; color: #909090; display: none; |
|
368 font-family: 'Futura-Medium'; |
195 } |
369 } |
196 |
370 |
197 .chapter:hover .chapter-title { |
371 .chapter:hover .chapter-title { |
198 display: block; |
372 display: block; |
199 } |
373 } |
|
374 |
|
375 .chip { |
|
376 position: absolute; width: 11px; height: 11px; top: 17px; border-radius: 6px; |
|
377 margin-left: -6px; |
|
378 } |
|
379 |
|
380 .chip.video { |
|
381 background: #be4477; |
|
382 } |
|
383 |
|
384 .chip.audio { |
|
385 background: #63be6c; |
|
386 } |
|
387 |
|
388 .chip.slideshow { |
|
389 background: #f69058; |
|
390 } |
|
391 |
|
392 .chip.text { |
|
393 background: #5e90cb; |
|
394 } |
|
395 |
|
396 .chip.quote { |
|
397 background: #00aeb5; |
|
398 } |
|
399 |
|
400 .chip.link { |
|
401 background: #8985bb; |
|
402 } |
|
403 |
|
404 .left-hiding-block, .right-hiding-block { |
|
405 position: absolute; width: 6px; height: 11px; top: 17px; background: #000000; |
|
406 } |
|
407 |
|
408 .left-hiding-block { |
|
409 left: -6px; |
|
410 } |
|
411 |
|
412 .right-hiding-block { |
|
413 right: -6px; |
|
414 } |
|
415 |
|
416 .prev-chapter, .next-chapter { |
|
417 width: 12px; height: 16px; margin: 8px 5px; |
|
418 background: url(../img/sprites.png); |
|
419 } |
|
420 |
|
421 .next-chapter { |
|
422 float: right; background-position: -12px -144px; |
|
423 } |
|
424 |
|
425 .next-chapter:hover { |
|
426 background-position: -36px -144px; |
|
427 } |
|
428 |
|
429 .next-chapter.inactive { |
|
430 background-position: -12px -160px; |
|
431 } |
|
432 |
|
433 .prev-chapter { |
|
434 float: left; background-position: 0 -144px; |
|
435 } |
|
436 |
|
437 .prev-chapter:hover { |
|
438 background-position: -24px -144px; |
|
439 } |
|
440 |
|
441 .prev-chapter.inactive { |
|
442 background-position: 0 -160px; |
|
443 } |
|
444 |
|
445 .progress-indicator { |
|
446 position: absolute; top: 0; width: 2px; height: 100%; background: #c0c0c0; /* margin-left: -1px; */ |
|
447 } |
|
448 |
|
449 .progress-indicator:hover { |
|
450 background: #ffffff; |
|
451 } |
|
452 |
|
453 /* */ |