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



   layout.css

   Disposition des blocs principaux

   cf.: http://romy.tetue.net/structure-html-de-base



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



/* Elements principaux

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

body { text-align: center; background:#FFF;}

.page {

	position: relative;

	width: 95%;

	max-width: 95%;

	margin: 2em auto;

	text-align: left;

	background-color: #FFFFFF;

}

.header {
    background-color: #FFFFFF;
    width: 100%;
}

.main {

	padding: 1.5em 1.5em;
    width: 90%;
	background-color: #FFFFFF;
	margin: 0 auto;
}

.footer {

	clear: both;

	padding: 1em 0 0;

	margin: 1em 0 0 0;

	border-top: 1px solid #999;

	background-color: #FFFFFF;

}



/* largeur calculee du wrapper: 960*70%  = 672px */

.wrapper {

	clear: both;

	margin-left: auto;

    margin-right: auto;

	width: 100%;

	overflow: hidden;

	padding-left: 50px;

	padding-right: 50px;

}

.wrapper2 {

	clear: both;

	margin-left: auto;

    margin-right: auto;

	width: 100%;

	overflow: hidden;

	padding-left: 50px;

	padding-right: 50px;

}

.content { min-height: 400px; }

/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/

.aside { float: right; width: 23.333%; overflow: hidden; }    

  

/* Entete et barre de navigation

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

.header {
    width: 100%;
     top: 2em;
}
.header2 {
    width: 100%;
    position: relative;
    top: 2em;
}
.header .spip_logo_site {
    display: block;
    margin: 0;
    line-height: 1;
    font-weight: bold;
    text-align: center;
}

.header .spip_logo_site,

.header .spip_logo_site a,

.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#FFF; }

.header .spip_logo_site a:hover  {color:#FFF;}

.header .spip_logo_site a:hover img {
    opacity: 0.7;
    display: inline-block;
    text-align: center;
}

.header .spip_logo {
    margin-bottom: 0;
    width: 1900px;
}

.slogan {
    margin: 0 auto;
    text-align: center;
    font-family: 'Inconsolata', "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 5em;
}



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



.nav {
    width: 100%;
    position: fixed;
    top: 0px;
    clear: both;
    z-index: 2000;
    background-color: #FFF;
    margin-top: 1px;
}
.navul {
    background-color: #FFF;
    border-bottom: 2px dotted #478E12;
    border-top: 2px dotted #478E12;
}
.nav li {display:inline; font-size: 1.1em;

}

.nav li a {

	display: inline-block;

	padding-top: 0.5em;

	padding-right: 0.5em;

	padding-left: 0.5em;

	padding-bottom: 0.5em;

	margin: 0 0.25em 0.5em 0;

	border-radius: 0.25em;

	text-decoration: none;

	background-color: #F7F7F7;

	color: #222;

	border-top-color: #605859;

	border-bottom-color: #605859;

}

.nav li.on a { background:#a40737;color:#fff;  font-weight: normal; }

.nav li a:focus,

.nav li a:hover,

.nav li a:active { background: #87b051; color:#fff; }

 



.footer .colophon {
    height: 40px;
    width: 100%;
    text-align: center;
}

.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 20px;	}

	.page {  	width: 100%;  	max-width: none; 	}

}

 

/* largeur maximum 640px */

@media (max-width: 640px) {

     /* layout */

    .wrapper,

	.wrapper2,

    .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;
    text-align: center;
}

    .footer .generator { display: none; }



    /* header du calendrier full-calendar */

    table.fc-header td { display: block; text-align: left; }



}



/* fin */