
/* --FICHIER CSS MOULINSART DU 13/03/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: #449131;
scrollbar-base-color: black;
scrollbar-darkshadow-color: white;
scrollbar-face-color: #BCE798;
scrollbar-highlight-color: #BD6518;
scrollbar-shadow-color: #BC0000;
scrollbar-track-color: #FFF4C1;  */
 
/* --border: 1px solid red;-- pour règler les cadrages*/
}

/* --Formats du texte-- */

p {
text-align: justify;
width: 380px;
margin: 0px;
padding: 5px; 
top: 320px;
/* --border: 1px solid purple;-- pour règler les cadrages*/

}

p.court {
text-align: justify;
width: 290px;
margin: 0px;
padding: 5px;
/* --border: 1px solid Olive;-- pour règler les cadrages*/
}

p.long {
font-size: 11px;
width: 700px;
color: #27792E;
font-weight: bold;
font-style: italic;
text-align: center; 
border: 0px;
/* --border: 1px solid maroon;-- pour règler les cadrages*/
}

p.longg {
font-size: 11px;
width: 700px;
color: #27792E;
font-weight: bold;
font-style: italic;
border: 0px;
/* --border: 1px solid Silver;-- pour règler les cadrages*/
}

p.longbleu {
font-size: 11px;
width: 700px;
color: #0000FD;
font-weight: bold;
font-style: italic;
border: 0px; 
/* --border: 1px solid Silver;-- pour règler les cadrages*/
}

p.longn {	
text-align: justify;
width: 700px;	
/* --border: 1px solid black;-- pour règler les cadrages*/
}

h1,h2 { 
text-align: justify; 
width: 380px;
margin: 0px; 
padding: 5px;
/* --border: 1px solid aqua;-- pour règler les cadrages*/
}

h3 { 
text-align: justify; 
width: 220px;
margin: 0px; 
padding: 3px;
/* --border: 1px solid lime;-- pour règler les cadrages*/
}

/* Légendes des images */

p.legende {
font-size: 11px;  
width: 280px;
color: #27792E;
font-weight: bold;
font-style: italic;
/* --border: 1px solid orange;-- pour règler les cadrages*/
}

/* haut de page */

#texte div.up { position: relative;
top: -100px;
}  

/* centrage du texte */

div.centre { text-align: center;
}

/* --Contenu de la page-- */

#page {
width: 727px;
margin-left: 217px;
padding-left: 54px;
/* --border: 1px solid blue;-- pour règler les cadrages*/
}

/* le logo */

#logo {
background-image: url(images/logoc.png);
background-repeat: no-repeat;
background-position: center top;
height: 250px;
width: 750px;
margin-left: -40px; 
/* --border: 1px solid red;-- pour règler les cadrages*/
}

/* --Menu-- */
#menu {
position: absolute;
font-size: 11px;
padding: 15px 10px 5px 20px;
top: 210px;
margin-left: 440px;
width: 250px;
text-shadow: 0.1em 0.1em 0.05em white;
/* --border: 1px solid green;-- pour règler les cadrages*/
}

#menu a{
display: inline;
}

#menu h3.select span {
display:none
}

#menu ul {
margin: 0px;
padding: 0px;
padding-top: 5px; 
}

#menu li {
line-height: 2ex; 
list-style-type: none;
display: block; 
padding-top: 3px; 
margin-bottom: 5px;
}

/* --lien non visité-- */

#menu li a:link {
color: #706D32;
text-decoration: none;
font-weight: bold;

}

/* --Lien visité-- */

#menu li a:visited {
color: #F4A460;
text-decoration: none;
font-weight: bold;
}

/* --Survol du lien-- */

#menu li a:hover {
color: Lime;
background-color: #FFFFCC;
text-decoration: none;
/*border-bottom: 1px solid #FF00FF;*/
font-weight: bold;
}

/* colonne de droite */

#photos {
position: absolute;
padding: 12px;
top: 830px;
margin-left: 400px;
width: 300px;
border: 0px solid Fuchsia
}

p.droit  {
text-align: justify;
width: 300px;
margin: 0px;
padding: 5px; 
top: 320px;
}

/* titres divers */

p.titre { 
border-style: groove;
text-align: center;
}

div.titresom {
text-align: center;
border-style: groove;
width: 620px;
margin-left: 8%;
}

/*  décos diverses */

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

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

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

p.lettrine:first-letter	{
float: left; 
line-height: 90%;
color: #27792E;
font-size: 280%;/*une hauteur de 3 lignes*/
font-family: tintin majuscules,algerian,viking, sans-serif ; /*de préférence tintin*/
font-weight: bold;/*en gras*/
margin-right:3px;/*marge de 3 px à droite par rapport au texte*/

}

p.lettriner:first-letter {
float: left;
line-height: 60%;
color: #CC0000;
font-size: 280%; /*une hauteur de 3 lignes*/
font-family: tintin majuscules,algerian,viking, sans-serif ; /*de préférence tintin*/
font-weight: bold; /*en gras*/
margin-right: 1px; /*marge de 1 px à droite par rapport au texte*/
}

span.marron {
color: Maroon;
}

span.red {
color: #CC0000;
}

/*centrage des images dans la colonne de gauche*/

div.centre_img_g { 
text-align: center;
width: 380px;
}

/*centrage des images dans la colonne de droite*/

div.centre_img_d { 
text-align: center;
width: 300px;
}

/*centrage spécial bonus jurons */

div.jurons {
text-align: center;
margin-top: 40px;
width: 723px;
background-color: #99CAE8;
font-family: "verdana" ,sans-serif;
font-size: 24px;
color: Black;
font-weight: bold;
text-transform: uppercase;
}

p img { 
vertical-align: middle; 
}

/* Sommaire des chroniques */

#sommaire {
text-align: center;
}

#sommaire ul {
margin: 0px;
padding: 20px;
}

#sommaire li {
line-height: 2ex; 
list-style-type: none;
display: block; 
padding-top: 5px; 
margin-bottom: 5px;
}

/* --lien non visité-- */	

#sommaire li a:link {
color: #706D32;
text-decoration: none;
font-weight: bold;
}

/* --lien visité-- */

#sommaire li a:visited {
color: #F4A460;
text-decoration: none;
font-weight: bold;
}

/* --lien survolé-- */

#sommaire li a:hover {
color: Lime;
background-color: #FFFFCC;
text-decoration: none;
font-weight: bold;
}

/* les sponsors */

#sponsor {
list-style: url(images/grndiamd.gif);
azimuth: leftwards;
}

/* --lien non visité-- */	

#sponsor li a:link {
color: #706D32;
text-decoration: none;

}

/* --lien visité-- */

#sponsor li a:visited {
color: #F4A460;
text-decoration: none;

}

/* --lien survolé-- sans background et souligné */

#sponsor li a:hover {
color: #984975;
background-color: none;
text-decoration: underline;

}

/* reliure pour chronique déformation noms et surnoms */

div.reliure {
background: url("images/classeur.gif");
width: 350px;
padding: 9px;
border: 0px solid black;
}

/* reliure pour chronique szlaszeck  */

div.recette {
background: url("images/reliure.jpg");
width: 660px;
margin: 0px;
padding: 20px;
border: 0px solid black;
}

p.recette {
text-align: justify;
width: 600px;
margin: 28px;
padding: 0px;
}

/* biographie RG  */

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

p.fond_feuille {
text-align: justify;
width: 600px;
margin: 28px;
padding: 0px;
}

/* étiquettes loch lomond  */

div.loch_lomond {
background: url("images/lfvert.jpg");
width: 700px;
height: 1280px;
margin: -30px;
padding: 20px;
border: 1px solid black;
}  

/* quizz botanique  */

div.botanique {
background: url("images/lfvert.jpg");
width: 700px;
margin: -33px;
padding: 20px;
border: 0px solid black;
}  


/* A TABLE !!! */

/* table pour chronique precedente ou suivante */

table.suite {
width: 95%;
margin-top:70px;
text-shadow: 0.1em 0.1em 0.05em white;
clear:both;		
}  

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

table.suite td.retour {	
text-align: center;
}
table.suite td.suiv {
text-align: right;
}

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

/* table plan du site  */

table.plan { 
margin: 1em auto ;
border-collapse: collapse;
}

table.plan th {
text-align: center;
font-weight: bold;
font-size: 11pt;
}

table.plan td {
text-align: center;
font-weight: bold;
font-size: 10pt;
}

table.plan td a{
text-decoration: none;
color: #228B22;
font-family: "Comic Sans MS";
}

/* table jeu memo */

table.memo {
margin: 2em auto;
width: 600px;
border-collapse: separate;
border-spacing: 10px;
border: 4px solid navy;
background: url(images/fond_tintin.jpg);
margin-left: 35px;
}

/* table test krollspell  */

table.test {
margin: 1em auto;
border-collapse: separate;
}

table.test th { 
text-align: left;
font-weight: bold;
font-size: 10pt;
}

table.test td {
text-align: left;
font-weight: normal;
font-size: 10pt;
}

/* table diagnostic krollspell  */

table.diagnostic { 
width: 510px;
margin: 1em auto ;
border-collapse: collapse;
}

table.diagnostic, table.diagnostic td {  
border: 2px solid green;
}

table.diagnostic td { 
text-align: left;
background-color: rgb(244, 249, 243);
}

/* table generateur jurons adhoc */

table.adhoc {
margin: 2em auto;
width: 700px;
border-collapse: separate;
border-spacing: 10px;
border: 4px solid navy;
background: url(images/fond_tintin.jpg);
margin-left: -12px;
}

div.textarea {
text-align: center;
margin-left: -55px;
}	

div.centretext {
text-align: center;
margin-left: -90px;
}

/* table pour chronique le mystere des marches et tintin dans le monde */

table.marches { 
width: 680px;
margin: 1em auto ;
border-collapse: collapse;

}

table.marches th { 
border: 2px solid green;
background-color: rgb(230, 255, 230);

}

table.marches, table.marches td {  
border: 2px solid green;

}

table.marches td { 
text-align: center;
font-weight: normal;
font-family: "verdana" ,sans-serif;
font-size: 12px;
background-color: rgb(244, 249, 243);

}

/* table profil tintinogénique  */

table.profil {
margin: 2em auto;
width: 630px;
border-collapse: separate;
border-spacing: 10px;
border: 2px solid green;
background: url(images/fond_tintin_bis.jpg);
margin-left: 51px;
}

table.profil th { 
text-align: left;
font-weight: bold;
font-size: 10pt;
}

table.profil td {
text-align: left;
font-weight: normal;
font-size: 10pt;
font-family: "Comic Sans MS";
}

/* --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: 50px;
   
   /* 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;
   }
   

   
/* --Paroles chanson Tintin en colonnes-- */   
   
.columns {
-webkit-columns:2;
-moz-columns: 2;
 columns: 2;
 column-gap: 1em;
 }
		
p.colonne {
font-family: "comic sans ms" ,sans-serif;
color: black;
padding: 1px;
margin: 0;
background: beige;
display: inline-block; width: 70%;
-webkit-column-break-after: always;
break-inside: avoid-column;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
} 

/* --combat naval avec Laszlo Carreidas-- */ 

.combat_naval { 
font-size:13pt; 
font-weight:bold; 
background: url("images/fond_ecolier.jpg");
color:navy; 
text-align:center; 
font-family: "comic sans ms" ,sans-serif;
width: 656px;
height: 320px;
margin-left: 20px;
}

/* Fond vert lettre noires bords noirs 1 pixel*/
/* ATTENTION si non présicé la balise mark hérite du format précédent */

mark.green  
{
background-color: #acf06a;
color: black;

font: bold 12px Verdana;
}

/* Taille du lecteur audio HTML5 */

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

/* Texte clickable ombre */

.wysiwyg 
a {
text-decoration: none;
-moz-box-shadow:inset 0 -4px 0 0 rgba(0,255,0,0.5);
-webkit-box-shadow:inset 0 -4px 0 0 rgba(0,255,0,0.5);
box-shadow:inset 0 -4px 0 0 rgba(0,255,0,0.5);
}

.wysiwyg 
a:hover{
-moz-box-shadow:inset 0 -21px 0 0 rgba(0,255,0,0.5);
-webkit-box-shadow:inset 0 -21px 0 0 rgba(0,255,0,0.5);
box-shadow:inset 0 -21px 0 0 rgba(0,255,0,0.5);
} 



