* {
	margin: 0;
	padding: 0;
}
body {
	font: 18px Verdana;
	color: #FFF;
	background: #FFF;
}
#picbox {
	margin: 0px auto;
	width: 840px;
}
#boxcard {
	z-index: 1;
	margin: 10px 0 0;
}
#boxcard div{
/*	float: left;
	width: 100px;
	height: 150px;*/
/*	margin: 5px;
	padding: 5px;*/
/*	border: 4px solid #EE872A;*/
/*	cursor: pointer;
	border-radius: 10px;*/
/*	box-shadow: 0 1px 5px rgba(0,0,0,.5);*/
/*  background: #B1B1B1;*/
/*	z-index: 2;
	border: 1px solid red;*/
}
#boxcard div img {
/*	display: none;*/
	border-radius: 10px;
	z-index: 3;
}
#boxbuttons {
	text-align: center;
	margin: 20px;
	display: block;
}
#boxbuttons .button {
	text-transform: uppercase;
	background: #EE872A;
	padding: 5px 10px;
	margin: 5px;
	border-radius: 10px;
	cursor: pointer;
}
#boxbuttons .button:hover {
	background: #999;
}

/* face generique */
.card .front {
	color: #BBBBBB;
	text-align: center;
	line-height: 150px;
	font-size: 100px;
	
}

/* face image */
.card .back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-ms-transform: scale(0,1.1);
}

.card .front:hover {
	border: 3px solid red;
}

.card .back img {
	-webkit-user-drag: none;
}

.card .back img.item1 {
	position:absolute;
	clip:rect(auto, 50px, auto, auto);
	margin-left: 50px;
}

.card .back img.item2 {
        position:absolute;
        clip:rect(auto, auto, auto, 50px);
        margin-left: -50px;
}

.card.h5p-flipped {
	cursor: auto;
}

.card.h5p-flipped .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-ms-transform: scale(1,1);
}

.card.h5p-flipped .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-ms-transform: scale(0,1.1);
}

.card,
.card .back,
.card .front {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius: 10px;
}

.card {
	float: left !important;
	position: relative;
	width: 100px;
        height: 150px;
	cursor: pointer;
	margin: 10px;
}

.card .back,
.card .front {
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow: 0 1px 5px rgba(0,0,0,.5);
	width: 100px;
	height: 150px;
	border-radius: 10px;
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	transition: transform 0.6s;
	border: 3px solid white;
}