/*
 * copyright © CNRS-INSHS
 * Feuille de style 'VARI-SHS'
 */

/*-------------------------------------------------------------------
  Style du cadre principal et du bandeau supérieur
  -------------------------------------------------------------------*/
html, body {  /* Pied de page collé en bas de la fenêtre */
    height: 100%;
}

body {
background: white;
color: #505054;
/* font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; */
/* font-family: Verdana, sans-serif; */
font-family:Arial,sans-serif;
margin: 0;
}

#tout {  /* Evite que le pied de page ne masque le bas de l'affichage en cas de réduction de la hauteur de la fenêtre */
position: relative;
min-height: 100%
}

#conteneur, #mention-conteneur, #faq-conteneur {
font-size: 12px;
position: relative;
margin: 0 auto;
}

#faq-conteneur p {
margin: 2em auto;
}


#mention-conteneur {
width: 800px;
padding: 10px;
}

#faq-conteneur {
padding: 10px;
}

#conteneur {
width: 1200px;
padding:0 10px 25px 10px; 
}

#connexion {
text-align: right;
padding-bottom: 2px;
margin: 0;
}


#connexion img {
vertical-align: text-bottom;
}


#en-tete, #mention-en-tete, #faq-en-tete {
position: relative;
background: white;
width: 100%;
color: #273327;
padding-top:1em;
margin: 0;
border: solid 1px #583c30;
}

#en-tete {
height: 9em;
}

#faq-en-tete {
height: 7em;
}

#mention-en-tete {
height: 6em;
}

#en-tete img, #mention-en-tete img, #faq-en-tete img {
position : absolute;
margin-left: 1.5em;
margin-top: 0.5em;
}

h1, h2, h3 {
text-align: center;
}

#en-tete p, #mention-en-tete p, #faq-en-tete p {
position : absolute;
right: 0;
bottom: 0;
text-align: right;
margin:0 1em;
}

/*
  Style du bouton "Mot de passe oublié"
 */
.textseul {
border-width:0;
background-color: #FFFFFF;
color: #355c76;
font: normal 12px Arial, sans-serif;
width: 116px;
height: 16px;
}

input.textseul:hover {
cursor: pointer;
border-bottom:1px solid #355c76;
}

/*-------------------------------------------------------------------
  le menu déroulant reprend les principes développés sur
  http://www.htmldog.com/articles/suckerfish/dropdowns/
  -------------------------------------------------------------------*/

#nav {
   position: relative;
   list-style: none;
  border-width: 0px 1px 1px 1px;
  border-color: #583c30;
  border-style:solid;
   width: 100%;
   height: 18px; 
   background: #d8cca0; 
   padding: 0;
   margin: 0;
} 

#nav a {
   display: block;
   text-decoration: none;
   color: #583c30;
   font: normal 13px/1.4 arial, serif;
   padding: 0 15px;
}

#nav a:hover {
   background: #583c30;
   color: white;
} 

#nav li {
   float: right;
   border-left: 1px solid #583c30;
}

#nav li ul {
   position: absolute;
   left: -999em;
   width: auto;
   list-style: none; 
   z-index:100;
   padding: 0;
   margin: 0 -1px;
   border-width: 1px 1px 1px 0;
   border-color: #583c30;
   border-style: solid;
} 

#nav li ul li {
float : none;
background : #d8cca0;
}

#nav li ul a {
color: #583c30;
}


#nav li:hover ul {
   left: auto;
}

/*-------------------------------------------------------------------
  Style d'affichage des données.
  conteneur_n2 : cadre d'affichage des données
  -------------------------------------------------------------------*/

#conteneur_n2 { 
border-left: solid 300px #d5ddd5;  /* color of the left column  */ 
background-color: #ffffff; /* color of the content column */
min-height : 850px; /* V16.2 : hack pour repousser le pied de page en bas */
}

#conteneur_n3 { 
  position: relative;
  margin : 0px;
}

.c_n3 {
background: white;
color: #505054;
/* font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; */
font-family:Arial,sans-serif;
font-size: 12px;
}

/* titre de la rubrique */
.c_n3 h2 {
  font: bold 1.5em Georgia, "Times New Roman", Times, serif;
  color: #583c30;
  margin-top:0;
  padding-top:20px;
}

/* titre "Récapitulatif des fiches saisie" en tête de la liste */
.c_n3 h3 {
  font-size: 1.4em;
  font-weight: bold;
  color: #273327;
}


.c_n3 p {
  text-align: left;
  margin-top:3em;
  margin-left:3em;
}


.c_n3 form {
  margin:2em 0 5em 2em;
}

/*-------------------------------------------------------------------
  Style d'affichage des données.
  conteneur_n4 : sous cadre d'affichage d'un formulaire à plusieurs onglets
  -------------------------------------------------------------------*/

#conteneur_n4 { 
  border-width: 1px 1px 1px 170px;
  border-color: #ffffff;
  border-style:solid;
/*  margin-top: 5em;
  margin-left:2em; */
margin:5em 0 3em 1em;
background-color: #ffffff;
}

#conteneur_n5 { 
  position: relative;
  margin : 0px;
  border-width: 2px 2px 2px 10px;
  border-color: #583c30;
  border-style:solid;
}

#conteneur_n5 form {
  margin:2em 1em 1em 2em;
}

#conteneur_n5 p {
  margin:2em 2em;
}

#conteneur_hal {
  margin:2em 2em;
}
/*-------------------------------------------------------------------
   Bandeau gauche du formulaire multi onglet 
  -------------------------------------------------------------------*/

#bandeau_form {
width:170px; 
float:left; 
position:relative; 
margin-left:-170px;
}

#bandeau_form ul {
list-style: none;
padding: 0;
margin: 0;
}

/*V16.2*/

#bandeau_form li {
display: block;
padding: 2px 1em ;
color: #583c30;
}

#bandeau_form a {
text-decoration: none;
color: #583c30;
}

#bandeau_form decompte {
color: #804A33;
}

#bandeau_form_s {background: #583c30;}
#bandeau_form_s a {color: white; }
#bandeau_form_s decompte {color: white;}

#bandeau_form li a:hover {text-decoration:underline;}

/*-------------------------------------------------------------------
  Style des tables (utilisées dans les listes et les formulaires)
  -------------------------------------------------------------------*/

table {
font-size: 100%;
margin: 1em auto;
background-color: transparent;
margin-bottom:3em;
width: 95%;
}

th {
vertical-align : top;
width:250px;
  text-align:left;
  font-weight: bold;
  padding: 3px 0px 0px 20px;
}

td {
vertical-align : top;
 text-align:left;
  padding: 3px 0px 0px 0px;
}

.hack-chrome {
overflow-wrap: anywhere;    /* contournement bug chrome */
}

.err-tag {
color: #cc3300; /* rouge */
}


caption {
background-color: #273327;
color: white;
text-align:left;
padding: 2px 10px;
/*margin-top: 2em;*/
/*height: 16px;*/
}

#conteneur_n3 caption h3 {
font-weight: bold;
font-size: 1.2em;
color: white;
margin: 0;
padding: 0;
text-align:center;
}

.hal {
font-weight: bold;
font-size: 1.1em;
/* color: white; */
margin-left: 5em;
text-align: center;
/* padding: 0; */
}

caption a {
background-color: #d5ddd5;
color: #273327;
/*margin-top: 1em;*/
padding: 0 20px 0px 20px;
-moz-border-radius: 3px;
font-weight: bold;
/* -moz-border-radius-topleft: 2px; */
/* -moz-border-radius-topright: 2px; */
text-decoration: none;
}

caption a:hover {text-decoration:underline;}


td table td {
padding: 0px 4px 0px 4px;
}


/*-------------------------------------------------------------------
  Style spécifiques aux formulaires
  -------------------------------------------------------------------*/

form {
  margin-top: 5em;
}

#boutform, #fin_export{
  text-align:center;
  padding-top:2em;}

#boutconnect {
  position:relative;
  text-align:center;
  top:10em;}

form table {
margin: 0 auto;
width: 100%;
}

/* V16.2*/
form th {
  width:200px;
  padding: 10px 10px 10px 0px; /* padding top de 15px pour aligner le libellé avec le champ de saisie sur firefox Linux */
  text-align:right;
}

form td {
 padding: 10px 0 10px 0px;

}

form caption {
background-color: white;
color: #583c30;
font-weight: bold;
font-size: 1.1em;
text-align:center;
margin-top: 2em;
height: 20px;
}

/* textarea standard : 65 x 2 */
form textarea {
  width: 460px;
  height: 60px;
}

/* V16.2*/
input, textarea {
font-family:Arial,sans-serif;
font-size : 100%;
}

/* V16.2*/
/* gestion des retour à la ligne pour les disciplines */
#disciplines label { 
  display: block;
  padding-left: 23px;
  text-indent: -23px;
}

/* V16.2*/
/* alignement des labels avec les coches et les boutons radio */ 

/*input[type=checkbox], input[type=radio] { */
input {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

/* V16.2*/
input[type=radio] {
  bottom: 3px;
}

/* textarea gros modèle : 90 x 10 */
textarea.ta90x10 {
  width: 650px;
  height: 160px;
}

/* textarea gros modèle : 80 x 15 */
textarea.ta80x15 {
  width: 650px;
  height: 250px;
}

/* textarea intermédiaire : 65 x 5 */
textarea.ta65x5 {
  width: 460px;
  height: 120px;
}

/*-------------------------------------------------------------------
  Style du widget de saisie du Terrain de Recherche (pays)
  -------------------------------------------------------------------*/

#list_pays input {
   float:left;
    margin-right : 10px;
}


#list_pays table
{
    border-collapse: collapse;
    border: 1px solid #777777;
    width : auto;
    margin-left : 0;
}


#list_pays table td {
background: white;
}

#list_pays table th {
display: none;
}

#list_pays table td a {
color: #711a3e;
text-decoration: none;
font-weight:normal;
}

#list_pays table td a:hover {text-decoration:underline;}

/*-------------------------------------------------------------------
   Autocompletion (JQuery UI). dimensionnement de la liste deroulante 
  -------------------------------------------------------------------*/

.ui-autocomplete {
  max-height: 224px; /* pas pris en compte par IE8 en HTML transisional */
  overflow-y: auto;
  max-width: 470px; /* Titre : pas pris en compte par IE8 en HTML transisional */
  overflow-x: hidden;
}

/*-------------------------------------------------------------------
   Bandeau gauche : menu 
  -------------------------------------------------------------------*/

#bandeau_gauche {
width:300px; 
float:left; 
position:relative; 
margin-left:-300px; 
margin-right:1px;
background: #d5ddd5;
}

/* font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; */

#bandeau_gauche h3 {
padding:0;
margin:0;
background: #273327;
color: white;
/* font-family: Helvetica, sans-serif; */
font-weight:bold;
border: 0px;
}

#bandeau_gauche ul {
list-style: none;
padding: 0;
margin: 0;
border: 0px;
}

#bandeau_gauche h4 {
text-align: left;
padding:0;
margin:0;
background: #fdeda2;
border: 0px;
}


#bandeau_gauche li {
margin-bottom: 3px;
display: block;
color: #273327;
padding: 3px 1em ;}



#bandeau_gauche a {
text-decoration: none;
color: #273327;
}

#bandeau_gauche decompte {
color: #418041;
}

#current a {color: #583c30; font-weight:bold;}
#current decompte {color: #804A33;}

#bandeau_gauche a:hover {font-weight:bold;}

/* ------------------------------------------------------
   Marge minimale pour le message affiché après validation
   du formulaire. Cette marge est supérieure à la hauteur
   maximale du menu rouge à gauche du formulaire
   ------------------------------------------------------*/

#ro {
margin: 12em 0;
}

/* ------------------------------------------------------
   Pied de page
   ------------------------------------------------------*/

#pied-de-page {
position: absolute;
bottom: 0;
margin: 0;
/*padding: 5px 0 0 0;*/
padding: 4px 0;
/*height: 1.2em;*/
background: url(images/footer-bg.png) 0 top repeat-x #F2F2F2;
width:100%;
min-width:1200px;
text-align:center;
font-size: .8em;
}

#pied-de-page a {text-decoration: none;color: #888; }
#pied-de-page a:hover {text-decoration:underline; color: #069;}

#connexion a {text-decoration: none;color: #000; }
#connexion a:hover {text-decoration:underline;}

/* ------------------------------------------------------
   Synthese
   ------------------------------------------------------*/
#synthese {
background: white;
color: #505054;
/* font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; */
font-family:Arial,sans-serif;
font-size: 12px;
}

#synthese h2, #synthese h3 {
text-align: left;
margin-left: 2em;
color: #505054;
}

#synthese h1 {
  font: bold 1.4em Verdana, sans-serif;
}

#synthese h2 {
  font: bold 1.2em Verdana, sans-serif;
}

#synthese h3 {
  font: normal 1.2em Verdana, sans-serif;
}

#synthese table {
border-collapse:collapse;
}

#synthese td, th {
  padding: 3px 0px 0px 10px;
}

/* ------------------------------------------------------
   Onglets de sélection de l'année
   ------------------------------------------------------*/
#year_sel
{
   position: relative;
   list-style: none;
   border-bottom: 1px solid #273327;
   padding-bottom: 28px;
   margin: 60px 15px 0 15px;
} 

#year_sel a {
   display: block;
   text-decoration: none;
   color: #666;
   font: bold 1.2em vernada, arial, sans-serif;
   padding: 5px 14px;
} 

#year_sel a:hover {
text-decoration:underline;
} 

#year_sel li {
   float: left;
height: 29px;
width: 60px;
background-image: url("../images/hidden_year.png");
   border: none;
}

#year_sel li#year_active
{
background-image: url("../images/disp_year.png");
}

#year_active a {
color: #273327;
}

/* ------------------------------------------------------
   Fenetre modales BlockUI


div.blockMsg {

    width:  40%;
    top:    30%;
    left:   30%;
    text-align: center;
    background-color: #f00;
    border: 1px solid #ddd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
    -moz-opacity:.70;
    opacity:.70;
    padding: 15px;
    color: #fff;

padding: 0;
margin: 0;
width: 30%;
top: 40%;
left: 35%;
text-align: center;
color: #000;
border: 3px solid #aaa;
background-color:#fff;
cursor: wait;
}
   ------------------------------------------------------*/
#modalalert div {
width:100%;
text-align:center;
}

/* ------------------------------------------------------
   FAQ
------------------------------------------------------*/

/*
#faq-conteneur ol {
liste-style-type: decimal;
*/

#faq_tablematiere {
margin: 1em 0 4em -1em;
}

#faq_tablematiere li {
font-size: 14px;
}

#faq_tablematiere li ul{
margin: 0.5em 0 1em 0;
}

#faq_tablematiere li ul li {
font-size: 12px;
}

#faq_qr h3 {
text-align: left;
/* padding: 0; */
margin: 1em 0 0 0;
color:#4f81bd;
}

#faq_qr h4 {
text-align: left;
margin: 1em 0 0 2em;
color:#4f81bd;
}

#faq_qr p {
margin: 0.5em 0 2em 4em;
}

#faq_qr ul {
margin: 0 0 0 2em;
}

#faq_qr li ul {
margin: 0;
}

/* ------------------------------------------------------
   V16.0 : rubrique identité - listes déroulantes BAP et emploi type
------------------------------------------------------*/

.ita {
display : inline-block;
vertical-align : top;
}

/* ------------------------------------------------------
   V17.1 : Tableaux dynamiques pour la saisie des auteurs
------------------------------------------------------*/

    .auteurs {
        border-collapse:collapse;
    }
    .auteurs span {vertical-align: bottom;}
    .auteurs tr th { 
        margin:0px;
        border:1px solid lightgray;
        padding:2px;
        text-align:center;
        vertical-align: middle;
    }
    .auteurs tr td { 
        margin:0px;
        padding:2px;
        border:1px solid lightgray;
    }

    .no-overflow {
        display:inline-block;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        height:1.2em; /* fit to table cell height */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }


    [contenteditable="true"] {
        white-space: nowrap;
    }


    [contenteditable="true"] br {
      display:none;
    }

    [contenteditable="true"] * {
        display:inline;
        white-space:nowrap;
    }

    .auteurs tbody tr:first-child {
      display:none;
    }

/* ------------------------------------------------------
   V17.2 : Infobulles
   adapté de http://jsfiddle.net/nzsnw55s/ pour la marque "?"
   adapté de http://blueseodesign.com/web-design/creer-infobulles-tooltips-en-css3/ pour l'infobulle 
------------------------------------------------------*/

.ibMark {
    display:inline-block;
    border-radius:50%;
    background-color:#007474;
    color:white;
}

.ibMark:before,
.ibMark:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;
    padding-top:70%;
    padding-bottom:0%;
}

.ibMark:before {
    padding-left:3px;
}
.ibMark:after {
    padding-right:3px;
}

span.infobulle{
  position: relative;
  display: inline;
  cursor: help;
}
span.infobulle:after{
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0; /* left: 20%; */
  opacity: 0;
  content: attr(data-tool); /* vous pouvez aussi utiliser attr(title) */
font-weight: normal;
white-space: pre-line; /* 20190623 : gestion des retour à la ligne dans les infobulles */
  height: auto;
  min-width: 250px;
  padding: 5px 8px;
  z-index: 999;
  color: #fff;
  text-decoration: none;
  text-align: left; /* text-align: center; */
  background: rgba(0,0,0,0.85);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

span.infobulle:before {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0px;
  opacity: 0;
  content: "";
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
span.infobulle:hover:after{ visibility: visible; opacity: 1; bottom: 20px; }
span.infobulle:hover:before{ visibility: visible; opacity: 1; bottom: 14px; }

span.infobulle.animate:after, a.infobulle.animate:before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* Couleurs d'infoblles (utilisez les votres!) */
span.infobulle.blue:after { background:#007474; }
span.infobulle.blue:before { border-color: #007474 transparent transparent transparent; }