/* Dispo des briques
-------------------------------------------------- */

/*la page en general*/
/*remise a zero de toutes les marges des grands blocs */

html, body, #page, #header, #prelude, #wrapper, #footer, #main, #contenu, #sidebar, #menu2, #menu3 {
	margin:0;
	padding:0;
}


/* marges haute et basse 10px marges droite et gauche a 0 */
/* le padding a 0 pour Opera qui definit des padding par defaut pour le body */
/* On utilise text-align: center */
/* pour Internet Explorer, c'est la seule façon de centrer les elements de type block avec ce navigateur */
/*centrage de la page*/
/* la largeur de la division qui contient l ensemble de la page extensible */
/* margin: 0 auto ; est la methode correcte pour centrer les elements de type block (comme les divisions) */ 
/* nous centrons donc cette division */
/* Il faut retablir l alignement a gauche que nous avons change plus haut */
/* bourdure autour de toute la page et couleur blanche pour la page */

body
{
	text-align : center;
	margin: 4px 0;
	padding: 0.5em;
	text-align: center;
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	background-color : #444;
	color: #ccc;
	/*background: url(page/orient5.jpg) repeat center top;*/
}

/*page*/
/* Il faut retablir l alignement a gauche que nous avons change plus haut */
/* bourdure autour de toute la page et couleur pour la page */


#page {
	margin : 0 auto;
	text-align: left;
}

/* structure fluide 3 clonnes*/

#page {
	width: 100%;
	/*max-width: 1200px;*/
	border: 2px solid #353535;
	background-color: #444;
	color: #ccc;
}


h1
{
	font-size: 1.3em;
	}


h1 a
{
	font-size: 1.3em;
	text-decoration: none;
	}




/*Titre du site
--------------------------------------------------------*/
/* hauteur de la partie header, contenant le titre du site */
/* a la place de background-colr je mettrais mon image de titre */

h1#header {
	height: 70px ;
	color: #ccc;
	background-color: #444;
	margin: 0;
	text-align:center;
}


h1#header a {
	/*max-width: 1200px;*/
	height: 72px;
	display:block;
	background: url(page/bg.jpg) repeat-x center top;
	background-color: #444;
	color: #000;
	margin: 0 0 0 0;
	text-indent: 1px;
	line-height: 2.4em;
	}
	
#menuhaut{	
	margin : 0 2.5em 2em 2.5em;
	background-color: #444;
	text-align: center;
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	color: #ccc;	
}	

#menuhaut a{
	margin : 0 2.5em 2em 2.5em;
	background-color: #444;
	color: #ccc;
	border-bottom: 1px solid #606060;
	border-top: 1px solid #606060;
	text-decoration: none;
}

#menuhaut a:hover{
	color: #ffdd22;
}


#prelude{
}
	
	
#wrapper {
	margin : 0 20px 0 20px;
	background-color: #444;
	}	
	


	
#main {
	width : 100%;
	margin : 0 0 0 -240px;
	float : right;
	background-color: #444;
	}
	

/* Contenu 
---------------------------------------------------------------------------*/
/* On rend les paragraphes plus propre, alignement justifie */
/* alinea et hauteur de ligne superieure à l etat normal pour aerer le tout */
/* on ajoute un objet de decor sur le cote de la page et */
/* on cree un espace à gauche et à droite du contenu */	
/* le margin eloigne le contenu du bord du menu gauche*/
#contenu {
	margin : 0 0 0 280px;
	padding : 10px;
	}
	
/* Titre de la page
---------------------------------------------------------------------------*/
/* Mise en forme du titre de page */
/* couleur de texte et une bordure basse */
/*le margin right reduit la longueur du trait*/
/*padding bottom eloigne le trait du texte*/

#contenu h2 {
	margin-left: 0;
	padding-left: 5px;
	font-size: 1.4em;
	border-bottom: 1px solid #ffdd22;
	border-left: 3px solid #ffdd22;
	margin-right : 4em;
	padding-bottom : 0.3em;
	color: #ccc;
}	

h3{
	margin-left: 0;
	padding-left: 10px;
	font-size: 1.2em;
	color: #ccc;
	background: #666;
	margin-right : 4.4em;
	border-top:3px solid #666;
	border-bottom:5px solid #666;
	
}
	
/* Paragraphes 
------------------------------------------------------------------------------*/
/* alinea et hauteur de ligne superieure a l etat normal pour aerer le tout */

#contenu p {
	text-align: justify;
	/* text-indent: 2em ; */
	line-height: 1.8em;
	font-size: 0.86em;
	color : #cdcdcd;
}


/* Images
---------------------------------------------------------------------------- */

img { 
	border : none; 
}

img a{
	border : 3px solid #fff;
}



/* Liens dans les articles
--------------------------------------------------------------------- */
#contenu a {
	color: #8a0;
}

#contenu a:hover {
	color: #ffdd33;
}





/* prelude 
----------------------------------------------------------------------*/
/* couleur de fond, bordure, leger espace entre le texte et les bords du pre */
/* on definit l overflow de la balise pre à auto pour permettre d'afficher des */
/* barres de défilement si le texte contenu dans cette balise est trop grand */
pre {
	overflow: auto;
	background: #dea;
	border: 2px solid #9b2;
	padding: 5px 0 0 5px;
	font-size: 1.2em;
}


/* On doit donner une largeur au pre à cause d'Internet Explorer */
/* on ne va donc l'appliquer qu a Internet Explorer en utilisant un "hack" */ 
/* la combinaison " * html " permet de n appliquer ce qui suis qu a Internet Explorer */
* html pre
{
	width: 1000px;
}



/* Couleur de texte des elements compris dans des span eux memes compris dans un pre */

pre span {
	color: #560;
}


/* Couleur differente pour les span.comment, les span utilises pour les commentaires */

pre span.comment {
	color: #b30000;
}


/* galeries
----------------------------------------------------------------------*/

#galeries{
}

.contenant{
margin:0;
}

.album-ttes-minis{
	margin: 0px auto;
	width: 100%;
	padding: auto;
}

.album-mini{
	float : left; 
	margin : 3px; 
	padding : 0px; 
	padding-bottom: 0;
	text-align : center; 
	border : 1px solid #ccc; 
}

.album-contenant-mini img{
	display : block; 
	margin : 0px auto; 
	border : 0;
}

.album-contenant-mini{
	width: 140px;
	height: 110px;
	margin: 5px;
}

.titre-image-album{
	display:block;
	text-align: center; 
}

.album-descrip{
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 5px;
	/*border-top : 1px solid #ccc; */
	background : #eee; 
	font-size: 0.88em;
}

.album-descrip ul{
	margin : 0;
	padding : 0;
	list-style : none; 
}




/** Ici on donne largeur et hauteur de la boite de presentation d une galerie **/
/** On defini aussi la taille de la police du paragraphe dans la boite de presentation **/
/** line-height defini l interligne **/
.album-descrip li {
	float : left; 
	margin : 5px; 
	padding-top : 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 5px;
	width : 350px; 
	height : 89px; 	
	border : 1px solid #252525;
	border-right : 1px solid #666; 
	border-bottom : 1px solid #888;
	list-style : none; 
	font-size: 0.88em;
	color: #cdcdcd;
	line-height: 150%;
}	
			
/** Modification de la taille des mini miniatures de presentation **/
/** Modification de la marge entre la vignette et le texte **/
.album-descrip img { 
	float : left; 
	margin : 3px 10px 3px 3px; 
	height:75px;
	/* width:50px; */
	border : 1px solid #ccc; 
}
/** fin de modification des mini miniatures de presentation **/

/** modification de la couleur de la police de titre des miniatures de presentation**/
.album-descrip a { 
	float : left; 
	display : block; 
	color : #eee;
	text-decoration : none; 
}

/** fin de modif de la couleur de la police de titre des miniatures de presentation**/

.titredescrip {
	font-size: 1em;
	color: #cdcdcd;
}

.album-descrip li:hover { 
	background : #555555; 
}

.album-findescrip { 
	clear: both;
	margin-bottom: 10px;	
	padding: 1px; 
}


.album-spacer {
	display: block;
	clear:both;
}


/* Footer
-------------------------------------------------------------------- */
#footer {
clear : both;
text-align:center;
height: 40px;
border-top: 1px solid #ffdd22;
margin-top: 3em;
}

p.footer {
	margin: 0;
	padding-right: 30px;
	line-height: 40px;
	text-align: right;
	color: #ffdd33;
}


/*Menu gauche
--------------------------------------------------------------------------*/

#menugauche {
	width : 180px;
	margin: 1em 0 0 1.5em;
	padding: 0.8em 1em 9em 1em;
	float: left;
	background-color: #444;
}	

/*cadre photo dans le menu*/
/*margin eloigne la liste des menus du cadre photo*/
/*le padding joue sur la largeur du cadre et le centrage de la photo*/
#photoaccueil {
	width:150px;
	background-color: #373737;
	border: 3px solid #000;
	border-right: 2px solid #bbb;
	border-bottom: 2px solid #ccc;
	/*text-align: center;*/
	margin: 0 0 4.5em 0;
	padding: 0 1.8em 0 0;	
}

/*photo dans le menu*/
/*le margin sert a center la photo et regle les marge autour de l image*/
#photac {
	width: 128px;
	padding: 0;
	margin: 1.6em 1em 2.2em 1.7em;
}


/*Menu du haut ou de gauche voir aussi en bas
--------------------------------------------------------------------------*/
/* hauteur du menu egal a la hauteur de l image utilisee. */

ul#menu {
	width : 150px;
	height: 76px;
	padding: 0;
	margin:0;
	font-size: 0.9em;
	list-style-type: none;
}


/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li {
	text-align: center;

}


/* C'est sur les liens que le gros du travail est effectue, largeur, hauteur de ligne */
/* taille de police, graisse de police, espacement des lettres, couleur, bordure et */
/* decoration du texte. Nous pouvons dimensionner les a grace à la propriete display: block ; */
/* width donne la largeur pour la barre verticale a droite du menu*/
/*margin place le bloc du menu au cantre*/

ul#menu li a {
	width: 140px;
	line-height: 25px;
	font-size: 0.9em;
	font-weight: bold;
	letter-spacing: 2px;
	color: #000;
	display: block;
	text-decoration: none;
	border-right: 2px solid #dea;
	border-left: 2px solid #dea;
	background: url(page/silver61x160.jpg) no-repeat 0 -33px;
	padding-bottom: 0.2em;
	margin-bottom: 0.5em;
}




/* Et pour finir on decale l image de fond au passage de la souris pour */
/* laisser aparaitre l etat survole de l image, voir le tutoriel sur */
/* les roll over pour plus de details */

ul#menu li a:hover {
	background: url(page/silver61x160.jpg) no-repeat 0 0;
}