@charset "utf-8";
/* CSS Document */

body {
	background:#000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:10px;
	}
#container {
	width:980px;
	margin:0 auto;
	height:1310px;
	}

#header {
	width:100%;
	height:44px;
	}
.int_sup {
	width:993px;
	height:100px;
	position:absolute;
	clip:rect(0, 60px, 100px, 0);
	}
.int_sup:hover {
	width:993px;
	height:100px;
	position:absolute;
	clip:rect(0, 1024px, 100px, 0);
	}
.titre_menu {
	color:#fcc;
	float:left;
	font-size:16px;
	font-weight:bold;
	margin:10px 10px 0 5px;
	}
.content_menu{
	float:left;
	height:44px;
	margin-top:10px;
		} 
ul {
	display:inline;
	list-style-type:none;
	}
li {
	display:inline;
	font-size:9px;
	}
a {
	text-decoration:none;
	color:#fff;
	}
a:hover {
	color:#fcc;
	}
#content {
	clear:both;
	width:100%;
	height:1133px;
	background:url(../media/duos.jpg) no-repeat 0 0; 
	}
	
	/* ======== span remplace a pour éviter un retour automatique en haut de page ======= */
#content span {
	display:block;
	text-indent:-9999em;
	width:100px;
	height:150px;
	cursor:pointer;
	}
#content span:active {
	width:333px;
	height:500px;
	z-index:2;
	position:absolute;
	border:8px outset #600;
}
.col {
	clear:both;
	width:100%;
	height:500px;
	}
	
									           /* +++++++++++++++++++++++++++++++++++++++++++++++++  BALLONS  ++++++++++++++++++++++++++++++++++++++++++ */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DUO BALLONS - GAUCHE !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

#col_sup_1 {
	float:left;
	width:33%;
	}

#col_sup_1 div {
	display:inline;
	}
#col_sup_1 div span {
	/*display:block;*/
	float:left;
}

#v_sup_1_1 span {
	background:url(../media/vignettes/clown-et-chapeau_v.jpg) no-repeat -100px 0;
	margin:20px 0px 0px 20px;
	}
		  	#v_sup_1_1 span:hover {
			  background:url(../media/vignettes/clown-et-chapeau_v.jpg) no-repeat 0 0;
			  }
			#v_sup_1_1 span:active {
			  background:url(../media/clown_et_chapeau.jpg) no-repeat 0 0;
			  }	

#v_sup_1_2 span {
	width:150px;
	height:100px;
	background:url(../media/vignettes/coccinelle_v.jpg) no-repeat 0 0;
	margin:55px 0px 0px 15px;
	}
			#v_sup_1_2 span:hover {
				background:url(../media/vignettes/coccinelle_v.jpg) no-repeat 0 -100px;
			}
			#v_sup_1_2 span:active {
			  background:url(../media/coccinelle.jpg) no-repeat 0 0;
			  		/* photo cadrée horizontalement */
			  width:500px;
			  height:333px;
			  z-index:2;
			  position:absolute;
			  }	

#v_sup_1_3 span {
	clear:both;
	background:url(../media/vignettes/rose_petit_ballon_v.jpg) no-repeat -100px 0;
	margin:35px 0px 0px 8px;
	}
			#v_sup_1_3 span:hover {
				background:url(../media/vignettes/rose_petit_ballon_v.jpg) no-repeat 0 0;
			}
			#v_sup_1_3 span:active {
			  background:url(../media/rose_petit_ballon.jpg) no-repeat 0 0;
			  }	

#v_sup_1_4 span {
	background:url(../media/vignettes/princesse-et-ho-de-forme.jpg) no-repeat -100px 0;
	margin:15px 0px 0px 4px;
	}
			#v_sup_1_4 span:hover {
				background:url(../media/vignettes/princesse-et-ho-de-forme.jpg) no-repeat 0 0;
			}
			#v_sup_1_4 span:active {
			  background:url(../media/princesse_et_ho_de_forme.jpg) no-repeat 0 0;
			  }	

#v_sup_1_5 span {
	float:right;
	background:url(../media/vignettes/sauterelle_bleue_v.jpg) no-repeat -100px 0;
	margin:65px 0px 0px 4px;
	}
			#v_sup_1_5 span:hover {
				background:url(../media/vignettes/sauterelle_bleue_v.jpg) no-repeat 0 0;
			}
			#v_sup_1_5 span:active {
			  background:url(../media/sauterelle_bleue.jpg) no-repeat 0 0;
			  margin:15px 0px 0px 4px;
			  }	

#v_sup_1_6 span {
	clear:both;
	background:url(../media/vignettes/masque_vert_v.jpg) no-repeat -100px 0;
	margin:-10px 0px 0px 35px;
	}
			#v_sup_1_6 span:hover {
				background:url(../media/vignettes/masque_vert_v.jpg) no-repeat 0 0;
			}
			#v_sup_1_6 span:active {
			  background:url(../media/masque_vert.jpg) no-repeat 0 0;
			  margin:35px 0px 0px 35px;
			  }	
				
#v_sup_1_7 span {
	background:url(../media/vignettes/papillon_rouge_v.jpg) no-repeat -100px 0;
	margin:30px 0px 0px 20px;
	}
			#v_sup_1_7 span:hover {
				background:url(../media/vignettes/papillon_rouge_v.jpg) no-repeat 0 0;
			}
			#v_sup_1_7 span:active {
			  background:url(../media/papillon_rouge.jpg) no-repeat 0 0;
			  }	

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DUO BALLONS - CENTRE !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

#col_sup_2 {
	float:left;
	width:33%;
	height:500px;
	}
#col_sup_2 #txt {
	background:url(../media/fond_txt_duo_sup.jpg) no-repeat;
		width:315px;
		height:225px;
		border:2px solid #600;
		/*height:auto;*/
		position:relative;
		padding:5px;
		padding-top:0;
	}
#col_sup_2 #logo_duo {
	border:none;/* 70px 0 0 40px */
	}
#logo_duo {
	width:100%;
	height:216px;
	margin:60px 0 20px 0px;
	}
p {
	margin:12px 0 0 0px;
	font-weight:bold;
	font-size:12px;
	color:#600;
	text-align:center;
	}
#logo_duo a {
	display:block;
	width:325px;
	height:216px;
	background:url(../media/vignettes/claire-claudia325x212.jpg) no-repeat 0 0;
	border:3px inset #600;
	}
#logo_duo a:hover {
	background:url(../media/vignettes/claire-claudia325x212.jpg) no-repeat 0 -216px;
	}
#logo_duo a:active {
	background:url(../media/claire-claudia.jpg) no-repeat 0 0;
	width:500px;
	height:332px;
	margin:0px 0 0 -90px;
	z-index:2;
	position:relative; 
	 /*top:50px;
	left:0px;*/
	border:8px outset #600;
	}
#col_sup_2 #txt a {
	color:#600;
	text-decoration:underline;
	}
#col_sup_2 #txt a:hover {
	color:#fcc;
	}
	
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DUO BALLONS - DROITE !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

#col_sup_3 {
	float:right;
	width:33%;
	z-index:0;
	position:relative;
	}
#col_sup_3 span:active {
	margin-left:-35px;
}
#col_sup_3 div {
	display:inline;
	}
#col_sup_3 div span {
	display:block;
	float:right;
}
#v_sup_3_1 span {
	background:url(../media/vignettes/panthere_rose_v.jpg) no-repeat -100px 0;
	margin:20px 50px 0px 0px;
	}
			#v_sup_3_1 span:hover {
				background:url(../media/vignettes/panthere_rose_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_1 span:active {
			  background:url(../media/panthere_rose.jpg) no-repeat 0 0;
			  
			  }	
#v_sup_3_2 span {
	background:url(../media/vignettes/batman_v.jpg) no-repeat -100px 0;
	margin:30px 30px 0px 0px;
	}
			#v_sup_3_2 span:hover {
				background:url(../media/vignettes/batman_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_2 span:active {
			  background:url(../media/batman.jpg) no-repeat 0 0;
			  }	
#v_sup_3_3 span {
	clear:both;
	background:url(../media/vignettes/tres_printemps_v.jpg) no-repeat -100px 0;
	margin:25px 12px 0px 0px;
	}
			#v_sup_3_3 span:hover {
				background:url(../media/vignettes/tres_printemps_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_3 span:active {
			  background:url(../media/tres_printemps.jpg) no-repeat 0 0;
			  }	
#v_sup_3_4 span {
	background:url(../media/vignettes/orange_et_mauve_v.jpg) no-repeat -100px 0;
	margin:10px 4px 0px 0px;
	}
			#v_sup_3_4 span:hover {
				background:url(../media/vignettes/orange_et_mauve_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_4 span:active {
			  background:url(../media/orange_et_mauve.jpg) no-repeat 0 0;
			  }	
#v_sup_3_5 span {
	/**/
	background:url(../media/vignettes/clown_rieur_v.jpg) no-repeat -100px 0;
	margin:35px 4px 0px 0px;
	}
			#v_sup_3_5 span:hover {
				background:url(../media/vignettes/clown_rieur_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_5 span:active {
			  background:url(../media/clown_rieur.jpg) no-repeat 0 0;
			  }	
#v_sup_3_6 span {
	clear:both;
	background:url(../media/vignettes/emberlificotage_v.jpg) no-repeat -100px 0;
	margin:5px 25px 0px 0px;
	}
			#v_sup_3_6 span:hover {
				background:url(../media/vignettes/emberlificotage_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_6 span:active {
			  background:url(../media/emberlificotage.jpg) no-repeat 0 0;
			  }	
#v_sup_3_7 span {
	background:url(../media/vignettes/la_-fille_qui_rigole_pas_v.jpg) no-repeat -100px 0;
	margin:25px 15px 0px 0px;
	}
			#v_sup_3_7 span:hover {
				background:url(../media/vignettes/la_-fille_qui_rigole_pas_v.jpg) no-repeat 0 0;
			}
			#v_sup_3_7 span:active {
			  background:url(../media/la_-fille_qui_rigole_pas.jpg) no-repeat 0 0;
			  }	

									/* +++++++++++++++++++++++++++++++++++++++++++++++++  NUIT  ++++++++++++++++++++++++++++++++++++++++++ */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DUO NUITS - GAUCHE !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

#col_inf_1 {
	float:left;
	width:33%;
	}
	

#col_inf_1 div {
	display:inline;
	}
#col_inf_1 div a {
	display:block;
	float:left;
}
/*#v_inf_1_1 a {
	background:url(../media/vignettes/COURNON-A-TIRE-D4ELLES-005.jpg) no-repeat -100px 0;
	margin:40px 0px 0px 10px;
	}
		  	#v_inf_1_1 a:hover {
			  background:url(../media/vignettes/COURNON-A-TIRE-D4ELLES-005.jpg) no-repeat 0 0;
			  }	
#v_inf_1_2 a {
	background:url(../media/vignettes/princesse-et-hô-de-forme.jpg) no-repeat -100px 0;/*clown-et-chapeau.jpg
	margin:15px 0px 0px 6px;
	}
			#v_inf_1_2 a:hover {
				background:url(../media/vignettes/clown-et-chapeau.jpg) no-repeat 0 0;
			}
#v_inf_1_3 a {
	background:url(../media/vignettes/DSCN8367.jpg) no-repeat -100px 0;
	margin:80px 0px 0px 6px;
	}
			#v_inf_1_3 a:hover {
				background:url(../media/vignettes/DSCN8367.jpg) no-repeat 0 0;
			}
#v_inf_1_4 a {
	clear:both;
	background:url(../media/vignettes/DSCN8370.jpg) no-repeat -100px 0;
	margin:0px 0px 0px 35px;
	}
			#v_inf_1_4 a:hover {
				background:url(../media/vignettes/DSCN8370.jpg) no-repeat 0 0;
			}
#v_inf_1_5 a {
	width:150px;
	height:100px;
	background:url(../media/vignettes/DSCN8374.jpg) no-repeat 0 0;
	margin:35px 0px 0px 25px;
	}
			#v_inf_1_5 a:hover {
				background:url(../media/vignettes/DSCN8374.jpg) no-repeat 0 -100px;
			}
#v_inf_1_6 a {
	clear:both;
	background:url(../media/vignettes/DSCN8372.jpg) no-repeat -100px 0;
	margin:10px 0px 0px 55px;
	}
			#v_inf_1_6 a:hover {
				background:url(../media/vignettes/DSCN8372.jpg) no-repeat 0 0;
			}
				
#v_inf_1_7 a {
	float:right;
	background:url(../media/vignettes/DSCN8375.jpg) no-repeat -100px 0;
	margin:25px 0px 0px 35px;
	}
			#v_inf_1_7 a:hover {
				background:url(../media/vignettes/DSCN8375.jpg) no-repeat 0 0;
			}*/


#col_inf_2 {
	float:left;
	width:33%;
	}
	
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DUO NUITS - DROITE !!!!!!!!!!!!!!!!!!!!!!!!!!!! */

#col_inf_3 {
	float:right;
	width:33%;
	}
	
#col_inf_3 div {
	display:inline;
	}
#col_inf_3 div a {
	display:block;
	float:right;
}
/*#v_inf_3_1 a {
	background:url(../media/vignettes/DSCN8377.jpg) no-repeat -100px 0;
	margin:10px 10px 0px 0px;
	}
			#v_inf_3_1 a:hover {
				background:url(../media/vignettes/DSCN8377.jpg) no-repeat 0 0;
			}
#v_inf_3_2 a {
	background:url(../media/vignettes/DSCN8422.jpg) no-repeat -100px 0;
	margin:30px 30px 0px 0px;
	}
			#v_inf_3_2 a:hover {
				background:url(../media/vignettes/DSCN8422.jpg) no-repeat 0 0;
			}
#v_inf_3_3 a {
	clear:both;
	background:url(../media/vignettes/DSCN8429.jpg) no-repeat -100px 0;
	margin:15px 30px 0px 0px;
	}
			#v_inf_3_3 a:hover {
				background:url(../media/vignettes/DSCN8429.jpg) no-repeat 0 0;
			}
#v_inf_3_4 a {
	background:url(../media/vignettes/DSCN8437.jpg) no-repeat -100px 0;
	margin:10px 25px 0px 0px;
	}
			#v_inf_3_4 a:hover {
				background:url(../media/vignettes/DSCN8437.jpg) no-repeat 0 0;
			}
#v_inf_3_5 a {
	clear:both;
	background:url(../media/vignettes/DSCN8442.jpg) no-repeat -100px 0;
	margin:75px 5px 0px 0px;
	}
			#v_inf_3_5 a:hover {
				background:url(../media/vignettes/DSCN8442.jpg) no-repeat 0 0;
			}
#v_inf_3_6 a {
	background:url(../media/vignettes/clown-et-chapeau.jpg) no-repeat -100px 0;
	margin:40px 5px 0px 0px;
	}
			#v_inf_3_6 a:hover {
				background:url(../media/vignettes/clown-et-chapeau.jpg) no-repeat 0 0;
			}
#v_inf_3_7 a {
	background:url(../media/vignettes/DSCN8445.jpg) no-repeat -100px 0;
	margin:10px 5px 0px 0px;
	}
			#v_inf_3_7 a:hover {
				background:url(../media/vignettes/DSCN8445.jpg) no-repeat 0 0;
			}*/


.col div div {
	width:100px;
	height:150px;
	}
.clear {
	clear:both;
	}
#footer {
	width:100%;
	height:44px;
	}
.int_inf {
	width:993px;
	height:50px;
	position:absolute;
	clip:rect(0, 60px, 44px, 0);
	}
.int_inf:hover {
	width:992px;
	height:100px;
	position:absolute;
	clip:rect(0, 992px, 44px, 0);
	}