function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brooks Johnson 6Brooks Johnson 6 

order of tables in visual force

I have a Visual Force Page that renders as a PDF. I need to add some text to the first page.  It should be below the last </table> tag. But it keeps appearing at the top of the table.  I have marked it with comments to show where it is supposed to appear and where it actually shows up on the PDF. Any help with this formatting would be great. 
  
<div style="margin-bottom: 0; padding-bottom: 0">
        <p class="smallFont" style="margin-bottom: 0; padding-bottom: 0">
            The Program Performance Scorecard is a tool by which you can monitor the overall health of your region’s Influencer list.
            The factors that contribute to the overall health grade are listed below. Each category is worth 20% of the grade.
            Your grades are on page 2. This scorecard should be used in conjunction with the internal benchmarks and optimization guidelines to identify areas
            of opportunity and to inform your influencer program strategy.
        </p>
    </div>
/-//////////////////////////////////////////////////////////////////////////////-/
    /--But instead the text always shows up here --/
/-/////////////////////////////////////////////////////////////////////////////-/

    <table width="100%"    class="score_table smallFont" cellspacing="0">
        <tr width="100%"   class="darkBottomBorder smallFont">
            <th colspan="2"    class="darkBottomBorder smallFont" id="scoringConvention"> Scoring Convention </th>
            <th align="center" class="darkBottomBorder a_Color "> A</th>
            <th align="center" class="darkBottomBorder b_Color"> B</th>
            <th align="center" class="darkBottomBorder c_Color"> C</th>
            <th align="center" class="darkBottomBorder d_Color"> D</th>
            <th align="center" class="darkBottomBorder f_Color"> F</th>
        </tr>
        <tr width="15%" class="font smallFont">
            <td rowspan="8" width="15%" align="left" class="smallFont"> Each is worth 20% of overall grade</td>
        </tr>
        <tr class="bottom_border smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border smallFont">List Growth Last<br/> 90 Days</td>
            <td align="center" class="bottom_border smallFont smallFont"> &#8805; 10 </td>
            <td  align="center" class="shaded bottom_border smallFont smallFont">  &#8805; 8</td>
            <td align="center" class="bottom_border smallFont smallFont">  &#8805; 4 </td>
            <td class="shaded bottom_border smallFont smallFont" align="center">  &#8805; 1 </td>
            <td align="center" class="bottom_border smallFont smallFont"> 0 </td>
        </tr>
        <tr class=" smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border"> Percent Contacted</td>
            <td align="center" class="bottom_border smallFont">  &#8805; 50% </td>
            <td  align="center" class="shaded bottom_border smallFont">  &#8805; 35%</td>
            <td align="center" class="bottom_border smallFont">  &#8805; 20% </td>
            <td class="shaded bottom_border smallFont" align="center">  &#8805; 10%</td>
            <td align="center" class="bottom_border smallFont"> &#60; 10% </td>
        </tr>
        <tr class=" smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border">Open Rate</td>
            <td align="center" class="bottom_border smallFont"> &#8805; 35% </td>
            <td  align="center" class="shaded bottom_border smallFont"> &#8805; 25%</td>
            <td align="center" class="bottom_border smallFont"> &#8805; 15% </td>
            <td class="shaded bottom_border smallFont" align="center"> &#8805; 7% </td>
            <td align="center" class="bottom_border smallFont"> &#60; 7% </td>
        </tr>
        <tr class=" smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border">Click Through Rate</td>
            <td align="center" class="bottom_border smallFont"> &#8805; 20% </td>
            <td  align="center" class="shaded bottom_border smallFont"> &#8805; 10%</td>
            <td align="center" class="bottom_border smallFont">  &#8805; 5% </td>
            <td class="shaded bottom_border smallFont" align="center"> &#8805; 2% </td>
            <td align="center" class="bottom_border smallFont"> &#60; 2% </td>
        </tr>
        <tr class=" bottom_border smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border">Unsubscribe Percentage</td>
            <td align="center" class="bottom_border smallFont"> &#60; 2%</td>
            <td  align="center" class="shaded bottom_border smallFont"> &#60; 4%</td>
            <td align="center" class="bottom_border smallFont"> &#60; 6% </td>
            <td class="shaded bottom_border smallFont" align="center"> &#60; 8% </td>
            <td align="center" class="bottom_border smallFont"> &#8805; 8% </td>
        </tr>         
    </table>
    /-///////////////////////////////////////////////-/
    /-- The text should start here--/
/-///////////////////////////////////////////////////////////-/
    <p>
        The quick brown fox jumped over the lazy dog. 
    </p>
   
        

    <div style="page-break-after: always"></div>

 
Dushyant SonwarDushyant Sonwar
Hi Brooks,

I added text at the place that you mentioned and it is appearing at the same position as it should .

Could you post whole code of your vf page that will make others understand what problem actually are you facing?

Thanks,
Brooks Johnson 6Brooks Johnson 6
Hi Duyhyant,

I am sorry it took me so long to get back to you. The entire page is below. 
  
<!--Created By Brooks Johnson
Athena Global Advisors 20181129
This page is meant to be rendered as a PDF for the Regional Health Report
-->

<apex:page id="ProgramPerformanceRegion" showHeader="false" standardController="Region__c" docType="html-5.0"
           sideBar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" renderAs="advanced_pdf">
    <head>
        <title>Region Health Check Report</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <apex:stylesheet value="{!$Resource.HealthCheckStyle}"/>
    </head>
    <apex:image url="{#}" height="50px" width="50px"
                style="margin-bottom: 0"/>
    <table width="100%" class="main-text" cellpadding="0" cellspacing="0">
        <tr width="100%" class="main-text">
            <td width="50%" align="left" STYLE="font-size: 20px; font-weight: bold">Program Performance Scorecard</td>
        </tr>
        <tr width ="100%" class="main-text">
            <td width="50%" style="margin: 0">
                <span style="font-size: 18px">
                     <apex:outputText value="{!Region__c.Name}"/>
                </span>
            </td>

        </tr>
    </table>
    <apex:image url="{!$Resource.border_bar}" height="7"/>
    <div style="margin-bottom: 0; padding-bottom: 0">
        <p class="smallFont" style="margin-bottom: 0; padding-bottom: 0">
            The Program Performance Scorecard is a tool by which you can monitor the overall health of your region’s Influencer list.
            The factors that contribute to the overall health grade are listed below. Each category is worth 20% of the grade.
            Your grades are on page 2. This scorecard should be used in conjunction with the internal benchmarks and optimization guidelines to identify areas
            of opportunity and to inform your influencer program strategy.
        </p>
    </div>

    <table width="100%"    class="score_table smallFont" cellspacing="0">
        <tr width="100%"   class="darkBottomBorder smallFont">
            <th colspan="2"    class="darkBottomBorder smallFont" id="scoringConvention"> Scoring Convention </th>
            <th align="center" class="darkBottomBorder a_Color "> A</th>
            <th align="center" class="darkBottomBorder b_Color"> B</th>
            <th align="center" class="darkBottomBorder c_Color"> C</th>
            <th align="center" class="darkBottomBorder d_Color"> D</th>
            <th align="center" class="darkBottomBorder f_Color"> F</th>
        </tr>
        <tr width="15%" class="font smallFont">
            <td rowspan="8" width="15%" align="left" class="smallFont"> Each is worth 20% of overall grade</td>
        </tr>
        <tr class="bottom_border smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border smallFont">List Growth Last<br/> 90 Days</td>
            <td align="center" class="bottom_border smallFont smallFont"> &#8805; 10 </td>
            <td  align="center" class="shaded bottom_border smallFont smallFont">  &#8805; 7</td>
            <td align="center" class="bottom_border smallFont smallFont">  &#8805; 4 </td>
            <td class="shaded bottom_border smallFont smallFont" align="center">  &#8805; 1 </td>
            <td align="center" class="bottom_border smallFont smallFont"> 0 </td>
        </tr>
        <tr class=" smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border"> Percent Contacted</td>
            <td align="center" class="bottom_border smallFont">  &#8805; 50% </td>
            <td  align="center" class="shaded bottom_border smallFont">  &#8805; 35%</td>
            <td align="center" class="bottom_border smallFont">  &#8805; 20% </td>
            <td class="shaded bottom_border smallFont" align="center">  &#8805; 10%</td>
            <td align="center" class="bottom_border smallFont"> &#60; 10% </td>
        </tr>
        <tr class=" smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border">Open Rate</td>
            <td align="center" class="bottom_border smallFont"> &#8805; 40% </td>
            <td  align="center" class="shaded bottom_border smallFont"> &#8805; 30%</td>
            <td align="center" class="bottom_border smallFont"> &#8805; 20% </td>
            <td class="shaded bottom_border smallFont" align="center"> &#8805; 15% </td>
            <td align="center" class="bottom_border smallFont"> &#60; 15% </td>
        </tr>
        <tr class=" smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border">Click Through Rate</td>
            <td align="center" class="bottom_border smallFont"> &#8805; 15% </td>
            <td  align="center" class="shaded bottom_border smallFont"> &#8805; 10%</td>
            <td align="center" class="bottom_border smallFont">  &#8805; 5% </td>
            <td class="shaded bottom_border smallFont" align="center"> &#8805; 2% </td>
            <td align="center" class="bottom_border smallFont"> &#60; 2% </td>
        </tr>
        <tr class=" bottom_border smallFont" width="100%" align="right">
            <td align="left" class="shaded bottom_border">Unsubscribe Percentage</td>
            <td align="center" class="bottom_border smallFont"> &#60; 1%</td>
            <td  align="center" class="shaded bottom_border smallFont"> &#60; 2%</td>
            <td align="center" class="bottom_border smallFont"> &#60; 4% </td>
            <td class="shaded bottom_border smallFont" align="center"> &#60; 6% </td>
            <td align="center" class="bottom_border smallFont"> &#8805; 6% </td>
        </tr>

    </table>
    <div style="page-break-after: always"></div>
    <apex:image id="logo" url="{!$Resource.Comcast_Logo}" height="50px" width="50px"
               styleClass="img"/>
    <table width="100%" class="main-text" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
        <tr width="100%" class="main-text font">
            <td width="50%" align="left" STYLE="font-size: 22px; font-weight: bold">Program Performance Scorecard</td>
            <td width="50%" align="right" STYLE="font-size: 14px">Overall Health Score</td>
        </tr>
        <tr width ="100%" class="main-text font">
            <td width="50%" style="margin: 0">
                <span style="font-size: 18px;">
                     <apex:outputText value="{!Region__c.Name}"/>
                </span>
            </td>
            <td  width="50%" align="right" style="margin-bottom: 0; padding-bottom: 0">
                     <apex:outputText value="{!Region__c.Grade__c}"
                                      style="font-size: 49px; font-weight: bold;
                                      padding-right: 60px;  font-family: Arial Unicode MS;
                                      padding-bottom: 0px; margin-bottom 0px;
                                     color: {!if(Region__c.Grade__c='A', '#00a846',
                                     if(Region__c.Grade__c='B', '#aabb1a',
                                     if(Region__c.Grade__c='C','#f0b428',
                                     if(Region__c.Grade__c='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
    </table>
    <apex:image url="{!$Resource.border_bar}" height="7"/>
    <table width="100%" style="border-collapse: collapse" class="smallFont">
        <tr width="100%">
            <td width="50%"  class="label smallFont">
               Total Influencers
            </td>
            <td width="50%" align="right" class="top_output font">
                <apex:outputText value="{!FLOOR(Region__c.Total_Influencers__c)}"/>
            </td>
        </tr>
        <tr width="100%">
            <td width="50%">
                <span class="label smallFont Total XI"> Total XIP</span>
            </td>
            <td width="50%" align="right" class="top_output">
                <apex:outputText value="{!FLOOR(Region__c.Total_XIP_Influencers__c)}" />
            </td>
        </tr>

        <tr width="100%">
            <td width="50%">
                <span class="label smallFont"> Total Relationship Owners </span>
            </td>
            <td width="50%" align="right" class="top_output smallFont">
                <apex:outputText value="{!FLOOR(Region__c.Total_Relationship_Owners__c)}"/>
            </td>
        </tr>
        <tr width="100%">
            <td width="50%">
                <span class="label"> Total Unique Emails </span>
            </td>
            <td width="50%" align="right" class="top_output smallFont">
                <apex:outputText value="{!FLOOR(Region__c.Total_Unique_Emails__c)}"/>
            </td>
        </tr>
    </table>
    <apex:image url="{!$Resource.border_bar}" height="7"/>
    <table width="100%">

        <tr width="100%">
            <td width="25%" class="icon-label">
                <span class="icon-label">List Growth</span>
            </td>
            <td width="50%" align="center" class="rateValue">
                <apex:outputText value="{!FLOOR(Region__c.List_Growth_Last_90_Days_Region__c)}"
                                 style="font-size: 30px; font-weight: bold; font-family: Arial Unicode MS;
                                 margin: 0; padding-bottom: 0;
                                     color: {!if(Region__c.List_Growth_Last_90_Days_Region__c >= 10, '#00a846',
                                     if(Region__c.List_Growth_Last_90_Days_Region__c >= 7, '#aabb1a',
                                     if(Region__c.List_Growth_Last_90_Days_Region__c >= 4,'#f0b428',
                                     if(Region__c.List_Growth_Last_90_Days_Region__c >= 1, '#FF6428', '#B42846'))))}"/>

            </td>
        </tr>
        <tr width="100%">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_list_growth}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
                Average number of influencers added by each relationship
                owner in the region in the last 90 days
            </td>
            <td width="25%" align="right" class="grade_Output" rowspan="2">

                <apex:outputText value="{!Region__c.List_Growth_Grade_Region__c}"
                                 style="font-size: 51px; font-weight: bold;
                                 margin-bottom: 10px; padding-bottom: 80px; font-family: Arial Unicode MS;
                                     color: {!if(Region__c.List_Growth_Grade_Region__c='A', '#00a846',
                                     if(Region__c.List_Growth_Grade_Region__c='B', '#aabb1a',
                                     if(Region__c.List_Growth_Grade_Region__c='C','#f0b428',
                                     if(Region__c.List_Growth_Grade_Region__c='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
        <hr/>
        <tr width="100%">
            <td width="25%" class="icon-label">
                <span class="icon-label">
                    Percent Contacted
                </span>
            </td>
            <td width="50%" align="center">
                <apex:outputText value="{0, number, 0}%" style="font-size: 30px; font-weight: bold;  font-family: Arial Unicode MS;
                                     color: {!if(Region__c.Percent_Influencers_Contacted__c >= 50, '#00a846',
                                     if(Region__c.Percent_Influencers_Contacted__c >= 35, '#aabb1a',
                                     if(Region__c.Percent_Influencers_Contacted__c >= 20,'#f0b428',
                                     if(Region__c.Percent_Influencers_Contacted__c >= 10, '#FF6428', '#B42846'))))}">

                    <apex:param value="{!FLOOR(Region__c.Percent_Influencers_Contacted__c)}"/>
                </apex:outputText>
            </td>
            <td width="25%">
            </td>
        </tr>
        <tr width="100%">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_percent_contacted}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
                <p> Percentage of total influencers who have received at
                    least one email communication in the last 90 days</p>
            </td>
            <td class="grade_Output">

                <apex:outputText value="{!Region__c.Percent_Contacted_Grade__c}"
                                 style="font-size: 51px; font-weight: bold;  font-family: Arial Unicode MS;
                                 margin-bottom: 10px;
                                     color: {!if(Region__c.percent_contacted_grade__c='A', '#00a846',
                                     if(Region__c.percent_contacted_grade__c ='B', '#aabb1a',
                                     if(Region__c.percent_contacted_grade__c ='C','#f0b428',
                                     if(Region__c.percent_contacted_grade__c ='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
        <hr/>
        <tr width="100%">
            <td width="25%" class="icon-label">
                <span class="icon-label">
                    Open Rate
                </span>
            </td>
            <td width="50%" align="center">
                <apex:outputText value="{0, number, 0}%" style="font-size: 30px; font-weight: bold;  font-family: Arial Unicode MS;
                                     color: {!if(Region__c.Email_Open_Rate__c >= 40, '#00a846',
                                     if(Region__c.Email_Open_Rate__c >= 30, '#aabb1a',
                                     if(Region__c.Email_Open_Rate__c >= 20,'#f0b428',
                                     if(Region__c.Email_Open_Rate__c >= 15, '#FF6428', '#B42846'))))}">

                    <apex:param value="{!FLOOR(Region__c.Email_Open_Rate__c)}"/>
                </apex:outputText>

            </td>
            <td width="25%">
            </td>
        </tr>
        <tr width="100%" id="row_6">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_open_rate}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
                The total number of emails that were opened divided by the total number of emails delivered
            </td>
            <td width="25%" align="center" class="grade_Output">
                <apex:outputText value="{!Region__c.Email_Open_Rate_Grade__c}"
                                 style="font-size: 51px; font-weight: bold;  font-family: Arial Unicode MS;
                                 margin-bottom: 20px;
                                     color: {!if(Region__c.Email_Open_Rate_Grade__c='A', '#00a846',
                                     if(Region__c.Email_Open_Rate_Grade__c ='B', '#aabb1a',
                                     if(Region__c.Email_Open_Rate_Grade__c ='C','#f0b428',
                                     if(Region__c.Email_Open_Rate_Grade__c ='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
        <hr/>
        <tr width="100%" id="row_7">
            <td width="25%" class="icon-label">
                <span class="icon-label">
                    Click Through Rate
                </span>
            </td>
            <td width="50%" align="center">
                <apex:outputText value="{0, number, 0}%" style="font-size: 30px; font-weight: bold;  font-family: Arial Unicode MS;
                                     color: {!if(Region__c.Email_Click_Rate__c >=  15, '#00a846',
                                     if(Region__c.Email_Click_Rate__c >= 10, '#aabb1a',
                                     if(Region__c.Email_Click_Rate__c >= 5,'#f0b428',
                                     if(Region__c.Email_Click_Rate__c >= 2, '#FF6428', '#B42846'))))}">

                    <apex:param value="{!FLOOR(Region__c.Email_Click_Rate__c)}"/>
                </apex:outputText>
            </td>
            <td width="25%">
            </td>
        </tr>
        <tr width="100%" id="row_4">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_CTR}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
                <p>The total number of unique link clicks divided by the total number of emails opened</p>
            </td>
            <td  align="center" width="25%" class="grade_Output">
                <apex:outputText value="{!Region__c.Click_Rate_Grade__c}"
                                 style="font-size: 51px; font-weight: bold;  font-family: Arial Unicode MS;
                                 margin-bottom: 20px;
                                     color: {!if(Region__c.Click_rate_Grade__c='A', '#00a846',
                                     if(Region__c.Click_rate_Grade__c ='B', '#aabb1a',
                                     if(Region__c.Click_rate_Grade__c ='C','#f0b428',
                                     if(Region__c.Click_rate_Grade__c ='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
        <hr/>
        <tr width="100%" id="row_5">
            <td width="25%" class="icon-label">
                <span class="icon-label">
                    Unsubscribe Rate
                </span>
            </td>
            <td width="50%" align="center">
                <apex:outputText value="{0, number, 0}%" style="font-size: 30px; font-weight: bold;  font-family: Arial Unicode MS;
                                     color: {!if(Region__c.Unsubscribe_rate__c <= 1, '#00a846',
                                     if(Region__c.Unsubscribe_rate__c <= 2, '#aabb1a',
                                     if(Region__c.Unsubscribe_rate__c <= 4,'#f0b428',
                                     if(Region__c.Unsubscribe_rate__c <= 6, '#FF6428', '#B42846'))))}">

                    <apex:param value="{!FLOOR(Region__c.Unsubscribe_Rate__c)}"/>
                </apex:outputText>
            </td>
            <td width="25%">
            </td>
        </tr>
        <tr width="100%" id="row_4">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_unsubscribe}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
                Percentage of total influencers who have opted out of further communications
            </td>
            <td width="25%" align="center" class="grade_Output">
                <apex:outputText value="{!Region__c.Unsubscribe_Grade__c}"
                                 style="font-size: 51px; font-weight: bold; font-family: Arial Unicode MS;
                                 margin-bottom: 10px;
                                     color: {!if(Region__c.Unsubscribe_grade__c='A', '#00a846',
                                     if(Region__c.Unsubscribe_grade__c ='B', '#aabb1a',
                                     if(Region__c.Unsubscribe_grade__c ='C','#f0b428',
                                     if(Region__c.Unsubscribe_grade__c ='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
    </table>
</apex:page>

 
Dushyant SonwarDushyant Sonwar
Hi brooke, 

I used the vf code removing the references and still i was able to get the expected output. I think there might be some css properties that are affecting the positioning .

Could you also post the css of $Resource.HealthCheckStyle css file?

you can access it from the static resources in sidebar panel.

Regards,
Dushyant
Brooks Johnson 6Brooks Johnson 6
Hi Dushyant,

Here is my CSS file
  
/* HealthCheckStyle */

@page{
    font-family:  Arial Unicode MS;
    margin-top: 0.20in;


}
.label{
    font-size: 12px;
    font-family: Arial Unicode MS;
    padding: 0px;

}
.icon-label{
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    font-family: Arial Unicode MS;

}
.main-text{
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 0px;
    font-family: Arial Unicode MS;



}
.final-grade{
    padding-bottom: 0px;
}
image{ margin: 5px;
        padding: 0;
}
.icon{
    padding-left: 60px;
}
.center_text{
    text-align: center;
    font-family: Arial Unicode MS;
    font-size: 12px;
    padding: 0;
    margin: 0;

}
.score_table{
    border-collapse: collapse;
    float: right;
    margin-top: 10px;
}

.tablediv{
    float: left;
    margin-top: 50px;
    padding-top: 75px;
    font-weight: bold;
}
.shaded{
    background-color: rgb(242,242,242);
}
.bottom_border{
    border-bottom: 1px solid #d3d3d3;
    font-family: Arial Unicode MS;
}
.a_Color{
    color: #00a846;
}
.b_Color{
    color: #6a9127;
}
.c_Color{
    color: #f0b428;
}
.d_Color{
    color: #FF6428;
}
.f_Color{
    color: #B42846;
}
.top_output{
    padding-right: 60px;
    text-align: right;
}
.grade_Output{
    padding-right: 50px;
    text-align: right;
    row-span: 2;
}

.font{
    font-family: Arial Unicode MS;
}
.img{
    margin: 0;
    padding: 0;
    border: 0;
}
hr{
    color: #F5F5F5;
}
.rateValue{
    padding-bottom: 0.05in;
}
.grade-Row{
    padding-left: 100px;
}
#scoringConvention{
    padding-left: 50px;
    column-span: 2;
}
#scoring{
    padding-left: 25px;
}

.bold{
    font-weight: bold;
}
.darkBottomBorder{
    border-bottom: 1px solid black;
    font-family: Arial Unicode MS;
}

.smallFont{
    font-size: 12px;
    font-weight: normal;
    font-family: "Arial Unicode MS";

}