.cube {
	width:  100%;
	height: 100%;
}

.cube .sticker.blue:before{
    content:'';
    font-size:8px;
	color: rgb(0, 0, 0);
}

@font-face {

	font-family: "RubikExtended";
	src:
		url( "../media/RubikExtended.ttf"  ) format( "truetype" ),
		url( "../media/RubikExtended.otf"  ) format( "otf" );
	font-weight: normal;
	font-style: normal;
}

.faceLabel {

	display: none;
	position: absolute;
	font-size: 60px;
	text-align: center;
	font-family: "RubikExtended";
	text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3 );
	color: #FFF;
}

.cube .cubelet {

	width:  1em;
	height: 1em;
	position: absolute;
	box-sizing: border-box;
}

.cube /*.cubelet >*/ .face {

	position: absolute;
	width:  1em;
	height: 1em;
	background-color: #000;
	text-align: center;

	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility:    hidden;
  	-o-backface-visibility:      hidden;
  	backface-visibility:         hidden;

  	padding: 0.05em;
  	-moz-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	-o-box-sizing: border-box;
  	-ms-box-sizing: border-box;
	box-sizing: border-box;

}


.cube /*.cubelet >*/ .face.faceIntroverted { background-color: #000; }


.cube /*.cubelet >*/ .face.faceTransparent { background-color: transparent; }


.purty .face { opacity: 0.5; }
.purty .face.faceFront { background-color: #FFF; }
.purty .face.faceUp    { background-color: #E87000; }
.purty .face.faceRight { background-color: #3D81F6; }
.purty .face.faceDown  { background-color: #DC422F; }
.purty .face.faceLeft  { background-color: #009D54; }
.purty .face.faceBack  { background-color: #F5B400; }


.cube /*.cubelet > */.face > .wireframe {
	display: none;
	position: absolute;
	width:  140px;
	height: 140px;
	background-color: rgba( 255, 255, 255, 0.05 );
}


.cube .sticker {
	width:  100%;
	height: 100%;
	background-color: #F0F;
	border-radius: 0.1em;
	text-align: center;

}


.cube .sticker.red 		{ background: #DC422F;	}
.cube .sticker.white 	{ background: #F3F3F3;	}
.cube .sticker.blue 	{ background: #3D81F6; font-size: 64px;}
.cube .sticker.green 	{ background: #009D54;	}
.cube .sticker.orange 	{ background: #E87000; }
.cube .sticker.yellow 	{ background: #F5B400; }


.cube /*.cubelet >*/ .face > .id {
	display: none;
	position: absolute;
	z-index: 1000;
	width:  90%;
	height: 90%;
	font-size:   1em;
	line-height: 0.9em;
	text-align: center;
	color: #000;

}
.cube /*.cubelet >*/ .face > .id > .underline {

	border-bottom: 1px solid #000;
}

.cube /*.cubelet > */.face.faceIntroverted > .id {

	color: #FEFEFE;
}
.cube /*.cubelet >*/ .face.faceIntroverted > .id > .underline {

	border-bottom: 1px solid #FEFEFE;
}


.cube /*.cubelet >*/ .face > .text {
	display: none;
	position: absolute;
	z-index: 2000;
	width:  100%;
	height: 100%;
	text-align: center;
	color: #FFF;
	font-family: "RubikExtended", sans-serif;
	font-size:   1em;
	line-height: 1em;
}