content-box shadows part I

dabblet.css

/**
 * content-box shadows part I
 */
 body {
 	background-color: #666; }
 
.container {
	width: 80%; height: 800px;
	border-radius: 50px;
	overflow: hidden;
	margin: 0 auto; }

.left, .right {
	width: 50%; height: 100%; }

.left { float: left; z-index: 2; background: #eee; }
.right { float: right; z-index: 1; background: #cceeee; }

.left { box-shadow: 10px 0 30px 0px rgba(128,128,128,0.5); }

@media only all and (max-width: 600px) {
	.left, .right {
		float: none;
		width: 100%; height: 50%; }
}

dabblet.html

<div class="container">
	<div class="right"></div>
	<div class="left"></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}