/* CSS Document */

/* --------------- DOCUMENTS -------------- */
body, html {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:url(../img/background.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Roboto Condensed', sans-serif;
}


.container {
	position:relative;
	width:100%;
	margin:150px auto 0;
	min-height:200px;
}

input {
	border:#879da9 solid 1px;
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:8px 5px;
	color:#305162;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:14px;
}

button {
	background:#879da9;
	border:none;
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:8px 5px;
	font-size:14px;
	color:#FFFFFF;
}
	

/* --------------- LOGO -------------- */
#logo {
	width:550px;
	height:120px;
	position:absolute;
	top:30px;
	left:50%;
	margin-left:-450px;
}

#logo img {
	position:absolute;
}
#logo1 {
	z-index:10;
}
#logoShadow {
	top:50px;
	z-index:1;
}


#logo.initLogo {
	top:50%;
	margin-top:-50px;
	margin-left:-225px;
	opacity:0;
}
#logo.initLogo #logoShadow {
	width:800px;
	height:250px;
	opacity:0.4;
	margin-left:-100px;
}


/* --------------- SCORE / MESSAGE -------------- */

#message {
	width:140px;
	height:100px;
	position:absolute;
	top:-200px;
	left:50%;
	margin-left:300px;
}
#message #content {	
	padding:25px 0 0 0;
	color:#FFFFFF;
	font-size:13px;
	text-align:center;
	width:140px;
	height:100px;
	background:url(../img/score.png) no-repeat center;
}
#message #content p {
	padding:0;
	margin:0;
	line-height:25px;
}
#scoreShadow, #content {
	position:absolute;
}


/* --------------- TABLEAU WINNER -------------- */

#win {
	position:absolute;
	top:10px;
	left:-50%;
	width: 420px;
	height:566px;
	margin-left:-450px;
	background:#305162;
	border:2px solid #FFFFFF;
  border-radius:10px;
  -o-border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  color:#FFFFFF;
}
#win:after {	
	position:absolute;
	bottom:-30px;
	content:' ';
	display:block;
	width:420px;
	height:20px;
    background:radial-gradient(ellipse at center, rgba(10, 32, 43, 0.3), rgba(10, 32, 43, 0.0) 80%);
}
#win h1 {
	text-align:center;
}
.listingWiner {
	width:90%;
	margin:0 auto;
}
.listingWiner thead {
	color:#879da9;
}
.listingWiner thead th {
	border-bottom:#879da9 solid 2px;
}
.listingWiner tbody td {
	border-bottom:#879da9 solid 1px;
	padding:5px 0;
}
.listingWiner tbody td:nth-child(-n+2) {
	text-align:center;
}

.scrollingTable thead,
.scrollingTable tbody {
	display:block;
}

.scrollingTable tbody {
	overflow:auto;
	height:370px;
}
.scrollingTable th,
.scrollingTable td {
	width:120px;
}

.scrollingTable th:last-child,
.scrollingTable td:last-child {
	width:300px;
}

/* --------------- GAME / CARTES -------------- */

.game {
	clear:both;
	list-style:none;
	margin:0 auto;
	padding:0;
	max-width:900px;
	position:relative;
}

.game:after {
	content:" ";
	display:block;
	clear:both;
	height:0px;
}

.game li {
	position:absolute;
	top:0;
	left:-1000px;
	width: 130px;
	height: 130px;
	padding:10px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
}
.game li:after {	
	position:absolute;
	bottom:-10px;
	content:' ';
	display:block;
	width:120px;
	height:20px;
    background:radial-gradient(ellipse at center, rgba(10, 32, 43, 0.1), rgba(10, 32, 43, 0.0) 80%);
}
.game li:nth-child(-n+6):after { bottom:-460px; }
.game li:nth-child(n+7):nth-child(-n+12):after { bottom:-310px; }
.game li:nth-child(n+13):nth-child(-n+18):after { bottom:-160px; }
.game li:nth-child(n+19):after { bottom:-10px; }

.game li.Ligne1:after { opacity:0.5; bottom:-460px!important; }
.game li.Ligne2:after { opacity:0.5; bottom:-310px!important; }
.game li.Ligne3:after { opacity:0.5; bottom:-160px!important; }
.game li.Ligne4:after { opacity:0.5; bottom:-10px!important; }

.card {
  height: 120px;
  width: 120px;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -ms-transition: -ms-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.card img {
  display: block;
  border-radius:10px;
  -o-border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  height: 120px;
  width: 120px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .back {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -ms-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

.card.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -ms-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}