html { padding: 0; margin: 0; }

body {
	font-family: 'Quattrocento', serif;
	padding: 0;
	margin: 0;
	color: #999;
	font-size: 1em;

	}
#container{
	margin: 0 auto;
	width:1000px;
	position: relative;
		
	}
h1 {
	font-size: 4em;
	letter-spacing: -1px;
	margin: 1em 0 0.5em;
	text-align: center;
}
h3{
	font-size: 24px;
	color: #8FBB42;
	line-height: 1.5;
	padding-bottom: 20px;
}

#header{
	margin-top: 20px;
	margin-bottom:30px;
	width: 1000px;
	height: 100px;
	
}
#header h1{
	float: left;
	display: block;
	margin: 20px;
	font-size: 75px;
	font-family: 'Open Sans Condensed', 'Quattrocento', sans-serif;
	
}


#header ul{
	position: relative;
	/*top:-100px;*/
	right:0px;	
	float: right;
	width: 330px;
	height: 100px;
	list-style:none;
}
#header ul li a{
	float: left;
	position: relative;
	padding: 0px 5px;
	margin-top: 60px;
	border-left: 1px solid #666;
	font-family: 'Marvel', sans-serif;
	color: #666;
	font-size: 22px;
}
#header ul li a:hover{
	border-bottom: 1px solid #8FBB42;
	color:#8FBB42;
	transition: all .3S ease-in-out;
	-webkit-transition: all .3S ease-in-out;
	-Moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
}
#header ul li a:hover span{
	position:relative;
	top:-5px;
	transition: all .3S ease-in-out;
	-webkit-transition: all .3S ease-in-out;
	-Moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
}
#header ul li:first-child a{
	border-left: none;

}

.bamboo{
	margin: 2px;
	cursor: pointer;
	-webkit-transition: all .3s ease-out;
	-Moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
}


#label{
	margin-top: 40px;
	height: 100px;
	width: 1000px;
	font-family: Arial;
	text-align: center;
}
#label h1{
	font-size: 23px;
}
#label p{
	color: #666;
	font-weight: bold;
	font-size: 30px;
	margin-top: 20px;
}

.bamboo{
	-webkit-animation-name: 'pousse';
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-timing-function: ease-out;
	-moz-animation-name: 'moz-pousse';
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count: 1;
		-moz-animation-timing-function: ease-out;
	-o-animation-name: 'o-pousse';
		-o-animation-duration: 1s;
		-o-animation-iteration-count: 1;
		-o-animation-timing-function: ease-out;
	-ms-animation-name: 'ms-pousse';
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: 1;
		-ms-animation-timing-function: ease-out;
}
@-webkit-keyframes 'pousse' {
  		from {
 		   -webkit-transform: translate(0,300px);
 		 }
 		 to { 
 		   -webkit-transform: translate(0,0px);
 		 }
}
@-moz-keyframes 'moz-pousse' {
  		from {
 		   -moz-transform: translate(0,0px);
 		 }
 		 to { 
 		   -moz-transform: translate(0,-300px);
 		 }
}
@-o-keyframes 'o-pousse' {
  		from {
 		   -o-transform: translate(0,0px);
 		 }
 		 to { 
 		   -o-transform: translate(0,-300px);
 		 }
}
@keyframes 'pousse' {
  		from {
 		   transform: translate(0,0px);
 		 }
 		 to { 
 		   transform: translate(0,-300px);
 		 }
}
#content{
	width:1000px;
	margin: 0 auto; 
}
#dataviz{
	width: 1010px;
	height: 580px;
}




#footer{
	
	margin: 0 auto;
	padding:50px;
	height: 50px;
	width: 1000px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align: center;
	color: #999;
	
}

.logo h1 a{
	position:fixed;
	bottom:0px;
	right:0px;
	padding: 10px;
	display: block;
	height: 40px;
	width: 150px;
	text-indent: -9999px;
	background: url(images/logo.png) no-repeat;
}


.block1{
	float: left;
	width: 480px;
	height: 320px;
	overflow:hidden;
	border-radius: 2px;
	margin-bottom: 20px;
	
	
}
.block2{
	float: right;
	width: 480px;
	height: 320px;
	overflow:hidden;
	border-radius: 2px;
	margin-bottom: 20px;
	
	
}


.pres{
	width: 1000px;
	height: 300px;
}

#denis{
	background: url(images/credits/credits3.jpg) no-repeat;
}
#sandrine{
	background: url(images/credits/credits2.jpg) no-repeat;
}
#jerome{
	background: url(images/credits/credits5.jpg) no-repeat;
}
#vincent{
	background: url(images/credits/credits7.jpg) no-repeat;
}

#denis:hover{
	background: url(images/credits/credits4.jpg) no-repeat;
}
#sandrine:hover{
	background: url(images/credits/credits1.jpg) no-repeat;
}
#jerome:hover{
	background: url(images/credits/credits6.jpg) no-repeat;
}
#vincent:hover{
	background: url(images/credits/credits8.jpg) no-repeat;
}


#jour-un-un{
	background: url(images/jour-un-un.jpg) no-repeat;
}
#jour-un-deux{
	background: url(images/jour-un-deux.jpg) no-repeat;
}
#jour-un-trois{
	background: url(images/jour-un-trois.jpg) no-repeat;
}
#jour-deux-un{
	background: url(images/jour-deux-un.jpg) no-repeat;
}
#jour-deux-deux{
	background: url(images/jour-deux-deux.jpg) no-repeat;
}
#jour-deux-trois{
	background: url(images/jour-deux-trois.jpg) no-repeat;
}
#jour-trois-un{
	background: url(images/jour-trois-un.jpg) no-repeat;
}
#jour-trois-deux{
	background: url(images/jour-trois-deux.jpg) no-repeat;
}
#jour-trois-trois{
	background: url(images/jour-trois-trois.jpg) no-repeat;
}
#jour-quatre-un{
	background: url(images/jour-quatre-un.jpg) no-repeat;
}
#jour-quatre-deux{
	background: url(images/jour-quatre-deux.jpg) no-repeat;
}
#jour-quatre-trois {
	background: url(images/jour-quatre-trois.jpg) no-repeat;
}
#jour-cinq-un{
	background: url(images/jour-cinq-un.jpg) no-repeat;
}
#jour-cinq-deux{
	background: url(images/jour-cinq-deux.jpg) no-repeat;
}
#jour-cinq-trois{
	background: url(images/jour-cinq-trois.jpg) no-repeat;
}

#jour-six-un{
	background: url(images/jour-six-un.jpg) no-repeat;
}
#jour-six-deux{
	background: url(images/jour-six-deux.jpg) no-repeat;
}
#jour-six-trois{
	background: url(images/jour-six-trois.jpg) no-repeat;
}

#jour-six-cinq{
	background: url(images/jour-six-cinq.jpg) no-repeat;
}
#jour-six-six{
	background: url(images/jour-six-six.jpg) no-repeat;
}
#jour-sept-un{
	background: url(images/jour-sept-un.jpg) no-repeat;
}
#jour-sept-deux{
	background: url(images/jour-sept-deux.jpg) no-repeat;
}
#jour-sept-trois{
	background: url(images/jour-sept-trois.jpg) no-repeat;
}

.cred1{
	float: left;
	width: 1000px;
	height: 340px;
	overflow:hidden;	
	border-radius: 2px;
}
.cred2{
	float: right;
	width: 1000px;
	height: 340px;
	overflow:hidden;
	border-radius: 2px;
	
}
.cred1 p {
	float: left;
	width: 450px;
	margin:30px;
	margin-top:80px;
	font-size: 20px;
	font-family: 'Quattrocento', sans-serif;
	color:white;
		
	
}
.cred2 p {
	float: right;
	width: 450px;
	margin:30px;
	margin-top:80px;
	font-size: 20px;
	font-family: 'Quattrocento', sans-serif;
	color:white;
		
}
.block1 p{
	float: left;
	width: 400px;
	margin:30px;
	margin-top:5px;
	font-size: 19px;
	font-family: 'Quattrocento', sans-serif;
	color: #999;
	
}
.block2 p{
	float: right;
	width: 300px;
	margin-bottom: 5px;
	margin-top: 30px;
	margin-right:140px;
	font-size: 20px;
	font-family: 'Quattrocento', sans-serif;
	color: #999;

}

#footer{
	
	margin: 0 auto;
	padding-top:40px;
	height: 10px;
	width:900px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:9px;
	text-align: center;
	color: #999;
	
	
}
.clear{
	clear:both;
}



#deco{
	position: absolute;
	width: 1010px;
	height: 580px;
	background: url(images/dataviz/pots-01.png);
}

#parents{
	position: absolute;
	top: 245px;
	width: 200px;
	height: 510px;
	left: 110px;
	overflow: hidden;
}
#kot{
	position: absolute;
	top: 245px;
	width: 200px;
	height: 510px;
	left: 432px;
	overflow: hidden;
}
#autonome{
	position: absolute;
	top: 245px;
	width: 200px;
	height: 510px;
	left: 760px;
	overflow: hidden;
}

#sortie{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot1-sortir-01.png) no-repeat;
}
#seche{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot1-seche-01.png) no-repeat;
}
#alcool{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot1-verre-01.png) no-repeat;
}
#jeux{
	float: left;
	margin-top: 10px;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot1-gamer-01.png) no-repeat;
}
#travail{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot1-bosse-01.png) no-repeat;
}

#sortie2{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot2-sortir-01.png) no-repeat;
}
#seche2{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot2-seche-01.png) no-repeat;
}
#alcool2{
	float: left;
	margin-left: -3px;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot2-verre-01.png) no-repeat;
}
#jeux2{
	float: left;
	margin-left: 4px;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot2-gamer-01.png) no-repeat;
}
#travail2{
	float: left;
	margin-left: 10px;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot2-bosse-01.png) no-repeat;
}

#sortie3{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot3-sortir-01.png) no-repeat;
}
#seche3{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot3-seche-01.png) no-repeat;
}
#alcool3{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot3-verre-01.png) no-repeat;
}
#jeux3{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot3-gamer-01.png) no-repeat;
}
#travail3{
	float: left;
	width: 30px;
	height: 500px;
	background: url(images/dataviz/pot3-bosse-01.png) no-repeat;
}








#parents-ho{
	position: absolute;
	top: 305px;
	width: 200px;
	height: 510px;
	left: 110px;
	overflow: hidden;
}
#kot-ho{
	position: absolute;
	top: 305px;
	width: 200px;
	height: 510px;
	left: 432px;
	overflow: hidden;
}
#autonome-ho{
	position: absolute;
	top: 305px;
	width: 200px;
	height: 510px;
	left: 760px;
	overflow: hidden;
}








#sortie-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#seche-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#alcool-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#jeux-ho{
	float: left;
	margin-top: 10px;
	width: 30px;
	height: 500px;
}
#travail-ho{
	float: left;
	width: 30px;
	height: 500px;
}

#sortie2-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#seche2-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#alcool2-ho{
	float: left;
	margin-left: -3px;
	width: 30px;
	height: 500px;
}
#jeux2-ho{
	float: left;
	margin-left: 4px;
	width: 30px;
	height: 500px;
}
#travail2-ho{
	float: left;
	margin-left: 10px;
	width: 30px;
	height: 500px;
}

#sortie3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#seche3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#alcool3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#jeux3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#travail3-ho{
	float: left;
	width: 30px;
	height: 500px;
}

#sortie-ho:hover #sortie{
	opacity: 0.5;	
}
#seche-ho:hover #seche{
	float: left;
	width: 30px;
	height: 500px;
}
#alcool-ho:hover #alcool{
	float: left;
	width: 30px;
	height: 500px;
}
#jeux-ho{
	float: left;
	margin-top: 10px;
	width: 30px;
	height: 500px;
}
#travail-ho{
	float: left;
	width: 30px;
	height: 500px;
}

#sortie2-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#seche2-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#alcool2-ho{
	float: left;
	margin-left: -3px;
	width: 30px;
	height: 500px;
}
#jeux2-ho{
	float: left;
	margin-left: 4px;
	width: 30px;
	height: 500px;
}
#travail2-ho{
	float: left;
	margin-left: 10px;
	width: 30px;
	height: 500px;
}

#sortie3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#seche3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#alcool3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#jeux3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#travail3-ho{
	float: left;
	width: 30px;
	height: 500px;
}
#legende{
	margin-left: 60px;
	margin-bottom: 60px;
}
#legende li{
	float: left;
	margin-left: 15px;
	padding: 20px;
	padding-left: 50px;
}

#leg_sor{
	background: url(images/sortie.png) no-repeat;
}
	
#leg_sec{
	background: url(images/seche.png) no-repeat;
}
	
#leg_alc{
	background: url(images/alcool.png) no-repeat;
}

#leg_jeu{
	background: url(images/jeux.png) no-repeat;
}

#leg_tra{
	background: url(images/travail.png) no-repeat;
}
	
	
	
#reussite{
	background: url(images/dataviz/graph2-01.png) ;
	background-position: 27px -35px;
}

.block3{
	margin-top:10px;
	float: left;
	width: 200px;
	height: 340px;
		
	
	
}
.block3 p{
	margin-top:75px;
	font-size: 20px;
	font-family: 'Quattrocento', sans-serif;
	color: #999;
	
}
.block4{
	margin-top:10px;
	float: right;
	width: 800px;
	height: 360px;
}	
	
		
#bouton {
	margin: 0 auto;
	width:720px;
	height:50px;
	
	
	
}
#bouton a{
	text-align:center;
	font-size: 20px;
	font-family: 'Quattrocento', sans-serif;
	color:Black;
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	border-radius:25px;
	}
#bouton a:hover{
	text-shadow: 0px 0px 7px #999;
}
.text{
	margin: 0 auto;
	width:720px;
	padding:140px;
	margin-top:300px;
	margin-bottom: -50px;	
}
.text p{
	margin-top:30px;
	font-size: 20px;
	font-family: 'Quattrocento', sans-serif;
	color:grey;
	
}
.text h1{
	font-size: 30px;
	font-family: 'Quattrocento', sans-serif;
	color:  #999;
	
}
.text h2{
	border-top:1px dashed black;
	padding:40px;
	font-size: 16px;
	font-family: 'Quattrocento', sans-serif;
	color: #999;
	font-style:italic
	
}
.top a{
	position:fixed;
	left:-30px;
	padding: 30px;
	display: block;
	width:60px;
	height:60px;
	margin:60px;
	background: url(images/bouton.png) no-repeat ;	
	background-position: 60px 60px;
	bottom:-30px;
	
		
	
}
.top a:hover{
	position:fixed;
	left:-30px;
	padding: 30px;
	display: block;
	width:60px;
	height:60px;
	margin:60px;
	background: url(images/boutonhover.png) no-repeat ;	
	background-position: 60px 60px;
	bottom:-30px;
	
	
}

#index {
	margin:0 auto;
	margin-top:100px;
	width: 800px;
	
	
	
	
	}
#index h1{
	
	font-size: 35px;
	text-align:left;
	font-family: 'Quattrocento', sans-serif;
	color: #999;
	
	}
#index p{
	font-size: 20px;
	line-height: 1.2;
}
#img-index{
	position:absolute;
	width:250px;
	height:180px;
	background: url(images/img-index.png) no-repeat;
}

.canette{
	background: url(images/canette_or.png) repeat-x;
	
}
#can-jer{
	position: relative;
	top: 240px;
	left: 520px;
	width: 150px;
	height: 50px;
}
#can-den{
	position: relative;
	top: 210px;
	left: 28px;
	width: 300px;
	height: 50px;
}
#can-vin{
	position: relative;
	top: 250px;
	left: 515px;
	width: 225px;
	height: 50px;
}
.bout{
	background: url(images/bouteille-02.png) repeat-x;
	
}
#bou-jer{
	position: relative;
	top: 180px;
	left: 670px;
	width: 180px;
	height: 61px;
}
#bou-den{
	position: relative;
	top: 200px;
	left: 28px;
	width: 220px;
	height: 61px;
}
#bou-vin{
	position: relative;
	top: 190px;
	left: 740px;
	width: 20px;
	height: 61px;
}
#bou-san{
	position: relative;
	top: 230px;
	left: 28px;
	width: 140px;
	height: 61px;
}