@import url(http://fonts.googleapis.com/css?family=Laila:400,700);

/* Retire  les couleurs des liens */


	a {
		text-decoration:none;
		underline:none;
		}
		

/* Icon generale */


.ArrowsInTab {
	width:25;
}

/* a supp */
.iconPhoneFix {
	width:20%;
	}
.iconGSM {
	width:20%;
	}	
/* fin a supp */


.iconContact {
	width:20%;
	}
	
	.logo {
			width:15%;
			margin-right:0%;
			display:inline;
			}	

.langages  {
	font-size:25px;
	text-transform:uppercase;
	text-decoration:none;
}

p.infoTexte {
	margin-top:15px;
	font-size:20px;
	display: block;
   text-align:center;
	}


P.infoTexteError {
color:red;
text-align:center;
margin:auto;
font-size:16px;
}

.form2 {
	border:none;
	display:inline;


	
	}
	
/* Icone dans tableaux */



	
.iconTableau {
	width:12%;
	padding:3px;
	}	


.iconMain {
	width:12%;
	}

	.iconSecond {
		width:4%;
		}	
		
			
.iconEdit {
	width:4%;
	display:block;
	
	}


	
	.iconEditTableau {
		width:90%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
		
		}	
		
	.iconEditTableau2 {
		width:15%;
		
		}	
	
	
		.iconEditTableauX {
		width:8%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
		}	
		


/* Gestion utilisateur */

.iconEditBis {
	width:8%;
	}
/* Fin gestion utilisateur */			
		
		
		
		
/* Agenda */

 		.iconFormAgenda {
			width:30%;
			}
			
		.iconTabAgenda {
			width:30%;
			}	
		
		
		.iconAgenda {
			width:40px;
			height:40px;
			}	
			
			
		.iconArrowLeft {
		width:1%;
		}
/* Fin agenda /*

/* Anomaie */

.arrowsAnomalie {
	width:25%;
	}

/* Fin anomalie /*			

/* #### Page standard #### */

	/* ####Titre de la page */
		
	h1 {
	text-align: center;
	margin-top: 10px;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	color:#323232;
	font-size:23px;
	text-decoration: underline #25A6E1;
	padding:3px;
	}

	
	
	/* Sous titre de page */

	h2 {
		color:black;
		margin-left:20px;
		font-family: 'Open Sans', sans-serif;
		text-transform: uppercase;
		font-size:17px;
		border-left: 1 px solid  #e4e4e4;
		border-bottom: 2 px solid  #e4e4e4;
		width:26%;
		padding:0px;
		padding-left:10px;
		padding-bottom:10px;
		}
	


	/* Titre Société */
	
	h3 {
		color:black;
		background:#e0e0e0;
		text-align:center;
		font-family: 'Open Sans', sans-serif;
		font-size:16px;
		padding:10px;
		border: 2px solid #25A6E1;
		
		width:95%;
		margin-left:auto;
		margin-right:auto;


		}

h4 {
			color:black;
		background:#a9a9a9;
		text-align:center;
		font-family: 'Open Sans', sans-serif;
		font-size:16px;
		padding:10px;
		border: 1px solid #25A6E1;
		
		width:55%;
		margin-left:auto;
		margin-right:auto;

		
		}

	p {
		font-size:14px;
		font-family: 'Open Sans', sans-serif;
		margin-left:100px;
		}

	caption {
		font-size:20px;
	
		}
/* #### Bouton , ligne horizontal <hr> #### */

	/* Bouton de recherche style */

	.styled-button-submitSearch {
	background: #25A6E1;
	background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
	background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
	padding:8px 13px;
	margin:15px;
	display:inline-block;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:17px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #1A87B9;
	}                

.styled-button-submitSearch2 {
	background: #25A6E1;
	background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
	background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
	padding:8px 13px;
	
	display:inline-block;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:12px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #1A87B9;
	}

	/* HR */
		hr {
		margin-left:auto;
		margin-right:auto;
		width:20%;
		}

	


	/* Bouton type Radio */

		.styleRadioButton {
			padding: 2px;
			float: center;
		   width: auto;
		   font-size:10px;
		   margin-left: 3em;
			}
			

/* Fin bouton + HR /*
			

/* style pour les Formulaires */


br { display: block; line-height: 1.6em; } 

input, textarea { 
  -webkit-font-smoothing: antialiased;
  outline: none; 
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

#wrapper {


	}


/** form field **/
form {
  display: block;
  margin: 30px;
  margin-top:10px;
  overflow: hidden;
  background: #fff;
  border: 3px solid #cdcdcd;
  border-radius: 5px;
  font-size: 0;
}

form > div > label {
  display: block;
  padding: 20px 20px 10px;
  vertical-align: top;
  font-size: 14px; 

  font-weight: bold;
  text-transform: uppercase;
  color: #818181;
  cursor: pointer;
}
form > div.switch > label {
  padding: 16px 20px 13px;
}

.col-2, .col-3, .col-4 , .col-5 { 
  border-bottom: 1px solid #e4e4e4;
}

form > div > .col-4 {
  height: 186px;
}

label > input {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 27px;
  line-height: 27px;
  margin: 5px -5px 0;
  padding: 7px 5px 3px;
  border: none;
  outline: none;
  color: #555;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  opacity: .6;
  transition: all linear .3s;
}

.col-submit {
  text-align: center;
  padding: 20px;
}

label > select {
  display: inline-block;
  width: 100%;
  padding: 0;
  color: #555;
  
  margin: 16px 0 6px;
  font-weight: 500;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  opacity: .4;
  transition: all linear .3s;
  
  
}

label > input:focus, label > select:focus {
  opacity: 1;
}

/** responsive design **/
@media(min-width: 850px){
  form > div { display: inline-block; }
  .col-submit { display: block; }
  
  .col-2, .col-3, .col-4 , .col-5{ box-shadow: 1px 1px #e4e4e4; border: none; }
  
  .col-2 { width: 50% }
  .col-3 { width: 33.3333333333% }
  .col-4 { width: 25% }
  .col-5 { width: 19.995588% }
  
  .col-submit button { width: 30%; margin: 0 auto; }
}


/* #### Design CSS standard pour les Tablettes + Mobiles ##### */




		
	
/* Style generale pour mobile & ipad */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 100%; 
			}
	
		.iconGSM {
	width:10%;
	}
	
		h1 { 
			width:100%;
			}
			
	
		
			
		#logoCompany {
			width:90%;
			
			}
		

		h2 {
		width:100%;
		font-size:12px;
		text-align:left;
		margin-left: 0 px;
		}
		
		p {
			margin-left:2px;
			font-size:12px;
			}

		.styled-button-submitSearch {
				font-size:14px;
				margin:10px;
				
			}
			
		.iconFormAgenda {
			width:20%;
			}
		
		.iconEdit {
	width:10%;
	}
			
		.fingerUp {
			width:25%;
			}
		
.iconMain {
	width:40%;
	}
	
	
		
	.iconContact {
	width:70%;
	}	
		.iconPhoneFix {
			width:30%;
			display:block;
			margin-left:auto;
			margin-right:auto;
			}	
		
		caption {
			font-size:12px;
			}	
			
		.iconTableau {
			width:25%;
			}		
	
		
			.iconEditTableauX {
		width:40%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
		}
		
		.iconEditBis {
			width:100%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
			}
	
	}






	/* 
	Generic Style pour PC/Portable
	*/
	table { 
		border-collapse: collapse; 	
		width:90%;
		margin-left: auto;
		margin-right: auto;
		padding:1px;	
	}
	

/* Information tableau */	
	
	th { 
		
		color: #323232; 
		text-align:center;
		padding: 5px; 
		border: 2px solid #e4e4e4;
		background: #5EAED4; 
		font-family: "Helvetica";
	
	}

/* Resultat Information tableau */
	
	td { 
		padding: 4px; 
 		border: 2px solid #e4e4e4;
		text-align: left; 
		color:#464646;
		 
	}


	
	
		

	
	
	/* Style mobile & ipad */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px)
	 {
	
	body {
		width:100%;
		}
		
		th {
			font-size:10px;
		
		}
		
		td {
			font-size:11px;
			}
		
		 #telMobileResponsive {
			margin-left:auto;
			margin-right:auto;
			display:block;
			width:45%;
			}
	
		.styled-button-submitSearch {
			width:50%;
			padding: 5px;
			display:block;
			}	
			
		.iconeTableau {
		width:70%;
		margin-left:auto;
		margin-right:auto;
		display:block;
		}
			
		/* Quand l'icone du tableau n'a pas de width pour le td */
		.iconEditTableau2 {
		width:85%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
		}	
			
		.arrowsPlanner{
		width:35%;
		
		}
		
		.arrowsPlannerSemaine {
		width:15%;
		}
		
		.iconSecond {
		width:20%;
		}	
		
		.iconContact {
		width:70%;
		}	
	
		.iconEditTableau {
		width:100%;
	
		}
		}
		
	





/* Test device 360 x 640 */

/* Style mobile & ipad */
	@media only screen
	and (min-device-width : 360px)
	and (max-device-width : 640px) {
	
	body {
		width:100%;
		}
		
		th
		{
			font-size:10px;
				font-weight:bold;
			
		}
		
		td {
			font-size:8px;
		
			}
		
		 #telMobileResponsive {
			margin-left:auto;
			margin-right:auto;
			display:block;
			width:45%;
			}
	
		.styled-button-submitSearch {
			width:50%;
			padding: 5px;
			display:block;
			}
			
		.iconeTableau {
		width:70%;
		margin-left:auto;
		margin-right:auto;
		display:block;
		}
			
			
				.arrowsPlanner{
			width:35%;
			}
	
		}	
	
	
	
	
			
 /* ********  Responsive 768 x 1024 ************* */
 			
	/* Style pour mobile */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
	 {
	
	
		body { 
			width: 100%;
			padding: 0; 
			margin: 0; 
		}
		
		
		
	
		.styled-button-submitSearch {
				font-size:14px;
				margin:10px;
				display:inline-block;
				
				padding:10px;
			}
			
		th
		{
			font-size:14px;
				font-weight:bold;
			
		}
		
		
		.tr {
			 border: 1px solid #ccc;
			  }
		
		
	


		td {
			font-size:12px;
			height:40px;
			width: 30px;
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative
			}
		
		 #telMobileResponsive {
			margin-left:auto;
			margin-right:auto;
			display:block;
			width:45%;
			}

	
		.iconFormAgenda	 {
			width:35%;
			}
			
			td:before { 
			position: absolute;
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		
			.arrowsPlanner{
			width:40%;
			}	
			
			.arrowsPlannerSemaine {
			width:10%;
			
			}
			
		.iconEdit {
	width:8%;
	}
	
	.iconEditTableau {
		width:90%;
		}
		
	
	/* Quand l'icone du tableau n'a pas de width pour le td */
	.iconEditTableau2 {
		width:55%;
		
		display:inline-block;
		}	
			
	.iconMain {
	width:35%;
	}
	
	.iconSecond {
		width:25%;
		}
		
	.iconContact {
	width:55%;
	}		
	
			.iconEditTableauX {
		width:30%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
		}	
		
		
		
		.iconEditBis {
			width:45%;
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
			}	
	}




	

	
	

 /* ********  Responsive 800 x 1024 ************* */
			
	/* Style pour mobile */
	@media only screen and (min-device-width: 800px) and (max-device-width: 1024px)
	 {
		body { 
			width:100%; 
		}
		
	
	
		.styled-button-submitSearch {
				font-size:14px;
				margin:10px;
				
			}
			
	.logo {
		width:15%;
		margin-right:auto;
		margin-left:auto;
		display:block;
		}
	
	

	th
		{
			font-size:15px;
				font-weight:bold;
			
		}
		
		td {
			font-size:13px;
		
			}
		
	

	}