body{
		padding: 0;
		margin: 0;
		font-size: 1.2em;
	}
    #haut{
	  height: 250px;
	  width: 100%;
	  min-width: 200px;
	  text-align: center;
	  margin-top: 20px;
	  margin-left: 0px;
	  position: absolute;
	  float: left;
      background: url("../images/haut_250.jpg") no-repeat right top rgba(0, 0, 0, 1);
	  background-size: 100% 250px;
	}
	#haut p{
		color: white;
		font-family: Verdana, Arial, sans-serif;
		font-size: 1em;
		text-shadow: 1px 1px 0 #333333, 2px 2px 0 #333333, 3px 3px 0 #333333;
		-webkit-text-stroke: 1px white;
	}
	#haut p #titre2{
		display: none;
	}
	#logoEPB{
	    width: auto;
		height: 120px;
		float: left;
		margin: 5px 5px 5px 5px;
	}
	#page, #adm{
	  width: 100%;
	  margin: 0 auto;
	  background-color : white;
	}
	#adm{
	  text-align: right;
	  color: grey;
	}
	#adm a{
	  color: grey;
	  text-decoration: none;
	}
	#adm a:hover{
	  text-decoration: underline;
	}
	#page{
	  text-align: center;
	  padding-top: 280px;
	}
	.agenda{
		width: 50px; 
		height: auto; 
		float: none;
		display: inline-block;
	}
	.ico_menu, .ico_menu_right, .ico_menu_left{
	  width: 32px;
	  height: 32px;
	  margin: 10px; 
	}
	.ico_menu_right{
		float:right;
        margin-right: 35px;
        margin-top: -5px;
	}
	.ico_menu_left{
		float:left;
        margin-left: 35px;
        margin-top: -5px;
	}
	#contenu{
	  text-align: center;
	  margin: 30px 0px 15px 0px;
	  min-height: 300px;
	  height: 100%;
	  padding: 15px 5px 0px 5px;
	  background-color: #EEEEEE;
	  /*background-color: #ccf3cb;*/
	  z-index: 1;
	}
	#contenu h1{
	  border: 1px solid black;
	  margin: -30px 15px 0px 15px;
	  display: block;
	  font-size: 1.5em;
	  background-color: white;
	  text-align: center;
      text-decoration: none;
	  z-index: 2;
	}
	#contenu h2{
		text-align: center;
		margin: 5px 5px;
		padding-top: 20px;
	}
	#pied{
	  min-height: 30px;
	  text-align: center;
	}
	#pied span{
		display: inline-block;
		margin: 0;
	}
	.profil{
		width: auto;
		height: 150px;
		float: right;
		margin: 85px 5px 5px 5px;
		border: 5px solid white;
	}
/*	a{
	  color: white;
	  text-decoration: underline;
	}
	a:hover{
	  text-decoration: none;
	}*/
	#contenu a{
	  color: blue;
	}
	#menu a{
	  display: inline-block;
	  background-color: white;
	  border: 1px solid grey;
	  margin: 5px;
	}
	#menu a:hover{
	  border: 1px solid #33A944;
	  background-color: #C6FAA7;
	}
	.progIco a:hover, .bandeauNav a:hover, .colNav a:hover{
	  background-color: #C6FAA7;
	}
	.progIco, .colistier{
	  text-align: center;
	  display: inline-block; 
	  vertical-align: top;
	  width: 250px; 
	  height: 180px; 
	  border:1px solid black;
	  margin: 10px 10px 10px 10px;
	  background-color: #FFFFFF;
	  font-size: 16px;
	}
	.progIco{
	  margin: 10px 10px 10px 10px;
	}
	.progIco a, .bandeauNav  a, .colNav  a{
	  display: inline-block;
	  color: #BBBBBB;
	  text-decoration: none;
	  width: 100%;
	}
	.bandeauNav .progImg{
      height:65px; 
	  width:125px;
	}
	.colNav .colImg{
      height:50px; 
	  width:50px;
	}
	.progIco .progImg{
	  height:130px;
	}
	.bandeauNav, .colNav, .encadre, .presColistier, .programme{
	  border: 1px solid #666666;
	  margin: 30px 70px 0 50px;
	  min-height: 50px;
	  padding:15px; 
	  background-color: white;
	  text-align: justify;
	}
	.encadre{
		margin: -50px 5px 0 5px;
		padding:5px;
	}
	.encadreGris{
	    border: 1px solid #666666;
		text-align: center;
		margin: 15px;
		padding: 5px;
		background-color: #DDDDDD;
	}
	.attention{
		margin: 5px;
		padding: 5px;
		text-align: left;
	}
	.attention img{
		width: auto;
		height: 35px;
		margin: 5px;
		float: left;
	}
	.presColistier{
	  min-height: 300px;
	  margin: -30px 5px 0 5px;
	}
	.programme{
	  margin: 20px 5px 0 5px;

	}
	#navCol{
		background-color: #000000;
        min-height: 50px;
        margin-top: -80px;
        float: left;
        width: 100%;
        bottom: 0;
		left: 0;
        position: fixed;
        padding: 5px;
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;  
	}
	.bandeauNav, .colNav{
	  padding: 0;
	  width:125px; 
	  margin:15px 0px 30px 0px; 
	  text-align:center;
	}
	.colNav{
	   margin: 0;
	   padding: 0;
	   width:45%;
	   bottom: 0px;
	}
	.menuNav{
	    -moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background-color: white;
		padding: 5px;
		position: absolute;
	}
	.photoColistier{
        width: 250px;
        height: 100px;
        float: none;
        display: inline-block;
        margin: 10px 20px 10px 10px;
	}
	.photoProgramme{
	  width: 250px; 
	  height: 100px; 
	  margin: 10px 20px -50px 10px;
	}
	
	.programme ol{
		counter-reset: numprog; /* on initialise et nomme un compteur */
		text-align: left;
		padding-left: 10px;
	} 
	.programme ul {
		padding-left: 10px;
	}
	.attention ul {
		text-align: left;
		padding-left: 10px;
	}
	li {
		list-style-type: none;
		counter-increment: numprog; /* on incrémente le compteur à chaque nouveau li */
		margin-bottom: 10px;
		margin-left: 15px; 
	}
	li:before {
		content: counter(numprog); /* on affiche le compteur */
		padding: 0 20px 2px;
		margin-right: 8px;
		vertical-align: middle;
		background: #678;
		/*-moz-border-radius: 0 60px 60px 0;
		border-radius: 0 60px 60px 0;*/
		-moz-border-radius: 60px;
		border-radius: 60px;
		font-weight: bold;
		font-size: 0.8em;
		color: white;		
	}
	li.ok:before{
		background: #67df97;
	}
	li.ko:before{
		background: #f1a1ac;
	}
	li.ec:before{
		background: #f3c765;
	}
	img.ico_bilan{
		width: 20px;
		height: 20px;
		vertical-align: middle;
		float: left;
		margin-left: -40px;
	}