vf component attachment

<apex:component layout="none" access="global">
    <apex:attribute name="acc" description="Account details" type="Account" />
    <head>
        <style type="text/css" media="print">
            @page :first {
                @top-center {
                    content: element(header);
                }
            }

            @page {
                @bottom-left {
                    content: element(footer);
                }
            }

            * {
                margin: 0px;
                padding: 0px;
            }

            div.header {
                background: url("{!$Resource.AccountHeader}") no-repeat center center;
                margin-top: 30px;
                height: 130px;
                width: 715px;
                text-align: center;
                position: running(header);
            }

            div.content {
                padding-top: 130px;
            }

            div.footer {
                display: block;
                padding: 5px;
                position: running(footer);
            }

            div.subfooter {
                display: inline-block;
            }

            div.right {
                float: right;
            }

            .pagenumber:before {
                content: counter(page);
            }

            .pagecount:before {
                content: counter(pages);
            }

            .stationName {
                text-align: center;
                font-weight: bold;
                font-size: 20pt;
                margin-bottom: 30px;
            }

            table {
                width: 100%;
            }

            .centered {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .label {
                font-weight: bold;
            }

            .tableHeader {
                border-width: 0px 0px 1px 0px;
                border-color: #000;
                border-style: solid;
            }

            .sectionHeader {
                width: 100%;
                background-color: #eee;
                font-size: 16pt;
                padding: 5px;
                margin: 20px 0px;
                font-weight: bold;
            }

            #totalAmount {
                width: 100%;
                text-align: right;
                margin-top: 15px;
            }

            #totalAmountLabel {
                font-weight: bold;
                margin-right: 10px;
            }
        </style>
    </head>
    <div class="header"></div>
    <div class="content">
        <h1 class="accountName">
            {!acc.Name}
        </h1>

        <table id="status">
            <tr>
                <td class="label">{!$ObjectType.Account.fields.Name.Label}</td>
                <td><apex:outputText value="{!acc.Name}" /></td>
            </tr>
            <tr>
                <td class="label">{!$ObjectType.Account.fields.AccountNumber.Label}</td>
                <td><apex:outputText value="{!acc.AccountNumber}" /></td>
            </tr>
        </table>

        <div class="sectionHeader">{!$ObjectType.Opportunity.labelPlural}</div>
        <table id="resources">
            <tr>
                <th class="tableHeader">{!$ObjectType.Opportunity.fields.Name.Label}</th>
                <th class="tableHeader centered">{!$ObjectType.Opportunity.fields.StageName.Label}</th>
                <th class="tableHeader centered">{!$ObjectType.Opportunity.fields.Amount.Label}</th>
            </tr>
            <apex:repeat value="{!acc.Opportunities}" var="opp">
                <tr>
                    <td><apex:outputField value="{!opp.Name}"/></td>
                    <td class="centered"><apex:outputField value="{!opp.StageName}"/></td>
                    <td class="centered"><apex:outputField value="{!opp.Amount}"/></td>
                </tr>
            </apex:repeat>
        </table>

        <div class="sectionHeader">{!$ObjectType.Contact.labelPlural}</div>
        <table id="resources">
            <tr>
                <th class="tableHeader">{!$ObjectType.Contact.fields.Name.Label}</th>
                <th class="tableHeader centered">{!$ObjectType.Contact.fields.Email.Label}</th>
                <th class="tableHeader right">{!$ObjectType.Contact.fields.MailingCity.Label}</th>
                <th class="tableHeader right">{!$ObjectType.Contact.fields.MailingCountry.Label}</th>
            </tr>
            <apex:repeat value="{!acc.Contacts}" var="con">
                <tr>
                    <td><apex:outputField value="{!con.Name}"/></td>
                    <td class="centered"><apex:outputField value="{!con.Email}"/></td>
                    <td class="right"><apex:outputField value="{!con.MailingCity}"/></td>
                    <td class="right"><apex:outputField value="{!con.MailingCountry}"/></td>
                </tr>
            </apex:repeat>
        </table>
        <br class="clearboth" />
        <div id="totalAmount">
            <span id="totalAmountLabel">{!$ObjectType.Account.Fields.Total_Amount__c.Label}:</span>
            <apex:outputField value="{!acc.Total_Amount__c}"/>
        </div>
    </div>
    <div class="footer">
        <div class="centered">Generated by {!$User.FirstName} {!$User.LastName}</div>
        <div>
            <div class="subfooter">{!NOW()}</div>
            <div class="subfooter right">Page <span class="pagenumber"/> of <span class="pagecount"/></div>
        </div>
    </div>
</apex:component>