/*mise en page générale*/
body {
  /*background: #FFF url('/img/fond.gif') repeat;*/
  background-color: #CCD67F;
  font-size: 80% ;
  font-family: Arial, Helvetica, sans-serif;  
  }
* {
  margin: 0 ; 
  padding: 0 ;
  }  
#container	{
  background: #FFF;
  margin: 0 auto;
  width: 778px;  /* box model hack - alistapart.com*/	
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: 776px;	 
  
  }  
html>#container	{
  width: 776px;
  } 
#header {
  background: #FFF url('/img/fond-rouge-nav.jpg') repeat-x ;
  margin: 0 auto;
  height: 74px;
  margin-bottom: 20px;
  width: 778px;  /* box model hack - alistapart.com*/	
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: 776px;	 
  }  
#content {
  background:transparent url(/img/fond-colonnes.gif) repeat-y;
}

#maincontent	{
  float: left;
  margin-left: 10px;
  width: 480px; 
  padding: 10px 0;
  }	
html>body div#maincontent {
	/* Correct value for browsers that don't suffer from IE Win's bugs */
	margin-left: 20px;
	}
#secondarycontent	{  
  margin-left: 530px;
  width: 225px;
  padding: 10px 0;
  }
html>body div#secondarycontent {
	/* Correct value for browsers that don't suffer from IE Win's bugs */
	margin-left: 533px;
	}
	
#footer {  
  clear: both;
  background:#990000 url(/img/fond-horiz.gif) repeat-x;
  height: 30px;
  line-height: 35px;
  text-align: right;
  color: #FFF;
  padding: 5px 20px 0 0 ;
  }
#footer a {
  color: #E4D4D4;
}
.shadow { 
  background: url(/img/shadow.gif) no-repeat bottom right;
  padding: 0 5px 20px 0; 
} 
div#maincontent .shadow { 
  padding: 5px 20px 20px 20px; 
} 
.logo {
  position: absolute;
  margin : 5px;
 
  }
/*.languegauche {
  position: absolute;
  margin : 200px 0 0 -28px;
  }*/
.langue {
  position: absolute;
  margin : 0 0 0 765px;
  }
.baseline {
  position: absolute;
  margin : 5px 0 0 400px;
  }
#mainnav {
  position: absolute; 
  top: 51px;   
}
#mainnav ul {
  list-style : none; 
  margin-left: 163px;   
  line-height : 20px;
}
#mainnav li {
  float: left;
  border-right: 1px solid #FFF;
}
#mainnav li a { 
  display: block; 
  padding: 2px 10px;   
  /*line-height: 22px; */
  font-size: 11px ;
  font-weight: bold;
  color: #FFF;
  text-decoration: none; 
} 
#mainnav li a:hover{ 
  border-top : 2px solid #FFF;
  padding: 0 10px 2px 10px;
} 
#mainnav li em {  
  display: block; 
  padding: 0 0 1px 0;  
  border-top : 2px solid #FFF;
  font-style: normal;
  font-size: 11px;
  font-weight: bold;
  color: #FFF;
} 
#mainnav li em a:hover {  
  border-top : none;
  padding: 2px 10px;  
} 
/*secondary nav*/

#secondarynav {
  position: absolute; 
  top: 25px;
  left: 350px;   
}
#mainnav li ul#secondarynav{
  float: left;
  list-style : none; 
  margin-left: 0;
  width: 180px;
}
#mainnav li ul#secondarynav a {   
  font-size: 11px ;
  font-weight: bold;
  color: #CC9999;
  text-decoration: none; 
} 
#mainnav li ul#secondarynav a:hover{ 
  color: #CC0000;
} 
#mainnav li ul#secondarynav em {  
  font-style: normal;
  font-size: 11px;
  font-weight: bold;
  color: #CC0000;
} 
div#label {
  background: url('/img/fond-rouge.jpg') repeat-y;  
  margin-top: 15px;
}
div#label p {
  background: #9BA839; 
  margin-left: 35px;  
  padding: 6px 5px 0 10px;
  color:#FFF;
  font-weight: bold;
}
div.box {
 display: block;
}
div.box h2 {
  background:#9BA839 url('/img/fond-rouge-box.jpg') repeat-y;  
  height: 15px;
  padding: 3px 0 3px 85px;
  color:#FFF;
  font-weight: bold;
  font-size: 12px;  
}
div.box h3 {
  padding-left : 5px;
  font-size: 12px;
  margin-top: 8px;
}
div.box div.projet {
  padding-bottom: 40px;
  border-bottom: 1px solid #9BA839; /*c'est du bidoullage, je ne sais pas encore comment faire...*/
}
div.box div.image{
  float:left;  
  margin: 8px 10px 5px 0;
}

div.box div.image p.copy {
 clear: both;
 font-size: 10px;
 color:#666;
 text-align: right;
 margin:0;
 padding:0;
}

div.box p {
  padding: 5px;
  font-size: 11px;
  margin-bottom: 10px;
}

img {
  border:0
}
#imagesleft, #imagesright{
  float: left
}
#imagesleft img, #imagesright img{
  margin: 5px 15px 5px 0;
  border: 1px solid #666;
}
.imagegrand {
  margin: 5px;
  border: 1px solid #666;
}

div.box a {
	display: block;
	text-decoration: none;
	color: #333; 
}

div.box a:hover {
	display: block;
	background: #E9E9BF;
}

h1 {
  color: #BED242;
  font-size: 1.4em;
  font-family: 'Trebuchet Ms', Arial, Helvetica, sans-serif;   
}
p {
  padding-top: 1em;
}
h4 {
  color: #CC0000;
  padding-left: 50px;
  font-size: 1.3em;
  font-family: 'Trebuchet Ms', Arial, Helvetica, sans-serif;   
  margin-top: 1.3em;
  background: transparent url(/img/puce.gif) no-repeat;
}
h5 {
  color: #BED242;
  font-size: 1.2em;
  font-family: 'Trebuchet Ms', Arial, Helvetica, sans-serif;   
  margin-top: 1.2em;
}
h6 {
  color: #BED242;
  font-size: 1em;
  font-family: 'Trebuchet Ms', Arial, Helvetica, sans-serif;  
  margin-top: 0.5em; 
}
ul.partenaires {
  margin-left: 50px; 
  list-style : none;  
}
ul.listpartenaires{  
 margin-left: 30px; 
 list-style-image: url(/img/puce-rond.gif) 
}
ul.recyclaid {
  list-style : none;  
}

a {
  text-decoration: underline;
  color: #666;
}
a:hover {
  text-decoration: none;
  color: #000;
}
ol {
   margin-left: 30px; 
   color: #CC0000;
   font-size: 1em;
   font-weight: bold;
}
ol li {
   margin-top: 15px;
}
ol li h6 {
   color: #CC0000;
}
ol li p {
   color: #000;
   font-weight: normal;
   margin-top: -5px;
}
h3.simple {
   border-top: 1px solid #BED242;
   padding-top: 5px;
   margin: 0 5px;
}

.miro {
   vertical-align: middle;
}
.small {font-size: 11px;
}
.clear {
 clear: both;
}

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */