#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
/*---la ligne suivante change la distance entre la photo et la description (20px) et entre l'image et les fleches (50px). Si tu modifies les chiffres ici, tu dois ouvrir lightbox.js et modifier également les variables  borderSizeH (padding haut et bas) et  borderSizeL (padding gauche et droite), les nombres doivent être pareils à ce qu'il y a ici. Tu dois aussi changer le deuxième nombre du padding de la ligne 25 #imageData{padding:0 50px...) ---; */
#imageContainer{ padding: 20px 50px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
/*La ligne suivante change la grandeur de la surface réactive au survol de la souris pour la navigation. J'ai laissé un petit vide dans le centre. Si tu préfères que tout soit couvert, tu peux monter le pourcentage jusqu'à un maximum de 49%*/
#prevLink, #nextLink{ width: 35%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right;}
/*Dans les lignes suivantes, le % fait monter ou descendre la flèche, pour l'instant, elle est centrée avec 55%, tu dois changer cette valeur dans les quatre ligne qui suivent*/
#prevLink { background: url(../images/previous.gif) left 55% no-repeat; }
#nextLink { background: url(../images/next.gif) right 55% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/previous_blue.gif) left 55% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/next_blue.gif) right 55% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	;}

#imageData{	padding:0 50px; margin:0; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #fff; }