@font-face{
     font-family: "MarraireSans";
     src: url("Fonts/MarraireSans.ttf");
     font-weight: normal;
}
@font-face{
     font-family: "MarraireSans";
     src: url("Fonts/MarraireSans-Bold.ttf");
     font-weight: bold;
}
@font-face{
     font-family: "TimesUnicodeCD";
     src: url("Fonts/TimesUnicodeCD.ttf");
     font-weight: bold;
}
body{
	font-family: MarraireSans;
	color: #333333;

	margin: 0px;
	padding: 0px;  
}

#Legeire { width: 100%; height: 30px; max-width:400px}
#AudioTitre { height:40px;}
.imgOc, .imgFr { vertical-align: middle; padding: 0px 5px 0px 0px;}


a, a:link, a:visited  {
	color: #2F4864;
	text-decoration: none;
}

a:hover{
	color: #626031;
	text-decoration: underline;
}

h1{
font-size:28px; 
color:#006699
}

h3{
font-size:18px; 
color:#006699;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-size: 100%;
 font-weight: bold;
 color: #334d55;
}

/* Format général */
@media only screen
and (min-width : 900px) {

	#testaG{
	  float:left; 
		width: 180px; 
	}
	#testaC{
	  position:absolute; left:20%;
	  width: 45%;
	  padding: 10px 10px 10px 10px;
	}
	#testaD{ 
	   position:absolute; top:10px; left:68%; text-align:right; size:12px;
		width: 30%;
	}
	#pe {
		position:absolute; left:250px; top:45px;
		width: 300px;
		clear: both;
		/*border: 1px solid #cccccc; */
		font-size: 80%;
		color: #322A28;
		padding: 10px 10px 10px 10px;
	}
	#pe a:link, #pe a:visited {color:#322A28;}

/* Fin format général */
}

/* Format étroit */
@media only screen
and (max-width : 900px) {

	#testaG{
	  display: none; 
	}
	#testaC{
	  float:left; left:0%;
	  width: 65%;
	  padding: 0px 0px 0px 10px;
	}
	#testaD{ 
	   position:absolute; top:10px; left:68%; text-align:right; size:12px;
		width: 30%;
	}
	#pe {
        /*display: none; */
		float:left; left:55%; top:70px;
		width: 80%;
		clear: both;
		/*border: 1px solid #cccccc; */
		font-size: 80%;
		color: #322A28;
		padding: 10px 10px 10px 10px;
	  }
	#pe a:link, #pe a:visited {color:#322A28;}

}
/* Fin format étroit */
}


#Fic {display:none;}
#RepFic {display:none;}


.ADreite {padding-left:10px;}

.StyleNaut { font-size:12px; font-weight: normal; color:#003399;}
.StyleLiam { font-size:12px; font-weight: normal;}
 
.NautStyle2 {color: #003399; font-size: 12px;}
.NautStyle4 {color: #003399; font-size: 20px;}
.NautStyle5 {color: #322A28; font-size: 12px;}
 
.StyleOc {color: #6666CC; font-weight:normal}
.StyleFr {color: #669999; font-weight:normal}
.styleOrigine {color: #003333; font-size:14px; font-weight:normal;
	padding: 5px 0px 5px 10px;
	border-bottom: 1px solid #cccccc;
}
.StyleChant {color: #5B5B5B; font-size: 12px; font-weight:normal}
.StyleTexte {color: #336666; font-weight:normal;}


img.imgGauche {float:left; margin-left:20px; margin-top:20px;}
img.imgDroite {float:right; margin-left:20px; margin-top:20px;}


/* Pour chaque sous-ensemble de la zone droite */
.elementLatzDreit {	border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}

/* Labels associés aux cases à cocher d'extension d'élément */
#labelLatzD, #labelRecents, #labelTots, #labelContexte1, #labelContexte2, #labelContexte3 {
		  display: block;
		  padding: 0.5em;
		  text-align: left;
		  color: #2C2827;
		  font-size:14px;
}
		  
/* Les cases à cocher d'ouverture/fermeture d'éléments sont masquées */
#inputLatzD, #inputRecents, #inputTots, #inputContexte1, #inputContexte2, #inputContexte3  {
	display: none;
	visibility: hidden;
}
/* Propriétés des éléments de type Contexte communes à tous les formats */
.elementContexte {
        position: relative;
        min-height:29px;
        height: auto; 
		margin: 0px;
		padding: 10px 0px 0px 10px;
		background-color: #eeeeee;
		border-left: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		font-size: 14px;
		overflow:auto; 
}

#Contexte1, #Contexte2, #Contexte3  {
		  visibility: hidden;
		  height:0px;
		  overflow: hidden;
		  transition: height 0.5s;
		  color: #2C2827;
}
/* Dans tous les formats, les éléments de type Contexte Texte ont le même mode ouverture/fermeture par défaut */		
#inputContexte1.Texte:checked ~ #Contexte1, #inputContexte2.Texte:checked ~ #Contexte2, #inputContexte3.Texte:checked ~ #Contexte3 {
  		visibility: visible;
  		height: auto;
		overflow:auto;
		overflow-x: hidden;
}
#inputContexte1.Texte:checked ~ label::before, #inputContexte2.Texte:checked ~ label::before, #inputContexte3.Texte:checked ~ label::before   {
  		content: "-";
}

#labelContexte1::before, #labelContexte2::before, #labelContexte3::before   {
		  /*font-family: Consolas, monaco, monospace;*/
		  font-weight: bold;
		  font-size: 15px;
		  content: "+";
		  vertical-align: text-top;
		  display: inline-block;
		  width: 20px;
		  height: 10px;
		  margin-right: 3px;
		  /*background: radial-gradient(circle at center, #CCC 50%, transparent 50%);*/
}
/* la classe elementContengut insère un contenu sur toute la largeur */
.elementContengut{
      position: relative;
	  display: block;
	  clear:both
}
/* la classe elementContengut insère un contenu sur une largeur  */
.elementMeiContengut {
	    float: left; left: 0px; top: 0px; width: auto; height: auto;
	    display: block;
		padding: 5px 15px 0px 5px;
		margin: 0px 0px 0px 0px;
		border-width:1px;
 		border-style:dotted;
 		border-color:black;
}
img.imgGaucha {float:left; margin-left:10px; margin-top:10px; max-width:calc(100% - 40px); height:auto;}
img.imgDreita {float:right; margin-right:10px; margin-top:10px; max-width:calc(100% - 40px); height:auto;}
img.imgGaucha2 {float:left; margin-right:10px; margin-top:10px; max-width:calc(100% - 260px); height:auto;}
img.imgDreita2 {float:right; margin-left:10px; margin-top:10px; max-width:calc(100% - 260px); height:auto;}

/* formattage des éléments */
#Recents, #Tots {
		  visibility: hidden;
		  height:0px;
		  overflow: hidden;
		  transition: height 0.5s;
		  color: #2C2827;
		  line-height: 2;
}
span.Telecharjar {
	padding: 0px 0px 0px 16px ; 
	background: url(charjar.gif) no-repeat;  
	cursor:pointer; 
	color: #003333;
}		
/* Format général */
@media only screen
and (min-width : 900px) {

     #chap {
        position: absolute;
        width: 100%;
        height: 60px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0px;
		padding: 10px 0px 0px 0px;
		border-bottom: 1px solid #cccccc;
	 	background-color: #DFFFB0; 
      }

/* Format général */
      #elementTotesLosDocuments {
        position: absolute;
        z-index:1;
        width: 240px;
        top: 71px;
        right: auto;
        bottom: 100px;
        left: 0;
		margin: 0px 0px;
		padding: 10px 0px 20px 10px;
		border-right: 1px solid #cccccc;
		font-size: 14px;
		overflow:auto;
        min-height:29px; 
		height: 510px; 
		color: #666;
      }
/* Format général */
	  #elementRecents {
        position: absolute;
        z-index:1;
        width: 260px;
        top: 71px;
        height: 510px; 
        right: 0;
        left: auto;
		margin: 0px;
		padding: 10px 0px 20px 10px;
		background-color: #eeeeee;
		border-left: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		font-size: 14px;
		overflow:auto; 
      }
/* Format général */
	  #groupeContexte {
	  	position: absolute;
	  	top:71px;
        right: 0px;
        width: 260px;
        height: auto; 
      }

/* Format général */      
      #contengut {
	    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
		line-height: 1.5;	
	    position: absolute;
        width: calc(100% - 560px);
        height: auto;
        top: 80px;
        bottom: 100px;
        left: 260px;
		padding: 5px 15px 0px 5px;
		margin: 0px 10px 0px 10px;
		font-size:13px; 
      }
      #contengut.index {
             width: calc(100% - 260px);
	  }
      #contengutAccueil {
	    */font-family:Verdana, Arial, Helvetica, sans-serif;*/
		line-height: 1.1;	
	    position: absolute;
        width: 65%;
        height: auto;
        top: 80px;
        bottom: 100px;
        left: 16%;
		padding: 5px 15px 0px 5px;
		margin: 0px 10px 0px 10px;
		font-size:13px;
      }

/* Format général */
	  #PajaSegolena {
	  overflow:auto;
	  height: 460px;
	  width: 100%;
      }
/* Format général */	  
	  /* Menu des pages de l'article Parler Sainte-Sigolène */
	  /* Il est de hauteur fixe en format général*/
	  #MenuSegolena {
	  overflow:auto;
	  height: 520px;
	  display: block;
	  }
	  /* L'option de réduction de ce menu est possible uniquement en format étroit */
	  #MenuSegolena span {display: none;}
	  
	  #MenuSegolena p {display: block;}
	  
	  #ChamjarLarjorMenuSegolena {
	  display: block;
	  }
/* Format général */	  
	  #labelLatzD::before, #labelRecents::before, #labelTots::before  {
		  /*font-family: Consolas, monaco, monospace;*/
		  font-weight: bold;
		  font-size: 15px;
		  content: "+";
		  vertical-align: text-top;
		  display: inline-block;
		  width: 20px;
		  height: 10px;
		  margin-right: 3px;
		  /*background: radial-gradient(circle at center, #CCC 50%, transparent 50%);*/
		}	
		#Segolena {
		  height: 0px;
		  overflow: hidden;
		  transition: height 0.5s;
		  color: #2C2827;
		}
/* Format général */
		#inputRecents:checked ~ #Recents {
  		visibility: visible;
  		height: auto;
		overflow:auto;
		overflow-x: hidden;
		}
		#inputRecents:checked ~ label::before {
  		content: "-";
		} 
/* Format général */		
		#inputTots:checked ~ #Tots {
  		visibility: visible;
  		height: auto;
		overflow:auto;
		overflow-x: hidden;
		}
		#inputTots:checked ~ label::before {
  		content: "-";
		} 

/* Format général */ 
		#inputLatzD:checked ~ #Segolena {
  		height: auto;
		overflow:auto;
		overflow-x: hidden;
		}
		#inputLatzD:checked ~ label::before {
  		content: "-";
		}  
/* Format général */ 
	#inputContexte1.Chant:checked ~ #Contexte1, #inputContexte2:checked ~ #Contexte2, #inputContexte3:checked ~ #Contexte3 {
	  		visibility: visible;
	  		height: auto;
			overflow:auto;
			overflow-x: hidden;
	}
	#inputContexte1.Chant:checked ~ label::before, #inputContexte2:checked ~ label::before, #inputContexte3:checked ~ label::before   {
	  		content: "-";
	}
}
/* Format étroit */
@media only screen
and (max-width : 900px) {

     #chap {
        position: absolute;
        width: 100%;
        height: 70px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0px;
		padding: 10px 0px 0px 0px;
		border-bottom: 1px solid #cccccc;
	 	background-color: #DFFFB0; 
      }

/* Format étroit */
 	  #elementRecents, #elementTotesLosDocuments {
        position: absolute;
        width: calc(100% - 11px);
        height: auto;
        min-height: 46px; 
        right: auto;
        left: 0px;
		margin: 0px;
		padding: 10px 0px 0px 10px;
		background-color: #eeeeee;
		border-left: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		font-size: 14px;
		overflow:auto; 
      }
 	  #elementRecents {
        z-index:2;
        top: 81px;
      }
      #elementTotesLosDocuments {
        z-index:1;
        top: 139px;
      }
      #elementTotesLosDocuments.pageSecondaire {
      	display: none;
      }

/* Format étroit */
	  #groupeContexte {
	  	position: absolute;
	  	top:81px;
	  	left:0px;
        right: auto;
        width: 100%;
        height: auto;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px; 
      }
/* Format étroit */
      #contengut {
	    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
		line-height: 1.5;	
	    position: absolute;
        width: calc(100% - 10px);
        height: auto;
        top: 210px;
        bottom: 100px;
        left: 0%;
		padding: 5px 5px 0px 5px;
		margin: 0px 0px 0px 0px;
		font-size:13px; 
      }
/* Format étroit */
	  #contengutAccueil {
	    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
		line-height: 1.1;	
	    position: absolute;
        width: 95%;
        height: auto;
        top: 80px;
        bottom: 100px;
        left: 0%;
		padding: 5px 15px 0px 5px;
		margin: 0px 10px 0px 10px;
		font-size:13px;
      }

/* Format étroit */
	  #PajaSegolena {
	  width: 100%;
	  overflow : hidden;
	  }

	  /* Menu des pages de l'article Parler Sainte-Sigolène */
	  /* Il est de hauteur fixe en format général*/
	  #MenuSegolena {
	  overflow : hidden;
	  height: auto;
	  }
 	  /* L'option de réduction de ce menu est possible uniquement en format étroit */ 
	  #MenuSegolena span {display: block;}	
	  /* En format étroit, on ne propose pas l'option menu large */
	  #ChamjarLarjorMenuSegolena {
	  display: none;
	  }
/* Format étroit */
		#labelRecents::before, #labelTots::before  {
		  /*font-family: Consolas, monaco, monospace;*/
		  font-weight: bold;
		  font-size: 15px;
		  content: "-";
		  vertical-align: text-top;
		  display: inline-block;
		  width: 20px;
		  height: 10px;
		  margin-right: 3px;
		  /*background: radial-gradient(circle at center, #CCC 50%, transparent 50%);*/
		}	
/* Format étroit */
		#labelLatzD::before {
		  /*font-family: Consolas, monaco, monospace;*/
		  font-weight: bold;
		  font-size: 15px;
		  content: "+";
		  vertical-align: text-top;
		  display: inline-block;
		  width: 20px;
		  height: 10px;
		  margin-right: 3px;
		  /*background: radial-gradient(circle at center, #CCC 50%, transparent 50%);*/
		}
/* Format étroit */
		#Segolena {
		  height: 0px;
		  overflow: hidden;
		  transition: height 0.5s;
		  color: #2C2827;
		}
/* Format étroit */
		#inputRecents:not(:checked) ~ #Recents, #inputTots:not(:checked) ~ #Tots {
  		visibility: visible;
  		height: auto;
		overflow:auto;
		overflow-x: hidden;
		}
/* Format étroit */
		#inputLatzD:checked ~ #Segolena {
  		height: auto;
		overflow:auto;
		overflow-x: hidden;
		}
/* Format étroit */
		/* En format étroit, le menu Recents est fermé par défaut */ 
		#inputRecents:checked ~ label::before {
  		content: "+";
		} 
		/* En format étroit, le menu complet est fermé par défaut */ 
		#inputTots:checked ~ label::before {
  		content: "+";
		}
/* Format étroit */
	#inputContexte1.Chant:not(:checked) ~ #Contexte1, #inputContexte2.Chant:not(:checked) ~ #Contexte2, #inputContexte3.Chant:not(:checked) ~ #Contexte3 {
	  		visibility: visible;
	  		height: auto;
			overflow:auto;
			overflow-x: hidden;
	}
	#inputContexte1.Chant:not(:checked) ~ label::before, #inputContexte2.Chant:not(:checked) ~ label::before, #inputContexte3.Chant:not(:checked) ~ label::before   {
	  		content: "-";
	}
}

/* Style des lignes de séparation */
.table-separateur {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif; */
  color:#FFFFFF;
  background-color : #FFFFFF;
  /*color : #333333;  
  background-color : #d6d3ce; */
}

/* Style du titre du tableau */
.table-titre {
   font-size : 12px; 
  /* font-family : Verdana, arial, helvetica, sans-serif; */
  color: #645B68; 
  text-align : center; 
  font-weight : bold; 
  background-color:#CCCCCC; 
}

/* Style des en-têtes du tableau */
.table-entete {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif;*/
  color: #666666; 
  background-color : #DFE3E0; 
}

/* Style des en-têtes du tableau (centré) */
.table-entete-centre {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif;*/
  color: #666666; 
   text-align : center; 
  background-color : #DFE3E0; 
}

/* Style des en-têtes du tableau (droite) */
.table-entete-droit {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif; */
  color: #666666; 
  text-align : right; 
  background-color : #DFE3E0; 
}

/* Style 1 des cellules */
.table-ligne1 {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif;*/ 
  color : #333333; 
  background-color:#F2F3F4; 
}



/* Style 1 des cellules (centré) */
.table-ligne1-centre {
  font-size : 12px; 
  /*font-family: Arial Verdana, arial, helvetica, sans-serif;*/ 
  color : #333333; 
  text-align : center; 
  background-color:#F2F3F4; 
}
.table-ligne1-centre-gras {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif;*/
  color : #333333; 
  text-align : center; 
  background-color:#F2F3F4;
  font-weight:bold; 
}

/* Style 1 des cellules (droite) */
.table-ligne1-droit {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif;*/
  color : #333333; 
  text-align : right; 
  background-color:#F2F3F4; 
}

/* Style 1 des cellules (gauche) */
.table-ligne1-gauche {
  font-size : 12px; 
  /*font-family : Verdana, arial, helvetica, sans-serif;*/ 
  color : #333333; 
  text-align : left; 
  background-color:#F2F3F4; 
}