/*
* CSS style file for "Les murs ont des yeux"
* © 2012 Kngfu
*
* Last edition by Pierre LEBEDEL - plebedel@avgs.ca - 22/10/2012
*/
/************************
* RESET CSS
************************/
*{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
img{border:0}
h1,h2,h3,h4,h5,h6{font-size:100%}
abbr,acronym{border:0;font-variant:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%}

/**************************************
* Balises générales
**************************************/
html, body{
	font-family:'Helvetica', 'Arial', sans-serif;
	font-size:100%;
	width:100%;
	height:auto;
	color:#fff;
	background-color:#000;
}

body{
	overflow-y:scroll;
	background:url('../images/main-bg.jpg') top center no-repeat;
}

h1, h2, h3, h4, h5, h6{font-weight:bold;}
h1{
	font-size:330%;
}

p{font-weight:bold;font-size:115%}
footer p, section#main-content p{padding-left:30px;}

a, a:active, a:visited{color:#f2f2f2;text-decoration:none;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s}
a:hover, a:focus{color:#fff}
a.current{text-shadow:0px 0px 5px #33f;}

/*This is Sparta*/
#imgLoader{
	width:0;
	height:0;
	overflow:hidden;
	position:absolute;
	top:-9999px;
	left:-9999px;
}

.transition.s0-1{-o-transition:.1s;-ms-transition:.1s;-moz-transition:.1s;-webkit-transition:.1s;transition:.1s}
.transition.s0-3{-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s}
.transition.s0-4{-o-transition:.4s;-ms-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s;transition:.4s}
.transition.s0-5{-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s}
.transition.s0-6{-o-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;-webkit-transition:.6s;transition:.6s}
.transition.s0-75{-o-transition:.75s;-ms-transition:.75s;-moz-transition:.75s;-webkit-transition:.75s;transition:.75s}
.transition.s0-8{-o-transition:.8s;-ms-transition:.8s;-moz-transition:.8s;-webkit-transition:.8s;transition:.8s}
.transition.s1{-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s}
.transition.s1-5{-o-transition:1.5s;-ms-transition:1.5s;-moz-transition:1.5s;-webkit-transition:1.5s;transition:1.5s}
.transition.s2{-o-transition:2s;-ms-transition:2s;-moz-transition:2s;-webkit-transition:2s;transition:2s}
.transition.s2-5{-o-transition:2.5s;-ms-transition:2.5s;-moz-transition:2.5s;-webkit-transition:2.5s;transition:2.5s}
.transition.s3{-o-transition:3s;-ms-transition:3s;-moz-transition:3s;-webkit-transition:3s;transition:3s}

/******************************
* Propriétés communes
*******************************/
.mapper{position:relative;height:100%;width:100%}
.mapper.centered{position:absolute;top:50%;left:50%;height:0;width:0}
.center{width:1060px;margin:0 auto}

.bigCaps{text-transform:uppercase;font-size:190%;font-weight:bold;}
.bigNum{position:absolute;top:-45px;font-weight:bold;font-size:800%;font-style:italic}
.chatName{text-transform:uppercase;display:block;position:absolute;bottom:10px;left:50%;margin-left:-50px;width:100px;text-align:center;padding:3px 8px;background-color:rgba(25,25,25,.7);border-radius:5px;}


/******************************
* Sprite illustrations
*******************************/
.sprite{background:url('../images/sprite.png') 0 0 no-repeat}

.arrowsGoRight, .arrowsGoLeft{background:url('../images/sprite_arrows.png') 0 0 no-repeat;display:block;position:absolute;top:3px;width:35px;height:30px}
.arrowsGoRight{left:0;}
.arrowsGoLeft{background-position:-43px 0px;right:0}


.topCamLeft{
	position:absolute;
	bottom:-50px;right:0;
	width:135px;
	height:85px;
	background-position:-170px -3px;
}

.footerCamRight{
	position:absolute;
	bottom:105px;left:-130px;
	width:144px;
	height:158px;
	background-position:-162px -96px;
}

.bigCam{
	position:absolute;
	top:-11px;left:40px;
	width:75px;
	height:82px;
	background-position:-314px 0px;
}

.smallCam{
	position:absolute;top:-27px;
	width:45px;
	height:79px;
	background-position:-315px -126px;
}
.smallCam.left{right:0;background-position:-363px -126px;}

/******************************
* DIVISION
*******************************/
header#website-header{
	position:relative;
	height:280px;
}
section#website-menu-top{
	position:relative;
}


section#main-content{
	position:relative;
	height:375px;
	margin:37px auto;
}

footer#website-footer{
	position:relative;
	padding-bottom:30px;
}
/******************************
* HEADER
*******************************/
.halfLeft, .halfRight{position:absolute;top:85px;}
.halfLeft{
	left:0;
	top:67px;
	width:590px;
}
.halfRight{
	right:105px;
	width:305px;
}

header#website-header .halfRight .bigCaps{
	display:block;
	position:relative;
	text-align:center;
	width:290px;
	float:right; 
}

#login{
	margin-top:10px;
	background-color:#000;
	width:223px;
	padding:17px;
	float:right;
}

#login label{
	display:block;
	font-weight:bold;
}

#login input[type="text"], #login input[type="password"]{
	border:0;
	background-color:#fff;
	outline:none;
	width:90px;
	font-size:80%;
	height:21px;
}
#login input[type="submit"], input[type="button"]{
	border:0;
	background-color:#000;
	color:#fff;
	font-weight:bold;
}

/*
* When the user is logued in
*/
#login-disconnect-link{
	display:block;
	width:100%;
	height:100%;
}
#login-disconnect-link:hover .username, #login-disconnect-link:focus .username{
	text-shadow:0px 0px 4px #f00;
}

.login-icon{
	float:left;
	width:42px;
	height:42px;
	margin:2px 15px 2px 5px;
	background-position:-315px -210px;
}

.username{
	font-size:115%;
	color:#f00;
	text-decoration:underline;
	text-transform:capitalize;
}


/******************************
* MENU - STEPS
*******************************/
#website-menu-top table td p{padding-left:90px;}

#firstStep{
	width:28%;
	background:url('../images/table_arrow_right.png') center right no-repeat;
}
#secondStep{
	width:50%;
	background:url('../images/table_arrow_right.png') center right no-repeat;
}
#thirdStep{width:22%;}

/*
* User logued in
*/
.user_home #website-menu-top table td{text-transform:uppercase;font-weight:bold;text-align:center;font-size:110%;}

#td-void-small{width:5%;}
#td-personnal-cam{width:25%;}
#td-all-cam{width:25%;}
#td-void{width:45%;}

/******************************
* PAGE CONTENT
*******************************/
.screenPreview{
	width:465px;
	height:295px;
	position:relative;
	float:left;
	margin:10px 30px 20px;
	background-color:#999;
	text-align:center;
}

.screenPreview.new .bandeauNew{
	position:absolute;
	bottom:-12px;
	right:-12px;
	width:130px;
	height:130px;
	background-position:-8px -126px;
}

#leftScreen{background:url('../images/camleft/loulou458_1.jpg') center center no-repeat;}
#rightScreen{background:url('../images/camright/suzy224_1.jpg') center center no-repeat;}

#leftScreen .frontImg{background-image:url('../images/camleft/loulou458_1.jpg');}
#rightScreen .frontImg{background-image:url('../images/camright/suzy224_1.jpg');}

.frontImg{
	top:0;
	left:0;
	position:absolute;
	width:100%;
	height:100%;
	background-position:center center;
	background-repeat:no-repeat;
}

/*
* Flux vidéo - utilisateur logué
*/
.screen-container{
	height:180px;
}


.personnalScreenPreview{
	position:relative;
	width:504px;
	height:145px;
	float:left;
	background:#000;
	margin-left:80px;
}

.personnalScreenPreview .personnalPreview{
	width:236px;
	height:145px;
	float:left;
}

.personnalScreenPreview .personnalData{
	position:relative;
	width:265px;
	height:145px;
	float:left;
}

#container-loulou458 .personnalPreview{background:url('../images/miniflux/loulou458.jpg') no-repeat center center;}
#container-kath265 .personnalPreview{background:url('../images/miniflux/kath265.jpg') no-repeat center center;}

.personnalScreenPreview .personnalData h3{
	font-size:110%;
	font-weight:bold;
	margin:10px 15px;
	text-transform:uppercase;
}

.personnalData-link-container{
	position:absolute;bottom:10px;
	width:100%;
}

.personnalData-link-container .archives-link{
	float:left;
	display:block;
	margin-left:38px;
	position:relative;
}
.personnalData-link-container .archives-link:before{
	position:absolute;left:-23px;top:1px;
	content:'\20';
	width:17px;
	height:17px;
	display:block;
	background:url('../images/sprite.png') no-repeat -318px -87px;
}

.personnalData-link-container .connectionStatus{
	float:right;
	margin-right:10px;
	position:relative;
}
.personnalData-link-container .connectionStatus:before{
	position:absolute;left:-25px;top:-4px;
	content:'\20';
	width:26px;
	height:26px;
	display:block;
	background:url('../images/sprite.png') no-repeat -348px -89px;
}


/******************************
* FOOTER
*******************************/
#website-footer table, #website-menu-top table{
	width:100%;
	height:80px;
	background-color:#000;
	margin-bottom:20px;
}
#website-footer table td{
	width:35%;
	height:80px;
}
#website-footer table td.inscription{
	width:30%;
	text-align:center;
	background:url('../images/table_arrow_right.png') center left no-repeat #f00;
}

#website-footer table .leftArrow{
	background:url('../images/table_arrow_left.png') center left no-repeat;
}

.paiement{
	position:absolute;
	top:-20px;right:100px;
	width:153px;
	height:123px;
	background-position:-5px 0;
}

#copyright{text-align:center;text-indent:0;color:#000;font-weight:bold;font-size:85%}

/*
* POPUP
*/
#popupMask{
	position:absolute;
	width:100%;
	height:300%;
	background:#000;
	z-index:500;
	opacity:.75;
	filter:alpha(opacity=75);
	display:none;
	overflow:hidden;
}
#regpopUp{
	font-size:140%;
	text-align:center;
	display:none;
	position:absolute;left:50%;top:40%;
	width:500px;
	padding:20px 20px;
	margin-left:-250px;
	z-index:501;
	text-align:center;
	background:#000;
	border-radius:10px;
}

input[type="button"]{
	border-radius:5px;
	margin:20px 0 0;
	cursor:pointer;
}