/* 
Cube Experiment
Date: 26th March 2009
Author: Paul Hayes
*/

.cube {
	position: relative;
	top: 200px;	
}

.rightFace,
.leftFace,
.topFace div {
	padding: 10px;
	width: 180px;
	height: 180px;
}

.rightFace,
.leftFace,
.topFace {
	position: absolute;
}
 
.leftFace {
	-webkit-transform: skew(0deg, 30deg);
	-moz-transform: skew(0deg, 30deg);
	background-color: #ccc;
}

.rightFace {
	-webkit-transform: skew(0deg, -30deg);
	-moz-transform: skew(0deg, -30deg);
	background-color: #ddd;
	left: 200px;
}

.topFace div {	
	-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
	-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
	background-color: #eee;
	font-size: 0.862em;
}

.topFace {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	top: -158px;
	left: 100px;	
}

/* Optional WebKit Animations */
/*

.rightFace {
	-webkit-transition: -webkit-transform 1s linear;
}

.leftFace {
	-webkit-transition: -webkit-transform 1s linear;	
}

.topFace {
	-webkit-transition: -webkit-transform 1s linear;
}

.cube:hover .rightFace {
	-webkit-transform: skew(0deg, -30deg) translate(100px, 100px);
}

.cube:hover .leftFace {
	-webkit-transform: skew(0deg, 30deg) translate(-100px, 100px);
}

.cube:hover .topFace {
	-webkit-transform: rotate(60deg) translate(-50px, -50px);
}

/* Video */
.cube video {
	left: -20px;
	top: -20px;
	position: relative;
}

.cube div.rightFace video {
	left: -301px;
	top: -35px;
	opacity: 0.9;
}

.cube div.leftFace video {
	opacity: 0.7;
	top: -35px;
	left: -100px;
}

.cube div.rightFace,
.cube div.leftFace {
	overflow: hidden;
}

.cube div.topFace.video div {
	background-color: #000;
	color: #fff;
}