/* CSS Document */

/* Myriam Gagnon */

body {
	margin: 0;
	padding: 0;
	background-color: #030; /* Vert foret */
	font-family: Arial, Helvetica, sans-serif;
}


h2 {
	font-size: 150%;
	margin: 13px 0;
	color: #fff;
}

h3 {
	color: #300; /* brun */
	font-size: 117%;
	margin: 16px 0;
}

h4 {
	font-size: 100%;
	margin: 18px 0;
}

p {
	margin: 16px 0;
}

/************ En-tête ******************/
#entete {
	position: relative;
	height: 100px;
	width: 1000px;
}

#logo {
	position: absolute;
	margin: 0;
	left: 10px;
	top: 5px;
	width: 193px;
	height: 143px;
	background-image: url(../images/logo.jpg);
	text-indent: -9999px;
	z-index: 10;
}
		
#logo a {
	position: absolute;
	left: 0;
	top: 0;
	width: 193px;
	height: 143px;
	outline: none;
}
		

#conteneur {
	margin: 0 auto;
	width: 1000px;
}

#banniere {
	position: relative;
	z-index: 1;
}

h1#banniere {
	background: url(../images/bannieres-aleatoires/banniere.jpg);
	background-repeat: no-repeat;
	text-indent: -9999px;
	width: 1000px;
	height: 319px;
	margin: 0;
}

/*****************************************/
/*			Menu pricipal			*/
/*****************************************/

ul#menu-princ {
	margin: 0;
	padding: 15px;
	background-color: #330;
	text-align: center;
}

#menu-princ li {
	display: inline;
	margin: 18px;
	font-weight: bold;
}

#menu-princ a {
	color: #fff;
	text-decoration: none;
	outline: none;
}

#menu-princ a#actif {
	color: #666;
	text-decoration: none;
	outline: none;
}

#menu-princ a:hover {
	color: #666;
	text-decoration: none;
	outline: none;
}


/************* fin du menu *************/

#contenu {
	background-color: #060;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}

#contenu a {
	color: #76b009;
	outline: none;
	text-decoration: none;
}

#contenu a:hover {
	color: #330;
	text-decoration: none;
	outline: none;
}


#col-droite {
	margin-left: 250px;
	padding: 20px;
	background-color: #060;	 
}

#legende {
	text-align: center;
}

#reglements li {
	margin: 16px 30px;
	list-style-type: decimal;
}

.square li {
	margin: 16px 45px;
	list-style-type: square;
}

/*********** colonne gauche de l'accueil ************/
#cadre {
	width: 1000px;				/* pas d'overflow ici */
	background-color: #76B009;
}

#col-gauche {
	float: left;
	width: 250px;
	padding: 10px;
}

#col-gauche h3 {
	margin: 30px 0 30px 10px;
}

/**************** Nav Secondaire ******************/

#nav-secondaire li {
	width: 220px;
	height: auto;
	padding:  6px 0;
	margin : 20px;
	font-variant: small-caps;  /* espacement entre les lettres */
	
}	

#nav-secondaire a {
	position: absolute;
	width: 220px;
	height: auto;
	outline: none;
	text-decoration: none;
	font-variant: small-caps;
	
}

/*Tres important !!!! Attention a l'ordre : Link Visited Hover (Active) */
#nav-secondaire a:link, #nav-secondaire a:visited {
	color: #321A58;
}

#nav-secondaire a:hover {
	font-weight: bold;
	color: #fff;
}

/* bouton enfoncer sur le lien */
#nav-secondaire a:active {
	color: #939;
}

#nav-secondaire #sec-actif {
	font-weight: bold;
	color: #fff;
}


#adresse {
	line-height: 2;
	margin-left: 8px;
}



/****************** MINI-QUIZ ******************/
#mini-quiz {
	position: relative;
	width: 450px;
	margin: 0 auto; 
}

#mini-quiz fieldset {
	border: 1px solid #023e02;
	text-align: left;
	padding: 10px;
	/*
	avec un reset ajouter
	marge interne
	*/
}

#mini-quiz legend {
	border-left: 1px solid #023e02;
	border-right: 1px solid #023e02;
	padding: 0 15px;
	font-weight: bold;
	/*
	avec un rest ajouter
	image externe a gauche
	et probablement reajuster
	la marge interne a gauche
	et droite
	*/
}

/* avec reset devra etre aouté les selecteurs suivant :
toujours mettre #mini-quiz devant pour le input et les boutons

pour le input : marge externe et marge interne
pour les boutons utilisez les id : submit et reset marge externe
*/

#mini-quiz #zone-message img {
	position: absolute;
	bottom: 5px;
	right: 12px;
}

#mini-quiz #zone-message p {
	position: absolute;
	/* sera a reajuster avec le reset */
	top: 50px;
	right: 150px;
	
	width: 100px;
	height: 50px;
	text-align: left;
}



/****************** FIN MINI-QUIZ ******************/

/************ Formulaire ******************/ 

 
#formulaire #remarque {
	font-size: 12px;
	margin-left: 25px;
}

#formulaire fieldset {
	background-color: #004800;
	border: 1px solid #001A00; 
	margin: 25px;
	padding: 20px;
}

#formulaire legend {
	color: #001A00;
	font-size: 18px;
	font-weight: bold;
	border-left: 1px solid #001A00;
	border-right: 1px solid #001A00;
	margin-left: 20px; /* tasse vers la droite */
	padding: 0 8px; /* espacement a l'interieur des | Infos | */
}

/****************  les étiquettes ou label ****************/
#formulaire p label {
	display: inline-block;
	width: 250px;
	font-weight: bold;
	text-align: right;
	/* on pourrait mettre le curseur sur les label */
}


/****************  les différents champs ****************/
#formulaire input, #formulaire select, #formulaire textarea { margin-left: 12px; }

#formulaire p input {
	display: inline-block;
	padding: 2px 4px;
}

/****************  benevolat ****************/
#benevolat label, #benevolat input {display: inline-block;}

#benevolat label {
	text-align: right;
	font-weight: bold;
}

/* important : donne la priorité a la valeur sur laquelle elle est sspecifié */
#rep-benevolat label {
	display: inline-block;
	width: 40px !important;
	text-align: left !important;
	margin-left: 15px;
	font-weight: normal !important;
	/* curseur */
}

#rep-benevolat input {
	display: inline-block;
	text-align: left !important;
	margin-left: 0;
	padding-left: 5px;
}

/**** espacement à l'intérieur de la liste déroulante ****/
#formulaire select option {padding: 2px 4px;}


/****************  sondage ****************/
#formulaire #sondage p {
	font-weight: bold;
}

.case-cocher label {
	display: inline-block;
	vertical-align: top;
}

.case-cocher-ligne {display: inline-block;}

.case-cocher-ligne  label {
	margin-left: 10px;
	width: 106px !important;
	text-align: left !important;
	font-weight: normal !important;
}


/****************  commentaire ****************/

#zone-commentaire label {vertical-align: top;}

#zone-commentaire textarea {
	/* resize: vertical; */
	resize: none;	
}

p#btnEnvoyer {
	text-align: right;
	margin: 10px 40px;
}

/* sélecteur d'attribut */
#formulaire #btnEnvoyer input {
	font-size: 18px;
	font-weight: bold;
	padding: 5px 15px !important;
	/* background-color: #01DF01; */
	border-radius: 5px;
}

#formulaire #btnEnvoyer input:hover {
	border: 2px outset #5e3c00;
	background-color: #5e3c00;
	color: #fff;
}

/* :active n'est pas supporté par MSIE8 et les versions antérieures */
#formulaire #btnEnvoyer input:active {
	border: 2px inset #b58737;
	background-color: #b58737;
}

	
/****************  pseudo-classes ou pseudo-élément ****************/
/* select:focus pourrait ne pas y avoir de focus... */
#formulaire input:focus, textarea:focus, select:focus {
	background-color: #efefef; /* javascript backgroundColor */
	color: #000;
}

/****************  message d'erreurs du formulaire ****************/

.erreur {
	margin-left: 175px;
	font-size: 11px;
	color: #f00;
}


/****** fin formulaire ****/


.tableau td {
	border: thin solid;
	width: 250px; 
	padding: 5px;
	text-align: center;
}

.tableau th {
	border: solid; 
	width: 250px; 
}

/******************************************/
/*		Pied de page		*/
/*****************************************/

#pied-page {
	color: #fff;
	background-color: #330;
	font-size: 12px;
	padding: 20px;
	text-align: center;
}

#pied-page p {
	margin-top: 30px;
}

#pied-page a {
	color: #fff;
	text-decoration: none;
}
	
#pied-page ul li {
	display: inline;
	margin-right: 50px;
}

#pied-page a:hover {
	color: #666;
	text-decoration: none;
}

/********************************/
/* les classes */
/********************************/

.clearHR {
	margin: 0;
	clear: both;
	visibility: hidden;
}	

.centre {
	text-align: center;
}
	
.img-gauche {
	float: left;
	margin: 10px;
	width: 171px;
	height: 171px;
}

/************ LÉGENDE COULISSANTE **************/
.box {
	position: relative;
	/* hauteur et largeur de l'img. */
	height: 175px;
	width: 197px;
	margin: 15px;
	display: inline-block;
	overflow: hidden; /*pour cacher le texte */
}
	
.box img {position: relative;}

.box .legende-simple {
	position: absolute;
	height: 30px; /* hauteur de larriere plan noir */
	width: 197px; /* largeur de l'imgae */
	background-color: rgba(0,0,0,0.8); /* canal alpha -> opacité */
	display: block;
	bottom: -30px;	/* fait disparaitre le texte */
	line-height: 25px;
	text-align: center;
	
	color: #fff;
	z-index: 100;
	
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	left: 0;
}

.box .legende-simple p {margin: 0;}

.box:hover .legende-simple {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	opacity: 1;
}