Why not just put the shadows on the .box element rather than the .pseudo box like this:
.box {
position: absolute;
top: 130px;
left: 0;
right: 0;
min-width: 850px;
bottom: 54px;
overflow: hidden;
background: white url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;
border-bottom: solid thin #aaaaaa;
font-size: 16px;
line-height: 150%;
text-align: left;
z-index: 10;
background: white;
}
.pseudo-box{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbcbcb), color-stop(100%,#bfbfbf));
/*background: url(/u/me/workspace/test2/webdesign/ribbon-horiz.png) top left no-repeat;*/
border-radius: 6px;
padding: 10px;
position: absolute;
left: 20px;
right: 20px;
top: 40px;
bottom: 20px;
min-width: 650px;
padding: 0 10px 0 0;
border-top: thin solid #aaa;
border-bottom: thin solid #aaa;
border-left: thin solid #aaa;
border-right: thin solid #aaa;
border-radius: 4px;
}
.box:before,
.box:after {
content:"";
display: block;
position:absolute;
background:#444;
z-index: 0;
bottom: 30px;
left:40px;
width:50%;
height:50%;
max-width:300px;
-webkit-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
box-shadow:0 10px 5px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
background-image: none;
}
.box:after {
right:40px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}