Hi,

I'm doing a visualforce email and using a datatable to display a list of data.  I'm styling it with CSS which works fine in the preview but once I email myself the test, the css is not applied and I just see a standard datatable.  Anyone know if there's a way to fix this?

Here's the Visualforce and CSS:

<style type="text/css">
p,#Opportunity{
font-size:1.0em;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#Opportunity,#Opportunity td, #Opportunity th,.tableHead, .tRowOdd,.tRowEven
{
border-collapse:separate;
border-color:gray;
border-spacing:0px;
border-width:1px;
border-style:outset;
background-color: white;
font-size:0.9em;
}
#Opportunity td, #Opportunity th,.tableHead, .tRowOdd,.tRowEven
{
padding:3px;
border-style:inset;
-moz-border-radius:3px;
text-align:left;
}
.tRowEven
{
background-color:#FFF8DC;
}
#Opportunity th,.tableHead
{
background-color:#F7921E;
}
#Opportunity .OppName
{
text-align:center;
}
</style>

<apex:datatable styleClass="Opportunity" rowClasses="tRowOdd, tRowEven" headerClass="tableHead" value="{!relatedTo.OpportunityLineItems}" var="Oli" cellpadding="3" border="1">
  <apex:column >
    <apex:facet name="header">Product</apex:facet>
    {!Oli.PricebookEntry.Name}
  </apex:column>
  <apex:column >
    <apex:facet name="header">Product Code</apex:facet>
    {!Oli.PricebookEntry.ProductCode}
  </apex:column>  
  <apex:column >
    <apex:facet name="header">Quantity</apex:facet>
    {!Oli.Quantity}
  </apex:column>
  <apex:column >
    <apex:facet name="header">Sales Price</apex:facet>
    {!Oli.UnitPrice}
  </apex:column>
  <apex:column >
    <apex:facet name="header">Total Price</apex:facet>
    {!Oli.TotalPrice}
  </apex:column>
</apex:dataTable>

Thanks for any help.

Steven