/* --- COULEURS --- */

/* couleurs de fond (propriétés background)
   couleurs du texte (propriété color). */

/* Général */
body {
	/*color: #000;*/
	background: #000;
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Global */
#global {
    border: 1px solid  #333333;	
	color: #666666 ; /* --> couleur du titre*/
	/*color: #6e6c20;*/ /* --> couleur du titre*/	
}

#globalslides {
	color: #666666 ; /* --> couleur du titre*/
	/*color: #6e6c20;*/ /* --> couleur du titre*/	
}

/* En-tête */
#entete { 
/*rien pour l'instant*/  
}

/* Navigation */
#navigation {
	background: #000 ;
}
#navigation a {
	color: #FFF;
	
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
	color: #424415;
}

/* Contenu principal ne contenant que les vignettes des photos */
#contenu {
	color: #363B29;		
}

#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Menu de navigation à gauche*/
#navigation {
	width: 190px;
	float: left; /* -> 5 */
}
#navigation ul {
	margin: 0;
	padding: 20px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%; /* -> 6 */
	padding: 6px 6px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}
/*menu de navigation avant-arrière et home*/
#detailNav {
	width: 100%;
	float:left;
	clear: both;
	text-align: center;
}

#detailNav ul {
	text-decoration:none;
	margin: 10px auto;
	text-align: center;
}

#detailNav ul li {
	text-decoration:none;
	display:inline;
	text-align: center;
	list-style: none;
	padding: 5px;	
}
.detailText {
  color: #666666 !important;
  /*background-color: inherit;*/
  text-decoration:none;
}

.detailText a {
  color: #666666 !important;
  /*background-color: inherit;*/
  text-decoration:none;
}

/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 30px 10px 0 10px;
}
#global {
	width: 90%;
	overflow: hidden; /* -> 2 */
	min-width: 700px;
	max-width: 1000px; /* -> 3 */
	margin-left: auto;
	margin-right: auto; /* -> 4 */
}

/* En-tête */
#entete {
	padding: 15px;
}

#entete h1 {
	margin: 0;
}

/*#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}*/

#tbl{
border:none;
}

/* Contenu */
#contenu {
	margin-left: 250px; /* -> 7 */
	padding: 10px 20px 10px 40px;
}

/* Contenu pour les slides show*/
#contenuslides {
	margin-left: 50px; /* -> 7 */
	padding: 10px 20px 10px 40px;
}

/* Mention de copyright */
#copyright {
	width: 230px;
	margin: 0;
	padding: 0 0 10px 20px;
	text-align: left;
}


td{
	text-align: center;
	/*vertical-align: bottom;*/
	font-family: Tahoma, Verdana, Arial, sans-serif;
	color:#FFFFFF;
}

/*vignettes verticales*/
.indexThumbnail {
	/*vertical-align: bottom;*/
	width: 95px;	
}

/*vignettes horizontales*/
.indexThumbnailh {	
	width: 130px;
	height:90px;
	/*vertical-align: middle;*/
}
.indexThumbnailhL {	
	width: 140px;
	height:79px;
	/*vertical-align: middle;*/
}

/*bordure de vignettes*/
img.thumbnail{
	border: 1px solid #333333;
}

/* --- NOTES ---

1.	Ce gabarit joue sur les couleurs de fond, images de fond et parfois
	les bordures des principaux blocs. On peut noter que:
	- Le bloc div#global a une couleur de fond claire. C'est cette couleur de
	  fond que l'on retrouve, visuellement, en fond de la colonne de contenu.
	- La colonne de gauche ainsi que la «bordure» qui sépare les deux colonnes
	  sont dessinées par une image de fond sur div#global, image qui se répète
	  en hauteur.
	- Le bloc d'en-tête masque complètement la couleur de fond et l'image de
	  fond de div#global. Supprimez la couleur de fond de div#entete pour le
	  vérifier.
	- Le retrait de 20px à droite de la colonne de droite est créé par... une
	  bordure sur div#global.
	- Une petite image de fond en haut à gauche de div#contenu vient compléter
	  l'effet visuel.

2.	On utilise overflow:hidden empêcher le dépassement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).

3.	La largeur du conteneur principal est fluide. div#global a une largeur de
	90%, c'est à dire une largeur qui dépend de l'espace disponible dans son
	conteneur, l'élément BODY. Concrètement, la largeur de div#global dépendra
	de la largeur de la fenêtre du navigateur.
	Ensuite, on «limite» les largeurs que peut prendre div#global à une
	fourchette allant de 700px (min-width) à 1000px (max-width). On évite
	ainsi d'avoir des lignes de texte horriblement longues dans les grandes et
	très grandes résolutions (1280px et plus).
	Notez que l'on peut utiliser cette technique de largeur fluide
	«intelligente» pour n'importe quel design fluide ou presque.

4.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

5.	C'est la propriété "float" qui nous permet de placer deux blocs
	côte-à-côte. Notez bien que l'élément flottant (ici, notre menu de
	navigation) doit être placé en premier dans le code HTML. Il est
	préférable de lui donner une largeur, ce que nous faisons ici avec un
	"width: xxx ;".

6.	Correction d'un bug d'Internet Explorer 6. Voir la dernière partie de
	http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-
	mise-en-forme-du-code-html
	Dans l'idéal, on placera ce correctif dans une feuille séparée, appelée
	via un commentaire conditionnel visant IE6.

7.	Les éléments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu principal forme
	une colonne distincte du menu, on lui donne donc une marge à gauche de
	220px.
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le précèdent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/