|
|
@@ -4,273 +4,16 @@ |
|
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|
|
|
<title>{{ subject or "" }}</title> |
|
|
|
<style> |
|
|
|
/* ------------------------------------- |
|
|
|
GLOBAL |
|
|
|
------------------------------------- */ |
|
|
|
img { |
|
|
|
max-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
body { |
|
|
|
width: 100% !important; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.wrapper { |
|
|
|
background-color: #eee; |
|
|
|
} |
|
|
|
|
|
|
|
.wrapper * { |
|
|
|
margin:0; |
|
|
|
padding:0; |
|
|
|
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; |
|
|
|
font-size: 100%; |
|
|
|
line-height: 1.6; |
|
|
|
} |
|
|
|
|
|
|
|
/* ------------------------------------- |
|
|
|
ELEMENTS |
|
|
|
------------------------------------- */ |
|
|
|
.wrapper a { |
|
|
|
color: #348eda; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary{ |
|
|
|
text-decoration:none; |
|
|
|
color: #FFF !important; |
|
|
|
background-color: #348eda; |
|
|
|
border:solid #348eda; |
|
|
|
border-width:10px 20px; |
|
|
|
line-height:2; |
|
|
|
font-weight:bold; |
|
|
|
margin-right:10px; |
|
|
|
text-align:center; |
|
|
|
cursor:pointer; |
|
|
|
display: inline-block; |
|
|
|
border-radius: 25px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-secondary { |
|
|
|
text-decoration:none; |
|
|
|
color: #FFF !important; |
|
|
|
background-color: #aaa; |
|
|
|
border:solid #aaa; |
|
|
|
border-width:10px 20px; |
|
|
|
line-height:2; |
|
|
|
font-weight:bold; |
|
|
|
margin-right:10px; |
|
|
|
text-align:center; |
|
|
|
cursor:pointer; |
|
|
|
display: inline-block; |
|
|
|
border-radius: 25px; |
|
|
|
} |
|
|
|
|
|
|
|
.last { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.first { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.padding{ |
|
|
|
padding:10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.left-padding { |
|
|
|
padding-left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.breadcrumb { |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
|
|
|
|
.breadcrumb > li { |
|
|
|
display: inline-block; |
|
|
|
margin-left: 0px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
/* ------------------------------------- |
|
|
|
BODY |
|
|
|
------------------------------------- */ |
|
|
|
table.body-wrap { |
|
|
|
width: 100%; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
table.body-wrap .container{ |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* ------------------------------------- |
|
|
|
FOOTER |
|
|
|
------------------------------------- */ |
|
|
|
table.footer-wrap { |
|
|
|
width: 100%; |
|
|
|
clear:both!important; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-wrap .container p { |
|
|
|
font-size:12px; |
|
|
|
color:#666; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
table.footer-wrap a{ |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* ------------------------------------- |
|
|
|
TYPOGRAPHY |
|
|
|
------------------------------------- */ |
|
|
|
.wrapper h1, |
|
|
|
.wrapper h2, |
|
|
|
.wrapper h3{ |
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
|
|
|
line-height: 1.1; |
|
|
|
margin-top:15px; |
|
|
|
margin-bottom:15px; |
|
|
|
color:#000; |
|
|
|
line-height: 1.2; |
|
|
|
font-weight:200; |
|
|
|
} |
|
|
|
|
|
|
|
.wrapper h1 { |
|
|
|
font-size: 36px; |
|
|
|
} |
|
|
|
.wrapper h2 { |
|
|
|
font-size: 28px; |
|
|
|
} |
|
|
|
.wrapper h3 { |
|
|
|
font-size: 22px; |
|
|
|
} |
|
|
|
.wrapper hr { |
|
|
|
margin: 20px 0; |
|
|
|
border-top: 1px solid #eee; |
|
|
|
} |
|
|
|
.wrapper p, |
|
|
|
.wrapper ul, |
|
|
|
.wrapper ol { |
|
|
|
margin-bottom: 10px; |
|
|
|
font-weight: normal; |
|
|
|
font-size:14px; |
|
|
|
} |
|
|
|
|
|
|
|
.wrapper ul li, |
|
|
|
.wrapper ol li { |
|
|
|
margin-left:5px; |
|
|
|
list-style-position: inside; |
|
|
|
} |
|
|
|
|
|
|
|
/* --------------------------------------------------- |
|
|
|
RESPONSIVENESS |
|
|
|
Nuke it from orbit. It's the only way to be sure. |
|
|
|
------------------------------------------------------ */ |
|
|
|
|
|
|
|
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ |
|
|
|
.container { |
|
|
|
display:block!important; |
|
|
|
max-width:600px!important; |
|
|
|
margin:0 auto!important; /* makes it centered */ |
|
|
|
clear:both!important; |
|
|
|
} |
|
|
|
|
|
|
|
/* Set the padding on the td rather than the div for Outlook compatibility */ |
|
|
|
.body-wrap .container{ |
|
|
|
padding:20px; |
|
|
|
} |
|
|
|
|
|
|
|
/* This should also be a block element, so that it will fill 100% of the .container */ |
|
|
|
.content { |
|
|
|
max-width:600px; |
|
|
|
margin:0 auto; |
|
|
|
display:block; |
|
|
|
} |
|
|
|
|
|
|
|
/* Let's make sure tables in the content area are 100% wide */ |
|
|
|
.content table { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
a.no-decoration { |
|
|
|
text-decoration: none; |
|
|
|
color: inherit; |
|
|
|
} |
|
|
|
|
|
|
|
small, .small { |
|
|
|
font-size: 85%; |
|
|
|
} |
|
|
|
|
|
|
|
.text-muted { |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
pre, code { |
|
|
|
font-family: monospace !important; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
<div class="wrapper"> |
|
|
|
|
|
|
|
<!-- body --> |
|
|
|
<table class="body-wrap"> |
|
|
|
<tr> |
|
|
|
<td></td> |
|
|
|
<td class="container" bgcolor="#FFFFFF"> |
|
|
|
|
|
|
|
<!-- content --> |
|
|
|
<div class="content"> |
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<td> |
|
|
|
{{ content }} |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<!-- /content --> |
|
|
|
|
|
|
|
</td> |
|
|
|
<td></td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
<!-- /body --> |
|
|
|
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 14px;">{{ content }}</div> |
|
|
|
|
|
|
|
<!-- footer --> |
|
|
|
<table class="footer-wrap"> |
|
|
|
<tr> |
|
|
|
<td></td> |
|
|
|
<td class="container"> |
|
|
|
|
|
|
|
<!-- content --> |
|
|
|
<div class="content"> |
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<td align="center"> |
|
|
|
{{ footer }} |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<!-- /content --> |
|
|
|
<div style="margin-top: 30px; font-family: Helvetica, Arial, sans-serif; font-size: 11px;"> |
|
|
|
{{ footer }}</div> |
|
|
|
|
|
|
|
</td> |
|
|
|
<td></td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
<!-- /footer --> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="print-html">{{ print_html or "" }}</div> |
|
|
|
|
|
|
|
</body> |
|
|
|
</html> |