body:before
{
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
body{
	margin: 0;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size:12px;
	color:#686868;
}
#outer {
	position: relative;
	/*top: 50%;*/
	left: 0px;
	width: 100%;
	overflow: visible;
}
#inner {
	width: 980px;
	/*height: 200px;*/
	margin-left: -490px;  /***  width / 2   ***/
	position: relative;
	/*top: -100px;          /***  height / 2   ***/
	left: 50%;
	/*-webkit-box-shadow: 2px 0px 3px 0px rgba(000, 000, 000, .5);
	box-shadow: 2px 0px 3px 0px rgba(000, 000, 000, .5);*/
}

/* 3D BOX SHADOW SECTION */
.box {
	position: relative;
	width: 60%;
	background: #ddd;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 2em 1.5em;
	color: rgba(0,0,0, .8);
	text-shadow: 0 1px 0 #fff;
	line-height: 1.5;
	/*margin: 60px auto; /* USE TO SET SURROUNDING MARGIN AND SET TO CENTRE ALIGNED */
	margin: 20px 0 20px 50px; /* USE TO SET SURROUNDING MARGIN */
}
.box:before{ 
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width:300px;
	background: rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.box:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}