/************ adaptation CSS pour mobile ************/
@media (max-width: 640px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, element1, element2 {
   width: auto;
   margin: 0;
   padding: 0;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 element1, element2 {
   float: none;
   width: auto;
 }

 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }

 /* Un message personnalisé */
 body:before {
   content: "Version mobile du site";
   display: block;
   color: #777;
   text-align: center;
   font-style: italic;
 }
	/** à partir de là = valeurs FRA **/
	#searchFields fieldset { width: 100%; margin:0px; padding:0; } 
	#searchFields fieldset div { width: 100%; } /*pr qu'il n'y ait q'un chp par ligne*/
	#searchFields label {display: inline-block; width: 5em;  vertical-align:top; }
	#searchFields input[type=text] { width: 10em; vertical-align:top; }
}

/************ CSS normale ************/
body {
  background-color:#fff;
  width:100%;
  margin:0;
  padding:0;
  color:#000;
  font:x-small/1.5em Arial,sanserif; /*Georgia,Serif;*/
  voice-family:inherit;
  font-size:small;
  height:100%;
} 
#wrapper {}

#header {
  margin: 0%;
  padding: 0;
  width: 100%;
  height: 80px;
  background:url("img/head-img.png") no-repeat left top;
}
/********** Navigation *************/
#navi {
  width:100%;float:left;
  background:url("img/onglet/bg.gif") repeat-x bottom;
  font-size:93%;
  line-height:normal;
}

#navi ul {
  width:100%;
  margin:0;
  padding:5px 50px 0;
  list-style:none;
  }

#navi li {
  float:left;
  background:url("img/onglet/left.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }

#navi a {
  float:left;
  display:block;
  background:url("img/onglet/right.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
/*#navi a {float:none;}*/
/* End IE5-Mac hack */

#navi a:hover {
  color:#333;
  }

/*#PageHome  #OngletHome,
#PageNews  #OngletNews,
#PageProducts  #OngletProducts,
#PageAbout  #OngletAbout,
#PageContact  #OngletContact {
  background-image:url("img/onglet/left_on.gif");
}

#PageHome  #OngletHome a,
#PageNews  #OngletNews a,
#PageProducts  #OngletProducts a,
#PageAbout  #OngletAbout a,
#PageContact  #OngletContact a {
  background-image:url("img/onglet/right_on.gif");
  color:#333;
  padding-bottom:5px;
}*/
/********** button-looking links (block) *************
Usage 
<div class=buttonLine> <ul>
<li><a href=...>azerty</a></li>
<li><a href=...>qwerty</a></li>
</ul></div>    */
.buttonLine {
  width:100%;
  float:left;
  line-height:normal;
  margin-top:0.5em;
  margin-bottom:0.5em;
}
.buttonLine ul {
  width:100%;
  margin:0;
  padding:0px 50px 0;
  list-style:none;
}
.buttonLine li {
  font-size:75%;
  float:left;
  padding-left: 9px;
  background:url("img/bouton/but_left_21.bmp") no-repeat left top;
  margin-right: 10px; /*espace avec le bouton suivant*/
  height:21px;/*adapté à la hauteur de l'image*/
}
.buttonLine a {
  float:left;
  display:block;
  padding-right: 9px ;
  vertical-align:middle;
  height:21px;/*adapté à la hauteur de l'image*/
  line-height:21px;/*adapté à la hauteur de l'image*/
  text-decoration:none;
  font-weight:bold;
  color:#765;
  background:url("img/bouton/but_right_21.bmp") no-repeat right top;
}
.buttonLine a:hover {
  color:#333;
}
/********** button-looking links (inline) ***************************
Usage:
<span class="button"><a href=...>azerty</a></span> */

div.buttonBlock {
	text-align:right;
}
div.buttonBlock p {
	padding-bottom: 0px;
	padding-top: 0px;
  	margin-top: 0px;
  	margin-bottom: 2px;
  	margin-right: 0px;
}

span.button {
  font-size:75%;
  margin: 0 5px 0 5px;
  padding-left: 9px;
  background:url("img/bouton/but_left_21.bmp") no-repeat left top;
}

span.button a  {
  padding-right: 9px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  background:url("img/bouton/but_right_21.bmp") no-repeat right top;
}
span.button, span.button a {
  /*à défaut de pouvoir fixer la "height" d'un élément inline, on essaie 
  de bricoler avec des padding pour s'assurer que toute l'image de 
  background (le bouton) apparaisse sans être coupée*/
  padding-top: 4px;
  padding-bottom: 5px; /*A RETABLIR !!*/
}
span.button a:hover {
  color:#333;
}
/********** section de saisie des recherches *************/
#searchFields {/*min-width:1000px;*/}
#searchFields form {float:left;font-size:90%;}
#searchFields input[type=text] {margin-right:1em; font-size:90%;  vertical-align:top;}
@media (min-width: 641px) { #searchFields input[type=text] {width:8em; } }
#searchFields input[type=checkbox] {vertical-align:top; margin-left:0px;margin-right:3em;}
#searchFields input[type=image], #searchFields a img {vertical-align: bottom;}
#searchFields label { margin-left:5px; vertical-align:top; }
#searchFields fieldset div {float: left;}
#searchFields .buttonBlock {clear: both;}
#searchFields .buttonBlock p {float: left;}


/********** contenu de la page *************/
#content {
	clear: both;
  padding: 2em 4em 2em 4em;
  text-align:justify;
}
#edit #content {
  padding: 2em 1em 2em 1em;
}

#login label {display:block;float:left;width:7em;text-align:right;padding-right:0.5em;}
#login input {width:7em;background:#f0f0f0;}
p {margin:0;margin-top:0.5em;}
.error {
	border:solid 3px red;
	text-align:center;
	background:#ffb6d2;
	padding:1.5em;
	width:30em;
}
.info {
	border:solid 3px #00c965;
	text-align:center;
	background:#a6ffd2;
	padding:1.5em;
	width:30em;
}
.error p, .info p {margin-top:0;}
.pagelinks div p {margin-top:0;}
.pageLinks p {
	text-align:center;
	margin-top:0;margin-bottom:0;
	padding-top:0;padding-bottom:0;
}
.pageLinks strong {
	font-weight:bolder;
	color:red;
	padding-left:0.3em;padding-right:0.3em;
}
.pageLinks div a {padding-left:0.3em;padding-right:0.3em;}


/************ liens mail et phone ***************/
a[href^="tel:"]::before{
	content:url('img/Icons-ShineSerie/16x16/phone.png');
  position:relative; /*or absolute
  /* z-index:100000; /*a number that's more than the modal box*/
  left:-10px;
  top:1px;
}
a[href^="mailto:"]::before{
	content:url('img/Icons-ShineSerie/16x16/email.png');
  position:relative; /*or absolute
  /* z-index:100000; /*a number that's more than the modal box*/
  left:-10px;
  top:1px;
}

/************ page de liste des occurrences trouvées ***************/
#liste {
	  font-size:90%;
}
#liste ul {
	list-style-type:disc;
}
#liste li a {color:#A52A2A;text-decoration:none;}
#liste ul a {color:#A52A2A;}
#liste ul ul {
	list-style-type:none;
}
.itemPair, .itemImpair {
	width:100%;
	clear:both;
	min-height:48px;
}
.itemPair {
  background-color:#f6ddba;
}
.itemImpair {
  background-color:#ffedd4;
}
.itemPair form, .itemImpair form {
	float:right;
}

/************ page de visu d'une occurrence ***************/
#view {
	  font-size:90%;
}
#view ul {
	list-style-type:disc;
}
#view li a {color:#A52A2A;text-decoration:none;}
#view ul a {color:#A52A2A;}


#view ul ul {
	list-style-type:none;
}
#view h2, h3 {color:#A52A2A}
#commun { 
background-color:#f6ddba;
padding:10px 0 0 10px;
clear:both;
}
#indiv_a, #indiv_b {
  background-color:#ffedd4; 
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  border-style:solid; border-width:3px 0px 0px 0px; border-color:#A52A2A;
}

#view .boutons  {
	clear:both;
}
#view .boutons form, #view .boutons a {
	float:left;
}


/************ page de liste d'export (export.php) ***************/
#export .sep {color:red;font-weight:bold;padding-right:10px;padding-left:10px;}
#export a {color:#A52A2A;text-decoration:none;}
#export .adr {width:15px;}
#export .itemPair, #export .itemImpair {min-height:0;}
.problem {
	color:red;background-color:black;
	font-weight:bold;text-decoration:blink;
	margin-left:10px;padding-left:10px;padding-right:10px;
}
/************ formulaire de saisie ou d'affichage readonly ***************/
.formSaisie {
	margin:0;padding:0;
}
.biColonnes label, .biColonnes input, .biColonnes select, .biColonnes span {
	font-size:75%;
	font-family:arial, sanserif;
	display:block;
	float:left;
}
.center {text-align:center;}
.biColonnes ul {
	padding:10px 0 15px;
	width:100%;
	clear:both;
 	margin:0;
 	border-top:solid white 4px;
	background-color:#f6ddba;
}
.biColonnes {min-width:1000px;}
.colonneGauche, .colonneDroite {
	float:left;
	width:49%;
	border-right:solid white 4px;
	background-color:#f6ddba;
}

.notes li {text-align:center;}
.formSaisie li {
	clear:both;
	list-style:none;
	padding:0;
}
.formSaisie label {
	width:18%;
	color:black;
	text-align:right;
	padding-right:5px;
}
.formSaisie ul input, .formSaisie span {width:38%;}
.formSaisie select {width:38%;margin-right:4px;}
.formSaisie textarea {
	width:92%;
}
.readonlyForm input, .readonlyForm select, .readonlyForm textarea {
	color:black;
	background-color:#e2e2e2;
}
.activeForm .biColonnes input, .activeForm .biColonnes select, .activeForm .biColonnes textarea {
	color:black;
	background-color:#ffb6d2;
}
#edit .boutons {clear:both;}
#edit .boutons fieldset input[type=image] {vertical-align:top;}
#edit .boutons form {float:left;}
fieldset {border:none;}


/************ Page de l'écriture en base ***************/
#dbWrite #content form fieldset {float:left;}
#dbWrite #content form fieldset label { display:block;margin-top:2em;margin-right:2em;font-weight:bold; }
#dbWrite #content form {clear:both; display:inline-block; padding-top:30px; }
/********** pied de page *************/
#footer {
  text-align:center;
  clear:both;
  height: 20%;
  padding: 20px 50px 0;
  font-size:xx-small;
}