html,body{
background: #222;
}
#container{
	position:relative;
    width: 320px;
    height: 460px;
    
}

footer {
	display:none;
}

#gen {
	display:none;
}

#result {
	position:absolute;
	float:left;
	width:100%;
	top:0;
	left:0;
	display:none;
	bottom:0;
	right:0;
	font-size:130px;
	text-align:center;
	text-transform:capitalize;
	z-index:9999;
	background: rgba(2,2,2,.5);
	color:#E8E4DC;
	line-height: 460px;
}


.entity {
	float:left;
	margin: 0 .5em;
}

.entity ul {
	width:100%;
	float:left;
}

.panel {
	float:left;
	margin:0 26px 26px 0;
	width:18px;
	height:18px;
	position:relative;
	-webkit-perspective:700;
}

.panel .ai {
	float:left;
	width:30%x;
	height:30%;
	padding:14px;
	background:#666;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	color:#222;
}

.panel.yes .back {
	background:#1DB8AC;
	color:#E8E4DC;
	}

.panel.no .back {
	background: #333;
	color:#1DB8AC;
	
}

#oracle {
	display:none;
}

.panel .front {
	float:none;
	position:absolute;
	top:0;
	left:0;
	z-index:900;

	
/*width:inherit;
	height:inherit;*/
	text-align:center;
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;

	
/* -- transition is the magic sauce for animation -- */
	transition:all .6s ease-in-out;
	-moz-transition:all .6s ease-in-out;
	-webkit-transition:all .6s ease-in-out;
}

.panel.flip .front {
	z-index:900;
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
}

.panel .back {
	float:none;
	position:absolute;
	top:0;
	left:0;
	z-index:800;

	
/*width:inherit;
	height:inherit;*/
	-webkit-transform:rotateY(-180deg);
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;

	
/* -- transition is the magic sauce for animation -- */
	transition:all .6s ease-in-out;
	-moz-transition:all .6s ease-in-out;
	-webkit-transition:all .6s ease-in-out;
}

.panel.flip .back {
	z-index:1000;
	-webkit-transform:rotateY(0deg);
}