/*
Rappel : MARGIN... top ... right... bottom... left
        margin-top = marge supérieure
        margin-right = marge de droite
        margin-bottom = marge inférieure
        margin-left = marge de gauche
        à preferer sur une ligne car incompatible IE6
*/
/* ------------------------------------------------------------------------------ */
/* structure generale                                                             */
/* ------------------------------------------------------------------------------ */
#conteneur {
    width: 890px;
    height: 700px;
    margin: auto;
    background-image: url("/images/fond.jpg");
    background-repeat: no-repeat;
    background-color: #CCCFFF;
}

#entete {
    width: 890px;
    height: 95px;
    background-color: white;
    background: url("/images/jezakel.jpg") top left no-repeat;
}

#gauche {
	/*position: absolute;*/
    margin: 50px auto auto 0;
    width: 135px;
    left: 0;
    float: left;
    background: url("/images/menu-fond.png");
    text-align: center;
    font-size: 1.1em;
}

#droite {
   /* background-color:#9999CC; */
    background-color:#E0C7F8;
    margin: 0 auto auto 140px;
    background-image: url("/images/plage.jpg");
    /*background-image: url("/images/soleil.jpg");*/
    top: 95px;
    width: 745px;
    max-width: 745px;
	-width: 725px;		/* largeur */
    -max-width: 735px;
    /*left: 150px;*/
    height: 605px;
    /*float: left;*/
    max-height: 605px;
    overflow: auto;
}

#message1/* bloc message */ {
  position: absolute;
  margin: 30px auto auto;
/* margin-top: 30px; */
  width: 700px;
  font-size: 0.6em;
  color: #330033;
  font-weight: bold;
}

#pied {
    position: absolute;
    top: 710px;
    height: 90px;
}

.menugauche {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menugauche li {
  margin: auto auto 2px auto;
}

.menugauche a {
  color: #000000;
  text-decoration: underline;
}

.menugauche a:hover {
  text-decoration: none;
}
/* fin structure generale */

/* ------------------------------------------------------------------------------ */
/* polices */
/* ------------------------------------------------------------------------------ */

html {
    font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
}

/* Formulaires */
form, fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

input, button, select {
    vertical-align: middle; /* Solution pb. d'alignement. */
}

body {
    color: black;
    font-family: Arial, Verdana, sans-serif;
    margin: 0 0 1em 0;
    font-weight: normal;
    line-height: 1.4; /* À adapter au design. (4) */
    font-size: 0.8em;
    background-color: #99CCCC;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */
    line-height: 1.2;
    font-weight: bold; /* Valeur par défaut. (6) */
    font-style: normal;
    text-align: center;
}

h1 {
    font-size: 1.6em;
    color: black; 
}

h2 {
    font-size: 1.35em;
}

h3 {
    font-size: 1.2em;
}

/* utilise pour l'entete */
h4 {
	font-weight: normal;
    position: relative;/* on positionne le conteneur pour placer ensuite le SPAN */
    margin: 9px auto auto 150px;
    font-size: 2.5em;
    color: gray;
    text-align: center;
}

h4 span {
	font-weight: normal;
    position: absolute;/* on superpose le SPAN sur le titre */
    margin: 9px auto auto 150px;
    - margin: 9px auto auto -112px;
    color: red;
    text-align: center;
    top: -10px;/* on décale le SPAN */
    left: 110px;
}
/* fin gestion des titres */

/* ------------------------------------------------------------------------------ */
/*                                                                                */
/* ------------------------------------------------------------------------------ */

a:link/* lien non-visité */ {
  /*color: #FF00FF;
  text-decoration: none;*/
  border: none;
}

a:visited/* lien visité */ {
  /*color: white;
  text-decoration: none;*/
  border: none;
}

a:hover/* lien survolé */ {
  /*color: yellow;
  text-decoration: none;*/
  border: none;
}

a:active/* lien activé */ {
  /*color: green;
  text-decoration: none;*/
  border: none;
}

textarea {
	background: transparent;
}
textarea#question {
	background-color: white;
}

.textepetitcentre {
  font-size: 0.9em;
  text-align: center;
}
/* ------------------------------------------------------------------------------ */
/* pw avec lettrine (1ère lettre en relief)                                       */
/* ------------------------------------------------------------------------------ */

.pg:first-letter {
  float: left;/* positionnement de la lettrine dans le conteneur*/
  font-size: 2.5em;/* 3 hauteurs de lignes pour la lettrine*/
  font-weight: bold;
  font-family: Georgia, Times New Roman, serif;
  color: #990000;
  border: 1px solid #990000;/* définition d'une bordure autour de la lettrine*/
  background-color: #FFFFCC;
  margin: 1px;
  padding: 1px;
  line-height: 1em;
}
/* fin lettrine */

.py {
  color: yellow;
  font-weight: normal;
}

.pb {
  color: blue;
  font-weight: normal;
  font-size: 0.9em;
}

.pg, .pgs {				/* .pgs = .pg sans lettrine */
  font-weight: bold;
  font-size: 0.9em;
}

.relief {
  /*color: #202BFF;*/
  /*color: #AB0762;*/
  color: blue;
  font-weight: bold;
  font-size: 1.2em;
}

.reliefBleu {
  color: blue;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}

.tab1 {
  margin: 0 0 0 30px;
  font-weight: normal;
  /*font-size: 1em;*/
}

.petit {
  font-size: 0.7em;
  background-color: #DDDFFF;
  color: black;
}

.erreur {
  font-size: 1em;
  text-align: center;
  color: red;
  font-weight: bold;
}

.aide {
  font-size: 0.8em;
  font-weight: bold;
  color: blue;
}

.ancrage {
  font-size: 0.8em;
  background-color: #DDDFFF;
  text-decoration: none;
}

a.ancrage {
  color: blue;
}

a.ancrage:hover {
  color: blue;
}

.cadre {
  font-family: verdana;
  font-size: 1em;
  font-weight: bold;
  width: 60px;
  color: black;
}

/* ------------------------------------------------------------------------------ */
/* gestion des menus */
/* ------------------------------------------------------------------------------ */

ul#menu {
	font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 0;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li {
  margin: 0px 10px 0px 0px;
  padding: 0;
/* Suppression du padding du <li> et on définit une marge basse de 15px pour aérer le tout */
}

ul#menu li a {
  display: block;/* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
  width: 145px;
/*    line-height: 30px ; */
  line-height: 22px;
  color: white;
  text-indent: 0;/* On décale le texte de 0px du bord gauche */
  text-decoration: none;
  background: url("/images/bt-menu2.png") no-repeat 0 0;/* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
/*  border: 1px solid #dbd ; */
}

ul#menu li a:hover {
  background: url("/images/bt-menu2.png") no-repeat 0 -22px;/* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
/* fin gestion des menus */

/* gestion des tableaux */
table {
	border-spacing:0;
	padding:0;
}
td {
	font-size:1em;
}

.carte {
	width: 60px;
	border: 0;
}
.carte:hover {
/*	height: 454px;
	width: 213px; */
	height: 227px;
	width: 106px;
}

/* ------------------------------------------------------------------------------ */
/* image reactive */
/* ------------------------------------------------------------------------------ */
#image {            /* bloc image en arrière-plan */
	position: absolute;
	width : 576px;
	height: 432px;
}

#zone1 {            /* zone cliquable */
	float: left;
	width : 150px;
	height: 100px;
	margin: 30px auto auto 200px;
	background: url("/images/carte_dos.jpg") top left no-repeat;
	border: 1px dotted white;
}

#zone1:hover {      /* zone cliquable */
	float: left;
	width : 150px;
	height: 100px;
	margin: 30px auto auto 200px;
	background: url("/images/carte_2.jpg") top left no-repeat;
	border: 1px dotted white;
}

#zone2 {
	position: absolute;
	width : 100px;
	height: 200px;
	left: 450px;
	top: 100px;
	border: 1px dotted white;
}

#zone2:hover {
	width : 200px;
	height: 400px;
	left: 400px;
	top: 50px;
	border: 1px dotted white;
	background: url("/images/bg_menu.gif") top left no-repeat;
	z-index: 100;
}
/* fin image reactive */


/* ------------------------------------------------------------------------------ */
/* Jeux des cartes selectionnables */
/* ------------------------------------------------------------------------------ */
#jeux {
	position: absolute;
	height: 112px;
	margin: 395px auto auto 0px;
	background: url("/cartes/dos.jpg") top left repeat;
}

/* ------------------------------------------------------------------------------ */
/* Jeux des cartes selectionnees */
/* ------------------------------------------------------------------------------ */
#jeuxSelection0 {     /* bloc image en arrière-plan */
	position: absolute;
	/*height: 112px;*/
	width: 745px;
	margin: 0 auto auto 0;
	/*background-color: #FFFFCC;*/
}

#jeuxSelection1 {     /* bloc image en arrière-plan */
	position: absolute;
	/*height: 112px;*/
	margin: 60px auto auto 10px;
}

#jeuxSelection2 {     /* bloc image en arrière-plan */
	position: absolute;
	height: 112px;
	margin: 110px auto auto 20px;
}

#jeuxSelection3 {     /* bloc image en arrière-plan */
	position: absolute;
	height: 112px;
	margin: 170px auto auto 30px;
}

/* ------------------------------------------------------------------------------ */
/* Jeux des cartes selectionnees pour le tarot du couple                          */
/* ------------------------------------------------------------------------------ */
#jeuxCouple0 {     /* bloc image en arrière-plan */
	position: absolute;
	margin: 60px auto auto 0px;
	/*height: 112px;*/
}
#jeuxCouple1 {     /* bloc image en arrière-plan */
	position: absolute;
	height: 112px;
	margin: 105px auto auto 85px;
}
#jeuxCouple2 {     /* bloc image en arrière-plan */
	position: absolute;
	height: 112px;
	margin: 150px auto auto 170px;
}
#jeuxCouple3 {     /* bloc image en arrière-plan */
	position: absolute;
	height: 112px;
	margin: 195px auto auto 255px;
}
#jeuxCouple4 {     /* bloc image en arrière-plan */
	position: absolute;
	height: 112px;
	margin: 240px auto auto 340px;
}

/* ------------------------------------------------------------------------------ */
#jeuxPresentation {     /* bloc image en arrière-plan */
	position: absolute;
	height: 75px;
	width: 700px;
	margin: 220px 0px auto 5px;
}

#jeuxExplication {     /* bloc image en arrière-plan */
	position: absolute;
	height: 75px;
	width: 700px;
	margin: 320px 0 auto 25px;
	/*background-color: #CCCFFF;*/
	font-weight: bold;
}
#jeuxExplication textarea {
	background-color: #E2AE7A;
}

#jeuxSynthese {
	position: absolute;
	height: 75px;
	width: 700px;
	margin: 280px 0 auto 25px;
	/*background-color: #CCCFFF;*/
	font-weight: bold;
}

#jeuxExplication3 {     /* bloc image en arrière-plan */
	position: absolute;
	/* width : 400; */
	height: 200px;
	margin: 320px 0 auto 5px;
}

#jeuxAnalyse {
	position: absolute;
	/* width : 400; */
	height: 200px;
	margin: 360px 0 auto 5px;
	opacity: 0.75;	
}
#jeuxAnalyse textarea {
	background-color: #E2AE7A;
	opacity: 0.75;
}

/* ------------------------------------------------------------------------------ */
/* Carte selectionnable */
/* ------------------------------------------------------------------------------ */
#carte {     /* zone cliquable */
	float: left;
	width : 11px;
	height: 112px;
	margin: 0 auto auto 0;
	border: 1px solid white;
}

#carte:hover {     /* zone cliquable */
	float: left;
	width : 60px;
	height: 112px;
	margin: -20px auto auto 0;
	background: url("/cartes/dos.jpg") top left no-repeat;
	border: 1px dotted red;
}

/* ------------------------------------------------------------------------------ */
/* Emplacement centree */
/* ------------------------------------------------------------------------------ */
#jeuxCentre {     /* bloc image en arrière-plan */
	position: absolute;
	width : 62px;
	height: 96px;
	margin: 25px auto auto 300px;
}
/* ------------------------------------------------------------------------------ */
/* Carte bouton */
/* ------------------------------------------------------------------------------ */
#carteBouton {     /* zone cliquable */
	float: left;
	width : 67px;
	height: 122px;
	margin: 0 auto auto 15px;
	background: url("/images/m19_mini.jpg") top left no-repeat;
	border: 0 solid white;
}

#carteBouton:hover {    /* zone cliquable */
	float: left;
	width : 67px;
	height: 122px;
	margin: 0 auto auto 15px;
	background: url("/images/carte_dos_mini.jpg") top left no-repeat;
	border: 0 dotted red;
}

#heure {
	position: absolute;
	width : 101px;
	height: 50px;
	left : 800px;
	margin: -95px auto auto 0px;
	background: url("http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=jezakel.dat&display=clock&ft=1") top left no-repeat;
}

#jezakel {     /* zone cliquable */
	float: left;
	width : 90px;
	height: 115px;
	margin: 0 10px auto 10px;
	background: url("/images/jezakel.jpg") top left no-repeat;
	border: 0 solid white;
}

#bouton { 
	padding: 0;
	text-align: center;
	list-style: none; 
	display: inline; /* affichage horizontal */ 
	font-weight: bold;
} 
#bouton p {
	align: center;
}
#bouton a {
	color: #000;
	font-size: 1em;
	padding: 5px 20px; 
	margin: 0;
	background: #FFCC00; 
	text-decoration: none; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;         
	-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
	-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
} 
#bouton a:hover, #menu li a:focus { 
	font-size: 1.1em;
	background: #FFBF00; 
}

input {
	color: #000;
	padding: 5px 20px; 
	margin: 0;
	background: #FFF;
	text-decoration: none; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px;         
	-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
	-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
} 
#bouton input {
	color: #000;
	font-size: 1em;
	padding: 5px 20px; 
	margin: 0;
	background: #FFCC00; 
	text-decoration: none; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;         
	-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
	-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
} 
#bouton input:hover, #menu li a:focus { 
font-weight: bold;
	background: #FFBF00; 
}