#CSS: CSS only visual rich section division

dabblet.css

/**
 * CSS only visual rich section division
 */
body {
	background-color: #264e86;
	color: #fff;
	font-size: 2em;
}
#main {
	width: 90%;
	margin: 3em auto 0;
}
#main section {
	width: 90%;
	margin: 0 auto 50px;
	position: relative;
}
#main section:after { 
	content: " "; 
	display: block; 
	height: 30px; 
	-webkit-border-radius: 0 0 10px 10px; 
	   -moz-border-radius: 0 0 10px 10px; 
	     -o-border-radius: 0 0 10px 10px; 
	 -khtml-border-radius: 0 0 10px 10px; 
		border-radius: 0 0 10px 10px; 
	background: #264e86;
	background: linear-gradient(top, #264e86, #1d3a64); 
	margin-left: -33px; 
	margin-right: -33px; 
	margin-top: 2px; 
}

dabblet.html

<div id="main" role="main" class="row">
	<section>
		... Section 1 ...
	</section>
	<section>
		... Section 2 ...
	</section>
</div>

settings.json

{"page":"css","view":"split-vertical"}