Shadows without images like a css3 freak

dabblet.css

/**
 * Shadows without images like a css3 freak
 */
body {
	margin: 0;
	padding: 0;
	background: #EEE;
	color: #222;
	font-family: Verdana;
}

a:link, a:visited {
	color: #2E5978;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

header {
	width: 700px;
	margin: 50px auto 10px;
	border: 4px solid #FFF;
	padding: 10px;
	background: #FCFCFC;
	height: 80px;
	position: relative;
	line-height: 80px;
	text-align: center;
}

header:before, header:after {
	position: absolute;
	width: 50%;
	height: 50%;
	z-index: -1;
	bottom: 20px;	
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
	content: '';
	right: 30px;
	left: auto;
	transform: skew(15deg) rotate(6deg);	
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	background: transparent;	
}

header:before {
	left: 30px;
	right: auto;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
}

/**
 * Links
 */
 h2 {
 	padding: 0;
 	margin: 0;
 	color: #2DA6FC;

 }
 
h2 a:link {
	text-decoration: none;
	margin: 0 0 0 37px;
	color: #2DA6FC;

}

h2 a:hover {
	text-decoration: none;
	margin: 0;
}

h2 a:hover:before {
	content: "Pen";
}


h2 a:hover:after {
	content: "\bb";
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 0 5px;
}

/**
 * sections
 */
 section.small {
 	width: 700px;
 	margin: 4px auto 10px;
 	padding: 10px;
	font-size: 13px;
	text-align: center;
 }
 
 #main {
 	position: relative;
 	width: 700px;
 	height: 300px;
 	padding: 10px;
 	margin: auto;
 	background: #FDFDFD;
 	box-shadow:0 0 20px #FFF inset;

 }
 
 #main:before, 
 #main:after {
        content: "";
        position: absolute; 
        z-index: -2;
        width: 90%;
 }
 
#main:before {
	top: 0;
        bottom:0;
        left: 30px;
        right: 10px;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
        -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
        -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
	box-shadow: 0 0 15px rgba(0,0,0,0.6);

}
 
 /**
  * Footer
  */
  footer {
  	width: 700px;
  	margin: 40px auto 0;
  	padding: 10px;
  	box-shadow: 0px -10px 10px -10px rgba(200, 200, 200, 0.8); 
	font-size: 13px;
  }
 

dabblet.html

<header>
	<h2><a href="http://penis.hat.keinehobbi.es" title="hihi :DD">is</a></h2>
</header>

<section class="small">
i like cake, music and trains and my <a href="http://pascalweiland.com/">homepage</a> and dabblet
</section>

<section id="main">
	i want to avoid a lorem ipsum dolor text.
	<br>
	Really :D
</section>

<footer>
	my shoes are in the footer, because they are dirty. My Mum would go crazy if i took them into the living room.
</footer>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}