/* Page */

body
{
   width: 850px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 215px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 1px;    /* Idem pour le bas du navigateur */
   margin-left: 210px;
   background-image: url("images/logo gouttiere2.png");
   background-repeat: no-repeat;
   background-position: top-left;
   background-color: white;
   border: no border;
}







/* L'en-tête */

#en_tete
{
   width: 850px;
   height: 160px;

	background-image: url("images/");
   	background-repeat: repeat-x;
	
   margin-top: 1px;
   margin-bottom: 10px;
   margin: 0px auto;

}








/* Le menu */

#menu_horizontal /* Ne sert pas pour le moment */
{
        widht: 850px;
        height: 47px;
        padding-top: 2px;
        padding-left: 15px;
        border: 1px solid green;
        background-image: url("images/");
        background-repeat: no-repeat;
        background-position: top;
}

#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : none; /* on met le texte en gras */
        font-family : Marker Felt, Mistral; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
        widht: 850px;
        height: 42px;
        padding-left: 2px;
        margin-bottom: 40px;
        border: no border;
        background-image: url("images/");
        background-repeat: no-repeat;
        background-position: top-left;
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding-top : 13px; /* marge intérieure */
        background : no color; /* couleur de fond */  
      
        color : red ; /* couleur du texte  #d01f21 */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 185px; /* largeur */
        height: 32px;
        font-size: 24px;
		font-family: "Marker Felt", Mistral, Times New Roman, Times, Verdana;
		font-weight: none;
		font-style: italic;
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 185px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: red; /* On passe le texte en noir... */
        background: transparent; /* ... et au contraire, le fond en blanc */
        text-transform: none;
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
        background-color: #cacaca;
        color: red;
        text-transform: none;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
        background-color: #cacaca;
        color: red;
        text-transform: none;
}







/* Le corps de la page */

#corps
{
   width: 836px;
   margin-top: 0px;
   margin-left: 1px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 15px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   padding-top: 5px;
   
   background-image: url("images/.");
   background-repeat: no-repeat;
   background-color: white;   /* Une couleur de fond pour le corps */
   border-top: no border;
   border-left: no border;
   border-right: 2px solid black;

}

.arbo
{
	width: 500px;
	
	margin-left: 15px;
	
	padding-top: 1px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 70px;
	
	color : #2f2f2f;
	font-size: 17px;
	font-family: "Marker Felt", "Mistral", Times New Roman, Times, Verdana;
	font-weight: lighter;
	
	background-image: url("images/right-top.jpg");
   	background-repeat: no-repeat;
   	
   	border: no border;
}

.bruno-romani
{
	position: absolute;
    top: 450px;
    left: 1065px;

}

.expo-habitat
{
	position: absolute;
    top: 450px;
    left: 200px;

}


.bloc_index
{
	width: 825px;
	height: 961px;
	
	margin-left: 1px;
	margin-top: 5px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	
	background-image: url("images/.bmp");
   	background-repeat: repeat-x;
	text-align: justify;
   	border: no border;

}

.bloc-vignettes
{
	width: 215px;
	height: 960px;
	margin-left: 45px;

	padding: auto;

	background-image: url("images/");
   	background-repeat: repeat-x;
	background-position: top-left;
	text-align: justify;
  	border: no border;

	float: left;
}

.bloc-actualite
{
	width: 530px;
	height: 516px;
	margin-left: 285px;

	padding-left: 15px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-top: 2px;

	background-image: url("images/fonds-cadre.bmp");
   	background-repeat: repeat-x;
	background-position: top-left;
	text-align: justify;
  	border: no border;
	font-size: 21px;
	float: ;
}

.actu
{
	width: 500px;
	height: 30px;
	margin-left: -10px;
	margin-bottom: 0px;

	padding-left: 9px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-top: 8px;

	background-image: url("images/.bmp");
   	background-repeat: repeat-x;
	background-position: top-center;
	text-align: justify;
  	border-left: no border;
	border-right: no border;
	border-top: no border;
	font-size: 21px;
	float: ;
}

.news_1
{
	width: 500px;
	height: 467px;
	margin-left: -10px;
	margin-top: 0px;
	padding-left: 9px;
	padding-right: 8px;
	padding-bottom: 8px;
	background-image: url("images/");
   	background-repeat: repeat-x;
	background-position: top-left;
	text-align: justify;
   	border-left: no border;
	border-right: no border;
	border-bottom: no border;
	float: ;
   	overflow-y: scroll;
}

.retrospective2
{
	width: 520px;
	margin-left: 285px;
	
	margin-top: 45px;
	
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-top: 10px;
	background-image: url("images/.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	text-align: justify;
	text-indent: 50px;
  	border: no border;
}


.bon
{
	width: 680px;
	height: 30px;
	margin-left: 5px;
	margin-bottom: 0px;
	margin-top: 25px;

	padding-left: 9px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-top: 2px;

	background-image: url("images/menu2.bmp");
   	background-repeat: repeat-x;
	text-align: justify;
  	border-left: 1px solid gray;
	border-right: 1px solid gray;
	border-top: 1px solid gray;
	font-size: 21px;
	float: ;
}


.bon_savoir
{
	width: 680px;

	margin-left: 5px;
	margin-top: 0px;
	padding-left: 9px;
	padding-right: 8px;
	padding-bottom: 8px;
	background-image: url("images/.bmp");
   	background-repeat: repeat-x;
	text-align: justify;
   	border-left: 1px solid gray;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	float: ;
   	overflow-y: scroll;
}


.media
{
	width: 700px;
	margin-top: 5px;
	margin: auto;
	margin-bottom: 15px;
	padding-left: 6px;
	padding-right: 7px;
	padding-bottom: 8px;
	text-align: justify;
  	border: 1px dashed gray;
}


.realisable
{
	width: 560px;
	height: 160px;

	margin-left: 5px;
	margin-top: 0px;
	padding-top: 15px;
	padding-left: 30px;
	padding-right: 15px;
	padding-bottom: 8px;
	background-image: url("images/bgrealisable3.jpg");
	background-repeat: no repeat;
	text-align: justify;
   	border: none;
	float: ;
}

.gouttiere
{
	width: 680px;
	height: 380px;

	margin-left: 1px;
	margin-top: 0px;
	padding-top: 15px;
	padding-left: 3px;
	padding-right: 6px;
	padding-bottom: 8px;
	background-image: url("images/.jpg");
	background-repeat: no repeat;
	text-align:;
   	border: none;
	float: ;
}

.fondgouttiere
{
	width: 650px;

  	margin-left: auto; 
  	margin-right: auto; 

	padding-top: 10px;
	padding-left: 40px;
	padding-right: 3px;
	padding-bottom: 12px;
	background-image: url("images/fondgouttiere.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	text-align: justify;
   	border: none;
	float: ;
}

.etancheite
{
	width: 650px;
	height: 200px;

  	margin-left: auto; 
  	margin-right: auto;
  	margin-bottom: 25px; 

	padding-top: 1px;
	padding-left: 60px;
	padding-right: 10px;
	padding-bottom: 33px;
	background-image: url("images/caracter1.bmp");
	background-repeat: no-repeat;
	background-position: bottom left;
	text-align: justify;
   	border: none;
	float: ;
}

.apprentissage
{
	width: 680px;
	margin-top: 5px;
	margin-bottom: 20px;
	
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 5px;
	background-image: url("images/fondapprentissage.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	text-align: justify;
  	border: 1px dotted gray;
}

.divers
{
	width: 710px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-top: 1px;
	background-image: url("images/fondapprentissage1.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	text-align: justify;
  	border: 1px dotted gray;
}

.ornements
{
	width: 710px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-top: 1px;
	background-image: url("images/.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	text-align: justify;
  	border: 1px dotted gray;
}

.historique
{
	margin-top: -7px;
	margin-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-top: 1px;
	background-image: url("images/.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	text-align: justify;
	text-indent: 30px;
  	border: none;
}

.contacter
{	
	width: 500px;
	margin-bottom: 5px;
	margin: auto;
	padding-left: 10px;
	padding-right: 5px;
	padding-bottom: 8px;
	padding-top: 5px;
	background-image: url("images/menu2.bmp");
   	background-repeat: repeat-x;
	text-align: justify;
  	border: 2px dashed gray;
	
}

.jouesdelucarne
{	
	width: 710px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
  	border: 1px dashed gray;
	
}

.entretientoiture
{	
	width: 730px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 5px;	
}

.mentionslegales
{	
	width: 700px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	border: no border;	
}


p
{
	font-size: 17px;
	font-weight: normal;
	color: #000000;
	margin-bottom: 15px;
	font-family: "Times New Roman", Times, Verdana;
}


hr
{
   color: #FF0000;
}



#corps h1    /* Tous les titres h1 du corps */
{
   color: red;
   font-family: "Cooper Black" "Comic Sans MS" "Arial Black", "Times New Roman", Times, serif;
}

#corps h2    /* Tous les titres h2 du corps */
{
   height: 22px;
   margin-left: 10px;
   font-size: 20px;
   background-image: url("images/titre.png");    /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat;    /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 30px;
   color: gray;
   text-align: left;
}

#corps h7    /* Tous les titres h2 du corps */
{
   height: 22px;
   margin-left: 0px;
   font-size: 20px;
   background-image: url("images/titre.png");    /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat;    /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 30px;
   color: gray;
   text-align: left;
}

#corps h4    /* Tous les titres h4 du corps */
{
   height: 22px;
   margin-left: 0px;
   margin-bottom: -0px;
   font-size: 20px;
   background-image: url("images/");    /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat;    /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 0px;
   color: black;
   text-align: left;
}

#corps h5    /* Tous les titres h5 du corps */
{
   height: 17px;
   margin-top: 1px;
   margin-left: 0px;
   margin-bottom: 5px;
   font-size: 20px;
   background-image: url("images/");    /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat;    /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 0px;
   color: black;
   text-align: left;
}

#corps h6    /* Tous les titres h6 du corps */
{
   height: 22px;
   margin-top: 3px;
   margin-left: 0px;
   margin-bottom: -0px;
   font-size: 20px;
   background-image: url("images/");    /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat;    /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 0px;
   color: maroon;
   text-align: left;
}

h3
{
   color: red;
   font-size: 18px;
}


.imageflottante
{
   float: left;
   padding: 4px;
}

.imageflottante2
{
   float: right;
   padding: 4px;
}

.imageflottante3
{
   float: left;
   padding: 0px;
   margin-left: 5px;
   margin-right: 1px;
}




/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */



#pied_de_page
{
   width: 1000px;
   height: 243px;
   margin-top: -22px;
   margin-left: -53px;
   margin-bottom: -2px;
   
   padding-top : 75px;
   text-align: center;
   background-color: white;
   background-image: url("images/fonds piedpage2.png");
   background-repeat: no-repeat;
   border: no border;
   
}

#pied_de_page p	    /* Style paragraphes dans le pied de page */
{
   color: black;
   font-family: "Baskerville Old Face" "Comic Sans Ms", Times New Roman, Serif;
   font-size: 16px;
   padding-bottom: 0px;
}

#pied_de_page a    /* Style liens dans le pied de page */
{
   color: red;
   font-family: "Baskerville Old Face" "Comic Sans Ms", Times New Roman, Serif;
   font-size: 16px;
   padding-bottom: 0px;
}









/* Le contenu de la page */


hr
{
   color: red;
}



.separation{
	clear: both;
	position: absolute;
	margin-top :10px;
	margin-left: 240px;
	height: 20px;
	width : 5px;
	background: gray;
	}

a
{
	font-size: 17px;
	font-weight: normal;
	color: gray;
	text-decoration: underline;
	
}

a:hover
{
    font-style: normal;
    text-transform: none;
    font-weight: bold;
    color: red;
}

p
{
	font-size: 17px;
	font-weight: normal;
	color: #000000;
	margin-bottom: 15px;
	font-family: "Times New Roman", Times, Verdana;
}



.retrospective
{
   	border: none;
	width: 680px;
	margin-left: 50px;
	margin-top: 10px;
	padding-left: 3px;
	padding-right: 10px;
	padding-bottom: 5px;
	text-align: justify;
	float: ;
}

.solid
{
   border: 1px solid red;
}

.solid_contact
{	
	width: 500px;
	margin-left: 5px;
	padding-left: 10px;
	padding-right: 5px;
	padding-bottom: 8px;
	padding-top: 5px;
	background-image: url("images/menu2.bmp");
   	background-repeat: repeat-x;
	text-align: justify;
  	border: 2px dashed gray;
	float: left;
}


.clear
{
	clear: right
}


.arbo
{
	margin-left: 15px;
	margin-bottom: 50px;
	padding-top: 1px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 70px;
	
	color : #2f2f2f;
	font-size: 17px;
	font-family: "Marker Felt", "Mistral", Times New Roman, Times, Verdana;
	font-weight: lighter;
	
	background-image: url("images/right-top.jpg");
   	background-repeat: repeat-x;
}

.signature
{
	font-size: 21px ;
	margin-left: 10px ;
	color: red;
	text-decoration: bolder ;
}

.important
{
   	color: red;
   	font-size: 18px;
}

.text_menu
{
   font-size: 22px;
   text-decoration: bold;
   font-family: "Wide Latin", Times New Roman, Times, Verdana;
}

.text_menu_2
{
   font-size: 25px;
   text-decoration: bold;
   font-family: "Baskerville Old Face", Times New Roman, Times, Verdana;
   font-style: italic;
}

.nom
{
   color: maroon;
   font-weight: bold;
   font-size: 18px;
}

.gris
{
   color: gray;
   font-weight: bold;
   font-size: 18px;
}

.gris2
{
   color: gray;
   font-weight: bold;
   font-size: 18px;
}

.souligne
{
   text-decoration: underline;
}

.bleu
{
   color: blue;
}

.bleu2
{
   color: blue;
   font-weight: bold;
   font-size: 19px;
}
.puce
{
   font-size: 17px;
   font-weight: bold;
   color: #000000;
   margin-bottom: 15px;
   font-family: "Times New Roman", Times, Verdana;
   list-style-type: square;    
}

.puce_2
{
   font-size: 17px;
   font-weight: bold;
   color: black;

   font-family: "Times New Roman", Times, Verdana;
   list-style-type: circle;
   
}

.puce_3
{
   font-size: 17px;
   font-weight: normal;
   color: black;

   font-family: "Times New Roman", Times, Verdana;
   list-style-type: disc;
   list-style-position: outside;  
}

.puce_4
{
   font-size: 17px;
   font-weight: normal;
   color: black;

   font-family: "Times New Roman", Times, Verdana;
   list-style-type: disc;
   list-style-position: outside; 
   list-style-image: url("images/flechenoire.jpg");   
}

.vert
{
   color: green;
   font-size: 17px;
   font-family: "Times New Roman", Times, Verdana;
   font-weight: none;
}

.mini
{
   color: white;
   font-size: 1px;
   font-family: "Times New Roman", Times, Verdana;
   font-weight: none;
}

.rougegrand
{
   color: red;
   font-size: 19px;
   font-family: "Times New Roman", Times, Verdana;
   font-weight: bold;
}

.hautpage1
{
   font-size: 13px;
   font-style: italic;
   color: silver;
}

.blanc
{
   color: white;
   font-size: 17px;
}

.imageflottante
{
   float: left;
}


table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
   border: none;
}