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

   layout.css
   Disposition des blocs principaux

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

/* ------------------------------------------
/* Disposition a l'ecran des blocs principaux
/* ------------------------------------------ */
body {
	background:none repeat scroll 0 0 #E7E7DE;
	font-size:.7em;
	margin: 0;
	padding: 0;
	color:#3E3E3E;
}

.page {
	margin:0 auto;
	text-align:left;
	max-width:1000px;
	position:relative;
}

.header { 
	position:relative;
	min-height:85px;
}

.container {
	background:none repeat scroll 0 0 #FFFFFF;
	position:relative;
	clear:both;
	-moz-border-radius:20px 20px 0 0;
	-webkit-border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	border-radius:20px 20px 0 0;
	overflow:auto; 
}

.has_banner .container{
	-webkit-border-top-right-radius:0px;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
}

.content {
	float:left;
	width:68%;
	margin:2% 0 2% 1%; 
}

.content-principal{
	overflow-x: hidden;
    overflow-y: auto;
}

.extra1, .extra2{
	float:right;
	width:30%;
	overflow: hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.extra1 {
	padding:1% 1% 0 1%;
}
.extra2 {
	clear:right;
	padding:0 1% 1% 1%;
	margin:0 0 0 1%;	
}

.footer {
	clear:both;
	padding:1%;
	text-align:right;
	background-color:#fff;
	overflow:auto;
}

.footer img { vertical-align: middle; }

/* Gabarit d'impression */
@media print {
	.extra1,
	.extra1,
	.footer { display: none; }
	.page,
	.content { width: auto; }
}

/* end */

/************************************************************************************
	smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
	.content{
		padding:1%;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}
	body .header .accueil{
		width:auto;
	}
}

/************************************************************************************
	smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
	.content{width:100%;}
	.extra1{width:48%;float:left;clear:both;}
	.extra2{width:48%;float:right;}
	body #content .medias ul.liste-items .vignette:nth-of-type(3n-2), 
	body #content .medias ul.liste-items .vignette:nth-child(2n+1){
    	clear: none;
	}
	body #content .medias ul.liste-items .vignette{
		width:47%;
	}
	#content .medias ul.liste-items .vignette:nth-child(odd)  {
    	clear: both;
	}
}

/************************************************************************************
	smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {
    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }

    body .page { position: relative; width: 96%; margin: 0; margin:0 2%; text-align: left;box-shadow:none; }
}