I'm having a problem figuring out how to do something with the box-shadow property. If you go to http://fretfast.com you will notice that on the left most navigation button labeled "Home" that it looks the same as the rest. However, the one on the very right labeled "Account" has a more noticeable shadow protruding from the right side. This is the effect that I want for the outer most buttons, but I want to still keep the same shadow effect on the other side as well.
For instance, the right side of the Account button has a nice looking shadow, but on the left side, where it meets the "Premium Lessons" button, there is almost no shadow at all. I made a work around using nested div's, but that breaks the hover behavior of the buttons unless I want to bloat it up with a bunch of onmouseover calls, which I would really prefer not to do.
Does anyone know a work around to this problem?