/* --FICHIER CSS DU 22//04/2016-- */


body {
font-family: "verdana" ,sans-serif;
font-size: 12px;
color: #706D32;
margin: 0px;
padding: 0px;
line-height: 17px;
font-weight: normal; 
/* Scrollbar properties are only supported by Internet Explorer 5.5+ 
scrollbar-3dlight-color: #DBED65;
scrollbar-arrow-color: #7865ED;
scrollbar-base-color: black;
scrollbar-darkshadow-color: white;
scrollbar-face-color: #BCE7DA;
scrollbar-highlight-color: #BD65ED;
scrollbar-shadow-color: #318439;
scrollbar-track-color: #BCC8E7;  */

/* --border: 1px solid red;-- pour règler les cadrages*/
}

/* --Formats du texte-- */

p.long {
font-size: 11px;
width: 768px;
color: #27792E;
font-weight: bold;
font-style: italic;
text-align: center; 
border: 0px;
}


div.centre { text-align: center;
}

/* --Contenu de la page-- */
#page {
width: 768px;
margin-left: 221px;
padding-left: 3px;
border: 0px solid blue;  
}

#logo {
background-image: url(images/logoc.png); 
background-repeat: no-repeat;
height: 200px;
width: 768px;
margin-left: -2px;
padding 0px;
border: 0px solid red; 
}

table.suite {
width: 750px;
margin-left: auto;
margin-right: auto;
text-shadow: 0.1em 0.1em 0.05em white;
}  

table.suite td.preced {
text-align: left;
width: 250px;
}

table.suite td.retour {	
text-align: center;
width: 250px;

}
table.suite td.suiv {
text-align: right;
width: 250px;
}

table.suite td img {  
vertical-align: middle; 
}

strong {
color: #27792E;
font: italic bold 11px Verdana;	
}

span.deco {
border: 1px solid green;
background-color: rgb(244, 249, 243);
font: bold 12px Verdana;
vertical-align: super;
color: #27792E;
}

span.red {
color: #CC0000;
}
span.marron {
color: Maroon;
}
span.bleu {
color: blue;
}
/* presentation galerie des sponsors */

.sponsor table {
margin: 2em auto ; width: 750px ;
border-collapse: separate ;
border-spacing: 20px ;
border: 4px solid navy ;
background: url(images/fond_tintin.jpg);
}

.sponsor td.picture p.image {
margin: 0 ; padding: 0 ;
text-align: center ;  }

.sponsor td.picture p.image img {
border: 2px solid navy ;
}

/* presentation galerie des scoops paris flash */

.pflash table {
margin: 2em auto ; width: 750px ;
border-collapse: separate ;
border-spacing: 20px ;
border: 2px solid green ;
background: url(images/fond_journal.jpg);
}

.pflash td.picture p.image {
margin: 0 ; padding: 0 ;
text-align: center ;  }

.pflash td.picture p.image img {
border: 1px solid black ;
}

/* presentation galerie jeunesse de héros */

.mov table {
margin: 2em auto ; width: 750px ;
border-collapse: separate ;
border-spacing: 20px ;
border: 2px solid navy ;
background: url(images/fond_mov.jpg);
}

.mov td.picture p.image {
margin: 0 ; padding: 0 ;
text-align: center ;  }

.mov td.picture p.image img {
border: 1px solid black ;
}

/* pour Mémoires Haddock  */

div.fond_feuille {
background: url("images/lfvert.jpg");
width: 768px;
height: 990px;
margin: 5px;
padding: 0px;
border: 0px solid black;
}

/* pour Mémoires chevalier Hadoque  */

div.fond_parchemin {
background: url("images/parchemin.jpg");
width: 768px;
height: 1086px;
margin: 5px;
padding: 0px;
border: 0px solid black;
}

p.memoires {
font-weight: bold;
text-align: justify;
width: 650px;
margin: -10px;
padding: 60px;
border: 0px solid black;
	
}

p.titre{ 
font-weight: bold;
text-align: center;
font-size: 20px;
}

p.carte {
margin: 30px;
padding-top: 60px;
border: 0px solid black;
}

p.ecriture {
font-family: "Lucida Calligraphy", Vivaldi, "MV Boli", "Segoe Print", "Segoe Script", cursive;
font-size: 25px;
width: 600px;
font-weight: bold;
text-align: center;
padding: 5px;
margin: 55px; 
}

/* --surlignage-- */

.stabilo {
font-family: "verdana" ,sans-serif;
font-size: 11px;
font-style: italic;
font-weight: bold;
background-color: #bae9c2;
}

/* --INFO BULLE-- */

a.info {
   position: relative;
   color: blue;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;

   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top: -150px; /* On positionne notre infobulle. */
   left: 400px;
   
   /* design de l'infobulle. */ 
   
   font-family: "comic sans ms" ,sans-serif;
   background: #e7eaac;
   color: black;
   padding: 4px;
   border: 2px solid maroon;
   border-left: 2px solid maroon;
   border-right: 2px solid maroon;
   }
   
/* --ouvrons l'oeil-- */ 

div.fond_tintin {
background: url(images/fond_tintin.jpg);
width: 680px;
margin: 25px;
padding: 15px;
border: 1px solid black;
} 

/* --lexique syldave-- */ 

div.lexique {
background: url("images/lfvert.jpg");
width: 760px;
margin: 0px;
border: 0px solid black;
}

p.lexique {
font-size: 11px;
width: 745px;
color: #27792E;
margin: 25px;
}  

/* --lexique syldave-- */ 

p.vignoble {
font-family: "verdana" ,sans-serif;
font-size: 12px;
color: #706D32;
width: 745px;
margin: 25px;
} 

/* table organigramme dragon  */

table.dragon {
margin: 2em auto;
width: 762px;
border-collapse: separate;
border-spacing: 2px;
border: 0px solid green;
background: beige;
margin-left: 3px;
}

table.dragon td {
text-align: left;
font-weight: normal;
font-size: 9pt;
}
 
 /* changement de couleur de fond infobulle Armes dans TINTIN  */
 /* La couleur de fond prend le pas sur celle de toute la page */

mark
{
background-color: #acf06a;
color: black;
border: 1px solid black;
}

/* Taille du lecteur audio HTML5 */

audio
 {
    width: 300px;
    height: 35px;
}