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

   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; margin:0 auto; width:100%; text-align: left; overflow:hidden; }
.header {}
.main { padding:0 0 8em; position:relative; }
.footer { clear: both; padding:0 0 4em; margin:0; border-top:1px solid #B7B3AC; }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; width:65%; float:left; }
.content { min-height: 350px; padding:0 16px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside {  padding:0.7em 0; width:30%; float:right; }

.entete .wrapper, .footer .wrapper, .main { width:100%; max-width:1100px; margin:0 auto; position:relative; float:none; }

.footer { font-size:70%; }
.footer .wrapper { padding:16px; }
.footer .colophon { float:left; height: 40px; width: 60%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer a.spip_out::after { content:''; }

/* 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) {
	.page {  	width: 100%;  	max-width: none; 	}
}
 
/* largeur maximum 640px */
@media (max-width:640px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; padding:0 16px 3em; }
    .aside { padding-top:2em; border-top:2px solid #B7B3AC; }

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
/*     .footer .wrapper { width:50%; } */
/*     .footer .colophon { width: auto; float: none; } */
/*     .footer .generator { display: none; } */

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

/*------ GRID OF THREE----*/
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

}

/* fin */