|
1 /* fonts */ |
|
2 @font-face { |
|
3 font-family: 'OpenSans-Regular'; |
|
4 src: url('fonts/OpenSans-Regular.ttf'); |
|
5 } |
|
6 @font-face { |
|
7 font-family: 'OpenSans-Light'; |
|
8 src: url('fonts/OpenSans-Light.ttf'); |
|
9 } |
|
10 @font-face { |
|
11 font-family: 'OpenSans-Bold'; |
|
12 src: url('fonts/OpenSans-Bold.ttf'); |
|
13 } |
|
14 @font-face { |
|
15 font-family: 'OpenSans-Italic'; |
|
16 src: url('fonts/OpenSans-Italic.ttf'); |
|
17 } |
|
18 @font-face { |
|
19 font-family: 'OpenSans-Semibold'; |
|
20 src: url('fonts/OpenSans-Semibold.ttf'); |
|
21 } |
|
22 @font-face { |
|
23 font-family: 'OpenSans-SemiboldItalic'; |
|
24 src: url('fonts/OpenSans-SemiboldItalic.ttf'); |
|
25 } |
|
26 body{ |
|
27 height: 100%; |
|
28 background: url(../img/bg.jpg) repeat-x 0 0; |
|
29 } |
|
30 a{ |
|
31 color:#000; |
|
32 text-decoration: none; |
|
33 } |
|
34 div.wrap{ |
|
35 min-height:100%; |
|
36 background-color: #FFF; |
|
37 width: 960px; |
|
38 margin: 0 auto; |
|
39 font-family: 'OpenSans-Regular'; |
|
40 color:#333333; |
|
41 font-size: 13px; |
|
42 height: 100%; |
|
43 } |
|
44 div.wrap-header{ |
|
45 background: url(../img/bg-wrap-header.jpg) repeat-x 0 0; |
|
46 height: 58px; |
|
47 margin-bottom: 1px; |
|
48 } |
|
49 /* header */ |
|
50 div.header{ |
|
51 position: relative; |
|
52 background: url(../img/bg-header.jpg) repeat-x 0 0; |
|
53 height: 60px; |
|
54 } |
|
55 div.header div.title-video-wrap, div.header h1, div.header div.profil-wrap{ |
|
56 position: relative; |
|
57 float: left; |
|
58 height: 60px; |
|
59 } |
|
60 div.header h1{ |
|
61 display: inline-block; |
|
62 height: 60px; |
|
63 width: 250px; |
|
64 } |
|
65 div.header h1 a img, div.header h1 a span{ |
|
66 float: left; |
|
67 } |
|
68 div.header h1 a span{ |
|
69 font-family: 'OpenSans-Light'; |
|
70 font-size: 20px; |
|
71 text-align: center; |
|
72 padding: 6px 0 0 6px; |
|
73 } |
|
74 div.header div.title-video-wrap{ |
|
75 width: 460px; |
|
76 } |
|
77 div.header div.title-video-wrap a{ |
|
78 position: absolute; |
|
79 top: 10px; |
|
80 left: 0; |
|
81 font-size: 18px; |
|
82 font-family: 'OpenSans-Bold'; |
|
83 color: #30036d; |
|
84 text-decoration: underline; |
|
85 background-image: url(../img/pencil-icon.png); |
|
86 background-repeat: no-repeat; |
|
87 background-position: right 2px; |
|
88 padding-right: 20px; |
|
89 } |
|
90 div.header div.title-video-wrap a:hover{ |
|
91 text-decoration: none; |
|
92 } |
|
93 div.header div.title-video-wrap p.time-length{ |
|
94 position: absolute; |
|
95 top: 34px; |
|
96 color: #333333; |
|
97 font-size: 14px; |
|
98 } |
|
99 div.header div.title-video-wrap p.time-length span{ |
|
100 color: #de2500; |
|
101 } |
|
102 div.header div.profil-wrap{ |
|
103 width: 250px; |
|
104 } |
|
105 div.header div.profil-wrap a{ |
|
106 width: 160px; |
|
107 display: block; |
|
108 text-align: right; |
|
109 position: absolute; |
|
110 right: 0; |
|
111 font-size: 14px; |
|
112 color: #30036d; |
|
113 padding-right: 18px; |
|
114 } |
|
115 div.header div.profil-wrap a:hover{ |
|
116 color: #FF00FC; |
|
117 } |
|
118 div.header div.profil-wrap a.all-hashcut{ |
|
119 top: 12px; |
|
120 background: url(../img/arrow-top.png) right 2px no-repeat; |
|
121 } |
|
122 div.header div.profil-wrap a.my-profil{ |
|
123 top: 32px; |
|
124 background: url(../img/arrow-bot.png) right 4px no-repeat; |
|
125 } |
|
126 /* content */ |
|
127 div.content{ |
|
128 width: 960px; |
|
129 min-height: 750px; |
|
130 background: url(../img/bg-degrade.jpg) 0 0 repeat-x; |
|
131 } |
|
132 |
|
133 div.col-middle, div.col-left, div.col-right{ |
|
134 float: left; |
|
135 } |
|
136 /* col-middle */ |
|
137 div.col-middle{ |
|
138 width: 460px; |
|
139 } |
|
140 div.col-middle-header{ |
|
141 height: 35px; |
|
142 background: url(../img/bg-previsualiser.jpg) repeat-x 0 0; |
|
143 line-height: 35px; |
|
144 font-size: 16px; |
|
145 font-family: 'OpenSans-SemiboldItalic'; |
|
146 |
|
147 } |
|
148 div.col-middle-header a{ |
|
149 color: #30036d; |
|
150 } |
|
151 div.col-middle-header a:hover{ |
|
152 color: #FF00FC; |
|
153 } |
|
154 div.col-middle-header a.disable, div.col-middle-header a.disable:hover{ |
|
155 color: #796891; |
|
156 } |
|
157 div.col-middle-header a.segmenter{ |
|
158 padding: 0 10px; |
|
159 display: inline-block; |
|
160 min-width: 210px; |
|
161 height: 35px; |
|
162 background: url(../img/bg-segmenter.jpg) repeat-x 0 0; |
|
163 } |
|
164 div.col-middle-header a.previsualiser{ |
|
165 float: right; |
|
166 padding-right: 10px; |
|
167 } |
|
168 div.col-middle div.video{ |
|
169 width: 460px; |
|
170 position: relative; |
|
171 margin-bottom: 8px; |
|
172 } |
|
173 div.col-middle div.video a.publier-button{ |
|
174 position: absolute; |
|
175 width: 69px; |
|
176 height: 67px; |
|
177 background: url(../img/publier-button-sprite.png) 0 0 no-repeat; |
|
178 left: 382px; |
|
179 top: 10px; |
|
180 } |
|
181 div.col-middle div.video a.publier-button:hover{ |
|
182 background-color: #666; |
|
183 -webkit-border-radius: 2px; |
|
184 -moz-border-radius: 2px; |
|
185 border-radius: 2px; |
|
186 } |
|
187 div.col-middle div.video a.publier-button.disable{ |
|
188 background: url(../img/publier-button-sprite.png) 0 -67px no-repeat; |
|
189 } |
|
190 div.col-middle div.video a.publier-button.disable:hover{ |
|
191 background-color: none; |
|
192 } |
|
193 div.col-middle div.frise{ |
|
194 width: 458px; |
|
195 position: relative; |
|
196 height: 22px; |
|
197 } |
|
198 div.col-middle div.frise div.segment{ |
|
199 height: 22px; |
|
200 } |
|
201 div.col-middle div.frise span.indication{ |
|
202 height: 22px; |
|
203 line-height: 22px; |
|
204 } |
|
205 /* frise */ |
|
206 div.frise{ |
|
207 position: relative; |
|
208 border: 1px solid #333333; |
|
209 |
|
210 } |
|
211 div.frise div.segment{ |
|
212 float: left; |
|
213 margin-left: -1px; |
|
214 border-right: 1px solid #333; |
|
215 -moz-box-shadow: inset 0px 2px 2px 0px #333; |
|
216 -webkit-box-shadow: inset 0px 2px 2px 0px #333; |
|
217 box-shadow: inset 0px 2px 2px 0px #333; |
|
218 } |
|
219 div.frise div.segment:first-child{ |
|
220 -moz-box-shadow: inset 2px 2px 2px 0px #333; |
|
221 -webkit-box-shadow: inset 2px 2px 2px 0px #333; |
|
222 box-shadow: inset 2px 2px 2px 0px #333; |
|
223 margin-left: 0; |
|
224 } |
|
225 div.frise div.segment:last-child{ |
|
226 border-right: 0; |
|
227 } |
|
228 |
|
229 div.frise span.indication{ |
|
230 display: inline-block; |
|
231 position: absolute; |
|
232 color: #FFF; |
|
233 left: 0px; |
|
234 font-size: 10px; |
|
235 width: 30px; |
|
236 text-align: center; |
|
237 background: url(../img/bg-indication.png) 15px 0 no-repeat; |
|
238 margin-left: -15px; |
|
239 } |
|
240 /* col-left */ |
|
241 div.col-left, div.col-right{ |
|
242 width: 250px; |
|
243 min-height: 750px; |
|
244 background: url(../img/bg-col.jpg) repeat-x 0 0 #e6e6e6; |
|
245 } |
|
246 div.col-left form{ |
|
247 background: url(../img/bg-video-search.jpg) 0 0 repeat-x #906ebe; |
|
248 height: 70px; |
|
249 padding-left: 10px; |
|
250 margin-bottom: 1px; |
|
251 } |
|
252 div.col-left form h2{ |
|
253 padding-top: 8px; |
|
254 margin-bottom: 12px; |
|
255 color: #30036d; |
|
256 font-size: 16px; |
|
257 font-family: 'OpenSans-Semibold'; |
|
258 } |
|
259 div.col-left form input[type=text]{ |
|
260 width: 206px; |
|
261 font-size: 14px; |
|
262 border: none; |
|
263 height: 20px; |
|
264 padding: 0 20px 0 4px; |
|
265 -webkit-border-radius: 4px; |
|
266 -moz-border-radius: 4px; |
|
267 border-radius: 4px; |
|
268 } |
|
269 div.col-left form p{ |
|
270 position: relative; |
|
271 width: 230px; |
|
272 } |
|
273 div.col-left form input[type=text]::-webkit-input-placeholder{ |
|
274 color: #b48aed; |
|
275 font-family: 'OpenSans-Italic'; |
|
276 } |
|
277 div.col-left form input[type=text]:-moz-placeholder { |
|
278 color: #b48aed; |
|
279 font-family: 'OpenSans-Italic'; |
|
280 } |
|
281 div.col-left form input[type=submit]{ |
|
282 position: absolute; |
|
283 right: 2px; |
|
284 width: 20px; |
|
285 height: 20px; |
|
286 border: none; |
|
287 background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat; |
|
288 } |
|
289 div.col-left ul.list-video li a:hover,div.col-left ul.list-video li a.active{ |
|
290 background: url(../img/arrow-item-video-sprite.png) -250px 0 no-repeat; |
|
291 } |
|
292 |
|
293 |
|
294 |
|
295 /* col-right */ |
|
296 div.col-right{ |
|
297 width: 250px; |
|
298 } |
|
299 div.col-right div.liste-segment{ |
|
300 height: 70px; |
|
301 background: url(../img/bg-liste-segment.jpg) repeat-x 0 0; |
|
302 padding: 0 10px; |
|
303 width: 230px; |
|
304 } |
|
305 div.col-right div.liste-segment h2{ |
|
306 text-align: right; |
|
307 color: #30036D; |
|
308 font-family: 'OpenSans-Semibold'; |
|
309 font-size: 16px; |
|
310 margin-bottom: 12px; |
|
311 padding-top: 8px; |
|
312 } |
|
313 div.col-right div.liste-segment div.frise{ |
|
314 width: 228px; |
|
315 position: relative; |
|
316 height: 20px; |
|
317 } |
|
318 div.col-right div.liste-segment div.frise div.segment{ |
|
319 height: 20px; |
|
320 } |
|
321 div.col-right div.liste-segment div.frise span.indication{ |
|
322 height: 20px; |
|
323 line-height: 20px; |
|
324 } |
|
325 div.col-right ul.list-video > li{ |
|
326 position: relative; |
|
327 } |
|
328 div.col-right ul.list-video > li > a:hover,div.col-right ul.list-video > li > a.active{ |
|
329 background: url(../img/arrow-item-video-sprite.png) 0 0 no-repeat; |
|
330 } |
|
331 div.col-right ul.list-video > li ul.tools{ |
|
332 position: absolute; |
|
333 left: 94px; |
|
334 top: 48px; |
|
335 } |
|
336 /* popin */ |
|
337 div.popin{ |
|
338 padding-top: 12px; |
|
339 position: absolute; |
|
340 top: 0; |
|
341 z-index: 10; |
|
342 } |
|
343 div.popin img.pointer{ |
|
344 position: absolute; |
|
345 top: 0; |
|
346 } |
|
347 div.popin div.popin-content{ |
|
348 padding: 8px; |
|
349 border: 1px solid #867a97; |
|
350 background: url(../img/bg-jaune.jpg); |
|
351 } |
|
352 div.popin input[type=text],div.popin input[type=password], div.popin textarea{ |
|
353 padding: 0 6px; |
|
354 height: 20px; |
|
355 line-height: 20px; |
|
356 font-size: 12px; |
|
357 border: 1px solid #867a97; |
|
358 -webkit-border-radius: 4px; |
|
359 -moz-border-radius: 4px; |
|
360 border-radius: 4px; |
|
361 } |
|
362 /* update title */ |
|
363 div.update-title.popin{ |
|
364 top: 34px; |
|
365 left: 150px; |
|
366 } |
|
367 div.update-title.popin p.form-right, div.update-title.popin div.form-left{ |
|
368 float: left; |
|
369 } |
|
370 div.update-title.popin textarea{ |
|
371 width: 200px; |
|
372 height: 66px; |
|
373 max-width: 530px; |
|
374 } |
|
375 div.update-title.popin div.form-left{ |
|
376 margin-right: 12px; |
|
377 } |
|
378 div.update-title.popin img.pointer{ |
|
379 left: 110px; |
|
380 } |
|
381 div.update-title.popin label{ |
|
382 display: block; |
|
383 margin-bottom: 4px; |
|
384 } |
|
385 div.update-title.popin input[type=text]{ |
|
386 width: 200px; |
|
387 } |
|
388 div.update-title.popin p.titre-wrap{ |
|
389 margin-bottom: 6px; |
|
390 } |
|
391 /* mon-profil */ |
|
392 div.user.popin{ |
|
393 top: 48px; |
|
394 right: 0; |
|
395 } |
|
396 div.user.popin img.pointer{ |
|
397 right: 36px; |
|
398 } |
|
399 /* info */ |
|
400 div.user.popin.info div.popin-content{ |
|
401 min-width: 150px; |
|
402 text-align: right; |
|
403 } |
|
404 div.user.popin.info div.popin-content h2{ |
|
405 color: #7628df; |
|
406 font-size: 18px; |
|
407 font-family: 'OpenSans-Semibold'; |
|
408 margin-bottom: 2px; |
|
409 } |
|
410 div.user.popin.info div.popin-content h3{ |
|
411 color: #30036d; |
|
412 font-size: 14px; |
|
413 margin-bottom: 10px; |
|
414 } |
|
415 div.user.popin.info div.popin-content a.nb-hashcut{ |
|
416 color: #de2500; |
|
417 font-size: 14px; |
|
418 text-decoration: underline; |
|
419 display: block; |
|
420 margin-bottom: 12px; |
|
421 } |
|
422 div.user.popin.info div.popin-content a.nb-hashcut:hover{ |
|
423 text-decoration: none; |
|
424 } |
|
425 div.user.popin.info div.popin-content a.change-account{ |
|
426 text-align: center; |
|
427 height: 20px; |
|
428 width: 150px; |
|
429 line-height: 20px; |
|
430 color: #FFF; |
|
431 font-size: 12px; |
|
432 background-color: #30036d; |
|
433 -moz-border-radius: 2px; |
|
434 -webkit-border-radius: 2px; |
|
435 border-radius: 2px; |
|
436 display: block; |
|
437 } |
|
438 div.user.popin.info div.popin-content a.change-account:hover{ |
|
439 background-color: #FF00FC; |
|
440 } |
|
441 /* signup */ |
|
442 div.user.popin.signup div.popin-content{ |
|
443 min-width: 205px; |
|
444 |
|
445 } |
|
446 |
|
447 div.user.popin.signup div.popin-content h2{ |
|
448 color: #de2500; |
|
449 font-size: 14px; |
|
450 margin-bottom: 12px; |
|
451 } |
|
452 div.user.popin.signup div.popin-content form label{ |
|
453 width: 84px; |
|
454 font-size: 12px; |
|
455 display: inline-block; |
|
456 float: left; |
|
457 vertical-align: middle; |
|
458 |
|
459 } |
|
460 div.user.popin.signup div.popin-content form p{ |
|
461 display: block; |
|
462 line-height: 18px; |
|
463 margin-bottom: 6px; |
|
464 overflow: auto; |
|
465 |
|
466 } |
|
467 div.user.popin.signup div.popin-content form input[type=text], |
|
468 div.user.popin.signup div.popin-content form input[type=password]{ |
|
469 float: left; |
|
470 position: relative; |
|
471 width: 110px; |
|
472 padding: 0 5px; |
|
473 height: 18px; |
|
474 display: inline-block; |
|
475 vertical-align: middle; |
|
476 } |
|
477 /* frise-description */ |
|
478 div.frise-description.popin{ |
|
479 top: 26px; |
|
480 left: 0; |
|
481 width: 458px; |
|
482 } |
|
483 div.frise-description.popin img.pointer{ |
|
484 right: 36px; |
|
485 } |
|
486 div.frise-description.popin h2{ |
|
487 color: #de2500; |
|
488 font-size: 14px; |
|
489 font-family: 'OpenSans-Bold'; |
|
490 } |
|
491 div.frise-description.popin table{ |
|
492 font-size: 12px; |
|
493 } |
|
494 div.frise-description.popin table th{ |
|
495 text-align: left; |
|
496 font-family: 'OpenSans-Semibold'; |
|
497 display: block; |
|
498 min-width: 75px; |
|
499 } |
|
500 div.frise-description.popin table td{ |
|
501 line-height: 15px; |
|
502 padding-left: 2px; |
|
503 } |
|
504 div.frise-description.popin table th, div.frise-description.popin table td, div.frise-description.popin h2{ |
|
505 padding-bottom: 8px; |
|
506 } |
|
507 div.frise-description.popin ul.tools{ |
|
508 float: right; |
|
509 } |
|
510 /* tools */ |
|
511 ul.tools{} |
|
512 ul.tools li{ |
|
513 float: left; |
|
514 } |
|
515 ul.tools li a{ |
|
516 display: block; |
|
517 width: 17px; |
|
518 height: 17px; |
|
519 background: url(../img/tools-sprite.png) no-repeat 0 0; |
|
520 } |
|
521 ul.tools li a.edit{ |
|
522 background-position: 2px 0; |
|
523 } |
|
524 ul.tools li a.edit:hover{ |
|
525 background-position: 2px -32px; |
|
526 } |
|
527 ul.tools li a.edit.disable:hover, ul.tools li a.edit.disable{ |
|
528 background-position: 2px -16px; |
|
529 } |
|
530 ul.tools li a.bottom{ |
|
531 background-position: -19px 0; |
|
532 } |
|
533 ul.tools li a.bottom:hover{ |
|
534 background-position: -19px -32px; |
|
535 } |
|
536 ul.tools li a.bottom.disable:hover, ul.tools li a.bottom.disable{ |
|
537 background-position: -19px -16px; |
|
538 } |
|
539 ul.tools li a.top{ |
|
540 background-position: -40px 0; |
|
541 } |
|
542 ul.tools li a.top:hover{ |
|
543 background-position: -40px -32px; |
|
544 } |
|
545 ul.tools li a.top.disable:hover, ul.tools li a.top.disable{ |
|
546 background-position: -40px -16px; |
|
547 } |
|
548 ul.tools li a.delete{ |
|
549 background-position: -61px 0; |
|
550 } |
|
551 ul.tools li a.delete:hover{ |
|
552 background-position: -61px -32px; |
|
553 } |
|
554 ul.tools li a.delete.disable:hover, ul.tools li a.delete.disable{ |
|
555 background-position: -61px -16px; |
|
556 } |
|
557 /* list-video */ |
|
558 |
|
559 ul.list-video > li{ |
|
560 margin-bottom: 1px; |
|
561 } |
|
562 ul.list-video > li > a{ |
|
563 padding: 5px 0 5px 10px; |
|
564 position: relative; |
|
565 clear: both; |
|
566 width: 240px; |
|
567 height: 62px; |
|
568 } |
|
569 |
|
570 ul.list-video li a img, ul.list-video li a span.video-info{ |
|
571 float: left; |
|
572 } |
|
573 ul.list-video li a img{ |
|
574 margin-right: 4px; |
|
575 } |
|
576 ul.list-video li a span.video-info{ |
|
577 display: block; |
|
578 width: 150px; |
|
579 } |
|
580 ul.list-video li a span.video-info span.title-video{ |
|
581 font-size: 13px; |
|
582 font-family: 'OpenSans-Semibold'; |
|
583 color: #30036d; |
|
584 display: block; |
|
585 margin-bottom: 1px; |
|
586 } |
|
587 ul.list-video li a span.video-info span.author{ |
|
588 font-size: 11px; |
|
589 display: block; |
|
590 margin-bottom: 1px; |
|
591 } |
|
592 ul.list-video li a span.video-info span.time-lenght{ |
|
593 font-size: 12px; |
|
594 font-family: 'OpenSans-Semibold'; |
|
595 display: block; |
|
596 } |
|
597 ul.list-video li a span.video-info span.time-lenght span{ |
|
598 color: #de2500; |
|
599 } |
|
600 ul.list-video li a span.number{ |
|
601 color: #FFF; |
|
602 font-size: 10px; |
|
603 text-align: center; |
|
604 width:15px; |
|
605 height: 15px; |
|
606 line-height: 15px; |
|
607 background-color: #ff00fc; |
|
608 position: absolute; |
|
609 display: block; |
|
610 -webkit-border-radius: 4px; |
|
611 -moz-border-radius: 4px; |
|
612 border-radius: 4px; |
|
613 top: 54px; |
|
614 left: 78px; |
|
615 } |
|
616 ul.list-video li a span.subtitle{ |
|
617 margin-bottom: 2px; |
|
618 display: block; |
|
619 color: #de2500; |
|
620 font-size: 11px; |
|
621 } |
|
622 ul.list-video li span.duration{ |
|
623 color: #7628df; |
|
624 font-size: 12px; |
|
625 font-family: 'OpenSans-Semibold'; |
|
626 display: block; |
|
627 |
|
628 } |
|
629 /* footer */ |
|
630 div.footer{ |
|
631 border-top: 1px solid black; |
|
632 width: 100%; |
|
633 padding-top: 8px; |
|
634 } |
|
635 div.footer ul.links-left{ |
|
636 float: left; |
|
637 |
|
638 } |
|
639 div.footer ul.links-left li{ |
|
640 margin-bottom: 4px; |
|
641 } |
|
642 div.footer ul.links-left li a{ |
|
643 border-bottom: 1px solid #cccccc; |
|
644 } |
|
645 div.footer ul.links-left li a:hover{ |
|
646 border-bottom: none; |
|
647 } |
|
648 div.footer ul.links-right{ |
|
649 float: right; |
|
650 } |
|
651 div.footer ul.links-right li{ |
|
652 line-height: 40px; |
|
653 float: right; |
|
654 margin-left: 8px; |
|
655 } |
|
656 div.footer ul.links-right li img { |
|
657 vertical-align: middle; |
|
658 } |