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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background-color:#e6e6e6; }
body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}
.page {position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding: 20px 0 1.5em  0; text-align: left;  }
.header {}
.main { display: inline-block; float: left; width: 100%; padding: 1.5em 0; }
.footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; }
.wrapper {float: left; width: 100%; }
.wrapperune {float: left; width: 70%; } /* réduire le wrapper sur le sommaire*/
.cartouche {width:70%; margin-bottom: 1.5em; }
.chapo {display:inline-block ; width:70%; font-weight: bold; }
.content { width:100%; min-height: 350px; float : inline-start;}
.aside, .asideune {float:right; width: 25%; margin-left:0.5em; margin-bottom:0.5em;border-left:1px #555 dotted; border-bottom:1px #555 dotted; padding-left:0.5em; padding-bottom:0.5em;}

  
/* Entete et barre de navigation
------------------------------------------ */
.header { padding-bottom: 1.5em;}
.header .spip_logo_site { display: inline-block; margin: 0; line-height: 1; font-size:5em; font-family: 'Pacifico', cursive; }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#555; }
.header #logo a:hover { background: transparent; text-decoration: none; color: #555; }
.header .spip_logo {vertical-align: bottom;}
.header #slogan { margin: 0; }

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

.nav {display:inline-block; width:70%;}
.nav ul {margin:0px;}
.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: #fff; color: #3081B0; }
.nav li.on a { background:#3081B0; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #3081B0; color:#fff;}
 

.footer .colophon { float: left; height: 40px; 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 767px */
@media (max-width: 767px) {
	body {   	width: 100%;		padding: 0 20px;	}
	.page {  	width: 100%;  	max-width: none; 	}
}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .wrapperune,
    .main,
    .nav,
    .content,
    .cartouche,
    .chapo, 
    .aside,
    .asideune { width: 100%; border: 0;}
    .content  { clear: both; float: none; width: 100%; }
    .aside {display: none;}

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