fix body width override handling

data/arturia.mjml

@@ -0,0 +1,80 @@
+<mjml>
+    <mj-body background-color="#F2F2F2">
+        <mj-section padding-bottom="0px">
+            <mj-column vertical-align="middle">
+                <mj-image width="144px" align="center" src="https://www.arturia.com/images/newsletters/2016-02-black/Logo-Baseline-0.15x.png" href="https://www.arturia.com" alt=""></mj-image>
+            </mj-column>
+            <mj-column></mj-column>
+            <mj-column>
+                <mj-text font-family="Helvetica,Arial,sans-serif" line-height="120%" text-decoration="underline" align="left">NEWS<br />MARCH 2016</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section background-color="#000001">
+            <mj-column>
+                <mj-text padding-top="0px" padding-bottom="0px" color="#FFFFFE" font-family="Helvetica,Arial,sans-serif" font-size="14px" line-height="120%">Dear {firstname}, <br /><br /> You used to follow rhythm, now rhythm follows you, everywhere you go!<br /> Discover iSpark, the mobile transposition of our renowned beat-making solution Spark.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-column background-color="#FFFFFE">
+                <mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/05.jpg" href="https://www.arturia.com/products/ipad-synths/ispark/overview" alt=""></mj-image>
+                <mj-text padding-top="25px" padding-bottom="25px" font-family="Helvetica,Arial,sans-serif" font-size="14px" line-height="120%">iSpark is a powerful mobile production tool allowing you to create and play rhythmic tracks, complex grooves and even complete songs. Its sonic strike force comes along with an unwavering workflow and a real flexibility.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-column background-color="#FFFFFE">
+                <mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/06.jpg" href="https://www.arturia.com/products/ipad-synths/ispark/overview" alt=""></mj-image>
+                <mj-text padding-top="25px" padding-bottom="25px" font-family="Helvetica,Arial,sans-serif" font-size="14px" line-height="120%">Check out the iSpark introduction movie shot during the Arturia Experience event at the ADE featuring the Dutch beatmaker FilosofischeStilte.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-column background-color="#FFFFFE">
+                <mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/07.jpg" href="https://www.arturia.com/products/ipad-synths/ispark/details" alt=""></mj-image>
+                <mj-text padding-top="25px" padding-bottom="25px" font-family="Helvetica,Arial,sans-serif" font-size="14px" line-height="120%">Follow Mauricio Garcia, Arturia Product Specialist, presenting you the many clever features of iSpark in this series of tutorials.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-column background-color="#FFFFFE">
+                <mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/08.jpg" href="https://www.arturia.com/products/ipad-synths/ispark/details" alt=""></mj-image>
+                <mj-text padding-top="25px" font-family="Helvetica,Arial,sans-serif" font-size="14px" line-height="120%">iSpark includes a tremendous collection of factory kits and individual instruments covering most of the field of application of beat-making but it is also compatible with the existing Spark resources and Expansion Packs.</mj-text>
+                <mj-button background-color="#2DDCB4"
+                           padding-bottom="25px" border-radius="8px" href="https://www.arturia.com/products/ipad-synths/ispark/overview" font-size="14px" font-family="Helvetica,Arial,sans-serif" line-height="120%">Learn more about iSpark</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-section background-color="#000001">
+            <mj-column>
+                <mj-text color="#FFFFFE" font-family="Helvetica,Arial,sans-serif" font-size="14px">Musically yours,<br /> The Arturia Team</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section padding-left="0px" padding-right="0px" padding-top="0px" padding-bottom="0px">
+            <mj-column>
+                <mj-image width="86px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/facebook_arturia.png" href="http://www.facebook.com/arturia2" alt=""></mj-image>
+            </mj-column>
+            <mj-column>
+                <mj-image width="86px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/youtube.png" href="http://www.youtube.com/arturiaweb" alt=""></mj-image>
+            </mj-column>
+            <mj-column>
+                <mj-image width="86px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/Soundcloud.png" href="http://soundcloud.com/arturia-official" alt=""></mj-image>
+            </mj-column>
+            <mj-column>
+                <mj-image width="86px" src="https://www.arturia.com/images/newsletters/2016-02-ispark/twitter_arturia.png" href="http://twitter.com/arturiaofficial" alt=""></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section padding-top="0px" padding-bottom="0px">
+            <mj-column>
+                <mj-text font-family="Helvetica,Arial,sans-serif" padding-top="0px" align="center">See this email in your browser <a href="https://www.arturia.com/images/newsletters/2016-02-ispark/newsletter.html" style="text-decoration:none;color:#2DDCB4">here</a></mj-text>
+                <mj-divider padding-left="0px" padding-right="0px"></mj-divider>
+            </mj-column>
+        </mj-section>
+        <mj-section padding-bottom="0px" padding-top="0px">
+            <mj-column>
+                <mj-text padding-bottom="0px" padding-top="0px" font-family="Helvetica,Arial,sans-serif" font-size="10px" line-height="12px">Your email address is on this list as a result of a subscription, information request, competition, or other correspondence you may have had with us in the past. If you would like to be removed from our list, check the email address this newsletter
+                    was sent to and use the following link: <a href="https://www.arturia.com/index.php?option=com_myarturia&view=newsletter&task=unsubscribeFromEmail&email={email}&token={title}&utm_source=elasticemail&utm_medium=email&utm_campaign=arturia_unsubscribe_2016&utm_term=nl-ispark-launch&utm_content=unsubscribe_footer"
+                                                               style="text-decoration:none;color:#2DDCB4">Unsubscribe</a>. Privacy policy available <a href="https://www.arturia.com/privacypolicy" style="text-decoration:none;color:#2DDCB4">here</a>.</mj-text>
+                <mj-text padding-bottom="0px" font-family="Helvetica,Arial,sans-serif"
+                         font-size="10px" line-height="12px">ARTURIA: <a href="https://www.arturia.com" style="text-decoration:none;color:#2DDCB4">https://www.arturia.com</a> - Contact: <a href="mailto:[email protected]" style="text-decoration:none;color:#2DDCB4">info</a><br /> ARTURIA France: 30 chemin
+                    du vieux chêne, 38240 Meylan - FRANCE<br /> ARTURIA US: : 5776-D Lindero Cyn Rd #239 -Westlake Village, CA 91362 - USA</mj-text>
+                <mj-divider padding-left="0px" padding-right="0px"></mj-divider>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

data/basic.mjml

@@ -0,0 +1,64 @@
+<mjml>
+    <mj-body>
+        <mj-raw>
+            <!-- Company Header -->
+        </mj-raw>
+        <mj-section background-color="#f0f0f0">
+            <mj-column>
+                <mj-text font-style="italic" font-size="20px" color="#626262">My Company</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-raw>
+            <!-- Image Header -->
+        </mj-raw>
+        <mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg" background-size="cover" background-repeat="no-repeat">
+            <mj-column width="600px">
+                <mj-text align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Slogan here</mj-text>
+                <mj-button background-color="#F63A4D" href="#">Promotion</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-raw>
+            <!-- Intro text -->
+        </mj-raw>
+        <mj-section background-color="#fafafa">
+            <mj-column width="400px">
+                <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
+                <mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus.
+                    Sed eget nulla elit. Nulla aliquet mollis faucibus.</mj-text>
+                <mj-button background-color="#F45E43" href="#">Learn more</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-raw>
+            <!-- Side image -->
+        </mj-raw>
+        <mj-section background-color="white">
+            <mj-raw>
+                <!-- Left image -->
+            </mj-raw>
+            <mj-column>
+                <mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg"></mj-image>
+            </mj-column>
+            <mj-raw>
+                <!-- right paragraph -->
+            </mj-raw>
+            <mj-column>
+                <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">Find amazing places</mj-text>
+                <mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-raw>
+            <!-- Icons -->
+        </mj-raw>
+        <mj-section background-color="#fbfbfb">
+            <mj-column>
+                <mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0l.png"></mj-image>
+            </mj-column>
+            <mj-column>
+                <mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x01.png"></mj-image>
+            </mj-column>
+            <mj-column>
+                <mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0s.png"></mj-image>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

data/black-friday.mjml

@@ -0,0 +1,35 @@
+<mjml>
+    <mj-body background-color="#F4F4F4" color="#55575d" font-family="Arial, sans-serif">
+        <mj-section background-color="#000000" background-repeat="no-repeat" text-align="center" vertical-align="top">
+            <mj-column>
+                <mj-image align="center" border="none" padding-bottom="30px" padding="10px 25px" src="http://5vph.mj.am/img/5vph/b/1g86w/0g67t.png" target="_blank" title="" width="180px"></mj-image>
+                <mj-text align="left" color="#55575d" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding-bottom="0px" padding-top="0px" padding="10px 25px">
+                    <p style="line-height: 18px; margin: 10px 0; text-align: center;font-size:14px;color:#ffffff;font-family:'Times New Roman',Helvetica,Arial,sans-serif">WOMEN&nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; &nbsp; MEN&nbsp; &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; &nbsp; KIDS</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section background-color="#000000" background-repeat="no-repeat" text-align="center" vertical-align="top" padding="0 0 0 0">
+            <mj-column>
+                <mj-image align="center" border="none" padding-bottom="0px" padding-left="0px" padding-right="0px" padding="0px 25px" src="http://5vph.mj.am/img/5vph/b/1g86w/0696u.jpeg" target="_blank" title="" width="780px"></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section background-color="#000000" background-repeat="no-repeat" text-align="center" vertical-align="top" padding="0 0 0 0">
+            <mj-column>
+                <mj-text align="left" color="#55575d" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding-bottom="5px" padding-top="25px" padding="10px 25px">
+                    <p style="line-height: 60px; text-align: center; margin: 10px 0;font-size:55px;color:#fcfcfc;font-family:'Times New Roman',Helvetica,Arial,sans-serif"><b>Black Friday</b></p>
+                </mj-text>
+                <mj-text align="left" color="#55575d" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding-bottom="20px" padding-top="0px" padding="10px 25px">
+                    <p style="line-height: 30px; text-align: center; margin: 10px 0;color:#f5f5f5;font-size:25px;font-family:'Times New Roman',Helvetica,Arial,sans-serif"><b>Take an&nbsp; extra 50% off</b><br><span style="color:#ffffff;font-size:18px;font-family:'Times New Roman',Helvetica,Arial,sans-serif">Use code SALEONSALE* at checkout</span></p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section background-color="#000000" background-repeat="no-repeat" text-align="center" vertical-align="top" padding-bottom="40px" padding="0 0 0 0">
+            <mj-column>
+                <mj-button background-color="#ffffff" border-radius="3px" font-family="Times New Roman, Helvetica, Arial, sans-serif" font-size="18px" font-weight="normal" inner-padding="10px 25px" padding-bottom="30px" padding="10px 25px">Shop Now</mj-button>
+                <mj-text align="left" color="#55575d" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding-bottom="0px" padding-top="5px" padding="10px 25px">
+                    <p style="line-height: 16px; text-align: center; margin: 10px 0;font-size:12px;color:#ffffff;font-family:'Times New Roman',Helvetica,Arial,sans-serif">* Offer valid on Allura purchases on 17/29/11 at 11:59 pm. No price adjustments on previous&nbsp;<br><span style="color:#ffffff;font-family:'Times New Roman',Helvetica,Arial,sans-serif">purchases, offer limited to stock. Cannot be combined with any offer or promotion other than free.</span></p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

data/body-width-override.mjml

@@ -0,0 +1,9 @@
+<mjml>
+    <mj-body background-color="#E7E7E7" width="700px">
+        <mj-section background-color="#000000" padding-bottom="15px" border-radius="10px" >
+            <mj-column width="100%">
+                <mj-text>test</mj-text>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

data/card.mjml

@@ -0,0 +1,59 @@
+<mjml>
+    <mj-head>
+        <mj-title>Say hello to card</mj-title>
+        <mj-font name="Montserrat" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500"></mj-font>
+        <mj-attributes>
+            <mj-all font-family="Montserrat, Helvetica, Arial, sans-serif"></mj-all>
+            <mj-text font-weight="400" font-size="16px" color="#000000" line-height="24px"></mj-text>
+            <mj-section padding="0px"></mj-section>
+        </mj-attributes>
+    </mj-head>
+    <mj-body background-color="#F2F2F2">
+        <mj-section padding="10px 0 20px 0">
+            <mj-column>
+                <mj-text align="center" color="#9B9B9B" font-size="11px">Writing A Good Headline For Your Advertisement</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section padding="20px 20px 0 20px" background-color="#FFFFFF">
+            <mj-column width="35%">
+                <mj-text align="left" font-size="20px" font-weight="500">// BR&amp;AND</mj-text>
+            </mj-column>
+            <mj-column width="65%">
+                <mj-text align="right" font-size="11px"><a href="#" style="color: #000000; text-decoration: none;">HOME</a>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">SERVICE</a>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">THIRD</a></mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section padding="20px 20px 0 20px" background-color="#FFFFFF">
+            <mj-column>
+                <mj-text align="center" font-weight="300" padding="30px 40px 10px 40px" font-size="32px" line-height="40px" color="#5FA91D">Free Advertising For Your Online Business.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section padding="10px 20px" background-color="#FFFFFF">
+            <mj-column>
+                <mj-divider width="30px" border-width="3px" border-color="#9B9B9B"></mj-divider>
+            </mj-column>
+        </mj-section>
+        <mj-section padding="0 20px 20px 20px" background-color="#FFFFFF">
+            <mj-column width="80%">
+                <mj-text align="center" padding-top="10px" font-weight="500" padding="0px">A Right Media Mix Can Make The Difference.</mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section background-url="http://nimus.de/share/tpl-card/bg.jpg" vertical-align="middle" background-size="cover" background-repeat="no-repeat">
+            <mj-column width="100%">
+                <mj-image src="http://nimus.de/share/tpl-card/lineshadow.png" alt="" align="center" border="none" padding="0px"></mj-image>
+                <mj-text align="center" padding="50px 40px 0 40px" font-weight="300">Marketers/advertisers usually focus their efforts on the people responsible for making the purchase. In many cases, this is an effective approach but in other cases it can make for a totally useless marketing campaign.</mj-text>
+                <mj-button align="center"
+                           background-color="#5FA91D" color="#FFFFFF" border-radius="2px" href="#" inner-padding="15px 30px" padding-bottom="100px" padding-top="20px">CALL TO ACTION</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-section padding="50px 0 0 0" background-color="#FFFFFF">
+            <mj-column>
+                <mj-image src="http://nimus.de/share/tpl-card/bottom.png" alt="bottom border" align="center" border="none" padding="0px"></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section padding="10px 0 20px 0">
+            <mj-column>
+                <mj-text align="center" color="#9B9B9B" font-size="11px"><a href="#" style="color: #9B9B9B;">Unsubscribe</a> from this newsletter<br>52 Edison Court Suite 259 / East Aidabury / Cambodi<br> <a href="#" style="color: #9B9B9B; text-decoration:none;">Made by svenhaustein.de</a></mj-text>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>