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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background:#FFF;
}
.page {
	position: relative;
	width: 1240px;
	max-width:95%;
	margin:0em auto 0px;
	text-align: left;
	border-top:0;}
.haut {	background-image: url(../images/fond-page.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}
.main {
	padding: 3em 0 1.5em;
}
.page_sommaire .main{padding-top:2em;}
.footer { clear: both; padding: 1em 0em; margin:1em auto 0; width: 1240px;
	max-width:95%;
 }

.wrapper { clear: both; float: right; width: 72.858%; }
.aside { float: left; width: 20%;  }

.content { min-height: 350px; }
    
  
/* Entete et barre de navigation
------------------------------------------ */
.header { padding:1em 0; }
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#222; }
.header .spip_logo_site a:hover  {color:#c85000;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { margin: 0; }


 
.foot{
	background-image: url(../images/fond2.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	padding-bottom:2em;
	text-align:left;
}
	

/* 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%;			}
	.page {  	width: 100%;  	max-width: none; padding: 0 20px; 	}
	.haut {

    background-image: none;

}
}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; }
	.main { padding: 1.5em 0;

}

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
	.page_sommaire .arbo { display: block; padding:5px; clear:both; }
    .footer .colophon { width: auto; float: none; }
    .footer .generator { display: none; }

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

}

/* fin */