/*Hack afin de pouvoir invoquer les events onmouseover et onmouseout sur les images et les div dans IE*/
.carouselVedetteContainer img, .carouselVedetteContainer div, .stepcarouselConcert img, .stepcarouselConcert div,
.stepcarouselBoutique img, .stepcarouselBoutique div, .stepcarouselArtistesVedette div, .stepcarouselArtistesVedette img, 
.carouselPhotosVideosItem div, .carouselPhotosVideosItem img,  .stepcarouselJAL img, .stepcarouselJAL div
{
    behavior: url("/css/ressources/IEFixes.htc");
}

/*Style du caroussel «En vedette»*/
.stepcarouselVedette
{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 628px; /*Width of Carousel Viewer itself*/
    height: 72px; /*Height should enough to fit largest content's height*/
    margin:0 auto 0 auto;
}
.stepcarouselVedette .belt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}
.stepcarouselVedette .panel
{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin:1px 4px 0 4px; /*margin around each panel*/
    width: 100px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    padding-top:6px;
}
.stepcarouselVedette .panel:hover, .stepcarouselVedette .panel.hover, .selectedCarouselVedettePanel
{
    background-image:url("../images/stepcarousel/flecheCarouselBlanc_haut.gif");
    background-repeat:no-repeat;
    background-position:center top; 
}

img.carouselVedetteImg
{
    border:1px solid #005c93;
    padding:1px;   
}

img.carouselVedetteImg:hover, .carouselVedetteContainer img.hover, .selectedCarouselVedetteImg
{
    border:1px solid #eaf1f7;     
    padding:1px;   
}

.carouselVedetteLegend
{
    text-align:center;
}

.carouselVedetteLegendTitle
{
    text-transform:uppercase;
    font-weight:bold;
}

/*Style de la fiche «En vedette»*/
#zoneEnVedette
{
    width:670px;
    margin:0 auto 0 auto;
    background-color:#000000;       
}

#ficheEnVedette
{
    width:668px;
    height:254px;
    color:#ffffff;
    background-color:#000000;
    border:1px solid #000000;
}

.enVedetteImage
{
    width:450px;
    height:254px;
    float:left;
}

#enVedetteInfos
{
    width:190px;
    padding:10px;
    float:left;     
}

#enVedetteInfos a
{
    background-color: Transparent;
    color: #ffffff;  
}

#enVedetteTitre
{
    font-size:14px;
    font-weight:bold;
}
#enVedetteLieu
{
    font-size:13px;
}
#enVedetteDates
{

}
#enVedetteDesc
{
    margin:10px 0 10px 0;
}
#enVedetteTexteDesc
{
    display:inline;
}
.enVedetteSuite img
{
    vertical-align: bottom; 
    margin: 0 0 0 5px;
    border: 0;    
}
#enVedetteLien
{
   width:140px;
   text-align:center;
   border:1px solid #005c93;   
   font-size:10px;
   font-weight:bold;
}
#enVedetteLien a
{
   color:#ffffff;
   text-decoration:none;
   background-color:#005c93;
   margin:1px;
   padding:2px; 
   display:block;   
}

/*Style des caroussels «En concert» et «Jazz à l'année»*/
.stepcarouselConcert, .stepcarouselJAL
{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 420px; /*Width of Carousel Viewer itself*/
    height: 72px; /*Height should enough to fit largest content's height*/
    margin:0 auto 0 auto;
}
.stepcarouselConcert .belt, .stepcarouselJAL .belt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}

.stepcarouselConcert .panel, .stepcarouselJAL .panel
{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin:4px; /*margin around each panel*/
    width: 100px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    padding-bottom:6px;
}
.stepcarouselConcert .panel:hover, .stepcarouselConcert .panel.hover, .selectedCarouselConcertPanel, 
.stepcarouselJAL .panel:hover, .stepcarouselJAL .panel.hover, .selectedCarouselJALPanel
{
    background-image:url("../images/stepcarousel/flecheCarouselBleu_bas.gif");
    background-repeat:no-repeat;
    background-position:center 57px;   
}

img.carouselConcertImg, img.carouselJALImg
{
    border:1px solid #eaf1f7;
    padding:1px;
}

img.carouselConcertImg:hover, .stepcarouselConcert img.hover, .selectedCarouselConcertImg, 
img.carouselJALImg:hover, .stepcarouselJAL img.hover, .selectedCarouselJALImg
{
    border:1px solid #6f95ac;
    padding:1px;
}

.carouselConcertLegend, .carouselJALLegend
{
    text-align:center;
    padding:0 10px 0 10px;
}

.carouselConcertLegendTitle, .carouselJALLegendTitle
{
    text-transform:uppercase;
    font-weight:bold;
}

/*Style du caroussel «Boutique»*/
.stepcarouselBoutique
{
    position:relative; /*leave this value alone*/
    overflow:scroll; /*leave this value alone*/
    width:580px; /*Width of Carousel Viewer itself*/
    height:160px; /*Height should enough to fit largest content's height*/
    margin:0 auto 0 auto;
}
.stepcarouselBoutique .belt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}

.stepcarouselBoutique .panel
{
    float:left; /*leave this value alone*/
    overflow:hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin:9px; /*margin around each panel*/
    width:87px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    /*padding-bottom:6px;*/
    padding:9px 0;
}
.stepcarouselBoutique .panel a
{
    color:#ffffff;
    font-size:0.9em;
}
.stepcarouselBoutique .panel p
{
    margin:7px 0 0 0;
    padding:0;
    text-align:center;
    width:87px;
}

.stepcarouselBoutique .panel:hover, .stepcarouselBoutique .panel.hover, .selectedCarouselBoutiquePanel
{
    background-image:url("/images/boutique/carouselBoutiqueSelectedArrow.gif");
    background-repeat:no-repeat;
    background-position:center 89px;   
}

img.carouselBoutiqueImg
{
    border:1px solid #000000;
    padding:1px;
}

img.carouselBoutiqueImg:hover, .stepcarouselBoutique img.hover, .selectedCarouselBoutiqueImg
{
    border:1px solid #283a44;
    padding:1px;
}

/*Style du caroussel «Artistes»*/
.stepcarouselArtistesVedette
{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 340px; /*Width of Carousel Viewer itself*/
    height: 221px; /*Height should enough to fit largest content's height*/
    margin:0 auto 0 auto; 
}
.stepcarouselArtistesVedette .belt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}
.stepcarouselArtistesVedette .panel
{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin:10px 0 0 0; /*margin around each panel*/
    width: 340px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
.carouselArtistesItem
{
    width:113px;
    height:102px;
    text-align:center;
    float:left;
    color:#ffffff;
    overflow:hidden;
}
.carouselArtistesItem a
{
    color:#ffffff;
}
.carouselArtistesItemLegende
{
    display:block;
    padding:0 5px 0 5px;
}
.carouselArtistesItem img
{
    border:1px solid #000000;
    padding:1px;
}
.carouselArtistesItem img:hover, .carouselArtistesItem img.hover
{
    border:1px solid #ffffff;
    padding:1px;
}

/*Style des caroussels «Photos et Vidéos»*/
.stepcarouselPhotosVideos
{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 440px; /*Width of Carousel Viewer itself*/
    height: 216px; /*Height should enough to fit largest content's height*/
    margin:0 auto 0 auto;
}
.stepcarouselPhotosVideos .belt
{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}
.stepcarouselPhotosVideos .panel
{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin:5px 0 0 0; /*margin around each panel*/
    width: 440px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
.carouselPhotosVideosItem
{
    width:146px;
    height:102px;
    text-align:center;
    float:left;
    overflow:hidden;
}

.carouselPhotosVideosThumbnail
{
    padding-bottom:6px;
}
.carouselPhotosVideosThumbnail:hover, .carouselPhotosVideosItem .carouselPhotosVideosThumbnail.hover
{
    background-image:url("/images/step_carousel/carouselConcertSelectedArrow.gif");
    background-repeat:no-repeat;
    background-position:center 57px;
}

.carouselPhotosVideosThumbnail img
{
    border:1px solid #eaf1f7;
    padding:1px;
}
.carouselPhotosVideosItemLegende
{
    padding:0 5px 0 5px;
}
.carouselPhotosVideosItem a
{
    color:#000000;
    font-weight:bold;
    font-size:0.85em;
}
.carouselPhotosVideosThumbnail img:hover, .carouselPhotosVideosThumbnail img.hover
{
    border:1px solid #6f95ac;
    padding:1px;
}