header
{

height: 100px;
margin: auto;

}


#boutonaccueil
{
	width: 130px;
	height: auto;
background-color: rgb(0,112,166);
color: white;
font-size: 1.2em;
border-radius: 20px/20px;
position: absolute;
	left: 50px;
	top: 20px;
text-align: center;
}
  		@media (max-width:480px) {
			#boutonaccueil
					{	
				width: 80px;
					left: 30px;
					}
				}




/* 
........................
Organisation globale de la page
..................................
 */

 
 h1
 {
	position : absolute;
		left: 220px;
		top: 30px; 
	font-size: 2em;
	font-family: corbel, arial;
 }
   @media (max-width:480px) {
			h1
					{	
					top: 20px;
					left: 140px;
					}
				}

h2
{
	position: relative;
		top: 70px;
		left: 120px;
		font-family: corbel, arial;
}			
				
				
/* début du formulaire*/
fieldset
{
width: 800px;
height: 200px;
border: 3px solid black;
position : absolute;
	top: 250px;
	left: 100px;
font-size: 1.5em;
font-family: corbel,arial;
}
  		@media (max-width:480px) {
					fieldset
					{	
					left: 5px;
					top: 180px;
					width: 88%;
					font-size: 1.2em;
					height: 220px;
					}
				}

Label
{
	margin-top:20px;
	display:inline-block;
}
@media (max-width:480px) {
	Label
		{	
		font-size: 0.8em;
		}
	}


input
{
font-size: 1em;
position: absolute;
	left: 190px;
	margin-top:20px;
}
@media (max-width:480px) {
		input
			{	
	left: 110px;
	font-size: 0.7em;			
	width: 180px; 
			}
		}


#submit
{
text-align: center;
padding: 10px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
}
	@media (max-width:480px) {
	#submit
				{	
	font-size: 0.8em;
	padding: 10px;
	width: 100px;
	left: 80px;
				}
			}

fieldset p
{
position: absolute;
	left: 90px;
	top: 100px;
text-align: center;
}

#texte
{
position: absolute;
	left: 550px;
	top: 40px;
text-align: center;
padding: 20px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
}
  		@media (max-width:480px) {
			#texte
					{	
					left: 10px;
					top: 140px;	
					padding: 10px;
					font-size: 0.8em;
					}
				}


#newmdp
{
color: black;
position: absolute;
	left: 15px;
	top: 165px;
font-size: 0.9em;
}
  		@media (max-width:480px) {
			#newmdp
					{	
					left: 110px;
					top: 205px;	
					font-size: 0.8em;
					}
				}
				
/*mise en forme du cadre qui apparait si erreur de connexion*/

#cadre
{
margin: 110px 0 0 100px;
height: 200px;
font-size: 1.2em;
font-family: corbel,arial;
vertical-align: center;	

}
  		@media (max-width:480px) {
			#cadre
					{
					width: 95%;
					font-size: 0.8em;
					margin-top: 60px;
					margin-left: 5px;
					height: 140px;
					}
				}

#cadre p
{
	margin-left: 15%;
}
@media (max-width:480px) {
			#cadre p
					{	
				
					font-size: 1.1em;
					}
				}



/*mise en forme du cadre qui apparait si connexion ok*/

#boutonindexok
{
position: absolute;
	left: 30px;
	top: 110px;
text-align: center;
padding: 20px;
background-color: black;
color: rgb(191,217,34);
font-size: 1.5em;
word-wrap: break-word;
border-radius: 20px/20px;
text-decoration: none;
font-family: corbel,arial;	
width: 170px;
}
  		@media (max-width:480px) {
			#boutonindexok
					{	
					display: none;
					}
				}

#boutonsubmit
{
margin-top: 50px;
margin-left: 55px;
}
@media (max-width:480px) {
	#boutonsubmit
			{	
			margin-top: 15px;
		margin-left: 5px;
			}
				}
				
#boutonform, #boutonindex, #boutoncal
{
padding: 10px 20px 10px 20px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
font-family: corbel,arial;
margin-left: 10px;
display: inline-block;
text-align: center;
margin-top: 30px;
}
 @media (max-width:480px) {
	#boutonform, #boutonindex, #boutoncal
					{	
					
					font-size: 1em;
					padding: 10px;
					width: 150px;
					margin-top: 20px;
					margin-left: 15%;
					}
				}

#boutonconx, #boutonind
{
display: inline-block;
padding: 10px 20px 10px 20px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
font-family: corbel,arial;
margin-left: 180px;	
text-align: center;
margin-top: 30px;
}
  		@media (max-width:480px) {
#boutonconx, #boutonind
					{	
					font-size: 1em;
					padding: 10px;
					width: 150px;
					margin-top: 20px;
					margin-left: 15%;
					}
				}

#messerreur
{
position: absolute;
	left: 430px;
	top: 400px;
font-size: 1.2em;
}
  		@media (max-width:480px) {
			#messerreur
					{	
					display: none;
					}
				}
				
				

/***********************************************************************
page mot de passe oublié : inscription de l'email
******************************************************/	


#soustitrenwmdp
{
margin: 70px 0 30px 40px;
font-size: 1.2em;
font-weight: bold;
font-family: corbel,arial;
}
  		@media (max-width:480px) {
			#soustitrenwmdp
					{	
					font-size: 0.9em;
					margin-left: 10px;
					}
				}

				
#fsnewmdp
{
width: 310px;
height: 120px;
margin: 10px 0 0 60px;
border: 3px solid black;
font-size: 1.2em;
font-family: corbel,arial;
}
  		@media (max-width:480px) {
					#fsnewmdp
					{	
					margin-left: 5px;
					margin-top: 80px;
					width: 80%;
					font-size: 1em;
					height: 120px;
					}
				}				

				
#mailnwmdp
{
	margin: 20px 0 0 20px;
	font-size: 1.2em;
}				
				
#emailmdp
{
font-size: 1em;
margin-left: -95px;
}
  		@media (max-width:480px) {
				#emailmdp
					{	
					margin-left: -35px;	
width: 170px;	
font-size: 0.9em;				
					}
				}				
				
#submitmdp
{
text-align: center;
padding: 10px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
margin: -40px 0 0 -80px;
}
@media (max-width:480px) {
				#submitmdp
					{	
font-size: 0.8em;
width: 120px;
					}
				}	
	
#sstitre_envoye	
{
position: absolute;
	left: 150px;
	top: 260px;
	width: 90%;
	max-width: 400px;
	font-size: 1em;
}
  		@media (max-width:480px) {
			#sstitre_envoye
					{	
					font-size: 1em;
					top: 105px;
					}
				}
				
/*message d'erreur si le mail rentré pour la redéfinition du mdp n'est pas bonne*/				
#erreurmess
{
position: relative;
left: 150px;
top: 80px;
width: 90%;
max-width: 400px;
font-size: 1.2em;
text-align: center;
}
  		@media (max-width:480px) {
			#erreurmess
					{	
					font-size: 1em;
					left: 0px;
					top: 105px;
					}
				}
				
				

/***********************************************************************
page mot de passe oublié : reinitialisation de mot de passe
******************************************************/	
				
				
#fsreinit
{
width: 500px;
height: 160px;
border: 3px solid black;
position : absolute;
	top: 250px;
	left: 100px;
font-size: 1.2em;
font-family: corbel,arial;
}
  		@media (max-width:480px) {
					#fsreinit
					{	
					left: 10px;
					top: 200px;
					width: 360px;
					font-size: 1em;
					height: 160px;
					}
				}
				
#mess_reinit_ok
{
text-align: center;
position: absolute;
	left: 105px;
	top: 260px;
	width: 90%;
	max-width: 400px;
	font-size: 1em;
}
  		@media (max-width:480px) {
			#mess_reinit_ok
					{	
					font-size: 1em;
					top: 200px;
					left: 20px;
					}
		}
				
#password_reinit, #confirm_reinit
{
	position: absolute;
		left: 240px;
}
  		@media (max-width:480px) {
		#password_reinit, #confirm_reinit
					{	
					left: 160px;
					width: 200px;
					}
		}
					

#submit_reinit
{
text-align: center;
padding: 10px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
position: absolute;
	left: 200px;
	top:-20px;
}					
					
#mess_reinit_pasok
{
text-align: center;
position: absolute;
	left: 120px;
	top: 250px;
	width: 90%;
	max-width: 600px;
	font-size: 1.2em;
}
  		@media (max-width:480px) {
			#mess_reinit_pasok
					{	
					font-size: 1em;
					top: 200px;
					left: 10px;
					}
		}					
					
#boutonrat
{
padding: 40px 40px 40px 40px;
background-color: black;
color: rgb(191,217,34);
font-size: 1em;
border-radius: 20px/20px;
text-decoration: none;
font-family: corbel,arial;
margin-left: 320px;	
text-align: center;
margin-top: 0px;
}