-Foundation for Emails
-===
+# [Foundation for Emails](http://foundation.zurb.com/emails) (v2.0 Alpha)
-Foundation for Email is a responsive email framework, used to make HTML emails look great on any client or device. It includes a 12-column grid, as well as some simple UI elements for rapid prototyping.
+Foundation for Emails is the second installment of what was previously known as Ink. We've made some major improvements to the workflow including:
-Homepage: TBD<br />
-Documentation: TBD<br />
-Download: TBD
+- **Inky, our new templating language!**
+- **A small and large grid.**
+- **Sass integration.**
+- **Panini, our flat file generator.**
+- **Components.**
+- **Automatic inlining with a single command.**
-Foundation for Email is MIT-licensed and absolutely free to use. Foundation for Email wouldn't be possible without the support of the entire ZURB team, our friends and colleagues who gave feedback, and some luminaries who did some heavy lifting that we took advantage of (thanks guys).
+While in the process of creating our official docs, this README.md file will be your guide to installing, running, and documentation for F4E. If you need to brush up on Ink, you can still find our [old docs here.](http://foundation.zurb.com/emails/docs.html)
-Repo Contents
-=============
+## Requirements
+Requires NodeJS to be installed on your machine. Works with 0.10, 0.12, and 4.1! **Note that parts of our build process will break with NPM 3, due to the changes in how packages are installed.**
-* SCSS Folder
-* HTML Folder
-* gulp file
-* Responsive Email Templates
-* README, CONTRIBUTING and LICENSE
+The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through [MinGW](http://www.mingw.org/), and Mac users can install it through the [Xcode Command-line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/).
+
+## Installing
+To get going with Foundation for Emails you'll need run the following commands in your projects directory:
+
+```
+git clone https://github.com/zurb/foundation-emails.git
+cd foundation-emails
+npm install
+```
+
+Note: this is the repo for the private release of the framework, we'll eventually be releasing a template repo to the public!
+
+## Organization
+For the private release we're including the docs within this repo for development purposes. We've provided you a testbed to work within that will act as the final `foundation-emails-template` repo that will be released to the public.
+
+Foundation for Emails utilizes [Panini](https://github.com/zurb/panini), our super simple flat file generator. This let's compile a series of HTML **pages** using a common **layout**. Here's what the directory structure will look like:
+
+```
+foundation-emails/
+├── _build/
+│ └── ...
+├── test/
+│ └── layouts
+│ └── ...
+│ └── pages
+│ └── ...
+```
+You'll be working within the `test/layouts` and `test/pages` to write your HTML emails. The `_build` directory will have all of your outputted emails.
+
+## Commands
+You'll have two commands that will give you all the tools you need for F4E.
+
+1. `npm test` Run this command from the root directory to compile and quickly view your emails within your browser. Browser Sync will run automatically to update your codes changes on the fly!
+2. `npm run production` Run this command when you're ready to send off your email for testing. This command inlines all of the styles getting you ready to send off your email.
+
+## Inky - Our Templating Language
+We’ve created a brand-spankin’-new templating language to make coding HTML emails a synch! You can now use custom Inky tags to whip up complex table layouts at lighting speed. Check out the example below:
+
+```
+<container>
+ <row>
+ <columns large=’8’ small=’6’>
+ <button>My button</button>
+ </columns>
+ <columns large=’4’ small=’6’>
+ <h3>Hi</h3>
+ </columns>
+ </row>
+</container>
+```
+
+Here's a list of our custom Inky tags:
+
+- `<container>` Which contains the content of the email. Set to 600px by default.
+- `<row>` A horizontal block that holds columns.
+- `<columns>` Vertical divisions within a row.
+- `<subcolumns>` Columns within a column. We'll be working to remove this tag.
+- `<callout>` A generic container component used to differentiate content within the flow of the email.
+- `<inline-list-h>` A horizontal inline list of elements.
+- `<inline-list-v>` A vertical inline list of elements.
+
+
+Here's a list of our attributes:
+
+- `small` This attribute is applicable to the `<columns>` and `<subcolumns>` tags. It defines the width of the column in the small breakpoint. The syntax looks like:
+
+```
+<columns small=’12’>
+```
+- `large` This attribute is applicable to the `<columns>` and `<subcolumns>` tags. It defines the width of the column in the large breakpoint. The syntax looks like:
+
+```
+<columns large=’12’>
+```
+- `centered` You'll be able to center both columns and elements. Simply apply the centered attribute to the element you'd like to center.
+
+```
+<img centered src="placehold.it/100/100">
+```
+
+##Using Sass
+You'll be to use the `settings.scss` within the `/test` folder to update sass variables! This means you can use global variables to control the overall look of the page, just like in Foundation for Sites!
+
+##Filing Issues
+As an open source project, we looooove our community support. Please file issues, or better yet pull requests on the [Foundation for Emails Repo](https://github.com/zurb/foundation-emails). We're stoked to hear your feedback, make improvements, and release this to the public soon!
-Installation Instructions
-=============
-1. Clone the repo with `git clone git@github.com:zurb/foundation-email.git`.
-2. Navigate into the directory.
-3. Run `npm install`. If you don't have node.js installed, downloaded it at [nodejs.org](http://nodejs.org/download/).
-4. Run `gulp build` to build the initial templates.
-5. Run `gulp` to run the server and watch for changes. The default port is http://localhost:8080.
-ZURB
-====
-Foundation for Email was made by [ZURB](http://www.zurb.com), a product design company in Campbell, CA.
-If Foundation for Email knocks your socks off the way we hope it does and you want more, why not check out [our jobs](http://www.zurb.com/talent)?
--- /dev/null
+---
+title: Alignment
+description: Centering made easy.
+sass: ./scss/ink/components/_alignment.scss
+---
+
+Just add the class center any element and you’ll be good to go. Inky will handle the magic behind the scenes! In the regular old CSS version, you’d have to fiddle with adding a “.center” class and a <code><center></code> tag to make sure things are centered. Now you just just need to add the class and move on ahead!
+
--- /dev/null
+/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl
\ No newline at end of file
+++ /dev/null
-<container>
- <row>
- <columns large='12'>
- <subcolumns large='6' small='6'>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- </p>
- </subcolumns>
- <subcolumns large='6' small='6'>
- <img src="http://placehold.it/400x100" alt="">
- </subcolumns>
- </columns>
- </row>
-</container>
-
-<br/>
-<br/>
-<br/>
-<br/>
-
-<container>
- <row>
- <columns large='6'>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- </p>
- </columns>
- <columns large='6'>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- </p>
- </columns>
- </row>
-</container>
+++ /dev/null
-<row>
- <columns large='12'>
- <h6>What's up</h6>
- </columns>
-</row>
\ No newline at end of file
<row class="header">
- <container>
- <columns large='12' small='12'>
- <subcolumns large='6' small='6'>
- <img src="http://placehold.it/200x50">
- </subcolumns>
- <subcolumns large='6' small='6'>
- <span class="template-label">SIDEBAR HERO</span>
- </subcolumns>
- </columns>
- </container>
+ <td class="center" align="center">
+ <center>
+ <container>
+ <columns large='12' small='12'>
+ <subcolumns large='6' small='6'>
+ <img src="http://placehold.it/200x50"/>
+ </subcolumns>
+ <subcolumns large='6' small='6' class=" sub-header">
+ <span class="template-label">Basic</span>
+ </subcolumns>
+ </columns>
+ </container>
+ </center>
+ </td>
</row>
<container>
<row>
- <columns large='12'>
- <h1>asdfakh</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
- <img width="580" height="300" src="https://placekitten.com/g/580/300">
+ <columns large='12' small='12'>
+ <h1>Hi, Susan Calvin</h1>
+ <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
+ <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
</columns>
</row>
- <row>
- <columns large='12'>
- <callout>
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
- <button><a href="#">Click it! »</a></button>
- </callout>
+ <row class="callout">
+ <columns large='12' small='12'>
+ <td class="callout">
+ <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
+ </td>
</columns>
</row>
- <row>
- <columns large='6'>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
- <button><a href="#">Click Me!</a></button>
- <br>
- <callout>
- <p>What a game</p>
- </callout>
+ <row class="footer">
+ <columns large='6' small='12'>
+ <td class="left-text-pad">
+ <h5>Connect With Us:</h5>
+ <table class="button tiny facebook">
+ <tr>
+ <td>
+ <a href="#">Facebook</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <table class="button tiny twitter">
+ <tr>
+ <td>
+ <a href="#">Twitter</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <table class="button tiny google-plus">
+ <tr>
+ <td>
+ <a href="#">Google +</a>
+ </td>
+ </tr>
+ </table>
+ </td>
</columns>
- <columns large='6'>
- <callout>
- <h6>Header Thing</h6>
- <p>Sub-head or something</p>
- <inline-list-v>
- <a href="#">Just a Plain Link »</a>
- <a href="#">Just a Plain Link »</a>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- </inline-list-v>
- </callout>
+ <columns large='6' small='12'>
+ <td class="last right-text-pad">
+ <h5>Contact Info:</h5>
+ <p>Phone: 408.341.0600</p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </td>
</columns>
</row>
<row>
- <columns large='6'>
- </columns>
- <columns large='6'>
- <callout>
- <h6 style="margin-bottom:5px;">Connect With Us:</h6>
- <button class="tiny-button facebook">
- <a href='#'>Facebook</a>
- </button>
- <hr>
- <button class="tiny-button twitter">
- <a href='#'>Twitter</a>
- </button>
- <hr>
- <button class="tiny-button google-plus">
- <a href='#'>Google</a>
- </button>
- <br>
- <h6 style="margin-bottom:5px;">Contact Info:</h6>
- <p>Phone: <b>408.341.0600</b></p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </callout>
+ <columns large='12' small='12'>
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+ </center>
</columns>
</row>
-</container>
+</container>
\ No newline at end of file
+++ /dev/null
-<container>
- <row>
- <columns large='12'>
- <p class="lead">Hi John,</p>
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet.</p>
- </columns>
-</row>
-<row>
- <columns large="12">
- <img width="580" height="300" src="http://placehold.it/580x300">
-</columns>
-</row>
-<row>
- <columns large='12'>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- <p>Cheers,<br>Bryan</p>
-</columns>
-</row>
-<hr>
-<row>
- <columns large="6">
- <tr>
- <td class="tweet-pad panel tweet-head">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
- <h3>ZURB</h3>
- <h6 class="tweet-handle">@ZURB</h6>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- <tr>
- <td class="tweet-pad panel">
- <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
- </td>
- <td class="expander"></td>
- </tr>
- <tr>
- <td class="tweet-pad tweet-foot panel">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- </columns>
-
- <columns large="6">
- <tr>
- <td align="left"class="tweet-pad panel tweet-head">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
- <h3>ZURB</h3>
- <h6 class="tweet-handle">@ZURB</h6>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- <tr>
- <td class="tweet-pad panel">
- <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
- </td>
- <td class="expander"></td>
- </tr>
- <tr>
- <td class="tweet-pad tweet-foot panel">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
- </a>
- </td>
- <td class="expander"></td>
- </tr>
- </columns>
-</row>
-<hr>
-
-
-
-
-<row class="copyright">
- <columns large="12">
- <h5 class="center">Sharing is caring</h5>
- <p class="center">Share ZURBnews and keep the good vibes going.</p>
- </columns>
-</row>
-
-<!-- ^^^^^Expander not working^^^^^ -->
-
-
-<row class="share-news" offset="1">
-<!-- ^^^Not sure how to best implement the offset class.^^^^
- It is applied to a td.wrapper that is automatically generated.
- This might be a proposed option -->
- <columns large="1"></columns>
- <columns large="5">
- <button class="facebook">
- <a href="#">Share on facebook</a>
- </button>
- </columns>
- <columns large="5">
- <button class="facebook">
- <a href="#">Share on facebook</a>
- </button>
- </columns>
-</row>
-<hr>
-</container>
+++ /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>
- body,
-table.body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-td {
- color: #0a0a0a;
- font-family: Helvetica, Arial, sans-serif;
- font-weight: normal;
- padding: 0;
- margin: 0;
- text-align: left;
- line-height: 1.3; }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- word-break: normal; }
-
-h1 {
- font-size: 40px; }
-
-h2 {
- font-size: 36px; }
-
-h3 {
- font-size: 32px; }
-
-h4 {
- font-size: 28px; }
-
-h5 {
- font-size: 24px; }
-
-h6 {
- font-size: 20px; }
-
-body,
-table.body,
-p,
-td {
- font-size: 14px;
- line-height: 19px; }
-
-p {
- margin-bottom: 10px; }
- p.lead {
- font-size: 18px;
- line-height: 21px; }
-
-small {
- font-size: 10px; }
-
-a {
- color: #2199e8;
- text-decoration: none; }
- a:hover {
- color: #147dc2 !important; }
- a:active {
- color: #147dc2 !important; }
- a:visited {
- color: #2199e8 !important; }
-
-h1 a,
-h1 a:visited,
-h2 a,
-h2 a:visited,
-h3 a,
-h3 a:visited,
-h4 a,
-h4 a:visited,
-h5 a,
-h5 a:visited,
-h6,
-h6 a:visited {
- color: #2199e8; }
-
-pre {
- background: #f3f3f3;
- margin: 30px 0; }
- pre code {
- color: #cacaca; }
- pre code span.callout {
- color: #8a8a8a;
- font-weight: bold; }
- pre code span.callout-strong {
- color: #ff6908;
- font-weight: bold; }
-
-#outlook a {
- padding: 0; }
-
-body {
- width: 100% !important;
- min-width: 100%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- margin: 0;
- padding: 0; }
-
-.ExternalClass {
- width: 100%; }
- .ExternalClass,
- .ExternalClass p,
- .ExternalClass span,
- .ExternalClass font,
- .ExternalClass td,
- .ExternalClass div {
- line-height: 100%; }
-
-#backgroundTable {
- margin: 0;
- padding: 0;
- width: 100% !important;
- line-height: 100% !important; }
-
-img {
- outline: none;
- text-decoration: none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block; }
-
-center {
- width: 100%;
- min-width: 580px; }
-
-a img {
- border: none; }
-
-p {
- margin: 0 0 0 10px; }
-
-table {
- border-spacing: 0;
- border-collapse: collapse; }
-
-td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important; }
-
-table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left; }
-
-hr {
- color: #cacaca;
- background-color: #cacaca;
- height: 1px;
- border: none; }
-
-table.body {
- height: 100% !important;
- width: 100% !important; }
-
-table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit; }
-
-table.row {
- padding: 0;
- width: 100%;
- position: relative; }
-
-table.container table.row {
- display: block; }
-
-td.wrapper {
- padding: 10px 20px 0 0;
- position: relative; }
-
-table.columns,
-table.column {
- margin: 0 auto; }
-
-table.columns td,
-table.column td {
- padding: 0 0 10px; }
-
-table.row td.last,
-table.container td.last {
- padding-right: 0; }
-
-table.large-1 {
- width: 30px; }
-
-table.large-2 {
- width: 80px; }
-
-table.large-3 {
- width: 130px; }
-
-table.large-4 {
- width: 180px; }
-
-table.large-5 {
- width: 230px; }
-
-table.large-6 {
- width: 280px; }
-
-table.large-7 {
- width: 330px; }
-
-table.large-8 {
- width: 380px; }
-
-table.large-9 {
- width: 430px; }
-
-table.large-10 {
- width: 480px; }
-
-table.large-11 {
- width: 530px; }
-
-table.large-12 {
- width: 580px; }
-
-table.large-1 center {
- min-width: 30px; }
-
-table.large-2 center {
- min-width: 80px; }
-
-table.large-3 center {
- min-width: 130px; }
-
-table.large-4 center {
- min-width: 180px; }
-
-table.large-5 center {
- min-width: 230px; }
-
-table.large-6 center {
- min-width: 280px; }
-
-table.large-7 center {
- min-width: 330px; }
-
-table.large-8 center {
- min-width: 380px; }
-
-table.large-9 center {
- min-width: 430px; }
-
-table.large-10 center {
- min-width: 480px; }
-
-table.large-11 center {
- min-width: 530px; }
-
-table.large-12 center {
- min-width: 580px; }
-
-.body .columns td.large-1,
-.body .column td.large-1 {
- width: 8.33333%; }
-
-.body .columns td.large-2,
-.body .column td.large-2 {
- width: 16.66667%; }
-
-.body .columns td.large-3,
-.body .column td.large-3 {
- width: 25%; }
-
-.body .columns td.large-4,
-.body .column td.large-4 {
- width: 33.33333%; }
-
-.body .columns td.large-5,
-.body .column td.large-5 {
- width: 41.66667%; }
-
-.body .columns td.large-6,
-.body .column td.large-6 {
- width: 50%; }
-
-.body .columns td.large-7,
-.body .column td.large-7 {
- width: 58.33333%; }
-
-.body .columns td.large-8,
-.body .column td.large-8 {
- width: 66.66667%; }
-
-.body .columns td.large-9,
-.body .column td.large-9 {
- width: 75%; }
-
-.body .columns td.large-10,
-.body .column td.large-10 {
- width: 83.33333%; }
-
-.body .columns td.large-11,
-.body .column td.large-11 {
- width: 91.66667%; }
-
-.body .columns td.large-12,
-.body .column td.large-12 {
- width: 100%; }
-
-td.offset-by-1 {
- padding-left: 50px; }
-
-td.offset-by-2 {
- padding-left: 100px; }
-
-td.offset-by-3 {
- padding-left: 150px; }
-
-td.offset-by-4 {
- padding-left: 200px; }
-
-td.offset-by-5 {
- padding-left: 250px; }
-
-td.offset-by-6 {
- padding-left: 300px; }
-
-td.offset-by-7 {
- padding-left: 350px; }
-
-td.offset-by-8 {
- padding-left: 400px; }
-
-td.offset-by-9 {
- padding-left: 450px; }
-
-td.offset-by-10 {
- padding-left: 500px; }
-
-td.offset-by-11 {
- padding-left: 550px; }
-
-td.expander {
- visibility: hidden;
- width: 0;
- padding: 0 !important; }
-
-table.columns .text-pad,
-table.column .text-pad {
- padding-left: 10px;
- padding-right: 10px; }
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
- padding-left: 10px; }
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
- padding-right: 10px; }
-
-.block-grid {
- width: 100%;
- max-width: 580px; }
- .block-grid td {
- display: inline-block;
- padding: 10px; }
-
-.up-2 td {
- width: 270px !important; }
-
-.up-3 td {
- width: 173px !important; }
-
-.up-4 td {
- width: 125px !important; }
-
-.up-5 td {
- width: 96px !important; }
-
-.up-6 td {
- width: 76px !important; }
-
-.up-7 td {
- width: 62px !important; }
-
-.up-8 td {
- width: 52px !important; }
-
-table.center,
-td.center,
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center,
-p.center,
-span.center {
- text-align: center; }
-
-span.center {
- display: block;
- width: 100%; }
-
-img.center {
- margin: 0 auto;
- float: none; }
-
-.show-for-small,
-.hide-for-desktop {
- display: none; }
-
-body,
-table.body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-td {
- color: #0a0a0a;
- font-family: Helvetica, Arial, sans-serif;
- font-weight: normal;
- padding: 0;
- margin: 0;
- text-align: left;
- line-height: 1.3; }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- word-break: normal; }
-
-h1 {
- font-size: 40px; }
-
-h2 {
- font-size: 36px; }
-
-h3 {
- font-size: 32px; }
-
-h4 {
- font-size: 28px; }
-
-h5 {
- font-size: 24px; }
-
-h6 {
- font-size: 20px; }
-
-body,
-table.body,
-p,
-td {
- font-size: 14px;
- line-height: 19px; }
-
-p {
- margin-bottom: 10px; }
- p.lead {
- font-size: 18px;
- line-height: 21px; }
-
-small {
- font-size: 10px; }
-
-a {
- color: #2199e8;
- text-decoration: none; }
- a:hover {
- color: #147dc2 !important; }
- a:active {
- color: #147dc2 !important; }
- a:visited {
- color: #2199e8 !important; }
-
-h1 a,
-h1 a:visited,
-h2 a,
-h2 a:visited,
-h3 a,
-h3 a:visited,
-h4 a,
-h4 a:visited,
-h5 a,
-h5 a:visited,
-h6,
-h6 a:visited {
- color: #2199e8; }
-
-pre {
- background: #f3f3f3;
- margin: 30px 0; }
- pre code {
- color: #cacaca; }
- pre code span.callout {
- color: #8a8a8a;
- font-weight: bold; }
- pre code span.callout-strong {
- color: #ff6908;
- font-weight: bold; }
-
-table.button {
- width: 100%;
- overflow: visible; }
- table.button td {
- display: block;
- width: auto !important;
- text-align: center;
- background: #2199e8;
- border: 1px solid #147dc2;
- color: #fefefe;
- padding: 12px 0 12px 0; }
- table.button td a {
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
- color: #fefefe;
- display: block;
- height: 100%;
- width: 100%;
- padding: 12px 0 12px 0;
- font-size: 20px; }
- table.button.tiny td, table.button.tiny a {
- padding: 5px 0 4px 0; }
- table.button.tiny a {
- font-size: 12px;
- font-weight: normal; }
- table.button.small td, table.button.small a {
- padding: 8px 0 7px;
- font-size: 16px; }
- table.button.large td, table.button.large a {
- padding: 21px 0 18px 0;
- font-size: 24px; }
- table.button:hover td,
- table.button:visited td,
- table.button:active td {
- background: #2199e8 !important;
- color: #fefefe !important; }
- table.button:hover td
-table.button.tiny:hover td,
- table.button.small:hover td,
- table.button.large:hover td {
- background: #147dc2; }
- table.button:hover td a,
- table.button:active td a,
- table.button td a:visited,
- table.button.tiny:hover td a,
- table.button.tiny:active td a,
- table.button.tiny td a:visited,
- table.button.small:hover td a,
- table.button.small:active td a,
- table.button.small td a:visited,
- table.button.large:hover td a,
- table.button.large:active td a,
- table.button.large td a:visited {
- color: #fefefe !important; }
- table.button.secondary td {
- background: #777;
- border: #919191;
- color: #cacaca; }
- table.button.secondary td a {
- color: #cacaca; }
- table.button.secondary:hover td {
- background: #919191 !important;
- color: #cacaca; }
- table.button.secondary:hover td a,
- table.button.secondary td a:visited,
- table.button.secondary:active td a {
- color: #cacaca !important; }
- table.button.success td {
- background: #3adb76;
- border-color: 1px solid #23bf5d; }
- table.button.success:hover td {
- background: #23bf5d !important; }
- table.button.alert td {
- background: #ec5840;
- border-color: 1px solid #e23317; }
- table.button.alert:hover td {
- background: #e23317 !important; }
-
-td.callout {
- width: 100%;
- border: 1px solid silver;
- padding: 10px !important;
- background: #f3f3f3; }
- td.callout.success {
- background: #3adb76 !important;
- border: 1px solid #1b9448 !important;
- color: #fefefe !important; }
- td.callout.warning {
- background: #ffae00 !important;
- border: 1px solid #996800 !important;
- color: #fefefe !important; }
- td.callout.alert {
- background: #ec5840 !important;
- border: 1px solid darken #b42912 !important;
- color: #fefefe !important; }
-
-.sub-grid table {
- width: 100%; }
-
-.sub-grid td.sub-columns {
- padding-bottom: 0; }
-
-.thumbnail {
- display: inline-block;
- border-collapse: separate; }
- .thumbnail img {
- border-collapse: separate; }
- .thumbnail:hover, .thumbnail:focus {
- box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); }
-
-table.inline-list {
- width: 100% !important; }
-
-td.vertical {
- padding-top: 10px !important; }
-
-table[class="body"] table.inline-list td.vertical {
- display: block !important; }
-
-body.outlook p {
- display: inline !important; }
-
-@media only screen and (max-width: 580px) {
- table[class="body"] img {
- width: auto !important;
- height: auto !important; }
- table[class="body"] center {
- min-width: 0 !important; }
- table[class="body"] .container {
- width: 95% !important; }
- table[class="body"] .row {
- width: 100% !important;
- display: block !important; }
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important; }
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0 !important;
- padding-left: 0 !important;
- display: inline-block !important;
- margin: 0 !important; }
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important; }
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100% !important; }
- .wrapper > table.small-1 {
- width: 8.33333% !important; }
- .wrapper > table.small-2 {
- width: 16.66667% !important; }
- .wrapper > table.small-3 {
- width: 25% !important; }
- .wrapper > table.small-4 {
- width: 33.33333% !important; }
- .wrapper > table.small-5 {
- width: 41.66667% !important; }
- .wrapper > table.small-6 {
- width: 50% !important; }
- .wrapper > table.small-7 {
- width: 58.33333% !important; }
- .wrapper > table.small-8 {
- width: 66.66667% !important; }
- .wrapper > table.small-9 {
- width: 75% !important; }
- .wrapper > table.small-10 {
- width: 83.33333% !important; }
- .wrapper > table.small-11 {
- width: 91.66667% !important; }
- .wrapper > table.small-12 {
- width: 100% !important; }
- .wrapper > table.small-12 {
- display: block !important; }
- .body .columns td.small-1,
- .body .column td.small-1,
- table.small-1 center {
- width: 8.33333% !important; }
- .body .columns td.small-2,
- .body .column td.small-2,
- table.small-2 center {
- width: 16.66667% !important; }
- .body .columns td.small-3,
- .body .column td.small-3,
- table.small-3 center {
- width: 25% !important; }
- .body .columns td.small-4,
- .body .column td.small-4,
- table.small-4 center {
- width: 33.33333% !important; }
- .body .columns td.small-5,
- .body .column td.small-5,
- table.small-5 center {
- width: 41.66667% !important; }
- .body .columns td.small-6,
- .body .column td.small-6,
- table.small-6 center {
- width: 50% !important; }
- .body .columns td.small-7,
- .body .column td.small-7,
- table.small-7 center {
- width: 58.33333% !important; }
- .body .columns td.small-8,
- .body .column td.small-8,
- table.small-8 center {
- width: 66.66667% !important; }
- .body .columns td.small-9,
- .body .column td.small-9,
- table.small-9 center {
- width: 75% !important; }
- .body .columns td.small-10,
- .body .column td.small-10,
- table.small-10 center {
- width: 83.33333% !important; }
- .body .columns td.small-11,
- .body .column td.small-11,
- table.small-11 center {
- width: 91.66667% !important; }
- .body .columns td.small-12,
- .body .column td.small-12,
- table.small-12 center {
- width: 100% !important; }
- table[class="body"] .columns td.small-1,
- table[class="body"] .column td.small-1 {
- width: 8.33333% !important; }
- table[class="body"] .columns td.small-2,
- table[class="body"] .column td.small-2 {
- width: 16.66667% !important; }
- table[class="body"] .columns td.small-3,
- table[class="body"] .column td.small-3 {
- width: 25% !important; }
- table[class="body"] .columns td.small-4,
- table[class="body"] .column td.small-4 {
- width: 33.33333% !important; }
- table[class="body"] .columns td.small-5,
- table[class="body"] .column td.small-5 {
- width: 41.66667% !important; }
- table[class="body"] .columns td.small-6,
- table[class="body"] .column td.small-6 {
- width: 50% !important; }
- table[class="body"] .columns td.small-7,
- table[class="body"] .column td.small-7 {
- width: 58.33333% !important; }
- table[class="body"] .columns td.small-8,
- table[class="body"] .column td.small-8 {
- width: 66.66667% !important; }
- table[class="body"] .columns td.small-9,
- table[class="body"] .column td.small-9 {
- width: 75% !important; }
- table[class="body"] .columns td.small-10,
- table[class="body"] .column td.small-10 {
- width: 83.33333% !important; }
- table[class="body"] .columns td.small-11,
- table[class="body"] .column td.small-11 {
- width: 91.66667% !important; }
- table[class="body"] .columns td.small-12,
- table[class="body"] .column td.small-12 {
- width: 100% !important; }
- table[class="body"] td.offset-by-1 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-2 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-3 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-4 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-5 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-6 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-7 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-8 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-9 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-10 {
- padding-left: 0 !important; }
- table[class="body"] td.offset-by-11 {
- padding-left: 0 !important; }
- table[class="body"] table.columns td.expander {
- width: 1px !important; }
- table[class="body"] .right-text-pad,
- table[class="body"] .text-pad-right {
- padding-left: 10px !important; }
- table[class="body"] .left-text-pad,
- table[class="body"] .text-pad-left {
- padding-right: 10px !important; }
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important; }
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important; } }
-
-table[class="body"] table.inline-list td {
- width: auto !important;
- display: inline-block !important; }
-
-table[class="body"] table.inline-list.vertical td {
- display: block !important; }
-
-.header {
- background: #999999; }
-
-.sub-header {
- text-align: right;
- vertical-align: middle; }
-
-table.facebook td {
- background: #3b5998;
- border-color: #2d4473; }
-
-table.facebook:hover td {
- background: #2d4473 !important; }
-
-table.twitter td {
- background: #00acee;
- border-color: #0087bb; }
-
-table.twitter:hover td {
- background: #0087bb !important; }
-
-table.google-plus td {
- background-color: #DB4A39;
- border-color: #CC0000; }
-
-table.google-plus:hover td {
- background: #CC0000 !important; }
-
-.template-label {
- color: #ffffff;
- font-weight: bold;
- font-size: 11px; }
-
-.callout .wrapper {
- padding-bottom: 20px !important; }
-
-.callout .panel {
- background: #ECF8FF;
- border-color: #b9e5ff; }
-
-.header {
- background: #999999; }
-
-.footer .wrapper {
- background: #ebebeb; }
-
-.footer h5 {
- padding-bottom: 10px; }
-
-table.columns .text-pad {
- padding-left: 10px;
- padding-right: 10px; }
-
-table.columns .left-text-pad {
- padding-left: 10px; }
-
-table.columns .right-text-pad {
- padding-right: 10px; }
-
-@media only screen and (max-width: 600px) {
- table[class="body"] .right-text-pad {
- padding-left: 10px !important; }
- table[class="body"] .left-text-pad {
- padding-right: 10px !important; } }
-
-</style>
-</head>
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
-
- <table class="row header">
- <tr>
- <td class="center" align="center">
-<center>
- <table class="container"><tbody><tr><td>
- </td><td class="wrapper last"><table class="small-12 large-12 columns"><td class="sub-columns last small-6 large-6">
- <img src="http://placehold.it/200x50">
- </td><td class="expander"></td><td class="sub-columns last sub-header small-6 large-6">
- <span class="template-label">Basic</span>
- </td><td class="expander"></td></table></td>
- </tr></tbody></table>
- </center>
- </td>
- </tr>
- </table>
-
- <table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="large-12 columns">
- <tr>
- <td>
- <h1>Hi, Susan Calvin</h1>
- <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row callout">
- <tr>
- <td class="wrapper last">
-
- <table class="large-12 columns">
- <tr>
- <td class="panel">
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <table class="row footer">
- <tr>
- <td class="wrapper">
-
- <table class="large-6 columns">
- <tr>
- <td class="left-text-pad">
-
- <h5>Connect With Us:</h5>
-
- <table class="tiny-button facebook">
- <tr>
- <td>
- <a href="#">Facebook</a>
- </td>
- </tr>
- </table>
-
- <br>
-
- <table class="tiny-button twitter">
- <tr>
- <td>
- <a href="#">Twitter</a>
- </td>
- </tr>
- </table>
-
- <br>
-
- <table class="tiny-button google-plus">
- <tr>
- <td>
- <a href="#">Google +</a>
- </td>
- </tr>
- </table>
-
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- <td class="wrapper last">
-
- <table class="large-6 columns">
- <tr>
- <td class="last right-text-pad">
- <h5>Contact Info:</h5>
- <p>Phone: 408.341.0600</p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
-
- <table class="row">
- <tr>
- <td class="wrapper last">
-
- <table class="large-12 columns">
- <tr>
- <td align="center">
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
- </center>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
- </tr>
- </table>
-
- <!-- container end below -->
- </td>
- </tr>
- </table>
-
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-/**********************************************
-* Ink v1.0.5 - Copyright 2013 ZURB Inc *
-**********************************************/
-
-/* Client-specific Styles & Reset */
-
-#outlook a {
- padding:0;
-}
-
-body{
- width:100% !important;
- min-width: 100%;
- -webkit-text-size-adjust:100%;
- -ms-text-size-adjust:100%;
- margin:0;
- padding:0;
-}
-
-.ExternalClass {
- width:100%;
-}
-
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
- line-height: 100%;
-}
-
-#backgroundTable {
- margin:0;
- padding:0;
- width:100% !important;
- line-height: 100% !important;
-}
-
-img {
- outline:none;
- text-decoration:none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block;
-}
-
-center {
- width: 100%;
- min-width: 580px;
-}
-
-a img {
- border: none;
-}
-
-p {
- margin: 0 0 0 10px;
-}
-
-table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-
-td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important;
-}
-
-table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left;
-}
-
-hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none;
-}
-
-/* Responsive Grid */
-
-table.body {
- height: 100%;
- width: 100%;
-}
-
-table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit;
-}
-
-table.row {
- padding: 0px;
- width: 100%;
- position: relative;
-}
-
-table.container table.row {
- display: block;
-}
-
-td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative;
-}
-
-table.columns,
-table.column {
- margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
- padding: 0px 0px 10px;
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
- padding-right: 10px;
-}
-
-td.sub-column, td.sub-columns {
- min-width: 0px;
-}
-
-table.row td.last,
-table.container td.last {
- padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-table.one center { min-width: 30px; }
-table.two center { min-width: 80px; }
-table.three center { min-width: 130px; }
-table.four center { min-width: 180px; }
-table.five center { min-width: 230px; }
-table.six center { min-width: 280px; }
-table.seven center { min-width: 330px; }
-table.eight center { min-width: 380px; }
-table.nine center { min-width: 430px; }
-table.ten center { min-width: 480px; }
-table.eleven center { min-width: 530px; }
-table.twelve center { min-width: 580px; }
-
-table.one .panel center { min-width: 10px; }
-table.two .panel center { min-width: 60px; }
-table.three .panel center { min-width: 110px; }
-table.four .panel center { min-width: 160px; }
-table.five .panel center { min-width: 210px; }
-table.six .panel center { min-width: 260px; }
-table.seven .panel center { min-width: 310px; }
-table.eight .panel center { min-width: 360px; }
-table.nine .panel center { min-width: 410px; }
-table.ten .panel center { min-width: 460px; }
-table.eleven .panel center { min-width: 510px; }
-table.twelve .panel center { min-width: 560px; }
-
-.body .columns td.one,
-.body .column td.one { width: 8.333333%; }
-.body .columns td.two,
-.body .column td.two { width: 16.666666%; }
-.body .columns td.three,
-.body .column td.three { width: 25%; }
-.body .columns td.four,
-.body .column td.four { width: 33.333333%; }
-.body .columns td.five,
-.body .column td.five { width: 41.666666%; }
-.body .columns td.six,
-.body .column td.six { width: 50%; }
-.body .columns td.seven,
-.body .column td.seven { width: 58.333333%; }
-.body .columns td.eight,
-.body .column td.eight { width: 66.666666%; }
-.body .columns td.nine,
-.body .column td.nine { width: 75%; }
-.body .columns td.ten,
-.body .column td.ten { width: 83.333333%; }
-.body .columns td.eleven,
-.body .column td.eleven { width: 91.666666%; }
-.body .columns td.twelve,
-.body .column td.twelve { width: 100%; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important;
-}
-
-table.columns .text-pad,
-table.column .text-pad {
- padding-left: 10px;
- padding-right: 10px;
-}
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
- padding-left: 10px;
-}
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
- padding-right: 10px;
-}
-
-/* Block Grid */
-
-.block-grid {
- width: 100%;
- max-width: 580px;
-}
-
-.block-grid td {
- display: inline-block;
- padding:10px;
-}
-
-.two-up td {
- width:270px;
-}
-
-.three-up td {
- width:173px;
-}
-
-.four-up td {
- width:125px;
-}
-
-.five-up td {
- width:96px;
-}
-
-.six-up td {
- width:76px;
-}
-
-.seven-up td {
- width:62px;
-}
-
-.eight-up td {
- width:52px;
-}
-
-/* Alignment & Visibility Classes */
-
-table.center, td.center {
- text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
- text-align: center;
-}
-
-span.center {
- display: block;
- width: 100%;
- text-align: center;
-}
-
-img.center {
- margin: 0 auto;
- float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
- display: none;
-}
-
-/* Typography */
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td {
- color: #222222;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: normal;
- padding:0;
- margin: 0;
- text-align: left;
- line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
- word-break: normal;
-}
-
-h1 {font-size: 40px;}
-h2 {font-size: 36px;}
-h3 {font-size: 32px;}
-h4 {font-size: 28px;}
-h5 {font-size: 24px;}
-h6 {font-size: 20px;}
-body, table.body, p, td {font-size: 14px;line-height:19px;}
-
-p.lead, p.lede, p.leed {
- font-size: 18px;
- line-height:21px;
-}
-
-p {
- margin-bottom: 10px;
-}
-
-small {
- font-size: 10px;
-}
-
-a {
- color: #2ba6cb;
- text-decoration: none;
-}
-
-a:hover {
- color: #2795b6 !important;
-}
-
-a:active {
- color: #2795b6 !important;
-}
-
-a:visited {
- color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: #2ba6cb;
-}
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
- color: #2ba6cb !important;
-}
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
- color: #2ba6cb !important;
-}
-
-/* Panels */
-
-.panel {
- background: #f2f2f2;
- border: 1px solid #d9d9d9;
- padding: 10px !important;
-}
-
-.sub-grid table {
- width: 100%;
-}
-
-.sub-grid td.sub-columns {
- padding-bottom: 0;
-}
-
-/* Buttons */
-
-table.button,
-table.tiny-button,
-table.small-button,
-table.medium-button,
-table.large-button {
- width: 100%;
- overflow: hidden;
-}
-
-table.button td,
-table.tiny-button td,
-table.small-button td,
-table.medium-button td,
-table.large-button td {
- display: block;
- width: auto !important;
- text-align: center;
- background: #2ba6cb;
- border: 1px solid #2284a1;
- color: #ffffff;
- padding: 8px 0;
-}
-
-table.tiny-button td {
- padding: 5px 0 4px;
-}
-
-table.small-button td {
- padding: 8px 0 7px;
-}
-
-table.medium-button td {
- padding: 12px 0 10px;
-}
-
-table.large-button td {
- padding: 21px 0 18px;
-}
-
-table.button td a,
-table.tiny-button td a,
-table.small-button td a,
-table.medium-button td a,
-table.large-button td a {
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
- color: #ffffff;
- font-size: 16px;
-}
-
-table.tiny-button td a {
- font-size: 12px;
- font-weight: normal;
-}
-
-table.small-button td a {
- font-size: 16px;
-}
-
-table.medium-button td a {
- font-size: 20px;
-}
-
-table.large-button td a {
- font-size: 24px;
-}
-
-table.button:hover td,
-table.button:visited td,
-table.button:active td {
- background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:visited td a,
-table.button:active td a {
- color: #fff !important;
-}
-
-table.button:hover td,
-table.tiny-button:hover td,
-table.small-button:hover td,
-table.medium-button:hover td,
-table.large-button:hover td {
- background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:active td a,
-table.button td a:visited,
-table.tiny-button:hover td a,
-table.tiny-button:active td a,
-table.tiny-button td a:visited,
-table.small-button:hover td a,
-table.small-button:active td a,
-table.small-button td a:visited,
-table.medium-button:hover td a,
-table.medium-button:active td a,
-table.medium-button td a:visited,
-table.large-button:hover td a,
-table.large-button:active td a,
-table.large-button td a:visited {
- color: #ffffff !important;
-}
-
-table.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
- color: #555;
-}
-
-table.secondary td a {
- color: #555;
-}
-
-table.secondary:hover td {
- background: #d0d0d0 !important;
- color: #555;
-}
-
-table.secondary:hover td a,
-table.secondary td a:visited,
-table.secondary:active td a {
- color: #555 !important;
-}
-
-table.success td {
- background: #5da423;
- border-color: #457a1a;
-}
-
-table.success:hover td {
- background: #457a1a !important;
-}
-
-table.alert td {
- background: #c60f13;
- border-color: #970b0e;
-}
-
-table.alert:hover td {
- background: #970b0e !important;
-}
-
-table.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-
-table.round td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px;
-}
-
-/* Outlook First */
-
-body.outlook p {
- display: inline !important;
-}
-
-/* Media Queries */
-
-@media only screen and (max-width: 600px) {
-
- table[class="body"] img {
- width: auto !important;
- height: auto !important;
- }
-
- table[class="body"] center {
- min-width: 0 !important;
- }
-
- table[class="body"] .container {
- width: 95% !important;
- }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important;
- }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: block !important;
- }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important;
- }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100% !important;
- }
-
- table[class="body"] .columns td.one,
- table[class="body"] .column td.one { width: 8.333333% !important; }
- table[class="body"] .columns td.two,
- table[class="body"] .column td.two { width: 16.666666% !important; }
- table[class="body"] .columns td.three,
- table[class="body"] .column td.three { width: 25% !important; }
- table[class="body"] .columns td.four,
- table[class="body"] .column td.four { width: 33.333333% !important; }
- table[class="body"] .columns td.five,
- table[class="body"] .column td.five { width: 41.666666% !important; }
- table[class="body"] .columns td.six,
- table[class="body"] .column td.six { width: 50% !important; }
- table[class="body"] .columns td.seven,
- table[class="body"] .column td.seven { width: 58.333333% !important; }
- table[class="body"] .columns td.eight,
- table[class="body"] .column td.eight { width: 66.666666% !important; }
- table[class="body"] .columns td.nine,
- table[class="body"] .column td.nine { width: 75% !important; }
- table[class="body"] .columns td.ten,
- table[class="body"] .column td.ten { width: 83.333333% !important; }
- table[class="body"] .columns td.eleven,
- table[class="body"] .column td.eleven { width: 91.666666% !important; }
- table[class="body"] .columns td.twelve,
- table[class="body"] .column td.twelve { width: 100% !important; }
-
- table[class="body"] td.offset-by-one,
- table[class="body"] td.offset-by-two,
- table[class="body"] td.offset-by-three,
- table[class="body"] td.offset-by-four,
- table[class="body"] td.offset-by-five,
- table[class="body"] td.offset-by-six,
- table[class="body"] td.offset-by-seven,
- table[class="body"] td.offset-by-eight,
- table[class="body"] td.offset-by-nine,
- table[class="body"] td.offset-by-ten,
- table[class="body"] td.offset-by-eleven {
- padding-left: 0 !important;
- }
-
- table[class="body"] table.columns td.expander {
- width: 1px !important;
- }
-
- table[class="body"] .right-text-pad,
- table[class="body"] .text-pad-right {
- padding-left: 10px !important;
- }
-
- table[class="body"] .left-text-pad,
- table[class="body"] .text-pad-left {
- padding-right: 10px !important;
- }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important;
- }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important;
- }
-}
projects / thirdparty / foundation / foundation-emails.git / commitdiff
