can't edit editable region in frames

[htmlhelp]

Hello, my name is justine and i am trying to edit an area in the website i am making by using frames. I have made the #maincontent area editable and i can type in the area but it wont let me edit the CSS rule for #maincontent (text colour,size etc). when i do try it comes up with:

"Making this change would require changing code that is locked by a template or translator. The change will be discarded"

I do all my work through the design view and don't know anything about html. if you could have a look at the html and give me any ideas on how to solve this would be very much appreciated:


</div>
<!-- InstanceBeginEditable name="EditRegion" -->
<div id="mainContent">
<h1>Index (Home)</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- end #mainContent -->
</div>
<!-- InstanceEndEditable -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container -->
</div>

Thanks