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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background:#ddd;}

.page {  width: 1100px; max-width:95%; margin:140px auto; text-align: left; z-index:100; padding-bottom:20px; margin-bottom:30px }
.header {position : fixed; top:0px; width:100%; height:100px; background:#C41558;text-align:left;  z-index:1000}
.headerpos {position: relative; width: 1100px; max-width:95%;margin:0 auto;}
.main { padding:  0; }
.footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; background:#eee; min-height:180px; text-align:left; }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; float: left; width: 68%; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 28%;  overflow: hidden; padding-top:40px; }    
.asiderech {padding-top:-40px}
.sidemanif {margin-top:-10px}
  
/* 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%; }

.guiderousseau {position:absolute; right:0; top:0; z-index:2000; }
.fil {position:absolute; right:77px;border-right: 1px solid #333; z-index:1; height:55px; top:-10px;animation: balance 10s ease-in-out infinite alternate;}
.guiderousseau img {animation: balance 8s ease-in-out infinite alternate; 		}
.guiderousseau img:hover {animation: balance 4s ease-in-out infinite alternate;}

@keyframes balance {
    0%   {
      transform: rotate3d(0, 0, 1, 0deg);
    }
    10%  {
      transform: rotate3d(0, 0, 1, 2deg);
    }
    20%  {
      transform: rotate3d(0, 0, 1, 8deg);
    }
    30% {
      transform: rotate3d(0, 0, 1, 0deg);
    }
    40% {
      transform: rotate3d(0, 0, 1, 2deg);
    }
    50% {
      transform: rotate3d(0, 0, 1, 8deg);
    }
    60% {
      transform: rotate3d(0, 0, 1, 0deg);
    }
    70% {
      transform: rotate3d(0, 0, 1, 2deg);
    }
    80% {
      transform: rotate3d(0, 0, 1, 8deg);
    }
    90% {
      transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
      transform: rotate3d(0, 0, 1, 2deg);
    }
}

.nav {float:right; margin-top:30px;margin-right:150px;  font-family: 'Khand', sans-serif; font-size:1.4em}
.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: #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: #333; color:#fff; }

.carte {margin-top:100px; margin-bottom:-140px; border-bottom:1px solid #999;z-index:500;}
.carte_gis {z-index:1;}
 

.footer .colophon { float: left; height: 120px; width: 33%; margin: 0; text-align:left }
.footer .colophon2 { float: left; height: 120px; width: 33%; margin: 0; text-align:left }
.footer .colophon3 { float: left; height: 120px; width: 33%; margin: 0; text-align:left }
.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;	}
	.page {  	width: 100%;  	max-width: none; padding: 0 20px;	}

     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;  padding-top:0px}
    .content,
    .aside { clear: both; float: none; width: 100%; }

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
	.nav {margin-top:10px; margin-right:auto !important; margin-bottom:30px; float:none !important}
    .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; }
	
	.guiderousseau {display:none}
	.sidemanif {margin-top:20px;}

}

/* fin */