
<head>
                   {CSS}
                   <style>
                   .title
                   {
                       color: white; font-weight: bold;
                   }
                   </style>
                </head>


                <body>
                <table style="background: transparent url({IMG_DIR}faded_blue_horizontal.png ) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; text-align: left; width: 720px; height: 400px;" border="0" cellpadding="8" cellspacing="6">
                <tbody>
                <tr>
                    <td style="text-align: center; vertical-align: bottom; height: 10%;" colspan="3" rowspan="1">
                        <img style="width: 250px; height: 76px;" alt="arrow" src="{COURSE_DIR}images/diagrams/top_arrow.png ">
                    </td>
                </tr>
                <tr>
                    <td style="height: 5%; width: 45%; vertical-align: top; background-color: rgb(153, 153, 153); text-align: center;">
                        <span class="title">Lorem ipsum</span>
                    </td>

                    <td style="height: 5%; width: 10%;"></td>
                    <td style="height: 5%; vertical-align: top; background-color: rgb(153, 153, 153); text-align: center;">
                        <span class="title">Sed ut perspiciatis</span>
                    </td>
                </tr>
                    <tr>
                        <td style="background-color: rgb(204, 204, 255); width: 45%; vertical-align: top;">
                            <ul>
                                <li>dolor sit amet</li>
                                <li>consectetur adipisicing elit</li>
                                <li>sed do eiusmod tempor&nbsp;</li>
                                <li>adipisci velit, sed quia non numquam</li>
                                <li>eius modi tempora incidunt ut labore et dolore magnam</li>
                            </ul>
                </td>
                <td style="width: 10%;"></td>
                <td style="background-color: rgb(204, 204, 255); width: 45%; vertical-align: top;">
                    <ul>
                    <li>ut enim ad minim veniam</li>
                    <li>quis nostrud exercitation</li><li>ullamco laboris nisi ut</li>
                    <li> Quis autem vel eum iure reprehenderit qui in ea</li>
                    <li>voluptate velit esse quam nihil molestiae consequatur,</li>
                    </ul>
                    </td>
                    </tr>
                    <tr align="center">
                    <td style="height: 10%; vertical-align: top;" colspan="3" rowspan="1">
                    <img style="width: 250px; height: 76px;" alt="arrow" src="{COURSE_DIR}images/diagrams/bottom_arrow.png ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
                </td>
                </tr>
                </tbody>
                </table>
                <p><br>
                <br>
                </p>
                </body>
