/* -------  Basics  ------- */

/* -------  Notes -------

Zero Margin, Padding, table, table cells
Zero Borders - linked images

min-width to avoid situations where the content 
doesn't take up the full width of viewport

Background-color to white - avoid color glitches 
in Outlook or Lotus Notes

.wrapper - stop text resizing on windows and iSO

table-layout: fixed - ensure centered content will
actually be centered in Yahoo mail

.webkit - max-width: 600px - contain everything in 
Apple Mail 6 (and below) and Outlook 2011

*/

body {
    Margin: 0; /* Cap "M" so Outlook.com won't strip */
    padding: 0;
    min-width: 100%;
    background-color: #ffffff;
}
table {
    border-spacing: 0;
    font-family: sans-serif;
    color: #333333;
}
td {
    padding: 0;
}
img {
    border: 0;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
}

/* -------  Plus  ------- */

/* -------  Notes -------

If your use a different inliner then Campaign Monitor's; make sure to 
add cellpadding="0" cellspacing="0" to conditional Outlook tables 


*** To Use Retina Images: ***

1. set image attribute width (for Outlook) DON'tT set height 
(Gmail issues at smaller sizes)
2. add width: 100%; (CSS); makes image responsive
3. add max-width: X px (CSS); USE "PX" Windows Phone doesn't like "100%"
aka no effect combined with "width:100%;"
4. add height: auto; (CSS); Good measure / aspect ratio

Outlook.com has some h1, h2, and h3 styles that always override your styling

*** Multiple Columns ***

Outlook will not let tables float side-by-side. As Outlook doesn't support 
max-width; conditional columns help restrict each column to the correct size.
E.G.

        <!--[if (gte mso 9)|(IE)]>
        <table width="100%">
        <tr>
        <td width="50%" valign="top">
        <![endif]-->
        [column to go here]
        <!--[if (gte mso 9)|(IE)]>
        </td><td width="50%" valign="top">
        <![endif]-->
        [column to go here]
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->



*/
.outer {
    Margin: 0 auto; /* Cap "M" so Outlook.com won't strip */
    width: 100%; /* 100% on smaller screens*/
    max-width: 600px; /* max-width on larger screens, margin+center for centering*/
}

.full-width-image img {
    width: 100%; /* set width of image with attribute (for Outlook), override with css*/
    max-width: 600px; /* Windows Phone doesn't play nicely with Max-width */
    height: auto; /* ensure image aspect ratio is normal */
}
.inner {
    padding: 10px;
}
p {
    Margin: 0; /* Cap "M" so Outlook.com won't strip */
}
a {
    color: #ee6a56;
    text-decoration: underline;
}
.h1 {
    font-size: 21px;
    font-weight: bold;
    Margin-bottom: 12px; /* Cap "M" so Outlook.com won't strip */
}
.h2 {
    font-size: 18px;
    font-weight: bold;
    Margin-bottom: 12px; /* Cap "M" so Outlook.com won't strip */
}

.contents {
    width: 100%;
}

/* One Column Layout*/
.one-column .contents {
    text-align: left;
}

.one-column p {
    font-size: 14px;
    Margin-bottom: 10px; /* Cap "M" so Outlook.com won't strip */
}


/*Two column Layout

Use text-align:center and display: inline-block to float columns side-by-side

this is applied to <div> to avoid nested tables

valign (in if tables) and vertical-align must match
*/
.two-column {
    text-align:center;
    font-size: 0; /* Gets rid of any gaps between columns inside the cell */
}

.two-column .column {
    width: 100%;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
}

.two-column .contents {
    font-size: 14px;
    text-align: left;
}

.two-column img {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.two-column .text {
    padding-top: 10px;
}


/*Three column Layout

Use text-align:center and display: inline-block to float columns side-by-side

this is applied to <div> to avoid nested tables

valign (in if tables) and vertical-align must match
*/
.three-column {
    text-align: center;
    font-size: 0; /* Gets rid of any gaps between columns inside the cell */
    padding-top: 10px;
    padding-bottom: 10px;
}

.three-column .column {
    width: 100%;
    max-width: 200px;
    display: inline-block;
    vertical-align: top;
}

.three-column .column:nth-child(odd) {
    background-color: #00f;
}

.three-column .column:nth-child(even) {
    background-color: #0f0;
}

.three-column .contents {
    font-size: 14px;
    text-align: left;
}

.three-column img {
    width: 100%;
    max-width: 180px;
    height: auto;
}

.three-column .text {
    padding-top: 10px;
}

/*Two column "Sidebar-left" Layout

Use text-align:center and display: inline-block to float columns side-by-side

this is applied to <div> to avoid nested tables

valign (in if tables) and vertical-align must match
*/
.left-sidebar {
    text-align: center;
    font-size: 0;
}
.left-sidebar .column {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.left-sidebar .left {
    max-width: 100px;
    background-color: #f00;
}

.left-sidebar .right {
    max-width: 500px;
}

.left-sidebar .img {
    width: 100%;
    max-width: 80px;
    height: auto;
}

.left-sidebar {
    font-size: 14px;
    text-align: center;
}

.left-sidebar a {
    color: #85ab70;
}

/*Two column "Sidebar-left" Layout

Use text-align:center and display: inline-block to float columns side-by-side

this is applied to <div> to avoid nested tables

valign (in if tables) and vertical-align must match
*/
.right-sidebar {
    text-align: center;
    font-size: 0;
}
.right-sidebar .column {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}
.right-sidebar .left {
    max-width: 100px;
    background-color: #f00;
}
.right-sidebar .right {
    max-width: 500px;
}
.right-sidebar .img {
    width: 100%;
    max-width: 80px;
    height: auto;
}
.right-sidebar .contents {
    font-size: 14px;
    text-align: center;
}
.right-sidebar a {
    color: #70bbd9;
}