/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 09
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */
body {
	color: black;
	height: 720px;
	/*background: white;
	background-image:url(../images/fondEntete.gif);
	background-position:45% 10%;
	background-repeat: no-repeat;
	margin-bottom:20px;*/
	background:#b2865d;
	background-image: url(../images/FondKraft2.jpg);

}

a {
	color:  #6E5122;
}
a:hover, a:focus {
	color: #CCC;
}
strong {
	font-weight: bold;
}

/* Navigation */
#navigation {

		background-position: top;
		background-repeat: no-repeat;
		
		

		/*background: url(../images/fondLigne2.png);*/
	/*background: #FFF3DF;*/
	/*border:  solid 2px;*/

}
#navigation a {
	color: black;
	background: transparent;
	
}
#navigation a:hover, #navigation a:focus {
	/*background: white;*/

	color:#FC0;
}

/* Contenu principal */
#principal {
	color: #181A12;
	/*background: #FFF3DF;*/
	width: 510px;
	


}


#principal img{

	/*background: #FFF3DF;*/

	background-repeat:no-repeat;
	overflow: inherit;
	

}
/*#principal a {
	color: #332510;
}*/
#principal a:hover, #principal a:focus {
	color: #C00;
}
#principal strong {

}

/* Contenu secondaire */
#secondaire {

	background: transparent;

	
}






















/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 0px 30px;
}


#centre {
	/*height: 150px;*/
	height:auto;
	max-height: 100%;
	
	
	
}

/* En-tête */
#entete {
	padding: 30px 0 37px 0;
	height: 50px;
	z-index:20;
	margin-left:55px;

	 
	
}
#entete h1 {
	margin: 0;
	padding-top: 20px;
	font-size: 3em;
	padding-left: 17px;
	float: left;

}

#entete h2 {
	font-size:24px;
	margin-left:760px;
	padding-top:55px;

	
}
#entete h3 {
	font-size:3em;
	margin:0;
	padding:0;
	padding-top:20px;
	padding-left:9px;
	float: left;
}

#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Bloc central */
#centre {
	position: relative; /* Voir -> Note 1 */
	width: 100%;

}

/* Menu de navigation */
#navigation {
	position: absolute; /* -> 1 */
	top: 25px;

	width: 220px;
	z-index: 10;
	margin-left:0px;

}
#navigation ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
	text-align:center;
}
#navigation a {
	display: block;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.2;
	font-size: 1.3em;
	text-decoration: none;
	font-style: bold;
}

/* Contenu principal */
#principal {
	position: absolute; 
	margin-left: 240px; 
	padding:10px;
	background:url(../images/cadre.png) no-repeat;
	height: 515px;
	width: 510px;

}

#principal img{
	
	max-width: 80%;

}

#un {
	height: 470px;
	width:auto;
	overflow:scroll;
	background: transparent;
	padding: 10px 20px;
}
#principal > :first-child {
	margin-top: 10px;
}
#principal p, #principal li {
	line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
	position: absolute; /* -> 1 */
	top: 0px;
	/*right: 380px;
	width: 180px;*/
	margin-left: 775px;
	padding: 15px 20px 0px 20px;;
	width: 250px;
	height: 520px;
	/*background: url(../images/cadres2.png) no-repeat center;*/
}

#deux {
	height: 230px;
	overflow:scroll;
	/*background-image: url(../images/Concert.gif);*/
	padding: 10px;
	margin-left:0px;
	margin-right: 30px;
	width: 232px;

}


#trois {
	height: 190px;
	overflow:scroll;
	width: 232px;
	padding: 10px;

	

}

/* Mention de copyright */
#copyright {
	margin: 20px 0;
	font-size: .85em;
	text-align: left;
}


/* --- NOTES ---

1.	On utilise le positionnement relatif sur div#centre afin que ce bloc serve
	de référent à ses descendants positionnés en absolu.
	Dit plus clairement: deux des trois enfants de div#centre, à savoir
	div#navigation et div#secondaire, sont positionnés en absolu. Pour ces deux
	éléments, on a utilisé les propriétés CSS top, left et right qui permettent
	d'indiquer des coordonnées de positionnement. Ces coordonnées sont données*/
#pane1, #pane2, #pane3, #pane4 {
				height: 200px;
			}
			
			.winXP .jScrollPaneTrack {
				background: url(images/windows_track.gif) repeat-y;
			}
			.winXP .jScrollPaneDrag {
				background: url(images/windows_drag_middle.gif) no-repeat 0 50%;
			}
			.winXP .jScrollPaneDragTop {
				background: url(images/windows_drag_top.gif) no-repeat;
				height: 4px;
			}
			.winXP .jScrollPaneDragBottom {
				background: url(images/windows_drag_bottom.gif) no-repeat;
				height: 4px;
			}
			.winXP a.jScrollArrowUp {
				height: 17px;
				background: url(images/windows_arrow_up.gif) no-repeat 0 0;
			}
			.winXP a.jScrollArrowUp:hover {
				background-position: 0 -20px;
			}
			.winXP a.jScrollArrowDown {
				height: 17px;
				background: url(images/windows_arrow_down.gif) no-repeat 0 0;
			}
			.winXP a.jScrollArrowDown:hover {
				background-position: 0 -20px;
			}
			.winXP a.jScrollActiveArrowButton, .winXP a.jScrollActiveArrowButton:hover {
				background-position: 0 -40px;
			}
			
			
			.osX .jScrollPaneTrack {
				background: url(images/osx_track.gif) repeat-y;
			}
			.osX .jScrollPaneDrag {
				background: url(images/osx_drag_middle.gif) repeat-y;
			}
			.osX .jScrollPaneDragTop {
				background: url(images/osx_drag_top.gif) no-repeat;
				height: 6px;
			}
			.osX .jScrollPaneDragBottom {
				background: url(images/osx_drag_bottom.gif) no-repeat;
				height: 7px;
			}
			.osX a.jScrollArrowUp {
				height: 24px;
				background: url(images/osx_arrow_up.png) no-repeat 0 -30px;
			}
			.osX a.jScrollArrowUp:hover {
				background-position: 0 0;
			}
			.osX a.jScrollArrowDown {
				height: 24px;
				background: url(images/osx_arrow_down.png) no-repeat 0 -30px;
			}
			.osX a.jScrollArrowDown:hover {
				background-position: 0 0;
			}
			
			.left .jScrollPaneTrack {
				left: 0;
				right: auto;
			}
			.left a.jScrollArrowUp {
				left: 0;
				right: auto;
			}
			.left a.jScrollArrowDown {
				left: 0;
				right: auto;
			}
		
			
			/* IE SPECIFIC HACKED STYLES */
			* html .osX .jScrollPaneDragBottom {
				bottom: -1px;
			}




/* --- Photo Essai Debut --- */
ul#galerie img {vertical-align:middle; border:none;} 


#galerie 
{ 
    width: 410px ; 
    background:  ; 
    border: 1px solid Black ; 
    padding: 15px ; 
    /*margin: 15px O ; */
	margin-top:30px;
    text-align: center; 
    font: 0.9em Georgia, serif;
	
} 
 
ul#galerie, ul#thumbs 
{ 
    overflow:auto;
	margin: 0px ; 
    padding: 0 ; 
    list-style-type: none ; 
	width: auto;
	
} 


 
ul#galerie li, ul#thumbs li 
{ 
    float: left ;
	vertical-align:middle;
} 
 
ul#galerie li a, ul#thumbs li a 
{display:block; padding:0px; outline:none;}

ul#galerie li a:hover, ul#galerie_mini a:focus, ul#thumbs li a:hover, ul#thumbs a:focus {background:#CCC;}


ul#galerie a.active, ul#thumbs a.active {background:#000;}


ul#galerie li a img, ul#thumbs li a img 
{ 
    margin: 0px -10px ; 
    border: 1px solid #dcb ;
	width:60%;
}


#viewer {position:relative;  height:300px;} 
#viewer img[src*="loader"] {
	position:absolute; 
	left:100%; 
	top:100%; 
	margin:-15px 0 0 -15px;
	}
 
dl#photo 
{ 
    clear: both ; 
    margin:auto ; 
} 
 
dl#photo dt 
{ 
    font: italic 2.5em/1.5em Georgia, serif ; 
    color: #dcb ; 
} 
 
dl#photo dd 
{ 
    margin: 0 ; 
} 
 
dl#photo img 
{ 
    border: 1px solid #dcb ; 
} 





/* --- Photo Essai Fin --- */