/* -------------------------------------------------------------------------- */
/* La <div id="cadreAccordeon"> fait exactement la hauteur des images.        */
/* On lui ajoute une bordure non fermee a gauche, les images ayant leur       */
/* bordure gauche.                                                            */
/* -------------------------------------------------------------------------- */
#cadreAccordeon
{
    position:absolute; 
    text-align:left;
    font-size:0.9em;

    padding-top:0px;
    padding-bottom:0px; 

    background:black;

    overflow:hidden;

    border-width:1px;
    border-style:solid;
    border-color:white;
    border-left-width:0px;

    cursor:pointer;
    top:0px;
    left:0px;
    
    visibility:hidden;
}

/* -------------------------------------------------------------------------- */
/* Il faut definir la position de la <div> de classe "lienAccordeon" pour    */
/* qu'elle soit bien placee dans le cadre. Quand l'image contenue bouge, le   */
/* lien bouge.                                                                */
/* -------------------------------------------------------------------------- */
.lienAccordeon
{
    position:absolute;
}

/* -------------------------------------------------------------------------- */
/* Fond de l'image : la div fait la taille de l'image, mais elle a une        */
/* bordure de 1px a gauche.                                                   */
/* Elle mesure donc 485px (largeur).                                          */
/* -------------------------------------------------------------------------- */
.fondImageAccordeon
{
    position:absolute;

    width:484px;

    border-left-width:1px;
    border-left-style:solid;
    border-left-color:white;

    background:black;
}

/* -------------------------------------------------------------------------- */
/* Les images font 484 pixels de large. La hauteur est fixee lors de l'appel  */
/* de la fonction initAccordeon(). La classe image permet de definir la       */
/* position de l'image. En javaScript, la classe se verra attribuer une       */
/* opacite totale si l'image est selectionnee, partielle sinon.               */
/* -------------------------------------------------------------------------- */
.imageAccordeon
{
    position:absolute;
}

/* -------------------------------------------------------------------------- */
/* Fond de la zone titre.                                                     */
/* -------------------------------------------------------------------------- */
.fondTitreAccordeon
{
    position:absolute;

    height:81px;
    width:484px;
    background:black;
    opacity:0.6;
    filter:alpha(opacity=60);       /* IE < 9 */ 
}

/* -------------------------------------------------------------------------- */
/* Zone titre (Texte qui monte sur l'image quand elle est survolee)           */
/* -------------------------------------------------------------------------- */
.titreAccordeon
{
    position:absolute;

    width:474px;
    padding-left:10px;
}

/* -------------------------------------------------------------------------- */
/* Ces classes ne sont utilisees que pour la presentation du texte du titre   */
/* et de celui de l'eventuel sous-titre. Elles ne sont pas utilisees en       */
/* javascript.                                                                */
/* -------------------------------------------------------------------------- */
.texteTitreAccordeon
{
    color:#f80;
    font-size:1.2em;
    letter-spacing:0.3em;    
}

/* -------------------------------------------------------------------------- */
/* Cette classe n'est utilisee que pour la presentation du sous-titre.        */
/* Elle n'est pas utilisee en javascript.                                     */
/* -------------------------------------------------------------------------- */
.texteSousTitreAccordeon
{
    color:#fff;
    font-size:0.8em;
}

/* -------------------------------------------------------------------------- */
/* div cachee qui contient le numero d'ecran et la langue courantetre.        */
/* Elle n'est pas utilisee en javascript.                                     */
/* -------------------------------------------------------------------------- */
#ecranLangue
{
    display:none;
}