|
|
@@ -0,0 +1,290 @@ |
|
|
|
/* Base */ |
|
|
|
|
|
|
|
body, |
|
|
|
body *:not(html):not(style):not(br):not(tr):not(code) { |
|
|
|
box-sizing: border-box; |
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, |
|
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
body { |
|
|
|
-webkit-text-size-adjust: none; |
|
|
|
background-color: #ffffff; |
|
|
|
color: #718096; |
|
|
|
height: 100%; |
|
|
|
line-height: 1.4; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
width: 100% !important; |
|
|
|
} |
|
|
|
|
|
|
|
p, |
|
|
|
ul, |
|
|
|
ol, |
|
|
|
blockquote { |
|
|
|
line-height: 1.4; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: #3869d4; |
|
|
|
} |
|
|
|
|
|
|
|
a img { |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* Typography */ |
|
|
|
|
|
|
|
h1 { |
|
|
|
color: #3d4852; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 0; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 0; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 0; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 16px; |
|
|
|
line-height: 1.5em; |
|
|
|
margin-top: 0; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
p.sub { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
max-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* Layout */ |
|
|
|
|
|
|
|
.wrapper { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 100%; |
|
|
|
background-color: #edf2f7; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 100%; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* Header */ |
|
|
|
|
|
|
|
.header { |
|
|
|
padding: 25px 0; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.header a { |
|
|
|
color: #3d4852; |
|
|
|
font-size: 19px; |
|
|
|
font-weight: bold; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* Logo */ |
|
|
|
|
|
|
|
.logo { |
|
|
|
height: 75px; |
|
|
|
max-height: 75px; |
|
|
|
width: 75px; |
|
|
|
} |
|
|
|
|
|
|
|
/* Body */ |
|
|
|
|
|
|
|
.body { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 100%; |
|
|
|
background-color: #edf2f7; |
|
|
|
border-bottom: 1px solid #edf2f7; |
|
|
|
border-top: 1px solid #edf2f7; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.inner-body { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 570px; |
|
|
|
background-color: #ffffff; |
|
|
|
border-color: #e8e5ef; |
|
|
|
border-radius: 2px; |
|
|
|
border-width: 1px; |
|
|
|
box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015); |
|
|
|
margin: 0 auto; |
|
|
|
padding: 0; |
|
|
|
width: 570px; |
|
|
|
} |
|
|
|
|
|
|
|
/* Subcopy */ |
|
|
|
|
|
|
|
.subcopy { |
|
|
|
border-top: 1px solid #e8e5ef; |
|
|
|
margin-top: 25px; |
|
|
|
padding-top: 25px; |
|
|
|
} |
|
|
|
|
|
|
|
.subcopy p { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
/* Footer */ |
|
|
|
|
|
|
|
.footer { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 570px; |
|
|
|
margin: 0 auto; |
|
|
|
padding: 0; |
|
|
|
text-align: center; |
|
|
|
width: 570px; |
|
|
|
} |
|
|
|
|
|
|
|
.footer p { |
|
|
|
color: #b0adc5; |
|
|
|
font-size: 12px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.footer a { |
|
|
|
color: #b0adc5; |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
|
|
|
|
/* Tables */ |
|
|
|
|
|
|
|
.table table { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 100%; |
|
|
|
margin: 30px auto; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.table th { |
|
|
|
border-bottom: 1px solid #edeff2; |
|
|
|
margin: 0; |
|
|
|
padding-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.table td { |
|
|
|
color: #74787e; |
|
|
|
font-size: 15px; |
|
|
|
line-height: 18px; |
|
|
|
margin: 0; |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.content-cell { |
|
|
|
max-width: 100vw; |
|
|
|
padding: 32px; |
|
|
|
} |
|
|
|
|
|
|
|
/* Buttons */ |
|
|
|
|
|
|
|
.action { |
|
|
|
-premailer-cellpadding: 0; |
|
|
|
-premailer-cellspacing: 0; |
|
|
|
-premailer-width: 100%; |
|
|
|
margin: 30px auto; |
|
|
|
padding: 0; |
|
|
|
text-align: center; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.button { |
|
|
|
-webkit-text-size-adjust: none; |
|
|
|
border-radius: 4px; |
|
|
|
color: #fff; |
|
|
|
display: inline-block; |
|
|
|
overflow: hidden; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.button-blue, |
|
|
|
.button-primary { |
|
|
|
background-color: #2d3748; |
|
|
|
border-bottom: 8px solid #2d3748; |
|
|
|
border-left: 18px solid #2d3748; |
|
|
|
border-right: 18px solid #2d3748; |
|
|
|
border-top: 8px solid #2d3748; |
|
|
|
} |
|
|
|
|
|
|
|
.button-green, |
|
|
|
.button-success { |
|
|
|
background-color: #48bb78; |
|
|
|
border-bottom: 8px solid #48bb78; |
|
|
|
border-left: 18px solid #48bb78; |
|
|
|
border-right: 18px solid #48bb78; |
|
|
|
border-top: 8px solid #48bb78; |
|
|
|
} |
|
|
|
|
|
|
|
.button-red, |
|
|
|
.button-error { |
|
|
|
background-color: #e53e3e; |
|
|
|
border-bottom: 8px solid #e53e3e; |
|
|
|
border-left: 18px solid #e53e3e; |
|
|
|
border-right: 18px solid #e53e3e; |
|
|
|
border-top: 8px solid #e53e3e; |
|
|
|
} |
|
|
|
|
|
|
|
/* Panels */ |
|
|
|
|
|
|
|
.panel { |
|
|
|
border-left: #2d3748 solid 4px; |
|
|
|
margin: 21px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-content { |
|
|
|
background-color: #edf2f7; |
|
|
|
color: #718096; |
|
|
|
padding: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-content p { |
|
|
|
color: #718096; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-item { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-item p:last-of-type { |
|
|
|
margin-bottom: 0; |
|
|
|
padding-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* Utilities */ |
|
|
|
|
|
|
|
.break-all { |
|
|
|
word-break: break-all; |
|
|
|
} |