body
  {
  font-family: verdana, arial, calibri, sans-serif;
  color: #333333;
  width: 100%;
  background-color: #EDEDED;
  margin: 0 0 0 0;
  padding: 0px;
  }

h1
  {
  font-family: verdana, arial, calibri, sans-serif;
  font-style: normal;
  font-size: 0.7em;
  font-weight: normal;
  color: #999999;
  background-color:transparent;
  text-align:left;
  }

h2
  {
  font-family: verdana, arial, calibri, sans-serif;
  font-style: normal;
  font-size: 1,1em;
  font-weight: bold;
  color: #333333;
  background-color:transparent;
  text-align:left;
  }

h3
  {
  font-family: verdana, arial, calibri, sans-serif;
  font-style: normal;
  font-size:60%;
  font-weight: normal;
  color: #999999;
  background-color:transparent;
  text-align:left;
  }

.normal
  {
  font-family: verdana, arial, calibri, sans-serif;
  font-size: 80%;
  color: #333333;
  background-color:transparent;
  }

a:link {
font-family:verdana, sans-serif;
font-size:100%;
color:navy;
background-color:transparent;
text-decoration:none;
}

a:visited {
font-family:verdana, sans-serif;
font-size:100%;
color:navy;
background-color:transparent;
text-decoration:underline;
}

a:hover {
font-family:verdana, sans-serif;
font-size:90%;
color:red;
background-color:transparent;
text-decoration:none;
}

a:active, a:focus {
font-family:verdana, sans-serif; font-size:90%; color:red; background-color:transparent; text-decoration:overline; }



/* ========================== */
/* MENUS DEROULANTS GAUCHE    */
/* ========================== */

#navigation
  {
  font-family: verdana, arial, calibri, sans-serif;
  font-size:15px;
  width:160px;
  font-weight: normal;
  }

#navigation ul {margin:0; padding:0;}
#navigation li {list-style: none;}
ul.top-level {
	/*background-color: #FFFFFF;*/
}
#navigation a {
	cursor: pointer;
	display:block;
	height:25px;
	line-height: 25px;
	text-indent: 5px;
	text-decoration:none;
	width:100%;
	color: #FFFFFF;
	/*background-color: #FFFFFF;*/
}
#navigation a:hover{
	text-decoration:none;
	color: #FFFFFF;
	background-color: #8DD43E;
}
#navigation li li a:hover{
	text-decoration:none;
	color: #FFFFFF;
	background-color: #8DD43E;
}

#navigation li:hover {
	position: relative;
}
ul.sub-level {
	display: none;
}

li:hover .sub-level {
	display: block;
	position: absolute;
	left: 160px;
	top: 0px;
	background-color: #FFFFFF;
}

ul.sub-level li {
	border: none;
	float:left;
	width:200px;
}

/* ========================== */
/* CLIGNOTEMENT TEXT */
/* ========================== */

.blink_me
  {
  animation: blinker 1s linear infinite;
  }

@keyframes blinker
  {
  50%
   {
    opacity: 0;
   }
  }

/* ========================== */
/* LES BOUTONS                */
/* ========================== */

.bouton {
	width:auto; 
	padding:8px 0; 
	text-align:center; 
	display: inline-block; 
	float:center; 
	margin:0 0px 0px 0;
	font-size: 1.6em; 
	border-radius:5px; 
	box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1); 
	font-size: 0.85em; 
	width:120px; 
	color:#333; 
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
	}	
	
.bouton.carres{font-size: 0.8em; width:30px; padding:5px 0;border-radius:2px; margin:0 5px 5px 0}
.bouton.carre{font-size: 0.8em; width:20px; padding:0px 0;border-radius:2px; margin:0 5px 5px 0}
.bouton.notification{font-size: 0.8em; width:17px; padding:0px 0;border-radius:20px;}
.bouton.vsmall{font-size: 0.8em; width:70px; padding:0px 0;border-radius:2px;}
.bouton.ysmall{font-size: 0.5em; width:50px; padding:2px 0;border-radius:2px;}
.bouton.xsmall{font-size: 0.8em; width:90px}
.bouton.rsmall{font-size: 0.8em; width:95px; padding:0px 0;border-radius:2px;}
.bouton.small{font-size: 0.8em; width:100px}
.bouton.medium{font-size: 0.9em; width:120px}	
.bouton.large{font-size: 0.9em; width:150px}
.bouton.mlarge{font-size: 0.9em; width:180px}
.bouton.xlarge{font-size: 0.9em; width:200px}
.bouton.hlarge{font-size: 0.9em; width:300px}
.bouton.detail{font-size: 1.0em; width:112px; padding:15px 0;}
.bouton.resa{font-size: 0.8em; width:120px; height:20px; padding:0px 0;border-radius:0px;}
.bouton.service{font-size: 0.9em; width:100%; border-radius:0px;}


/* ************************** Couleurs des boutons / Hover et Active classes *************************** */

/* -- Bouton noir -- */	
.bouton.noir, .bouton.noir:active { 
	background: #444; 
	background: linear-gradient( #555, #2C2C2C);
	background: -webkit-linear-gradient( #555, #2C2C2C); 
	background: -moz-linear-gradient( #555, #2C2C2C); 
	background: -ms-linear-gradient( #555, #2C2C2C); 
	background: -o-linear-gradient( #555, #2C2C2C); 
	background: linear-gradient( #555, #2C2C2C);
	}
.bouton.noir:hover {
	background: #555;
	background: -webkit-linear-gradient( #777, #333);
	background: -moz-linear-gradient( #777, #333);
	background: -ms-linear-gradient( #777, #333);
	background: -o-linear-gradient( #777, #333);
	background: linear-gradient( #777, #333);	
	}	
.bouton.noir:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton gris -- */	
.bouton.gris {
	background: #C8C8C8;
	background: -webkit-linear-gradient( #C8C8C8, #A0A0A0);
	background: -moz-linear-gradient( #C8C8C8, #A0A0A0);
	background: -ms-linear-gradient( #C8C8C8, #A0A0A0);
	background: -o-linear-gradient( #C8C8C8, #A0A0A0);
	background: linear-gradient( #C8C8C8, #A0A0A0);
	}	
.bouton.gris:hover {
	background: #D8D8D8;
	background: -webkit-linear-gradient( #D8D8D8, #B0B0B0); 
	background: -moz-linear-gradient( #D8D8D8, #B0B0B0); 
	background: -ms-linear-gradient( #D8D8D8, #B0B0B0); 
	background: -o-linear-gradient( #D8D8D8, #B0B0B0); 
	background: linear-gradient( #D8D8D8, #B0B0B0);
	}
.bouton.gris:active{box-shadow: 1px 1px 10px #999 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton blanc -- */	
.bouton.blanc, .bouton.blanc:active {
	background: #F8F8F8;
	background: -webkit-linear-gradient( #F8F8F8, #D7D7D7); 
	background: -moz-linear-gradient( #F8F8F8, #D7D7D7); 
	background: -ms-linear-gradient( #F8F8F8, #D7D7D7); 
	background: -o-linear-gradient( #F8F8F8, #D7D7D7); 
	background: linear-gradient( #F8F8F8, #D7D7D7);
	text-shadow: 0px 2px 0px rgba( 255, 255, 255, 0.8);
	}
.bouton.blanc:hover{ 
	background: #F5F5F5;
	background: -webkit-linear-gradient( #FFF, #CCC);
	background: -moz-linear-gradient( #FFF, #CCC);
	background: -ms-linear-gradient( #FFF, #CCC);
	background: -o-linear-gradient( #FFF, #CCC);
	background: linear-gradient( #FFF, #CCC);
	}
.bouton.blanc:active {box-shadow: 1px 1px 10px #CCC inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton bleu -- */
.bouton.bleu, .bouton.bleu:active{
	background: #3C98CF;
	background: -webkit-linear-gradient( #166A7E, #2D74A0); 
	background: -moz-linear-gradient( #166A7E, #2D74A0); 
	background: -ms-linear-gradient( #166A7E, #2D74A0); 
	background: -o-linear-gradient( #166A7E, #2D74A0); 
	background: linear-gradient( #166A7E, #2D74A0);
	}
.bouton.bleu:hover {
	background: #3CA1D3;
	background: -webkit-linear-gradient( #167A8E, #3386AF);
	background: -moz-linear-gradient( #167A8E, #3386AF);
	background: -ms-linear-gradient( #167A8E, #3386AF);
	background: -o-linear-gradient( #167A8E, #3386AF);
	background: linear-gradient( #167A8E, #3386AF);
	}
.bouton.bleu:active {box-shadow: 1px 1px 10px #1E516B inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton rouge -- */	
.bouton.rouge, .bouton.rouge:active{
	background: #F4523D;
	background: -webkit-linear-gradient( #F4523D, #B43300);
	background: -moz-linear-gradient( #F4523D, #B43300);
	background: -ms-linear-gradient( #F4523D, #B43300);
	background: -o-linear-gradient( #F4523D, #B43300);
	background: linear-gradient( #F4523D, #B43300);
	}
.bouton.rouge:hover {
	background: #FF6A4F;
	background: -webkit-linear-gradient( #FF6A4F, #D33B11); 
	background: -moz-linear-gradient( #FF6A4F, #D33B11); 
	background: -ms-linear-gradient( #FF6A4F, #D33B11); 
	background: -o-linear-gradient( #FF6A4F, #D33B11); 
	background: linear-gradient( #FF6A4F, #D33B11);
	}
.bouton.rouge:active {box-shadow: 1px 1px 10px #A83318 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton rouge foncé -- */	
.bouton.rouge-fonce {
	background: #C53727;
	background: -webkit-linear-gradient( #C53727, #A82B22); 
	background: -moz-linear-gradient( #C53727, #A82B22); 
	background: -ms-linear-gradient( #C53727, #A82B22); 
	background: -o-linear-gradient( #C53727, #A82B22); 
	background: linear-gradient( #C53727, #A82B22);
	}
.bouton.rouge-fonce:hover{
	background: #D13A2F;
	background: -webkit-linear-gradient( #D13A2F, #BC2E2A);
	background: -moz-linear-gradient( #D13A2F, #BC2E2A);
	background: -ms-linear-gradient( #D13A2F, #BC2E2A);
	background: -o-linear-gradient( #D13A2F, #BC2E2A);
	background: linear-gradient( #D13A2F, #BC2E2A);
	}	
.bouton.rouge-fonce:active{box-shadow: 1px 1px 10px #8E2825 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}
	
/* -- Bouton orange -- */	
.bouton.orange, .bouton.orange:active {
	background: #F28F22;
	background: -webkit-linear-gradient( #FF6A4F, #D33B11); 
	background: -moz-linear-gradient( #FF6A4F, #D33B11); 
	background: -ms-linear-gradient( #FF6A4F, #D33B11); 
	background: -o-linear-gradient( #FF6A4F, #D33B11); 
	background: linear-gradient( #F28F22, #BD5D19);
	}
.bouton.orange:hover{
	background: #F79E46;
	background: -webkit-linear-gradient( #F79E46, #C96928);
	background: -moz-linear-gradient( #F79E46, #C96928);
	background: -ms-linear-gradient( #F79E46, #C96928);
	background: -o-linear-gradient( #F79E46, #C96928);
	background: linear-gradient( #F79E46, #C96928);
	}
.bouton.orange:active{box-shadow: 1px 1px 10px #D33B11 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton vert -- */	
.bouton.vert {
	background: #91BD09;
	background: -webkit-linear-gradient( #8BC751, #4E9939); 
	background: -moz-linear-gradient( #8BC751, #4E9939); 
	background: -ms-linear-gradient( #8BC751, #4E9939); 
	background: -o-linear-gradient( #8BC751, #4E9939); 
	background: linear-gradient( #8BC751, #4E9939);
	}
.bouton.vert:hover{
	background: #A3C416;
	background: -webkit-linear-gradient( #8BD75A, #55A53C);
	background: -moz-linear-gradient( #8BD75A, #55A53C);
	background: -ms-linear-gradient( #8BD75A, #55A53C);
	background: -o-linear-gradient( #8BD75A, #55A53C);
	background: linear-gradient( #8BD75A, #55A53C);
	}	
.bouton.vert:active{box-shadow: 1px 1px 10px #285419 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton jaune -- */	
.bouton.jaune {
	background: #FFD217;
	background: -webkit-linear-gradient( #FFD217, #FFB515); 
	background: -moz-linear-gradient( #FFD217, #FFB515); 
	background: -ms-linear-gradient( #FFD217, #FFB515); 
	background: -o-linear-gradient( #FFD217, #FFB515); 
	background: linear-gradient( #FFD217, #FFB515);
	}
.bouton.jaune:hover{
	background: #FFDE1A;
	background: -webkit-linear-gradient( #FFDE1A, #FFC217);
	background: -moz-linear-gradient( #FFDE1A, #FFC217);
	background: -ms-linear-gradient( #FFDE1A, #FFC217);
	background: -o-linear-gradient( #FFDE1A, #FFC217);
	background: linear-gradient( #FFDE1A, #FFC217);
	}	
.bouton.jaune:active{box-shadow: 1px 1px 10px #E5B738 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton violet -- */	
.bouton.violet {
	background: #D34F8E;
	background: -webkit-linear-gradient( #D34F8E, #A9014B); 
	background: -moz-linear-gradient( #D34F8E, #A9014B); 
	background: -ms-linear-gradient( #D34F8E, #A9014B); 
	background: -o-linear-gradient( #D34F8E, #A9014B); 
	background: linear-gradient( #D34F8E, #A9014B);
	}
.bouton.violet:hover{
	background: #E256A0;
	background: -webkit-linear-gradient( #E256A0, #BC1766);
	background: -moz-linear-gradient( #E256A0, #BC1766);
	background: -ms-linear-gradient( #E256A0, #BC1766);
	background: -o-linear-gradient( #E256A0, #BC1766);
	background: linear-gradient( #E256A0, #BC1766);
	}	
.bouton.violet:active{box-shadow: 1px 1px 10px #EFEFEF inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* ************************** Couleurs des polices *************************** */
.bouton.noir, .bouton.noir:active {color:#FFFFFF;}
.bouton.gris {color:#747070; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.4);}
.bouton.bouton.gris:hover,  .bouton.gris:active {color:#848070;}
.bouton.blanc {color:#BBB; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 1);}
.bouton.bouton.blanc:hover,  .bouton.blanc:active {color:#AAA;}
.bouton.bleu {color:#FFFFFF; text-shadow: 0px 1px 0px rgba( 200, 200, 200, 0.4);}
.bouton.bouton.bleu:hover,  .bouton.bleu:active {color:#0B4972;}
.bouton.rouge {color:#FFFFFF; text-shadow: 0px 1px 0px rgba( 200, 200, 200, 0.4);}
.bouton.rouge:hover,  .bouton.rouge:active {color:#8E1000;}
.bouton.rouge-fonce {color:#77140E; text-shadow: 0px 1px 0px rgba( 226, 160, 160, 0.4);}
.bouton.rouge-fonce:hover,  .bouton.rouge-fonce:active {color:#8E1010;}
.bouton.orange {color:#FFFFFF; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
.bouton.orange:hover,  .bouton.orange:active {color:#894520;}
.bouton.vert {color:#FFFFFF; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
.bouton.vert:hover,  .bouton.vert:active {color:#3A6D2C;}
.bouton.jaune {color:#FFFFFF; text-shadow: 0px 1px 0px rgba( 250, 250, 250, 0.4);}
.bouton.jaune:hover,  .bouton.jaune:active {color:#966729;}
.bouton.violet {color:#820845; text-shadow: 0px 1px 0px rgba( 200, 160, 160, 0.4);}
.bouton.violet:hover,  .bouton.violet:active {color:#720845;}


/* Login modal

/** modal window styles **/
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


#loginmodal {
  width: 300px;
  padding: 15px 20px;
  background: #166a7e;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}


#loginform { /* no default styles */ }

#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }


.txtfield { 
  display: block;
  width: 100%;
  padding: 6px 5px;
  margin-bottom: 15px;
  font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  color: #7988a3;
  font-size: 1.4em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
  background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
  background-image: -moz-linear-gradient(top, #edf3f9, #fff);
  background-image: -ms-linear-gradient(top, #edf3f9, #fff);
  background-image: -o-linear-gradient(top, #edf3f9, #fff);
  background-image: linear-gradient(top, #edf3f9, #fff);
  border: 1px solid;
  border-color: #abbce8 #c3cae0 #b9c8ef;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.txtfield:focus {
  outline: none;
  color: #525864;
  border-color: #84c0ee;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}


 /* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* CONTAINER VERT */

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -5px;
  left: 36%;
  height: 20px;
  width: 20px;
  background-color: #bbb;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #FB0332;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ========================== */
/* ZONE SAISIE                */
/* ========================== */

#zone_saisie
  {

  padding: 1px 2px 1px 2px;
  background-color: #F8F8F8;
  border: solid 1px #CCCCCC;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  color: #333333;
  }