@charset "UTF-8";
/* CSS Document */


/* CSS modifiés */
#subheader1 { height: 43px; }
#subheader2 { margin-top: 12px }
#subheader2 #descriptif { font-size: 1.6em; font-weight: bold; color: #333 }
#subheader2 #descriptif .kilometrage { font-size: 0.9em; color: #333333 }
#subheader2 #descriptif strong { text-transform: none; }
#subheader2 #descriptif strong, #subheader2 #descriptif em { color: #333; }
#subheader2 #stageAndDate { margin-top: -5px; margin-left: 10px; float: right; color: #333333 }
#subheader2 #stageAndDate .date { color: #333333; font-size: 1.3em; margin-left: 11px }





/* CSS créés */
.bleu { color: #007cbc }
.rouge { color: #e00202 }

#cartesGeo { padding: 10px 5px 4px 4px }
#cartesGeo #traces { width: 578px; height: 395px; background: url(../images/fond_carte_NB.jpg) no-repeat; float: left }
#cartesGeo #traces img { position: absolute }
#cartesGeo #traces div.ville { position: absolute; font-size: 1.4em; padding: 6px 13px; background: #000; text-transform: uppercase }
#cartesGeo #traces div.ville a { color: #fff; text-decoration: none }
#cartesGeo #cible { width: 359px; height: 395px; background: url(../images/fond_carte_jaune.jpg) no-repeat; float: right }
#cartesGeo #cible span { text-transform: uppercase; font-size: 2.2em; font-weight: bold; margin: 8px 10px 10px 25px; display: block }
#cartesGeo #cible .cible { position: absolute; margin: 285px 0 0 270px }

/* CSS ToolTips sur carte Traces */
.tooltip_traces { position: absolute; min-width: 140px; padding: 17px 0 0 0; margin: 30px 44px; overflow: auto }
.tooltip_traces div { background: #000; padding: 10px 10px 10px 10px }
.tooltip_traces h2 { color: #FFF; text-transform: uppercase; font-size: 1.2em }
.tooltip_traces p { color: #fbd52c; font-size: 1.2em; margin: 7px 0 10px 0 }
.tooltip_traces a { color: #fff; font-size: 1.2em; }
.tooltip_traces a:hover { color: #fbd52c; }

.zone #trajet { height: 38px; background: url(../images/fond_menu_trajet.jpg) right no-repeat; margin-left:-3px }
.zone #trajet img { float: left }
.zone #trajet ul { margin: 0; padding: 9px 0 0 0; float: left; margin-left: 3px }
.zone #trajet ul li { font-size: 1.5em; text-transform: uppercase; padding: 9px 8px 8px 8px; display: inline; border-left: 1px solid #FFF; background: url(../images/fond_menu_trajet_jaune.jpg) repeat-x; margin-left: -3px }
.zone #trajet ul li.dprt { background: url(../images/fond_menu_trajet_bleu.jpg) repeat-x; border-left: none;}
.zone #trajet ul li.arrv { background: url(../images/fond_menu_trajet_rouge.jpg) repeat-x;}
.zone #trajet ul li a { text-decoration: none; color:#FFF; padding: 8px 0 0 0; }
.zone #trajet ul li a:hover { background: url(../images/cursor.png) center top no-repeat }
.zone #trajet ul li a.current { background: url(../images/cursor.png) center top no-repeat }


.zone #info1,
.zone #info2,
.zone #info3 { float: left; display: none }

/* init #info1 */
.zone #info1 { display: block }

.zone div.context_ville #context_ville1,
.zone div.context_ville #context_ville2,
.zone div.context_ville #context_ville3,
.zone div.context_ville #context_ville4,
.zone div.context_ville #context_ville5,
.zone div.context_ville #context_ville6 { display: none }

/* init #contexte_ville1 */
.zone div.context_ville #context_ville1 { display: block }

/* init Sur le trajet */
.zone div.info_dprtmt { display: none }
.zone #infos_dprtmt1 { display: block }
.zone .trajet { display: none }
.zone #dprtmt_ville0 { display: block }
.zone #dprtmt1_ville0 { display: block }
.zone #dprtmt2_ville0 { display: block }
.zone #dprtmt3_ville0 { display: block }


.zone #ville { margin: 0px 0 0 1px; }
.zone #ville div { float: left; font-size: 1.6em; text-transform: uppercase; background: url(../images/ville_fond_gris_left.jpg) no-repeat; margin-right: 5px }
.zone #ville div:hover { background: url(../images/ville_fond_jaune_left.jpg) no-repeat; }
.zone #ville div.current { background: url(../images/ville_fond_jaune_left.jpg) no-repeat; }
.zone #ville div a { padding: 5px 13px 10px 13px; display: block; color: #FFF; text-decoration: none; background: url(../images/ville_fond_gris_right.jpg) top right  no-repeat; font-size: 0.8em; font-weight: bold }
.zone #ville div:hover a { background: url(../images/ville_fond_jaune_right.jpg) top right  no-repeat; color: #000; }
.zone #ville div.current a { background: url(../images/ville_fond_jaune_right.jpg) top right  no-repeat; color: #000; }
.zone #ville span.ville { display: block; float:left; background: #000 url(../images/ville_cursor_noir.jpg) right no-repeat; color: #FFF; padding: 3px 23px 2px 13px; font-size: 1.6em; }

.zone div.info_dprtmt { margin: 5px 0 0 1px; }
.zone div.info_dprtmt #villes { clear: both; }
.zone div.info_dprtmt #villes div { font-size: 1.6em; text-transform: uppercase; background: url(../images/ville_fond_gris_left.jpg) no-repeat; margin-right: 5px; float: left}
.zone div.info_dprtmt #villes div:hover { background: url(../images/ville_fond_jaune_left.jpg) no-repeat; }
.zone div.info_dprtmt #villes div.current { background: url(../images/ville_fond_jaune_left.jpg) no-repeat; }
.zone div.info_dprtmt #villes div a { padding: 5px 13px 10px 13px; display: block; color: #FFF; text-decoration: none; background: url(../images/ville_fond_gris_right.jpg) top right  no-repeat; font-size: 0.8em; font-weight: bold }
.zone div.info_dprtmt #villes div:hover a { background: url(../images/ville_fond_jaune_right.jpg) top right  no-repeat; color: #000; }
.zone div.info_dprtmt #villes div.current a { background: url(../images/ville_fond_jaune_right.jpg) top right  no-repeat; color: #000; }

.zone #traversee div.dprtmt div { background: #999 ; color: #FFF; padding: 3px 13px 2px 13px; margin-right: 10px; float: left; font-size: 1.6em; font-weight: bold }
.zone #traversee div.dprtmt div a { color: #FFF; text-decoration: none }
.zone #traversee div.dprtmt div a:hover,
.zone #traversee div.dprtmt div:hover,
.zone #traversee div.dprtmt div.current { background: #fbd52c; }
.zone #traversee div.dprtmt div:hover a,
.zone #traversee div.dprtmt div.current a { color: #000; }



.zone #infos_ville { clear: both; margin: 0px 0 0 0 }

.zone #infos_ville div.diapo_ville { float: left; width: 553px; height: 366px; border: 3px solid black; margin-left: 0px } 
.zone #infos_ville div.diapo_ville img#player { position: absolute; z-index: 20; margin: 0px; border-top: 2px solid #000; border-right: 2px solid #000 }
.zone #infos_ville div.diapo_ville #slideshow { position:relative; height:366px; }
.zone #infos_ville div.diapo_ville #slideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 366px; background-color: #FFF; }
.zone #infos_ville div.diapo_ville #slideshow DIV.active { z-index:10; opacity:1.0; }
.zone #infos_ville div.diapo_ville #slideshow DIV.last-active { z-index:9; }
.zone #infos_ville div.diapo_ville #slideshow DIV IMG { display: block; border: 0; margin-bottom: 0px;   }

.zone #infos_ville div.enbref { float: left; width: 440px; background: #fbd52c url(../images/Titre_EnBref.jpg) no-repeat; font-size: 1.2em; margin: 13px 0 0 1px }
.zone #infos_ville div.enbref .content { padding: 41px 15px 0 15px; }
.zone #infos_ville div.enbref .link { background: url(../images/footer_EnBref.jpg) #000 bottom no-repeat; padding: 2px 15px 18px 15px; margin: 6px 0 0 0; color: #FFF;   }
.zone #infos_ville div.enbref .link a{ color: #FFF; text-decoration: none }
.zone #infos_ville div.context_ville { float: right; width: 400px; color: #333; text-align: left; line-height: 1.7em; font-size: 1.1em }
.zone #infos_ville div.context_ville img.logo { float: left; margin-right: 8px }
.zone #infos_ville div.context_ville h3 { margin: 0; color: #000; font-size: 1.8em; text-transform: uppercase }
.zone #infos_ville div.context_ville h4 { margin: 5px 0 0 0; color: #999; font-size: 1.8em; }
.zone #infos_ville div.context_ville h5 { margin: 5px 0 0 0; color: #000000; font-size: 1.3em; }
.zone #infos_ville div.context_ville p { text-align:justify; margin: 20px 0 0 0; font-size: 1em }
.zone #infos_ville div.context_ville div.suivant { border-top: 1px solid #fbd52c; border-bottom: 1px solid #fbd52c; padding: 10px 0 10px 0; text-transform: uppercase; font-size: 1.2em; margin: 15px 0 0 0; text-align: right; font-weight: bold }
.zone #infos_ville div.context_ville div.suivant a { color: #999; text-decoration: none }

#intro_parcours { font-size: 1.2em; padding: 10px 15px 0 5px; background: #FFF; }
.zone #carteParcours { width: 475px; height: 545px; border: 3px solid #fbd52c; background: url(../images/fond_carte_parcours.jpg) no-repeat; float: left }
.zone #carteParcours span { text-transform: uppercase; font-size: 2.3em; font-weight: bold; margin: 5px 10px 10px 18px; display: block }
.zone #carteParcours img { width:12px; height: 12px; position: absolute; }

/* CSS ToolTips sur carte Parcours */
.tooltip_parcours { position: absolute; min-width: 140px; padding: 17px 0 0 0; margin: 30px 44px; overflow: auto }
.tooltip_parcours div { background: #000; padding: 10px 10px 10px 10px }
.tooltip_parcours h2 { color: #fbd52c; text-transform: uppercase; font-size: 1.1em }
.tooltip_parcours p { color: #fff; font-size: 1.5em; margin: 3px 0 3px 0; font-weight: bold }
.tooltip_parcours span { color: #fbd52c; font-size: 1.2em; margin: 0px 0 3px 0; display: block }
.tooltip_parcours a { color: #fff; font-size: 1.2em; }
.tooltip_parcours a:hover { color: #fbd52c; }

.zone #etapes { width: 323px; height: 560px; float: right; overflow: hidden; position: absolute; margin: 0 0 0 490px }
.zone #etapes .etapes { height: 535px }
.zone #etapes .etapes div { background: url(../images/bg_etapes.jpg) repeat-x; height: 105px; border-bottom: 2px solid #fbd52c; }
.zone #etapes .etapes div:hover { background: #000; height: 105px; border-bottom: 2px solid #fbd52c }
.zone #etapes .etapes div img { float: left; margin: 10px; border: 2px solid #fff }
.zone #etapes .etapes div h2 { background: none; border: none; margin: inherit; font-size: 1.2em; }
.zone #etapes .etapes div:hover h2 { color: #fbd52c; }
.zone #etapes .etapes div h3 { color: #fff; margin: inherit; font-size: 1.2em; margin-top: -3px }
.zone #etapes .etapes div span { color: #fbd52c; font-size: 1.2em; display: block; margin-top: 3px }
.zone #etapes .etapes div a { color: #fff; font-size: 1.2em; display: block; margin-top: 3px }
.zone #etapes div.scrollering { background: #fbd52c; width: 308px; height: 22px; margin-top: -5px; clear: both}
.zone #etapes div.scrollering a.scrollmedown { background: url(../images/scrollDown.gif) no-repeat 0 5px  ; float: left}
.zone #etapes div.scrollering a.scrollmedown:hover { background: url(../images/scrollDown.gif) no-repeat 0 -13px ;}
.zone #etapes div.scrollering a.scrollmeup { background: url(../images/scrollUp.gif) no-repeat 0 5px  ; float: right}
.zone #etapes div.scrollering a.scrollmeup:hover { background: url(../images/scrollUp.gif) no-repeat 0 -13px ;}

/* CSS Scroller */
.jScrollPaneContainer { position: relative;overflow: hidden;z-index: 100; }
.jScrollPaneTrack { display: none; }
.jScrollPaneDrag { display: none; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }