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

   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: 1360px; max-width:95%; margin:0em auto; text-align: left;  }
.header {float: left; top: 0; right : 0; left: 0}
.main { padding: 1.5em 0; }
.footer { clear: both; padding: 2em 0 0 6em; margin:1em 0 0 0; border-top:1px solid #999; background : #000; }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; float: left; width: 50%; margin : 0 1em 0 0; overflow: hidden; }
.wrapperarticle {clear: both; float: left; width: 70%; margin : 0 1em 0 0; overflow: hidden; }
.wrapperrubrique {clear: both; float: left; width: 70%; margin : 0 1em 0 0; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 23.333%; margin : 0 0 0 2em; overflow: hidden; }  
.asidearticle { float: right; width: 23.333%; border-left : 2px solid #000; margin : 1em 1em 1em 1em; padding : 1em 1em 1em 1em; background : #fee; }
.asiderubrique { float: right; width: 23.333%;}
.beside {width: auto; overflow: hidden; }  
.popularite {width: auto; overflow: hidden; }  
.direction {width: auto; overflow: hidden; }  
.journal2 {width: auto; overflow: hidden; } 
.son2 {width: auto; overflow: hidden; }  
.separateur {float : left; width : 100%; height : 10px; background : #000;}
.final {float : left; width : 100%; height : auto; }
.centrale {width: 23%; overflow: hidden; }
  
/* Entete et barre de navigation
------------------------------------------ */

#header .spip_logo_site {float :left;}
.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;}

.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.3em 0.3em; margin: 0.5em 0.5em 0.5em 0.5em; border-right : 1px solid #808080; border-bottom : 1px solid #808080; border-radius: 0.25em;  text-decoration: none;  background: #fff; color: #000; }
.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; }

.nav2 {position : fixed; top : 0px; z-index :999; width : 100%; height : 70px; margin : 0em 0 0em 0; padding : 0.5em 0 0em 0em; border-bottom : 1px solid #808080; box-shadow: 6px 6px 5px #CCC; background : #fff;}
.nav2 li {display:inline;}
.nav2 li a { display: inline-block; padding: 0.3em 0.3em; margin: 0.5em 0.5em 0.5em 0.5em; border-right : 1px solid #808080; border-bottom : 1px solid #808080; border-radius: 0.25em;  text-decoration: none;  background: #fff; color: #000; }
.nav2 li a:hover {color: #fff; background : #000;}
.nav2 li.on a { background:#000; color:#fff; font-weight: normal; }
.nav2 li a:focus,
.nav2 li a:hover,
.nav2 li a:active { background: #000; color:#fff; }

.invisible {width : 0px; height : 0px;}
 

.footer .colophon { float: left; height: 100px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer .generator a:hover  {color:#c41558;}

/* 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 960px
------------------------------------------ */

@media (max-width: 960px) {
.page { position: relative; width: 960px; max-width:95%; margin:0em auto; text-align: left;  }
.wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
.content { min-height: 350px; }
.aside { float: right; width: 23.333%; overflow: hidden; }   
}

 
/* largeur maximum 780px */
@media (max-width: 780px) {
     /* 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 li a:link {color: #fff;}
    .nav li a {display: block; text-align : left; padding: 0.3em 0.3em; margin: 0.5em 0.5em 0.5em 0.5em; border-right : 1px solid #808080; border-bottom : 1px solid #808080; border-radius: 0.25em;  text-decoration: none;  background: #fff; color: #000; }
    .nav li a:hover {color : #fff; background: #000; }
    .nav li.on a { background:#c41558; color:#fff; font-weight: normal; }
    a.nav-toggle {color : #fff; font-size : 1.6em; text-decoration : none; margin : 0 0 1em 0; padding : 1em 0 1em 0; background : #000;}
    a.nav-toggle:hover {color : #fff; text-decoration : underline; background : #000;}
    .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; }

}

/* invisible devient visible */
@media screen and (max-width: 780px) {
	.invisible a:link {color: #fff;}     
	.invisible {width : auto; height : auto;}
	.nav-container {display : none}
	.menuder-container {display : none;}
}

/* largeur maximum nav2 1060px */
@media screen and (max-width: 1060px) {
     .nav2 {height : 150px;}
}

/* largeur maximum nav2 640px */
@media screen and (max-width: 640px) {
     .nav2 {z-index:-1; top :-600px; left : -600px; height : 0px; width : 0px;}
}
     
/* aside responsive 647px */
@media (max-width: 647px) {
     .aside {display : block; float : left; width : 97%; margin : 0 0 0 1em;}
}

/* asiderubrique responsive */

@media screen and (max-width:960px) {
 	 .asiderubrique {display : block; float : left; width : 97%;}
}

/* wrapperarticle responsive */

@media screen and (max-width:960px) {
 	 .wrapperarticle {display : block; float : left; width : 97%; margin : 0 0 0 1em;}
}

/* wrapperrubrique responsive */

@media screen and (max-width:960px) {
 	 .wrapperrubrique {display : block; float : left; width : 97%; margin : 0 0 0 1em;}
}

/* asidearticle responsive */

@media screen and (max-width:960px) {
 	 .asidearticle {display : block; float : left; width : 97%;}
}

/* beside responsive */

@media screen and (max-width:960px) {
 	 .centrale {display : none;}
 	 .beside {display : none;}
 	 .popularite {display : none;}
 	 .direction {display : none;}
 	 .journal2 {display : none;}
 	 .son2 {display : none;}
}

/* fin */