@import "theme.less";

#photos {
padding : 0;
margin : 0;
list-style : none;
position : relative;  
width : 890px;	/* largeur du slide-show */
height : 660px;	/* hauteur du slide-show */
margin : auto;
border : 10px solid @color_border;	/* bordure du slide-show */
background : @color_wrapper_background;	/* couleur de fond du slide-show */
}

#photos li.sets {
width : 890px;	/* largeur du slide-show */
height : 660px;	/* hauteur du slide-show */
overflow : hidden;
position : relative;
}

#photos li.sets a.topa {
display : block;
width : 100px;	/* largeur des titres des catégories */
padding: 0 10px;
float : left;
border-right : 1px solid @color_wrapper_background;	/* séparation des catégories + couleur de fond du slide-show */ 
text-decoration : none;
color : @color_font_normal; 	/* couleur du titre des catégories */
font: bold 12px/35px arial;	/* police du titre des catégories */
background : @color_border;	/* couleur des bordures */
outline : 0;
}

#photos div {
width : 12000px;	/* nombre de catégories multiplié par 2000 */
height : 660px;	/* hauteur du slide-show */
margin-left : -6600px;	/* nombre de catégories multiplié par -1100 */
margin-top : 35px;
text-align : right;
}

#photos div span {
display:inline-block;
height:10px;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

#photos div ul {
width : 690px; /* largeur de la zone des miniatures */
height : 490px;	/* hauteur de la zone des miniatures */
background : @color_wrapper_background;	/* couleur de fond du slide-show */
padding : 50px 105px 105px 105px; /* position de la zone des miniatures */
display : inline-block;
margin : 0;
list-style : none;
position : relative;
z-index : 10;
}

#photos div ul li {
width : 170px;	/* taille des cases = taille miniature + 10 */
height : 170px;	/* taille des cases = taille miniature + 10 */
float : left;
}

#photos div ul li a {
display : block;
width : 166px; 		/* taille des cases = taille miniature + 6 */
height : 166px;		/* taille des cases = taille miniature + 6 */
border : 5px solid @color_wrapper_background;		/* couleur de fond du slide-show */
background : @color_border;		/* couleur des bordures = couleur du background des miniatures */
outline : 0;
}

#photos div ul li a img {
display : block;
border : 1px solid @color_border; /* bordures autour des miniatures + couleur des bordures */
margin : 0 auto;
}

#photos div ul li.hz a img {
margin-top : 2px; 	/* position des miniatures dans leur case */
}

#photos div ul li.vt a img {
margin-top : 2px;	/* position des miniatures dans leur case */
padding-right : 2px;	/* position des miniatures dans leur case */
}

#photos div ul li em {
display : block;
position : absolute;
left : -9999px;
top : 5px;
width : 890px;
height : 890px;
background : @color_wrapper_background;	/* couleur de fond du slide-show */
opacity:0; 
filter: alpha(opacity=0);
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

#photos div ul li.pointer1, #photos div ul li.pointer2, #photos div ul li.pointer3, #photos div ul li.pointer4, #photos div ul li.pointer5, #photos div ul li.pointer6{
position : absolute;
top : 0;
padding : 0;
height : 24px;
width : 60px;
z-index : 200;
}

#photos div ul.u1 li.pointer1 { 
left : 0;	/* décale la flèche indiquant la catégorie électionnée */
}

#photos div ul.u2 li.pointer2 {
left : 140px;	/* décale la flèche indiquant la catégorie électionnée */
}

#photos div ul.u3 li.pointer3 {
left : 235px;	/* décale la flèche indiquant la catégorie électionnée */
}

#photos div ul.u4 li.pointer4 {
left : 355px;	/* décale la flèche indiquant la catégorie électionnée */
}

#photos div ul.u5 li.pointer5 {
left : 480px;	/* décale la flèche indiquant la catégorie électionnée */
}

#photos div ul.u6 li.pointer6 {
left : 600px;	/* décale la flèche indiquant la catégorie électionnée */
}

#photos div ul li em img {
display : block;
margin : 0 auto;
border : 5px solid @color_border; /* bordure des images agrandies + couleur des bordures */
}

#photos div ul li.hz em img {
margin-top : 50px; /* marge supérieure des images hz agrandies */
}

#photos div ul li.vt em img {
margin-top : 19px;	/* marge supérieure des images vt agrandies */
}

#photos div ul li.hz em img.close { /* position du bouton "fermer" pour images hz */
border : 0;
position : absolute;
right : 50px;
top : 35px;
cursor : pointer;
margin : 0;
}

#photos div ul li.vt em img.close {	/* position du bouton "fermer" pour images vt */
border : 0;
position : absolute;
right : 225px;
top : 3px;
cursor : pointer;
margin : 0;
}

#photos li a.p1:hover ~ div span {
width:0px; 	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li a.p2:hover ~ div span {
width:900px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li a.p3:hover ~ div span {
width:1800px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li a.p4:hover ~ div span {
width:2700px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li a.p5:hover ~ div span {
width:3600px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li a.p6:hover ~ div span {
width:4500px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li a.p1:hover ~ div ul li a + em {
opacity:0; z-index:-1; filter: alpha(opacity=0);
}

#photos li a.p2:hover ~ div ul li a + em {
opacity:0; z-index:-1; filter: alpha(opacity=0);
}

#photos li a.p3:hover ~ div ul li a + em {
opacity:0; z-index:-1; filter: alpha(opacity=0);
}

#photos li a.p4:hover ~ div ul li a + em {
opacity:0; z-index:-1; filter: alpha(opacity=0);
}

#photos li a.p5:hover ~ div ul li a + em {
opacity:0; z-index:-1; filter: alpha(opacity=0);
}

#photos li a.p6:hover ~ div ul li a + em {
opacity:0; z-index:-1; filter: alpha(opacity=0);
}

#photos li ul.u1:hover ~ span {
width:0px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li ul.u2:hover ~ span {
width:900px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li ul.u3:hover ~ span {
width:1800px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li ul.u4:hover ~ span {
width:2700px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li ul.u5:hover ~ span {
width:3600px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li ul.u6:hover ~ span {
width:4500px;	/* =(largeur slide_show+10)*(n°catégorie -1) */
}

#photos li div ul li a:active {
outline:0;
}

#photos li div ul li a:active + em {
left:0; opacity:1; filter: alpha(opacity=100);
}

#photos li div ul li a:focus {
outline:0;
}

#photos li div ul li a:focus + em {
left:0; opacity:1; filter: alpha(opacity=100);
}