@CHARSET "utf-8";

body {
	padding: 				1em;
	background-image: 		url('../images/arriereFondTransparent35.jpg');
	background-size:		cover;
	font-family:			"Eras Medium ITC", Candara, "trebuchet ms", Arial, Helvetica, sans-serif;  
	color:					rgba(102,0,102,1); /*violet*/
}

.largeur960 {
	width:					960px;
	margin:					0 auto;
    position:           	relative;
}
.colonne40pourcent {
	width:					40%;
}
.colonne50pourcent {
	width:					50%;
}
.colonne60pourcent {
	width:					60%;
}
.droite {
	float:					right;
}
.gauche {
	float:					left;
}
.finFloat {
	clear:					both;
}

.btn {
	line-height:			1.1em; /*agrandir de 2 les champs*/
	width:					252px;
	padding:				8px 0 8px 0;/*marge haut bas 8 et gauche droite 80px et ça agrandi le champ*/
	/*margin:					3em;*/
	border-radius:			5px;/*pour arrondir les angles*/
	background-color:		rgba(102,0,102,1);/*fond de couleur violet*/
	color:					#fff;
	text-decoration:		none;	
	
	margin: 0 1em;
	display: inline-block;
	text-align: center;
}
 .btn:hover {
                background-color:   rgba(102,0,102,1);/*fond de couleur violet*/
                color:              #fff;
                font-weight:		bold;
            }
/******************BASE***********************/
.bandeau {
	background-image:		linear-gradient(10deg, rgba(102,153,0,1) , white);
	height:             	200px;
}
.logoAuSavoirFaire {
	position:				relative;
	height:					200px;
	margin:					0 0 0 50px;
}
#btnLogin {	
	float:					right;
	margin:					-5px 50px 0px 0px;
	width:					240px;
}
#btnLogout {	
	float:					right;
	margin:					-5px 50px 0px 0px;
	width:					240px;
	height:					100px;
	padding:				50px 0px 0px 0px;
	background:				rgba(102,0,102,1);/*fond de couleur violet*/
	color:					#fff;
}
#planGoogle {
	float:					right;
	margin:					110px 30px 0px 0px;
	width:					70px;
}
/**************** MENU **********************/
nav ul {	
	padding:				15px 0 5px 0;
	position:				justify;
	display:				table;
	width:					100%;
			}
			
			nav li {
				display:			table-cell;
				list-style-type:	none;
				padding:			0 15px 0 0;
			}
			
			nav li:last-child {
				padding:			0;
			}
			
			nav a {
				/* faire que le lien occupe l'entier du parent li */
				display:			block;
				
				/* largeur du bouton */
				/*width:				104px; NE PAS METTRE DE LARgeur sinon il y a la marge de droite qui persiste*/
				
				/* position du texte  */
				line-height:		2em;             /* centré sur 40 pixel de haut */
				text-align:			center;           /* centré en largeur */
				
				/* Caractéristique de couleur et de polices */
				text-decoration:	none;
				background-image:	linear-gradient(10deg, rgba(102,153,0,1) , white);
				color:				rgba(102,0,102,1);
				font-family:		"Eras Medium ITC", Candara, "trebuchet ms", Arial, Helvetica, sans-serif;  
				font-weight:		bold;
				
				border-radius:		5px;
				position:			justify;
			}
            
            nav a:hover {
                background-color:   rgba(102,0,102,1);
                color:              #fff;
            }
            
/*****************FORMULAIRE**************************/

input {
				/*line-height:		2em; /*agrandir de 2 les champs*/
				padding:			0 10px;/*marge haut bas 0 et gauche droite 10px*/				
				border-radius:		5px;/*pour arrondir les angles*/
				background-color:	rgba(227,255,210,1);/*fond de couleur vert clair*/
				width:				250px; /*pour agrandir le champ de formulaire*/
				margin:				5px 0;/*espace horizontal entre les champs 5px et 0 en vertical*/
				color:				#000000;
				height:				30px;
			}
			
textarea {
				color:				#000000;
				font-size:			16px;/*taille police*/
				background-color:	rgba(227,255,210,1);/*fond de couleur vert clair*/
				vertical-align: 	top;
				width:				515px;/*largeur de la plage de texte*/
				height:				100px;/*hauteur de la plage de texte*/
				border-radius:		5px;/*pour arrondir les angles*/
				resize:				none;/*ne redimensionne pas ainsi l'utilisateur ne peut pas modifier la taille de la fenêtre*/
			}

input:focus {
				background-color:	#FFF;/*les plages input du formulaire se mettent en blanc quand le curseur se met à l'intérieur*/
			}

input[type="submit"] {
				width:				517px;/*largeur du bouton envoyer*/
				color:				rgba(102,0,102,1);
			}
input[type="submit"]:hover {/*changement de fond et de couleur quand le curseur passe dessus*/
				/*background-color:	#FFF;fond de couleur blanc mais seulement quand on clic*/				
				cursor:				pointer;/*changer le curseur en doigt */
				font-weight:		bold;/*met la police en gras*/
			}
input[type="reset"] {				
				color:				rgba(102,0,102,1);
			}			
input[type="reset"]:hover {/*changement de fond et de couleur quand le curseur passe dessus*/
				/*background-color:	#FFF;fond de couleur blanc mais seulement quand on clic*/				
				cursor:				pointer;/*changer le curseur en doigt */
				font-weight:		bold;/*met la police en gras*/
			}
label {
				width:				130px;
				display:			inline-block;/*obligatoire avec width pour que les label ont une largeur de 150px*/				
				font-weight:		bold;
			}
		
.aligneEnHaut {
				vertical-align:		top;/*pour que le sommet de textarea soit aligné sur haut avec le label*/
			}
.aligneAuCentre {
				vertical-align:		middle;/*pour que le le type="range" soit centré avec le label*/
			}
/*******************TABLEAU*************************/
.TableauBackground {	
	margin-right:			-40px;		
	
    position:           	relative;
    
	}
	
table {
	border-collapse:		collapse;
	width: 					98%;					
}

table td, th {
	padding:				0.3em 0.8em;
	text-align: 			left;
}

th {
	background-color:		rgba(227,255,210,1);
	/*background-image: 		url('../images/parquetGrisPourFond.fw.png');*/
	line-height: 			2em;
}
.thEnh1 {
	background:				none;
	line-height: 			0em;
	padding-top:			0;
	font-style:				italic;
}
/*Pour tous les liens dans le back office*/
 table a {
				color:					#23527C;
				font-family:			"Eras Medium ITC", Candara, "trebuchet ms", Arial, Helvetica, sans-serif;   
				font-style:				italic;
				font-weight:			bold;						
}			
/***************PIED*********************/
#pied {
	background-image:		linear-gradient(10deg, rgba(102,153,0,1) , white);	
	color:					rgba(102,0,102,1);
    height:             	65px;    
    text-align:				center;
    padding-top:			20px;      	
}
#texteTourne {
		display:			inline-block;
		transform-origin: 	center center;
		transform:			rotate(-90deg);	
		font-size:			8px;
		margin-top:			6px;	
	}
	
/*********************MEDIA****************************/
@media all and (max-width: 960px) {      /* adaptation tablette */
				.largeur960 {
					width:			96%;
					padding:		0 2%;
				}		
								
			}
			
@media all and (max-width: 600px) {      /* adaptation phablette */
				
				.droite {
					clear:              both;
				}
				
				.gauche {
					clear:              both;
				}
				#texteTourne {
					display:			none;	
				}											
			}

@media all and (max-width: 450px) {      /* adaptation mobile */
				nav ul {
					padding:			10px 5px 7px 5px;
				}
				
				nav li {
					display:			block;
					list-style-type:	none;
					margin-bottom:		3px;
				}
				
				nav li a {
					display:			block;
					width:				98%;
					line-height:		3.5em;
				}				
				
				nav li:last-child {
				padding:				0 15px 0 0;
				}
				
				menu ul {
					padding:			10px 5px 7px 5px;
				}
				
				menu li {
					display:			block;
					list-style-type:	none;
					margin-bottom:		3px;
				}
				
				menu li a {
					display:			block;
					width:				98%;
					line-height:		3.5em;
				}
				
				div {
					display:			block;
				}
			
				.logo {
					float:				none;
				}
				
				.bandeau {
					background-image:		linear-gradient(10deg, rgba(102,153,0,1) , white);
					height:             	100px;
				}
				.imageAccueil{
					display:			none;
				}
				.logoAuSavoirFaire {
					position:				relative;
					height:					100px;
					margin:					0 0 0 50px;
				}
				#planGoogle {
					
					margin:					0px 150px 0px 0px;
					width:					70px;
				}				
			
				#pied {
					background-image:		linear-gradient(10deg, rgba(102,153,0,1) , white);	
					color:					rgba(102,0,102,1);
				    height:             	100px;    
				    text-align:				center;
				    padding-top:			20px;      	
				}
				
			}