CSS - how do I remove/change styles for one image?

Question

Hi,
In my CSS I have the following rule which styles all the images within the 'main_text' div with a border, background colour and padding:
#main_text img{
    border: 1px solid #666;
    padding: 5px;
    background-color: #C0BEB6;
However I have one image on one page where I want to remove this styling and I can't find a way of doing it.
I've tried applying a class to the image I want to change:
.exclaim {
    border-style: none;
    float: left;
    margin-right: 10px;
    padding: 0px;
The .exclaim rule appears after '#main_text img' in the stylesheet.
The float and margin both work but the border and padding are retained from the other selector.
I know I could just have 2 classes and apply them as necessary but eventually I am likely to have quite a few images throughout the site that need the border and padding and just the one that doesn't.
The site in question is here: http://www.elitejoiners-shopfitters.co.uk/
The page that contains the image that doesn't need the border is the error page: http://www.elitejoiners-shopfitters.co.uk/error404.html
Thanks
Mick

Answer 1

Will .exclaim always be inside #main_text?
If so, increase the CSS "weight" of .exclaim by targetting it more specifically so that it trumps #main_text img:
change
.exclaim {
    border-style: none;
    float: left;
    margin-right: 10px;
    padding: 0px;
to
#main_text .exclaim {
    border-style: none;
    float: left;
    margin-right: 10px;
    padding: 0px;