Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>

    <style type="text/css">

    </style>
  </head>
  <body>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>

            <table class="row header">
              <tr>
                <td class="center" align="center">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper last">

                          <table class="twelve columns">
                            <tr>
                              <td class="six sub-columns">
                                <a href="https://zurb.com/ink"><img width="150" height="20" src="http://placehold.it/150x20" alt="Ink Dispatch"></a>
                              </td>
                              <td class="six sub-columns last date">

                                <span>August 2014</span>

                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

            <table class="row headline">
              <tr>
                <td class="center" align="center">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper last">

                          <table class="twelve columns">
                            <tr>
                              <td class="text-pad">

                                <h1>Order Up! Spice Up Emails With a Helping of Source Ordering</h1>

                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

            <table class="container">
              <tr>
                <td>

                  <table class="row">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns lede">
                          <tr>
                            <td class="text-pad">
                              <p>When it comes to email design, content-driven is the name of the game. Readers don&#8217;t subscribe to your email list because of the pretty design (in most cases), but because of the value your content provides. With this in mind, it&#8217;s important that your design presents the content in the most effective way possible using elements such as typography, hierarchy and color. That way you drive the reader toward the important parts of the email.</p>
                              <p>Responsive design can make this a bit harder to achieve, since you have so much less screen space to work with. Most responsive grids fold content down into a single column by default, giving the content more room, but <strong>sometimes this buries the primary content further down the page</strong>, underneath secondary content like sidebars and ad units.</p>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                        <table class="twelve columns">
                          <tr>
                            <td class="text-pad">
                              <img width="540" height="440" vspace="10" src="http://placehold.it/540x440" alt="A visual demonstation of source ordering">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                        <table class="twelve columns">
                          <tr>
                            <td class="text-pad">
                              <p>This problem is addressed by using a technique known as <a href="https://foundation.zurb.com/docs/components/grid.html#source-ordering">source ordering</a>. The grid columns for a particular row are placed in the markup in the order they should appear on small screens, then arranged into the correct desktop positions by &#8220;pushing&#8221; and &#8220;pulling&#8221; them into place using margins. Since the CSS margin property doesn&#8217;t have very good support across email clients, this technique tends to fall flat for HTML emails.</p>
                              <p>How do we address this then? The answer is as simple as it is unintuitive: we leverage email clients&#8217; broad support for right-to-left text!</p>
                              <h5>Switching It Up With RTL</h5>
                              <p>By setting the &#8220;dir&#8221; attribute on a &lt;table&gt; tag to &#8220;rtl&#8221;, it causes the client to render all of the &lt;td&gt; elements from right to left as it reads through the DOM. This means that whatever &lt;td&gt; appears on the right hand of the screen in the desktop view will appear on top in the mobile view, since it comes first in the source order.</p> 
                              <p>
                                <code>
                                  &lt;table <strong>dir="rtl"</strong>&gt;<br />
                                    &nbsp;&nbsp;&lt;tr&gt;<br />
                                      &nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Right Content&lt;/td&gt;<br />
                                      &nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Left Content&lt;/td&gt;<br />
                                    &nbsp;&nbsp;&lt;/tr&gt;<br />
                                  &lt;/table&gt;
                                </code>
                              </p>
                              <p>While this technique works for making sure left-hand sidebars don&#8217;t shove your primary content down to the bottom of the email, there&#8217;s now the minor downside that the email text renders backwards. Remember to reset the text-direction by setting &#8220;dir&#8221; to &#8220;ltr&#8221; on each of the &lt;td&gt;s in the source-ordered &lt;table&gt;.</p>
                              <p>
                                <code>
                                  &lt;table dir="rtl"&gt;<br />
                                    &nbsp;&nbsp;&lt;tr&gt;<br />
                                      &nbsp;&nbsp;&nbsp;&nbsp;&lt;td <strong>dir="ltr"</strong>&gt;Right Content&lt;/td&gt;<br />
                                      &nbsp;&nbsp;&nbsp;&nbsp;&lt;td <strong>dir="ltr"</strong>&gt;Left Content&lt;/td&gt;<br />
                                    &nbsp;&nbsp;&lt;/tr&gt;<br />
                                  &lt;/table&gt;
                                </code>
                              </p>
                              <p>When designing for mobile, it&#8217;s important to remember that the goal isn&#8217;t just to &#8220;make everything fit&#8221;. Email is a content medium, and your job as a designer is to display that content to the reader in whatever manner provides the most value to them.</p>

                              <br />
                              <h6>Further Reading</h6>
                              <ul>
                                <li>An in-depth article about <a href="http://www.smashingmagazine.com/2013/04/25/maintain-hierarchy-content-choreography/">Content Choreography and Source Order</a> at Smashing Magazine</li>
                                <li>There&#8217;s a bunch more about source ordering for the web in the <a href-"https://zurb.com/word/source-order">Source Ordering ZURBword</a></li>
                              </ul>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </td>
              </tr>
            </table>

            <table class="row ad-break">
              <tr>
                <td align="center" class="center">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper last">

                          <table class="ten columns">
                            <tr>
                              <td class="four sub-columns">
                                <center>
                                  <a href="https://www.sendinblue.com/?utm_source=zurb&utm_medium=fee&utm_campaign=zurb"><img width="120" height="90" class="center" src="http://placehold.it/120x90" alt="GraphicStock logo"></a>
                                </center>
                              </td>
                              <td class="eight sub-columns last">
                                <h6>SendinBlue</h6>
                                <p>Affordable Email Marketing Solution With Top Features</p>
                                <a href="https://www.sendinblue.com/?utm_source=zurb&utm_medium=fee&utm_campaign=zurb">SendinBlue&nbsp;&rarr;</a>
                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

            <table class="container">
              <tr>
                <td class="course">
                    
                  <table class="row">
                    <tr>
                      <td class="wrapper last">
                        
                        <table class="twleve columns">
                          <tr>
                            <td class="text-pad">
                              <h4>Lessons for Better Responsive Emails</h4>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>

                  <table class="row" >
                    <tr >
                      <td class="wrapper" >
                        <table class="four columns" >
                          <tr >
                            <td class="left-text-pad" >
                              <a href="https://zurb.com/university/responsive-emails-intro?utm_source=Ink%20Dispatch&utm_medium=Email%20Newsletter&utm_campaign=Responsive%20Email%20Class%20June%2019&kmi=[email]" >
                                <img width="160" height="133" src="http://placehold.it/160x133" alt="Intro to Responsive Email Design" />
                              </a>
                            </td>
                            <td class="expander" ></td>
                          </tr>
                        </table>
                      </td>
                      <td class="wrapper last" >
                        <table class="eight columns" >
                          <tr >
                            <td class="right-text-pad" >
                              <p >We&#8217;ve spent a lot of time working on responsive emails, and now we want to share our collection of strategies with you. In our online course on <strong>Tuesday, August 19, 2014 at 9:00 AM PST</strong>, you&#8217;ll learn how to code, design and compose emails that work on any device.</p>
                              <a href="https://zurb.com/university/responsive-emails-intro?utm_source=Ink%20Dispatch&utm_medium=Email%20Newsletter&utm_campaign=Responsive%20Email%20Class%20August%201&kmi=[email]" >Learn More About the Course&nbsp;→</a>
                            </td>
                            <td class="expander" ></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                    
                </td>
              </tr>
            </table>

            <table class="row break-footer">
              <tr>
                <td align="center" class="center cta-line-top">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper">

                          <table class="four columns">
                            <tr>
                              <td>
                                <h6>Share Ink Newsletter:</h6>
                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                        <td class="wrapper">

                          <table class="four columns">
                            <tr>
                              <td class="center">
                                <center>

                                  <fblike>
                                    <img width="144" height="30" src="http://placehold.it/144x30" alt="Facebook">
                                  </fblike>

                                </center>
                              </td>
                            </tr>
                          </table>

                        </td>
                        <td class="wrapper last">

                          <table class="four columns">
                            <tr>
                              <td class="center">
                                <center>

                                  <tweet>
                                    <img width="144" height="30" src="http://placehold.it/144x30" alt="Twitter">
                                  </tweet>

                                </center>
                              </td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

            <table class="row break-footer">
              <tr>
                <td align="center" class="center cta-line-bottom">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper">

                          <table class="four columns">
                            <tr>
                              <td>
                                <h6>Get In Touch:</h6>
                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                        <td class="wrapper last">

                          <table class="eight columns">
                            <tr>
                              <td>
                                Have any questions about Ink?<br />
                                Send an email to <a href="mailto:ink@zurb.com">ink@zurb.com</a>
                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

            <table class="row unsubscribe">
              <tr>
                <td align="center" class="center">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper last">

                          <table class="twelve columns">
                            <tr>
                              <td>
                                <p>Want to Unsubscribe? We&#8217;re sorry to see you go, but happy to make it easy on you. <unsubscribe>Unsubscribe</unsubscribe></p>
                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

            <table class="row footer">
              <tr>
                <td align="center" class="center">
                  <center>

                    <table class="container">
                      <tr>
                        <td class="wrapper last">

                          <table class="twelve columns">
                            <tr>
                              <td class="eight sub-columns">
                                <strong>ZURB, Inc.</strong> 100 W. Rincon Ave. | Campbell, CA 95008 <br />
                              </td>
                              <td class="four sub-columns right">
                                &copy; 1998 – 2014 ZURB
                              </td>
                              <td class="expander"></td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                  </center>
                </td>
              </tr>
            </table>

          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
            
          
!
            
              /**********************************************
* Ink v1.0.5 - Copyright 2015 ZURB Inc        *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a { 
  padding:0; 
} 

body{ 
  width:100% !important; 
  min-width: 100%;
  -webkit-text-size-adjust:100%; 
  -ms-text-size-adjust:100%; 
  margin:0; 
  padding:0;
}

.ExternalClass { 
  width:100%;
} 

.ExternalClass, 
.ExternalClass p, 
.ExternalClass span, 
.ExternalClass font, 
.ExternalClass td, 
.ExternalClass div { 
  line-height: 100%; 
} 

#backgroundTable { 
  margin:0; 
  padding:0; 
  width:100% !important; 
  line-height: 100% !important; 
}

img { 
  outline:none; 
  text-decoration:none; 
  -ms-interpolation-mode: bicubic;
  width: auto;
  max-width: 100%; 
  float: left; 
  clear: both; 
  display: block;
}

center {
  width: 100%;
  min-width: 580px;
}

a img { 
  border: none;
}

p {
  margin: 0 0 0 10px;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td { 
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  border-collapse: collapse !important; 
}

table, tr, td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}

hr {
  color: #d9d9d9; 
  background-color: #d9d9d9; 
  height: 1px; 
  border: none;
}

/* Responsive Grid */

table.body {
  height: 100%;
  width: 100%;
}

table.container {
  width: 580px;
  margin: 0 auto;
  text-align: inherit;
}

table.row { 
  padding: 0px; 
  width: 100%;
  position: relative;
}

table.container table.row {
  display: block;
}

td.wrapper {
  padding: 10px 20px 0px 0px;
  position: relative;
}

table.columns,
table.column {
  margin: 0 auto;
}

table.columns td,
table.column td {
  padding: 0px 0px 10px; 
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
  padding-right: 10px;
}

td.sub-column, td.sub-columns {
  min-width: 0px;
}

table.row td.last,
table.container td.last {
  padding-right: 0px;
}

table.one { width: 30px; }
table.two { width: 80px; }
table.three { width: 130px; }
table.four { width: 180px; }
table.five { width: 230px; }
table.six { width: 280px; }
table.seven { width: 330px; }
table.eight { width: 380px; }
table.nine { width: 430px; }
table.ten { width: 480px; }
table.eleven { width: 530px; }
table.twelve { width: 580px; }

table.one center { min-width: 30px; }
table.two center { min-width: 80px; }
table.three center { min-width: 130px; }
table.four center { min-width: 180px; }
table.five center { min-width: 230px; }
table.six center { min-width: 280px; }
table.seven center { min-width: 330px; }
table.eight center { min-width: 380px; }
table.nine center { min-width: 430px; }
table.ten center { min-width: 480px; }
table.eleven center { min-width: 530px; }
table.twelve center { min-width: 580px; }

table.one .panel center { min-width: 10px; }
table.two .panel center { min-width: 60px; }
table.three .panel center { min-width: 110px; }
table.four .panel center { min-width: 160px; }
table.five .panel center { min-width: 210px; }
table.six .panel center { min-width: 260px; }
table.seven .panel center { min-width: 310px; }
table.eight .panel center { min-width: 360px; }
table.nine .panel center { min-width: 410px; }
table.ten .panel center { min-width: 460px; }
table.eleven .panel center { min-width: 510px; }
table.twelve .panel center { min-width: 560px; }

.body .columns td.one,
.body .column td.one { width: 8.333333%; }
.body .columns td.two,
.body .column td.two { width: 16.666666%; }
.body .columns td.three,
.body .column td.three { width: 25%; }
.body .columns td.four,
.body .column td.four { width: 33.333333%; }
.body .columns td.five,
.body .column td.five { width: 41.666666%; }
.body .columns td.six,
.body .column td.six { width: 50%; }
.body .columns td.seven,
.body .column td.seven { width: 58.333333%; }
.body .columns td.eight,
.body .column td.eight { width: 66.666666%; }
.body .columns td.nine,
.body .column td.nine { width: 75%; }
.body .columns td.ten,
.body .column td.ten { width: 83.333333%; }
.body .columns td.eleven,
.body .column td.eleven { width: 91.666666%; }
.body .columns td.twelve,
.body .column td.twelve { width: 100%; }

td.offset-by-one { padding-left: 50px; }
td.offset-by-two { padding-left: 100px; }
td.offset-by-three { padding-left: 150px; }
td.offset-by-four { padding-left: 200px; }
td.offset-by-five { padding-left: 250px; }
td.offset-by-six { padding-left: 300px; }
td.offset-by-seven { padding-left: 350px; }
td.offset-by-eight { padding-left: 400px; }
td.offset-by-nine { padding-left: 450px; }
td.offset-by-ten { padding-left: 500px; }
td.offset-by-eleven { padding-left: 550px; }

td.expander {
  visibility: hidden;
  width: 0px;
  padding: 0 !important;
}

table.columns .text-pad,
table.column .text-pad {
  padding-left: 10px;
  padding-right: 10px;
}

table.columns .left-text-pad,
table.columns .text-pad-left,
table.column .left-text-pad,
table.column .text-pad-left {
  padding-left: 10px;
}

table.columns .right-text-pad,
table.columns .text-pad-right,
table.column .right-text-pad,
table.column .text-pad-right {
  padding-right: 10px;
}

/* Block Grid */

.block-grid {
  width: 100%;
  max-width: 580px;
}

.block-grid td {
  display: inline-block;
  padding:10px;
}

.two-up td {
  width:270px;
}

.three-up td {
  width:173px;
}

.four-up td {
  width:125px;
}

.five-up td {
  width:96px;
}

.six-up td {
  width:76px;
}

.seven-up td {
  width:62px;
}

.eight-up td {
  width:52px;
}

/* Alignment & Visibility Classes */

table.center, td.center {
  text-align: center;
}

h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
  text-align: center;
}

span.center {
  display: block;
  width: 100%;
  text-align: center;
}

img.center {
  margin: 0 auto;
  float: none;
}

.show-for-small,
.hide-for-desktop {
  display: none;
}

/* Typography */

body, table.body, h1, h2, h3, h4, h5, h6, p, td { 
  color: #222222;
  font-family: "Helvetica", "Arial", sans-serif; 
  font-weight: normal; 
  padding:0; 
  margin: 0;
  text-align: left; 
  line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
  word-break: normal;
}

h1 {font-size: 40px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}
body, table.body, p, td {font-size: 14px;line-height:19px;}

p.lead, p.lede, p.leed {
  font-size: 18px;
  line-height:21px;
}

p { 
  margin-bottom: 10px;
}

small {
  font-size: 10px;
}

a {
  color: #2ba6cb; 
  text-decoration: none;
}

a:hover { 
  color: #2795b6 !important;
}

a:active { 
  color: #2795b6 !important;
}

a:visited { 
  color: #2ba6cb !important;
}

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a {
  color: #2ba6cb;
}

h1 a:active, 
h2 a:active,  
h3 a:active, 
h4 a:active, 
h5 a:active, 
h6 a:active { 
  color: #2ba6cb !important; 
} 

h1 a:visited, 
h2 a:visited,  
h3 a:visited, 
h4 a:visited, 
h5 a:visited, 
h6 a:visited { 
  color: #2ba6cb !important; 
} 

/* Panels */

.panel {
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  padding: 10px !important;
}

.sub-grid table {
  width: 100%;
}

.sub-grid td.sub-columns {
  padding-bottom: 0;
}

/* Buttons */

table.button,
table.tiny-button,
table.small-button,
table.medium-button,
table.large-button {
  width: 100%;
  overflow: hidden;
}

table.button td,
table.tiny-button td,
table.small-button td,
table.medium-button td,
table.large-button td {
  display: block;
  width: auto !important;
  text-align: center;
  background: #2ba6cb;
  border: 1px solid #2284a1;
  color: #ffffff;
  padding: 8px 0;
}

table.tiny-button td {
  padding: 5px 0 4px;
}

table.small-button td {
  padding: 8px 0 7px;
}

table.medium-button td {
  padding: 12px 0 10px;
}

table.large-button td {
  padding: 21px 0 18px;
}

table.button td a,
table.tiny-button td a,
table.small-button td a,
table.medium-button td a,
table.large-button td a {
  font-weight: bold;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size: 16px;
}

table.tiny-button td a {
  font-size: 12px;
  font-weight: normal;
}

table.small-button td a {
  font-size: 16px;
}

table.medium-button td a {
  font-size: 20px;
}

table.large-button td a {
  font-size: 24px;
}

table.button:hover td,
table.button:visited td,
table.button:active td {
  background: #2795b6 !important;
}

table.button:hover td a,
table.button:visited td a,
table.button:active td a {
  color: #fff !important;
}

table.button:hover td,
table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
  background: #2795b6 !important;
}

table.button:hover td a,
table.button:active td a,
table.button td a:visited,
table.tiny-button:hover td a,
table.tiny-button:active td a,
table.tiny-button td a:visited,
table.small-button:hover td a,
table.small-button:active td a,
table.small-button td a:visited,
table.medium-button:hover td a,
table.medium-button:active td a,
table.medium-button td a:visited,
table.large-button:hover td a,
table.large-button:active td a,
table.large-button td a:visited {
  color: #ffffff !important; 
}

table.secondary td {
  background: #e9e9e9;
  border-color: #d0d0d0;
  color: #555;
}

table.secondary td a {
  color: #555;
}

table.secondary:hover td {
  background: #d0d0d0 !important;
  color: #555;
}

table.secondary:hover td a,
table.secondary td a:visited,
table.secondary:active td a {
  color: #555 !important;
}

table.success td {
  background: #5da423;
  border-color: #457a1a;
}

table.success:hover td {
  background: #457a1a !important;
}

table.alert td {
  background: #c60f13;
  border-color: #970b0e;
}

table.alert:hover td {
  background: #970b0e !important;
}

table.radius td {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

table.round td {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

/* Outlook First */

body.outlook p {
  display: inline !important;
}

/*  Media Queries */

@media only screen and (max-width: 600px) {

  table[class="body"] img {
    width: auto !important;
    height: auto !important;
  }

  table[class="body"] center {
    min-width: 0 !important;
  }

  table[class="body"] .container {
    width: 95% !important;
  }

  table[class="body"] .row {
    width: 100% !important;
    display: block !important;
  }

  table[class="body"] .wrapper {
    display: block !important;
    padding-right: 0 !important;
  }

  table[class="body"] .columns,
  table[class="body"] .column {
    table-layout: fixed !important;
    float: none !important;
    width: 100% !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    display: block !important;
  }

  table[class="body"] .wrapper.first .columns,
  table[class="body"] .wrapper.first .column {
    display: table !important;
  }

  table[class="body"] table.columns td,
  table[class="body"] table.column td {
    width: 100% !important;
  }

  table[class="body"] .columns td.one,
  table[class="body"] .column td.one { width: 8.333333% !important; }
  table[class="body"] .columns td.two,
  table[class="body"] .column td.two { width: 16.666666% !important; }
  table[class="body"] .columns td.three,
  table[class="body"] .column td.three { width: 25% !important; }
  table[class="body"] .columns td.four,
  table[class="body"] .column td.four { width: 33.333333% !important; }
  table[class="body"] .columns td.five,
  table[class="body"] .column td.five { width: 41.666666% !important; }
  table[class="body"] .columns td.six,
  table[class="body"] .column td.six { width: 50% !important; }
  table[class="body"] .columns td.seven,
  table[class="body"] .column td.seven { width: 58.333333% !important; }
  table[class="body"] .columns td.eight,
  table[class="body"] .column td.eight { width: 66.666666% !important; }
  table[class="body"] .columns td.nine,
  table[class="body"] .column td.nine { width: 75% !important; }
  table[class="body"] .columns td.ten,
  table[class="body"] .column td.ten { width: 83.333333% !important; }
  table[class="body"] .columns td.eleven,
  table[class="body"] .column td.eleven { width: 91.666666% !important; }
  table[class="body"] .columns td.twelve,
  table[class="body"] .column td.twelve { width: 100% !important; }

  table[class="body"] td.offset-by-one,
  table[class="body"] td.offset-by-two,
  table[class="body"] td.offset-by-three,
  table[class="body"] td.offset-by-four,
  table[class="body"] td.offset-by-five,
  table[class="body"] td.offset-by-six,
  table[class="body"] td.offset-by-seven,
  table[class="body"] td.offset-by-eight,
  table[class="body"] td.offset-by-nine,
  table[class="body"] td.offset-by-ten,
  table[class="body"] td.offset-by-eleven {
    padding-left: 0 !important;
  }

  table[class="body"] table.columns td.expander {
    width: 1px !important;
  }

  table[class="body"] .right-text-pad,
  table[class="body"] .text-pad-right {
    padding-left: 10px !important;
  }

  table[class="body"] .left-text-pad,
  table[class="body"] .text-pad-left {
    padding-right: 10px !important;
  }

  table[class="body"] .hide-for-small,
  table[class="body"] .show-for-desktop {
    display: none !important;
  }

  table[class="body"] .show-for-small,
  table[class="body"] .hide-for-desktop {
    display: inherit !important;
  }
}



      table.columns .text-pad {
        padding-left: 20px;
        padding-right: 20px;
      }

      table.columns .left-text-pad {
        padding-left: 20px;
      }

      table.columns .right-text-pad {
        padding-right: 20px;
      }

      body, table.body, p {
        font-size: 13px;
        line-height: 20px;
      }

      a {
        color: #cc7691;
      }

      a:active, a:visited {
        color: #cc7691 !important;
      }

      a:hover {
        color: #b94569 !important;
      }

      body, .body {
        background: #f6f6f6;
        min-width: 598px;
      }

      .container {
        background: #fff;
      }

      .header, .header .container, .headline {
        background: #012C35;
      }

      .header td.wrapper {
        padding-top: 24px;
        padding-bottom: 8px;
      }

      .date {
        text-align: right;
      }

      .date span {
        text-transform: uppercase;
        color: #fff;
        font-weight: bold;
        font-size: 11px;
        line-height: 25px;
      }

      .headline .columns td {
        padding-top: 10px;
        padding-bottom: 0;
      }

      .headline h1 {
        font-size: 36px;
        line-height: 36px;
      }

      table.lede td {
        padding-top: 10px;
        padding-bottom: 0;
      }

      .lede p {
        font-size: 16px;
        line-height: 24px;
      }

      .ad-break .container,
      .break-footer .container,
      .unsubscribe .container {
        background-color: transparent;
      }

      .ad-break td.wrapper {
        padding-top: 30px;
        padding-bottom: 20px;
      }

      table.ad-break center {
        min-width: 0;
      }

      td.course {
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .course h4 {
        font-size: 28px;
        line-height: 28px;
        font-weight: 300;
      }

      .course img {
        margin-top: 4px;
      }

      .break-footer h6 {
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
      }

      table.break-footer center {
        min-width: 0;
      }

      .break-footer .cta-line-top {
        padding-top: 20px;
      }

      .break-footer .cta-line-bottom {
        padding-bottom: 20px;
      }

      table.unsubscribe td,
      .unsubscribe p {
        padding: 0;
      }

      .unsubscribe .wrapper {
        border-top: 1px dotted #cccccc;
        padding: 20px 0;
      }

      .unsubscribe p {
        color: #777;
        font-size: 12px;
      }

      .footer, .footer .container {
        background: #eaeaea;
      }

      .footer .columns td {
        font-size: 11px;
        color: #999;
        padding: 10px 0 20px;
      }

      .footer .columns td.right {
        text-align: right;
      }

      @media only screen and (max-width: 600px) {
        
        body, 
        table[class="body"] {
          min-width: 0px !important;
        }

        table[class="body"] .right-text-pad {
          padding-left: 20px !important;
        }

        table[class="body"] .left-text-pad {
          padding-right: 20px !important;
        }
      }


.body {
//  background: red;
}




            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console