/* 3D Transformations inside webkit browsers */
	
	/* Some basic styles first of all */
	
	body {
		background:					white;
		margin:						0;
		padding:					0;
		font-family:				helvetica, arial, sans-serif;
		font-size:					62.5%;
	}
	
	#container {
		position:					relative;
		width:						500px;
		margin:						0;
		padding:					0;
		margin:						auto;
		padding-top:				100px;
		-webkit-perspective: 		1600;
     	-webkit-perspective-origin: 50% 250px;
	}
	
	/* The cube */
	
	#cube {
		width:						500px;
		height:						500px;
		position:					relative;
		-webkit-transition: 		-webkit-transform 1.5s; 
		-webkit-transform-style: 	preserve-3d;
	}
	
	/* Faces */
	
	#face1, #face2, #face3 {
		position:					absolute;
		width:						400px;
		height:						400px;
		padding:					50px;
		border:						20px solid white;
		background:					#cdcdcd;
		font-size:					1.3em;
		color:						white;
		line-height:				1.5em;
		-webkit-box-shadow:			0px 0px 10px black;
		-webkit-box-reflect:		below 5px -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(0.8, transparent), to(rgba(255,255,255,0.2)));
	}
	#face1 {
		background:					#cdcdcd url(red.png) no-repeat top left;
		-webkit-transform: 			translateZ(0px) translateX(-270px) rotateY(-90deg);
	}
	#face1content{
		line-height:					1.7em;
		font-size:					1.1em;
	}		
	
	#face2 {
		background:					#cdcdcd url(green.png) no-repeat top left;
		-webkit-transform: 			translateZ(270px);
	}
	#f2top {
		margin-bottom:					40%;
		font-size:					1.1em;
	}		
	#face3 {
		background:					#cdcdcd url(blue.png) no-repeat top left;
		-webkit-transform: 			translateZ(0px) translateX(270px) rotateY(90deg);
	}
	
	.face ul {
		position:					absolute;
		bottom:						0px;
		left:						-30px;
		width:						480px;
	}
	
	.face ul li {
		margin:						0;
		width:						150px;
		height:						50px;
		list-style:					none;
		float:						left;
	}
	
	.face ul li a {
		margin-top:					20px;
		display:					block;
		width:						150px;
		height:						37px;
		position:					absolute;
		bottom:						0px;
		overflow:					hidden;
		text-decoration:			none;
		text-indent:				-10000px;
	}

	
	#face2 ul li:first-child a {
		background:					transparent url(aboutme.png) no-repeat bottom left;
	}
	
	#face2 ul li:last-child {
		float:						right;
	}
	
	#face2 ul li:last-child a {
		background:					transparent url(contact_me.png) no-repeat bottom left;
	}
	
	#face1 ul li {
		float:						right;
	}
	
	#face1 ul li a {
		background:					transparent url(back_home.png) no-repeat bottom left;
	}
	
	#face3 ul li a {
		background:					transparent url(back_home.png) no-repeat bottom left;
	}
	
	.rotateleft {
		-webkit-transform: 			rotateY(90deg);
	}
	
	.rotateright {
		-webkit-transform: 			rotateY(-90deg);
	}
	
	/* General formatting */
	
	label {
		display:					block;
		font-size:					1em;
		margin-bottom:				10px;
	}
	
	label * {
		padding:					5px;
		font-size:					1.2em;
		display:					block;
		width:						380px;
	}
	
	label textarea {
		height:						60px;
	}
	
	h2 {
		font-weight:				normal;
		text-transform:				uppercase;
	}
	
	#face2 h2 {
		margin:						0;
		padding:					0;
		width:						400px;
		height:						60px;
		text-indent:				-10000px;
		overflow:					hidden;
		background:					transparent url(title.png) no-repeat top left;
	}
	
	input[type=submit] {
		float:						right;
		margin-right:				10px;
		background:					#d4be0f;
		-webkit-box-shadow:
			3px 3px 6px rgba(0, 0, 0, .4),
			0px 0px 3px rgba(0, 0, 0, .2),
			inset 0px 15px 2px rgba(234, 221, 175, .8),
			inset 0px 25px 25px #edcf65;
		-webkit-border-radius: 		5px;	
		color:						#333333;	
		padding:					10px 30px 10px 30px;
		border:						1px solid #af8a0c;
	}
	
	.rotateanddrop {
		margin-right:				20px;
		margin-bottom:				20px;
		float:						left;
		-webkit-transform:			rotateZ(-5deg) translateY(10px);
	}