/* REMARQUE SUR LES DIMENSIONS DES BOITES :
 * Les vignettes font 120*115, 10 px (2*5) de border par vignettes . On fait les cases en 130*125. En 4x4.
 *  + 2*1 px de margin par case.
 * => Dimensions: 528 * 508 !
 */	
 

#screenIndex{
		display:block;
		position:relative; /* Pour résoudre un bug de ie6 : comme indexwrapper est relatif il faut aussi que son parent soit relatif pour que overflow::hidden marche bien */
} 

#wrapperAffichageIndex{
  background-image: url(../images/bg_DarkerGray.jpg);	/* MODIFIABLE */ 
}
 
#indexSliderContainer{
		position: relative; /* Pour centrage */
		display:none;
		top:0px;
		padding: 10px;	/* Permet d'avoir l'onglet sélectionné qui dépasse (sinon il est en dehors du cadre) */
		margin: auto;	/* Nécessaire pour le centrage horizontal */
		height: auto;
		text-align: center;
		
		width: 528px; /* Calculé précisemment = thumbsWrapperContainer::width + 2*thumbsWrapperContainer::border-size */
								  /* On doit mettre une valeur pour le centrage horizontal */
	}
	
/* Onglets */
ul.indexNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
	text-align:left;
}
ul.indexNavigation li {
  	display: inline;
	margin: 0px 2px 0px 0px;
	padding:0px;	
	
	background: #c8c4c1;/* MODIFIABLE - même que .thumbBox::border-color conseillé */
	-moz-border-radius: 2px 2px 0px 0px; /* MODIFIABLE */
}

/* Onglet de navigation */
ul.indexNavigation a {  /* C'est sur le *lien* que s'applique le style. le padding top ne n'a pas le même
						   					effet visuel sour firefox et sou ie (sous firefox l'onglet devient un poil plus haut)*/
    padding: 5px 6px 0px 6px;
    text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.9em;
	cursor:pointer;
	
    color: #000000; /* MODIFIABLE */
	
}

/* Onglet de navigation sélectionné */
.navTabSelected{
	text-transform: capitalize;
	font-weight: bold;
		 
	background-color: #c8c4c1; /* MODIFIABLE - même que ul.indexNavigation a::background conseillé */
	border: solid 2px white;   /* MODIFIABLE */
	-moz-border-radius: 3px 3px 0px 0px; /* CALCULE =  ul.indexNavigation li::radius + 1*/
}
	
	
/******* PANNEAUX COULISSANT ********/
/* Plein de div et containeurs en cascade */

/* Obligé de le rajouter car on ne peut pas mettre de border à thumbsWrapper */
.thumbsWrapperContainer{
	border: solid;

	width: 528px;			/* MODIFIABLE -> valeur à calculer précisemment */
	height: 508px;			/* MODIFIABLE -> valeur à calculer précisemment */
	border-width:5px;    	/* MODIFIABLE */
	border-color: #44443A;	/* MODIFIABLE */
}

	/* Contient les vignettes qui glissent. Cible de l'effet */
	/* Bug si border != 0. Le script ne les prend pas en compte lorsqu'il slide */
	.thumbsWrapper {
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		position:relative; /*Nécessaire sinon bug IE !*/
		/*clear: left;*/
		
		width: 528px;		/* MODIFIABLE -> valeur à calculer précisemment */
		height: 508px;		/* MODIFIABLE -> valeur à calculer précisemment */
		background: #000000;/* MODIFIABLE */
	}
	
	/* Le container qui scrolle */
	.scrollContainer{
		
		width: 528px;		/* MODIFIABLE -> valeur à calculer précisemment */
		height:508px;		/* MODIFIABLE -> valeur à calculer précisemment */
	}
	
	/* Panneau (ie 1 page) dans le container qui scrolle */
	.scrollContainer div.slidingPanel {
		float:left;
		position:relative;  /*Nécessaire sinon bug IE !*/
		
		background-image:   url(../images/BrushedMetal_2.jpg );	/* MODIFIABLE */
  		width: 528px;		/* MODIFIABLE -> valeur à calculer précisemment */
	}
	
	/* Un containeur de vignette */
	.thumbBox{ 
		float:left; /* Nécessaire pour que les div se placent les uns à coté des autres */
		border:solid;
		
		width:130px;		 /* MODIFIABLE -> valeur à calculer précisemment */
		height:125px;		 /* MODIFIABLE */
		border-width:1px;	 /* MODIFIABLE */
		border-color:#EEEEEE;/* MODIFIABLE */
		background:transparent;	 /* MODIFIABLE */
	}
	
	/* Une vignette */
	.thumbBox img {
		position:relative;
		cursor:pointer;	
		
		border: 5px solid #191919;	/* MODIFIABLE */	
	}
	
	.thumbBox img:hover  {
		
		border-color:white;	/* MODIFIABLE */	
	}

/******* Titre *****/
div#indexTitle{
	width:50px;							/* MODIFIABLE */
	border:solid;						/* MODIFIABLE */
	border-width: 0px 0px 0px 0px;	 	/* MODIFIABLE */
	border-color:white;					/* MODIFIABLE */
	color:white;						/* MODIFIABLE */
	font-size:2em; 						/* MODIFIABLE */
	line-height:0.8em;					/* MODIFIABLE */
	font-family: font-family: Georgia, "DejaVu Serif", Norasi, serif; 	/* MODIFIABLE */
	font-variant: small-caps;			/* MODIFIABLE */
	background-image: url(../images/LeftZone-DarkPaper.jpg);	/* MODIFIABLE */
}