#canvas {
	position: relative;
	width: 600px;
	height: 400px;
}

.face {
	position: absolute;
	display: table;
	border-collapse: collapse;
}

.facelet-row {
	display: table-row;
}

.facelet {
	background: #faa;
	display: table-cell;
	border: 1px solid #000;
	width: 20px;
	height: 20px;
}
.arrow {
	position: absolute;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background: center / cover no-repeat;
}

.arrow.x {
	background-image: url(x.png);
	
}
.arrow.x\' {
	background-image: url('x\'.png');
}
.arrow.y {
	background-image: url(y.png);
}
.arrow.y\' {
	background-image: url('y\'.png');
}

.arrow.z {
	background-image: url(z.png);
}
.arrow.z\' {
	background-image: url('z\'.png');
}
.facelet.center {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
}


.view-1st .U {left: 100px; top: 30px;}
.view-1st .L {left: 30px; top: 100px;}
.view-1st .F {left: 100px; top: 100px;}
.view-1st .R {left: 170px; top: 100px;}
.view-1st .B {left: 240px; top: 100px;}
.view-1st .D {left: 100px; top: 170px;}
.view-1st .arrow.x {
	top: 0; left: 120px;
}
.view-1st .arrow.x\' {
	top: 240px; left: 120px;
}
.view-1st .arrow.y {
	top: 120px; left: 0;
}
.view-1st .arrow.y\' {
	top: 120px; left: 310px;
}
.view-1st .arrow.z {
	top: 70px; left: 70px;
}
.view-1st .arrow.z\' {
	top: 170px; left: 170px;
}

.view-2nd .U {
	transform: skewX(45deg) scaleY(.6);
	left: 81px;
	top: 50px;
}
.view-2nd .L {
	left: 50px;
    top: 81px;
	transform: skewY(45deg) scaleX(.6);
}
.view-2nd .F {
	left: 100px; top: 100px;
}
.view-2nd .R {
	left: 190px; top: 119px;
	transform: skewY(-45deg) scaleX(.6);
}
.view-2nd .B {
	left: 240px; top: 100px;
}
.view-2nd .D {
	left: 222px; top: 150px;
	transform: skewX(-45deg) scaleY(-.6);
}

.view-2nd.backside-no .R,
.view-2nd.backside-no .B,
.view-2nd.backside-no .D {
	display: none;
}
.view-2nd .B {
	left: 240px; top: 100px;
}
.view-2nd .D {
	left: 222px; top: 150px;
	transform: skewX(-45deg) scaleY(-.6);
}
.view-2nd .arrow.x {
	top: 0; left: 120px;
}
.view-2nd .arrow.x\' {
	top: 240px; left: 120px;
}
.view-2nd .arrow.y {
	top: 120px; left: 0;
}
.view-2nd .arrow.y\' {
	top: 120px; left: 310px;
}
.view-2nd .arrow.z {
	top: 70px; left: 70px;
}
.view-2nd .arrow.z\' {
	top: 170px; left: 170px;
}

#history {
	list-style: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#history li {
	float: left;
	padding-right: .6em;
}
#history li .link {
	content: "→";
	margin-right: .6em;
}