// TODO there is a ton of duplicate here that we can clean up! *:not(br):not(tr):not(html) { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; } body { width: 100% !important; height: 100%; margin: 0; line-height: 1.4; background-color: #F6F7F8; color: #3E4B5B; font-size: 16px; -webkit-text-size-adjust: none; } p, ul, ol, blockquote { line-height: 1.4; text-align: left; } a { color: #047BF8; } a img { border: none; } /* Layout ------------------------------ */ .email-wrapper { width: 100%; margin: 0; padding: 0; background-color: #F6F7F8; } .email-content { width: 100%; margin: 0; padding: 0; } /* Masthead ----------------------- */ .email-masthead { padding: 25px 0; text-align: center; } .email-masthead_logo { width: 94px; } .email-masthead_name { font-size: 16px; /*font-weight: bold;*/ color: #bbbfc3; text-decoration: none; /*text-shadow: 0 1px 0 white;*/ } /* Body ------------------------------ */ .email-body { width: 100%; margin: 0; padding: 0; border-top: 1px solid #EDEFF2; border-bottom: 1px solid #EDEFF2; background-color: #FFFFFF; } .email-body_inner { width: 570px; margin: 0 auto; padding: 0; background-color: #FFFFFF; } .email-footer { width: 570px; margin: 0 auto; padding: 0; text-align: center; } .email-footer p { color: #AAAAAA; } .body-action { width: 100%; margin: 30px auto; padding: 0; text-align: center; } .body-sub { margin-top: 25px; padding-top: 25px; border-top: 1px solid #EDEFF2; } .content-cell { padding: 35px; } .preheader { display: none !important; } /* Attribute list ------------------------------ */ .attributes { margin: 0 0 21px; } .attributes_content { background-color: #EDEFF2; padding: 16px; } .attributes_item { padding: 0; } /* Related Items ------------------------------ */ .related { width: 100%; margin: 0; padding: 25px 0 0 0; } .related_item { padding: 10px 0; color: #3E4B5B; font-size: 15px; line-height: 18px; } .related_item-title { display: block; margin: .5em 0 0; } .related_item-thumb { display: block; padding-bottom: 10px; } .related_heading { border-top: 1px solid #EDEFF2; text-align: center; padding: 25px 0 10px; } /* Discount Code ------------------------------ */ .discount { width: 100%; margin: 0; padding: 24px; background-color: #EDEFF2; border: 2px dashed #9BA2AB; } .discount_heading { text-align: center; } .discount_body { text-align: center; font-size: 15px; } /* Social Icons ------------------------------ */ .social { width: auto; } .social td { padding: 0; width: auto; } .social_icon { height: 20px; margin: 0 8px 10px 8px; padding: 0; } /* Data table ------------------------------ */ .purchase { width: 100%; margin: 0; padding: 35px 0; } .purchase_content { width: 100%; margin: 0; padding: 25px 0 0 0; } .purchase_item { padding: 10px 0; color: #3E4B5B; font-size: 15px; line-height: 18px; } .purchase_heading { padding-bottom: 8px; border-bottom: 1px solid #EDEFF2; } .purchase_heading p { margin: 0; color: #9BA2AB; font-size: 12px; } .purchase_footer { padding-top: 15px; border-top: 1px solid #EDEFF2; } .purchase_total { margin: 0; text-align: right; /*font-weight: bold;*/ color: #3E4B5B; } .purchase_total--label { padding: 0 15px 0 0; } /* Utilities ------------------------------ */ .align-right { text-align: right; } .align-left { text-align: left; } .align-center { text-align: center; } /*Media Queries ------------------------------ */ @media only screen and (max-width: 600px) { .email-body_inner, .email-footer { width: 100% !important; } } @media only screen and (max-width: 500px) { .button { width: 100% !important; } } /* Buttons ------------------------------ */ .button { background-color: #047BF8; border-top: 10px solid #047BF8; border-right: 18px solid #047BF8; border-bottom: 10px solid #047BF8; border-left: 18px solid #047BF8; display: inline-block; color: #FFF; text-decoration: none; border-radius: 3px; -webkit-text-size-adjust: none; line-height: 22px; font-size: 16px; color: #FFF; } .button--link { background-color: transparent; border-top: 10px solid transparent; border-right: 18px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid transparent; display: inline-block; color: #047BF8; text-decoration: underline; border-radius: 3px; /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);*/ -webkit-text-size-adjust: none; } .button--green { background-color: #22BC66; border-top: 10px solid #22BC66; border-right: 18px solid #22BC66; border-bottom: 10px solid #22BC66; border-left: 18px solid #22BC66; } .button--red { background-color: #FF6136; border-top: 10px solid #FF6136; border-right: 18px solid #FF6136; border-bottom: 10px solid #FF6136; border-left: 18px solid #FF6136; } /* Type ------------------------------ */ h1 { margin-top: 0; color: #3E4B5B; font-size: 19px; font-weight: bold; text-align: left; } h2 { margin-top: 0; color: #3E4B5B; font-size: 16px; font-weight: bold; text-align: left; } h3 { margin-top: 0; color: #3E4B5B; font-size: 14px; font-weight: bold; text-align: left; } p { margin-top: 0; color: #3E4B5B; font-size: 16px; line-height: 1.5em; text-align: left; } p.sub { font-size: 12px; } p.center { text-align: center; } .body-action.less-footer { margin-bottom: 10px; }