@charset "UTF-8";

#logo { margin: 150px auto 60px auto; display: block; height: 100px; }

#container {
	width: 330px; height: 250px; margin: 0 auto; z-index: 1;
	-moz-perspective: 800px; -webkit-perspective: 800px; perspective: 800px;
}
#container.flipped { height: 300px; }

#container h1 {
	font: bold 20px sans-serif; color: #2d932b; padding: 0 0 13px 0;
}

#container div {
	width: 300px; position: absolute; top: 0; left: 0;
	background: #f9f9f9; padding: 15px 15px 8px 15px; border:1px solid #d5d5d5;
	display: block; margin: 0 auto;
	-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
	box-shadow:0 0 2px #dadada, inset 0 -1px 0 #e6e6e6;
	
	/* Enabling 3d space for the transforms */
	-moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	/* When the forms are flipped, they will be hidden */
	-moz-backface-visibility: hidden; -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/* Enabling a smooth animated transition */
	-moz-transition:0.8s; -webkit-transition:0.8s; transition:0.8s;
}

#login { z-index:100; }

#register {
	z-index:1; opacity: 0;
	-moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

#container.flipped #login {
	opacity: 0;
	-moz-transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

#container.flipped #register{
	opacity: 1;
	-moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

#container input[type=text], #container input[type=password] {
	font: normal 16px Sans-Serif; height: 36px; line-height: 36px; width: 100%;
	text-indent: 8px; margin-bottom: 10px; color: #111;
}

#login_submit, #register_submit {
	width: 101%; height: 38px; line-height: 38px;
	margin-bottom: 8px; 
    cursor: pointer;
    font: bold 16px sans-serif; color: white;
    text-align: center;
	background: linear-gradient(#34a5cf, #2a8ac4);
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border: 1px solid #2b8bc7; border-radius: 3px;
    text-shadow: 0 -1px rgba(0,0,0,0.3); text-decoration: none;
}

#flash {
	position: absolute; left: 50%; transform: translate(-50%, 0);
	max-width: 400px; border-radius: 4px;
	background-color: #faa; border: 2px solid #f66; color: #a22;
	z-index: 120; padding: 3px 8px 3px 8px; visibility: hidden; opacity: 0;
	transition: opacity 0.5s, visibility 0 0.5s;
}
#flash.active { visibility: visible; opacity: 1; transition: opacity 0.5s, visibility 0;}

#recent_users { margin: 50px auto 0 auto; color: black; }
#recent_users h1 { font: normal 20px sans-serif; text-align: center; }
#recent_users ul { margin: 4px 0 0 0; list-style: none; }
#recent_users li { text-align: center; color: #7a96cd; cursor: pointer; }