// This stylesheet is embedded into all our HTML emails. In addition, its styles // are placed inline in each HTML email as necessary to work around email // clients being stupid. // // Based on Slate by Litmus // litmus.com/resources/free-responsive-email-templates
$meta-data-color: #666666 $primary-action-color: #4488CC
// CLIENT-SPECIFIC STYLES
// Force Outlook to provide a “view in browser” message outlook a
padding: 0
// Force Hotmail to display emails at full width .ReadMsgBody
width: 100%
.ExternalClass
width: 100% line-height: 100% // Force Hotmail to display normal line spacing p, span, font, td, div line-height: 100%
// Prevent WebKit and Windows mobile changing default text sizes body, table, td, a
-webkit-text-size-adjust: 100% -ms-text-size-adjust: 100%
// Remove spacing between tables in Outlook 2007 and up table, td
mso-table-lspace: 0pt mso-table-rspace: 0pt
// Allow smoother rendering of resized image in Internet Explorer img
-ms-interpolation-mode: bicubic
// RESET STYLES
body
margin: 0 padding: 0
img
border: 0 height: auto line-height: 100% outline: none text-decoration: none
table
border-collapse: collapse !important
body
height: 100% !important margin: 0 padding: 0 width: 100% !important
// iOS BLUE LINKS .appleBody a
color: #68440a text-decoration: none
.appleFooter a
color: #999999 text-decoration: none
.note
color: $meta-data-color font: size: 14px style: italic line-height: 18px padding: 0 0 0 0
.mobile-button
background-color: $primary-action-color border: bottom: 15px solid $primary-action-color left: 25px solid $primary-action-color right: 25px solid $primary-action-color top: 15px solid $primary-action-color border-radius: 3px -moz-border-radius: 3px -webkit-border-radius: 3px color: #ffffff display: inline-block font: family: Helvetica, Arial, sans-serif size: 16px weight: normal text-decoration: none
.preheader-text
color: #fefefe display: none font: family: Helvetica, Arial, sans-serif size: 1px line-height: 1px max-height: 0px max-width: 0px opacity: 0 overflow: hidden
td
color: $body-text-color font: family: Helvetica, Arial, sans-serif size: 16px line-height: 25px &.call-to-action padding: 25px &.footer-copy font-size: 12px line-height: 18px &.footer-padding padding: 70px 0px 20px 0px &.logo padding: 20px 0px 30px 0px &.section-padding padding: 15px 15px 15px 15px
// MOBILE STYLES @media screen and (max-width: 525px)
// Allows for fluid tables table[class="wrapper"] width: 100% !important // Adjusts layout of logo image td &[class="logo"] padding: 20px 0 20px 0 !important text-align: left img margin: 0 auto !important &[class="mobile-hide"] display: none // Use these classes to hide content on mobile img &[class="mobile-hide"] display: none !important &[class="img-max"] height: auto !important max-width: 100% !important // Full-width tables table[class="responsive-table"] width: 100% !important // Utility classes for adjusting padding on mobile td &[class="padding"] padding: 10px 5% 15px 5% !important &[class="padding-copy"] padding: 10px 5% 10px 5% !important text-align: left !important &[class="padding-meta"] padding: 30px 5% 0px 5% !important text-align: center &[class="no-pad"] padding: 0 0 20px 0 !important &[class="no-padding"] padding: 0 !important &[class="section-padding"] padding: 10px 15px 10px 15px !important &[class="section-padding-bottom-image"] padding: 50px 15px 0 15px !important &[class="mobile-wrapper"] padding: 10px 5% 15px 5% !important // Adjust buttons on mobile table[class="mobile-button-container"] margin: 0 auto width: 100% !important a[class="mobile-button"] border: 0 !important font-size: 16px !important padding: 15px !important width: 90% !important