There I was, ready to apply some fun CSS3-ness in a DNN7 project with a fancy Bootstrap-based responsive skin, when BAM...nothing. I checked my drop shadow code: set my container to position:relative...Check. Added my :before and :after psuedo-classes, taking advantage of the mighty useful skew transform property (great article on the whole process here)...Check. But still, no reaction from my element on screen. Then I noticed, once going into Edit view mode, that the CSS3 drop shadow was indeed working, though only when I wasn't moused over the containing div. Something was afoot. And I figured, based on the behavior I was seeing, that the DNN out-of-the-box stylesheets must be conflicting with our Bootstrap-based responsive skin. So I took to browser web developer tools to start experimenting with DNN stylesheets associated with administrator roles, since that is where I was seeing the behavior I wanted to show on screen. After some digging, I found the culprit, and it was hiding in Root Folder/Portals/_default/admin.css. Lurking there in admin.css was a z-index declaration that was commented out. I activated that declaration by removing the comment indicators around it. But that change would only be visible by site admins, so I tried adding the same style declaration to my user-facing stylesheet...and voilà. If you're working with a Bootstrap-based skin in DNN7 and seeing the same problem, here's the quick fix list to get your styles working how you expect them to: 1. Open the admin.css stylesheet located at Root Folder/Portals/_default/admin.css 2. Find the .DnnModule selector and uncomment the z-index:902 declaration 3. Then, add the .DnnModule {z-index:902;} style declaration to you user-facing stylesheet (since only admins will see the results of the admin.css stylesheet) 4. Sit back and enjoy the image-less depth effects provided by the wonderfully useful CSS3 drop shadows