150 .picto { |
154 .picto { |
151 float: left; padding: 7px; background:black; |
155 float: left; padding: 7px; background:black; |
152 border-radius: 19px; cursor: pointer; |
156 border-radius: 19px; cursor: pointer; |
153 } |
157 } |
154 |
158 |
|
159 .found .picto { |
|
160 box-shadow: 0 0 8px #ff00f0; |
|
161 border: 2px solid #800078; padding: 5px; |
|
162 } |
|
163 |
155 .picto-title { |
164 .picto-title { |
156 margin-left: 10px; font-size: 12px; text-transform: uppercase; |
165 margin-left: 10px; font-size: 12px; text-transform: uppercase; |
157 display: none; text-shadow: 0 0 2px #000000; font-family: 'Futura-Medium'; |
166 display: none; text-shadow: 0.3px 0.7px 0 rgba(0,0,0,.5), -0.3px -0.7px 0 rgba(200,200,200,.5); font-family: 'Futura-Medium'; |
158 } |
167 } |
159 |
168 |
160 .hover .picto-title { |
169 .hover .picto-title { |
161 display: inline; |
170 display: inline; |
162 } |
171 } |
163 |
172 |
164 .picto a { |
173 .picto a { |
165 background: url(../img/sprites.png); display: block; width: 24px; height: 24px; |
174 background: url(../img/sprites.png); display: block; width: 24px; height: 24px; |
166 } |
175 } |
167 |
176 |
168 .video.hover .picto { |
177 .video.hover .picto , |
|
178 .video.current .picto { |
169 background: #be4477; |
179 background: #be4477; |
170 } |
180 } |
171 |
181 |
172 .video.hover .picto a { |
182 .video.hover .picto a , |
|
183 .video.current .picto a { |
173 background-position: -24px 0; |
184 background-position: -24px 0; |
174 } |
185 } |
175 |
186 |
176 .audio .picto a { |
187 .audio .picto a { |
177 background-position: 0 -24px; |
188 background-position: 0 -24px; |
178 } |
189 } |
179 |
190 |
180 .audio.hover .picto { |
191 .audio.hover .picto, |
|
192 .audio.current .picto { |
181 background: #63be6c; |
193 background: #63be6c; |
182 } |
194 } |
183 |
195 |
184 .audio.hover .picto a { |
196 .audio.hover .picto a , |
|
197 .audio.current .picto a { |
185 background-position: -24px -24px; |
198 background-position: -24px -24px; |
186 } |
199 } |
187 |
200 |
188 .slideshow .picto a { |
201 .slideshow .picto a { |
189 background-position: 0 -48px; |
202 background-position: 0 -48px; |
190 } |
203 } |
191 |
204 |
192 .slideshow.hover .picto { |
205 .slideshow.hover .picto , |
|
206 .slideshow.current .picto { |
193 background: #f69058; |
207 background: #f69058; |
194 } |
208 } |
195 |
209 |
196 .slideshow.hover .picto a { |
210 .slideshow.hover .picto a , |
|
211 .slideshow.current .picto a { |
197 background-position: -24px -48px; |
212 background-position: -24px -48px; |
198 } |
213 } |
199 |
214 |
200 .text .picto a { |
215 .text .picto a { |
201 background-position: 0 -72px; |
216 background-position: 0 -72px; |
202 } |
217 } |
203 |
218 |
204 .text.hover .picto { |
219 .text.hover .picto , |
|
220 .text.current .picto { |
205 background: #5e90cb; |
221 background: #5e90cb; |
206 } |
222 } |
207 |
223 |
208 .text.hover .picto a { |
224 .text.hover .picto a , |
|
225 .text.current .picto a { |
209 background-position: -24px -72px; |
226 background-position: -24px -72px; |
210 } |
227 } |
211 |
228 |
212 .quote .picto a { |
229 .quote .picto a { |
213 background-position: 0 -96px; |
230 background-position: 0 -96px; |
214 } |
231 } |
215 |
232 |
216 .quote.hover .picto { |
233 .quote.hover .picto , |
|
234 .quote.current .picto { |
217 background: #00aeb5; |
235 background: #00aeb5; |
218 } |
236 } |
219 |
237 |
220 .quote.hover .picto a { |
238 .quote.hover .picto a , |
|
239 .quote.current .picto a { |
221 background-position: -24px -96px; |
240 background-position: -24px -96px; |
222 } |
241 } |
223 |
242 |
224 .link .picto a { |
243 .link .picto a { |
225 background-position: 0 -120px; |
244 background-position: 0 -120px; |
226 } |
245 } |
227 |
246 |
228 .link.hover .picto { |
247 .link.hover .picto , |
|
248 .link.current .picto { |
229 background: #8985bb; |
249 background: #8985bb; |
230 } |
250 } |
231 |
251 |
232 .link.hover .picto a { |
252 .link.hover .picto a , |
|
253 .link.current .picto a { |
233 background-position: -24px -120px; |
254 background-position: -24px -120px; |
234 } |
255 } |
235 |
256 |
236 /* Annotations */ |
257 /* Annotations */ |
237 |
258 |
250 .close-annotation { |
271 .close-annotation { |
251 float: right; text-decoration: none; margin: 0 5px; |
272 float: right; text-decoration: none; margin: 0 5px; |
252 font-weight: bold; font-size: 20px; |
273 font-weight: bold; font-size: 20px; |
253 } |
274 } |
254 |
275 |
255 .text-annotation, .slideshow-annotation, .video-annotation, .audio-annotation { |
276 .annotation { |
256 left: 45px; top: 20px; right: 35px; |
277 left: 45px; top: 20px; right: 35px; |
257 } |
278 } |
258 |
279 |
259 /* Text annotation */ |
280 /* Text annotation */ |
260 |
281 |
261 .text-annotation { |
282 .text-annotation, |
|
283 .link-annotation, |
|
284 .audio-annotation { |
262 background: #ffffff; max-height: 522px; overflow: auto; |
285 background: #ffffff; max-height: 522px; overflow: auto; |
263 } |
286 } |
264 |
287 |
265 .text-annotation .close-annotation, |
288 .text-annotation .close-annotation, |
266 .audio-annotation .close-annotation { |
289 .audio-annotation .close-annotation, |
|
290 .link-annotation .close-annotation { |
267 color: #000000; |
291 color: #000000; |
268 } |
292 } |
269 |
293 |
270 .text-annotation .close-annotation:hover, |
294 .text-annotation .close-annotation:hover, |
271 .audio-annotation .close-annotation:hover { |
295 .audio-annotation .close-annotation:hover, |
|
296 .link-annotation .close-annotation:hover { |
272 color: #666666; |
297 color: #666666; |
273 } |
298 } |
274 |
299 |
275 .text-annotation .annotation-title, |
300 .text-annotation .annotation-title, |
276 .audio-annotation .annotation-title { |
301 .audio-annotation .annotation-title, |
|
302 .link-annotation .annotation-title { |
277 font-size: 23px; margin: 24px 0; |
303 font-size: 23px; margin: 24px 0; |
278 } |
304 } |
279 |
305 |
280 .text-annotation .annotation-contents { |
306 .text-contents { |
281 font-family: Georgia, 'Times New Roman', serif; |
307 font-family: Georgia, 'Times New Roman', serif; |
282 margin: 0 45px 35px; |
308 margin: 0 45px 35px; |
283 column-count: 2; column-gap: 60px; |
309 column-count: 2; column-gap: 60px; |
284 -moz-column-count: 2; -moz-column-gap: 60px; |
310 -moz-column-count: 2; -moz-column-gap: 60px; |
285 -webkit-column-count: 2; -webkit-column-gap: 60px; |
311 -webkit-column-count: 2; -webkit-column-gap: 60px; |
286 } |
312 } |
287 |
313 |
288 .text-annotation p { |
314 .text-contents p, .text-contents ul, .text-contents ol { |
|
315 column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; |
|
316 margin-bottom: 10px; font-size: 15px; |
|
317 } |
|
318 |
|
319 .text-contents h2, .text-contents h3, .text-contents h4 { |
|
320 font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em; |
|
321 column-break-after:avoid; -moz-column-break-after:avoid; -webkit-column-break-after:avoid; |
|
322 column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; |
|
323 } |
|
324 |
|
325 .text-contents h2 { |
|
326 font-size: 21px; |
|
327 } |
|
328 |
|
329 .text-contents h3 { |
|
330 font-size: 18px; |
|
331 } |
|
332 |
|
333 .text-contents h4 { |
|
334 font-size: 15px; |
|
335 } |
|
336 |
|
337 .text-contents b, .text-contents strong { |
|
338 font-weight: bold; |
|
339 } |
|
340 |
|
341 .text-contents em, .text-contents i { |
|
342 font-style: italic; |
|
343 } |
|
344 |
|
345 .text-contents a { |
|
346 color: #5E90CB; |
|
347 } |
|
348 |
|
349 .text-contents ul { |
|
350 list-style: disc; padding-left: 2em; |
|
351 } |
|
352 |
|
353 .text-contents ol { |
|
354 list-style: decimal; padding-left: 2em; |
|
355 } |
|
356 |
|
357 .text-contents li { |
|
358 list-style: inherit; margin: 2px 0; |
|
359 } |
|
360 |
|
361 /* Link annotation */ |
|
362 |
|
363 .link-contents { |
|
364 font-family: Georgia, 'Times New Roman', serif; |
|
365 margin: 0 80px 35px; |
|
366 } |
|
367 |
|
368 .link-contents p { |
|
369 text-align: center; font-size: 23px; margin: 30px 0; |
|
370 } |
|
371 |
|
372 .link-contents a { |
|
373 color: #000000; |
|
374 } |
|
375 |
|
376 /* Audio annotation */ |
|
377 |
|
378 .audio-description { |
|
379 font-family: Georgia, 'Times New Roman', serif; |
|
380 margin: 35px 45px; font-size: 15px; |
|
381 } |
|
382 |
|
383 .audio-frame { |
|
384 margin: 0 45px; |
|
385 } |
|
386 |
|
387 .audio-description p { |
289 margin-bottom: 10px; |
388 margin-bottom: 10px; |
290 } |
389 } |
291 |
390 |
292 /* Audio annotation */ |
|
293 |
|
294 .audio-annotation { |
|
295 background: #ffffff; |
|
296 } |
|
297 |
|
298 /* Slideshow annotation */ |
391 /* Slideshow annotation */ |
299 |
392 |
300 .slideshow-center { |
393 .slideshow-center, |
|
394 .video-center { |
301 position: relative; background: rgba(0,0,0,.7); |
395 position: relative; background: rgba(0,0,0,.7); |
302 } |
396 } |
303 |
397 |
304 .slideshow-annotation .annotation-title { |
398 .slideshow-annotation .annotation-title, |
|
399 .video-annotation .annotation-title { |
305 height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000; |
400 height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000; |
306 } |
401 } |
307 |
402 |
308 .slideshow-frame { |
403 .slideshow-frame { |
309 float: left; |
404 float: left; |
|
405 } |
|
406 |
|
407 .video-frame { |
|
408 float: left; width: 650px; |
310 } |
409 } |
311 |
410 |
312 .slideshow-image { |
411 .slideshow-image { |
313 max-width: 650px; max-height: 452px; margin: 0 auto; display: block; |
412 max-width: 650px; max-height: 452px; margin: 0 auto; display: block; |
314 } |
413 } |