@font-face{
font-family: fontpix;
src: url(../font/Pixelation.ttf);
}

#main_container{
	font-family: fontpix;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
/*

*/	
	width: 500px;
	height: 420px;
}

 #varGame{
	position: absolute;
	top:35px;
	background-image:url(../pic/stage1/bg.png);
	width: 500px;
	height: 375px;
	font-size:15px;
	z-index:0;
 }
 
 #varGame #perso{
 position: absolute;
 width: 25px;
 height:25px;
 background-image:url(../pic/stage1/perso.png);
 background-position: left 100px;
 top: 100px;
 left : 200px
 }
 
 #varGame #coeur{
 position: absolute;
 top: 5px;
 left : 10px
 }
 
 #varGame #coeur img{
 padding-left: 2px;
 }
 
 #varGame #piece{
 position: absolute;
 top: 5px;
 left : 200px
 }
 
 #varGame #score{
 position: absolute;
 top: 5px;
 right : 25px;
 }
		 
 #varGame #code{
 position: absolute;
 bottom: 5px;
 right : 5px;
 width : 100;
 }
 
#trophees{
	position: relative;
	z-index:10;
	border-style:solid;
	border-width:1px;
	margin-top:3px;
	background-color:#636363;
	width: 498px;
	font-size:15px;
	margin-left: auto;
	margin-right: auto;

}

#menu{
	position:relative;
	z-index:20;
	width:100%;
	margin:8px;
	cursor:pointer; 
	color:#BFBFBF;
}

#menu:hover{
	color:white;
}
 
#menu:after {
    content: url(../pic/trophees/down.png);
	position:absolute;
	right:20px;
	top:-3px;
}

#menu[developpe='false']:after {
    content: url(../pic/trophees/up.png);
}

 
 #trophees .container{
	z-index:10;
	display:none;
	background-color:#636363;
	max-height:370px;
	overflow-x:hidden;
	overflow-y:auto;
	padding-top:5px;
}

#trophees .trophee{
	position:relative;
	display:inline-block;
	width:190px;
	height:60px;
	font-size:10px;
	padding:3px;
	padding-left:40px;
	margin-left:7px;
	overflow:hidden;
	background-color:#3D3D3D;
	cursor:pointer;
}

#trophees .trophee .titre{
	color:#BFBFBF;
	margin:2px;
}


#trophees .trophee[unlocked=true] .titre{
	color:yellow;
}

#trophees .trophee[unlocked=true]:hover .titre{
	color:white;
}

#trophees .trophee .detail{
	font-size:8px;
	color:grey;
}

.icon{
	position:absolute;
	top:0;
	left:0;
	width:35px;
	height:35px;	
}

.icon:not(niveau){
	background-image:url(../pic/trophees/locked.png);
}

.icon[niveau="6"]{
	background-image:url(../pic/trophees/unlocked_gold_cup.png);
}
.icon[niveau="5"]{
	background-image:url(../pic/trophees/unlocked_silver_cup.png);
}
.icon[niveau="4"]{
	background-image:url(../pic/trophees/unlocked_bronze_cup.png);
}
.icon[niveau="3"]{
	background-image:url(../pic/trophees/unlocked_gold_medal.png);
}
.icon[niveau="2"]{
	background-image:url(../pic/trophees/unlocked_silver_medal.png);
}
.icon[niveau="1"]{
	background-image:url(../pic/trophees/unlocked_bronze_medal.png);
}
.icon[niveau="0"]{
	background-image:url(../pic/trophees/duck.png);
}


*[unlocked=false] .icon{
	background-image:url(../pic/trophees/locked.png);
}

#notifications{
	z-index:100;
	position:absolute;
	color:yellow;
	display:none;
	background-color:#636363;
	left: 0;
	right: 0;
	top:0;
	bottom:0;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding:10px;
	font-size:10px;
	width:200px;
	height:40px;
}

#notifications:not(dialog_box){
	padding-left:40px;
	border-size:3px;
	border-style:solid;
	border-color:#3D3D3D;
}

#notifications:not(dialog_box) p.txt{
	color : #BFBFBF;
	margin:3px;
}

#notifications:not(dialog_box) p.titre{
	color : yellow;
	margin:3px;
}

#notifications.dialog_box{
	width:300px;
	height:100px;
	z-index:30;
}

#notifications.dialog_box .icon{
	position:absolute;
	left:0;
	top:0;
}
#notifications.dialog_box .titre{
	color:yellow;
	font-size:12px;
	margin-top:0;
}

#notifications.dialog_box span{
	color:#BFBFBF;
}

#notifications.dialog_box .txt{
	padding-top:15px;
	padding-bottom:15px;
	color:white;
	font-size:10px;
}


#notifications.dialog_box .exemple{
	font-family:Consolas,monospace;
	font-size:15px;
	color:red;
	font-size:10px;
	border-style:dotted;
	border-width:1px;
	text-align:center;
	padding:5px;
	margin-top:5px;
}

#notifications.dialog_box .fermer:hover{
	color:white;
}

#notifications.dialog_box .fermer{
	font-size:20px;
	position:absolute;
	top:5px;
	right:5px;
	width:20px;
	height:20px;
	content: "X";
	color:#BFBFBF;
	cursor:pointer;
}

#voile{
	display:none;
	z-index:-1;
	position:absolute;
	top:0px;
	left:0px;
	width:499px;
	height:405px;
	background-color:black;
	opacity:0.5;
}