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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background: #27408b; font-family: Verdana, sans-serif;}
.page { position: relative; width: 960px; max-width:95%; margin:2em auto; text-align: left;  }
.header {}
.main { padding: 1.5em 0; }
.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: 70%; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 29%; overflow: hidden; }    
  
/* 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
------------------------------------------ */
#top{
    width: 100%;
}

.citation{
    font-size: 0.9em;
    color: #000;
    text-align: center;
    padding-top: 5%;
}

.topimage{
    background: #fff url(http://ile-de-groix.info/blog/dist/css/img/top2.jpg) no-repeat center top;background-size: 100%;
    width: 100%;    
}

#top h1{
    padding-right: 8%;
    color: #FFFFFF;
    text-align: right;
    padding-top: 5%;
}

#top-large h1{
    padding-right: 8%;
    color: #FFFFFF;
    text-align: right;
    padding-top: 5%;
}

/* largeur maximum 900px */
@media (max-width: 900px) {
.topimage{
    min-height:140px;
}
.citation{
    font-size: 0.7em;
    padding-top: 0;
}
#top h1{
    padding-right: 8%;
    padding-top: 4%;}

}


/* largeur maximum 767px */
@media (max-width: 767px) {
	body {width: 97%; padding: 0 5px;}
	.page {width: 100%; max-width: none;}
    .topimage{width: 100%; min-height:140px;}  
}

/* largeur maximum 640px */
@media (max-width: 640px) {
.main { padding: 2em 0; }

#top h1{
    text-align: left;
    font-size: 1.2em;
    padding-left: 10%;
    padding-top: 20px;
}

#top-large{
    display: none;
}

.topimage{
min-height:100px;
}

.citation{
    font-size: 0.7em;
    padding : 0 5px 0 5px;
}

     /* 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; }
    
}


@media (min-width: 640px) {
#top,
#toggle span:after,
#toggle span:before {
  display: none;
}

}


/* fin */