/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

/* Elements principaux
------------------------------------------ */
body { text-align: center; background:#ddd;}
.page { position: relative; width: 1000px; max-width:98%; margin:2em auto; text-align: left; }
.header {}
.main { padding: 1.5em 0; }
.footer { clear: both; padding: 1em 0 0 0; margin:0;	background-color: #643521; /*#FEE46D;*/ }

.wrapper { clear: both; float: left;width:100%;margin-bottom: 4em; overflow: hidden; }
.content { padding: 0 1em; min-height: 350px;}

.aside { display:none;}    
  
/* Entete et barre de navigation
------------------------------------------ */
#bandeau{background : #643521;}
.header { padding: 0.2em 0.8em; /*margin-top:0px;*/ background:url('img/bandeau-enfants.jpg')  center no-repeat;  
}
.header .logo_site{ float: left; width: 150px; padding-top:6px; margin: 15px 0; background : white; border-radius:4px; }
.header .slogan{
	float: left; width:47%; padding: 15px 0 0 20px; line-height: 1; font-weight: bold; font-size:175%; 
	color: #FFFFFF; text-shadow:#39A449 2px 2px 2px; 	
}

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.nav {}
.nav li {display:inline; width:20%;}
.nav li a { display: inline-block; padding:0.25em 0.5em; margin:0 0.25em 0.5em 0;border-radius:0.25em;text-decoration: none;  background: #EED; color: #222; }
.nav li.on a { background:#c85000;color:#fff;  font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #222; color:#fff; }

.footer {/*height: 800px;*/ text-align:center;padding-bottom:5px;}	
.footer a:hover{color: #FEE46D;  background:black;}
.footer .colophon { margin: 0.5em;}
.footer .colophon p { clear: both; line-height:40px;padding-top:10px;}
.footer .colophon a  { margin: 5px 2px; padding: 6px 6px; color: white;font-weight: bold;
		text-decoration: none;}
.footer .colophon .logo{ width: 150px; height:54px; padding-top:6px; margin:0 auto; background : white; 	border-radius:4px; }

.generator a{padding: 10px 0;}


/* Gabarit d'impression
------------------------------------------ */
@media print {
    .page,
    .wrapper,
    .content { width: auto; }
    .nav,
    .arbo,
    .aside,
    .footer { display: none; }
}

/* Affichage sur petits ecrans  
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */

/* largeur maximum 767px */
@media (max-width: 767px) {
	body {   	width: 100%;		padding: 0 20px;	}
	.page {  	width: 100%;  	max-width: none; 	}
}
 
/* largeur maximum 590px */
@media (max-width: 590px) {
    .wrapper,
    .content,
	 .header .slogan { width: 100%;}
    
	 .content { clear: both; float: none; width: 100%; }
	 .aside { display: none; }

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
    .footer .colophon { width: auto; float: none; }
    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

}

/* fin */