gistfile1.txt

<style>
  .main {
    background: #f4f1ee;
    width: 100%;
    min-width: 640px;
    color: #333333;
    table-layout: fixed;
  }

  .main, a {
    font-family: Helvetia, Arial, sans-serif;
  }

  .content {
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    overflow: hidden;
  }

  .view-in-browser td {
    background: {{frontend.email.colors.primaryLight}};
    text-align: right;
    height: 35px;
  }

  .view-in-browser td a {
    font-size: 14px;
    color: #fff;
    line-height: 35px;
  }

  .header .content {
    padding: 35px 0;
  }

  .header .content table {
    table-layout: fixed;
  }

  .header td.left {
    padding-right: 40px;
  }

  .header td p {
    padding: 28px 0;
    font-size: 16px;
  }

  .shop-button {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
  }

  .shop-button img {
    background: {{frontend.email.colors.primaryDark}};
    float: left;
    padding: 0;
    margin: 0;
  }

  .shop-button .label {
    display: inline-block;
    background: {{frontend.email.colors.primaryLight}};
    padding: 0 15px;
    font-size: 16px;
    line-height: 45px;
    color: #fff;
  }

  .products .content {
    background: #fff;
  }

  .products .topper {
    text-align: center;
  }

  .products .topper .label {
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 22px;
    padding-bottom: 15px;
    border-bottom: 3px solid {{frontend.email.colors.highlight}};
  }

  .products .product {
    width: 100%;
  }

  .products .product td {
    border-bottom: 1px solid #EEEEEE;
  }

  .products .product td {
    padding: 15px 0;
  }

  .products .product .image {
    width: 91px;
  }

  .products .product img {
    width: 70px;
    height: 70px;
  }

  .products .product .name {
    font-size: 17px;
    line-height: 20px;
    padding-bottom: 10px;
  }

  .products .product .price {
    font-size: 17px;
    line-height: 20px;  
    font-weight: bold;
    width: 80px;
  }

  .products .header td {
    background: #f4f1ee;
    line-height: 45px;
    color: #807E7D;
    font-size: 17px;
    font-weight: bold;
  }

  .products td.pad {
    width: 45px;
    border: 0;
  }

  .products .footer td {
    padding: 23px 0;
    text-align: center;
  }

  .products .view-order td {
    background: #f4f1ee;
    line-height: 45px;
    text-align: center;
  }

  .products .view-order td a {
    color: {{frontend.email.colors.highlight}};
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
  }

  .footer .content {
    background: {{frontend.email.colors.primaryLight}};
  }

  .footer .links {
    text-align: center;
    padding: 19px 0;
    border-bottom: 1px solid #eeeeee;
  }

  .footer .links a {
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 18px;
    text-decoration: none;
  }

  .footer .footer-pip {
    width: 7px;
    height: 8px;
    padding: 0 5px;
  }

  .footer .social {
    padding: 30px 0;
    text-align: center;
  }

  .footer .social a {
    margin-right: 5px;
  }

  a img {
    border: 0;
  }
</style>

<table class="main" cellpadding="0" cellspacing="0" border="0">
  <tr class="view-in-browser">
    <td class="pad"></td>
    <td class="content">
      <a href="{{browser_url}}">View In Browser</a>
    </td>
    <td class="pad"></td>
  </tr>
  <tr class="header">
    <td class="pad"></td>
    <td class="content">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td valign="top" class="left">
            <img class="logo" src="{{web_url}}/images/email/logo.png">
            <p class="blurb">Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. </p>
            <a class="shop-button" href="{{web_url}}/#/?session-token={{session_token}}&load-order={{order.id}}">
              <img src="{{web_url}}/images/email/basket-icon.png">
              <span class="label">Shop Your Last Order</span>
            </a>
          </td>
          <td valign="bottom">
            <img class="flare" src="{{web_url}}/images/email/reorder-flare.png">
          </td>
        </tr>
      </table>
    </td>
    <td class="pad"></td>
  </tr>
  <tr class="products">
    <td class="pad"></td>
    <td class="content">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td colspan="5" class="topper">
            <img src="{{web_url}}/images/email/triangle.png">
            <span class="label">My Last Order</span>
          </td>
        </tr>
        <tr class="header">
          <td class="pad"></td>
          <td colspan="2" class="name">Product Name</td>
          <td class="price">Price</td>
          <td class="pad"></td>
        </tr>
        {% for item in order.order_details %}
          <tr class="product">
            <td class="pad"></td>
            <td valign="top" class="image">
              <img src="{{item.image.image_url}}">
            </td>
            <td valign="top" class="name">
              {{item.product.name}}
            </td>
            <td valign="top" class="price">
              ${{item.order_item.product_total}}
            </td>
            <td class="pad"></td>
          </tr>
        {% endfor %}
        <tr class="footer">
          <td colspan="5">
            <a class="shop-button" href="{{web_url}}/#/?session-token={{session_token}}&load-order={{order.id}}">
              <img src="{{web_url}}/images/email/basket-icon.png">
              <span class="label">Shop Your Last Order</span>
            </a>
          </td>
        </tr>
        <tr class="view-order">
          <td colspan="5">
            <a href="{{web_url}}/#/account/orders/{{order.id}}">View All Products In Your Order &raquo;</a>
          </td>
        </tr>
      </table>
    </td>
    <td class="pad"></td>
  </tr>
  <tr class="footer">
    <td class="pad"></td>
    <td class="content">
      <div class="links">
        <a href="{{web_url}}/#/catalog">{{frontend.lang.shop}}</a>
        <img src="{{web_url}}/images/email/footer-pip.png" class="footer-pip">
        <a href="{{web_url}}/#/deals">{{frontend.lang.deals}}</a>
        <img src="{{web_url}}/images/email/footer-pip.png" class="footer-pip">
        <a href="{{web_url}}/#/accounts/lists">Shopping Lists</a>
        <img src="{{web_url}}/images/email/footer-pip.png" class="footer-pip">
        <a href="{{web_url}}/#/accounts/orders">Online Order History</a>
      </div>
      <div class="social">
        {% if frontend.footerSocialLinks.facebook %}
          <a href="{{frontend.footerSocialLinks.facebook}}"><img src="{{web_url}}/images/social-facebook.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.twitter %}
          <a href="{{frontend.footerSocialLinks.twitter}}"><img src="{{web_url}}/images/social-twitter.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.pinterest %}
          <a href="{{frontend.footerSocialLinks.pinterest}}"><img src="{{web_url}}/images/social-pinterest.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.instagram %}
          <a href="{{frontend.footerSocialLinks.instagram}}"><img src="{{web_url}}/images/social-instagram.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.google %}
          <a href="{{frontend.footerSocialLinks.google}}"><img src="{{web_url}}/images/social-google.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.youtube %}
          <a href="{{frontend.footerSocialLinks.youtube}}"><img src="{{web_url}}/images/social-youtube.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.tumblr %}
          <a href="{{frontend.footerSocialLinks.tumblr}}"><img src="{{web_url}}/images/social-tumblr.png"></a>
        {% endif %}
        {% if frontend.footerSocialLinks.email %}
          <a href="{{frontend.footerSocialLinks.email}}"><img src="{{web_url}}/images/social-email.png"></a>
        {% endif %}
      </div>
    </td>
    <td class="pad"></td>
  </tr>
</table>