Cannot remove CSS style from element - css

Question

I'm having trouble removing a shadow being applied to an element.
HTML of element in question
<form class="block" method="post" action="poll.php?do=pollvote&pollid=80">
I've already changed the form class to something else.
CSS of questionable shadow
#sidebar_container .block {
border: 1px solid #BFBFBF;
box-shadow: 0 0 4px 0 #888888;
padding: 6px;
Now the issue with this is, the way Vbulletin has everything worked out is that the same style applies to a ton of elements.. So simply changing it ruins quite a bit of other customizations.
I dont understand why simply changing the "form class" is not working... Checking in firebug, it still holds the regular form class regardless of what changes I make in the template.
For reference: http://www.eldersreach.com/forum.php?styleid=90
It is the Inner box shadow on the "Poll" element in the right corner of the container

Answer 1

This CSS
#sidebar_container .block {
padding: 6px;
border: 1px solid #bfbfbf;
box-shadow: 0px 0 4px 0 #888;
}
is applied to the <div class="block smaller">...</div> container. Not the <form class="block"...</form> element.
If you want to remove the box-shadow property from the container you need to put box-shadow: none; in the #sidebar_container .block {...} style definition block. Off course this will remove the box-shadow from all the <div>s with the class .block.
My suggestion would be:
Add one more class, e.g. <div class="block smaller noshadow">...</div> to the element of choice
Define one more CSS property after #sidebar_container .block {...} in your stylesheet, e.g.
#sidebar_container .block {...}
#sidebar_container .noshadow {
box-shadow: none;
}
That should do the job.