Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="logo-wrapper">
        <div id="logo">&#10092;✉️&#10093;</div>
        <h1>HTML E-mail Builder</h1>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label for="">Width:</label><input type="number" id="tablewidth" class="form-control" value="600" style="width:100px; display:inline; margin-left: 10px;" />&nbsp;px.
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h5>Templates</h5>
      <button id="html-email" class="btn btn-primary btn-md">HTML e-mail template</button>
      <button id="reset-classes" class="btn btn-primary btn-md">Reset CSS</button>
      <button id="dev-classes" class="btn btn-primary btn-md">Development Classes</button>

    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-12">
      <h5>Layout</h5>
      <button id="create-table" class="btn btn-primary btn-md">Create table</button>
      <button id="create-cols" class="btn btn-primary btn-md">Create columns</button>
      <button id="create-rows" class="btn btn-primary btn-md">Create rows</button>
      <button id="create-link" class="btn btn-primary btn-md">Create link</button>
      <button id="create-button" class="btn btn-primary btn-md">Create button</button>
      <buttom id="empty-td" class="btn btn-primary btn-md">Empty cell</buttom>
      <button id="create-image" class="btn btn-primary btn-md">Image</button>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-12">
      <h5>Tools</h5>
      <button id="create-hr" class="btn btn-secondary btn-sm">Create spacer</button>
      <button id="create-vml-button" class="btn btn-secondary btn-sm">Create VML button</button>
      <button id="unclosed-tag-finder-button" class="btn btn-secondary btn-sm">Unclosed tag finder</button>
      <button id="media-query" class="btn btn-secondary btn-sm">Media Query</button>
      <button id="short-tags" class="btn btn-secondary btn-sm">Apply Snippets</button>
      <button id="remove-comments" class="btn btn-secondary btn-sm">Remove comments</button>
      <h6>ASCII entities</h6>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&bull\;">&bull;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&lsquo\; \&rsquo\;">&lsquo; &rsquo;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&ldquo\; \&rdquo\;">&ldquo; &rdquo;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&ndash\;">&ndash;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&mdash\;">&mdash;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10072\;">&#10072;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\copy\;">&copy;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\reg\;">&reg;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&trade\;">&trade;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\cent\;">&cent;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\pound\;">&pound;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\euro\;">&euro;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\yen\;">&yen;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9658\;">&#9658;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10140\;">&#10140;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\rarr\;">&rarr;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10093\;">&#10093;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10095\;">&#10095;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10097\;">&#10097;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10006\;">&#10006;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\star\;">&star;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\starf\;">&starf;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\phone\;">&phone;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\check\;">&check;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\cross\;">&cross;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\hearts\;">&hearts;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10052\;">&#10052;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9729\;">&#9729;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9728\;">&#9728;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9835\;">&#9835;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9776\;">&#9776;</button>
      <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10005\;">&#10005;</button>
    </div>
  </div>
  <hr />
  <!--div class="row" style="display: none;">
    https://automattic.github.io/juice/index.build.js
    <div class="col-md-12">
      <h3>Inliner</h3>
      <button id="code-inliner" class="btn btn-primary btn-md">Inline styles</button>
      <button id="open-inliner-options" class="btn btn-primary btn-md">Inliner options</button>
    </div>
  </div -->
  <!--div class="row" id="inliner-options-panel">
    <div class="col-md-12">
      <div class="form-group">
        <ul>
          <li><label><input type="checkbox" name="applyStyleTags" checked><strong>applyStyleTags</strong> - whether to inline styles in &lt;style&gt;&lt;/style&gt;</label></li>
          <li><label><input type="checkbox" name="removeStyleTags" checked><strong>removeStyleTags</strong> - whether to remove the original &lt;style&gt;&lt;/style&gt; tags after (possibly) inlining the css from them.</label></li>
          <li><label><input type="checkbox" name="preserveMediaQueries" checked><strong>preserveMediaQueries</strong> - preserves all media queries (and contained styles) within &lt;style&gt;&lt;/style&gt; tags as a refinement when removeStyleTags is true. Other styles are removed.</label></li>
          <li><label><input type="checkbox" name="preserveFontFaces" checked><strong>preserveFontFaces</strong> - preserves all @font-face within &lt;style&gt;&lt;/style&gt; tags as a refinement when removeStyleTags is true. Other styles are removed.</label></li>
          <li><label><input type="checkbox" name="applyWidthAttributes" checked><strong>applyWidthAttributes</strong> - whether to use any CSS pixel widths to create width attributes on elements set in juice.widthElements.</label></li>
          <li><label><input type="checkbox" name="applyHeightAttributes" checked><strong>applyHeightAttributes</strong> - whether to use any CSS pixel heights to create height attributes on elements set in juice.heightElements.</label></li>
          <li><label><input type="checkbox" name="applyAttributesTableElements" checked><strong>applyAttributesTableElements</strong> - whether to create attributes for styles in juice.styleToAttribute on elements set in juice.tableElements.</label></li>
          <li><label><input type="checkbox" name="inlinePseudoElements"><strong>inlinePseudoElements</strong> - Whether to insert pseudo elements (::before and ::after) as &lt;span&gt; into the DOM. Note: Inserting pseudo elements will modify the DOM and may conflict with CSS selectors elsewhere on the page (e.g., :last-child).</label></li>
          <li><label><input type="checkbox" name="xmlMode"><strong>xmlMode</strong> - whether to output XML/XHTML with all tags closed. Note that the input must also be valid XML/XHTML or you will get undesirable results.</label></li>
          <li><label><input type="checkbox" name="preserveImportant"><strong>preserveImportant</strong> - preserves !important in values.</label></li>
        </ul>
      </div>
    </div>
  </div -->
  <div class="row">
    <div class="col-md-12">
      <div class="form-group" id="code-wrapper">
        <textarea name="" id="code" cols="30" rows="10" class="form-control"></textarea>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div id="unclosed-tag-finder-results"></div>
      <pre id="unclosed-tag-finder-code"></pre>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button id="width-1" class="btn btn-sm btn-secondary">🖥&nbsp;&nbsp;Full width (100%)</button>
      <button id="width-2" class="btn btn-sm btn-secondary">🖥&nbsp;&nbsp;Desktop (1000px)</button>
      <button id="width-3" class="btn btn-sm btn-secondary">💻&nbsp;&nbsp;Minimun width (600px)</button>
      <button id="width-4" class="btn btn-sm btn-secondary"><span style="display: inline-block; transform: rotate(90deg); vertical-align: baseline;">📱</span>&nbsp;Mobile (480px)</button>
      <button id="width-5" class="btn btn-sm btn-secondary">📱&nbsp;Mobile minimun (320px)</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <iframe id="preview-frame" src="" frameborder="0"></iframe>
    </div>
  </div>
 <hr />
<div class="row">
  <div class="col-md-12">
    <h4>External tools</h4>
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
    <h5>Inliners</h5>
    <ul>
      <li><a href="https://inliner.cm/" target="_blank">Campaign Monitor</a></li>
      <li><a href="https://templates.mailchimp.com/resources/inline-css/" target="_blank">Mailchimp</a></li>
      <li><a href="http://premailer.dialect.ca/" target="_blank">Premailer</a></li>
      <li><a href="https://inlinestyler.torchbox.com/" target="_blank">Inline Styler</a></li>
      <li><a href="https://www.myintervals.com/emogrifier.php" target="_blank">Emogrifier</a></li>
      <li><a href="http://www.mailermailer.com/labs/tools/magic-css-inliner-tool.rwp" target="_blank">MailerMailer</a></li>
      <li><a href="https://tikku.com/css-inline-transformer-simplified/#css_inline_tabs_1" target="_blank">Tikku</a></li>
      <li><a href="http://labs.sign-up.to/mally/" target="_blank">Mally</a></li>
      <li><a href="https://www.cssout.com/" target="_blank">CSS Out (uninliner)</a></li>
    </ul>
    <h5>Send Email</h5>
    <ul>
      <li><a href="https://putsmail.com/" target="_blank">PutsMail: Test your HTML emails before sending them!</a></li>
    </ul>
    <h5>Validation Services</h5>
    <ul>
      <li><a href="https://validator.w3.org/#validate_by_input" target="_blank">Markup Validation Service</a></li>
      <li><a href="http://jona.ca/blog/unclosed-tag-finder" target="_blank">Unclosed Tag Finder</a></li>
    </ul>
  </div>
  <div class="col-sm-4">
    <h5>ASCII encoder</h5>
    <ul>
      <li><a href="https://www.emailonacid.com/character-converter" target="_blank"><strong>HTML Character Converter</strong></a></li>
      <li><a href="http://patorjk.com/software/taag/#p=display&f=Small&t=HTML%20Email" target="_blank"><strong>Text to ASCII Art Generator</strong></a></li>
      <li><a href="http://www.emailology.org/#4" target="_blank">Special Character Conversion</a></li>
      <li><a href="http://htmlarrows.com/" target="_blank">A delightful reference for HTML Symbols, Entities and ASCII Character Codes</a></li>
      <li><a href="http://www.character-code.com/" target="_blank">HTML Code, Hexadecimal Code and HTML Entity for ASCII characters from A-Z.</a></li>
      <li><a href="https://litmus.com/blog/best-practices-for-plain-text-emails-a-look-at-why-theyre-important" target="_blank">Best Practices for Plain Text Emails + A Look at Why They’re Important</a></li>
    </ul>

  </div>
  <div class="col-sm-4">
    <h5>Code Generators</h5>
    <ul>
      <li><a href="https://buttons.cm/" target="_blank">Bulletproof email buttons</a></li>
      <li><a href="https://backgrounds.cm/" target="_blank">Bulletproof background images</a></li>
      <li><a href="http://www.emailology.org/#1" target="_blank">Email Boilerplate</a></li>
      <li><a href="http://responsiveemailpatterns.com/" target="_blank">Responsive Email Patterns</a></li>
      <li><a href="http://responsiveemailresources.com/" target="_blank">Responsive Email Resources</a></li>
      <li><a href="http://www.colorzilla.com/gradient-editor/" target="_blank"><strong>ColorZilla:</strong> Ultimate CSS Gradient Generator</a></li>
      <li><a href="http://www.patternify.com/" target="_blank"><strong>Patternify:</strong> CSS Pattern Generator</a></li>
      <li><a href="http://bada55.io/" target="_blank"><strong>BADA55</strong></a></li>
      <li><a href="https://uigradients.com/#Html" target="_blank"><strong>uiGradients</strong></a></li>
      <li><a href="https://www.gradient-animator.com/" target="_blank"><strong>CSS GRADIENT ANIMATOR</strong></a></li>
      
      <li><a href="https://bennettfeely.com/cssynth/" target="_blank"><strong>CSSynth</strong></a></li>
      <li><a href="http://patorjk.com/text-color-fader/" target="_blank"><strong>Text Color Fader</strong></a></li>
      <li><a href="https://www.image-map.net/" target="_blank"><strong>Image Map Generator</strong></a></li>
      <li><a href="https://www.emailonacid.com/blog/article/email-development/image-map-support-in-html-email/" target="_blank">Image Map Support in HTML Email</a></li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
  <h4>Commands</h4>
    <p><strong>$email</strong>: creates the email template.</p>
    <p><strong>$reset</strong>: generates the css for e-mail reset.</p>
    <p><strong>$responsive</strong>: generates the css for responsive e-mails</p>
    <p><strong>$container</strong>: creates a general container for all other modules/components.</p>
    <p><strong>$wrapper</strong>: creates a wrapper to nest another container structures.</p>
    <p><strong>$row</strong>: creates a single row.</p>
    <h5>Modules</h5>
    <p><strong>$preheader</strong>: create a hidden preheader.</p>
    <p><strong>$hero</strong>: create a 100% image (responsive).</p>
    <p><strong>$title</strong>: create title text.</p>
    <p><strong>$text</strong>: create a regular text.</p>
    <p><strong>$cta</strong>: create a bulletproof button.</p>
    <p><strong>$spacer</strong>: create a vertical spacer (40px default).</p>
    <p><strong>$txt+img</strong>: create text next to an image (responsive).</p>
    <p><strong>$img+txt</strong>: create an image next to text (responsive).</p>
    <h5>Snippets</h5>
    <p><strong>$link</strong>: create link to a url.</p>
    <p><strong>$image</strong>: create an image.</p>
    <p><strong>$img-link</strong>: create a linked image.</p>
    <h6>Outlook specific codes</h6>
    <p><strong>$if-mso</strong>: content will show only if the client is Internet Explorer.</p>
    <p><strong>$if-not-mso</strong>: content will show only if the client is not Internet Explorer.</p>
    <p><strong>$if-outlook</strong>: content will show only if the client is Outlook.</p>
    <p><strong>$mso-hide</strong>: hide all content for Outlook.</p>
  </div>
</div>
  </div>
<!-- TODO 
Create menu with all the commands for quick replace
Send to prefilled editor: https://blog.codepen.io/documentation/api/prefill/
-->
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
/***********************************************************************************************************************
MessageBox - A jQuery Plugin to replace Javascript's window.alert(), window.confirm() and window.prompt() functions
    Author          : Gaspare Sganga
    Version         : 2.2.1
    License         : MIT
    Documentation   : http://gasparesganga.com/labs/jquery-message-box/
***********************************************************************************************************************/


/*
    You can customize your MessageBox style directly in this file 
    or override some classes/styles using an external CSS file loaded after this.
*/


/* Overlay */

.messagebox_overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

.messagebox_overlay *:focus {
  outline: 0;
}


/* MessageBox */

.messagebox {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10pt;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  color: #303030;
  background-color: #fcfcfc;
  border: 1px solid #c8c8c8;
  box-shadow: 0px 2px 4px #a0a0a0;
  max-height: 90%;
  /* This value is useful only when "top" option is set to "auto" */
  max-width: 90%;
  min-width: 300px;
}


/* Content */

.messagebox_content {
  padding: 20px;
  padding-bottom: 0;
  /* In order to preserve "padding-bottom" when the content is taller than the MessageBox and thus scrolled on the Y-axis, use the following :after pseudo-class "height" value instead of "padding-bottom" here! */
}

.messagebox_content:after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 20px;
  /* Use this value as if it was #messagebox_content's "padding-bottom" to preserve it when the content overflows Y-axis and the scrollbar is shown */
}


/* Label for Input */

.messagebox_content_label {
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  font-style: italic;
}


/* Input (it applies to selects too) */

.messagebox_content_input {
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  padding: 3px;
  color: #303030;
  border: 1px solid #909090;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  text-align: left;
}

.messagebox_content_input:hover {
  border-color: #707070;
}

.messagebox_content_input:focus {
  border-color: #707070;
  box-shadow: inset 0px 0px 3px #ffd540;
}


/* Input style when placed inside a label */

.messagebox_content_label .messagebox_content_input {
  margin-top: 4px;
}


/* Select's "fake placeholder" */

.messagebox_content_input_selectplaceholder {
  color: #909090;
}


/* Error */

.messagebox_content_error {
  background-color: #fad0d5;
  color: #a02020;
  margin-top: 15px;
  margin-bottom: -10px;
  padding: 4px 6px;
  border-radius: 2px;
}


/* Buttons */

.messagebox_buttons {
  background-color: #f5f5f5;
  border-top: 1px solid #c8c8c8;
  padding: 10px 20px 0px 20px;
  text-align: center;
}

.messagebox_buttons button {
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  text-align: center;
  min-width: 75px;
  margin: 0px 4px 10px 4px;
  padding: 5px 10px;
  cursor: pointer;
  color: #404040;
  background-color: #e9e9e9;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.0) 100%);
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.messagebox_buttons button:hover {
  color: #202020;
  background-color: #f0f0f0;
}

.messagebox_buttons button:active {
  background-color: #e6e6e6;
  border: 1px solid #a0a0a0;
  box-shadow: inset 0px 0px 6px #d0d0d0;
}

.messagebox_buttons button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
//Unclosed tag finder
pre {
  background-color:#eee;
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}

pre code,
pre .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Courier New",Courier,Monospace;
  color:black;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}
#unclosed-tag-finder-code {
  background-color:#eee;
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}

#unclosed-tag-finder-code span,
#unclosed-tag-finder-code .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Courier New",Courier,Monospace;
  color:black;
  display:block;
}

#unclosed-tag-finder-code .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

#unclosed-tag-finder-code .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

#unclosed-tag-finder-code .cl {
  display:block;
  clear:both;
}
//CSS
body {
  margin: 10px;
  background-color: #CCC;
}
#code {
  color: #D8D8D8;
  background-color: #1D4E6D;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px;
  //white-space: nowrap;
  overflow: auto;
  font: 18px 'Source Code Pro', 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-weight: bold;
  width: 100%;
  height: 400px;
  resize: none;
  outline: none;
  border: none;
}
.btn {
  cursor: pointer;
  margin-bottom: 3px;
}
#logo {
  cursor: pointer;
  margin: 3px 10px 10px 3px;
  display: inline-block;
  width: 64px;
  height: 64px;
  text-shadow: 0px 0px 6px rgba(150, 150, 150, 1);
	border-width : 0px 0px 0px 0px ;
	border-style : solid solid solid solid;
	border-color : rgba(179,102,179,1) rgba(179,102,179,1) rgba(179,102,179,1) rgba(179,102,179,1) ;
	-webkit-box-shadow : 0px 2px 2px 0px rgba(0, 0, 0, .16);
	    -moz-box-shadow : 0px 2px 2px 0px rgba(0, 0, 0, .16);
	      -ms-box-shadow : 0px 2px 2px 0px rgba(0, 0, 0, .16);
	         -o-box-shadow : 0px 2px 2px 0px rgba(0, 0, 0, .16);
	              box-shadow : 0px 2px 2px 0px rgba(0, 0, 0, .16);
  border-radius: 10px;
  font-weight: normal;
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  padding-top: 16px;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.logo-wrapper h1{
  display: inline-block;
}
input[type=checkbox]{
  margin-right: 5px;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
}
#inliner-options-panel{
  display: none;
}
#preview-frame {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid #333333;
  background-color: #ffffff;
  overflow: auto;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
}
              
            
!

JS

              
                /***********************************************************************************************************************
MessageBox - A jQuery Plugin to replace Javascript's window.alert(), window.confirm() and window.prompt() functions
    Author          : Gaspare Sganga
    Version         : 2.2.1
    License         : MIT
    Documentation   : http://gasparesganga.com/labs/jquery-message-box/
***********************************************************************************************************************/
(function($, undefined) { 
  // Default Settings
  var _defaults = {
    buttonDone: "OK",
    buttonFail: undefined,
    buttonsOrder: "done fail",
    customClass: "",
    filterDone: undefined,
    filterFail: undefined,
    input: false,
    message: "",
    queue: true,
    speed: 200,
    top: "25%",
    width: "auto"
  };

  // Required CSS
  var _css = {
    overlay: {
      "box-sizing": "border-box",
      "display": "flex",
      "flex-flow": "column nowrap",
      "align-items": "center",
      "position": "fixed",
      "top": "0",
      "left": "0",
      "width": "100%",
      "height": "100%"
    },
    spacer: {
      "box-sizing": "border-box",
      "flex": "0 1 auto"
    },
    messagebox: {
      "box-sizing": "border-box",
      "flex": "0 1 auto",
      "display": "flex",
      "flex-flow": "column nowrap",
    },
    content: {
      "box-sizing": "border-box",
      "flex": "0 1 auto",
      "overflow-y": "auto"
    },
    buttons: {
      "box-sizing": "border-box",
      "flex": "0 0 auto"
    },
    boxSizing: {
      "box-sizing": "border-box"
    }
  };

  // Globals
  var _active = undefined;
  var _activeStack = [];
  var _queue = [];

  // Constants
  var _constants = {
    buttonDoneName: "buttonDone",
    buttonFailName: "buttonFail",
    errorSpeed: 200,
    keyCodeDone: [13],
    keyCodeFail: [27],
    maxHeightCoefficient: 1.5,
    topBuffer: 100
  };

  // **************************************************
  //  METHODS
  // **************************************************
  $.MessageBoxSetup = function(options) {
    $.extend(true, _defaults, options);
  };

  $.MessageBox = function(options) {
    if (!$.isPlainObject(options)) options = {
      message: options
    };
    var deferred = $.Deferred();
    var settings = $.extend(true, {}, _defaults, options);
    settings.top = $.trim(settings.top).toLowerCase();

    // Remove focus from active element
    $(document.activeElement).not(".messagebox_content_input").trigger("blur");

    // Create MessageBox instance
    var instance = {
      deferred: deferred,
      keyCodes: {},
      settings: settings
    };
    if (settings.queue) {
      _queue.push(instance);
      _ExecuteQueue();
    } else {
      if (_active) _activeStack.push(_active);
      _CreateMessageBox(instance);
    }

    // Return Promise
    return deferred.promise();
  };

  // **************************************************
  //  FUNCTIONS
  // **************************************************
  function _ExecuteQueue() {
    if (_active || !_queue.length) return;
    _CreateMessageBox(_queue.shift());
  }

  function _CreateMessageBox(instance) {
    var settings = instance.settings;
    _active = instance;

    // Overlay
    var overlay = $("<div>", {
        class: "messagebox_overlay"
      })
      .css(_css.overlay)
      .appendTo("body");

    // Spacer
    var spacer = $("<div>", {
        class: "messagebox_spacer"
      })
      .css(_css.spacer)
      .appendTo(overlay);

    // MessageBox
    var messageBox = $("<div>", {
        class: "messagebox"
      })
      .addClass(settings.customClass)
      .css(_css.messagebox)
      .data("instance", instance)
      .appendTo(overlay);
    if (settings.width) messageBox.outerWidth(settings.width);

    // Content
    var content = $("<div>", {
        class: "messagebox_content",
        html: settings.message
      })
      .css(_css.content)
      .appendTo(messageBox);

    // Input
    if (settings.input !== false && settings.input !== undefined && settings.input !== null) {
      var inputs = $("<div>", {
        class: "messagebox_content_inputs",
        css: _css.boxSizing
      }).appendTo(content);
      _ParseInputs(settings.input).appendTo(inputs).first().trigger("focus");
    }

    // Error
    $("<div>", {
        class: "messagebox_content_error",
        css: _css.boxSizing
      })
      .hide()
      .appendTo(content);

    // Buttons
    var buttonsWrapper = $("<div>", {
        class: "messagebox_buttons"
      })
      .css(_css.buttons)
      .appendTo(messageBox);

    // Button Done
    if (settings.buttonDone) {
      var buttons = $([]);
      if (typeof settings.buttonDone === "string") {
        buttons = buttons.add(_CreateButton("messagebox_button_done", _constants.buttonDoneName, {
          text: settings.buttonDone,
          keyCode: _constants.keyCodeDone.concat(settings.buttonFail ? [] : _constants.keyCodeFail)
        }, instance));
      } else {
        $.each(settings.buttonDone, function(name, definition) {
          buttons = buttons.add(_CreateButton("messagebox_button_done", name, definition, instance));
        });
      }
      buttons.appendTo(buttonsWrapper);
    }

    // Button Fail
    if (settings.buttonFail) {
      var buttons = $([]);
      if (typeof settings.buttonFail === "string") {
        buttons = buttons.add(_CreateButton("messagebox_button_fail", _constants.buttonFailName, {
          text: settings.buttonFail,
          keyCode: _constants.keyCodeFail
        }, instance));
      } else {
        $.each(settings.buttonFail, function(name, definition) {
          buttons = buttons.add(_CreateButton("messagebox_button_fail", name, definition, instance));
        });
      }
      if ($.trim(settings.buttonsOrder).toLowerCase().indexOf("d") === 0) {
        buttons.appendTo(buttonsWrapper);
      } else {
        buttons.prependTo(buttonsWrapper);
      }
    }

    // Calculate spacer's height
    var spacerHeight = 0;
    var spacerTopMargin = 0 - messageBox.outerHeight() - _constants.topBuffer;;
    if ($.trim(settings.top).toLowerCase() === "auto") {
      // Auto: center vertically using flexbox
      overlay.css("justify-content", "center");
      spacerTopMargin = spacerTopMargin - $(window).height();
    } else {
      // Custom: use a spacer element to workoround different browsers' flexbox specs interpretation
      overlay.css("justify-content", "flex-start");
      spacerHeight = settings.top;;
      // Calculate max-height
      if ($.trim(settings.top).toLowerCase().slice(-1) === "%") {
        // Percentage: set a fixed percentage value too
        messageBox.css("max-height", 100 - (parseInt(settings.top, 10) * _constants.maxHeightCoefficient) + "%");
      } else {
        // Fixed: refresh on every window.resize event
        messageBox.data("fRefreshMaxHeight", true);
      }
    }

    // Show MessageBox    
    spacer
      .data("spacerTopMargin", spacerTopMargin)
      .css({
        "height": 0,
        "margin-top": spacerTopMargin
      })
      .animate({
        "height": spacerHeight,
        "margin-top": 0
      }, settings.speed, function() {
        _SetMaxHeight(messageBox, $(window).height());
      });
  }

  function _CreateButton(mainClass, name, definition, instance) {
    if (typeof definition === "string") definition = {
      text: definition
    };
    // Button
    var button = $("<button>", {
        class: mainClass,
        text: definition.text || ""
      })
      .addClass(definition.class)
      .css(_css.boxSizing)
      .on("click", {
        name: name
      }, _Button_Click);

    // KeyCodes
    $.each(_ParseKeycodes(definition.keyCode), function(i, keyCode) {
      instance.keyCodes[keyCode] = button;
    });

    return button;
  }

  function _ParseKeycodes(keyCodes) {
    if (typeof keyCodes === "number" || typeof keyCodes === "string") keyCodes = [keyCodes];
    var ret = [];
    if ($.isArray(keyCodes)) {
      ret = $.map(keyCodes, function(keycode) {
        return parseInt(keycode, 10) || undefined;
      });
    }
    return ret;
  }

  function _ParseInputs(settingsInput) {
    // Boolean: plain textbox
    if (settingsInput === true || typeof settingsInput === "string") {
      return _FormatInput($("<input>", {
        value: (settingsInput === true) ? "" : settingsInput,
        type: "text"
      }), {
        autotrim: true
      });
    }

    // Array: plain textboxes with default values
    if ($.isArray(settingsInput)) {
      var ret = $([]);
      $.each(settingsInput, function(i, value) {
        ret = ret.add(_FormatInput($("<input>", {
          value: value,
          type: "text"
        }), {
          autotrim: true
        }));
      });
      return ret;
    }

    // Object: multiple inputs
    if ($.isPlainObject(settingsInput)) {
      var ret = $([]);
      $.each(settingsInput, function(name, definition) {
        var input = _CreateInput(name, definition);
        if (definition.label !== undefined) {
          var label = $("<label>", {
            class: "messagebox_content_label",
            css: _css.boxSizing,
            text: definition.label
          });
          input.appendTo(label);
          ret = ret.add(label);
        } else {
          ret = ret.add(input);
        }
      });
      return ret;
    }

    // Default: custom jQuery object/selector or DOM element
    return $(settingsInput);
  }

  function _CreateInput(name, definition) {
    var type = $.trim(definition.type).toLowerCase();
    switch (type) {
      case "select":
        var select = _FormatInput($("<select>"), {
          name: name,
          title: definition.title,
          autotrim: false
        });
        var options = !$.isArray(definition.options) ? definition.options : definition.options.reduce(function(ret, item) {
          ret[item] = item;
          return ret;
        }, {});
        if (!options) {
          _Warning('No options provided for "' + name + '"');
          options = {
            "": "&nbsp;"
          };
        }
        var defaultSelected = false;
        $.each(options, function(value, html) {
          var option = $("<option>", {
            value: value,
            html: html
          }).appendTo(select);
          if (definition.default == value) {
            option.prop("selected", true);
            defaultSelected = true;
          }
        });
        // Fake placeholder
        if (!defaultSelected) {
          $("<option>", {
            value: "",
            text: definition.title
          }).prop({
            "disabled": true,
            "selected": true,
            "hidden": true
          }).prependTo(select);
          select.find("option").css("color", select.css("color"));
          select
            .addClass("messagebox_content_input_selectplaceholder")
            .prop("selectedIndex", 0)
            .one("change", function() {
              select.find("option").css("color", "");
              select.removeClass("messagebox_content_input_selectplaceholder");
            });
        }
        return select;

      case "text":
      case "password":
      default:
        return _FormatInput($("<input>", {
          type: (type === "password") ? "password" : "text",
          maxlength: definition.maxlength,
          placeholder: definition.title,
          value: definition.default
        }), {
          name: name,
          title: definition.title,
          autotrim: definition.autotrim
        });
    }
  }

  function _FormatInput(input, par) {
    if (par.autotrim !== false) input.on("blur", _Input_Blur);
    return input
      .addClass("messagebox_content_input")
      .css(_css.boxSizing)
      .attr({
        name: par.name,
        title: par.title
      });
  }

  function _GetInputsValues(messageBox) {
    var names = [];
    var values = [];
    messageBox.find(".messagebox_content_inputs").find("input, select").each(function() {
      var input = $(this);
      names.push(input.attr("name"));
      values.push(input.val());
    });
    if (!values.length) return undefined;
    var retObject = {};
    var valuesOnly = false;
    $.each(names, function(i, name) {
      if (name === undefined) {
        valuesOnly = true;
        return false;
      }
      retObject[name] = values[i];
    });
    if (valuesOnly && values.length === 1) return values[0];
    return valuesOnly ? values : retObject;
  }

  function _SetMaxHeight(messageBox, h) {
    if (messageBox.data("fRefreshMaxHeight")) messageBox.css("max-height", h - (messageBox.offset().top * _constants.maxHeightCoefficient));
  }

  function _Warning(message) {
    message = "jQuery MessageBox Warning: " + message;
    if (window.console.warn) {
      console.warn(message);
    } else if (window.console.log) {
      console.log(message);
    }
  }

  // **************************************************
  //  EVENTS
  // **************************************************
  function _Input_Blur(event) {
    var input = $(event.currentTarget);
    input.val($.trim(input.val()));
  }

  function _Button_Click(event) {
    var button = $(event.currentTarget);
    var buttonName = event.data.name;
    var messageBox = button.closest(".messagebox");
    var overlay = messageBox.closest(".messagebox_overlay");
    var spacer = overlay.children(".messagebox_spacer").first();
    var content = messageBox.children(".messagebox_content").first();
    var error = content.children(".messagebox_content_error").first();
    var instance = messageBox.data("instance");
    var inputValues = _GetInputsValues(messageBox);
    var filterFunc = button.hasClass("messagebox_button_done") ? instance.settings.filterDone : instance.settings.filterFail;

    // Filter
    error.hide().empty();
    var filterDef = ($.type(filterFunc) !== "function") ? $.Deferred().resolve() : $.when(filterFunc(inputValues, buttonName)).then(function(ret) {
      // Bool false: abort
      if (ret === false) return $.Deferred().reject();
      var retType = $.type(ret);
      // Error: display error message and abort (NOTE: it requires jQuery 1.9+ or it will fall in the next case)
      if (retType === "error") return $.Deferred().reject(ret.message);
      // String or (jQuery) Object: display error and abort
      if (retType === "string" || retType === "object" || retType === "array") return $.Deferred().reject(ret);
      // Everything else: continue
      return $.Deferred().resolve();
    });

    filterDef.then(function() {
      spacer.animate({
        "height": 0,
        "margin-top": spacer.data("spacerTopMargin")
      }, instance.settings.speed, function() {
        // Remove DOM objects
        overlay.remove();

        // Resolve or Reject Deferred
        if (button.hasClass("messagebox_button_done")) {
          instance.deferred.resolve(inputValues, buttonName);
        } else {
          instance.deferred.reject(inputValues, buttonName);
        }

        if (_activeStack.length) {
          // Restore the last active instance
          _active = _activeStack.pop();
        } else {
          // Execute next Queue instance
          _active = undefined;
          _ExecuteQueue();
        }
      });
    }, function(errorMessage) {
      var errorMessageType = $.type(errorMessage);
      if (errorMessageType === "string" || errorMessageType === "object" || errorMessageType === "array") {
        error.css("max-width", content.width()).append(errorMessage).slideDown(_constants.errorSpeed, function() {
          content.scrollTop(content.height());
        });
      }
    });
  }

  function _Window_Resize(event) {
    if (!_active) return;
    var w = $(event.currentTarget).width();
    var h = $(event.currentTarget).height();
    $(document).find(".messagebox").each(function() {
      var messageBox = $(this);
      messageBox.css("min-width", (messageBox.outerWidth() > w) ? w : "");
      _SetMaxHeight(messageBox, h);
    });
  }

  function _Window_KeyDown(event) {
    if (!_active) return;
    var button = _active.keyCodes[event.which];
    if (button) {
      button.closest(".messagebox").find(".messagebox_content_input").trigger("blur");
      button.trigger("click");
    }
  }

  $(function() {
    $(window)
      .on("resize", _Window_Resize)
      .on("keydown", _Window_KeyDown);
  });

}(jQuery));

//CODE

$(function() {
  //READY
  var $code = $('#code');
  var newline = '\n';
  var tab = '\t';
  var TABLEWIDTH = 600;
  var FONTFAMILY = 'Arial, Helvetica, sans-serif';
  var FONTSIZE = '16px';
  var SPACERSIZE = '40';
  var TEXTCOLOR = '#333333';
  var BGCOLOR = '#666666';
  var BORDERCOLOR = '#CCCCCC';
  var BUTTONCOLOR = '#E2071C';
  var TABLEINC = 0;
  //TABLE-CREATOR
  function createRowsCols(row, col) {
    var c = '';
    for (var i = 0; i < row; i++) {
      c += tab + '<tr>' + newline;
      for (var ii = 0; ii < col; ii++) {
        c += tab + tab + '<td align="left" valign="top" style="border-collapse:collapse; mso-line-height-rule: exactly;">{content}</td>' + newline;
      }
      c += tab + '</tr>' + newline;
    }
    return c;
  }
  
  function createTable(row, col) {
    var table_info = 'TABLE ' + row + 'x' + col;
    var c = '<!-- /' + table_info + ' -->' + newline + '<table cellspacing="0" cellpadding="0" border="0" width="' + TABLEWIDTH + '" align="center" style="border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">' + newline;
    c += createRowsCols(row, col);
    c += '</table>' + newline;
    c += '<!-- ' + table_info + '/ -->' + newline;
    return c;
  }

  function tableInc() {
    ++TABLEINC;
    return 'TABLE ' + TABLEINC;
  }
  //http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery
  function insertAtCaret(areaId, text) {
		var txtarea = document.getElementById(areaId);
		if (!txtarea) { return; }

		var scrollPos = txtarea.scrollTop;
		var strPos = 0;
		var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
			"ff" : (document.selection ? "ie" : false ) );
		if (br == "ie") {
			txtarea.focus();
			var range = document.selection.createRange();
			range.moveStart ('character', -txtarea.value.length);
			strPos = range.text.length;
		} else if (br == "ff") {
			strPos = txtarea.selectionStart;
		}

		var front = (txtarea.value).substring(0, strPos);
		var back = (txtarea.value).substring(strPos, txtarea.value.length);
		txtarea.value = front + text + back;
		strPos = strPos + text.length;
		if (br == "ie") {
			txtarea.focus();
			var ieRange = document.selection.createRange();
			ieRange.moveStart ('character', -txtarea.value.length);
			ieRange.moveStart ('character', strPos);
			ieRange.moveEnd ('character', 0);
			ieRange.select();
		} else if (br == "ff") {
			txtarea.selectionStart = strPos;
			txtarea.selectionEnd = strPos;
			txtarea.focus();
		}

		txtarea.scrollTop = scrollPos;
	}
  function selectCode() {
    $code.select();
    //document.execCommand('copy');
  }

  function $prompt(message, val, fn) {
    $.MessageBox({
      message: message,
      input: val
    }).done(function(data) {
      fn(data);
    });
  }
  $('#tablewidth').change(function(evt) {
    TABLEWIDTH = parseInt($(evt.target).val());
  });

  function createTemplate() {
    var c = '';
    c += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + newline;
    c += '<html xmlns="http://www.w3.org/1999/xhtml">' + newline;
    c += tab + '<head>' + newline;
    c += tab + tab + '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />' + newline;
    c += tab + tab + '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>' + newline;
    c += tab + tab + '<meta http-equiv="X-UA-Compatible" content="IE=edge">' + newline;
    c += tab + tab + '<title>Email Title</title>' + newline;
    c += tab + tab + '<style type="text/css">' + newline;
    c += tab + tab + '/* STYLES HERE! */' + newline;
    c += tab + tab + '$reset' + newline;
    c += tab + tab + '$responsive' + newline;
    c += tab + tab + '</style>' + newline;
    c += tab + '</head>' + newline;
    c += tab + '<body style="width:100%; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">' + newline;
    c += tab + tab + '<!-- body wrapper -->' + newline;
    c += tab + tab + '<table cellpadding="0" cellspacing="0" border="0" style="margin:0; padding:0; width:100%; background: #ffffff;" class="body-table">' + newline;
    c += tab + tab + tab + '<tr><td valign="top">' + newline
    c += tab + tab + '<!-- edge wrapper -->' + newline;
    c += tab + tab + '<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="main-table">' + newline;
    c += tab + tab + tab + '<tr><td valign="top" style="vertical-align: top;">' + newline
      /*
      c += tab + tab + '<!-- content wrapper -->' + newline;
      c += tab + tab + '<table cellpadding="0" cellspacing="0" border="0" align="center" width="560" style="background: #cfcfcf;">' + newline;
      c += tab + tab + tab + '<tr><td valign="top" style="vertical-align: top;">' + newline
      */
    c += '<!-- ///////////////////////////////////////////////////// -->' + newline;
    c += '$container' + newline;
    c += '<!-- ///////////////////////////////////////////////////// -->' + newline;
    /*
    c += tab + tab + tab + '</td></tr>' + newline;
    c += tab + tab + '</table>' + newline;
    c += tab + tab + '<!-- / content wrapper -->' + newline;*/
    c += tab + tab + tab + '</td></tr>' + newline;
    c += tab + tab + '</table>' + newline;
    c += tab + tab + '<!-- / edge wrapper -->' + newline;
    c += tab + tab + tab + '</td></tr>' + newline;
    c += tab + tab + '</table>' + newline;
    c += tab + tab + '<!-- / body wrapper -->' + newline;
    c += tab + '</body>' + newline;
    c += '</html>' + newline;
    return c;
  }
  $('#html-email').click(function(evt) {
    var c = createTemplate();
    /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
    selectCode();
  });

  function createResets() {
    var c = '';
    c += '/* RESET CLASSES */' + newline;
    c += 'html { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; }' + newline;
    c += 'body { margin:0; padding:0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}' + newline;
    c += "html,\rbody,\rtable,\rtable td {\rfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r}\r";
    c += 'img { border:0 none; height:auto; line-height:100%; outline:none; text-decoration:none; display:block;}' + newline;
    c += 'a { outline: 0; text-decoration: none !important; }' + newline;
    c += 'a img{border: none;}' + newline;
    c += 'a.phone {text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;} /* phone link, use as wrapper on phone numbers */}' + newline;
    c += 'table, td { border-collapse:collapse; }' + newline;
    c += '.imageFix{ display:block; }' + newline;
    c += '#bodyTable{ height:100% !important; margin:0; padding:0; width:100% !important; }' + newline;
    c += '/* Outlook.com */' + newline;
    c += '#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */ ' + newline;
    c += '.ExternalClass { width:100%; }' + newline;
    c += '.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{ line-height: 100%; }' + newline;
    c += '.ReadMsgBody { width: 100%; background-color: #ffffff; }' + newline;
    c += '/* Microsoft Outlook desktop clients */' + newline;
    c += 'table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }' + newline;
    c += 'td { mso-line-height-rule: exactly; }' + newline;
    c += 'img { -ms-interpolation-mode: bicubic; }' + newline;
    c += '/* RESET CLASSES */' + newline;
    return c;
  }
  $('#reset-classes').click(function(evt) {
    var c = createResets();
    /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
    selectCode();
  });
  $('#dev-classes').click(function(evt) {
    var c = '';
    c += '/* DEVELOPMENT CLASSES, DELETE AFTERWARDS */' + newline;
    c += 'table, tr, td { padding: 3px !important; }' + newline;
    c += 'table { border: 1px solid limegreen !important; }' + newline;
    c += 'td { border: 1px dashed red !important; }' + newline;
    c += '/* DEVELOPMENT CLASSES, DELETE AFTERWARDS */';
    /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
    selectCode();
  });
  $('#create-table').click(function(evt) {
    $prompt('Table size:', '1x1', function(data) { //window.prompt('Table size:', TABLEWIDTH);
      var c = '';
      var ti = tableInc();
      var raw = data.split('x');
      c += createTable(parseInt(raw[0]), parseInt(raw[1]));
      /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
      selectCode();
    });

  });
  $('#create-cols').click(function(evt) {
    $prompt('Columns:', '3', function(data) {
      var c = '';
      var ti = tableInc();
      var items = data.split(',');
      var count = (data.indexOf(',') != -1) ? items.length : parseInt(data);
      var raw = '';
      var w = (items.length > 1) ? 0 : TABLEWIDTH;
      var step = (items.length > 1) ? -1 : Math.floor(TABLEWIDTH / count);
      for (var i = 0; i < count; i++) {
        if (step == -1) {
          w += parseInt(items[i]);
        }
        raw += tab + tab + '<td width="' + ((step == -1) ? items[i] : step) + '" align="left" valign="top">' + (i + 1) + '</td>' + newline;
      }
      c += '<!-- START: ' + ti + ' -->' + newline;
      c += '<table width="' + w + '" cellpadding="0" cellspacing="0" border="0">' + newline;
      c += tab + '<tr>' + newline;
      c += raw;
      c += tab + '</tr>' + newline;
      c += '</table>';
      c += newline + '<!-- END: ' + ti + ' -->';
      /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
      selectCode();
    });
  });
  $('#create-rows').click(function(evt) {
    $prompt('Rows:', '3', function(data) {
      var c = '';
      var ti = tableInc();
      var items = data.split(',');
      var count = (data.indexOf(',') != -1) ? items.length : parseInt(data);
      var raw = '';
      var w = (items.length > 1) ? 0 : TABLEWIDTH;
      var step = (items.length > 1) ? -1 : Math.floor(TABLEWIDTH / count);
      for (var i = 0; i < count; i++) {
        if (step == -1) {
          var val = parseInt(items[i]);
          if (!isNaN(val)) {
            w += val;
          }
        }
        if (step == -1) {
          raw += tab + tab + '<tr><td width="' + TABLEWIDTH + '" height="' + items[i] + '" align="left" valign="top">' + (i + 1) + '</td></tr>' + newline;
        } else {
          raw += tab + tab + '<tr><td width="' + TABLEWIDTH + '" align="left" valign="top">' + (i + 1) + '</td></tr>' + newline;
        }

      }
      c += '<!-- START: ' + ti + ' -->' + newline;
      c += '<table width="' + TABLEWIDTH + '" cellpadding="0" cellspacing="0" border="0">' + newline;
      c += raw;
      c += '</table>';
      c += newline + '<!-- END: ' + ti + ' -->';
      /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
      selectCode();
    });
  });
  $('#create-image').click(function(evt) {
    $prompt('Image name and size', ['image.jpg', '100x100'], function(data) {
      data = data;
      var c = '';
      var imageName = data[0];
      var cols = data[1].split('x');
      c += '<img src="images/' + imageName + '" width="' + cols[0] + '" height="' + cols[1] + '" border="0" alt="' + imageName + '" title="' + imageName + '" />';
      /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
      selectCode();
    });
  });
  $('#create-link').click(function(evt) {
    $prompt('URL and text', ['#', 'Lorem ipsum'], function(data) {
      data = data;
      var c = '';
      var url = data[0];
      c += '<a href="' + url + '" target="_blank" style="text-decoration:none!important; text-underline:none!important;">' + data[1] + '</a>';
      /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
      selectCode();
    });
  });
  var buttonProps = {
    text: {
      type: 'text',
      label: 'Button text',
      default: 'CTA Text'
    },
    url: {
      type: 'text',
      label: 'URL',
      default: '#'
    },
    padding: {
      type: 'text',
      label: 'Padding',
      default: '12px 18px'
    },
    family: {
      type: 'text',
      label: 'Font family',
      default: 'Helvetica, Arial, sans-serif'
    },
    fontsize: {
      type: 'text',
      label: 'Font size',
      default: '16px'
    },
    color: {
      type: 'text',
      label: 'Color',
      default: '#FFFFFF'
    },
    bgColor: {
      type: 'text',
      label: 'Background color',
      default: '#FF0000'
    },
    borderColor: {
      type: 'text',
      label: 'Border',
      default: '1px solid #000000'
    },
    radius: {
      type: 'text',
      label: 'Border radius',
      default: '3px'
    }
  };
  $('#create-button').click(function(evt) {
    $prompt('Button properties:', buttonProps,
      function(data) {
        //updata vmlButtonProps
        buttonProps.text.default = data.text;
        buttonProps.url.default = data.url;
        buttonProps.padding.default = data.padding;
        buttonProps.family.default = data.family;
        buttonProps.fontsize.default = data.fontsize;
        buttonProps.color.default = data.color;
        buttonProps.bgColor.default = data.bgColor;
        buttonProps.borderColor.default = data.borderColor;
        buttonProps.radius.default = data.radius;
        var c = '';
        c += '<!-- CTA: ' + data.text + ' -->' + newline;
        c += '<table width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-hide:all;">' + newline;
        c += tab + '<tr>' + newline;
        c += tab + tab + '<td align="center" valign="middle">' + newline;
        c += tab + tab + tab + '<table border="0" cellspacing="0" cellpadding="0" style=" -webkit-border-radius:' + data.radius + ';-moz-border-radius:' + data.radius + ';border-radius:' + data.radius + ';background-color:' + data.bgColor + ';border:' + data.borderColor + '; mso-hide:all;" bgcolor="' + data.bgColor + '">' + newline;
        c += tab + tab + tab + tab + '<tr>' + newline;
        c += tab + tab + tab + tab + tab + '<td align="center"><a href="' + data.url + '" target="_blank" style="font-size: ' + data.fontsize + '; font-family: ' + data.family + '; color: ' + data.color + '; text-decoration: none; padding: ' + data.padding + '; display: inline-block;">' + data.text + '</a></td>' + newline;
        c += tab + tab + tab + tab + '</tr>' + newline;
        c += tab + tab + tab + '</table>' + newline;
        c += tab + tab + '</td>' + newline;
        c += tab + '</tr>' + newline;
        c += '</table>' + newline;
        c += '<!-- CTA: ' + data.text + ' -->';
        c += '<!-- Create a VML button for Word based clients like Outlook -->';
        /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
        selectCode();
      });
  });
  var vmlButtonProps = {
    text: {
      type: 'text',
      label: 'Button text',
      default: 'CTA Text'
    },
    url: {
      type: 'text',
      label: 'URL',
      default: '#'
    },
    size: {
      type: 'text',
      label: 'Size:',
      default: '150x50'
    },
    family: {
      type: 'text',
      label: 'Font family',
      default: 'Helvetica, Arial, sans-serif'
    },
    fontsize: {
      type: 'text',
      label: 'Font size',
      default: '16px'
    },
    color: {
      type: 'text',
      label: 'Color',
      default: '#FFFFFF'
    },
    bgColor: {
      type: 'text',
      label: 'Background color',
      default: '#FF0000'
    },
    borderColor: {
      type: 'text',
      label: 'Border',
      default: '#000000'
    },
    radius: {
      type: 'text',
      label: 'Border radius',
      default: '3px'
    }
  };
  $('#create-vml-button').click(function(evt) {
    $prompt('Button properties:', vmlButtonProps,
      function(data) {
        var w = parseInt(data.size.split('x')[0]);
        var h = parseInt(data.size.split('x')[1]);
        var max = Math.max(w, h);
        var min = Math.min(w, h);
        var cornerPercent = (data.radius == '0px') ? '0' : Math.round(((min / max) / parseInt(data.radius)) * 100);
        //updata vmlButtonProps
        vmlButtonProps.text.default = data.text;
        vmlButtonProps.url.default = data.url;
        vmlButtonProps.size.default = data.size;
        vmlButtonProps.family.default = data.family;
        vmlButtonProps.fontsize.default = data.fontsize;
        vmlButtonProps.color.default = data.color;
        vmlButtonProps.bgColor.default = data.bgColor;
        vmlButtonProps.borderColor.default = data.borderColor;
        vmlButtonProps.radius.default = data.radius;
        var c = '';
        c += '<!-- CTA: ' + data.text + ' -->' + newline;
        c += '<div>' + newline;
        c += '<!--[if mso]>' + newline;
        c += '<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="' + data.url + '" style="height:' + h + 'px;v-text-anchor:middle;width:' + w + 'px;" arcsize="' + cornerPercent + '%" strokecolor="' + data.borderColor + '" fillcolor="' + data.bgColor + '">' + newline;
        c += '<w:anchorlock/>' + newline;
        c += '<center style="color:' + data.color + ';font-family:' + data.family + ';font-size:' + data.fontsize + ';font-weight:bold;">' + data.text + '</center>' + newline;
        c += '</v:roundrect>' + newline;
        c += '<![endif]-->' + newline;
        c += '</div>' + newline;
        c += '<!-- CTA: ' + data.text + ' -->'
        /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
        selectCode();
      });
  });
  $('.ascii').click(function(evt) {
    var c = $(evt.target).attr('data-ascii').replace(/\\/g, '');
    /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
    selectCode();
  });
  $('#empty-td').click(function(evt) {
    var c = '';
    c += tab + tab + '<td width="' + TABLEWIDTH + '" height="25" align="left" valign="top" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; mso-line-height-rule: exactly;">' + newline;
    c += tab + tab + tab + '<!--[if gte mso 15]>&nbsp;<![endif]-->' + newline;
    c += tab + tab + '</td>' + newline;
    /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
    selectCode();
  });
  var separator = 1;
  $('#create-hr').click(function(evt) {
    $prompt('Width, height, color', ['600', '2', '#cccccc'], function(data) {
      var imageName = 'separator' + (++separator) + '.jpg'
      var params = data.split(',');
      var c = '';
      c += '<img src="images/' + imageName + '" width="' + params[0] + '" height="' + params[1] + '" border="0" alt="spacer" title="spacer" />';
      /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
      selectCode();
      var tmpCanvas = document.createElement('canvas');
      tmpCanvas.width = params[0];
      tmpCanvas.height = params[1];
      tmpCanvas.style.backgroundColor = '#FFFFFF';
      var ctx = tmpCanvas.getContext('2d');
      ctx.beginPath();
      ctx.fillStyle = params[2];
      ctx.fillRect(0, 0, parseInt(params[0]), parseInt(params[1]));
      ctx.closePath();
      var link = document.createElement('a');
      link.download = imageName;
      link.target = '_blank';
      link.href = tmpCanvas.toDataURL('image/jpeg', 1);
      var evt = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": true
      });
      link.dispatchEvent(evt);
    });
  });
  $('#media-query').click(function(evt) {
    var c = '';
    c += '@media screen and (max-width: 480px) {' + newline;
    c += tab + 'table[class="main-table"]{' + newline;
    c += tab + tab + 'width: 100%;' + newline;
    c += tab + '}' + newline;
    c += '}' + newline;
    /*
    var oldcode = $code.val();
    $code.val(oldcode + newline + c);
    */
    insertAtCaret('code', c);
    selectCode();
  });
  //REPLACE
  function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
  }

  function replaceAll(target, search, replacement) {
    return target.replace(new RegExp(escapeRegExp(search), 'g'), replacement);
  };

  function getTDWidth(val) {
    return Math.round(val * TABLEWIDTH);
  }

  function getFontSizeLineHeight(fs, ln) {
    return 'font-size: ' + fs + 'px; line-height: ' + Math.round(fs * ln) + 'px; ';
  }
  var lipsum_arr = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar libero nec nisi porta, nec finibus lectus auctor. Curabitur sit amet neque libero. Quisque sodales egestas nisi, ut gravida nibh fermentum venenatis. Duis facilisis mattis congue. Phasellus odio urna, pulvinar a laoreet at, laoreet sit amet ipsum. Phasellus vel magna quis dolor mollis tristique nec ac ipsum. Sed eleifend quam quis ante sagittis porta. Aliquam suscipit suscipit tempus. Suspendisse molestie volutpat est vitae dapibus. Vestibulum auctor vel augue non ultricies.', 'Mauris eu cursus est. Fusce ultrices sollicitudin convallis. Maecenas id justo a ligula viverra cursus sed eu sapien. Vestibulum laoreet varius mauris. Curabitur sed lacinia felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Mauris velit odio, dapibus ac diam nec, pharetra imperdiet metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed purus augue, interdum a ipsum sed, ullamcorper pulvinar dolor. Pellentesque vel odio auctor, sodales leo eu, facilisis dui. Phasellus volutpat tortor in lorem pellentesque convallis. Vestibulum tempus justo quis neque euismod, in porttitor eros interdum. Maecenas vel lacus imperdiet, egestas nibh auctor, malesuada leo. Maecenas mattis eros sed venenatis condimentum.', 'Aenean interdum, turpis sit amet rhoncus consequat, odio libero finibus mi, quis cursus dui libero sit amet purus. Vivamus tempus nisl at libero volutpat ultrices. Integer ac metus quis ligula vestibulum cursus. Donec quis cursus urna, quis rhoncus lacus. Quisque at pretium libero. Vestibulum in consectetur ante, sit amet gravida odio. Quisque ac erat eu mi efficitur imperdiet. Pellentesque dignissim ligula ac lorem aliquam pharetra. Mauris ut dui a tortor tincidunt laoreet sed ac ligula. Donec molestie justo eu massa malesuada molestie. Phasellus congue quam libero, nec malesuada mauris elementum quis. Duis vitae dolor blandit tellus feugiat faucibus vel et ligula. Vestibulum a mi nec purus mattis facilisis. Sed tempor mollis libero, eget dapibus lorem ornare ullamcorper. Praesent laoreet in massa ut lobortis.', 'Duis non pellentesque odio, ut convallis nibh. Mauris ac justo in ante fringilla finibus. Donec feugiat facilisis est, quis ullamcorper odio tristique eget. Etiam eget semper arcu. Pellentesque auctor eleifend ornare. Aenean tempor velit a eros tincidunt egestas. Ut sit amet laoreet risus.', 'Pellentesque leo lacus, consectetur quis arcu et, ultricies placerat nulla. Fusce imperdiet eu ante nec auctor. Praesent id nisi tellus. Proin bibendum, lorem a ornare pellentesque, nibh arcu condimentum nunc, ut gravida risus nisi non lacus. Sed vitae quam tempus, fringilla nisl sit amet, sagittis nisi. Vestibulum est purus, pretium sed fringilla ac, efficitur quis nisl. Praesent aliquet cursus nulla, non imperdiet ex ultricies ut. Nulla consectetur pretium dictum. Fusce euismod odio sapien, non tempus eros accumsan id. Aenean vel nunc blandit dolor iaculis elementum. Sed egestas orci at diam gravida pulvinar. Cras varius accumsan leo ac consequat. Aenean pharetra ullamcorper nunc, vel feugiat lacus. Aenean tempus dolor nec dolor lobortis, cursus scelerisque justo finibus.'];

  function getCalendar(color) {
    var _color = color || '#DDDDDD';
    var _month = 'January, February, March, April, May, June, July, August, September, October, November, December'.split(',');
    var _date = new Date();
    return '<!-- CALENDAR/ -->' + newline + '<table width="150" border="0" cellspacing="0" cellpadding="0" style="border: 2px solid ' + _color + ';">' + newline + '<tr><td valign="top" align="center" bgcolor="' + _color + '" style="font-size: 16px; line-height: 24px; font-family: \'Arial Narrow\', Arial, sans-serif; font-weight: bold; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + _month[_date.getMonth()] + newline + '</td></tr>' + newline + '<tr><td valign="top" align="center" bgcolor="#FFFFFF" style="font-size: 40px; font-family: \'Arial Black\', \'Arial Bold\', Gadget, sans-serif; line-height: 60px;  padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + _date.getDate() + newline + '</td></tr>' + newline + '</table>' + newline + '<!-- /CALENDAR -->';
  }

  function getLipsum() {
    return lipsum_arr[Math.floor(Math.random() * lipsum_arr.length)];
  }
/*
   ____                                      
  / ___|___  _ __ ___  _ __ ___   ___  _ __  
 | |   / _ \| '_ ` _ \| '_ ` _ \ / _ \| '_ \ 
 | |__| (_) | | | | | | | | | | | (_) | | | |
  \____\___/|_| |_| |_|_| |_| |_|\___/|_| |_| 
*/
  function module(val){
    return "<!-- \n" + "  +----+\n" + " /    /|\n" + "+----+ | " + val + "\n" + "|    | +\n" + "|    |/\n" + "+----+\n" + " -->\n";
  }
  var h3d = "<!--" + newline + " __  __" + newline + "/\\ \\_\\ \\ " + newline +  "\\ \\  __ \\ " + newline +  " \\ \\_\\ \\_\\ " + newline +  "  \\/_/\\/_/ " + newline + "-->" + newline;
  var t3d = "<!--" + newline + " ______ "+ newline + "/\\__  _\\"+ newline + "\\/_/\\ \\/ " + newline + "   \\ \\_\\" + newline +"    \\/_/" + newline + "-->" + newline;      
  var cta3d = "<!--" + newline + " ______     ______   ______ " + newline + "/\\  ___\\   /\\__  _\\ /\\  __ \\"   + newline +  "\\ \\ \\____  \\/_/\\ \\/ \\ \\  __ \\"   + newline + " \\ \\_____\\    \\ \\_\\  \\ \\_\\ \\_\\"  + newline + "  \\/_____/     \\/_/   \\/_/\\/_/"  + newline + "-->" + newline;
  var txt3d = "<!--" + newline + "  _        _\n" + " | |___  _| |_\n" + " | __\\ \\/ / __|\n" + " | |_ >  <| |_ \n" + "  \\__/_/\\_\\\\__|\n" + "-->" + newline;
  var monalisa = "<!--" + newline + "           ____  \n"+"         o8%8888,   \n" + "       o88%8888888.  \n" + "      8'-    -:8888b  \n" + "     8'         8888  \n" + "    d8.-=. ,==-.:888b  \n" + "    >8 `~` :`~' d8888   \n" + "    88         ,88888   \n" + "    88b. `-~  ':88888  \n" + "    888b ~==~ .:88888 \n" + "    88888o--:':::8888  \n" + "    `88888| :::' 8888b  \n" + "    8888^^'       8888b  \n" + "   d888           ,%888b.   \n" + "  d88%            %%%8--'-.  \n" + " /88:.__ ,       _%-' ---  - \n" + "     '''::===..-'   =  --.  ` \n" + "-->" + newline;
  var commonSnippets = {
    '$module': "  +----+\n" + " /    /|\n" + "+----+ |\n" + "|    | +\n" + "|    |/\n" + "+----+\n",
    '$email' : createTemplate(),
    '$reset' : createResets,
    '$responsive': '/* RESPONSIVE CLASSES */\r@media screen and (max-width: 480px) {\r\ttable[class="main-table"]{ width: 100% !important; }\r\t.box-responsive, table[class="box-responsive"], td[class="box-responsive"]{\r\t\tdisplay: block !important;\r\t\twidth: 100% !important;\r\t\tdirection: ltr !important;\r\t}\r\t.table-responsive, table[class="table-responsive"], td[class="table-responsive"]{\r\t\tdisplay: table !important;\r\t\twidth: 100% !important;\r\t\tdirection: ltr !important;\r\t}\r\t.box-responsive-first, table[class="box-responsive-first"],  td[class="box-responsive-first"]{\r\t\tdisplay: table-header-group !important;\r\t\twidth: 100% !important;\r\t}\r\t.box-responsive-middle, table[class="box-responsive-middle"], td[class="box-responsive-middle"]{\r\t\tdisplay: table-row-group !important;\r\t\twidth: 100% !important;\r\t}\r\t.box-responsive-last, table[class="box-responsive-last"], td[class="box-responsive-last"]{\r\t\tdisplay: table-footer-group !important;\r\t\twidth: 100% !important;\r\t}\r\timg[class="img-responsive"]{\r\t\theight: auto !important;\r\t\tmax-width: 480px !important;\r\t\twidth: 100% !important;\r\t}\r\t.mobile-text, td[class="mobile-text"]{font-size: 20px !important; line-height: 30px !important; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;}\r\t.mobile-title, td[class="mobile-title"]{font-size: 34px !important; line-height: 51px !important; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;}\r\t/* Add your responsive classes here */\r}\r/* RESPONSIVE CLASSES */\r',
    '$container': '<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">\r\t<!-- CONTENT/ -->\r\t<!-- /CONTENT -->\r</table>\r',
    '$wrapper': '<!-- WRAPPER/ -->\r<tr>\r\t<td align="left" valign="top">\r\t\t<table width="100%" bgcolor="#fa7a55" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">\r\t\t\t<!-- CONTENT/ -->\r\t\t\t<!-- /CONTENT -->\r\t\t</table>\r\t</td>\r</tr>\r<!-- /WRAPPER -->\r',
    '$row': '<!-- ROW/ -->\r<tr><td valign="top" align="center" style="font-family: Arial, Helvetica, sans-serif; padding: 10px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px;">\r\t<!-- ROW CONTENT -->\r</td></tr>\r<!-- /ROW -->',
    '$preheader': module("PREHEADER") + '<!-- PREHEADER/ -->\r<tr bgcolor="#ffffff">\r\t<td style="display:none !important; visibility: hidden; mso-hide:all; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">\r\t\tPreheader text\r\t\t<!-- Insert &zwnj;&nbsp; hack after hidden preview text -->\r\t\t&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;\r\t</td>\r</tr>\r<!-- /PREHEADER -->\r',
    '$title': t3d + '<!-- TITLE/ -->\r<tr>\r\t<td class="mobile-title" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size: 30px; line-height: 45px; font-weight: bold; padding: 5px; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; padding-right: 5px;">\r\t\tThe quick brown fox jumps over the lazy&nbsp;dog\r\t</td>\r</tr>\r<!-- /TITLE -->\r',
    '$text': txt3d + '<!-- TEXT/ -->\r<tr>\r\t<td class="mobile-text" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; padding: 5px; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; padding-right: 5px;">\r\t\tDuis non pellentesque odio, ut convallis nibh. Mauris ac justo in ante fringilla finibus. Donec feugiat facilisis est, quis ullamcorper odio tristique eget. Etiam eget semper arcu. Pellentesque auctor eleifend ornare. Aenean tempor velit a eros tincidunt egestas. Ut sit amet laoreet risus.\r\t</td>\r</tr>\r<!-- /TEXT -->\r',
    '$cta': cta3d + '<!-- CTA/ -->\r<tr>\r\t<td align="center" valign="middle">\r\t\t<table bgcolor="#E2071C" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">\r\t\t\t<tr>\r\t\t\t\t<td style="padding: 0;">\r\t\t\t\t\t<a href="http://www.google.com" target="_blank" style="border: 0 solid #E2071C; color: #FFFFFF; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; padding: 16px 25px 16px 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&rarr;</a>\r\t\t\t\t</td>\r\t\t\t</tr>\r\t\t</table>\r\t</td>\r</tr>\r<!-- /CTA -->\r',
    '$spacer': module("SPACER") + '<!-- SPACER/ -->' + newline + '<tr><td align="center" valign="middle" height="' + SPACERSIZE + '" style="font-size: ' + SPACERSIZE + 'px; line-height: ' + SPACERSIZE + 'px; overflow: hidden; mso-line-height-rule: exactly;">&nbsp;</td></tr>' + newline + '<!-- /SPACER -->' + newline,
    '$divider': module("DIVIDER") + '<!-- DIVIDER/ -->' + newline + '<tr><td align="center" valign="middle" height="' + SPACERSIZE + '" style="font-size: ' + SPACERSIZE + 'px; line-height: ' + SPACERSIZE + 'px; overflow: hidden; mso-line-height-rule: exactly;"><div style="border-top: 1px solid ' + BORDERCOLOR + '; font-size: 0; line-height: 0; mso-line-height-rule: exactly;">&nbsp;</div></td></tr>' + newline + '<!-- /DIVIDER -->' + newline,
    '$hero': h3d + '<!-- HERO/ -->\r<tr>\r\t<td align="center" valign="middle">\r\t\t<img width="600" height="90" border="0" style="display: block;" class="img-responsive"  src="http://placehold.it/600x90/E2071C/FFFFFF" alt="hero image" />\r\t</td>\r</tr>\r<!-- /HERO -->\r',
    '$img-link':'<a href="#" style="text-decoration:none!important; text-underline:none!important;" target="_blank"><img src="http://placekitten.com/320/320" width="320" height="320" border="0" style="display: block; border: 0px;" alt="Alt text" /></a>',
    '$image': '<img src="http://placekitten.com/320/320" width="320" height="320" border="0" style="display: block; border: 0px;" alt="Alt text" />',
    '$link': '<a href="#" style="text-decoration: none !important; text-underline: none !important;" target="_blank">Lorem Ipsum</a>',
  };
  function fillSnippets(origin, target){
    for(var k in origin){
      target[k] = origin[k];
    }
  }
  var snippets = {
    '$monalisa': monalisa,
    '$lipsum': '@LIPSUM@',
    '$dummy': 'The quick brown fox jumps over the lazy dog',
    '$hamburger-css':'\t/* HAMBURGER CSS/ */\r\tlabel[class="hamburger-label"] {\r\t\tcursor: pointer;\r\t}\r\ttd[class="hamburger-item"]{\r\t\tdisplay: none;\r\t}\r\tlabel[class="hamburger-label"]:hover {\r\t\tcolor: #E2071C;\r\t}\r\t*[class="mobile-menu"]{\r\t\tdisplay: block !important;\r\t\tmax-height: none !important;\r\t\toverflow: visible !important;\r\t\tvisibility: visible !important;\r\t\t-webkit-user-select: none; /* webkit (safari, chrome) browsers */\r\t\t-moz-user-select: none; /* mozilla browsers */\r\t\t-khtml-user-select: none; /* webkit (konqueror) browsers */\r\t\t-ms-user-select: none; /* IE10+ */\r\t}\r\t*[id]#hamburger-ck:checked + table td[class="hamburger-item"]{\r\t\tdisplay: block !important;\r\t\twidth: 100% !important;\r\t\tdirection: ltr !important;\r\t\tmax-height: none !important;\r\t\toverflow: visible !important;\r\t\tvisibility: visible !important;\r\t}\r\t/* /HAMBURGER CSS */\r',
    '$hamburger-html':'<!-- HAMBURGER HTML/ -->\r<tr><td align="center" valign="middle">\r\t<input type="checkbox" id="hamburger-ck" class="hamburger-ck" style="display: none !important; visibility: hidden; mso-hide:all; font-size:1px; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; " />\r\t<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" style="font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">\r\t\t<tr>\r\t\t\t<td class="mobile-menu" align="center" valign="middle" style="display: none; max-height: 0px;mso-hide: all; overflow: hidden; visibility: hidden;">\r\t\t\t\t<label for="hamburger-ck" class="hamburger-label">&#9776;MENU</label>\r\t\t\t</td>\r\t\t</tr>\r\t\t<tr>\r\t\t\t<td class="hamburger-item" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">\r\t\t\t\t<a href="#" target="_blank">\r\t\t\t\tFirst menu item\r\t\t\t\t</a>\r\t\t\t</td>\r\t\t\t<td class="hamburger-item" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">\r\t\t\t\t<a href="#" target="_blank">\r\t\t\t\tSecond menu item\r\t\t\t\t</a>\r\t\t\t</td>\r\t\t\t<td class="hamburger-item" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">\r\t\t\t\t<a href="#" target="_blank">\r\t\t\t\tThird menu item\r\t\t\t\t</a>\r\t\t\t</td>\r\t\t\t<td class="hamburger-item" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">\r\t\t\t\t<a href="#" target="_blank">\r\t\t\t\tThe last menu item\r\t\t\t\t</a>\r\t\t\t</td>\r\t\t</tr>\r\t</table>\r</td></tr>\r<!-- /HTML HAMBURGER -->\r',
    '$html5': '<!doctype html>',
    '$xhtml': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
    '$meta': '<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />' + newline + '<meta name="viewport" content="width=device-width, initial-scale=1">' + newline + '<meta http-equiv="X-UA-Compatible" content="IE=edge" />',
    /* BUTTONS */
    '$btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-radius: 3px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$outline-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 1px solid ' + BUTTONCOLOR + '; color: ' + BUTTONCOLOR + '; border-radius: 3px; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$pill-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$leaf-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-bottom-right-radius: 100px; border-top-left-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$inverted-leaf-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-top-right-radius: 100px; border-bottom-left-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$barrel-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-radius: 30px/70px">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$inverted-barrel-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-radius: 90px/10px">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$folder-tab-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-top-right-radius: 80px; border-top-left-radius: 20px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$tab-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-top-right-radius: 100px; border-top-left-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$inverted-tab-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$half-tab-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-top-right-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$inverted-half-tab-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-bottom-right-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$bullet-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-top-right-radius: 100px; border-bottom-right-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$inverted-bullet-btn': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-top-left-radius: 100px; border-bottom-left-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9664;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$vml-btn': '<table width="100%" border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td>' + newline + '<div>' + newline + '<!--[if mso]>' + newline + '<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#E2071C" fillcolor="#E2071C">' + newline + '<w:anchorlock/>' + newline + '<center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>' + newline + '</v:roundrect>' + newline + '<![endif]-->' + newline + '<a href="http://buttons.cm" style="background-color:#E2071C;border:1px solid #E2071C;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>' + newline + '</div>' + newline + '</td>' + newline + '</tr>' + newline + '</table>',
    '$p-btn': '<table width="100%" border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td>' + newline + '<table border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td bgcolor="#E2071C" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a></td>' + newline + '</tr>' + newline + '</table>' + newline + '</td>' + newline + '</tr>' + newline + '</table>',
    '$b-btn': '<table width="100%" border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td>' + newline + '<table border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td>' + newline + '<a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #E2071C; border-top: 12px solid #E2071C; border-bottom: 12px solid #E2071C; border-right: 18px solid #E2071C; border-left: 18px solid #E2071C; display: inline-block;">I am a button &rarr;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '</td>' + newline + '</tr>' + newline + '</table>',
    '$pb-btn': '<table width="100%" border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td>' + newline + '<table border="0" cellspacing="0" cellpadding="0">' + newline + '<tr>' + newline + '<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#E2071C"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #E2071C; display: inline-block;">I am a button &rarr;</a></td>' + newline + '</tr>' + newline + '</table>' + newline + '</td>' + newline + '</tr>' + newline + '</table>',
    /* ICONS */
    '$ico-play': '&#9658;',
    '$ico-arrow': '&rarr;',
    /* RESPONSIVE SNIPPETS */
    '$full-width':'\ttd[class="class-name-full-width"]{\r\t\tdisplay: block !important;\r\t\twidth: 100% !important;\r\t\tdirection: ltr !important;\r\t}\r',
    '$show':'td[class="class-name-show"]\r{\r\tdisplay: inline-block !important;\r}\r<td class="class-name-show" style="display: none; mso-hide: all;">📱 Visible on mobile, hidden on desktop</td>\r',
    '$hide':'td[class="class-name-hide"]\r{\r\tdisplay: none;\r\tmso-hide: all;\r}\r<td class="class-name-hide">🖥  Visible on desktop, hidden on mobile</td>\r',
    /* MEDIA QUERIES */
    '$media-mobile': '@media screen and (max-width: 480px) {' + newline + tab + 'td[class="my-class-name"]{' + newline + tab + tab + '/* new style */' + newline + tab + '}' + newline + '}',
    '$media-xs': '@media screen and (max-width: 320px){/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */}' + newline,
    '$media-sm': '@media screen and (max-width: 480px){/* smartphones, Android phones, landscape iPhone */}' + newline,
    '$media-md': '@media screen and (max-width: 600px){/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */}' + newline,
    '$media-lg': '@media screen and (max-width: 800px){/* tablet, landscape iPad, lo-res laptops ands desktops */}' + newline,
    '$mobile-show': '.mobile-show {' + newline + 'display: none;' + newline + 'max-height: 0px;' + newline + 'mso-hide: all;' + newline + 'overflow: hidden;' + newline + 'visibility: hidden;' + newline + '}' + newline + '@media only screen and (max-device-width: 480px) {' + newline + '*[class~="mobile-show"] {' + newline + 'display: block !important;' + newline + 'max-height: none !important;' + newline + 'overflow: visible !important;' + newline + 'visibility: visible !important;' + newline + '}' + newline + '}',
    '$mobile-hide': '@media only screen and (max-device-width: 480px) {' + newline + '*[class~="mobile-hide"] {' + newline + 'display: none !important;' + newline + 'height: 0 !important;' + newline + 'margin: 0 !important;' + newline + 'max-height: 0 !important;' + newline + 'overflow: hidden !important;' + newline + 'padding: 0 !important;' + newline + 'visibility: hidden !important; ' + newline + 'width: 0 !important;' + newline + '}' + newline + '}',
    '$mobile-full': '@media only screen and (max-device-width: 480px) {' + newline + '*[class~="mobile-full"] {' + newline + 'clear: both !important;' + newline + 'float: none !important;' + newline + 'width: 100% !important;' + newline + '}' + newline + '}',
    '$mobile-block': '@media only screen and (max-device-width: 480px) {' + newline + '*[class~="mobile-block-full"] {' + newline + 'clear: both !important;' + newline + 'display: block !important;' + newline + 'float: none !important;' + newline + 'height: auto !important; ' + newline + 'width: 100% !important; ' + newline + '}' + newline + '}',
    '$media-ipad': '/* iPad 1 and 2 */' + newline + '@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {' + newline + '${content}' + newline + '}' + newline + '/* iPad 3 and 4 */' + newline + '@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {' + newline + '${content}' + newline + '}',
    '$media-ipad-1-2': '@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {' + newline + '${1:style}' + newline + '}',
    '$media-ipad-3-4': '@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {' + newline + '${1:style}' + newline + '}',
    '$media-iphone-2-3': '@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {' + newline + '${1:style}' + newline + '}',
    '$media-iphone-4-6-2x': '@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {' + newline + '${1:style}' + newline + '}',
    '$media-iphone-6-2x': '@media screen and (max-device-width: 375px) and (max-device-height: 667px) {' + newline + '${1:style}' + newline + '}',
    '$media-iphone-6': '@media screen and (max-device-width: 414px) and (max-device-height: 776px) {' + newline + '${1:style}' + newline + '}',
    '$media-galaxy-4-5': '@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {' + newline + '${1:style}' + newline + '}',
    '$media-webkit': '@media screen and (-webkit-min-device-pixel-ratio: ${1:value}) {' + newline + '${2:style}' + newline + '}',
    '$media-yahoo': '@media yahoo {' + newline + '${1:style}' + newline + '}',
    '$hack-android-center': 'body {' + newline + 'margin:0 !important;' + newline + '}' + newline + 'div[style*="margin: 16px 0"] {' + newline + 'margin:0 !important;' + newline + '}',
    '$hack-ios-remove-blue-link': 'a[x-apple-data-detectors] {' + newline + 'color: inherit !important;' + newline + 'text-decoration: none !important;' + newline + 'font-size: inherit !important;' + newline + 'font-family: inherit !important;' + newline + 'font-weight: inherit !important;' + newline + 'line-height: inherit !important;' + newline + '}',
    /* STYLES */
    /* padding */
    '$p-0px': 'padding: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-right: 0;',
    '$p-5px': 'padding: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-right: 5px;',
    '$p-10px': 'padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;',
    '$p-15px': 'padding: 15px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-right: 15px;',
    '$p-20px': 'padding: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-right: 20px;',
    /* border */
    '$bd-black': 'border: 1px solid #000000;',
    /* radius */
    '$radius-sm': 'border-radius: 3px;',
    '$radius-md': 'border-radius: 5px;',
    '$radius-lg': 'border-radius: 8px;',
    /* fonts */
    '$ff-sans-serif': 'font-family: sans-serif;',
    '$ff-serif': 'font-family: serif;',
    '$ff-monospace': 'font-family: monospace;',
    '$ff-cursive': 'font-family: cursive;',
    '$ff-fantasy': 'font-family: fantasy;',
    '$ff-arial-regular': 'font-family: Arial, Helvetica, sans-serif;',
    '$ff-arial-black': 'font-family: \'Arial Black\', \'Arial Bold\', Gadget, sans-serif;',
    '$ff-arial-narrow': 'font-family: \'Arial Narrow\', Arial, sans-serif;',
    '$ff-arial-rounded': 'font-family: \'Arial Rounded MT Bold\', \'Helvetica Rounded\', Arial, sans-serif;',
    '$ff-avant-garde': 'font-family: \'Avant Garde\', Avantgarde, \'Century Gothic\', CenturyGothic, AppleGothic, sans-serif;',
    '$ff-century-gothic': 'font-family: \'Century Gothic\', CenturyGothic, AppleGothic, sans-serif;',
    '$ff-futura': 'font-family: Futura, \'Trebuchet MS\', Arial, sans-serif;',
    '$ff-geneva': 'font-family: Geneva, Tahoma, Verdana, sans-serif;',
    '$ff-gill-sans': 'font-family: \'Gill Sans\', \'Gill Sans MT\', Calibri, sans-serif;',
    '$ff-helvetica': 'font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;',
    '$ff-impact': 'font-family: Impact, Haettenschweiler, \'Franklin Gothic Bold\', Charcoal, \'Helvetica Inserat\', \'Bitstream Vera Sans Bold\', \'Arial Black\', \'sans serif\';',
    '$ff-lucida-grande': 'font-family: \'Lucida Grande\', \'Lucida Sans Unicode\', \'Lucida Sans\', Geneva, Verdana, sans-serif;',
    '$ff-segoe': 'font-family: \'Segoe UI\', Frutiger, \'Frutiger Linotype\', \'Dejavu Sans\', \'Helvetica Neue\', Arial, sans-serif;',
    '$ff-tahoma': 'font-family: Tahoma, Verdana, Segoe, sans-serif;',
    '$ff-trebuchet': 'font-family: \'Trebuchet MS\', \'Lucida Grande\', \'Lucida Sans Unicode\', \'Lucida Sans\', Tahoma, sans-serif;',
    '$ff-verdana': 'font-family: Verdana, Geneva, sans-serif;',
    '$ff-book-antiqua': 'font-family: \'Book Antiqua\', Palatino, \'Palatino Linotype\', \'Palatino LT STD\', Georgia, serif;',
    '$ff-garamond': 'font-family: Garamond, Baskerville, \'Baskerville Old Face\', \'Hoefler Text\', \'Times New Roman\', serif;',
    '$ff-georgia': 'font-family: Georgia, Times, \'Times New Roman\', serif;',
    '$ff-hoefler': 'font-family: \'Hoefler Text\', \'Baskerville Old Face\', Garamond, \'Times New Roman\', serif;',
    '$ff-lucida-bright': 'font-family: \'Lucida Bright\', Georgia, serif;',
    '$ff-palatino': 'font-family: Palatino, \'Palatino Linotype\', \'Palatino LT STD\', \'Book Antiqua\', Georgia, serif;',
    '$ff-baskerville': 'font-family: Baskerville, \'Baskerville Old Face\', \'Hoefler Text\', Garamond, \'Times New Roman\', serif;',
    '$ff-times': 'font-family: TimesNewRoman, \'Times New Roman\', Times, Baskerville, Georgia, serif;',
    '$ff-courier': 'font-family: \'Courier New\', Courier, \'Lucida Sans Typewriter\', \'Lucida Typewriter\', monospace;',
    '$ff-copperplate': 'font-family: Copperplate, \'Copperplate Gothic Light\', fantasy;',
    '$ff-papyrus': 'font-family: \'Brush Script MT\', cursive;',
    '$ff-brush-script': 'font-family: Papyrus, fantasy;',
    '$fs-xs': getFontSizeLineHeight(10, 1.5),
    '$fs-sm': getFontSizeLineHeight(12, 1.5),
    '$fs-md': getFontSizeLineHeight(16, 1.5),
    '$fs-lg': getFontSizeLineHeight(20, 1.5),
    '$fs-p': getFontSizeLineHeight(16, 1.5),
    '$fs-h1': getFontSizeLineHeight(34, 1.5),
    '$fs-h2': getFontSizeLineHeight(30, 1.5),
    '$fs-h3': getFontSizeLineHeight(28, 1.5),
    '$fs-h4': getFontSizeLineHeight(24, 1.5),
    '$fs-h5': getFontSizeLineHeight(20, 1.5),
    '$fs-h6': getFontSizeLineHeight(18, 1.5),
    '$fw-bold': 'font-weight: bold;',
    '$fw-normal': 'font-weight: normal;',
    '$fs-italic': 'font-style: italic;',
    '$fs-normal': 'font-style: normal;',
    '$tt-underline': 'text-decoration: underline;',
    '$tt-none': 'text-decoration: none;',
    '$ta-center': 'text-align: center;',
    '$ta-left': 'text-align: left;',
    '$ta-right': 'text-align: right;',
    '$ta-justify': 'text-align: justify;',
    /* color */
    '$color-1': 'color: #9B4DCA;',
    '$color-2': 'color: #606C76;',
    '$color-3': 'color: #F4F5F6;',
    '$color-4': 'color: #D1D1D1;',
    '$color-5': 'color: #E1E1E1;',
    '$color-success': 'color: #3ADB76;',
    '$color-warning': 'color: #FFAE00;',
    '$color-alert': 'color: #EC5840;',
    '$color-error': 'color: #F03C69;',
    '$color-focus': 'color: #1C86F2;',
    '$color-link': 'color: #3794DE;',
    '$color-hover': 'color: #F03C69;',
    '$color-white': 'color: #FEFEFE;',
    '$color-black': 'color: #0A0A0A;',
    '$color-gray': 'color: #BDBDBD;',
    '$color-light': 'color: #313439;',
    '$color-dark': 'color: #D4D4D4;',
    '$color-silver': 'color: #E0E1E1;',
    '$color-aluminum': 'color: #F8F8F8;',
    '$color-beige': 'color: #F2F2EA;',
    '$color-red': 'color: #F44336;',
    '$color-pink': 'color: #E91E63;',
    '$color-purple': 'color: #9C27B0;',
    '$color-blue': 'color: #2196F3;',
    '$color-green': 'color: #4CAF50;',
    '$color-cyan': 'color: #00BCD4;',
    '$color-yellow': 'color: #FFEB3B;',
    '$color-orange': 'color: #FF9800;',
    '$color-brown': 'color: #795548;',
    '$color-navy': 'color: #57607c;',
    '$color-teal': 'color: #18d2ba;',
    '$bg-1': 'background-color: #9B4DCA;',
    '$bg-2': 'background-color: #606C76;',
    '$bg-3': 'background-color: #F4F5F6;',
    '$bg-4': 'background-color: #D1D1D1;',
    '$bg-5': 'background-color: #E1E1E1;',
    '$bg-success': 'background-color: #3ADB76;',
    '$bg-warning': 'background-color: #FFAE00;',
    '$bg-alert': 'background-color: #EC5840;',
    '$bg-error': 'background-color: #F03C69;',
    '$bg-focus': 'background-color: #1C86F2;',
    '$bg-link': 'background-color: #3794DE;',
    '$bg-hover': 'background-color: #F03C69;',
    '$bg-white': 'background-color: #FEFEFE;',
    '$bg-black': 'background-color: #0A0A0A;',
    '$bg-gray': 'background-color: #BDBDBD;',
    '$bg-light': 'background-color: #313439;',
    '$bg-dark': 'background-color: #D4D4D4;',
    '$bg-silver': 'background-color: #E0E1E1;',
    '$bg-aluminum': 'background-color: #F8F8F8;',
    '$bg-beige': 'background-color: #F2F2EA;',
    '$bg-red': 'background-color: #F44336;',
    '$bg-pink': 'background-color: #E91E63;',
    '$bg-purple': 'background-color: #9C27B0;',
    '$bg-blue': 'background-color: #2196F3;',
    '$bg-green': 'background-color: #4CAF50;',
    '$bg-cyan': 'background-color: #00BCD4;',
    '$bg-yellow': 'background-color: #FFEB3B;',
    '$bg-orange': 'background-color: #FF9800;',
    '$bg-brown': 'background-color: #795548;',
    '$bg-navy': 'background-color: #57607c;',
    '$bg-teal': 'background-color: #18d2ba;',
    /* MSO */
    '$if-mso': '<!--[if mso]>' + newline + '<!-- content -->' + newline + '<![endif]-->',
    '$if-not-mso': '<!--[if !mso 9]><!-->' + newline + '<!-- CONTENT HIDDEN FROM OUTLOOK 2007/10/13 An alternate way to hide content within Outlook is using the mso-hide:all technique. However this technique requires that you apply this style to any nested tables as well: style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" -->' + newline + '<!--<![endif]-->',
    '$if-outlook': '<!--[if (gte mso 9)|(IE)]>' + newline + '<!-- content -->' + newline + '<![endif]-->',
    '$mso-hide': 'style="mso-hide:all;"',
    /* SOCIAL */
    '$social-share': '<!-- SOCIAL SHARE/ -->' + newline + '<tr><td align="center" valign="middle">' + newline + '<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" style="font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">' + newline + '<tr>' + newline + '<td class="box-responsive" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">' + newline + '<a href="https://www.twitter.com/share?url=https%3A%2F%2Fwww.wvi.org/.com%2F&text=I%20love%20World%20Vision!&via=worldvision" target="_blank">' + newline + 'Twitter' + newline + '</a></td>' + newline + '<td class="box-responsive" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">' + newline + '<a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.wvi.org/.com%2F" target="_blank">' + newline + 'Google Plus' + newline + '</a>' + newline + '</td>' + newline + '<td class="box-responsive" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;">' + newline + '<a href="https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.wvi.org/.com%2F&amp;description=Common%20HTML%20Email%20Components" target="_blank">' + newline + 'Pinterest' + newline + '</a>' + newline + '</td>' + newline + '<td class="box-responsive" align="center" valign="middle" style="border-collapse:collapse; mso-line-height-rule: exactly;"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wvi.org/.com%2F" target="_blank">' + newline + 'Facebook' + newline + '</a></td>' + newline + '</tr>' + newline + '</table>' + newline + '</td></tr>' + newline + '<!-- /SOCIAL SHARE -->',
    '$facebook-share': '<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.google.com%2F" target="_blank" style="text-decoration: none;"><span style="background-color:#3B5999; border: 1px solid #3B5999; color: #FFFFFF; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; text-decoration: none !important; display: inline-block; padding: 1px 5px; padding-top: 5px; padding-right: 1px; padding-bottom: 5px; padding-left: 1px; border-radius: 3px;">Share on Facebook</span></a>',
    '$facebook-follow': '<a href="https://www.facebook.com/FacebookforDevelopers/" target="_blank" style="text-decoration: none;"><span style="background-color:#3B5999; border: 1px solid #3B5999; color: #FFFFFF; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; text-decoration: none !important; display: inline-block; padding: 1px 5px; padding-top: 5px; padding-right: 1px; padding-bottom: 5px; padding-left: 1px; border-radius: 3px;">Follow on Facebook</span></a>',
    '$twitter-share': '<a href="https://twitter.com/intent/tweet?text=Hello World&url=https://www.google.com&hashtags=demo&via=emmanuelulloa"  target="_blank" style="text-decoration: none;"><span style="background-color:#55ACEE; border: 1px solid #55ACEE; color: #FFFFFF; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; text-decoration: none !important; display: inline-block; padding: 1px 5px; padding-top: 5px; padding-right: 1px; padding-bottom: 5px; padding-left: 1px; border-radius: 3px;">Share on Twitter</span></a>',
    '$twitter-follow': '<a href="https://twitter.com/intent/follow?screen_name=emmanuelulloa" target="_blank" style="text-decoration: none;"><span style="background-color:#55ACEE; border: 1px solid #55ACEE; color: #FFFFFF; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; text-decoration: none !important; display: inline-block; padding: 1px 5px; padding-top: 5px; padding-right: 1px; padding-bottom: 5px; padding-left: 1px; border-radius: 3px;">Follow @emmanuelulloa</span></a>',
    '$twitter-retweet': '<a href="https://twitter.com/intent/retweet?tweet_id=463440424141459456" target="_blank" style="text-decoration: none;"><span style="background-color:#55ACEE; border: 1px solid #55ACEE; color: #FFFFFF; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; text-decoration: none !important; display: inline-block; padding: 1px 5px; padding-top: 5px; padding-right: 1px; padding-bottom: 5px; padding-left: 1px; border-radius: 3px;">Retweet</span></a>',
    '$twitter-like': '<a href="https://twitter.com/intent/like?tweet_id=463440424141459456" target="_blank" style="text-decoration: none;"><span style="background-color:#55ACEE; border: 1px solid #55ACEE; color: #FFFFFF; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; text-decoration: none !important; display: inline-block; padding: 1px 5px; padding-top: 5px; padding-right: 1px; padding-bottom: 5px; padding-left: 1px; border-radius: 3px;">Like</span></a>',
    /* COMPONENTS */
    '$column': '<td>' + newline + '</td>' + newline,
    '$jumbotron': '<!-- JUMBOTRON/ -->' + newline + '<tr><td class="mobile-title" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size: 30px; line-height: 45px; font-weight: bold;">' + newline + 'The quick brown fox jumps over the lazy&nbsp;dog' + newline + '</td></tr>' + newline + '<tr><td class="mobile-text" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; ">' + newline + 'Duis non pellentesque odio, ut convallis nibh. Mauris ac justo in ante fringilla finibus. Donec feugiat facilisis est, quis ullamcorper odio tristique eget. Etiam eget semper arcu. Pellentesque auctor eleifend ornare. Aenean tempor velit a eros tincidunt egestas. Ut sit amet laoreet risus.' + newline + '</td></tr>' + newline + '<tr><td align="center" valign="middle" style="padding: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-right: 20px;">' + newline + '<table bgcolor="#E2071C" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-radius: 100px;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.emmanuelulloa.com" target="_blank" style="border: 0 solid #E2071C; color: #FFFFFF; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; padding: 16px 25px 16px 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&#9658;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '</td></tr>' + newline + '<!-- /JUMBOTRON -->',
    '$testimonial': '<!-- TESTIMONIAL/ -->' + newline + '<tr><td align="center" valign="middle" style="padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + '<img src="http://placekitten.com/320/320" width="100" height="100" border="0" style="display: block; border: 0px; border-radius: 100%;" alt="Alt text" />' + newline + '<td></tr>' + newline + '<tr><td class="mobile-text" align="left" valign="top" style="font-family: Palatino, \'Palatino Linotype\', \'Palatino LT STD\', \'Book Antiqua\', Georgia, serif; font-size: 20px; line-height: 30px; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar libero nec nisi porta, nec finibus lectus auctor. Curabitur sit amet neque libero. Quisque sodales egestas nisi, ut gravida nibh fermentum venenatis. Duis facilisis mattis congue. Phasellus odio urna, pulvinar a laoreet at, laoreet sit amet ipsum. Phasellus vel magna quis dolor mollis tristique nec ac ipsum. Sed eleifend quam quis ante sagittis porta. Aliquam suscipit suscipit tempus. Suspendisse molestie volutpat est vitae dapibus. Vestibulum auctor vel augue non ultricies.' + newline + '</td></tr>' + newline + '<tr><td align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;   font-style: italic; color: #0A0A0A;font-weight: bold;padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + 'Steve Jobs' + newline + '<td></tr>' + newline + '<!-- /TESTIMONIAL -->',
    '$footer': '<!-- FOOTER/ -->' + newline + '<tr><td bgcolor="#FEFEFE" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size: 10px; line-height: 16px; color: #333333;">' + newline + '<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '<tr><td valign="top" align="center">' + newline + 'Company Inc.<br />' + newline + '123 Address Street<br />' + newline + 'City Town, NC 12345<br />' + newline + '</td></tr><tr><td valign="top" align="center">' + newline + 'You are receiving this because you are a customer.' + newline + '</td></tr><tr><td valign="top" align="center">' + newline + '<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" style="border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">' + newline + '<tr>' + newline + '<td class="box-responsive" align="center" valign="top" style="border-collapse:collapse; mso-line-height-rule: exactly;"><a href="#" style="text-decoration:none!important; text-underline:none!important;">Unbsubscribe</a></td>' + newline + '<td class="box-responsive" align="center" valign="top" style="border-collapse:collapse; mso-line-height-rule: exactly;"><a href="#" style="text-decoration:none!important; text-underline:none!important;">Terms of Use</a></td>' + newline + '<td class="box-responsive" align="center" valign="top" style="border-collapse:collapse; mso-line-height-rule: exactly;"><a href="#" style="text-decoration:none!important; text-underline:none!important;">Privacy Policy</a></td>' + newline + '</tr>' + newline + '</table>' + newline + '</td></tr><tr><td valign="top" align="center">' + newline + 'Copyright &copy; 2017 Company Inc. All rights reserved.' + newline + '</td></tr>' + newline + '</table>' + newline + '</td></tr>' + newline + '<!-- /FOOTER -->',
    '$colorbox': '<!-- COLORBOX/ -->' + newline + '<tr bgcolor="' + BGCOLOR + '"><td align="left" valign="top" style="font-family:' + FONTFAMILY + '; font-size: 24px; line-height: 31px; color: #FFFFFF; text-align: justify; padding: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;">' + newline + 'El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.' + newline + '</td></tr>' + newline + '<!-- /COLORBOX -->' + newline,
    '$button': '<!-- BUTTON/ -->' + newline + '<table bgcolor="' + BUTTONCOLOR + '" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">' + newline + '<tr>' + newline + '<td style="padding: 0;">' + newline + '<a href="http://www.google.com" target="_blank" style="border: 0 solid ' + BUTTONCOLOR + '; color: #FFFFFF; display: inline-block; font-family: ' + FONTFAMILY + '; font-size: ' + FONTSIZE + '; padding: ' + FONTSIZE + ' 25px ' + FONTSIZE + ' 25px; text-align: center; text-decoration: none;">CALL TO ACTION&nbsp;&rarr;</a>' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<!-- /BUTTON -->',
    '$progress-bar': '<!-- PROGRESS BAR/ -->' + newline + '<tr><td align="center" valign="middle"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="42%" bgcolor="' + BUTTONCOLOR + '" align="left" valign="middle" style="font-family:' + FONTFAMILY + '; font-size:16px; color: #FFFFFF; line-height: 21px; background-color:' + BUTTONCOLOR + '; padding: 10px;">' + newline + '42%' + newline + '</td><td bgcolor="' + BGCOLOR + '" width="58%" align="left" valign="middle" style="font-family:' + FONTFAMILY + '; font-size:16px; line-height: 21px; background-color:' + BGCOLOR + ';">&nbsp;</td></tr></table></td></tr>' + newline + '<!-- /PROGRESS BAR -->' + newline,
    '$big-divider': '<!-- DIVIDER/ -->' + newline + '<tr><td bgcolor="' + BORDERCOLOR + '" align="center" valign="middle" height="' + SPACERSIZE + '" style="font-size: ' + SPACERSIZE + 'px; line-height: ' + SPACERSIZE + 'px; overflow: hidden; mso-line-height-rule: exactly;">&nbsp;</td></tr>' + newline + '<!-- /DIVIDER -->' + newline,
    '$expander': '<!-- EXPANDER/ -->' + newline + '<tr><td align="center" valign="middle" width="' + TABLEWIDTH + '" height="100" style="width: ' + TABLEWIDTH + 'px; height: 100px; overflow:hidden;">&nbsp;</td></tr>' + newline + '<!-- /EXPANDER -->' + newline,
    '$sup':'<sup style="font-size: 10px; line-height: 0; vertical-align: 5px;">&reg;</sup>',
    '$txt+img': '<!-- TXT + IMG/ -->' + newline + '<tr>' + newline + '<td align="center" valign="middle">' + newline + '<table class="box-responsive-first" width="300" align="left" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '<tr><td class="mobile-text" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; padding: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-right: 5px;">' + newline + 'Duis non pellentesque odio, ut convallis nibh. Mauris ac justo in ante fringilla finibus. Donec feugiat facilisis est, quis ullamcorper odio tristique eget. Etiam eget semper arcu. Pellentesque auctor eleifend ornare. Aenean tempor velit a eros tincidunt egestas. Ut sit amet laoreet risus.' + newline + '</td></tr>' + newline + '</table>' + newline + '<table class="box-responsive-last" width="300" align="right" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '<tr>' + newline + '<td align="center" valign="middle">' + newline + '<img class="img-responsive" src="http://placekitten.com/g/480/300" width="290" border="0" style="max-width: 290px; display: block; border: 0px;" alt="Alt text" />' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '</td>' + newline + '</tr>' + newline + '<!-- /TXT + IMG -->',
    '$img+txt': '<!-- IMG + TXT/ -->' + newline + '<tr>' + newline + '<td align="center" valign="middle">' + newline + '<table class="box-responsive-first" width="300" align="left" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '<tr>' + newline + '<td align="center" valign="middle">' + newline + '<img class="img-responsive" src="http://placekitten.com/g/480/300" width="290" border="0" style="max-width: 290px; display: block; border: 0px;" alt="Alt text" />' + newline + '</td>' + newline + '</tr>' + newline + '</table>' + newline + '<table class="box-responsive-last" width="300" align="right" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '<tr><td class="mobile-text" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; padding: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-right: 5px;">' + newline + 'Duis non pellentesque odio, ut convallis nibh. Mauris ac justo in ante fringilla finibus. Donec feugiat facilisis est, quis ullamcorper odio tristique eget. Etiam eget semper arcu. Pellentesque auctor eleifend ornare. Aenean tempor velit a eros tincidunt egestas. Ut sit amet laoreet risus.' + newline + '</td></tr>' + newline + '</table>' + newline + '</td>' + newline + '</tr>' + newline + '<!-- /IMG + TXT -->',
    '$event': '<!-- EVENT -->' + newline + '<tr><td align="center" valign="top" style="padding: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-right: 5px;">' + newline + '<table class="table-responsive" align="left" width="16.6%" border="0" cellspacing="0" cellpadding="0" style="border: 2px solid #DDDDDD;"><tr><td valign="top" align="center" bgcolor="#DDDDDD" style="font-size: 16px; line-height: 24px; font-family: \'Arial Narrow\', Arial, sans-serif; font-weight: bold; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + 'April' + newline + '</td></tr><tr><td valign="top" align="center" bgcolor="#FFFFFF" style="font-size: 40px; font-family: \'Arial Black\', \'Arial Bold\', Gadget, sans-serif; line-height: 60px;  padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-right: 10px;">' + newline + '13' + newline + '</td></tr></table>' + newline + '<table class="table-responsive" align="right" width="83.3%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td class="mobile-text" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; padding: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-right: 5px; ">' + newline + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Mauris velit odio, dapibus ac diam nec, pharetra imperdiet metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.' + newline + '</td></tr></table>' + newline + '</td></tr>' + newline + '<!-- EVENT -->',
    '$calendar': getCalendar(),
    /* GRID */
    '$1x1': createTable(1, 1),
    '$1x2': createTable(1, 2),
    '$1x3': createTable(1, 3),
    '$1x4': createTable(1, 4),
    '$2x1': createTable(2, 1),
    '$3x1': createTable(3, 1),
    '$2x2': createTable(2, 2),
    '$2x3': createTable(2, 3),
    '$3x2': createTable(3, 2),
    '$3x3': createTable(3, 3),
    '$table-center': '<table align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '</table>' + newline,
    '$table-left': '<table align="left" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '</table>' + newline,
    '$table-right': '<table align="right" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '</table>' + newline,
    '$table-full': '<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">' + newline + '</table>' + newline,
    '$tr-bg': '<tr bgcolor="#EEEEEE">' + newline + '</tr>' + newline,
    '$td-tl': '<td align="left" valign="top">' + newline + '</td>' + newline,
    '$td-cm': '<td align="center" valign="middle">' + newline + '</td>' + newline,
    '$col-empty': '<td align="left" valign="top" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; mso-line-height-rule: exactly;">' + newline + tab + '<!--[if gte mso 15]>&nbsp;<![endif]-->' + newline + '</td>' + newline,
    '$col-top-left': '<td align="left" valign="top">' + newline + '</td>' + newline,
    '$col-center-middle': '<td align="center" valign="middle">' + newline + '</td>' + newline,
    '$col-half': '<td width="' + getTDWidth(0.5) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-third': '<td width="' + getTDWidth(0.333) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-two-thirds': '<td width="' + getTDWidth(0.666) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-fourth': '<td width="' + getTDWidth(0.25) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-golden': '<td width="' + getTDWidth(0.618) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-10px': '<td width="10" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-20px': '<td width="20" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-30px': '<td width="30" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-40px': '<td width="40" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-50px': '<td width="50" align="left" valign="top">' + newline + '</td>' + newline,
    '$col-*': '<td width="*" align="left" valign="top">' + newline + '</td>' + newline,
    '$one': '<td width="' + getTDWidth(0.0833333) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$two': '<td width="' + getTDWidth(0.1666667) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$three': '<td width="' + getTDWidth(0.25) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$four': '<td width="' + getTDWidth(0.3333334) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$five': '<td width="' + getTDWidth(0.4166667) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$six': '<td width="' + getTDWidth(0.5) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$seven': '<td width="' + getTDWidth(0.5833334) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$eight': '<td width="' + getTDWidth(0.6666667) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$nine': '<td width="' + getTDWidth(0.75) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$ten': '<td width="' + getTDWidth(0.8333334) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$eleven': '<td width="' + getTDWidth(0.9166667) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$twelve': '<td width="' + getTDWidth(1) + '" align="left" valign="top">' + newline + '</td>' + newline,
    '$1-col': '<td width="8.3%" align="left" valign="top"' + newline + '</td>' + newline,
    '$2-col': '<td width="16.6%" align="left" valign="top">' + newline + '</td>' + newline,
    '$3-col': '<td width="25%" align="left" valign="top">' + newline + '</td>' + newline,
    '$4-col': '<td width="33.3%" align="left" valign="top">' + newline + '</td>' + newline,
    '$5-col': '<td width="41.6%" align="left" valign="top">' + newline + '</td>' + newline,
    '$6-col': '<td width="50%" align="left" valign="top">' + newline + '</td>' + newline,
    '$7-col': '<td width="58.3%" align="left" valign="top">' + newline + '</td>' + newline,
    '$8-col': '<td width="66.6%" align="left" valign="top">' + newline + '</td>' + newline,
    '$9-col': '<td width="75%" align="left" valign="top">' + newline + '</td>' + newline,
    '$10-col': '<td width="83.3%" align="left" valign="top">' + newline + '</td>' + newline,
    '$11-col': '<td width="91.6%" align="left" valign="top">' + newline + '</td>' + newline,
    '$12-col': '<td width="100%" align="left" valign="top">' + newline + '</td>' + newline,
    '$outlook-bg-img':'<!-- BACKGROUND IMAGE/ -->\n<tr>\n<td background="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" bgcolor="#E2071C" valign="top">\n<!--[if gte mso 9]>\n<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">\n<v:fill type="tile" src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" color="#E2071C" />\n<v:textbox inset="0,0,0,0">\n<![endif]-->\n<div>\nCONTENT\n</div>\n<!--[if gte mso 9]>\n</v:textbox>\n</v:rect>\n<![endif]-->\n</td>\n</tr>]\n<!-- /BACKGROUND IMAGE -->',
    '$outlook-row':'<tr><td align="center" valign="middle" height="10" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; mso-line-height-rule: exactly;"><!--[if gte mso 15]>&nbsp;<![endif]--></td></tr>',
    '$ghost-table-open': '<!-- OPEN GHOST COLUMN/ -->\n<!--[if (gte mso 9)|(IE)]>\n<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family: Calibri, sans-serif;color:#333333;" >\n<tr>\n<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >\n<![endif]-->\n<!-- /OPEN GHOST COLUMN -->',
    '$ghost-table-td': '<!-- ADD TD GHOST COLUMN/ -->\n<!--[if (gte mso 9)|(IE)]>\n</td><td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >\n<![endif]-->\n<!-- /ADD TD GHOST COLUMN -->',
    '$ghost-table-close': '<!-- CLOSE GHOST COLUMN/ -->\n<!--[if (gte mso 9)|(IE)]>\n</td>\n</tr>\n</table>\n<![endif]-->\n<!-- /CLOSE GHOST COLUMN -->',
    '$gmail': '<!DOCTYPE html>\n<html><head>\n<style>\n\tu + .body section .gmail {\n\t\tdisplay:block !important;\n\t}\n\tu + .body > .inbox {\n\t\tdisplay:block !important;\n\t}\n</style>\n</head>\n<body class="body">\n\t<section>\n\t<div class="gmail" style="display:none;">THIS IS GMAIL</div>\n\t<div class="inbox" style="display:none;">THIS IS INBOX</div>\n</section>\n</body>\n</html>',
    '$copy-alt':'<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">&#9400;</span>',
    '$reg-alt':'<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">&#9415;</span>',
    '$tm-alt':'<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>'
  };
  fillSnippets(commonSnippets, snippets);
  function getSnippet(val) {
    console.log(val);
    if (val == '$text') {
      return replaceAll(snippets['$text'], '@LIPSUM@', getLipsum());
    }
    return snippets[val];
  }

  function applySnippets() {
    //https://github.com/g13nn/Email-Framework/tree/master/components
    var c = $code.val();
    for (var k in snippets) {
      c = replaceAll(c, k, getSnippet(k));
    }
    $code.val(c);
    selectCode();
  }
  $('#short-tags').click(function(evt) {
    applySnippets();
  });

  function doPreview() {
    var iframeDoc = document.getElementById('preview-frame').contentDocument || document.getElementById('preview-frame').document;
    iframeDoc.body.innerHTML = $code.val();
  }
  $code.on('keyup keypress change blur', function(evt) {
    doPreview();
  });
  //http://stackoverflow.com/questions/1314450/jquery-how-to-capture-the-tab-keypress-within-a-textbox
  $("#code-wrapper").on('keydown', '#code', function(e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode == 9) {
      e.preventDefault();
      // call custom function here
      applySnippets();
      doPreview();
    }
  });
  $('#width-1, #width-2, #width-3, #width-4, #width-5').click(function(evt) {
    var thi$ = $(evt.target),
      previewFrame = $('#preview-frame');
    if (thi$.attr('id') == 'width-1') {
      previewFrame.css('width', '100%');
      previewFrame.css('height', '1800px');
    } else if (thi$.attr('id') == 'width-2') {
      previewFrame.css('width', '1000px');
      previewFrame.css('height', '600px');
    } else if (thi$.attr('id') == 'width-3') {
      previewFrame.css('width', '600px');
      previewFrame.css('height', '600px');
    } else if (thi$.attr('id') == 'width-4') {
      previewFrame.css('width', '480px');
      previewFrame.css('height', '320px');
    } else if (thi$.attr('id') == 'width-5') {
      previewFrame.css('width', '320px');
      previewFrame.css('height', '480px');
    }
  });
  //http://jona.ca/blog/unclosed-tag-finder
  function isSelfClosingTag(tagName) {
    return tagName.match(/area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script/i);
  }
  $('#unclosed-tag-finder-button').click(function() {
    var input = $('#code').val();

    // Line numbering code from https://jsfiddle.net/tovic/AbpRD/
    $('#unclosed-tag-finder-code').empty();
    $('#unclosed-tag-finder-code').append('<span><\/span>');
    $('#unclosed-tag-finder-code span').text(input);
    var pre = document.getElementById('unclosed-tag-finder-code');
    pre.innerHTML = '<span class="line-number"><\/span>' + pre.innerHTML + '<span class="cl"><\/span>';
    var num = pre.innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
      var line_num = pre.getElementsByTagName('span')[0];
      line_num.innerHTML += '<span>' + (j + 1) + '<\/span>';
    }

    var tags = [];
    // Strip out comments first.
    input = input.replace(/<!--[\s\S]*?-->/g, '');
    $.each(input.split('\n'), function(i, line) {
      $.each(line.match(/<[^>]*[^/]>/g) || [], function(j, tag) {
        var matches = tag.match(/<\/?([a-z0-9]+)/i);
        if (matches) {
          tags.push({
            tag: tag,
            name: matches[1],
            line: i + 1,
            closing: tag[1] == '/'
          });
        }
      });
    });
    if (tags.length == 0) {
      $('#unclosed-tag-finder-results').text('No tags found.');
      return;
    }
    var openTags = [];
    var error = false;
    var indent = 0;
    for (var i = 0; i < tags.length; i++) {
      var tag = tags[i];
      if (tag.closing) {
        var closingTag = tag;
        if (isSelfClosingTag(closingTag.name)) {
          continue;
        }
        if (openTags.length == 0) {
          $('#unclosed-tag-finder-results').text('Closing tag ' + closingTag.tag + ' on line ' + closingTag.line + ' does not have corresponding open tag.');
          return;
        }
        var openTag = openTags[openTags.length - 1];
        if (closingTag.name != openTag.name) {
          $('#unclosed-tag-finder-results').text('Closing tag ' + closingTag.tag + ' on line ' + closingTag.line + ' does not match open tag ' + openTag.tag + ' on line ' + openTag.line + '.');
          return;
        } else {
          openTags.pop();
        }
      } else {
        var openTag = tag;
        if (isSelfClosingTag(openTag.name)) {
          continue;
        }
        openTags.push(openTag);
      }
    }
    if (openTags.length > 0) {
      var openTag = openTags[openTags.length - 1];
      $('#unclosed-tag-finder-results').text('Open tag ' + openTag.tag + ' on line ' + openTag.line + ' does not have a corresponding closing tag.');
      return;
    }
    $('#unclosed-tag-finder-results').text('Success: No unclosed tags found.');
  });
  $('#open-inliner-options').click(function() {
    $('#inliner-options-panel').toggle();
  });
  //END
});
//Prevent scrolling
document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);
              
            
!
999px

Console