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

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base
   
   Couleurs:
	rouge #C5112E
	gris foncé  #353535
	gris contour textbox #CECECE
	gris très pâle #E8E8E8
	gris très très pâle fond site #F8F8F8
	
	Page : 1005px
	lapage: 960px
	partager: 45px
	main : 680px, padding: 20px + 20px
	aside: 240px, padding: 20px 20px; 
	Campagne: 940px, padding: 20px + 20px. 900-60 = 840/4 = 210px => logo campagne
	Pied: 680px

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

body { text-align: center; background: #F8F8F8; }
.partager { width:45px; height:508px; background:url(img/partager-fond.png) no-repeat; text-align:right; position: absolute;  z-index:1; margin-left:-45px; }
.supheader {position: relative; width:960px; margin:0 auto; padding:0 40px 0 0; text-align:right; z-index:2;  }
.supmenu {float:right;}
.page { position: relative; width: 960px; margin: 0 auto; padding: 0; text-align: left; z-index:3;  }

.header { padding: 20px; margin:0; text-align: center; background:#fff; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; -moz-box-shadow:0 0px 8px 0 #CECECE; -webkit-box-shadow:0 0px 8px 0 #CECECE; box-shadow: 0 0px 8px 0 #CECECE; z-index:3; }
.main { position:relative; padding: 20px; text-align: left; background:#fff; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-bottom-left-radius:15px; -webkit-border-bottom-right-radius:15px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; -moz-box-shadow:0 3px 8px 0 #CECECE; -webkit-box-shadow:0 3px 8px 0 #CECECE; box-shadow: 0 3px 8px 0 #CECECE; z-index:2; min-height: 600px;  }
.campagne {clear:both; margin:30px 0;}
.footer { clear: both; padding: 5px 10px 20px 30px; background:url(img/pied-fond.png) no-repeat; z-index:1; min-height:70px; }

.wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
.content { min-height: 490px; }
.aside { float: right; width: 25%; min-width:214px; overflow: hidden; border-left: 3px solid #C5112E; padding-left:20px; }
.arbo {display:none;}

/* Entete et barre de navigation
------------------------------------------ */





/* Supheader */
.supheader { font-family:"Century Gothic", Arial, sans-serif; font-size:8pt; margin-bottom:5px;}
.supheader p {margin-bottom:0;}

/* Header */
.header { padding:20px;  }
.header .spip_logos { float:none; margin:0; padding:0; text-align:center; }
.header #logo,
.header #logo a,
.header #logo a:hover { background: transparent; text-decoration: none; color: #222; }
.header #slogan { margin: 0; }

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


/* Partager */
.ico-partager {padding:0 6px 6px 0;}
.partager a:hover, .partager a:active, .partager a:focus {background:none;}

.partage {float:right; padding:8px 10px 0 0;}
.partage a:hover {background:none;}


.nav { border-bottom: 3px solid #C5112E; background:#fff; }
.nav ul { }
.nav ul li {}
/*.nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; }
.nav ul li.on a { background: #EED; color: #222; font-weight: normal; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { background: #222; color: #FFF; }
*/
/*#formulaire_recherche { position: absolute; top: 50px; right: 50px; border: 0; }*/




.footer .colophon { float: left;  margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

.footer, .footer a {color:#FFF;  font-family:"Century Gothic", Arial, sans-serif; font-size:7.5pt; font-weight:bold;}
.footer a:visited {color:#F8F8F8;}
.footer a:hover {color:#F8F8F8; background-color:none;}

/* Autre */

.griscontour {color:#CECECE;}






/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.supheader,
.nav,
.arbo,
.aside,
.footer { display: none; }
}

/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 680px) {

/* passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.main,
.footer,
.wrapper,
.content,
.aside { width: auto !important; margin: auto !important; padding: auto !important; }

.footer {padding: 10px; margin:0 10px !important; text-align: center; background:#000; background-image:none; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-bottom-left-radius:15px; -webkit-border-bottom-right-radius:15px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; -moz-box-shadow:0 0px 8px 0 #CECECE; -webkit-box-shadow:0 0px 8px 0 #CECECE; box-shadow: 0 0px 8px 0 #CECECE; z-index:0; }
.supheader, .partager {display:none;}

.page { margin: 0; padding: 5%; }

/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */

.content,
.aside { clear: both; float: none !important; width: auto !important; }
.nav ul li a { float: none; border: 0; }
#formulaire_recherche { display: none; position: static; text-align: center; }
.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; }

}

/* end */