@charset "UTF-8";


/* GENERAL - Tu t'en fous */

@import url("//hello.myfonts.net/count/295c45");  
@font-face {font-family: 'ClarendonBT-Roman';src: url('font/295C45_0_0.eot');src: url('font/295C45_0_0.eot?#iefix') format('embedded-opentype'),url('font/295C45_0_0.woff') format('woff'),url('font/295C45_0_0.ttf') format('truetype');}
 
body {
	background-color: #fff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:18px;
	color:#FFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}


/*CONTAINER DU JEU - je sais pas si tu t'en sers comme cache pour les décors */

#containerJeu, #containerPodium, #containerCredits {
	background-repeat: repeat-x;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 640px;
	width: 960px;
	position: relative;
	-moz-border-radius: 30px;
  	-webkit-border-radius:30px;
   	border-radius:30px;
   	behavior: url(/PIE.htc);
	overflow:hidden;
	-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
	-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	-webkit-user-select: none;
	user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;                 /* prevent copy paste, to allow, change 'none' to 'text' */
	-ms-user-select: none;      /* IE 10+ */
	margin:0 auto;
}
#containerJeu input {
user-select: text;
-webkit-user-select: text;  /* Chrome all / Safari all */
-moz-user-select: text;     /* Firefox all */
-ms-user-select: text;      /* IE 10+ */
-khtml-user-select: text;
} 

#containerJeu,#containerPodium, #containerCredits {
	background-color:#2CAFE5;	
}

/*INTRO*/

.intro {
	position:relative;
	z-index:10;
	top:50px;
	margin:0 auto;
	padding:0px;
	text-align:left;
	width:555px;
	height:310px;
	color:#fff;
	background-repeat:no-repeat;
	line-height:35px;
	font-size:23px;
}

.intro ul {
	list-style:none;
	margin:0 0 0 112px;
	
}

.intro ul li {
	list-style:none;
	background-image:url(images/puceIntro.png);
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:9px;	
}

a .chooseIza,  .chooseIza {
	position: absolute;
	z-index:10;
	width: 185px;
	height: 200px;
	bottom: 65px;
	left: 150px;
	background-image: url(images/izaIntro.png);
	background-repeat: no-repeat;		
}
a .chooseIza {
	background-position: 0 0px;	
}
a:hover .chooseIza {
	background-position: 0 -210px !important;	
}
a .chooseTino, .chooseTino {
	position: absolute;
	z-index: 10;
	width: 185px;
	height: 200px;
	bottom: 65px;
	right: 143px;
	background-image: url(images/tinoIntro.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
a:hover .chooseTino {
	background-position: 0 -210px !important;	
}
a:hover .intro {
	color:#FFF;
	background-image:url(images/introOn.gif);	
}

 .letsgo {
	position:relative;
	z-index:10;
	top:0px;
	margin:0;
	padding:0px;
	text-align:center;
	width:600px;
	height:196px;
	
}

.introBallon {
	position:absolute;
	z-index:5;
	top:97px;
	left:0px;
	width:960px;
	height:478px;
	background-image: url(images/ballonHome.png);
	background-repeat: no-repeat;
	background-position: 0 0px; /*iza: -500px -1000px   Tino: -1500px -2000px*/
	
}


.introPlay {
	position:relative;
	z-index:10;
	top:110px;
	left:0px;
	margin:0 auto;
	padding:0px;
	text-align:center;
	width:490px;
	height:530px;
	background-image:url(images/playAnimIza.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}
.introPlay.iza {
	background-image:url(images/playAnimIza.gif);
}
.introPlay.tino {
	background-image:url(images/playAnimTino.gif);
}
 a .play {
	position:relative;
	z-index:10;
	top:80px;
	margin:0 auto;
	padding:20px 0;
	text-align:center;
	width:290px;
	height:100px;
	background-image:url(images/play.png);
	background-repeat:no-repeat;
	background-position: center 20px ;
	background-color:#CF1A12;
	-moz-border-radius: 15px;
  	-webkit-border-radius:15px;
   	border-radius:15px;
   	behavior: url(/PIE.htc);
}

a:hover  .play {
	background-position: center bottom ;
	background-color:#fff;	
}




/*JEU*/

.distance {
	position:absolute;
	width:80px;
	top:10px;
	left:20px;
	text-align:center;
	z-index:50;
}
.temps {
	position:absolute;
	/*width:95px;*/
	min-width:95px;
	top:10px;
	right:20px;
	text-align:center;
	z-index:50;
}
.compteur {
	color: #5AC5F1;
	background-color: #FFF;
	font-size: 28px;
	line-height:36px;
	padding: 0 4px 0 0;
	margin: 5px 0;
	display: block;
	font-weight: normal!important;
	text-align:right;
	letter-spacing:0.1em;
}

.izatino {
	position: absolute;
	z-index:10;
	width: 250px;
	height: 300px;
	bottom: 30px;
	left: 330px;
	background-image: url(images/izatino.png);
	background-repeat: no-repeat;
	background-position:left 0px;	/*iza: left   Tino: right   y: 0 -300px -600px -900px -1200px -1500px -1800px -1400px -1600px -1800px*/	
}


.touchzone.zoneleft {
	position: absolute;
	z-index:20;
	bottom: 10px;
	left: 10px;
	right: 50%;
	top: 10px;
}

.touchzone.zoneright {
	position: absolute;
	z-index:20;
	bottom: 10px;
	right: 10px;
	left: 50%;
	top: 10px;
}


.obstacle {
	position: absolute;
	z-index:10;
	width: 130px;
	height: 130px;
	background-repeat: no-repeat;
	background-position:0 0; /* -130px -260px -390px*/		
}

.obstacleAbeille {background-image: url(images/obstacleAbeille.png);}
.obstacleAvion {background-image: url(images/obstacleAvion.png);}
.obstacleBoy {background-image: url(images/obstacleBoy.png);}
.obstacleCosmonaute {background-image: url(images/obstacleCosmonaute.png);}
.obstacleEtoile {background-image: url(images/obstacleEtoile.png);}
.obstacleFusee {background-image: url(images/obstaclefusee.png);}
.obstacleMouette {background-image: url(images/obstacleMouette.png);}
.obstaclePot {	background-image: url(images/obstaclePot.png);}
.obstacleScie {	background-image: url(images/obstacleScie.png);}
.obstacleSoucoupe {background-image: url(images/obstacleSoucoupe.png);}
.obstacleSuperman {background-image: url(images/obstacleSuperman.png);}
.obstacleVador {background-image: url(images/obstacleVador.png);}

.decor3 {
	position:absolute;
	z-index:2;
	width:960px;
	height:5000px;
	bottom:0px;
	left:0px;	
}

.decor2 {
	position:absolute;
	z-index:3;
	width:960px;
	height:4907px;
	bottom:0px;
	left:0px;	
}

.decor1  {
	position:absolute;
	z-index:4;
	width:960px;
	height:1200px;
	bottom:0px;
	left:0px;	
}

.animationFin {
	position:absolute;
	z-index:5;
	width:960px;
	height:640px;
	bottom:0px;
	left:0px;
	background-image:url(images/arriveeIza.png);
	background-repeat:no-repeat;
	background-position:center 0px;	
}

/*Arrivee*/

.arrivee  {
	position:absolute;
	z-index:4;
	width:960px;
	height:640px;
	top:0px;
	left:0px;
	background-image:url(images/arriveeTino.png); /* joueur = tino*/
	/*background-image:url(images/arriveeIza.png); joueur = Iza*/
	background-repeat:no-repeat;
	background-position:0 -6400px; /* 0 -640px;   0 -1280px;  0 -1920px;  0 -2560px; 0 -3200px; 0 -3840px;  0 -4480px;  0 -5120px   0 -5760px;  0 -6400px  - les 2 dernieres positions sont à répétées en boucle  */	
}

/* Ce bloc doit apparaitre au moment ou le bloc .arrivée est en boucle sur les 2 dernières images */

.arriveeTexte  {
	position:absolute;
	z-index:5;
	width:960px;
	height:640px;
	top:0px;
	left:0px;
	background-image:url(images/bonneAnnee.png);
	background-repeat:no-repeat;
	background-position:0 0; /* 0 -640px;  delai entre les 2 positions = 4 secondes */	
}


/*SCORES*/



.colPodium {
	position:relative;
	z-index:50;
	float:left;
	left:20px;
	top:120px;
	width:400px;	
}
.colPodium2 {
	position:relative;
	top:80px;
	float:right;
	width:400px;	
	height: 395px !important;
	padding-right:20px;	
	overflow:hidden!important;
}

.colPodiumFull {
	position:relative;
	margin:0 auto;
	top:80px;
	float:none;
	width: 920px;
	height: 393px !important;
	padding:20px;	
	overflow:hidden!important;
}


.tablePodium {
	width:100%;
	text-align:left;
	margin-top:0px;
	background-color:#fff;
	padding:10px 20px;
	height: auto;
	overflow:scroll!important;
}



 .headerPodium {
	width:100%;
	text-align:left;
	margin-top:10px;
	background-color:#fff;
	padding:5px 20px;
	height:20px!important;
	overflow:hidden;
}



.tablePodium td {
	color:#CF1A12;
	
}

.headerPodium td {
	color:#2dafe5;
	font-weight:normal;
	
}

.headerPodium {
	border-bottom:1px solid #2dafe5;
}

.scroll {
	position:relative;
	overflow:scroll !important;
	width:100%;
	height:300px;
}

.colPodium2 td.pucePodium {
	width:60px;	
		padding:0 10px 3px 0;
	
}

.colPodium2 td.nomPodium {
	width:auto;
		padding:0 10px 3px 0;
		
}

.colPodium2 td.scorePodium {
	width:100px;
		padding:0 10px 3px 0;
		text-align:right;
		
}

.colPodiumFull td.pucePodium {
	width:100px;
	padding:0 10px 4px 0;	
}

.colPodiumFull td.nomPodium {
	width:350px;
	padding:0 10px 4px 0;		
}

.colPodiumFull td.scorePodium {
	width:auto;	
	padding:0 10px 4px 0;	
	text-align:left;
}








/* DIVERS tu t'en fous */
h1, h2, h3, h4 {
	font-family: 'ClarendonBT-Roman';
	letter-spacing:-0.03em;
	font-weight:normal!important;
	margin:0;
	padding:0;
	
}

h1 {
	color:#0091CB;
	font-size:60px;
	line-height:50px;
	font-size:35px;
	line-height:35px;
	font-weight:normal!important;
}

h2{
	color:#fff;
	font-size:70px;
	line-height:60px;
	margin-top:15px;
	font-weight:normal;
}

h3{
	color:#fff;
	font-size:35px;
	line-height:40px;
	font-weight:normal;
}
h4{
	color:#fff;
	font-size:35px;
	line-height:30px;
	font-weight:normal;
}



.titre {
		color:#0091CB;
	line-height:50px;
	position:relative;
	top:30px;
	margin:0 auto;
	text-align:center;
	width:70%;
	font-weight:normal!important;
	z-index:15;
	
}

.titre a {
	text-decoration:none;
	color:#0091CB;	
	font-weight:normal;
}

.titre a:hover {
	color:#FFF;	
}

.son a, .music a {
	position: absolute;
	z-index: 500;
	top: 130px;
	width: 20px;
	height: 20px;
	background-color: #5AC5F1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
}

.son a {
	right: 10px;
	
}
.music a {
	right: 35px;
	
}

.son a:hover, .music a:hover {
	background-color: #FFF;
	
}

.son a:focus, .music a:focus {
	background-color: #FFF;
	
}


.tableCredits{
	position:absolute;
	top:180px;
	left:120px;
	width:60%;
	font-size:35px;
	font-family: 'ClarendonBT-Roman';
	letter-spacing:-0.03em;
	line-height:35px;
	font-weight:normal;
}

.tableCredits td.orange {
	text-align:right;
	color:#0091CB!important;
	padding-right:20px;
	font-weight:normal;
}
.tableCredits td {
	margin:0;
	padding:0px;
	font-weight:normal;
	
}

.tableCredits a {
	text-decoration:none;
	color:#fff;
}

.tableCredits a:hover {
	text-decoration:none;
	color:#C90000;
}

a .podium,
a .credits {
	position:absolute;
	width:80px;
	height:80px;
	bottom:20px;
	text-align:center;
	color:#5AC5F1;
	background-color:#2CAFE5;
	-moz-border-radius: 15px;
  	-webkit-border-radius:15px;
   	border-radius:15px;
   	behavior: url(/PIE.htc);
}

a .podium, .podium {
	left:20px;
}

a .credits, .credits {
	right:20px;
}

a:hover .podium,
a:hover .credits{
	background-color:#fff;
}

a .podium img,
a .credits img,
.podium img,
.credits img {
	margin:8px 0 2px 0;
}

.podium,
.credits {
	position:absolute;
	z-index:20;
	width:80px;
	height:80px;
	bottom:20px;
	text-align:center;
	color:#2CAFE5;
	background-color:#fff;
	-moz-border-radius: 15px;
  	-webkit-border-radius:15px;
   	border-radius:15px;
   	behavior: url(/PIE.htc);
}
.inscription {
	position:absolute;
	z-index:20;
	/*width:650px;*/
	height:80px;
	left:300px;
	bottom:20px;
	text-align:left;
	color:#fff;
}
.retour  {
	position:absolute;
	padding:0px 10px;
	z-index:20;
	text-align:left;
	font-family: 'ClarendonBT-Roman';
	font-size:35px;
	line-height:80px;
	-moz-border-radius: 15px;
  	-webkit-border-radius:15px;
   	border-radius:15px;
   	behavior: url(/PIE.htc);
	bottom:20px;
	left:370px;
	
}

a .retour  {
	color:#CF1B00;	
	background-color:#fff;	
	width:110px;
}
a:hover .retour  {
	color:#fff;	
	background-color:#CF1B00;	
}


.blanc {
	color:#FFF;
}
.jaune {
	color:#FFCC00;
}
.orange {
	color:#0091CB;
}

.puce {
	color:#CB0000;
}



input.nom {
	color:#CF1B00;
	font-size:18px;
	height:80px;
	background-color:#fff;
	-moz-border-radius: 15px;
  	-webkit-border-radius:15px;
   	border-radius:15px;
   	behavior: url(/PIE.htc);
	border:0;
	padding:0 10px;
	margin-right:10px;
	text-align:center;
}

input.bouton {
	color:#fff;
	font-size:18px;
	height:80px;
	background-color:#CF1B00;
	-moz-border-radius: 15px;
  	-webkit-border-radius:15px;
   	border-radius:15px;
   	behavior: url(/PIE.htc);
	border:0;
	padding:0 10px;
}

input.bouton:hover {
	color:#CF1B00;
	background-color:#fff;
	cursor:pointer;
	
	
}

.decorCredits {
	position:absolute;
	z-index:0;
	width:960px;
	height:640px;
	bottom:0px;
	left:0px;	
}