Page Curl Shadows

.page-curl {
	position: relative;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
}
 
.page-curl:after {
	z-index: -1;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	right: 10px;
	bottom: 10px;
	-webkit-transform: skew(15deg) rotate(5deg);
	-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
	-moz-transform: skew(15deg) rotate(5deg);
	-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); 
}
 
.page-curl:before {
	z-index: -2;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	left: 10px;
	bottom: 10px;
	-webkit-transform: skew(-15deg) rotate(-5deg);
	-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
	-moz-transform: skew(-15deg) rotate(-5deg);
	-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); 
}
 
/* Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up. */