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

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

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

/* Elements principaux
------------------------------------------ */
html, body {
	height: 100%;
}
body { text-align: center; background:#FFF;}
.page { width: 100%; max-width:100%; height: 100%; margin: 0 auto; text-align: left;}
.header {}
.main { clear: both; padding: 0 0 35px 0; float:inherit; height: 100%; min-height: 100%; overflow: auto;}
.main-rubriques { clear: both; padding: 84px 0 35px 0; float:inherit; height: 100%; min-height: 100%; overflow: hidden;}
.main-article { clear: both; padding: 84px 0 35px 0; float:inherit; height: 100%; min-height: 100%; overflow: hidden;}
@media (max-width: 768px) {
		.main-rubriques {padding-top: 0; overflow:auto;}
		.main-article {padding-top: 0; overflow:auto;}}
		.footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; float: left; width: 100%; overflow: hidden; height:100%; min-height:100%; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 23.333%; overflow: hidden; } 

.container-page {
  display: table;
  width: 100%;
}


#content-left, #content-right, #content-left-rubriques, #content-right-rubriques, #content-left-article, #content-right-article, #content-left-article-marion {
  display: table-cell;
  float: left;
  padding: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 768px) {
	#content-left, #content-left-rubriques, #content-left-article {
		height:auto;
    	max-height:auto;
	}
	#content-left-article-marion {
		height: 100%;
  		max-height: 100%;
  		overflow-y: auto;
  		overflow-x: hidden;
	}
}

#content-unique-article {
  display: table-cell;
  float: left;
  padding: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

#content-left, #content-left-rubriques, #content-left-article, content-unique-article {
	background: #FFF;
}

#content-right, #content-right-rubriques, #content-right-article {
	background: #FFF;
	border-left: 1px solid #000;
}

#event-sommaire, #event-rubrique, #event-article {
   -webkit-column-count:2; /* Opera, Safari, Google Chrome */
    -moz-column-count: 2; /* Firefox */
    column-count: 2; /* Internet Explorer */
	-moz-column-rule : 1px solid #000;
	-webkit-column-rule : 1px solid #000;
	column-rule : 1px solid #000;
	-webkit-column-span: 1; /* Chrome, Safari, Opera */
    -moz-column-span: 1;
    column-span: 1;
	-webkit-column-gap: 1px; /* Chrome, Safari, Opera */
    -moz-column-gap: 1px; /* Firefox */
    column-gap: 1px;
	
	/*gestion des césures*/
	-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

#select-rubrique-hashtag {
   -webkit-column-count:4; /* Opera, Safari, Google Chrome */
    -moz-column-count: 4; /* Firefox */
    column-count: 4; /* Internet Explorer */
	-moz-column-rule : 1px solid #000;
	-webkit-column-rule : 1px solid #000;
	column-rule : 1px solid #000;
	-webkit-column-span: 1; /* Chrome, Safari, Opera */
    -moz-column-span: 1;
    column-span: 1;
	-webkit-column-gap: 1px; /* Chrome, Safari, Opera */
    -moz-column-gap: 1px; /* Firefox */
    column-gap: 1px;
	
	/*gestion des césures*/
	-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	padding-top: 84px;
}



#portefolio-article {
   		-webkit-column-count:1; /* Opera, Safari, Google Chrome */
    	-moz-column-count: 1; /* Firefox */
    	column-count: 1; /* Internet Explorer */
	}
#portefolio-article>div{
	padding-left: 10px;
}

@media (max-width: 768px) {
	#content-right, #content-right-rubriques, #event-article { border-left: none;}
	#content-right { height: 100%;}
	.main-article {padding-bottom: 0px;}
	
}

@media (max-width: 992px) {
	#event-sommaire, #event-rubrique, #event-article {
   		-webkit-column-count:1; /* Opera, Safari, Google Chrome */
    	-moz-column-count: 1; /* Firefox */
    	column-count: 1; /* Internet Explorer */
	}
}
	
@media (max-width: 1370px) {
	
	#select-rubrique-hashtag {
    -webkit-column-count:3; /* Opera, Safari, Google Chrome */
    -moz-column-count: 3; /* Firefox */
    column-count: 3; /* Internet Explorer */
	
}

@media (max-width: 1100px) {	
	#select-rubrique-hashtag {
	    -webkit-column-count:2; /* Opera, Safari, Google Chrome */
    	-moz-column-count: 2; /* Firefox */
    	column-count: 2; /* Internet Explorer */
	}
}

@media (max-width: 760px) {	
	#select-rubrique-hashtag {
	    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    	-moz-column-count: 1; /* Firefox */
    	column-count: 1; /* Internet Explorer */
	}
}

  

  
/* Entete et barre de navigation
------------------------------------------ */
.header { padding-bottom: 1.5em;  }
.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:#db1762;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { margin: 0; }

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

.nav {}
.nav li {display:inline;}
.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: #f0f0f0; color: #db1762; }
.nav li.on a { background:#c41558; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #c41558; color:#fff; }
 

.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

/* 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 0px;	}
	.page {  	width: 100%;  	max-width: none; 	}
	.row-page {display: block;}
}

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

    /* 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; }
    .footer .generator { display: none; }

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

}

/* fin */