/*
    Nom de fichier : css/index.css
	Fonction : fichier CSS de base 
	
	Programmeurs : Saintiche, Beethoven
*/	

/***************************************************
    Section globale qui touche tout le formulaire
****************************************************/

*{
	margin: 0;
	padding: 0;	
}

body{
   font-family : Arial;  
   font-size : 0.8em;
   background-color:#302317;
}
a{

	color : red;	
	cursor:pointer;

}
/*****************************
	Section Page Entete 
******************************/

/*
    - Appel à l'image de l'entete
	- Définition de la largeur et hauteur de l'image et les dimensions des éléments
	  de la page ( contenu et le menu )
*/
#Page_Entete{    
	height : 8em;	
	padding-top:0.3em;
	padding-left:0.3em;
	z-index:100;
	position:relative;
	
}
#Page_Entete.img{
	z-index:100;
}
#haut_page{
   margin-top:0.5em;
   
}
#Page_Entete h1{
   color:white;
   font-family:verdana;
   font-size : 2em;
   padding : 0.5em;
}
.Bande_Entete
{
	height : 1.5em;	
	background-color:rgb(46,44,45);
}
#Id_Page{
  width:78em;
  margin-left:auto;
  margin-right:auto;
}

#Title{
    color : black;
    background-color : rgb(211,223,238);
	padding-left : 2em;
	padding-top : 1.5em;
	padding-bottom : 1.5em;
}


/******************************************************
	Section de la liste de menu - A DROITE DU CONTENU
*******************************************************/

/*
	- Redimensionner le conteneur contenant la liste de liens
	- Parametrer les differents liens pour donner une belle apparences
	   - Enlever les numeros sur les liens
	   - Afficher les sous-menus et le rendre accessible uniquement lorsque
		 l'usager aura passer acceder a un lien.
*/

#Bande_Head{
    
	background-color:#796c52;
	border: 0.2em solid #564a34;
	margin-top : 0em;
	padding-left:10em;
	height:3em;
	z-index:-1;

}


#Bande_Head ol{                   /* enelever tout style de tout les order list du menu et sous-menu */
	list-style-type:none;	
}

#Bande_Head ol li ol{         /* Bloquer l'affichage des sous-menus */
	display : none;
}

#Bande_Head  li{    /* Ce qui a de commun pour tout les li*/

    text-align : center;
	padding : 0.4em;
	background-color:#796c52;
	color : white;
	float : left;
	margin-top : 0.3em;
	margin-right:2em;
	z-index:1000;
}


#Bande_Head > ol > li {   /* le menu de depart - menu parent - */
	
	position : relative;
	margin-left:0em;
}

#Bande_Head > ol > li > ol > li{   /* Uniquement les sous-menu*/
	
	position : relative;
}

#Bande_Head > ol > li:hover{         /* lorsqu'on passe au dessus d'un element du menu parent */   
    
	color : black;
	font-weight : bold;
	background-color : #b1a07f;

	
}

#Bande_Head > ol > li:hover a{         /* lorsqu'on passe au dessus d'un element du menu parent */   
	color:white;
}

#Bande_Head > ol > li:hover ol li {         /* lorsqu'on passe au dessus d'un element du menu parent */   
    background-color : white;	
	color : black;
	font-weight : normal;
}

#Bande_Head > ol > li:hover ol li  a{         /* lorsqu'on passe au dessus d'un element du menu parent */   
	text-decoration: none;
	
}

#Bande_Head ol li:hover > ol {    /* Afficher le sous-menu lorsque le menu parent est active; placer le sous-menu a la bonne place */
    display : block;
    position : absolute;
	top : -1em;
    left :11.9em;    	
}

#Bande_Head ol li:hover > ol > li:hover{    /* Lorsqu'on passe au dessus d'un element du sous-menu */
    background-color : black;	
	font-weight : bold;
}

#Bande_Head ol li:hover > ol > li:hover a{    /* Lorsqu'on passe au dessus d'un element du sous-menu */
	text-decoration: underline;
	
}

#Bande_Head a{                /* Tout les liens qui se trouve dans le menu */
    text-decoration : none;
	font-weight:bold;
	font-family:verdana;
	font-size : 0.7em;
	color : white;	
	padding:1em;
}

/* ----   Fin du menu ------ */



/*******************************************************
	Section des nouveautes --- Gallerie d'images ---
	Section qui se retouve a gauche de la page web
********************************************************/

/*
    - Affichage des images en version plus grande lorsque 
	  l'usager aura passer par-dessus une image
	- Il peut egalement selectionner une image afin de le
	  voir de facon permanente par l'option ACTIVE
	- Parametrer les H2 et H3 afin de donner une belle apparence
	  au texte

*/

#Gallerie_Gauche{
	display:block;
	float: left;
	width : 13em;	
	height : 28em;
	border-color : white;
	border-width : 0.2em;
	border-style : solid;
	position : relative;
}

div.img_gallerie{
	position:absolute;
	width : 12em;
}

div.img_gallerie a span{
	display:none; 
	position:absolute;
	z-index:1;
}

div.img_gallerie a:hover span {
	display:block; 
	position:absolute; 
	top:14em; 
	left:0em; 
	z-index:100;
}

div.img_gallerie a:active span, div.img_gallerie a:focus span {
	display:block; 
	position:absolute; 
	z-index:1;
	top:14em; 
	left:0em; 
	color:#000; 
	border : none;
}

#Gallerie_Gauche .img_gallerie{
   text-align :center;
   margin-left : 0.7em;
}

#Gallerie_Gauche .img_gallerie img{
 	border-color : black;
	border-width : 0.2em;
	border-style : solid;
	border-top-color : lightgray;
	border-top-width : 0.2em;
	border-top-style : solid;
	border-right-color : gray;
	border-right-width : 0.2em;
	border-right-style : solid;
	border-left-color : black;
	border-left-width : 0.2em;
	border-left-style : solid;
	border-bottom-color : black;
	border-bottom-width : 0.2em;
	border-bottom-style : solid;
	margin : 0.1em;
}

#Gallerie_Gauche h2{
  background-color : white;  
  color: black;
  padding:0.3em;
  font-size : 1em;
  margin-bottom : 1em;
  text-align :center;
  
}

#Gallerie_Gauche h3{
  background-color : white;  
  color: black;
  padding:0.3em;
  font-size : 0.7em;
  margin-top : 1em;
  text-align : center;
  margin-top : 17em;
}


/******* fin de la section de Gallerie d'image -- MENU GAUCHE ---*******/

/***********************************************************
	GALLERIE D'IMAGE POUR LES PEINTRES DANS LE CONTENU 
***********************************************************/

/*
	- Identique que pour la galerie d'image qui se trouve dans la
	  page principale. Mais cette galerie et apparente dans la section 
	  contenu
*/

#Gallerie_Gauche2{
	display:block;
	float: left;
	width : 55em;	
	height : 30em;
	border-color : black;
	border-width : 0.2em;
	border-style : solid;
	position : relative;
}

#Gallerie_Gauche2 div.img_gallerie{
	position:absolute;
	width : 17em;
	margin-top : 2em;
}

#Gallerie_Gauche2 div.img_gallerie a span{
	display:none; 
	position:absolute;
	z-index:1;
}

#Gallerie_Gauche2 div.img_gallerie a:hover span {
	display:block; 
	position:absolute; 
	top:0em; 
	left:18em; 
	z-index:100;
}

#Gallerie_Gauche2 div.img_gallerie a:active span, #Gallerie_Gauche2 div.img_gallerie a:focus span {
	display:block; 
	position:absolute; 
	z-index:1;
	top:0em; 
	left:18em; 
	color:#000; 
	border : none;
}

#Gallerie_Gauche2 .img_gallerie{
   text-align :center;
   margin-left : 0.7em;
}

/*** placer des bordure sur les images */
#Gallerie_Gauche2 .img_gallerie img{
 	border-color : white;
	border-width : 0.15em;
	border-style : solid;
	margin : 0.1em;
}

#Gallerie_Gauche2 h2{
  background-color : white;  
  color: black;
  padding:0.3em;
  font-size : 1em;
  margin-bottom : 1em;
  text-align :center;
}

#Gallerie_Gauche2 h3{
  background-color : white;  
  color: black;
  padding:0.3em;
  font-size : 0.7em;
  text-align : center;
  margin-top : 26em;
}


/***************** FIN DE LA SECTION GALLERIE D'IMAGE DES PEINTRES DANS LA PARTIE CONTENU ************/


/***********************************************************
	Section du contenu
***********************************************************/
/*
     - Dimensionner zone qui comprends le contenu et la gallerie d'image
	   a gauche du contenu
	 - Dimensionner la zone du contenu. Placer les positions relative afin
	   de pouvoir utiliser la gallerie d'image a l'interieur du contenu
	 - Placer des elements flotante gauche et droite afin de pouvoir utiliser
	   les images en harmonie avec le texte
*/


#Contenu{

	margin-top:2em;
	margin-bottom:2em;
    width : 65.09em;
	margin-left:auto;
	margin-right:auto;
	
}

#Entete_Contenu_Page
{
	
	background-color : rgb(88,69,41);
	color : white;
	width:61em;
	height:3.5em;
	padding-left:2em;
	padding-top:0.3em;	
	margin:auto;
	margin-right : 0em;
}
#Contenu_Page{
	margin:auto;
	color : black;
	background-color : rgb(221,206,183);
	margin-right : 0em;
	width : 59em;   
	padding : 2em;
}


/*
   Changer le style de la signature   
*/

.entete_font{
   font-family : "arial","brockscript";
   font-size:1.5em;
   color:white;
   font-style:italic;
}

.signature{
   font-family : "Rage Italic";
   font-size:2em;
   color:black;
   font-style:italic;
}

/*
    Placer l'image a gauche des autres element, comme le texte
*/
div.img_float_left{
    float : left;
	margin-right : 1em;
	margin-top : 0.5em;
	margin-bottom : 0em;	
}

/*
    Placer l'image a droite des autres element, comme le texte
*/

div.img_float_right{
    float : right;
	margin-left : 1em;
	margin-top : 0.5em;
	margin-bottom : 0em;
}

blockquote.bl_contenu p{
	margin-left :2em;
	margin-right:2em;
	font-style : italic;
}

p.p_contenu{
  font-size : 0.9em;
  font-style: normal;
  padding-top:1em;
  padding-bottom:0.5em;
  line-height :1.5em;
}

div.pp_contenu{
   font-style : italic;
   margin-bottom : 2em;
}


/***********************************************************
	Les differentes types d'ancres
***********************************************************/

/*
	- Configurer les differentes ancres qui seront place dans la section
	  du contenu. En modifiant la dimension, l'apparence des liens.
	- A noter qu'il y a deux types d'apparences d'ancres. Une pour les liens
	  Internes et l'autres ( Ancre_contenu2 ) pour les liens Externes. L'apparence
	  differe. 
*/


div.Ancre_contenu{
	border-color : black;
	border-style :solid;
	border-width : 0.1em;	
	height : 1.3em;
    width : 100%;	
	background-color : rgb(106,19,21);
	margin-top : 1em;
	margin-bottom:1em;
}


div.Ancre_contenu ol{
	list-style-type:none;
}

div.Ancre_contenu li{    /* Ce qui a de commun pour tout les li*/
    text-align : center;
}

div.Ancre_contenu a{    /* Ce qui a de commun pour tout les li*/
    text-decoration : none;
	color : white;
	font-size : 1em;
	padding-left : 0.5em;
	padding-right: 0.5em;
	letter-spacing : 0em;
}

div.Ancre_contenu> ol > li {   /* le menu de depart - menu parent - */
	float:left;
	margin-left:1em;
	color : blue;
}

div.Ancre_contenu > ol > li:hover a {   /* le menu de depart - menu parent - */
	background-color : rgb(182,33,37);	
	color : white;
}


/**********************************************
	- Section pour la deuxieme serie d'ancres
**********************************************/

div.Ancre_contenu2{
	height : 1.3em;
    width : 100%;	
	margin-top : 1em;
	margin-bottom:1em;
}

div.Ancre_contenu2 ol{
	list-style-type:none;
}
div.Ancre_contenu2 li{    /* Ce qui a de commun pour tout les li*/
    text-align : center;
}

div.Ancre_contenu2 a{    /* Ce qui a de commun pour tout les li*/
    text-decoration : underline;
	color : black;
	font-size : 1em;
	padding-left : 0.5em;
	padding-right: 0.5em;
	letter-spacing : 0em;
}

div.Ancre_contenu2 > ol > li {   /* le menu de depart - menu parent - */
	float:left;
	margin-left:1em;
	color : blue;
}

div.Ancre_contenu2 > ol > li:hover a {   /* le menu de depart - menu parent - */
	background-color : rgb(182,33,37);	
	color : white;
}

/***  Fin des Ancres ****/



/***********************************************************
	Le FOOTER
***********************************************************/

/*
    - Configuration du liens qui compose le Pied de page
*/

#Footer{
	padding : 0em;    
    margin-bottom : 2em;   
	height : 2em;
    width : 100%;	
	background-color : rgb(36,36,36);
	background-color:#796c52;
	
}
#Footer ol{
	list-style-type:none;
}
#Footer li{    /* Ce qui a de commun pour tout les li*/
    text-align : center;
}

#Footer a{    /* Ce qui a de commun pour tout les li*/
    text-decoration : none;
	color : white;
	font-size : 1em;
	padding-left : 0.5em;
	padding-right: 0.5em;
	letter-spacing : 0.1em;
}

#Footer> ol > li {   /* le menu de depart - menu parent - */
	float:left;
	position : relative;
	margin-left:1em;
	color : blue;
}

#Footer > ol > li:hover a {   /* le menu de depart - menu parent - */
	background-color : rgb(182,33,37);	
	background-color:black;
	color : white;
}