body{
  background-color: black;
  color : white;
  font-family : Arial; font-size : 15px;
  margin : 0px;
  text-align : justify;
  position : absolute;
  left : 50%;
  width : 0px;
}

#jeu{
position : absolute;
left : -600px;
}

.bouteille_description{
	border-radius : 10px;
	float : right;
	height : 280px;	max-width : 100px;
	margin : 0px 10px 10px 10px;
}

#description{
  background-image : url(images/table.png);
  border-radius : 10px;
  box-shadow : 0px 0px 10px black;
  overflow : hidden;
  padding : 10px;
  height : 350px; width : 320px;
  position : absolute;
  right : 25px; bottom : 25px;
  text-align : left;
  z-index : 10;
}



/*.robinet{
	background-image : url(images/robinet2.png);
	height : 45px; width : 45px;
	position : absolute;
	top : 165px;
	z-index : 25;
}*/

a{
  color : white;
  text-decoration : none;
}

.liquide_bouteille{
  border-top : solid 1px black;
  position : absolute;
  width : 45px;
  z-index : 10;
}

section{
  /*background-image : url(images/plage_old.png);*/
  display : block;
  height : 650px; width : 1200px;
  position : absolute;
}

.etiquette{
	cursor : pointer;
	background-color : rgba(255,255,255,0.5);
	border : solid 1px black;
	top : 70px;
	text-align : center;
	position : absolute;
	color : #444444;
	width : 43px;
	height : 24px;
	font-size : 9px;
	z-index : 22;
}

.masque{
  background-color : white;
  display : block;
  height : 650px; width : 1200px;
  opacity : 0;
  position : absolute;
  z-index : 50;
}

svg{
  position : absolute;
  top:165px;
}

use{
	cursor : pointer;
}

.bouteille{
  cursor : pointer;
  height : 120px; width : 45px;
  position : absolute;
  top : 25px;
  z-index : 20;
}

.tuyau_vertical{
  background-image : url(images/tuyau_V.png);
  height : 80px; width : 15px;
  position : absolute;
  top : 145px;
  z-index : 20;
}

.liquide_vertical{
	position : absolute;
	top : 145px;
	width : 15px;
	z-index : -2;
}

.liquide_horizontal{
	left : 30px;
	position : absolute;
	width : 1133px;
	z-index : 10;
}

#info_bouton{
	padding : 0px;
	margin : 0px;
	position : absolute;
	bottom : 40px; left : -35px;
	display : none;
	z-index : 6;
}

#tuyau_horizontal{
  background-image : url(images/tuyau_H.png); /*background-color : rgb(140,210,230);*/
  border-left : 1.5px solid black; border-right : 1.5px solid black; border-radius : 0px 0px 5px 5px;
  height : 15px; width : 1133px;
  left : 30px; top : 225px;
  position : absolute;
  z-index : 20;
}

#contenu_verre{
  border-top : 1px solid black;
  left : 530px;
  position : absolute;
  width : 135px;
  z-index : 15;
}

#table{
  background-image : url(images/table.png);
  height : 110px; width : 1200px;
  position : absolute;
  top : 540px;
}

.glacon{
	background-image:url('images/glacon.png');
	display : none;
	height:30px; width:35px;
	left:580px;
	position:absolute;
	z-index : 5;
}

.popup{
  background-image : url(images/table.png);
  border-radius : 10px;
  box-shadow : 0px 0px 10px black;
  overflow : hidden;
  padding : 10px;
  position : absolute;
  z-index : 80;
  cursor : default;
}

h1{
  text-shadow : 0px 0px 3px white;
  /*text-align : center;*/
  text-indent : 50px;
}

button{
  background-color : rgb(50,170,220);
  border : none;  border-radius : 10px;
  box-shadow : 0px 0px 3px white;
  color : white;
  cursor : pointer;
  font-size : 20px;
  padding : 10px;
}

button:hover{
  background-color : rgb(140,210,230);
  box-shadow : 0px 0px 10px white;
}

.button_popup{
  margin : 0px;
  position : absolute; bottom : 15px;
  text-align : center;
  width : 500px;
}

.button_popup a{
  background-color : rgb(50,170,220);
  border : none;  border-radius : 10px;
  box-shadow : 0px 0px 3px white;
  color : white;
  cursor : pointer;
  display : block;
  font-size : 20px;
  padding : 10px; margin : auto;
  width : 200px;
}

.button_popup a:hover{
  background-color : rgb(140,210,230);
  box-shadow : 0px 0px 10px white;
}

#bouton_servir{
	background-image: url(images/bouton_servir.png);
	cursor : pointer;
	height : 75px; width : 75px;
	right:10px; bottom: 10px;
	position: absolute; 
  z-index:6;
}

#bouton_servir:hover{
	background-image: url(images/bouton_servir_over.png);
}

#bouton_commande{
	background-image: url(images/bouton_client.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:210px; bottom: 10px;
	position: absolute; 
  z-index:6;
}

#bouton_commande:hover{
	background-image: url(images/bouton_client_over.png);
}

#bouton_pause{
	background-image: url(images/bouton_pause.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:10px; bottom: 10px;
	position: absolute; 
  z-index:6;
}

#bouton_pause:hover{
	background-image: url(images/bouton_pause_over.png);
}

#bouton_rejouer{
	background-image: url(images/bouton_rejouer.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:50px; bottom: 10px;
	position: absolute; 
  z-index:6;
}

#bouton_rejouer:hover{
	background-image: url(images/bouton_rejouer_over.png);
}

#bouton_marche{
	background-image: url(images/bouton_marche.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:90px; bottom: 10px;
	position: absolute;  
  z-index:6;
}

#bouton_marche:hover{
	background-image: url(images/bouton_marche_over.png);
}

#bouton_musique_played{
	background-image: url(images/bouton_musique.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:130px; bottom: 10px;
	position: absolute;  
  z-index:6;
}

#bouton_musique_played:hover{
	background-image: url(images/bouton_musique_over_barre.png);
}

#bouton_musique_paused{
	background-image: url(images/bouton_musique_barre.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:130px; bottom: 10px;
	position: absolute;  
  z-index:6;
}

#bouton_musique_paused:hover{
	background-image: url(images/bouton_musique_over_barre.png);
}

#bouton_tuto{
	background-image: url(images/bouton_tuto.png);
	cursor : pointer;
	height : 30px; width : 30px;
	left:170px; bottom: 10px;
	position: absolute;  
  z-index:6;
}

#bouton_tuto:hover{
	background-image: url(images/bouton_tuto_over.png);
}

/*FLORIAN*/

#pauseFond{
  position : absolute;
	background-color:black;
	opacity:0.6;
	z-index : 50;
	padding : 0px;
}

#pauseTexte{
  position:absolute;
  height:200px;
  width:500px;
  text-align:center;
  top:200px;
  left:350px;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius:10px 10px 10px 10px;
  opacity:1;
  z-index: 80;
  background-image : url(images/table.png);
  box-shadow : 0px 0px 10px black;
}

/*FIN FLORIAN*/

.popup_tuto {
	overflow : hidden;
	padding : 0px;
	position : absolute;
	z-index : 80;
	}
	
#tuto_menu {
	position : absolute; top:610px; left:300px;
	height: 20px; 
	width:580px; 

	border-radius:10px;
	padding: 5px;
	}
	
#bouton_prec_tuto {
  background-image : url(images/coco_gauche.png);
  position : absolute; bottom : 3px; left:170px;
  text-align : center;
  font-size:15px;
  padding : 0px;
  cursor:pointer;
  height : 40px; width : 40px;
}

#bouton_suiv_tuto {
  background-image : url(images/coco_droit.png);
  position : absolute; bottom : 3px; right:165px;
  text-align : center;
  font-size:15px;
  padding : 0px;
  cursor:pointer;
  height : 40px; width : 40px;
}

.bouton_revenir {
  background-color : rgb(50,170,220);
  border : none;  border-radius : 10px;
  box-shadow : 0px 0px 0px white;
  margin : auto;
  position : absolute; bottom : 3px; right:245px;
  text-align : center;
  padding : 0px;

}

.etape_tuto {
	display : none; 
	width:400px; 
	height:300px; 
	background-image:url(images/table.png);
	position:absolute;  
	border:black 2px solid; 
	border-radius:10px; 
	box-shadow:0px 0px 5px black; 
	
	}