94 height: 53px; |
94 height: 53px; |
95 margin-bottom: 1px; |
95 margin-bottom: 1px; |
96 } |
96 } |
97 /* header - title-video-wrap */ |
97 /* header - title-video-wrap */ |
98 .title-video-wrap{ |
98 .title-video-wrap{ |
99 width: 460px; |
99 width: 380px; |
100 } |
100 } |
101 .title-video-wrap a{ |
101 .title-video-wrap .title-video { |
102 position: absolute; |
102 margin-top: 10px; |
103 top: 10px; |
|
104 left: 0; |
103 left: 0; |
105 font-size: 18px; |
104 font-size: 18px; |
106 font-weight: bold; |
105 font-weight: bold; |
107 color: #30036d; |
106 color: #30036d; |
108 text-decoration: underline; |
107 text-decoration: underline; |
|
108 } |
|
109 .title-video-wrap .title-video:hover { |
|
110 text-decoration: none; |
|
111 } |
|
112 .title-video-wrap .open-popin { |
|
113 color: #30036d; |
109 background-image: url(../img/pencil-icon.png); |
114 background-image: url(../img/pencil-icon.png); |
110 background-repeat: no-repeat; |
115 background-repeat: no-repeat; |
111 background-position: right 2px; |
116 background-position: right 6px; |
112 padding-right: 20px; |
117 padding-right: 20px; |
113 min-height: 20px; |
118 min-height: 20px; |
114 } |
119 } |
115 .title-header{ |
120 .title-header{ |
116 width: 460px; |
121 width: 460px; |
417 overflow-y: auto; |
423 overflow-y: auto; |
418 height: 680px; |
424 height: 680px; |
419 } |
425 } |
420 .item-video { |
426 .item-video { |
421 margin-bottom: 1px; |
427 margin-bottom: 1px; |
422 cursor: pointer; |
|
423 padding: 5px 10px 5px 10px; |
428 padding: 5px 10px 5px 10px; |
424 clear: both; |
429 clear: both; |
425 width: auto; |
430 width: auto; |
426 min-height: 62px; |
431 min-height: 62px; |
427 display: block; |
432 display: block; |
|
433 position: relative; |
428 } |
434 } |
429 .item-video img{ |
435 .item-video img{ |
430 float: left; |
436 float: left; |
431 margin-right: 4px; |
437 margin-right: 4px; |
432 max-width: 80px; |
438 max-width: 80px; |
433 max-height: 60px; |
439 max-height: 60px; |
434 box-shadow: 2px 2px 2px #333333; |
440 box-shadow: 2px 2px 2px #333333; |
435 } |
441 } |
436 .item-video .video-info{ |
442 .item-video .video-info{ |
437 display: block; |
|
438 margin-left: 88px; |
443 margin-left: 88px; |
439 } |
444 } |
440 .item-video .title-video{ |
445 .item-video .title-video{ |
441 font-size: 13px; |
446 font-size: 13px; |
442 font-weight: 600; |
447 font-weight: 600; |
443 color: #30036d; |
448 color: #30036d; |
444 display: block; |
|
445 margin-bottom: 1px; |
449 margin-bottom: 1px; |
446 } |
450 } |
447 .item-video .author{ |
451 .item-video .description{ |
448 font-size: 11px; |
452 font-size: 11px; |
449 display: block; |
|
450 margin-bottom: 1px; |
453 margin-bottom: 1px; |
451 } |
454 } |
452 .item-video .time-length{ |
455 .item-video .time-length{ |
453 font-size: 12px; |
456 font-size: 12px; |
454 font-weight: 600; |
457 font-weight: 600; |
455 display: block; |
|
456 } |
458 } |
457 .item-video .time-length span{ |
459 .item-video .time-length span{ |
458 color: #de2500; |
460 color: #de2500; |
459 } |
461 } |
460 .item-video .number{ |
462 .item-video .media-count-wrap { |
|
463 width: 30px; |
|
464 text-align: center; |
|
465 position: absolute; |
|
466 top: 45px; |
|
467 left: 75px; |
|
468 height: 15px; |
|
469 display: none; |
|
470 } |
|
471 .item-video .media-count{ |
461 color: #FFF; |
472 color: #FFF; |
462 font-size: 10px; |
473 font-size: 10px; |
463 text-align: center; |
|
464 width:15px; |
|
465 height: 15px; |
|
466 line-height: 15px; |
474 line-height: 15px; |
467 background-color: #ff00fc; |
475 background-color: #ff00fc; |
468 position: absolute; |
|
469 display: block; |
|
470 -webkit-border-radius: 4px; |
476 -webkit-border-radius: 4px; |
471 -moz-border-radius: 4px; |
477 -moz-border-radius: 4px; |
472 border-radius: 4px; |
478 border-radius: 4px; |
473 top: 54px; |
479 padding: 0 3px; |
474 left: 78px; |
480 border: 1px solid #DE2500; |
475 } |
481 } |
476 .item-video .subtitle{ |
482 .item-video .subtitle{ |
477 margin-bottom: 2px; |
483 margin-bottom: 2px; |
478 display: block; |
|
479 color: #de2500; |
484 color: #de2500; |
480 font-size: 11px; |
485 font-size: 11px; |
481 } |
486 } |
482 .item-video .duration{ |
487 .item-video .duration{ |
483 color: #7628df; |
488 color: #7628df; |
484 font-size: 12px; |
489 font-size: 12px; |
485 font-weight: 600; |
490 font-weight: 600; |
486 display: block; |
|
487 } |
491 } |
488 /* frise */ |
492 /* frise */ |
489 .frise{ |
493 .frise{ |
490 height: 22px; |
494 height: 22px; |
491 position: relative; |
495 position: relative; |
492 border: 1px solid #333333; |
496 border: 1px solid #333333; |
|
497 } |
|
498 |
|
499 .mashup-frise { |
|
500 cursor: pointer; |
493 } |
501 } |
494 |
502 |
495 .frise-overflow { |
503 .frise-overflow { |
496 position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; |
504 position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; |
497 } |
505 } |
507 width: 100%; |
515 width: 100%; |
508 z-index:0; |
516 z-index:0; |
509 background: #CCCCCC; |
517 background: #CCCCCC; |
510 } |
518 } |
511 .frise-segment{ |
519 .frise-segment{ |
512 cursor: pointer; |
|
513 height: 22px; |
|
514 position: absolute; |
520 position: absolute; |
|
521 height: 100%; |
|
522 } |
|
523 .mashup-frise .frise-segment { |
515 background-image: url(../img/border-right-segment.png); |
524 background-image: url(../img/border-right-segment.png); |
516 background-repeat: repeat-y; |
525 background-repeat: repeat-y; |
517 background-position: right top; |
526 background-position: right top; |
518 -moz-box-shadow: inset 0px 1px 1px 0px #666; |
527 -moz-box-shadow: inset 0px 1px 1px 0px #666; |
519 -webkit-box-shadow: inset 0px 1px 1px 0px #666; |
528 -webkit-box-shadow: inset 0px 1px 1px 0px #666; |
520 box-shadow: inset 0px 1px 1px 0px #666; |
529 box-shadow: inset 0px 1px 1px 0px #666; |
521 } |
530 } |
522 .frise-segment:first-child{ |
531 .mashup-frise .frise-segment:first-child{ |
523 -moz-box-shadow: inset 1px 1px 1px 0px #666; |
532 -moz-box-shadow: inset 1px 1px 1px 0px #666; |
524 -webkit-box-shadow: inset 1px 1px 1px 0px #666; |
533 -webkit-box-shadow: inset 1px 1px 1px 0px #666; |
525 box-shadow: inset 1px 1px 1px 0px #666; |
534 box-shadow: inset 1px 1px 1px 0px #666; |
526 } |
535 } |
527 .frise-segment:last-child{ |
536 .mashup-frise .frise-segment:last-child{ |
528 background-image: none; |
537 background-image: none; |
529 } |
538 } |
530 .frise-segment.active { |
539 .frise-segment.active, .mashup-frise .frise-segment.active { |
531 background-image: url(../img/pinstripe-purple.png); |
540 background-image: url(../img/pinstripe-purple.png); |
532 background-repeat: repeat; |
541 background-repeat: repeat; |
533 } |
542 } |
534 .frise-indication{ |
543 .frise-indication{ |
535 height: 22px; |
544 height: 100%; |
536 line-height: 22px; |
545 line-height: 22px; |
537 display: inline-block; |
546 display: inline-block; |
538 position: absolute; |
547 position: absolute; |
539 color: #FFF; |
548 color: #FFF; |
540 top:0; |
549 top:0; |
615 } |
625 } |
616 .widget { |
626 .widget { |
617 position: relative; |
627 position: relative; |
618 } |
628 } |
619 |
629 |
|
630 .segment-tooltip-wrapper { |
|
631 position: absolute; height: 0; width: 0; |
|
632 top: 0; z-index: 7; display: none; left: 50%; |
|
633 } |
|
634 |
|
635 .segment-tooltip { |
|
636 padding: 4px; border: 1px solid #867a97; background: url(../img/bg-jaune.png); |
|
637 width: 130px; position: absolute; bottom: 14px; left: -70px; |
|
638 font-size: 12px; font-weight: 600; text-align: center; color: #DE2500; |
|
639 } |
|
640 |
|
641 .segment-tooltip-tip { |
|
642 position: absolute; top: -15px; left: -10px; background: url(../img/inv-triangle.png); |
|
643 width: 20px; height: 13px; |
|
644 } |
|
645 |
620 /* Styles from Metadataplayer */ |
646 /* Styles from Metadataplayer */ |
621 |
647 |
622 /* Slider Widget */ |
648 /* Slider Widget */ |
623 |
649 |
624 .Ldt-Slider-Container { |
650 .Ldt-Slider-Container { |
823 } |
849 } |
824 |
850 |
825 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
851 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
826 background: #F7268E; |
852 background: #F7268E; |
827 } |
853 } |
|
854 |
|
855 /* Social Share Widget */ |
|
856 |
|
857 .Ldt-Social { |
|
858 float: right; margin-top: 10px; |
|
859 } |
|
860 |
|
861 .Ldt-Social a { |
|
862 float: left; width: 24px; height: 24px; background: url(../img/socialbuttons.png); |
|
863 } |
|
864 |
|
865 .Ldt-Social-Url-Container { |
|
866 float: left; width: 24px; height: 24px; position: relative; |
|
867 } |
|
868 |
|
869 a.Ldt-Social-Url { |
|
870 margin: 0; background-position: -96px 0; |
|
871 } |
|
872 |
|
873 a.Ldt-Social-Url:hover { |
|
874 background-position: -96px -24px; |
|
875 } |
|
876 |
|
877 .Ldt-Social-UrlPop { |
|
878 position: absolute; left: 20px; top: -2px; background: url(../img/socialcopy.png); |
|
879 padding: 3px 0 0 12px; width: 218px; height: 27px; |
|
880 display: none; |
|
881 } |
|
882 |
|
883 .Ldt-Social-Input, .Ldt-Social-CopyBtn { |
|
884 font-size: 11px; margin: 1px; border: 1px solid #ccc; height: 16px; |
|
885 padding: 1px; border-radius: 2px; display: inline-block; |
|
886 } |
|
887 |
|
888 .Ldt-Social-Input:hover, .Ldt-Social-CopyBtn.hover { |
|
889 border-color: #8080ff; |
|
890 } |
|
891 |
|
892 .Ldt-Social-Input { |
|
893 width: 150px; |
|
894 } |
|
895 |
|
896 .Ldt-Social-CopyBtn { |
|
897 font-weight: bold; width: 50px; text-align: center; background: #f0f0ff; line-height: 16px; width: 46px; |
|
898 } |
|
899 |
|
900 .Ldt-Social-CopyBtn.hover { |
|
901 background: #ffe0a0; |
|
902 } |
|
903 |
|
904 .Ldt-Social-CopyBtn.active { |
|
905 background: #ff8000; |
|
906 } |
|
907 |
|
908 a.Ldt-Social-Twitter { |
|
909 background-position: 0 0; |
|
910 } |
|
911 |
|
912 a.Ldt-Social-Twitter:hover { |
|
913 background-position: 0 -24px; |
|
914 } |
|
915 |
|
916 a.Ldt-Social-Fb { |
|
917 background-position: -24px 0; |
|
918 } |
|
919 |
|
920 a.Ldt-Social-Fb:hover { |
|
921 background-position: -24px -24px; |
|
922 } |
|
923 |
|
924 a.Ldt-Social-Gplus { |
|
925 background-position: -48px 0; |
|
926 } |
|
927 |
|
928 a.Ldt-Social-Gplus:hover { |
|
929 background-position: -48px -24px; |
|
930 } |
|
931 |
|
932 a.Ldt-Social-Mail { |
|
933 background-position: -72px 0; |
|
934 } |
|
935 |
|
936 a.Ldt-Social-Mail:hover { |
|
937 background-position: -72px -24px; |
|
938 } |