@charset "utf-8";

 /* Style du formulaire*/
form {
  	/* Uniquement centrer le formulaire sur la page */
  	margin: 1% auto;
  	width:95%;
}

form div + div {
  margin-top: 0.5em;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 35%;
  	text-align: right;
	/*margin-left:1%;
	padding:5px 0;*/
	font-size:90%;
	vertical-align: middle;
}

input{
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  /*font: 1em sans-serif;*/

  /* Pour que tous les champs texte aient la même dimension */
  width: 25%;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #120976;
}

input:focus {
  /* Pour souligner légèrement les éléments actifs */
  border-color: #0C8FEC;
}

input:invalid {
  border: 2px dashed red;
}
.input {
  /* Pour placer le bouton à la même position que les champs texte */
  /*padding-left: 9em; /* même taille que les étiquettes */
}

input {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les étiquettes et les champs texte */
  /*margin-left: .5em;*/
}

input[type=text], input[type=password]{
    margin:0.5em auto;
    padding:6px 6px;
	border: 1px solid #120976/*#00004d*/;;
	-moz-border-radius:0.3em;
	-webkit-border-radius:0.3em;
	-khtml-border-radius:0.3em;
	font-size:90%;
	color:#0C8FEC;
	outline: none; /*supprime la bordure extèrieure lorsque le champ a le focus, à utiliser avec  input[type=text]:focus ci-dessous*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-left: 0.5em;
	vertical-align: middle;
}
input[type=text]:focus, input[type=password]:focus {
	/*change la couleur de la bordure lorsque l'on clique dans le champ de saisi*/
	border: 2px solid #0C8FEC;
	/*border-color: #0C8FEC;*/
}

/* style des boutons */
input[type=submit] {
	display:block;
	margin:5% auto 5%;
	width: 30%;
	background-color:#120976/*#00004d*/;
    color:#FFF;
	border: 2px solid #120976/*#00004d*/;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
    cursor:pointer;
	padding:6px 35px;
	font-style:oblique;
	font-size:130%;
}
input[type=button] {
	display:block;
    background-color:#120976/*#00004d*/;
    color:#FFF;
	border: 2px solid #120976/*#00004d*/;
	/*font-style:oblique;*/
	font-size:120%;
	margin:0 auto;
	padding: 4px 10px;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
    cursor: pointer;
	width: 30%;
}
input[type=submit]:hover, [type=button]:hover {
    background-color:#0C8FEC;
    color: #120976/*#00004d*/;
    border: 2px solid #120976/*#00004d*/;
}

@media screen and (min-width: 1025px) and (max-width: 1280px){
	form {width:95%;}
	label {width:35%;}
	
	input[type=text], input[type=password]  {
		font-size:85%;
	}
	
	input[type=submit] {
		margin:6% auto;
		font-size:120%;
		padding:6px 15px;
	}
	
}

@media screen and (min-width: 600px) and (max-width: 1024px){		
	form {width:95%;}
	
	label {
  		width:85%;
		text-align:left;
		margin-left:8%;
	}
	
	/*input {width: 30%;}*/
	
	input[type=text], input[type=password]  {
		display:block;
		margin:0 auto;
		font-size:90%;
	}

	input[type=submit] {
		margin:6% auto;
		font-size:110%;
		width: 35%;
		padding:6px 10px;
	}
}

@media screen and (max-width: 599px){
	form {width:98%;}
	
	label {
  		width:85%;
		text-align:left;
		margin-left:5%;
	}
	
	/*input {width: 30%;}*/

	input[type=text], input[type=password] {
		display:block;
		margin:0 auto;
		font-size:80%;
		width:40%;
	}
	input[type=submit] {
		margin:6% auto;
		font-size:90%;
		width: 40%;
		padding:6px 10px;
	}
}