// 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