/* GÈnÈral */

body { 
   text-align:center; 
   font-family: Arial, Verdana, sans-serif; 
   font-size:76%; 
   letter-spacing:0.05em; 
}


#contenu span.image_verticale img{ 
   display : block; 
   position:absolute;
   left: 20%;
   height: 560px;
}

#contenu span.image_horiz img{ 
   display : block; 
   position:absolute;
   left: 1.5%;
   width: 650px;
}

#contenu span.image_square img{ 
   display : block; 
   position:absolute;
   left: 10%;
   height: 560px;
   
}

/* The containing box for the gallery. */
#contenu { 
    position:relative; 
    width:800px; 
    height:600px; 
    margin:5px auto 0 auto; 
    border:1px solid #aaa;
    padding: 10px 5px 10px 10px;
    background:url(../img/moy/set/home.jpg) no-repeat ;
}

/* Removing the list bullets and indentation */ 
#contenu ul { 
    padding:0; 
    margin:0; 
    list-style-type:none; 
}

/* Remove the images and text from sight */
#contenu a.gallery span { 
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff; 
}

/* Adding the thumbnail images */ 
#contenu a.gallery, #contenu a.gallery:visited { 
    display:block; 
    color:black; 
    text-decoration:none; 
    border:1px solid #aaa;
    text-align:center; 
    cursor:default; 
}

#contenu a.slide1 { 
    background:url(../img/sm/set/01.jpg);
    height: 100px;
    width: 100px;
    margin: 0px 0px 0px 0px;
    /* margin:1px 2px 1px 15px;*/
}
#contenu a.slide2 { 
   background:url(../img/sm/set/02.jpg);
   height: 76px;
   width: 100px;
    /* margin:20px 2px 1px 2px;*/
}
#contenu a.slide3 { 
   background:url(../img/sm/set/03.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
    /* margin:15px 2px 1px 2px; */
}
#contenu a.slide4 { 
    background:url(..//img/sm/set/04.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
    /* margin:10px 2px 1px 2px; */
}
#contenu a.slide5 { 
   background:url(..//img/sm/set/05.jpg);
   height: 76px;
   width: 100px;
   /* margin:5px 2px 1px 2px; */
}
#contenu a.slide6 { 
   background:url(..//img/sm/set/06.jpg);
   height: 76px;
   width: 100px;
   /* margin:0px 2px 1px 2px; */
}
#contenu a.slide7 { 
   background:url(..//img/sm/set/07.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
   /* margin:0px 2px 1px 2px; */
}
#contenu a.slide8 { 
   background:url(..//img/sm/set/08.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;   
   /* margin: 0px 2px 1px 2px; */
}
#contenu a.slide9 { 
   background:url(..//img/sm/set/09.jpg);
   height: 100px;
   width: 100px;
   margin: 0px 0px 0px 0px;
}
#contenu a.slide10 { 
   background:url(..//img/sm/set/10.jpg); 
    height: 76px;
    width: 100px;
   margin: 0px 0px 0px 0px;
}

#contenu a.slide11 { 
    background:url(../img/sm/set/11.jpg);
    height: 100px;
    width: 100px;
    /* margin:20px 2px 1px 2px;*/
}
#contenu a.slide12 { 
   background:url(../img/sm/set/12.jpg);
    height:76px;
    width:100px;
    /* margin:15px 2px 1px 2px; */
}
#contenu a.slide13 { 
    background:url(..//img/sm/set/13.jpg);
    height: 76px;
    width: 100px;
    /* margin:10px 2px 1px 2px; */
}
#contenu a.slide14 { 
   background:url(..//img/sm/set/14.jpg);
   height: 76px;
   width: 100px;
   /* margin:5px 2px 1px 2px; */
}
#contenu a.slide15 { 
   background:url(..//img/sm/set/15.jpg);
   height: 100px;
   width: 100px;
   /* margin:0px 2px 1px 2px; */
}
#contenu a.slide16 { 
   background:url(..//img/sm/set/16.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
   /* margin:0px 2px 1px 2px; */
}
#contenu a.slide17 { 
   background:url(..//img/sm/set/17.jpg);
   height: 76px;
   width: 100px;
   /* margin: 0px 2px 1px 2px; */
}
#contenu a.slide18 { 
   background:url(..//img/sm/set/18.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
}
#contenu a.slide19 { 
   background:url(..//img/sm/set/19.jpg); 
   height: 76px;
   width: 100px;
}
#contenu a.slide20 { 
   background:url(..//img/sm/set/20.jpg); 
   height: 76px;
   width: 100px;
}

#contenu a.slide21 { 
    background:url(../img/sm/set/21.jpg);
    height: 100px;
    width: 100px;
    /* margin:20px 2px 1px 2px;*/
}
#contenu a.slide22 { 
   background:url(../img/sm/set/22.jpg);
    height:76px;
    width:100px;
    /* margin:15px 2px 1px 2px; */
}

#contenu a.slide24 { 
   background:url(..//img/sm/set/24.jpg);
   height: 76px;
   width: 100px;
   /* margin:5px 2px 1px 2px; */
}
#contenu a.slide25 { 
   background:url(..//img/sm/set/25.jpg);
   height: 76px;
   width: 100px;
   /* margin:0px 2px 1px 2px; */
}
#contenu a.slide26 { 
   background:url(..//img/sm/set/26.jpg);
   height: 76px;
   width: 100px;
   /* margin:0px 2px 1px 2px; */
}
#contenu a.slide27 { 
   background:url(..//img/sm/set/27.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
   /* margin: 0px 2px 1px 2px; */
}
#contenu a.slide28 { 
   background:url(..//img/sm/set/28.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
}
#contenu a.slide29 { 
   background:url(..//img/sm/set/29.jpg);
   height: 100px;
   width: 76px;
   margin: 0px 0px 0px 10px;
}   
/* set the size of the unordered list to neatly house the thumbnails */ 
#contenu ul {
    border:1px solid #aaa;
    width:120px; 
    height:600px;
    overflow-x: hidden;
    overflow-y: scroll;

}

#contenu li { 
    float:left;
    /*height: 80px;*/
    padding-top: 5px;
    padding-left: 2px;
}

/* move the thumbnails into the correct position */ 
#contenu ul { 
    margin:5px; 
    float:right; 
} 

/* change the thumbnail border color */ 
#contenu a.gallery:hover { 
    border:1px solid #fff; 
} 

/* styling the :hover span */ 
#contenu a.gallery:hover span { 
    padding: 10 10 10 10;
    position:absolute; 
    width:670px; 
    height:600px; 
    top:10px; 
    left:10px; 
    color:#000; 
    background:#eee; 
}

/* styling the text for protrait pictures for it to become visible */ 
#contenu a.gallery:hover img { 
    border:1px solid #fff; 
    float:left; 
    margin-right:5px; 
}

/* style the middle portrait images to float right within their s so that the text will then appear on the left */
#contenu a.slideb:hover img, #contenu a.slidei:hover img { 
    float:right; 
}