/*le formulaire envoyer mail au groupe*/
#pageTraitementCommande{
	position:absolute;
	z-index:110;
	background-color:#FFF;
	border:#000 1px solid;
	
	/* gestion de l'ombre */
	box-shadow: 0px 3px 15px 0px #656565;
	-webkit-box-shadow: 0px 3px 15px 0px #656565;
	-moz-box-shadow: 0px 3px 15px 0px #656565;
	-ms-box-shadow: 0px 3px 15px 0px #656565;
	-o-box-shadow: 0px 3px 15px 0px #656565;
	padding:1rem;

}
#pageTraitementCommande #pageCommande{
	font-family:Verdana, Helvetica, sans-serif;
	margin: 0 auto 5%;
	width:30rem;
}
#pageTraitementCommande #pageCommande .ferme{
	cursor:pointer;	
	width:1.12rem;
	margin-left:auto;
}	
#pageTraitementCommande #pageCommande #titrePage {
	font-size:1.5rem;
	text-align:center;	
}

#pageTraitementCommande #page{
	margin-top:1rem;
}
#pageTraitementCommande #pageCommande #envoyerMail,
#pageTraitementCommande #pageCommande #envoyerGroupe,
#pageTraitementCommande #pageCommande .boutton {
	margin-top:.5rem;
	margin-bottom:.5rem;
	padding:5px 15px;
	background:#f8f8f8;
	cursor:pointer;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 
	-o-border-radius:5px; 
	-ms-border-radius:5px;
	border-radius:5px;
	color:#666;
	width:8rem;
	margin-left:auto;
	cursor:pointer;	
	border:solid 1px #666666;
	text-align:center;	
	display: inline-block;
}
#pageTraitementCommande #pageCommande #envoyer{
	margin-left:auto;	
}
#pageTraitementCommande #pageCommande input[type=text] {
	padding:5px; 
	border:2px solid #ccc; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size:1rem;
}
		
#pageTraitementCommande #pageCommande input[type=text]:focus {
	border-color:#333;
			
}
		
#pageTraitementCommande #pageCommande textarea {
    resize: none;
	font-size:1rem;
	font-family:Verdana, Geneva, sans-serif;
}
#pageTraitementCommande #pageCommande select{
	width: 19rem;
	font-family:Arial, sans-serif;
	padding:3px;
	margin: 0;
	-moz-border-radius:5px;  
	-webkit-border-radius:5px;  
	-o-border-radius:5px;  
	-ms-border-radius:5px;   
	-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff outset;
	-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff outset;
	box-shadow: 0 3px 0 #ccc, 0 -1px #fff outset;
			
	border:solid 1px;
	outline:none;
	display: inline-block;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;
	font-size: 1.3rem;
	color: #666;
}
#pageTraitementCommande #pageCommande #panorama{
	margin-left:auto;
	margin-right:auto;
	border:1px solid #000;
	background-color:#969696;
	margin-bottom:1rem;
}
#pageTraitementCommande #pageCommande #comboPieces{
	width: 15rem;
}
#pageTraitementCommande #pageCommande #parametres{
	display:flex;
	flex-wrap:wrap;
}
#pageTraitementCommande #pageCommande span{
	font-family:Arial, sans-serif;
	/*font-size:1.1rem;*/
	padding-top:.5rem;
	padding-bottom:.5rem;
}
#pageTraitementCommande #pageCommande #parametres #groupe{
	width:50%;
}
#pageTraitementCommande #pageCommande #parametres #groupe select{
	width: 3.5rem;
}
#pageTraitementCommande #pageCommande .bouton{
	cursor:pointer;
	font-family:Arial, sans-serif;
	margin-top:.5rem;
	margin-bottom:.5rem;
	padding:5px 15px;
	background:#f8f8f8;
	cursor:pointer;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 
	-o-border-radius:5px; 
	-ms-border-radius:5px;
	border-radius:5px;
	color:#666;
	width:5rem;
	margin-left:auto;
	cursor:pointer;	
	border:solid 1px #666666;
	text-align:center;	
	display: inline-block;
	float:right;
}
/*connection deconnection*/
#system{
	background-color: #fff;
    box-shadow: 0 3px 15px 0 #656565;
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;	
	/* gestion de l'ombre */
	box-shadow: 0px 3px 15px 0px #656565;
	-webkit-box-shadow: 0px 3px 15px 0px #656565;
	-moz-box-shadow: 0px 3px 15px 0px #656565;
	-ms-box-shadow: 0px 3px 15px 0px #656565;
	-o-box-shadow: 0px 3px 15px 0px #656565;
	
}
#system #lesCommandes{
	margin-left: auto;
    margin-right: auto;
	margin-top:1rem;
    text-align: center;
	width: 100%;
}
#system .commandes{
	border:1px solid #333;
	border-radius:5px;
	padding:.3rem;
	font-family:Verdana, sans-serif;
	font-size:1rem;
	color:#666;
    margin-left: auto;
	margin-right:auto;
    text-align: center;
    width: 9.5rem;
	cursor:pointer;
	display:inline-block;

}
/*================================================== GESTION langues ================================================*/
.international ul li{
	display: inline;
    list-style: none; /* pour enlever les puces sur IE7*/ 
}
/*================================================== GESTION précédent / suivant ================================================*/
#precedentSuivant{
	background-color:#FFF;
	border-radius:1rem;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:-5rem;
	height:2.7rem;
	padding:0.5rem;
	width:3rem;
	float:left;
}
#precedentSuivant #precedent{
	cursor:pointer;
	float:left;
}

#deconnexion{
	width:4rem;
	margin-left:auto;
	margin-right:3rem;	
}
#qui{
	font-family:Verdana, sans-serif;
	font-size:1rem;
	color:#666;
    margin-left: auto;
	margin-right:3rem;	
    text-align: right;
    width: 15rem;
}
form #ecran1,
form #ecran2{
	z-index:50;	
}
form #ecran1 h1,
form #ecran2 h1{
	font-family:'Arial Black', Gadget, sans-serif;
	font-size:3.5rem;
	color:#666;
	/*largeur maxi du site */
	max-width:28rem;
	padding:0;
	margin:0;
	margin-left:auto;
	margin-right:auto;	
}
	
form #ecran1 #contenuDialogue,
form #ecran2 #contenuDialogue{
	font-family:Arial, sans-serif;
	font-size:1.5rem;
	color:#666;
	/*largeur maxi du site */
	max-width:29rem;
	/*largeur mini du site */
	min-width:479px;
	background-color:#fff;
	background:none repeat scroll 0 0 #fff;
	opacity:1;
	border-radius:5px;
	border:solid 1px #666;
	text-align:center;
	box-shadow: 10px 10px 20px #000;
	margin-top:-1rem;
	margin-left:auto;
	margin-right:auto;
	/*hauteur de la boite de dialogue*/
	height:auto;
	padding:1rem;
}
	
form #ecran1 #titreBoite,
form #ecran2 #titreBoite{
	padding-top:1%;
	padding-bottom:3%;	
}
	
form #ecran1 #contenuDialogue #etape,
form #ecran2 #contenuDialogue #etape{
	text-align:right;
}
	
form #ecran1 #contenuDialogue label,
form #ecran2 #contenuDialogue label{
	color:#666;
}
form #ecran1 #blocBouttons,
form #ecran2 #blocBouttons{
	text-align:right;
	font-size:1.5rem;
	padding-top: 4%;
}
form #ecran1 #blocBouttons #btSuivant1,
form #ecran2 #blocBouttons #btSuivant2{
	padding:5px 15px;
	background:#f8f8f8;
	cursor:pointer;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 
	-o-border-radius:5px; 
	-ms-border-radius:5px;
	border-radius:5px;
	color:#666;
	width:8rem;
	margin-left:auto;
	cursor:pointer;	
	border:solid 1px #666666;
	text-align:center;	
}
form #ecran1 select,
form #ecran2 select{
	width: 19rem;
	font-family:Arial, sans-serif;
	padding:3px;
	margin: 0;
	-moz-border-radius:5px;  
	-webkit-border-radius:5px;  
	-o-border-radius:5px;  
	-ms-border-radius:5px;   
	-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff outset;
	-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff outset;
	box-shadow: 0 3px 0 #ccc, 0 -1px #fff outset;
	
	border:solid 1px;
	outline:none;
	display: inline-block;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;
	font-size: 1.5rem;
	color: #666;
}
	/*================================================== GESTION DES MOBILES ================================================*/
	/* ciblage tablette type Ipad */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait) {
		/* ciblage mode portrait*/
		form #ecran2{
			display:none;	
		}
	}
	
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape){
		/* ciblage mode paysage */
		form #ecran2{
			display:none;	
		}			
	}	
	/* ciblage smartphone type Iphone */
	@media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 479px) 
	and (orientation : portrait) {
		/* ciblage mode portrait */
		#page{
			width:100%;
		}
		form #ecran1 #contenuDialogue,
		form #ecran2 #contenuDialogue{
			font-size:3.2rem;
			/*largeur maxi du site */
			max-width:100%;
			/*largeur mini du site */
			min-width:100%;
			padding:1rem;
			margin-left:18.5rem;
		}
		input{
			font-size:3.2rem;
			height:3.2rem;
		}
		form #ecran1 #blocBouttons #btSuivant1,
		form #ecran2 #blocBouttons #btSuivant2{
			padding:10px 30px;
			width:12rem;
			font-size:3.5rem;	
		}		

	}
	/* ciblage smartphone type Iphone */
	@media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 479px) 
	and (orientation : landscape) {
		/* ciblage mode paysage */
		#page{
			width:100%;
		}
		form #ecran1 #contenuDialogue,
		form #ecran2 #contenuDialogue{
			font-size:3.2rem;
			/*largeur maxi du site */
			max-width:100%;
			/*largeur mini du site */
			min-width:100%;
			padding:1rem;
			margin-left:12.5rem;
		}
		input{
			font-size:3.2rem;
			height:3.2rem;
		}
		form #ecran1 #blocBouttons #btSuivant1,
		form #ecran2 #blocBouttons #btSuivant2{
			padding:10px 30px;
			width:12rem;
			font-size:3.5rem;	
		}		

	}