/* CSS Document */
/* CSS issu des tutoriels http://css.alsacreations.com */

HTML{
    font-size: 100%;    
}
html>body #page {
    height: auto;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #586674;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow:auto;
    border:0;
}
#page {
    position: relative;
    min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
}
#page {
    z-index: 1;
    width: 785px;
    margin: auto;
    background-color: #ffffd9;
    background: url(bordure.png) repeat-y;
    border: 1px solid #c6c6c1;
}
#entete {
     float: left;
     padding: 2px 0 0 15px;
     margin-bottom: 10px;
}

#entete li a {
    color: #000;
    text-decoration: none;
}

/*supprimer ou modifier ??*/
#contenu {
    float: left;
    width: 600px;
    padding : 1px 0 0 25px; 
    text-align: left; 
}
/* ci-dessous debut menudroit haut de page -background: #e7eee8;-*/
dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li, a {
    color: #000;
    text-decoration: none;
}
li a:hover {
    background: #ffe;
    text-decoration: underline;
}
#menudroit {
   position: absolute;
   z-index: 150;
   width: 135px;
   top: 0;
   left: 641px;
}
#menudroit ul {
   cursor: pointer;
   text-align: left;
   font-size: 0.8em;
   padding: 20px 0 30px 20px;
   
}
#menudroit li a {
color: #5c1d28;
/*color: #000060*/;
border-bottom: 1px solid #d7b1b0;
text-decoration: none;
display: block;
height: 100%;
margin: 0 0 3px 0;
}
#menudroit li a:hover {
background: #ffe;
text-decoration: underline;
}
/* ci-dessous pied de page*/

/*a voir pour positionner le pied en bas!!! position: absolute; bottom: 0;
http://forum.alsacreations.com/faq/faq-57-Appliquer-une-hauteur-de-100-a-un-element.html
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html*/
#pied {
    font-style: italic;
    font-size: 0.8em;
    padding: 2em 0 2em 60px;
    clear:both;
    text-align: left;
}
#pied a {
    color: #000;
    text-decoration: none;
}
#pied a:hover {
    text-decoration: underline;
}
/* ci-dessous liens infosbulles*/
.bulle {				
 
  padding         : 0px 0px 0px 0px; 
  background-color: #ebddaa;
 
} 
a.bulle span {
display:none;
}

a.bulle {				
  color           : /* Couleur de notre lien */
  
  text-decoration : none;    /* Aucun soulignement du texte */
  padding         : 0px 17px 0px 1px; /*Définition des marges intérieures de notre lien */
    /* Définition de l'arrière plan de notre lien */
  /*background      : transparent url('pictodef.gif') no-repeat right;*/
  background-color: #ebddaa;
  position       :  relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
  }  

a.bulle:hover span {				
  display        : block;    /* Rend visible notre bloc span */
  position       : absolute; /* Sort notre bloc de son conteneur afin de le positionner */
  background     : #ebddaa;   /* Définition du fond, sinon on a le même que notre lien */
  border         : 1px solid #6699ff; /* Définition des bordures */
  padding        : 10px 2px 10px 10px;       /* Définition des marges intérieures */	  
  width          : 13em;    /* On fixe une largeur par défaut */

  color          : #000;      /* Réinitialisation de la couleur du texte */
  text-align     : left;   /* Justification du texte */	
  cursor         : default;   /* Réinitialisation de notre curseur, sinon par défaut on a le même que notre lien */
  text-decoration:none;
    /* Positionnement de notre info-bulle */
  top            : 1.5em;     
  left           : 1px;
  font-size      : 0.85em;
  z-index        : 999;
  
 -moz-border-radius-topleft: 4px;
 -moz-border-radius-topright: 4px;
 -moz-border-radius-bottomleft: 4px;
 -moz-border-radius-bottomright: 4px;
}   

a.bulle:hover {
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */ 
  z-index  : 999;
 }                    

/* ci-dessous sommaire*/
#sommaire {
  color: #00008c;
}
#contenu #sommaire li {

    list-style-position: inside;
    margin-left: 25px;
}
#sommaire a {
    color: #000;
    text-decoration: none;
}
#sommaire li a:hover {
    background: #ffe;
    text-decoration: underline;
}
#sommaire h4 {
   font: 1em/1em Arial, Helvetica, sans-serif;
   font-weight: bold;
   padding: 10px;
   border: 1px solid #c6c6c1;
}

/* ci-dessous classe de contenu*/
#contenu li {
   list-style-type: circle;
   margin-left: 20px;
}
#contenu a:hover {
   text-decoration: underline;
}
#contenu h1 h2 {
   padding: 0;
   margin: 0;
}
#contenu h3{
   margin-top: 5px;
   margin-bottom: 5px;
}

#contenu .separation {
   clear: both;
   visibility: hidden;
}
/* ci-dessous classe de titre paragraphe*/
h1 {
    font: 1.3em/1em Arial, Helvetica, sans-serif;
}

h2 {
   font: 1.15em/1em Arial, Helvetica, sans-serif;
}

h3 {
   font: 1.05em/1em Arial, Helvetica, sans-serif;
   font-weight: bold;
   }

h4 {
   font: 1em/1em Arial, Helvetica, sans-serif;
   font-weight: bold;
}
h4+ {
   font: 1em/1em Arial, Helvetica, sans-serif;
   font-weight: bold;
   line-height : 300%;
}


h5 {
   font: 1em/1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5 {
   margin-top: 0px;
   margin-bottom: 0px;
} 
p {
   font: 0.9em Arial, Helvetica, sans-serif;
   margin-left: 0.8em;
   margin-top: 0px;
   margin-bottom: 0px;
}
.pjustifie {
text-align: justify;
font: 0.9em Arial, Helvetica, sans-serif;
}

.petit{
   font: 0.8em Arial, Helvetica, sans-serif;
  }
  
  
/* supprimer*/
.paradesphotos{
   font: 0.9em Arial, Helvetica, sans-serif;
   margin: 5px 0 0;
}
/* ci-dessous classe de mise en page*/
.droit {
  text-align: right;
}
.gauche {
  text-align: left;
}
.centre {
  text-align: center;
}    
.gras {
   font-weight: bold;
}

.souligne {
   text-decoration: underline;
   color: #000;
}
.majuscule {
   text-transform: uppercase;
}
.ecartlettre {
   letter-spacing:0.15em;
}
.ital {
  font: 0.9em Arial, Helvetica, sans-serif;
  font-style: italic;
}
.lettrine {
   font-weight: bold;
   font-size: 1.3em;
   line-height: 1em;
}
.decale230px {
  padding-left: 230px;
}
.decale100px {
  padding-left: 100px;
}
.decale80px {
  padding-left: 80px;
}
.decale50px {
  padding-left: 50px;
}
.decale20px {
  padding-left: 20px;
}
.decaledroit40px {
  padding-right: 40px;
}


/* ci-dessous différents cadres et bordures*/

/*#page .cadrephoto {
    float: left;
    width: 770px;
    margin: 0 0 0 -5px;
}  vérifier si cette classe est encore utilisée*/
.blocpagelarge {
position: relative;
float: left;
width: 750px;
padding: 5px  5px 5px 0px;
}

.blocgauche {
   float: left;
}
.bloccentre {
  float: left;
  width: 600px;
}
.blocglossaire {
   margin: 33px;
}
.blocdroit {
   float: right;
}
.bloctextegauche {
   float: left;
   width: 310px; 
}
.bloctextedroit {
   float: right;
   width: 290px;
}
.pavemargedroite {
   font-size: 0.75em;
   float: right;
   width: 104px;
   -moz-border-radius-topleft: 6px;
   -moz-border-radius-topright: 6px;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   padding: 4px;
   background-color: #e1b181;
   border: 3px solid #d7b1b0;
   z-index: 100;
}

.pavemargedroitpt {
   font-size: 0.7em;
   float: right;
   width: 104px;
   -moz-border-radius-topleft: 6px;
   -moz-border-radius-topright: 6px;
   -moz-border-radius-bottomleft: 6px;
   -moz-border-radius-bottomright: 6px;
   padding: 4px;
   background-color: #e1b181;
   border: 3px solid #d7b1b0;
   z-index: 100;
}
.cadrejaune {
  padding: 3px;
  background-color: #ffa;
}
.cadrevert{
  margin-bottom: 0.8em; 
  padding: 5px;
  background-color: #dcedd5;
}
.cadresurligne{
  background-color: #dcedd5;
}
.cadrejauneclair {
  padding: 3px;
  background-color: #fff2a0;
}
.borde {
  padding: 10px;
  border: 1px solid #c6c6c1;
  }
.bordphoto {
  margin:2px;
  padding: 1px;
  border: 3px double #c6c6c1;
} 

/* ci-dessous classe hautpage pour inclure des ancres avec retour haut de page*/
/*.hautpage {
  float: right;
  font-style: italic;
  font-size: 0.7em;
  border: 1px solid #c6c6c1;
  background-color: #ffffad;
}*/
/* ci-dessous classe pictosurligne à revoir*/
.pictodef{
  background:  url(pictodef.gif) no-repeat 100% 50%;
  padding:0px 5px 0px 5px;
  line-height: 1em;
}
.pictonote{
  background: #c4d1cc url(pictodef.gif) no-repeat 100% 50%;
  padding:0px 5px 0px 5px;
  line-height: 1em; 
}
.pictophoto{
  background:  url(pictophoto.gif) no-repeat 100% 50%;
  padding:0 16px 0 0;
  line-height: 1em; 
}
.pictovideo{
  background:  url(pictovideo.gif) no-repeat 100% 50%;
  padding:0 19px 0 0;
  line-height: 1em; 
}
.pictoson{
  background: url(pictoson.gif) no-repeat 100% 50%;
  padding:0px 10px 10px 13px;
  line-height: 1em; 
  }
  
/* ci-dessous classe cadrechap pour tête de chapitre*/
#cadrechap {
  margin: 14px 0 40px;
  padding: 10px;
  border: 4px double #c6c6c1;
  background-color: #fff5c6;
  /*#fff5c6*/
  }
#contenu #cadrechap h1 {
   padding: 0;
   margin: 0 0 18px;
}
#contenu #cadrechap h1, h2, h3, h4, h5 {
   padding: 0px;
   margin: 0px;
}
#contenu #cadrechap ul {
  margin-bottom: 0;
  margin-top: 10px;
  padding: 0;
}
/* ci-dessous classe object*/

/* présentation de définitions */
/*#tabledef dl {
   margin: 2em 0;
   padding: 0;
   font-family: georgia, times, serif;
}

#tabledef dt {
   text-align: left;
	 font-weight: bold;
	 font-style: normal;
	 font-size: 0.9em;
   width: 15em;
   float: left;
   margin: 0 0 0 25px;
   padding: 0.2em;
   border-top: 1px solid #999;
   font-weight: bold;
}
#tabledef dt a:hover{
   background: #ffe;
   text-decoration: underline;
}
#tabledef dd a:hover{
   background: #ffe;
   text-decoration: underline;
}*/
/* hack de commentaire avec un antislash pour ie5 mac \*/
/*dt { 
   clear: both; 
}
#tabledef dd {
	 text-align: left;
	 font-style: normal;
	 font-size: 0.8em;
   float: left;
   width: 26em;
   margin: 0 0 0 0;
   padding: 0.2em;
   border-top: 1px solid #999;
}*/
/* fin de présentation de définitions */


/* essai de vignettes et agrandissement réf. classe-a-hover-sur-images.txt 
L'idée est de diminuer la taille de la vignette en faisant une classe vignette retaillée 
plus petite que l'image qui n'apparait qu'au a:hover
*/
.imgflotgauche
{
   float: left;
   margin: 0 10px 5px 0;
}
.imgflotdroite
{
   float: right;
   margin: 0 0 5px 10px;
}


.vignette a {
float : left;
width: 140px;
height: 140px;
margin: 4px 4px 4px 0;
border: 1px solid #c6c6c1;
}
.vignette a img {
width: 140px;
height: 140px;
border: 0;
}
.vignette a:hover {
border-color: #ffffff;
}
.vignette a:hover img {
position: absolute;
z-index:9;
width : auto;
height : auto;
border: 1px solid #c6c6c1;
}
/*petites vignettes*/
.petitevignette{
margin: 0;
padding: 0 3px 0 0;

/*float : left;*/
background-color: #f9f9f9;

}
.petitevignette a img {
/*display: block;*/
margin: 4px 0 4px 4px;
width: 50px;
height: 50px;
border: 1px solid #c6c6c1;
}
/*
width: 50px;
height: 50px;
border: 0;
}*/
.interligne {
   line-height : 150%;
}