+++ /dev/null
-<style type="text/css">
-
- /* iframe sizes */
-
- #if-basicGrid {height: 200px;}
- #if-evenColumns {height: 260px;}
- #if-centerClass {height: 220px;}
-
- @media only screen and (max-width: 632px), only screen and (min-width: 768px) and (max-width: 843px) {
- #if-basicGrid {height: 225px;}
- #if-evenColumns {height: 570px;}
- #if-centerClass {height: 270px;}
- }
-
-</style>
-<div class="row docs">
- <div class="large-3 columns">
- <div data-magellan-expedition="fixed">
- <ul class="sub-nav hide-for-small">
- <li data-magellan-arrival="start"><a href="#start">Getting Started</a></li>
- <li data-magellan-arrival="grid"><a href="#grid">Grid</a></li>
- <li data-magellan-arrival="sub-grid"><a href="#sub-grid">Sub-Grid</a></li>
- <li data-magellan-arrival="visibility-classes"><a href="#visibility-classes">Visibility Classes</a></li>
- <li data-magellan-arrival="panels"><a href="#panels">Panels</a></li>
- <li data-magellan-arrival="buttons"><a href="#buttons">Buttons</a></li>
- <li data-magellan-arrival="compatibility"><a href="#compatibility">Compatibility</a></li>
- </ul>
- </div>
- </div>
- <div class="large-9 columns">
- <h1 id="start" class="light" data-magellan-destination="start">Getting Started</h1>
- <p class="lead">Dive into creating your responsive email.</p>
- <hr>
- <h2 class="light">The Boilerplate</h2>
- <p>
- Starting a new Ink project is fairly straightforward. If you aren't using one of our <a href="templates.php">templates</a>, grab the boilerplate code from below to use as a starting point. While you can reference <code>ink.css</code> using a link tag for testing purposes, be sure to remove the <kbd><link rel="stylesheet" href="ink.css" /></kbd> statement and paste your CSS into the style tag in the head before running your email through an inliner.
- </p>
- <h6>Boilerplate.html</h6>
- <?php code_example(
-'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width"/>
-
- <link rel="stylesheet" href="ink.css"> <!-- For testing only -->
-
- <style type="text/css">
-
- /* Ink styles go here in production */
-
- /* Your custom styles go here */
-
- </style>
- </head>
- <body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
-
- <!-- Email Content -->
-
- </td>
- </tr>
- </table>
- </body>
-</html>'
- , 'html'); ?>
- <br>
- <p>
- If you're applying a background color to your entire email, be sure to attach it to the table with a class of <code>body</code> as well as to the actual <kbd><body></kbd> tag, since some clients remove this by default.
- </p>
- <h6>Inline Styles
- <small class="cp">Copy/Paste</small>
- </h6>
- <?php code_example(
-'<html>
-
-...
-
-<body style="background:#ddd">
- <table class="body" style="background:#ddd"> <!-- Background goes here too -->
-
- ...
-
- </table>
-</body>'
- , 'html'); ?>
- <br>
- <h6>CSS</h6>
- <?php code_example(
-'body, .body {
- background: #ddd;
-}'
- , 'css'); ?>
- <br>
-
- <hr class="section">
-
- <h1 id="grid" class="light" data-magellan-destination="grid">Grid</h1>
- <p class="lead">Create powerful multi-device layouts quickly and easily.</p>
-
- <hr>
- <h2 class="light">Structure</h2>
- <p>Ink uses a 12-column grid with a 580px wrapper. On mobile devices (under 580px wide), columns become full width and stack vertically.</p>
- <p>Ink's grid can be thought of in terms of three components:</p>
- <h4 class="normal">Containers</h4>
- <p>Ink containers wrap the content and maintain a fixed, 580px layout on large displays. Below 580px, containers take up 95% of the screen's width, ensuring that your content doesn't run right up against the edges of the user's screen.</p>
- <h4 class="normal">Rows</h4>
- <p>Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <kbd><td></kbd> tags of <code>.row</code> tables use the wrapper class to maintain a gutter between columns. Note: the last <code>.wrapper</code> td in a row MUST have a class of <code>.last</code> applied to it, even if it's the only wrapper in the row (ex. for a row with a single, twelve column wide content area).</p>
- <h4 class="normal">Columns</h4>
- <p>Columns denote the width of the content, as based on a 12-column system. The content inside them will expand to cover n-columns, assuming that the number of columns in one row adds up to 12.</p>
- <h6>The Three Grid Components</h6>
- <p>Basic example of the three main grid components, with additional padding and coloring added for visibility.</p>
- <?php code_example(
-'<table class="container" style="background:purple;">
- <tr>
- <td style="padding-top: 10px; padding-bottom: 10px;">
-
- <table class="row" style="background:green;">
- <tr>
- <td class="wrapper">
-
- <table class="eight columns" style="background:pink;">
- <tr>
- <td>
-
- Eight Columns
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="four columns" style="background:pink;">
- <tr>
- <td>
-
- Four Columns
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- </td>
- </tr>
-</table>'
- , 'html'); ?>
- <br>
- <h6>Visual Explantion of Grid</h6>
- <p>In the example below, the container is purple (and has some additional padding added so that it isn't completely hidden by the row), the row is green and the two columns are pink.</p>
- <iframe id="if-basicGrid" src="docs/examples/basic-grid.html"></iframe>
- <br>
- <hr>
- <h2 class="light">Breakdown</h2>
- <p>The main elements in the grid and how they're used:</p>
- <table>
- <thead>
- <tr>
- <td>Element Type</td>
- <td>Class Name</td>
- <td>Description</td>
- </tr>
- </thead>
- <tr>
- <td>table</td>
- <td>container</td>
- <td>Constrains the content to a 580px wrapper on large screens (95% on small screens) and centers it within the body.</td>
- </tr>
- <tr>
- <td>table</td>
- <td>row</td>
- <td>Separates each row of content.</td>
- </tr>
- <tr>
- <td>td</td>
- <td>wrapper</td>
- <td>Wraps each <code>.columns</code> table, in order to create a gutter between columns and force them to expand to full width on small screens.</td>
- </tr>
- <tr>
- <td>td</td>
- <td>last</td>
- <td>Class applied to the last <code>.wrapper</code> td in each row in order for the gutter to work properly. If you only have one (presumably full-width) <code>.columns</code> table (and therefore one <code>.wrapper</code> td) in a row, the <code>.wrapper</code> td still needs to have the last class applied to it.</td>
- </tr>
- <tr>
- <td>table</td>
- <td>{number}</td>
- <td>Can be any number between one and twelve (spelled out). Used to determine how wide your <code>.columns</code> tables are. The number of columns in each row should add up to 12, including <a href="#offsets">offset columns</a>.</td>
- </tr>
- <tr>
- <td>table</td>
- <td>columns</td>
- <td>Table that displays as n-twelfths of the width of the 580px <code>.container</code> table on large screens, and expands to the full width of the <code>.container</code> table on small screens.</td>
- </tr>
- <tr>
- <td>td</td>
- <td>expander</td>
- <td>An empty (and invisible) element added after the content element in a <code>.columns</code> table. It forces the content <code>td</code> to expand to the full width of the screen on small devices, instead of just the width of the content within the <code>td</code>.</td>
- </tr>
- </table>
- <hr>
-
- <h2 class="light">Examples</h2>
- <h4 class="normal">Even Columns</h4>
- <p>Ink's tweve column grid makes creating even column layouts a snap. Just use one <code>.twelve.columns</code>, two <code>.six.columns</code>, three <code>.four.columns</code> or four <code>.three.columns</code> classes to create your layout. Appearing as multiple, even columns on large screens, the layout will fold into a single column on small (mobile) screens.</p>
- <h6>Code for Even Columns</h6>
- <?php code_example(
-'<table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td class="panel">
-
- twelve.columns
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="six columns">
- <tr>
- <td class="panel">
-
- .six.columns
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="six columns">
- <tr>
- <td class="panel">
-
- .six.columns
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- ...
-
- </td>
- </tr>
-</table>'
- , 'html'); ?>
- <br>
- <h6>Even 1, 2, 3 and 4 Column Layouts</h6>
- <iframe id="if-evenColumns" src="docs/examples/even-columns.html"></iframe>
- <br>
- <br>
- <!-- <h4 class="normal">Rows Within Columns</h4>
- <p>Unlike the <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation grid</a>, Ink's grid cannot be nested. A layout simulating rows within columns is possible, however, by placing multiple <code>.columns</code> tables (with the same number of columns) within the same <code>.wrapper</code> td.</p> -->
- <!-- <script type="text/javascript" src="https://snipt.net/embed/01eb0d482e77ef8e25e40e6d1dae49d1/"></script> -->
- <br><h4 class="normal">Centered Content</h4>
- <p>To center the content of a column, apply a class of <code>center</code> to the <kbd><td></kbd> that contains the content. If you want to center an image, you should also apply a class of <code>center</code> to the image itself.</p>
- <h6>The Center Class</h6>
- <?php code_example(
-'<table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="six columns">
- <tr>
- <td class="center panel">
- Centered content
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="six columns">
- <tr>
- <td class="center panel">
-
- <!-- Centered image -->
- <img class="center" src="http://placehold.it/125x125&text=Centered%20Image">
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
-</table>'
- , 'html'); ?>
- <br>
- <h6>Centered Text and Images</h6>
- <iframe id="if-centerClass" src="docs/examples/center-class.html"></iframe>
- <br>
- <br>
- <h4 class="normal">Expanders</h4>
- <p>When the Ink grid is shown on a small screen, the <code>.columns</code> tables expand to the full width of the container and stack vertically. On some clients, however, the columns don't expand properly if the content isn't as wide as the screen. While this might not seem so bad, it can cause your layout to appear broken if you are using a background color on the <code>.columns</code> table or are centering the content.</p>
- <p>To get around this, an empty <kbd><td></kbd> with a class of <code>expander</code> is used after the <kbd><td></kbd> containing the actual content in the <code>.columns</code> table. This extra <kbd><td></kbd> isn't displayed, but it forces the content <kbd><td></kbd> to expand to full width.</p>
- <h6>Expander TDs</h6>
- <?php code_example(
-'<table class="twelve columns">
- <tr>
- <td>
- <!-- Content not large enough to "prop" the container open all the way -->
- </td>
-
- <td class="expander"></td> <!-- Used to fix columns on small screens -->
-
- </tr>
-</table>'
- , 'html'); ?>
- <br>
- <br>
- <h2 class="light">Compatibility</h2>
- <div class="compatibility-section">
- <div class="row">
- <div class="large-9 columns">
- <p>The grid works in all major email clients, with minimal issues in <strong>Thunderbird (OSX)</strong> and <strong>Sparrow (iOS)</strong>.</p>
- </div>
- <div class="large-3 columns">
- <a href="#" class="reveal-table">Toggle Full Table</a>
- </div>
- </div>
-
- <div class="row">
- <div class="small-12 columns">
- <table>
- <thead>
- <tr>
- <th width="30%">Client</th>
- <th width="10%"><span>Supported</span></th>
- <th width="60%"><span>Notes</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Gmail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td>Max-width will prevent the logo from being larger than 217px wide.</td>
- </tr>
- <tr>
- <td>Gmail (Mobile)</td>
- <td><span class="x">✘</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Gmail (iOS)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Gmail (Android)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Yahoo! Mail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Yahoo! Mail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Mail (iOS)</td>
- <td><span class="check">✔</span></td>
- <td>Lorem ipsum dolor sit amet</td>
- </tr>
- <tr>
- <td>Mail (OSX)</td>
- <td><span class="check">✔</span></td>
- <td>Lorem ipsum dolor sit amet</td>
- </tr>
- <tr>
- <td>Mail (Android)</td>
- <td><span class="check">✔</span></td>
- <td>Lorem ipsum dolor sit amet</td>
- </tr>
- <tr>
- <td>Outlook Express</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Outlook 2003</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Outlook 2007, 2010, 2013</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Outlook 2011 for Mac</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Hotmail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Hotmail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Thunderbird</td>
- <td><span class="x">✘</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Sparrow (iOS)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Sparrow (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Entourage (2004)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Entourage (2008)</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Windows Mail</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- <tr>
- <td>Live Mail</td>
- <td><span class="check">✔</span></td>
- <td></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
- </div>
-
- <hr class="section">
-
- <h1 id="sub-grid" class="light" data-magellan-destination="sub-grid">Sub-Grid</h1>
- <p class="lead">A non-stacking grid for even more versatile layouts.</p>
- <hr />
-
- <h4 class="normal">Grids Within Grids</h4>
- <p>While the Ink grid can't be infinitely nested like its <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation counterpart</a>, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a <code>.sub-columns</code> class (as well as a numbered class, same as the primary grid) to a <kbd><td></kbd> tag underneath a <code>.columns</code> table, you can sub-divide the <code>.columns</code> table into sub-columns.</p>
- <p>The last <code>.sub-columns</code> <kbd><td></kbd> in the <code>.columns</code> <kbd><table></kbd> should be given a class of <code>last</code> in order for the gutter padding to be properly maintained.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/6a36cf3cecb431e26fc66e7b878822b5/"></script> -->
- <br>
- <h4 class="normal">Sub-Grid Rows</h4>
- <p>To create nested rows within a column, place multiple <code>.columns</code> tables (with the same number of columns) in the same <code>.wrapper</code> td. These <code>.columns</code> tables can then be further divided into sub-columns by placing the a <code>.sub-columns</code> class on their child <kbd><td></kbd> elements.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/728696fb8f11a1f377f2ad3219e40d6e/"></script> -->
- <br>
- <hr />
- <h2 class="light">Examples</h2>
- <h4 class="normal">Non-Stacking Row</h4>
- <p>Sometimes you may wish to display columns of content that you don't want to stack on small screens. In this case, the easiest way is to place your content in a <code>.twelve.columns</code> container and use sub-columns to arrange your content.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/fb54c056f05bf8be2994986c58c1ca30/"></script> -->
-
- <hr class="section">
-
- <!-- <h1 id="full-width" class="light">Full-Width Headers & Footers</h1>
- <p class="lead">Off-container elements for expressive layouts.</p>
- <hr />
-
- <h4 class="normal">Using our predefined HTML classes</h4>
- <p>These are examples of different ways to use the 4-column Ink Grid. Emails work properly by using table elements, a developer's and designer's worst enemy, but we've made it easy for you. You can create beautiful layouts with ease, but only if you follow this structure.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script> -->
- <br>
- <hr />
- <h2 class="light">Breakdown</h2>
- <p>Here's how these items are being used:</p>
-
- <hr />
- <h2 class="light">Examples</h2>
- <p>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script> -->
-
- <hr class="section"> -->
-
- <h1 id="visibility-classes" class="light" data-magellan-destination="visibility-classes">Visibility Classes</h1>
- <p class="lead">Selectively show content for different screen sizes.</p>
- <hr />
-
- <p>By adding a visibility class to an element, you can show or hide it based on screen size. Visibility classes can be used on any element.</p>
- <p>Note: If you're using a visibility class on an <code><img></code> tag, be sure to include it on the image's parent element as well, in order for it to work in all browsers.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script> -->
- <br>
- <hr />
- <h2 class="light">Breakdown</h2>
- <p>Available visibility classes:</p>
- <table>
- <tr>
- <td><code>.hide-for-small</code></td>
- </tr>
- <tr>
- <td><code>.show-for-small</code></td>
- </tr>
- <tr>
- <td><code>.hide-for-large</code> (same as <code>.show-for-small</code>)</td>
- </tr>
- <tr>
- <td><code>.show-for-large</code> (same as <code>.hide-for-small</code>)</td>
- </tr>
- </table>
-
- <hr class="section">
-
- <h1 id="panels" class="light" data-magellan-destination="panels">Panels</h1>
- <p class="lead">Quickly highlight important content.</p>
- <hr />
-
- <p>Add a class of <code>panel</code> to a <kbd><td></kbd> in order to give it a default border and background color. Great for offsetting important content or sidebars.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/d6fe336d4fbc6804f6cbe7df87343283/"></script> -->
-
- <hr class="section">
-
- <h1 id="buttons" class="light" data-magellan-destination="buttons">Buttons</h1>
- <p class="lead">Dynamic and effective calls to action.</p>
- <hr />
- <h2 class="light">Structure</h2>
- <h4 class="normal">Style One: The Preferred Method* <small>Does not work with <a href="#">Premailer</a>.</small></h4>
- <p>To create buttons that look great in most clients, give a class of <code>button</code> to an <kbd><a></kbd> tag, and use it to enclose a table with your content. While this gives you a nice looking button with a full click-target, it doesn't work in all CSS inliners, since it's technically invalid for an inline element (the <kbd><a></kbd> tag) to wrap a table element (booooooooo!).</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/6ba14740d872d10cd5da2e04c65350c6/"></script> -->
- <br>
- <h4 class="normal">Style Two: The Bulletproof Method* <small>Not yet implemented.</small></h4>
- <p>If you need to support a CSS inliner that chokes on our preferred buttons, then our bulletproof method is the way to go. By creating a <kbd><table></kbd> of class <code>button</code> and putting your <kbd><a></kbd> inside that, you'll have a nice looking button that won't break <a href="#">Premailer</a>. This method comes at a cost, however, as the click target only covers the button text, rather than the entire button.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/d73c0ffa28c3d602cef080776bec7095/"></script> -->
- <br>
- <hr />
- <h2 class="light">Style Classes</h2>
- <p>Several built in styling classes can be applied to the same element as the <code>button</code> class is applied to in order to adjust the button's appearance.</p>
- <h4 class="normal">Size</h4>
- <p>Size classes affect the button's vertical padding. The available size classes are:</p>
- <table>
- <tr>
- <td><code>.button</code> (same as <code>.small-button</code>)</td>
- </tr>
- <tr>
- <td><code>.tiny-button</code></td>
- </tr>
- <tr>
- <td><code>.small-button</code></td>
- </tr>
- <tr>
- <td><code>.medium-button</code></td>
- </tr>
- <tr>
- <td><code>.large-button</code></td>
- </tr>
- </table>
- <h4 class="normal">Color</h4>
- <p>Color classes denote the purpose of the button, and are used to change its background color. The available color classes are:</p>
- <table>
- <tr>
- <td>none (same as <code>.primary</code>)</td>
- </tr>
- <tr>
- <td><code>.primary</code></td>
- </tr>
- <tr>
- <td><code>.secondary</code></td>
- </tr>
- <tr>
- <td><code>.alert</code></td>
- </tr>
- <tr>
- <td><code>.success</code></td>
- </tr>
- </table>
- <h4 class="normal">Border Radius</h4>
- <p>Radius classes cause the corners of the buttons to be rounded in clients that support the <kbd>border-radius</kbd> property. The available radius classes are:</p>
- <table>
- <tr>
- <td>none (no border-radius)</td>
- </tr>
- <tr>
- <td><code>.radius</code></td>
- </tr>
- <tr>
- <td><code>.round</code></td>
- </tr>
- </table>
- <hr />
- <h2 class="light">Examples</h2>
- <p>Buttons expand to the width of their parent container by default, so it's recommended that you contain them within a sub-grid or a relatively small number of columns on the main grid.</p>
- <!-- <script type="text/javascript" src="https://snipt.net/embed/4544d214e092be6a5c073504ad1d6443/"></script> -->
- <br>
-
- <hr class="section">
-
- <h1 id="buttons" class="light" data-magellan-destination="compatibility">Compatibility</h1>
- <p class="lead">Here's a breakdown of the email clients that we’ve optimized Ink for.</p>
- <hr />
- <table>
- <thead>
- <tr>
- <th width="40%">Client</th>
- <th width="20%"><span>The Grid</span></th>
- <th width="20%"><span>UI Elements</span></th>
- <th width="20%"><span>Visibility Classes</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Gmail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Gmail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Gmail (iOS)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Gmail (Android)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Yahoo! Mail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Yahoo! Mail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Mail (iOS)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Mail (OSX)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Mail (Android)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook Express</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook 2003</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook 2007, 2010, 2013</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook 2011 for Mac</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Hotmail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Hotmail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Thunderbird</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Sparrow (iOS)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Sparrow (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Entourage (2004)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Entourage (2008)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Windows Mail</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Live Mail</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- </tbody>
- </table>
-
- <br>
- <br>
- <br>
- </div>
-</div>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width"/>
- <style>
-
-/* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
-/**********************************************
-* Client-specific Styles & Reset *
-**********************************************/
-
-/* Force Outlook to provide a "view in browser" menu link. */
-#outlook a {
- padding:0;
-}
-
-body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
-}
-
-/* Force Hotmail to display emails at full width */
-.ExternalClass {
- width:100%;
-}
-
-/* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
- line-height: 100%;
-}
-
-#backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
-}
-
-img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
-}
-
-center {
- width: 100%;
-}
-
-a img {
- border: none;
-}
-
-p {
- margin: 0 0 0 10px;
-}
-
-table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
-}
-
-table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
-}
-
-hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
-}
-
-/**********************************************
-* Responsive Grid *
-**********************************************/
-
-table.body {
- height: 100%;
- width: 100%;
-}
-
-table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
-}
-
-table.row {
- padding: 0px;
- width: 100%;
- position: relative;
-}
-
-table.container table.row {
- display: block;
-}
-
-td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
-}
-
-table.columns,
-table.column {
- margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
- padding: 0px 0px 10px;
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
- padding-right: 3.448276%;
-}
-
-table.row td.last,
-table.container td.last {
- padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-td.one { width: 8.333333% !important; }
-td.two { width: 16.666666% !important; }
-td.three { width: 25% !important; }
-td.four { width: 33.333333% !important; }
-td.five { width: 41.666666% !important; }
-td.six { width: 50% !important; }
-td.seven { width: 58.333333% !important; }
-td.eight { width: 66.666666% !important; }
-td.nine { width: 75% !important; }
-td.ten { width: 83.333333% !important; }
-td.eleven { width: 91.666666% !important; }
-td.twelve { width: 100% !important; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.sub-offset-by-one { padding-left: 5.172413% !important; }
-td.sub-offset-by-two { padding-left: 13.793102% !important; }
-td.sub-offset-by-three { padding-left: 22.413791% !important; }
-td.sub-offset-by-four { padding-left: 31.034480% !important; }
-td.sub-offset-by-five { padding-left: 39.655169% !important; }
-td.sub-offset-by-six { padding-left: 48.275858% !important; }
-td.sub-offset-by-seven { padding-left: 56.896547% !important; }
-td.sub-offset-by-eight { padding-left: 65.517236% !important; }
-td.sub-offset-by-nine { padding-left: 74.137925% !important; }
-td.sub-offset-by-ten { padding-left: 82.758614% !important; }
-td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
-td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
-}
-
-/**********************************************
-* Block Grid *
-**********************************************/
-
-.block-grid {
- width: 100%;
- max-width: 580px;
-}
-
-.block-grid td {
- display: inline-block;
- padding:10px;
-}
-
-.two-up td {
- width:270px;
-}
-
-.three-up td {
- width:173px;
-}
-
-.four-up td {
- width:125px;
-}
-
-.five-up td {
- width:96px;
-}
-
-.six-up td {
- width:76px;
-}
-
-.seven-up td {
- width:62px;
-}
-
-.eight-up td {
- width:52px;
-}
-
-/**********************************************
-* Alignment & Visibility Classes *
-**********************************************/
-
-table.center, td.center {
- text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
- text-align: center;
-}
-
-span.center {
- display: block;
- width: 100%;
- text-align: center;
-}
-
-img.center {
- margin: 0 auto;
- float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
- display: none;
-}
-
-/**********************************************
-* Typography *
-**********************************************/
-
-body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
- word-break: normal;
-}
-
-h1 {font-size: 59px;}
-h2 {font-size: 45px;}
-h3 {font-size: 37px;}
-h4 {font-size: 28px;}
-h5 {font-size: 23px;}
-h6 {font-size: 17px;}
-body, p {font-size: 14px;line-height:19px;}
-
-p {
- padding-bottom: 10px;
-}
-
-small {
- font-size: 10px;
-}
-
-a {
- color: #2ba6cb;
- text-decoration: none !important;
-}
-
-a:hover {
- color: #2795b6 !important;
-}
-
-a:active {
- color: #2795b6 !important;
-}
-
-a:visited {
- color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: #2ba6cb !important;
-}
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
- color: #2ba6cb !important;
-}
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
- color: #2ba6cb !important;
-}
-
-/**********************************************
-* Panels *
-**********************************************/
-
-td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
-}
-
-/**********************************************
-* Buttons *
-**********************************************/
-
-a.button table,
-a.tiny-button table,
-a.small-button table,
-a.medium-button table,
-a.large-button table {
- width: 100%;
- overflow: hidden;
-}
-
-a.button td,
-a.tiny-button td,
-a.small-button td,
-a.medium-button td,
-a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
- color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
-}
-
-a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
-}
-
-a.button td,
-a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
-}
-
-a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
-}
-
-a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
-}
-
-a:hover.button td,
-a:hover.tiny-button td,
-a:hover.small-button td,
-a:hover.medium-button td,
-a:hover.large-button td {
- background: #2795b6 !important;
-}
-
-a.button,
-a:hover.button,
-a:active.button,
-a:visited.button,
-a.tiny-button,
-a:hover.tiny-button,
-a:active.tiny-button,
-a:visited.tiny-button,
-a.small-button,
-a:hover.small-button,
-a:active.small-button,
-a:visited.small-button,
-a.medium-button,
-a:hover.medium-button,
-a:active.medium-button,
-a:visited.medium-button,
-a.large-button,
-a:hover.large-button,
-a:active.large-button,
-a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
-}
-
-a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
-}
-
-a:hover.secondary td {
- background: #d0d0d0 !important;
-}
-
-a.success td {
- background: #5da423;
- border-color: #457a1a;
-}
-
-a:hover.success td {
- background: #457a1a !important;
-}
-
-a.alert td {
- background: #c60f13;
- border-color: #970b0e;
-}
-
-a:hover.alert td {
- background: #970b0e !important;
-}
-
-a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-
-a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
-}
-span { color: #FFF; display: block; font-size: 12px; padding: 5px 10px; font-family: Courier, monospace; }
-table, tr, td { vertical-align: middle; }
-table.columns td, table.column td { padding: 0; }
-td.wrapper { padding-top: 0; }
-/**********************************************
-* Outlook First *
-**********************************************/
-
-body.outlook img {
- width: auto !important;
- max-width: none !important;
-}
-
-/**********************************************
-* Media Queries *
-**********************************************/
-
-@media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
-}
-
- /* Custom styles go here */
-
- body {
- padding-top: 25px;
- padding-bottom: 25px;
- }
- </style>
-</head>
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
-
-
- <!-- EXAMPLE CODE -->
-
- <table class="container" style="background:#002B35;">
- <tr>
- <td><span>table.container</span></td>
- </tr>
- <tr>
- <td>
- <table class="row" style="background:#28A9C5;">
- <tr>
- <td><span>table.row</span></td>
- </tr>
- <tr>
- <td class="wrapper">
-
- <table class="eight columns" style="background:#82CCE5;">
- <tr>
- <td>
- <span>.eight.columns</span>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="four columns" style="background:#82CCE5;">
- <tr>
- <td>
- <span>.four.columns</span>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- <tr>
- <td><span> </span></td>
- </tr>
- </table>
-
- </td>
- </tr>
- <tr>
- <td><span> </span></td>
- </tr>
- </table>
-
- <!-- END EXAMPLE CODE -->
-
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width"/>
- <style>
-
-/* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
-/**********************************************
-* Client-specific Styles & Reset *
-**********************************************/
-
-/* Force Outlook to provide a "view in browser" menu link. */
-#outlook a {
- padding:0;
-}
-
-body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
-}
-
-/* Force Hotmail to display emails at full width */
-.ExternalClass {
- width:100%;
-}
-
-/* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
- line-height: 100%;
-}
-
-#backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
-}
-
-img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
-}
-
-center {
- width: 100%;
-}
-
-a img {
- border: none;
-}
-
-p {
- margin: 0 0 0 10px;
-}
-
-table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
-}
-
-table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
-}
-
-hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
-}
-
-/**********************************************
-* Responsive Grid *
-**********************************************/
-
-table.body {
- height: 100%;
- width: 100%;
-}
-
-table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
-}
-
-table.row {
- padding: 0px;
- width: 100%;
- position: relative;
-}
-
-table.container table.row {
- display: block;
-}
-
-td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
-}
-
-table.columns,
-table.column {
- margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
- padding: 0px 0px 10px;
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
- padding-right: 3.448276%;
-}
-
-table.row td.last,
-table.container td.last {
- padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-td.one { width: 8.333333% !important; }
-td.two { width: 16.666666% !important; }
-td.three { width: 25% !important; }
-td.four { width: 33.333333% !important; }
-td.five { width: 41.666666% !important; }
-td.six { width: 50% !important; }
-td.seven { width: 58.333333% !important; }
-td.eight { width: 66.666666% !important; }
-td.nine { width: 75% !important; }
-td.ten { width: 83.333333% !important; }
-td.eleven { width: 91.666666% !important; }
-td.twelve { width: 100% !important; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.sub-offset-by-one { padding-left: 5.172413% !important; }
-td.sub-offset-by-two { padding-left: 13.793102% !important; }
-td.sub-offset-by-three { padding-left: 22.413791% !important; }
-td.sub-offset-by-four { padding-left: 31.034480% !important; }
-td.sub-offset-by-five { padding-left: 39.655169% !important; }
-td.sub-offset-by-six { padding-left: 48.275858% !important; }
-td.sub-offset-by-seven { padding-left: 56.896547% !important; }
-td.sub-offset-by-eight { padding-left: 65.517236% !important; }
-td.sub-offset-by-nine { padding-left: 74.137925% !important; }
-td.sub-offset-by-ten { padding-left: 82.758614% !important; }
-td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
-td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
-}
-
-/**********************************************
-* Block Grid *
-**********************************************/
-
-.block-grid {
- width: 100%;
- max-width: 580px;
-}
-
-.block-grid td {
- display: inline-block;
- padding:10px;
-}
-
-.two-up td {
- width:270px;
-}
-
-.three-up td {
- width:173px;
-}
-
-.four-up td {
- width:125px;
-}
-
-.five-up td {
- width:96px;
-}
-
-.six-up td {
- width:76px;
-}
-
-.seven-up td {
- width:62px;
-}
-
-.eight-up td {
- width:52px;
-}
-
-/**********************************************
-* Alignment & Visibility Classes *
-**********************************************/
-
-table.center, td.center {
- text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
- text-align: center;
-}
-
-span.center {
- display: block;
- width: 100%;
- text-align: center;
-}
-
-img.center {
- margin: 0 auto;
- float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
- display: none;
-}
-
-/**********************************************
-* Typography *
-**********************************************/
-
-body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
- word-break: normal;
-}
-
-h1 {font-size: 59px;}
-h2 {font-size: 45px;}
-h3 {font-size: 37px;}
-h4 {font-size: 28px;}
-h5 {font-size: 23px;}
-h6 {font-size: 17px;}
-body, p {font-size: 14px;line-height:19px;}
-
-p {
- padding-bottom: 10px;
-}
-
-small {
- font-size: 10px;
-}
-
-a {
- color: #2ba6cb;
- text-decoration: none !important;
-}
-
-a:hover {
- color: #2795b6 !important;
-}
-
-a:active {
- color: #2795b6 !important;
-}
-
-a:visited {
- color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: #2ba6cb !important;
-}
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
- color: #2ba6cb !important;
-}
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
- color: #2ba6cb !important;
-}
-
-/**********************************************
-* Panels *
-**********************************************/
-
-td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
-}
-
-/**********************************************
-* Buttons *
-**********************************************/
-
-a.button table,
-a.tiny-button table,
-a.small-button table,
-a.medium-button table,
-a.large-button table {
- width: 100%;
- overflow: hidden;
-}
-
-a.button td,
-a.tiny-button td,
-a.small-button td,
-a.medium-button td,
-a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
- color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
-}
-
-a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
-}
-
-a.button td,
-a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
-}
-
-a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
-}
-
-a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
-}
-
-a:hover.button td,
-a:hover.tiny-button td,
-a:hover.small-button td,
-a:hover.medium-button td,
-a:hover.large-button td {
- background: #2795b6 !important;
-}
-
-a.button,
-a:hover.button,
-a:active.button,
-a:visited.button,
-a.tiny-button,
-a:hover.tiny-button,
-a:active.tiny-button,
-a:visited.tiny-button,
-a.small-button,
-a:hover.small-button,
-a:active.small-button,
-a:visited.small-button,
-a.medium-button,
-a:hover.medium-button,
-a:active.medium-button,
-a:visited.medium-button,
-a.large-button,
-a:hover.large-button,
-a:active.large-button,
-a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
-}
-
-a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
-}
-
-a:hover.secondary td {
- background: #d0d0d0 !important;
-}
-
-a.success td {
- background: #5da423;
- border-color: #457a1a;
-}
-
-a:hover.success td {
- background: #457a1a !important;
-}
-
-a.alert td {
- background: #c60f13;
- border-color: #970b0e;
-}
-
-a:hover.alert td {
- background: #970b0e !important;
-}
-
-a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-
-a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
-}
-
-/**********************************************
-* Outlook First *
-**********************************************/
-
-body.outlook img {
- width: auto !important;
- max-width: none !important;
-}
-
-/**********************************************
-* Media Queries *
-**********************************************/
-
-@media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
-}
-
- /* Custom styles go here */
-
- body {
- padding-top: 25px;
- padding-bottom: 25px;
- }
- </style>
-</head>
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
-
-
- <!-- EXAMPLE CODE -->
-
- <table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="six columns">
- <tr>
- <td class="center panel">
- Centered content
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="six columns">
- <tr>
- <td class="center panel">
-
- <!-- Centered image -->
- <img class="center" src="http://placehold.it/125x125&text=Image">
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <!-- END EXAMPLE CODE -->
-
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width"/>
- <style>
-
-/* Ink v0.7.0 - Copyright 2013 ZURB Inc */
-
-/**********************************************
-* Client-specific Styles & Reset *
-**********************************************/
-
-/* Force Outlook to provide a "view in browser" menu link. */
-#outlook a {
- padding:0;
-}
-
-body{
- width:100% !important;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
-}
-
-/* Force Hotmail to display emails at full width */
-.ExternalClass {
- width:100%;
-}
-
-/* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
- line-height: 100%;
-}
-
-#backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
-}
-
-img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
-}
-
-center {
- width: 100%;
-}
-
-a img {
- border: none;
-}
-
-p {
- margin: 0 0 0 10px;
-}
-
-table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
-}
-
-table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
-}
-
-hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
-}
-
-/**********************************************
-* Responsive Grid *
-**********************************************/
-
-table.body {
- height: 100%;
- width: 100%;
-}
-
-table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
-}
-
-table.row {
- padding: 0px;
- width: 100%;
- position: relative;
-}
-
-table.container table.row {
- display: block;
-}
-
-td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
-}
-
-table.columns,
-table.column {
- margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
- padding: 0px 0px 10px;
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
- padding-right: 3.448276%;
-}
-
-table.row td.last,
-table.container td.last {
- padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-td.one { width: 8.333333% !important; }
-td.two { width: 16.666666% !important; }
-td.three { width: 25% !important; }
-td.four { width: 33.333333% !important; }
-td.five { width: 41.666666% !important; }
-td.six { width: 50% !important; }
-td.seven { width: 58.333333% !important; }
-td.eight { width: 66.666666% !important; }
-td.nine { width: 75% !important; }
-td.ten { width: 83.333333% !important; }
-td.eleven { width: 91.666666% !important; }
-td.twelve { width: 100% !important; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.sub-offset-by-one { padding-left: 5.172413% !important; }
-td.sub-offset-by-two { padding-left: 13.793102% !important; }
-td.sub-offset-by-three { padding-left: 22.413791% !important; }
-td.sub-offset-by-four { padding-left: 31.034480% !important; }
-td.sub-offset-by-five { padding-left: 39.655169% !important; }
-td.sub-offset-by-six { padding-left: 48.275858% !important; }
-td.sub-offset-by-seven { padding-left: 56.896547% !important; }
-td.sub-offset-by-eight { padding-left: 65.517236% !important; }
-td.sub-offset-by-nine { padding-left: 74.137925% !important; }
-td.sub-offset-by-ten { padding-left: 82.758614% !important; }
-td.sub-offset-by-eleven { padding-left: 91.379303% !important; }
-
-td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
-}
-
-/**********************************************
-* Block Grid *
-**********************************************/
-
-.block-grid {
- width: 100%;
- max-width: 580px;
-}
-
-.block-grid td {
- display: inline-block;
- padding:10px;
-}
-
-.two-up td {
- width:270px;
-}
-
-.three-up td {
- width:173px;
-}
-
-.four-up td {
- width:125px;
-}
-
-.five-up td {
- width:96px;
-}
-
-.six-up td {
- width:76px;
-}
-
-.seven-up td {
- width:62px;
-}
-
-.eight-up td {
- width:52px;
-}
-
-/**********************************************
-* Alignment & Visibility Classes *
-**********************************************/
-
-table.center, td.center {
- text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
- text-align: center;
-}
-
-span.center {
- display: block;
- width: 100%;
- text-align: center;
-}
-
-img.center {
- margin: 0 auto;
- float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
- display: none;
-}
-
-/**********************************************
-* Typography *
-**********************************************/
-
-body, h1, h2, h3, h4, h5, h6, p {
- color: #222222;
- display: block;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
- word-break: normal;
-}
-
-h1 {font-size: 59px;}
-h2 {font-size: 45px;}
-h3 {font-size: 37px;}
-h4 {font-size: 28px;}
-h5 {font-size: 23px;}
-h6 {font-size: 17px;}
-body, p {font-size: 14px;line-height:19px;}
-
-p {
- padding-bottom: 10px;
-}
-
-small {
- font-size: 10px;
-}
-
-a {
- color: #2ba6cb;
- text-decoration: none !important;
-}
-
-a:hover {
- color: #2795b6 !important;
-}
-
-a:active {
- color: #2795b6 !important;
-}
-
-a:visited {
- color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: #2ba6cb !important;
-}
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
- color: #2ba6cb !important;
-}
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
- color: #2ba6cb !important;
-}
-
-/**********************************************
-* Panels *
-**********************************************/
-
-td.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
-}
-
-/**********************************************
-* Buttons *
-**********************************************/
-
-a.button table,
-a.tiny-button table,
-a.small-button table,
-a.medium-button table,
-a.large-button table {
- width: 100%;
- overflow: hidden;
-}
-
-a.button td,
-a.tiny-button td,
-a.small-button td,
-a.medium-button td,
-a.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
- color: #ffffff;
- background: #2ba6cb;
- border: 1px solid #2284a1;
-}
-
-a.tiny-button td {
- padding: 5px 10px;
- font-size: 12px;
- font-weight: normal;
-}
-
-a.button td,
-a.small-button td {
- padding: 8px 15px;
- font-size: 16px;
-}
-
-a.medium-button td {
- padding: 12px 24px;
- font-size: 20px;
-}
-
-a.large-button td {
- padding: 21px 30px;
- font-size: 24px;
-}
-
-a:hover.button td,
-a:hover.tiny-button td,
-a:hover.small-button td,
-a:hover.medium-button td,
-a:hover.large-button td {
- background: #2795b6 !important;
-}
-
-a.button,
-a:hover.button,
-a:active.button,
-a:visited.button,
-a.tiny-button,
-a:hover.tiny-button,
-a:active.tiny-button,
-a:visited.tiny-button,
-a.small-button,
-a:hover.small-button,
-a:active.small-button,
-a:visited.small-button,
-a.medium-button,
-a:hover.medium-button,
-a:active.medium-button,
-a:visited.medium-button,
-a.large-button,
-a:hover.large-button,
-a:active.large-button,
-a:visited.large-button {
- color: #ffffff !important;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
-}
-
-a.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
-}
-
-a:hover.secondary td {
- background: #d0d0d0 !important;
-}
-
-a.success td {
- background: #5da423;
- border-color: #457a1a;
-}
-
-a:hover.success td {
- background: #457a1a !important;
-}
-
-a.alert td {
- background: #c60f13;
- border-color: #970b0e;
-}
-
-a:hover.alert td {
- background: #970b0e !important;
-}
-
-a.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-
-a.rounded td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
-}
-
-span { font-family: Courier, monospace; font-size: 12px; display: block; }
-/**********************************************
-* Outlook First *
-**********************************************/
-
-body.outlook img {
- width: auto !important;
- max-width: none !important;
-}
-
-/**********************************************
-* Media Queries *
-**********************************************/
-
-@media only screen and (max-width: 600px) {
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100%;
- }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] .expander {
- width: 9999px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
-}
-
- /* Custom styles go here */
-
- body {
- padding-top: 25px;
- padding-bottom: 25px;
- }
- </style>
-</head>
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
-
-
- <!-- EXAMPLE CODE -->
-
- <table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="twelve columns">
- <tr>
- <td class="panel">
-
- <span>.twelve.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="six columns">
- <tr>
- <td class="panel">
-
- <span>.six.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="six columns">
- <tr>
- <td class="panel">
-
- <span>.six.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="four columns">
- <tr>
- <td class="panel">
-
- <span>.four.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper">
-
- <table class="four columns">
- <tr>
- <td class="panel">
-
- <span>.four.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="four columns">
- <tr>
- <td class="panel">
-
- <span>.four.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <td class="wrapper">
-
- <table class="three columns">
- <tr>
- <td class="panel">
-
- <span>.three.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper">
-
- <table class="three columns">
- <tr>
- <td class="panel">
-
- <span>.three.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper">
-
- <table class="three columns">
- <tr>
- <td class="panel">
-
- <span>.three.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="three columns">
- <tr>
- <td class="panel">
-
- <span>.three.columns</span>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <!-- END EXAMPLE CODE -->
-
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
projects / thirdparty / foundation / foundation-emails.git / commitdiff
