feat(invite): lots of work completing the new email template system and css inlineing, converted new_user_invite.html to new system, #2353

.gitignore

@@ -3,6 +3,7 @@ coverage/
 .aws-config.json
 awsconfig
 /dist
+/emails/dist
 /tmp
 
 docs/AWS_S3_BUCKET

emails/README.md

@@ -1,79 +1,8 @@
-# generator-ink-me [![Build Status](https://secure.travis-ci.org/dnnsldr/generator-ink-me.png?branch=master)](https://travis-ci.org/dnnsldr/generator-ink-me)
 
-A [Yeoman](http://yeoman.io) generator
+- npm install
+- grunt   (default task will build new inlines email templates)
+- grunt watch  (will build on source html or css change)
 
-This is a Yeoman generator for building emails based on [Zurb Ink](http://zurb.com/ink/) templates. This also uses Grunt to add livereload, remove unused CSS and then to inline all CSS for the final build.
+assembled email templates will be in dist/ and final
+inlined templates will be in ../public/emails/
 
-Email templates include:
-* Basic
-* Hero
-* Sidebar
-* Sidebar Hero
-* Order Confirmation
-* Shipping Confirmation
-* Shopify Order Confirmation
-* Shopify Shipping Confirmation
-
-## 
-## Getting Started
-##
-
-* Install: `npm install -g generator-ink-me`
-* Run `yo ink-me` in the folder you wish to have your files (ex: Sites/my-email-project-folder-name)
-
-
-## 
-## The Generator will ask you for the following information:
-##
-* Choose your template
-* Give your project a name -- This will be the github/bitbucket repository name
-* What domain will images be hosted on
-* What is the folder path on the server of the hosting provider you want to use
-* What is the `public` folder path for the images on the hosting server
-* What is your FTP username
-* What is your FTP password
-* Do you want to Litmus test 
-* Litmus username **(this is conditional based on if you want litmus testing)
-* Litmus password **(conditional)
-* Litmus API name (in your litmus Settings -> Profile -> Subdomain for API) **(conditional)
-* Choose your litmus testing clients **(conditional)
-
-##
-## Using LiveReload
-##
-
-To get started you can run `grunt` from the terminal. 
-
-The default "grunt" will start the `watch` process for all css files and the index.html file. LiveReload is now enabled. 
-Grab the [Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) for LiveReload to help with ports.
-
-##
-## When Your Ready to Finalize the Files for Production
-## Final Build
-##
-
-Once you are ready to package up your final build, grunt will get rid of the unused css from Ink and inline all the css, ftp your images to your image hosting provider, and run a Litmus test if you chose Litmus -
-
-* run the command `grunt inkify` from the terminal
-
-* This will create a copy of your index file with a reference to a newly created css file. This new css file gets rid of all of the unused css from Ink and makes a copy of the new css for reference in the copied html.
-
-* The grunt task of 'premailer' will take the newly reference html and css and move all css inline.
-
-* Images will be optimized
-
-* Images will be FTP'd to your hosting provider. 
-
-* Image relative URL's will be replaced with absolute URL's from Image Hosting Domain set during the generator.
-
-* A test will be sent to Litmus if you choose to with the clients you define.
-
-* Thats it. There will be a new folder called 'dist' that will have your `email-inline.html` file that is ready for use.
-
-## Tips
-
-* To get out of the 'Watch' when running the terminal, on MacOS click `control` and `c`. This will get your terminal back to the prompt to run new tasks.
-
-* Make all CSS changes in the `style.css`. The `ink.css` is from the bower componenet and is pulling the lastest ink css. These files will be merged togehter and will get rid of any unused when running `grunt inkify`.
-
-##

emails/assets/css/ink.css

@@ -4,47 +4,47 @@
 
 /* Client-specific Styles & Reset */
 
-#outlook a { 
-  padding:0; 
-} 
+#outlook a {
+  padding:0;
+}
 
-body{ 
-  width:100% !important; 
+body{
+  width:100% !important;
   min-width: 100%;
-  -webkit-text-size-adjust:100%; 
-  -ms-text-size-adjust:100%; 
-  margin:0; 
+  -webkit-text-size-adjust:100%;
+  -ms-text-size-adjust:100%;
+  margin:0;
   padding:0;
 }
 
-.ExternalClass { 
+.ExternalClass {
   width:100%;
-} 
-
-.ExternalClass, 
-.ExternalClass p, 
-.ExternalClass span, 
-.ExternalClass font, 
-.ExternalClass td, 
-.ExternalClass div { 
-  line-height: 100%; 
-} 
-
-#backgroundTable { 
-  margin:0; 
-  padding:0; 
-  width:100% !important; 
-  line-height: 100% !important; 
-}
-
-img { 
-  outline:none; 
-  text-decoration:none; 
+}
+
+.ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+  line-height: 100%;
+}
+
+#backgroundTable {
+  margin:0;
+  padding:0;
+  width:100% !important;
+  line-height: 100% !important;
+}
+
+img {
+  outline:none;
+  text-decoration:none;
   -ms-interpolation-mode: bicubic;
   width: auto;
-  max-width: 100%; 
-  float: left; 
-  clear: both; 
+  max-width: 100%;
+  float: left;
+  clear: both;
   display: block;
 }
 
@@ -53,7 +53,7 @@ center {
   min-width: 580px;
 }
 
-a img { 
+a img {
   border: none;
 }
 
@@ -66,12 +66,12 @@ table {
   border-collapse: collapse;
 }
 
-td { 
+td {
   word-break: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
-  border-collapse: collapse !important; 
+  border-collapse: collapse !important;
 }
 
 table, tr, td {
@@ -81,9 +81,9 @@ table, tr, td {
 }
 
 hr {
-  color: #d9d9d9; 
-  background-color: #d9d9d9; 
-  height: 1px; 
+  color: #d9d9d9;
+  background-color: #d9d9d9;
+  height: 1px;
   border: none;
 }
 
@@ -100,8 +100,8 @@ table.container {
   text-align: inherit;
 }
 
-table.row { 
-  padding: 0px; 
+table.row {
+  padding: 0px;
   width: 100%;
   position: relative;
 }
@@ -122,7 +122,7 @@ table.column {
 
 table.columns td,
 table.column td {
-  padding: 0px 0px 10px; 
+  padding: 0px 0px 10px;
 }
 
 table.columns td.sub-columns,
@@ -316,13 +316,13 @@ img.center {
 
 /* Typography */
 
-body, table.body, h1, h2, h3, h4, h5, h6, p, td { 
+body, table.body, h1, h2, h3, h4, h5, h6, p, td {
   color: #222222;
-  font-family: "Helvetica", "Arial", sans-serif; 
-  font-weight: normal; 
-  padding:0; 
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-weight: normal;
+  padding:0;
   margin: 0;
-  text-align: left; 
+  text-align: left;
   line-height: 1.3;
 }
 
@@ -343,7 +343,7 @@ p.lead, p.lede, p.leed {
   line-height:21px;
 }
 
-p { 
+p {
   margin-bottom: 10px;
 }
 
@@ -352,48 +352,48 @@ small {
 }
 
 a {
-  color: #2ba6cb; 
+  color: #2ba6cb;
   text-decoration: none;
 }
 
-a:hover { 
+a:hover {
   color: #2795b6 !important;
 }
 
-a:active { 
+a:active {
   color: #2795b6 !important;
 }
 
-a:visited { 
+a:visited {
   color: #2ba6cb !important;
 }
 
-h1 a, 
-h2 a, 
-h3 a, 
-h4 a, 
-h5 a, 
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
 h6 a {
   color: #2ba6cb;
 }
 
-h1 a:active, 
-h2 a:active,  
-h3 a:active, 
-h4 a:active, 
-h5 a:active, 
-h6 a:active { 
-  color: #2ba6cb !important; 
-} 
-
-h1 a:visited, 
-h2 a:visited,  
-h3 a:visited, 
-h4 a:visited, 
-h5 a:visited, 
-h6 a:visited { 
-  color: #2ba6cb !important; 
-} 
+h1 a:active,
+h2 a:active,
+h3 a:active,
+h4 a:active,
+h5 a:active,
+h6 a:active {
+  color: #2ba6cb !important;
+}
+
+h1 a:visited,
+h2 a:visited,
+h3 a:visited,
+h4 a:visited,
+h5 a:visited,
+h6 a:visited {
+  color: #2ba6cb !important;
+}
 
 /* Panels */
 
@@ -516,7 +516,7 @@ table.medium-button td a:visited,
 table.large-button:hover td a,
 table.large-button:active td a,
 table.large-button td a:visited {
-  color: #ffffff !important; 
+  color: #ffffff !important;
 }
 
 table.secondary td {

emails/assets/css/style.css

@@ -1 +1,67 @@
 
+body, table.body, h1, h2, h3, h4, h5, h6, p, td {
+  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: none;
+}
+
+table.facebook td {
+  background: #3b5998;
+  border-color: #2d4473;
+}
+
+table.facebook:hover td {
+  background: #2d4473 !important;
+}
+
+table.twitter td {
+  background: #00acee;
+  border-color: #0087bb;
+}
+
+table.twitter:hover td {
+  background: #0087bb !important;
+}
+
+table.google-plus td {
+  background-color: #DB4A39;
+  border-color: #CC0000;
+}
+
+table.google-plus:hover td {
+  background: #CC0000 !important;
+}
+
+.template-label {
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 11px;
+}
+
+.callout .wrapper {
+  padding-bottom: 20px;
+}
+
+.callout .panel {
+  background: #ECF8FF;
+  border-color: #b9e5ff;
+}
+
+.header {
+  background: #333;
+}
+
+.footer {
+  margin-top: 20px;
+}
+
+@media only screen and (max-width: 600px) {
+  table[class="body"] .right-text-pad {
+    padding-left: 10px !important;
+  }
+
+  table[class="body"] .left-text-pad {
+    padding-right: 10px !important;
+  }
+}
+

emails/dist/email1.html

@@ -1,193 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-   <!-- build:css css/tidy.css -->
-  <link inline rel="stylesheet" href="../assets/css/ink.css">
-  <link inline rel="stylesheet" href="../assets/css/style.css">
-  <!-- /build -->
-</head>
-<body>
-	<table class="body">
-				<tr>
-			<td class="center" align="center" valign="top">
-        {{.Test}}
-        <center>
-
-          <table class="row header">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="nine sub-columns last" style="text-align:left;background: #081a33;">
-                              <span class="template-label">Add <a href="mailto:%%replyemailaddress%%" style="text-decoration:none;">%%replyemailaddress%%</a> to your address book.</span>
-                            </td>
-                            <td class="three sub-columns last" style="text-align:right;background: #081a33;">
-                              <span class="template-label"><a href="%%view_email_url%%" style="text-decoration:none;">View Web Version</a></span>
-                            </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-          <table class="container">
-            <tr>
-              <td>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td>
-                            <h1>Hi, John Doe</h1>
-                						<p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-                						<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row callout">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td class="panel">
-                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row footer">
-                  <tr>
-                    <td class="wrapper">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="left-text-pad">
-
-                            <h5>Connect With Us:</h5>
-
-                            <table class="tiny-button facebook">
-                              <tr>
-                                <td>
-                                  <a href="#">Facebook</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button twitter">
-                              <tr>
-                                <td>
-                                  <a href="#">Twitter</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button google-plus">
-                              <tr>
-                                <td>
-                                  <a href="#">Google +</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                    <td class="wrapper last">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="last right-text-pad">
-                            <h5>Contact Info:</h5>
-                            <p>Phone: 555.555.5555</p>
-                            <p>Email: <a href="mailto:[info@riester.com]">[info@riester.com]</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-
-                <!-- Legal + Unsubscribe -->
-
-              <table class="row footer">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td align="center">
-                          <center>
-                            <p>If you no longer wish to recieve these emails <a href="%%unsub_center_url%%">unsubscribe</a>.</p>
-                            <p>%%Member_Busname%% | %%Member_Addr%% | %%Member_City%% %%Member_State%% %%Member_PostalCode%%</p>
-                          </center>
-                        </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-              <!-- container end below -->
-              </td>
-            </tr>
-          </table>
-
-        </center>
-			</td>
-		</tr>
-
-	</table>
-</body>
-</html>

emails/dist/email2.html

@@ -1,209 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-   <!-- build:css css/tidy.css -->
-  <link inline rel="stylesheet" href="../assets/css/ink.css">
-  <link inline rel="stylesheet" href="../assets/css/style.css">
-  <!-- /build -->
-</head>
-<body>
-	<table class="body">
-		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-   <!-- build:css css/tidy.css -->
-  <link inline rel="stylesheet" href="../assets/css/ink.css">
-  <link inline rel="stylesheet" href="../assets/css/style.css">
-  <!-- /build -->
-</head>
-<body>
-	<table class="body">
-		<tr>
-			<td class="center" align="center" valign="top">
-        <center>
-
-          <table class="row header">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="nine sub-columns last" style="text-align:left;background: #081a33;">
-                              <span class="template-label">Add <a href="mailto:%%replyemailaddress%%" style="text-decoration:none;">%%replyemailaddress%%</a> to your address book.</span>
-                            </td>
-                            <td class="three sub-columns last" style="text-align:right;background: #081a33;">
-                              <span class="template-label"><a href="%%view_email_url%%" style="text-decoration:none;">View Web Version</a></span>
-                            </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-          <table class="container">
-            <tr>
-              <td>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td>
-                            <h1>Hi, John Doe</h1>
-                						<p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-                						<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row callout">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td class="panel">
-                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row footer">
-                  <tr>
-                    <td class="wrapper">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="left-text-pad">
-
-                            <h5>Connect With Us:</h5>
-
-                            <table class="tiny-button facebook">
-                              <tr>
-                                <td>
-                                  <a href="#">Facebook</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button twitter">
-                              <tr>
-                                <td>
-                                  <a href="#">Twitter</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button google-plus">
-                              <tr>
-                                <td>
-                                  <a href="#">Google +</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                    <td class="wrapper last">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="last right-text-pad">
-                            <h5>Contact Info:</h5>
-                            <p>Phone: 555.555.5555</p>
-                            <p>Email: <a href="mailto:[info@riester.com]">[info@riester.com]</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-
-                <!-- Legal + Unsubscribe -->
-
-              <table class="row footer">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td align="center">
-                          <center>
-                            <p>If you no longer wish to recieve these emails <a href="%%unsub_center_url%%">unsubscribe</a>.</p>
-                            <p>%%Member_Busname%% | %%Member_Addr%% | %%Member_City%% %%Member_State%% %%Member_PostalCode%%</p>
-                          </center>
-                        </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-              <!-- container end below -->
-              </td>
-            </tr>
-          </table>
-
-        </center>
-			</td>
-		</tr>
-	</table>
-  <!-- used for email tracking with exact target -->
-  <custom name="opencounter" type="tracking">
-</body>
-</html>
-
-	</table>
-</body>
-</html>

emails/grunt/aliases.yaml

@@ -1,8 +1,8 @@
-default:
-	- 'watch'
 
-inkify:
+default:
     - 'clean'
+    - 'assemble'
+    - 'replace'
     - 'uncss'
     - 'processhtml'
     - 'premailer'

emails/grunt/premailer.js

@@ -8,7 +8,7 @@ module.exports = {
         expand: true,     // Enable dynamic expansion.
         cwd: 'dist',      // Src matches are relative to this path.
         src: ['*.html'], // Actual pattern(s) to match.
-        dest: 'dist/',   // Destination path prefix.
+        dest: '../public/emails/',   // Destination path prefix.
       }],
   	}
 };

emails/grunt/processhtml.js

@@ -2,7 +2,7 @@ module.exports = {
 	dist: {
     files: [{
       expand: true,     // Enable dynamic expansion.
-      cwd: 'templates',      // Src matches are relative to this path.
+      cwd: 'dist',      // Src matches are relative to this path.
       src: ['*.html'], // Actual pattern(s) to match.
       dest: 'dist/',   // Destination path prefix.
     }],

emails/grunt/uncss.js

@@ -1,6 +1,6 @@
 module.exports = {
     dist: {
-        src: ['templates/*.html'],
+        src: ['dist/*.html'],
         dest: 'dist/css/tidy.css',
         options: {
             report: 'min' // optional: include to report savings

emails/grunt/watch.js

@@ -3,8 +3,10 @@ module.exports = {
         files: [
             //what are the files that we want to watch
             'assets/css/*.css',
-            '*.html'
+            'templates/**/*.html',
+            'grunt/*.js',
         ],
+        tasks: ['default'],
         options: {
             nospawn: true,
             livereload: true,

emails/new_user_invite.html

@@ -1,867 +0,0 @@
-{{Subject .Subject "{{.InvitedBy}} has invited you to join Grafana"}}
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-	<style>
-/**********************************************
-* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
-**********************************************/
-
-/* Client-specific Styles & Reset */
-
-#outlook a {
-  padding:0;
-}
-
-body{
-  width:100% !important;
-  min-width: 100%;
-  -webkit-text-size-adjust:100%;
-  -ms-text-size-adjust:100%;
-  margin:0;
-  padding:0;
-}
-
-.ExternalClass {
-  width:100%;
-}
-
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
-  line-height: 100%;
-}
-
-#backgroundTable {
-  margin:0;
-  padding:0;
-  width:100% !important;
-  line-height: 100% !important;
-}
-
-img {
-  outline:none;
-  text-decoration:none;
-  -ms-interpolation-mode: bicubic;
-  width: auto;
-  max-width: 100%;
-  float: left;
-  clear: both;
-  display: block;
-}
-
-center {
-  width: 100%;
-  min-width: 580px;
-}
-
-a img {
-  border: none;
-}
-
-p {
-  margin: 0 0 0 10px;
-}
-
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-td {
-  word-break: break-word;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-  border-collapse: collapse !important;
-}
-
-table, tr, td {
-  padding: 0;
-  vertical-align: top;
-  text-align: left;
-}
-
-hr {
-  color: #d9d9d9;
-  background-color: #d9d9d9;
-  height: 1px;
-  border: none;
-}
-
-/* Responsive Grid */
-
-table.body {
-  height: 100%;
-  width: 100%;
-}
-
-table.container {
-  width: 580px;
-  margin: 0 auto;
-  text-align: inherit;
-}
-
-table.row {
-  padding: 0px;
-  width: 100%;
-  position: relative;
-}
-
-table.container table.row {
-  display: block;
-}
-
-td.wrapper {
-  padding: 10px 20px 0px 0px;
-  position: relative;
-}
-
-table.columns,
-table.column {
-  margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
-  padding: 0px 0px 10px;
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
-  padding-right: 10px;
-}
-
-td.sub-column, td.sub-columns {
-  min-width: 0px;
-}
-
-table.row td.last,
-table.container td.last {
-  padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-table.one center { min-width: 30px; }
-table.two center { min-width: 80px; }
-table.three center { min-width: 130px; }
-table.four center { min-width: 180px; }
-table.five center { min-width: 230px; }
-table.six center { min-width: 280px; }
-table.seven center { min-width: 330px; }
-table.eight center { min-width: 380px; }
-table.nine center { min-width: 430px; }
-table.ten center { min-width: 480px; }
-table.eleven center { min-width: 530px; }
-table.twelve center { min-width: 580px; }
-
-table.one .panel center { min-width: 10px; }
-table.two .panel center { min-width: 60px; }
-table.three .panel center { min-width: 110px; }
-table.four .panel center { min-width: 160px; }
-table.five .panel center { min-width: 210px; }
-table.six .panel center { min-width: 260px; }
-table.seven .panel center { min-width: 310px; }
-table.eight .panel center { min-width: 360px; }
-table.nine .panel center { min-width: 410px; }
-table.ten .panel center { min-width: 460px; }
-table.eleven .panel center { min-width: 510px; }
-table.twelve .panel center { min-width: 560px; }
-
-.body .columns td.one,
-.body .column td.one { width: 8.333333%; }
-.body .columns td.two,
-.body .column td.two { width: 16.666666%; }
-.body .columns td.three,
-.body .column td.three { width: 25%; }
-.body .columns td.four,
-.body .column td.four { width: 33.333333%; }
-.body .columns td.five,
-.body .column td.five { width: 41.666666%; }
-.body .columns td.six,
-.body .column td.six { width: 50%; }
-.body .columns td.seven,
-.body .column td.seven { width: 58.333333%; }
-.body .columns td.eight,
-.body .column td.eight { width: 66.666666%; }
-.body .columns td.nine,
-.body .column td.nine { width: 75%; }
-.body .columns td.ten,
-.body .column td.ten { width: 83.333333%; }
-.body .columns td.eleven,
-.body .column td.eleven { width: 91.666666%; }
-.body .columns td.twelve,
-.body .column td.twelve { width: 100%; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.expander {
-  visibility: hidden;
-  width: 0px;
-  padding: 0 !important;
-}
-
-table.columns .text-pad,
-table.column .text-pad {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
-  padding-left: 10px;
-}
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
-  padding-right: 10px;
-}
-
-/* Block Grid */
-
-.block-grid {
-  width: 100%;
-  max-width: 580px;
-}
-
-.block-grid td {
-  display: inline-block;
-  padding:10px;
-}
-
-.two-up td {
-  width:270px;
-}
-
-.three-up td {
-  width:173px;
-}
-
-.four-up td {
-  width:125px;
-}
-
-.five-up td {
-  width:96px;
-}
-
-.six-up td {
-  width:76px;
-}
-
-.seven-up td {
-  width:62px;
-}
-
-.eight-up td {
-  width:52px;
-}
-
-/* Alignment & Visibility Classes */
-
-table.center, td.center {
-  text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
-  text-align: center;
-}
-
-span.center {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-
-img.center {
-  margin: 0 auto;
-  float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
-  display: none;
-}
-
-/* Typography */
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td {
-  color: #222222;
-  font-family: "Helvetica", "Arial", sans-serif;
-  font-weight: normal;
-  padding:0;
-  margin: 0;
-  text-align: left;
-  line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  word-break: normal;
-}
-
-h1 {font-size: 40px;}
-h2 {font-size: 36px;}
-h3 {font-size: 32px;}
-h4 {font-size: 28px;}
-h5 {font-size: 24px;}
-h6 {font-size: 20px;}
-body, table.body, p, td {font-size: 14px;line-height:19px;}
-
-p.lead, p.lede, p.leed {
-  font-size: 18px;
-  line-height:21px;
-}
-
-p {
-  margin-bottom: 10px;
-}
-
-small {
-  font-size: 10px;
-}
-
-a {
-  color: #2ba6cb;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #2795b6 !important;
-}
-
-a:active {
-  color: #2795b6 !important;
-}
-
-a:visited {
-  color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
-  color: #2ba6cb;
-}
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
-  color: #2ba6cb !important;
-}
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
-  color: #2ba6cb !important;
-}
-
-/* Panels */
-
-.panel {
-  background: #f2f2f2;
-  border: 1px solid #d9d9d9;
-  padding: 10px !important;
-}
-
-.sub-grid table {
-  width: 100%;
-}
-
-.sub-grid td.sub-columns {
-  padding-bottom: 0;
-}
-
-/* Buttons */
-
-table.button,
-table.tiny-button,
-table.small-button,
-table.medium-button,
-table.large-button {
-  width: 100%;
-  overflow: hidden;
-}
-
-table.button td,
-table.tiny-button td,
-table.small-button td,
-table.medium-button td,
-table.large-button td {
-  display: block;
-  width: auto !important;
-  text-align: center;
-  background: #2ba6cb;
-  border: 1px solid #2284a1;
-  color: #ffffff;
-  padding: 8px 0;
-}
-
-table.tiny-button td {
-  padding: 5px 0 4px;
-}
-
-table.small-button td {
-  padding: 8px 0 7px;
-}
-
-table.medium-button td {
-  padding: 12px 0 10px;
-}
-
-table.large-button td {
-  padding: 21px 0 18px;
-}
-
-table.button td a,
-table.tiny-button td a,
-table.small-button td a,
-table.medium-button td a,
-table.large-button td a {
-  font-weight: bold;
-  text-decoration: none;
-  font-family: Helvetica, Arial, sans-serif;
-  color: #ffffff;
-  font-size: 16px;
-}
-
-table.tiny-button td a {
-  font-size: 12px;
-  font-weight: normal;
-}
-
-table.small-button td a {
-  font-size: 16px;
-}
-
-table.medium-button td a {
-  font-size: 20px;
-}
-
-table.large-button td a {
-  font-size: 24px;
-}
-
-table.button:hover td,
-table.button:visited td,
-table.button:active td {
-  background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:visited td a,
-table.button:active td a {
-  color: #fff !important;
-}
-
-table.button:hover td,
-table.tiny-button:hover td,
-table.small-button:hover td,
-table.medium-button:hover td,
-table.large-button:hover td {
-  background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:active td a,
-table.button td a:visited,
-table.tiny-button:hover td a,
-table.tiny-button:active td a,
-table.tiny-button td a:visited,
-table.small-button:hover td a,
-table.small-button:active td a,
-table.small-button td a:visited,
-table.medium-button:hover td a,
-table.medium-button:active td a,
-table.medium-button td a:visited,
-table.large-button:hover td a,
-table.large-button:active td a,
-table.large-button td a:visited {
-  color: #ffffff !important;
-}
-
-table.secondary td {
-  background: #e9e9e9;
-  border-color: #d0d0d0;
-  color: #555;
-}
-
-table.secondary td a {
-  color: #555;
-}
-
-table.secondary:hover td {
-  background: #d0d0d0 !important;
-  color: #555;
-}
-
-table.secondary:hover td a,
-table.secondary td a:visited,
-table.secondary:active td a {
-  color: #555 !important;
-}
-
-table.success td {
-  background: #5da423;
-  border-color: #457a1a;
-}
-
-table.success:hover td {
-  background: #457a1a !important;
-}
-
-table.alert td {
-  background: #c60f13;
-  border-color: #970b0e;
-}
-
-table.alert:hover td {
-  background: #970b0e !important;
-}
-
-table.radius td {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-
-table.round td {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
-}
-
-/* Outlook First */
-
-body.outlook p {
-  display: inline !important;
-}
-
-/*  Media Queries */
-
-@media only screen and (max-width: 600px) {
-
-  table[class="body"] img {
-    width: auto !important;
-    height: auto !important;
-  }
-
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-
-  table[class="body"] .row {
-    width: 100% !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper {
-    display: block !important;
-    padding-right: 0 !important;
-  }
-
-  table[class="body"] .columns,
-  table[class="body"] .column {
-    table-layout: fixed !important;
-    float: none !important;
-    width: 100% !important;
-    padding-right: 0px !important;
-    padding-left: 0px !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper.first .columns,
-  table[class="body"] .wrapper.first .column {
-    display: table !important;
-  }
-
-  table[class="body"] table.columns td,
-  table[class="body"] table.column td {
-    width: 100% !important;
-  }
-
-  table[class="body"] .columns td.one,
-  table[class="body"] .column td.one { width: 8.333333% !important; }
-  table[class="body"] .columns td.two,
-  table[class="body"] .column td.two { width: 16.666666% !important; }
-  table[class="body"] .columns td.three,
-  table[class="body"] .column td.three { width: 25% !important; }
-  table[class="body"] .columns td.four,
-  table[class="body"] .column td.four { width: 33.333333% !important; }
-  table[class="body"] .columns td.five,
-  table[class="body"] .column td.five { width: 41.666666% !important; }
-  table[class="body"] .columns td.six,
-  table[class="body"] .column td.six { width: 50% !important; }
-  table[class="body"] .columns td.seven,
-  table[class="body"] .column td.seven { width: 58.333333% !important; }
-  table[class="body"] .columns td.eight,
-  table[class="body"] .column td.eight { width: 66.666666% !important; }
-  table[class="body"] .columns td.nine,
-  table[class="body"] .column td.nine { width: 75% !important; }
-  table[class="body"] .columns td.ten,
-  table[class="body"] .column td.ten { width: 83.333333% !important; }
-  table[class="body"] .columns td.eleven,
-  table[class="body"] .column td.eleven { width: 91.666666% !important; }
-  table[class="body"] .columns td.twelve,
-  table[class="body"] .column td.twelve { width: 100% !important; }
-
-  table[class="body"] td.offset-by-one,
-  table[class="body"] td.offset-by-two,
-  table[class="body"] td.offset-by-three,
-  table[class="body"] td.offset-by-four,
-  table[class="body"] td.offset-by-five,
-  table[class="body"] td.offset-by-six,
-  table[class="body"] td.offset-by-seven,
-  table[class="body"] td.offset-by-eight,
-  table[class="body"] td.offset-by-nine,
-  table[class="body"] td.offset-by-ten,
-  table[class="body"] td.offset-by-eleven {
-    padding-left: 0 !important;
-  }
-
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-
-  table[class="body"] .right-text-pad,
-  table[class="body"] .text-pad-right {
-    padding-left: 10px !important;
-  }
-
-  table[class="body"] .left-text-pad,
-  table[class="body"] .text-pad-left {
-    padding-right: 10px !important;
-  }
-
-  table[class="body"] .hide-for-small,
-  table[class="body"] .show-for-desktop {
-    display: none !important;
-  }
-
-  table[class="body"] .show-for-small,
-  table[class="body"] .hide-for-desktop {
-    display: inherit !important;
-  }
-}
-
-  </style>
-  <style>
-
-    table.facebook td {
-      background: #3b5998;
-      border-color: #2d4473;
-    }
-
-    table.facebook:hover td {
-      background: #2d4473 !important;
-    }
-
-    table.twitter td {
-      background: #00acee;
-      border-color: #0087bb;
-    }
-
-    table.twitter:hover td {
-      background: #0087bb !important;
-    }
-
-    table.google-plus td {
-      background-color: #DB4A39;
-      border-color: #CC0000;
-    }
-
-    table.google-plus:hover td {
-      background: #CC0000 !important;
-    }
-
-    .template-label {
-      color: #ffffff;
-      font-weight: bold;
-      font-size: 11px;
-    }
-
-    .callout .wrapper {
-      padding-bottom: 20px;
-    }
-
-    .callout .panel {
-      background: #ECF8FF;
-      border-color: #b9e5ff;
-    }
-
-    .header {
-      background: #333;
-    }
-
-    .footer .wrapper {
-      background: #ebebeb;
-    }
-
-    .footer h5 {
-      padding-bottom: 10px;
-    }
-
-    table.columns .text-pad {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    table.columns .left-text-pad {
-      padding-left: 10px;
-    }
-
-    table.columns .right-text-pad {
-      padding-right: 10px;
-    }
-
-    @media only screen and (max-width: 600px) {
-
-      table[class="body"] .right-text-pad {
-        padding-left: 10px !important;
-      }
-
-      table[class="body"] .left-text-pad {
-        padding-right: 10px !important;
-      }
-    }
-
-	</style>
-</head>
-<body>
-	<table class="body">
-		<tr>
-			<td class="center" align="center" valign="top">
-        <center>
-
-          <table class="row header">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="six sub-columns center">
-															<img src="http://docs.grafana.org/img/logo_transparent_200x75.png" style="width: 150px; float: none; display: inline">
-                            </td>
-														<td class="expander"></td>
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-          <table class="container">
-            <tr>
-              <td>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td>
-														<h1>You're invited to sign up to Grafana and join {{.OrgName}}</h1>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-                      <table class="twelve columns">
-                        <tr>
-                          <td class="center">
-														<table class="button radius">
-															<tbody><tr>
-																	<td>
-																		<a href="{{.LinkUrl}}">Complete Sign Up</a>
-																	</td>
-																</tr>
-														</tbody></table>
-													</td>
-													<td class="expander"></td>
-												</tr>
-											</table>
-
-										</td>
-									</tr>
-								</table>
-
-								<!-- container end below -->
-							</td>
-						</tr>
-					</table>
-
-				</center>
-			</td>
-		</tr>
-	</table>
-</body>
-</html>

emails/templates/email1.html

@@ -1,177 +0,0 @@
-		<tr>
-			<td class="center" align="center" valign="top">
-        [[.Test]]
-        <center>
-
-          <table class="row header">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="nine sub-columns last" style="text-align:left;background: #081a33;">
-                              <span class="template-label">Add <a href="mailto:%%replyemailaddress%%" style="text-decoration:none;">%%replyemailaddress%%</a> to your address book.</span>
-                            </td>
-                            <td class="three sub-columns last" style="text-align:right;background: #081a33;">
-                              <span class="template-label"><a href="%%view_email_url%%" style="text-decoration:none;">View Web Version</a></span>
-                            </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-          <table class="container">
-            <tr>
-              <td>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td>
-                            <h1>Hi, John Doe</h1>
-                						<p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-                						<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row callout">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td class="panel">
-                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row footer">
-                  <tr>
-                    <td class="wrapper">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="left-text-pad">
-
-                            <h5>Connect With Us:</h5>
-
-                            <table class="tiny-button facebook">
-                              <tr>
-                                <td>
-                                  <a href="#">Facebook</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button twitter">
-                              <tr>
-                                <td>
-                                  <a href="#">Twitter</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button google-plus">
-                              <tr>
-                                <td>
-                                  <a href="#">Google +</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                    <td class="wrapper last">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="last right-text-pad">
-                            <h5>Contact Info:</h5>
-                            <p>Phone: 555.555.5555</p>
-                            <p>Email: <a href="mailto:[info@riester.com]">[info@riester.com]</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-
-                <!-- Legal + Unsubscribe -->
-
-              <table class="row footer">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td align="center">
-                          <center>
-                            <p>If you no longer wish to recieve these emails <a href="%%unsub_center_url%%">unsubscribe</a>.</p>
-                            <p>%%Member_Busname%% | %%Member_Addr%% | %%Member_City%% %%Member_State%% %%Member_PostalCode%%</p>
-                          </center>
-                        </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-              <!-- container end below -->
-              </td>
-            </tr>
-          </table>
-
-        </center>
-			</td>
-		</tr>

emails/templates/email2.html

@@ -1,193 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-   <!-- build:css css/tidy.css -->
-  <link inline rel="stylesheet" href="../assets/css/ink.css">
-  <link inline rel="stylesheet" href="../assets/css/style.css">
-  <!-- /build -->
-</head>
-<body>
-	<table class="body">
-		<tr>
-			<td class="center" align="center" valign="top">
-        <center>
-
-          <table class="row header">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="nine sub-columns last" style="text-align:left;background: #081a33;">
-                              <span class="template-label">Add <a href="mailto:%%replyemailaddress%%" style="text-decoration:none;">%%replyemailaddress%%</a> to your address book.</span>
-                            </td>
-                            <td class="three sub-columns last" style="text-align:right;background: #081a33;">
-                              <span class="template-label"><a href="%%view_email_url%%" style="text-decoration:none;">View Web Version</a></span>
-                            </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-          <table class="container">
-            <tr>
-              <td>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td>
-                            <h1>Hi, John Doe</h1>
-                						<p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-                						<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row callout">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td class="panel">
-                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row footer">
-                  <tr>
-                    <td class="wrapper">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="left-text-pad">
-
-                            <h5>Connect With Us:</h5>
-
-                            <table class="tiny-button facebook">
-                              <tr>
-                                <td>
-                                  <a href="#">Facebook</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button twitter">
-                              <tr>
-                                <td>
-                                  <a href="#">Twitter</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                            <br>
-
-                            <table class="tiny-button google-plus">
-                              <tr>
-                                <td>
-                                  <a href="#">Google +</a>
-                                </td>
-                              </tr>
-                            </table>
-
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                    <td class="wrapper last">
-
-                      <table class="six columns">
-                        <tr>
-                          <td class="last right-text-pad">
-                            <h5>Contact Info:</h5>
-                            <p>Phone: 555.555.5555</p>
-                            <p>Email: <a href="mailto:[info@riester.com]">[info@riester.com]</a></p>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-
-                <!-- Legal + Unsubscribe -->
-
-              <table class="row footer">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td align="center">
-                          <center>
-                            <p>If you no longer wish to recieve these emails <a href="%%unsub_center_url%%">unsubscribe</a>.</p>
-                            <p>%%Member_Busname%% | %%Member_Addr%% | %%Member_City%% %%Member_State%% %%Member_PostalCode%%</p>
-                          </center>
-                        </td>
-
-                          </tr>
-                        </table>
-
-                      </td>
-                    </tr>
-                  </table>
-
-                </center>
-              </td>
-            </tr>
-          </table>
-
-              <!-- container end below -->
-              </td>
-            </tr>
-          </table>
-
-        </center>
-			</td>
-		</tr>
-	</table>
-  <!-- used for email tracking with exact target -->
-  <custom name="opencounter" type="tracking">
-</body>
-</html>

emails/templates/layouts/default.html

@@ -10,7 +10,73 @@
 </head>
 <body>
 	<table class="body">
-		{{> body }}
+		<tr>
+			<td class="center" align="center" valign="top">
+        <center>
+
+          <table class="row header">
+            <tr>
+              <td class="center" align="center">
+                <center>
+
+                  <table class="container">
+                    <tr>
+                      <td class="wrapper last">
+
+                        <table class="twelve columns">
+                          <tr>
+                            <td class="six sub-columns center">
+															<img src="http://docs.grafana.org/img/logo_transparent_200x75.png" style="width: 150px; float: none; display: inline">
+                            </td>
+														<td class="expander"></td>
+                          </tr>
+                        </table>
+
+                      </td>
+                    </tr>
+                  </table>
+
+                </center>
+              </td>
+            </tr>
+          </table>
+
+					<table class="container">
+						<tr>
+							<td>
+
+
+								{{> body }}
+
+								<!-- footer -->
+								<table class="row footer">
+									<tr>
+										<td class="wrapper last">
+											<table class="twelve columns">
+												<tr>
+													<td align="center">
+														<center>
+															<p style="text-align:center;">
+																Sent by <a href="[[.AppUrl]]">Grafana v[[.BuildVersion]]</a>
+															</p>
+														</center>
+													</td>
+													<td class="expander"></td>
+												</tr>
+											</table>
+										</td>
+									</tr>
+								</table>
+
+								<!-- container end below -->
+							</td>
+						</tr>
+
+					</table>
+				</center>
+			</td>
+		</tr>
+
 	</table>
 </body>
 </html>

emails/templates/new_user_invite.html

@@ -0,0 +1,42 @@
+[[Subject .Subject "[[.InvitedBy]] has invited you to join Grafana"]]
+
+<table class="row">
+	<tr>
+		<td class="wrapper last">
+
+			<table class="twelve columns">
+				<tr>
+					<td>
+						<h3>You're invited to sign up to Grafana and join [[.OrgName]]</h3>
+					</td>
+					<td class="expander"></td>
+				</tr>
+			</table>
+
+		</td>
+	</tr>
+</table>
+
+<table class="row">
+	<tr>
+		<td class="wrapper last">
+			<table class="twelve columns">
+				<tr>
+					<td class="center">
+						<table class="button radius">
+							<tbody><tr>
+									<td>
+										<a href="[[.LinkUrl]]">Complete Sign Up</a>
+									</td>
+								</tr>
+						</tbody></table>
+					</td>
+					<td class="expander"></td>
+				</tr>
+			</table>
+
+		</td>
+	</tr>
+</table>
+
+

public/app/partials/signup_invited.html

@@ -15,7 +15,7 @@
 			</h3>
 
 			<div class="modal-tagline">
-				<em>{{invitedBy}}</em> has invited you to join the <span class="highlight-word">{{contextSrv.user.orgName}}</span> organization in Grafana.</br>Please complete the following to accept your invitation and continue:
+				<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
 			</div>
 
       <form name="inviteForm" class="login-form">

public/emails/README.md

@@ -0,0 +1,2 @@
+
+html files in this folder are generated from templates and build system in repo_root/emails

public/emails/new_user_invite.html

@@ -1,804 +1,115 @@
-{{Subject .Subject "{{.InvitedBy}} has invited you to join Grafana"}}
-
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-	<style>
-/**********************************************
-* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
-**********************************************/
-
-/* Client-specific Styles & Reset */
-
-#outlook a {
-  padding:0;
-}
-
-body{
-  width:100% !important;
-  min-width: 100%;
-  -webkit-text-size-adjust:100%;
-  -ms-text-size-adjust:100%;
-  margin:0;
-  padding:0;
-}
-
-.ExternalClass {
-  width:100%;
-}
-
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
-  line-height: 100%;
-}
-
-#backgroundTable {
-  margin:0;
-  padding:0;
-  width:100% !important;
-  line-height: 100% !important;
+	<meta name="viewport" content="width=device-width" />
+   
+</head>
+<body style="-ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important"><style type="text/css">
+body {
+width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
 }
-
 img {
-  outline:none;
-  text-decoration:none;
-  -ms-interpolation-mode: bicubic;
-  width: auto;
-  max-width: 100%;
-  float: left;
-  clear: both;
-  display: block;
-}
-
-center {
-  width: 100%;
-  min-width: 580px;
-}
-
-a img {
-  border: none;
-}
-
-p {
-  margin: 0 0 0 10px;
-}
-
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-td {
-  word-break: break-word;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-  border-collapse: collapse !important;
-}
-
-table, tr, td {
-  padding: 0;
-  vertical-align: top;
-  text-align: left;
-}
-
-hr {
-  color: #d9d9d9;
-  background-color: #d9d9d9;
-  height: 1px;
-  border: none;
-}
-
-/* Responsive Grid */
-
-table.body {
-  height: 100%;
-  width: 100%;
-}
-
-table.container {
-  width: 580px;
-  margin: 0 auto;
-  text-align: inherit;
-}
-
-table.row {
-  padding: 0px;
-  width: 100%;
-  position: relative;
-}
-
-table.container table.row {
-  display: block;
-}
-
-td.wrapper {
-  padding: 10px 20px 0px 0px;
-  position: relative;
-}
-
-table.columns,
-table.column {
-  margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
-  padding: 0px 0px 10px;
+outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
 }
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
-  padding-right: 10px;
-}
-
-td.sub-column, td.sub-columns {
-  min-width: 0px;
-}
-
-table.row td.last,
-table.container td.last {
-  padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-table.one center { min-width: 30px; }
-table.two center { min-width: 80px; }
-table.three center { min-width: 130px; }
-table.four center { min-width: 180px; }
-table.five center { min-width: 230px; }
-table.six center { min-width: 280px; }
-table.seven center { min-width: 330px; }
-table.eight center { min-width: 380px; }
-table.nine center { min-width: 430px; }
-table.ten center { min-width: 480px; }
-table.eleven center { min-width: 530px; }
-table.twelve center { min-width: 580px; }
-
-table.one .panel center { min-width: 10px; }
-table.two .panel center { min-width: 60px; }
-table.three .panel center { min-width: 110px; }
-table.four .panel center { min-width: 160px; }
-table.five .panel center { min-width: 210px; }
-table.six .panel center { min-width: 260px; }
-table.seven .panel center { min-width: 310px; }
-table.eight .panel center { min-width: 360px; }
-table.nine .panel center { min-width: 410px; }
-table.ten .panel center { min-width: 460px; }
-table.eleven .panel center { min-width: 510px; }
-table.twelve .panel center { min-width: 560px; }
-
-.body .columns td.one,
-.body .column td.one { width: 8.333333%; }
-.body .columns td.two,
-.body .column td.two { width: 16.666666%; }
-.body .columns td.three,
-.body .column td.three { width: 25%; }
-.body .columns td.four,
-.body .column td.four { width: 33.333333%; }
-.body .columns td.five,
-.body .column td.five { width: 41.666666%; }
-.body .columns td.six,
-.body .column td.six { width: 50%; }
-.body .columns td.seven,
-.body .column td.seven { width: 58.333333%; }
-.body .columns td.eight,
-.body .column td.eight { width: 66.666666%; }
-.body .columns td.nine,
-.body .column td.nine { width: 75%; }
-.body .columns td.ten,
-.body .column td.ten { width: 83.333333%; }
-.body .columns td.eleven,
-.body .column td.eleven { width: 91.666666%; }
-.body .columns td.twelve,
-.body .column td.twelve { width: 100%; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.expander {
-  visibility: hidden;
-  width: 0px;
-  padding: 0 !important;
+body {
+color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
 }
-
-table.columns .text-pad,
-table.column .text-pad {
-  padding-left: 10px;
-  padding-right: 10px;
+body {
+font-size: 14px; line-height: 19px;
 }
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
-  padding-left: 10px;
-}
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
-  padding-right: 10px;
-}
-
-/* Block Grid */
-
-.block-grid {
-  width: 100%;
-  max-width: 580px;
-}
-
-.block-grid td {
-  display: inline-block;
-  padding:10px;
-}
-
-.two-up td {
-  width:270px;
-}
-
-.three-up td {
-  width:173px;
-}
-
-.four-up td {
-  width:125px;
-}
-
-.five-up td {
-  width:96px;
-}
-
-.six-up td {
-  width:76px;
-}
-
-.seven-up td {
-  width:62px;
-}
-
-.eight-up td {
-  width:52px;
-}
-
-/* Alignment & Visibility Classes */
-
-table.center, td.center {
-  text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
-  text-align: center;
-}
-
-span.center {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-
-img.center {
-  margin: 0 auto;
-  float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
-  display: none;
-}
-
-/* Typography */
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td {
-  color: #222222;
-  font-family: "Helvetica", "Arial", sans-serif;
-  font-weight: normal;
-  padding:0;
-  margin: 0;
-  text-align: left;
-  line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  word-break: normal;
-}
-
-h1 {font-size: 40px;}
-h2 {font-size: 36px;}
-h3 {font-size: 32px;}
-h4 {font-size: 28px;}
-h5 {font-size: 24px;}
-h6 {font-size: 20px;}
-body, table.body, p, td {font-size: 14px;line-height:19px;}
-
-p.lead, p.lede, p.leed {
-  font-size: 18px;
-  line-height:21px;
-}
-
-p {
-  margin-bottom: 10px;
-}
-
-small {
-  font-size: 10px;
-}
-
-a {
-  color: #2ba6cb;
-  text-decoration: none;
-}
-
 a:hover {
-  color: #2795b6 !important;
+color: #2795b6 !important;
 }
-
 a:active {
-  color: #2795b6 !important;
+color: #2795b6 !important;
 }
-
 a:visited {
-  color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
-  color: #2ba6cb;
+color: #2ba6cb !important;
 }
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
-  color: #2ba6cb !important;
+table.button:hover td {
+background: #2795b6 !important;
 }
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
-  color: #2ba6cb !important;
+table.button:visited td {
+background: #2795b6 !important;
 }
-
-/* Panels */
-
-.panel {
-  background: #f2f2f2;
-  border: 1px solid #d9d9d9;
-  padding: 10px !important;
-}
-
-.sub-grid table {
-  width: 100%;
-}
-
-.sub-grid td.sub-columns {
-  padding-bottom: 0;
-}
-
-/* Buttons */
-
-table.button,
-table.tiny-button,
-table.small-button,
-table.medium-button,
-table.large-button {
-  width: 100%;
-  overflow: hidden;
-}
-
-table.button td,
-table.tiny-button td,
-table.small-button td,
-table.medium-button td,
-table.large-button td {
-  display: block;
-  width: auto !important;
-  text-align: center;
-  background: #2ba6cb;
-  border: 1px solid #2284a1;
-  color: #ffffff;
-  padding: 8px 0;
-}
-
-table.tiny-button td {
-  padding: 5px 0 4px;
-}
-
-table.small-button td {
-  padding: 8px 0 7px;
-}
-
-table.medium-button td {
-  padding: 12px 0 10px;
-}
-
-table.large-button td {
-  padding: 21px 0 18px;
-}
-
-table.button td a,
-table.tiny-button td a,
-table.small-button td a,
-table.medium-button td a,
-table.large-button td a {
-  font-weight: bold;
-  text-decoration: none;
-  font-family: Helvetica, Arial, sans-serif;
-  color: #ffffff;
-  font-size: 16px;
-}
-
-table.tiny-button td a {
-  font-size: 12px;
-  font-weight: normal;
-}
-
-table.small-button td a {
-  font-size: 16px;
-}
-
-table.medium-button td a {
-  font-size: 20px;
-}
-
-table.large-button td a {
-  font-size: 24px;
-}
-
-table.button:hover td,
-table.button:visited td,
 table.button:active td {
-  background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:visited td a,
-table.button:active td a {
-  color: #fff !important;
-}
-
-table.button:hover td,
-table.tiny-button:hover td,
-table.small-button:hover td,
-table.medium-button:hover td,
-table.large-button:hover td {
-  background: #2795b6 !important;
+background: #2795b6 !important;
 }
-
-table.button:hover td a,
-table.button:active td a,
-table.button td a:visited,
-table.tiny-button:hover td a,
-table.tiny-button:active td a,
-table.tiny-button td a:visited,
-table.small-button:hover td a,
-table.small-button:active td a,
-table.small-button td a:visited,
-table.medium-button:hover td a,
-table.medium-button:active td a,
-table.medium-button td a:visited,
-table.large-button:hover td a,
-table.large-button:active td a,
-table.large-button td a:visited {
-  color: #ffffff !important;
-}
-
-table.secondary td {
-  background: #e9e9e9;
-  border-color: #d0d0d0;
-  color: #555;
+table.button:hover td a {
+color: #fff !important;
 }
-
-table.secondary td a {
-  color: #555;
+table.button:visited td a {
+color: #fff !important;
 }
-
-table.secondary:hover td {
-  background: #d0d0d0 !important;
-  color: #555;
-}
-
-table.secondary:hover td a,
-table.secondary td a:visited,
-table.secondary:active td a {
-  color: #555 !important;
-}
-
-table.success td {
-  background: #5da423;
-  border-color: #457a1a;
-}
-
-table.success:hover td {
-  background: #457a1a !important;
+table.button:active td a {
+color: #fff !important;
 }
-
-table.alert td {
-  background: #c60f13;
-  border-color: #970b0e;
+table.button:hover td {
+background: #2795b6 !important;
 }
-
-table.alert:hover td {
-  background: #970b0e !important;
+table.button:hover td a {
+color: #ffffff !important;
 }
-
-table.radius td {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+table.button:active td a {
+color: #ffffff !important;
 }
-
-table.round td {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
+table.button td a:visited {
+color: #ffffff !important;
 }
-
-/* Outlook First */
-
-body.outlook p {
-  display: inline !important;
+body {
+font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
 }
-
-/*  Media Queries */
-
 @media only screen and (max-width: 600px) {
-
   table[class="body"] img {
-    width: auto !important;
-    height: auto !important;
+    width: auto !important; height: auto !important;
   }
-
   table[class="body"] center {
     min-width: 0 !important;
   }
-
   table[class="body"] .container {
     width: 95% !important;
   }
-
   table[class="body"] .row {
-    width: 100% !important;
-    display: block !important;
+    width: 100% !important; display: block !important;
   }
-
   table[class="body"] .wrapper {
-    display: block !important;
-    padding-right: 0 !important;
+    display: block !important; padding-right: 0 !important;
   }
-
-  table[class="body"] .columns,
-  table[class="body"] .column {
-    table-layout: fixed !important;
-    float: none !important;
-    width: 100% !important;
-    padding-right: 0px !important;
-    padding-left: 0px !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper.first .columns,
-  table[class="body"] .wrapper.first .column {
-    display: table !important;
+  table[class="body"] .columns {
+    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
   }
-
-  table[class="body"] table.columns td,
-  table[class="body"] table.column td {
+  table[class="body"] table.columns td {
     width: 100% !important;
   }
-
-  table[class="body"] .columns td.one,
-  table[class="body"] .column td.one { width: 8.333333% !important; }
-  table[class="body"] .columns td.two,
-  table[class="body"] .column td.two { width: 16.666666% !important; }
-  table[class="body"] .columns td.three,
-  table[class="body"] .column td.three { width: 25% !important; }
-  table[class="body"] .columns td.four,
-  table[class="body"] .column td.four { width: 33.333333% !important; }
-  table[class="body"] .columns td.five,
-  table[class="body"] .column td.five { width: 41.666666% !important; }
-  table[class="body"] .columns td.six,
-  table[class="body"] .column td.six { width: 50% !important; }
-  table[class="body"] .columns td.seven,
-  table[class="body"] .column td.seven { width: 58.333333% !important; }
-  table[class="body"] .columns td.eight,
-  table[class="body"] .column td.eight { width: 66.666666% !important; }
-  table[class="body"] .columns td.nine,
-  table[class="body"] .column td.nine { width: 75% !important; }
-  table[class="body"] .columns td.ten,
-  table[class="body"] .column td.ten { width: 83.333333% !important; }
-  table[class="body"] .columns td.eleven,
-  table[class="body"] .column td.eleven { width: 91.666666% !important; }
-  table[class="body"] .columns td.twelve,
-  table[class="body"] .column td.twelve { width: 100% !important; }
-
-  table[class="body"] td.offset-by-one,
-  table[class="body"] td.offset-by-two,
-  table[class="body"] td.offset-by-three,
-  table[class="body"] td.offset-by-four,
-  table[class="body"] td.offset-by-five,
-  table[class="body"] td.offset-by-six,
-  table[class="body"] td.offset-by-seven,
-  table[class="body"] td.offset-by-eight,
-  table[class="body"] td.offset-by-nine,
-  table[class="body"] td.offset-by-ten,
-  table[class="body"] td.offset-by-eleven {
-    padding-left: 0 !important;
+  table[class="body"] .columns td.six {
+    width: 50% !important;
   }
-
   table[class="body"] table.columns td.expander {
     width: 1px !important;
   }
-
-  table[class="body"] .right-text-pad,
-  table[class="body"] .text-pad-right {
-    padding-left: 10px !important;
-  }
-
-  table[class="body"] .left-text-pad,
-  table[class="body"] .text-pad-left {
-    padding-right: 10px !important;
-  }
-
-  table[class="body"] .hide-for-small,
-  table[class="body"] .show-for-desktop {
-    display: none !important;
-  }
-
-  table[class="body"] .show-for-small,
-  table[class="body"] .hide-for-desktop {
-    display: inherit !important;
-  }
 }
-
-  </style>
-  <style>
-
-    table.facebook td {
-      background: #3b5998;
-      border-color: #2d4473;
-    }
-
-    table.facebook:hover td {
-      background: #2d4473 !important;
-    }
-
-    table.twitter td {
-      background: #00acee;
-      border-color: #0087bb;
-    }
-
-    table.twitter:hover td {
-      background: #0087bb !important;
-    }
-
-    table.google-plus td {
-      background-color: #DB4A39;
-      border-color: #CC0000;
-    }
-
-    table.google-plus:hover td {
-      background: #CC0000 !important;
-    }
-
-    .template-label {
-      color: #ffffff;
-      font-weight: bold;
-      font-size: 11px;
-    }
-
-    .callout .wrapper {
-      padding-bottom: 20px;
-    }
-
-    .callout .panel {
-      background: #ECF8FF;
-      border-color: #b9e5ff;
-    }
-
-    .header {
-      background: #333;
-    }
-
-    .footer .wrapper {
-      background: #ebebeb;
-    }
-
-    .footer h5 {
-      padding-bottom: 10px;
-    }
-
-    table.columns .text-pad {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    table.columns .left-text-pad {
-      padding-left: 10px;
-    }
-
-    table.columns .right-text-pad {
-      padding-right: 10px;
-    }
-
-    @media only screen and (max-width: 600px) {
-
-      table[class="body"] .right-text-pad {
-        padding-left: 10px !important;
-      }
-
-      table[class="body"] .left-text-pad {
-        padding-right: 10px !important;
-      }
-    }
-
-	</style>
-</head>
-<body>
-	<table class="body">
-		<tr>
-			<td class="center" align="center" valign="top">
-        <center>
-
-          <table class="row header">
-            <tr>
-              <td class="center" align="center">
-                <center>
-
-                  <table class="container">
-                    <tr>
-                      <td class="wrapper last">
-
-                        <table class="twelve columns">
-                          <tr>
-                            <td class="six sub-columns center">
-															<img src="http://docs.grafana.org/img/logo_transparent_200x75.png" style="width: 150px; float: none; display: inline">
+</style>
+	<table class="body" style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; border-collapse: collapse; border-spacing: 0; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; height: 100%; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
+		<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+			<td class="center" align="center" valign="top" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: center; vertical-align: top; word-break: break-word">
+        <center style="min-width: 580px; width: 100%">
+
+          <table class="row header" style="background: #333; border-collapse: collapse; border-spacing: 0; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%" bgcolor="#333">
+            <tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+              <td class="center" align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: center; vertical-align: top; word-break: break-word" valign="top">
+                <center style="min-width: 580px; width: 100%">
+
+                  <table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px">
+                    <tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+                      <td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
+
+                        <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
+                          <tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+                            <td class="six sub-columns center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; min-width: 0px; padding: 0px 10px 10px 0px; text-align: center; vertical-align: top; width: 50%; word-break: break-word" align="center" valign="top">
+															<img src="http://docs.grafana.org/img/logo_transparent_200x75.png" style="-ms-interpolation-mode: bicubic; clear: both; display: inline; float: none; max-width: 100%; outline: none; text-decoration: none; width: 150px" align="none" />
                             </td>
-														<td class="expander"></td>
+														<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
                           </tr>
                         </table>
 
@@ -811,57 +122,84 @@ body.outlook p {
             </tr>
           </table>
 
-          <table class="container">
-            <tr>
-              <td>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-
-                      <table class="twelve columns">
-                        <tr>
-                          <td>
-														<h1>You're invited to sign up to Grafana and join {{.OrgName}}</h1>
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                  </tr>
-                </table>
-
-                <table class="row">
-                  <tr>
-                    <td class="wrapper last">
-                      <table class="twelve columns">
-                        <tr>
-                          <td class="center">
-														<table class="button radius">
-															<tbody><tr>
-																	<td>
-																		<a href="{{.LinkUrl}}">Complete Sign Up</a>
-																	</td>
-																</tr>
-														</tbody></table>
+					<table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px">
+						<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+							<td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
+
+
+								{{Subject .Subject "{{.InvitedBy}} has invited you to join Grafana"}}
+
+<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
+	<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+		<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
+
+			<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
+				<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+					<td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
+						<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 32px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; word-break: normal" align="left">You're invited to sign up to Grafana and join {{.OrgName}}</h3>
+					</td>
+					<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
+				</tr>
+			</table>
+
+		</td>
+	</tr>
+</table>
+
+<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
+	<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+		<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
+			<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
+				<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+					<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
+						<table class="button radius" style="border-collapse: collapse; border-spacing: 0; overflow: hidden; padding: 0; text-align: left; vertical-align: top; width: 100%">
+							<tbody><tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+									<td style="-moz-border-radius: 3px; -moz-hyphens: auto; -webkit-border-radius: 3px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: #2ba6cb; border-collapse: collapse !important; border-radius: 3px; border: 1px solid #2284a1; color: #ffffff; display: block; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 8px 0; text-align: center; vertical-align: top; width: auto !important; word-break: break-word" align="center" bgcolor="#2ba6cb" valign="top">
+										<a href="{{.LinkUrl}}" style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; text-decoration: none">Complete Sign Up</a>
+									</td>
+								</tr>
+						</tbody></table>
+					</td>
+					<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
+				</tr>
+			</table>
+
+		</td>
+	</tr>
+</table>
+
+
+
+
+								
+								<table class="row footer" style="border-collapse: collapse; border-spacing: 0; display: block; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
+									<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+										<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
+											<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
+												<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+													<td align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: left; vertical-align: top; word-break: break-word" valign="top">
+														<center style="min-width: 580px; width: 100%">
+															<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: center" align="center">
+																Sent by <a href="{{.AppUrl}}" style="color: #2ba6cb; text-decoration: none">Grafana v{{.BuildVersion}}</a>
+															</p>
+														</center>
 													</td>
-													<td class="expander"></td>
+													<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
 												</tr>
 											</table>
-
 										</td>
 									</tr>
 								</table>
 
-								<!-- container end below -->
+								
 							</td>
 						</tr>
-					</table>
 
+					</table>
 				</center>
 			</td>
 		</tr>
+
 	</table>
 </body>
 </html>