﻿body
{
	font-family: 'Segoe UI' , sans-serif;
	color: black;
	font-size: 16px;
	height: 100%;
	background: black;
}
div
{
	-webkit-backface-visibility: visible;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: 
		rotateX(0deg) rotateY(0deg) rotateZ(0deg)
		translate3d(0px, 0px, 0px) 
		;	
}

.page
{
	-webkit-backface-visibility: visible;
	position: absolute;
	top: 100px;
	left:490px;
	width:400px;
	height: 300px;
}

.pageleft
{
	background: yellow;
	left:90px;
	-webkit-transform-origin: 100% 50%;
}
.pageright
{
	background: green;
	-webkit-transform-origin: 0% 50%;
	
}
#page1{
	z-index: 30;
	-webkit-transform: 
		rotateX(0deg) rotateY(-45deg) rotateZ(0deg)
		translate3d(0px, 3px, 0px) 
		;
}
#page2{
	z-index: 29;
	-webkit-transform: 
		rotateX(0deg) rotateY(135deg) rotateZ(0deg)
		translate3d(0px, 2px, 0px) 
		;
}
#page3{
	z-index: 28;
		-webkit-transform: 
		rotateX(0deg) rotateY(0deg) rotateZ(0deg)
		translate3d(0px, 1px, 0px) 
		;
}
#stage
{
	position: absolute;
	top: 50px;
	left: 600px;
	width: 960px;
	height: 600px;
	background: white;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: visible;
	-webkit-transform-origin: 50% 50%;

}
#wrapper
{
	background: black;
	width: 960px;
	height: 800px;

}

.stageAnim1
{

}

/*buttons */
.butt {
	color: #fff;
	background: #a3abae;
	background-image: -webkit-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	text-shadow: 0 1px 1px rgba(0,0,0,.1);
	padding: .4em .75em .5em;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
	margin: .5em .25em;
	line-height: 1.5em;
	display: inline-block;
	cursor: pointer;
}

.butt:hover {
	color: #fff;
}


