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

html {
	width:1024px;
	}

body {
	height:6500px !important;
	width:1024px;
	margin:0;
	font-family:"Helvetica Neue";
	font-weight:normal;
	color:#000;
	}
	
#container {
	height:6500px;
	width:1024px;
	margin:0;
	background:#000000 url(img/bg-black.jpg) repeat-y;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	}
	
#red-plaster {
	width:1024px;
	height:1497px;
	background:url(img/red-plaster.png) top left no-repeat;
	position:absolute;
	top:0;
	left:0;}
	
#tunnel-lights {
	width:1024px;
	height:792px;
	background:url(img/tunnel-lights.png) top right no-repeat;
	position:absolute;}
	
#cadre {
	width:498px;
	height:659px;
	background:url(img/cadre.png) top left no-repeat;
	position:absolute;
	top:30px;
	left:264px;
	}
	
#flammes {
	width:681px;
	height:583px;
	background:url(img/flames.png) top left no-repeat;
	position:absolute;
	top:196px;
	left:180px;
	}
	
#red-plaster-over {
	width:510px;
	height:249px;
	background:url(img/red-plaster-over.png) top left no-repeat;
	position:absolute;
	top:546px;
	left:0px;
	}
	
#camera01 {
	width:285px;
	height:185px;
	background:url(img/camera-01.png) top left no-repeat;
	position:absolute;
	top:795px;
	left:625px;
	}
	
#camera01.on {
	background:url(img/camera-01.gif) top left no-repeat;
	}
	
#camera02 {
	width:285px;
	height:185px;
	background:url(img/camera-02.png) top left no-repeat;
	position:absolute;
	top:870px;
	left:266px;
	}
	
#camera02.on {
	background:url(img/camera-02.gif) top left no-repeat;
	}
	
#camera03 {
	width:285px;
	height:185px;
	background:url(img/camera-03.png) top left no-repeat;
	position:absolute;
	top:1014px;
	left:484px;
	}
	
#camera03.on {
	background:url(img/camera-03.gif) top left no-repeat;
	}
	
#black-gradient {
	width:1024px;
	height:4200px;
	position:absolute;
	top:1200px;
	left:0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(37%,rgba(0,0,0,1)), color-stop(66%,rgba(0,0,0,1)), color-stop(99%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 37%,rgba(0,0,0,1) 66%,rgba(0,0,0,0.03) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	}
	
.emoji {
	width:20px;
	height:20px;
	display:inline-block;
	margin:0 5px;
	}
	
.emoji.heart {
	background:url(img/emoji-heart.png) no-repeat;
	}
	
.emoji.heart2 {
	background:url(img/emoji-heart2.png) no-repeat;
	}
	
.emoji.angel {
	background:url(img/emoji-angel.png) no-repeat;
	}
	
.bulle-content {
	padding:11px;
	background-color:#e5e5ea;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	font-family:"Helvetica Neue";
	font-size:20px;
	}
	
.bulle {
	background:url(img/crochet-bulle.png) no-repeat bottom left;
	padding-left:8px;
	position:absolute;}
	
#bulle01 {
	top:1200px;
	left:120px;
	}
	
#bulle02 {
	top:2300px;
	left:750px;
	}
	
#bulle03 {
	top:2500px;
	left:100px;
	}
	
#bulle04 {
	top:2900px;
	left:400px;
	}
	
#bulle05 {
	top:3770px;
	left:650px;
	}
	
#bulle06 {
	top:4600px;
	left:60px;
	}
	
#bulle07 {
	top:4700px;
	left:60px;
	}
	
#bulle08 {
	top:4900px;
	left:660px;
	}
	
#bulle09 {
	top:5240px;
	left:300px;
	}
	
	
	
#car-container {
	width:1024px;
	height:500px;
	position:absolute;
	top:1700px;
	left:0;
	}
	
#car {
	background:url(img/voiture-rouge.png) no-repeat;
	width:686px;
	height:353px;
	position:absolute;
	top:0;
	left:-700px;
	transform:scale(0.3);
	
	}
#tunnel-gauche {
	background:url(img/tunnel-gauche.png) top left no-repeat;
	width:981px;
	height:672px;
	position:absolute;
	top:2800px;
	left:-300px;
	}
	
#tunnel-droite {
	background:url(img/tunnel-droite.png) top left no-repeat;
	width:1169px;
	height:1295px;
	position:absolute;
	top:2400px;
	left:300px;
	}
	
#sound-table {
	width:820px;
	height:550px;
	position:absolute;
	top:3850px;
	left:100px;}
	
#fond-metfleur {
	width:1024px;
	height:2218px;
	position:absolute;
	top:4350px;
	left:0px;
	}
	
#fond-metfleur-0 {
	background:url(img/fond-metfleur-0.png) top left no-repeat;
	width:1628px;
	height:2218px;
	position:absolute;
	top:0px;
	left:-350px;
	}
	
#fond-metfleur-1 {
	background:url(img/fond-metfleur-1.png) top left no-repeat;
	width:1628px;
	height:2218px;
	position:absolute;
	top:0px;
	left:-350px;
	}
	
#fond-metfleur-2 {
	background:url(img/fond-metfleur-2.png) top left no-repeat;
	width:1628px;
	height:2218px;
	position:absolute;
	top:0px;
	left:-350px;
	}
	
#fond-metfleur-3 {
	background:url(img/fond-metfleur-3.png) top left no-repeat;
	width:1628px;
	height:2218px;
	position:absolute;
	top:0px;
	left:-350px;
	}
	
#goback {
	width:55px;
	height:220px;
	background:url(img/goback.png) top left no-repeat;
	position:absolute;
	top:10px;
	left:10px;
	}
	
#panneau {
	width:471px;
	height:115px;
	background:url(img/panneau.png) top left no-repeat;
	position:absolute;
	left:526px;
	top:480px;
	}
	
a {
	color:#000;
	}
	
#panneau a {
	line-height:91px;
	font-size:30px;
	padding-left:124px;
	text-decoration:none;
	}
	
	
	
	
	
	

.clear {
	width:1024px;
	height:1px;
	display:block;
	}
	

/************ INTERACTIVE STUFF ************/

/***** RECORD BUTTON  *****/
.record-btn {
	width:37px;
	height:37px;
	border: 5px solid #FFFFFF;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	margin-left:126px;
	margin-top:152px;
	}
	
.record-btn-inside {
	width:33px;
	height:33px;
	-webkit-border-radius: 24px;
	border-radius: 24px;
	background-color:#f53333;
	margin:2px;
	-webkit-transition: margin 0.2s, width 0.2s, height 0.2s, -webkit-border-radius 0.2s;  /* For Safari 3.1 to 6.0 */
    transition: margin 0.2s, width 0.2s, height 0.2s, border-radius 0.2s; 
	}
	
.on .record-btn-inside {
	width:19px;
	height:19px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background-color:#f53333;
	margin:9px;
	}
	
/***** END OF RECORD BUTTON  *****/
	
/***** SLIDER  *****/

.slider-container-jqui {
	width:533px;
	height:53px;
	position:absolute;
	top:420px;
	left:250px;
	}
	
.ui-slider-track {
	width:533px;
	height:4px;
	background-color:#cacccb;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	position:absolute;
	top:24px;
	left:0px;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(245,51,51,1)), color-stop(50%,rgba(245,51,51,1)), color-stop(51%,rgba(197,199,199,1)), color-stop(100%,rgba(197,199,199,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(245,51,51,1) 0%,rgba(245,51,51,1) 50%,rgba(197,199,199,1) 51%,rgba(197,199,199,1) 100%); /* Chrome10+,Safari5.1+ */
	}
	
	
.ui-slider-handle {
	width:51px;
	height:51px;
	background-color:#FFFFFF;
	-webkit-border-radius: 26px;
	border-radius: 26px;
	position:absolute;
	top:-24px;
	left:200px;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.66);
	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.66);
	}
	
.ui-slider input {
	display:none;
	}
	
/***** END OF SLIDER  *****/

/***** SWITCH BUTTON  *****/
.switch {
	height:58px;
	width:94px;
	background-color:#fff;
	border: 1px solid #e4e4e4;
	-webkit-border-radius: 31px;
	border-radius: 31px;
	-webkit-transition: background-color 0.2s, border-color 0.2s;
	transition: background-color 0.2s, border-color 0.2s;
	position:relative;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	margin-bottom:30px;
	}

.switch-btn {
	background-color:#fff;
	width: 54px;
	height: 54px;
	border: #dedede 1px solid;
	-webkit-border-radius: 29px;
	border-radius: 29px;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.53);
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.53);
	position:absolute;
	top:1px;
	left:2px;
	-webkit-transition: left 0.2s;
	transition: left 0.2s;
	}
	
.switch.on .switch-btn {
	left:37px;
	}
	
.switch.on {
	background-color:#f53333;
	border-color:#ec6767;
	}
	
/***** END OF SWITCH BUTTON  *****/



#continue.bottom {
	position:absolute;
	bottom:118px;
	left:-85px;
	-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
	}
	
#continue.top {
	position:absolute;
	top:112px;
	left:-82px;
	-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
	}
	
/*** SLIDE TO CONTINUE ***/

@-webkit-keyframes wipe {
	0% {
		-webkit-mask-position: 0px 0;
	}
	100% {
		-webkit-mask-position: 230px 0px;
	}
}


#continue {
	font-family:"Helvetica Neue";
	font-size:23px;
	width:200px;
	padding-left:25px;
	line-height:34px;
	
	-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,.2) 30%, rgba(0,0,0,1) 60%, rgba(0,0,0,.2) 90%);
	-webkit-mask-image: linear-gradient(left, rgba(0,0,0,.2) 30%, rgba(0,0,0,1) 60%, rgba(0,0,0,.2) 90%);
	
	-webkit-animation: wipe 2s linear infinite;
	
	}
	
#continue.black {
	color:#000;
	background:url(arrow-slide-black.png) 4px 8px no-repeat;
	}
	
#continue.white {
	color:#fff;
	background:url(arrow-slide-white.png) 4px 8px no-repeat;
	}