/* http://www.smartpixel.net/chromoweb/fr 
CC6600 996633 B28C66 CCB399 E6D9CC 669966 */

* {
  border: 0px solid red;
  background: transparent;
  margin: 0px;
  padding: 0px;
  }

body {
  /*background: url(../bg/test.png) right top no-repeat ;*/
  width: 760px;
  margin: auto; /*centrer le site, mais pour ie il faut aussi utiliser et configurer #global */
  text-align: center;
  margin-top: 0px; /* Pour eviter de coller avec le haut du du navigateur.*/
  margin-bottom: 30px;    /* Idem pour le bas du navigateur */#
  }


#global 
	{
	border: 0px solid #656565;
	/* pour la compatibilite avec ie 750 fixe. */
	background: transparent;
	x_background: white;
        position: relative; /* on positionne le conteneur */
        margin-left: auto;
        margin-right: auto;
        width: 760px;
        text-align: center;
	}

#en_tete
	{
        text-align: center; 
	}

#en_tete h1, #en_tete h2, #en_tete h3
	{
        text-align: center; 
	font-style: italic;
	margin: 0px; padding: 0px;
	color: #CC6600;
	}

#en_tete h1 { margin-bottom: 8px; font-size: 25px;}
#en_tete h2 { margin-bottom: 3px; font-size: 15px;}
#en_tete h3 { margin-bottom: 3px; font-size: 13px;}


#galerie
        {
        text-align: center;
        }
#galerie .border
        {
	border: 1px solid black;
        }

#outils {
        float: left; /* Le menu flottera a gauche */
	/*background: url(../bg/rando.jpg) no-repeat;*/
        width: 140px; /*(135) tres important donner une taille au menu */
        /*height: 500px;*/
	}

#menu
        {
        width: 140px; /*(135) tres important donner une taille au menu */
	margin: 0px; padding:0px;
	padding-top: 13px; /* Pour aligner le menu sur le titre du corps */
        float: right; /* Le menu flottera a droite */
        }

#menu ul {
	padding: 0px; 
	margin: 0px; 
	list-style-type: none;
	}
 
#menu li {
	margin: 0px;
	padding: 0px;
	padding-bottom: 8px;
	}

#menu a {
	/*height: 20px;*/
	margin:0px ; 
	padding:0px ; 
	padding-top: 3px;
	padding-bottom: 1px;
	padding-left: 10px;
	display: block;
     	text-decoration: none;
     	color: #009e00; /* #CC6600 */
     	x_background: #ffd50a; /*CCBC9C*/  /*CC6600 996633 B28C66 CCB399 E6D9CC 669966*/
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	/*background: url(picto/fond_menu_coccinelle_droite_gris_clair.png) no-repeat;*/
	}
#menu a:hover 
	{
     	background: #ffd50a; /*CCBC9C*/  /*CC6600 996633 B28C66 CCB399 E6D9CC 669966*/
     	color: #009e00; /* #CC6600 */
	/*background: url(picto/fond_menu_coccinelle_droite_gris_clair.png) no-repeat;*/
     	/*border: 1px dashed black; */
     	}
#menu a:active 
	{
     	background: #ffd50a; /*CCBC9C*/  /*CC6600 996633 B28C66 CCB399 E6D9CC 669966*/
      	color: #009e00; /* #CC6600 */
	/*background: url(picto/fond_menu_coccinelle_droite.png) no-repeat;*/
     	}



#corps  {
	x_background: white;
	background: transparent;
	x_background: url(../bg/test.png) right top no-repeat ;
	border: 0px solid #656565;
	margin: 0px;  padding: 0px;
	margin-left: auto; margin-right: auto;
        width: 430px;
	font-style: italic;
	margin-bottom: 20px; /* Pour que le corps ne colle trop au pied de page en-dessous */
	padding: 15px; /* Pour eviter que le texte ne colle trop àa bordure */ 
	padding-top:0px;
	min-height: 470px; /* non compris par ie* ; modifier le hack dans le head pour la compatibilitée */
	}
	
#corps h1, #corps h2, #corps h3 , #corps h4, #porps h5 {
	color: #006cff; /*#CC6600;*/
	margin: 5px; padding: 5px; margin-bottom:0px; padding-bottom:0px;  margin-right:0px; padding-right:0px;
	text-align: right;
	}




#corps h1 { font-size: 25px; text-align: right; }
#corps h2 { font-size: 20px; text-align: right; }
#corps h3 { font-size: 18px; text-align: left;}
#corps h4 { font-size: 16px; text-align: left; }
#corps h5 { font-size: 15px; text-align: left; margin:5px; padding:5px; margin-top:20px; margin-bottom: 2px; color: #333333; }

#corps p, #corps ul {
	color: #333333;
	text-align: justify;
	font-size: 16px;
	margin: 3px;padding: 5px;
	margin-top: 2px;
	margin-bottom: 6px;
	}

#corps ul {
	list-style-type: none;
	margin-top:0px; padding-top:0px; margin-right:0px; padding-right:0px;
	}

#corps li {
	color: #333333;
	background: url(../picto/puce.png) left top no-repeat;
	margin-top: 5px; margin-bottom: 5px; padding-left: 15px; margin-right:0px; padding-right:0px;
	}

#corps li:first-letter
	{
	font-size: 1.1em;
	xfont-weight: bold;
	}

#corps #corps h1:first-letter, #corps h2:first-letter, #corps h3:first-letter {
	font-size: 1.6em;
        font-weight: bold; 
	xbackground: #ffd50a;
        }
#corps p:first-letter {
	color: #ffd50a;
	font-size: 1.6em;
        font-weight: bold; 
        }


#corps li:first-letter, { color: #333333; font-weight: normal; font-size: 17px; }
#corps h5:first-letter { color:  #CC6600; font-weight: normal; font-size: 17px; }


#corps a {
 color: #009e00;
 text-decoration: none;
 }

#corps form {
 background: #FFF url(../bg/gris.jpg) no-repeat right top;  
 -moz-border-radius: 20px 0px 20px 20px;  
 text-align: right;
 border: 1px solid #656565;
 margin: 0px;
 padding: 20px;
 padding-top:0px;
 font-size: 14px;
 }


#corps input, #corps textarea {
        background: #ECEDEC ;/*url(../picto/google.png) no-repeat left bottom;*/
        background: #F0F0F0 ;/*url(../picto/google.png) no-repeat left bottom;*/
        background: #E2DCD1;/*url(../picto/google.png) no-repeat left bottom;*/
	text-align: left;
        border: 1px solid gray;
        color: #555;
        text-align: left ;
        margin: 0px; margin-left: 10px;
        padding: 0px; padding-left: 4px; 
        }
#corps .option { /*classe pour le type radio*/
	border: 0px ;
	background: url(../picto/radio.png) transparent;
	}

#pied_de_page
        {
      	position: relative;
	_min-height: 50px; /* non compris par ie* ; modifier le hack dans le head pour la compatibilitée */
	_background:url(../picto/pelouse.jpg) bottom repeat;
	} 

#pied_de_page p , #pied_de_page a
        {
        color: #999;/* Discret */
        text-align: center;
        font-weight: bold; /* En gras */
        font-size: 10px;
	margin-bottom:20px;
	text-decoration: none;
	}

td 	{ 
	color: #222;
	font-size: 16px;
	padding: 20px;
	padding-top: 5px;
	padding-bottom: 3px;
	}



/*sources : http://www.alistapart.com/articles/onionskin/  */
.wrap1, .wrap2, .wrap3 {
	display:inline-table;
	/* \*/display:block;/**/
	} 
.wrap1 {
	float:left;
	background:url(../picto/shadow.gif) right bottom no-repeat;
	}
.wrap2 {
	background:url(../picto/corner_bl.gif) left bottom no-repeat;
	}
.wrap3 {
	padding:0 8px 8px 0;
	background:url(../picto/corner_tr.gif) right top no-repeat;
	}
.wrap3 img {
	display:block;
	border:1px solid black;
	}
#shadow .wrap1 {background:url(../picto/shadow.gif) right bottom no-repeat;}
#shadow .wrap2 {background:url(../picto/corner_bl.gif) -13px 100% no-repeat;}
#shadow .wrap3 {padding:0 9px 10px 0; background:url(../picto/corner_tr.gif) 100% -13px no-repeat;}