/* CSS Document */

/************ Sélecteurs généraux ******************/
body {
	font-family: "Segoe UI", Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/background.jpg) repeat;
}

h2 {
	margin: 2px 0;
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

p { margin: 16px 0; }



/************ Division englobant toutes les colonnes  ******************/
#conteneur {
	margin: 0 auto; /* pour centrer */
	width: 1200px;
	font-family: "Segoe UI", Verdana, Arial, Helvetica, sans-serif;
}	

#cadre {
	background-color: #58D3F7;
	width: 1200px; /* pas d'overflow ici */
	border-radius: 25px 25px 0 0;
}
	
#col-gauche {
	float: left;
	width: 230px;
	padding: 25px;
}
      
#col-droite{
	margin-left: 280px;
	padding: 25px;
	background-color: #fff;
	border-radius: 0 25px 0 0;
}



/************ En-tête ******************/

#banniere {
	position: relative;
	height: 200px;
	width: 1200px;
	background: url(../images/banniere.jpg) no-repeat;
	border-radius: 25px 25px 0 0;
}

#logo {
	position: absolute;
	margin: 0;
	left: 3px;
	top: 1px;
	width: 110px;
	height: 110px;
	background: url(../images/logo.png);
	text-indent: -9999px;
}


   
/************ Navigation principale ******************/	
ul#nav-principale {
	position: relative;
	height: 50px;
	background-color: #01A9DB;
	text-align: center;
	border-radius: 0 0 25px 25px;
}

#nav-principale li {
	display: inline;
	padding-left: 35px;
	padding-right: 40px;
}

#nav-principale a {
	font-size : 130%;
	font-weight: bold;
	color: #fff;
	line-height: 45px; /* permet de centrer verticalement */
	text-decoration: none;
	outline: none;
	text-shadow: 4px 4px 1px #000;
}

#nav-principale a:hover {
	color: #ffdf00;
}

#nav-principale a#actif {
	color: #ffdf00;
}



/*********** Colonne gauche de l'accueil ***************/
#nav-secondaire { margin: 20px 20px 10px 17px; }	

#nav-secondaire li {
	width: 180px;
	height: 20px;
	padding: 8px 0;
	border-bottom: 1px groove #000; /* 666 pour faire des pointillés */
	font-variant: initial; /* petites capitales */
	letter-spacing: 2px; /* espacement entre les lettres */
}

#nav-secondaire li:hover {
	background-color: #013b69;
	border-radius: 15px;
}

#nav-secondaire a {
	position: absolute;
	color: #fff;
	width: 160px;
	height: 25px;
	outline: none;
	text-decoration: none;
}


#nav-secondaire a:hover {
	font-size: 110%;
	font-weight: bold;
	color: #ffdf00;
	padding-left: 14px;
}

/*********** JEU **************/

/*********** CODE JEU A JAISON **************/
#regles-jf {
	text-align: left;
}

#regles-jf li {
	list-style-type: decimal;
	margin: 8px;
}

/* étape 0 rien */

/* étape 1 */
#jeu-jf {
	position: relative;
	margin: 0 auto;
	width: 600px;
	margin-top: 5px;
	padding: 35px;
	text-align: center;
	border: 1px solid #01A9DB;
	border-radius: 10px;
}

#zone-img-jeu-jf { list-style-type: none;}

#zone-img-jeu-jf li {display: inline;}

#jeu-jf img {
	margin: 4px;
	border: 1px solid #ffdf00;
	border-radius: 10px;
}

#paires-trouvees-jf {
	width: 225px;
	margin: 0 auto;
	border: 1px solid #ffdf00;
	border-radius: 10px;
}

#paires-trouvees-jf p {
	text-align: center;
}

#paires-trouvees-jf img{
	margin: 4px;
	border: 1px dotted #01A9DB;
	border-radius: 10px;
}

#stats-jf {
	margin: 20px auto;
	padding: 20px;
	width: 260px;
	text-align: center;
	border: 1px solid #01A9DB;
	border-radius: 10px;
}

p#message-jf {text-align: center;}

/* code pour changer le curseur du bouton débuter */

#btnJouer {
	cursor: pointer;
}


/*********** fin code jeu à jaison **************/



/*********** CODE JEU A SURYA **************/
#regles-sp {
	text-align: left;
}

#regles-sp li {
	list-style-type: decimal;
	margin: 8px;
	color: #fff;
}


/* étape 0 rien */

/* étape 1 */
#jeu-sp {
	position: relative;
	margin: auto;
	width: 600px;
	margin-top: 20px;
	padding: 35px;
	text-align: center;
	border: 1px solid #dab69c;
}

#zone-img-jeu-sp { list-style-type: none;}

#zone-img-jeu-sp li {display: inline;}

#jeu-sp img {
	margin: 2px;
	border: 1px solid #ccc;
}

#paires-trouvees-sp {
	width: 180px;
	margin-top: 55px;
	border: 1px solid #dab69c;
}

#paires-trouvees-sp h2, #paires-trouvees-sp p {
	text-align: center;
}

#paires-trouvees-sp img{
	margin: 3px;
	border: 1px dashed;
}

#stats-sp {
	margin: 20px auto;
	padding: 20px;
	width: 260px;
	text-align: center;
	border: 1px solid #dab69c;
}

p#message-sp {text-align: center;}

/* code changer curseur du bouton débuter */
#btnDebuter{
	cursor: pointer;
}



/*********** fin code jeu à surya **************/

/*********** FIN JEU **************/

/************ Pied de page ******************/		
#pied-page {
	margin-left: -360px;  /* accepté par Claudine pour cette fois-ci */
	position: absolute;
	background: url(../images/bas_page.png) no-repeat;
	padding: 30px;
	width: 1851px;
	height: 50px;
}

#pied-page p {
	margin: 30px 320px 0 320px;
	text-align: center;
	color: #fff;
	font-size: 70%;
	font-weight: bold;
	font-family: Verdana, "Segoe UI", Arial, Helvetica, sans-serif;
}



/************ Navigation utilitaire ******************/		
ul#nav-bas-page {
	position: absolute;
	top: 15px;
	right: 670px;
}

#nav-bas-page li {
	display: inline;
	margin: 7px;
}

#nav-bas-page a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

#nav-bas-page a:hover{
	color: #ffdf00;
}

#nav-bas-page a#actif{
	color: #ffdf00;
}



/************ Les classes ******************/
#clearHR {
	margin: 0;
	clear: both;
	visibility: hidden;
}

.centre {
	text-align: center;
	padding: 2px 0 20px 0;
}


/*********** Colonne droite de l'accueil ***************/
.miniatures {
	width: 710px;
	padding: 25px;
	margin: auto;
	margin-bottom: 10px;
}
		
.miniatures p {
	margin: 0;
	text-align: center;
}
		
.miniatures img {
	border: 1px solid #ccc;
	border-radius: 10px;
	margin: 4px; /* espace entre les images */
	padding: 6px; /* espace entre l'image et la bordure */			
}
		
.miniatures img:hover {
	-moz-opacity: 0.6; /* pour mozilla */
	opacity: 0.6;
	filter:alpha(opacity=60); /* pour IE non valide, mais accepté */
}