﻿
body
{
	position: relative;
	margin: auto;
	margin-top: 170px;
	width: 800px;
	height: 640px;
	background: url('images/old_tv.png') no-repeat center top #434c9b;	
	border: 2px white solid;
}
#audiocontrols1, #audiocontrols2
{
	position: absolute;
	top: 690px;
	left: 670px;
}
#chargement{
	position: absolute;
	top: 20%;
	left: 37%;float: left;
	width: 30%;
}
	#chargement .progressbar-text{
		font-family: arial;
		font-weight: bold;
		font-size: 5em;
	}
.icon-play1, .icon-play2
{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-top: 1px;
	line-height: 50px;
	vertical-align: text-top;
	background: url('images/icon.png') no-repeat 0px 0px;
}
.icon-pause1, .icon-pause2
{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-top: 1px;
	line-height: 50px;
	vertical-align: text-top;
	background: url('images/icon.png') no-repeat -60px 0px;
}
.icon-volume-down1, .icon-volume-down2
{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-top: 1px;
	line-height: 50px;
	vertical-align: text-top;
	background: url('images/icon.png') no-repeat -180px 0px;
}
.icon-volume-up1, .icon-volume-up2
{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-top: 1px;
	line-height: 50px;
	vertical-align: text-top;
	background: url('images/icon.png') no-repeat -120px 0px;
}
#fond
{
	width: 800px;
	height: 640px;
	overflow: hidden;
	position: relative;
}
.logo
{
	max-width: 100px;
	position: absolute;
		cursor: pointer;
}
#positionStart 
{
	width: 600px;
	height: 400px;
	position: absolute;
	top: 260px;
	left: 100px;
	background: url('images/start.png') no-repeat;
	background-position: -600px 0;
}
#button
{
	max-width: 180px;
	min-height: 180px;
	position: relative;
	top: 140px;
	left: 300px;
	cursor: pointer;
	background: url('images/bouton2.png') no-repeat;
}
.sprite
{
	position: absolute;
	display: block;
	width: 600px;
	height: 400px;
}
	#marche
	{
		background: url('images/marche.png') no-repeat;
		margin-left: -300px;
		left: -100px;
		top: 230px;
	}
	#marcheLeft
	{
		background: url('images/marche_left.png') no-repeat;
		margin-left: 150px;
		left: 850px;
		top: -150px;
	}
	#rallage
	{
		background: url('images/rallage.png') no-repeat;
		margin-left: 240px;
		left: -100px;
		top: 230px;
	}
	#attente
	{
		background: url('images/attente.png') no-repeat;
		margin-left: 250px;
		left: -100px;
		top: 229px;
	}
	#chutte
	{
		background: url('images/chute.png') no-repeat;
		margin-left: 250px;
		left: -100px;
		top: 229px;
	}
	#releve
	{
		background: url('images/releve.png') no-repeat;
		margin-left: 250px;
		left: -100px;
		top: 229px;
	}
	#pancarteSon
	{
		background: url('images/panneau_son.png') no-repeat;
		left: 450px;
		top: -250px;
		cursor: pointer;
		max-width: 200px;
		max-height: 274px;
	}
	#micro
	{
		background: url('images/micro.png') top no-repeat;
		left: 485px;
		top: -650px;
		cursor: pointer;
		max-width: 130px;
		min-height: 615px;
	}
	#contentMicro
	{
		background: url('images/content_micro.png') no-repeat;
		left: 310px;
		top: 230px;
	}	
	#impatientMicro
	{
		background: url('images/impatient_micro.png') no-repeat;
		left: 310px;
		top: 230px;
	}
	#chant
	{
		background: url('images/chant.png') no-repeat;
		left: 310px;
		top: 230px;
	}
	#saut
	{
		background: url('images/saut.png') no-repeat;
		left: 400px;
		top: 230px;
	}
	#finChant
	{
		background: url('images/finchant.png') no-repeat;
		left: 310px;
		top: 230px;
	}
	#roulade
	{
		background: url('images/roulade.png') no-repeat;
		left: 310px;
		top: 230px;
	}
	#intrigue_tv
	{
		background: url('images/intrigue_tv.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#allumage
	{
		background: url('images/allumage.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#rigole1
	{
		background: url('images/rigole1.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#rigole2
	{
		background: url('images/rigole2.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#pascontent
	{
		background: url('images/pascontent.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#enerver_tv
	{
		background: url('images/enerver_tv.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#fin_tv
	{
		background: url('images/fin_tv.png') no-repeat;
		left: -50px;
		top: 230px;
	}
	#arriverBox
	{
		background: url('images/box1.png') no-repeat;
		left: 85px;
		top: 270px;
		max-height: 492px;
		min-height: 492px;
	}
	#box2
	{
		background: url('images/box2.png') no-repeat;
		left: 85px;
		top: 270px;
		max-height: 492px;
		min-height: 492px;
	}
	#box3
	{
		background: url('images/box3.png') no-repeat;
		left: 85px;
		top: 270px;
		max-height: 492px;
		min-height: 492px;
	}
	#box
	{
		background: url('images/boxfixe.png') no-repeat;
		left: 159px;
		top: 430px;
		max-width: 200px;
		max-height: 200px;
		cursor: pointer;
	}
	#panneau_main
	{
		background: url('images/panneau_main.png') no-repeat;
		left: 550px;
		top: 620px;
		max-width: 250px;
		max-height: 200px;
		cursor: pointer;
	}
	#robinetSeul
	{
		background: url('images/robinetSeul.png') no-repeat;
		left: 800px;
		top: 171px;
		max-width: 119px;
		max-height: 117px;
		cursor: pointer;
	}
	#debut_robinet
	{
		background: url('images/debut_robinet.png') no-repeat;
		left: 275px;
		top: -10px;
	}
	#ouvrir_robinet
	{
		background: url('images/ouvrir_robinet.png') no-repeat;
		left: 275px;
		top: -10px;
	}
	#fin_robinet
	{
		background: url('images/fin_robinet.png') no-repeat;
		left: 275px;
		top: -10px;
	}
#TV, #TV2
{
	background: url('images/tv.png') no-repeat;
	position: absolute;
	top: 425px;
	left: -400px;
	min-width: 280px;
	min-height: 216px;
	cursor: pointer;
}
#webcam
{
	position: absolute;
	top: 443px;
	left: 20px;
}
#texte
{
	text-indent: 20px;
	color: white;
	font-family: arial;
	font-weight: bold;
	position: absolute;
	left: 10px;
	text-align: justify;
	width: 450px;
	margin-top: 40px;
}
	h2
	{
		text-align: center;
	}
	.p4
	{
		width: 800px;
	}
	.p5, .p6
	{
		max-width: 400px;
	}
#traitBlanc
{
	position: absolute;
	top: 600px;
	min-width: 800px;
	min-height: 7px;
	background: white;
}
#fenetre_bleu
{
	position: absolute;
	top: 607px;
	min-width: 800px;
	min-height: 40px;
	background: #434c9b;
}