html,body {
	height:100%;

}
body {
	font: 100%/1.5 Arial;
	margin: 0;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}
header, footer, aside {
	position: absolute;
	z-index: 1;
	background: rgba(30, 30, 30, .65);
	padding: 0.75em;
	color: #fff;
}
aside {
	left: 20px;
	top: 100px;
	width: 200px;
	color: #ccc;
	border-radius: 5px;
}
header {
	top: 0;
	width: 100%;
	text-align: center;
}
footer {
	bottom: 0;
	width: 100%;
	text-align: center;
}
h1 {
	font-size: 150%;
	margin: 0;
}
p {
	margin: 0;
}
p + p {
	margin-top: 1.5em;
}
a {
	color: #fc0;
}

td {
  vertical-align: top;
}

kbd {
	font-family: inherit;
	font-size: 70%;
	display:inline-block;
	background:#eee;
	border:1px solid #aaa;
	border-bottom-width:4px;
	border-radius:3px;
	padding:0.1em 0.25em;
	color: #333;
	vertical-align: middle;
}
.credit {
	font-size:80%;
	font-style: italic;
}

        .vertex, .face, .assembly, .vertexHover {
            position: absolute;
            top: 50%; /*50% */
            left: 35%; /*50% */
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .face {
            background-color: rgba(79, 186, 188, 0.5);
						border-style: solid;
						border-width: 2px;
						border-color: #ffffff;
        }
        .vertex {
            width: 50px;
            height: 50px;
            margin: -4px;
            background: rgba(255, 0, 0, 0.0);
            border-radius: 7px;
            color: #333;
            font: 20px / 1 "Arial", monospace;
            text-indent: 14px;
            white-space: nowrap;
        }
				.vertexHover {
						width: 50px;
						height: 50px;
						margin: -4px;
						background: rgba(255, 0, 0, 0.0);
						border-radius: 7px;
						color: rgba(255, 128, 0, 1.0);
						font: 40px / 1 "Arial", monospace;
						font-weight:bold;
						text-indent: 14px;
						white-space: nowrap;
				}

				.toast {
					width:500px; /*700px*/
					height:110px;
					margin-top:5%; /* 35% */
					/* margin-left: 37%; */
					padding-left: 10px;
					padding-right: 10px;
					padding-bottom: 10px;
					padding-top: 20px;
					text-align: left;
					font: 20px / 1 "Trebuchet MS", monospace;
					background: rgba(255, 128, 0, 0.5);
					border-radius: 20px;
					/* display: inline-block; */
				}

        #scene {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-perspective: 400px;
            -moz-perspective: 400px;
            -ms-perspective: 400px;
            perspective: 400px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .cube {
            -webkit-animation: spin 20s linear infinite;
            -moz-animation: spin 20s linear infinite;
            -ms-animation: spin 20s linear infinite;
            animation: spin 20s linear infinite;
        }
        .cube .face {
            width: 200px;
            height: 200px;
            margin: -100px;
        }
        .cube .face:nth-child(1) {
            -webkit-transform: translateZ(100px);
            -moz-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            transform: translateZ(100px);
        }
        .cube .face:nth-child(2) {
            -webkit-transform: translateZ(-100px) rotateY(180deg);
            -moz-transform: translateZ(-100px) rotateY(180deg);
            -ms-transform: translateZ(-100px) rotateY(180deg);
            transform: translateZ(-100px) rotateY(180deg);
        }
        .cube .face:nth-child(3) {
            -webkit-transform: translateX(-100px) rotateY(-90deg);
            -moz-transform: translateX(-100px) rotateY(-90deg);
            -ms-transform: translateX(-100px) rotateY(-90deg);
            transform: translateX(-100px) rotateY(-90deg);
        }
        .cube .face:nth-child(4) {
            -webkit-transform: translateX(100px) rotateY(90deg);
            -moz-transform: translateX(100px) rotateY(90deg);
            -ms-transform: translateX(100px) rotateY(90deg);
            transform: translateX(100px) rotateY(90deg);
        }
        .cube .face:nth-child(5) {
            -webkit-transform: translateY(100px) rotateX(-90deg);
            -moz-transform: translateY(100px) rotateX(-90deg);
            -ms-transform: translateY(100px) rotateX(-90deg);
            transform: translateY(100px) rotateX(-90deg);
        }
        .cube .face:nth-child(6) {
            -webkit-transform: translateY(-100px) rotateX(90deg);
            -moz-transform: translateY(-100px) rotateX(90deg);
            -ms-transform: translateY(-100px) rotateX(90deg);
            transform: translateY(-100px) rotateX(90deg);
        }
        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
            }
        }
        @-moz-keyframes spin {
            to {
                -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
            }
        }
        @keyframes spin {
            to {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
            }
        }