div,
body
{
	display:block;
	margin:0;
	padding:0;
	border:none;
}

body
{
	position:relative;
	background: url('bg_cinema.jpg') no-repeat center top;
	text-align:center;
	z-index:1;
}

.page-wrapper
{
	position:relative;
    top: 0px;
	width:460px;
	height: 360px;
	min-height:360px;
	margin:0 auto;
	padding:48px 0 0 0;
	background-color: none;
	color:#b9b9b9;
	background-imagex:url('ecran.gif');
	z-index:3;
	border: 0px solid green;
}

.frame{
    width: 100%;
    height:100%;
}

#screenover {
	position:absolute;
    top: 0px;
	left: 0px;
	width:100%;
	height: 360px;
	min-height:360px;
	margin:0 auto;
	padding:48px 0 0 0;
	background-image: url('screenover.png') no-repeat center top;
	text-align:center;
	z-index:20;
	background-color:blue;
	border: 2px solid green;
}

.extra1
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:23.2% !important;
	height:102px;
	min-height:102px;
	max-height:230px;
	z-index:2;
}
.extra1x::after
{
	content: " ";
	display:block;
	position:absolute;
	bottom:-198px;
	left:0;
	width:100%;
	height:428px;
	background:url('haut1.png') no-repeat 50% 100%;
}
.extra2x
{
	position:fixed !important;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:23.2% !important;
	height:102px;
	min-height:102px;
	max-height:230px;
	background:url('haut2.png') no-repeat 50% 100%;
	z-index:4;
}
.extra3x
{
	position:fixed !important;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	heightx:30% !important;
	height:178px;
	min-height:110px;
	max-height:178px;
	/*max-height:318px;*/
	background:url('bas.png') no-repeat 50% 0%;
	z-index:4;
}

@mediax (max-height: 430px) {
	.page-wrapper
	{
	position:relative;
    top: 0px;
	width:450px;
	height: 360px;
	min-height:360px;
	margin:0 auto;
	padding:90px 0 0 0;
	}
	.extra3 {
	position:fixed !important;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:10px;
	min-height:10px;
	max-height:10px;
	background:url('bas.png') no-repeat 50% 0%;
	z-index:4;
	}
}