body /* dégradé pourtour haut */
{
	position:relative; /* position:relative; + padding:inherit; + margin:0 auto; permettent le centrage horizontal */
	padding:inherit;
	margin:0 auto;
	width: 900px; /* largeur cadres utiles */
	text-align: center; 
	font-family: Helvetica, sans-serif;
	font-size:100%;
	background: url(/design/images/degrade_body.jpg) repeat-x #acb2ae; /* Fond autour de la partie utile */
}

.bouton_suivant
{
	border:0px; 
	font-size:2.4em;
	width:50px; 
	background: url(/design/images/suivant.png) no-repeat center;
}

.bouton_precedent
{
	border:0px; 
	font-size:2.4em;
	width:50px; 
	background: url(/design/images/precedent.png) no-repeat center;
}

.bouton_retour
{
	border:0px; 
	font-size:2.4em;
	width:50px; 
	background: url(/design/images/retour.png) no-repeat center;
}

.cadre_calendrier 
{
background-color:#FFFFFF;
/*
position : absolute; 
top : 150px ; 
left : 460px ;
height:180px;
width: 350px;
*/
border-style: solid;
border-color:#FA0000;
border-width:2px;
/* overflow:auto; */
-webkit-box-shadow: #666 0px 5px 3px;
-moz-box-shadow: #666 0px 5px 3px;
box-shadow: #666 0px 5px 3px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior: url(/design/pie-1/PIE.htc);/* border: 1px solid green; */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFF0), to(#CBCBCB));
background: -webkit-linear-gradient(#FFFFF0, #CBCBCB);
background: -moz-linear-gradient(#FFFFF0, #CBCBCB);
background: -ms-linear-gradient(#FFFFF0, #CBCBCB);
background: -o-linear-gradient(#FFFFF0, #CBCBCB);
background: linear-gradient(#FFFFF0, #CBCBCB);
-pie-background: linear-gradient(#FFFFF0, #CBCBCB);
}

/* ----------------------------------------------------------------------------------------------------- */
/*  Ci-dessous : affichage des photos du bandeau avec fondu-enchaîné
/* ----------------------------------------------------------------------------------------------------- */

#cf4a {
	position : absolute; 
	top : 0px ; 
	width: 900px; /* largeur cadres utiles */
	height: 120px; /* Attention, avec IE il peut y avoir du blanc sous les images si hauteur flash = 100 % */
	border: 1px solid #000;
	left : 0px ;
	border-color:#777777;
}

#cf4a img {
  position:absolute;
  left:0;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}
#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}     

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}