/* --- STYLES DE BASE : CSS RESET --- */ @font-face {font-family: 'nonserif';src: url('font/nonserif-webfont.eot'); src:url('font/nonserif-webfont.eot?#iefix') format('embedded-opentype'), url('font/nonserif-webfont.woff') format('woff'), url('font/nonserif-webfont.ttf') format('truetype'), url('font/nonserif-webfont.svg') format('svg');font-weight: normal;font-style: normal;} body {margin: 0; padding: 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;} /* TODO : définir la bonne font principale */ body.deficient {font-size:15px;} h1, h2, h3, h4, h5, h6 {padding: .5em 0 .2em 0;font-weight: bold; font-style: normal; margin:0;} h1 {font-size: 1.75em;color:#333333;} h2 {font-size: 1.5em;} h3 {font-size: 1.25em;} h4 {font-size: 1em;} ul, ol{padding:0px; margin: 0;} p {padding: .75em 0; margin:0;} address {margin: .75em 0; font-style: normal;} a{cursor:pointer; outline:none;} a img {border: none;} em {font-style: italic;} strong{font-weight: bold;} form, fieldset {margin: 0;padding: 0;border: none;} input, button, select {vertical-align: middle;} .cleaner{margin:0; padding:0; width:0; height:0; overflow:hidden;clear:both;} #infobulle {color:black;position:absolute;border:2px solid #C68450;padding:10px;;width:300px;opacity:0.91;filter:alpha(opacity:91);background-color:#FFFDF2;} body.pinned .infobulle {cursor:pointer;} ul,li{list-style-position:inside;} /*encart no flash*/ #noflash {background-image:url(../images/encart_noflash.jpg);width:400px;height:146px;overflow:hidden;background-color:#000000;display:none; margin:auto;} #fermer_noflash {display:block;float:right;width:100px;height:30px;} #lien_adobe {clear:both;display:block;float:right;width:200px;height:50px;margin-top:45px;} html, body {} body {background-color:#949494;} a, a:visited, a:hover, a:active {color:#4EA2FA;text-decoration:none;} .sprite {background-image:url(/images/tv3v/sprite.png);background-repeat:no-repeat;} .lo {font-family:nonserif;} h1.lo, h3.lo, h2.lo{font-family:Arial,Verdana, sans-serif;color:#333333} #bgDegradeTop{background:url(/images/tv3v/bkg_degrade-gris.jpg) repeat-x;height:590px;width:100%;position:absolute;top:0;left:0;z-index:-1} /* ------------------------ BOUTON ---------------------- */ .input_form_gauche{background-position:-300px -35px;width:8px;height:26px;display:inline-block;vertical-align:bottom;} .input_form{background:url(/images/tv3v/btn_mid.png);height:22px;display:inline-block;vertical-align:top;padding-top:4px;color:#fff;} .input_form:hover{color:#fff;} .input_form_droite{background-position:-310px -35px;;width:8px;height:26px;display:inline-block;vertical-align:bottom;} .input_form_gauche_red{background-position:-350px -35px;width:8px;height:26px;display:inline-block;vertical-align:bottom;} .input_form_red{background:url(/images/tv3v/btn_rouge_mid.png);height:20px;display:inline-block;vertical-align:top;padding-top:6px;} a.input_form_red{color:#fff;} .input_form_red:hover{color:#fff;} .input_form_droite_red{background-position:-360px -35px;;width:8px;height:26px;display:inline-block;vertical-align:bottom;} /* ------------------------ HEADER ---------------------- */ #header {background:url(/images/tv3v/header_tv3v.png);position:relative;height:141px;width:982px;margin:0 auto;} /*#halo_header {position:absolute;top:0;left:0;width:100%;height:145px;background:url(/images/tv3v/halo_header_tv3v.gif) top center no-repeat;}*/ #header .main_page {margin:auto;width:960px;position:relative;} #header #logo_tv3v {width:147px;height:113px;position:absolute;top:10px;left:20px;text-indent:500px;white-space:nowrap;overflow:hidden;display:block;background-position:0 0;} #header #baseline {position:absolute;top:55px;left:190px;width:400px;text-transform:uppercase;font-size:20px;color:#C10000;} /* TODO : mettre la bonne font */ #header #logo_laregie {width:105px;height:60px;position:absolute;top:15px;right:180px;text-indent:500px;white-space:nowrap;overflow:hidden;display:block;} #header #logo_comcom {width:110px;height:64px;position:absolute;top:15px;right:55px;text-indent:500px;white-space:nowrap;overflow:hidden;display:block;} #header #frm_recherche {position:absolute;width:149px;padding:5px;top:98px;;left:785px;text-align:left;height:22px;background-position:-610px 0;} #header #field_recherche {width:115px;vertical-align:middle;} #header #search_submit {display:none;} #header #btn_search_submit {position:absolute;top:3px;right:5px;vertical-align:middle;width:26px;height:26px;text-indent:500px;white-space:nowrap;overflow:hidden;display:inline-block;background-position:-321px -36px} /* #header #main_menu {width:630px;position:absolute;top:110px;left:160px;font-family:yorkville} #header #main_menu a {display:inline-block;white-space:nowrap;padding:0 0 1px 0;margin:0 10px;color:#333333;font-size:18px;border-bottom:10px hidden;} #header #main_menu a:hover{color:#DF484F;} #header #main_menu a.actif{border-bottom:10px solid #DF484F;color:#DF484F;} */ /*----------------------------- MENU -------------------------*/ #header #main_menu {width:630px;position:absolute;top:100px;left:190px;font-family:yorkville} .sprite_menu{background:url(/images/tv3v/sprite_menu-tv3v.png);margin-right:5px;} #header #main_menu #menu_56{display:block;float:left;background-position:0 -36px;width:104px;height:32px;} /* nos videos */ #header #main_menu #menu_56:hover{display:block;float:left;background-position:0 -72px;} /* nos videos */ #header #main_menu #menu_56.actif{display:block;float:left;background-position:0 0;} /* nos videos */ #header #main_menu #menu_55{display:block;float:left;background-position:-112px -36px ;width:112px;height:32px;} /* presentation */ #header #main_menu #menu_55:hover{background-position:-112px -72px;} /* nos videos */ #header #main_menu #menu_55.actif{background-position:-112px 0;} /* nos videos */ #header #main_menu #menu_57{display:block;float:left;background-position:-232px -36px;width:99px;height:32px;} /* infographie */ #header #main_menu #menu_57:hover{background-position:-232px -72px;} /* infographie */ #header #main_menu #menu_57.actif{background-position:-232px 0;} /* infographie */ #header #main_menu #menu_58{display:block;float:left;background-position:-339px -36px;width:151px;height:32px;} /* nos programmes */ #header #main_menu #menu_58:hover{background-position:-339px -72px;} /* nos programmes */ #header #main_menu #menu_58.actif{background-position:-339px 0;} /* nos programmes */ #header #main_menu #menu_59{display:block;float:left;background-position:-498px -36px;width:100px;height:32px;} /* newsletter */ #header #main_menu #menu_59:hover{background-position:-498px -72px;} /* newsletter */ #header #main_menu #menu_59.actif{background-position:-498px 0;} /* newsletter */ #main_content {margin:auto;width:922px;padding:0 30px;padding-top:2px;background:url(/images/tv3v/bkg_ombre-bordure-page.png);} /* ------------------------ CONTENU PRINCIPAL ---------------------- */ #main_col {float:left;padding:10px 0px;margin-bottom:-0px;;width:600px;} #trailer {padding-bottom:10px;} #trailer a {color:#C30000;text-decoration:underline;} #trailer span {color:#C30000;} /* TODO : définir des styles spécifiques de la publications dans #main_col : ex, couleur des liens, interligne, margin des paragraphg */ /* -------- module vod ------ */ #nom_current_emission {font-size:2em;padding-bottom:3px;color:white;} /* TODO : vérifier la taille */ #titre_video {font-size:1.3em;color:#333;padding-top:8px;} #desc_video {color:#333;} #socials {} #socials iframe, #socials div {vertical-align:baseline;} /* -------- Colonne de droite ------ */ #right_col {width:300px;float:right;} /* TODO : Définir correctement tous les blocs de la colonne de droite */ #box_alerte_video {margin-top:-2px;position:relative;height:164px;background-position: -297px -81px;} #box_alerte_video .title {font-size:1.3em;padding:5px 0;} #box_alerte_video .desc {width:175px;padding-left:10px;float:left;} #box_alerte_video .btn {} #box_contacter {margin-top:10px;position:relative;height:93px;background-position: -300px -245px;margin-bottom:10px;} #box_contacter .title {font-size:1.3em;padding:5px 0;} #box_contacter .desc {width:150px;padding-left:10px;float:left;} #box_contacter .btn {} #lien_grille_prog {display:block;background-position: -10px -505px;height:44px;width:236px} #lien_recette {display:block;float:left;background-position: -7px -558px;height:46px;width:164px;margin-right:15px;margin-top:-10px;} #lien_correspondant {display:block;float:left;background-position: -10px -617px;height:37px;width:213px;margin-top:-5px;} /* -------- Dernieres vidéos + Liste Vidéo ------ */ #choix_emission {background:url(/images/tv3v/bkg_ombre_menu-actus-mag.png);height:42px;margin:auto;width:922px;padding:0 30px;} /*#choix_emission .main_page {margin:auto;width:960px;}*/ #choix_emission a.elemGauche {display:block;float:left;height:29px;padding-top:7px;color:#333;font-size:1.5em;background:url(/images/tv3v/ss_menu.png) repeat-x;margin-top:6px;} /* TODO : Définir la bonne taille de font */ #choix_emission a.elemGauche:hover {color:#c20000;} #choix_emission a.elemGauche.actif {color:#fff;background:url(/images/tv3v/ss_menu_actif.png) repeat-x} #choix_emission .left_ss_menu{display:block;float:left;background-position:-573px -376px ;width:9px;height:36px;margin-top:6px;} #choix_emission .right_ss_menu{display:block;float:left;background-position: -591px -376px;width:9px;height:36px;margin-right:10px;margin-top:6px;} #choix_emission .left_ss_menu.actif{display:block;float:left;background-position:-573px -340px ;width:9px;height:36px;margin-top:6px;} #choix_emission .right_ss_menu.actif{display:block;float:left;background-position: -591px -340px;width:9px;height:36px;margin-right:10px;margin-top:6px;} #list_videos {padding:0;} #list_videos .main_page {width:922px;padding:10px 30px;margin:auto;background:url(/images/tv3v/bkg_gris-fonce_ombre-bordure-page.png)} #list_videos #tab_videos {width:928px;border:0;} #list_videos #tab_videos td {vertical-align:top;margin:0px;padding:0px;border:0px;width:232px;text-align:center;} #dernieres_vids {padding:0;} #dernieres_vids .main_page{width:922px;padding:10px 30px;margin:auto;background:url(/images/tv3v/bkg_gris-fonce_ombre-bordure-page.png)} #dernieres_vids .tab_videos {width:928px;border:0;} #dernieres_vids .tab_videos td {vertical-align:top;margin:0px;padding:0px;border:0px;width:232px;text-align:center;} a.cell {display:block;width:210px;margin:auto;position:relative;text-align:left;color:white;} a.cell:hover {color:#C20000;} a.cell .preview_vid {width:206px;height:114px;margin:2px;} a.cell .overlay_vid {display:block;width:210px;height:118px;position:absolute;top:0px;left:0px;overflow:hidden;text-indent:300px;white-space:nowrap;background-position:-299px -340px;} a.cell:hover .overlay_vid {background-position:-299px -460px;} a.cell .ttl_vid {display:block;font-weight:bold;padding-top:4px;} a.cell .desc_vid {display:block;padding-top:2px;} #pagination {text-align:center;} #pagination a, #pagination span{display:inline-block;padding:4px;margin:0 3px;} #pagination a {color:#FFFFFF;} #pagination .inactif {color:#5B5B5B;} #pagination a.current {color:#c20000} /* ------------------------ WIDGETS ---------------------- */ #widgets {height:278px;font-size:14px;color:#3f3f3f;margin-top:0px;background:url(/images/tv3v/footer.png);width:940px;padding-top:10px;padding-left:21px;padding-right:21px;margin:0 auto;} #widgets .main_page {margin-left:9px;} #widgets .widget {width:306px;position:relative;float:left;} .widget #box_newsletter{width:298px;height:142px;padding:4px;position:relative;background:url(/images/tv3v/bloc_widget_newsletter.png) no-repeat top center;} .widget #box_newsletter form{margin-top:10px;} .widget #box_newsletter .picto {width:67px;height:76px;float:left;margin:-10px 0px 0px -8px;background:url(/images/tv3v/enveloppe.png) no-repeat;} .widget #box_partenariat{width:298px;height:90px;padding:4px;position:relative;background:url(/images/tv3v/bloc_widget_partenariat.png) no-repeat top center;} .widget #box_partenariat .part_ccNied{background-position: -160px -35px;height:72px;width:140px;float:right;} .widget #box_zone_couverture{width:298px;height:250px;padding:4px;position:relative;background:url(/images/tv3v/bloc_widget_equipe.png) no-repeat top center;padding-right:none;} .widget #box_zone_couverture .picto{width:45px;height:45px;margin:-20px auto -15px auto;background:url(/images/tv3v/pin.png) no-repeat;} /* TODO : Completer les CSS pour tous les widgets */ /* ------------------------ FOOTER ---------------------- */ #footer {margin:0;padding:0;background:url(/images/tv3v/footer-bkg.png) repeat-y;width:922px;padding:0 30px;margin:0 auto;margin-top:0;} /* TODO : decouper le fond et mettre la bonne couleur*/ #footer, #footer a {color:white;} #footer a:hover {text-decoration:underline} #footer .main_page {margin:auto;width:914px;padding-top:23px;} #footer .col_menu {width:182px;float:left;} #footer .col_menu .joinFacebook{display:inline-block;background-position: 0 -400px ;width:183px;height:45px;margin-top:-15px;margin-bottom:10px;} #footer .col_menu .contactUs{display:inline-block;background-position: 0 -460px ;width:183px;height:45px;} #footer .link_root_menu {font-size:1.2em;margin-top:-15px;} /* TODO : mettre la bonne taille de font */ #liens_bottom {text-align:right;padding:18px 0 5px;margin-top:-5px;} #liens_bottom img {vertical-align:middle;} /* ------------------------ DIVERS ---------------------- */ /* -------- dialog alerte videos : TODO : a définir completement -------- */ #subscribe_alerte {/* La taille de la box est définie en inline, sinon jquery ne les recupere pas */} #subscribe_alerte #desc_subsc {padding:5px 0 10px;} #subscribe_alerte #my_email_subsc_alerte {vertical-align:middle;} #subscribe_alerte #btn_subscribe_alerte {vertical-align:middle;color:#fff;} /** Jquery infield label **/ form p { position: relative;margin:0;padding:0;} form label.infield { position:absolute; top:2px; left:4px;color:#767676;font-size:13px;} /* ------------------------ COLORBOX ------------------------------------------*/ /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#fff;} #colorbox{} #cboxContent{margin-top:32px; overflow:visible;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{background:#000; padding:1px;} #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} #cboxLoadingOverlay{background:#000;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;} #cboxPrevious{background-position:0px 0px; right:44px;} #cboxPrevious.hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:22px;} #cboxNext.hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose.hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;} /* --------------------------------------- NOUVELLES MODIFICATIONS --------------------------------------- */ .txtPartage{display:inline-block;vertical-align:middle;margin-right:4px;} .partageMail{display:inline-block;background-position: -4px -130px;width:26px;height:26px;vertical-align:middle;margin-right:4px;} .partageFacebook{display:inline-block;background-position: -35px -130px;width:26px;height:26px;vertical-align:middle}