/* these are not necessary */

html {
    background-color:white;
    font-family: Helvetica, Arial;
    font-size:16px;
    overflow:hidden;
}

/* i thought this wasn't needed anymore? */
body {
    margin:0;
}

#container {
	background-color:white;
	margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.face {
    position:absolute;
    width:200px;
    height:200px;
    padding:40px;
    border:1px solid white;
}

.box {
    float:left;
    width:90px;
    height:90px;
    padding:2px;
    overflow:hidden;
    font-size:8px;
    margin:3px;
}

.box:first-letter {
    font-size : 292%;
    float : left;
    margin-right:3px;
    color : #c00;
}

.cover:hover, .box:hover {
	 cursor:pointer;
}
 
#f1 .box {
    background-color:#bbb;
}

#f2 .box {
    background-color:#eee;
}

#f3 .box {
    background-color:#fff;
}

#cube {
    position:relative;
    left:50%;
    top:50%;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}

#f1 {
    -webkit-transform: skew(-30deg,0deg) scale(1.0,0.864);
    -moz-transform: skew(-30deg,0deg) scale(1.0,0.864);
    background-color:#999;
}

#f2 {
    -webkit-transform: rotate(120deg) skew(-30deg,0deg) scale(1.0,0.864);
    -moz-transform: rotate(120deg) skew(-30deg,0deg) scale(1.0,0.864);
    background-color:#ccc;
}

#f3 {
    -webkit-transform: rotate(240deg) skew(-30deg,0deg) scale(1.0,0.864);
    -moz-transform: rotate(240deg) skew(-30deg,0deg) scale(1.0,0.864);
    background-color:#eee;
}

.cover {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:+1;
}

.facecontent {
    position:absolute;
    width:200px;
    height:200px;
    padding:40px;
    left:0;
    top:0;
    z-index:-1;
}