CSS box-shadow overlapping navbar

CSS box-shadow overlapping navbar

http://jsfiddle.net/CVFvb/
The right edge of the HANDY DANDY LOGO AREA has a box shadow that overlaps
the navbar section. I would like it to not overlap.
(NOTE: The sharpness of the box-shadow is purely for the purposes of this
example. I have it nice and fuzzy in the actual page)
I've tried:
Changing z-index (which puts the whole logobox behind the navbar)
Putting the logobox inside the navbar div (which only messes up the
positioning of the logobox, which is fixable, but doesn't solve the
dropshadow overlap)
Thanks for any help you can provide.
HTML:
<div id="logobox">HANDY DANDY LOGO AREA</div>
<div id="navbar">
<span class="navbarspan"><a class="tab navbaritem active"
pagetoshow="content_home" href="javascript:void(0);">Home</a></span>
<span class="navbarspan"><a class="tab navbaritem"
pagetoshow="content_services" id="servicesanchor"
href="javascript:void(0)">Section 1</a>
</span>
<span class="navbarspan"><a class="tab navbaritem"
pagetoshow="content_examples" id="examplesanchor"
href="javascript:void(0);">Section 2</a>
</span>
<span class="navbarspan right"><a class="tab navbaritem"
pagetoshow="content_contact" href="javascript:void(0);">Contact
Us</a></span>
</div>
CSS:
#logobox {
background: white;
border: 1px solid #486EAC;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
float: left;
margin: 10px;
padding: 5px 10px 10px 10px;
position: relative;
top: -10px;
box-shadow: 5px 5px 10px #CCCCCC;
-webkit-box-shadow: 5px 5px 0px #CCCCCC;
-moz-box-shadow: 5px 5px 0px #CCCCCC;
}
#navbar {
background: #486EAC;
padding: 3px;
box-shadow: 2px 2px 10px #CCCCCC;
-webkit-box-shadow: 5px 5px 0px #CCCCCC;
-moz-box-shadow: 5px 5px 0px #CCCCCC;
}
.navbarspan {
padding: 0px 3px;
}
.navbarspan a:hover {
background-color: #F3D13A;
color: black;
border: none;
}
.navbaritem {
font-weight: bold;
color: white;
text-align: center;
padding: 3px 6px;
text-decoration: none;
}
.right {
float: right;
}